@pagenflow/email 1.4.2 → 1.4.3

package/dist/components/Container.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, memo } from "react";
+import { arePropsEqual } from "../utils/memoUtils";
+const alignMap = {
+    start: "top",
+    center: "middle",
+    end: "bottom",
+};
+const justifyMap = {
+    start: "left",
+    center: "center",
+    end: "right",
+};
+function getBorderStyle(border) {
+    if (!border)
+        return {};
+    const style = {};
+    // If a full border is specified, apply it
+    if (border.width && border.style && border.color) {
+        style.border = `${border.width} ${border.style} ${border.color}`;
+    }
+    else {
+        // If only individual borders are specified, explicitly set others to 'none'
+        // to prevent Outlook Classic from showing black borders
+        const hasIndividualBorders = border.top || border.right || border.bottom || border.left;
+        if (hasIndividualBorders) {
+            // Default all borders to none
+            style.borderTop = "none";
+            style.borderRight = "none";
+            style.borderBottom = "none";
+            style.borderLeft = "none";
+        }
+    }
+    // Override with specific borders if provided
+    if (border.top) {
+        style.borderTop = `${border.top.width} ${border.top.style} ${border.top.color}`;
+    }
+    if (border.right) {
+        style.borderRight = `${border.right.width} ${border.right.style} ${border.right.color}`;
+    }
+    if (border.bottom) {
+        style.borderBottom = `${border.bottom.width} ${border.bottom.style} ${border.bottom.color}`;
+    }
+    if (border.left) {
+        style.borderLeft = `${border.left.width} ${border.left.style} ${border.left.color}`;
+    }
+    return style;
+}
+function Container({ children, config, devMode, devNode }) {
+    var _a, _b, _c;
+    const { widthType, childrenConstraints } = config;
+    const childrenArray = (Array.isArray(children) ? children : [children]).filter((child) => child != null);
+    const numChildren = childrenArray.length;
+    const containerWidthPx = (() => {
+        if (widthType === "fixed" && config.width && config.width.endsWith("px")) {
+            return parseInt(config.width, 10);
+        }
+        return 600;
+    })();
+    const gapWidthPx = (() => {
+        if (config.gap && config.gap.endsWith("px")) {
+            return parseInt(config.gap, 10);
+        }
+        return 0;
+    })();
+    const getChildWidths = (() => {
+        const { widthDistributionType } = childrenConstraints;
+        const totalGapSpace = gapWidthPx * (numChildren > 1 ? numChildren - 1 : 0);
+        const remainingContentSpace = containerWidthPx - totalGapSpace;
+        switch (widthDistributionType) {
+            case "equals":
+                const equalContentWidth = remainingContentSpace / numChildren;
+                return Array(numChildren).fill(`${equalContentWidth}px`);
+            case "ratio": {
+                const { ratio } = childrenConstraints;
+                const { mainChildIndex, value: [numerator, denominator], } = ratio;
+                if (numChildren < 2 ||
+                    mainChildIndex < 0 ||
+                    mainChildIndex >= numChildren ||
+                    denominator === 0) {
+                    const equalFallbackWidth = remainingContentSpace / numChildren;
+                    return Array(numChildren).fill(`${equalFallbackWidth}px`);
+                }
+                const mainChildWidth = (remainingContentSpace * numerator) / denominator;
+                const remainingWidth = remainingContentSpace - mainChildWidth;
+                const numOtherChildren = numChildren - 1;
+                const otherChildWidth = numOtherChildren > 0 ? remainingWidth / numOtherChildren : 0;
+                const widths = Array(numChildren).fill(`${otherChildWidth}px`);
+                widths[mainChildIndex] = `${mainChildWidth}px`;
+                return widths;
+            }
+            case "manual": {
+                const { widths } = childrenConstraints;
+                return widths.length === numChildren ? widths : [];
+            }
+            default:
+                return [];
+        }
+    })();
+    const outerTableStyle = {
+        width: "100%",
+        borderCollapse: "collapse",
+    };
+    // 1. Background TD Style - Background color, border radius, background image
+    const backgroundTdStyle = {
+        backgroundColor: config.backgroundColor,
+        borderRadius: config.borderRadius,
+        maxWidth: widthType === "fixed" ? config.width || "600px" : undefined,
+        backgroundImage: config.backgroundImage
+            ? `url(${config.backgroundImage.src})`
+            : undefined,
+        backgroundRepeat: (_a = config.backgroundImage) === null || _a === void 0 ? void 0 : _a.repeat,
+        backgroundSize: (_b = config.backgroundImage) === null || _b === void 0 ? void 0 : _b.size,
+        backgroundPosition: (_c = config.backgroundImage) === null || _c === void 0 ? void 0 : _c.position,
+        // Overflow hidden to clip background to border-radius
+        ...(config.borderRadius && { overflow: "hidden" }),
+    };
+    // 2. Border Table Style - Border and border radius
+    const borderTableStyle = {
+        width: "100%",
+        borderCollapse: "separate",
+        borderSpacing: 0,
+        borderRadius: config.borderRadius,
+        ...getBorderStyle(config.border),
+    };
+    // 3. Padding TD Style
+    const innerTdStyle = {
+        padding: config.padding,
+        width: "100%",
+        verticalAlign: config.alignItems ? alignMap[config.alignItems] : "top",
+    };
+    const contentTableStyle = {
+        width: "100%",
+        height: config.height,
+        borderCollapse: "collapse",
+    };
+    const gapTdStyle = {
+        width: config.gap || "0",
+        lineHeight: "1px",
+        fontSize: "1px",
+    };
+    const justifyAlign = config.justifyContent
+        ? justifyMap[config.justifyContent]
+        : "center";
+    const containerWidthAttr = widthType === "fixed" ? containerWidthPx : undefined;
+    const isStacking = config.shouldWrap && numChildren > 1;
+    const msoFixedWrapper = "";
+    const msoFixedFooter = "";
+    const rowElements = childrenArray.map((child, index) => {
+        const childTdStyle = {
+            width: getChildWidths[index],
+            verticalAlign: config.alignItems ? alignMap[config.alignItems] : "top",
+            textAlign: "left",
+        };
+        if (config.gap && index < numChildren - 1) {
+            return (_jsxs(Fragment, { children: [_jsxs("td", { className: isStacking ? "stack-td" : undefined, width: getChildWidths[index], style: childTdStyle, children: [child, isStacking && (_jsx("div", { className: "mobile-gap-spacer", style: {
+                                    display: "none",
+                                    fontSize: "0",
+                                    lineHeight: "0",
+                                    height: config.gap,
+                                }, children: "\u00A0" }))] }, `child-${index}`), _jsx("td", { className: isStacking ? "desktop-gap-column" : undefined, width: config.gap, style: gapTdStyle, children: "\u00A0" }, `gap-${index}`)] }, `ctn:${index}`));
+        }
+        return (_jsx("td", { className: isStacking ? "stack-td" : undefined, width: getChildWidths[index], style: childTdStyle, children: child }, `child-${index}`));
+    });
+    return (_jsx("table", { "aria-label": `Container | Table Outer`, cellPadding: 0, cellSpacing: 0, role: "presentation", border: 0, style: {
+            position: "relative",
+            ...outerTableStyle,
+        }, children: _jsx("tbody", { children: _jsx("tr", { children: _jsxs("td", { align: justifyAlign, children: [_jsx("div", { dangerouslySetInnerHTML: { __html: msoFixedWrapper } }), _jsxs("table", { className: [
+                                widthType === "fixed" ? "container-fixed-width" : undefined,
+                                devMode ? "main-wrapper relative" : undefined,
+                            ]
+                                .filter(Boolean)
+                                .join(" "), "aria-label": `Container | Table Middle`, cellPadding: 0, cellSpacing: 0, role: "presentation", border: 0, align: justifyAlign, style: {
+                                width: "100%",
+                                maxWidth: widthType === "fixed" ? config.width || "600px" : undefined,
+                                borderCollapse: "collapse",
+                            }, width: containerWidthAttr, children: [_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { style: backgroundTdStyle, children: _jsx("table", { "aria-label": `Container | Border Wrapper`, cellPadding: 0, cellSpacing: 0, role: "presentation", border: 0, style: borderTableStyle, children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { style: innerTdStyle, children: _jsx("table", { "aria-label": `Container | Content Table`, cellPadding: 0, cellSpacing: 0, role: "presentation", border: 0, style: contentTableStyle, children: _jsx("tbody", { children: _jsx("tr", { children: rowElements }) }) }) }) }) }) }) }) }) }), !!devNode && (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { children: devNode }) }) }))] }), _jsx("div", { dangerouslySetInnerHTML: { __html: msoFixedFooter } })] }) }) }) }));
+}
+export default memo(Container, arePropsEqual);

package/dist/components/Divider.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { arePropsEqual } from "../utils/memoUtils";
+function Divider({ config, devNode }) {
+    const { height = "1px", color = "#cccccc", width = "100%", margin = "20px 0", align = "center", hideOnMobile, } = config;
+    // 1. Outer TD Style: Applies the vertical spacing (margin)
+    const outerTdStyle = {
+        padding: margin,
+        fontSize: "0",
+        lineHeight: "0",
+        width: "100%",
+    };
+    // 2. Divider Table Style: Applies the line properties
+    const dividerTableStyle = {
+        width: width,
+        height: height,
+        backgroundColor: color,
+        borderCollapse: "collapse",
+        border: "0",
+        // ✅ FIX 1: Use string literal indexing for MSO properties
+        // ["mso-table-lspace" as string]: "0pt",
+        ["msoTableLspace"]: "0pt",
+        // ["mso-table-rspace" as string]: "0pt",
+        ["msoTableRspace"]: "0pt",
+    };
+    // Parse height for the HTML attribute
+    const dividerHeightAttribute = parseInt(height, 10) || 1;
+    return (_jsxs("table", { "aria-label": "Divider Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+            // --- Start dev
+            position: "relative",
+            // --- End dev
+            width: "100%",
+            borderCollapse: "collapse",
+        }, className: hideOnMobile ? "hide-on-mobile" : undefined, children: [_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { style: outerTdStyle, align: align, children: _jsx("table", { "aria-label": "Divider Line", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, align: align, style: dividerTableStyle, ...{ height: dividerHeightAttribute }, children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { style: {
+                                            height: height,
+                                            fontSize: "0",
+                                            lineHeight: "0",
+                                            padding: "0",
+                                        }, children: "\u00A0" }) }) }) }) }) }) }), devNode && (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { children: devNode }) }) }))] }));
+}
+export default memo(Divider, arePropsEqual);

package/dist/components/Font.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function normaliseFallbacks(fallbackFontFamily) {
+    if (!fallbackFontFamily)
+        return [];
+    return Array.isArray(fallbackFontFamily)
+        ? fallbackFontFamily
+        : [fallbackFontFamily];
+}
+/**
+ * Build the CSS font-stack string from the primary family + fallbacks.
+ * Wraps names that contain spaces in single quotes.
+ */
+function buildFontStack(primary, fallbacks) {
+    const quote = (name) => (name.includes(" ") ? `'${name}'` : name);
+    return [primary, ...fallbacks].map(quote).join(", ");
+}
+// ── Component ─────────────────────────────────────────────────────────────────
+export default function Font({ fontFamily, fallbackFontFamily, webFont, fontWeight = 400, fontStyle = "normal", }) {
+    var _a;
+    const fallbacks = normaliseFallbacks(fallbackFontFamily);
+    const fontFaceCss = webFont
+        ? `
+@font-face {
+  font-family: '${fontFamily}';
+  font-style: ${fontStyle};
+  font-weight: ${fontWeight};
+  font-display: swap;
+  src: url('${webFont.url}') format('${webFont.format}');
+  mso-font-alt: '${(_a = fallbacks[0]) !== null && _a !== void 0 ? _a : "sans-serif"}';
+}`.trim()
+        : null;
+    const msoComment = fallbacks.length > 0
+        ? `<!--[if mso]>\n<style type="text/css">\n  .${cssClassName(fontFamily)} {\n    font-family: ${buildFontStack(fallbacks[0], fallbacks.slice(1))}, sans-serif !important;\n  }\n</style>\n<![endif]-->`
+        : null;
+    return (_jsxs(_Fragment, { children: [fontFaceCss && (_jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: fontFaceCss } })), msoComment && (_jsx("style", { type: "text/css", dangerouslySetInnerHTML: {
+                    __html: `</style>${msoComment}<style type="text/css">`,
+                } }))] }));
+}
+// ── Utility: generate a stable CSS class name from a font family name ─────────
+// Used in the MSO conditional comment to scope the fallback rule.
+export function cssClassName(fontFamily) {
+    return `font-${fontFamily.toLowerCase().replace(/\s+/g, "-")}`;
+}

package/dist/components/Head.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Font from "./Font";
+export default function Head({ children, backgroundColor = "#ffffff", title = "Email Preview", rowGaps = [], fonts = [], }) {
+    const msoResetStyles = `
+        .ExternalClass { width: 100%; line-height: 100%; } 
+        .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
+        table { mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; border-spacing: 0; }
+        td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
+        img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
+        #MessageViewBody img { min-width: 100%; }
+        a[x-apple-data-detectors] { 
+            color: inherit !important; 
+            text-decoration: none !important; 
+            font-size: inherit !important; 
+            font-family: inherit !important; 
+            font-weight: inherit !important; 
+            line-height: inherit !important; 
+        }
+        body { background-color: ${backgroundColor} !important; }
+        p { margin: 0; }
+    `;
+    const globalStyles = `
+        @media screen and (max-width: 768px) {
+            .container-fixed-width {
+                width: 100% !important;
+                max-width: 100% !important;
+            }
+        }
+        @media screen and (max-width: 768px) {
+          .hide-on-mobile {
+            display: none !important;
+            max-height: 0 !important;
+            overflow: hidden !important;
+            mso-hide: all;
+          }
+        }
+        @media screen and (min-width: 769px) {
+          .hide-on-desktop {
+            display: none !important;
+            max-height: 0 !important;
+            overflow: hidden !important;
+            mso-hide: all;
+          }
+        }
+        @media screen and (max-width: 768px) {
+            .stack-td {
+                width: 100% !important;
+                display: block !important;
+                float: left;
+                clear: both;
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+            }
+            .desktop-gap-column { width: 0 !important; display: none !important; }
+            .mobile-gap-spacer {
+                display: block !important;
+                width: 100% !important;
+                font-size: 1px !important;
+                line-height: 1px !important;
+                mso-line-height-rule: exactly;
+            }
+        }
+        @media only screen and (max-width: 768px) {
+          .row-content-table[data-mobile-justify="center"] { margin: 0 auto !important; float: none !important; }
+          .row-content-table[data-mobile-justify="start"] { margin: 0 !important; float: left !important; }
+          .row-content-table[data-mobile-justify="end"] { margin: 0 0 0 auto !important; float: right !important; }
+          .row-content-table[data-mobile-align="center"] .child-cell { vertical-align: middle !important; }
+          .row-content-table[data-mobile-align="start"] .child-cell { vertical-align: top !important; }
+          .row-content-table[data-mobile-align="end"] .child-cell { vertical-align: bottom !important; }
+          .row-content-table[data-mobile-wrap="true"] { width: 100% !important; max-width: 100% !important; }
+          .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr { display: block !important; }
+          .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr > .child-cell {
+            display: block !important;
+            width: 100% !important;
+            box-sizing: border-box !important;
+          }
+          .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr > .row-gap-td {
+            display: none !important;
+            width: 0 !important;
+            height: 0 !important;
+          }
+          .row-content-table[data-mobile-wrap="true"] > tbody > .content-tr > .child-cell:not(:last-child) {
+            margin-bottom: 20px !important;
+          }
+          ${["10px", "15px", "20px", "24px", "30px", "40px", ...rowGaps]
+        .filter((gap, index, self) => self.indexOf(gap) === index)
+        .map((gap) => `
+              .row-content-table[data-mobile-wrap="true"][data-gap="${gap}"] > tbody > .content-tr > .child-cell:not(:last-child) {
+                margin-bottom: ${gap} !important;
+              }`)
+        .join("\n")}
+        }
+        a { color: inherit; text-decoration: none; }
+        ol, ul { margin: 0px; padding: 0px; list-style: none; }
+        li {
+          list-style-type: none !important;
+          list-style: none !important;
+          position: relative;
+          padding-left: 0px;
+          margin: 0px;
+          display: block !important;
+        }
+        li::marker {
+          content: "" !important;
+          font-size: 0px !important;
+          line-height: 0px !important;
+          color: transparent !important;
+          width: 0px !important;
+        }
+        li[data-list="bullet"] {
+          list-style-type: disc !important;
+          list-style-position: inside !important;
+          padding-left: 1.5em;
+          display: list-item !important;
+        }
+        li[data-list="ordered"] {
+          list-style-type: decimal !important;
+          list-style-position: inside !important;
+          padding-left: 1.5em;
+          display: list-item !important;
+        }
+        li[data-list="bullet"]::marker,
+        li[data-list="ordered"]::marker {
+          content: normal !important;
+          font-size: inherit !important;
+          color: inherit !important;
+          width: auto !important;
+          padding: 0 !important;
+          margin: 0 !important;
+        }
+        h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: inherit; }
+    `;
+    return (_jsxs("head", { children: [_jsx("meta", { httpEquiv: "Content-Type", content: "text/html; charset=utf-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), _jsx("meta", { httpEquiv: "X-UA-Compatible", content: "IE=edge" }), _jsx("title", { children: title }), fonts.flatMap((resolved) => resolved.fontProps.map((props, i) => (_jsx(Font, { ...props }, `${resolved.family}-${props.fontWeight}-${props.fontStyle}-${i}`)))), children, _jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: msoResetStyles } }), _jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: globalStyles } })] }));
+}