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

package/admin/plugins/fields/ui/TabsLayoutEditor.js

@@ -0,0 +1,441 @@
+import react, { useCallback, useEffect, useRef } from "react";
+import { Accordion, Button, Grid, Heading, IconButton, Input, ScrollArea, Tabs, Text, Textarea } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/edit.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.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 add_svg_ReactComponent } from "@webiny/icons/add.svg";
+import { generateAlphaNumericLowerCaseId } from "@webiny/utils";
+import { useConfirmationDialog, useDialogs } from "@webiny/app-admin";
+import { Bind } from "@webiny/form";
+import { FieldEditor } from "../../../components/FieldEditor/index.js";
+import { IconPicker } from "../../../components/IconPicker.js";
+import { useModelFieldEditor } from "../../../hooks/index.js";
+import { PermissionsEditor } from "../../../components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.js";
+import { RulesEditor } from "../../../components/FieldEditor/EditFieldDialog/RulesEditor/RulesEditor.js";
+import { useModelEditor } from "../../../components/ContentModelEditor/useModelEditor.js";
+const TabsSettings = ()=>/*#__PURE__*/ react.createElement(Grid, {
+        className: "mt-md"
+    }, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "label"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Label"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "description"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Description"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "help"
+    }, /*#__PURE__*/ react.createElement(Textarea, {
+        label: "Help"
+    }))));
+const TabsDialogContent = ({ fieldOptions })=>/*#__PURE__*/ react.createElement(ScrollArea, {
+        className: "max-h-[70vh] flex flex-col"
+    }, /*#__PURE__*/ react.createElement(Tabs, {
+        size: "md",
+        separator: true,
+        tabs: [
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "tabs",
+                trigger: "Tabs",
+                value: "tabs",
+                content: /*#__PURE__*/ react.createElement(TabsSettings, null)
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "permissions",
+                trigger: "Permissions",
+                value: "permissions",
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "mt-md"
+                }, /*#__PURE__*/ react.createElement(PermissionsEditor, null))
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "rules",
+                trigger: "Rules",
+                value: "rules",
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "mt-md"
+                }, /*#__PURE__*/ react.createElement(RulesEditor, {
+                    fieldOptions: fieldOptions
+                }))
+            })
+        ]
+    }));
+const TabSettingsFields = ()=>/*#__PURE__*/ react.createElement(Grid, {
+        className: "mt-md"
+    }, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "label"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Label"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "icon"
+    }, /*#__PURE__*/ react.createElement(IconPicker, {
+        label: "Icon"
+    }))));
+const TabDialogContent = ({ fieldOptions })=>/*#__PURE__*/ react.createElement(Tabs, {
+        size: "md",
+        separator: true,
+        tabs: [
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "tab",
+                trigger: "Tab",
+                value: "tab",
+                content: /*#__PURE__*/ react.createElement(TabSettingsFields, null)
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "permissions",
+                trigger: "Permissions",
+                value: "permissions",
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "mt-md"
+                }, /*#__PURE__*/ react.createElement(PermissionsEditor, null))
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "rules",
+                trigger: "Rules",
+                value: "rules",
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "mt-md"
+                }, /*#__PURE__*/ react.createElement(RulesEditor, {
+                    fieldOptions: fieldOptions
+                }))
+            })
+        ]
+    });
+function createTabParent(tab) {
+    return {
+        id: tab.id,
+        fieldId: `tab:${tab.id}`,
+        type: "tab",
+        label: tab.label,
+        renderer: {
+            name: ""
+        }
+    };
+}
+function resolveTabFields(tab, parentFields) {
+    const fieldIds = new Set();
+    for (const row of tab.layout)for (const cell of row)if ("string" == typeof cell) fieldIds.add(cell);
+    return parentFields.filter((f)=>fieldIds.has(f.id));
+}
+const TabItem = ({ tab, index, totalTabs, field, parentFields, onUpdate, onInsertField, onRemoveField, onUpdateField })=>{
+    const { fieldOptions } = useModelEditor();
+    const dialogs = useDialogs();
+    const { showConfirmation } = useConfirmationDialog({
+        title: "Delete tab",
+        message: `Are you sure you want to delete the tab "${tab.label}"? Fields inside this tab will be removed.`,
+        acceptLabel: "Yes, delete tab"
+    });
+    const isFirst = 0 === index;
+    const isLast = index === totalTabs - 1;
+    const tabFields = resolveTabFields(tab, parentFields);
+    const handleFieldsChange = useCallback(({ fields: newFields, layout: newLayout })=>{
+        const oldFieldIds = new Set(tabFields.map((f)=>f.id));
+        const newFieldIds = new Set(newFields.map((f)=>f.id));
+        for (const f of newFields)if (!oldFieldIds.has(f.id)) onInsertField(f);
+        for (const id of oldFieldIds)if (!newFieldIds.has(id)) onRemoveField(id);
+        const oldFieldMap = new Map(tabFields.map((f)=>[
+                f.id,
+                f
+            ]));
+        for (const f of newFields)if (oldFieldMap.has(f.id) && oldFieldMap.get(f.id) !== f) onUpdateField(f);
+        const updatedTabs = [
+            ...field.tabs
+        ];
+        updatedTabs[index] = {
+            ...tab,
+            layout: newLayout
+        };
+        onUpdate({
+            ...field,
+            tabs: updatedTabs
+        });
+    }, [
+        tab,
+        index,
+        field,
+        tabFields,
+        onUpdate,
+        onInsertField,
+        onRemoveField,
+        onUpdateField
+    ]);
+    const moveTabUp = useCallback(()=>{
+        if (isFirst) return;
+        const tabs = [
+            ...field.tabs
+        ];
+        [tabs[index - 1], tabs[index]] = [
+            tabs[index],
+            tabs[index - 1]
+        ];
+        onUpdate({
+            ...field,
+            tabs
+        });
+    }, [
+        field,
+        index,
+        isFirst,
+        onUpdate
+    ]);
+    const moveTabDown = useCallback(()=>{
+        if (isLast) return;
+        const tabs = [
+            ...field.tabs
+        ];
+        [tabs[index + 1], tabs[index]] = [
+            tabs[index],
+            tabs[index + 1]
+        ];
+        onUpdate({
+            ...field,
+            tabs
+        });
+    }, [
+        field,
+        index,
+        isLast,
+        onUpdate
+    ]);
+    const deleteTab = useCallback(()=>{
+        showConfirmation(()=>{
+            for (const row of tab.layout)for (const cell of row)if ("string" == typeof cell) onRemoveField(cell);
+            const tabs = field.tabs.filter((_, i)=>i !== index);
+            onUpdate({
+                ...field,
+                tabs
+            });
+        });
+    }, [
+        field,
+        index,
+        tab,
+        onUpdate,
+        onRemoveField,
+        showConfirmation
+    ]);
+    const editTab = useCallback(()=>{
+        dialogs.showDialog({
+            title: "Tab Settings",
+            description: "Configure the tab and access permissions",
+            acceptLabel: "Save",
+            cancelLabel: "Cancel",
+            formData: {
+                label: tab.label,
+                icon: tab.icon ?? "",
+                rules: tab.rules ?? []
+            },
+            content: /*#__PURE__*/ react.createElement(TabDialogContent, {
+                fieldOptions: fieldOptions
+            }),
+            onAccept: (data)=>{
+                const updatedTabs = [
+                    ...field.tabs
+                ];
+                updatedTabs[index] = {
+                    ...tab,
+                    label: data.label ?? tab.label,
+                    icon: data.icon || void 0,
+                    rules: data.rules ?? []
+                };
+                onUpdate({
+                    ...field,
+                    tabs: updatedTabs
+                });
+            }
+        });
+    }, [
+        dialogs,
+        field,
+        index,
+        tab,
+        onUpdate
+    ]);
+    return /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: tab.label,
+        className: "[&>[data-state='open']]:!overflow-visible",
+        description: `${tabFields.length} field${1 !== tabFields.length ? "s" : ""}`,
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(expand_less_svg_ReactComponent, null),
+            onClick: moveTabUp,
+            disabled: isFirst
+        }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(expand_more_svg_ReactComponent, null),
+            onClick: moveTabDown,
+            disabled: isLast
+        }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            onClick: editTab
+        }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+            onClick: deleteTab,
+            disabled: totalTabs <= 1
+        }))
+    }, /*#__PURE__*/ react.createElement(FieldEditor, {
+        parent: createTabParent(tab),
+        fields: tabFields,
+        layout: tab.layout,
+        onChange: handleFieldsChange
+    }));
+};
+const TabsLayoutEditor = ({ field, onUpdate, onDelete })=>{
+    const parentEditor = useModelFieldEditor();
+    const { fieldOptions } = useModelEditor();
+    const { showDialog } = useDialogs();
+    const newTabId = useRef(void 0);
+    const { showConfirmation: showDeleteConfirmation } = useConfirmationDialog({
+        title: "Delete tabs",
+        message: "Are you sure you want to delete this tabs element? All fields inside the tabs will be removed.",
+        acceptLabel: "Yes, delete"
+    });
+    useEffect(()=>{
+        newTabId.current = void 0;
+    }, []);
+    const getAllParentFields = useCallback(()=>{
+        const allFieldIds = new Set();
+        for (const tab of field.tabs)for (const row of tab.layout)for (const cell of row)if ("string" == typeof cell) allFieldIds.add(cell);
+        const resolved = [];
+        for (const id of allFieldIds){
+            const f = parentEditor.getField({
+                id
+            });
+            if (f) resolved.push(f);
+        }
+        return resolved;
+    }, [
+        field,
+        parentEditor
+    ]);
+    const handleInsertField = useCallback((f)=>{
+        const existingField = parentEditor.getField({
+            id: f.id
+        });
+        if (!existingField) parentEditor.addField(f);
+    }, [
+        parentEditor
+    ]);
+    const handleRemoveField = useCallback((fieldId)=>{
+        parentEditor.removeField(fieldId);
+    }, [
+        parentEditor
+    ]);
+    const handleUpdateField = useCallback((f)=>{
+        parentEditor.updateField(f);
+    }, [
+        parentEditor
+    ]);
+    const addTab = useCallback(()=>{
+        const id = generateAlphaNumericLowerCaseId(8);
+        newTabId.current = id;
+        const newTab = {
+            id,
+            label: `Tab ${field.tabs.length + 1}`,
+            layout: []
+        };
+        onUpdate({
+            ...field,
+            tabs: [
+                ...field.tabs,
+                newTab
+            ]
+        });
+    }, [
+        field,
+        onUpdate
+    ]);
+    const handleDeleteTabs = useCallback(()=>{
+        showDeleteConfirmation(()=>{
+            onDelete();
+        });
+    }, [
+        onDelete,
+        showDeleteConfirmation
+    ]);
+    const editTabsSettings = useCallback(()=>{
+        showDialog({
+            title: "Tabs Settings",
+            description: "Configure the tabs and access permissions",
+            acceptLabel: "Save",
+            cancelLabel: "Cancel",
+            formData: {
+                label: field.label ?? "",
+                description: field.description ?? "",
+                help: field.help ?? "",
+                rules: field.rules ?? []
+            },
+            content: /*#__PURE__*/ react.createElement(TabsDialogContent, {
+                fieldOptions: fieldOptions
+            }),
+            onAccept: (data)=>{
+                onUpdate({
+                    ...field,
+                    label: data.label ?? "",
+                    description: data.description || null,
+                    help: data.help || null,
+                    rules: data.rules ?? []
+                });
+            }
+        });
+    }, [
+        field,
+        onUpdate
+    ]);
+    const resolvedParentFields = getAllParentFields();
+    return /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-between"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-row items-center"
+    }, /*#__PURE__*/ react.createElement(Heading, {
+        level: 6,
+        className: "text-nowrap"
+    }, field.label || "No label")), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "flex w-full text-neutral-strong"
+    }, "Tabs")), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-xs"
+    }, /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: editTabsSettings,
+        variant: "ghost",
+        size: "sm"
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+        onClick: handleDeleteTabs,
+        variant: "ghost",
+        size: "sm"
+    }))), field.tabs.length > 0 && /*#__PURE__*/ react.createElement(Accordion, null, field.tabs.map((tab, index)=>/*#__PURE__*/ react.createElement(TabItem, {
+            key: tab.id,
+            tab: tab,
+            index: index,
+            totalTabs: field.tabs.length,
+            field: field,
+            parentFields: resolvedParentFields,
+            onUpdate: onUpdate,
+            onInsertField: handleInsertField,
+            onRemoveField: handleRemoveField,
+            onUpdateField: handleUpdateField
+        }))), /*#__PURE__*/ react.createElement("div", {
+        className: "mt-sm flex justify-center"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        onClick: addTab,
+        text: "Add Tab",
+        icon: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null),
+        size: "sm"
+    })));
+};
+export { TabsLayoutEditor };
+
+//# sourceMappingURL=TabsLayoutEditor.js.map

package/admin/plugins/fields/ui/TabsLayoutEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/plugins/fields/ui/TabsLayoutEditor.js","sources":["../../../../../src/admin/plugins/fields/ui/TabsLayoutEditor.tsx"],"sourcesContent":["import React, { useCallback, useRef, useEffect } from \"react\";\nimport { Accordion, Tabs, ScrollArea } from \"@webiny/admin-ui\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@webiny/icons/expand_less.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@webiny/icons/expand_more.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport type {\n    CmsTabLayoutField,\n    CmsTabLayoutTab,\n    CmsLayoutField,\n    CmsEditorFieldsLayout\n} from \"@webiny/app-headless-cms-common/types/model.js\";\nimport { useConfirmationDialog, useDialogs } from \"@webiny/app-admin\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { IconButton } from \"@webiny/admin-ui\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { Input } from \"@webiny/admin-ui\";\nimport { Textarea } from \"@webiny/admin-ui\";\nimport { Heading } from \"@webiny/admin-ui\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { Bind } from \"@webiny/form\";\nimport type { CmsModelField } from \"~/types.js\";\nimport { FieldEditor } from \"~/admin/components/FieldEditor/index.js\";\nimport { IconPicker } from \"~/admin/components/IconPicker.js\";\nimport { useModelFieldEditor } from \"~/admin/hooks/index.js\";\nimport { PermissionsEditor } from \"~/admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.js\";\nimport { RulesEditor } from \"~/admin/components/FieldEditor/EditFieldDialog/RulesEditor/RulesEditor.js\";\nimport { useModelEditor } from \"~/admin/components/ContentModelEditor/useModelEditor.js\";\nimport type { FieldOption } from \"@webiny/app-headless-cms-common/Fields/fieldOptions.js\";\n\ninterface TabsLayoutEditorProps {\n    field: CmsTabLayoutField;\n    onUpdate: (d: CmsLayoutField) => void;\n    onDelete: () => void;\n}\n\ninterface TabItemProps {\n    tab: CmsTabLayoutTab;\n    index: number;\n    totalTabs: number;\n    field: CmsTabLayoutField;\n    parentFields: CmsModelField[];\n    onUpdate: (d: CmsLayoutField) => void;\n    onInsertField: (field: CmsModelField) => void;\n    onRemoveField: (fieldId: string) => void;\n    onUpdateField: (field: CmsModelField) => void;\n}\n\nconst TabsSettings = () => {\n    return (\n        <Grid className={\"mt-md\"}>\n            <Grid.Column span={12}>\n                <Bind name={\"label\"}>\n                    <Input label={\"Label\"} />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <Bind name={\"description\"}>\n                    <Input label={\"Description\"} />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <Bind name={\"help\"}>\n                    <Textarea label={\"Help\"} />\n                </Bind>\n            </Grid.Column>\n        </Grid>\n    );\n};\n\nconst TabsDialogContent = ({ fieldOptions }: { fieldOptions: FieldOption[] }) => {\n    return (\n        <ScrollArea className=\"max-h-[70vh] flex flex-col\">\n            <Tabs\n                size={\"md\"}\n                separator\n                tabs={[\n                    <Tabs.Tab\n                        key={\"tabs\"}\n                        trigger={\"Tabs\"}\n                        value={\"tabs\"}\n                        content={<TabsSettings />}\n                    />,\n                    <Tabs.Tab\n                        key={\"permissions\"}\n                        trigger={\"Permissions\"}\n                        value={\"permissions\"}\n                        content={\n                            <div className={\"mt-md\"}>\n                                <PermissionsEditor />\n                            </div>\n                        }\n                    />,\n                    <Tabs.Tab\n                        key={\"rules\"}\n                        trigger={\"Rules\"}\n                        value={\"rules\"}\n                        content={\n                            <div className={\"mt-md\"}>\n                                <RulesEditor fieldOptions={fieldOptions} />\n                            </div>\n                        }\n                    />\n                ]}\n            />\n        </ScrollArea>\n    );\n};\n\nconst TabSettingsFields = () => {\n    return (\n        <Grid className={\"mt-md\"}>\n            <Grid.Column span={12}>\n                <Bind name={\"label\"}>\n                    <Input label={\"Label\"} />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <Bind name={\"icon\"}>\n                    <IconPicker label={\"Icon\"} />\n                </Bind>\n            </Grid.Column>\n        </Grid>\n    );\n};\n\nconst TabDialogContent = ({ fieldOptions }: { fieldOptions: FieldOption[] }) => {\n    return (\n        <Tabs\n            size={\"md\"}\n            separator\n            tabs={[\n                <Tabs.Tab\n                    key={\"tab\"}\n                    trigger={\"Tab\"}\n                    value={\"tab\"}\n                    content={<TabSettingsFields />}\n                />,\n                <Tabs.Tab\n                    key={\"permissions\"}\n                    trigger={\"Permissions\"}\n                    value={\"permissions\"}\n                    content={\n                        <div className={\"mt-md\"}>\n                            <PermissionsEditor />\n                        </div>\n                    }\n                />,\n                <Tabs.Tab\n                    key={\"rules\"}\n                    trigger={\"Rules\"}\n                    value={\"rules\"}\n                    content={\n                        <div className={\"mt-md\"}>\n                            <RulesEditor fieldOptions={fieldOptions} />\n                        </div>\n                    }\n                />\n            ]}\n        />\n    );\n};\n\n/**\n * Create a synthetic parent field for a tab so that each tab's FieldEditor\n * has a unique identity for cross-parent drag & drop detection.\n */\nfunction createTabParent(tab: CmsTabLayoutTab): CmsModelField {\n    return {\n        id: tab.id,\n        fieldId: `tab:${tab.id}`,\n        type: \"tab\",\n        label: tab.label,\n        renderer: { name: \"\" }\n    } as CmsModelField;\n}\n\n/**\n * Resolve fields for a tab by looking up field IDs in the parent's fields array.\n */\nfunction resolveTabFields(tab: CmsTabLayoutTab, parentFields: CmsModelField[]): CmsModelField[] {\n    const fieldIds = new Set<string>();\n    for (const row of tab.layout) {\n        for (const cell of row) {\n            if (typeof cell === \"string\") {\n                fieldIds.add(cell);\n            }\n        }\n    }\n    return parentFields.filter(f => fieldIds.has(f.id));\n}\n\nconst TabItem = ({\n    tab,\n    index,\n    totalTabs,\n    field,\n    parentFields,\n    onUpdate,\n    onInsertField,\n    onRemoveField,\n    onUpdateField\n}: TabItemProps) => {\n    const { fieldOptions } = useModelEditor();\n    const dialogs = useDialogs();\n\n    const { showConfirmation } = useConfirmationDialog({\n        title: \"Delete tab\",\n        message: `Are you sure you want to delete the tab \"${tab.label}\"? Fields inside this tab will be removed.`,\n        acceptLabel: \"Yes, delete tab\"\n    });\n\n    const isFirst = index === 0;\n    const isLast = index === totalTabs - 1;\n\n    const tabFields = resolveTabFields(tab, parentFields);\n\n    const handleFieldsChange = useCallback(\n        ({\n            fields: newFields,\n            layout: newLayout\n        }: {\n            fields: CmsModelField[];\n            layout: CmsEditorFieldsLayout;\n        }) => {\n            const oldFieldIds = new Set(tabFields.map(f => f.id));\n            const newFieldIds = new Set(newFields.map(f => f.id));\n\n            // Find added fields (in new but not in old) -> hoist to parent\n            for (const f of newFields) {\n                if (!oldFieldIds.has(f.id)) {\n                    onInsertField(f);\n                }\n            }\n\n            // Find removed fields (in old but not in new) -> un-hoist from parent\n            for (const id of oldFieldIds) {\n                if (!newFieldIds.has(id)) {\n                    onRemoveField(id);\n                }\n            }\n\n            // Propagate field updates (e.g. permissions changes) to the parent\n            const oldFieldMap = new Map(tabFields.map(f => [f.id, f]));\n            for (const f of newFields) {\n                if (oldFieldMap.has(f.id) && oldFieldMap.get(f.id) !== f) {\n                    onUpdateField(f);\n                }\n            }\n\n            // Update the tab's layout in the field\n            const updatedTabs = [...field.tabs];\n            updatedTabs[index] = { ...tab, layout: newLayout };\n            onUpdate({ ...field, tabs: updatedTabs });\n        },\n        [tab, index, field, tabFields, onUpdate, onInsertField, onRemoveField, onUpdateField]\n    );\n\n    const moveTabUp = useCallback(() => {\n        if (isFirst) {\n            return;\n        }\n        const tabs = [...field.tabs];\n        [tabs[index - 1], tabs[index]] = [tabs[index], tabs[index - 1]];\n        onUpdate({ ...field, tabs });\n    }, [field, index, isFirst, onUpdate]);\n\n    const moveTabDown = useCallback(() => {\n        if (isLast) {\n            return;\n        }\n        const tabs = [...field.tabs];\n        [tabs[index + 1], tabs[index]] = [tabs[index], tabs[index + 1]];\n        onUpdate({ ...field, tabs });\n    }, [field, index, isLast, onUpdate]);\n\n    const deleteTab = useCallback(() => {\n        showConfirmation(() => {\n            // Collect field IDs to un-hoist\n            for (const row of tab.layout) {\n                for (const cell of row) {\n                    if (typeof cell === \"string\") {\n                        onRemoveField(cell);\n                    }\n                }\n            }\n\n            const tabs = field.tabs.filter((_, i) => i !== index);\n            onUpdate({ ...field, tabs });\n        });\n    }, [field, index, tab, onUpdate, onRemoveField, showConfirmation]);\n\n    const editTab = useCallback(() => {\n        dialogs.showDialog({\n            title: \"Tab Settings\",\n            description: \"Configure the tab and access permissions\",\n            acceptLabel: \"Save\",\n            cancelLabel: \"Cancel\",\n            formData: {\n                label: tab.label,\n                icon: tab.icon ?? \"\",\n                rules: tab.rules ?? []\n            },\n            content: <TabDialogContent fieldOptions={fieldOptions} />,\n            onAccept: data => {\n                const updatedTabs = [...field.tabs];\n                updatedTabs[index] = {\n                    ...tab,\n                    label: data.label ?? tab.label,\n                    icon: data.icon || undefined,\n                    rules: data.rules ?? []\n                };\n                onUpdate({ ...field, tabs: updatedTabs });\n            }\n        });\n    }, [dialogs, field, index, tab, onUpdate]);\n\n    return (\n        <Accordion.Item\n            title={tab.label}\n            /* This ensures drop zones are not affected by `overflow-hidden` on the accordion content. */\n            className={\"[&>[data-state='open']]:!overflow-visible\"}\n            description={`${tabFields.length} field${tabFields.length !== 1 ? \"s\" : \"\"}`}\n            actions={\n                <>\n                    <Accordion.Item.Action\n                        icon={<ArrowUpIcon />}\n                        onClick={moveTabUp}\n                        disabled={isFirst}\n                    />\n                    <Accordion.Item.Action\n                        icon={<ArrowDownIcon />}\n                        onClick={moveTabDown}\n                        disabled={isLast}\n                    />\n                    <Accordion.Item.Action.Separator />\n                    <Accordion.Item.Action icon={<EditIcon />} onClick={editTab} />\n                    <Accordion.Item.Action\n                        icon={<DeleteIcon />}\n                        onClick={deleteTab}\n                        disabled={totalTabs <= 1}\n                    />\n                </>\n            }\n        >\n            <FieldEditor\n                parent={createTabParent(tab)}\n                fields={tabFields}\n                layout={tab.layout}\n                onChange={handleFieldsChange}\n            />\n        </Accordion.Item>\n    );\n};\n\nexport const TabsLayoutEditor = ({ field, onUpdate, onDelete }: TabsLayoutEditorProps) => {\n    const parentEditor = useModelFieldEditor();\n    const { fieldOptions } = useModelEditor();\n    const { showDialog } = useDialogs();\n    const newTabId = useRef<string | undefined>(undefined);\n\n    const { showConfirmation: showDeleteConfirmation } = useConfirmationDialog({\n        title: \"Delete tabs\",\n        message:\n            \"Are you sure you want to delete this tabs element? All fields inside the tabs will be removed.\",\n        acceptLabel: \"Yes, delete\"\n    });\n\n    useEffect(() => {\n        newTabId.current = undefined;\n    }, []);\n\n    // Resolve all fields that exist in any tab of this field from the parent's fields\n    const getAllParentFields = useCallback((): CmsModelField[] => {\n        // Collect all field IDs that exist in any tab of this field\n        const allFieldIds = new Set<string>();\n        for (const tab of field.tabs) {\n            for (const row of tab.layout) {\n                for (const cell of row) {\n                    if (typeof cell === \"string\") {\n                        allFieldIds.add(cell);\n                    }\n                }\n            }\n        }\n\n        // Resolve them from the parent editor\n        const resolved: CmsModelField[] = [];\n        for (const id of allFieldIds) {\n            const f = parentEditor.getField({ id });\n            if (f) {\n                resolved.push(f);\n            }\n        }\n        return resolved;\n    }, [field, parentEditor]);\n\n    const handleInsertField = useCallback(\n        (f: CmsModelField) => {\n            // Hoist the field to the parent context's fields (without placing in parent's layout)\n            const existingField = parentEditor.getField({ id: f.id });\n            if (!existingField) {\n                parentEditor.addField(f);\n            }\n        },\n        [parentEditor]\n    );\n\n    const handleRemoveField = useCallback(\n        (fieldId: string) => {\n            // Un-hoist the field from the parent context's fields\n            parentEditor.removeField(fieldId);\n        },\n        [parentEditor]\n    );\n\n    const handleUpdateField = useCallback(\n        (f: CmsModelField) => {\n            parentEditor.updateField(f);\n        },\n        [parentEditor]\n    );\n\n    const addTab = useCallback(() => {\n        const id = generateAlphaNumericLowerCaseId(8);\n        newTabId.current = id;\n        const newTab: CmsTabLayoutTab = {\n            id,\n            label: `Tab ${field.tabs.length + 1}`,\n            layout: []\n        };\n        onUpdate({ ...field, tabs: [...field.tabs, newTab] });\n    }, [field, onUpdate]);\n\n    const handleDeleteTabs = useCallback(() => {\n        showDeleteConfirmation(() => {\n            onDelete();\n        });\n    }, [onDelete, showDeleteConfirmation]);\n\n    const editTabsSettings = useCallback(() => {\n        showDialog({\n            title: \"Tabs Settings\",\n            description: \"Configure the tabs and access permissions\",\n            acceptLabel: \"Save\",\n            cancelLabel: \"Cancel\",\n            formData: {\n                label: field.label ?? \"\",\n                description: field.description ?? \"\",\n                help: field.help ?? \"\",\n                rules: field.rules ?? []\n            },\n            content: <TabsDialogContent fieldOptions={fieldOptions} />,\n            onAccept: data => {\n                onUpdate({\n                    ...field,\n                    label: data.label ?? \"\",\n                    description: data.description || null,\n                    help: data.help || null,\n                    rules: data.rules ?? []\n                });\n            }\n        });\n    }, [field, onUpdate]);\n\n    const resolvedParentFields = getAllParentFields();\n\n    return (\n        <div>\n            <div className={\"flex justify-between\"}>\n                <div className={\"flex flex-col\"}>\n                    <div className={\"flex flex-row items-center\"}>\n                        <Heading level={6} className={\"text-nowrap\"}>\n                            {field.label || \"No label\"}\n                        </Heading>\n                    </div>\n                    <Text size=\"sm\" className={\"flex w-full text-neutral-strong\"}>\n                        Tabs\n                    </Text>\n                </div>\n                <div className={\"flex items-center gap-xs\"}>\n                    <IconButton\n                        icon={<EditIcon />}\n                        onClick={editTabsSettings}\n                        variant={\"ghost\"}\n                        size={\"sm\"}\n                    />\n                    <IconButton\n                        icon={<DeleteIcon />}\n                        onClick={handleDeleteTabs}\n                        variant={\"ghost\"}\n                        size={\"sm\"}\n                    />\n                </div>\n            </div>\n            {field.tabs.length > 0 && (\n                <Accordion>\n                    {field.tabs.map((tab, index) => (\n                        <TabItem\n                            key={tab.id}\n                            tab={tab}\n                            index={index}\n                            totalTabs={field.tabs.length}\n                            field={field}\n                            parentFields={resolvedParentFields}\n                            onUpdate={onUpdate}\n                            onInsertField={handleInsertField}\n                            onRemoveField={handleRemoveField}\n                            onUpdateField={handleUpdateField}\n                        />\n                    ))}\n                </Accordion>\n            )}\n            <div className={\"mt-sm flex justify-center\"}>\n                <Button onClick={addTab} text={\"Add Tab\"} icon={<AddIcon />} size={\"sm\"} />\n            </div>\n        </div>\n    );\n};\n"],"names":["TabsSettings","Grid","Bind","Input","Textarea","TabsDialogContent","fieldOptions","ScrollArea","Tabs","PermissionsEditor","RulesEditor","TabSettingsFields","IconPicker","TabDialogContent","createTabParent","tab","resolveTabFields","parentFields","fieldIds","Set","row","cell","f","TabItem","index","totalTabs","field","onUpdate","onInsertField","onRemoveField","onUpdateField","useModelEditor","dialogs","useDialogs","showConfirmation","useConfirmationDialog","isFirst","isLast","tabFields","handleFieldsChange","useCallback","newFields","newLayout","oldFieldIds","newFieldIds","id","oldFieldMap","Map","updatedTabs","moveTabUp","tabs","moveTabDown","deleteTab","_","i","editTab","data","undefined","Accordion","ArrowUpIcon","ArrowDownIcon","EditIcon","DeleteIcon","FieldEditor","TabsLayoutEditor","onDelete","parentEditor","useModelFieldEditor","showDialog","newTabId","useRef","showDeleteConfirmation","useEffect","getAllParentFields","allFieldIds","resolved","handleInsertField","existingField","handleRemoveField","fieldId","handleUpdateField","addTab","generateAlphaNumericLowerCaseId","newTab","handleDeleteTabs","editTabsSettings","resolvedParentFields","Heading","Text","IconButton","Button","AddIcon"],"mappings":";;;;;;;;;;;;;;;;AAkDA,MAAMA,eAAe,IACV,WAAP,GACI,oBAACC,MAAIA;QAAC,WAAW;qBACb,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,MAAIA;QAAC,MAAM;qBACR,oBAACC,OAAKA;QAAC,OAAO;wBAGtB,oBAACF,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,MAAIA;QAAC,MAAM;qBACR,oBAACC,OAAKA;QAAC,OAAO;wBAGtB,oBAACF,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,MAAIA;QAAC,MAAM;qBACR,oBAACE,UAAQA;QAAC,OAAO;;AAOrC,MAAMC,oBAAoB,CAAC,EAAEC,YAAY,EAAmC,GACjE,WAAP,GACI,oBAACC,YAAUA;QAAC,WAAU;qBAClB,oBAACC,MAAIA;QACD,MAAM;QACN;QACA,MAAM;0BACF,oBAACA,KAAK,GAAG;gBACL,KAAK;gBACL,SAAS;gBACT,OAAO;gBACP,uBAAS,oBAACR,cAAYA;;0BAE1B,oBAACQ,KAAK,GAAG;gBACL,KAAK;gBACL,SAAS;gBACT,OAAO;gBACP,uBACI,oBAAC;oBAAI,WAAW;iCACZ,oBAACC,mBAAiBA;;0BAI9B,oBAACD,KAAK,GAAG;gBACL,KAAK;gBACL,SAAS;gBACT,OAAO;gBACP,uBACI,oBAAC;oBAAI,WAAW;iCACZ,oBAACE,aAAWA;oBAAC,cAAcJ;;;SAI1C;;AAMjB,MAAMK,oBAAoB,IACf,WAAP,GACI,oBAACV,MAAIA;QAAC,WAAW;qBACb,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,MAAIA;QAAC,MAAM;qBACR,oBAACC,OAAKA;QAAC,OAAO;wBAGtB,oBAACF,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,MAAIA;QAAC,MAAM;qBACR,oBAACU,YAAUA;QAAC,OAAO;;AAOvC,MAAMC,mBAAmB,CAAC,EAAEP,YAAY,EAAmC,GAChE,WAAP,GACI,oBAACE,MAAIA;QACD,MAAM;QACN;QACA,MAAM;0BACF,oBAACA,KAAK,GAAG;gBACL,KAAK;gBACL,SAAS;gBACT,OAAO;gBACP,uBAAS,oBAACG,mBAAiBA;;0BAE/B,oBAACH,KAAK,GAAG;gBACL,KAAK;gBACL,SAAS;gBACT,OAAO;gBACP,uBACI,oBAAC;oBAAI,WAAW;iCACZ,oBAACC,mBAAiBA;;0BAI9B,oBAACD,KAAK,GAAG;gBACL,KAAK;gBACL,SAAS;gBACT,OAAO;gBACP,uBACI,oBAAC;oBAAI,WAAW;iCACZ,oBAACE,aAAWA;oBAAC,cAAcJ;;;SAI1C;;AASb,SAASQ,gBAAgBC,GAAoB;IACzC,OAAO;QACH,IAAIA,IAAI,EAAE;QACV,SAAS,CAAC,IAAI,EAAEA,IAAI,EAAE,EAAE;QACxB,MAAM;QACN,OAAOA,IAAI,KAAK;QAChB,UAAU;YAAE,MAAM;QAAG;IACzB;AACJ;AAKA,SAASC,iBAAiBD,GAAoB,EAAEE,YAA6B;IACzE,MAAMC,WAAW,IAAIC;IACrB,KAAK,MAAMC,OAAOL,IAAI,MAAM,CACxB,KAAK,MAAMM,QAAQD,IACf,IAAI,AAAgB,YAAhB,OAAOC,MACPH,SAAS,GAAG,CAACG;IAIzB,OAAOJ,aAAa,MAAM,CAACK,CAAAA,IAAKJ,SAAS,GAAG,CAACI,EAAE,EAAE;AACrD;AAEA,MAAMC,UAAU,CAAC,EACbR,GAAG,EACHS,KAAK,EACLC,SAAS,EACTC,KAAK,EACLT,YAAY,EACZU,QAAQ,EACRC,aAAa,EACbC,aAAa,EACbC,aAAa,EACF;IACX,MAAM,EAAExB,YAAY,EAAE,GAAGyB;IACzB,MAAMC,UAAUC;IAEhB,MAAM,EAAEC,gBAAgB,EAAE,GAAGC,sBAAsB;QAC/C,OAAO;QACP,SAAS,CAAC,yCAAyC,EAAEpB,IAAI,KAAK,CAAC,0CAA0C,CAAC;QAC1G,aAAa;IACjB;IAEA,MAAMqB,UAAUZ,AAAU,MAAVA;IAChB,MAAMa,SAASb,UAAUC,YAAY;IAErC,MAAMa,YAAYtB,iBAAiBD,KAAKE;IAExC,MAAMsB,qBAAqBC,YACvB,CAAC,EACG,QAAQC,SAAS,EACjB,QAAQC,SAAS,EAIpB;QACG,MAAMC,cAAc,IAAIxB,IAAImB,UAAU,GAAG,CAAChB,CAAAA,IAAKA,EAAE,EAAE;QACnD,MAAMsB,cAAc,IAAIzB,IAAIsB,UAAU,GAAG,CAACnB,CAAAA,IAAKA,EAAE,EAAE;QAGnD,KAAK,MAAMA,KAAKmB,UACZ,IAAI,CAACE,YAAY,GAAG,CAACrB,EAAE,EAAE,GACrBM,cAAcN;QAKtB,KAAK,MAAMuB,MAAMF,YACb,IAAI,CAACC,YAAY,GAAG,CAACC,KACjBhB,cAAcgB;QAKtB,MAAMC,cAAc,IAAIC,IAAIT,UAAU,GAAG,CAAChB,CAAAA,IAAK;gBAACA,EAAE,EAAE;gBAAEA;aAAE;QACxD,KAAK,MAAMA,KAAKmB,UACZ,IAAIK,YAAY,GAAG,CAACxB,EAAE,EAAE,KAAKwB,YAAY,GAAG,CAACxB,EAAE,EAAE,MAAMA,GACnDQ,cAAcR;QAKtB,MAAM0B,cAAc;eAAItB,MAAM,IAAI;SAAC;QACnCsB,WAAW,CAACxB,MAAM,GAAG;YAAE,GAAGT,GAAG;YAAE,QAAQ2B;QAAU;QACjDf,SAAS;YAAE,GAAGD,KAAK;YAAE,MAAMsB;QAAY;IAC3C,GACA;QAACjC;QAAKS;QAAOE;QAAOY;QAAWX;QAAUC;QAAeC;QAAeC;KAAc;IAGzF,MAAMmB,YAAYT,YAAY;QAC1B,IAAIJ,SACA;QAEJ,MAAMc,OAAO;eAAIxB,MAAM,IAAI;SAAC;QAC5B,CAACwB,IAAI,CAAC1B,QAAQ,EAAE,EAAE0B,IAAI,CAAC1B,MAAM,CAAC,GAAG;YAAC0B,IAAI,CAAC1B,MAAM;YAAE0B,IAAI,CAAC1B,QAAQ,EAAE;SAAC;QAC/DG,SAAS;YAAE,GAAGD,KAAK;YAAEwB;QAAK;IAC9B,GAAG;QAACxB;QAAOF;QAAOY;QAAST;KAAS;IAEpC,MAAMwB,cAAcX,YAAY;QAC5B,IAAIH,QACA;QAEJ,MAAMa,OAAO;eAAIxB,MAAM,IAAI;SAAC;QAC5B,CAACwB,IAAI,CAAC1B,QAAQ,EAAE,EAAE0B,IAAI,CAAC1B,MAAM,CAAC,GAAG;YAAC0B,IAAI,CAAC1B,MAAM;YAAE0B,IAAI,CAAC1B,QAAQ,EAAE;SAAC;QAC/DG,SAAS;YAAE,GAAGD,KAAK;YAAEwB;QAAK;IAC9B,GAAG;QAACxB;QAAOF;QAAOa;QAAQV;KAAS;IAEnC,MAAMyB,YAAYZ,YAAY;QAC1BN,iBAAiB;YAEb,KAAK,MAAMd,OAAOL,IAAI,MAAM,CACxB,KAAK,MAAMM,QAAQD,IACf,IAAI,AAAgB,YAAhB,OAAOC,MACPQ,cAAcR;YAK1B,MAAM6B,OAAOxB,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC2B,GAAGC,IAAMA,MAAM9B;YAC/CG,SAAS;gBAAE,GAAGD,KAAK;gBAAEwB;YAAK;QAC9B;IACJ,GAAG;QAACxB;QAAOF;QAAOT;QAAKY;QAAUE;QAAeK;KAAiB;IAEjE,MAAMqB,UAAUf,YAAY;QACxBR,QAAQ,UAAU,CAAC;YACf,OAAO;YACP,aAAa;YACb,aAAa;YACb,aAAa;YACb,UAAU;gBACN,OAAOjB,IAAI,KAAK;gBAChB,MAAMA,IAAI,IAAI,IAAI;gBAClB,OAAOA,IAAI,KAAK,IAAI,EAAE;YAC1B;YACA,SAAS,WAAT,GAAS,oBAACF,kBAAgBA;gBAAC,cAAcP;;YACzC,UAAUkD,CAAAA;gBACN,MAAMR,cAAc;uBAAItB,MAAM,IAAI;iBAAC;gBACnCsB,WAAW,CAACxB,MAAM,GAAG;oBACjB,GAAGT,GAAG;oBACN,OAAOyC,KAAK,KAAK,IAAIzC,IAAI,KAAK;oBAC9B,MAAMyC,KAAK,IAAI,IAAIC;oBACnB,OAAOD,KAAK,KAAK,IAAI,EAAE;gBAC3B;gBACA7B,SAAS;oBAAE,GAAGD,KAAK;oBAAE,MAAMsB;gBAAY;YAC3C;QACJ;IACJ,GAAG;QAAChB;QAASN;QAAOF;QAAOT;QAAKY;KAAS;IAEzC,OAAO,WAAP,GACI,oBAAC+B,UAAU,IAAI;QACX,OAAO3C,IAAI,KAAK;QAEhB,WAAW;QACX,aAAa,GAAGuB,UAAU,MAAM,CAAC,MAAM,EAAEA,AAAqB,MAArBA,UAAU,MAAM,GAAS,MAAM,IAAI;QAC5E,uBACI,wDACI,oBAACoB,UAAU,IAAI,CAAC,MAAM;YAClB,oBAAM,oBAACC,gCAAWA;YAClB,SAASV;YACT,UAAUb;0BAEd,oBAACsB,UAAU,IAAI,CAAC,MAAM;YAClB,oBAAM,oBAACE,gCAAaA;YACpB,SAAST;YACT,UAAUd;0BAEd,oBAACqB,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACA,UAAU,IAAI,CAAC,MAAM;YAAC,oBAAM,oBAACG,gBAAQA;YAAK,SAASN;0BACpD,oBAACG,UAAU,IAAI,CAAC,MAAM;YAClB,oBAAM,oBAACI,2BAAUA;YACjB,SAASV;YACT,UAAU3B,aAAa;;qBAKnC,oBAACsC,aAAWA;QACR,QAAQjD,gBAAgBC;QACxB,QAAQuB;QACR,QAAQvB,IAAI,MAAM;QAClB,UAAUwB;;AAI1B;AAEO,MAAMyB,mBAAmB,CAAC,EAAEtC,KAAK,EAAEC,QAAQ,EAAEsC,QAAQ,EAAyB;IACjF,MAAMC,eAAeC;IACrB,MAAM,EAAE7D,YAAY,EAAE,GAAGyB;IACzB,MAAM,EAAEqC,UAAU,EAAE,GAAGnC;IACvB,MAAMoC,WAAWC,OAA2Bb;IAE5C,MAAM,EAAE,kBAAkBc,sBAAsB,EAAE,GAAGpC,sBAAsB;QACvE,OAAO;QACP,SACI;QACJ,aAAa;IACjB;IAEAqC,UAAU;QACNH,SAAS,OAAO,GAAGZ;IACvB,GAAG,EAAE;IAGL,MAAMgB,qBAAqBjC,YAAY;QAEnC,MAAMkC,cAAc,IAAIvD;QACxB,KAAK,MAAMJ,OAAOW,MAAM,IAAI,CACxB,KAAK,MAAMN,OAAOL,IAAI,MAAM,CACxB,KAAK,MAAMM,QAAQD,IACf,IAAI,AAAgB,YAAhB,OAAOC,MACPqD,YAAY,GAAG,CAACrD;QAOhC,MAAMsD,WAA4B,EAAE;QACpC,KAAK,MAAM9B,MAAM6B,YAAa;YAC1B,MAAMpD,IAAI4C,aAAa,QAAQ,CAAC;gBAAErB;YAAG;YACrC,IAAIvB,GACAqD,SAAS,IAAI,CAACrD;QAEtB;QACA,OAAOqD;IACX,GAAG;QAACjD;QAAOwC;KAAa;IAExB,MAAMU,oBAAoBpC,YACtB,CAAClB;QAEG,MAAMuD,gBAAgBX,aAAa,QAAQ,CAAC;YAAE,IAAI5C,EAAE,EAAE;QAAC;QACvD,IAAI,CAACuD,eACDX,aAAa,QAAQ,CAAC5C;IAE9B,GACA;QAAC4C;KAAa;IAGlB,MAAMY,oBAAoBtC,YACtB,CAACuC;QAEGb,aAAa,WAAW,CAACa;IAC7B,GACA;QAACb;KAAa;IAGlB,MAAMc,oBAAoBxC,YACtB,CAAClB;QACG4C,aAAa,WAAW,CAAC5C;IAC7B,GACA;QAAC4C;KAAa;IAGlB,MAAMe,SAASzC,YAAY;QACvB,MAAMK,KAAKqC,gCAAgC;QAC3Cb,SAAS,OAAO,GAAGxB;QACnB,MAAMsC,SAA0B;YAC5BtC;YACA,OAAO,CAAC,IAAI,EAAEnB,MAAM,IAAI,CAAC,MAAM,GAAG,GAAG;YACrC,QAAQ,EAAE;QACd;QACAC,SAAS;YAAE,GAAGD,KAAK;YAAE,MAAM;mBAAIA,MAAM,IAAI;gBAAEyD;aAAO;QAAC;IACvD,GAAG;QAACzD;QAAOC;KAAS;IAEpB,MAAMyD,mBAAmB5C,YAAY;QACjC+B,uBAAuB;YACnBN;QACJ;IACJ,GAAG;QAACA;QAAUM;KAAuB;IAErC,MAAMc,mBAAmB7C,YAAY;QACjC4B,WAAW;YACP,OAAO;YACP,aAAa;YACb,aAAa;YACb,aAAa;YACb,UAAU;gBACN,OAAO1C,MAAM,KAAK,IAAI;gBACtB,aAAaA,MAAM,WAAW,IAAI;gBAClC,MAAMA,MAAM,IAAI,IAAI;gBACpB,OAAOA,MAAM,KAAK,IAAI,EAAE;YAC5B;YACA,SAAS,WAAT,GAAS,oBAACrB,mBAAiBA;gBAAC,cAAcC;;YAC1C,UAAUkD,CAAAA;gBACN7B,SAAS;oBACL,GAAGD,KAAK;oBACR,OAAO8B,KAAK,KAAK,IAAI;oBACrB,aAAaA,KAAK,WAAW,IAAI;oBACjC,MAAMA,KAAK,IAAI,IAAI;oBACnB,OAAOA,KAAK,KAAK,IAAI,EAAE;gBAC3B;YACJ;QACJ;IACJ,GAAG;QAAC9B;QAAOC;KAAS;IAEpB,MAAM2D,uBAAuBb;IAE7B,OAAO,WAAP,GACI,oBAAC,2BACG,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACc,SAAOA;QAAC,OAAO;QAAG,WAAW;OACzB7D,MAAM,KAAK,IAAI,4BAGxB,oBAAC8D,MAAIA;QAAC,MAAK;QAAK,WAAW;OAAmC,wBAIlE,oBAAC;QAAI,WAAW;qBACZ,oBAACC,YAAUA;QACP,oBAAM,oBAAC5B,gBAAQA;QACf,SAASwB;QACT,SAAS;QACT,MAAM;sBAEV,oBAACI,YAAUA;QACP,oBAAM,oBAAC3B,2BAAUA;QACjB,SAASsB;QACT,SAAS;QACT,MAAM;UAIjB1D,MAAM,IAAI,CAAC,MAAM,GAAG,KAAK,WAAL,GACjB,oBAACgC,WAASA,MACLhC,MAAM,IAAI,CAAC,GAAG,CAAC,CAACX,KAAKS,QAAAA,WAAAA,GAClB,oBAACD,SAAOA;YACJ,KAAKR,IAAI,EAAE;YACX,KAAKA;YACL,OAAOS;YACP,WAAWE,MAAM,IAAI,CAAC,MAAM;YAC5B,OAAOA;YACP,cAAc4D;YACd,UAAU3D;YACV,eAAeiD;YACf,eAAeE;YACf,eAAeE;4BAK/B,oBAAC;QAAI,WAAW;qBACZ,oBAACU,QAAMA;QAAC,SAAST;QAAQ,MAAM;QAAW,oBAAM,oBAACU,wBAAOA;QAAK,MAAM;;AAInF"}

package/admin/plugins/fields/ui/alert.d.ts

@@ -0,0 +1,2 @@
+import type { CmsModelLayoutFieldTypePlugin } from "@webiny/app-headless-cms-common/types/index.js";
+export declare const uiAlertField: CmsModelLayoutFieldTypePlugin;

package/admin/plugins/fields/ui/alert.js

@@ -0,0 +1,157 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/warning.svg";
+import { ReactComponent as edit_svg_ReactComponent } from "@webiny/icons/edit.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.svg";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { Alert, Grid, IconButton, ScrollArea, Select, Tabs, Text, Textarea } from "@webiny/admin-ui";
+import { useDialogs } from "@webiny/app-admin";
+import { Bind } from "@webiny/form";
+import { PermissionsEditor } from "../../../components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.js";
+import { RulesEditor } from "../../../components/FieldEditor/EditFieldDialog/RulesEditor/RulesEditor.js";
+import { useModelEditor } from "../../../components/ContentModelEditor/useModelEditor.js";
+const t = i18n.ns("app-headless-cms/admin/fields");
+const AlertSettings = ()=>/*#__PURE__*/ react.createElement(Grid, {
+        className: "mt-md"
+    }, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "label"
+    }, /*#__PURE__*/ react.createElement(Textarea, {
+        label: "Message"
+    }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "alertType",
+        defaultValue: "info"
+    }, /*#__PURE__*/ react.createElement(Select, {
+        displayResetAction: false,
+        label: "Alert type",
+        options: [
+            {
+                value: "info",
+                label: "Info"
+            },
+            {
+                value: "success",
+                label: "Success"
+            },
+            {
+                value: "warning",
+                label: "Warning"
+            },
+            {
+                value: "danger",
+                label: "Danger"
+            }
+        ]
+    }))));
+const AlertDialogContent = ({ fieldOptions })=>/*#__PURE__*/ react.createElement(ScrollArea, {
+        className: "max-h-[70vh] flex flex-col"
+    }, /*#__PURE__*/ react.createElement(Tabs, {
+        size: "md",
+        separator: true,
+        tabs: [
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "alert",
+                trigger: "Alert",
+                value: "alert",
+                content: /*#__PURE__*/ react.createElement(AlertSettings, null)
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "permissions",
+                trigger: "Permissions",
+                value: "permissions",
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "mt-md"
+                }, /*#__PURE__*/ react.createElement(PermissionsEditor, null))
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "rules",
+                trigger: "Rules",
+                value: "rules",
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "mt-md"
+                }, /*#__PURE__*/ react.createElement(RulesEditor, {
+                    fieldOptions: fieldOptions
+                }))
+            })
+        ]
+    }));
+const AlertLayoutCell = ({ field, onUpdate, onDelete })=>{
+    const { fieldOptions } = useModelEditor();
+    const dialogs = useDialogs();
+    const openSettings = ()=>{
+        dialogs.showDialog({
+            title: "Alert Settings",
+            description: "Configure the alert and access permissions",
+            acceptLabel: "Save",
+            cancelLabel: "Cancel",
+            formData: {
+                label: field.label,
+                alertType: field.alertType,
+                rules: field.rules ?? []
+            },
+            content: /*#__PURE__*/ react.createElement(AlertDialogContent, {
+                fieldOptions: fieldOptions
+            }),
+            onAccept: (data)=>{
+                onUpdate({
+                    ...field,
+                    label: data.label ?? "",
+                    alertType: data.alertType ?? "info",
+                    rules: data.rules ?? []
+                });
+            }
+        });
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-between"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1"
+    }, field.label ? /*#__PURE__*/ react.createElement(Alert, {
+        type: field.alertType
+    }, field.label) : /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong italic"
+    }, "Alert (no message set)")), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-xs ml-sm"
+    }, /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null),
+        onClick: openSettings,
+        variant: "ghost",
+        size: "sm"
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+        onClick: onDelete,
+        variant: "ghost",
+        size: "sm"
+    })));
+};
+const uiAlertField = {
+    type: "cms-editor-layout-field-type",
+    name: "cms-editor-layout-field-type-alert",
+    field: {
+        type: "alert",
+        label: t`Alert`,
+        description: t`Show an alert message in the form.`,
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        canEditSettings: true,
+        createField () {
+            return {
+                type: "alert",
+                label: "",
+                alertType: "info"
+            };
+        },
+        render ({ field, onUpdate, onDelete }) {
+            return /*#__PURE__*/ react.createElement(AlertLayoutCell, {
+                field: field,
+                onUpdate: onUpdate,
+                onDelete: onDelete
+            });
+        }
+    }
+};
+export { uiAlertField };
+
+//# sourceMappingURL=alert.js.map