@pagenflow/email 1.1.15 → 1.3.1
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/Text.d.ts +4 -0
- package/dist/index.cjs.js +37 -22
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +37 -22
- 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
|
}
|
|
@@ -2297,7 +2310,7 @@ var Spacer_default = memo(Spacer, arePropsEqual);
|
|
|
2297
2310
|
|
|
2298
2311
|
function Text({ config, devMode, children }) {
|
|
2299
2312
|
var _a;
|
|
2300
|
-
const { text, padding, color, textAlign, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, } = config;
|
|
2313
|
+
const { text, padding, color, textAlign, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, opacity, whiteSpace, } = config;
|
|
2301
2314
|
// 1. TD Style: Where padding and background are reliably applied.
|
|
2302
2315
|
const tdStyle = {
|
|
2303
2316
|
padding: padding,
|
|
@@ -2320,6 +2333,8 @@ function Text({ config, devMode, children }) {
|
|
|
2320
2333
|
textDecoration: textDecoration,
|
|
2321
2334
|
direction: direction,
|
|
2322
2335
|
verticalAlign: verticalAlign,
|
|
2336
|
+
opacity: opacity,
|
|
2337
|
+
whiteSpace: whiteSpace,
|
|
2323
2338
|
margin: "0", // Crucial: Remove default margin from <p> tags
|
|
2324
2339
|
padding: "0",
|
|
2325
2340
|
fontFamily: "Arial, Helvetica, sans-serif", // Use a widely supported font stack
|