email-builder-utils 1.1.5 → 1.1.9

package/dist/types/Generics.d.ts

@@ -38,9 +38,9 @@ export declare enum FEATURE_TYPE {
     GET_ORG = "GET_ORG",
     DELETE_ORG = "DELETE_ORG",
     UPDATE_ORG = "UPDATE_ORG",
-    ADD_ORD_USER = "ADD_ORD_USER",
-    LIST_ORD_USER = "LIST_ORD_USER",
-    DELETE_ORD_USER = "DELETE_ORD_USER",
-    UPDATE_ORD_USER = "UPDATE_ORD_USER"
+    ADD_ORG_USER = "ADD_ORG_USER",
+    LIST_ORG_USER = "LIST_ORG_USER",
+    DELETE_ORG_USER = "DELETE_ORG_USER",
+    UPDATE_ORG_USER = "UPDATE_ORG_USER"
 }
 //# sourceMappingURL=Generics.d.ts.map

package/dist/types/Generics.js

@@ -50,8 +50,8 @@ var FEATURE_TYPE;
     FEATURE_TYPE["DELETE_ORG"] = "DELETE_ORG";
     FEATURE_TYPE["UPDATE_ORG"] = "UPDATE_ORG";
     // Manage Org Users
-    FEATURE_TYPE["ADD_ORD_USER"] = "ADD_ORD_USER";
-    FEATURE_TYPE["LIST_ORD_USER"] = "LIST_ORD_USER";
-    FEATURE_TYPE["DELETE_ORD_USER"] = "DELETE_ORD_USER";
-    FEATURE_TYPE["UPDATE_ORD_USER"] = "UPDATE_ORD_USER";
+    FEATURE_TYPE["ADD_ORG_USER"] = "ADD_ORG_USER";
+    FEATURE_TYPE["LIST_ORG_USER"] = "LIST_ORG_USER";
+    FEATURE_TYPE["DELETE_ORG_USER"] = "DELETE_ORG_USER";
+    FEATURE_TYPE["UPDATE_ORG_USER"] = "UPDATE_ORG_USER";
 })(FEATURE_TYPE || (exports.FEATURE_TYPE = FEATURE_TYPE = {}));

package/dist/utils/jsonToHTML.js

@@ -41,10 +41,10 @@ function buildStyles(style, { pxChanges, perChanges }) {
         }
         const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
         if (pxChanges.includes(key)) {
-            stylesObj[cssKey] = `${value}px`;
+            stylesObj[cssKey] = typeof value === "number" ? `${value}px` : value;
         }
         else if (perChanges.includes(key)) {
-            stylesObj[cssKey] = `${value}%`;
+            stylesObj[cssKey] = typeof value === "number" ? `${value}%` : value;
         }
         else {
             stylesObj[cssKey] = value;
@@ -111,18 +111,16 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
     const image = await jimp_1.Jimp.read(imageUrl);
     const originalWidth = image.bitmap.width;
     const originalHeight = image.bitmap.height;
-    // Calculate width scaling factor based on outer and inner widths
     const widthScalingFactor = Math.min(outerContainerWidth / originalWidth, innerContainerWidth / originalWidth);
-    // Scale height proportionally
     const scaledWidth = Math.round(originalWidth * widthScalingFactor);
-    const scaledHeight = Math.round(originalHeight * widthScalingFactor); // Maintain aspect ratio
-    // Extract border styles
-    const borderWidth = style?.borderWidth || 0;
+    const scaledHeight = Math.round(originalHeight * widthScalingFactor);
+    const borderWidth = parseInt(style?.borderWidth) || 0;
     const borderColor = style?.borderColor || "transparent";
-    const borderRadius = style?.borderRadius || 0;
+    const borderRadius = parseInt(style?.borderRadius) || 0;
     const useRoundRect = borderRadius > 0;
-    const arcsize = useRoundRect ? Math.min(borderRadius / scaledWidth, 1) : 0;
-    // Conditionally add stroke attributes
+    const arcsize = useRoundRect
+        ? Math.min(borderRadius / scaledHeight, 1).toFixed(2)
+        : "";
     const borderAttributes = borderWidth > 0
         ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"`
         : `stroked="false"`;
@@ -131,8 +129,7 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
     style="width:${scaledWidth}px;height:${scaledHeight}px;"
     ${borderAttributes}
     ${useRoundRect ? `arcsize="${arcsize}"` : ""}
-    fill="true" 
-    fillcolor="none">
+    fill="true" fillcolor="none">
     <v:fill src="${imageUrl}" type="frame" />
     <v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>
   </v:${useRoundRect ? "roundrect" : "rect"}>
@@ -147,32 +144,56 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
 async function convertImageBlock(blockData, cellWidthInPx) {
     const { style, props } = blockData.data;
     const { altText, imageUrl, navigateToUrl } = props;
-    const { width, height, objectFit, ...containerStyle } = style;
-    const imageStyle = { width, height, objectFit };
-    const containerStyles = buildStyles(containerStyle, { perChanges: [], pxChanges: addPxToAttributes });
-    const imageTagStyles = buildStyles(imageStyle, { perChanges: addPxOrPerToAttributes, pxChanges: addPxToAttributes });
+    const { width, height, objectFit, borderRadius, borderWidth, borderColor, borderStyle, ...containerStyle } = style;
+    // Ensure border styles are applied only to the container, not the image
+    const imageStyle = {
+        width,
+        height,
+        objectFit,
+        borderStyle,
+        borderRadius: borderRadius,
+        borderColor
+    };
+    // Add border styles to container for fallback clients
+    const containerStyles = buildStyles({
+        ...containerStyle,
+    }, { perChanges: [], pxChanges: addPxToAttributes });
+    const imageTagStyles = buildStyles(imageStyle, {
+        perChanges: addPxOrPerToAttributes,
+        pxChanges: addPxToAttributes,
+    });
     const imageElement = `<img src="${imageUrl}" alt="${altText}" style="${imageTagStyles}" />`;
-    const outlookImage = await appendOutlookForImage(imageElement, cellWidthInPx, ((typeof width === "string" ? parseInt(width.replace("%", "")) : width) / 100) *
-        (cellWidthInPx - style?.padding?.left - style?.padding?.right), imageUrl, style);
+    const innerContainerWidth = ((typeof width === "string" ? parseInt(width.replace("%", "")) : width) / 100) *
+        (cellWidthInPx - (style?.padding?.left || 0) - (style?.padding?.right || 0));
+    const outlookImage = await appendOutlookForImage(imageElement, cellWidthInPx, innerContainerWidth, imageUrl, style);
     const imageContent = appendOutlookSupport(outlookImage, containerStyles);
-    console.log(imageContent);
-    return navigateToUrl ? `<a href="${navigateToUrl}" target="_blank" style="display:block; text-decoration:none; cursor:pointer;">${imageContent}</a>` : imageContent;
+    return navigateToUrl
+        ? `<a href="${navigateToUrl}" target="_blank" style="display:block; text-decoration:none; cursor:pointer;">${imageContent}</a>`
+        : imageContent;
 }
 function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
-    const { width, buttonColor, borderColor, borderRadius, borderWidth, height, buttonPadding, color, fontFamily, fontSize, fontWeight } = buttonStyle;
+    const { width = 200, height = 44, borderRadius = 0, borderColor = "transparent", borderWidth = 0, buttonColor = "none", buttonPadding = { top: 0, bottom: 0, left: 0, right: 0 }, color = "#000000", fontFamily = "Arial, sans-serif", fontSize = 16, fontWeight = 400, } = buttonStyle;
+    const borderAttributes = borderWidth > 0
+        ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"`
+        : `stroked="false"`;
     return `
-  <!--[if mso]>
-    <v:${borderRadius ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml" href="${navigateToUrl}" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:${height || 44}px;width:${width || 200}px;v-text-anchor:middle;" arcsize="${borderRadius || 0}px" strokeweight="${borderWidth || 0}px" strokecolor="${borderColor || "transparent"}" fillcolor="${buttonColor || "none"}">
-    <w:anchorlock/>
-    <v:textbox inset="${buttonPadding?.top || 0}px, ${buttonPadding?.left || 0}px, ${buttonPadding?.bottom || 0}px, ${buttonPadding?.right || 0}px">
-      <center style="font-family:${fontFamily || ""};font-size:${fontSize}px;font-weight:${fontWeight};color:${color};">${text}</center>
-    </v:textbox>
-    </v:${borderRadius ? "roundrect" : "rect"}>
-  <![endif]-->
-  <!--[if !mso]><!-->
-    ${content}
-  <!--<![endif]-->
-  `;
+<!--[if mso]>
+<v:${borderRadius ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml" href="${navigateToUrl}"
+  style="height:${height}px;v-text-anchor:middle;width:${width}px;"
+  arcsize="${borderRadius / height}" ${borderAttributes}
+  fillcolor="${buttonColor}">
+  <w:anchorlock/>
+  <v:textbox inset="${buttonPadding.top}px,${buttonPadding.left}px,${buttonPadding.bottom}px,${buttonPadding.right}px">
+    <center style="font-family:${fontFamily};font-size:${fontSize}px;font-weight:${fontWeight};color:${color};">
+      ${text}
+    </center>
+  </v:textbox>
+</v:${borderRadius ? "roundrect" : "rect"}>
+<![endif]-->
+<!--[if !mso]><!-->
+  ${content}
+<!--<![endif]-->
+`;
 }
 function convertButtonBlock(blockData) {
     const { style, props } = blockData.data;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "email-builder-utils",
-  "version": "1.1.5",
+  "version": "1.1.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [