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

package/presentation/fieldTypes/types/TextFieldSettingsModifier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldTypes/types/TextFieldSettingsModifier.js","sources":["../../../../src/presentation/fieldTypes/types/TextFieldSettingsModifier.ts"],"sourcesContent":["import { CmsFieldEditorGroupModifier } from \"../../fieldEditor/abstractions.js\";\nimport type {\n    ICmsFieldEditorFormBuilder,\n    ICmsFieldEditorContext\n} from \"../../fieldEditor/abstractions.js\";\nimport type { CmsModelField } from \"~/types.js\";\n\nclass TextFieldSettingsModifierImpl implements CmsFieldEditorGroupModifier.Interface {\n    group = \"general\";\n\n    shouldApply(context: ICmsFieldEditorContext) {\n        return context.fieldType.type === \"text\";\n    }\n\n    modifyForm(form: ICmsFieldEditorFormBuilder) {\n        form.fields(fields => ({\n            placeholder: fields\n                .text()\n                .label(\"Placeholder text\")\n                .description(\"This text will be shown in an empty input component (optional)\")\n        }));\n        form.layout(layout => [layout.row(\"placeholder\")]);\n    }\n\n    mapToForm(field: CmsModelField) {\n        return { placeholder: field.placeholder ?? \"\" };\n    }\n\n    mapFromForm(formData: Record<string, any>, field: CmsModelField) {\n        field.placeholder = formData.placeholder;\n    }\n}\n\nexport const TextFieldSettingsModifier = CmsFieldEditorGroupModifier.createImplementation({\n    implementation: TextFieldSettingsModifierImpl,\n    dependencies: []\n});\n"],"names":["TextFieldSettingsModifierImpl","context","form","fields","layout","field","formData","TextFieldSettingsModifier","CmsFieldEditorGroupModifier"],"mappings":";AAOA,MAAMA;IAGF,YAAYC,OAA+B,EAAE;QACzC,OAAOA,AAA2B,WAA3BA,QAAQ,SAAS,CAAC,IAAI;IACjC;IAEA,WAAWC,IAAgC,EAAE;QACzCA,KAAK,MAAM,CAACC,CAAAA,SAAW;gBACnB,aAAaA,OACR,IAAI,GACJ,KAAK,CAAC,oBACN,WAAW,CAAC;YACrB;QACAD,KAAK,MAAM,CAACE,CAAAA,SAAU;gBAACA,OAAO,GAAG,CAAC;aAAe;IACrD;IAEA,UAAUC,KAAoB,EAAE;QAC5B,OAAO;YAAE,aAAaA,MAAM,WAAW,IAAI;QAAG;IAClD;IAEA,YAAYC,QAA6B,EAAED,KAAoB,EAAE;QAC7DA,MAAM,WAAW,GAAGC,SAAS,WAAW;IAC5C;;aAtBA,KAAK,GAAG;;AAuBZ;AAEO,MAAMC,4BAA4BC,4BAA4B,oBAAoB,CAAC;IACtF,gBAAgBR;IAChB,cAAc,EAAE;AACpB"}

package/presentation/fieldTypes/types/TextFieldType.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { CmsFieldType } from "../abstractions.js";
+declare class TextFieldTypeImpl implements CmsFieldType.Interface {
+    type: string;
+    label: string;
+    description: string;
+    icon: React.JSX.Element;
+    allowList: boolean;
+    listLabel: string;
+    allowPredefinedValues: boolean;
+    validators: string[];
+    createField(): {
+        type: string;
+        validation: never[];
+        renderer: {
+            name: string;
+        };
+    };
+}
+export declare const TextFieldType: typeof TextFieldTypeImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("../abstractions.js").ICmsFieldType>;
+};
+export {};

package/presentation/fieldTypes/types/TextFieldType.js

@@ -0,0 +1,37 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/text_fields.svg";
+import { CmsFieldType } from "../abstractions.js";
+class TextFieldTypeImpl {
+    createField() {
+        return {
+            type: this.type,
+            validation: [],
+            renderer: {
+                name: ""
+            }
+        };
+    }
+    constructor(){
+        this.type = "text";
+        this.label = "Text";
+        this.description = "Titles, names, single line values.";
+        this.icon = /*#__PURE__*/ react.createElement(ReactComponent, null);
+        this.allowList = true;
+        this.listLabel = "Use as a list of texts";
+        this.allowPredefinedValues = true;
+        this.validators = [
+            "required",
+            "minLength",
+            "maxLength",
+            "pattern",
+            "unique"
+        ];
+    }
+}
+const TextFieldType = CmsFieldType.createImplementation({
+    implementation: TextFieldTypeImpl,
+    dependencies: []
+});
+export { TextFieldType };
+
+//# sourceMappingURL=TextFieldType.js.map

package/presentation/fieldTypes/types/TextFieldType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldTypes/types/TextFieldType.js","sources":["../../../../src/presentation/fieldTypes/types/TextFieldType.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as TextIcon } from \"@webiny/icons/text_fields.svg\";\nimport { CmsFieldType } from \"../abstractions.js\";\n\nclass TextFieldTypeImpl implements CmsFieldType.Interface {\n    type = \"text\";\n    label = \"Text\";\n    description = \"Titles, names, single line values.\";\n    icon = <TextIcon />;\n    allowList = true;\n    listLabel = \"Use as a list of texts\";\n    allowPredefinedValues = true;\n    validators = [\"required\", \"minLength\", \"maxLength\", \"pattern\", \"unique\"];\n\n    createField() {\n        return {\n            type: this.type,\n            validation: [],\n            renderer: { name: \"\" }\n        };\n    }\n}\n\nexport const TextFieldType = CmsFieldType.createImplementation({\n    implementation: TextFieldTypeImpl,\n    dependencies: []\n});\n"],"names":["TextFieldTypeImpl","TextIcon","TextFieldType","CmsFieldType"],"mappings":";;;AAIA,MAAMA;IAUF,cAAc;QACV,OAAO;YACH,MAAM,IAAI,CAAC,IAAI;YACf,YAAY,EAAE;YACd,UAAU;gBAAE,MAAM;YAAG;QACzB;IACJ;;aAfA,IAAI,GAAG;aACP,KAAK,GAAG;aACR,WAAW,GAAG;aACd,IAAI,GAAG,WAAP,GAAO,oBAACC,gBAAQA;aAChB,SAAS,GAAG;aACZ,SAAS,GAAG;aACZ,qBAAqB,GAAG;aACxB,UAAU,GAAG;YAAC;YAAY;YAAa;YAAa;YAAW;SAAS;;AAS5E;AAEO,MAAMC,gBAAgBC,aAAa,oBAAoB,CAAC;IAC3D,gBAAgBH;IAChB,cAAc,EAAE;AACpB"}

package/presentation/fieldTypes/types/dynamicZone/AddTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldTypes/types/dynamicZone/AddTemplate.js","sources":["../../../../../src/presentation/fieldTypes/types/dynamicZone/AddTemplate.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { CmsDynamicZoneTemplate } from \"~/types.js\";\nimport { TemplateDialog } from \"./TemplateDialog.js\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as AddCircleIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport { Button, Text, IconButton, Link, Tooltip } from \"@webiny/admin-ui\";\n\ninterface AddTemplateProps {\n    onTemplate: UseAddTemplateParams[\"onTemplate\"];\n}\n\ninterface UseAddTemplateParams {\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nfunction useAddTemplate(params: UseAddTemplateParams) {\n    const [showTemplateDialog, setShowTemplateDialog] = useState(false);\n\n    const addTemplate = () => {\n        setShowTemplateDialog(true);\n    };\n\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        params.onTemplate(template);\n    };\n\n    const onDialogClose = () => {\n        setShowTemplateDialog(false);\n    };\n\n    return {\n        addTemplate,\n        onTemplate,\n        onDialogClose,\n        showTemplateDialog\n    };\n}\n\nexport const AddTemplateButton = (props: AddTemplateProps) => {\n    const { addTemplate, onTemplate, showTemplateDialog, onDialogClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <div\n            className={\n                \"flex flex-col px-xl pt-xl pb-lg gap-sm border-sm border-neutral-muted rounded\"\n            }\n        >\n            <div className={\"w-full text-center\"}>\n                {showTemplateDialog ? (\n                    <TemplateDialog onTemplate={onTemplate} onClose={onDialogClose} />\n                ) : null}\n                <Button\n                    size={\"sm\"}\n                    variant={\"secondary\"}\n                    onClick={addTemplate}\n                    text={\"Add template\"}\n                    icon={<AddIcon />}\n                />\n            </div>\n            <div className={\"flex items-center justify-center gap-xs w-full mx-auto text-center\"}>\n                <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                    <Link\n                        to={\"http://webiny.link/admin/how-to-use/dynamic-zones\"}\n                        target={\"_blank\"}\n                    >\n                        Learn how\n                    </Link>{\" \"}\n                    templates and dynamic zones work.\n                </Text>\n            </div>\n        </div>\n    );\n};\n\nexport const AddTemplateIcon = (props: AddTemplateProps) => {\n    const { addTemplate, onTemplate, showTemplateDialog, onDialogClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <div className={\"w-full text-center mt-md\"}>\n            {showTemplateDialog ? (\n                <TemplateDialog onTemplate={onTemplate} onClose={onDialogClose} />\n            ) : null}\n            <Tooltip\n                content={\"Add template\"}\n                trigger={\n                    <IconButton\n                        onClick={addTemplate}\n                        icon={<AddCircleIcon />}\n                        size={\"lg\"}\n                        variant={\"ghost\"}\n                    />\n                }\n            />\n        </div>\n    );\n};\n"],"names":["useAddTemplate","params","showTemplateDialog","setShowTemplateDialog","useState","addTemplate","onTemplate","template","onDialogClose","AddTemplateButton","props","TemplateDialog","Button","AddIcon","Text","Link","AddTemplateIcon","Tooltip","IconButton","AddCircleIcon"],"mappings":";;;;;AAeA,SAASA,eAAeC,MAA4B;IAChD,MAAM,CAACC,oBAAoBC,sBAAsB,GAAGC,SAAS;IAE7D,MAAMC,cAAc;QAChBF,sBAAsB;IAC1B;IAEA,MAAMG,aAAa,CAACC;QAChBN,OAAO,UAAU,CAACM;IACtB;IAEA,MAAMC,gBAAgB;QAClBL,sBAAsB;IAC1B;IAEA,OAAO;QACHE;QACAC;QACAE;QACAN;IACJ;AACJ;AAEO,MAAMO,oBAAoB,CAACC;IAC9B,MAAM,EAAEL,WAAW,EAAEC,UAAU,EAAEJ,kBAAkB,EAAEM,aAAa,EAAE,GAAGR,eAAe;QAClF,YAAYU,MAAM,UAAU;IAChC;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,WACI;qBAGJ,oBAAC;QAAI,WAAW;OACXR,qBAAqB,WAArBA,GACG,oBAACS,gBAAcA;QAAC,YAAYL;QAAY,SAASE;SACjD,oBACJ,oBAACI,QAAMA;QACH,MAAM;QACN,SAAS;QACT,SAASP;QACT,MAAM;QACN,oBAAM,oBAACQ,gBAAOA;uBAGtB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,MAAIA;QAAC,MAAM;QAAM,WAAW;qBACzB,oBAACC,MAAIA;QACD,IAAI;QACJ,QAAQ;OACX,cAEO,KAAI;AAMhC;AAEO,MAAMC,kBAAkB,CAACN;IAC5B,MAAM,EAAEL,WAAW,EAAEC,UAAU,EAAEJ,kBAAkB,EAAEM,aAAa,EAAE,GAAGR,eAAe;QAClF,YAAYU,MAAM,UAAU;IAChC;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXR,qBAAqB,WAArBA,GACG,oBAACS,gBAAcA;QAAC,YAAYL;QAAY,SAASE;SACjD,oBACJ,oBAACS,SAAOA;QACJ,SAAS;QACT,uBACI,oBAACC,YAAUA;YACP,SAASb;YACT,oBAAM,oBAACc,uCAAaA;YACpB,MAAM;YACN,SAAS;;;AAMjC"}

package/presentation/fieldTypes/types/dynamicZone/DynamicZone.js

@@ -0,0 +1,52 @@
+import react, { useEffect, useRef } from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { AddTemplateButton, AddTemplateIcon } from "./AddTemplate.js";
+import { DynamicZoneTemplate } from "./DynamicZoneTemplate.js";
+import { useModelField, useModelFieldEditor } from "../../../../admin/hooks/index.js";
+function updateOrCreateTemplate(templates, template) {
+    const templateIndex = templates.findIndex((tpl)=>tpl.id === template.id);
+    if (templateIndex > -1) return [
+        ...templates.slice(0, templateIndex),
+        template,
+        ...templates.slice(templateIndex + 1)
+    ];
+    return [
+        ...templates,
+        template
+    ];
+}
+const DynamicZone = ()=>{
+    const { field } = useModelField();
+    const { updateField } = useModelFieldEditor();
+    const newTemplateId = useRef(void 0);
+    const templates = field.settings?.templates || [];
+    const onTemplate = (template)=>{
+        const templates = field.settings?.templates || [];
+        newTemplateId.current = template.id;
+        updateField({
+            ...field,
+            settings: {
+                ...field.settings || {},
+                templates: updateOrCreateTemplate(templates, template)
+            }
+        });
+    };
+    useEffect(()=>{
+        newTemplateId.current = void 0;
+    }, []);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, templates.length ? /*#__PURE__*/ react.createElement(Accordion, null, templates.map((template, index)=>/*#__PURE__*/ react.createElement(DynamicZoneTemplate, {
+            key: template.id,
+            open: template.id === newTemplateId.current,
+            index: index,
+            field: field,
+            template: template,
+            onChange: updateField
+        }))) : null, templates.length ? /*#__PURE__*/ react.createElement(AddTemplateIcon, {
+        onTemplate: onTemplate
+    }) : /*#__PURE__*/ react.createElement(AddTemplateButton, {
+        onTemplate: onTemplate
+    }));
+};
+export { DynamicZone };
+
+//# sourceMappingURL=DynamicZone.js.map

package/presentation/fieldTypes/types/dynamicZone/DynamicZone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldTypes/types/dynamicZone/DynamicZone.js","sources":["../../../../../src/presentation/fieldTypes/types/dynamicZone/DynamicZone.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport type { CmsDynamicZoneTemplate } from \"~/types.js\";\nimport { AddTemplateIcon, AddTemplateButton } from \"./AddTemplate.js\";\nimport { DynamicZoneTemplate } from \"./DynamicZoneTemplate.js\";\nimport { useModelField, useModelFieldEditor } from \"~/admin/hooks/index.js\";\n\nfunction updateOrCreateTemplate(\n    templates: CmsDynamicZoneTemplate[],\n    template: CmsDynamicZoneTemplate\n) {\n    const templateIndex = templates.findIndex(tpl => tpl.id === template.id);\n\n    if (templateIndex > -1) {\n        return [\n            ...templates.slice(0, templateIndex),\n            template,\n            ...templates.slice(templateIndex + 1)\n        ];\n    }\n\n    return [...templates, template];\n}\n\nexport const DynamicZone = () => {\n    const { field } = useModelField();\n    const { updateField } = useModelFieldEditor();\n    const newTemplateId = useRef<string | undefined>(undefined);\n\n    const templates: CmsDynamicZoneTemplate[] = field.settings?.templates || [];\n\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        const templates = field.settings?.templates || [];\n\n        newTemplateId.current = template.id;\n\n        updateField({\n            ...field,\n            settings: {\n                ...(field.settings || {}),\n                templates: updateOrCreateTemplate(templates, template)\n            }\n        });\n    };\n\n    useEffect(() => {\n        // We only want to open the accordion item on first mount of a new template.\n        newTemplateId.current = undefined;\n    }, []);\n\n    return (\n        <>\n            {templates.length ? (\n                <Accordion>\n                    {templates.map((template, index) => (\n                        <DynamicZoneTemplate\n                            key={template.id}\n                            open={template.id === newTemplateId.current}\n                            index={index}\n                            field={field}\n                            template={template}\n                            onChange={updateField}\n                        />\n                    ))}\n                </Accordion>\n            ) : null}\n            {templates.length ? (\n                <AddTemplateIcon onTemplate={onTemplate} />\n            ) : (\n                <AddTemplateButton onTemplate={onTemplate} />\n            )}\n        </>\n    );\n};\n"],"names":["updateOrCreateTemplate","templates","template","templateIndex","tpl","DynamicZone","field","useModelField","updateField","useModelFieldEditor","newTemplateId","useRef","undefined","onTemplate","useEffect","Accordion","index","DynamicZoneTemplate","AddTemplateIcon","AddTemplateButton"],"mappings":";;;;;AAOA,SAASA,uBACLC,SAAmC,EACnCC,QAAgC;IAEhC,MAAMC,gBAAgBF,UAAU,SAAS,CAACG,CAAAA,MAAOA,IAAI,EAAE,KAAKF,SAAS,EAAE;IAEvE,IAAIC,gBAAgB,IAChB,OAAO;WACAF,UAAU,KAAK,CAAC,GAAGE;QACtBD;WACGD,UAAU,KAAK,CAACE,gBAAgB;KACtC;IAGL,OAAO;WAAIF;QAAWC;KAAS;AACnC;AAEO,MAAMG,cAAc;IACvB,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,EAAEC,WAAW,EAAE,GAAGC;IACxB,MAAMC,gBAAgBC,OAA2BC;IAEjD,MAAMX,YAAsCK,MAAM,QAAQ,EAAE,aAAa,EAAE;IAE3E,MAAMO,aAAa,CAACX;QAChB,MAAMD,YAAYK,MAAM,QAAQ,EAAE,aAAa,EAAE;QAEjDI,cAAc,OAAO,GAAGR,SAAS,EAAE;QAEnCM,YAAY;YACR,GAAGF,KAAK;YACR,UAAU;gBACN,GAAIA,MAAM,QAAQ,IAAI,CAAC,CAAC;gBACxB,WAAWN,uBAAuBC,WAAWC;YACjD;QACJ;IACJ;IAEAY,UAAU;QAENJ,cAAc,OAAO,GAAGE;IAC5B,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,0CACKX,UAAU,MAAM,GAAG,WAAH,GACb,oBAACc,WAASA,MACLd,UAAU,GAAG,CAAC,CAACC,UAAUc,QAAAA,WAAAA,GACtB,oBAACC,qBAAmBA;YAChB,KAAKf,SAAS,EAAE;YAChB,MAAMA,SAAS,EAAE,KAAKQ,cAAc,OAAO;YAC3C,OAAOM;YACP,OAAOV;YACP,UAAUJ;YACV,UAAUM;eAItB,MACHP,UAAU,MAAM,GAAG,WAAH,GACb,oBAACiB,iBAAeA;QAAC,YAAYL;uBAE7B,oBAACM,mBAAiBA;QAAC,YAAYN;;AAI/C"}

package/presentation/fieldTypes/types/dynamicZone/DynamicZoneTemplate.js

@@ -0,0 +1,99 @@
+import react, { useCallback, useState } from "react";
+import { set } from "dot-prop-immutable";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+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 { Accordion } from "@webiny/admin-ui";
+import { useConfirmationDialog, useDialogs } from "@webiny/app-admin";
+import { pullValueAtIndex, pushValueAtIndex, removeValueAtIndex } from "../../../../admin/plugins/arrayUtils.js";
+import { FieldEditor } from "../../../../admin/components/FieldEditor/index.js";
+import { normalizeIcon } from "../../../../utils/normalizeIcon.js";
+import { EDIT_DZ_TEMPLATE_DIALOG } from "./EditTemplateDialog.js";
+const TEMPLATES_PATH = "settings.templates";
+const DynamicZoneTemplate = ({ index, field, template, onChange, open })=>{
+    const { showConfirmation } = useConfirmationDialog({
+        title: "Delete content template",
+        message: "Are you sure you want to delete this content template?",
+        acceptLabel: "Yes, I'm sure!"
+    });
+    const { openNamedDialog } = useDialogs();
+    const [isOpen, setIsOpen] = useState(open);
+    const templates = field.settings?.templates || [];
+    const isFirst = 0 === index;
+    const isLast = index === templates.length - 1;
+    const callbackDeps = [
+        onChange,
+        field,
+        index,
+        template.id
+    ];
+    const updateTemplate = useCallback((params)=>{
+        onChange(set(field, `${TEMPLATES_PATH}.${index}`, (tpl)=>({
+                ...tpl,
+                ...params
+            })));
+    }, callbackDeps);
+    const editTemplate = useCallback(()=>{
+        openNamedDialog(EDIT_DZ_TEMPLATE_DIALOG, {
+            template,
+            onTemplate: updateTemplate
+        });
+    }, [
+        template,
+        updateTemplate
+    ]);
+    const updateFieldsAndLayout = useCallback((params)=>{
+        updateTemplate({
+            ...template,
+            ...params
+        });
+    }, [
+        updateTemplate
+    ]);
+    const moveTemplateUp = useCallback(()=>{
+        onChange(set(field, TEMPLATES_PATH, pullValueAtIndex(templates, index)));
+    }, callbackDeps);
+    const moveTemplateDown = useCallback(()=>{
+        onChange(set(field, TEMPLATES_PATH, pushValueAtIndex(templates, index)));
+    }, callbackDeps);
+    const deleteTemplate = useCallback(()=>{
+        showConfirmation(()=>{
+            onChange(set(field, TEMPLATES_PATH, removeValueAtIndex(templates, index)));
+        });
+    }, callbackDeps);
+    const icon = normalizeIcon(template.icon);
+    return /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: template.name,
+        description: template.description,
+        icon: icon ? /*#__PURE__*/ react.createElement(FontAwesomeIcon, {
+            icon: icon
+        }) : void 0,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(expand_less_svg_ReactComponent, null),
+            onClick: moveTemplateUp,
+            disabled: isFirst
+        }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(expand_more_svg_ReactComponent, null),
+            onClick: moveTemplateDown,
+            disabled: isLast
+        }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            onClick: editTemplate
+        }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+            onClick: deleteTemplate
+        }))
+    }, /*#__PURE__*/ react.createElement(FieldEditor, {
+        parent: field,
+        fields: template.fields,
+        layout: template.layout,
+        onChange: updateFieldsAndLayout
+    }));
+};
+export { DynamicZoneTemplate };
+
+//# sourceMappingURL=DynamicZoneTemplate.js.map

package/presentation/fieldTypes/types/dynamicZone/DynamicZoneTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldTypes/types/dynamicZone/DynamicZoneTemplate.js","sources":["../../../../../src/presentation/fieldTypes/types/dynamicZone/DynamicZoneTemplate.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { set } from \"dot-prop-immutable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\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 { Accordion } from \"@webiny/admin-ui\";\nimport { useConfirmationDialog, useDialogs } from \"@webiny/app-admin\";\nimport {\n    pullValueAtIndex,\n    pushValueAtIndex,\n    removeValueAtIndex\n} from \"~/admin/plugins/arrayUtils.js\";\nimport type { CmsDynamicZoneTemplate, CmsEditorFieldsLayout, CmsModelField } from \"~/types.js\";\nimport { FieldEditor } from \"~/admin/components/FieldEditor/index.js\";\nimport { normalizeIcon } from \"~/utils/normalizeIcon.js\";\nimport { EDIT_DZ_TEMPLATE_DIALOG } from \"./EditTemplateDialog.js\";\n\ninterface DynamicZoneTemplateProps {\n    index: number;\n    field: CmsModelField;\n    template: CmsDynamicZoneTemplate;\n    onChange: (field: CmsModelField) => void;\n    open: boolean;\n}\n\ninterface UpdateTemplate {\n    (template: CmsDynamicZoneTemplate): void;\n}\n\ninterface UpdateFieldsAndLayout {\n    (params: { fields: CmsModelField[]; layout: CmsEditorFieldsLayout }): void;\n}\n\nconst TEMPLATES_PATH = \"settings.templates\";\n\nexport const DynamicZoneTemplate = ({\n    index,\n    field,\n    template,\n    onChange,\n    open\n}: DynamicZoneTemplateProps) => {\n    const { showConfirmation } = useConfirmationDialog({\n        title: \"Delete content template\",\n        message: \"Are you sure you want to delete this content template?\",\n        acceptLabel: \"Yes, I'm sure!\"\n    });\n\n    const { openNamedDialog } = useDialogs();\n    const [isOpen, setIsOpen] = useState(open);\n\n    const templates = field.settings?.templates || [];\n    const isFirst = index === 0;\n    const isLast = index === templates.length - 1;\n\n    const callbackDeps = [onChange, field, index, template.id];\n\n    const updateTemplate = useCallback<UpdateTemplate>(params => {\n        onChange(\n            set(field, `${TEMPLATES_PATH}.${index}`, (tpl: CmsDynamicZoneTemplate) => {\n                return { ...tpl, ...params };\n            })\n        );\n    }, callbackDeps);\n\n    const editTemplate = useCallback(() => {\n        openNamedDialog(EDIT_DZ_TEMPLATE_DIALOG, {\n            template,\n            onTemplate: updateTemplate\n        });\n    }, [template, updateTemplate]);\n\n    const updateFieldsAndLayout = useCallback<UpdateFieldsAndLayout>(\n        params => {\n            updateTemplate({ ...template, ...params });\n        },\n        [updateTemplate]\n    );\n\n    const moveTemplateUp = useCallback(() => {\n        onChange(set(field, TEMPLATES_PATH, pullValueAtIndex(templates, index)));\n    }, callbackDeps);\n\n    const moveTemplateDown = useCallback(() => {\n        onChange(set(field, TEMPLATES_PATH, pushValueAtIndex(templates, index)));\n    }, callbackDeps);\n\n    const deleteTemplate = useCallback(() => {\n        showConfirmation(() => {\n            onChange(set(field, TEMPLATES_PATH, removeValueAtIndex(templates, index)));\n        });\n    }, callbackDeps);\n\n    const icon = normalizeIcon(template.icon);\n\n    return (\n        <Accordion.Item\n            title={template.name}\n            description={template.description}\n            icon={icon ? <FontAwesomeIcon icon={icon} /> : undefined}\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            actions={\n                <>\n                    <Accordion.Item.Action\n                        icon={<ArrowUpIcon />}\n                        onClick={moveTemplateUp}\n                        disabled={isFirst}\n                    />\n                    <Accordion.Item.Action\n                        icon={<ArrowDownIcon />}\n                        onClick={moveTemplateDown}\n                        disabled={isLast}\n                    />\n                    <Accordion.Item.Action.Separator />\n                    <Accordion.Item.Action icon={<EditIcon />} onClick={editTemplate} />\n                    <Accordion.Item.Action icon={<DeleteIcon />} onClick={deleteTemplate} />\n                </>\n            }\n        >\n            <FieldEditor\n                parent={field}\n                fields={template.fields}\n                layout={template.layout}\n                onChange={updateFieldsAndLayout}\n            />\n        </Accordion.Item>\n    );\n};\n"],"names":["TEMPLATES_PATH","DynamicZoneTemplate","index","field","template","onChange","open","showConfirmation","useConfirmationDialog","openNamedDialog","useDialogs","isOpen","setIsOpen","useState","templates","isFirst","isLast","callbackDeps","updateTemplate","useCallback","params","set","tpl","editTemplate","EDIT_DZ_TEMPLATE_DIALOG","updateFieldsAndLayout","moveTemplateUp","pullValueAtIndex","moveTemplateDown","pushValueAtIndex","deleteTemplate","removeValueAtIndex","icon","normalizeIcon","Accordion","FontAwesomeIcon","undefined","ArrowUpIcon","ArrowDownIcon","EditIcon","DeleteIcon","FieldEditor"],"mappings":";;;;;;;;;;;;;AAmCA,MAAMA,iBAAiB;AAEhB,MAAMC,sBAAsB,CAAC,EAChCC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACmB;IACvB,MAAM,EAAEC,gBAAgB,EAAE,GAAGC,sBAAsB;QAC/C,OAAO;QACP,SAAS;QACT,aAAa;IACjB;IAEA,MAAM,EAAEC,eAAe,EAAE,GAAGC;IAC5B,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASP;IAErC,MAAMQ,YAAYX,MAAM,QAAQ,EAAE,aAAa,EAAE;IACjD,MAAMY,UAAUb,AAAU,MAAVA;IAChB,MAAMc,SAASd,UAAUY,UAAU,MAAM,GAAG;IAE5C,MAAMG,eAAe;QAACZ;QAAUF;QAAOD;QAAOE,SAAS,EAAE;KAAC;IAE1D,MAAMc,iBAAiBC,YAA4BC,CAAAA;QAC/Cf,SACIgB,IAAIlB,OAAO,GAAGH,eAAe,CAAC,EAAEE,OAAO,EAAE,CAACoB,MAC/B;gBAAE,GAAGA,GAAG;gBAAE,GAAGF,MAAM;YAAC;IAGvC,GAAGH;IAEH,MAAMM,eAAeJ,YAAY;QAC7BV,gBAAgBe,yBAAyB;YACrCpB;YACA,YAAYc;QAChB;IACJ,GAAG;QAACd;QAAUc;KAAe;IAE7B,MAAMO,wBAAwBN,YAC1BC,CAAAA;QACIF,eAAe;YAAE,GAAGd,QAAQ;YAAE,GAAGgB,MAAM;QAAC;IAC5C,GACA;QAACF;KAAe;IAGpB,MAAMQ,iBAAiBP,YAAY;QAC/Bd,SAASgB,IAAIlB,OAAOH,gBAAgB2B,iBAAiBb,WAAWZ;IACpE,GAAGe;IAEH,MAAMW,mBAAmBT,YAAY;QACjCd,SAASgB,IAAIlB,OAAOH,gBAAgB6B,iBAAiBf,WAAWZ;IACpE,GAAGe;IAEH,MAAMa,iBAAiBX,YAAY;QAC/BZ,iBAAiB;YACbF,SAASgB,IAAIlB,OAAOH,gBAAgB+B,mBAAmBjB,WAAWZ;QACtE;IACJ,GAAGe;IAEH,MAAMe,OAAOC,cAAc7B,SAAS,IAAI;IAExC,OAAO,WAAP,GACI,oBAAC8B,UAAU,IAAI;QACX,OAAO9B,SAAS,IAAI;QACpB,aAAaA,SAAS,WAAW;QACjC,MAAM4B,OAAO,WAAPA,GAAO,oBAACG,iBAAeA;YAAC,MAAMH;aAAWI;QAC/C,MAAMzB;QACN,cAAcC;QACd,uBACI,wDACI,oBAACsB,UAAU,IAAI,CAAC,MAAM;YAClB,oBAAM,oBAACG,gCAAWA;YAClB,SAASX;YACT,UAAUX;0BAEd,oBAACmB,UAAU,IAAI,CAAC,MAAM;YAClB,oBAAM,oBAACI,gCAAaA;YACpB,SAASV;YACT,UAAUZ;0BAEd,oBAACkB,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACA,UAAU,IAAI,CAAC,MAAM;YAAC,oBAAM,oBAACK,gBAAQA;YAAK,SAAShB;0BACpD,oBAACW,UAAU,IAAI,CAAC,MAAM;YAAC,oBAAM,oBAACM,2BAAUA;YAAK,SAASV;;qBAI9D,oBAACW,aAAWA;QACR,QAAQtC;QACR,QAAQC,SAAS,MAAM;QACvB,QAAQA,SAAS,MAAM;QACvB,UAAUqB;;AAI1B"}

package/presentation/fieldTypes/types/dynamicZone/EditTemplateDialog.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const EDIT_DZ_TEMPLATE_DIALOG = "edit-dz-template";
+export declare const EditTemplateDialog: () => React.JSX.Element;

package/presentation/fieldTypes/types/dynamicZone/EditTemplateDialog.js

@@ -0,0 +1,17 @@
+import react from "react";
+import { useDialogParamsContext } from "@webiny/app-admin/components/Dialogs/DialogParamsContext.js";
+import { TemplateDialog } from "./TemplateDialog.js";
+const EDIT_DZ_TEMPLATE_DIALOG = "edit-dz-template";
+const EditTemplateDialog = ()=>{
+    const { params, closeDialog } = useDialogParamsContext();
+    const template = params.template;
+    const onTemplate = params.onTemplate;
+    return /*#__PURE__*/ react.createElement(TemplateDialog, {
+        template: template,
+        onTemplate: onTemplate,
+        onClose: closeDialog
+    });
+};
+export { EDIT_DZ_TEMPLATE_DIALOG, EditTemplateDialog };
+
+//# sourceMappingURL=EditTemplateDialog.js.map

package/presentation/fieldTypes/types/dynamicZone/EditTemplateDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldTypes/types/dynamicZone/EditTemplateDialog.js","sources":["../../../../../src/presentation/fieldTypes/types/dynamicZone/EditTemplateDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport { useDialogParamsContext } from \"@webiny/app-admin/components/Dialogs/DialogParamsContext.js\";\nimport { TemplateDialog } from \"./TemplateDialog.js\";\nimport type { CmsDynamicZoneTemplate } from \"~/types.js\";\n\nexport const EDIT_DZ_TEMPLATE_DIALOG = \"edit-dz-template\";\n\nexport const EditTemplateDialog = () => {\n    const { params, closeDialog } = useDialogParamsContext();\n    const template = params.template as CmsDynamicZoneTemplate | undefined;\n    const onTemplate = params.onTemplate as (template: CmsDynamicZoneTemplate) => void;\n\n    return <TemplateDialog template={template} onTemplate={onTemplate} onClose={closeDialog} />;\n};\n"],"names":["EDIT_DZ_TEMPLATE_DIALOG","EditTemplateDialog","params","closeDialog","useDialogParamsContext","template","onTemplate","TemplateDialog"],"mappings":";;;AAKO,MAAMA,0BAA0B;AAEhC,MAAMC,qBAAqB;IAC9B,MAAM,EAAEC,MAAM,EAAEC,WAAW,EAAE,GAAGC;IAChC,MAAMC,WAAWH,OAAO,QAAQ;IAChC,MAAMI,aAAaJ,OAAO,UAAU;IAEpC,OAAO,WAAP,GAAO,oBAACK,gBAAcA;QAAC,UAAUF;QAAU,YAAYC;QAAY,SAASH;;AAChF"}

package/presentation/fieldTypes/types/dynamicZone/TemplateDialog.js

@@ -0,0 +1,121 @@
+import react, { useState } from "react";
+import { Form } from "@webiny/form";
+import { validation } from "@webiny/validation";
+import { generateAlphaNumericLowerCaseId } from "@webiny/utils";
+import { IconPicker } from "../../../../admin/components/IconPicker.js";
+import { Alert, Dialog, Grid, Input, Tags, Textarea } from "@webiny/admin-ui";
+const typeNameValidator = (value)=>{
+    const regex = new RegExp("^[A-Z]+[_0-9A-Za-z]+$");
+    if (regex.test(value)) return true;
+    throw Error("Must start with a capital letter, may contain numbers, and must not contain spaces.");
+};
+const getGraphQLTypeName = (value)=>{
+    const titleCase = value.charAt(0).toUpperCase() + value.slice(1);
+    return titleCase.replace(/[^a-zA-Z0-9]/g, "");
+};
+const TemplateDialog = (props)=>{
+    const [showWarning, setWarning] = useState(false);
+    const newTemplate = !props.template;
+    const dialogTitle = newTemplate ? "Add Template" : "Edit Template";
+    const submitLabel = newTemplate ? "Add Template" : "Update Template";
+    const onSubmit = (template)=>{
+        if (template.id) props.onTemplate(template);
+        else props.onTemplate({
+            ...template,
+            id: generateAlphaNumericLowerCaseId(),
+            fields: [],
+            layout: []
+        });
+        props.onClose();
+    };
+    const showGqlTypeNameWarning = ()=>{
+        setWarning(true);
+    };
+    const hideGqlTypeNameWarning = ()=>{
+        setWarning(false);
+    };
+    const checkGqlType = (data)=>{
+        if (newTemplate) return;
+        if (data.gqlTypeName !== props.template?.gqlTypeName) showGqlTypeNameWarning();
+        else hideGqlTypeNameWarning();
+    };
+    const nameOnBlur = (form)=>()=>{
+            if (!form.data.gqlTypeName) {
+                const name = form.data.name;
+                if (!name) return;
+                form.setValue("gqlTypeName", getGraphQLTypeName(name));
+            }
+        };
+    const onFormChange = (data, form)=>{
+        checkGqlType(data);
+    };
+    return /*#__PURE__*/ react.createElement(Form, {
+        onSubmit: onSubmit,
+        data: props.template,
+        onChange: onFormChange
+    }, ({ Bind, submit, form })=>/*#__PURE__*/ react.createElement(Dialog, {
+            open: true,
+            onClose: props.onClose,
+            title: dialogTitle,
+            actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Dialog.CancelAction, null), /*#__PURE__*/ react.createElement(Dialog.ConfirmAction, {
+                onClick: submit,
+                text: submitLabel
+            }))
+        }, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(react.Fragment, null, showWarning ? /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Alert, {
+            title: "GraphQL Schema Change",
+            type: "danger"
+        }, "You've changed the GraphQL schema type name! If your API is being queried by a 3rd party application, this will affect the GraphQL queries in those applications. Make sure your consumers are informed about this change!")) : null), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "name",
+            validators: [
+                validation.create("required")
+            ]
+        }, /*#__PURE__*/ react.createElement(Input, {
+            label: "Name",
+            onBlur: nameOnBlur(form)
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "gqlTypeName",
+            validators: [
+                validation.create("required"),
+                typeNameValidator
+            ]
+        }, /*#__PURE__*/ react.createElement(Input, {
+            autoFocus: false,
+            label: "GraphQL Type Name",
+            description: "This string will be used to generate the GraphQL schema. "
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "icon",
+            validators: [
+                validation.create("required")
+            ]
+        }, /*#__PURE__*/ react.createElement(IconPicker, {
+            label: "Icon"
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "description",
+            validators: [
+                validation.create("required")
+            ]
+        }, /*#__PURE__*/ react.createElement(Textarea, {
+            rows: 3,
+            label: "Description"
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Bind, {
+            name: "tags",
+            defaultValue: []
+        }, /*#__PURE__*/ react.createElement(Tags, {
+            label: "Tags"
+        }))))));
+};
+export { TemplateDialog };
+
+//# sourceMappingURL=TemplateDialog.js.map

package/presentation/fieldTypes/types/dynamicZone/TemplateDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldTypes/types/dynamicZone/TemplateDialog.js","sources":["../../../../../src/presentation/fieldTypes/types/dynamicZone/TemplateDialog.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { FormAPI, FormOnSubmit } from \"@webiny/form\";\nimport { Form } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport type { CmsDynamicZoneTemplate } from \"~/types.js\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport { IconPicker } from \"~/admin/components/IconPicker.js\";\nimport { Tags } from \"@webiny/admin-ui\";\nimport { Alert, Dialog, Grid, Input, Textarea } from \"@webiny/admin-ui\";\n\nconst typeNameValidator = (value: string) => {\n    const regex = new RegExp(\"^[A-Z]+[_0-9A-Za-z]+$\");\n    if (regex.test(value)) {\n        return true;\n    }\n\n    throw Error(\n        `Must start with a capital letter, may contain numbers, and must not contain spaces.`\n    );\n};\n\nconst getGraphQLTypeName = (value: string) => {\n    const titleCase = value.charAt(0).toUpperCase() + value.slice(1);\n    return titleCase.replace(/[^a-zA-Z0-9]/g, \"\");\n};\n\ninterface TemplateDialogProps {\n    onClose: () => void;\n    template?: CmsDynamicZoneTemplate;\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nexport const TemplateDialog = (props: TemplateDialogProps) => {\n    const [showWarning, setWarning] = useState(false);\n    const newTemplate = !props.template;\n    const dialogTitle = newTemplate ? \"Add Template\" : \"Edit Template\";\n    const submitLabel = newTemplate ? \"Add Template\" : \"Update Template\";\n\n    const onSubmit: FormOnSubmit<CmsDynamicZoneTemplate> = template => {\n        if (template.id) {\n            props.onTemplate(template);\n        } else {\n            props.onTemplate({\n                ...template,\n                id: generateAlphaNumericLowerCaseId(),\n                fields: [],\n                layout: []\n            });\n        }\n        props.onClose();\n    };\n\n    const showGqlTypeNameWarning = () => {\n        setWarning(true);\n    };\n\n    const hideGqlTypeNameWarning = () => {\n        setWarning(false);\n    };\n\n    const checkGqlType: FormOnSubmit<CmsDynamicZoneTemplate> = data => {\n        if (newTemplate) {\n            return;\n        }\n\n        if (data.gqlTypeName !== props.template?.gqlTypeName) {\n            showGqlTypeNameWarning();\n        } else {\n            hideGqlTypeNameWarning();\n        }\n    };\n\n    const nameOnBlur = (form: FormAPI<CmsDynamicZoneTemplate>) => () => {\n        if (!form.data.gqlTypeName) {\n            /**\n             * There is a possibility that name is undefined, so let's check for it.\n             */\n            const name = form.data.name;\n            if (!name) {\n                return;\n            }\n            form.setValue(\"gqlTypeName\", getGraphQLTypeName(name));\n        }\n    };\n\n    const onFormChange: FormOnSubmit<CmsDynamicZoneTemplate> = (data, form) => {\n        checkGqlType(data, form);\n    };\n\n    return (\n        <Form<CmsDynamicZoneTemplate>\n            onSubmit={onSubmit}\n            data={props.template}\n            onChange={onFormChange}\n        >\n            {({ Bind, submit, form }) => (\n                <Dialog\n                    open={true}\n                    onClose={props.onClose}\n                    title={dialogTitle}\n                    actions={\n                        <>\n                            <Dialog.CancelAction />\n                            <Dialog.ConfirmAction onClick={submit} text={submitLabel} />\n                        </>\n                    }\n                >\n                    <Grid>\n                        <>\n                            {showWarning ? (\n                                <Grid.Column span={12}>\n                                    <Alert title={\"GraphQL Schema Change\"} type={\"danger\"}>\n                                        You&apos;ve changed the GraphQL schema type name! If your\n                                        API is being queried by a 3rd party application, this will\n                                        affect the GraphQL queries in those applications. Make sure\n                                        your consumers are informed about this change!\n                                    </Alert>\n                                </Grid.Column>\n                            ) : null}\n                        </>\n                        <Grid.Column span={12}>\n                            <Bind name={\"name\"} validators={[validation.create(\"required\")]}>\n                                <Input label={\"Name\"} onBlur={nameOnBlur(form)} />\n                            </Bind>\n                        </Grid.Column>\n                        <Grid.Column span={12}>\n                            <Bind\n                                name={\"gqlTypeName\"}\n                                validators={[validation.create(\"required\"), typeNameValidator]}\n                            >\n                                <Input\n                                    autoFocus={false}\n                                    label={\"GraphQL Type Name\"}\n                                    description={\n                                        \"This string will be used to generate the GraphQL schema. \"\n                                    }\n                                />\n                            </Bind>\n                        </Grid.Column>\n                        <Grid.Column span={12}>\n                            <Bind name={\"icon\"} validators={[validation.create(\"required\")]}>\n                                <IconPicker label={\"Icon\"} />\n                            </Bind>\n                        </Grid.Column>\n                        <Grid.Column span={12}>\n                            <Bind name={\"description\"} validators={[validation.create(\"required\")]}>\n                                <Textarea rows={3} label={\"Description\"} />\n                            </Bind>\n                        </Grid.Column>\n                        <Grid.Column span={12}>\n                            <Bind name={\"tags\"} defaultValue={[]}>\n                                <Tags label={\"Tags\"} />\n                            </Bind>\n                        </Grid.Column>\n                    </Grid>\n                </Dialog>\n            )}\n        </Form>\n    );\n};\n"],"names":["typeNameValidator","value","regex","RegExp","Error","getGraphQLTypeName","titleCase","TemplateDialog","props","showWarning","setWarning","useState","newTemplate","dialogTitle","submitLabel","onSubmit","template","generateAlphaNumericLowerCaseId","showGqlTypeNameWarning","hideGqlTypeNameWarning","checkGqlType","data","nameOnBlur","form","name","onFormChange","Form","Bind","submit","Dialog","Grid","Alert","validation","Input","IconPicker","Textarea","Tags"],"mappings":";;;;;;AAUA,MAAMA,oBAAoB,CAACC;IACvB,MAAMC,QAAQ,IAAIC,OAAO;IACzB,IAAID,MAAM,IAAI,CAACD,QACX,OAAO;IAGX,MAAMG,MACF;AAER;AAEA,MAAMC,qBAAqB,CAACJ;IACxB,MAAMK,YAAYL,MAAM,MAAM,CAAC,GAAG,WAAW,KAAKA,MAAM,KAAK,CAAC;IAC9D,OAAOK,UAAU,OAAO,CAAC,iBAAiB;AAC9C;AAQO,MAAMC,iBAAiB,CAACC;IAC3B,MAAM,CAACC,aAAaC,WAAW,GAAGC,SAAS;IAC3C,MAAMC,cAAc,CAACJ,MAAM,QAAQ;IACnC,MAAMK,cAAcD,cAAc,iBAAiB;IACnD,MAAME,cAAcF,cAAc,iBAAiB;IAEnD,MAAMG,WAAiDC,CAAAA;QACnD,IAAIA,SAAS,EAAE,EACXR,MAAM,UAAU,CAACQ;aAEjBR,MAAM,UAAU,CAAC;YACb,GAAGQ,QAAQ;YACX,IAAIC;YACJ,QAAQ,EAAE;YACV,QAAQ,EAAE;QACd;QAEJT,MAAM,OAAO;IACjB;IAEA,MAAMU,yBAAyB;QAC3BR,WAAW;IACf;IAEA,MAAMS,yBAAyB;QAC3BT,WAAW;IACf;IAEA,MAAMU,eAAqDC,CAAAA;QACvD,IAAIT,aACA;QAGJ,IAAIS,KAAK,WAAW,KAAKb,MAAM,QAAQ,EAAE,aACrCU;aAEAC;IAER;IAEA,MAAMG,aAAa,CAACC,OAA0C;YAC1D,IAAI,CAACA,KAAK,IAAI,CAAC,WAAW,EAAE;gBAIxB,MAAMC,OAAOD,KAAK,IAAI,CAAC,IAAI;gBAC3B,IAAI,CAACC,MACD;gBAEJD,KAAK,QAAQ,CAAC,eAAelB,mBAAmBmB;YACpD;QACJ;IAEA,MAAMC,eAAqD,CAACJ,MAAME;QAC9DH,aAAaC;IACjB;IAEA,OAAO,WAAP,GACI,oBAACK,MAAIA;QACD,UAAUX;QACV,MAAMP,MAAM,QAAQ;QACpB,UAAUiB;OAET,CAAC,EAAEE,IAAI,EAAEC,MAAM,EAAEL,IAAI,EAAE,iBACpB,oBAACM,QAAMA;YACH,MAAM;YACN,SAASrB,MAAM,OAAO;YACtB,OAAOK;YACP,uBACI,wDACI,oBAACgB,OAAO,YAAY,uBACpB,oBAACA,OAAO,aAAa;gBAAC,SAASD;gBAAQ,MAAMd;;yBAIrD,oBAACgB,MAAIA,MAAAA,WAAAA,GACD,0CACKrB,cAAc,WAAdA,GACG,oBAACqB,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACC,OAAKA;YAAC,OAAO;YAAyB,MAAM;WAAU,iOAO3D,qBAER,oBAACD,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACH,MAAAA;YAAK,MAAM;YAAQ,YAAY;gBAACK,WAAW,MAAM,CAAC;aAAY;yBAC3D,oBAACC,OAAKA;YAAC,OAAO;YAAQ,QAAQX,WAAWC;4BAGjD,oBAACO,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACH,MAAAA;YACG,MAAM;YACN,YAAY;gBAACK,WAAW,MAAM,CAAC;gBAAahC;aAAkB;yBAE9D,oBAACiC,OAAKA;YACF,WAAW;YACX,OAAO;YACP,aACI;4BAKhB,oBAACH,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACH,MAAAA;YAAK,MAAM;YAAQ,YAAY;gBAACK,WAAW,MAAM,CAAC;aAAY;yBAC3D,oBAACE,YAAUA;YAAC,OAAO;4BAG3B,oBAACJ,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACH,MAAAA;YAAK,MAAM;YAAe,YAAY;gBAACK,WAAW,MAAM,CAAC;aAAY;yBAClE,oBAACG,UAAQA;YAAC,MAAM;YAAG,OAAO;4BAGlC,oBAACL,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACH,MAAAA;YAAK,MAAM;YAAQ,cAAc,EAAE;yBAChC,oBAACS,MAAIA;YAAC,OAAO;;AAQ7C"}

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

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

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

@@ -0,0 +1,158 @@
+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 { 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 "../../../../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 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"
+    })));
+};
+class AlertLayoutFieldTypeImpl {
+    createField() {
+        return {
+            type: "alert",
+            label: "",
+            alertType: "info"
+        };
+    }
+    render({ field, onUpdate, onDelete }) {
+        return /*#__PURE__*/ react.createElement(AlertLayoutCell, {
+            field: field,
+            onUpdate: onUpdate,
+            onDelete: onDelete
+        });
+    }
+    constructor(){
+        this.type = "alert";
+        this.label = "Alert";
+        this.description = "Show an alert message in the form.";
+        this.icon = /*#__PURE__*/ react.createElement(ReactComponent, null);
+        this.canEditSettings = true;
+    }
+}
+const AlertLayoutFieldType = CmsLayoutFieldType.createImplementation({
+    implementation: AlertLayoutFieldTypeImpl,
+    dependencies: []
+});
+export { AlertLayoutFieldType };
+
+//# sourceMappingURL=AlertLayoutFieldType.js.map