@tsed/react-formio 3.0.0-alpha.8 → 3.0.0-rc.1

package/dist/organisms/form/builder/FormEditCtas.js

@@ -1,52 +1,53 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { useTooltip as a } from "../../../hooks/useTooltip.js";
-import { registerComponent as y, getComponent as h } from "../../../registries/components.js";
-function b({
-  saveText: p = "Save",
-  disabled: g,
-  options: t = {},
-  onCopy: m,
-  hasUndo: v,
-  hasRedo: f,
-  onUndo: l,
-  onRedo: s,
-  onReset: d,
-  onSubmit: o
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useI18n as N } from "../../../hooks/useI18n.js";
+import { useTooltip as c } from "../../../hooks/useTooltip.js";
+import { registerComponent as k, getComponent as s } from "../../../registries/components.js";
+function R({
+  saveText: m = "Save",
+  disabled: d,
+  onCopy: a,
+  hasUndo: h,
+  hasRedo: p,
+  onUndo: g,
+  onRedo: v,
+  onReset: l,
+  onSubmit: f,
+  options: t
 }) {
-  const { i18n: c = (u) => u } = t, C = a({
+  const { t: i } = N(t?.i18n), u = c({
     trigger: "hover",
     placement: "top",
-    title: c("Copy")
-  }), T = a({
+    title: i("Copy")
+  }), C = c({
     trigger: "hover",
     placement: "top",
-    title: c("Undo last change")
-  }), N = a({
+    title: i("Undo last change")
+  }), b = c({
     trigger: "hover",
     placement: "top",
-    title: c("Redo last change")
-  }), k = a({
+    title: i("Redo last change")
+  }), T = c({
     trigger: "hover",
     placement: "top",
-    title: c("Reset all changes")
-  }), i = h("Button"), r = h("Icon");
-  return /* @__PURE__ */ e("div", { className: "form-edit__actions", children: /* @__PURE__ */ n("div", { children: [
-    /* @__PURE__ */ n(i, { variant: "primary", className: "btn-save", disabled: g, onClick: () => o == null ? void 0 : o(), children: [
-      /* @__PURE__ */ e(r, { name: "save", iconset: t.iconset }),
-      p
+    title: i("Reset all changes")
+  }), n = s("Button"), o = s("Icon");
+  return /* @__PURE__ */ e("div", { className: "form-edit__actions", children: /* @__PURE__ */ r("div", { children: [
+    /* @__PURE__ */ r(n, { variant: "primary", className: "btn-save", disabled: d, onClick: () => f?.(), children: [
+      /* @__PURE__ */ e(o, { name: "save", iconset: t?.iconset }),
+      m
     ] }),
-    /* @__PURE__ */ n("div", { children: [
-      /* @__PURE__ */ e(i, { variant: "light", className: "btn-undo", disabled: !v, onClick: () => l == null ? void 0 : l(), ref: T, children: /* @__PURE__ */ e(r, { name: "undo", iconset: t.iconset }) }),
-      /* @__PURE__ */ e(i, { variant: "light", className: "btn-redo", disabled: !f, onClick: () => s == null ? void 0 : s(), ref: N, children: /* @__PURE__ */ e(r, { name: "redo", iconset: t.iconset }) })
+    /* @__PURE__ */ r("div", { children: [
+      /* @__PURE__ */ e(n, { variant: "light", className: "btn-undo", disabled: !h, onClick: () => g?.(), ref: C, children: /* @__PURE__ */ e(o, { name: "undo", iconset: t?.iconset }) }),
+      /* @__PURE__ */ e(n, { variant: "light", className: "btn-redo", disabled: !p, onClick: () => v?.(), ref: b, children: /* @__PURE__ */ e(o, { name: "redo", iconset: t?.iconset }) })
     ] }),
-    /* @__PURE__ */ n("div", { children: [
-      m && /* @__PURE__ */ e(i, { variant: "light", className: "btn-copy", onClick: () => m(), ref: C, children: /* @__PURE__ */ e(r, { name: "copy", iconset: t.iconset }) }),
-      /* @__PURE__ */ e(i, { variant: "light", className: "btn-reset", onClick: () => d && d(), ref: k, children: /* @__PURE__ */ e(r, { name: "reset", iconset: t.iconset }) })
+    /* @__PURE__ */ r("div", { children: [
+      a && /* @__PURE__ */ e(n, { variant: "light", className: "btn-copy", onClick: () => a(), ref: u, children: /* @__PURE__ */ e(o, { name: "copy", iconset: t?.iconset }) }),
+      /* @__PURE__ */ e(n, { variant: "light", className: "btn-reset", onClick: () => l && l(), ref: T, children: /* @__PURE__ */ e(o, { name: "reset", iconset: t?.iconset }) })
     ] })
   ] }) });
 }
-y("FormEditCTAs", b);
+k("FormEditCTAs", R);
 export {
-  b as FormEditCTAs
+  R as FormEditCTAs
 };
 //# sourceMappingURL=FormEditCtas.js.map

package/dist/organisms/form/builder/FormEditCtas.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormEditCtas.js","sources":["../../../../src/organisms/form/builder/FormEditCtas.tsx"],"sourcesContent":["import { ReactElement } from \"react\";\n\nimport { Icon as DefaultIcon } from \"../../../atoms/icon/Icon\";\nimport { useTooltip } from \"../../../hooks/useTooltip\";\nimport type { FormOptions } from \"../../../interfaces\";\nimport { Button as DefaultButton } from \"../../../molecules/button/Button\";\nimport { getComponent, registerComponent } from \"../../../registries/components\";\n\nexport interface FormEditCTAsProps extends Record<string, unknown> {\n  saveText?: string;\n  options?: FormOptions;\n  hasUndo?: boolean;\n  hasRedo?: boolean;\n  disabled?: boolean;\n  onCopy?: () => void;\n  onSubmit?: () => void;\n  onReset?: () => void;\n  onUndo?: () => void;\n  onRedo?: () => void;\n}\n\nexport function FormEditCTAs({\n  saveText = \"Save\",\n  disabled,\n  options = {},\n  onCopy,\n  hasUndo,\n  hasRedo,\n  onUndo,\n  onRedo,\n  onReset,\n  onSubmit\n}: FormEditCTAsProps): ReactElement {\n  const { i18n: t = (t: string): string => t } = options;\n\n  const copyTooltipRef: any = useTooltip({\n    trigger: \"hover\",\n    placement: \"top\",\n    title: t(\"Copy\")\n  });\n\n  const undoTooltipRef: any = useTooltip({\n    trigger: \"hover\",\n    placement: \"top\",\n    title: t(\"Undo last change\")\n  });\n\n  const redoTooltipRef: any = useTooltip({\n    trigger: \"hover\",\n    placement: \"top\",\n    title: t(\"Redo last change\")\n  });\n\n  const resetTooltipRef: any = useTooltip({\n    trigger: \"hover\",\n    placement: \"top\",\n    title: t(\"Reset all changes\")\n  });\n\n  const Button = getComponent<typeof DefaultButton>(\"Button\");\n  const Icon = getComponent<typeof DefaultIcon>(\"Icon\");\n\n  return (\n    <div className={\"form-edit__actions\"}>\n      <div>\n        <Button variant='primary' className='btn-save' disabled={disabled} onClick={() => onSubmit?.()}>\n          <Icon name='save' iconset={options.iconset} />\n          {saveText}\n        </Button>\n\n        <div>\n          <Button variant='light' className='btn-undo' disabled={!hasUndo} onClick={() => onUndo?.()} ref={undoTooltipRef}>\n            <Icon name='undo' iconset={options.iconset} />\n          </Button>\n\n          <Button variant='light' className='btn-redo' disabled={!hasRedo} onClick={() => onRedo?.()} ref={redoTooltipRef}>\n            <Icon name='redo' iconset={options.iconset} />\n          </Button>\n        </div>\n\n        <div>\n          {onCopy && (\n            <Button variant='light' className='btn-copy' onClick={() => onCopy()} ref={copyTooltipRef}>\n              <Icon name='copy' iconset={options.iconset} />\n            </Button>\n          )}\n\n          <Button variant='light' className='btn-reset' onClick={() => onReset && onReset()} ref={resetTooltipRef!}>\n            <Icon name='reset' iconset={options.iconset} />\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nregisterComponent(\"FormEditCTAs\", FormEditCTAs);\n"],"names":["FormEditCTAs","saveText","disabled","options","onCopy","hasUndo","hasRedo","onUndo","onRedo","onReset","onSubmit","t","copyTooltipRef","useTooltip","undoTooltipRef","redoTooltipRef","resetTooltipRef","Button","getComponent","Icon","jsx","jsxs","registerComponent"],"mappings":";;;AAqBO,SAASA,EAAa;AAAA,EAC3B,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,SAAAC,IAAU,CAAC;AAAA,EACX,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AACF,GAAoC;AAClC,QAAM,EAAE,MAAMC,IAAI,CAACA,MAAsBA,EAAM,IAAAR,GAEzCS,IAAsBC,EAAW;AAAA,IACrC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAOF,EAAE,MAAM;AAAA,EAAA,CAChB,GAEKG,IAAsBD,EAAW;AAAA,IACrC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAOF,EAAE,kBAAkB;AAAA,EAAA,CAC5B,GAEKI,IAAsBF,EAAW;AAAA,IACrC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAOF,EAAE,kBAAkB;AAAA,EAAA,CAC5B,GAEKK,IAAuBH,EAAW;AAAA,IACtC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAOF,EAAE,mBAAmB;AAAA,EAAA,CAC7B,GAEKM,IAASC,EAAmC,QAAQ,GACpDC,IAAOD,EAAiC,MAAM;AAEpD,SACG,gBAAAE,EAAA,OAAA,EAAI,WAAW,sBACd,4BAAC,OACC,EAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAJ,GAAA,EAAO,SAAQ,WAAU,WAAU,YAAW,UAAAf,GAAoB,SAAS,MAAMQ,KAAA,gBAAAA,KAChF,UAAA;AAAA,MAAA,gBAAAU,EAACD,GAAK,EAAA,MAAK,QAAO,SAAShB,EAAQ,SAAS;AAAA,MAC3CF;AAAA,IAAA,GACH;AAAA,sBAEC,OACC,EAAA,UAAA;AAAA,MAAC,gBAAAmB,EAAAH,GAAA,EAAO,SAAQ,SAAQ,WAAU,YAAW,UAAU,CAACZ,GAAS,SAAS,MAAME,KAAA,gBAAAA,KAAY,KAAKO,GAC/F,UAAC,gBAAAM,EAAAD,GAAA,EAAK,MAAK,QAAO,SAAShB,EAAQ,QAAA,CAAS,EAC9C,CAAA;AAAA,MAEA,gBAAAiB,EAACH,KAAO,SAAQ,SAAQ,WAAU,YAAW,UAAU,CAACX,GAAS,SAAS,MAAME,KAAA,gBAAAA,KAAY,KAAKO,GAC/F,UAAC,gBAAAK,EAAAD,GAAA,EAAK,MAAK,QAAO,SAAShB,EAAQ,QAAS,CAAA,EAC9C,CAAA;AAAA,IAAA,GACF;AAAA,sBAEC,OACE,EAAA,UAAA;AAAA,MAAAC,uBACEa,GAAO,EAAA,SAAQ,SAAQ,WAAU,YAAW,SAAS,MAAMb,KAAU,KAAKQ,GACzE,4BAACO,GAAK,EAAA,MAAK,QAAO,SAAShB,EAAQ,QAAS,CAAA,GAC9C;AAAA,MAGF,gBAAAiB,EAACH,KAAO,SAAQ,SAAQ,WAAU,aAAY,SAAS,MAAMR,KAAWA,KAAW,KAAKO,GACtF,4BAACG,GAAK,EAAA,MAAK,SAAQ,SAAShB,EAAQ,SAAS,EAC/C,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEAmB,EAAkB,gBAAgBtB,CAAY;"}
+{"version":3,"file":"FormEditCtas.js","sources":["../../../../src/organisms/form/builder/FormEditCtas.tsx"],"sourcesContent":["import { ReactElement } from \"react\";\n\nimport { Icon as DefaultIcon } from \"../../../atoms/icon/Icon\";\nimport { useI18n } from \"../../../hooks/useI18n\";\nimport { useTooltip } from \"../../../hooks/useTooltip\";\nimport type { FormOptions } from \"../../../interfaces/index.js\";\nimport { Button as DefaultButton } from \"../../../molecules/button/Button\";\nimport { getComponent, registerComponent } from \"../../../registries/components\";\n\nexport interface FormEditCTAsProps extends Record<string, unknown> {\n  saveText?: string;\n  options?: FormOptions;\n  hasUndo?: boolean;\n  hasRedo?: boolean;\n  disabled?: boolean;\n  onCopy?: () => void;\n  onSubmit?: () => void;\n  onReset?: () => void;\n  onUndo?: () => void;\n  onRedo?: () => void;\n}\n\nexport function FormEditCTAs({\n  saveText = \"Save\",\n  disabled,\n  onCopy,\n  hasUndo,\n  hasRedo,\n  onUndo,\n  onRedo,\n  onReset,\n  onSubmit,\n  options\n}: FormEditCTAsProps): ReactElement {\n  const { t } = useI18n(options?.i18n);\n  const copyTooltipRef: any = useTooltip({\n    trigger: \"hover\",\n    placement: \"top\",\n    title: t(\"Copy\")\n  });\n\n  const undoTooltipRef: any = useTooltip({\n    trigger: \"hover\",\n    placement: \"top\",\n    title: t(\"Undo last change\")\n  });\n\n  const redoTooltipRef: any = useTooltip({\n    trigger: \"hover\",\n    placement: \"top\",\n    title: t(\"Redo last change\")\n  });\n\n  const resetTooltipRef: any = useTooltip({\n    trigger: \"hover\",\n    placement: \"top\",\n    title: t(\"Reset all changes\")\n  });\n\n  const Button = getComponent<typeof DefaultButton>(\"Button\");\n  const Icon = getComponent<typeof DefaultIcon>(\"Icon\");\n\n  return (\n    <div className={\"form-edit__actions\"}>\n      <div>\n        <Button variant='primary' className='btn-save' disabled={disabled} onClick={() => onSubmit?.()}>\n          <Icon name='save' iconset={options?.iconset} />\n          {saveText}\n        </Button>\n\n        <div>\n          <Button variant='light' className='btn-undo' disabled={!hasUndo} onClick={() => onUndo?.()} ref={undoTooltipRef}>\n            <Icon name='undo' iconset={options?.iconset} />\n          </Button>\n\n          <Button variant='light' className='btn-redo' disabled={!hasRedo} onClick={() => onRedo?.()} ref={redoTooltipRef}>\n            <Icon name='redo' iconset={options?.iconset} />\n          </Button>\n        </div>\n\n        <div>\n          {onCopy && (\n            <Button variant='light' className='btn-copy' onClick={() => onCopy()} ref={copyTooltipRef}>\n              <Icon name='copy' iconset={options?.iconset} />\n            </Button>\n          )}\n\n          <Button variant='light' className='btn-reset' onClick={() => onReset && onReset()} ref={resetTooltipRef!}>\n            <Icon name='reset' iconset={options?.iconset} />\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nregisterComponent(\"FormEditCTAs\", FormEditCTAs);\n"],"names":["FormEditCTAs","saveText","disabled","onCopy","hasUndo","hasRedo","onUndo","onRedo","onReset","onSubmit","options","t","useI18n","copyTooltipRef","useTooltip","undoTooltipRef","redoTooltipRef","resetTooltipRef","Button","getComponent","Icon","jsx","jsxs","registerComponent"],"mappings":";;;;AAsBO,SAASA,EAAa;AAAA,EAC3B,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AACF,GAAoC;AAClC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAQF,GAAS,IAAI,GAC7BG,IAAsBC,EAAW;AAAA,IACrC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAOH,EAAE,MAAM;AAAA,EAAA,CAChB,GAEKI,IAAsBD,EAAW;AAAA,IACrC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAOH,EAAE,kBAAkB;AAAA,EAAA,CAC5B,GAEKK,IAAsBF,EAAW;AAAA,IACrC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAOH,EAAE,kBAAkB;AAAA,EAAA,CAC5B,GAEKM,IAAuBH,EAAW;AAAA,IACtC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAOH,EAAE,mBAAmB;AAAA,EAAA,CAC7B,GAEKO,IAASC,EAAmC,QAAQ,GACpDC,IAAOD,EAAiC,MAAM;AAEpD,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAW,sBACd,4BAAC,OAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACJ,GAAA,EAAO,SAAQ,WAAU,WAAU,YAAW,UAAAhB,GAAoB,SAAS,MAAMO,IAAA,GAChF,UAAA;AAAA,MAAA,gBAAAY,EAACD,GAAA,EAAK,MAAK,QAAO,SAASV,GAAS,SAAS;AAAA,MAC5CT;AAAA,IAAA,GACH;AAAA,sBAEC,OAAA,EACC,UAAA;AAAA,MAAA,gBAAAoB,EAACH,GAAA,EAAO,SAAQ,SAAQ,WAAU,YAAW,UAAU,CAACd,GAAS,SAAS,MAAME,OAAY,KAAKS,GAC/F,UAAA,gBAAAM,EAACD,GAAA,EAAK,MAAK,QAAO,SAASV,GAAS,QAAA,CAAS,EAAA,CAC/C;AAAA,MAEA,gBAAAW,EAACH,KAAO,SAAQ,SAAQ,WAAU,YAAW,UAAU,CAACb,GAAS,SAAS,MAAME,OAAY,KAAKS,GAC/F,UAAA,gBAAAK,EAACD,GAAA,EAAK,MAAK,QAAO,SAASV,GAAS,QAAA,CAAS,EAAA,CAC/C;AAAA,IAAA,GACF;AAAA,sBAEC,OAAA,EACE,UAAA;AAAA,MAAAP,uBACEe,GAAA,EAAO,SAAQ,SAAQ,WAAU,YAAW,SAAS,MAAMf,KAAU,KAAKU,GACzE,4BAACO,GAAA,EAAK,MAAK,QAAO,SAASV,GAAS,SAAS,GAC/C;AAAA,MAGF,gBAAAW,EAACH,KAAO,SAAQ,SAAQ,WAAU,aAAY,SAAS,MAAMV,KAAWA,EAAA,GAAW,KAAKS,GACtF,4BAACG,GAAA,EAAK,MAAK,SAAQ,SAASV,GAAS,SAAS,EAAA,CAChD;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEAa,EAAkB,gBAAgBvB,CAAY;"}

package/dist/organisms/form/builder/FormParameters.d.ts

@@ -5,7 +5,7 @@ export declare const defaultDisplayChoices: {
     value: string;
 }[];
 export interface FormParametersProps {
-    onChange?: (name: string, value: any) => void;
+    onChange?: (name: string | undefined, value: any) => void;
     form: Partial<FormType>;
     typeChoices?: {
         label: string;
@@ -18,6 +18,7 @@ export interface FormParametersProps {
     enableTags?: boolean;
     className?: string;
     baseUrl?: string;
+    layout?: "html5" | "choicesjs" | "react";
     readonly?: Record<string, boolean>;
 }
-export declare function FormParameters({ onChange, form, enableTags, typeChoices, displayChoices, className, readonly, baseUrl }: FormParametersProps): ReactElement;
+export declare function FormParameters({ onChange, form, enableTags, typeChoices, displayChoices, className, readonly, layout, baseUrl }: FormParametersProps): ReactElement;

package/dist/organisms/form/builder/FormParameters.js

@@ -1,23 +1,23 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { InputTags as h } from "../../../molecules/forms/input-tags/InputTags.js";
-import { registerComponent as b, getComponent as n } from "../../../registries/components.js";
-const v = [
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { registerComponent as v, getComponent as d } from "../../../registries/components.js";
+const x = [
   { label: "Form", value: "form" },
   { label: "Wizard", value: "wizard" },
   { label: "Pdf", value: "pdf" }
 ];
-function x({
+function T({
   onChange: a,
   form: l,
-  enableTags: m = !0,
+  enableTags: p = !0,
   typeChoices: i = [],
-  displayChoices: p = v,
-  className: c = "",
+  displayChoices: c = x,
+  className: u = "",
   readonly: t = {},
+  layout: s,
   baseUrl: o = window.location.origin
 }) {
-  const u = i && i.length > 1, r = n("InputText"), s = n("Select");
-  return /* @__PURE__ */ d("div", { className: `form-edit__settings ${c}`, children: [
+  const h = i && i.length > 1, r = d("InputText"), n = d("Select"), b = d("InputTags");
+  return /* @__PURE__ */ m("div", { className: `form-edit__settings ${u}`, children: [
     /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
       r,
       {
@@ -49,7 +49,7 @@ function x({
         placeholder: "example",
         name: "path",
         className: "mb-0",
-        description: /* @__PURE__ */ d("span", { className: "text-xxs flex items-center", children: [
+        description: /* @__PURE__ */ m("span", { className: "text-xxs flex items-center", children: [
           /* @__PURE__ */ e("i", { className: "bx bx-link ml-1 mr-1" }),
           `${o}/${l.path}`
         ] }),
@@ -61,23 +61,24 @@ function x({
       }
     ) }),
     /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-      s,
+      n,
       {
+        layout: s,
         label: "Display as",
         name: "display",
         disabled: t.display,
         value: l.display,
-        options: p,
+        options: c,
         onChange: a
       }
     ) }),
-    u && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(s, { label: "Type", name: "type", value: l.type, options: i, onChange: a }) }),
-    m && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(h, { label: "Tags", name: "tags", value: l.tags, onChange: a }) })
+    h && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, { layout: s, label: "Type", name: "type", value: l.type, options: i, onChange: a }) }),
+    p && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(b, { layout: s, label: "Tags", name: "tags", value: l.tags, onChange: a }) })
   ] });
 }
-b("FormParameters", x);
+v("FormParameters", T);
 export {
-  x as FormParameters,
-  v as defaultDisplayChoices
+  T as FormParameters,
+  x as defaultDisplayChoices
 };
 //# sourceMappingURL=FormParameters.js.map

package/dist/organisms/form/builder/FormParameters.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormParameters.js","sources":["../../../../src/organisms/form/builder/FormParameters.tsx"],"sourcesContent":["import { ReactElement } from \"react\";\n\nimport type { FormType } from \"../../../interfaces\";\nimport { InputTags } from \"../../../molecules/forms/input-tags/InputTags\";\nimport { InputText as DefaultInputText } from \"../../../molecules/forms/input-text/InputText\";\nimport { Select as DefaultSelect } from \"../../../molecules/forms/select/Select\";\nimport { getComponent, registerComponent } from \"../../../registries/components\";\n\nexport const defaultDisplayChoices = [\n  { label: \"Form\", value: \"form\" },\n  { label: \"Wizard\", value: \"wizard\" },\n  { label: \"Pdf\", value: \"pdf\" }\n];\n\nexport interface FormParametersProps {\n  onChange?: (name: string, value: any) => void;\n  form: Partial<FormType>;\n  typeChoices?: { label: string; value: any }[];\n  displayChoices?: { label: string; value: any }[];\n  enableTags?: boolean;\n  className?: string;\n  baseUrl?: string;\n  readonly?: Record<string, boolean>;\n}\n\nexport function FormParameters({\n  onChange,\n  form,\n  enableTags = true,\n  typeChoices = [],\n  displayChoices = defaultDisplayChoices,\n  className = \"\",\n  readonly = {},\n  baseUrl = window.location.origin\n}: FormParametersProps): ReactElement {\n  const hasTypeChoices = typeChoices && typeChoices.length > 1;\n\n  const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n  const Select = getComponent<typeof DefaultSelect>(\"Select\");\n\n  return (\n    <div className={`form-edit__settings ${className}`}>\n      <div>\n        <InputText\n          label={\"Title\"}\n          placeholder='Enter the form title'\n          name={\"title\"}\n          required={true}\n          value={form.title}\n          disabled={readonly[\"title\"]}\n          onChange={onChange}\n        />\n      </div>\n      <div>\n        <InputText\n          label={\"Name\"}\n          placeholder='Enter the form machine name'\n          name={\"name\"}\n          required={true}\n          disabled={readonly[\"name\"]}\n          value={form.name}\n          onChange={onChange}\n        />\n      </div>\n      <div>\n        <InputText\n          label={\"Path\"}\n          placeholder='example'\n          name={\"path\"}\n          className={\"mb-0\"}\n          description={\n            <span className={\"text-xxs flex items-center\"}>\n              <i className={\"bx bx-link ml-1 mr-1\"} />\n              {`${baseUrl}/${form.path}`}\n            </span>\n          }\n          required={true}\n          value={form.path}\n          disabled={readonly[\"path\"]}\n          style={{ textTransform: \"lowercase\", width: \"120px\" }}\n          onChange={onChange}\n        />\n      </div>\n      <div>\n        <Select\n          label={\"Display as\"}\n          name={\"display\"}\n          disabled={readonly[\"display\"]}\n          value={form.display}\n          options={displayChoices}\n          onChange={onChange}\n        />\n      </div>\n      {hasTypeChoices && (\n        <div>\n          <Select label={\"Type\"} name={\"type\"} value={form.type} options={typeChoices} onChange={onChange} />\n        </div>\n      )}\n      {enableTags && (\n        <div>\n          <InputTags label={\"Tags\"} name={\"tags\"} value={form.tags} onChange={onChange} />\n        </div>\n      )}\n    </div>\n  );\n}\n\nregisterComponent(\"FormParameters\", FormParameters);\n"],"names":["defaultDisplayChoices","FormParameters","onChange","form","enableTags","typeChoices","displayChoices","className","readonly","baseUrl","hasTypeChoices","InputText","getComponent","Select","jsxs","jsx","InputTags","registerComponent"],"mappings":";;;AAQO,MAAMA,IAAwB;AAAA,EACnC,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,EAC/B,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,EACnC,EAAE,OAAO,OAAO,OAAO,MAAM;AAC/B;AAaO,SAASC,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAc,CAAC;AAAA,EACf,gBAAAC,IAAiBN;AAAA,EACjB,WAAAO,IAAY;AAAA,EACZ,UAAAC,IAAW,CAAC;AAAA,EACZ,SAAAC,IAAU,OAAO,SAAS;AAC5B,GAAsC;AAC9B,QAAAC,IAAiBL,KAAeA,EAAY,SAAS,GAErDM,IAAYC,EAAsC,WAAW,GAC7DC,IAASD,EAAmC,QAAQ;AAE1D,SACG,gBAAAE,EAAA,OAAA,EAAI,WAAW,uBAAuBP,CAAS,IAC9C,UAAA;AAAA,IAAA,gBAAAQ,EAAC,OACC,EAAA,UAAA,gBAAAA;AAAA,MAACJ;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,aAAY;AAAA,QACZ,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAOR,EAAK;AAAA,QACZ,UAAUK,EAAS;AAAA,QACnB,UAAAN;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,sBACC,OACC,EAAA,UAAA,gBAAAa;AAAA,MAACJ;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,aAAY;AAAA,QACZ,MAAM;AAAA,QACN,UAAU;AAAA,QACV,UAAUH,EAAS;AAAA,QACnB,OAAOL,EAAK;AAAA,QACZ,UAAAD;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,sBACC,OACC,EAAA,UAAA,gBAAAa;AAAA,MAACJ;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,aAAY;AAAA,QACZ,MAAM;AAAA,QACN,WAAW;AAAA,QACX,aACE,gBAAAG,EAAC,QAAK,EAAA,WAAW,8BACf,UAAA;AAAA,UAAC,gBAAAC,EAAA,KAAA,EAAE,WAAW,uBAAwB,CAAA;AAAA,UACrC,GAAGN,CAAO,IAAIN,EAAK,IAAI;AAAA,QAAA,GAC1B;AAAA,QAEF,UAAU;AAAA,QACV,OAAOA,EAAK;AAAA,QACZ,UAAUK,EAAS;AAAA,QACnB,OAAO,EAAE,eAAe,aAAa,OAAO,QAAQ;AAAA,QACpD,UAAAN;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,sBACC,OACC,EAAA,UAAA,gBAAAa;AAAA,MAACF;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,MAAM;AAAA,QACN,UAAUL,EAAS;AAAA,QACnB,OAAOL,EAAK;AAAA,QACZ,SAASG;AAAA,QACT,UAAAJ;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IACCQ,KACC,gBAAAK,EAAC,OACC,EAAA,UAAA,gBAAAA,EAACF,KAAO,OAAO,QAAQ,MAAM,QAAQ,OAAOV,EAAK,MAAM,SAASE,GAAa,UAAAH,EAAoB,CAAA,GACnG;AAAA,IAEDE,KACC,gBAAAW,EAAC,OACC,EAAA,UAAA,gBAAAA,EAACC,GAAU,EAAA,OAAO,QAAQ,MAAM,QAAQ,OAAOb,EAAK,MAAM,UAAAD,GAAoB,EAChF,CAAA;AAAA,EAAA,GAEJ;AAEJ;AAEAe,EAAkB,kBAAkBhB,CAAc;"}
+{"version":3,"file":"FormParameters.js","sources":["../../../../src/organisms/form/builder/FormParameters.tsx"],"sourcesContent":["import { ReactElement } from \"react\";\n\nimport type { FormType } from \"../../../interfaces\";\nimport { InputTags as DefaultInputTags } from \"../../../molecules/forms/input-tags/InputTags\";\nimport { InputText as DefaultInputText } from \"../../../molecules/forms/input-text/InputText\";\nimport { Select as DefaultSelect } from \"../../../molecules/forms/select/Select\";\nimport { getComponent, registerComponent } from \"../../../registries/components\";\n\nexport const defaultDisplayChoices = [\n  { label: \"Form\", value: \"form\" },\n  { label: \"Wizard\", value: \"wizard\" },\n  { label: \"Pdf\", value: \"pdf\" }\n];\n\nexport interface FormParametersProps {\n  onChange?: (name: string | undefined, value: any) => void;\n  form: Partial<FormType>;\n  typeChoices?: { label: string; value: any }[];\n  displayChoices?: { label: string; value: any }[];\n  enableTags?: boolean;\n  className?: string;\n  baseUrl?: string;\n  layout?: \"html5\" | \"choicesjs\" | \"react\";\n  readonly?: Record<string, boolean>;\n}\n\nexport function FormParameters({\n  onChange,\n  form,\n  enableTags = true,\n  typeChoices = [],\n  displayChoices = defaultDisplayChoices,\n  className = \"\",\n  readonly = {},\n  layout,\n  baseUrl = window.location.origin\n}: FormParametersProps): ReactElement {\n  const hasTypeChoices = typeChoices && typeChoices.length > 1;\n\n  const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n  const Select = getComponent<typeof DefaultSelect>(\"Select\");\n  const InputTags = getComponent<typeof DefaultInputTags>(\"InputTags\");\n\n  return (\n    <div className={`form-edit__settings ${className}`}>\n      <div>\n        <InputText\n          label={\"Title\"}\n          placeholder='Enter the form title'\n          name={\"title\"}\n          required={true}\n          value={form.title}\n          disabled={readonly[\"title\"]}\n          onChange={onChange}\n        />\n      </div>\n      <div>\n        <InputText\n          label={\"Name\"}\n          placeholder='Enter the form machine name'\n          name={\"name\"}\n          required={true}\n          disabled={readonly[\"name\"]}\n          value={form.name}\n          onChange={onChange}\n        />\n      </div>\n      <div>\n        <InputText\n          label={\"Path\"}\n          placeholder='example'\n          name={\"path\"}\n          className={\"mb-0\"}\n          description={\n            <span className={\"text-xxs flex items-center\"}>\n              <i className={\"bx bx-link ml-1 mr-1\"} />\n              {`${baseUrl}/${form.path}`}\n            </span>\n          }\n          required={true}\n          value={form.path}\n          disabled={readonly[\"path\"]}\n          style={{ textTransform: \"lowercase\", width: \"120px\" }}\n          onChange={onChange}\n        />\n      </div>\n      <div>\n        <Select\n          layout={layout}\n          label={\"Display as\"}\n          name={\"display\"}\n          disabled={readonly[\"display\"]}\n          value={form.display}\n          options={displayChoices}\n          onChange={onChange}\n        />\n      </div>\n      {hasTypeChoices && (\n        <div>\n          <Select layout={layout} label={\"Type\"} name={\"type\"} value={form.type} options={typeChoices} onChange={onChange} />\n        </div>\n      )}\n      {enableTags && (\n        <div>\n          <InputTags layout={layout} label={\"Tags\"} name={\"tags\"} value={form.tags} onChange={onChange} />\n        </div>\n      )}\n    </div>\n  );\n}\n\nregisterComponent(\"FormParameters\", FormParameters);\n"],"names":["defaultDisplayChoices","FormParameters","onChange","form","enableTags","typeChoices","displayChoices","className","readonly","layout","baseUrl","hasTypeChoices","InputText","getComponent","Select","InputTags","jsxs","jsx","registerComponent"],"mappings":";;AAQO,MAAMA,IAAwB;AAAA,EACnC,EAAE,OAAO,QAAQ,OAAO,OAAA;AAAA,EACxB,EAAE,OAAO,UAAU,OAAO,SAAA;AAAA,EAC1B,EAAE,OAAO,OAAO,OAAO,MAAA;AACzB;AAcO,SAASC,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAc,CAAA;AAAA,EACd,gBAAAC,IAAiBN;AAAA,EACjB,WAAAO,IAAY;AAAA,EACZ,UAAAC,IAAW,CAAA;AAAA,EACX,QAAAC;AAAA,EACA,SAAAC,IAAU,OAAO,SAAS;AAC5B,GAAsC;AACpC,QAAMC,IAAiBN,KAAeA,EAAY,SAAS,GAErDO,IAAYC,EAAsC,WAAW,GAC7DC,IAASD,EAAmC,QAAQ,GACpDE,IAAYF,EAAsC,WAAW;AAEnE,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAW,uBAAuBT,CAAS,IAC9C,UAAA;AAAA,IAAA,gBAAAU,EAAC,OAAA,EACC,UAAA,gBAAAA;AAAA,MAACL;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,aAAY;AAAA,QACZ,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAOT,EAAK;AAAA,QACZ,UAAUK,EAAS;AAAA,QACnB,UAAAN;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,sBACC,OAAA,EACC,UAAA,gBAAAe;AAAA,MAACL;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,aAAY;AAAA,QACZ,MAAM;AAAA,QACN,UAAU;AAAA,QACV,UAAUJ,EAAS;AAAA,QACnB,OAAOL,EAAK;AAAA,QACZ,UAAAD;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,sBACC,OAAA,EACC,UAAA,gBAAAe;AAAA,MAACL;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,aAAY;AAAA,QACZ,MAAM;AAAA,QACN,WAAW;AAAA,QACX,aACE,gBAAAI,EAAC,QAAA,EAAK,WAAW,8BACf,UAAA;AAAA,UAAA,gBAAAC,EAAC,KAAA,EAAE,WAAW,uBAAA,CAAwB;AAAA,UACrC,GAAGP,CAAO,IAAIP,EAAK,IAAI;AAAA,QAAA,GAC1B;AAAA,QAEF,UAAU;AAAA,QACV,OAAOA,EAAK;AAAA,QACZ,UAAUK,EAAS;AAAA,QACnB,OAAO,EAAE,eAAe,aAAa,OAAO,QAAA;AAAA,QAC5C,UAAAN;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,sBACC,OAAA,EACC,UAAA,gBAAAe;AAAA,MAACH;AAAA,MAAA;AAAA,QACC,QAAAL;AAAA,QACA,OAAO;AAAA,QACP,MAAM;AAAA,QACN,UAAUD,EAAS;AAAA,QACnB,OAAOL,EAAK;AAAA,QACZ,SAASG;AAAA,QACT,UAAAJ;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IACCS,KACC,gBAAAM,EAAC,OAAA,EACC,UAAA,gBAAAA,EAACH,GAAA,EAAO,QAAAL,GAAgB,OAAO,QAAQ,MAAM,QAAQ,OAAON,EAAK,MAAM,SAASE,GAAa,UAAAH,GAAoB,GACnH;AAAA,IAEDE,KACC,gBAAAa,EAAC,OAAA,EACC,UAAA,gBAAAA,EAACF,KAAU,QAAAN,GAAgB,OAAO,QAAQ,MAAM,QAAQ,OAAON,EAAK,MAAM,UAAAD,GAAoB,EAAA,CAChG;AAAA,EAAA,GAEJ;AAEJ;AAEAgB,EAAkB,kBAAkBjB,CAAc;"}

package/dist/organisms/form/builder/all.js

@@ -3,20 +3,24 @@ import "../../../molecules/button/Button.js";
 import "../../../molecules/forms/input-text/InputText.js";
 import "../../../molecules/forms/select/Select.js";
 import "../../../molecules/forms/select/components/HtmlSelect.js";
+import "../../../molecules/forms/select/components/ChoicesSelect.js";
+import "../../../molecules/forms/select/components/ReactSelect.js";
 import "../../../molecules/forms/input-tags/InputTags.js";
-import { FormBuilder as d } from "./FormBuilder.js";
-import { FormEdit as x } from "./FormEdit.js";
-import { FormEditCTAs as u } from "./FormEditCtas.js";
-import { FormParameters as l, defaultDisplayChoices as E } from "./FormParameters.js";
-import { useFormBuilder as C } from "./useFormBuilder.js";
-import { useFormEdit as h } from "./useFormEdit.js";
+import "../../../molecules/forms/input-tags/components/ReactTags.js";
+import "../../../molecules/forms/input-tags/components/ChoicesTags.js";
+import { FormBuilder as u } from "./FormBuilder.js";
+import { FormEdit as l } from "./FormEdit.js";
+import { FormEditCTAs as B } from "./FormEditCtas.js";
+import { FormParameters as c, defaultDisplayChoices as h } from "./FormParameters.js";
+import { useFormBuilder as A } from "./useFormBuilder.js";
+import { useFormEdit as P } from "./useFormEdit.js";
 export {
-  d as FormBuilder,
-  x as FormEdit,
-  u as FormEditCTAs,
-  l as FormParameters,
-  E as defaultDisplayChoices,
-  C as useFormBuilder,
-  h as useFormEdit
+  u as FormBuilder,
+  l as FormEdit,
+  B as FormEditCTAs,
+  c as FormParameters,
+  h as defaultDisplayChoices,
+  A as useFormBuilder,
+  P as useFormEdit
 };
 //# sourceMappingURL=all.js.map

package/dist/organisms/form/builder/all.js.map

@@ -1 +1 @@
-{"version":3,"file":"all.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"all.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/organisms/form/builder/useFormBuilder.d.ts

@@ -1,7 +1,7 @@
-import { FormBuilder as FormioFormBuilder } from 'formiojs';
-import { ComponentType, FormOptions, FormType } from '../../../interfaces';
+import { FormBuilder as FormioFormBuilder } from '@formio/js';
+import { ComponentType, FormBuilderOptions, FormType } from '../../../interfaces';
 interface BuilderConstructor {
-    new (element: HTMLDivElement, form: FormType, options: FormOptions): FormioFormBuilder;
+    new (element: HTMLDivElement, form: FormType, options: FormBuilderOptions): FormioFormBuilder;
 }
 export interface FormBuilderEvents {
     onAddComponent?: Function;
@@ -22,7 +22,7 @@ export interface UseFormBuilderProps extends FormBuilderEvents {
     Builder?: BuilderConstructor;
     components: ComponentType[];
     display?: string;
-    options?: FormOptions;
+    options?: FormBuilderOptions;
 }
 export declare function useFormBuilder({ components, display, options, onBuilderReady, onChange, ...props }: UseFormBuilderProps): import('react').RefObject<HTMLDivElement>;
 export {};

package/dist/organisms/form/builder/useFormBuilder.js

@@ -1,7 +1,7 @@
-import { FormBuilder as b } from "formiojs";
+import { c as R } from "../../../chunks/index2.js";
 import p from "lodash/cloneDeep";
-import { useRef as d, useState as v, useEffect as h } from "react";
-const w = [
+import { useRef as l, useState as b, useEffect as d } from "react";
+const g = [
   "addComponent",
   "updateComponent",
   "removeComponent",
@@ -12,58 +12,61 @@ const w = [
   "editJson",
   "copyComponent",
   "pasteComponent"
-], F = ["addComponent", "saveComponent", "updateComponent", "removeComponent"];
-async function E(r, { components: o = [], display: m, options: c, onChange: s, events: i = {} }) {
-  const u = {
-    display: m,
+], v = ["addComponent", "saveComponent", "updateComponent", "removeComponent"];
+async function E(t, { components: o = [], display: u, options: c, onChange: m, events: i = {} }) {
+  const s = {
+    display: u,
     components: [...o]
-  }, e = await new b(r, u, { ...c }).ready, l = (t) => (...f) => {
-    i[t] && i[t](...f), F.includes(t) && s(e.form.components);
+  }, e = await new R.FormBuilder(t, s, { ...c }).ready, f = (r) => (...a) => {
+    i[r] && i[r](...a), v.includes(r) && m(e.form.components);
   };
-  return w.forEach((t) => e.on(t, l(t))), e;
+  return g.forEach((r) => e.on(r, f(r))), e;
 }
-function j({ components: r, display: o, options: m = {}, onBuilderReady: c, onChange: s, ...i }) {
-  const u = d(null), e = d(null), [l, t] = v(p(r)), f = Object.fromEntries(Object.entries(i).filter(([n]) => n.startsWith("on")));
-  h(() => {
+function j({ components: t, display: o, options: u = {}, onBuilderReady: c, onChange: m, ...i }) {
+  const s = l(null), e = l(null), [f, r] = b(p(t)), a = Object.fromEntries(Object.entries(i).filter(([n]) => n.startsWith("on")));
+  d(() => {
     async function n() {
-      if (!u.current) {
+      if (!s.current) {
         console.warn("FormBuilder render element not found, cannot render builder.");
         return;
       }
-      e.current = await E(u.current.firstChild, {
+      e.current = await E(s.current.firstChild, {
         display: o,
-        options: { ...m },
-        components: p(r),
+        options: { ...u },
+        components: p(t),
         onChange: C,
-        events: f
+        events: a
       }), c && c(e.current);
     }
-    return n().catch((a) => {
-      console.error(a);
+    return n().catch((h) => {
+      console.error(h);
     }), () => {
-      var a;
-      (a = e.current) == null || a.destroy();
+      e.current?.destroy();
     };
-  }, []), h(() => {
-    e.current && (o !== e.current.form.display ? E(u.current.firstChild, {
+  }, []), d(() => {
+    e.current && (o !== e.current.form.display ? E(s.current.firstChild, {
       display: o,
-      options: { ...m },
-      components: p(r),
+      options: { ...u },
+      components: p(t),
       onChange: C,
-      events: f
+      events: a
     }).then((n) => {
       e.current = n, c && c(e.current);
     }).catch((n) => {
-      console.error(n);
-    }) : r !== l && (e.current.form = {
+      console.error({
+        event: "FORM_BUILDER_RECREATE_ERROR",
+        message: n.message,
+        stack: n.stack
+      });
+    }) : t !== f && (e.current.form = {
       display: o,
-      components: r
+      components: t
     }));
-  }, [o, r]);
+  }, [o, t]);
   const C = (n) => {
-    t(n), s && s(n);
+    r(n), m && m(n);
   };
-  return u;
+  return s;
 }
 export {
   j as useFormBuilder

package/dist/organisms/form/builder/useFormBuilder.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormBuilder.js","sources":["../../../../src/organisms/form/builder/useFormBuilder.ts"],"sourcesContent":["import { FormBuilder as FormioFormBuilder } from \"formiojs\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { ComponentType, FormOptions, FormType } from \"../../../interfaces\";\n\ninterface BuilderConstructor {\n  new (element: HTMLDivElement, form: FormType, options: FormOptions): FormioFormBuilder;\n}\n\nconst EVENTS = [\n  \"addComponent\",\n  \"updateComponent\",\n  \"removeComponent\",\n  \"saveComponent\",\n  \"cancelComponent\",\n  \"moveComponent\",\n  \"editComponent\",\n  \"editJson\",\n  \"copyComponent\",\n  \"pasteComponent\"\n];\n\nconst EVENTS_CHANGE = [\"addComponent\", \"saveComponent\", \"updateComponent\", \"removeComponent\"];\n\nasync function createBuilder(el: Element, { components = [], display, options, onChange, events = {} }: any): Promise<FormioFormBuilder> {\n  const form = {\n    display,\n    components: [...components]\n  };\n\n  const builder = await new FormioFormBuilder(el, form, { ...options }).ready;\n\n  const handleEvent = (event: string) => {\n    return (...args: any[]) => {\n      events[event] && events[event](...args);\n\n      if (EVENTS_CHANGE.includes(event)) {\n        onChange(builder.form.components);\n      }\n    };\n  };\n\n  EVENTS.forEach((event) => builder.on(event, handleEvent(event)));\n\n  return builder;\n}\nexport interface FormBuilderEvents {\n  onAddComponent?: Function;\n  onRemoveComponent?: Function;\n  onCancelComponent?: Function;\n  onMoveComponent?: Function;\n  onEditJson?: Function;\n  onCopyComponent?: Function;\n  onPasteComponent?: Function;\n  onBuilderReady?: (builder: FormioFormBuilder) => void;\n  onChange?: (components: ComponentType[]) => void;\n  onSaveComponent?: (\n    component: ComponentType,\n    original: ComponentType,\n    parent: ComponentType,\n    path: string,\n    index: number,\n    isNew: boolean,\n    originalComponentSchema: ComponentType\n  ) => void;\n  onEditComponent?: (component: ComponentType) => void;\n  onUpdateComponent?: (component: ComponentType) => void;\n  onDeleteComponent?: (component: ComponentType, parent: ComponentType, path: string, index: number) => void;\n}\n\nexport interface UseFormBuilderProps extends FormBuilderEvents {\n  Builder?: BuilderConstructor;\n  components: ComponentType[];\n  display?: string;\n  options?: FormOptions;\n}\n\nexport function useFormBuilder({ components, display, options = {}, onBuilderReady, onChange, ...props }: UseFormBuilderProps) {\n  const renderElement = useRef<HTMLDivElement>(null);\n  const builderRef = useRef<FormioFormBuilder | null>(null);\n  const [currentComponents, setCurrentComponents] = useState<ComponentType[]>(cloneDeep(components));\n  const events = Object.fromEntries(Object.entries(props).filter(([key]) => key.startsWith(\"on\")));\n\n  useEffect(() => {\n    async function initializeBuilder() {\n      if (!renderElement.current) {\n        console.warn(\"FormBuilder render element not found, cannot render builder.\");\n        return;\n      }\n\n      builderRef.current = await createBuilder(renderElement.current.firstChild as Element, {\n        display,\n        options: { ...options },\n        components: cloneDeep(components),\n        onChange: handleComponentsChange,\n        events\n      });\n\n      onBuilderReady && onBuilderReady(builderRef.current);\n    }\n\n    initializeBuilder().catch((er) => {\n      console.error(er);\n    });\n\n    return () => {\n      builderRef.current?.destroy();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (builderRef.current) {\n      if (display !== builderRef.current.form.display) {\n        createBuilder(renderElement.current!.firstChild as Element, {\n          display,\n          options: { ...options },\n          components: cloneDeep(components),\n          onChange: handleComponentsChange,\n          events\n        })\n          .then((builder) => {\n            builderRef.current = builder;\n            onBuilderReady && onBuilderReady(builderRef.current);\n          })\n          .catch((er) => {\n            console.error(er);\n          });\n      } else if (components !== currentComponents) {\n        builderRef.current.form = {\n          display,\n          components\n        };\n      }\n    }\n  }, [display, components]);\n\n  const handleComponentsChange = (newComponents: ComponentType[]) => {\n    setCurrentComponents(newComponents);\n    onChange && onChange(newComponents);\n  };\n  return renderElement;\n}\n"],"names":["EVENTS","EVENTS_CHANGE","createBuilder","el","components","display","options","onChange","events","form","builder","FormioFormBuilder","handleEvent","event","args","useFormBuilder","onBuilderReady","props","renderElement","useRef","builderRef","currentComponents","setCurrentComponents","useState","cloneDeep","key","useEffect","initializeBuilder","handleComponentsChange","er","_a","newComponents"],"mappings":"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"}
+{"version":3,"file":"useFormBuilder.js","sources":["../../../../src/organisms/form/builder/useFormBuilder.ts"],"sourcesContent":["import { FormBuilder as FormioFormBuilder } from \"@formio/js\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { ComponentType, FormBuilderOptions, FormType } from \"../../../interfaces\";\n\ninterface BuilderConstructor {\n  new (element: HTMLDivElement, form: FormType, options: FormBuilderOptions): FormioFormBuilder;\n}\n\nconst EVENTS = [\n  \"addComponent\",\n  \"updateComponent\",\n  \"removeComponent\",\n  \"saveComponent\",\n  \"cancelComponent\",\n  \"moveComponent\",\n  \"editComponent\",\n  \"editJson\",\n  \"copyComponent\",\n  \"pasteComponent\"\n];\n\nconst EVENTS_CHANGE = [\"addComponent\", \"saveComponent\", \"updateComponent\", \"removeComponent\"];\n\nasync function createBuilder(el: Element, { components = [], display, options, onChange, events = {} }: any): Promise<FormioFormBuilder> {\n  const form = {\n    display,\n    components: [...components]\n  };\n\n  const builder = await new FormioFormBuilder(el as HTMLElement, form, { ...options }).ready;\n\n  const handleEvent = (event: string) => {\n    return (...args: any[]) => {\n      events[event] && events[event](...args);\n\n      if (EVENTS_CHANGE.includes(event)) {\n        onChange(builder.form.components);\n      }\n    };\n  };\n\n  EVENTS.forEach((event) => builder.on(event, handleEvent(event)));\n\n  return builder;\n}\n\nexport interface FormBuilderEvents {\n  onAddComponent?: Function;\n  onRemoveComponent?: Function;\n  onCancelComponent?: Function;\n  onMoveComponent?: Function;\n  onEditJson?: Function;\n  onCopyComponent?: Function;\n  onPasteComponent?: Function;\n  onBuilderReady?: (builder: FormioFormBuilder) => void;\n  onChange?: (components: ComponentType[]) => void;\n  onSaveComponent?: (\n    component: ComponentType,\n    original: ComponentType,\n    parent: ComponentType,\n    path: string,\n    index: number,\n    isNew: boolean,\n    originalComponentSchema: ComponentType\n  ) => void;\n  onEditComponent?: (component: ComponentType) => void;\n  onUpdateComponent?: (component: ComponentType) => void;\n  onDeleteComponent?: (component: ComponentType, parent: ComponentType, path: string, index: number) => void;\n}\n\nexport interface UseFormBuilderProps extends FormBuilderEvents {\n  Builder?: BuilderConstructor;\n  components: ComponentType[];\n  display?: string;\n  options?: FormBuilderOptions;\n}\n\nexport function useFormBuilder({ components, display, options = {}, onBuilderReady, onChange, ...props }: UseFormBuilderProps) {\n  const renderElement = useRef<HTMLDivElement>(null);\n  const builderRef = useRef<FormioFormBuilder | null>(null);\n  const [currentComponents, setCurrentComponents] = useState<ComponentType[]>(cloneDeep(components));\n  const events = Object.fromEntries(Object.entries(props).filter(([key]) => key.startsWith(\"on\")));\n\n  useEffect(() => {\n    async function initializeBuilder() {\n      if (!renderElement.current) {\n        console.warn(\"FormBuilder render element not found, cannot render builder.\");\n        return;\n      }\n\n      builderRef.current = await createBuilder(renderElement.current.firstChild as Element, {\n        display,\n        options: { ...options },\n        components: cloneDeep(components),\n        onChange: handleComponentsChange,\n        events\n      });\n\n      onBuilderReady && onBuilderReady(builderRef.current);\n    }\n\n    initializeBuilder().catch((er) => {\n      console.error(er);\n    });\n\n    return () => {\n      builderRef.current?.destroy();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (builderRef.current) {\n      if (display !== (builderRef.current.form as FormType).display) {\n        createBuilder(renderElement.current!.firstChild as Element, {\n          display,\n          options: { ...options },\n          components: cloneDeep(components),\n          onChange: handleComponentsChange,\n          events\n        })\n          .then((builder) => {\n            builderRef.current = builder;\n            onBuilderReady && onBuilderReady(builderRef.current);\n          })\n          .catch((er) => {\n            console.error({\n              event: \"FORM_BUILDER_RECREATE_ERROR\",\n              message: er.message,\n              stack: er.stack\n            });\n          });\n      } else if (components !== currentComponents) {\n        builderRef.current.form = {\n          display,\n          components\n        };\n      }\n    }\n  }, [display, components]);\n\n  const handleComponentsChange = (newComponents: ComponentType[]) => {\n    setCurrentComponents(newComponents);\n    onChange && onChange(newComponents);\n  };\n  return renderElement;\n}\n"],"names":["EVENTS","EVENTS_CHANGE","createBuilder","el","components","display","options","onChange","events","form","builder","FormioFormBuilder","handleEvent","event","args","useFormBuilder","onBuilderReady","props","renderElement","useRef","builderRef","currentComponents","setCurrentComponents","useState","cloneDeep","key","useEffect","initializeBuilder","handleComponentsChange","er","newComponents"],"mappings":"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"}

package/dist/organisms/form/builder/useFormEdit.d.ts

@@ -19,11 +19,11 @@ export declare function useFormEdit(props: UseFormEditHookProps): {
     undo: () => void;
     reset: () => void;
     hasChanged: boolean;
-    isValid: any;
+    isValid: string | undefined;
     hasUndo: boolean;
     hasRedo: boolean;
     onSubmit: () => void;
     onCopy: () => void;
     formChange: (newForm: Partial<FormType>) => void;
-    setChange: (path: string, value: any) => void;
+    setChange: (path: string | undefined, value: any) => void;
 };

package/dist/organisms/form/builder/useFormEdit.js

@@ -8,7 +8,7 @@ function R(e) {
     e.onSubmit && typeof e.onCopy == "function" && e.onCopy(t);
   };
   g(() => {
-    e.form && (t._id !== e.form._id || t.modified !== e.form.modified) && o({ type: "replaceForm", value: e.form });
+    e.form && (t?._id !== e.form._id || t.modified !== e.form.modified) && o({ type: "replaceForm", value: e.form });
   }, [e.form]);
   const f = (n) => {
     b(t, { ...t, ...n }) && o({ type: "formChange", value: n });

package/dist/organisms/form/builder/useFormEdit.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormEdit.js","sources":["../../../../src/organisms/form/builder/useFormEdit.ts"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep\";\nimport { useEffect, useReducer } from \"react\";\n\nimport type { FormType } from \"../../../interfaces\";\nimport { createInitialState, hasChanged, reducer } from \"./FormEdit.reducer\";\n\nexport interface UseFormEditHookProps extends Record<string, unknown> {\n  form?: Partial<FormType>;\n  typeChoices?: { label: string; value: any }[];\n  displayChoices?: { label: string; value: any }[];\n  enableTags?: boolean;\n  onSubmit?: (form: Partial<FormType>) => void;\n  onCopy?: (form: Partial<FormType>) => void;\n}\n\nexport function useFormEdit(props: UseFormEditHookProps) {\n  const [{ current, future, past }, dispatchFormAction] = useReducer(reducer, createInitialState(props));\n\n  const onSubmit = () => {\n    if (props.onSubmit && typeof props.onSubmit === \"function\") {\n      props.onSubmit(current);\n    }\n  };\n  const onCopy = () => {\n    if (props.onSubmit && typeof props.onCopy === \"function\") {\n      props.onCopy(current);\n    }\n  };\n\n  useEffect(() => {\n    if (props.form && (current._id !== props.form._id || current.modified !== props.form.modified)) {\n      dispatchFormAction({ type: \"replaceForm\", value: props.form });\n    }\n  }, [props.form]);\n\n  const formChange = (newForm: Partial<FormType>) => {\n    if (hasChanged(current, { ...current, ...newForm })) {\n      dispatchFormAction({ type: \"formChange\", value: newForm });\n    }\n  };\n\n  const redo = () => dispatchFormAction({ type: \"redo\" });\n  const undo = () => dispatchFormAction({ type: \"undo\" });\n  const reset = () => dispatchFormAction({ type: \"reset\" });\n\n  const setChange = (path: string, value: any) => {\n    formChange({ ...current, [path]: value });\n  };\n\n  return {\n    form: cloneDeep(current),\n    redo,\n    undo,\n    reset,\n    hasChanged: !!past.length,\n    isValid: current.title && current.name && current.path,\n    hasUndo: !!past.length,\n    hasRedo: !!future.length,\n    onSubmit,\n    onCopy,\n    formChange,\n    setChange\n  };\n}\n"],"names":["useFormEdit","props","current","future","past","dispatchFormAction","useReducer","reducer","createInitialState","onSubmit","onCopy","useEffect","formChange","newForm","hasChanged","redo","undo","reset","setChange","path","value","cloneDeep"],"mappings":";;;AAeO,SAASA,EAAYC,GAA6B;AACvD,QAAM,CAAC,EAAE,SAAAC,GAAS,QAAAC,GAAQ,MAAAC,EAAK,GAAGC,CAAkB,IAAIC,EAAWC,GAASC,EAAmBP,CAAK,CAAC,GAE/FQ,IAAW,MAAM;AACrB,IAAIR,EAAM,YAAY,OAAOA,EAAM,YAAa,cAC9CA,EAAM,SAASC,CAAO;AAAA,EAE1B,GACMQ,IAAS,MAAM;AACnB,IAAIT,EAAM,YAAY,OAAOA,EAAM,UAAW,cAC5CA,EAAM,OAAOC,CAAO;AAAA,EAExB;AAEA,EAAAS,EAAU,MAAM;AACV,IAAAV,EAAM,SAASC,EAAQ,QAAQD,EAAM,KAAK,OAAOC,EAAQ,aAAaD,EAAM,KAAK,aACnFI,EAAmB,EAAE,MAAM,eAAe,OAAOJ,EAAM,MAAM;AAAA,EAC/D,GACC,CAACA,EAAM,IAAI,CAAC;AAET,QAAAW,IAAa,CAACC,MAA+B;AAC7C,IAAAC,EAAWZ,GAAS,EAAE,GAAGA,GAAS,GAAGW,EAAA,CAAS,KAChDR,EAAmB,EAAE,MAAM,cAAc,OAAOQ,GAAS;AAAA,EAE7D,GAEME,IAAO,MAAMV,EAAmB,EAAE,MAAM,QAAQ,GAChDW,IAAO,MAAMX,EAAmB,EAAE,MAAM,QAAQ,GAChDY,IAAQ,MAAMZ,EAAmB,EAAE,MAAM,SAAS,GAElDa,IAAY,CAACC,GAAcC,MAAe;AAC9C,IAAAR,EAAW,EAAE,GAAGV,GAAS,CAACiB,CAAI,GAAGC,GAAO;AAAA,EAC1C;AAEO,SAAA;AAAA,IACL,MAAMC,EAAUnB,CAAO;AAAA,IACvB,MAAAa;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAY,CAAC,CAACb,EAAK;AAAA,IACnB,SAASF,EAAQ,SAASA,EAAQ,QAAQA,EAAQ;AAAA,IAClD,SAAS,CAAC,CAACE,EAAK;AAAA,IAChB,SAAS,CAAC,CAACD,EAAO;AAAA,IAClB,UAAAM;AAAA,IACA,QAAAC;AAAA,IACA,YAAAE;AAAA,IACA,WAAAM;AAAA,EACF;AACF;"}
+{"version":3,"file":"useFormEdit.js","sources":["../../../../src/organisms/form/builder/useFormEdit.ts"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep\";\nimport { useEffect, useReducer } from \"react\";\n\nimport type { FormType } from \"../../../interfaces\";\nimport { createInitialState, hasChanged, reducer } from \"./FormEdit.reducer\";\n\nexport interface UseFormEditHookProps extends Record<string, unknown> {\n  form?: Partial<FormType>;\n  typeChoices?: { label: string; value: any }[];\n  displayChoices?: { label: string; value: any }[];\n  enableTags?: boolean;\n  onSubmit?: (form: Partial<FormType>) => void;\n  onCopy?: (form: Partial<FormType>) => void;\n}\n\nexport function useFormEdit(props: UseFormEditHookProps) {\n  const [{ current, future, past }, dispatchFormAction] = useReducer(reducer, createInitialState(props));\n\n  const onSubmit = () => {\n    if (props.onSubmit && typeof props.onSubmit === \"function\") {\n      props.onSubmit(current);\n    }\n  };\n  const onCopy = () => {\n    if (props.onSubmit && typeof props.onCopy === \"function\") {\n      props.onCopy(current);\n    }\n  };\n\n  useEffect(() => {\n    if (props.form && (current?._id !== props.form._id || current.modified !== props.form.modified)) {\n      dispatchFormAction({ type: \"replaceForm\", value: props.form });\n    }\n  }, [props.form]);\n\n  const formChange = (newForm: Partial<FormType>) => {\n    if (hasChanged(current, { ...current, ...newForm })) {\n      dispatchFormAction({ type: \"formChange\", value: newForm });\n    }\n  };\n\n  const redo = () => dispatchFormAction({ type: \"redo\" });\n  const undo = () => dispatchFormAction({ type: \"undo\" });\n  const reset = () => dispatchFormAction({ type: \"reset\" });\n\n  const setChange = (path: string | undefined, value: any) => {\n    formChange({ ...current, [path!]: value });\n  };\n\n  return {\n    form: cloneDeep(current),\n    redo,\n    undo,\n    reset,\n    hasChanged: !!past.length,\n    isValid: current.title && current.name && current.path,\n    hasUndo: !!past.length,\n    hasRedo: !!future.length,\n    onSubmit,\n    onCopy,\n    formChange,\n    setChange\n  };\n}\n"],"names":["useFormEdit","props","current","future","past","dispatchFormAction","useReducer","reducer","createInitialState","onSubmit","onCopy","useEffect","formChange","newForm","hasChanged","redo","undo","reset","setChange","path","value","cloneDeep"],"mappings":";;;AAeO,SAASA,EAAYC,GAA6B;AACvD,QAAM,CAAC,EAAE,SAAAC,GAAS,QAAAC,GAAQ,MAAAC,EAAA,GAAQC,CAAkB,IAAIC,EAAWC,GAASC,EAAmBP,CAAK,CAAC,GAE/FQ,IAAW,MAAM;AACrB,IAAIR,EAAM,YAAY,OAAOA,EAAM,YAAa,cAC9CA,EAAM,SAASC,CAAO;AAAA,EAE1B,GACMQ,IAAS,MAAM;AACnB,IAAIT,EAAM,YAAY,OAAOA,EAAM,UAAW,cAC5CA,EAAM,OAAOC,CAAO;AAAA,EAExB;AAEA,EAAAS,EAAU,MAAM;AACd,IAAIV,EAAM,SAASC,GAAS,QAAQD,EAAM,KAAK,OAAOC,EAAQ,aAAaD,EAAM,KAAK,aACpFI,EAAmB,EAAE,MAAM,eAAe,OAAOJ,EAAM,MAAM;AAAA,EAEjE,GAAG,CAACA,EAAM,IAAI,CAAC;AAEf,QAAMW,IAAa,CAACC,MAA+B;AACjD,IAAIC,EAAWZ,GAAS,EAAE,GAAGA,GAAS,GAAGW,EAAA,CAAS,KAChDR,EAAmB,EAAE,MAAM,cAAc,OAAOQ,GAAS;AAAA,EAE7D,GAEME,IAAO,MAAMV,EAAmB,EAAE,MAAM,QAAQ,GAChDW,IAAO,MAAMX,EAAmB,EAAE,MAAM,QAAQ,GAChDY,IAAQ,MAAMZ,EAAmB,EAAE,MAAM,SAAS,GAElDa,IAAY,CAACC,GAA0BC,MAAe;AAC1D,IAAAR,EAAW,EAAE,GAAGV,GAAS,CAACiB,CAAK,GAAGC,GAAO;AAAA,EAC3C;AAEA,SAAO;AAAA,IACL,MAAMC,EAAUnB,CAAO;AAAA,IACvB,MAAAa;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAY,CAAC,CAACb,EAAK;AAAA,IACnB,SAASF,EAAQ,SAASA,EAAQ,QAAQA,EAAQ;AAAA,IAClD,SAAS,CAAC,CAACE,EAAK;AAAA,IAChB,SAAS,CAAC,CAACD,EAAO;AAAA,IAClB,UAAAM;AAAA,IACA,QAAAC;AAAA,IACA,YAAAE;AAAA,IACA,WAAAM;AAAA,EAAA;AAEJ;"}

package/dist/organisms/form/exports/FormExport.d.ts

@@ -0,0 +1,6 @@
+import { FormOptions } from '../../../interfaces/FormOptions.js';
+export interface FormExportProps {
+    i18n?: FormOptions["i18n"];
+    onClick?: (action: "export:form" | "export:submissions", format: "json" | "csv") => void;
+}
+export declare function FormExport({ onClick, ...props }: FormExportProps): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/form/exports/FormExport.js

@@ -0,0 +1,56 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { Icon as a } from "../../../atoms/icon/Icon.js";
+import { useI18n as c } from "../../../hooks/useI18n.js";
+import { getComponent as i } from "../../../registries/components.js";
+function h({ onClick: n, ...t }) {
+  const m = i("Card"), { t: r } = c(t?.i18n);
+  return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ s("div", { className: "flex gap-3", children: [
+    /* @__PURE__ */ e("div", { className: "sm:w-1/2", children: /* @__PURE__ */ s(
+      m,
+      {
+        label: /* @__PURE__ */ s("span", { className: "flex items-center", children: [
+          /* @__PURE__ */ e(a, { name: "detail", className: "mr-1 text-secondary" }),
+          " ",
+          r("Export schema")
+        ] }),
+        children: [
+          /* @__PURE__ */ e("p", { className: "mb-5", children: r("Export the formIO schema:") }),
+          /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ s("button", { className: "btn btn-primary", onClick: () => n?.("export:form", "json"), children: [
+            /* @__PURE__ */ e(a, { name: "code", className: "mr-1" }),
+            " ",
+            r("Json")
+          ] }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: "sm:w-1/2", children: /* @__PURE__ */ s(
+      m,
+      {
+        label: /* @__PURE__ */ s("span", { className: "flex items-center", children: [
+          /* @__PURE__ */ e(a, { name: "data", className: "mr-1 text-secondary" }),
+          " ",
+          r("Export submissions")
+        ] }),
+        children: [
+          /* @__PURE__ */ e("p", { className: "mb-5", children: r("Export all submission as JSON or CSV:") }),
+          /* @__PURE__ */ s("div", { className: "flex items-center justify-center", children: [
+            /* @__PURE__ */ s("button", { className: "btn btn-primary mr-4", onClick: () => n?.("export:submissions", "json"), children: [
+              /* @__PURE__ */ e(a, { name: "code", className: "mr-1" }),
+              " ",
+              r("Json")
+            ] }),
+            /* @__PURE__ */ s("button", { className: "btn btn-primary", onClick: () => n?.("export:submissions", "csv"), children: [
+              /* @__PURE__ */ e(a, { name: "spreadsheet", className: "mr-1" }),
+              " ",
+              r("Csv")
+            ] })
+          ] })
+        ]
+      }
+    ) })
+  ] }) });
+}
+export {
+  h as FormExport
+};
+//# sourceMappingURL=FormExport.js.map

package/dist/organisms/form/exports/FormExport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormExport.js","sources":["../../../../src/organisms/form/exports/FormExport.tsx"],"sourcesContent":["import { Icon } from \"../../../atoms/icon/Icon.js\";\nimport { useI18n } from \"../../../hooks/useI18n.js\";\nimport { FormOptions } from \"../../../interfaces/FormOptions.js\";\nimport type { Card } from \"../../../molecules/card/Card.js\";\nimport { getComponent } from \"../../../registries/components.js\";\n\nexport interface FormExportProps {\n  i18n?: FormOptions[\"i18n\"];\n  onClick?: (action: \"export:form\" | \"export:submissions\", format: \"json\" | \"csv\") => void;\n}\n\nexport function FormExport({ onClick, ...props }: FormExportProps) {\n  const FCard = getComponent<typeof Card>(\"Card\");\n  const { t } = useI18n(props?.i18n);\n\n  return (\n    <div>\n      <div className={\"flex gap-3\"}>\n        <div className={\"sm:w-1/2\"}>\n          <FCard\n            label={\n              (\n                <span className={\"flex items-center\"}>\n                  <Icon name={\"detail\"} className={\"mr-1 text-secondary\"} /> {t(`Export schema`)}\n                </span>\n              ) as any\n            }\n          >\n            <p className={\"mb-5\"}>{t(\"Export the formIO schema:\")}</p>\n            <div className={\"flex items-center justify-center\"}>\n              <button className={\"btn btn-primary\"} onClick={() => onClick?.(\"export:form\", \"json\")}>\n                <Icon name={\"code\"} className={\"mr-1\"} /> {t(`Json`)}\n              </button>\n            </div>\n          </FCard>\n        </div>\n        <div className={\"sm:w-1/2\"}>\n          <FCard\n            label={\n              (\n                <span className={\"flex items-center\"}>\n                  <Icon name={\"data\"} className={\"mr-1 text-secondary\"} /> {t(`Export submissions`)}\n                </span>\n              ) as any\n            }\n          >\n            <p className={\"mb-5\"}>{t(\"Export all submission as JSON or CSV:\")}</p>\n            <div className={\"flex items-center justify-center\"}>\n              <button className={\"btn btn-primary mr-4\"} onClick={() => onClick?.(\"export:submissions\", \"json\")}>\n                <Icon name={\"code\"} className={\"mr-1\"} /> {t(`Json`)}\n              </button>\n              <button className={\"btn btn-primary\"} onClick={() => onClick?.(\"export:submissions\", \"csv\")}>\n                <Icon name={\"spreadsheet\"} className={\"mr-1\"} /> {t(`Csv`)}\n              </button>\n            </div>\n          </FCard>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["FormExport","onClick","props","FCard","getComponent","t","useI18n","jsx","jsxs","Icon"],"mappings":";;;;AAWO,SAASA,EAAW,EAAE,SAAAC,GAAS,GAAGC,KAA0B;AACjE,QAAMC,IAAQC,EAA0B,MAAM,GACxC,EAAE,GAAAC,EAAA,IAAMC,EAAQJ,GAAO,IAAI;AAEjC,SACE,gBAAAK,EAAC,OAAA,EACC,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAW,cACd,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAW,YACd,UAAA,gBAAAC;AAAA,MAACL;AAAA,MAAA;AAAA,QACC,OAEI,gBAAAK,EAAC,QAAA,EAAK,WAAW,qBACf,UAAA;AAAA,UAAA,gBAAAD,EAACE,GAAA,EAAK,MAAM,UAAU,WAAW,uBAAuB;AAAA,UAAE;AAAA,UAAEJ,EAAE,eAAe;AAAA,QAAA,GAC/E;AAAA,QAIJ,UAAA;AAAA,UAAA,gBAAAE,EAAC,KAAA,EAAE,WAAW,QAAS,UAAAF,EAAE,2BAA2B,GAAE;AAAA,UACtD,gBAAAE,EAAC,OAAA,EAAI,WAAW,oCACd,UAAA,gBAAAC,EAAC,UAAA,EAAO,WAAW,mBAAmB,SAAS,MAAMP,IAAU,eAAe,MAAM,GAClF,UAAA;AAAA,YAAA,gBAAAM,EAACE,GAAA,EAAK,MAAM,QAAQ,WAAW,QAAQ;AAAA,YAAE;AAAA,YAAEJ,EAAE,MAAM;AAAA,UAAA,EAAA,CACrD,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAAE,EAAC,OAAA,EAAI,WAAW,YACd,UAAA,gBAAAC;AAAA,MAACL;AAAA,MAAA;AAAA,QACC,OAEI,gBAAAK,EAAC,QAAA,EAAK,WAAW,qBACf,UAAA;AAAA,UAAA,gBAAAD,EAACE,GAAA,EAAK,MAAM,QAAQ,WAAW,uBAAuB;AAAA,UAAE;AAAA,UAAEJ,EAAE,oBAAoB;AAAA,QAAA,GAClF;AAAA,QAIJ,UAAA;AAAA,UAAA,gBAAAE,EAAC,KAAA,EAAE,WAAW,QAAS,UAAAF,EAAE,uCAAuC,GAAE;AAAA,UAClE,gBAAAG,EAAC,OAAA,EAAI,WAAW,oCACd,UAAA;AAAA,YAAA,gBAAAA,EAAC,UAAA,EAAO,WAAW,wBAAwB,SAAS,MAAMP,IAAU,sBAAsB,MAAM,GAC9F,UAAA;AAAA,cAAA,gBAAAM,EAACE,GAAA,EAAK,MAAM,QAAQ,WAAW,QAAQ;AAAA,cAAE;AAAA,cAAEJ,EAAE,MAAM;AAAA,YAAA,GACrD;AAAA,YACA,gBAAAG,EAAC,YAAO,WAAW,mBAAmB,SAAS,MAAMP,IAAU,sBAAsB,KAAK,GACxF,UAAA;AAAA,cAAA,gBAAAM,EAACE,GAAA,EAAK,MAAM,eAAe,WAAW,QAAQ;AAAA,cAAE;AAAA,cAAEJ,EAAE,KAAK;AAAA,YAAA,EAAA,CAC3D;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EACF,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}

package/dist/organisms/form/preview/FormPreview.d.ts

@@ -0,0 +1,6 @@
+import { FormOptions, FormType } from '../../../interfaces/index.js';
+export interface FormPreviewProps {
+    form: FormType;
+    i18n?: FormOptions["i18n"];
+}
+export declare function FormPreview({ form, ...props }: FormPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/form/preview/FormPreview.js

@@ -0,0 +1,12 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useI18n as e } from "../../../hooks/useI18n.js";
+import { getComponent as m } from "../../../registries/components.js";
+import { Form as a } from "../Form.js";
+function p({ form: r, ...t }) {
+  const { t: i } = e(t?.i18n), n = m("Card");
+  return /* @__PURE__ */ o("div", { className: "p-10 bg-gray-500", children: /* @__PURE__ */ o(n, { label: i(r.title || ""), className: "shadow", children: /* @__PURE__ */ o(a, { form: r, options: { i18n: t.i18n } }) }) });
+}
+export {
+  p as FormPreview
+};
+//# sourceMappingURL=FormPreview.js.map