@pagenflow/email 1.4.2 → 1.4.3

package/dist/components/Image.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo } from "react";
+import { arePropsEqual } from "../utils/memoUtils";
+function getBorderStyle(border) {
+    if (!border)
+        return {};
+    const style = {};
+    if (border.width && border.style && border.color) {
+        style.border = `${border.width} ${border.style} ${border.color}`;
+    }
+    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 getBorderStyleString(border) {
+    if (!border)
+        return "";
+    const styles = [];
+    // Standard shorthand
+    if (border.width && border.style && border.color) {
+        styles.push(`border:${border.width} ${border.style} ${border.color} !important;`);
+    }
+    else {
+        // If desktop had a border and mobile wants "none", we must explicitly kill it
+        styles.push(`border: none !important;`);
+    }
+    // Individual sides
+    if (border.top)
+        styles.push(`border-top:${border.top.width} ${border.top.style} ${border.top.color} !important;`);
+    if (border.right)
+        styles.push(`border-right:${border.right.width} ${border.right.style} ${border.right.color} !important;`);
+    if (border.bottom)
+        styles.push(`border-bottom:${border.bottom.width} ${border.bottom.style} ${border.bottom.color} !important;`);
+    if (border.left)
+        styles.push(`border-left:${border.left.width} ${border.left.style} ${border.left.color} !important;`);
+    return styles.join(" ");
+}
+function Image({ config, devNode, devMode }) {
+    var _a;
+    const { src, alt, href, target, mobile } = config;
+    const seed = src + (alt || "");
+    const instanceId = seed
+        .split("")
+        .reduce((acc, char) => acc + char.charCodeAt(0), 0)
+        .toString(36);
+    const imgClass = `img-${instanceId}`;
+    // 1. Desktop Dimensional Logic
+    const desktopWidth = config.width || "100%";
+    const isPercent = desktopWidth.includes("%");
+    const widthAttr = desktopWidth.replace("px", "");
+    const heightAttr = (_a = config.height) === null || _a === void 0 ? void 0 : _a.replace("px", "");
+    // Determine the table's "initial" width.
+    // If it's 300px, the table should be 300px, not 100%.
+    const tableWidth = isPercent ? desktopWidth : `${widthAttr}px`;
+    // 2. Mobile Overrides (Every property used)
+    let mobileCss = "";
+    if (mobile) {
+        mobileCss = `
+      @media screen and (max-width: 768px) {
+        .wrap-${imgClass} {
+          /* This breaks the px lock from desktop and makes it fluid */
+          width: ${mobile.width || "100%"} !important;
+          max-width: ${mobile.maxWidth || "100%"} !important;
+          min-width: 0 !important;
+        }
+        .td-${imgClass} {
+          padding: ${mobile.padding || "0"} !important;
+          background-color: ${mobile.backgroundColor || "transparent"} !important;
+          width: 100% !important;
+        }
+        .${imgClass} {
+          width: ${mobile.width || "100%"} !important;
+          height: ${mobile.height || "auto"} !important;
+          max-width: ${mobile.maxWidth || "100%"} !important;
+          max-height: ${mobile.maxHeight || "none"} !important;
+          border-radius: ${mobile.borderRadius || "0"} !important;
+          display: ${mobile.hidden ? "none" : "block"} !important;
+          object-fit: ${mobile.objectFit || "fill"} !important;
+          object-position: ${mobile.objectPosition || "center"} !important;
+          ${getBorderStyleString(mobile.border)}
+        }
+      }
+    `;
+    }
+    const imgStyle = {
+        display: "block",
+        width: isPercent ? "100%" : desktopWidth,
+        height: config.height || "auto",
+        maxWidth: config.maxWidth || "100%",
+        maxHeight: config.maxHeight || "none",
+        borderRadius: config.borderRadius || "0",
+        ...getBorderStyle(config.border),
+        outline: "none",
+        textDecoration: "none",
+        objectFit: config.objectFit,
+        objectPosition: config.objectPosition,
+    };
+    const imageElement = (_jsx("img", { src: src, alt: alt, width: !isPercent ? widthAttr : undefined, height: heightAttr !== "auto" ? heightAttr : undefined, className: imgClass, style: imgStyle }));
+    return (_jsxs(_Fragment, { children: [mobile && _jsx("style", { dangerouslySetInnerHTML: { __html: mobileCss } }), _jsxs("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, className: `wrap-${imgClass}`, align: "center" // Ensures a 300px image stays centered in its parent
+                , style: {
+                    width: tableWidth, // Fixed px here prevents the 100% "ghost space"
+                    maxWidth: "100%",
+                    borderCollapse: "collapse",
+                    margin: "0 auto",
+                }, children: [_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { className: `td-${imgClass}`, align: "center", style: {
+                                    padding: config.padding,
+                                    backgroundColor: config.backgroundColor,
+                                    fontSize: "0",
+                                    lineHeight: "0",
+                                    width: tableWidth, // Lock the cell as well
+                                }, children: href && !devMode ? (_jsx("a", { href: href, target: target, style: { display: "block", width: "100%" }, children: imageElement })) : (imageElement) }) }) }), devMode && !!devNode && (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { children: devNode }) }) }))] })] }));
+}
+export default memo(Image, arePropsEqual);

package/dist/components/MsoConditional.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Content rendered by Outlook Classic only.
+ * Outputs: <!--[if mso]> ... <![endif]-->
+ */
+export function MsoOnly({ html }) {
+    return (_jsx("td", { dangerouslySetInnerHTML: {
+            __html: `<!--[if mso]>${html}<![endif]-->`,
+        } }));
+}
+/**
+ * Content hidden from Outlook Classic, visible in all other clients.
+ * Outputs: <!--[if !mso]><!--> ... <!--<![endif]-->
+ */
+export function NonMso({ html }) {
+    return (_jsx("td", { dangerouslySetInnerHTML: {
+            __html: `<!--[if !mso]><!-->${html}<!--<![endif]-->`,
+        } }));
+}

package/dist/components/Row.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, memo } from "react";
+import { arePropsEqual } from "../utils/memoUtils";
+const justifyMap = {
+    start: "left",
+    center: "center",
+    end: "right",
+};
+const alignMap = {
+    start: "top",
+    center: "middle",
+    end: "bottom",
+};
+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 getHrefFromInnerLink(innerLink) {
+    if (!innerLink || innerLink.type === "none")
+        return undefined;
+    switch (innerLink.type) {
+        case "url":
+            return innerLink.url;
+        case "email":
+            return innerLink.email ? `mailto:${innerLink.email}` : undefined;
+        case "phone":
+            return innerLink.phone ? `tel:${innerLink.phone}` : undefined;
+        case "anchor":
+            return innerLink.anchor ? `#${innerLink.anchor}` : undefined;
+        case "page_top":
+            return "#";
+        case "page_bottom":
+            return "#bottom";
+        default:
+            return undefined;
+    }
+}
+function Row({ children, config, devNode, devMode }) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const childrenArray = (Array.isArray(children) ? children : [children]).filter((child) => child != null);
+    const numChildren = childrenArray.length;
+    const href = getHrefFromInnerLink(config.innerLink);
+    const target = (_a = config.innerLink) === null || _a === void 0 ? void 0 : _a.target;
+    // 1. Outer TD: Background, Border Radius, Width, Height.
+    const backgroundTdStyle = {
+        backgroundColor: config.backgroundColor,
+        borderRadius: config.borderRadius,
+        width: config.width || "100%",
+        height: config.height,
+        backgroundImage: config.backgroundImage
+            ? `url(${config.backgroundImage.src})`
+            : undefined,
+        backgroundRepeat: (_b = config.backgroundImage) === null || _b === void 0 ? void 0 : _b.repeat,
+        backgroundSize: (_c = config.backgroundImage) === null || _c === void 0 ? void 0 : _c.size,
+        backgroundPosition: (_d = config.backgroundImage) === null || _d === void 0 ? void 0 : _d.position,
+        ...(config.borderRadius && { overflow: "hidden" }),
+    };
+    // 2. Inner Table: Border and Border Radius.
+    const borderTableStyle = {
+        width: "100%",
+        height: "100%",
+        borderCollapse: "separate",
+        borderSpacing: 0,
+        borderRadius: config.borderRadius,
+        ...getBorderStyle(config.border),
+    };
+    // 3. Padding TD.
+    const paddingTdStyle = {
+        padding: config.padding,
+        width: "100%",
+        verticalAlign: "top",
+    };
+    // 4. Content Table.
+    //
+    //    fillWidth: false/undefined (default) → width: "auto"
+    //      Original behavior. Children shrink-wrap to their natural sizes.
+    //      Use for icon rows, button rows, social link rows.
+    //      Centering works via the Justification Wrapper TD (align + width="100%").
+    //
+    //    fillWidth: true → width: "100%"
+    //      Content table fills available space, giving Outlook Classic a hard
+    //      boundary so text children get a constrained box and line wrapping
+    //      triggers correctly. Use for rows containing text + image layouts.
+    const contentTableStyle = {
+        width: config.fillWidth ? "100%" : "auto",
+        height: "100%",
+        borderCollapse: "collapse",
+        minWidth: "1px",
+        ...(!config.fillWidth && { maxWidth: config.width || "100%" }),
+    };
+    // 5. Gap TD.
+    const gapTdStyle = {
+        width: config.gap || "0",
+        lineHeight: "1px",
+        fontSize: "1px",
+    };
+    const tdAlign = config.justifyContent
+        ? justifyMap[config.justifyContent]
+        : "left";
+    const tdValign = config.alignItems ? alignMap[config.alignItems] : "top";
+    const content = (_jsxs("table", { "aria-label": "Row Outer", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+            position: "relative",
+            width: config.width || "100%",
+            height: config.height,
+            borderCollapse: "collapse",
+        }, ...(config.height && { height: config.height }), children: [_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { style: backgroundTdStyle, ...(config.height && { height: config.height }), children: _jsx("table", { "aria-label": "Row Border Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: borderTableStyle, children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { style: paddingTdStyle, children: _jsx("table", { "aria-label": "Row Justification Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+                                                width: "100%",
+                                                height: "100%",
+                                                borderCollapse: "collapse",
+                                            }, children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { align: tdAlign, width: "100%", style: { width: "100%" }, children: _jsx("table", { "aria-label": "Row Content", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: contentTableStyle, ...(config.height && { height: config.height }), className: "content-table row-content-table", "data-mobile-justify": (_e = config.mobile) === null || _e === void 0 ? void 0 : _e.justifyContent, "data-mobile-align": (_f = config.mobile) === null || _f === void 0 ? void 0 : _f.alignItems, "data-mobile-wrap": ((_g = config.mobile) === null || _g === void 0 ? void 0 : _g.wrap) ? "true" : undefined, "data-gap": config.gap, children: _jsx("tbody", { children: _jsx("tr", { className: "content-tr", children: childrenArray.map((child, index) => (_jsxs(Fragment, { children: [_jsx("td", { valign: tdValign, style: {
+                                                                                    verticalAlign: tdValign,
+                                                                                    textAlign: "left",
+                                                                                    padding: "0",
+                                                                                    margin: "0",
+                                                                                }, className: "child-cell", children: child }), index < numChildren - 1 &&
+                                                                                config.gap && (_jsx("td", { width: config.gap, style: gapTdStyle, className: "row-gap-td", children: "\u00A0" }, `row-gap-${index}`))] }, `row-child-${index}`))) }) }) }) }) }) }) }) }) }) }) }) }) }) }), devNode && (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { children: devNode }) }) }))] }));
+    if (href && !devMode) {
+        return (_jsx("a", { href: href, ...(target && { target }), style: {
+                textDecoration: "none",
+                color: "inherit",
+                display: "block",
+            }, children: content }));
+    }
+    return content;
+}
+export default memo(Row, arePropsEqual);

package/dist/components/Section.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { arePropsEqual } from "../utils/memoUtils";
+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;
+}
+const Section = ({ config, children, devNode, }) => {
+    var _a, _b, _c;
+    const { sectionType, padding } = config;
+    return (_jsxs("table", { "aria-label": `Section |Table | ${sectionType}`, role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+            position: "relative",
+            width: "100%",
+            backgroundColor: config.backgroundColor,
+            ...getBorderStyle(config.border),
+            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,
+        }, children: [_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { style: {
+                            padding: padding,
+                        }, children: children }) }) }), devNode && (_jsx("tfoot", { children: _jsx("tr", { children: _jsxs("td", { children: [_jsxs("span", { style: {
+                                    backgroundColor: "black",
+                                    color: "white",
+                                    padding: "4px",
+                                    fontSize: "14px",
+                                    position: "absolute",
+                                    left: 0,
+                                    top: 0,
+                                }, children: ["Section | ", sectionType] }), children] }) }) }))] }));
+};
+export default memo(Section, arePropsEqual);

package/dist/components/Spacer.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { arePropsEqual } from "../utils/memoUtils";
+function Spacer({ config, devNode }) {
+    const { height, hideOnMobile } = config;
+    // 1. Spacer Table Style
+    const spacerTableStyle = {
+        // Crucial for compatibility: Ensures no background or border interference
+        backgroundColor: "transparent",
+        borderCollapse: "collapse",
+        border: "0",
+        width: "100%",
+        // Note the CSS standard dash convention: 'mso-table-lspace'
+        // ["mso-table-lspace" as string]: "0pt",
+        ["msoTableLspace"]: "0pt",
+        // ["mso-table-rspace" as string]: "0pt",
+        ["msoTableRspace"]: "0pt",
+    };
+    // 2. Spacer TD Style: The element that creates the actual vertical space
+    const spacerTdStyle = {
+        height: height,
+        // Critical: Suppress any vertical height created by text/font
+        fontSize: "0",
+        lineHeight: "0",
+        padding: "0",
+    };
+    // Parse height for the HTML attribute
+    const spacerHeightAttribute = parseInt(height, 10) || 1;
+    return (
+    // Outer table ensures the spacer spans the full width of its container
+    _jsxs("table", { "aria-label": "Vertical Spacer", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+            // --- Start dev
+            position: "relative",
+            // --- End dev
+            ...spacerTableStyle,
+        }, ...{ height: spacerHeightAttribute }, className: hideOnMobile ? "hide-on-mobile" : undefined, children: [_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { style: spacerTdStyle, 
+                        // Explicit height attribute
+                        height: spacerHeightAttribute, children: "\u00A0" }) }) }), devNode && (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { children: devNode }) }) }))] }));
+}
+export default memo(Spacer, arePropsEqual);

package/dist/components/Text.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { arePropsEqual } from "../utils/memoUtils";
+function Text({ config, devMode, children }) {
+    const { text, padding, color, textAlign, fontFamily, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, opacity, whiteSpace, wordBreak = "break-all", maxWidth } = config;
+    // 1. TD Style: Where padding and background are reliably applied.
+    const tdStyle = {
+        padding: padding,
+        backgroundColor: backgroundColor,
+        width: "100%",
+        verticalAlign: "top",
+    };
+    // 2. Content Style: Applied directly to a wrapper element
+    const contentStyle = {
+        color: color,
+        textAlign: textAlign,
+        fontFamily: fontFamily || "Arial, Helvetica, sans-serif",
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        fontStyle: fontStyle,
+        lineHeight: lineHeight,
+        letterSpacing: letterSpacing,
+        textTransform: textTransform,
+        textDecoration: textDecoration,
+        direction: direction,
+        verticalAlign: verticalAlign,
+        opacity: opacity,
+        whiteSpace: whiteSpace,
+        wordBreak: wordBreak,
+        margin: "0",
+        padding: "0",
+        maxWidth
+    };
+    // Determine content to render
+    const content = text !== null && text !== void 0 ? text : children;
+    const isString = typeof content === "string";
+    return (_jsx("table", { "aria-label": "Text Block Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+            width: "100%",
+            borderCollapse: "collapse",
+        }, children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { style: tdStyle, align: textAlign, children: isString ? (_jsx("div", { style: contentStyle, dangerouslySetInnerHTML: { __html: content } })) : (_jsx("div", { style: contentStyle, children: content })) }) }) }) }));
+}
+export default memo(Text, arePropsEqual);