easy-email-pro-theme 1.41.0 → 1.42.0

package/lib/index.js

@@ -8049,7 +8049,13 @@ const TabHeader = (props) => {
         width: "100%"
       }
     },
-    /* @__PURE__ */ React__default.createElement("div", { style: { position: "absolute", left: 0 } }, props.left),
+    /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        style: { position: "absolute", left: 0, width: `calc(50% - 125px)` }
+      },
+      props.left
+    ),
     /* @__PURE__ */ React__default.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React__default.createElement(Button$2.Group, null, /* @__PURE__ */ React__default.createElement(
       Button$2,
       {
@@ -8067,7 +8073,18 @@ const TabHeader = (props) => {
       },
       /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-mobile" }), " ", t("mobile"))
     ))),
-    /* @__PURE__ */ React__default.createElement("div", { style: { position: "absolute", right: 0 } }, props.right)
+    /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          right: 0,
+          width: `calc(50% - 125px)`,
+          textAlign: "right"
+        }
+      },
+      props.right
+    )
   ));
 };
 const hoverUnderline = "_hoverUnderline_8d8dl_1";
@@ -8094,34 +8111,45 @@ function BlockPaths() {
     return paths2.reverse();
   }, [editor, selectedNodePath]);
   return useMemo$1(() => {
-    return /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex" } }, paths.map((item2, index2) => {
-      const isLast = index2 === paths.length - 1;
-      return /* @__PURE__ */ React__default.createElement(
-        "span",
-        {
-          key: index2,
-          style: {
-            cursor: "pointer",
-            fontSize: 12,
-            lineHeight: 1,
-            fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif
-            -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto`,
-            color: isLast ? "#000b1d" : "#666",
-            fontWeight: isLast ? "bold" : void 0,
-            marginLeft: index2 === 0 ? 10 : 4
-          }
-        },
-        /* @__PURE__ */ React__default.createElement(
-          "span",
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          paddingLeft: 10,
+          lineHeight: "16px"
+        }
+      },
+      paths.map((item2, index2) => {
+        const isLast = index2 === paths.length - 1;
+        return /* @__PURE__ */ React__default.createElement(
+          "div",
           {
-            className: styles$2.hoverUnderline,
-            onClick: () => setSelectedNodePath(item2.path)
+            key: index2,
+            style: {
+              cursor: "pointer",
+              fontSize: 12,
+              lineHeight: 1,
+              fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif
+            -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto`,
+              color: isLast ? "#000b1d" : "#666",
+              fontWeight: isLast ? "bold" : void 0,
+              marginLeft: index2 === 0 ? 0 : 4
+            }
           },
-          item2.name
-        ),
-        !isLast && /* @__PURE__ */ React__default.createElement("span", { style: { marginLeft: 4 } }, "-")
-      );
-    }));
+          /* @__PURE__ */ React__default.createElement(
+            "span",
+            {
+              className: styles$2.hoverUnderline,
+              onClick: () => setSelectedNodePath(item2.path)
+            },
+            item2.name
+          ),
+          !isLast && /* @__PURE__ */ React__default.createElement("span", { style: { marginLeft: 4 } }, "-")
+        );
+      })
+    );
   }, [paths, setSelectedNodePath]);
 }
 const EditorTabs = (props) => {
@@ -8792,12 +8820,23 @@ const PreviewEmail = ({
   mergetagsData,
   pageDataVariables,
   headerElement,
-  footerElement
+  footerElement,
+  widgetMode
 }) => {
   const [html, setHtml] = useState("");
   const mjmlString = useMemo$1(() => {
+    let content = values2.content;
+    if (widgetMode) {
+      content = __spreadProps(__spreadValues({}, content), {
+        children: [
+          __spreadProps(__spreadValues({}, values2.widgetElement), {
+            children: values2.content.children
+          })
+        ]
+      });
+    }
     return EditorCore.toMJML({
-      element: values2.content,
+      element: content,
       mode: "production",
       universalElements: universalElementSetting,
       mergetagsData: cloneDeep(mergetagsData),
@@ -8807,6 +8846,8 @@ const PreviewEmail = ({
     });
   }, [
     values2.content,
+    values2.widgetElement,
+    widgetMode,
     universalElementSetting,
     mergetagsData,
     pageDataVariables,
@@ -8889,7 +8930,8 @@ const PreviewEmailDrawer = ({
     universalElementSetting,
     headerElement,
     showEditTestVariableButton = true,
-    footerElement
+    footerElement,
+    widgetMode
   } = useEditorProps();
   const subject = useMemo$1(() => {
     try {
@@ -8992,7 +9034,8 @@ const PreviewEmailDrawer = ({
               mergetagsData,
               pageDataVariables,
               headerElement,
-              footerElement
+              footerElement,
+              widgetMode: Boolean(widgetMode)
             }
           )
         )
@@ -35627,6 +35670,8 @@ function ImageUploader(props) {
   const errorMessage = useMemo$1(() => {
     if (!props.value)
       return "";
+    if (!isString$1(props.value))
+      return "";
     if (props.value.includes(`"`)) {
       return t(
         `Double quotes cannot be used, please use single quotes instead`
@@ -40898,6 +40943,16 @@ function AddItems(props) {
     )));
   }), /* @__PURE__ */ React__default.createElement(Divider$2, null)));
 }
+const WidgetTypeOptions = [
+  { value: FieldType.PIXEL, label: "Pixel" },
+  { value: FieldType.STRING, label: "String" },
+  { value: FieldType.NUMBER, label: "Number" },
+  { value: FieldType.ENUM, label: "Enum" },
+  { value: FieldType.COLOR, label: "Color" },
+  { value: FieldType.IMAGE, label: "Image" }
+  // { value: FieldType.SLIDER, label: "Slider" },
+  // { value: FieldType.PIXEL_AND_PERCENT, label: "Pixel and percent" },
+];
 const formItemStyle = {
   labelCol: {
     span: 7,
@@ -40912,16 +40967,6 @@ const formItemStyle = {
     }
   }
 };
-const typeOptions = [
-  { value: FieldType.PIXEL, label: "Pixel" },
-  { value: FieldType.STRING, label: "String" },
-  { value: FieldType.NUMBER, label: "Number" },
-  { value: FieldType.ENUM, label: "Enum" },
-  { value: FieldType.COLOR, label: "Color" },
-  { value: FieldType.IMAGE, label: "Image" }
-  // { value: FieldType.SLIDER, label: "Slider" },
-  // { value: FieldType.PIXEL_AND_PERCENT, label: "Pixel and percent" },
-];
 function FieldConfigItem(props) {
   const { getFieldValue } = useEditorContext();
   const keyField = getFieldValue(null, props.name);
@@ -40963,7 +41008,7 @@ function FieldConfigItem(props) {
         label: "Type",
         name: props.name + ".type",
         formItem: formItemStyle,
-        options: typeOptions,
+        options: WidgetTypeOptions,
         path: props.path
       }
     ), keyField && keyField.type === FieldType.ENUM && /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 17, offset: 7 }, /* @__PURE__ */ React__default.createElement(AddItems, { name: props.name + ".options", path: props.path }))), /* @__PURE__ */ React__default.createElement(
@@ -40975,7 +41020,7 @@ function FieldConfigItem(props) {
         path: props.path
       }
     ), keyField && /* @__PURE__ */ React__default.createElement(
-      FieldItem,
+      AttributeField.FieldItem,
       {
         label: "Default",
         name: `widgetElement.data.input.${keyField.name}`,
@@ -46902,6 +46947,7 @@ export {
   ResponsiveTabs,
   Retro,
   SharedComponents,
+  WidgetTypeOptions,
   enhancer,
   getMergeTagsByType,
   mjmlToJson,

package/lib/typings/components/ConfigurationPanel/components/WidgetConfigPanel/index.d.ts

@@ -1,4 +1,6 @@
 import React from "react";
+import { WidgetTypeOptions } from "./widgetFields/WidgetTypeOptions";
 export declare function WidgetConfigPanel({ containerHeight, }: {
     containerHeight: string;
 }): React.JSX.Element;
+export { WidgetTypeOptions };

package/lib/typings/components/ConfigurationPanel/components/WidgetConfigPanel/widgetFields/WidgetTypeOptions.d.ts

@@ -0,0 +1,4 @@
+export declare const WidgetTypeOptions: Array<{
+    value: string;
+    label: string;
+}>;

package/lib/typings/components/EditorTabs/components/PreviewEmail/index.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { EmailEditorProps, EmailTemplate } from "easy-email-pro-editor";
-export declare const PreviewEmail: ({ isDesktop, universalElementSetting, values, mergetagsData, pageDataVariables, headerElement, footerElement, }: {
+export declare const PreviewEmail: ({ isDesktop, universalElementSetting, values, mergetagsData, pageDataVariables, headerElement, footerElement, widgetMode, }: {
     isDesktop: boolean;
     universalElementSetting: EmailEditorProps["universalElementSetting"];
     values: EmailTemplate;
@@ -8,4 +8,5 @@ export declare const PreviewEmail: ({ isDesktop, universalElementSetting, values
     pageDataVariables: EmailEditorProps["attributesVariables"];
     headerElement?: EmailEditorProps["headerElement"];
     footerElement?: EmailEditorProps["footerElement"];
+    widgetMode: boolean;
 }) => React.JSX.Element;

package/lib/typings/components/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { WidgetConfigPanel } from "./ConfigurationPanel/components/WidgetConfigPanel";
+import { WidgetConfigPanel, WidgetTypeOptions } from "./ConfigurationPanel/components/WidgetConfigPanel";
 import { AIAssistant } from "./HoveringToolbar/componens/AIAssistant";
 export { enhancer } from "./Form";
 export * from "./Providers";
@@ -7,7 +7,7 @@ export declare const SharedComponents: {
     PreviewEmailDrawer: ({ children, }: {
         children: import("react").ReactNode;
     }) => import("react").JSX.Element;
-    PreviewEmail: ({ isDesktop, universalElementSetting, values, mergetagsData, pageDataVariables, headerElement, footerElement, }: {
+    PreviewEmail: ({ isDesktop, universalElementSetting, values, mergetagsData, pageDataVariables, headerElement, footerElement, widgetMode, }: {
         isDesktop: boolean;
         universalElementSetting: ({
             elements: Record<string, import("../easy-email-pro-core/lib/typings").Element>;
@@ -36,6 +36,7 @@ export declare const SharedComponents: {
         pageDataVariables: Record<string, string | number | boolean | null | undefined> | undefined;
         headerElement?: import("../easy-email-pro-core/lib/typings").Element | undefined;
         footerElement?: import("../easy-email-pro-core/lib/typings").Element | undefined;
+        widgetMode: boolean;
     }) => import("react").JSX.Element;
     BlockSideBar: ({ height }: import("./BlockSideBar").BlockSideBarProps) => import("react").JSX.Element;
     ConfigurationSideBar: ({ height }: import("./ConfigurationSideBar").ConfigurationSideBarProps) => import("react").JSX.Element;
@@ -126,5 +127,6 @@ export { CollapseWrapper } from "./ConfigurationPanel/components/CollapseWrapper
 export { AttributesPanelWrapper } from "./ConfigurationPanel/components/AttributesPanelWrapper";
 export { AttributeField } from "./ConfigurationPanel/components/AttributeField";
 export { ConfigPanelsMap } from "./ConfigurationPanel/Elements";
+export { WidgetTypeOptions };
 export { ResponsiveField, ResponsiveTabs, } from "./ConfigurationPanel/components/ResponsiveTabs";
 export { IconFont } from "./IconFont";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-email-pro-theme",
-  "version": "1.41.0",
+  "version": "1.42.0",
   "description": "",
   "files": [
     "lib"