email-builder-utils 1.1.45 → 1.1.47

package/dist/utils/outlookSupport.js

@@ -1,479 +1,112 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tableCommonStyle = void 0;
-exports.computeArcSize = computeArcSize;
-exports.shouldHideInOutlook = shouldHideInOutlook;
-exports.buildOutlookGridTable = buildOutlookGridTable;
-exports.buildOutlookGridCell = buildOutlookGridCell;
-exports.buildOutlookEmptyCell = buildOutlookEmptyCell;
-exports.buildOutlookVMLImage = buildOutlookVMLImage;
-exports.buildOutlookVMLButton = buildOutlookVMLButton;
-exports.buildVMLShape = buildVMLShape;
-exports.buildOutlookShapeWrapper = buildOutlookShapeWrapper;
-exports.buildOutlookVMLVideo = buildOutlookVMLVideo;
-exports.buildOutlookVMLVDivider = buildOutlookVMLVDivider;
-exports.wrapNonOutlookContent = wrapNonOutlookContent;
-exports.buildOutlookWrapperTable = buildOutlookWrapperTable;
-exports.buildOutlookImageWrapper = buildOutlookImageWrapper;
-exports.buildOutlookButtonWrapper = buildOutlookButtonWrapper;
-exports.buildOutlookVideoWrapper = buildOutlookVideoWrapper;
-exports.buildOutlookVDividerWrapper = buildOutlookVDividerWrapper;
-exports.buildOutlookShapeWrapperTable = buildOutlookShapeWrapperTable;
-exports.buildOutlookGridWrapper = buildOutlookGridWrapper;
-exports.buildOutlookGridRow = buildOutlookGridRow;
-exports.buildOutlookGridCellWrapper = buildOutlookGridCellWrapper;
-exports.buildOutlookEmptyCellWrapper = buildOutlookEmptyCellWrapper;
-const jimp_1 = require("jimp");
-// ============================================================================
-// OUTLOOK SUPPORT UTILITIES
-// ============================================================================
-// These functions handle Microsoft Outlook-specific VML rendering and
-// conditional comments for email HTML compatibility.
-// ============================================================================
-// ---------- Helper: Compute arc size for rounded shapes ----------
-function computeArcSize(borderRadius, widthPx) {
-    if (!borderRadius)
-        return "0";
-    if (typeof borderRadius === "number")
-        return Math.min(borderRadius / widthPx, 1).toFixed(2);
-    const s = borderRadius.toString().trim();
-    if (s.endsWith("%")) {
-        const pct = parseFloat(s.replace("%", "")) || 0;
-        return Math.min(pct / 100, 1).toFixed(2);
+exports.appendOutlookSupport = appendOutlookSupport;
+exports.appendOutlookForImage = appendOutlookForImage;
+exports.loadImageNaturalDimensions = loadImageNaturalDimensions;
+const buildStyles_1 = require("./buildStyles");
+function appendOutlookSupport(content, contentStyle, className, msoWidth) {
+    const visibilityClass = className || "";
+    const shouldHideInOutlook = visibilityClass.includes("hide-desktop");
+    if (shouldHideInOutlook) {
+        return `
+    <!--[if !mso]><!-->
+    <table data-ebr-role="wrapper" role="presentation"  width="100%" style="${buildStyles_1.tableCommonStyle}" class="${visibilityClass}"><tr><td style="${contentStyle}">${content}</td></tr></table>
+    <!--<![endif]-->
+    `;
     }
-    const px = parseFloat(s.replace("px", "")) || 0;
-    return Math.min(px / widthPx, 1).toFixed(2);
-}
-// ---------- Helper: Check if should hide in Outlook ----------
-function shouldHideInOutlook(visibilityClass) {
-    return visibilityClass.includes("hide-desktop");
-}
-function buildOutlookGridTable(options) {
-    const { columnGap, gridVisibilityClass, tableStyles, content } = options;
-    // Outlook needs explicit table layout and width attributes
-    // For MSO, we use a fixed width table to prevent overflow issues
-    // For non-MSO, we use 100% with max-width for responsiveness
-    return `<!--[if mso]>
-  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="600" 
-     style="border-collapse:separate;border-spacing:${columnGap}px;${tableStyles};mso-table-lspace:0;mso-table-rspace:0;"
-     class="${gridVisibilityClass}">
-  <![endif]-->
-  <!--[if !mso]><!-->
-  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" 
-     role="presentation"
-     style="border-collapse:separate;border-spacing:${columnGap}px; ${tableStyles}; max-width:600px;overflow:hidden;"
-     class="${gridVisibilityClass}">
-  <!--<![endif]-->
-  ${content}
-  </table>`;
-}
-function buildOutlookGridCell(options) {
-    const { widthPercent, widthPx, verticalAlign, visibilityClass, responsive, styles, content, } = options;
-    // Outlook needs explicit pixel width on cells, not just percentages
-    return `<td
-    width="${Math.round(widthPx)}"
-    class="${[responsive ? "stack-column" : "", visibilityClass]
-        .filter(Boolean)
-        .join(" ")}"
-    style="vertical-align:${verticalAlign};word-break:break-word;${styles}">
-    ${content}
-  </td>`;
-}
-function buildOutlookEmptyCell(options) {
-    const { widthPercent, widthPx, responsive } = options;
-    // Safe empty cell with explicit pixel width for Outlook
-    return `<td width="${Math.round(widthPx)}" 
-          ${responsive ? 'class="stack-column"' : ""}
-          style="vertical-align:top;">&nbsp;</td>`;
+    if (msoWidth) {
+        return `
+<!--[if mso]>
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${msoWidth}" style="border-collapse:collapse;width:${msoWidth}px;"><tr><td width="${msoWidth}" style="${contentStyle}">
+<![endif]-->
+<!--[if !mso]><!-->
+<table data-ebr-role="wrapper" role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%" style="${contentStyle}">
+<!--<![endif]-->
+${content}
+<!--[if mso]></td></tr></table><![endif]-->
+<!--[if !mso]><!-->
+</td></tr></table>
+<!--<![endif]-->
+    `;
+    }
+    return `
+  <table data-ebr-role="wrapper" role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%" style="${contentStyle}">${content}</td></tr></table>
+  `;
 }
-async function buildOutlookVMLImage(options) {
-    const { imageUrl, outerContainerWidth, innerContainerWidth, style = {} } = options;
-    const image = await jimp_1.Jimp.read(imageUrl);
-    const originalWidth = image.bitmap.width;
-    const originalHeight = image.bitmap.height;
-    // Use inner container width for proper scaling
-    const widthScalingFactor = Math.min(innerContainerWidth / originalWidth, 1);
-    const scaledWidth = Math.round(originalWidth * widthScalingFactor);
-    const scaledHeight = Math.round(originalHeight * widthScalingFactor);
+async function appendOutlookForImage(content, outerContainerWidth, innerContainerWidth, imageUrl, style = {}, finalWidth, finalHeight) {
+    let vmlWidth;
+    let vmlHeight;
+    if (finalWidth && finalHeight) {
+        vmlWidth = finalWidth;
+        vmlHeight = finalHeight;
+    }
+    else if (imageUrl) {
+        try {
+            const { width: originalWidth, height: originalHeight } = await loadImageNaturalDimensions(imageUrl);
+            const widthScalingFactor = Math.min(outerContainerWidth / originalWidth, innerContainerWidth / originalWidth, 1);
+            vmlWidth = Math.round(originalWidth * widthScalingFactor);
+            vmlHeight = Math.round(originalHeight * widthScalingFactor);
+        }
+        catch {
+            vmlWidth = innerContainerWidth;
+            vmlHeight = innerContainerWidth;
+        }
+    }
+    else {
+        vmlWidth = innerContainerWidth;
+        vmlHeight = innerContainerWidth;
+    }
     const borderWidth = parseInt(style?.borderWidth) || 0;
     const borderColor = style?.borderColor || "transparent";
     const borderRadius = parseInt(style?.borderRadius) || 0;
     const useRoundRect = borderRadius > 0;
-    const arcsize = useRoundRect
-        ? Math.min(borderRadius / scaledHeight, 1).toFixed(2)
-        : "";
+    const arcsize = useRoundRect ? Math.min(borderRadius / vmlHeight, 1).toFixed(2) : "";
     const borderAttributes = borderWidth > 0
         ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"`
         : `stroked="false"`;
-    return `<!--[if mso]>
-  <v:${useRoundRect ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml"
-    style="width:${scaledWidth}px;height:${scaledHeight}px;max-width:${scaledWidth}px;"
-    ${borderAttributes}
-    ${useRoundRect ? `arcsize="${arcsize}"` : ""}
-    fill="true" fillcolor="none">
-    <v:fill src="${imageUrl}" type="frame" />
-    <v:textbox inset="0,0,0,0"><div style="display:none;mso-hide:all;">.</div></v:textbox>
-  </v:${useRoundRect ? "roundrect" : "rect"}>
+    let outlookImage;
+    if (useRoundRect && borderRadius > 0) {
+        outlookImage = `<!--[if mso]>
+  <table border="0" cellpadding="0" cellspacing="0" width="${vmlWidth}" style="width:${vmlWidth}px;">
+    <tr>
+      <td align="center" valign="top" width="${vmlWidth}" style="width:${vmlWidth}px;">
+        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
+          style="width:${vmlWidth}px;height:${vmlHeight}px;"
+          ${borderAttributes}
+          arcsize="${arcsize}"
+          fill="true" fillcolor="none">
+          <v:fill src="${imageUrl}" type="tile" aspect="atmost" />
+          <v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>
+        </v:roundrect>
+      </td>
+    </tr>
+  </table>
   <![endif]-->`;
-}
-function buildOutlookVMLButton(options) {
-    const { navigateToUrl, text, buttonStyle: { 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, }, } = options;
-    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}"
-  style="height:${height}px;v-text-anchor:middle;width:${width}px;mso-width-relative:page;"
-  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]-->
-`;
-}
-function buildVMLShape(options) {
-    const { shape, widthPx, heightPx, imageUrl, backgroundColor, shapeColor, borderWidth, borderColor, borderRadius, text, textColor = "#000000", textSize = 14, verticalAlign = "middle", textAlign = "center", msoHasBakedText = false, } = options;
-    const bw = borderWidth || 0;
-    const bc = borderColor || "transparent";
-    const borderAttrs = bw > 0 ? `strokeweight="${bw}px" strokecolor="${bc}"` : `stroked="false"`;
-    const fillColor = shapeColor || backgroundColor || "#2F80ED";
-    const fillMarkup = `<v:fill ${imageUrl ? `src="${imageUrl}" type="frame" aspect="atleast"` : ""} color="${fillColor}" />`;
-    let tag = "rect";
-    let extraAttr = "";
-    if (shape === "circle" || shape === "oval") {
-        tag = "oval";
-    }
-    else if (shape === "rounded") {
-        tag = "roundrect";
-        extraAttr = `arcsize="${computeArcSize(borderRadius, widthPx)}"`;
     }
-    const vAlignMap = { top: "top", middle: "middle", bottom: "bottom" };
-    const hAlignMap = {
-        left: "left",
-        center: "center",
-        right: "right",
-        justify: "left",
-    };
-    const vAlign = vAlignMap[verticalAlign] || "middle";
-    const hAlign = hAlignMap[textAlign] || "center";
-    const safeFontSize = Math.max(Math.round(textSize), 10);
-    const textboxMarkup = text && !msoHasBakedText
-        ? `<v:textbox inset="6pt,6pt,6pt,6pt" style="mso-fit-shape-to-text:false;">
-           <div style="display:table;width:100%;height:100%;">
-             <div style="display:table-cell;vertical-align:${vAlign};text-align:${hAlign};padding:0 6px;">
-               <div style="color:${textColor};font-family:Arial, sans-serif;font-size:${safeFontSize}px;line-height:1.3;word-wrap:break-word;">
-                 ${text}
-               </div>
-             </div>
-           </div>
-         </v:textbox>`
-        : `<v:textbox inset="0,0,0,0"><div style="display:none;mso-hide:all;">.</div></v:textbox>`;
-    return `
-<v:${tag} xmlns:v="urn:schemas-microsoft-com:vml"
-  style="width:${widthPx}px;height:${heightPx}px;mso-width-relative:page;max-width:${widthPx}px;"
-  ${borderAttrs}
-  fill="true" fillcolor="${fillColor}"${extraAttr}>
-  ${fillMarkup}
-  ${textboxMarkup}
-</v:${tag}>`;
-}
-function buildOutlookShapeWrapper(options) {
-    const { visibilityClass, widthPx, heightPx, opts } = options;
-    const pad = opts.padding || {};
-    const align = opts.alignment || "left";
-    const valign = opts.verticalAlign || "middle";
-    const vml = buildVMLShape({
-        shape: opts.shape,
-        widthPx,
-        heightPx,
-        imageUrl: opts.msoBakeImageWithText || opts.imageUrl,
-        backgroundColor: opts.shapeColor || opts.backgroundColor,
-        borderWidth: opts.borderWidth,
-        borderColor: opts.borderColor,
-        borderRadius: opts.borderRadius,
-        text: opts.text,
-        textColor: opts.textColor,
-        textSize: opts.textSize,
-        verticalAlign: opts.verticalAlign,
-        textAlign: opts.textAlign,
-        msoHasBakedText: Boolean(opts.msoBakeImageWithText),
-    });
-    if (shouldHideInOutlook(visibilityClass)) {
-        return `<!--[if !mso]><!-->
-    <table align="${align}" border="0" cellpadding="0" cellspacing="0"
-           style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;" class="${visibilityClass}">
-      <tr>
-        <td valign="${valign}"
-            style="padding:${pad.top || 0}px ${pad.right || 0}px ${pad.bottom || 0}px ${pad.left || 0}px;">
-          ${vml}
-        </td>
-      </tr>
-    </table>
-    <!--<![endif]-->`;
-    }
-    return `<!--[if mso]>
-  <table align="${align}" border="0" cellpadding="0" cellspacing="0"
-         style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;" class="${visibilityClass}">
+    else {
+        const borderStyleAttr = borderWidth > 0 ? `border: ${borderWidth}px solid ${borderColor};` : '';
+        outlookImage = `<!--[if mso]>
+  <table border="0" cellpadding="0" cellspacing="0" width="${vmlWidth}" style="width:${vmlWidth}px;">
     <tr>
-      <td valign="${valign}"
-          style="padding:${pad.top || 0}px ${pad.right || 0}px ${pad.bottom || 0}px ${pad.left || 0}px;">
-        ${vml}
+      <td align="center" valign="top" width="${vmlWidth}" style="width:${vmlWidth}px;">
+        <img src="${imageUrl}" alt="Image" border="0" width="${vmlWidth}" height="${vmlHeight}" style="display:block; width:${vmlWidth}px; height:${vmlHeight}px; max-width:${vmlWidth}px; ${borderStyleAttr}" />
       </td>
     </tr>
   </table>
-<![endif]-->`;
-}
-function buildOutlookVMLVideo(options) {
-    const { innerContainerWidth, calculatedHeight, videoLink, resolvedThumbnail, borderWidth, borderColor, borderRadius, altText, hideOnDesktop, } = options;
-    const playIconWidth = 65;
-    const playIconHeight = 46;
-    const vmlLeft = innerContainerWidth / 2 - playIconWidth / 2;
-    const vmlTop = calculatedHeight / 2 - playIconHeight / 2;
-    if (hideOnDesktop) {
-        return `<!--[if !mso]><!-->
-       <v:group xmlns:v="urn:schemas-microsoft-com:vml"
-         coordsize="${innerContainerWidth},${calculatedHeight}"
-         href="${videoLink}"
-         style="width:${innerContainerWidth}px;height:${calculatedHeight}px;mso-width-relative:page;">
-         <v:rect fill="t" style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px;" stroked="t"
-           strokeweight="${borderWidth}px"
-           strokecolor="${borderColor}"
-           ${borderRadius > 0 ? `arcsize="${Math.min(borderRadius / calculatedHeight, 1).toFixed(2)}"` : ""}
-         >
-           <v:fill src="${resolvedThumbnail}" type="frame" color="#FFFFFF"/>
-         </v:rect>
-         <v:shape type="#_x0000_t75"
-           style="position:absolute;
-                  left:${vmlLeft.toFixed(1)}px;
-                  top:${vmlTop.toFixed(1)}px;
-                  width:${playIconWidth}px;
-                  height:${playIconHeight}px;"
-           alt="Play" href="${videoLink}" title="${altText || "Video"}"
-           stroked="f" filled="t">
-           <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
-         </v:shape>
-       </v:group>
-       <!--<![endif]-->`;
-    }
-    return `<!--[if mso]>
-       <v:group xmlns:v="urn:schemas-microsoft-com:vml"
-         coordsize="${innerContainerWidth},${calculatedHeight}"
-         href="${videoLink}"
-         style="width:${innerContainerWidth}px;height:${calculatedHeight}px;mso-width-relative:page;">
-         <v:rect fill="t" style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px; stroked="t"
-           strokeweight="${borderWidth}px"
-           strokecolor="${borderColor}"
-           ${borderRadius > 0 ? `arcsize="${Math.min(borderRadius / calculatedHeight, 1).toFixed(2)}"` : ""}
-         >
-           <v:fill src="${resolvedThumbnail}" type="frame" color="#FFFFFF"/>
-         </v:rect>
-         <v:shape type="#_x0000_t75"
-           style="position:absolute;
-                  left:${vmlLeft.toFixed(1)}px;
-                  top:${vmlTop.toFixed(1)}px;
-                  width:${playIconWidth}px;
-                  height:${playIconHeight}px;"
-           alt="Play" href="${videoLink}" title="${altText || "Video"}"
-           stroked="f" filled="t">
-           <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
-         </v:shape>
-       </v:group>
-       <![endif]-->`;
-}
-function buildOutlookVMLVDivider(options) {
-    const { width, height, dividerColor } = options;
-    return `<!--[if mso | IE]>
-  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fillcolor="${dividerColor}" style="width:${width}px;height:${height}px;mso-width-relative:page;" stroke="f"></v:rect>
   <![endif]-->`;
-}
-function wrapNonOutlookContent(options) {
-    const { content, visibilityClass } = options;
-    return `<!--[if !mso]><!-->
-  ${content}
-  <!--<![endif]-->`;
-}
-// ============================================================================
-// OUTLOOK WRAPPER TABLE BUILDER
-// ============================================================================
-// Replaces the inline Outlook conditional logic in appendOutlookSupport()
-exports.tableCommonStyle = "border-collapse:collapse; table-layout:fixed;";
-function buildOutlookWrapperTable(options) {
-    const { content, contentStyle, visibilityClass = "", maxWidth = 600 } = options;
-    const shouldHideInOutlook = visibilityClass.includes("hide-desktop");
-    if (shouldHideInOutlook) {
-        return `
-    <!--[if !mso]><!-->
-    <table width="100%" style="${exports.tableCommonStyle}" class="${visibilityClass}"><tr><td style="${contentStyle}">${content}</td></tr></table>
-    <!--<![endif]-->
-    `;
     }
     return `
-  <table width="100%" style="${exports.tableCommonStyle}; max-width:${maxWidth}px;" class="${visibilityClass}"><tr><td style="${contentStyle}">${content}</td></tr></table>
-  `;
-}
-function buildOutlookImageWrapper(options) {
-    const { outlookVMLImage, nonMsoWrapper, containerStyles, visibilityClass } = options;
-    const wrappedOutlookImage = wrapNonOutlookContent({
-        content: outlookVMLImage,
-        visibilityClass,
-    });
-    const outlookImage = `
-    ${wrappedOutlookImage}
+    ${outlookImage}
     <!--[if !mso]><!-->
-    ${nonMsoWrapper}
+      ${content}
     <!--<![endif]-->
   `;
-    return buildOutlookWrapperTable({
-        content: outlookImage,
-        contentStyle: containerStyles,
-        visibilityClass,
-    });
 }
-function buildOutlookButtonWrapper(options) {
-    const { outlookVMLButton, buttonElement, convertedStyles, visibilityClass } = options;
-    return buildOutlookWrapperTable({
-        content: `${outlookVMLButton}${buttonElement}`,
-        contentStyle: convertedStyles,
-        visibilityClass,
+async function loadImageNaturalDimensions(imageUrl) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
+        img.onerror = () => reject(new Error(`Failed to load image: ${imageUrl}`));
+        img.src = imageUrl;
     });
 }
-function buildOutlookVideoWrapper(options) {
-    const { videoContent, outerContainerStyles, cellWidthInPx, visibilityClass, percentWidth, textAlign = "left", } = options;
-    return `
-  <!--[if mso]>
-  <table width="${cellWidthInPx}" border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0; border-collapse: collapse; ${outerContainerStyles}">
-  <![endif]-->
-  <!--[if !mso]><!-->
-  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0; padding:0; border-collapse: collapse; max-width:${cellWidthInPx}px;" class="${visibilityClass}">
-  <!--<![endif]-->
-    <tr>
-      <td align="${textAlign}" style="padding:0;">
-        <!--[if mso]>
-        <table width="${percentWidth}" border="0" cellpadding="0" cellspacing="0" align="${textAlign}" style="border-collapse:collapse;">
-        <![endif]-->
-        <!--[if !mso]><!-->
-        <table border="0" cellpadding="0" cellspacing="0" role="presentation" 
-          align="${textAlign}"
-          style="margin:0; width:${percentWidth}; border-collapse:collapse;">
-        <!--<![endif]-->
-          <tr>
-            <td align="${textAlign}" style="text-align:${textAlign}; padding:0;">
-              ${videoContent}
-            </td>
-          </tr>
-        </table>
-      </td>
-    </tr>
-  </table>
-`;
-}
-function buildOutlookVDividerWrapper(options) {
-    const { outlookVDividerVML, nonMsoDivider, convertedStyle, visibilityClass } = options;
-    const dividerContent = `
-    <table cellpadding="0" cellspacing="0" border="0" align="center" style="width:auto; ${convertedStyle}">
-      <tr>
-        <td style="vertical-align: middle; text-align: center;">
-          ${outlookVDividerVML}
-          <!--[if !mso]><!-- -->
-          ${nonMsoDivider}
-          <!--<![endif]-->
-        </td>
-      </tr>
-    </table>
-  `;
-    return buildOutlookWrapperTable({
-        content: dividerContent,
-        contentStyle: convertedStyle,
-        visibilityClass,
-    });
-}
-function buildOutlookShapeWrapperTable(options) {
-    const { outlookContent, nonMsoContent, padding, alignment, visibilityClass } = options;
-    return `
-<table width="100%" style="border-collapse:collapse;table-layout:fixed;max-width:600px;" class="${visibilityClass}">
-  <tr>
-    <td style="padding:${padding.top || 0}px ${padding.right || 0}px ${padding.bottom || 0}px ${padding.left || 0}px;text-align:${alignment};">
-      ${outlookContent}
-      <!--[if !mso]><!-->
-      ${nonMsoContent}
-      <!--<![endif]-->
-    </td>
-  </tr>
-</table>`;
-}
-function buildOutlookGridWrapper(options) {
-    const { columnGap, gridVisibilityClass, tableStyles, content, cellWidthInPx } = options;
-    // Use fixed width for MSO to prevent percentage calculation issues
-    // Add overflow:hidden and table-layout:fixed for proper constraint
-    return `<!--[if mso]>
-  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="${cellWidthInPx}" 
-     style="border-collapse:separate;border-spacing:${columnGap}px;${tableStyles};mso-table-lspace:0;mso-table-rspace:0;overflow:hidden;">
-  <![endif]-->
-  <!--[if !mso]><!-->
-  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" 
-     role="presentation"
-     style="border-collapse:separate;border-spacing:${columnGap}px; ${tableStyles}; max-width:${cellWidthInPx}px;overflow:hidden;"
-     class="${gridVisibilityClass}">
-  <!--<![endif]-->
-  ${content}
-  </table>`;
-}
-function buildOutlookGridRow(options) {
-    return `<tr>${options.rowContent}</tr>`;
-}
-function buildOutlookGridCellWrapper(options) {
-    const { widthPx, widthPercent, verticalAlign, visibilityClass, responsive, styles, msoContent, nonMsoContent, } = options;
-    // For Outlook, we need explicit pixel widths to prevent percentage calculation issues
-    // Add overflow:hidden to both MSO and non-MSO cells to prevent overflow
-    return `<!--[if mso]>
-  <td width="${widthPx}" valign="${verticalAlign}" style="vertical-align:${verticalAlign};word-break:break-word;overflow:hidden;${styles}">
-    ${msoContent}
-  </td>
-  <![endif]-->
-  <!--[if !mso]><!-->
-  <td
-    width="${widthPercent}%"
-    class="${[responsive ? "stack-column" : "", visibilityClass]
-        .filter(Boolean)
-        .join(" ")}"
-    style="vertical-align:${verticalAlign};word-break:break-word;overflow:hidden;${styles}">
-    ${nonMsoContent}
-  </td>
-  <!--<![endif]-->`;
-}
-function buildOutlookEmptyCellWrapper(options) {
-    const { widthPx, widthPercent, responsive } = options;
-    // Add overflow:hidden to prevent content from breaking layout in Outlook
-    return `<!--[if mso]>
-  <td width="${widthPx}" ${responsive ? 'class="stack-column"' : ""} style="vertical-align:top;overflow:hidden;">&nbsp;</td>
-  <![endif]-->
-  <!--[if !mso]><!-->
-  <td width="${widthPercent}%" 
-      ${responsive ? 'class="stack-column"' : ""}
-      style="vertical-align:top;overflow:hidden;">&nbsp;</td>
-  <!--<![endif]-->`;
-}
-// ============================================================================
-// EXPORT INDEX
-// ============================================================================
-__exportStar(require("./common"), exports);

package/package.json

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