@webiny/app-admin 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

package/base/Base/FieldRenderers/InputRenderer.js

@@ -0,0 +1,19 @@
+import react from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { DelayedOnChange, Input } from "@webiny/admin-ui";
+const InputRenderer = createFieldRenderer(({ field })=>/*#__PURE__*/ react.createElement(DelayedOnChange, {
+        value: field.value,
+        onChange: (value)=>field.onChange(value)
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: field.label,
+        placeholder: field.placeholder,
+        description: field.description,
+        note: field.note,
+        required: field.required,
+        disabled: field.disabled,
+        validation: field.validation,
+        onBlur: ()=>field.onBlur()
+    })));
+export { InputRenderer };
+
+//# sourceMappingURL=InputRenderer.js.map

package/base/Base/FieldRenderers/InputRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/InputRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/InputRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Input } from \"@webiny/admin-ui\";\nimport { DelayedOnChange } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        textInput: { fieldType: \"text\"; settings: undefined };\n    }\n}\n\nexport const InputRenderer = createFieldRenderer(({ field }) => {\n    return (\n        <DelayedOnChange value={field.value} onChange={value => field.onChange(value)}>\n            <Input\n                label={field.label}\n                placeholder={field.placeholder}\n                description={field.description}\n                note={field.note}\n                required={field.required}\n                disabled={field.disabled}\n                validation={field.validation}\n                onBlur={() => field.onBlur()}\n            />\n        </DelayedOnChange>\n    );\n});\n"],"names":["InputRenderer","createFieldRenderer","field","DelayedOnChange","value","Input"],"mappings":";;;AAWO,MAAMA,gBAAgBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE,GAChD,WAAP,GACI,oBAACC,iBAAeA;QAAC,OAAOD,MAAM,KAAK;QAAE,UAAUE,CAAAA,QAASF,MAAM,QAAQ,CAACE;qBACnE,oBAACC,OAAKA;QACF,OAAOH,MAAM,KAAK;QAClB,aAAaA,MAAM,WAAW;QAC9B,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,QAAQ,IAAMA,MAAM,MAAM"}

package/base/Base/FieldRenderers/LexicalRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        lexical: {
+            fieldType: "lexical";
+            settings: undefined;
+        };
+    }
+}
+export declare const LexicalRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/LexicalRenderer.js

@@ -0,0 +1,48 @@
+import react from "react";
+import { StaticToolbar } from "@webiny/lexical-editor";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { LexicalEditor } from "../../../components/LexicalEditor/LexicalEditor.js";
+import { FormComponentDescription, FormComponentLabel, FormComponentNote } from "@webiny/admin-ui";
+const placeholderStyles = {
+    position: "absolute",
+    top: 40,
+    left: 25
+};
+const contentEditableStyles = {
+    minHeight: 200,
+    display: "block",
+    padding: 10
+};
+const styles = {
+    backgroundColor: "#fff",
+    border: "1px solid #e1e1e1",
+    padding: "10px 14px",
+    minHeight: 200,
+    maxHeight: 350
+};
+const LexicalRenderer = createFieldRenderer(({ field })=>{
+    const value = field.value;
+    const toolbar = /*#__PURE__*/ react.createElement(StaticToolbar, null);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        text: field.label,
+        hint: field.help,
+        disabled: field.disabled
+    }), /*#__PURE__*/ react.createElement(FormComponentDescription, {
+        text: field.description,
+        disabled: field.disabled
+    }), /*#__PURE__*/ react.createElement(LexicalEditor, {
+        placeholder: field.placeholder || "Enter your text here...",
+        staticToolbar: toolbar,
+        placeholderStyles: placeholderStyles,
+        contentEditableStyles: contentEditableStyles,
+        styles: styles,
+        value: value,
+        onChange: (value)=>field.onChange(value)
+    }), field.note ? /*#__PURE__*/ react.createElement(FormComponentNote, {
+        text: field.note,
+        disabled: field.disabled
+    }) : null);
+});
+export { LexicalRenderer };
+
+//# sourceMappingURL=LexicalRenderer.js.map

package/base/Base/FieldRenderers/LexicalRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/LexicalRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/LexicalRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { StaticToolbar } from \"@webiny/lexical-editor\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { LexicalEditor } from \"~/components/LexicalEditor/LexicalEditor.js\";\nimport type { RichTextValueWithHtml } from \"~/components/LexicalEditor/lexicalValueWithHtml.js\";\nimport { FormComponentLabel } from \"@webiny/admin-ui\";\nimport { FormComponentDescription } from \"@webiny/admin-ui\";\nimport { FormComponentNote } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        lexical: {\n            fieldType: \"lexical\";\n            settings: undefined;\n        };\n    }\n}\n\nconst placeholderStyles: React.CSSProperties = { position: \"absolute\", top: 40, left: 25 };\n\nconst contentEditableStyles: React.CSSProperties = {\n    minHeight: 200,\n    display: \"block\",\n    padding: 10\n};\n\nconst styles: React.CSSProperties = {\n    backgroundColor: \"#fff\",\n    border: \"1px solid #e1e1e1\",\n    padding: \"10px 14px\",\n    minHeight: 200,\n    maxHeight: 350\n};\n\nexport const LexicalRenderer = createFieldRenderer<\"lexical\">(({ field }) => {\n    const value = field.value as RichTextValueWithHtml | undefined;\n    const toolbar = <StaticToolbar />;\n\n    return (\n        <>\n            <FormComponentLabel text={field.label} hint={field.help} disabled={field.disabled} />\n            <FormComponentDescription text={field.description} disabled={field.disabled} />\n            <LexicalEditor\n                placeholder={field.placeholder || \"Enter your text here...\"}\n                staticToolbar={toolbar}\n                placeholderStyles={placeholderStyles}\n                contentEditableStyles={contentEditableStyles}\n                styles={styles}\n                value={value}\n                onChange={value => field.onChange(value)}\n            />\n            {field.note ? <FormComponentNote text={field.note} disabled={field.disabled} /> : null}\n        </>\n    );\n});\n"],"names":["placeholderStyles","contentEditableStyles","styles","LexicalRenderer","createFieldRenderer","field","value","toolbar","StaticToolbar","FormComponentLabel","FormComponentDescription","LexicalEditor","FormComponentNote"],"mappings":";;;;;AAkBA,MAAMA,oBAAyC;IAAE,UAAU;IAAY,KAAK;IAAI,MAAM;AAAG;AAEzF,MAAMC,wBAA6C;IAC/C,WAAW;IACX,SAAS;IACT,SAAS;AACb;AAEA,MAAMC,SAA8B;IAChC,iBAAiB;IACjB,QAAQ;IACR,SAAS;IACT,WAAW;IACX,WAAW;AACf;AAEO,MAAMC,kBAAkBC,oBAA+B,CAAC,EAAEC,KAAK,EAAE;IACpE,MAAMC,QAAQD,MAAM,KAAK;IACzB,MAAME,UAAU,WAAVA,GAAU,oBAACC,eAAaA;IAE9B,OAAO,WAAP,GACI,wDACI,oBAACC,oBAAkBA;QAAC,MAAMJ,MAAM,KAAK;QAAE,MAAMA,MAAM,IAAI;QAAE,UAAUA,MAAM,QAAQ;sBACjF,oBAACK,0BAAwBA;QAAC,MAAML,MAAM,WAAW;QAAE,UAAUA,MAAM,QAAQ;sBAC3E,oBAACM,eAAaA;QACV,aAAaN,MAAM,WAAW,IAAI;QAClC,eAAeE;QACf,mBAAmBP;QACnB,uBAAuBC;QACvB,QAAQC;QACR,OAAOI;QACP,UAAUA,CAAAA,QAASD,MAAM,QAAQ,CAACC;QAErCD,MAAM,IAAI,GAAG,WAAH,GAAG,oBAACO,mBAAiBA;QAAC,MAAMP,MAAM,IAAI;QAAE,UAAUA,MAAM,QAAQ;SAAO;AAG9F"}

package/base/Base/FieldRenderers/MultiFilePickerRenderer.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { FileFieldSettings } from "../../../features/formModel/fieldTypes/FileFieldType.js";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        multiFilePicker: {
+            fieldType: "file";
+            settings: FileFieldSettings;
+        };
+    }
+}
+export declare const MultiFilePickerRenderer: React.ComponentType<{
+    field: import("~/features/formModel/abstractions.js").IFieldVM;
+}>;

package/base/Base/FieldRenderers/MultiFilePickerRenderer.js

@@ -0,0 +1,70 @@
+import react from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { FileManager } from "../../ui/FileManager.js";
+import { MultiFilePicker } from "@webiny/admin-ui";
+const toFilePickerValues = (value)=>{
+    if (!Array.isArray(value)) return [];
+    return value.filter((item)=>item?.src).map((item)=>({
+            id: item.id,
+            url: item.src,
+            name: item.name,
+            mimeType: item.mimeType,
+            size: item.size
+        }));
+};
+const fileManagerItemToValue = (file)=>({
+        id: file.id,
+        name: file.name,
+        size: file.size,
+        mimeType: file.type,
+        src: file.src || "",
+        width: file.width,
+        height: file.height
+    });
+const MultiFilePickerRenderer = createFieldRenderer(({ field })=>{
+    const settings = field.rendererSettings;
+    const values = toFilePickerValues(field.value);
+    const currentValues = Array.isArray(field.value) ? field.value : [];
+    return /*#__PURE__*/ react.createElement(FileManager, {
+        multiple: true,
+        images: settings?.images,
+        accept: settings?.accept,
+        own: settings?.own,
+        scope: settings?.scope,
+        render: ({ showFileManager })=>{
+            const selectFiles = (replaceIndex = -1)=>{
+                showFileManager((files)=>{
+                    const newValues = files.map(fileManagerItemToValue);
+                    if (-1 === replaceIndex) field.onChange([
+                        ...currentValues,
+                        ...newValues
+                    ]);
+                    else field.onChange([
+                        ...currentValues.slice(0, replaceIndex),
+                        ...newValues,
+                        ...currentValues.slice(replaceIndex + 1)
+                    ]);
+                });
+            };
+            return /*#__PURE__*/ react.createElement(MultiFilePicker, {
+                label: field.label,
+                description: field.description,
+                note: field.note,
+                hint: field.help,
+                values: values,
+                type: "compact",
+                onSelectItem: ()=>selectFiles(),
+                onReplaceItem: (_, index)=>selectFiles(index),
+                onRemoveItem: (_, index)=>{
+                    field.onChange([
+                        ...currentValues.slice(0, index),
+                        ...currentValues.slice(index + 1)
+                    ]);
+                }
+            });
+        }
+    });
+});
+export { MultiFilePickerRenderer };
+
+//# sourceMappingURL=MultiFilePickerRenderer.js.map

package/base/Base/FieldRenderers/MultiFilePickerRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/MultiFilePickerRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/MultiFilePickerRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { FileManager } from \"~/base/ui/FileManager.js\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager.js\";\nimport { MultiFilePicker } from \"@webiny/admin-ui\";\nimport type { FileItemDto } from \"@webiny/admin-ui\";\nimport type { FileValue } from \"~/features/formModel/abstractions.js\";\nimport type { FileFieldSettings } from \"~/features/formModel/fieldTypes/FileFieldType.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        multiFilePicker: { fieldType: \"file\"; settings: FileFieldSettings };\n    }\n}\n\nconst toFilePickerValues = (value: unknown): FileItemDto[] => {\n    if (!Array.isArray(value)) {\n        return [];\n    }\n    return value\n        .filter((item: FileValue) => item?.src)\n        .map((item: FileValue) => ({\n            id: item.id,\n            url: item.src,\n            name: item.name,\n            mimeType: item.mimeType,\n            size: item.size\n        }));\n};\n\nconst fileManagerItemToValue = (file: FileManagerFileItem): FileValue => ({\n    id: file.id,\n    name: file.name,\n    size: file.size,\n    mimeType: file.type,\n    src: file.src || \"\",\n    width: file.width,\n    height: file.height\n});\n\nexport const MultiFilePickerRenderer = createFieldRenderer<\"multiFilePicker\">(({ field }) => {\n    const settings = field.rendererSettings as FileFieldSettings | undefined;\n    const values = toFilePickerValues(field.value);\n    const currentValues = (Array.isArray(field.value) ? field.value : []) as FileValue[];\n\n    return (\n        <FileManager\n            multiple\n            images={settings?.images}\n            accept={settings?.accept}\n            own={settings?.own}\n            scope={settings?.scope}\n            render={({ showFileManager }) => {\n                const selectFiles = (replaceIndex = -1) => {\n                    showFileManager((files: FileManagerFileItem[]) => {\n                        const newValues = files.map(fileManagerItemToValue);\n                        if (replaceIndex === -1) {\n                            field.onChange([...currentValues, ...newValues]);\n                        } else {\n                            field.onChange([\n                                ...currentValues.slice(0, replaceIndex),\n                                ...newValues,\n                                ...currentValues.slice(replaceIndex + 1)\n                            ]);\n                        }\n                    });\n                };\n\n                return (\n                    <MultiFilePicker\n                        label={field.label}\n                        description={field.description}\n                        note={field.note}\n                        hint={field.help}\n                        values={values}\n                        type=\"compact\"\n                        onSelectItem={() => selectFiles()}\n                        onReplaceItem={(_, index) => selectFiles(index)}\n                        onRemoveItem={(_, index) => {\n                            field.onChange([\n                                ...currentValues.slice(0, index),\n                                ...currentValues.slice(index + 1)\n                            ]);\n                        }}\n                    />\n                );\n            }}\n        />\n    );\n});\n"],"names":["toFilePickerValues","value","Array","item","fileManagerItemToValue","file","MultiFilePickerRenderer","createFieldRenderer","field","settings","values","currentValues","FileManager","showFileManager","selectFiles","replaceIndex","files","newValues","MultiFilePicker","_","index"],"mappings":";;;;AAeA,MAAMA,qBAAqB,CAACC;IACxB,IAAI,CAACC,MAAM,OAAO,CAACD,QACf,OAAO,EAAE;IAEb,OAAOA,MACF,MAAM,CAAC,CAACE,OAAoBA,MAAM,KAClC,GAAG,CAAC,CAACA,OAAqB;YACvB,IAAIA,KAAK,EAAE;YACX,KAAKA,KAAK,GAAG;YACb,MAAMA,KAAK,IAAI;YACf,UAAUA,KAAK,QAAQ;YACvB,MAAMA,KAAK,IAAI;QACnB;AACR;AAEA,MAAMC,yBAAyB,CAACC,OAA0C;QACtE,IAAIA,KAAK,EAAE;QACX,MAAMA,KAAK,IAAI;QACf,MAAMA,KAAK,IAAI;QACf,UAAUA,KAAK,IAAI;QACnB,KAAKA,KAAK,GAAG,IAAI;QACjB,OAAOA,KAAK,KAAK;QACjB,QAAQA,KAAK,MAAM;IACvB;AAEO,MAAMC,0BAA0BC,oBAAuC,CAAC,EAAEC,KAAK,EAAE;IACpF,MAAMC,WAAWD,MAAM,gBAAgB;IACvC,MAAME,SAASV,mBAAmBQ,MAAM,KAAK;IAC7C,MAAMG,gBAAiBT,MAAM,OAAO,CAACM,MAAM,KAAK,IAAIA,MAAM,KAAK,GAAG,EAAE;IAEpE,OAAO,WAAP,GACI,oBAACI,aAAWA;QACR;QACA,QAAQH,UAAU;QAClB,QAAQA,UAAU;QAClB,KAAKA,UAAU;QACf,OAAOA,UAAU;QACjB,QAAQ,CAAC,EAAEI,eAAe,EAAE;YACxB,MAAMC,cAAc,CAACC,eAAe,EAAE;gBAClCF,gBAAgB,CAACG;oBACb,MAAMC,YAAYD,MAAM,GAAG,CAACZ;oBAC5B,IAAIW,AAAiB,OAAjBA,cACAP,MAAM,QAAQ,CAAC;2BAAIG;2BAAkBM;qBAAU;yBAE/CT,MAAM,QAAQ,CAAC;2BACRG,cAAc,KAAK,CAAC,GAAGI;2BACvBE;2BACAN,cAAc,KAAK,CAACI,eAAe;qBACzC;gBAET;YACJ;YAEA,OAAO,WAAP,GACI,oBAACG,iBAAeA;gBACZ,OAAOV,MAAM,KAAK;gBAClB,aAAaA,MAAM,WAAW;gBAC9B,MAAMA,MAAM,IAAI;gBAChB,MAAMA,MAAM,IAAI;gBAChB,QAAQE;gBACR,MAAK;gBACL,cAAc,IAAMI;gBACpB,eAAe,CAACK,GAAGC,QAAUN,YAAYM;gBACzC,cAAc,CAACD,GAAGC;oBACdZ,MAAM,QAAQ,CAAC;2BACRG,cAAc,KAAK,CAAC,GAAGS;2BACvBT,cAAc,KAAK,CAACS,QAAQ;qBAClC;gBACL;;QAGZ;;AAGZ"}

package/base/Base/FieldRenderers/NumberInputRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        numberInput: {
+            fieldType: "number";
+            settings: undefined;
+        };
+    }
+}
+export declare const NumberInputRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/NumberInputRenderer.js

@@ -0,0 +1,20 @@
+import react from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { DelayedOnChange, Input } from "@webiny/admin-ui";
+const NumberInputRenderer = createFieldRenderer(({ field })=>/*#__PURE__*/ react.createElement(DelayedOnChange, {
+        value: field.value,
+        onChange: (value)=>field.onChange(value)
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: field.label,
+        placeholder: field.placeholder,
+        description: field.description,
+        note: field.note,
+        required: field.required,
+        disabled: field.disabled,
+        validation: field.validation,
+        onBlur: ()=>field.onBlur(),
+        type: "number"
+    })));
+export { NumberInputRenderer };
+
+//# sourceMappingURL=NumberInputRenderer.js.map

package/base/Base/FieldRenderers/NumberInputRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/NumberInputRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/NumberInputRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { DelayedOnChange, Input } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        numberInput: { fieldType: \"number\"; settings: undefined };\n    }\n}\n\nexport const NumberInputRenderer = createFieldRenderer(({ field }) => {\n    return (\n        <DelayedOnChange value={field.value} onChange={value => field.onChange(value)}>\n            <Input\n                label={field.label}\n                placeholder={field.placeholder}\n                description={field.description}\n                note={field.note}\n                required={field.required}\n                disabled={field.disabled}\n                validation={field.validation}\n                onBlur={() => field.onBlur()}\n                type=\"number\"\n            />\n        </DelayedOnChange>\n    );\n});\n"],"names":["NumberInputRenderer","createFieldRenderer","field","DelayedOnChange","value","Input"],"mappings":";;;AAUO,MAAMA,sBAAsBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE,GACtD,WAAP,GACI,oBAACC,iBAAeA;QAAC,OAAOD,MAAM,KAAK;QAAE,UAAUE,CAAAA,QAASF,MAAM,QAAQ,CAACE;qBACnE,oBAACC,OAAKA;QACF,OAAOH,MAAM,KAAK;QAClB,aAAaA,MAAM,WAAW;QAC9B,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,QAAQ,IAAMA,MAAM,MAAM;QAC1B,MAAK"}

package/base/Base/FieldRenderers/NumberInputsRenderer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        numberInputs: {
+            fieldType: "number";
+            settings?: {
+                addItemLabel?: string;
+            };
+        };
+    }
+}
+export declare const NumberInputsRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/NumberInputsRenderer.js

@@ -0,0 +1,50 @@
+import react from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { ReactComponent } from "@webiny/icons/delete.svg";
+import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
+import { Button, DelayedOnChange, FormComponentDescription, Icon, Input, Separator } from "@webiny/admin-ui";
+const NumberInputsRenderer = createFieldRenderer(({ field })=>{
+    const values = Array.isArray(field.value) ? field.value : [];
+    const updateAt = (index, val)=>{
+        const next = [
+            ...values
+        ];
+        next[index] = val;
+        field.onChange(next);
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement(Separator, {
+        labelPosition: "start",
+        variant: "accent"
+    }, /*#__PURE__*/ react.createElement("span", {
+        className: "text-accent-primary text-lg font-semibold"
+    }, `${field.label ?? ""} ${values.length ? `(${values.length})` : ""}`)), field.description && /*#__PURE__*/ react.createElement(FormComponentDescription, {
+        text: field.description
+    }), values.map((val, index)=>/*#__PURE__*/ react.createElement(DelayedOnChange, {
+            key: index,
+            value: val,
+            onChange: (value)=>updateAt(index, value)
+        }, /*#__PURE__*/ react.createElement(Input, {
+            disabled: field.disabled,
+            label: `Value ${index + 1}`,
+            placeholder: field.placeholder,
+            type: "number",
+            onEnter: ()=>field.addItem(""),
+            endIcon: /*#__PURE__*/ react.createElement(Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Delete",
+                onClick: ()=>field.removeItem(index),
+                className: "cursor-pointer"
+            })
+        }))), /*#__PURE__*/ react.createElement(Button, {
+        disabled: field.disabled,
+        variant: "tertiary",
+        icon: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null),
+        text: field.rendererSettings?.addItemLabel ?? "Add Value",
+        onClick: ()=>field.addItem("")
+    }));
+});
+export { NumberInputsRenderer };
+
+//# sourceMappingURL=NumberInputsRenderer.js.map

package/base/Base/FieldRenderers/NumberInputsRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/NumberInputsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/NumberInputsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport {\n    Button,\n    DelayedOnChange,\n    FormComponentDescription,\n    Icon,\n    Input,\n    Separator\n} from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        numberInputs: { fieldType: \"number\"; settings?: { addItemLabel?: string } };\n    }\n}\n\nexport const NumberInputsRenderer = createFieldRenderer<\"numberInputs\">(({ field }) => {\n    const values = Array.isArray(field.value) ? field.value : [];\n\n    const updateAt = (index: number, val: unknown) => {\n        const next = [...values];\n        next[index] = val as number;\n        field.onChange(next);\n    };\n\n    return (\n        <div className={\"flex flex-col gap-sm\"}>\n            <Separator labelPosition={\"start\"} variant={\"accent\"}>\n                <span className={\"text-accent-primary text-lg font-semibold\"}>\n                    {`${field.label ?? \"\"} ${values.length ? `(${values.length})` : \"\"}`}\n                </span>\n            </Separator>\n            {field.description && <FormComponentDescription text={field.description} />}\n            {values.map((val, index) => (\n                <DelayedOnChange key={index} value={val} onChange={value => updateAt(index, value)}>\n                    <Input\n                        disabled={field.disabled}\n                        label={`Value ${index + 1}`}\n                        placeholder={field.placeholder}\n                        type=\"number\"\n                        onEnter={() => field.addItem(\"\")}\n                        endIcon={\n                            <Icon\n                                icon={<DeleteIcon />}\n                                label={\"Delete\"}\n                                onClick={() => field.removeItem(index)}\n                                className={\"cursor-pointer\"}\n                            />\n                        }\n                    />\n                </DelayedOnChange>\n            ))}\n            <Button\n                disabled={field.disabled}\n                variant={\"tertiary\"}\n                icon={<AddIcon />}\n                text={field.rendererSettings?.addItemLabel ?? \"Add Value\"}\n                onClick={() => field.addItem(\"\")}\n            />\n        </div>\n    );\n});\n"],"names":["NumberInputsRenderer","createFieldRenderer","field","values","Array","updateAt","index","val","next","Separator","FormComponentDescription","DelayedOnChange","value","Input","Icon","DeleteIcon","Button","AddIcon"],"mappings":";;;;;AAmBO,MAAMA,uBAAuBC,oBAAoC,CAAC,EAAEC,KAAK,EAAE;IAC9E,MAAMC,SAASC,MAAM,OAAO,CAACF,MAAM,KAAK,IAAIA,MAAM,KAAK,GAAG,EAAE;IAE5D,MAAMG,WAAW,CAACC,OAAeC;QAC7B,MAAMC,OAAO;eAAIL;SAAO;QACxBK,IAAI,CAACF,MAAM,GAAGC;QACdL,MAAM,QAAQ,CAACM;IACnB;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,WAASA;QAAC,eAAe;QAAS,SAAS;qBACxC,oBAAC;QAAK,WAAW;OACZ,GAAGP,MAAM,KAAK,IAAI,GAAG,CAAC,EAAEC,OAAO,MAAM,GAAG,CAAC,CAAC,EAAEA,OAAO,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,IAG3ED,MAAM,WAAW,IAAI,WAAJ,GAAI,oBAACQ,0BAAwBA;QAAC,MAAMR,MAAM,WAAW;QACtEC,OAAO,GAAG,CAAC,CAACI,KAAKD,QAAAA,WAAAA,GACd,oBAACK,iBAAeA;YAAC,KAAKL;YAAO,OAAOC;YAAK,UAAUK,CAAAA,QAASP,SAASC,OAAOM;yBACxE,oBAACC,OAAKA;YACF,UAAUX,MAAM,QAAQ;YACxB,OAAO,CAAC,MAAM,EAAEI,QAAQ,GAAG;YAC3B,aAAaJ,MAAM,WAAW;YAC9B,MAAK;YACL,SAAS,IAAMA,MAAM,OAAO,CAAC;YAC7B,uBACI,oBAACY,MAAIA;gBACD,oBAAM,oBAACC,gBAAUA;gBACjB,OAAO;gBACP,SAAS,IAAMb,MAAM,UAAU,CAACI;gBAChC,WAAW;;4BAM/B,oBAACU,QAAMA;QACH,UAAUd,MAAM,QAAQ;QACxB,SAAS;QACT,oBAAM,oBAACe,wBAAOA;QACd,MAAMf,MAAM,gBAAgB,EAAE,gBAAgB;QAC9C,SAAS,IAAMA,MAAM,OAAO,CAAC;;AAI7C"}

package/base/Base/FieldRenderers/ObjectRenderer/DynamicZoneRenderer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+declare module "../../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        dynamicZone: {
+            fieldType: "object";
+            settings?: {
+                container?: boolean;
+            };
+        };
+    }
+}
+export declare const DynamicZoneRenderer: React.ComponentType<{
+    field: import("../../../../index.js").IFieldVM;
+}>;

package/base/Base/FieldRenderers/ObjectRenderer/DynamicZoneRenderer.js

@@ -0,0 +1,17 @@
+import react from "react";
+import { createObjectFieldRenderer } from "../../../../features/formModel/createFieldRenderer.js";
+import { SingleValueDynamicZone } from "./SingleValueDynamicZone.js";
+import { MultiValueDynamicZone } from "./MultiValueDynamicZone.js";
+const DynamicZoneRenderer = createObjectFieldRenderer(({ field })=>{
+    if (field.isList) return /*#__PURE__*/ react.createElement(MultiValueDynamicZone, {
+        field: field,
+        showContainer: field.rendererSettings?.container !== false
+    });
+    return /*#__PURE__*/ react.createElement(SingleValueDynamicZone, {
+        field: field,
+        showContainer: field.rendererSettings?.container !== false
+    });
+});
+export { DynamicZoneRenderer };
+
+//# sourceMappingURL=DynamicZoneRenderer.js.map

package/base/Base/FieldRenderers/ObjectRenderer/DynamicZoneRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/DynamicZoneRenderer.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/DynamicZoneRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { SingleValueDynamicZone } from \"./SingleValueDynamicZone.js\";\nimport { MultiValueDynamicZone } from \"./MultiValueDynamicZone.js\";\n\ndeclare module \"../../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        dynamicZone: {\n            fieldType: \"object\";\n            settings?: {\n                container?: boolean;\n            };\n        };\n    }\n}\n\nexport const DynamicZoneRenderer = createObjectFieldRenderer<\"dynamicZone\">(({ field }) => {\n    if (field.isList) {\n        return (\n            <MultiValueDynamicZone\n                field={field}\n                showContainer={field.rendererSettings?.container !== false}\n            />\n        );\n    }\n\n    return (\n        <SingleValueDynamicZone\n            field={field}\n            showContainer={field.rendererSettings?.container !== false}\n        />\n    );\n});\n"],"names":["DynamicZoneRenderer","createObjectFieldRenderer","field","MultiValueDynamicZone","SingleValueDynamicZone"],"mappings":";;;;AAgBO,MAAMA,sBAAsBC,0BAAyC,CAAC,EAAEC,KAAK,EAAE;IAClF,IAAIA,MAAM,MAAM,EACZ,OAAO,WAAP,GACI,oBAACC,uBAAqBA;QAClB,OAAOD;QACP,eAAeA,MAAM,gBAAgB,EAAE,cAAc;;IAKjE,OAAO,WAAP,GACI,oBAACE,wBAAsBA;QACnB,OAAOF;QACP,eAAeA,MAAM,gBAAgB,EAAE,cAAc;;AAGjE"}

package/base/Base/FieldRenderers/ObjectRenderer/KeyValueTagsRenderer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+declare module "../../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        keyValueTags: {
+            fieldType: "object";
+            settings?: {
+                addItemLabel?: string;
+            };
+        };
+    }
+}
+export declare const KeyValueTagsRenderer: React.ComponentType<{
+    field: import("~/features/formModel/index.js").IFieldVM;
+}>;

package/base/Base/FieldRenderers/ObjectRenderer/KeyValueTagsRenderer.js

@@ -0,0 +1,59 @@
+import react from "react";
+import { observer } from "mobx-react-lite";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.svg";
+import { Button, FormComponentDescription, FormComponentLabel, IconButton } from "@webiny/admin-ui";
+import { createObjectFieldRenderer } from "../../../../features/formModel/createFieldRenderer.js";
+import { NestedLayout } from "./ObjectFieldComponents.js";
+const KeyValueTagsRenderer = createObjectFieldRenderer(({ field })=>{
+    if (!field.isList) return null;
+    return /*#__PURE__*/ react.createElement(KeyValueTagsList, {
+        field: field
+    });
+});
+const KeyValueTagsList = createObjectFieldRenderer(({ field })=>{
+    const settings = field.rendererSettings;
+    const hasItems = field.items.length > 0;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, field.label && /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        text: field.label
+    }), field.description && /*#__PURE__*/ react.createElement(FormComponentDescription, {
+        text: field.description
+    }), hasItems ? /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-md"
+    }, field.items.map((item)=>/*#__PURE__*/ react.createElement(TagRow, {
+            key: item.key,
+            item: item,
+            disabled: field.disabled
+        }))) : null, field.disabled ? null : /*#__PURE__*/ react.createElement("div", {
+        className: "mt-md"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        onClick: ()=>field.addItem(),
+        text: settings?.addItemLabel ?? "Add tag",
+        variant: "secondary",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+    })));
+});
+const TagRow = observer(({ item, disabled })=>{
+    const inlineLayout = [
+        {
+            type: "row",
+            fields: item.fields
+        }
+    ];
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1 gap-md"
+    }, /*#__PURE__*/ react.createElement(NestedLayout, {
+        layout: inlineLayout
+    })), !disabled && /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "ghost",
+        size: "lg",
+        icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+        onClick: ()=>item.remove()
+    }));
+});
+export { KeyValueTagsRenderer };
+
+//# sourceMappingURL=KeyValueTagsRenderer.js.map

package/base/Base/FieldRenderers/ObjectRenderer/KeyValueTagsRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/KeyValueTagsRenderer.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/KeyValueTagsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { Button, FormComponentDescription, FormComponentLabel, IconButton } from \"@webiny/admin-ui\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport type { IObjectFieldItemVM } from \"~/features/formModel/index.js\";\nimport { NestedLayout } from \"./ObjectFieldComponents.js\";\n\ndeclare module \"../../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        keyValueTags: {\n            fieldType: \"object\";\n            settings?: { addItemLabel?: string };\n        };\n    }\n}\n\nexport const KeyValueTagsRenderer = createObjectFieldRenderer(({ field }) => {\n    if (!field.isList) {\n        return null;\n    }\n\n    return <KeyValueTagsList field={field} />;\n});\n\nconst KeyValueTagsList = createObjectFieldRenderer<\"keyValueTags\">(({ field }) => {\n    const settings = field.rendererSettings;\n\n    const hasItems = field.items.length > 0;\n\n    return (\n        <>\n            {field.label && <FormComponentLabel text={field.label} />}\n            {field.description && <FormComponentDescription text={field.description} />}\n            {hasItems ? (\n                <div className={\"flex flex-col gap-md\"}>\n                    {field.items.map(item => (\n                        <TagRow key={item.key} item={item} disabled={field.disabled} />\n                    ))}\n                </div>\n            ) : null}\n            {!field.disabled ? (\n                <div className={\"mt-md\"}>\n                    <Button\n                        onClick={() => field.addItem()}\n                        text={settings?.addItemLabel ?? \"Add tag\"}\n                        variant={\"secondary\"}\n                        size={\"sm\"}\n                        icon={<AddIcon />}\n                    />\n                </div>\n            ) : null}\n        </>\n    );\n});\n\nconst TagRow = observer(({ item, disabled }: { item: IObjectFieldItemVM; disabled: boolean }) => {\n    const inlineLayout = [{ type: \"row\" as const, fields: item.fields }];\n\n    return (\n        <div className={\"flex items-center gap-sm\"}>\n            <div className={\"flex-1 gap-md\"}>\n                <NestedLayout layout={inlineLayout} />\n            </div>\n            {!disabled && (\n                <IconButton\n                    variant={\"ghost\"}\n                    size={\"lg\"}\n                    icon={<DeleteIcon />}\n                    onClick={() => item.remove()}\n                />\n            )}\n        </div>\n    );\n});\n"],"names":["KeyValueTagsRenderer","createObjectFieldRenderer","field","KeyValueTagsList","settings","hasItems","FormComponentLabel","FormComponentDescription","item","TagRow","Button","AddIcon","observer","disabled","inlineLayout","NestedLayout","IconButton","DeleteIcon"],"mappings":";;;;;;;AAkBO,MAAMA,uBAAuBC,0BAA0B,CAAC,EAAEC,KAAK,EAAE;IACpE,IAAI,CAACA,MAAM,MAAM,EACb,OAAO;IAGX,OAAO,WAAP,GAAO,oBAACC,kBAAgBA;QAAC,OAAOD;;AACpC;AAEA,MAAMC,mBAAmBF,0BAA0C,CAAC,EAAEC,KAAK,EAAE;IACzE,MAAME,WAAWF,MAAM,gBAAgB;IAEvC,MAAMG,WAAWH,MAAM,KAAK,CAAC,MAAM,GAAG;IAEtC,OAAO,WAAP,GACI,0CACKA,MAAM,KAAK,IAAI,WAAJ,GAAI,oBAACI,oBAAkBA;QAAC,MAAMJ,MAAM,KAAK;QACpDA,MAAM,WAAW,IAAI,WAAJ,GAAI,oBAACK,0BAAwBA;QAAC,MAAML,MAAM,WAAW;QACtEG,WAAW,WAAXA,GACG,oBAAC;QAAI,WAAW;OACXH,MAAM,KAAK,CAAC,GAAG,CAACM,CAAAA,OAAAA,WAAAA,GACb,oBAACC,QAAMA;YAAC,KAAKD,KAAK,GAAG;YAAE,MAAMA;YAAM,UAAUN,MAAM,QAAQ;eAGnE,MACH,AAACA,MAAM,QAAQ,GAUZ,OAVe,WAAH,GACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACQ,QAAMA;QACH,SAAS,IAAMR,MAAM,OAAO;QAC5B,MAAME,UAAU,gBAAgB;QAChC,SAAS;QACT,MAAM;QACN,oBAAM,oBAACO,gBAAOA;;AAMtC;AAEA,MAAMF,SAASG,SAAS,CAAC,EAAEJ,IAAI,EAAEK,QAAQ,EAAmD;IACxF,MAAMC,eAAe;QAAC;YAAE,MAAM;YAAgB,QAAQN,KAAK,MAAM;QAAC;KAAE;IAEpE,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACO,cAAYA;QAAC,QAAQD;SAEzB,CAACD,YAAY,WAAZA,GACE,oBAACG,YAAUA;QACP,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,2BAAUA;QACjB,SAAS,IAAMT,KAAK,MAAM;;AAK9C"}

package/base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { IObjectFieldVM } from "../../../../features/formModel/index.js";
+interface MultiValueDynamicZoneProps {
+    field: IObjectFieldVM;
+    showContainer?: boolean;
+}
+export declare const MultiValueDynamicZone: (({ field, showContainer }: MultiValueDynamicZoneProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};

package/base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone.js

@@ -0,0 +1,97 @@
+import react from "react";
+import { observer } from "mobx-react-lite";
+import { Accordion, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/delete_outline.svg";
+import { ReactComponent as library_add_svg_ReactComponent } from "@webiny/icons/library_add.svg";
+import { ReactComponent as expand_less_svg_ReactComponent } from "@webiny/icons/expand_less.svg";
+import { ReactComponent as expand_more_svg_ReactComponent } from "@webiny/icons/expand_more.svg";
+import { ReactComponent as horizontal_rule_svg_ReactComponent } from "@webiny/icons/horizontal_rule.svg";
+import { useConfirmationDialog } from "../../../../hooks/useConfirmationDialog.js";
+import { NestedLayout } from "./ObjectFieldComponents.js";
+import { AddTemplateButton } from "./TemplatePicker.js";
+const MultiValueDynamicZone = observer(({ field, showContainer = true })=>{
+    const itemCount = field.items.length;
+    const content = /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-lg"
+    }, itemCount > 0 ? /*#__PURE__*/ react.createElement(Accordion, {
+        background: "base",
+        variant: "container",
+        className: "gap-md flex flex-col"
+    }, field.items.map((item, index)=>/*#__PURE__*/ react.createElement(TemplatedListItem, {
+            key: item.key,
+            item: item,
+            index: index,
+            total: itemCount,
+            templates: field.availableTemplates,
+            disabled: field.disabled
+        }))) : null, !field.disabled && /*#__PURE__*/ react.createElement(AddTemplateButton, {
+        templates: field.availableTemplates,
+        onSelect: (template)=>field.addItem(template.id)
+    }));
+    if (!showContainer) return content;
+    const label = `${field.label || ""}${itemCount ? ` (${itemCount})` : ""}`;
+    return /*#__PURE__*/ react.createElement(Accordion, {
+        background: "base",
+        variant: "container"
+    }, /*#__PURE__*/ react.createElement(Accordion.Item, {
+        icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+            color: "accent",
+            label: "Dynamic Zone",
+            icon: /*#__PURE__*/ react.createElement(horizontal_rule_svg_ReactComponent, null)
+        }),
+        title: label,
+        defaultOpen: true
+    }, content));
+});
+const TemplatedListItem = observer(({ item, index, total, templates, disabled })=>{
+    const { showConfirmation } = useConfirmationDialog({
+        title: "Delete item",
+        message: "Are you sure you want to delete this item? This action is not reversible.",
+        acceptLabel: "Yes, I'm sure!",
+        cancelLabel: "No, leave it."
+    });
+    const template = templates.find((t)=>t.id === item.templateId);
+    const title = template?.label || `Item #${index + 1}`;
+    const onDelete = ()=>{
+        showConfirmation(()=>{
+            item.remove();
+        });
+    };
+    const actions = /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+        icon: /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement(expand_less_svg_ReactComponent, null),
+            content: "Move up"
+        }),
+        onClick: item.moveUp,
+        disabled: 0 === index
+    }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+        icon: /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement(expand_more_svg_ReactComponent, null),
+            content: "Move down"
+        }),
+        onClick: item.moveDown,
+        disabled: index === total - 1
+    }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+        icon: /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement(library_add_svg_ReactComponent, null),
+            content: "Duplicate"
+        }),
+        onClick: item.duplicate
+    }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+        icon: /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            content: "Delete"
+        }),
+        onClick: onDelete
+    }));
+    return /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: title,
+        actions: disabled ? null : actions,
+        defaultOpen: false
+    }, /*#__PURE__*/ react.createElement(NestedLayout, {
+        layout: item.layout
+    }));
+});
+export { MultiValueDynamicZone };
+
+//# sourceMappingURL=MultiValueDynamicZone.js.map

package/base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as CloneIcon } from \"@webiny/icons/library_add.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@webiny/icons/expand_less.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@webiny/icons/expand_more.svg\";\nimport { ReactComponent as HorizontalRuleIcon } from \"@webiny/icons/horizontal_rule.svg\";\nimport type { IObjectFieldItemVM, IObjectFieldVM } from \"~/features/formModel/index.js\";\nimport { useConfirmationDialog } from \"~/hooks/useConfirmationDialog.js\";\nimport { NestedLayout } from \"./ObjectFieldComponents.js\";\nimport { AddTemplateButton } from \"./TemplatePicker.js\";\n\ninterface MultiValueDynamicZoneProps {\n    field: IObjectFieldVM;\n    showContainer?: boolean;\n}\n\nexport const MultiValueDynamicZone = observer(\n    ({ field, showContainer = true }: MultiValueDynamicZoneProps) => {\n        const itemCount = field.items.length;\n\n        const content = (\n            <div className={\"flex flex-col gap-lg\"}>\n                {itemCount > 0 ? (\n                    <Accordion\n                        background={\"base\"}\n                        variant={\"container\"}\n                        className={\"gap-md flex flex-col\"}\n                    >\n                        {field.items.map((item, index) => (\n                            <TemplatedListItem\n                                key={item.key}\n                                item={item}\n                                index={index}\n                                total={itemCount}\n                                templates={field.availableTemplates}\n                                disabled={field.disabled}\n                            />\n                        ))}\n                    </Accordion>\n                ) : null}\n                {!field.disabled && (\n                    <AddTemplateButton\n                        templates={field.availableTemplates}\n                        onSelect={template => field.addItem(template.id)}\n                    />\n                )}\n            </div>\n        );\n\n        if (!showContainer) {\n            return content;\n        }\n\n        const label = `${field.label || \"\"}${itemCount ? ` (${itemCount})` : \"\"}`;\n\n        return (\n            <Accordion background={\"base\"} variant={\"container\"}>\n                <Accordion.Item\n                    icon={\n                        <Accordion.Item.Icon\n                            color={\"accent\"}\n                            label={\"Dynamic Zone\"}\n                            icon={<HorizontalRuleIcon />}\n                        />\n                    }\n                    title={label}\n                    defaultOpen={true}\n                >\n                    {content}\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n\ninterface TemplatedListItemProps {\n    item: IObjectFieldItemVM;\n    index: number;\n    total: number;\n    templates: { id: string; label: string }[];\n    disabled: boolean;\n}\n\nconst TemplatedListItem = observer(\n    ({ item, index, total, templates, disabled }: TemplatedListItemProps) => {\n        const { showConfirmation } = useConfirmationDialog({\n            title: \"Delete item\",\n            message: \"Are you sure you want to delete this item? This action is not reversible.\",\n            acceptLabel: \"Yes, I'm sure!\",\n            cancelLabel: \"No, leave it.\"\n        });\n\n        const template = templates.find(t => t.id === item.templateId);\n        const title = template?.label || `Item #${index + 1}`;\n\n        const onDelete = () => {\n            showConfirmation(() => {\n                item.remove();\n            });\n        };\n\n        const actions = (\n            <>\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<ArrowUpIcon />} content={\"Move up\"} />}\n                    onClick={item.moveUp}\n                    disabled={index === 0}\n                />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<ArrowDownIcon />} content={\"Move down\"} />}\n                    onClick={item.moveDown}\n                    disabled={index === total - 1}\n                />\n                <Accordion.Item.Action.Separator />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<CloneIcon />} content={\"Duplicate\"} />}\n                    onClick={item.duplicate}\n                />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<DeleteIcon />} content={\"Delete\"} />}\n                    onClick={onDelete}\n                />\n            </>\n        );\n\n        return (\n            <Accordion.Item title={title} actions={disabled ? null : actions} defaultOpen={false}>\n                <NestedLayout layout={item.layout} />\n            </Accordion.Item>\n        );\n    }\n);\n"],"names":["MultiValueDynamicZone","observer","field","showContainer","itemCount","content","Accordion","item","index","TemplatedListItem","AddTemplateButton","template","label","HorizontalRuleIcon","total","templates","disabled","showConfirmation","useConfirmationDialog","t","title","onDelete","actions","Tooltip","ArrowUpIcon","ArrowDownIcon","CloneIcon","DeleteIcon","NestedLayout"],"mappings":";;;;;;;;;;;AAkBO,MAAMA,wBAAwBC,SACjC,CAAC,EAAEC,KAAK,EAAEC,gBAAgB,IAAI,EAA8B;IACxD,MAAMC,YAAYF,MAAM,KAAK,CAAC,MAAM;IAEpC,MAAMG,UAAU,WAAVA,GACF,oBAAC;QAAI,WAAW;OACXD,YAAY,IAAI,WAAJ,GACT,oBAACE,WAASA;QACN,YAAY;QACZ,SAAS;QACT,WAAW;OAEVJ,MAAM,KAAK,CAAC,GAAG,CAAC,CAACK,MAAMC,QAAAA,WAAAA,GACpB,oBAACC,mBAAiBA;YACd,KAAKF,KAAK,GAAG;YACb,MAAMA;YACN,OAAOC;YACP,OAAOJ;YACP,WAAWF,MAAM,kBAAkB;YACnC,UAAUA,MAAM,QAAQ;eAIpC,MACH,CAACA,MAAM,QAAQ,IAAI,WAAJ,GACZ,oBAACQ,mBAAiBA;QACd,WAAWR,MAAM,kBAAkB;QACnC,UAAUS,CAAAA,WAAYT,MAAM,OAAO,CAACS,SAAS,EAAE;;IAM/D,IAAI,CAACR,eACD,OAAOE;IAGX,MAAMO,QAAQ,GAAGV,MAAM,KAAK,IAAI,KAAKE,YAAY,CAAC,EAAE,EAAEA,UAAU,CAAC,CAAC,GAAG,IAAI;IAEzE,OAAO,WAAP,GACI,oBAACE,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,oBACI,oBAACA,UAAU,IAAI,CAAC,IAAI;YAChB,OAAO;YACP,OAAO;YACP,oBAAM,oBAACO,oCAAkBA;;QAGjC,OAAOD;QACP,aAAa;OAEZP;AAIjB;AAWJ,MAAMI,oBAAoBR,SACtB,CAAC,EAAEM,IAAI,EAAEC,KAAK,EAAEM,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAA0B;IAChE,MAAM,EAAEC,gBAAgB,EAAE,GAAGC,sBAAsB;QAC/C,OAAO;QACP,SAAS;QACT,aAAa;QACb,aAAa;IACjB;IAEA,MAAMP,WAAWI,UAAU,IAAI,CAACI,CAAAA,IAAKA,EAAE,EAAE,KAAKZ,KAAK,UAAU;IAC7D,MAAMa,QAAQT,UAAU,SAAS,CAAC,MAAM,EAAEH,QAAQ,GAAG;IAErD,MAAMa,WAAW;QACbJ,iBAAiB;YACbV,KAAK,MAAM;QACf;IACJ;IAEA,MAAMe,UAAU,WAAVA,GACF,wDACI,oBAAChB,UAAU,IAAI,CAAC,MAAM;QAClB,oBAAM,oBAACiB,SAAOA;YAAC,uBAAS,oBAACC,gCAAWA;YAAK,SAAS;;QAClD,SAASjB,KAAK,MAAM;QACpB,UAAUC,AAAU,MAAVA;sBAEd,oBAACF,UAAU,IAAI,CAAC,MAAM;QAClB,oBAAM,oBAACiB,SAAOA;YAAC,uBAAS,oBAACE,gCAAaA;YAAK,SAAS;;QACpD,SAASlB,KAAK,QAAQ;QACtB,UAAUC,UAAUM,QAAQ;sBAEhC,oBAACR,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACA,UAAU,IAAI,CAAC,MAAM;QAClB,oBAAM,oBAACiB,SAAOA;YAAC,uBAAS,oBAACG,gCAASA;YAAK,SAAS;;QAChD,SAASnB,KAAK,SAAS;sBAE3B,oBAACD,UAAU,IAAI,CAAC,MAAM;QAClB,oBAAM,oBAACiB,SAAOA;YAAC,uBAAS,oBAACI,gBAAUA;YAAK,SAAS;;QACjD,SAASN;;IAKrB,OAAO,WAAP,GACI,oBAACf,UAAU,IAAI;QAAC,OAAOc;QAAO,SAASJ,WAAW,OAAOM;QAAS,aAAa;qBAC3E,oBAACM,cAAYA;QAAC,QAAQrB,KAAK,MAAM;;AAG7C"}

package/base/Base/FieldRenderers/ObjectRenderer/ObjectAccordionMultipleRenderer.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+declare module "../../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        objectAccordionMultiple: {
+            fieldType: "object";
+            settings?: {
+                open?: boolean;
+                container?: boolean;
+                itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);
+                addItemLabel?: string;
+            };
+        };
+    }
+}
+export declare const ObjectAccordionMultipleRenderer: React.ComponentType<{
+    field: import("../../../../index.js").IFieldVM;
+}>;