@webiny/app-headless-cms 0.0.0-unstable.40876133bb → 0.0.0-unstable.496cf268ac

package/admin/components/ContentModelEditor/Editor.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","prompt","ContentContainer","styled","paddingTop","EditContainer","padding","position","LeftBarTitle","borderBottom","display","alignItems","color","titleIcon","css","height","marginRight","LeftBarFieldList","overflow","formTabs","backgroundColor","Editor","useContentModelEditor","data","setData","isPristine","tabsRef","useRef","useState","activeTabIndex","setActiveTabIndex","onChange","fields","layout","current","switchTab","e"],"sources":["Editor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { Prompt } from \"@webiny/react-router\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { LeftPanel, RightPanel, SplitView } from \"@webiny/app-admin/components/SplitView\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Tab, Tabs, TabsImperativeApi } from \"@webiny/ui/Tabs\";\nimport { ReactComponent as FormIcon } from \"./icons/round-assignment-24px.svg\";\nimport { FieldsSidebar } from \"./FieldsSidebar\";\nimport { FieldEditor } from \"../FieldEditor\";\nimport { PreviewTab } from \"./PreviewTab\";\nimport Header from \"./Header\";\nimport DragPreview from \"../DragPreview\";\nimport { useContentModelEditor } from \"./useContentModelEditor\";\nimport { CmsEditorField, CmsEditorFieldsLayout } from \"~/types\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/editor\");\n\nconst prompt = t`There are some unsaved changes! Are you sure you want to navigate away and discard all changes?`;\n\nconst ContentContainer = styled(\"div\")({\n    paddingTop: 65\n});\n\nexport const EditContainer = styled(\"div\")({\n    padding: 40,\n    position: \"relative\"\n});\n\nconst LeftBarTitle = styled(\"div\")({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: 25,\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst titleIcon = css({\n    height: 24,\n    marginRight: 15,\n    color: \"var(--mdc-theme-primary)\"\n});\n\nconst LeftBarFieldList = styled(\"div\")({\n    padding: 40,\n    overflow: \"auto\",\n    height: \"calc(100vh - 250px)\"\n});\n\nconst formTabs = css({\n    \"&.webiny-ui-tabs\": {\n        \".webiny-ui-tabs__tab-bar\": {\n            backgroundColor: \"var(--mdc-theme-surface)\"\n        }\n    }\n});\n\ninterface OnChangeParams {\n    fields: CmsEditorField[];\n    layout: CmsEditorFieldsLayout;\n}\n\nexport const Editor: React.FC = () => {\n    const { data, setData, isPristine } = useContentModelEditor();\n\n    const tabsRef = useRef<TabsImperativeApi>();\n    const [activeTabIndex, setActiveTabIndex] = useState<number>(0);\n\n    const onChange = ({ fields, layout }: OnChangeParams) => {\n        setData(data => ({ ...data, fields, layout }));\n    };\n\n    if (!data) {\n        return <CircularProgress label={\"Loading content model...\"} />;\n    }\n\n    return (\n        <div className={\"content-model-editor\"}>\n            <Prompt when={!isPristine} message={prompt} />\n            <Header />\n            <ContentContainer>\n                <SplitView>\n                    <LeftPanel span={4}>\n                        <LeftBarTitle>\n                            <Icon className={titleIcon} icon={<FormIcon />} />\n                            <Typography use={\"headline6\"}>Fields</Typography>\n                        </LeftBarTitle>\n                        <LeftBarFieldList>\n                            <FieldsSidebar\n                                onFieldDragStart={() => {\n                                    if (!tabsRef.current) {\n                                        return;\n                                    }\n                                    tabsRef.current.switchTab(0);\n                                }}\n                            />\n                        </LeftBarFieldList>\n                    </LeftPanel>\n                    <RightPanel span={8}>\n                        <Tabs\n                            className={formTabs}\n                            ref={tabsRef}\n                            onActivate={e => setActiveTabIndex(e)}\n                        >\n                            <Tab label={\"Edit\"} data-testid={\"cms.editor.tab.edit\"}>\n                                <EditContainer>\n                                    <FieldEditor\n                                        fields={data.fields}\n                                        layout={data.layout || []}\n                                        onChange={onChange}\n                                    />\n                                </EditContainer>\n                            </Tab>\n                            <Tab label={\"Preview\"} data-testid={\"cms.editor.tab.preview\"}>\n                                <PreviewTab activeTab={activeTabIndex === 1} />\n                            </Tab>\n                        </Tabs>\n                    </RightPanel>\n                </SplitView>\n            </ContentContainer>\n            <DragPreview />\n        </div>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["t","i18n","ns","prompt","ContentContainer","styled","paddingTop","EditContainer","padding","position","LeftBarTitle","borderBottom","display","alignItems","color","titleIcon","css","height","marginRight","LeftBarFieldList","overflow","formTabs","backgroundColor","Editor","useModelEditor","data","setData","isPristine","tabsRef","useRef","useState","activeTabIndex","setActiveTabIndex","onChange","fields","layout","current","switchTab","e"],"sources":["Editor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { Prompt } from \"@webiny/react-router\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { LeftPanel, RightPanel, SplitView } from \"@webiny/app-admin/components/SplitView\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Tab, Tabs, TabsImperativeApi } from \"@webiny/ui/Tabs\";\nimport { ReactComponent as FormIcon } from \"./icons/round-assignment-24px.svg\";\nimport { FieldsSidebar } from \"./FieldsSidebar\";\nimport { FieldEditor } from \"../FieldEditor\";\nimport { PreviewTab } from \"./PreviewTab\";\nimport Header from \"./Header\";\nimport DragPreview from \"../DragPreview\";\nimport { useModelEditor } from \"./useModelEditor\";\nimport { CmsModelField, CmsEditorFieldsLayout } from \"~/types\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/editor\");\n\nconst prompt = t`There are some unsaved changes! Are you sure you want to navigate away and discard all changes?`;\n\nconst ContentContainer = styled(\"div\")({\n    paddingTop: 65\n});\n\nexport const EditContainer = styled(\"div\")({\n    padding: 40,\n    position: \"relative\"\n});\n\nconst LeftBarTitle = styled(\"div\")({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: 25,\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst titleIcon = css({\n    height: 24,\n    marginRight: 15,\n    color: \"var(--mdc-theme-primary)\"\n});\n\nconst LeftBarFieldList = styled(\"div\")({\n    padding: 40,\n    overflow: \"auto\",\n    height: \"calc(100vh - 250px)\"\n});\n\nconst formTabs = css({\n    \"&.webiny-ui-tabs\": {\n        \".webiny-ui-tabs__tab-bar\": {\n            backgroundColor: \"var(--mdc-theme-surface)\"\n        }\n    }\n});\n\ninterface OnChangeParams {\n    fields: CmsModelField[];\n    layout: CmsEditorFieldsLayout;\n}\n\nexport const Editor: React.FC = () => {\n    const { data, setData, isPristine } = useModelEditor();\n\n    const tabsRef = useRef<TabsImperativeApi>();\n    const [activeTabIndex, setActiveTabIndex] = useState<number>(0);\n\n    const onChange = ({ fields, layout }: OnChangeParams) => {\n        setData(data => ({ ...data, fields, layout }));\n    };\n\n    if (!data) {\n        return <CircularProgress label={\"Loading content model...\"} />;\n    }\n\n    return (\n        <div className={\"content-model-editor\"}>\n            <Prompt when={!isPristine} message={prompt} />\n            <Header />\n            <ContentContainer>\n                <SplitView>\n                    <LeftPanel span={4}>\n                        <LeftBarTitle>\n                            <Icon className={titleIcon} icon={<FormIcon />} />\n                            <Typography use={\"headline6\"}>Fields</Typography>\n                        </LeftBarTitle>\n                        <LeftBarFieldList>\n                            <FieldsSidebar\n                                onFieldDragStart={() => {\n                                    if (!tabsRef.current) {\n                                        return;\n                                    }\n                                    tabsRef.current.switchTab(0);\n                                }}\n                            />\n                        </LeftBarFieldList>\n                    </LeftPanel>\n                    <RightPanel span={8}>\n                        <Tabs\n                            className={formTabs}\n                            ref={tabsRef}\n                            onActivate={e => setActiveTabIndex(e)}\n                        >\n                            <Tab label={\"Edit\"} data-testid={\"cms.editor.tab.edit\"}>\n                                <EditContainer>\n                                    <FieldEditor\n                                        fields={data.fields}\n                                        layout={data.layout || []}\n                                        onChange={onChange}\n                                    />\n                                </EditContainer>\n                            </Tab>\n                            <Tab label={\"Preview\"} data-testid={\"cms.editor.tab.preview\"}>\n                                <PreviewTab activeTab={activeTabIndex === 1} />\n                            </Tab>\n                        </Tabs>\n                    </RightPanel>\n                </SplitView>\n            </ContentContainer>\n            <DragPreview />\n        </div>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAkD;AAGlD,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,+BAA+B,CAAC;AAElD,IAAMC,MAAM,GAAGH,CAAC,kLAAiG;AAEjH,IAAMI,gBAAgB,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACnCC,UAAU,EAAE;AAChB,CAAC,CAAC;AAEK,IAAMC,aAAa,oBAAGF,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACvCG,OAAO,EAAE,EAAE;EACXC,QAAQ,EAAE;AACd,CAAC,CAAC;AAAC;AAEH,IAAMC,YAAY,oBAAGL,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC/BM,YAAY,EAAE,0CAA0C;EACxDC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBL,OAAO,EAAE,EAAE;EACXM,KAAK,EAAE;AACX,CAAC,CAAC;AAEF,IAAMC,SAAS,gBAAG,IAAAC,YAAG,EAAC;EAClBC,MAAM,EAAE,EAAE;EACVC,WAAW,EAAE,EAAE;EACfJ,KAAK,EAAE;AACX,CAAC,qBAAC;AAEF,IAAMK,gBAAgB,oBAAGd,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACnCG,OAAO,EAAE,EAAE;EACXY,QAAQ,EAAE,MAAM;EAChBH,MAAM,EAAE;AACZ,CAAC,CAAC;AAEF,IAAMI,QAAQ,gBAAG,IAAAL,YAAG,EAAC;EACjB,kBAAkB,EAAE;IAChB,0BAA0B,EAAE;MACxBM,eAAe,EAAE;IACrB;EACJ;AACJ,CAAC,oBAAC;AAOK,IAAMC,MAAgB,GAAG,SAAnBA,MAAgB,GAAS;EAClC,sBAAsC,IAAAC,+BAAc,GAAE;IAA9CC,IAAI,mBAAJA,IAAI;IAAEC,OAAO,mBAAPA,OAAO;IAAEC,UAAU,mBAAVA,UAAU;EAEjC,IAAMC,OAAO,GAAG,IAAAC,aAAM,GAAqB;EAC3C,gBAA4C,IAAAC,eAAQ,EAAS,CAAC,CAAC;IAAA;IAAxDC,cAAc;IAAEC,iBAAiB;EAExC,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAA2C;IAAA,IAArCC,MAAM,QAANA,MAAM;MAAEC,MAAM,QAANA,MAAM;IAC9BT,OAAO,CAAC,UAAAD,IAAI;MAAA,mEAAUA,IAAI;QAAES,MAAM,EAANA,MAAM;QAAEC,MAAM,EAANA;MAAM;IAAA,CAAG,CAAC;EAClD,CAAC;EAED,IAAI,CAACV,IAAI,EAAE;IACP,oBAAO,6BAAC,0BAAgB;MAAC,KAAK,EAAE;IAA2B,EAAG;EAClE;EAEA,oBACI;IAAK,SAAS,EAAE;EAAuB,gBACnC,6BAAC,mBAAM;IAAC,IAAI,EAAE,CAACE,UAAW;IAAC,OAAO,EAAExB;EAAO,EAAG,eAC9C,6BAAC,eAAM,OAAG,eACV,6BAAC,gBAAgB,qBACb,6BAAC,oBAAS,qBACN,6BAAC,oBAAS;IAAC,IAAI,EAAE;EAAE,gBACf,6BAAC,YAAY,qBACT,6BAAC,UAAI;IAAC,SAAS,EAAEY,SAAU;IAAC,IAAI,eAAE,6BAAC,mCAAQ;EAAI,EAAG,eAClD,6BAAC,sBAAU;IAAC,GAAG,EAAE;EAAY,GAAC,QAAM,CAAa,CACtC,eACf,6BAAC,gBAAgB,qBACb,6BAAC,4BAAa;IACV,gBAAgB,EAAE,4BAAM;MACpB,IAAI,CAACa,OAAO,CAACQ,OAAO,EAAE;QAClB;MACJ;MACAR,OAAO,CAACQ,OAAO,CAACC,SAAS,CAAC,CAAC,CAAC;IAChC;EAAE,EACJ,CACa,CACX,eACZ,6BAAC,qBAAU;IAAC,IAAI,EAAE;EAAE,gBAChB,6BAAC,UAAI;IACD,SAAS,EAAEhB,QAAS;IACpB,GAAG,EAAEO,OAAQ;IACb,UAAU,EAAE,oBAAAU,CAAC;MAAA,OAAIN,iBAAiB,CAACM,CAAC,CAAC;IAAA;EAAC,gBAEtC,6BAAC,SAAG;IAAC,KAAK,EAAE,MAAO;IAAC,eAAa;EAAsB,gBACnD,6BAAC,aAAa,qBACV,6BAAC,wBAAW;IACR,MAAM,EAAEb,IAAI,CAACS,MAAO;IACpB,MAAM,EAAET,IAAI,CAACU,MAAM,IAAI,EAAG;IAC1B,QAAQ,EAAEF;EAAS,EACrB,CACU,CACd,eACN,6BAAC,SAAG;IAAC,KAAK,EAAE,SAAU;IAAC,eAAa;EAAyB,gBACzD,6BAAC,sBAAU;IAAC,SAAS,EAAEF,cAAc,KAAK;EAAE,EAAG,CAC7C,CACH,CACE,CACL,CACG,eACnB,6BAAC,oBAAW,OAAG,CACb;AAEd,CAAC;AAAC"}

package/admin/components/ContentModelEditor/FieldsSidebar.js

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldsSidebar = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _plugins = require("@webiny/plugins");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Icon = require("@webiny/ui/Icon");
-
 var _Draggable = _interopRequireDefault(require("../Draggable"));
-
 var FieldContainer = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1s2p6i00",
   label: "FieldContainer"
@@ -64,14 +57,13 @@ var FieldHandle = /*#__PURE__*/(0, _styled.default)("div", {
   marginRight: 15,
   color: "var(--mdc-theme-on-surface)"
 });
-
 var Field = function Field(props) {
   var onFieldDragStart = props.onFieldDragStart,
-      _props$fieldType = props.fieldType,
-      type = _props$fieldType.type,
-      label = _props$fieldType.label,
-      icon = _props$fieldType.icon,
-      description = _props$fieldType.description;
+    _props$fieldType = props.fieldType,
+    type = _props$fieldType.type,
+    label = _props$fieldType.label,
+    icon = _props$fieldType.icon,
+    description = _props$fieldType.description;
   return /*#__PURE__*/_react.default.createElement(_Draggable.default, {
     beginDrag: {
       type: "newField",
@@ -91,12 +83,9 @@ var Field = function Field(props) {
     })), /*#__PURE__*/_react.default.createElement(FileInfo, null, /*#__PURE__*/_react.default.createElement(FieldLabel, null, label), /*#__PURE__*/_react.default.createElement(FieldDescription, null, description))));
   });
 };
-
 var FieldsSidebar = function FieldsSidebar(_ref2) {
   var onFieldDragStart = _ref2.onFieldDragStart;
-
   var fieldTypePlugin = _plugins.plugins.byType("cms-editor-field-type");
-
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fieldTypePlugin.map(function (fieldPlugin) {
     return /*#__PURE__*/_react.default.createElement(Field, {
       key: fieldPlugin.field.type,
@@ -105,5 +94,4 @@ var FieldsSidebar = function FieldsSidebar(_ref2) {
     });
   }));
 };
-
 exports.FieldsSidebar = FieldsSidebar;

package/admin/components/ContentModelEditor/FieldsSidebar.js.map

@@ -1 +1 @@
-{"version":3,"names":["FieldContainer","styled","padding","marginBottom","display","width","backgroundColor","borderRadius","boxSizing","cursor","opacity","transition","FileInfo","FieldLabel","textTransform","lineHeight","color","FieldDescription","fontSize","FieldHandle","marginRight","Field","props","onFieldDragStart","fieldType","type","label","icon","description","drag","FieldsSidebar","fieldTypePlugin","plugins","byType","map","fieldPlugin","field"],"sources":["FieldsSidebar.tsx"],"sourcesContent":["import React, { DragEventHandler } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport styled from \"@emotion/styled\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport Draggable from \"../Draggable\";\nimport { CmsEditorFieldTypePlugin } from \"~/types\";\n\nconst FieldContainer = styled(\"div\")({\n    padding: \"10px 15px\",\n    marginBottom: 20,\n    display: \"flex\",\n    width: \"100%\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 15,\n    boxSizing: \"border-box\",\n    cursor: \"grab\",\n    opacity: 1,\n    transition: \"opacity 225ms\",\n    \"&:hover\": {\n        opacity: 0.8\n    },\n    \"&:last-child\": {\n        marginBottom: 0\n    }\n});\n\nconst FileInfo = styled(\"div\")({});\n\nconst FieldLabel = styled(\"div\")({\n    textTransform: \"uppercase\",\n    lineHeight: \"145%\",\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst FieldDescription = styled(\"div\")({\n    fontSize: 14,\n    color: \"var(--mdc-theme-text-secondary-on-background)\"\n});\n\nconst FieldHandle = styled(\"div\")({\n    marginRight: 15,\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\ninterface FieldProps {\n    onFieldDragStart: DragEventHandler;\n    fieldType: CmsEditorFieldTypePlugin[\"field\"];\n}\nconst Field: React.FC<FieldProps> = props => {\n    const {\n        onFieldDragStart,\n        fieldType: { type, label, icon, description }\n    } = props;\n    return (\n        <Draggable beginDrag={{ type: \"newField\", fieldType: type }}>\n            {({ drag }) => (\n                <div\n                    ref={drag}\n                    style={{ marginBottom: 10 }}\n                    data-testid={`cms-editor-fields-field-${type}`}\n                    onDragStart={onFieldDragStart}\n                >\n                    <FieldContainer>\n                        <FieldHandle>\n                            <Icon icon={icon as React.ReactElement} />\n                        </FieldHandle>\n                        <FileInfo>\n                            <FieldLabel>{label}</FieldLabel>\n                            <FieldDescription>{description}</FieldDescription>\n                        </FileInfo>\n                    </FieldContainer>\n                </div>\n            )}\n        </Draggable>\n    );\n};\n\ninterface FieldsSidebarProps {\n    onFieldDragStart: DragEventHandler;\n}\nexport const FieldsSidebar: React.FC<FieldsSidebarProps> = ({ onFieldDragStart }) => {\n    const fieldTypePlugin = plugins.byType<CmsEditorFieldTypePlugin>(\"cms-editor-field-type\");\n\n    return (\n        <React.Fragment>\n            {fieldTypePlugin.map(fieldPlugin => (\n                <Field\n                    key={fieldPlugin.field.type}\n                    fieldType={fieldPlugin.field}\n                    onFieldDragStart={onFieldDragStart}\n                />\n            ))}\n        </React.Fragment>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAGA,IAAMA,cAAc,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACjCC,OAAO,EAAE,WADwB;EAEjCC,YAAY,EAAE,EAFmB;EAGjCC,OAAO,EAAE,MAHwB;EAIjCC,KAAK,EAAE,MAJ0B;EAKjCC,eAAe,EAAE,gCALgB;EAMjCC,YAAY,EAAE,EANmB;EAOjCC,SAAS,EAAE,YAPsB;EAQjCC,MAAM,EAAE,MARyB;EASjCC,OAAO,EAAE,CATwB;EAUjCC,UAAU,EAAE,eAVqB;EAWjC,WAAW;IACPD,OAAO,EAAE;EADF,CAXsB;EAcjC,gBAAgB;IACZP,YAAY,EAAE;EADF;AAdiB,CAAjB,CAApB;AAmBA,IAAMS,QAAQ,oBAAGX,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB,EAAjB,CAAd;AAEA,IAAMY,UAAU,oBAAGZ,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAC7Ba,aAAa,EAAE,WADc;EAE7BC,UAAU,EAAE,MAFiB;EAG7BC,KAAK,EAAE;AAHsB,CAAjB,CAAhB;AAMA,IAAMC,gBAAgB,oBAAGhB,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACnCiB,QAAQ,EAAE,EADyB;EAEnCF,KAAK,EAAE;AAF4B,CAAjB,CAAtB;AAKA,IAAMG,WAAW,oBAAGlB,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAC9BmB,WAAW,EAAE,EADiB;EAE9BJ,KAAK,EAAE;AAFuB,CAAjB,CAAjB;;AASA,IAAMK,KAA2B,GAAG,SAA9BA,KAA8B,CAAAC,KAAK,EAAI;EACzC,IACIC,gBADJ,GAGID,KAHJ,CACIC,gBADJ;EAAA,uBAGID,KAHJ,CAEIE,SAFJ;EAAA,IAEiBC,IAFjB,oBAEiBA,IAFjB;EAAA,IAEuBC,KAFvB,oBAEuBA,KAFvB;EAAA,IAE8BC,IAF9B,oBAE8BA,IAF9B;EAAA,IAEoCC,WAFpC,oBAEoCA,WAFpC;EAIA,oBACI,6BAAC,kBAAD;IAAW,SAAS,EAAE;MAAEH,IAAI,EAAE,UAAR;MAAoBD,SAAS,EAAEC;IAA/B;EAAtB,GACK;IAAA,IAAGI,IAAH,QAAGA,IAAH;IAAA,oBACG;MACI,GAAG,EAAEA,IADT;MAEI,KAAK,EAAE;QAAE1B,YAAY,EAAE;MAAhB,CAFX;MAGI,iDAAwCsB,IAAxC,CAHJ;MAII,WAAW,EAAEF;IAJjB,gBAMI,6BAAC,cAAD,qBACI,6BAAC,WAAD,qBACI,6BAAC,UAAD;MAAM,IAAI,EAAEI;IAAZ,EADJ,CADJ,eAII,6BAAC,QAAD,qBACI,6BAAC,UAAD,QAAaD,KAAb,CADJ,eAEI,6BAAC,gBAAD,QAAmBE,WAAnB,CAFJ,CAJJ,CANJ,CADH;EAAA,CADL,CADJ;AAsBH,CA3BD;;AAgCO,IAAME,aAA2C,GAAG,SAA9CA,aAA8C,QAA0B;EAAA,IAAvBP,gBAAuB,SAAvBA,gBAAuB;;EACjF,IAAMQ,eAAe,GAAGC,gBAAA,CAAQC,MAAR,CAAyC,uBAAzC,CAAxB;;EAEA,oBACI,6BAAC,cAAD,CAAO,QAAP,QACKF,eAAe,CAACG,GAAhB,CAAoB,UAAAC,WAAW;IAAA,oBAC5B,6BAAC,KAAD;MACI,GAAG,EAAEA,WAAW,CAACC,KAAZ,CAAkBX,IAD3B;MAEI,SAAS,EAAEU,WAAW,CAACC,KAF3B;MAGI,gBAAgB,EAAEb;IAHtB,EAD4B;EAAA,CAA/B,CADL,CADJ;AAWH,CAdM"}
+{"version":3,"names":["FieldContainer","styled","padding","marginBottom","display","width","backgroundColor","borderRadius","boxSizing","cursor","opacity","transition","FileInfo","FieldLabel","textTransform","lineHeight","color","FieldDescription","fontSize","FieldHandle","marginRight","Field","props","onFieldDragStart","fieldType","type","label","icon","description","drag","FieldsSidebar","fieldTypePlugin","plugins","byType","map","fieldPlugin","field"],"sources":["FieldsSidebar.tsx"],"sourcesContent":["import React, { DragEventHandler } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport styled from \"@emotion/styled\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport Draggable from \"../Draggable\";\nimport { CmsModelFieldTypePlugin } from \"~/types\";\n\nconst FieldContainer = styled(\"div\")({\n    padding: \"10px 15px\",\n    marginBottom: 20,\n    display: \"flex\",\n    width: \"100%\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 15,\n    boxSizing: \"border-box\",\n    cursor: \"grab\",\n    opacity: 1,\n    transition: \"opacity 225ms\",\n    \"&:hover\": {\n        opacity: 0.8\n    },\n    \"&:last-child\": {\n        marginBottom: 0\n    }\n});\n\nconst FileInfo = styled(\"div\")({});\n\nconst FieldLabel = styled(\"div\")({\n    textTransform: \"uppercase\",\n    lineHeight: \"145%\",\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst FieldDescription = styled(\"div\")({\n    fontSize: 14,\n    color: \"var(--mdc-theme-text-secondary-on-background)\"\n});\n\nconst FieldHandle = styled(\"div\")({\n    marginRight: 15,\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\ninterface FieldProps {\n    onFieldDragStart: DragEventHandler;\n    fieldType: CmsModelFieldTypePlugin[\"field\"];\n}\nconst Field: React.FC<FieldProps> = props => {\n    const {\n        onFieldDragStart,\n        fieldType: { type, label, icon, description }\n    } = props;\n    return (\n        <Draggable beginDrag={{ type: \"newField\", fieldType: type }}>\n            {({ drag }) => (\n                <div\n                    ref={drag}\n                    style={{ marginBottom: 10 }}\n                    data-testid={`cms-editor-fields-field-${type}`}\n                    onDragStart={onFieldDragStart}\n                >\n                    <FieldContainer>\n                        <FieldHandle>\n                            <Icon icon={icon as React.ReactElement} />\n                        </FieldHandle>\n                        <FileInfo>\n                            <FieldLabel>{label}</FieldLabel>\n                            <FieldDescription>{description}</FieldDescription>\n                        </FileInfo>\n                    </FieldContainer>\n                </div>\n            )}\n        </Draggable>\n    );\n};\n\ninterface FieldsSidebarProps {\n    onFieldDragStart: DragEventHandler;\n}\nexport const FieldsSidebar: React.FC<FieldsSidebarProps> = ({ onFieldDragStart }) => {\n    const fieldTypePlugin = plugins.byType<CmsModelFieldTypePlugin>(\"cms-editor-field-type\");\n\n    return (\n        <React.Fragment>\n            {fieldTypePlugin.map(fieldPlugin => (\n                <Field\n                    key={fieldPlugin.field.type}\n                    fieldType={fieldPlugin.field}\n                    onFieldDragStart={onFieldDragStart}\n                />\n            ))}\n        </React.Fragment>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAGA,IAAMA,cAAc,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACjCC,OAAO,EAAE,WAAW;EACpBC,YAAY,EAAE,EAAE;EAChBC,OAAO,EAAE,MAAM;EACfC,KAAK,EAAE,MAAM;EACbC,eAAe,EAAE,gCAAgC;EACjDC,YAAY,EAAE,EAAE;EAChBC,SAAS,EAAE,YAAY;EACvBC,MAAM,EAAE,MAAM;EACdC,OAAO,EAAE,CAAC;EACVC,UAAU,EAAE,eAAe;EAC3B,SAAS,EAAE;IACPD,OAAO,EAAE;EACb,CAAC;EACD,cAAc,EAAE;IACZP,YAAY,EAAE;EAClB;AACJ,CAAC,CAAC;AAEF,IAAMS,QAAQ,oBAAGX,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE,CAAC,CAAC,CAAC;AAElC,IAAMY,UAAU,oBAAGZ,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC7Ba,aAAa,EAAE,WAAW;EAC1BC,UAAU,EAAE,MAAM;EAClBC,KAAK,EAAE;AACX,CAAC,CAAC;AAEF,IAAMC,gBAAgB,oBAAGhB,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACnCiB,QAAQ,EAAE,EAAE;EACZF,KAAK,EAAE;AACX,CAAC,CAAC;AAEF,IAAMG,WAAW,oBAAGlB,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC9BmB,WAAW,EAAE,EAAE;EACfJ,KAAK,EAAE;AACX,CAAC,CAAC;AAMF,IAAMK,KAA2B,GAAG,SAA9BA,KAA2B,CAAGC,KAAK,EAAI;EACzC,IACIC,gBAAgB,GAEhBD,KAAK,CAFLC,gBAAgB;IAAA,mBAEhBD,KAAK,CADLE,SAAS;IAAIC,IAAI,oBAAJA,IAAI;IAAEC,KAAK,oBAALA,KAAK;IAAEC,IAAI,oBAAJA,IAAI;IAAEC,WAAW,oBAAXA,WAAW;EAE/C,oBACI,6BAAC,kBAAS;IAAC,SAAS,EAAE;MAAEH,IAAI,EAAE,UAAU;MAAED,SAAS,EAAEC;IAAK;EAAE,GACvD;IAAA,IAAGI,IAAI,QAAJA,IAAI;IAAA,oBACJ;MACI,GAAG,EAAEA,IAAK;MACV,KAAK,EAAE;QAAE1B,YAAY,EAAE;MAAG,CAAE;MAC5B,iDAAwCsB,IAAI,CAAG;MAC/C,WAAW,EAAEF;IAAiB,gBAE9B,6BAAC,cAAc,qBACX,6BAAC,WAAW,qBACR,6BAAC,UAAI;MAAC,IAAI,EAAEI;IAA2B,EAAG,CAChC,eACd,6BAAC,QAAQ,qBACL,6BAAC,UAAU,QAAED,KAAK,CAAc,eAChC,6BAAC,gBAAgB,QAAEE,WAAW,CAAoB,CAC3C,CACE,CACf;EAAA,CACT,CACO;AAEpB,CAAC;AAKM,IAAME,aAA2C,GAAG,SAA9CA,aAA2C,QAA6B;EAAA,IAAvBP,gBAAgB,SAAhBA,gBAAgB;EAC1E,IAAMQ,eAAe,GAAGC,gBAAO,CAACC,MAAM,CAA0B,uBAAuB,CAAC;EAExF,oBACI,6BAAC,cAAK,CAAC,QAAQ,QACVF,eAAe,CAACG,GAAG,CAAC,UAAAC,WAAW;IAAA,oBAC5B,6BAAC,KAAK;MACF,GAAG,EAAEA,WAAW,CAACC,KAAK,CAACX,IAAK;MAC5B,SAAS,EAAEU,WAAW,CAACC,KAAM;MAC7B,gBAAgB,EAAEb;IAAiB,EACrC;EAAA,CACL,CAAC,CACW;AAEzB,CAAC;AAAC"}

package/admin/components/ContentModelEditor/Header.js

@@ -1,24 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _TopAppBar = require("@webiny/ui/TopAppBar");
-
 var _plugins = require("@webiny/app/plugins");
-
 var _emotion = require("emotion");
-
 var topBar = /*#__PURE__*/(0, _emotion.css)({
   boxShadow: "1px 0px 5px 0px rgba(128,128,128,1)"
 }, "label:topBar;");
-
 var EditorBar = function EditorBar() {
   return /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBar, {
     className: topBar,
@@ -36,6 +29,5 @@ var EditorBar = function EditorBar() {
     alignEnd: true
   }, (0, _plugins.renderPlugins)("content-model-editor-default-bar-right")));
 };
-
 var _default = EditorBar;
 exports.default = _default;

package/admin/components/ContentModelEditor/Header.js.map

@@ -1 +1 @@
-{"version":3,"names":["topBar","css","boxShadow","EditorBar","width","renderPlugins"],"sources":["Header.tsx"],"sourcesContent":["import React from \"react\";\nimport { TopAppBar, TopAppBarSection } from \"@webiny/ui/TopAppBar\";\nimport { renderPlugins } from \"@webiny/app/plugins\";\n\nimport { css } from \"emotion\";\n\nconst topBar = css({\n    boxShadow: \"1px 0px 5px 0px rgba(128,128,128,1)\"\n});\n\nconst EditorBar: React.FC = () => {\n    return (\n        <TopAppBar className={topBar} fixed data-testid={\"cms-editor-top-bar\"}>\n            <TopAppBarSection style={{ width: \"50%\" }} alignEnd>\n                {renderPlugins(\"content-model-editor-default-bar-left\")}\n            </TopAppBarSection>\n\n            <TopAppBarSection style={{ width: \"50%\" }} alignEnd>\n                {renderPlugins(\"content-model-editor-default-bar-right\")}\n            </TopAppBarSection>\n        </TopAppBar>\n    );\n};\n\nexport default EditorBar;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,MAAM,gBAAG,IAAAC,YAAA,EAAI;EACfC,SAAS,EAAE;AADI,CAAJ,kBAAf;;AAIA,IAAMC,SAAmB,GAAG,SAAtBA,SAAsB,GAAM;EAC9B,oBACI,6BAAC,oBAAD;IAAW,SAAS,EAAEH,MAAtB;IAA8B,KAAK,MAAnC;IAAoC,eAAa;EAAjD,gBACI,6BAAC,2BAAD;IAAkB,KAAK,EAAE;MAAEI,KAAK,EAAE;IAAT,CAAzB;IAA2C,QAAQ;EAAnD,GACK,IAAAC,sBAAA,EAAc,uCAAd,CADL,CADJ,eAKI,6BAAC,2BAAD;IAAkB,KAAK,EAAE;MAAED,KAAK,EAAE;IAAT,CAAzB;IAA2C,QAAQ;EAAnD,GACK,IAAAC,sBAAA,EAAc,wCAAd,CADL,CALJ,CADJ;AAWH,CAZD;;eAceF,S"}
+{"version":3,"names":["topBar","css","boxShadow","EditorBar","width","renderPlugins"],"sources":["Header.tsx"],"sourcesContent":["import React from \"react\";\nimport { TopAppBar, TopAppBarSection } from \"@webiny/ui/TopAppBar\";\nimport { renderPlugins } from \"@webiny/app/plugins\";\n\nimport { css } from \"emotion\";\n\nconst topBar = css({\n    boxShadow: \"1px 0px 5px 0px rgba(128,128,128,1)\"\n});\n\nconst EditorBar: React.FC = () => {\n    return (\n        <TopAppBar className={topBar} fixed data-testid={\"cms-editor-top-bar\"}>\n            <TopAppBarSection style={{ width: \"50%\" }} alignEnd>\n                {renderPlugins(\"content-model-editor-default-bar-left\")}\n            </TopAppBarSection>\n\n            <TopAppBarSection style={{ width: \"50%\" }} alignEnd>\n                {renderPlugins(\"content-model-editor-default-bar-right\")}\n            </TopAppBarSection>\n        </TopAppBar>\n    );\n};\n\nexport default EditorBar;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA;AAEA,IAAMA,MAAM,gBAAG,IAAAC,YAAG,EAAC;EACfC,SAAS,EAAE;AACf,CAAC,kBAAC;AAEF,IAAMC,SAAmB,GAAG,SAAtBA,SAAmB,GAAS;EAC9B,oBACI,6BAAC,oBAAS;IAAC,SAAS,EAAEH,MAAO;IAAC,KAAK;IAAC,eAAa;EAAqB,gBAClE,6BAAC,2BAAgB;IAAC,KAAK,EAAE;MAAEI,KAAK,EAAE;IAAM,CAAE;IAAC,QAAQ;EAAA,GAC9C,IAAAC,sBAAa,EAAC,uCAAuC,CAAC,CACxC,eAEnB,6BAAC,2BAAgB;IAAC,KAAK,EAAE;MAAED,KAAK,EAAE;IAAM,CAAE;IAAC,QAAQ;EAAA,GAC9C,IAAAC,sBAAa,EAAC,wCAAwC,CAAC,CACzC,CACX;AAEpB,CAAC;AAAC,eAEaF,SAAS;AAAA"}

package/admin/components/ContentModelEditor/PreviewTab.js

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PreviewTab = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _emotion = require("emotion");
-
 var _Elevation = require("@webiny/ui/Elevation");
-
 var _i18n = require("@webiny/app/i18n");
-
-var _useContentModelEditor = require("./useContentModelEditor");
-
+var _hooks = require("../../hooks");
 var _ContentEntryFormPreview = require("../ContentEntryForm/ContentEntryFormPreview");
-
 var _templateObject;
-
 var t = _i18n.i18n.ns("app-headless-cms/admin/components/editor/tabs/preview");
-
 var formPreviewWrapper = /*#__PURE__*/(0, _emotion.css)({
   padding: 40,
   margin: 40,
@@ -35,13 +24,10 @@ var style = {
     textAlign: "center"
   }, "label:noFieldsMessage;")
 };
-
 var PreviewTab = function PreviewTab(_ref) {
   var activeTab = _ref.activeTab;
-
-  var _useContentModelEdito = (0, _useContentModelEditor.useContentModelEditor)(),
-      data = _useContentModelEdito.data;
-
+  var _useModelEditor = (0, _hooks.useModelEditor)(),
+    data = _useModelEditor.data;
   return /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
     z: 1,
     className: formPreviewWrapper
@@ -51,5 +37,4 @@ var PreviewTab = function PreviewTab(_ref) {
     className: style.noFieldsMessage
   }, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Before previewing the form, please add at least one field to the content model."])))));
 };
-
 exports.PreviewTab = PreviewTab;

package/admin/components/ContentModelEditor/PreviewTab.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","formPreviewWrapper","css","padding","margin","boxSizing","style","noFieldsMessage","textAlign","PreviewTab","activeTab","useContentModelEditor","data","fields","length"],"sources":["PreviewTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsEditorContentTab } from \"~/types\";\nimport { useContentModelEditor } from \"~/admin/components/ContentModelEditor/useContentModelEditor\";\nimport { ContentEntryFormPreview } from \"../ContentEntryForm/ContentEntryFormPreview\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/tabs/preview\");\n\nconst formPreviewWrapper = css({\n    padding: 40,\n    margin: 40,\n    boxSizing: \"border-box\"\n});\n\nconst style = {\n    noFieldsMessage: css({\n        textAlign: \"center\"\n    })\n};\n\nexport const PreviewTab: CmsEditorContentTab = ({ activeTab }) => {\n    const { data } = useContentModelEditor();\n\n    return (\n        <Elevation z={1} className={formPreviewWrapper}>\n            {data.fields && data.fields.length && activeTab ? (\n                <ContentEntryFormPreview contentModel={data} />\n            ) : (\n                <div className={style.noFieldsMessage}>\n                    {t`Before previewing the form, please add at least one field to the content model.`}\n                </div>\n            )}\n        </Elevation>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,uDAAR,CAAV;;AAEA,IAAMC,kBAAkB,gBAAG,IAAAC,YAAA,EAAI;EAC3BC,OAAO,EAAE,EADkB;EAE3BC,MAAM,EAAE,EAFmB;EAG3BC,SAAS,EAAE;AAHgB,CAAJ,8BAA3B;AAMA,IAAMC,KAAK,GAAG;EACVC,eAAe,eAAE,IAAAL,YAAA,EAAI;IACjBM,SAAS,EAAE;EADM,CAAJ;AADP,CAAd;;AAMO,IAAMC,UAA+B,GAAG,SAAlCA,UAAkC,OAAmB;EAAA,IAAhBC,SAAgB,QAAhBA,SAAgB;;EAC9D,4BAAiB,IAAAC,4CAAA,GAAjB;EAAA,IAAQC,IAAR,yBAAQA,IAAR;;EAEA,oBACI,6BAAC,oBAAD;IAAW,CAAC,EAAE,CAAd;IAAiB,SAAS,EAAEX;EAA5B,GACKW,IAAI,CAACC,MAAL,IAAeD,IAAI,CAACC,MAAL,CAAYC,MAA3B,IAAqCJ,SAArC,gBACG,6BAAC,gDAAD;IAAyB,YAAY,EAAEE;EAAvC,EADH,gBAGG;IAAK,SAAS,EAAEN,KAAK,CAACC;EAAtB,GACKT,CADL,mKAJR,CADJ;AAWH,CAdM"}
+{"version":3,"names":["t","i18n","ns","formPreviewWrapper","css","padding","margin","boxSizing","style","noFieldsMessage","textAlign","PreviewTab","activeTab","useModelEditor","data","fields","length"],"sources":["PreviewTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsEditorContentTab } from \"~/types\";\nimport { useModelEditor } from \"~/admin/hooks\";\nimport { ContentEntryFormPreview } from \"../ContentEntryForm/ContentEntryFormPreview\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/tabs/preview\");\n\nconst formPreviewWrapper = css({\n    padding: 40,\n    margin: 40,\n    boxSizing: \"border-box\"\n});\n\nconst style = {\n    noFieldsMessage: css({\n        textAlign: \"center\"\n    })\n};\n\nexport const PreviewTab: CmsEditorContentTab = ({ activeTab }) => {\n    const { data } = useModelEditor();\n\n    return (\n        <Elevation z={1} className={formPreviewWrapper}>\n            {data.fields && data.fields.length && activeTab ? (\n                <ContentEntryFormPreview contentModel={data} />\n            ) : (\n                <div className={style.noFieldsMessage}>\n                    {t`Before previewing the form, please add at least one field to the content model.`}\n                </div>\n            )}\n        </Elevation>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AAAsF;AAEtF,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,uDAAuD,CAAC;AAE1E,IAAMC,kBAAkB,gBAAG,IAAAC,YAAG,EAAC;EAC3BC,OAAO,EAAE,EAAE;EACXC,MAAM,EAAE,EAAE;EACVC,SAAS,EAAE;AACf,CAAC,8BAAC;AAEF,IAAMC,KAAK,GAAG;EACVC,eAAe,eAAE,IAAAL,YAAG,EAAC;IACjBM,SAAS,EAAE;EACf,CAAC;AACL,CAAC;AAEM,IAAMC,UAA+B,GAAG,SAAlCA,UAA+B,OAAsB;EAAA,IAAhBC,SAAS,QAATA,SAAS;EACvD,sBAAiB,IAAAC,qBAAc,GAAE;IAAzBC,IAAI,mBAAJA,IAAI;EAEZ,oBACI,6BAAC,oBAAS;IAAC,CAAC,EAAE,CAAE;IAAC,SAAS,EAAEX;EAAmB,GAC1CW,IAAI,CAACC,MAAM,IAAID,IAAI,CAACC,MAAM,CAACC,MAAM,IAAIJ,SAAS,gBAC3C,6BAAC,gDAAuB;IAAC,YAAY,EAAEE;EAAK,EAAG,gBAE/C;IAAK,SAAS,EAAEN,KAAK,CAACC;EAAgB,GACjCT,CAAC,mKAET,CACO;AAEpB,CAAC;AAAC"}

package/admin/components/ContentModelEditor/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ContentModelEditorProvider";
+export * from "./useModelEditor";

package/admin/components/ContentModelEditor/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ContentModelEditorProvider = require("./ContentModelEditorProvider");
+Object.keys(_ContentModelEditorProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ContentModelEditorProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ContentModelEditorProvider[key];
+    }
+  });
+});
+var _useModelEditor = require("./useModelEditor");
+Object.keys(_useModelEditor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useModelEditor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useModelEditor[key];
+    }
+  });
+});

package/admin/components/ContentModelEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ContentModelEditorProvider\";\nexport * from \"./useModelEditor\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/admin/components/ContentModelEditor/useModelEditor.d.ts

@@ -0,0 +1 @@
+export declare function useModelEditor(): import("./ContentModelEditorProvider").ContentModelEditorProviderContext;

package/admin/components/ContentModelEditor/{useContentModelEditor.js → useModelEditor.js}

@@ -1,22 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useContentModelEditor = useContentModelEditor;
-
+exports.useModelEditor = useModelEditor;
 var _react = _interopRequireDefault(require("react"));
-
-var _Context = require("./Context");
-
-function useContentModelEditor() {
-  var context = _react.default.useContext(_Context.contentModelEditorContext);
-
+var _ContentModelEditorProvider = require("./ContentModelEditorProvider");
+function useModelEditor() {
+  var context = _react.default.useContext(_ContentModelEditorProvider.contentModelEditorContext);
   if (!context) {
     throw new Error("useContentModelEditor must be used within a ContentModelEditorProvider");
   }
-
   return context;
 }

package/admin/components/ContentModelEditor/useModelEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useModelEditor","context","React","useContext","contentModelEditorContext","Error"],"sources":["useModelEditor.ts"],"sourcesContent":["import React from \"react\";\nimport { contentModelEditorContext } from \"./ContentModelEditorProvider\";\n\nexport function useModelEditor() {\n    const context = React.useContext(contentModelEditorContext);\n    if (!context) {\n        throw new Error(\"useContentModelEditor must be used within a ContentModelEditorProvider\");\n    }\n\n    return context;\n}\n"],"mappings":";;;;;;;AAAA;AACA;AAEO,SAASA,cAAc,GAAG;EAC7B,IAAMC,OAAO,GAAGC,cAAK,CAACC,UAAU,CAACC,qDAAyB,CAAC;EAC3D,IAAI,CAACH,OAAO,EAAE;IACV,MAAM,IAAII,KAAK,CAAC,wEAAwE,CAAC;EAC7F;EAEA,OAAOJ,OAAO;AAClB"}

package/admin/{views/contentModelGroups → components}/DelayedOnChange.js

@@ -1,50 +1,31 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _noop = _interopRequireDefault(require("lodash/noop"));
-
 var _excluded = ["children"];
-
 var DelayedOnChange = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(DelayedOnChange, _React$Component);
-
   var _super = (0, _createSuper2.default)(DelayedOnChange);
-
   function DelayedOnChange() {
     var _this;
-
     (0, _classCallCheck2.default)(this, DelayedOnChange);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "delay", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
@@ -54,7 +35,6 @@ var DelayedOnChange = /*#__PURE__*/function (_React$Component) {
       var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _noop.default;
       _this.delay && clearTimeout(_this.delay);
       _this.delay = null;
-
       _this.props.onChange(value, callback);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (value) {
@@ -71,7 +51,6 @@ var DelayedOnChange = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-
   (0, _createClass2.default)(DelayedOnChange, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -83,10 +62,9 @@ var DelayedOnChange = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props = this.props,
-          children = _this$props.children,
-          other = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+        children = _this$props.children,
+        other = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       var newProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, other), {}, {
         value: this.state.value,
         onChange: this.onChange
@@ -95,20 +73,19 @@ var DelayedOnChange = /*#__PURE__*/function (_React$Component) {
       var child = renderProp ? renderProp(newProps) : /*#__PURE__*/React.cloneElement(children, newProps);
       var props = (0, _objectSpread2.default)({}, child.props);
       var realOnKeyDown = props.onKeyDown || _noop.default;
-      var realOnBlur = props.onBlur || _noop.default; // Need to apply value if input lost focus
+      var realOnBlur = props.onBlur || _noop.default;
 
+      // Need to apply value if input lost focus
       props.onBlur = function (ev) {
         ev.persist();
-
         _this2.applyValue(ev.target.value, function () {
           return realOnBlur(ev);
         });
-      }; // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.
-
+      };
 
+      // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.
       props.onKeyDown = function (ev) {
         ev.persist();
-
         if (ev.key === "Tab") {
           _this2.applyValue(ev.target.value, function () {
             return realOnKeyDown(ev);
@@ -121,13 +98,11 @@ var DelayedOnChange = /*#__PURE__*/function (_React$Component) {
           realOnKeyDown(ev);
         }
       };
-
       return /*#__PURE__*/React.cloneElement(child, props);
     }
   }]);
   return DelayedOnChange;
 }(React.Component);
-
 (0, _defineProperty2.default)(DelayedOnChange, "defaultProps", {
   delay: 400
 });

package/admin/{views/contentModelGroups → components}/DelayedOnChange.js.map

@@ -1 +1 @@
-{"version":3,"names":["DelayedOnChange","value","callback","noop","delay","clearTimeout","props","onChange","setState","changed","setTimeout","applyValue","state","children","other","newProps","renderProp","child","React","cloneElement","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key","Component"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import * as React from \"react\";\nimport noop from \"lodash/noop\";\n\n/**\n * This component is used to wrap Input and Textarea components to optimize form re-render.\n * These 2 are the only components that trigger form model change on each character input.\n * This means, whenever you type a letter an entire form re-renders.\n * On complex forms you will feel and see a significant delay if this component is not used.\n *\n * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when\n * a user stops typing for given period of time (400ms by default).\n */\ninterface OnChangeCbCallable {\n    (value: string): void;\n}\ninterface OnChangeCallable {\n    (value: string, cb?: OnChangeCbCallable): void;\n}\ninterface ChildrenParams {\n    value: string;\n    onChange: OnChangeCallable;\n}\ninterface DelayedOnChangeProps {\n    delay?: number;\n    value?: string;\n    onChange: OnChangeCallable;\n    onKeyDown?: (ev: React.SyntheticEvent) => void;\n    onBlur?: (ev: React.SyntheticEvent) => void;\n    children: (params: ChildrenParams) => React.ReactElement;\n}\ninterface DelayedOnChangeState {\n    value?: string;\n}\nclass DelayedOnChange extends React.Component<DelayedOnChangeProps, DelayedOnChangeState> {\n    static defaultProps: Partial<DelayedOnChangeProps> = {\n        delay: 400\n    };\n\n    private delay: number | null = null;\n\n    public override readonly state: DelayedOnChangeState = {\n        value: \"\"\n    };\n\n    public override componentDidMount() {\n        this.setState({ value: this.props.value });\n    }\n\n    private applyValue = (value: any, callback: OnChangeCbCallable = noop): void => {\n        this.delay && clearTimeout(this.delay);\n        this.delay = null;\n        this.props.onChange(value, callback);\n    };\n\n    private onChange = (value: string): void => {\n        this.setState({ value }, this.changed);\n    };\n\n    private changed = (): void => {\n        this.delay && clearTimeout(this.delay);\n        this.delay = null;\n        this.delay = setTimeout(\n            () => this.applyValue(this.state.value),\n            this.props.delay\n        ) as unknown as number;\n    };\n\n    public override render(): React.ReactNode {\n        const { children, ...other } = this.props;\n        const newProps: Omit<DelayedOnChangeProps, \"children\"> = {\n            ...other,\n            value: this.state.value,\n            onChange: this.onChange\n        };\n\n        const renderProp = typeof children === \"function\" ? children : false;\n        const child = renderProp\n            ? renderProp(newProps as Required<DelayedOnChangeProps>)\n            : React.cloneElement(children as unknown as React.ReactElement, newProps);\n\n        const props = { ...child.props };\n        const realOnKeyDown = props.onKeyDown || noop;\n        const realOnBlur = props.onBlur || noop;\n\n        // Need to apply value if input lost focus\n        props.onBlur = (ev: React.SyntheticEvent) => {\n            ev.persist();\n            this.applyValue((ev.target as HTMLInputElement).value, () => realOnBlur(ev));\n        };\n\n        // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.\n        props.onKeyDown = (ev: React.KeyboardEvent) => {\n            ev.persist();\n            if (ev.key === \"Tab\") {\n                this.applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n            } else if (ev.key === \"Enter\" && props[\"data-on-enter\"]) {\n                this.applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n            } else {\n                realOnKeyDown(ev);\n            }\n        };\n\n        return React.cloneElement(child, props);\n    }\n}\n\nexport default DelayedOnChange;\n"],"mappings":"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"}
+{"version":3,"names":["DelayedOnChange","value","callback","noop","delay","clearTimeout","props","onChange","setState","changed","setTimeout","applyValue","state","children","other","newProps","renderProp","child","React","cloneElement","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key","Component"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import * as React from \"react\";\nimport noop from \"lodash/noop\";\n\n/**\n * This component is used to wrap Input and Textarea components to optimize form re-render.\n * These 2 are the only components that trigger form model change on each character input.\n * This means, whenever you type a letter an entire form re-renders.\n * On complex forms you will feel and see a significant delay if this component is not used.\n *\n * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when\n * a user stops typing for given period of time (400ms by default).\n */\ninterface OnChangeCbCallable {\n    (value: string): void;\n}\ninterface OnChangeCallable {\n    (value: string, cb?: OnChangeCbCallable): void;\n}\ninterface ChildrenParams {\n    value: string;\n    onChange: OnChangeCallable;\n}\ninterface DelayedOnChangeProps {\n    delay?: number;\n    value?: string;\n    onChange: OnChangeCallable;\n    onKeyDown?: (ev: React.SyntheticEvent) => void;\n    onBlur?: (ev: React.SyntheticEvent) => void;\n    children: (params: ChildrenParams) => React.ReactElement;\n}\ninterface DelayedOnChangeState {\n    value?: string;\n}\nclass DelayedOnChange extends React.Component<DelayedOnChangeProps, DelayedOnChangeState> {\n    static defaultProps: Partial<DelayedOnChangeProps> = {\n        delay: 400\n    };\n\n    private delay: number | null = null;\n\n    public override readonly state: DelayedOnChangeState = {\n        value: \"\"\n    };\n\n    public override componentDidMount() {\n        this.setState({ value: this.props.value });\n    }\n\n    private applyValue = (value: any, callback: OnChangeCbCallable = noop): void => {\n        this.delay && clearTimeout(this.delay);\n        this.delay = null;\n        this.props.onChange(value, callback);\n    };\n\n    private onChange = (value: string): void => {\n        this.setState({ value }, this.changed);\n    };\n\n    private changed = (): void => {\n        this.delay && clearTimeout(this.delay);\n        this.delay = null;\n        this.delay = setTimeout(\n            () => this.applyValue(this.state.value),\n            this.props.delay\n        ) as unknown as number;\n    };\n\n    public override render(): React.ReactNode {\n        const { children, ...other } = this.props;\n        const newProps: Omit<DelayedOnChangeProps, \"children\"> = {\n            ...other,\n            value: this.state.value,\n            onChange: this.onChange\n        };\n\n        const renderProp = typeof children === \"function\" ? children : false;\n        const child = renderProp\n            ? renderProp(newProps as Required<DelayedOnChangeProps>)\n            : React.cloneElement(children as unknown as React.ReactElement, newProps);\n\n        const props = { ...child.props };\n        const realOnKeyDown = props.onKeyDown || noop;\n        const realOnBlur = props.onBlur || noop;\n\n        // Need to apply value if input lost focus\n        props.onBlur = (ev: React.SyntheticEvent) => {\n            ev.persist();\n            this.applyValue((ev.target as HTMLInputElement).value, () => realOnBlur(ev));\n        };\n\n        // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.\n        props.onKeyDown = (ev: React.KeyboardEvent) => {\n            ev.persist();\n            if (ev.key === \"Tab\") {\n                this.applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n            } else if (ev.key === \"Enter\" && props[\"data-on-enter\"]) {\n                this.applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n            } else {\n                realOnKeyDown(ev);\n            }\n        };\n\n        return React.cloneElement(child, props);\n    }\n}\n\nexport default DelayedOnChange;\n"],"mappings":"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"}

package/admin/components/Dialog.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Dialog as BaseDialog } from "@webiny/ui/Dialog";
+export * from "@webiny/ui/Dialog";
+export declare const Dialog: import("@emotion/styled").StyledComponent<import("@webiny/ui/Dialog").DialogProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {
+    ref?: import("react").Ref<BaseDialog> | undefined;
+}>;

package/admin/components/Dialog.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Dialog: true
+};
+exports.Dialog = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Dialog = require("@webiny/ui/Dialog");
+Object.keys(_Dialog).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Dialog[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dialog[key];
+    }
+  });
+});
+var Dialog = /*#__PURE__*/(0, _styled.default)(_Dialog.Dialog, {
+  label: "Dialog",
+  target: "e1q5k1p00"
+})(".mdc-dialog__surface{width:600px;min-width:600px;overflow:initial;}.mdc-dialog__content{overflow:initial !important;.mdc-list:first-of-type{padding:0;}}");
+exports.Dialog = Dialog;

package/admin/components/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Dialog","styled","BaseDialog"],"sources":["Dialog.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Dialog as BaseDialog } from \"@webiny/ui/Dialog\";\nexport * from \"@webiny/ui/Dialog\";\n\nexport const Dialog = styled(BaseDialog)`\n    .mdc-dialog__surface {\n        width: 600px;\n        min-width: 600px;\n        overflow: initial;\n    }\n\n    .mdc-dialog__content {\n        overflow: initial !important;\n        .mdc-list:first-of-type {\n            padding: 0;\n        }\n    }\n`;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAEO,IAAMA,MAAM,oBAAGC,eAAM,EAACC,cAAU;EAAA;EAAA;AAAA,8JAatC;AAAC"}