@tsed/react-formio 3.0.0-alpha.10 → 3.0.0-alpha.12

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

@@ -1,7 +1,7 @@
-import { FormBuilder as b } from "formiojs";
-import p from "lodash/cloneDeep";
-import { useRef as d, useState as v, useEffect as h } from "react";
-const w = [
+import { FormBuilder as R } from "formiojs";
+import C from "lodash/cloneDeep";
+import { useRef as p, useState as b, useEffect as d } from "react";
+const g = [
   "addComponent",
   "updateComponent",
   "removeComponent",
@@ -12,60 +12,63 @@ 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(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 w({ components: t, display: o, options: u = {}, onBuilderReady: c, onChange: m, ...i }) {
+  const s = p(null), e = p(null), [f, r] = b(C(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),
-        onChange: C,
-        events: f
+        options: { ...u },
+        components: C(t),
+        onChange: l,
+        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),
-      onChange: C,
-      events: f
+      options: { ...u },
+      components: C(t),
+      onChange: l,
+      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]);
-  const C = (n) => {
-    t(n), s && s(n);
+  }, [o, t]);
+  const l = (n) => {
+    r(n), m && m(n);
   };
-  return u;
+  return s;
 }
 export {
-  j as useFormBuilder
+  w as useFormBuilder
 };
 //# sourceMappingURL=useFormBuilder.js.map

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 \"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({\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.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 | 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,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,GAA0BC,MAAe;AAC1D,IAAAR,EAAW,EAAE,GAAGV,GAAS,CAACiB,CAAK,GAAGC,GAAO;AAAA,EAC3C;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,5 @@
+export interface FormExportProps {
+    i18n?: (key: string) => string;
+    onClick?: (action: "export:form" | "export:submissions", format: "json" | "csv") => void;
+}
+export declare function FormExport({ i18n, onClick }: FormExportProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,55 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { Icon as r } from "../../../atoms/icon/Icon.js";
+import { getComponent as n } from "../../../registries/components.js";
+function i({ i18n: a = (m) => m, onClick: c }) {
+  const m = n("Card");
+  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(r, { name: "detail", className: "mr-1 text-secondary" }),
+          " ",
+          a("Export schema")
+        ] }),
+        children: [
+          /* @__PURE__ */ e("p", { className: "mb-5", children: a("Export the formIO schema:") }),
+          /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ s("button", { className: "btn btn-primary", onClick: () => c?.("export:form", "json"), children: [
+            /* @__PURE__ */ e(r, { name: "code", className: "mr-1" }),
+            " ",
+            a("Json")
+          ] }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: "sm:w-1/2", children: /* @__PURE__ */ s(
+      m,
+      {
+        label: /* @__PURE__ */ s("span", { className: "flex items-center", children: [
+          /* @__PURE__ */ e(r, { name: "data", className: "mr-1 text-secondary" }),
+          " ",
+          a("Export submissions")
+        ] }),
+        children: [
+          /* @__PURE__ */ e("p", { className: "mb-5", children: a("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: () => c?.("export:submissions", "json"), children: [
+              /* @__PURE__ */ e(r, { name: "code", className: "mr-1" }),
+              " ",
+              a("Json")
+            ] }),
+            /* @__PURE__ */ s("button", { className: "btn btn-primary", onClick: () => c?.("export:submissions", "csv"), children: [
+              /* @__PURE__ */ e(r, { name: "spreadsheet", className: "mr-1" }),
+              " ",
+              a("Csv")
+            ] })
+          ] })
+        ]
+      }
+    ) })
+  ] }) });
+}
+export {
+  i 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 type { Card } from \"../../../molecules/card/Card.js\";\nimport { getComponent } from \"../../../registries/components.js\";\n\nexport interface FormExportProps {\n  i18n?: (key: string) => string;\n  onClick?: (action: \"export:form\" | \"export:submissions\", format: \"json\" | \"csv\") => void;\n}\n\nexport function FormExport({ i18n = (f: string) => f, onClick }: FormExportProps) {\n  const FCard = getComponent<typeof Card>(\"Card\");\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\"} /> {i18n(`Export schema`)}\n                </span>\n              ) as any\n            }\n          >\n            <p className={\"mb-5\"}>{i18n(\"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\"} /> {i18n(`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\"} /> {i18n(`Export submissions`)}\n                </span>\n              ) as any\n            }\n          >\n            <p className={\"mb-5\"}>{i18n(\"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\"} /> {i18n(`Json`)}\n              </button>\n              <button className={\"btn btn-primary\"} onClick={() => onClick?.(\"export:submissions\", \"csv\")}>\n                <Icon name={\"spreadsheet\"} className={\"mr-1\"} /> {i18n(`Csv`)}\n              </button>\n            </div>\n          </FCard>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["FormExport","i18n","f","onClick","FCard","getComponent","jsx","jsxs","Icon"],"mappings":";;;AASO,SAASA,EAAW,EAAE,MAAAC,IAAO,CAACC,MAAcA,GAAG,SAAAC,KAA4B;AAChF,QAAMC,IAAQC,EAA0B,MAAM;AAE9C,SACE,gBAAAC,EAAC,OAAA,EACC,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAW,cACd,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAW,YACd,UAAA,gBAAAC;AAAA,MAACH;AAAA,MAAA;AAAA,QACC,OAEI,gBAAAG,EAAC,QAAA,EAAK,WAAW,qBACf,UAAA;AAAA,UAAA,gBAAAD,EAACE,GAAA,EAAK,MAAM,UAAU,WAAW,uBAAuB;AAAA,UAAE;AAAA,UAAEP,EAAK,eAAe;AAAA,QAAA,GAClF;AAAA,QAIJ,UAAA;AAAA,UAAA,gBAAAK,EAAC,KAAA,EAAE,WAAW,QAAS,UAAAL,EAAK,2BAA2B,GAAE;AAAA,UACzD,gBAAAK,EAAC,OAAA,EAAI,WAAW,oCACd,UAAA,gBAAAC,EAAC,UAAA,EAAO,WAAW,mBAAmB,SAAS,MAAMJ,IAAU,eAAe,MAAM,GAClF,UAAA;AAAA,YAAA,gBAAAG,EAACE,GAAA,EAAK,MAAM,QAAQ,WAAW,QAAQ;AAAA,YAAE;AAAA,YAAEP,EAAK,MAAM;AAAA,UAAA,EAAA,CACxD,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAAK,EAAC,OAAA,EAAI,WAAW,YACd,UAAA,gBAAAC;AAAA,MAACH;AAAA,MAAA;AAAA,QACC,OAEI,gBAAAG,EAAC,QAAA,EAAK,WAAW,qBACf,UAAA;AAAA,UAAA,gBAAAD,EAACE,GAAA,EAAK,MAAM,QAAQ,WAAW,uBAAuB;AAAA,UAAE;AAAA,UAAEP,EAAK,oBAAoB;AAAA,QAAA,GACrF;AAAA,QAIJ,UAAA;AAAA,UAAA,gBAAAK,EAAC,KAAA,EAAE,WAAW,QAAS,UAAAL,EAAK,uCAAuC,GAAE;AAAA,UACrE,gBAAAM,EAAC,OAAA,EAAI,WAAW,oCACd,UAAA;AAAA,YAAA,gBAAAA,EAAC,UAAA,EAAO,WAAW,wBAAwB,SAAS,MAAMJ,IAAU,sBAAsB,MAAM,GAC9F,UAAA;AAAA,cAAA,gBAAAG,EAACE,GAAA,EAAK,MAAM,QAAQ,WAAW,QAAQ;AAAA,cAAE;AAAA,cAAEP,EAAK,MAAM;AAAA,YAAA,GACxD;AAAA,YACA,gBAAAM,EAAC,YAAO,WAAW,mBAAmB,SAAS,MAAMJ,IAAU,sBAAsB,KAAK,GACxF,UAAA;AAAA,cAAA,gBAAAG,EAACE,GAAA,EAAK,MAAM,eAAe,WAAW,QAAQ;AAAA,cAAE;AAAA,cAAEP,EAAK,KAAK;AAAA,YAAA,EAAA,CAC9D;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 { FormType } from '../../../interfaces/index.js';
+export interface FormPreviewProps {
+    form: FormType;
+    i18n?: (key: string) => string;
+}
+export declare function FormPreview({ form, i18n }: FormPreviewProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormPreview.js","sources":["../../../../src/organisms/form/preview/FormPreview.tsx"],"sourcesContent":["import type { FormType } from \"../../../interfaces/index.js\";\nimport type { Card } from \"../../../molecules/card/Card.js\";\nimport { getComponent } from \"../../../registries/components.js\";\nimport { Form } from \"../Form.js\";\n\nexport interface FormPreviewProps {\n  form: FormType;\n  i18n?: (key: string) => string;\n}\n\nexport function FormPreview({ form, i18n = (f) => f }: FormPreviewProps) {\n  const FCard = getComponent<typeof Card>(\"Card\");\n\n  return (\n    <div className='p-10 bg-gray-500'>\n      <FCard label={i18n(form.title || \"\")} className={\"shadow\"}>\n        <Form form={form} options={{ i18n }} />\n      </FCard>\n    </div>\n  );\n}\n"],"names":["FormPreview","form","i18n","f","FCard","getComponent","jsx","Form"],"mappings":";;;AAUO,SAASA,EAAY,EAAE,MAAAC,GAAM,MAAAC,IAAO,CAACC,MAAMA,KAAuB;AACvE,QAAMC,IAAQC,EAA0B,MAAM;AAE9C,SACE,gBAAAC,EAAC,SAAI,WAAU,oBACb,4BAACF,GAAA,EAAM,OAAOF,EAAKD,EAAK,SAAS,EAAE,GAAG,WAAW,UAC/C,4BAACM,GAAA,EAAK,MAAAN,GAAY,SAAS,EAAE,MAAAC,EAAA,GAAQ,EAAA,CACvC,EAAA,CACF;AAEJ;"}

package/dist/organisms/form/settings/FormSettings.js

@@ -1,38 +1,38 @@
-import { jsxs as i, jsx as d } from "react/jsx-runtime";
+import { jsxs as S, jsx as p } from "react/jsx-runtime";
 import g from "lodash/isEqual";
 import l from "lodash/noop";
-import { useState as b, useEffect as h } from "react";
-import { Form as F } from "../Form.js";
-import { getFormSettingsSchema as y } from "./FormSettings.schema.js";
-import { formSettingsToSubmission as S, submissionToFormSettings as x } from "./FormSettings.utils.js";
-function C({ form: s, onSubmit: a = l, options: e }) {
-  const o = y(), [c, m] = b(!0), [t, r] = b(() => S(s)), n = ({ data: u, isValid: p }) => {
-    p && r({ data: u }), m(p);
+import { useState as d, useEffect as f } from "react";
+import { Form as h } from "../Form.js";
+import { getFormSettingsSchema as F } from "./FormSettings.schema.js";
+import { formSettingsToSubmission as b, submissionToFormSettings as y } from "./FormSettings.utils.js";
+function x({ form: t, onSubmit: r = l, options: e }) {
+  const o = F(), [u, i] = d(!0), [s, m] = d(() => b(t)), a = ({ data: n, isValid: c }) => {
+    c && m({ data: n }), i(c);
   };
-  return h(() => {
-    const u = S(s);
-    s != null && s._id && !g(t.data, u.data) && r(u);
-  }, [s == null ? void 0 : s._id]), {
+  return f(() => {
+    const n = b(t);
+    t?._id && !g(s.data, n.data) && m(n);
+  }, [t?._id]), {
     options: e,
     form: o,
-    type: s.type,
-    submission: t,
-    onChange: n,
-    isValid: c,
-    setIsValid: m,
+    type: t.type,
+    submission: s,
+    onChange: a,
+    isValid: u,
+    setIsValid: i,
     onSubmit: () => {
-      a(x(s, t));
+      r(y(t, s));
     }
   };
 }
-function q(s) {
-  const { form: a, submission: e, options: o = {}, onChange: c, onSubmit: m, isValid: t } = C(s), r = o.i18n || ((n) => n);
-  return /* @__PURE__ */ i("div", { children: [
-    /* @__PURE__ */ d(F, { form: a, submission: e, onChange: c, options: o }),
-    /* @__PURE__ */ d("button", { "data-testid": "submit", disabled: !t, className: "mt-5 btn btn-primary", onClick: m, type: "submit", children: r("Save settings") })
+function k(t) {
+  const { form: r, submission: e, options: o = {}, onChange: u, onSubmit: i, isValid: s } = x(t), m = o.i18n || ((a) => a);
+  return /* @__PURE__ */ S("div", { children: [
+    /* @__PURE__ */ p(h, { form: r, submission: e, onChange: u, options: o }),
+    /* @__PURE__ */ p("button", { "data-testid": "submit", disabled: !s, className: "mt-5 btn btn-primary", onClick: i, type: "submit", children: m("Save settings") })
   ] });
 }
 export {
-  q as FormSettings
+  k as FormSettings
 };
 //# sourceMappingURL=FormSettings.js.map

package/dist/organisms/form/settings/FormSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormSettings.js","sources":["../../../../src/organisms/form/settings/FormSettings.tsx"],"sourcesContent":["import isEqual from \"lodash/isEqual\";\nimport noop from \"lodash/noop\";\nimport { useEffect, useState } from \"react\";\n\nimport type { ChangedSubmission, FormOptions, FormType } from \"../../../interfaces\";\nimport { Form } from \"../../form/Form\";\nimport { getFormSettingsSchema } from \"./FormSettings.schema\";\nimport { formSettingsToSubmission, FormSettingsType, submissionToFormSettings } from \"./FormSettings.utils\";\n\nexport interface FormSettingsProps {\n  form: Partial<FormType>;\n  onSubmit?: Function;\n  options?: FormOptions;\n}\n\nfunction useFormSettings({ form: formDefinition, onSubmit = noop, options }: FormSettingsProps) {\n  const form = getFormSettingsSchema();\n  const [isValid, setIsValid] = useState(true);\n  const [submission, setSubmission] = useState(() => formSettingsToSubmission(formDefinition));\n\n  const onChange = ({ data, isValid }: ChangedSubmission<FormSettingsType>) => {\n    if (isValid) {\n      setSubmission({ data });\n    }\n    setIsValid(isValid);\n  };\n\n  useEffect(() => {\n    const input = formSettingsToSubmission(formDefinition);\n    if (formDefinition?._id && !isEqual(submission.data, input.data)) {\n      setSubmission(input);\n    }\n  }, [formDefinition?._id]);\n\n  return {\n    options,\n    form,\n    type: formDefinition.type,\n    submission,\n    onChange,\n    isValid,\n    setIsValid,\n    onSubmit: () => {\n      onSubmit(submissionToFormSettings(formDefinition, submission));\n    }\n  };\n}\n\nexport function FormSettings(props: FormSettingsProps) {\n  const { form, submission, options = {}, onChange, onSubmit, isValid } = useFormSettings(props);\n\n  const i18n = options.i18n || ((f: string) => f);\n\n  return (\n    <div>\n      <Form<FormSettingsType> form={form} submission={submission} onChange={onChange} options={options} />\n\n      <button data-testid='submit' disabled={!isValid} className={\"mt-5 btn btn-primary\"} onClick={onSubmit} type={\"submit\"}>\n        {i18n(\"Save settings\")}\n      </button>\n    </div>\n  );\n}\n"],"names":["useFormSettings","formDefinition","onSubmit","noop","options","form","getFormSettingsSchema","isValid","setIsValid","useState","submission","setSubmission","formSettingsToSubmission","onChange","data","useEffect","input","isEqual","submissionToFormSettings","FormSettings","props","i18n","f","jsx","Form"],"mappings":";;;;;;;AAeA,SAASA,EAAgB,EAAE,MAAMC,GAAgB,UAAAC,IAAWC,GAAM,SAAAC,KAA8B;AAC9F,QAAMC,IAAOC,EAAsB,GAC7B,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAI,GACrC,CAACC,GAAYC,CAAa,IAAIF,EAAS,MAAMG,EAAyBX,CAAc,CAAC,GAErFY,IAAW,CAAC,EAAE,MAAAC,GAAM,SAAAP,QAAmD;AAC3E,IAAIA,KACYI,EAAA,EAAE,MAAAG,GAAM,GAExBN,EAAWD,CAAO;AAAA,EACpB;AAEA,SAAAQ,EAAU,MAAM;AACR,UAAAC,IAAQJ,EAAyBX,CAAc;AACjD,IAAAA,KAAA,QAAAA,EAAgB,OAAO,CAACgB,EAAQP,EAAW,MAAMM,EAAM,IAAI,KAC7DL,EAAcK,CAAK;AAAA,EACrB,GACC,CAACf,KAAA,gBAAAA,EAAgB,GAAG,CAAC,GAEjB;AAAA,IACL,SAAAG;AAAA,IACA,MAAAC;AAAA,IACA,MAAMJ,EAAe;AAAA,IACrB,YAAAS;AAAA,IACA,UAAAG;AAAA,IACA,SAAAN;AAAA,IACA,YAAAC;AAAA,IACA,UAAU,MAAM;AACL,MAAAN,EAAAgB,EAAyBjB,GAAgBS,CAAU,CAAC;AAAA,IAAA;AAAA,EAEjE;AACF;AAEO,SAASS,EAAaC,GAA0B;AAC/C,QAAA,EAAE,MAAAf,GAAM,YAAAK,GAAY,SAAAN,IAAU,CAAI,GAAA,UAAAS,GAAU,UAAAX,GAAU,SAAAK,EAAA,IAAYP,EAAgBoB,CAAK,GAEvFC,IAAOjB,EAAQ,SAAS,CAACkB,MAAcA;AAE7C,2BACG,OACC,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAuB,EAAA,MAAAnB,GAAY,YAAAK,GAAwB,UAAAG,GAAoB,SAAAT,GAAkB;AAAA,IAEjG,gBAAAmB,EAAA,UAAA,EAAO,eAAY,UAAS,UAAU,CAAChB,GAAS,WAAW,wBAAwB,SAASL,GAAU,MAAM,UAC1G,UAAAmB,EAAK,eAAe,EACvB,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"FormSettings.js","sources":["../../../../src/organisms/form/settings/FormSettings.tsx"],"sourcesContent":["import isEqual from \"lodash/isEqual\";\nimport noop from \"lodash/noop\";\nimport { useEffect, useState } from \"react\";\n\nimport type { ChangedSubmission, FormOptions, FormType } from \"../../../interfaces\";\nimport { Form } from \"../../form/Form\";\nimport { getFormSettingsSchema } from \"./FormSettings.schema\";\nimport { formSettingsToSubmission, FormSettingsType, submissionToFormSettings } from \"./FormSettings.utils\";\n\nexport interface FormSettingsProps {\n  form: Partial<FormType>;\n  onSubmit?: Function;\n  options?: FormOptions;\n}\n\nfunction useFormSettings({ form: formDefinition, onSubmit = noop, options }: FormSettingsProps) {\n  const form = getFormSettingsSchema();\n  const [isValid, setIsValid] = useState(true);\n  const [submission, setSubmission] = useState(() => formSettingsToSubmission(formDefinition));\n\n  const onChange = ({ data, isValid }: ChangedSubmission<FormSettingsType>) => {\n    if (isValid) {\n      setSubmission({ data });\n    }\n    setIsValid(isValid);\n  };\n\n  useEffect(() => {\n    const input = formSettingsToSubmission(formDefinition);\n    if (formDefinition?._id && !isEqual(submission.data, input.data)) {\n      setSubmission(input);\n    }\n  }, [formDefinition?._id]);\n\n  return {\n    options,\n    form,\n    type: formDefinition.type,\n    submission,\n    onChange,\n    isValid,\n    setIsValid,\n    onSubmit: () => {\n      onSubmit(submissionToFormSettings(formDefinition, submission));\n    }\n  };\n}\n\nexport function FormSettings(props: FormSettingsProps) {\n  const { form, submission, options = {}, onChange, onSubmit, isValid } = useFormSettings(props);\n\n  const i18n = options.i18n || ((f: string) => f);\n\n  return (\n    <div>\n      <Form<FormSettingsType> form={form} submission={submission} onChange={onChange} options={options} />\n\n      <button data-testid='submit' disabled={!isValid} className={\"mt-5 btn btn-primary\"} onClick={onSubmit} type={\"submit\"}>\n        {i18n(\"Save settings\")}\n      </button>\n    </div>\n  );\n}\n"],"names":["useFormSettings","formDefinition","onSubmit","noop","options","form","getFormSettingsSchema","isValid","setIsValid","useState","submission","setSubmission","formSettingsToSubmission","onChange","data","useEffect","input","isEqual","submissionToFormSettings","FormSettings","props","i18n","f","jsx","Form"],"mappings":";;;;;;;AAeA,SAASA,EAAgB,EAAE,MAAMC,GAAgB,UAAAC,IAAWC,GAAM,SAAAC,KAA8B;AAC9F,QAAMC,IAAOC,EAAA,GACP,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAI,GACrC,CAACC,GAAYC,CAAa,IAAIF,EAAS,MAAMG,EAAyBX,CAAc,CAAC,GAErFY,IAAW,CAAC,EAAE,MAAAC,GAAM,SAAAP,QAAmD;AAC3E,IAAIA,KACFI,EAAc,EAAE,MAAAG,GAAM,GAExBN,EAAWD,CAAO;AAAA,EACpB;AAEA,SAAAQ,EAAU,MAAM;AACd,UAAMC,IAAQJ,EAAyBX,CAAc;AACrD,IAAIA,GAAgB,OAAO,CAACgB,EAAQP,EAAW,MAAMM,EAAM,IAAI,KAC7DL,EAAcK,CAAK;AAAA,EAEvB,GAAG,CAACf,GAAgB,GAAG,CAAC,GAEjB;AAAA,IACL,SAAAG;AAAA,IACA,MAAAC;AAAA,IACA,MAAMJ,EAAe;AAAA,IACrB,YAAAS;AAAA,IACA,UAAAG;AAAA,IACA,SAAAN;AAAA,IACA,YAAAC;AAAA,IACA,UAAU,MAAM;AACd,MAAAN,EAASgB,EAAyBjB,GAAgBS,CAAU,CAAC;AAAA,IAC/D;AAAA,EAAA;AAEJ;AAEO,SAASS,EAAaC,GAA0B;AACrD,QAAM,EAAE,MAAAf,GAAM,YAAAK,GAAY,SAAAN,IAAU,CAAA,GAAI,UAAAS,GAAU,UAAAX,GAAU,SAAAK,EAAA,IAAYP,EAAgBoB,CAAK,GAEvFC,IAAOjB,EAAQ,SAAS,CAACkB,MAAcA;AAE7C,2BACG,OAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAuB,MAAAnB,GAAY,YAAAK,GAAwB,UAAAG,GAAoB,SAAAT,GAAkB;AAAA,IAElG,gBAAAmB,EAAC,UAAA,EAAO,eAAY,UAAS,UAAU,CAAChB,GAAS,WAAW,wBAAwB,SAASL,GAAU,MAAM,UAC1G,UAAAmB,EAAK,eAAe,EAAA,CACvB;AAAA,EAAA,GACF;AAEJ;"}

package/dist/organisms/form/settings/FormSettings.schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormSettings.schema.js","sources":["../../../../src/organisms/form/settings/FormSettings.schema.ts"],"sourcesContent":["import type { FormType } from \"../../../interfaces\";\n\nexport function getFormSettingsSchema(): FormType {\n  return {\n    type: \"form\",\n    tags: [],\n    components: [\n      {\n        input: true,\n        key: \"action\",\n        placeholder: \"Enter the custom submission URL\",\n        label: \"Custom Action Url\",\n        labelPosition: \"top\",\n        widget: { type: \"input\" },\n        type: \"url\",\n        mask: false,\n        inputType: \"url\",\n        inputFormat: \"plain\",\n        spellcheck: true,\n        id: \"efyrzea\",\n        attributes: {\n          \"data-testid\": \"action\"\n        }\n      },\n      {\n        input: true,\n        key: \"tags\",\n        placeholder: \"Add tags\",\n        label: \"Form tags\",\n        widget: { type: \"input\" },\n        type: \"tags\",\n        delimeter: \",\",\n        storeas: \"array\",\n        maxTags: 0,\n        id: \"erxcyw\"\n      },\n      {\n        input: true,\n        key: \"properties\",\n        label: \"Custom Properties\",\n        labelPosition: \"top\",\n        type: \"datamap\",\n        addAnother: \"Add Another\",\n        disableAddingRemovingRows: false,\n        keyBeforeValue: true,\n        valueComponent: {\n          type: \"textfield\",\n          key: \"value\",\n          label: \"Value\",\n          input: true,\n          hideLabel: true\n        },\n        id: \"ezne35\"\n      }\n    ],\n    display: \"form\"\n  };\n}\n"],"names":["getFormSettingsSchema"],"mappings":"AAEO,SAASA,IAAkC;AACzC,SAAA;AAAA,IACL,MAAM;AAAA,IACN,MAAM,CAAC;AAAA,IACP,YAAY;AAAA,MACV;AAAA,QACE,OAAO;AAAA,QACP,KAAK;AAAA,QACL,aAAa;AAAA,QACb,OAAO;AAAA,QACP,eAAe;AAAA,QACf,QAAQ,EAAE,MAAM,QAAQ;AAAA,QACxB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,WAAW;AAAA,QACX,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,IAAI;AAAA,QACJ,YAAY;AAAA,UACV,eAAe;AAAA,QAAA;AAAA,MAEnB;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,KAAK;AAAA,QACL,aAAa;AAAA,QACb,OAAO;AAAA,QACP,QAAQ,EAAE,MAAM,QAAQ;AAAA,QACxB,MAAM;AAAA,QACN,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS;AAAA,QACT,IAAI;AAAA,MACN;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,KAAK;AAAA,QACL,OAAO;AAAA,QACP,eAAe;AAAA,QACf,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,2BAA2B;AAAA,QAC3B,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,UACd,MAAM;AAAA,UACN,KAAK;AAAA,UACL,OAAO;AAAA,UACP,OAAO;AAAA,UACP,WAAW;AAAA,QACb;AAAA,QACA,IAAI;AAAA,MAAA;AAAA,IAER;AAAA,IACA,SAAS;AAAA,EACX;AACF;"}
+{"version":3,"file":"FormSettings.schema.js","sources":["../../../../src/organisms/form/settings/FormSettings.schema.ts"],"sourcesContent":["import type { FormType } from \"../../../interfaces\";\n\nexport function getFormSettingsSchema(): FormType {\n  return {\n    type: \"form\",\n    tags: [],\n    components: [\n      {\n        input: true,\n        key: \"action\",\n        placeholder: \"Enter the custom submission URL\",\n        label: \"Custom Action Url\",\n        labelPosition: \"top\",\n        widget: { type: \"input\" },\n        type: \"url\",\n        mask: false,\n        inputType: \"url\",\n        inputFormat: \"plain\",\n        spellcheck: true,\n        id: \"efyrzea\",\n        attributes: {\n          \"data-testid\": \"action\"\n        }\n      },\n      {\n        input: true,\n        key: \"tags\",\n        placeholder: \"Add tags\",\n        label: \"Form tags\",\n        widget: { type: \"input\" },\n        type: \"tags\",\n        delimeter: \",\",\n        storeas: \"array\",\n        maxTags: 0,\n        id: \"erxcyw\"\n      },\n      {\n        input: true,\n        key: \"properties\",\n        label: \"Custom Properties\",\n        labelPosition: \"top\",\n        type: \"datamap\",\n        addAnother: \"Add Another\",\n        disableAddingRemovingRows: false,\n        keyBeforeValue: true,\n        valueComponent: {\n          type: \"textfield\",\n          key: \"value\",\n          label: \"Value\",\n          input: true,\n          hideLabel: true\n        },\n        id: \"ezne35\"\n      }\n    ],\n    display: \"form\"\n  };\n}\n"],"names":["getFormSettingsSchema"],"mappings":"AAEO,SAASA,IAAkC;AAChD,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM,CAAA;AAAA,IACN,YAAY;AAAA,MACV;AAAA,QACE,OAAO;AAAA,QACP,KAAK;AAAA,QACL,aAAa;AAAA,QACb,OAAO;AAAA,QACP,eAAe;AAAA,QACf,QAAQ,EAAE,MAAM,QAAA;AAAA,QAChB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,WAAW;AAAA,QACX,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,IAAI;AAAA,QACJ,YAAY;AAAA,UACV,eAAe;AAAA,QAAA;AAAA,MACjB;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,KAAK;AAAA,QACL,aAAa;AAAA,QACb,OAAO;AAAA,QACP,QAAQ,EAAE,MAAM,QAAA;AAAA,QAChB,MAAM;AAAA,QACN,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS;AAAA,QACT,IAAI;AAAA,MAAA;AAAA,MAEN;AAAA,QACE,OAAO;AAAA,QACP,KAAK;AAAA,QACL,OAAO;AAAA,QACP,eAAe;AAAA,QACf,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,2BAA2B;AAAA,QAC3B,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,UACd,MAAM;AAAA,UACN,KAAK;AAAA,UACL,OAAO;AAAA,UACP,OAAO;AAAA,UACP,WAAW;AAAA,QAAA;AAAA,QAEb,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,SAAS;AAAA,EAAA;AAEb;"}

package/dist/organisms/form/settings/FormSettings.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormSettings.utils.js","sources":["../../../../src/organisms/form/settings/FormSettings.utils.ts"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep\";\n\nimport { FormType, SubmissionType } from \"../../../interfaces\";\n\nexport type FormSettingsType = {\n  action: string;\n  tags: string[];\n  properties: Record<string, any>;\n};\n\nexport function formSettingsToSubmission(form: Partial<FormType>): SubmissionType<FormSettingsType> {\n  return {\n    data: {\n      action: form.action!,\n      tags: form.tags!,\n      properties: form.properties!\n    }\n  };\n}\n\nexport function submissionToFormSettings(form: Partial<FormType>, submission: SubmissionType<FormSettingsType>): Partial<FormType> {\n  return {\n    ...cloneDeep(form),\n    tags: submission.data.tags,\n    action: submission.data.action,\n    properties: submission.data.properties\n  };\n}\n"],"names":["formSettingsToSubmission","form","submissionToFormSettings","submission","cloneDeep"],"mappings":";AAUO,SAASA,EAAyBC,GAA2D;AAC3F,SAAA;AAAA,IACL,MAAM;AAAA,MACJ,QAAQA,EAAK;AAAA,MACb,MAAMA,EAAK;AAAA,MACX,YAAYA,EAAK;AAAA,IAAA;AAAA,EAErB;AACF;AAEgB,SAAAC,EAAyBD,GAAyBE,GAAiE;AAC1H,SAAA;AAAA,IACL,GAAGC,EAAUH,CAAI;AAAA,IACjB,MAAME,EAAW,KAAK;AAAA,IACtB,QAAQA,EAAW,KAAK;AAAA,IACxB,YAAYA,EAAW,KAAK;AAAA,EAC9B;AACF;"}
+{"version":3,"file":"FormSettings.utils.js","sources":["../../../../src/organisms/form/settings/FormSettings.utils.ts"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep\";\n\nimport { FormType, SubmissionType } from \"../../../interfaces\";\n\nexport type FormSettingsType = {\n  action: string;\n  tags: string[];\n  properties: Record<string, any>;\n};\n\nexport function formSettingsToSubmission(form: Partial<FormType>): SubmissionType<FormSettingsType> {\n  return {\n    data: {\n      action: form.action!,\n      tags: form.tags!,\n      properties: form.properties!\n    }\n  };\n}\n\nexport function submissionToFormSettings(form: Partial<FormType>, submission: SubmissionType<FormSettingsType>): Partial<FormType> {\n  return {\n    ...cloneDeep(form),\n    tags: submission.data.tags,\n    action: submission.data.action,\n    properties: submission.data.properties\n  };\n}\n"],"names":["formSettingsToSubmission","form","submissionToFormSettings","submission","cloneDeep"],"mappings":";AAUO,SAASA,EAAyBC,GAA2D;AAClG,SAAO;AAAA,IACL,MAAM;AAAA,MACJ,QAAQA,EAAK;AAAA,MACb,MAAMA,EAAK;AAAA,MACX,YAAYA,EAAK;AAAA,IAAA;AAAA,EACnB;AAEJ;AAEO,SAASC,EAAyBD,GAAyBE,GAAiE;AACjI,SAAO;AAAA,IACL,GAAGC,EAAUH,CAAI;AAAA,IACjB,MAAME,EAAW,KAAK;AAAA,IACtB,QAAQA,EAAW,KAAK;AAAA,IACxB,YAAYA,EAAW,KAAK;AAAA,EAAA;AAEhC;"}