@webiny/app-headless-cms 6.3.0 → 6.4.0-beta.1

package/admin/plugins/fields/dynamicZone/AddTemplate.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","TemplateDialog","ReactComponent","AddIcon","AddCircleIcon","Button","Text","IconButton","Link","Tooltip","useAddTemplate","params","showTemplateDialog","setShowTemplateDialog","addTemplate","onTemplate","template","onDialogClose","AddTemplateButton","props","createElement","className","onClose","size","variant","onClick","text","icon","to","target","AddTemplateIcon","content","trigger"],"sources":["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"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fields/dynamicZone/AddTemplate.js","sources":["../../../../../src/admin/plugins/fields/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/admin/plugins/fields/dynamicZone/DynamicZone.js

@@ -1,51 +1,52 @@
-import React, { useRef, useEffect } from "react";
-import { Accordion } from "@webiny/ui/Accordion/index.js";
-import { AddTemplateIcon, AddTemplateButton } from "./AddTemplate.js";
+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 "../../../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 templateIndex = templates.findIndex((tpl)=>tpl.id === template.id);
+    if (templateIndex > -1) return [
+        ...templates.slice(0, templateIndex),
+        template,
+        ...templates.slice(templateIndex + 1)
+    ];
+    return [
+        ...templates,
+        template
+    ];
 }
-export const DynamicZone = () => {
-  const {
-    field
-  } = useModelField();
-  const {
-    updateField
-  } = useModelFieldEditor();
-  const newTemplateId = useRef(undefined);
-  const templates = field.settings?.templates || [];
-  const onTemplate = template => {
+const DynamicZone = ()=>{
+    const { field } = useModelField();
+    const { updateField } = useModelFieldEditor();
+    const newTemplateId = useRef(void 0);
     const templates = field.settings?.templates || [];
-    newTemplateId.current = template.id;
-    updateField({
-      ...field,
-      settings: {
-        ...(field.settings || {}),
-        templates: updateOrCreateTemplate(templates, template)
-      }
-    });
-  };
-  useEffect(() => {
-    // We only want to open the accordion item on first mount of a new template.
-    newTemplateId.current = undefined;
-  }, []);
-  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
-  }));
+    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/admin/plugins/fields/dynamicZone/DynamicZone.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useRef","useEffect","Accordion","AddTemplateIcon","AddTemplateButton","DynamicZoneTemplate","useModelField","useModelFieldEditor","updateOrCreateTemplate","templates","template","templateIndex","findIndex","tpl","id","slice","DynamicZone","field","updateField","newTemplateId","undefined","settings","onTemplate","current","createElement","Fragment","length","map","index","key","open","onChange"],"sources":["DynamicZone.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport { Accordion } from \"@webiny/ui/Accordion/index.js\";\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"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,EAAEC,SAAS,QAAQ,OAAO;AAChD,SAASC,SAAS,QAAQ,+BAA+B;AAEzD,SAASC,eAAe,EAAEC,iBAAiB;AAC3C,SAASC,mBAAmB;AAC5B,SAASC,aAAa,EAAEC,mBAAmB;AAE3C,SAASC,sBAAsBA,CAC3BC,SAAmC,EACnCC,QAAgC,EAClC;EACE,MAAMC,aAAa,GAAGF,SAAS,CAACG,SAAS,CAACC,GAAG,IAAIA,GAAG,CAACC,EAAE,KAAKJ,QAAQ,CAACI,EAAE,CAAC;EAExE,IAAIH,aAAa,GAAG,CAAC,CAAC,EAAE;IACpB,OAAO,CACH,GAAGF,SAAS,CAACM,KAAK,CAAC,CAAC,EAAEJ,aAAa,CAAC,EACpCD,QAAQ,EACR,GAAGD,SAAS,CAACM,KAAK,CAACJ,aAAa,GAAG,CAAC,CAAC,CACxC;EACL;EAEA,OAAO,CAAC,GAAGF,SAAS,EAAEC,QAAQ,CAAC;AACnC;AAEA,OAAO,MAAMM,WAAW,GAAGA,CAAA,KAAM;EAC7B,MAAM;IAAEC;EAAM,CAAC,GAAGX,aAAa,CAAC,CAAC;EACjC,MAAM;IAAEY;EAAY,CAAC,GAAGX,mBAAmB,CAAC,CAAC;EAC7C,MAAMY,aAAa,GAAGnB,MAAM,CAAqBoB,SAAS,CAAC;EAE3D,MAAMX,SAAmC,GAAGQ,KAAK,CAACI,QAAQ,EAAEZ,SAAS,IAAI,EAAE;EAE3E,MAAMa,UAAU,GAAIZ,QAAgC,IAAK;IACrD,MAAMD,SAAS,GAAGQ,KAAK,CAACI,QAAQ,EAAEZ,SAAS,IAAI,EAAE;IAEjDU,aAAa,CAACI,OAAO,GAAGb,QAAQ,CAACI,EAAE;IAEnCI,WAAW,CAAC;MACR,GAAGD,KAAK;MACRI,QAAQ,EAAE;QACN,IAAIJ,KAAK,CAACI,QAAQ,IAAI,CAAC,CAAC,CAAC;QACzBZ,SAAS,EAAED,sBAAsB,CAACC,SAAS,EAAEC,QAAQ;MACzD;IACJ,CAAC,CAAC;EACN,CAAC;EAEDT,SAAS,CAAC,MAAM;IACZ;IACAkB,aAAa,CAACI,OAAO,GAAGH,SAAS;EACrC,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIrB,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA0B,QAAA,QACKhB,SAAS,CAACiB,MAAM,gBACb3B,KAAA,CAAAyB,aAAA,CAACtB,SAAS,QACLO,SAAS,CAACkB,GAAG,CAAC,CAACjB,QAAQ,EAAEkB,KAAK,kBAC3B7B,KAAA,CAAAyB,aAAA,CAACnB,mBAAmB;IAChBwB,GAAG,EAAEnB,QAAQ,CAACI,EAAG;IACjBgB,IAAI,EAAEpB,QAAQ,CAACI,EAAE,KAAKK,aAAa,CAACI,OAAQ;IAC5CK,KAAK,EAAEA,KAAM;IACbX,KAAK,EAAEA,KAAM;IACbP,QAAQ,EAAEA,QAAS;IACnBqB,QAAQ,EAAEb;EAAY,CACzB,CACJ,CACM,CAAC,GACZ,IAAI,EACPT,SAAS,CAACiB,MAAM,gBACb3B,KAAA,CAAAyB,aAAA,CAACrB,eAAe;IAACmB,UAAU,EAAEA;EAAW,CAAE,CAAC,gBAE3CvB,KAAA,CAAAyB,aAAA,CAACpB,iBAAiB;IAACkB,UAAU,EAAEA;EAAW,CAAE,CAElD,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fields/dynamicZone/DynamicZone.js","sources":["../../../../../src/admin/plugins/fields/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/admin/plugins/fields/dynamicZone/DynamicZoneTemplate.js

@@ -1,100 +1,100 @@
-import React, { useCallback, useState } from "react";
+import react, { useCallback, useState } from "react";
 import { set } from "dot-prop-immutable";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
-import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
-import { ReactComponent as ArrowUpIcon } from "@webiny/icons/expand_less.svg";
-import { ReactComponent as ArrowDownIcon } from "@webiny/icons/expand_more.svg";
-import { AccordionItem } from "@webiny/ui/Accordion/index.js";
+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 } from "@webiny/app-admin";
 import { pullValueAtIndex, pushValueAtIndex, removeValueAtIndex } from "../../arrayUtils.js";
 import { TemplateDialog } from "./TemplateDialog.js";
 import { FieldEditor } from "../../../components/FieldEditor/index.js";
 import { normalizeIcon } from "../../../../utils/normalizeIcon.js";
 const TEMPLATES_PATH = "settings.templates";
-export 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 [templateToEdit, setTemplateToEdit] = useState(undefined);
-  const templates = field.settings?.templates || [];
-  const isFirst = index === 0;
-  const isLast = index === templates.length - 1;
-  const callbackDeps = [onChange, field, index, template.id];
-  const onDialogClose = useCallback(() => {
-    setTemplateToEdit(undefined);
-  }, []);
-  const editTemplate = useCallback(() => {
-    setTemplateToEdit(template);
-  }, [template]);
-  const updateTemplate = useCallback(params => {
-    onChange(set(field, `${TEMPLATES_PATH}.${index}`, tpl => {
-      return {
-        ...tpl,
-        ...params
-      };
-    }));
-  }, callbackDeps);
-  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)));
+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!"
     });
-  }, callbackDeps);
-  const icon = normalizeIcon(template.icon);
-  return /*#__PURE__*/React.createElement(AccordionItem, {
-    title: template.name,
-    description: template.description,
-    icon: icon ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: icon
-    }) : undefined,
-    open: open,
-    actions: /*#__PURE__*/React.createElement(AccordionItem.Actions, null, /*#__PURE__*/React.createElement(AccordionItem.Action, {
-      icon: /*#__PURE__*/React.createElement(ArrowUpIcon, null),
-      onClick: moveTemplateUp,
-      disabled: isFirst
-    }), /*#__PURE__*/React.createElement(AccordionItem.Action, {
-      icon: /*#__PURE__*/React.createElement(ArrowDownIcon, null),
-      onClick: moveTemplateDown,
-      disabled: isLast
-    }), /*#__PURE__*/React.createElement(AccordionItem.Divider, null), /*#__PURE__*/React.createElement(AccordionItem.Action, {
-      icon: /*#__PURE__*/React.createElement(EditIcon, null),
-      onClick: editTemplate
-    }), /*#__PURE__*/React.createElement(AccordionItem.Action, {
-      icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
-      onClick: deleteTemplate
-    }))
-  }, templateToEdit ? /*#__PURE__*/React.createElement(TemplateDialog, {
-    template: templateToEdit,
-    onTemplate: updateTemplate,
-    onClose: onDialogClose
-  }) : null, /*#__PURE__*/React.createElement(FieldEditor, {
-    parent: field,
-    fields: template.fields,
-    layout: template.layout,
-    onChange: updateFieldsAndLayout
-  }));
+    const [templateToEdit, setTemplateToEdit] = useState(void 0);
+    const templates = field.settings?.templates || [];
+    const isFirst = 0 === index;
+    const isLast = index === templates.length - 1;
+    const callbackDeps = [
+        onChange,
+        field,
+        index,
+        template.id
+    ];
+    const onDialogClose = useCallback(()=>{
+        setTemplateToEdit(void 0);
+    }, []);
+    const editTemplate = useCallback(()=>{
+        setTemplateToEdit(template);
+    }, [
+        template
+    ]);
+    const updateTemplate = useCallback((params)=>{
+        onChange(set(field, `${TEMPLATES_PATH}.${index}`, (tpl)=>({
+                ...tpl,
+                ...params
+            })));
+    }, callbackDeps);
+    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: open,
+        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
+        }))
+    }, templateToEdit ? /*#__PURE__*/ react.createElement(TemplateDialog, {
+        template: templateToEdit,
+        onTemplate: updateTemplate,
+        onClose: onDialogClose
+    }) : null, /*#__PURE__*/ react.createElement(FieldEditor, {
+        parent: field,
+        fields: template.fields,
+        layout: template.layout,
+        onChange: updateFieldsAndLayout
+    }));
 };
+export { DynamicZoneTemplate };
 
 //# sourceMappingURL=DynamicZoneTemplate.js.map

package/admin/plugins/fields/dynamicZone/DynamicZoneTemplate.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useState","set","FontAwesomeIcon","ReactComponent","EditIcon","DeleteIcon","ArrowUpIcon","ArrowDownIcon","AccordionItem","useConfirmationDialog","pullValueAtIndex","pushValueAtIndex","removeValueAtIndex","TemplateDialog","FieldEditor","normalizeIcon","TEMPLATES_PATH","DynamicZoneTemplate","index","field","template","onChange","open","showConfirmation","title","message","acceptLabel","templateToEdit","setTemplateToEdit","undefined","templates","settings","isFirst","isLast","length","callbackDeps","id","onDialogClose","editTemplate","updateTemplate","params","tpl","updateFieldsAndLayout","moveTemplateUp","moveTemplateDown","deleteTemplate","icon","createElement","name","description","actions","Actions","Action","onClick","disabled","Divider","onTemplate","onClose","parent","fields","layout"],"sources":["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 { AccordionItem } from \"@webiny/ui/Accordion/index.js\";\nimport { useConfirmationDialog } 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 { TemplateDialog } from \"./TemplateDialog.js\";\nimport { FieldEditor } from \"~/admin/components/FieldEditor/index.js\";\nimport { normalizeIcon } from \"~/utils/normalizeIcon.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 [templateToEdit, setTemplateToEdit] = useState<CmsDynamicZoneTemplate | undefined>(\n        undefined\n    );\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 onDialogClose = useCallback(() => {\n        setTemplateToEdit(undefined);\n    }, []);\n\n    const editTemplate = useCallback(() => {\n        setTemplateToEdit(template);\n    }, [template]);\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 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        <AccordionItem\n            title={template.name}\n            description={template.description}\n            icon={icon ? <FontAwesomeIcon icon={icon} /> : undefined}\n            open={open}\n            actions={\n                <AccordionItem.Actions>\n                    <AccordionItem.Action\n                        icon={<ArrowUpIcon />}\n                        onClick={moveTemplateUp}\n                        disabled={isFirst}\n                    />\n                    <AccordionItem.Action\n                        icon={<ArrowDownIcon />}\n                        onClick={moveTemplateDown}\n                        disabled={isLast}\n                    />\n                    <AccordionItem.Divider />\n                    <AccordionItem.Action icon={<EditIcon />} onClick={editTemplate} />\n                    <AccordionItem.Action icon={<DeleteIcon />} onClick={deleteTemplate} />\n                </AccordionItem.Actions>\n            }\n        >\n            {templateToEdit ? (\n                <TemplateDialog\n                    template={templateToEdit}\n                    onTemplate={updateTemplate}\n                    onClose={onDialogClose}\n                />\n            ) : null}\n\n            <FieldEditor\n                parent={field}\n                fields={template.fields}\n                layout={template.layout}\n                onChange={updateFieldsAndLayout}\n            />\n        </AccordionItem>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fields/dynamicZone/DynamicZoneTemplate.js","sources":["../../../../../src/admin/plugins/fields/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 } 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 { TemplateDialog } from \"./TemplateDialog.js\";\nimport { FieldEditor } from \"~/admin/components/FieldEditor/index.js\";\nimport { normalizeIcon } from \"~/utils/normalizeIcon.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 [templateToEdit, setTemplateToEdit] = useState<CmsDynamicZoneTemplate | undefined>(\n        undefined\n    );\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 onDialogClose = useCallback(() => {\n        setTemplateToEdit(undefined);\n    }, []);\n\n    const editTemplate = useCallback(() => {\n        setTemplateToEdit(template);\n    }, [template]);\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 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={open}\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            {templateToEdit ? (\n                <TemplateDialog\n                    template={templateToEdit}\n                    onTemplate={updateTemplate}\n                    onClose={onDialogClose}\n                />\n            ) : null}\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","templateToEdit","setTemplateToEdit","useState","undefined","templates","isFirst","isLast","callbackDeps","onDialogClose","useCallback","editTemplate","updateTemplate","params","set","tpl","updateFieldsAndLayout","moveTemplateUp","pullValueAtIndex","moveTemplateDown","pushValueAtIndex","deleteTemplate","removeValueAtIndex","icon","normalizeIcon","Accordion","FontAwesomeIcon","ArrowUpIcon","ArrowDownIcon","EditIcon","DeleteIcon","TemplateDialog","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,CAACC,gBAAgBC,kBAAkB,GAAGC,SACxCC;IAGJ,MAAMC,YAAYV,MAAM,QAAQ,EAAE,aAAa,EAAE;IACjD,MAAMW,UAAUZ,AAAU,MAAVA;IAChB,MAAMa,SAASb,UAAUW,UAAU,MAAM,GAAG;IAE5C,MAAMG,eAAe;QAACX;QAAUF;QAAOD;QAAOE,SAAS,EAAE;KAAC;IAE1D,MAAMa,gBAAgBC,YAAY;QAC9BR,kBAAkBE;IACtB,GAAG,EAAE;IAEL,MAAMO,eAAeD,YAAY;QAC7BR,kBAAkBN;IACtB,GAAG;QAACA;KAAS;IAEb,MAAMgB,iBAAiBF,YAA4BG,CAAAA;QAC/ChB,SACIiB,IAAInB,OAAO,GAAGH,eAAe,CAAC,EAAEE,OAAO,EAAE,CAACqB,MAC/B;gBAAE,GAAGA,GAAG;gBAAE,GAAGF,MAAM;YAAC;IAGvC,GAAGL;IAEH,MAAMQ,wBAAwBN,YAC1BG,CAAAA;QACID,eAAe;YAAE,GAAGhB,QAAQ;YAAE,GAAGiB,MAAM;QAAC;IAC5C,GACA;QAACD;KAAe;IAGpB,MAAMK,iBAAiBP,YAAY;QAC/Bb,SAASiB,IAAInB,OAAOH,gBAAgB0B,iBAAiBb,WAAWX;IACpE,GAAGc;IAEH,MAAMW,mBAAmBT,YAAY;QACjCb,SAASiB,IAAInB,OAAOH,gBAAgB4B,iBAAiBf,WAAWX;IACpE,GAAGc;IAEH,MAAMa,iBAAiBX,YAAY;QAC/BX,iBAAiB;YACbF,SAASiB,IAAInB,OAAOH,gBAAgB8B,mBAAmBjB,WAAWX;QACtE;IACJ,GAAGc;IAEH,MAAMe,OAAOC,cAAc5B,SAAS,IAAI;IAExC,OAAO,WAAP,GACI,oBAAC6B,UAAU,IAAI;QACX,OAAO7B,SAAS,IAAI;QACpB,aAAaA,SAAS,WAAW;QACjC,MAAM2B,OAAO,WAAPA,GAAO,oBAACG,iBAAeA;YAAC,MAAMH;aAAWnB;QAC/C,MAAMN;QACN,uBACI,wDACI,oBAAC2B,UAAU,IAAI,CAAC,MAAM;YAClB,oBAAM,oBAACE,gCAAWA;YAClB,SAASV;YACT,UAAUX;0BAEd,oBAACmB,UAAU,IAAI,CAAC,MAAM;YAClB,oBAAM,oBAACG,gCAAaA;YACpB,SAAST;YACT,UAAUZ;0BAEd,oBAACkB,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACA,UAAU,IAAI,CAAC,MAAM;YAAC,oBAAM,oBAACI,gBAAQA;YAAK,SAASlB;0BACpD,oBAACc,UAAU,IAAI,CAAC,MAAM;YAAC,oBAAM,oBAACK,2BAAUA;YAAK,SAAST;;OAI7DpB,iBAAiB,WAAjBA,GACG,oBAAC8B,gBAAcA;QACX,UAAU9B;QACV,YAAYW;QACZ,SAASH;SAEb,oBAEJ,oBAACuB,aAAWA;QACR,QAAQrC;QACR,QAAQC,SAAS,MAAM;QACvB,QAAQA,SAAS,MAAM;QACvB,UAAUoB;;AAI1B"}