@webiny/app-headless-cms 6.4.5 → 6.6.0-alpha.0

package/presentation/fieldTypes/types/layout/AlertLayoutFieldType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldTypes/types/layout/AlertLayoutFieldType.js","sources":["../../../../../src/presentation/fieldTypes/types/layout/AlertLayoutFieldType.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as AlertIcon } from \"@webiny/icons/warning.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport {\n    Alert,\n    Grid,\n    IconButton,\n    Tabs,\n    Textarea,\n    Select,\n    Text,\n    ScrollArea\n} from \"@webiny/admin-ui\";\nimport { useDialogs } from \"@webiny/app-admin\";\nimport { Bind } from \"@webiny/form\";\nimport type { CmsAlertLayoutField, CmsLayoutField } from \"~/types.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 \"~/admin/components/ContentModelEditor/fieldOptions.js\";\nimport { CmsLayoutFieldType, type ICmsLayoutFieldType } from \"../../abstractions.js\";\n\nconst AlertSettings = () => {\n    return (\n        <Grid className={\"mt-md\"}>\n            <Grid.Column span={12}>\n                <Bind name={\"label\"}>\n                    <Textarea label={\"Message\"} />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <Bind name={\"alertType\"} defaultValue={\"info\"}>\n                    <Select\n                        displayResetAction={false}\n                        label={\"Alert type\"}\n                        options={[\n                            { value: \"info\", label: \"Info\" },\n                            { value: \"success\", label: \"Success\" },\n                            { value: \"warning\", label: \"Warning\" },\n                            { value: \"danger\", label: \"Danger\" }\n                        ]}\n                    />\n                </Bind>\n            </Grid.Column>\n        </Grid>\n    );\n};\n\nconst AlertDialogContent = ({ 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={\"alert\"}\n                        trigger={\"Alert\"}\n                        value={\"alert\"}\n                        content={<AlertSettings />}\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\ninterface AlertLayoutCellProps {\n    field: CmsAlertLayoutField;\n    onUpdate: (d: CmsLayoutField) => void;\n    onDelete: () => void;\n}\n\nconst AlertLayoutCell = ({ field, onUpdate, onDelete }: AlertLayoutCellProps) => {\n    const { fieldOptions } = useModelEditor();\n    const dialogs = useDialogs();\n\n    const openSettings = () => {\n        dialogs.showDialog({\n            title: \"Alert Settings\",\n            description: \"Configure the alert and access permissions\",\n            acceptLabel: \"Save\",\n            cancelLabel: \"Cancel\",\n            formData: {\n                label: field.label,\n                alertType: field.alertType,\n                rules: field.rules ?? []\n            },\n            content: <AlertDialogContent fieldOptions={fieldOptions} />,\n            onAccept: data => {\n                onUpdate({\n                    ...field,\n                    label: data.label ?? \"\",\n                    alertType: (data.alertType as CmsAlertLayoutField[\"alertType\"]) ?? \"info\",\n                    rules: data.rules ?? []\n                });\n            }\n        });\n    };\n\n    return (\n        <div className={\"flex items-center justify-between\"}>\n            <div className={\"flex-1\"}>\n                {field.label ? (\n                    <Alert type={field.alertType}>{field.label}</Alert>\n                ) : (\n                    <Text size={\"sm\"} className={\"text-neutral-strong italic\"}>\n                        Alert (no message set)\n                    </Text>\n                )}\n            </div>\n            <div className={\"flex items-center gap-xs ml-sm\"}>\n                <IconButton\n                    icon={<EditIcon />}\n                    onClick={openSettings}\n                    variant={\"ghost\"}\n                    size={\"sm\"}\n                />\n                <IconButton\n                    icon={<DeleteIcon />}\n                    onClick={onDelete}\n                    variant={\"ghost\"}\n                    size={\"sm\"}\n                />\n            </div>\n        </div>\n    );\n};\n\nclass AlertLayoutFieldTypeImpl implements ICmsLayoutFieldType {\n    type = \"alert\";\n    label = \"Alert\";\n    description = \"Show an alert message in the form.\";\n    icon = (<AlertIcon />) as React.ReactElement;\n    canEditSettings = true;\n\n    createField() {\n        return { type: \"alert\" as const, label: \"\", alertType: \"info\" as const };\n    }\n\n    render({ field, onUpdate, onDelete }: Parameters<ICmsLayoutFieldType[\"render\"]>[0]) {\n        return (\n            <AlertLayoutCell\n                field={field as CmsAlertLayoutField}\n                onUpdate={onUpdate}\n                onDelete={onDelete}\n            />\n        );\n    }\n}\n\nexport const AlertLayoutFieldType = CmsLayoutFieldType.createImplementation({\n    implementation: AlertLayoutFieldTypeImpl,\n    dependencies: []\n});\n"],"names":["AlertSettings","Grid","Bind","Textarea","Select","AlertDialogContent","fieldOptions","ScrollArea","Tabs","PermissionsEditor","RulesEditor","AlertLayoutCell","field","onUpdate","onDelete","useModelEditor","dialogs","useDialogs","openSettings","data","Alert","Text","IconButton","EditIcon","DeleteIcon","AlertLayoutFieldTypeImpl","AlertIcon","AlertLayoutFieldType","CmsLayoutFieldType"],"mappings":";;;;;;;;;;;AAuBA,MAAMA,gBAAgB,IACX,WAAP,GACI,oBAACC,MAAIA;QAAC,WAAW;qBACb,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,MAAIA;QAAC,MAAM;qBACR,oBAACC,UAAQA;QAAC,OAAO;wBAGzB,oBAACF,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,MAAIA;QAAC,MAAM;QAAa,cAAc;qBACnC,oBAACE,QAAMA;QACH,oBAAoB;QACpB,OAAO;QACP,SAAS;YACL;gBAAE,OAAO;gBAAQ,OAAO;YAAO;YAC/B;gBAAE,OAAO;gBAAW,OAAO;YAAU;YACrC;gBAAE,OAAO;gBAAW,OAAO;YAAU;YACrC;gBAAE,OAAO;gBAAU,OAAO;YAAS;SACtC;;AAQzB,MAAMC,qBAAqB,CAAC,EAAEC,YAAY,EAAmC,GAClE,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,eAAaA;;0BAE3B,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;;AAYjB,MAAMK,kBAAkB,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAwB;IACxE,MAAM,EAAER,YAAY,EAAE,GAAGS;IACzB,MAAMC,UAAUC;IAEhB,MAAMC,eAAe;QACjBF,QAAQ,UAAU,CAAC;YACf,OAAO;YACP,aAAa;YACb,aAAa;YACb,aAAa;YACb,UAAU;gBACN,OAAOJ,MAAM,KAAK;gBAClB,WAAWA,MAAM,SAAS;gBAC1B,OAAOA,MAAM,KAAK,IAAI,EAAE;YAC5B;YACA,SAAS,WAAT,GAAS,oBAACP,oBAAkBA;gBAAC,cAAcC;;YAC3C,UAAUa,CAAAA;gBACNN,SAAS;oBACL,GAAGD,KAAK;oBACR,OAAOO,KAAK,KAAK,IAAI;oBACrB,WAAYA,KAAK,SAAS,IAAyC;oBACnE,OAAOA,KAAK,KAAK,IAAI,EAAE;gBAC3B;YACJ;QACJ;IACJ;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;OACXP,MAAM,KAAK,GAAG,WAAH,GACR,oBAACQ,OAAKA;QAAC,MAAMR,MAAM,SAAS;OAAGA,MAAM,KAAK,kBAE1C,oBAACS,MAAIA;QAAC,MAAM;QAAM,WAAW;OAA8B,0CAKnE,oBAAC;QAAI,WAAW;qBACZ,oBAACC,YAAUA;QACP,oBAAM,oBAACC,yBAAQA;QACf,SAASL;QACT,SAAS;QACT,MAAM;sBAEV,oBAACI,YAAUA;QACP,oBAAM,oBAACE,2BAAUA;QACjB,SAASV;QACT,SAAS;QACT,MAAM;;AAK1B;AAEA,MAAMW;IAOF,cAAc;QACV,OAAO;YAAE,MAAM;YAAkB,OAAO;YAAI,WAAW;QAAgB;IAC3E;IAEA,OAAO,EAAEb,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAgD,EAAE;QAChF,OAAO,WAAP,GACI,oBAACH,iBAAeA;YACZ,OAAOC;YACP,UAAUC;YACV,UAAUC;;IAGtB;;aAlBA,IAAI,GAAG;aACP,KAAK,GAAG;aACR,WAAW,GAAG;aACd,IAAI,GAAG,WAAP,GAAQ,oBAACY,gBAASA;aAClB,eAAe,GAAG;;AAetB;AAEO,MAAMC,uBAAuBC,mBAAmB,oBAAoB,CAAC;IACxE,gBAAgBH;IAChB,cAAc,EAAE;AACpB"}

package/presentation/fieldTypes/types/layout/SeparatorLayoutFieldType.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { type ICmsLayoutFieldType } from "../../abstractions.js";
+declare class SeparatorLayoutFieldTypeImpl implements ICmsLayoutFieldType {
+    type: string;
+    label: string;
+    description: string;
+    icon: React.ReactElement;
+    canEditSettings: boolean;
+    createField(): {
+        type: "separator";
+        label: string;
+        description: string;
+    };
+    render({ field, onUpdate, onDelete }: Parameters<ICmsLayoutFieldType["render"]>[0]): React.JSX.Element;
+}
+export declare const SeparatorLayoutFieldType: typeof SeparatorLayoutFieldTypeImpl & {
+    __abstraction: import("@webiny/di").Abstraction<ICmsLayoutFieldType>;
+};
+export {};

package/presentation/fieldTypes/types/layout/SeparatorLayoutFieldType.js

@@ -0,0 +1,140 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/line_style.svg";
+import { ReactComponent as edit_svg_ReactComponent } from "@webiny/icons/edit.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.svg";
+import { Grid, IconButton, Input, ScrollArea, Separator, Tabs, Text } from "@webiny/admin-ui";
+import { useDialogs } from "@webiny/app-admin";
+import { Bind } from "@webiny/form";
+import { PermissionsEditor } from "../../../../admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.js";
+import { RulesEditor } from "../../../../admin/components/FieldEditor/EditFieldDialog/RulesEditor/RulesEditor.js";
+import { useModelEditor } from "../../../../admin/components/ContentModelEditor/useModelEditor.js";
+import { CmsLayoutFieldType } from "../../abstractions.js";
+const SeparatorSettings = ()=>/*#__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"
+    }))));
+const SeparatorDialogContent = ({ 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: "separator",
+                trigger: "Separator",
+                value: "separator",
+                content: /*#__PURE__*/ react.createElement(SeparatorSettings, 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 SeparatorLayoutCell = ({ field, onUpdate, onDelete })=>{
+    const { fieldOptions } = useModelEditor();
+    const dialogs = useDialogs();
+    const openSettings = ()=>{
+        dialogs.showDialog({
+            title: "Separator Settings",
+            description: "Configure the separator and access permissions",
+            acceptLabel: "Save",
+            cancelLabel: "Cancel",
+            formData: {
+                label: field.label,
+                description: field.description ?? "",
+                rules: field.rules ?? []
+            },
+            content: /*#__PURE__*/ react.createElement(SeparatorDialogContent, {
+                fieldOptions: fieldOptions
+            }),
+            onAccept: (data)=>{
+                onUpdate({
+                    ...field,
+                    label: data.label ?? "",
+                    description: data.description ?? "",
+                    rules: data.rules ?? []
+                });
+            }
+        });
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1"
+    }, /*#__PURE__*/ react.createElement(Separator, {
+        variant: "accent",
+        labelPosition: "start"
+    }, field.label), field.description && /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "sm",
+        className: "text-neutral-strong mt-sm"
+    }, field.description)), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-xs"
+    }, /*#__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"
+    })));
+};
+class SeparatorLayoutFieldTypeImpl {
+    createField() {
+        return {
+            type: "separator",
+            label: "Section",
+            description: "Your description goes here"
+        };
+    }
+    render({ field, onUpdate, onDelete }) {
+        return /*#__PURE__*/ react.createElement(SeparatorLayoutCell, {
+            field: field,
+            onUpdate: onUpdate,
+            onDelete: onDelete
+        });
+    }
+    constructor(){
+        this.type = "separator";
+        this.label = "Separator";
+        this.description = "Show a visual separator between fields.";
+        this.icon = /*#__PURE__*/ react.createElement(ReactComponent, null);
+        this.canEditSettings = true;
+    }
+}
+const SeparatorLayoutFieldType = CmsLayoutFieldType.createImplementation({
+    implementation: SeparatorLayoutFieldTypeImpl,
+    dependencies: []
+});
+export { SeparatorLayoutFieldType };
+
+//# sourceMappingURL=SeparatorLayoutFieldType.js.map

package/presentation/fieldTypes/types/layout/SeparatorLayoutFieldType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldTypes/types/layout/SeparatorLayoutFieldType.js","sources":["../../../../../src/presentation/fieldTypes/types/layout/SeparatorLayoutFieldType.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as SeparatorIcon } from \"@webiny/icons/line_style.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { Grid, IconButton, Input, ScrollArea, Separator, Tabs, Text } from \"@webiny/admin-ui\";\nimport { useDialogs } from \"@webiny/app-admin\";\nimport { Bind } from \"@webiny/form\";\nimport type { CmsLayoutField, CmsSeparatorLayoutField } from \"~/types.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 \"~/admin/components/ContentModelEditor/fieldOptions.js\";\nimport { CmsLayoutFieldType, type ICmsLayoutFieldType } from \"../../abstractions.js\";\n\nconst SeparatorSettings = () => {\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>\n    );\n};\n\nconst SeparatorDialogContent = ({ 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={\"separator\"}\n                        trigger={\"Separator\"}\n                        value={\"separator\"}\n                        content={<SeparatorSettings />}\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\ninterface SeparatorLayoutCellProps {\n    field: CmsSeparatorLayoutField;\n    onUpdate: (d: CmsLayoutField) => void;\n    onDelete: () => void;\n}\n\nconst SeparatorLayoutCell = ({ field, onUpdate, onDelete }: SeparatorLayoutCellProps) => {\n    const { fieldOptions } = useModelEditor();\n    const dialogs = useDialogs();\n\n    const openSettings = () => {\n        dialogs.showDialog({\n            title: \"Separator Settings\",\n            description: \"Configure the separator and access permissions\",\n            acceptLabel: \"Save\",\n            cancelLabel: \"Cancel\",\n            formData: {\n                label: field.label,\n                description: field.description ?? \"\",\n                rules: field.rules ?? []\n            },\n            content: <SeparatorDialogContent fieldOptions={fieldOptions} />,\n            onAccept: data => {\n                onUpdate({\n                    ...field,\n                    label: data.label ?? \"\",\n                    description: data.description ?? \"\",\n                    rules: data.rules ?? []\n                });\n            }\n        });\n    };\n\n    return (\n        <div className={\"flex items-center gap-sm\"}>\n            <div className={\"flex-1\"}>\n                <Separator variant={\"accent\"} labelPosition={\"start\"}>\n                    {field.label}\n                </Separator>\n                {field.description && (\n                    <Text as={\"div\"} size={\"sm\"} className={\"text-neutral-strong mt-sm\"}>\n                        {field.description}\n                    </Text>\n                )}\n            </div>\n            <div className={\"flex items-center gap-xs\"}>\n                <IconButton\n                    icon={<EditIcon />}\n                    onClick={openSettings}\n                    variant={\"ghost\"}\n                    size={\"sm\"}\n                />\n                <IconButton\n                    icon={<DeleteIcon />}\n                    onClick={onDelete}\n                    variant={\"ghost\"}\n                    size={\"sm\"}\n                />\n            </div>\n        </div>\n    );\n};\n\nclass SeparatorLayoutFieldTypeImpl implements ICmsLayoutFieldType {\n    type = \"separator\";\n    label = \"Separator\";\n    description = \"Show a visual separator between fields.\";\n    icon = (<SeparatorIcon />) as React.ReactElement;\n    canEditSettings = true;\n\n    createField() {\n        return {\n            type: \"separator\" as const,\n            label: \"Section\",\n            description: \"Your description goes here\"\n        };\n    }\n\n    render({ field, onUpdate, onDelete }: Parameters<ICmsLayoutFieldType[\"render\"]>[0]) {\n        return (\n            <SeparatorLayoutCell\n                field={field as CmsSeparatorLayoutField}\n                onUpdate={onUpdate}\n                onDelete={onDelete}\n            />\n        );\n    }\n}\n\nexport const SeparatorLayoutFieldType = CmsLayoutFieldType.createImplementation({\n    implementation: SeparatorLayoutFieldTypeImpl,\n    dependencies: []\n});\n"],"names":["SeparatorSettings","Grid","Bind","Input","SeparatorDialogContent","fieldOptions","ScrollArea","Tabs","PermissionsEditor","RulesEditor","SeparatorLayoutCell","field","onUpdate","onDelete","useModelEditor","dialogs","useDialogs","openSettings","data","Separator","Text","IconButton","EditIcon","DeleteIcon","SeparatorLayoutFieldTypeImpl","SeparatorIcon","SeparatorLayoutFieldType","CmsLayoutFieldType"],"mappings":";;;;;;;;;;;AAcA,MAAMA,oBAAoB,IACf,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;;AAOlC,MAAMC,yBAAyB,CAAC,EAAEC,YAAY,EAAmC,GACtE,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,oBAACP,mBAAiBA;;0BAE/B,oBAACO,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;;AAYjB,MAAMK,sBAAsB,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAA4B;IAChF,MAAM,EAAER,YAAY,EAAE,GAAGS;IACzB,MAAMC,UAAUC;IAEhB,MAAMC,eAAe;QACjBF,QAAQ,UAAU,CAAC;YACf,OAAO;YACP,aAAa;YACb,aAAa;YACb,aAAa;YACb,UAAU;gBACN,OAAOJ,MAAM,KAAK;gBAClB,aAAaA,MAAM,WAAW,IAAI;gBAClC,OAAOA,MAAM,KAAK,IAAI,EAAE;YAC5B;YACA,SAAS,WAAT,GAAS,oBAACP,wBAAsBA;gBAAC,cAAcC;;YAC/C,UAAUa,CAAAA;gBACNN,SAAS;oBACL,GAAGD,KAAK;oBACR,OAAOO,KAAK,KAAK,IAAI;oBACrB,aAAaA,KAAK,WAAW,IAAI;oBACjC,OAAOA,KAAK,KAAK,IAAI,EAAE;gBAC3B;YACJ;QACJ;IACJ;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACC,WAASA;QAAC,SAAS;QAAU,eAAe;OACxCR,MAAM,KAAK,GAEfA,MAAM,WAAW,IAAI,WAAJ,GACd,oBAACS,MAAIA;QAAC,IAAI;QAAO,MAAM;QAAM,WAAW;OACnCT,MAAM,WAAW,kBAI9B,oBAAC;QAAI,WAAW;qBACZ,oBAACU,YAAUA;QACP,oBAAM,oBAACC,yBAAQA;QACf,SAASL;QACT,SAAS;QACT,MAAM;sBAEV,oBAACI,YAAUA;QACP,oBAAM,oBAACE,2BAAUA;QACjB,SAASV;QACT,SAAS;QACT,MAAM;;AAK1B;AAEA,MAAMW;IAOF,cAAc;QACV,OAAO;YACH,MAAM;YACN,OAAO;YACP,aAAa;QACjB;IACJ;IAEA,OAAO,EAAEb,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAgD,EAAE;QAChF,OAAO,WAAP,GACI,oBAACH,qBAAmBA;YAChB,OAAOC;YACP,UAAUC;YACV,UAAUC;;IAGtB;;aAtBA,IAAI,GAAG;aACP,KAAK,GAAG;aACR,WAAW,GAAG;aACd,IAAI,GAAG,WAAP,GAAQ,oBAACY,gBAAaA;aACtB,eAAe,GAAG;;AAmBtB;AAEO,MAAMC,2BAA2BC,mBAAmB,oBAAoB,CAAC;IAC5E,gBAAgBH;IAChB,cAAc,EAAE;AACpB"}

package/presentation/fieldTypes/types/layout/TabsLayoutEditor.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { CmsTabLayoutField, CmsLayoutField } from "../../../../types.js";
+interface TabsLayoutEditorProps {
+    field: CmsTabLayoutField;
+    onUpdate: (d: CmsLayoutField) => void;
+    onDelete: () => void;
+}
+export declare const TabsLayoutEditor: ({ field, onUpdate, onDelete }: TabsLayoutEditorProps) => React.JSX.Element;
+export {};

package/presentation/fieldTypes/types/layout/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 "../../../../admin/components/FieldEditor/index.js";
+import { IconPicker } from "../../../../admin/components/IconPicker.js";
+import { useModelFieldEditor } from "../../../../admin/hooks/index.js";
+import { PermissionsEditor } from "../../../../admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.js";
+import { RulesEditor } from "../../../../admin/components/FieldEditor/EditFieldDialog/RulesEditor/RulesEditor.js";
+import { useModelEditor } from "../../../../admin/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