@webiny/app-admin 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

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;
+}>;

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

@@ -0,0 +1,48 @@
+import react from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { createObjectFieldRenderer } from "../../../../features/formModel/createFieldRenderer.js";
+import { AddItemButton, ListItemRenderer } from "./ObjectFieldComponents.js";
+const ObjectAccordionMultipleRenderer = createObjectFieldRenderer(({ field })=>{
+    if (!field.isList) return null;
+    const settings = field.rendererSettings;
+    const showContainer = settings?.container !== false;
+    const addButton = /*#__PURE__*/ react.createElement(AddItemButton, {
+        label: settings?.addItemLabel ?? `Add ${field.label || "Item"}`,
+        disabled: field.disabled,
+        onAdd: ()=>field.addItem()
+    });
+    if (!showContainer) return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-lg"
+    }, /*#__PURE__*/ react.createElement(ListItems, {
+        field: field
+    }), addButton);
+    const label = `${field.label || ""} ${field.items.length ? `(${field.items.length})` : ""}`;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-lg"
+    }, /*#__PURE__*/ react.createElement(Accordion, {
+        background: "base",
+        variant: "container"
+    }, /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: label,
+        defaultOpen: true
+    }, /*#__PURE__*/ react.createElement(ListItems, {
+        field: field
+    }))), addButton);
+});
+const ListItems = createObjectFieldRenderer(({ field })=>{
+    const settings = field.rendererSettings;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-md"
+    }, field.items.map((item, index)=>/*#__PURE__*/ react.createElement(ListItemRenderer, {
+            key: item.key,
+            item: item,
+            index: index,
+            total: field.items.length,
+            label: field.label,
+            itemTitle: settings?.itemTitle,
+            disabled: field.disabled
+        })));
+});
+export { ObjectAccordionMultipleRenderer };
+
+//# sourceMappingURL=ObjectAccordionMultipleRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/ObjectAccordionMultipleRenderer.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/ObjectAccordionMultipleRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { ListItemRenderer, AddItemButton } from \"./ObjectFieldComponents.js\";\n\ndeclare module \"../../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        objectAccordionMultiple: {\n            fieldType: \"object\";\n            settings?: {\n                open?: boolean;\n                container?: boolean;\n                itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);\n                addItemLabel?: string;\n            };\n        };\n    }\n}\n\nexport const ObjectAccordionMultipleRenderer = createObjectFieldRenderer<\"objectAccordionMultiple\">(\n    ({ field }) => {\n        if (!field.isList) {\n            return null;\n        }\n\n        const settings = field.rendererSettings;\n        const showContainer = settings?.container !== false;\n\n        const addButton = (\n            <AddItemButton\n                label={settings?.addItemLabel ?? `Add ${field.label || \"Item\"}`}\n                disabled={field.disabled}\n                onAdd={() => field.addItem()}\n            />\n        );\n\n        if (!showContainer) {\n            return (\n                <div className={\"flex flex-col gap-lg\"}>\n                    <ListItems field={field} />\n                    {addButton}\n                </div>\n            );\n        }\n\n        const label = `${field.label || \"\"} ${field.items.length ? `(${field.items.length})` : \"\"}`;\n\n        return (\n            <div className={\"flex flex-col gap-lg\"}>\n                <Accordion background={\"base\"} variant={\"container\"}>\n                    <Accordion.Item title={label} defaultOpen={true}>\n                        <ListItems field={field} />\n                    </Accordion.Item>\n                </Accordion>\n                {addButton}\n            </div>\n        );\n    }\n);\n\nconst ListItems = createObjectFieldRenderer<\"objectAccordionMultiple\">(({ field }) => {\n    const settings = field.rendererSettings;\n\n    return (\n        <div className={\"flex flex-col gap-md\"}>\n            {field.items.map((item, index) => (\n                <ListItemRenderer\n                    key={item.key}\n                    item={item}\n                    index={index}\n                    total={field.items.length}\n                    label={field.label}\n                    itemTitle={settings?.itemTitle}\n                    disabled={field.disabled}\n                />\n            ))}\n        </div>\n    );\n});\n"],"names":["ObjectAccordionMultipleRenderer","createObjectFieldRenderer","field","settings","showContainer","addButton","AddItemButton","ListItems","label","Accordion","item","index","ListItemRenderer"],"mappings":";;;;AAmBO,MAAMA,kCAAkCC,0BAC3C,CAAC,EAAEC,KAAK,EAAE;IACN,IAAI,CAACA,MAAM,MAAM,EACb,OAAO;IAGX,MAAMC,WAAWD,MAAM,gBAAgB;IACvC,MAAME,gBAAgBD,UAAU,cAAc;IAE9C,MAAME,YAAY,WAAZA,GACF,oBAACC,eAAaA;QACV,OAAOH,UAAU,gBAAgB,CAAC,IAAI,EAAED,MAAM,KAAK,IAAI,QAAQ;QAC/D,UAAUA,MAAM,QAAQ;QACxB,OAAO,IAAMA,MAAM,OAAO;;IAIlC,IAAI,CAACE,eACD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACG,WAASA;QAAC,OAAOL;QACjBG;IAKb,MAAMG,QAAQ,GAAGN,MAAM,KAAK,IAAI,GAAG,CAAC,EAAEA,MAAM,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAEA,MAAM,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI;IAE3F,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACO,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QAAC,OAAOD;QAAO,aAAa;qBACvC,oBAACD,WAASA;QAAC,OAAOL;UAGzBG;AAGb;AAGJ,MAAME,YAAYN,0BAAqD,CAAC,EAAEC,KAAK,EAAE;IAC7E,MAAMC,WAAWD,MAAM,gBAAgB;IAEvC,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXA,MAAM,KAAK,CAAC,GAAG,CAAC,CAACQ,MAAMC,QAAAA,WAAAA,GACpB,oBAACC,kBAAgBA;YACb,KAAKF,KAAK,GAAG;YACb,MAAMA;YACN,OAAOC;YACP,OAAOT,MAAM,KAAK,CAAC,MAAM;YACzB,OAAOA,MAAM,KAAK;YAClB,WAAWC,UAAU;YACrB,UAAUD,MAAM,QAAQ;;AAK5C"}

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

@@ -0,0 +1,28 @@
+import React from "react";
+import type { IObjectFieldItemVM, LayoutNodeVM } from "../../../../features/formModel/index.js";
+/**
+ * Walks a resolved layout sub-tree. Used by dynamic-zone renderers to render
+ * a templated object's children via per-template layouts (Phase 8c).
+ */
+export declare const NestedLayout: (({ layout }: {
+    layout: LayoutNodeVM[];
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+export interface ListItemRendererProps {
+    item: IObjectFieldItemVM;
+    index: number;
+    total: number;
+    label?: string;
+    itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);
+    disabled: boolean;
+}
+export declare const ListItemRenderer: (({ item, index, total, label, itemTitle, disabled }: ListItemRendererProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export interface AddItemButtonProps {
+    label?: string;
+    disabled: boolean;
+    onAdd: () => void;
+}
+export declare const AddItemButton: ({ label, disabled, onAdd }: AddItemButtonProps) => React.JSX.Element;

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

@@ -0,0 +1,69 @@
+import react, { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Accordion, Button, IconButton } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/delete_outline.svg";
+import { ReactComponent as arrow_upward_svg_ReactComponent } from "@webiny/icons/arrow_upward.svg";
+import { ReactComponent as arrow_downward_svg_ReactComponent } from "@webiny/icons/arrow_downward.svg";
+import { LayoutNodeRenderer } from "../../../../features/formModel/FormView.js";
+import { resolveItemTitle } from "./resolveItemTitle.js";
+const NestedLayout = observer(({ layout })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-md"
+    }, layout.map((node, index)=>/*#__PURE__*/ react.createElement(LayoutNodeRenderer, {
+            key: index,
+            node: node
+        }))));
+const ListItemRenderer = observer(({ item, index, total, label, itemTitle, disabled })=>{
+    const [open, setOpen] = useState(false);
+    const hasFocusRequest = item.fields.some((f)=>f.focusRequested);
+    useEffect(()=>{
+        if (hasFocusRequest) setOpen(true);
+    }, [
+        hasFocusRequest
+    ]);
+    const actions = /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(arrow_downward_svg_ReactComponent, null),
+        onClick: (e)=>{
+            e.stopPropagation();
+            item.moveDown();
+        },
+        variant: "ghost",
+        disabled: index === total - 1
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(arrow_upward_svg_ReactComponent, null),
+        onClick: (e)=>{
+            e.stopPropagation();
+            item.moveUp();
+        },
+        variant: "ghost",
+        disabled: 0 === index
+    }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: (e)=>{
+            e.stopPropagation();
+            item.remove();
+        },
+        variant: "ghost"
+    }));
+    return /*#__PURE__*/ react.createElement(Accordion, {
+        background: "base",
+        variant: "container",
+        openClosedIndicatorPosition: "left"
+    }, /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: resolveItemTitle(item, index, label, itemTitle),
+        actions: disabled ? null : actions,
+        open: open,
+        onOpenChange: setOpen
+    }, /*#__PURE__*/ react.createElement(NestedLayout, {
+        layout: item.layout
+    })));
+});
+const AddItemButton = ({ label, disabled, onAdd })=>/*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Button, {
+        text: label || "Add Item",
+        variant: "secondary",
+        size: "sm",
+        onClick: onAdd,
+        disabled: disabled
+    }));
+export { AddItemButton, ListItemRenderer, NestedLayout };
+
+//# sourceMappingURL=ObjectFieldComponents.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/ObjectFieldComponents.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/ObjectFieldComponents.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Button, IconButton } from \"@webiny/admin-ui\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as ArrowUp } from \"@webiny/icons/arrow_upward.svg\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/arrow_downward.svg\";\nimport type { IObjectFieldItemVM, LayoutNodeVM } from \"~/features/formModel/index.js\";\nimport { LayoutNodeRenderer } from \"~/features/formModel/FormView.js\";\nimport { resolveItemTitle } from \"./resolveItemTitle.js\";\n/**\n * Walks a resolved layout sub-tree. Used by dynamic-zone renderers to render\n * a templated object's children via per-template layouts (Phase 8c).\n */\nexport const NestedLayout = observer(({ layout }: { layout: LayoutNodeVM[] }) => {\n    return (\n        <div className={\"flex flex-col gap-md\"}>\n            {layout.map((node, index) => (\n                <LayoutNodeRenderer key={index} node={node} />\n            ))}\n        </div>\n    );\n});\n\nexport interface ListItemRendererProps {\n    item: IObjectFieldItemVM;\n    index: number;\n    total: number;\n    label?: string;\n    itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);\n    disabled: boolean;\n}\n\nexport const ListItemRenderer = observer(\n    ({ item, index, total, label, itemTitle, disabled }: ListItemRendererProps) => {\n        const [open, setOpen] = useState(false);\n        const hasFocusRequest = item.fields.some(f => f.focusRequested);\n\n        useEffect(() => {\n            if (hasFocusRequest) {\n                setOpen(true);\n            }\n        }, [hasFocusRequest]);\n\n        const actions = (\n            <>\n                <IconButton\n                    icon={<ArrowDown />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        item.moveDown();\n                    }}\n                    variant=\"ghost\"\n                    disabled={index === total - 1}\n                />\n                <IconButton\n                    icon={<ArrowUp />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        item.moveUp();\n                    }}\n                    variant=\"ghost\"\n                    disabled={index === 0}\n                />\n                <Accordion.Item.Action.Separator />\n                <IconButton\n                    icon={<DeleteIcon />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        item.remove();\n                    }}\n                    variant=\"ghost\"\n                />\n            </>\n        );\n\n        return (\n            <Accordion\n                background={\"base\"}\n                variant={\"container\"}\n                openClosedIndicatorPosition={\"left\"}\n            >\n                <Accordion.Item\n                    title={resolveItemTitle(item, index, label, itemTitle)}\n                    actions={disabled ? null : actions}\n                    open={open}\n                    onOpenChange={setOpen}\n                >\n                    <NestedLayout layout={item.layout} />\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n\nexport interface AddItemButtonProps {\n    label?: string;\n    disabled: boolean;\n    onAdd: () => void;\n}\n\nexport const AddItemButton = ({ label, disabled, onAdd }: AddItemButtonProps) => {\n    return (\n        <div>\n            <Button\n                text={label || \"Add Item\"}\n                variant={\"secondary\"}\n                size={\"sm\"}\n                onClick={onAdd}\n                disabled={disabled}\n            />\n        </div>\n    );\n};\n"],"names":["NestedLayout","observer","layout","node","index","LayoutNodeRenderer","ListItemRenderer","item","total","label","itemTitle","disabled","open","setOpen","useState","hasFocusRequest","f","useEffect","actions","IconButton","ArrowDown","e","ArrowUp","Accordion","DeleteIcon","resolveItemTitle","AddItemButton","onAdd","Button"],"mappings":";;;;;;;;AAaO,MAAMA,eAAeC,SAAS,CAAC,EAAEC,MAAM,EAA8B,GACjE,WAAP,GACI,oBAAC;QAAI,WAAW;OACXA,OAAO,GAAG,CAAC,CAACC,MAAMC,QAAAA,WAAAA,GACf,oBAACC,oBAAkBA;YAAC,KAAKD;YAAO,MAAMD;;AAe/C,MAAMG,mBAAmBL,SAC5B,CAAC,EAAEM,IAAI,EAAEH,KAAK,EAAEI,KAAK,EAAEC,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAyB;IACtE,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IACjC,MAAMC,kBAAkBR,KAAK,MAAM,CAAC,IAAI,CAACS,CAAAA,IAAKA,EAAE,cAAc;IAE9DC,UAAU;QACN,IAAIF,iBACAF,QAAQ;IAEhB,GAAG;QAACE;KAAgB;IAEpB,MAAMG,UAAU,WAAVA,GACF,wDACI,oBAACC,YAAUA;QACP,oBAAM,oBAACC,mCAASA;QAChB,SAASC,CAAAA;YACLA,EAAE,eAAe;YACjBd,KAAK,QAAQ;QACjB;QACA,SAAQ;QACR,UAAUH,UAAUI,QAAQ;sBAEhC,oBAACW,YAAUA;QACP,oBAAM,oBAACG,iCAAOA;QACd,SAASD,CAAAA;YACLA,EAAE,eAAe;YACjBd,KAAK,MAAM;QACf;QACA,SAAQ;QACR,UAAUH,AAAU,MAAVA;sBAEd,oBAACmB,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACJ,YAAUA;QACP,oBAAM,oBAACK,gBAAUA;QACjB,SAASH,CAAAA;YACLA,EAAE,eAAe;YACjBd,KAAK,MAAM;QACf;QACA,SAAQ;;IAKpB,OAAO,WAAP,GACI,oBAACgB,WAASA;QACN,YAAY;QACZ,SAAS;QACT,6BAA6B;qBAE7B,oBAACA,UAAU,IAAI;QACX,OAAOE,iBAAiBlB,MAAMH,OAAOK,OAAOC;QAC5C,SAASC,WAAW,OAAOO;QAC3B,MAAMN;QACN,cAAcC;qBAEd,oBAACb,cAAYA;QAAC,QAAQO,KAAK,MAAM;;AAIjD;AASG,MAAMmB,gBAAgB,CAAC,EAAEjB,KAAK,EAAEE,QAAQ,EAAEgB,KAAK,EAAsB,GACjE,WAAP,GACI,oBAAC,2BACG,oBAACC,QAAMA;QACH,MAAMnB,SAAS;QACf,SAAS;QACT,MAAM;QACN,SAASkB;QACT,UAAUhB"}

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

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

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

@@ -0,0 +1,17 @@
+import react from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { createObjectFieldRenderer } from "../../../../features/formModel/createFieldRenderer.js";
+import { NestedLayout } from "./ObjectFieldComponents.js";
+const ObjectRenderer = createObjectFieldRenderer(({ field })=>/*#__PURE__*/ react.createElement(Accordion, {
+        background: "base",
+        variant: "container"
+    }, /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: field.label,
+        defaultOpen: field.rendererSettings?.open ?? true,
+        className: "pl-sm"
+    }, /*#__PURE__*/ react.createElement(NestedLayout, {
+        layout: field.layout
+    }))));
+export { ObjectRenderer };
+
+//# sourceMappingURL=ObjectRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/ObjectRenderer.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/ObjectRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { NestedLayout } from \"./ObjectFieldComponents.js\";\n\ndeclare module \"../../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        objectAccordionSingle: {\n            fieldType: \"object\";\n            settings?: {\n                open?: boolean;\n            };\n        };\n    }\n}\n\nexport const ObjectRenderer = createObjectFieldRenderer<\"objectAccordionSingle\">(({ field }) => {\n    return (\n        <Accordion background={\"base\"} variant={\"container\"}>\n            <Accordion.Item\n                title={field.label}\n                defaultOpen={field.rendererSettings?.open ?? true}\n                className={\"pl-sm\"}\n            >\n                <NestedLayout layout={field.layout} />\n            </Accordion.Item>\n        </Accordion>\n    );\n});\n"],"names":["ObjectRenderer","createObjectFieldRenderer","field","Accordion","NestedLayout"],"mappings":";;;;AAgBO,MAAMA,iBAAiBC,0BAAmD,CAAC,EAAEC,KAAK,EAAE,GAChF,WAAP,GACI,oBAACC,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,OAAOD,MAAM,KAAK;QAClB,aAAaA,MAAM,gBAAgB,EAAE,QAAQ;QAC7C,WAAW;qBAEX,oBAACE,cAAYA;QAAC,QAAQF,MAAM,MAAM"}

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

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

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

@@ -0,0 +1,58 @@
+import react from "react";
+import { observer } from "mobx-react-lite";
+import { Accordion, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/delete.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 SingleValueDynamicZone = observer(({ field, showContainer = true })=>{
+    const activeTemplate = null !== field.activeTemplateId ? field.availableTemplates.find((t)=>t.id === field.activeTemplateId) : void 0;
+    const { showConfirmation } = useConfirmationDialog({
+        title: "Remove template",
+        message: "Are you sure you want to remove this item? This action is not reversible.",
+        acceptLabel: "Yes, I'm sure!",
+        cancelLabel: "No, leave it."
+    });
+    const onClear = ()=>{
+        showConfirmation(()=>{
+            field.onChange(null);
+        });
+    };
+    const content = /*#__PURE__*/ react.createElement(react.Fragment, null, activeTemplate ? /*#__PURE__*/ react.createElement(Accordion, {
+        background: "base",
+        variant: "container"
+    }, /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: activeTemplate.label,
+        actions: field.disabled ? null : /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(Tooltip, {
+                trigger: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                content: "Delete"
+            }),
+            onClick: onClear
+        })
+    }, /*#__PURE__*/ react.createElement(NestedLayout, {
+        layout: field.layout
+    }))) : null, !activeTemplate && !field.disabled && /*#__PURE__*/ react.createElement(AddTemplateButton, {
+        templates: field.availableTemplates,
+        onSelect: (template)=>field.setTemplate(template.id)
+    }));
+    if (!showContainer) return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-lg"
+    }, content);
+    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: field.label,
+        defaultOpen: true
+    }, content));
+});
+export { SingleValueDynamicZone };
+
+//# sourceMappingURL=SingleValueDynamicZone.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.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.svg\";\nimport { ReactComponent as HorizontalRuleIcon } from \"@webiny/icons/horizontal_rule.svg\";\nimport type { IObjectFieldVM } from \"~/features/formModel/index.js\";\nimport { useConfirmationDialog } from \"~/hooks/useConfirmationDialog.js\";\nimport { NestedLayout } from \"./ObjectFieldComponents.js\";\nimport { AddTemplateButton } from \"./TemplatePicker.js\";\n\ninterface SingleValueDynamicZoneProps {\n    field: IObjectFieldVM;\n    showContainer?: boolean;\n}\n\nexport const SingleValueDynamicZone = observer(\n    ({ field, showContainer = true }: SingleValueDynamicZoneProps) => {\n        const activeTemplate =\n            field.activeTemplateId !== null\n                ? field.availableTemplates.find(t => t.id === field.activeTemplateId)\n                : undefined;\n\n        const { showConfirmation } = useConfirmationDialog({\n            title: \"Remove template\",\n            message: \"Are you sure you want to remove this item? This action is not reversible.\",\n            acceptLabel: \"Yes, I'm sure!\",\n            cancelLabel: \"No, leave it.\"\n        });\n\n        const onClear = () => {\n            showConfirmation(() => {\n                field.onChange(null);\n            });\n        };\n\n        const content = (\n            <>\n                {activeTemplate ? (\n                    <Accordion background={\"base\"} variant={\"container\"}>\n                        <Accordion.Item\n                            title={activeTemplate.label}\n                            actions={\n                                field.disabled ? null : (\n                                    <Accordion.Item.Action\n                                        icon={\n                                            <Tooltip trigger={<DeleteIcon />} content={\"Delete\"} />\n                                        }\n                                        onClick={onClear}\n                                    />\n                                )\n                            }\n                        >\n                            <NestedLayout layout={field.layout} />\n                        </Accordion.Item>\n                    </Accordion>\n                ) : null}\n                {!activeTemplate && !field.disabled && (\n                    <AddTemplateButton\n                        templates={field.availableTemplates}\n                        onSelect={template => field.setTemplate(template.id)}\n                    />\n                )}\n            </>\n        );\n\n        if (!showContainer) {\n            return <div className={\"flex flex-col gap-lg\"}>{content}</div>;\n        }\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={field.label}\n                    defaultOpen={true}\n                >\n                    {content}\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n"],"names":["SingleValueDynamicZone","observer","field","showContainer","activeTemplate","t","undefined","showConfirmation","useConfirmationDialog","onClear","content","Accordion","Tooltip","DeleteIcon","NestedLayout","AddTemplateButton","template","HorizontalRuleIcon"],"mappings":";;;;;;;;AAeO,MAAMA,yBAAyBC,SAClC,CAAC,EAAEC,KAAK,EAAEC,gBAAgB,IAAI,EAA+B;IACzD,MAAMC,iBACFF,AAA2B,SAA3BA,MAAM,gBAAgB,GAChBA,MAAM,kBAAkB,CAAC,IAAI,CAACG,CAAAA,IAAKA,EAAE,EAAE,KAAKH,MAAM,gBAAgB,IAClEI;IAEV,MAAM,EAAEC,gBAAgB,EAAE,GAAGC,sBAAsB;QAC/C,OAAO;QACP,SAAS;QACT,aAAa;QACb,aAAa;IACjB;IAEA,MAAMC,UAAU;QACZF,iBAAiB;YACbL,MAAM,QAAQ,CAAC;QACnB;IACJ;IAEA,MAAMQ,UAAU,WAAVA,GACF,0CACKN,iBAAiB,WAAjBA,GACG,oBAACO,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,OAAOP,eAAe,KAAK;QAC3B,SACIF,MAAM,QAAQ,GAAG,OAAO,WAAP,GACb,oBAACS,UAAU,IAAI,CAAC,MAAM;YAClB,oBACI,oBAACC,SAAOA;gBAAC,uBAAS,oBAACC,gBAAUA;gBAAK,SAAS;;YAE/C,SAASJ;;qBAKrB,oBAACK,cAAYA;QAAC,QAAQZ,MAAM,MAAM;WAG1C,MACH,CAACE,kBAAkB,CAACF,MAAM,QAAQ,IAAI,WAAJ,GAC/B,oBAACa,mBAAiBA;QACd,WAAWb,MAAM,kBAAkB;QACnC,UAAUc,CAAAA,WAAYd,MAAM,WAAW,CAACc,SAAS,EAAE;;IAMnE,IAAI,CAACb,eACD,OAAO,WAAP,GAAO,oBAAC;QAAI,WAAW;OAAyBO;IAGpD,OAAO,WAAP,GACI,oBAACC,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,oBACI,oBAACA,UAAU,IAAI,CAAC,IAAI;YAChB,OAAO;YACP,OAAO;YACP,oBAAM,oBAACM,oCAAkBA;;QAGjC,OAAOf,MAAM,KAAK;QAClB,aAAa;OAEZQ;AAIjB"}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ITemplateVM } from "../../../../features/formModel/index.js";
+export interface AddTemplateButtonProps {
+    templates: ITemplateVM[];
+    onSelect: (template: ITemplateVM) => void;
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    variant?: "primary" | "secondary" | "tertiary";
+}
+export declare const AddTemplateButton: ({ templates, onSelect, label, size, variant }: AddTemplateButtonProps) => React.JSX.Element;

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

@@ -0,0 +1,68 @@
+import react, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Button, Dialog, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as add_circle_outline_svg_ReactComponent } from "@webiny/icons/add_circle_outline.svg";
+const normalizeIcon = (icon)=>{
+    if (!icon) return;
+    return icon.name.split("/");
+};
+const AddTemplateButton = ({ templates, onSelect, label = "Add a template", size = "sm", variant = "tertiary" })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-between items-center"
+    }, /*#__PURE__*/ react.createElement(Dialog, {
+        size: "lg",
+        className: "w-[800px]",
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            size: size,
+            variant: variant,
+            text: label,
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        }),
+        title: "Insert a template",
+        info: /*#__PURE__*/ react.createElement(react.Fragment, null)
+    }, /*#__PURE__*/ react.createElement(TemplateGallery, {
+        templates: templates,
+        onSelect: onSelect
+    })));
+const TemplateGallery = ({ templates, onSelect })=>/*#__PURE__*/ react.createElement("div", {
+        className: "gap-md flex flex-wrap p-xs"
+    }, templates.map((template)=>/*#__PURE__*/ react.createElement(TemplateCard, {
+            key: template.id,
+            template: template,
+            onSelect: onSelect
+        })));
+const TemplateCard = ({ template, onSelect })=>{
+    const [isHovered, setIsHovered] = useState(false);
+    const icon = normalizeIcon(template.icon);
+    return /*#__PURE__*/ react.createElement("div", {
+        onMouseEnter: ()=>setIsHovered(true),
+        onMouseLeave: ()=>setIsHovered(false),
+        className: "flex flex-col justify-between bg-neutral-base overflow-hidden rounded-lg w-[173px] relative shadow-sm"
+    }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-center py-xxl w-full bg-neutral-dimmed"
+    }, icon ? /*#__PURE__*/ react.createElement(FontAwesomeIcon, {
+        className: "text-neutral-xstrong",
+        icon: icon,
+        style: {
+            width: 40,
+            height: 40
+        }
+    }) : null), /*#__PURE__*/ react.createElement("div", {
+        className: "py-sm-extra px-md"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "md",
+        className: "mb-xs text-neutral-primary font-semibold"
+    }, template.label))), isHovered && /*#__PURE__*/ react.createElement(Dialog.Close, {
+        asChild: true
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "absolute inset-0 flex items-center justify-center bg-white/80 cursor-pointer",
+        onClick: ()=>onSelect(template)
+    }, /*#__PURE__*/ react.createElement(Button, {
+        size: "lg",
+        variant: "primary",
+        icon: /*#__PURE__*/ react.createElement(add_circle_outline_svg_ReactComponent, null)
+    }, "Insert"))));
+};
+export { AddTemplateButton };
+
+//# sourceMappingURL=TemplatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Button, Dialog, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as PlusIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport type { ITemplateIcon, ITemplateVM } from \"~/features/formModel/index.js\";\n\nconst normalizeIcon = (icon: ITemplateIcon | undefined): IconProp | undefined => {\n    if (!icon) {\n        return undefined;\n    }\n    return icon.name.split(\"/\") as IconProp;\n};\n\nexport interface AddTemplateButtonProps {\n    templates: ITemplateVM[];\n    onSelect: (template: ITemplateVM) => void;\n    label?: string;\n    size?: \"sm\" | \"md\" | \"lg\";\n    variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport const AddTemplateButton = ({\n    templates,\n    onSelect,\n    label = \"Add a template\",\n    size = \"sm\",\n    variant = \"tertiary\"\n}: AddTemplateButtonProps) => {\n    return (\n        <div className={\"flex justify-between items-center\"}>\n            <Dialog\n                size={\"lg\"}\n                className={\"w-[800px]\"}\n                trigger={<Button size={size} variant={variant} text={label} icon={<AddIcon />} />}\n                title={\"Insert a template\"}\n                info={<></>}\n            >\n                <TemplateGallery templates={templates} onSelect={onSelect} />\n            </Dialog>\n        </div>\n    );\n};\n\ninterface TemplateGalleryProps {\n    templates: ITemplateVM[];\n    onSelect: (template: ITemplateVM) => void;\n}\n\nconst TemplateGallery = ({ templates, onSelect }: TemplateGalleryProps) => {\n    return (\n        <div className={\"gap-md flex flex-wrap p-xs\"}>\n            {templates.map(template => (\n                <TemplateCard key={template.id} template={template} onSelect={onSelect} />\n            ))}\n        </div>\n    );\n};\n\ninterface TemplateCardProps {\n    template: ITemplateVM;\n    onSelect: (template: ITemplateVM) => void;\n}\n\nconst TemplateCard = ({ template, onSelect }: TemplateCardProps) => {\n    const [isHovered, setIsHovered] = useState(false);\n    const icon = normalizeIcon(template.icon);\n\n    return (\n        <div\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n            className={\n                \"flex flex-col justify-between bg-neutral-base overflow-hidden rounded-lg w-[173px] relative shadow-sm\"\n            }\n        >\n            <div>\n                <div className={\"flex items-center justify-center py-xxl w-full bg-neutral-dimmed\"}>\n                    {icon ? (\n                        <FontAwesomeIcon\n                            className={\"text-neutral-xstrong\"}\n                            icon={icon}\n                            style={{ width: 40, height: 40 }}\n                        />\n                    ) : null}\n                </div>\n                <div className={\"py-sm-extra px-md\"}>\n                    <Text size={\"md\"} className={\"mb-xs text-neutral-primary font-semibold\"}>\n                        {template.label}\n                    </Text>\n                </div>\n            </div>\n\n            {isHovered && (\n                <Dialog.Close asChild>\n                    <div\n                        className={\n                            \"absolute inset-0 flex items-center justify-center bg-white/80 cursor-pointer\"\n                        }\n                        onClick={() => onSelect(template)}\n                    >\n                        <Button size={\"lg\"} variant={\"primary\"} icon={<PlusIcon />}>\n                            Insert\n                        </Button>\n                    </div>\n                </Dialog.Close>\n            )}\n        </div>\n    );\n};\n"],"names":["normalizeIcon","icon","AddTemplateButton","templates","onSelect","label","size","variant","Dialog","Button","AddIcon","TemplateGallery","template","TemplateCard","isHovered","setIsHovered","useState","FontAwesomeIcon","Text","PlusIcon"],"mappings":";;;;;AAQA,MAAMA,gBAAgB,CAACC;IACnB,IAAI,CAACA,MACD;IAEJ,OAAOA,KAAK,IAAI,CAAC,KAAK,CAAC;AAC3B;AAUO,MAAMC,oBAAoB,CAAC,EAC9BC,SAAS,EACTC,QAAQ,EACRC,QAAQ,gBAAgB,EACxBC,OAAO,IAAI,EACXC,UAAU,UAAU,EACC,GACd,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAM;QACN,WAAW;QACX,uBAAS,oBAACC,QAAMA;YAAC,MAAMH;YAAM,SAASC;YAAS,MAAMF;YAAO,oBAAM,oBAACK,gBAAOA;;QAC1E,OAAO;QACP,oBAAM;qBAEN,oBAACC,iBAAeA;QAAC,WAAWR;QAAW,UAAUC;;AAWjE,MAAMO,kBAAkB,CAAC,EAAER,SAAS,EAAEC,QAAQ,EAAwB,GAC3D,WAAP,GACI,oBAAC;QAAI,WAAW;OACXD,UAAU,GAAG,CAACS,CAAAA,WAAAA,WAAAA,GACX,oBAACC,cAAYA;YAAC,KAAKD,SAAS,EAAE;YAAE,UAAUA;YAAU,UAAUR;;AAW9E,MAAMS,eAAe,CAAC,EAAED,QAAQ,EAAER,QAAQ,EAAqB;IAC3D,MAAM,CAACU,WAAWC,aAAa,GAAGC,SAAS;IAC3C,MAAMf,OAAOD,cAAcY,SAAS,IAAI;IAExC,OAAO,WAAP,GACI,oBAAC;QACG,cAAc,IAAMG,aAAa;QACjC,cAAc,IAAMA,aAAa;QACjC,WACI;qBAGJ,oBAAC,2BACG,oBAAC;QAAI,WAAW;OACXd,OAAO,WAAPA,GACG,oBAACgB,iBAAeA;QACZ,WAAW;QACX,MAAMhB;QACN,OAAO;YAAE,OAAO;YAAI,QAAQ;QAAG;SAEnC,qBAER,oBAAC;QAAI,WAAW;qBACZ,oBAACiB,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBN,SAAS,KAAK,KAK1BE,aAAa,WAAbA,GACG,oBAACN,OAAO,KAAK;QAAC;qBACV,oBAAC;QACG,WACI;QAEJ,SAAS,IAAMJ,SAASQ;qBAExB,oBAACH,QAAMA;QAAC,MAAM;QAAM,SAAS;QAAW,oBAAM,oBAACU,uCAAQA;OAAK;AAQpF"}

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

@@ -0,0 +1,4 @@
+import type { IObjectFieldItemVM } from "../../../../features/formModel/index.js";
+type ItemTitleSetting = string | ((data: Record<string, unknown>, index: number) => string);
+export declare function resolveItemTitle(item: IObjectFieldItemVM, index: number, label: string | undefined, itemTitle: ItemTitleSetting | undefined): string;
+export {};

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

@@ -0,0 +1,19 @@
+function fieldsToData(fields) {
+    const data = {};
+    for (const field of fields)data[field.name] = field.value;
+    return data;
+}
+function resolveItemTitle(item, index, label, itemTitle) {
+    const fallback = `${label || "Item"} #${index + 1}`;
+    if (!itemTitle) return fallback;
+    if ("string" == typeof itemTitle) {
+        const field = item.fields.find((f)=>f.name === itemTitle);
+        const value = field ? String(field.value ?? "") : "";
+        return value || fallback;
+    }
+    const data = fieldsToData(item.fields);
+    return itemTitle(data, index) || fallback;
+}
+export { resolveItemTitle };
+
+//# sourceMappingURL=resolveItemTitle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.ts"],"sourcesContent":["import type { IFieldVM, IObjectFieldItemVM } from \"~/features/formModel/index.js\";\n\ntype ItemTitleSetting = string | ((data: Record<string, unknown>, index: number) => string);\n\nfunction fieldsToData(fields: IFieldVM[]): Record<string, unknown> {\n    const data: Record<string, unknown> = {};\n    for (const field of fields) {\n        data[field.name] = field.value;\n    }\n    return data;\n}\n\nexport function resolveItemTitle(\n    item: IObjectFieldItemVM,\n    index: number,\n    label: string | undefined,\n    itemTitle: ItemTitleSetting | undefined\n): string {\n    const fallback = `${label || \"Item\"} #${index + 1}`;\n\n    if (!itemTitle) {\n        return fallback;\n    }\n\n    if (typeof itemTitle === \"string\") {\n        const field = item.fields.find(f => f.name === itemTitle);\n        const value = field ? String(field.value ?? \"\") : \"\";\n        return value || fallback;\n    }\n\n    const data = fieldsToData(item.fields);\n    return itemTitle(data, index) || fallback;\n}\n"],"names":["fieldsToData","fields","data","field","resolveItemTitle","item","index","label","itemTitle","fallback","f","value","String"],"mappings":"AAIA,SAASA,aAAaC,MAAkB;IACpC,MAAMC,OAAgC,CAAC;IACvC,KAAK,MAAMC,SAASF,OAChBC,IAAI,CAACC,MAAM,IAAI,CAAC,GAAGA,MAAM,KAAK;IAElC,OAAOD;AACX;AAEO,SAASE,iBACZC,IAAwB,EACxBC,KAAa,EACbC,KAAyB,EACzBC,SAAuC;IAEvC,MAAMC,WAAW,GAAGF,SAAS,OAAO,EAAE,EAAED,QAAQ,GAAG;IAEnD,IAAI,CAACE,WACD,OAAOC;IAGX,IAAI,AAAqB,YAArB,OAAOD,WAAwB;QAC/B,MAAML,QAAQE,KAAK,MAAM,CAAC,IAAI,CAACK,CAAAA,IAAKA,EAAE,IAAI,KAAKF;QAC/C,MAAMG,QAAQR,QAAQS,OAAOT,MAAM,KAAK,IAAI,MAAM;QAClD,OAAOQ,SAASF;IACpB;IAEA,MAAMP,OAAOF,aAAaK,KAAK,MAAM;IACrC,OAAOG,UAAUN,MAAMI,UAAUG;AACrC"}

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

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

package/base/Base/FieldRenderers/PassthroughRenderer.js

@@ -0,0 +1,12 @@
+import react from "react";
+import { createObjectFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { LayoutNodeRenderer } from "../../../features/formModel/FormView.js";
+const PassthroughRenderer = createObjectFieldRenderer(({ field })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-4"
+    }, field.layout.map((node, index)=>/*#__PURE__*/ react.createElement(LayoutNodeRenderer, {
+            key: index,
+            node: node
+        }))));
+export { PassthroughRenderer };
+
+//# sourceMappingURL=PassthroughRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/PassthroughRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/PassthroughRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { LayoutNodeRenderer } from \"~/features/formModel/FormView.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        passthrough: { fieldType: string; settings: undefined };\n    }\n}\n\nexport const PassthroughRenderer = createObjectFieldRenderer(({ field }) => {\n    return (\n        <div className=\"flex flex-col gap-4\">\n            {field.layout.map((node, index) => (\n                <LayoutNodeRenderer key={index} node={node} />\n            ))}\n        </div>\n    );\n});\n"],"names":["PassthroughRenderer","createObjectFieldRenderer","field","node","index","LayoutNodeRenderer"],"mappings":";;;AAUO,MAAMA,sBAAsBC,0BAA0B,CAAC,EAAEC,KAAK,EAAE,GAC5D,WAAP,GACI,oBAAC;QAAI,WAAU;OACVA,MAAM,MAAM,CAAC,GAAG,CAAC,CAACC,MAAMC,QAAAA,WAAAA,GACrB,oBAACC,oBAAkBA;YAAC,KAAKD;YAAO,MAAMD"}

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

@@ -0,0 +1,13 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        radioButtons: {
+            fieldType: "text" | "number";
+            options: true;
+            settings: undefined;
+        };
+    }
+}
+export declare const RadioButtonsRenderer: React.ComponentType<{
+    field: import("~/features/formModel/index.js").IFieldVM;
+}>;