@pagenflow/email 1.1.15 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BodyDev.d.ts +8 -0
- package/dist/components/HeadDev.d.ts +14 -0
- package/dist/components/Icon.d.ts +35 -0
- package/dist/components/Row.d.ts +7 -0
- package/dist/components/Text.d.ts +4 -0
- package/dist/index.cjs.js +43 -23
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +43 -23
- package/dist/index.esm.js.map +1 -1
- package/dist/types/IInnerLink.d.ts +9 -0
- package/package.json +1 -1
- package/repo-header-image.png +0 -0
package/dist/index.esm.js
CHANGED
|
@@ -1582,12 +1582,12 @@ function Button({ config, devMode }) {
|
|
|
1582
1582
|
borderCollapse: "collapse",
|
|
1583
1583
|
// base
|
|
1584
1584
|
boxSizing: "border-box",
|
|
1585
|
-
border:
|
|
1585
|
+
border: 0,
|
|
1586
1586
|
margin: 0,
|
|
1587
1587
|
padding: 0,
|
|
1588
1588
|
}, onClick: devMode ? (e) => e.preventDefault() : undefined, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", { dangerouslySetInnerHTML: {
|
|
1589
1589
|
__html: `
|
|
1590
|
-
${vmlButton}
|
|
1590
|
+
${devMode ? "" : vmlButton}
|
|
1591
1591
|
<!--[if !mso]><!-->
|
|
1592
1592
|
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%;">
|
|
1593
1593
|
<tbody>
|
|
@@ -1597,11 +1597,15 @@ function Button({ config, devMode }) {
|
|
|
1597
1597
|
<tbody>
|
|
1598
1598
|
<tr>
|
|
1599
1599
|
<td style="padding: ${padding};">
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1600
|
+
${devMode
|
|
1601
|
+
? `<span style="color: ${color}; font-family: ${fontFamily}; font-size: ${fontSize}; font-weight: ${fontWeight}; font-style: ${fontStyle || "normal"}; line-height: ${lineHeight}; letter-spacing: ${letterSpacing || "normal"}; text-transform: ${textTransform || "none"}; text-decoration: ${textDecoration}; white-space: ${whiteSpace}; display: ${linkStyle.display}; text-align: ${textAlign}; word-break: ${linkStyle.wordBreak};">
|
|
1602
|
+
${typeof children === "string" ? children : ""}
|
|
1603
|
+
</span>`
|
|
1604
|
+
: `<a href="${href}" target="_blank" rel="noopener noreferrer" style="color: ${color}; text-decoration: ${textDecoration}; display: ${linkStyle.display}; word-break: ${linkStyle.wordBreak}; font-family: ${fontFamily}; font-size: ${fontSize}; font-weight: ${fontWeight}; font-style: ${fontStyle || "normal"}; line-height: ${lineHeight}; letter-spacing: ${letterSpacing || "normal"}; text-transform: ${textTransform || "none"}; text-align: ${textAlign}; white-space: ${whiteSpace};">
|
|
1605
|
+
<span style="color: ${color}; font-family: ${fontFamily}; font-size: ${fontSize}; font-weight: ${fontWeight}; font-style: ${fontStyle || "normal"}; line-height: ${lineHeight}; letter-spacing: ${letterSpacing || "normal"}; text-transform: ${textTransform || "none"}; text-decoration: ${textDecoration}; white-space: ${whiteSpace};">
|
|
1606
|
+
${typeof children === "string" ? children : ""}
|
|
1607
|
+
</span>
|
|
1608
|
+
</a>`}
|
|
1605
1609
|
</td>
|
|
1606
1610
|
</tr>
|
|
1607
1611
|
</tbody>
|
|
@@ -1684,20 +1688,20 @@ function Column({ children, config, devNode }) {
|
|
|
1684
1688
|
fontSize: "1px",
|
|
1685
1689
|
width: "100%",
|
|
1686
1690
|
};
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1691
|
+
// Main content rendering
|
|
1692
|
+
const renderContent = () => (jsx("table", { "aria-label": "Column Padding", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: innerTableStyle, children: jsx("tbody", { children: jsx("tr", { children: jsx("td", Object.assign({ style: innerTdStyle, valign: config.justifyContent ? vAlignMap[config.justifyContent] : "top", align: config.alignItems ? alignMap$2[config.alignItems] : "left" }, (config.height && { height: config.height }), { children: config.gap && numChildren > 1 ? (jsx("table", { "aria-label": "Column Gap Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
|
|
1693
|
+
width: "100%",
|
|
1694
|
+
borderCollapse: "collapse",
|
|
1695
|
+
}, children: jsx("tbody", { children: childrenArray.map((child, index) => (jsxs(Fragment, { children: [jsx("tr", { children: jsx("td", { style: {
|
|
1696
|
+
verticalAlign: config.alignItems
|
|
1697
|
+
? alignMap$2[config.alignItems]
|
|
1698
|
+
: "top",
|
|
1699
|
+
}, valign: config.justifyContent
|
|
1700
|
+
? vAlignMap[config.justifyContent]
|
|
1701
|
+
: "top", align: config.alignItems
|
|
1702
|
+
? alignMap$2[config.alignItems]
|
|
1703
|
+
: "left", children: child }) }), index < numChildren - 1 && (jsx("tr", { children: jsx("td", { style: gapSpacerStyle, children: "\u00A0" }) }))] }, `col-child-${index}`))) }) })) : (children) })) }) }) }));
|
|
1704
|
+
return (jsxs("table", Object.assign({ "aria-label": "Column Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: Object.assign({ position: "relative" }, outerTableStyle) }, (config.height && { height: config.height }), { children: [jsx("tbody", { children: jsx("tr", { children: jsx("td", Object.assign({ style: outerTdStyle }, (config.width && { width: config.width }), (config.height && { height: config.height }), { children: renderContent() })) }) }), devNode && (jsx("tfoot", { children: jsx("tr", { children: jsx("td", { children: devNode }) }) }))] })));
|
|
1701
1705
|
}
|
|
1702
1706
|
var Column_default = memo(Column, arePropsEqual);
|
|
1703
1707
|
|
|
@@ -2014,6 +2018,15 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
|
|
|
2014
2018
|
margin: 0 !important;
|
|
2015
2019
|
}
|
|
2016
2020
|
/* ================================================= */
|
|
2021
|
+
|
|
2022
|
+
/* ================================================= */
|
|
2023
|
+
/* 🔒 HEADING STYLE RESET */
|
|
2024
|
+
h1, h2, h3, h4, h5, h6 {
|
|
2025
|
+
margin: 0;
|
|
2026
|
+
padding: 0;
|
|
2027
|
+
font-weight: inherit; /* Disables browser defaults */
|
|
2028
|
+
}
|
|
2029
|
+
/* ================================================= */
|
|
2017
2030
|
`;
|
|
2018
2031
|
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 }), jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: msoResetStyles } }), jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: globalStyles } }), children] }));
|
|
2019
2032
|
}
|
|
@@ -2169,10 +2182,15 @@ function getBorderStyle$1(border) {
|
|
|
2169
2182
|
return style;
|
|
2170
2183
|
}
|
|
2171
2184
|
function Row({ children, config, devNode }) {
|
|
2185
|
+
var _a, _b, _c;
|
|
2172
2186
|
const childrenArray = (Array.isArray(children) ? children : [children]).filter((child) => child != null);
|
|
2173
2187
|
const numChildren = childrenArray.length;
|
|
2174
2188
|
// 1. Outer TD for Background and Border Radius (no border here)
|
|
2175
|
-
const backgroundTdStyle = Object.assign({ backgroundColor: config.backgroundColor, borderRadius: config.borderRadius, width: config.width || "100%", height: config.height
|
|
2189
|
+
const backgroundTdStyle = Object.assign({ backgroundColor: config.backgroundColor, borderRadius: config.borderRadius, width: config.width || "100%", height: config.height,
|
|
2190
|
+
// Background Image styles
|
|
2191
|
+
backgroundImage: config.backgroundImage
|
|
2192
|
+
? `url(${config.backgroundImage.src})`
|
|
2193
|
+
: 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 }, (config.borderRadius && { overflow: "hidden" }));
|
|
2176
2194
|
// 2. Inner Table for Border and Border Radius
|
|
2177
2195
|
const borderTableStyle = Object.assign({ width: "100%", height: "100%", borderCollapse: "separate", borderSpacing: 0, borderRadius: config.borderRadius }, getBorderStyle$1(config.border));
|
|
2178
2196
|
// 3. TD for Padding
|
|
@@ -2297,7 +2315,7 @@ var Spacer_default = memo(Spacer, arePropsEqual);
|
|
|
2297
2315
|
|
|
2298
2316
|
function Text({ config, devMode, children }) {
|
|
2299
2317
|
var _a;
|
|
2300
|
-
const { text, padding, color, textAlign, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, } = config;
|
|
2318
|
+
const { text, padding, color, textAlign, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, opacity, whiteSpace, } = config;
|
|
2301
2319
|
// 1. TD Style: Where padding and background are reliably applied.
|
|
2302
2320
|
const tdStyle = {
|
|
2303
2321
|
padding: padding,
|
|
@@ -2320,6 +2338,8 @@ function Text({ config, devMode, children }) {
|
|
|
2320
2338
|
textDecoration: textDecoration,
|
|
2321
2339
|
direction: direction,
|
|
2322
2340
|
verticalAlign: verticalAlign,
|
|
2341
|
+
opacity: opacity,
|
|
2342
|
+
whiteSpace: whiteSpace,
|
|
2323
2343
|
margin: "0", // Crucial: Remove default margin from <p> tags
|
|
2324
2344
|
padding: "0",
|
|
2325
2345
|
fontFamily: "Arial, Helvetica, sans-serif", // Use a widely supported font stack
|