@webiny/app-headless-cms 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/admin/plugins/fieldRenderers/object/MultiValueContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","generateAlphaNumericLowerCaseId","Cell","useConfirmationDialog","MultiValueItemContainer","Fields","DynamicSection","dynamicSectionGridStyle","fieldsGridStyle","fieldsWrapperStyle","ItemHighLight","ObjectItem","FieldSettings","useModelField","useModel","MultiValueContainer","props","highlightMap","setHighlightIndex","itemState","setItemState","model","field","showConfirmation","message","acceptLabel","cancelLabel","fieldSettings","createFrom","hasFields","logMissingFields","toggleItemState","index","state","onAddItem","settings","getSettings","createElement","Object","assign","showLabel","showTitle","emptyValue","gridClassName","Bind","bind","onMoveDown","moveValueDown","map","onMoveUp","moveValueUp","onDelete","removeValue","key","value","title","label","isFirst","isLast","length","isExpanded","toggleExpanded","span","className","contentModel","fields","layout"],"sources":["MultiValueContainer.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\nimport type {\n    BindComponentRenderProp,\n    CmsModelFieldRendererProps\n} from \"@webiny/app-headless-cms-common/types\";\nimport { MultiValueItemContainer } from \"~/admin/plugins/fieldRenderers/object/MultiValueItemContainer\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport DynamicSection from \"~/admin/plugins/fieldRenderers/DynamicSection\";\nimport {\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    fieldsWrapperStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"~/admin/plugins/fieldRenderers/object/StyledComponents\";\nimport { FieldSettings } from \"~/admin/plugins/fieldRenderers/object/FieldSettings\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider\";\nimport { useModel } from \"~/admin/components/ModelProvider\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\nexport interface MultiValueContainerProps {\n    bind: BindComponentRenderProp;\n    getBind: GetBind;\n    showTitle?: boolean;\n}\n\nexport const MultiValueContainer = (props: MultiValueContainerProps) => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const [itemState, setItemState] = useState<{ [key: number]: boolean }>({});\n\n    const { model } = useModel();\n    const { field } = useModelField();\n\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to delete this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const fieldSettings = FieldSettings.createFrom(field);\n\n    if (!fieldSettings.hasFields()) {\n        fieldSettings.logMissingFields();\n        return null;\n    }\n\n    const toggleItemState = (index: number) => {\n        setItemState(state => ({ ...state, [index]: !state[index] }));\n    };\n\n    const onAddItem = (index: number) => {\n        setItemState(state => ({ ...state, [index]: true }));\n    };\n\n    const settings = fieldSettings.getSettings();\n\n    return (\n        <DynamicSection\n            {...props}\n            showLabel={props.showTitle}\n            field={field}\n            emptyValue={{}}\n            onAddItem={onAddItem}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => {\n                const onMoveDown = () => {\n                    bind.field.moveValueDown(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index + 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index + 1]: state[index] ?? false,\n                            [index]: state[index + 1] ?? false\n                        };\n                    });\n                };\n\n                const onMoveUp = () => {\n                    bind.field.moveValueUp(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index - 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index - 1]: state[index] ?? false,\n                            [index]: state[index - 1] ?? false\n                        };\n                    });\n                };\n\n                const onDelete = () => {\n                    showConfirmation(() => {\n                        bind.field.removeValue(index);\n                    });\n                };\n\n                return (\n                    <ObjectItem>\n                        {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                        <MultiValueItemContainer\n                            value={bind.index.value}\n                            title={`${field.label} #${index + 1}`}\n                            isFirst={index === 0}\n                            isLast={index === bind.field.value.length - 1}\n                            onMoveUp={onMoveUp}\n                            onMoveDown={onMoveDown}\n                            onDelete={onDelete}\n                            isExpanded={itemState[index] ?? false}\n                            toggleExpanded={() => toggleItemState(index)}\n                        >\n                            <Cell span={12} className={fieldsWrapperStyle}>\n                                <Fields\n                                    Bind={Bind}\n                                    contentModel={model}\n                                    fields={settings.fields}\n                                    layout={settings.layout}\n                                    gridClassName={fieldsGridStyle}\n                                />\n                            </Cell>\n                        </MultiValueItemContainer>\n                    </ObjectItem>\n                );\n            }}\n        </DynamicSection>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/MultiValueItemContainer.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import type { GenericRecord } from "@webiny/app/types";
+export interface MultiValueItemContainerProps {
+    value: GenericRecord<string>;
+    isFirst: boolean;
+    isLast: boolean;
+    onMoveUp: () => void;
+    onMoveDown: () => void;
+    onDelete: () => void;
+    isExpanded: boolean;
+    toggleExpanded: () => void;
+    title: string;
+    children: React.ReactNode;
+}
+export declare const MultiValueItemContainer: (({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element) & {
+    original: ({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element) & {
+        original: ({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element) & {
+        original: ({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};

package/admin/plugins/fieldRenderers/object/MultiValueItemContainer.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { makeDecoratable } from "@webiny/react-composition";
+import Accordion from "../Accordion";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
+import { ReactComponent as ArrowUp } from "@webiny/icons/arrow_drop_up.svg";
+import { ReactComponent as ArrowDown } from "@webiny/icons/arrow_drop_down.svg";
+import { IconButton } from "@webiny/ui/Button";
+export const MultiValueItemContainer = makeDecoratable("MultiValueItemContainer", ({
+  children,
+  ...props
+}) => {
+  const {
+    onMoveUp,
+    onMoveDown,
+    onDelete,
+    isLast,
+    isFirst
+  } = props;
+  const actions = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
+    icon: /*#__PURE__*/React.createElement(ArrowDown, null),
+    onClick: e => {
+      e.stopPropagation();
+      onMoveDown();
+    },
+    disabled: isLast
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    icon: /*#__PURE__*/React.createElement(ArrowUp, null),
+    onClick: e => {
+      e.stopPropagation();
+      onMoveUp();
+    },
+    disabled: isFirst
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+    onClick: e => {
+      e.stopPropagation();
+      onDelete();
+    }
+  }));
+  return /*#__PURE__*/React.createElement(Accordion, {
+    title: props.title,
+    action: actions,
+    isExpanded: props.isExpanded,
+    toggleExpanded: props.toggleExpanded
+  }, children);
+});
+
+//# sourceMappingURL=MultiValueItemContainer.js.map

package/admin/plugins/fieldRenderers/object/MultiValueItemContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","makeDecoratable","Accordion","ReactComponent","DeleteIcon","ArrowUp","ArrowDown","IconButton","MultiValueItemContainer","children","props","onMoveUp","onMoveDown","onDelete","isLast","isFirst","actions","createElement","Fragment","icon","onClick","e","stopPropagation","disabled","title","action","isExpanded","toggleExpanded"],"sources":["MultiValueItemContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport Accordion from \"~/admin/plugins/fieldRenderers/Accordion\";\nimport type { GenericRecord } from \"@webiny/app/types\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as ArrowUp } from \"@webiny/icons/arrow_drop_up.svg\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/arrow_drop_down.svg\";\nimport { IconButton } from \"@webiny/ui/Button\";\n\nexport interface MultiValueItemContainerProps {\n    value: GenericRecord<string>;\n    isFirst: boolean;\n    isLast: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    isExpanded: boolean;\n    toggleExpanded: () => void;\n    title: string;\n    children: React.ReactNode;\n}\n\nexport const MultiValueItemContainer = makeDecoratable(\n    \"MultiValueItemContainer\",\n    ({ children, ...props }: MultiValueItemContainerProps) => {\n        const { onMoveUp, onMoveDown, onDelete, isLast, isFirst } = props;\n\n        const actions = (\n            <>\n                <IconButton\n                    icon={<ArrowDown />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onMoveDown();\n                    }}\n                    disabled={isLast}\n                />\n                <IconButton\n                    icon={<ArrowUp />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onMoveUp();\n                    }}\n                    disabled={isFirst}\n                />\n                <IconButton\n                    icon={<DeleteIcon />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onDelete();\n                    }}\n                />\n            </>\n        );\n\n        return (\n            <Accordion\n                title={props.title}\n                action={actions}\n                isExpanded={props.isExpanded}\n                toggleExpanded={props.toggleExpanded}\n            >\n                {children}\n            </Accordion>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,OAAOC,SAAS;AAEhB,SAASC,cAAc,IAAIC,UAAU,QAAQ,kCAAkC;AAC/E,SAASD,cAAc,IAAIE,OAAO,QAAQ,iCAAiC;AAC3E,SAASF,cAAc,IAAIG,SAAS,QAAQ,mCAAmC;AAC/E,SAASC,UAAU,QAAQ,mBAAmB;AAe9C,OAAO,MAAMC,uBAAuB,GAAGP,eAAe,CAClD,yBAAyB,EACzB,CAAC;EAAEQ,QAAQ;EAAE,GAAGC;AAAoC,CAAC,KAAK;EACtD,MAAM;IAAEC,QAAQ;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,MAAM;IAAEC;EAAQ,CAAC,GAAGL,KAAK;EAEjE,MAAMM,OAAO,gBACThB,KAAA,CAAAiB,aAAA,CAAAjB,KAAA,CAAAkB,QAAA,qBACIlB,KAAA,CAAAiB,aAAA,CAACV,UAAU;IACPY,IAAI,eAAEnB,KAAA,CAAAiB,aAAA,CAACX,SAAS,MAAE,CAAE;IACpBc,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBV,UAAU,CAAC,CAAC;IAChB,CAAE;IACFW,QAAQ,EAAET;EAAO,CACpB,CAAC,eACFd,KAAA,CAAAiB,aAAA,CAACV,UAAU;IACPY,IAAI,eAAEnB,KAAA,CAAAiB,aAAA,CAACZ,OAAO,MAAE,CAAE;IAClBe,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBX,QAAQ,CAAC,CAAC;IACd,CAAE;IACFY,QAAQ,EAAER;EAAQ,CACrB,CAAC,eACFf,KAAA,CAAAiB,aAAA,CAACV,UAAU;IACPY,IAAI,eAAEnB,KAAA,CAAAiB,aAAA,CAACb,UAAU,MAAE,CAAE;IACrBgB,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBT,QAAQ,CAAC,CAAC;IACd;EAAE,CACL,CACH,CACL;EAED,oBACIb,KAAA,CAAAiB,aAAA,CAACf,SAAS;IACNsB,KAAK,EAAEd,KAAK,CAACc,KAAM;IACnBC,MAAM,EAAET,OAAQ;IAChBU,UAAU,EAAEhB,KAAK,CAACgB,UAAW;IAC7BC,cAAc,EAAEjB,KAAK,CAACiB;EAAe,GAEpClB,QACM,CAAC;AAEpB,CACJ,CAAC","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/StyledComponents.d.ts

@@ -1,4 +1,13 @@
+/// <reference types="react" />
 export declare const fieldsWrapperStyle: string;
 export declare const dynamicSectionTitleStyle: string;
 export declare const dynamicSectionGridStyle: string;
 export declare const fieldsGridStyle: string;
+export declare const ObjectItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ItemHighLight: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/admin/plugins/fieldRenderers/object/StyledComponents.js

@@ -1,5 +1,82 @@
-import { css } from "emotion";
-export var fieldsWrapperStyle = /*#__PURE__*/css("border-left:2px solid var(--mdc-theme-on-background);padding-left:16px;&:focus-within{border-color:var(--mdc-theme-primary);}label:fieldsWrapperStyle;");
-export var dynamicSectionTitleStyle = /*#__PURE__*/css("margin-top:24px;label:dynamicSectionTitleStyle;");
-export var dynamicSectionGridStyle = /*#__PURE__*/css("& > .mdc-layout-grid__inner{grid-gap:8px;}label:dynamicSectionGridStyle;");
-export var fieldsGridStyle = /*#__PURE__*/css("&.mdc-layout-grid{padding:8px;}label:fieldsGridStyle;");
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { css } from "@emotion/css";
+export const fieldsWrapperStyle = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+  name: "1yd7z3y",
+  styles: "border-left:2px solid var(--mdc-theme-on-background);padding-left:16px;margin-left:6px;&:focus-within{border-color:var(--mdc-theme-primary);}"
+} : {
+  name: "tzi0gb-fieldsWrapperStyle",
+  styles: "border-left:2px solid var(--mdc-theme-on-background);padding-left:16px;margin-left:6px;&:focus-within{border-color:var(--mdc-theme-primary);};label:fieldsWrapperStyle;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR3FDIiwiZmlsZSI6IlN0eWxlZENvbXBvbmVudHMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcblxuZXhwb3J0IGNvbnN0IGZpZWxkc1dyYXBwZXJTdHlsZSA9IGNzc2BcbiAgICBib3JkZXItbGVmdDogMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKTtcbiAgICBwYWRkaW5nLWxlZnQ6IDE2cHg7XG4gICAgbWFyZ2luLWxlZnQ6IDZweDtcblxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1tZGMtdGhlbWUtcHJpbWFyeSk7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uVGl0bGVTdHlsZSA9IGNzc2BcbiAgICBtYXJnaW4tdG9wOiAyNHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uR3JpZFN0eWxlID0gY3NzYFxuICAgICYgPiAubWRjLWxheW91dC1ncmlkX19pbm5lciB7XG4gICAgICAgIGdyaWQtZ2FwOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGZpZWxkc0dyaWRTdHlsZSA9IGNzc2BcbiAgICAmLm1kYy1sYXlvdXQtZ3JpZCB7XG4gICAgICAgIHBhZGRpbmc6IDhweDtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgT2JqZWN0SXRlbSA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1IaWdoTGlnaHQgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIFwiJlwiOiB7XG4gICAgICAgIG9wYWNpdHk6IDAsXG4gICAgICAgIGFuaW1hdGlvbjogXCJ3Zi1ibGluay1pbiAxc1wiLFxuICAgICAgICBib3JkZXI6IFwiMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCIsXG4gICAgICAgIGJveFNoYWRvdzogXCIwIDAgMTVweCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmdiYSg0MiwgMjE3LCAxMzQsIDAuMjUpXCIsXG4gICAgICAgIGJvcmRlclJhZGl1czogXCIycHhcIixcbiAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBsZWZ0OiAtMTIsXG4gICAgICAgIHJpZ2h0OiAtOCxcbiAgICAgICAgYm90dG9tOiAwLFxuICAgICAgICB6SW5kZXg6IDEsXG4gICAgICAgIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiXG4gICAgfSxcbiAgICBcIkBrZXlmcmFtZXMgd2YtYmxpbmstaW5cIjogeyBcIjQwJVwiOiB7IG9wYWNpdHk6IDEgfSB9XG59KTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const dynamicSectionTitleStyle = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+  name: "1d0nbku",
+  styles: "margin-top:24px"
+} : {
+  name: "ni4rfk-dynamicSectionTitleStyle",
+  styles: "margin-top:24px;label:dynamicSectionTitleStyle;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYTJDIiwiZmlsZSI6IlN0eWxlZENvbXBvbmVudHMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcblxuZXhwb3J0IGNvbnN0IGZpZWxkc1dyYXBwZXJTdHlsZSA9IGNzc2BcbiAgICBib3JkZXItbGVmdDogMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKTtcbiAgICBwYWRkaW5nLWxlZnQ6IDE2cHg7XG4gICAgbWFyZ2luLWxlZnQ6IDZweDtcblxuICAgICY6Zm9jdXMtd2l0aGluIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1tZGMtdGhlbWUtcHJpbWFyeSk7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uVGl0bGVTdHlsZSA9IGNzc2BcbiAgICBtYXJnaW4tdG9wOiAyNHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNTZWN0aW9uR3JpZFN0eWxlID0gY3NzYFxuICAgICYgPiAubWRjLWxheW91dC1ncmlkX19pbm5lciB7XG4gICAgICAgIGdyaWQtZ2FwOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGZpZWxkc0dyaWRTdHlsZSA9IGNzc2BcbiAgICAmLm1kYy1sYXlvdXQtZ3JpZCB7XG4gICAgICAgIHBhZGRpbmc6IDhweDtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgT2JqZWN0SXRlbSA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEl0ZW1IaWdoTGlnaHQgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIFwiJlwiOiB7XG4gICAgICAgIG9wYWNpdHk6IDAsXG4gICAgICAgIGFuaW1hdGlvbjogXCJ3Zi1ibGluay1pbiAxc1wiLFxuICAgICAgICBib3JkZXI6IFwiMnB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCIsXG4gICAgICAgIGJveFNoYWRvdzogXCIwIDAgMTVweCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmdiYSg0MiwgMjE3LCAxMzQsIDAuMjUpXCIsXG4gICAgICAgIGJvcmRlclJhZGl1czogXCIycHhcIixcbiAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBsZWZ0OiAtMTIsXG4gICAgICAgIHJpZ2h0OiAtOCxcbiAgICAgICAgYm90dG9tOiAwLFxuICAgICAgICB6SW5kZXg6IDEsXG4gICAgICAgIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiXG4gICAgfSxcbiAgICBcIkBrZXlmcmFtZXMgd2YtYmxpbmstaW5cIjogeyBcIjQwJVwiOiB7IG9wYWNpdHk6IDEgfSB9XG59KTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const dynamicSectionGridStyle = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+  name: "6bwtfr",
+  styles: "&>.mdc-layout-grid__inner{grid-gap:8px;}"
+} : {
+  name: "c4xhr-dynamicSectionGridStyle",
+  styles: "&>.mdc-layout-grid__inner{grid-gap:8px;};label:dynamicSectionGridStyle;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUIwQyIsImZpbGUiOiJTdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNXcmFwcGVyU3R5bGUgPSBjc3NgXG4gICAgYm9yZGVyLWxlZnQ6IDJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZCk7XG4gICAgcGFkZGluZy1sZWZ0OiAxNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiA2cHg7XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpO1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvblRpdGxlU3R5bGUgPSBjc3NgXG4gICAgbWFyZ2luLXRvcDogMjRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvbkdyaWRTdHlsZSA9IGNzc2BcbiAgICAmID4gLm1kYy1sYXlvdXQtZ3JpZF9faW5uZXIge1xuICAgICAgICBncmlkLWdhcDogOHB4O1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNHcmlkU3R5bGUgPSBjc3NgXG4gICAgJi5tZGMtbGF5b3V0LWdyaWQge1xuICAgICAgICBwYWRkaW5nOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IE9iamVjdEl0ZW0gPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSGlnaExpZ2h0ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBcIiZcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICBhbmltYXRpb246IFwid2YtYmxpbmstaW4gMXNcIixcbiAgICAgICAgYm9yZGVyOiBcIjJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBib3hTaGFkb3c6IFwiMCAwIDE1cHggdmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEoNDIsIDIxNywgMTM0LCAwLjI1KVwiLFxuICAgICAgICBib3JkZXJSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgbGVmdDogLTEyLFxuICAgICAgICByaWdodDogLTgsXG4gICAgICAgIGJvdHRvbTogMCxcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIlxuICAgIH0sXG4gICAgXCJAa2V5ZnJhbWVzIHdmLWJsaW5rLWluXCI6IHsgXCI0MCVcIjogeyBvcGFjaXR5OiAxIH0gfVxufSk7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const fieldsGridStyle = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+  name: "1t4nest",
+  styles: "&.mdc-layout-grid{padding:8px;}"
+} : {
+  name: "17rca61-fieldsGridStyle",
+  styles: "&.mdc-layout-grid{padding:8px;};label:fieldsGridStyle;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJrQyIsImZpbGUiOiJTdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNXcmFwcGVyU3R5bGUgPSBjc3NgXG4gICAgYm9yZGVyLWxlZnQ6IDJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZCk7XG4gICAgcGFkZGluZy1sZWZ0OiAxNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiA2cHg7XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpO1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvblRpdGxlU3R5bGUgPSBjc3NgXG4gICAgbWFyZ2luLXRvcDogMjRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvbkdyaWRTdHlsZSA9IGNzc2BcbiAgICAmID4gLm1kYy1sYXlvdXQtZ3JpZF9faW5uZXIge1xuICAgICAgICBncmlkLWdhcDogOHB4O1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNHcmlkU3R5bGUgPSBjc3NgXG4gICAgJi5tZGMtbGF5b3V0LWdyaWQge1xuICAgICAgICBwYWRkaW5nOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IE9iamVjdEl0ZW0gPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSGlnaExpZ2h0ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBcIiZcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICBhbmltYXRpb246IFwid2YtYmxpbmstaW4gMXNcIixcbiAgICAgICAgYm9yZGVyOiBcIjJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBib3hTaGFkb3c6IFwiMCAwIDE1cHggdmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEoNDIsIDIxNywgMTM0LCAwLjI1KVwiLFxuICAgICAgICBib3JkZXJSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgbGVmdDogLTEyLFxuICAgICAgICByaWdodDogLTgsXG4gICAgICAgIGJvdHRvbTogMCxcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIlxuICAgIH0sXG4gICAgXCJAa2V5ZnJhbWVzIHdmLWJsaW5rLWluXCI6IHsgXCI0MCVcIjogeyBvcGFjaXR5OiAxIH0gfVxufSk7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const ObjectItem = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "efe1kdz1"
+} : {
+  target: "efe1kdz1",
+  label: "ObjectItem"
+})(process.env.NODE_ENV === "production" ? {
+  name: "bjn8wh",
+  styles: "position:relative"
+} : {
+  name: "bjn8wh",
+  styles: "position:relative",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkJvQyIsImZpbGUiOiJTdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNXcmFwcGVyU3R5bGUgPSBjc3NgXG4gICAgYm9yZGVyLWxlZnQ6IDJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZCk7XG4gICAgcGFkZGluZy1sZWZ0OiAxNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiA2cHg7XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpO1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvblRpdGxlU3R5bGUgPSBjc3NgXG4gICAgbWFyZ2luLXRvcDogMjRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvbkdyaWRTdHlsZSA9IGNzc2BcbiAgICAmID4gLm1kYy1sYXlvdXQtZ3JpZF9faW5uZXIge1xuICAgICAgICBncmlkLWdhcDogOHB4O1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNHcmlkU3R5bGUgPSBjc3NgXG4gICAgJi5tZGMtbGF5b3V0LWdyaWQge1xuICAgICAgICBwYWRkaW5nOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IE9iamVjdEl0ZW0gPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSGlnaExpZ2h0ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBcIiZcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICBhbmltYXRpb246IFwid2YtYmxpbmstaW4gMXNcIixcbiAgICAgICAgYm9yZGVyOiBcIjJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBib3hTaGFkb3c6IFwiMCAwIDE1cHggdmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEoNDIsIDIxNywgMTM0LCAwLjI1KVwiLFxuICAgICAgICBib3JkZXJSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgbGVmdDogLTEyLFxuICAgICAgICByaWdodDogLTgsXG4gICAgICAgIGJvdHRvbTogMCxcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIlxuICAgIH0sXG4gICAgXCJAa2V5ZnJhbWVzIHdmLWJsaW5rLWluXCI6IHsgXCI0MCVcIjogeyBvcGFjaXR5OiAxIH0gfVxufSk7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const ItemHighLight = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "efe1kdz0"
+} : {
+  target: "efe1kdz0",
+  label: "ItemHighLight"
+})({
+  "&": {
+    opacity: 0,
+    animation: "wf-blink-in 1s",
+    border: "2px solid var(--mdc-theme-secondary)",
+    boxShadow: "0 0 15px var(--mdc-theme-secondary)",
+    backgroundColor: "rgba(42, 217, 134, 0.25)",
+    borderRadius: "2px",
+    position: "absolute",
+    top: 0,
+    left: -12,
+    right: -8,
+    bottom: 0,
+    zIndex: 1,
+    pointerEvents: "none"
+  },
+  "@keyframes wf-blink-in": {
+    "40%": {
+      opacity: 1
+    }
+  }
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0eWxlZENvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUM2QiIsImZpbGUiOiJTdHlsZWRDb21wb25lbnRzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNXcmFwcGVyU3R5bGUgPSBjc3NgXG4gICAgYm9yZGVyLWxlZnQ6IDJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZCk7XG4gICAgcGFkZGluZy1sZWZ0OiAxNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiA2cHg7XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpO1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvblRpdGxlU3R5bGUgPSBjc3NgXG4gICAgbWFyZ2luLXRvcDogMjRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBkeW5hbWljU2VjdGlvbkdyaWRTdHlsZSA9IGNzc2BcbiAgICAmID4gLm1kYy1sYXlvdXQtZ3JpZF9faW5uZXIge1xuICAgICAgICBncmlkLWdhcDogOHB4O1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBmaWVsZHNHcmlkU3R5bGUgPSBjc3NgXG4gICAgJi5tZGMtbGF5b3V0LWdyaWQge1xuICAgICAgICBwYWRkaW5nOiA4cHg7XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IE9iamVjdEl0ZW0gPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJdGVtSGlnaExpZ2h0ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBcIiZcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICBhbmltYXRpb246IFwid2YtYmxpbmstaW4gMXNcIixcbiAgICAgICAgYm9yZGVyOiBcIjJweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICBib3hTaGFkb3c6IFwiMCAwIDE1cHggdmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEoNDIsIDIxNywgMTM0LCAwLjI1KVwiLFxuICAgICAgICBib3JkZXJSYWRpdXM6IFwiMnB4XCIsXG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgbGVmdDogLTEyLFxuICAgICAgICByaWdodDogLTgsXG4gICAgICAgIGJvdHRvbTogMCxcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIlxuICAgIH0sXG4gICAgXCJAa2V5ZnJhbWVzIHdmLWJsaW5rLWluXCI6IHsgXCI0MCVcIjogeyBvcGFjaXR5OiAxIH0gfVxufSk7XG4iXX0= */");
+
+//# sourceMappingURL=StyledComponents.js.map

package/admin/plugins/fieldRenderers/object/StyledComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["css","fieldsWrapperStyle","process","env","NODE_ENV","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","dynamicSectionTitleStyle","dynamicSectionGridStyle","fieldsGridStyle","ObjectItem","_styled","target","label","ItemHighLight","opacity","animation","border","boxShadow","backgroundColor","borderRadius","position","top","left","right","bottom","zIndex","pointerEvents"],"sources":["StyledComponents.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { css } from \"@emotion/css\";\n\nexport const fieldsWrapperStyle = css`\n    border-left: 2px solid var(--mdc-theme-on-background);\n    padding-left: 16px;\n    margin-left: 6px;\n\n    &:focus-within {\n        border-color: var(--mdc-theme-primary);\n    }\n`;\n\nexport const dynamicSectionTitleStyle = css`\n    margin-top: 24px;\n`;\n\nexport const dynamicSectionGridStyle = css`\n    & > .mdc-layout-grid__inner {\n        grid-gap: 8px;\n    }\n`;\n\nexport const fieldsGridStyle = css`\n    &.mdc-layout-grid {\n        padding: 8px;\n    }\n`;\n\nexport const ObjectItem = styled.div`\n    position: relative;\n`;\n\nexport const ItemHighLight = styled(\"div\")({\n    \"&\": {\n        opacity: 0,\n        animation: \"wf-blink-in 1s\",\n        border: \"2px solid var(--mdc-theme-secondary)\",\n        boxShadow: \"0 0 15px var(--mdc-theme-secondary)\",\n        backgroundColor: \"rgba(42, 217, 134, 0.25)\",\n        borderRadius: \"2px\",\n        position: \"absolute\",\n        top: 0,\n        left: -12,\n        right: -8,\n        bottom: 0,\n        zIndex: 1,\n        pointerEvents: \"none\"\n    },\n    \"@keyframes wf-blink-in\": { \"40%\": { opacity: 1 } }\n});\n"],"mappings":";;AACA,SAASA,GAAG,QAAQ,cAAc;AAElC,OAAO,MAAMC,kBAAkB,gBAAGD,GAAG,CAAAE,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAQpC;AAED,OAAO,MAAMC,wBAAwB,gBAAGV,GAAG,CAAAE,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAE1C;AAED,OAAO,MAAME,uBAAuB,gBAAGX,GAAG,CAAAE,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAIzC;AAED,OAAO,MAAMG,eAAe,gBAAGZ,GAAG,CAAAE,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAIjC;AAED,OAAO,MAAMI,UAAU,gBAAAC,OAAA,QAAAZ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAW,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAd,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAEtB;AAED,OAAO,MAAMQ,aAAa,gBAAGH,OAAA,CAAO,KAAK,EAAAZ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAW,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAC;EACvC,GAAG,EAAE;IACDE,OAAO,EAAE,CAAC;IACVC,SAAS,EAAE,gBAAgB;IAC3BC,MAAM,EAAE,sCAAsC;IAC9CC,SAAS,EAAE,qCAAqC;IAChDC,eAAe,EAAE,0BAA0B;IAC3CC,YAAY,EAAE,KAAK;IACnBC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC,EAAE;IACTC,KAAK,EAAE,CAAC,CAAC;IACTC,MAAM,EAAE,CAAC;IACTC,MAAM,EAAE,CAAC;IACTC,aAAa,EAAE;EACnB,CAAC;EACD,wBAAwB,EAAE;IAAE,KAAK,EAAE;MAAEZ,OAAO,EAAE;IAAE;EAAE;AACtD,CAAC,EAAAhB,OAAA,CAAAC,GAAA,CAAAC,QAAA,u4DAAC","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/index.d.ts

@@ -1,2 +1,24 @@
-declare const _default: import("../../../../types").CmsEditorFieldRendererPlugin[];
+/// <reference types="react" />
+export declare const Components: {
+    MultiValueItemContainer: (({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element) & {
+        original: ({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: (({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element) & {
+            original: ({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element) & {
+            original: ({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => import("react").JSX.Element;
+    };
+};
+declare const _default: import("@webiny/app-headless-cms-common/types").CmsModelFieldRendererPlugin[];
 export default _default;

package/admin/plugins/fieldRenderers/object/index.js

@@ -1,3 +1,11 @@
-import singleObject from "./singleObject";
+import singleObjectInline from "./singleObjectInline";
+import singleObjectAccordion from "./singleObjectAccordion";
 import multipleObjects from "./multipleObjects";
-export default [singleObject, multipleObjects];
+import multipleObjectsAccordion from "./multipleObjectsAccordion";
+import { MultiValueItemContainer } from "./MultiValueItemContainer";
+export const Components = {
+  MultiValueItemContainer
+};
+export default [singleObjectInline, singleObjectAccordion, multipleObjects, multipleObjectsAccordion];
+
+//# sourceMappingURL=index.js.map

package/admin/plugins/fieldRenderers/object/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["singleObjectInline","singleObjectAccordion","multipleObjects","multipleObjectsAccordion","MultiValueItemContainer","Components"],"sources":["index.ts"],"sourcesContent":["import singleObjectInline from \"./singleObjectInline\";\nimport singleObjectAccordion from \"./singleObjectAccordion\";\nimport multipleObjects from \"./multipleObjects\";\nimport multipleObjectsAccordion from \"./multipleObjectsAccordion\";\nimport { MultiValueItemContainer } from \"./MultiValueItemContainer\";\n\nexport const Components = {\n    MultiValueItemContainer\n};\n\nexport default [\n    singleObjectInline,\n    singleObjectAccordion,\n    multipleObjects,\n    multipleObjectsAccordion\n];\n"],"mappings":"AAAA,OAAOA,kBAAkB;AACzB,OAAOC,qBAAqB;AAC5B,OAAOC,eAAe;AACtB,OAAOC,wBAAwB;AAC/B,SAASC,uBAAuB;AAEhC,OAAO,MAAMC,UAAU,GAAG;EACtBD;AACJ,CAAC;AAED,eAAe,CACXJ,kBAAkB,EAClBC,qBAAqB,EACrBC,eAAe,EACfC,wBAAwB,CAC3B","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/multipleObjects.d.ts

@@ -1,3 +1,3 @@
-import { CmsEditorFieldRendererPlugin } from "../../../../types";
-declare const plugin: CmsEditorFieldRendererPlugin;
+import type { CmsModelFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsModelFieldRendererPlugin;
 export default plugin;

package/admin/plugins/fieldRenderers/object/multipleObjects.js

@@ -1,72 +1,38 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2;
-
 import React from "react";
 import { i18n } from "@webiny/app/i18n";
-import DynamicSection from "../DynamicSection";
-import { Fields } from "../../../components/ContentEntryForm/Fields";
-import { ReactComponent as DeleteIcon } from "@svgr/webpack!../../../icons/close.svg";
-import { IconButton } from "@webiny/ui/Button";
-import { Cell } from "@webiny/ui/Grid";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-import { Typography } from "@webiny/ui/Typography";
-import Accordion from "../Accordion";
-import { fieldsWrapperStyle, dynamicSectionTitleStyle, dynamicSectionGridStyle, fieldsGridStyle } from "./StyledComponents";
-var t = i18n.ns("app-headless-cms/admin/fields/text");
-var plugin = {
+import { MultiValueContainer } from "./MultiValueContainer";
+import { MultiValueRendererSettings } from "../MultiValueRendererSettings";
+const t = i18n.ns("app-headless-cms/admin/fields/text");
+const ObjectsRenderer = props => {
+  const {
+    getBind
+  } = props;
+  const Bind = getBind();
+  return /*#__PURE__*/React.createElement(Bind, null, bind => /*#__PURE__*/React.createElement(MultiValueContainer, {
+    bind: bind,
+    getBind: getBind
+  }));
+};
+const plugin = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-objects",
   renderer: {
     rendererName: "objects",
-    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Objects"]))),
-    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders a set of fields."]))),
-    canUse: function canUse(_ref) {
-      var field = _ref.field;
-      return field.type === "object" && field.multipleValues;
+    name: t`Inline Form`,
+    description: t`Renders a set of fields.`,
+    canUse({
+      field
+    }) {
+      return field.type === "object" && Boolean(field.multipleValues);
     },
-    render: function render(props) {
-      var field = props.field,
-          contentModel = props.contentModel;
-      return /*#__PURE__*/React.createElement(DynamicSection, Object.assign({}, props, {
-        emptyValue: {},
-        showLabel: false,
-        renderTitle: function renderTitle(value) {
-          return /*#__PURE__*/React.createElement(Cell, {
-            span: 12,
-            className: dynamicSectionTitleStyle
-          }, /*#__PURE__*/React.createElement(Typography, {
-            use: "headline5"
-          }, "".concat(field.label, " ").concat(value.length ? "(".concat(value.length, ")") : "")), field.helpText && /*#__PURE__*/React.createElement(FormElementMessage, null, field.helpText));
-        },
-        gridClassName: dynamicSectionGridStyle
-      }), function (_ref2) {
-        var Bind = _ref2.Bind,
-            bind = _ref2.bind,
-            index = _ref2.index;
-        return /*#__PURE__*/React.createElement(Accordion, {
-          title: "".concat(props.field.label, " #").concat(index + 1),
-          action: index > 0 && /*#__PURE__*/React.createElement(IconButton, {
-            icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
-            onClick: function onClick() {
-              return bind.field.removeValue(index);
-            }
-          }) // Open first Accordion by default
-          ,
-          defaultValue: index === 0
-        }, /*#__PURE__*/React.createElement(Cell, {
-          span: 12,
-          className: fieldsWrapperStyle
-        }, /*#__PURE__*/React.createElement(Fields, Object.assign({
-          Bind: Bind
-        }, bind.index, {
-          contentModel: contentModel,
-          fields: field.settings.fields,
-          layout: field.settings.layout,
-          gridClassName: fieldsGridStyle
-        }))));
-      });
+    render(props) {
+      return /*#__PURE__*/React.createElement(ObjectsRenderer, props);
+    },
+    renderSettings(props) {
+      return /*#__PURE__*/React.createElement(MultiValueRendererSettings, props);
     }
   }
 };
-export default plugin;
+export default plugin;
+
+//# sourceMappingURL=multipleObjects.js.map

package/admin/plugins/fieldRenderers/object/multipleObjects.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","i18n","MultiValueContainer","MultiValueRendererSettings","t","ns","ObjectsRenderer","props","getBind","Bind","createElement","bind","plugin","type","name","renderer","rendererName","description","canUse","field","Boolean","multipleValues","render","renderSettings"],"sources":["multipleObjects.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport type { CmsModelFieldRendererPlugin, CmsModelFieldRendererProps } from \"~/types\";\nimport { MultiValueContainer } from \"./MultiValueContainer\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst ObjectsRenderer = (props: CmsModelFieldRendererProps) => {\n    const { getBind } = props;\n\n    const Bind = getBind();\n\n    return <Bind>{bind => <MultiValueContainer bind={bind} getBind={getBind} />}</Bind>;\n};\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-objects\",\n    renderer: {\n        rendererName: \"objects\",\n        name: t`Inline Form`,\n        description: t`Renders a set of fields.`,\n        canUse({ field }) {\n            return field.type === \"object\" && Boolean(field.multipleValues);\n        },\n        render(props) {\n            return <ObjectsRenderer {...props} />;\n        },\n        renderSettings(props) {\n            return <MultiValueRendererSettings {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,SAASC,mBAAmB;AAC5B,SAASC,0BAA0B;AAEnC,MAAMC,CAAC,GAAGH,IAAI,CAACI,EAAE,CAAC,oCAAoC,CAAC;AAEvD,MAAMC,eAAe,GAAIC,KAAiC,IAAK;EAC3D,MAAM;IAAEC;EAAQ,CAAC,GAAGD,KAAK;EAEzB,MAAME,IAAI,GAAGD,OAAO,CAAC,CAAC;EAEtB,oBAAOR,KAAA,CAAAU,aAAA,CAACD,IAAI,QAAEE,IAAI,iBAAIX,KAAA,CAAAU,aAAA,CAACR,mBAAmB;IAACS,IAAI,EAAEA,IAAK;IAACH,OAAO,EAAEA;EAAQ,CAAE,CAAQ,CAAC;AACvF,CAAC;AAED,MAAMI,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,mCAAmC;EACzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,SAAS;IACvBF,IAAI,EAAEV,CAAC,aAAa;IACpBa,WAAW,EAAEb,CAAC,0BAA0B;IACxCc,MAAMA,CAAC;MAAEC;IAAM,CAAC,EAAE;MACd,OAAOA,KAAK,CAACN,IAAI,KAAK,QAAQ,IAAIO,OAAO,CAACD,KAAK,CAACE,cAAc,CAAC;IACnE,CAAC;IACDC,MAAMA,CAACf,KAAK,EAAE;MACV,oBAAOP,KAAA,CAAAU,aAAA,CAACJ,eAAe,EAAKC,KAAQ,CAAC;IACzC,CAAC;IACDgB,cAAcA,CAAChB,KAAK,EAAE;MAClB,oBAAOP,KAAA,CAAAU,aAAA,CAACP,0BAA0B,EAAKI,KAAQ,CAAC;IACpD;EACJ;AACJ,CAAC;AAED,eAAeK,MAAM","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/multipleObjectsAccordion.d.ts

@@ -0,0 +1,3 @@
+import type { CmsModelFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsModelFieldRendererPlugin;
+export default plugin;

package/admin/plugins/fieldRenderers/object/multipleObjectsAccordion.js

@@ -0,0 +1,59 @@
+import React from "react";
+import { i18n } from "@webiny/app/i18n";
+import { FieldSettings } from "./FieldSettings";
+import { AccordionRenderSettings, getAccordionRenderSettings } from "../AccordionRenderSettings";
+import { MultiValueContainer } from "./MultiValueContainer";
+import { MultiValueRendererSettings } from "../MultiValueRendererSettings";
+import { Accordion } from "@webiny/admin-ui";
+const t = i18n.ns("app-headless-cms/admin/fields/text");
+const ObjectsRenderer = props => {
+  const {
+    field,
+    getBind
+  } = props;
+  const fieldSettings = FieldSettings.createFrom(field);
+  if (!fieldSettings.hasFields()) {
+    fieldSettings.logMissingFields();
+    return null;
+  }
+  const {
+    open
+  } = getAccordionRenderSettings(field);
+  const Bind = getBind();
+  return /*#__PURE__*/React.createElement(Bind, null, bind => {
+    const values = bind.value || [];
+    const label = `${field.label} ${values.length ? `(${values.length})` : ""}`;
+    return /*#__PURE__*/React.createElement(Bind.ValidationContainer, null, /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(Accordion.Item, {
+      title: label,
+      description: field.helpText,
+      defaultOpen: open
+    }, /*#__PURE__*/React.createElement(MultiValueContainer, {
+      bind: bind,
+      getBind: getBind,
+      showTitle: false
+    }))));
+  });
+};
+const plugin = {
+  type: "cms-editor-field-renderer",
+  name: "cms-editor-field-renderer-objects-accordion",
+  renderer: {
+    rendererName: "objects-accordion",
+    name: t`Accordion`,
+    description: t`Renders fields within an accordion.`,
+    canUse({
+      field
+    }) {
+      return field.type === "object" && Boolean(field.multipleValues);
+    },
+    render(props) {
+      return /*#__PURE__*/React.createElement(ObjectsRenderer, props);
+    },
+    renderSettings(props) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiValueRendererSettings, props), /*#__PURE__*/React.createElement(AccordionRenderSettings, props));
+    }
+  }
+};
+export default plugin;
+
+//# sourceMappingURL=multipleObjectsAccordion.js.map

package/admin/plugins/fieldRenderers/object/multipleObjectsAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","i18n","FieldSettings","AccordionRenderSettings","getAccordionRenderSettings","MultiValueContainer","MultiValueRendererSettings","Accordion","t","ns","ObjectsRenderer","props","field","getBind","fieldSettings","createFrom","hasFields","logMissingFields","open","Bind","createElement","bind","values","value","label","length","ValidationContainer","Item","title","description","helpText","defaultOpen","showTitle","plugin","type","name","renderer","rendererName","canUse","Boolean","multipleValues","render","renderSettings","Fragment"],"sources":["multipleObjectsAccordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport type { CmsModelFieldRendererPlugin, CmsModelFieldRendererProps } from \"~/types\";\nimport { FieldSettings } from \"./FieldSettings\";\nimport { AccordionRenderSettings, getAccordionRenderSettings } from \"../AccordionRenderSettings\";\nimport { MultiValueContainer } from \"~/admin/plugins/fieldRenderers/object/MultiValueContainer\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings\";\nimport { Accordion } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst ObjectsRenderer = (props: CmsModelFieldRendererProps) => {\n    const { field, getBind } = props;\n\n    const fieldSettings = FieldSettings.createFrom(field);\n\n    if (!fieldSettings.hasFields()) {\n        fieldSettings.logMissingFields();\n        return null;\n    }\n\n    const { open } = getAccordionRenderSettings(field);\n\n    const Bind = getBind();\n\n    return (\n        <Bind>\n            {bind => {\n                const values = bind.value || [];\n                const label = `${field.label} ${values.length ? `(${values.length})` : \"\"}`;\n\n                return (\n                    <Bind.ValidationContainer>\n                        <Accordion>\n                            <Accordion.Item\n                                title={label}\n                                description={field.helpText}\n                                defaultOpen={open}\n                            >\n                                <MultiValueContainer\n                                    bind={bind}\n                                    getBind={getBind}\n                                    showTitle={false}\n                                />\n                            </Accordion.Item>\n                        </Accordion>\n                    </Bind.ValidationContainer>\n                );\n            }}\n        </Bind>\n    );\n};\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-objects-accordion\",\n    renderer: {\n        rendererName: \"objects-accordion\",\n        name: t`Accordion`,\n        description: t`Renders fields within an accordion.`,\n        canUse({ field }) {\n            return field.type === \"object\" && Boolean(field.multipleValues);\n        },\n        render(props) {\n            return <ObjectsRenderer {...props} />;\n        },\n        renderSettings(props) {\n            return (\n                <>\n                    <MultiValueRendererSettings {...props} />\n                    <AccordionRenderSettings {...props} />\n                </>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,SAASC,aAAa;AACtB,SAASC,uBAAuB,EAAEC,0BAA0B;AAC5D,SAASC,mBAAmB;AAC5B,SAASC,0BAA0B;AACnC,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,MAAMC,CAAC,GAAGP,IAAI,CAACQ,EAAE,CAAC,oCAAoC,CAAC;AAEvD,MAAMC,eAAe,GAAIC,KAAiC,IAAK;EAC3D,MAAM;IAAEC,KAAK;IAAEC;EAAQ,CAAC,GAAGF,KAAK;EAEhC,MAAMG,aAAa,GAAGZ,aAAa,CAACa,UAAU,CAACH,KAAK,CAAC;EAErD,IAAI,CAACE,aAAa,CAACE,SAAS,CAAC,CAAC,EAAE;IAC5BF,aAAa,CAACG,gBAAgB,CAAC,CAAC;IAChC,OAAO,IAAI;EACf;EAEA,MAAM;IAAEC;EAAK,CAAC,GAAGd,0BAA0B,CAACQ,KAAK,CAAC;EAElD,MAAMO,IAAI,GAAGN,OAAO,CAAC,CAAC;EAEtB,oBACIb,KAAA,CAAAoB,aAAA,CAACD,IAAI,QACAE,IAAI,IAAI;IACL,MAAMC,MAAM,GAAGD,IAAI,CAACE,KAAK,IAAI,EAAE;IAC/B,MAAMC,KAAK,GAAG,GAAGZ,KAAK,CAACY,KAAK,IAAIF,MAAM,CAACG,MAAM,GAAG,IAAIH,MAAM,CAACG,MAAM,GAAG,GAAG,EAAE,EAAE;IAE3E,oBACIzB,KAAA,CAAAoB,aAAA,CAACD,IAAI,CAACO,mBAAmB,qBACrB1B,KAAA,CAAAoB,aAAA,CAACb,SAAS,qBACNP,KAAA,CAAAoB,aAAA,CAACb,SAAS,CAACoB,IAAI;MACXC,KAAK,EAAEJ,KAAM;MACbK,WAAW,EAAEjB,KAAK,CAACkB,QAAS;MAC5BC,WAAW,EAAEb;IAAK,gBAElBlB,KAAA,CAAAoB,aAAA,CAACf,mBAAmB;MAChBgB,IAAI,EAAEA,IAAK;MACXR,OAAO,EAAEA,OAAQ;MACjBmB,SAAS,EAAE;IAAM,CACpB,CACW,CACT,CACW,CAAC;EAEnC,CACE,CAAC;AAEf,CAAC;AAED,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,6CAA6C;EACnDC,QAAQ,EAAE;IACNC,YAAY,EAAE,mBAAmB;IACjCF,IAAI,EAAE3B,CAAC,WAAW;IAClBqB,WAAW,EAAErB,CAAC,qCAAqC;IACnD8B,MAAMA,CAAC;MAAE1B;IAAM,CAAC,EAAE;MACd,OAAOA,KAAK,CAACsB,IAAI,KAAK,QAAQ,IAAIK,OAAO,CAAC3B,KAAK,CAAC4B,cAAc,CAAC;IACnE,CAAC;IACDC,MAAMA,CAAC9B,KAAK,EAAE;MACV,oBAAOX,KAAA,CAAAoB,aAAA,CAACV,eAAe,EAAKC,KAAQ,CAAC;IACzC,CAAC;IACD+B,cAAcA,CAAC/B,KAAK,EAAE;MAClB,oBACIX,KAAA,CAAAoB,aAAA,CAAApB,KAAA,CAAA2C,QAAA,qBACI3C,KAAA,CAAAoB,aAAA,CAACd,0BAA0B,EAAKK,KAAQ,CAAC,eACzCX,KAAA,CAAAoB,aAAA,CAACjB,uBAAuB,EAAKQ,KAAQ,CACvC,CAAC;IAEX;EACJ;AACJ,CAAC;AAED,eAAesB,MAAM","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/singleObjectAccordion.d.ts

@@ -0,0 +1,3 @@
+import type { CmsModelFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsModelFieldRendererPlugin;
+export default plugin;

package/admin/plugins/fieldRenderers/object/singleObjectAccordion.js

@@ -0,0 +1,64 @@
+import React from "react";
+import { i18n } from "@webiny/app/i18n";
+import { Accordion, AccordionItem } from "@webiny/ui/Accordion";
+import { Fields } from "../../../components/ContentEntryForm/Fields";
+import { FieldSettings } from "./FieldSettings";
+import { ParentFieldProvider } from "../../../hooks";
+import { ParentValueIndexProvider } from "../../../components/ModelFieldProvider";
+import { AccordionRenderSettings, getAccordionRenderSettings } from "../AccordionRenderSettings";
+const t = i18n.ns("app-headless-cms/admin/fields/text");
+const plugin = {
+  type: "cms-editor-field-renderer",
+  name: "cms-editor-field-renderer-object-accordion",
+  renderer: {
+    rendererName: "object-accordion",
+    name: t`Accordion`,
+    description: t`Renders fields within an accordion.`,
+    canUse({
+      field
+    }) {
+      return field.type === "object" && !field.multipleValues;
+    },
+    render({
+      field,
+      getBind,
+      contentModel
+    }) {
+      const Bind = getBind();
+      const fieldSettings = FieldSettings.createFrom(field);
+      if (!fieldSettings.hasFields()) {
+        fieldSettings.logMissingFields();
+        return null;
+      }
+      const settings = fieldSettings.getSettings();
+      const {
+        open
+      } = getAccordionRenderSettings(field);
+      return /*#__PURE__*/React.createElement(Bind, null, bindProps => /*#__PURE__*/React.createElement(Bind.ValidationContainer, null, /*#__PURE__*/React.createElement(ParentFieldProvider, {
+        value: bindProps.value,
+        path: Bind.parentName
+      }, /*#__PURE__*/React.createElement(ParentValueIndexProvider, {
+        index: -1
+      }, /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(AccordionItem, {
+        title: field.label,
+        description: field.helpText,
+        open: open
+      }, /*#__PURE__*/React.createElement(Fields, {
+        Bind: Bind,
+        contentModel: contentModel,
+        fields: settings.fields || [],
+        layout: settings.layout || []
+      })))))));
+    },
+    renderSettings({
+      field
+    }) {
+      return /*#__PURE__*/React.createElement(AccordionRenderSettings, {
+        field: field
+      });
+    }
+  }
+};
+export default plugin;
+
+//# sourceMappingURL=singleObjectAccordion.js.map

package/admin/plugins/fieldRenderers/object/singleObjectAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","i18n","Accordion","AccordionItem","Fields","FieldSettings","ParentFieldProvider","ParentValueIndexProvider","AccordionRenderSettings","getAccordionRenderSettings","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","getBind","contentModel","Bind","fieldSettings","createFrom","hasFields","logMissingFields","settings","getSettings","open","createElement","bindProps","ValidationContainer","value","path","parentName","index","title","label","helpText","fields","layout","renderSettings"],"sources":["singleObjectAccordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { FieldSettings } from \"./FieldSettings\";\nimport { ParentFieldProvider } from \"~/admin/hooks\";\nimport { ParentValueIndexProvider } from \"~/admin/components/ModelFieldProvider\";\nimport {\n    AccordionRenderSettings,\n    getAccordionRenderSettings\n} from \"~/admin/plugins/fieldRenderers/AccordionRenderSettings\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-object-accordion\",\n    renderer: {\n        rendererName: \"object-accordion\",\n        name: t`Accordion`,\n        description: t`Renders fields within an accordion.`,\n        canUse({ field }) {\n            return field.type === \"object\" && !field.multipleValues;\n        },\n        render({ field, getBind, contentModel }) {\n            const Bind = getBind();\n\n            const fieldSettings = FieldSettings.createFrom(field);\n\n            if (!fieldSettings.hasFields()) {\n                fieldSettings.logMissingFields();\n                return null;\n            }\n\n            const settings = fieldSettings.getSettings();\n            const { open } = getAccordionRenderSettings(field);\n\n            return (\n                <Bind>\n                    {bindProps => (\n                        <Bind.ValidationContainer>\n                            <ParentFieldProvider value={bindProps.value} path={Bind.parentName}>\n                                <ParentValueIndexProvider index={-1}>\n                                    <Accordion>\n                                        <AccordionItem\n                                            title={field.label}\n                                            description={field.helpText}\n                                            open={open}\n                                        >\n                                            <Fields\n                                                Bind={Bind}\n                                                contentModel={contentModel}\n                                                fields={settings.fields || []}\n                                                layout={settings.layout || []}\n                                            />\n                                        </AccordionItem>\n                                    </Accordion>\n                                </ParentValueIndexProvider>\n                            </ParentFieldProvider>\n                        </Bind.ValidationContainer>\n                    )}\n                </Bind>\n            );\n        },\n        renderSettings({ field }) {\n            return <AccordionRenderSettings field={field} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,SAAS,EAAEC,aAAa,QAAQ,sBAAsB;AAE/D,SAASC,MAAM;AACf,SAASC,aAAa;AACtB,SAASC,mBAAmB;AAC5B,SAASC,wBAAwB;AACjC,SACIC,uBAAuB,EACvBC,0BAA0B;AAG9B,MAAMC,CAAC,GAAGT,IAAI,CAACU,EAAE,CAAC,oCAAoC,CAAC;AAEvD,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,4CAA4C;EAClDC,QAAQ,EAAE;IACNC,YAAY,EAAE,kBAAkB;IAChCF,IAAI,EAAEJ,CAAC,WAAW;IAClBO,WAAW,EAAEP,CAAC,qCAAqC;IACnDQ,MAAMA,CAAC;MAAEC;IAAM,CAAC,EAAE;MACd,OAAOA,KAAK,CAACN,IAAI,KAAK,QAAQ,IAAI,CAACM,KAAK,CAACC,cAAc;IAC3D,CAAC;IACDC,MAAMA,CAAC;MAAEF,KAAK;MAAEG,OAAO;MAAEC;IAAa,CAAC,EAAE;MACrC,MAAMC,IAAI,GAAGF,OAAO,CAAC,CAAC;MAEtB,MAAMG,aAAa,GAAGpB,aAAa,CAACqB,UAAU,CAACP,KAAK,CAAC;MAErD,IAAI,CAACM,aAAa,CAACE,SAAS,CAAC,CAAC,EAAE;QAC5BF,aAAa,CAACG,gBAAgB,CAAC,CAAC;QAChC,OAAO,IAAI;MACf;MAEA,MAAMC,QAAQ,GAAGJ,aAAa,CAACK,WAAW,CAAC,CAAC;MAC5C,MAAM;QAAEC;MAAK,CAAC,GAAGtB,0BAA0B,CAACU,KAAK,CAAC;MAElD,oBACInB,KAAA,CAAAgC,aAAA,CAACR,IAAI,QACAS,SAAS,iBACNjC,KAAA,CAAAgC,aAAA,CAACR,IAAI,CAACU,mBAAmB,qBACrBlC,KAAA,CAAAgC,aAAA,CAAC1B,mBAAmB;QAAC6B,KAAK,EAAEF,SAAS,CAACE,KAAM;QAACC,IAAI,EAAEZ,IAAI,CAACa;MAAW,gBAC/DrC,KAAA,CAAAgC,aAAA,CAACzB,wBAAwB;QAAC+B,KAAK,EAAE,CAAC;MAAE,gBAChCtC,KAAA,CAAAgC,aAAA,CAAC9B,SAAS,qBACNF,KAAA,CAAAgC,aAAA,CAAC7B,aAAa;QACVoC,KAAK,EAAEpB,KAAK,CAACqB,KAAM;QACnBvB,WAAW,EAAEE,KAAK,CAACsB,QAAS;QAC5BV,IAAI,EAAEA;MAAK,gBAEX/B,KAAA,CAAAgC,aAAA,CAAC5B,MAAM;QACHoB,IAAI,EAAEA,IAAK;QACXD,YAAY,EAAEA,YAAa;QAC3BmB,MAAM,EAAEb,QAAQ,CAACa,MAAM,IAAI,EAAG;QAC9BC,MAAM,EAAEd,QAAQ,CAACc,MAAM,IAAI;MAAG,CACjC,CACU,CACR,CACW,CACT,CACC,CAE5B,CAAC;IAEf,CAAC;IACDC,cAAcA,CAAC;MAAEzB;IAAM,CAAC,EAAE;MACtB,oBAAOnB,KAAA,CAAAgC,aAAA,CAACxB,uBAAuB;QAACW,KAAK,EAAEA;MAAM,CAAE,CAAC;IACpD;EACJ;AACJ,CAAC;AAED,eAAeP,MAAM","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/singleObjectInline.d.ts

@@ -0,0 +1,3 @@
+import type { CmsModelFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsModelFieldRendererPlugin;
+export default plugin;