email-builder-utils 1.1.3 → 1.1.7

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

@@ -4,7 +4,7 @@ exports.tableCommonStyle = void 0;
 exports.convertToHtml = convertToHtml;
 const jimp_1 = require("jimp");
 const types_1 = require("../types");
-const addPxToAttributes = ["fontSize", "lineHeight"];
+const addPxToAttributes = ["fontSize", "lineHeight", "borderRadius", "borderWidth"];
 const addPxOrPerToAttributes = ["width", "height"];
 const allPxAttributes = [...addPxToAttributes, ...addPxOrPerToAttributes];
 exports.tableCommonStyle = "border-collapse:collapse; table-layout:fixed;";
@@ -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;
@@ -75,11 +75,24 @@ function appendOutlookSupport(content, contentStyle) {
   <table width="100%" style="${exports.tableCommonStyle}"><tr><td style="${contentStyle}">${content}</td></tr></table>
   `;
 }
+// function convertDividerBlockToHtml(blockData: IBlockData) {
+//   const { style } = blockData.data;
+//   const { thickness, dividerColor, ...rest } = style;
+//   const convertedStyle = buildStyles(rest, {perChanges: [], pxChanges: allPxAttributes});
+//   return appendOutlookSupport(`<hr style="height:${thickness}px; background-color: ${dividerColor};" />`, convertedStyle);
+// }
 function convertDividerBlockToHtml(blockData) {
     const { style } = blockData.data;
     const { thickness, dividerColor, ...rest } = style;
     const convertedStyle = buildStyles(rest, { perChanges: [], pxChanges: allPxAttributes });
-    return appendOutlookSupport(`<hr style="height:${thickness}px; background-color: ${dividerColor};" />`, convertedStyle);
+    const dividerContent = `
+    <table width="100%" cellpadding="0" cellspacing="0">
+      <tr>
+        <td height="${thickness}" style="font-size:1px; line-height:1px; background:${dividerColor};">&nbsp;</td>
+      </tr>
+    </table>
+  `;
+    return appendOutlookSupport(dividerContent, convertedStyle);
 }
 function convertSpacerBlockToHtml(blockData) {
     const { style } = blockData.data;
@@ -98,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"`;
@@ -118,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"}>
@@ -134,16 +144,32 @@ 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;

package/package.json

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