email-builder-utils 1.1.46 → 1.1.48

package/dist/utils/blocks/button.d.ts

@@ -0,0 +1,29 @@
+export declare function appendOutlookForButton(buttonData: {
+    style: any;
+    text: string;
+    navigateToUrl: string;
+}): {
+    innerContent: string;
+    computed: {
+        fs: any;
+        fontWeight: any;
+        containerAlign: any;
+        padTop: any;
+        padRight: any;
+        padBottom: any;
+        padLeft: any;
+        explicitWidth: any;
+        vmlWidth: number;
+        safeColor: any;
+        bgColor: any;
+        safeFF: string;
+        finalHeight: any;
+        explicitHeight: any;
+        bw: any;
+        br: any;
+        bdColor: any;
+        bdStyle: any;
+    };
+};
+export declare function convertButtonBlock(blockData: any): string;
+//# sourceMappingURL=button.d.ts.map

package/dist/utils/blocks/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/button.ts"],"names":[],"mappings":"AAIA,wBAAgB,sBAAsB,CAAC,UAAU,EAAE;IAAE,KAAK,EAAE,GAAG,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE;;;;;;;;;;;;;;;;;;;;;;EA6ErG;AAED,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,GAAG,UAgEhD"}

package/dist/utils/blocks/button.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appendOutlookForButton = appendOutlookForButton;
+exports.convertButtonBlock = convertButtonBlock;
+const buildStyles_1 = require("../buildStyles");
+const fontFallback_1 = require("../fontFallback");
+const common_1 = require("../common");
+function appendOutlookForButton(buttonData) {
+    const { style, text, navigateToUrl } = buttonData;
+    const pad = style.buttonPadding || {};
+    const padTop = Number.isFinite(pad.top) ? pad.top : 10;
+    const padBottom = Number.isFinite(pad.bottom) ? pad.bottom : 10;
+    const padLeft = Number.isFinite(pad.left) ? pad.left : 20;
+    const padRight = Number.isFinite(pad.right) ? pad.right : 20;
+    const fs = style.fontSize || 16;
+    const explicitHeight = typeof style.height === "number" && style.height > 0 ? style.height : 0;
+    const minHeight = padTop + padBottom + fs;
+    const finalHeight = explicitHeight > 0 ? Math.max(explicitHeight, minHeight) : minHeight;
+    const safeFF = (0, buildStyles_1.sanitizeFontFamily)((0, fontFallback_1.withFontFallback)(style.fontFamily));
+    const safeColor = style.color || "#ffffff";
+    const bgColor = style.buttonColor || "transparent";
+    const bdColor = style.borderColor || "transparent";
+    const bdStyle = style.borderStyle || "solid";
+    const bw = typeof style.borderWidth === "number" ? style.borderWidth : 0;
+    const br = typeof style.borderRadius === "number" ? style.borderRadius : 0;
+    const fontWeight = style.fontWeight || 400;
+    const containerAlign = style.alignment || style.textAlign || "left";
+    const explicitWidth = typeof style.width === "number" && style.width > 0 ? style.width : 0;
+    const estimatedTextWidth = Math.ceil((text || "").length * fs * 0.62);
+    const vmlWidthBase = explicitWidth || Math.max(120, estimatedTextWidth + padLeft + padRight + bw * 2);
+    const minPillWidth = br > 0 ? Math.ceil(finalHeight * 2) : 0;
+    const vmlWidth = Math.max(vmlWidthBase, minPillWidth);
+    const borderCss = bw > 0 ? `border:${bw}px ${bdStyle} ${bdColor};` : "";
+    const widthCss = explicitWidth ? `width:${explicitWidth}px;` : "";
+    const nonMsoVerticalSizing = explicitHeight > 0
+        ? `height:${finalHeight}px;line-height:${finalHeight}px;padding:0 ${padRight}px 0 ${padLeft}px;`
+        : `padding:${padTop}px ${padRight}px ${padBottom}px ${padLeft}px;line-height:${fs}px;`;
+    const nonMsoAnchor = `<!--[if !mso]><!-->
+<a href="${navigateToUrl}"
+   target="_blank" rel="noreferrer noopener"
+   style="display:inline-block;background-color:${bgColor};border-radius:${br}px;${borderCss}color:${safeColor};font-family:${safeFF};font-size:${fs}px;font-weight:${fontWeight};text-decoration:none;${nonMsoVerticalSizing}text-align:center;white-space:nowrap;-webkit-text-size-adjust:none;box-sizing:border-box;${widthCss}mso-hide:all;">${text}</a>
+<!--<![endif]-->`;
+    const arcSizePct = br > 0 ? Math.min(Math.round((br / (finalHeight / 2)) * 100), 50) : 0;
+    const strokeAttrs = bw > 0
+        ? `stroke="true" strokecolor="${bdColor}" strokeweight="${bw}px"`
+        : `stroke="false"`;
+    const msoButton = `<!--[if mso]>
+<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
+  href="${navigateToUrl}"
+  style="height:${finalHeight}px;v-text-anchor:middle;width:${vmlWidth}px;"
+  arcsize="${arcSizePct}%"
+  ${strokeAttrs}
+  fillcolor="${bgColor}">
+  <w:anchorlock/>
+  <v:textbox inset="0,0,0,0">
+    <center style="color:${safeColor};font-family:${safeFF};font-size:${fs}px;font-weight:${fontWeight};mso-line-height-rule:exactly;line-height:${finalHeight}px;text-decoration:none;">${text}</center>
+  </v:textbox>
+</v:roundrect>
+<![endif]-->`;
+    const innerContent = containerAlign === "center"
+        ? `<center>${msoButton}${nonMsoAnchor}</center>`
+        : `<div style="text-align:${containerAlign};">${msoButton}${nonMsoAnchor}</div>`;
+    return {
+        innerContent,
+        computed: {
+            fs, fontWeight, containerAlign,
+            padTop, padRight, padBottom, padLeft,
+            explicitWidth, vmlWidth,
+            safeColor, bgColor, safeFF,
+            finalHeight, explicitHeight,
+            bw, br, bdColor, bdStyle,
+        },
+    };
+}
+function convertButtonBlock(blockData) {
+    const { style, props } = blockData.data;
+    const { text, navigateToUrl } = props;
+    const { fontFamily, fontSize, fontWeight, textAlign, borderColor, borderRadius, borderWidth, borderStyle, buttonPadding, color, buttonColor, width, height, alignment, padding, backgroundColor: containerBg, } = style;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
+    const { innerContent, computed } = appendOutlookForButton({
+        style: {
+            fontFamily, fontSize, fontWeight, textAlign,
+            borderColor, borderRadius, borderWidth, borderStyle,
+            buttonPadding, color, buttonColor, width, height, alignment,
+        },
+        text: text || "",
+        navigateToUrl: navigateToUrl || "",
+    });
+    const buttonBlockProps = (0, common_1.encodeBlockPropsAttr)({
+        buttonText: text || "",
+        navigateToUrl: navigateToUrl || "",
+        buttonColor: computed.bgColor,
+        color: computed.safeColor,
+        fontFamily: fontFamily || "",
+        fontSize: computed.fs,
+        fontWeight: computed.fontWeight,
+        alignment: computed.containerAlign,
+        padding: {
+            top: padding?.top || 0,
+            right: padding?.right || 0,
+            bottom: padding?.bottom || 0,
+            left: padding?.left || 0,
+        },
+        buttonPadding: {
+            top: computed.padTop,
+            right: computed.padRight,
+            bottom: computed.padBottom,
+            left: computed.padLeft,
+        },
+        width: computed.explicitWidth,
+        height: typeof height === "number" && height > 0 ? height : 0,
+        backgroundColor: containerBg || "",
+        borderRadius: computed.br,
+        borderColor: computed.bdColor,
+        borderWidth: computed.bw,
+        borderStyle: computed.bdStyle,
+        hideOnDesktop: Boolean(props.hideOnDesktop),
+        hideOnMobile: Boolean(props.hideOnMobile),
+    });
+    return `
+<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" class="${visibilityClass}" data-block-type="button" data-block-props="${buttonBlockProps}">
+  <tr>
+    <td align="${computed.containerAlign}"
+        style="padding:${padding?.top || 0}px ${padding?.right || 0}px ${padding?.bottom || 0}px ${padding?.left || 0}px;background-color:${containerBg || 'transparent'};">
+      ${innerContent}
+    </td>
+  </tr>
+</table>
+`;
+}

package/dist/utils/blocks/dividers.d.ts

@@ -0,0 +1,4 @@
+export declare function convertDividerBlockToHtml(blockData: any): string;
+export declare function convertSpacerBlockToHtml(blockData: any): string;
+export declare function convertVerticalDividerBlockToHtml(blockData: any): string;
+//# sourceMappingURL=dividers.d.ts.map

package/dist/utils/blocks/dividers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dividers.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/dividers.ts"],"names":[],"mappings":"AAIA,wBAAgB,yBAAyB,CAAC,SAAS,EAAE,GAAG,UAuCvD;AAED,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,GAAG,UAKtD;AAED,wBAAgB,iCAAiC,CAAC,SAAS,EAAE,GAAG,UAwB/D"}

package/dist/utils/blocks/dividers.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertDividerBlockToHtml = convertDividerBlockToHtml;
+exports.convertSpacerBlockToHtml = convertSpacerBlockToHtml;
+exports.convertVerticalDividerBlockToHtml = convertVerticalDividerBlockToHtml;
+const buildStyles_1 = require("../buildStyles");
+const outlookSupport_1 = require("../outlookSupport");
+const common_1 = require("../common");
+function convertDividerBlockToHtml(blockData) {
+    const { style, props } = blockData.data;
+    const { hideOnMobile, hideOnDesktop } = props;
+    const { thickness, dividerColor, width, alignment, ...rest } = style;
+    const convertedStyle = (0, buildStyles_1.buildStyles)(rest, { perChanges: [], pxChanges: buildStyles_1.allPxAttributes });
+    const dividerWidth = width || 100;
+    const alignAttr = alignment === 'center' ? 'center' : alignment === 'right' ? 'right' : 'left';
+    const alignMargin = alignAttr === 'center' ? '0 auto' : alignAttr === 'right' ? '0 0 0 auto' : '0 auto 0 0';
+    const contentStyle = convertedStyle
+        ? `${convertedStyle}; text-align:${alignAttr};`
+        : `text-align:${alignAttr};`;
+    const visibilityClass = [
+        hideOnMobile ? "hide-mobile" : "",
+        hideOnDesktop ? "hide-desktop" : "",
+    ].filter(Boolean).join(" ");
+    const dividerContent = `
+    <table
+      align="${alignAttr}"
+      width="${dividerWidth}%"
+      cellpadding="0"
+      cellspacing="0"
+      style="margin:${alignMargin};"
+    >
+      <tr>
+        <td
+          height="${thickness}"
+          style="font-size:1px; line-height:1px; background:${dividerColor}; width:100%;"
+        >
+          &nbsp;
+        </td>
+      </tr>
+    </table>
+  `;
+    return (0, outlookSupport_1.appendOutlookSupport)(dividerContent, contentStyle, visibilityClass);
+}
+function convertSpacerBlockToHtml(blockData) {
+    const { style, props } = blockData.data;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
+    const styles = (0, buildStyles_1.buildStyles)(style, { perChanges: [], pxChanges: buildStyles_1.allPxAttributes });
+    return (0, outlookSupport_1.appendOutlookSupport)(``, styles, visibilityClass);
+}
+function convertVerticalDividerBlockToHtml(blockData) {
+    const { style, props } = blockData.data;
+    const { width, height, dividerColor, padding, backgroundColor } = style;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
+    const outerStyles = (0, buildStyles_1.buildStyles)({ padding, backgroundColor }, {
+        perChanges: [],
+        pxChanges: buildStyles_1.allPxAttributes,
+    });
+    return `
+  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
+         style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}" data-block-type="vdivider">
+    <tr>
+      <td style="${outerStyles}; text-align:center; vertical-align:middle;">
+        <!--[if mso | IE]>
+        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fillcolor="${dividerColor}" style="width:${width}px;height:${height}px;" stroke="f"></v:rect>
+        <![endif]-->
+        <!--[if !mso]><!-->
+        <div style="display:inline-block;width:${width}px;height:${height}px;background:${dividerColor};line-height:0;font-size:0;">&nbsp;</div>
+        <!--<![endif]-->
+      </td>
+    </tr>
+  </table>`;
+}

package/dist/utils/blocks/grid.d.ts

@@ -0,0 +1,6 @@
+export declare function convertGridBlock(blockData: any, rootData: any, cellWidthInPx: number): Promise<string>;
+export declare function convertGridCellBlock(blockData: any, rootData: any, cellWidthPercent: number, parentCellWidthPx: number, parentGridHasBorder?: boolean): Promise<{
+    html: string;
+    styles: string;
+}>;
+//# sourceMappingURL=grid.d.ts.map

package/dist/utils/blocks/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/grid.ts"],"names":[],"mappings":"AAKA,wBAAsB,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAiO1F;AAED,wBAAsB,oBAAoB,CACxC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,gBAAgB,EAAE,MAAM,EACxB,iBAAiB,EAAE,MAAM,EACzB,mBAAmB,UAAQ;;;GAuD5B"}

package/dist/utils/blocks/grid.js

@@ -0,0 +1,248 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertGridBlock = convertGridBlock;
+exports.convertGridCellBlock = convertGridCellBlock;
+const buildStyles_1 = require("../buildStyles");
+const gradientUtils_1 = require("../gradientUtils");
+const common_1 = require("../common");
+const jsonToHTML_1 = require("../jsonToHTML");
+async function convertGridBlock(blockData, rootData, cellWidthInPx) {
+    const { style = {}, childrenIds = [], props } = blockData.data;
+    const { columns = 1, cellWidths = [], responsive = true } = props;
+    const { columnGap = 0, backgroundImage, backgroundColor, ...restStyle } = style;
+    const gridVisibilityClass = (0, common_1.getVisibilityClass)(props);
+    const bgImageStr = typeof backgroundImage === "string" ? backgroundImage : '';
+    const customCssStr = restStyle.customCss || '';
+    const gradientInCustomCss = !bgImageStr.includes('gradient(') && customCssStr.includes('gradient(')
+        ? (customCssStr.match(/(?:linear|radial|conic)-gradient\([^)]+(?:\([^)]*\)[^)]*)*\)/)?.[0] || '')
+        : '';
+    const effectiveGradient = bgImageStr.includes('gradient(') ? bgImageStr : gradientInCustomCss;
+    const isGradient = Boolean(effectiveGradient);
+    const parsedGradient = isGradient ? (0, gradientUtils_1.parseGradient)(effectiveGradient) : null;
+    const fallbackBgColor = backgroundColor ||
+        parsedGradient?.fallback ||
+        (0, gradientUtils_1.extractCssFallbackColor)(customCssStr) ||
+        "#ffffff";
+    const rawBgImageUrl = !isGradient && bgImageStr
+        ? bgImageStr.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "")
+        : null;
+    const innerCustomCss = gradientInCustomCss
+        ? customCssStr.replace(/background-image\s*:[^;]+;?/gi, '').trim()
+        : customCssStr;
+    const innerRestStyleRaw = (rawBgImageUrl || isGradient)
+        ? { ...restStyle, customCss: innerCustomCss, backgroundSize: undefined, backgroundPosition: undefined, backgroundRepeat: undefined }
+        : { ...restStyle, customCss: innerCustomCss };
+    const { borderRadius, border, borderColor, borderWidth, borderStyle: borderStyleProp, ...innerRestStyle } = innerRestStyleRaw;
+    const divBorderParts = [];
+    if (borderRadius)
+        divBorderParts.push(`border-radius:${typeof borderRadius === 'number' ? borderRadius + 'px' : borderRadius};`, `overflow:hidden;`);
+    if (border) {
+        divBorderParts.push(`border:${border};`);
+    }
+    else if (borderWidth || borderColor || borderStyleProp) {
+        const bw = borderWidth ? (typeof borderWidth === 'number' ? borderWidth + 'px' : borderWidth) : '1px';
+        const bs = borderStyleProp || 'solid';
+        const bc = borderColor || '#000000';
+        divBorderParts.push(`border:${bw} ${bs} ${bc};`);
+    }
+    const divBorderStyle = divBorderParts.join(' ');
+    const tableBgForNonMso = divBorderStyle
+        ? 'transparent'
+        : ((rawBgImageUrl || isGradient) ? undefined : backgroundColor);
+    const tableStyles = (0, buildStyles_1.buildStyles)({ backgroundColor: tableBgForNonMso, ...innerRestStyle }, {
+        perChanges: [], pxChanges: buildStyles_1.allPxAttributes,
+    });
+    const total = childrenIds.length;
+    const visualRows = Math.ceil(total / columns);
+    const msoTableWidth = Math.min(cellWidthInPx, 600);
+    const msoBgColor = !rawBgImageUrl && !isGradient ? (backgroundColor || '') : '';
+    const msoBgAttr = msoBgColor ? ` bgcolor="${msoBgColor}"` : '';
+    const msoBgStyle = msoBgColor ? `background-color:${msoBgColor};` : '';
+    const innerBgTransparent = (rawBgImageUrl || isGradient) ? 'background-color:transparent;' : '';
+    const nonMsoBgAttr = !rawBgImageUrl && !isGradient && backgroundColor && !divBorderStyle ? ` bgcolor="${backgroundColor}"` : '';
+    const divWrapBg = divBorderStyle && backgroundColor && !rawBgImageUrl && !isGradient
+        ? ` background-color:${backgroundColor};`
+        : '';
+    const divWrapOpen = divBorderStyle ? `<div style="${divBorderStyle}${divWrapBg}">` : '';
+    const divWrapClose = divBorderStyle ? `</div>` : '';
+    let html = `
+  <!--[if mso]>
+  <table border="0" cellpadding="0" cellspacing="0" width="${msoTableWidth}"${msoBgAttr}
+     style="border-collapse:collapse;width:${msoTableWidth}px;${msoBgStyle}${innerBgTransparent}"
+     class="${gridVisibilityClass}">
+  <![endif]-->
+  <!--[if !mso]><!-->
+  <table border="0" cellpadding="0" cellspacing="0" width="100%"
+     role="presentation"${nonMsoBgAttr}
+     style="border-collapse:collapse; ${innerBgTransparent}${tableStyles}; max-width:600px;"
+     class="${gridVisibilityClass}">
+  <!--<![endif]-->
+  `;
+    for (let r = 0; r < visualRows; r++) {
+        html += "<tr>";
+        let visibleCells = 0;
+        let lastVisibleCol = 0;
+        const rowIds = [];
+        for (let c = 0; c < columns; c++) {
+            const idx = r * columns + c;
+            const id = childrenIds[idx] ?? null;
+            rowIds.push(id);
+            const child = id ? rootData[id] : null;
+            if (!child?.data?.props?.hideOnDesktop) {
+                visibleCells++;
+                lastVisibleCol = c;
+            }
+        }
+        const safeWidth = visibleCells > 0 ? 100 / visibleCells : 100 / columns;
+        const totalGapPx = columnGap * Math.max(visibleCells - 1, 0);
+        const adjustedTableWidth = Math.max(msoTableWidth - totalGapPx, 1);
+        let totalWidth = 0;
+        const cellWidthPercents = [];
+        for (let c = 0; c < columns; c++) {
+            const id = rowIds[c];
+            let widthPercent = cellWidths[c] ?? safeWidth;
+            if (widthPercent <= 0 || widthPercent > 100)
+                widthPercent = safeWidth;
+            cellWidthPercents.push(widthPercent);
+            if (id) {
+                const child = rootData[id];
+                if (!child?.data?.props?.hideOnDesktop)
+                    totalWidth += widthPercent;
+            }
+        }
+        const scaleFactor = totalWidth > 0 && totalWidth < 100 ? 100 / totalWidth : 1;
+        for (let c = 0; c < columns; c++) {
+            const id = rowIds[c];
+            let widthPercent = Math.min(cellWidthPercents[c] * scaleFactor, 100);
+            const cellWidthPx = Math.round((widthPercent / 100) * adjustedTableWidth);
+            if (id) {
+                const child = rootData[id];
+                const { style: cellStyle = {}, props: childProps = {} } = child.data;
+                const verticalAlign = cellStyle.verticalAlign || "top";
+                const childVisible = !childProps.hideOnDesktop;
+                const visibilityClass = (0, common_1.getVisibilityClass)(childProps);
+                if (childVisible) {
+                    const { html: childHtml, styles } = await convertGridCellBlock(child, rootData, widthPercent, adjustedTableWidth, Boolean(divBorderStyle));
+                    const cellBgColor = cellStyle.backgroundColor || '';
+                    const cellBgAttr = cellBgColor ? ` bgcolor="${cellBgColor}"` : '';
+                    html += `
+          <td
+            width="${cellWidthPx}"${cellBgAttr}
+            class="${[responsive ? "stack-column" : "", visibilityClass].filter(Boolean).join(" ")}"
+            style="width:${cellWidthPx}px;vertical-align:${verticalAlign};word-break:break-word;${styles}"
+          >
+            ${childHtml}
+          </td>`;
+                    if (columnGap > 0 && c !== lastVisibleCol) {
+                        html += `<td width="${columnGap}" style="width:${columnGap}px;font-size:0;line-height:0;padding:0;" aria-hidden="true"></td>`;
+                    }
+                }
+            }
+            else {
+                html += `
+        <td width="${cellWidthPx}"
+            ${responsive ? 'class="stack-column"' : ""}
+            style="width:${cellWidthPx}px;vertical-align:top;">
+        </td>`;
+                if (columnGap > 0 && c !== lastVisibleCol) {
+                    html += `<td width="${columnGap}" style="width:${columnGap}px;font-size:0;line-height:0;padding:0;" aria-hidden="true"></td>`;
+                }
+            }
+        }
+        html += "</tr>";
+    }
+    html += `
+  <!--[if mso]>
+  </table>
+  <![endif]-->
+  <!--[if !mso]><!-->
+  </table>
+  <!--<![endif]-->
+  `;
+    if (rawBgImageUrl || isGradient) {
+        const vmlFill = isGradient
+            ? (() => {
+                const vmlAngle = (0, gradientUtils_1.cssAngleToVml)(parsedGradient?.angle || 180);
+                const c1 = parsedGradient?.fallback || '#ffffff';
+                const c2 = parsedGradient?.colors[parsedGradient.colors.length - 1] || c1;
+                return `<v:fill type="gradient" color="${c1}" color2="${c2}" angle="${vmlAngle}" />`;
+            })()
+            : `<v:fill type="frame" src="${rawBgImageUrl}" color="${fallbackBgColor}" />`;
+        html = `
+<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation"
+  style="border-collapse:collapse;width:100%;max-width:${msoTableWidth}px;">
+  <tr>
+    <td width="100%" bgcolor="${fallbackBgColor}" valign="top"
+      ${!isGradient && rawBgImageUrl ? `background="${rawBgImageUrl}"` : ""}
+      style="
+        width:100%;max-width:${msoTableWidth}px;
+        background-color:${fallbackBgColor};
+        ${isGradient ? `background:${effectiveGradient};` : `background-image:url('${rawBgImageUrl}'); background-position:center center; background-size:cover; background-repeat:no-repeat;`}
+      ">
+
+      <!--[if gte mso 9]>
+      <v:rect xmlns:v="urn:schemas-microsoft-com:vml"
+        fill="true" stroke="false"
+        style="width:${msoTableWidth}px;">
+        ${vmlFill}
+        <v:textbox inset="0,0,0,0">
+      <![endif]-->
+
+      ${html}
+
+      <!--[if gte mso 9]>
+        </v:textbox>
+      </v:rect>
+      <![endif]-->
+
+    </td>
+  </tr>
+</table>`;
+    }
+    if (divBorderStyle)
+        html = `${divWrapOpen}${html}${divWrapClose}`;
+    return html;
+}
+async function convertGridCellBlock(blockData, rootData, cellWidthPercent, parentCellWidthPx, parentGridHasBorder = false) {
+    const { style = {}, childrenIds = [], props = {} } = blockData.data;
+    const { borderRadius: cellBorderRadius, borderWidth: cellBorderWidth, borderStyle: cellBorderStyleProp, borderColor: cellBorderColor, border: cellBorderShorthand, ...styleWithoutBorder } = style;
+    const stripBgFromTd = Boolean(cellBorderRadius) || parentGridHasBorder;
+    const styleForTd = stripBgFromTd
+        ? { ...styleWithoutBorder, backgroundColor: 'transparent' }
+        : styleWithoutBorder;
+    const styles = (0, buildStyles_1.buildStyles)(styleForTd, { perChanges: [], pxChanges: buildStyles_1.allPxAttributes });
+    const parts = [];
+    const cellWidthPx = Math.round((cellWidthPercent / 100) * parentCellWidthPx);
+    const cellPad = styleWithoutBorder?.padding || {};
+    const cellPadLeft = Number.isFinite(cellPad.left) ? cellPad.left : 0;
+    const cellPadRight = Number.isFinite(cellPad.right) ? cellPad.right : 0;
+    const contentWidthPx = Math.max(cellWidthPx - cellPadLeft - cellPadRight, 20);
+    const safeCellWidthPx = Math.min(contentWidthPx, 600);
+    for (const childId of childrenIds) {
+        const child = rootData[childId];
+        if (child)
+            parts.push(await (0, jsonToHTML_1.convertToHtml)(child, rootData, safeCellWidthPx));
+    }
+    const borderRadius = cellBorderRadius || 0;
+    const bgColor = styleWithoutBorder?.backgroundColor || "transparent";
+    const cellDivBorderParts = [];
+    if (!parentGridHasBorder) {
+        if (borderRadius)
+            cellDivBorderParts.push(`border-radius:${typeof borderRadius === 'number' ? borderRadius + 'px' : borderRadius};`, `overflow:hidden;`);
+        if (cellBorderShorthand) {
+            cellDivBorderParts.push(`border:${cellBorderShorthand};`);
+        }
+        else if (cellBorderWidth || cellBorderColor || cellBorderStyleProp) {
+            const bw = cellBorderWidth ? (typeof cellBorderWidth === 'number' ? cellBorderWidth + 'px' : cellBorderWidth) : '1px';
+            const bs = cellBorderStyleProp || 'solid';
+            const bc = cellBorderColor || '#000000';
+            cellDivBorderParts.push(`border:${bw} ${bs} ${bc};`);
+        }
+    }
+    const cellDivBorderStyle = cellDivBorderParts.join(' ');
+    const divStyleParts = [`background-color:${bgColor};`];
+    if (cellDivBorderStyle)
+        divStyleParts.push(cellDivBorderStyle);
+    const wrapped = `<div style="${divStyleParts.join(' ')}">${parts.join("")}</div>`;
+    return { html: wrapped, styles };
+}

package/dist/utils/blocks/image.d.ts

@@ -0,0 +1,8 @@
+export declare function computeScaledDimensions(imageUrl: string, maxContainerWidthPx: number): Promise<{
+    originalWidth: number;
+    originalHeight: number;
+    scaledWidth: number;
+    scaledHeight: number;
+}>;
+export declare function convertImageBlock(blockData: any, cellWidthInPx: number): Promise<string>;
+//# sourceMappingURL=image.d.ts.map

package/dist/utils/blocks/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/image.ts"],"names":[],"mappings":"AAIA,wBAAsB,uBAAuB,CAAC,QAAQ,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM;;;;;GAiB1F;AAED,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBA2D5E"}

package/dist/utils/blocks/image.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeScaledDimensions = computeScaledDimensions;
+exports.convertImageBlock = convertImageBlock;
+const buildStyles_1 = require("../buildStyles");
+const outlookSupport_1 = require("../outlookSupport");
+const common_1 = require("../common");
+async function computeScaledDimensions(imageUrl, maxContainerWidthPx) {
+    if (!imageUrl) {
+        const w = Math.max(maxContainerWidthPx, 1);
+        const h = Math.round(w * (2 / 3));
+        return { originalWidth: w, originalHeight: h, scaledWidth: w, scaledHeight: h };
+    }
+    try {
+        const { width: originalWidth, height: originalHeight } = await (0, outlookSupport_1.loadImageNaturalDimensions)(imageUrl);
+        const widthScalingFactor = Math.min(maxContainerWidthPx / originalWidth, 1);
+        const scaledWidth = Math.round(originalWidth * widthScalingFactor);
+        const scaledHeight = Math.round(originalHeight * widthScalingFactor);
+        return { originalWidth, originalHeight, scaledWidth, scaledHeight };
+    }
+    catch {
+        const w = Math.max(maxContainerWidthPx, 1);
+        const h = Math.round(w * (2 / 3));
+        return { originalWidth: w, originalHeight: h, scaledWidth: w, scaledHeight: h };
+    }
+}
+async function convertImageBlock(blockData, cellWidthInPx) {
+    const { style, props } = blockData.data;
+    const { altText, imageUrl, navigateToUrl } = props;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
+    const { width, height, objectFit, borderRadius, borderWidth, borderColor, borderStyle, ...containerStyle } = style;
+    const containerStyles = (0, buildStyles_1.buildStyles)({ ...containerStyle }, { perChanges: [], pxChanges: buildStyles_1.addPxToAttributes });
+    const safeCellWidth = Math.min(cellWidthInPx, 600);
+    const widthPercent = typeof width === "string" && width.includes("%")
+        ? parseInt(width.replace("%", ""))
+        : typeof width === "number" ? width : 100;
+    const paddingLeft = style?.padding?.left || 0;
+    const paddingRight = style?.padding?.right || 0;
+    const availableWidth = safeCellWidth - paddingLeft - paddingRight;
+    const innerContainerWidth = Math.round((widthPercent / 100) * availableWidth);
+    const { originalWidth, originalHeight, scaledWidth, scaledHeight } = await computeScaledDimensions(imageUrl, innerContainerWidth);
+    const finalWidth = Math.min(scaledWidth, innerContainerWidth, originalWidth);
+    const finalHeight = Math.round((finalWidth / originalWidth) * originalHeight);
+    const imageTagStyles = (0, buildStyles_1.buildStyles)({ borderStyle, borderRadius, borderColor, borderWidth }, { perChanges: [], pxChanges: buildStyles_1.addPxToAttributes });
+    const imageElement = `<img src="${imageUrl}" alt="${altText || "Image"}" border="0" width="${finalWidth}" height="${finalHeight}" style="${imageTagStyles}; display:block; max-width:100%; height:auto; line-height: 0;" />`;
+    const percentWidth = typeof width === "string" && width.endsWith("%")
+        ? width
+        : typeof width === "number" ? `${width}%` : "100%";
+    const imgTextAlign = containerStyle.textAlign || "left";
+    const imgMargin = imgTextAlign === "center" ? "margin:0 auto;" :
+        imgTextAlign === "right" ? "margin-left:auto; margin-right:0;" : "";
+    const nonMsoWrapper = `<div style="display:block; width:${percentWidth}; max-width:${finalWidth}px; line-height:0; font-size:0; ${imgMargin}">${imageElement}</div>`;
+    const outlookImage = await (0, outlookSupport_1.appendOutlookForImage)(nonMsoWrapper, safeCellWidth, innerContainerWidth, imageUrl, style, finalWidth, finalHeight);
+    const imageContent = (0, outlookSupport_1.appendOutlookSupport)(outlookImage, containerStyles, visibilityClass, safeCellWidth);
+    return navigateToUrl
+        ? `<a href="${navigateToUrl}" target="_blank" rel="noreferrer noopener" style="display:block;">${imageContent}</a>`
+        : imageContent;
+}

package/dist/utils/blocks/shape.d.ts

@@ -0,0 +1,2 @@
+export declare function convertShapeBlock(blockData: any): Promise<string>;
+//# sourceMappingURL=shape.d.ts.map

package/dist/utils/blocks/shape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/shape.ts"],"names":[],"mappings":"AAuHA,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,mBA2MrD"}