@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
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import { GlobalConfig } from "./Body";
|
|
3
|
+
export interface BodyDevProps {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
/** Global configuration from GlobalEditor */
|
|
6
|
+
config?: GlobalConfig;
|
|
7
|
+
}
|
|
8
|
+
export default function BodyDev({ children, config }: BodyDevProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
export interface HeadDevProps {
|
|
3
|
+
/** Additional elements like custom <style> blocks, <title>, etc. */
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
/** Global background color (used in CSS reset). */
|
|
6
|
+
backgroundColor?: string;
|
|
7
|
+
/** Subject line for the email title. */
|
|
8
|
+
title?: string;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Dev variant of Head component for use in builder canvas.
|
|
12
|
+
* Injects styles directly into document head to maintain email behavior during development.
|
|
13
|
+
*/
|
|
14
|
+
export default function HeadDev({ children, backgroundColor, title, }: HeadDevProps): null;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import IInnerLink from "../types/IInnerLink";
|
|
3
|
+
export interface IconConfig {
|
|
4
|
+
/** Icon identifier for the Iconify API */
|
|
5
|
+
iconIdentifier?: string;
|
|
6
|
+
/** Width of the icon */
|
|
7
|
+
width?: string | number;
|
|
8
|
+
/** Height of the icon */
|
|
9
|
+
height?: string | number;
|
|
10
|
+
/** Rotation angle in degrees */
|
|
11
|
+
rotate?: number;
|
|
12
|
+
/** Rotation orientation: clockwise or counter-clockwise */
|
|
13
|
+
rotateOrientation?: "cw" | "ccw";
|
|
14
|
+
/** Icon color (hex format for best compatibility) */
|
|
15
|
+
color?: string;
|
|
16
|
+
/** Link configuration for clickable icons */
|
|
17
|
+
innerLink?: IInnerLink;
|
|
18
|
+
/** Background color of the containing TD */
|
|
19
|
+
backgroundColor?: string;
|
|
20
|
+
/** Padding around the icon */
|
|
21
|
+
padding?: string;
|
|
22
|
+
/** Border radius for the icon container */
|
|
23
|
+
borderRadius?: string;
|
|
24
|
+
/** Horizontal alignment within the container */
|
|
25
|
+
justifyContent?: "start" | "center" | "end";
|
|
26
|
+
}
|
|
27
|
+
export type IconProps = {
|
|
28
|
+
config: IconConfig;
|
|
29
|
+
devNode?: ReactNode;
|
|
30
|
+
devMode?: boolean;
|
|
31
|
+
children?: ReactNode;
|
|
32
|
+
};
|
|
33
|
+
declare function Icon({ config, devNode, devMode, children }: IconProps): import("react/jsx-runtime").JSX.Element | null;
|
|
34
|
+
declare const _default: import("react").MemoExoticComponent<typeof Icon>;
|
|
35
|
+
export default _default;
|
|
@@ -28,6 +28,10 @@ export interface TextConfig {
|
|
|
28
28
|
verticalAlign?: string;
|
|
29
29
|
/** Background color of the text block. */
|
|
30
30
|
backgroundColor?: string;
|
|
31
|
+
/** Opacity of the text (e.g., '0.5', '1'). */
|
|
32
|
+
opacity?: string | number;
|
|
33
|
+
/** White space handling (e.g., 'normal', 'nowrap', 'pre', 'pre-wrap'). */
|
|
34
|
+
whiteSpace?: string;
|
|
31
35
|
}
|
|
32
36
|
export type TextProps = {
|
|
33
37
|
config: TextConfig;
|
package/dist/index.cjs.js
CHANGED
|
@@ -1584,12 +1584,12 @@ function Button({ config, devMode }) {
|
|
|
1584
1584
|
borderCollapse: "collapse",
|
|
1585
1585
|
// base
|
|
1586
1586
|
boxSizing: "border-box",
|
|
1587
|
-
border:
|
|
1587
|
+
border: 0,
|
|
1588
1588
|
margin: 0,
|
|
1589
1589
|
padding: 0,
|
|
1590
1590
|
}, onClick: devMode ? (e) => e.preventDefault() : undefined, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { dangerouslySetInnerHTML: {
|
|
1591
1591
|
__html: `
|
|
1592
|
-
${vmlButton}
|
|
1592
|
+
${devMode ? "" : vmlButton}
|
|
1593
1593
|
<!--[if !mso]><!-->
|
|
1594
1594
|
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%;">
|
|
1595
1595
|
<tbody>
|
|
@@ -1599,11 +1599,15 @@ function Button({ config, devMode }) {
|
|
|
1599
1599
|
<tbody>
|
|
1600
1600
|
<tr>
|
|
1601
1601
|
<td style="padding: ${padding};">
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1602
|
+
${devMode
|
|
1603
|
+
? `<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};">
|
|
1604
|
+
${typeof children === "string" ? children : ""}
|
|
1605
|
+
</span>`
|
|
1606
|
+
: `<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};">
|
|
1607
|
+
<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};">
|
|
1608
|
+
${typeof children === "string" ? children : ""}
|
|
1609
|
+
</span>
|
|
1610
|
+
</a>`}
|
|
1607
1611
|
</td>
|
|
1608
1612
|
</tr>
|
|
1609
1613
|
</tbody>
|
|
@@ -1686,20 +1690,20 @@ function Column({ children, config, devNode }) {
|
|
|
1686
1690
|
fontSize: "1px",
|
|
1687
1691
|
width: "100%",
|
|
1688
1692
|
};
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1693
|
+
// Main content rendering
|
|
1694
|
+
const renderContent = () => (jsxRuntime.jsx("table", { "aria-label": "Column Padding", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: innerTableStyle, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.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 ? (jsxRuntime.jsx("table", { "aria-label": "Column Gap Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
|
|
1695
|
+
width: "100%",
|
|
1696
|
+
borderCollapse: "collapse",
|
|
1697
|
+
}, children: jsxRuntime.jsx("tbody", { children: childrenArray.map((child, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: {
|
|
1698
|
+
verticalAlign: config.alignItems
|
|
1699
|
+
? alignMap$2[config.alignItems]
|
|
1700
|
+
: "top",
|
|
1701
|
+
}, valign: config.justifyContent
|
|
1702
|
+
? vAlignMap[config.justifyContent]
|
|
1703
|
+
: "top", align: config.alignItems
|
|
1704
|
+
? alignMap$2[config.alignItems]
|
|
1705
|
+
: "left", children: child }) }), index < numChildren - 1 && (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: gapSpacerStyle, children: "\u00A0" }) }))] }, `col-child-${index}`))) }) })) : (children) })) }) }) }));
|
|
1706
|
+
return (jsxRuntime.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: [jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", Object.assign({ style: outerTdStyle }, (config.width && { width: config.width }), (config.height && { height: config.height }), { children: renderContent() })) }) }), devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] })));
|
|
1703
1707
|
}
|
|
1704
1708
|
var Column_default = React.memo(Column, arePropsEqual);
|
|
1705
1709
|
|
|
@@ -2016,6 +2020,15 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
|
|
|
2016
2020
|
margin: 0 !important;
|
|
2017
2021
|
}
|
|
2018
2022
|
/* ================================================= */
|
|
2023
|
+
|
|
2024
|
+
/* ================================================= */
|
|
2025
|
+
/* 🔒 HEADING STYLE RESET */
|
|
2026
|
+
h1, h2, h3, h4, h5, h6 {
|
|
2027
|
+
margin: 0;
|
|
2028
|
+
padding: 0;
|
|
2029
|
+
font-weight: inherit; /* Disables browser defaults */
|
|
2030
|
+
}
|
|
2031
|
+
/* ================================================= */
|
|
2019
2032
|
`;
|
|
2020
2033
|
return (jsxRuntime.jsxs("head", { children: [jsxRuntime.jsx("meta", { httpEquiv: "Content-Type", content: "text/html; charset=utf-8" }), jsxRuntime.jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), jsxRuntime.jsx("meta", { httpEquiv: "X-UA-Compatible", content: "IE=edge" }), jsxRuntime.jsx("title", { children: title }), jsxRuntime.jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: msoResetStyles } }), jsxRuntime.jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: globalStyles } }), children] }));
|
|
2021
2034
|
}
|
|
@@ -2299,7 +2312,7 @@ var Spacer_default = React.memo(Spacer, arePropsEqual);
|
|
|
2299
2312
|
|
|
2300
2313
|
function Text({ config, devMode, children }) {
|
|
2301
2314
|
var _a;
|
|
2302
|
-
const { text, padding, color, textAlign, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, } = config;
|
|
2315
|
+
const { text, padding, color, textAlign, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, opacity, whiteSpace, } = config;
|
|
2303
2316
|
// 1. TD Style: Where padding and background are reliably applied.
|
|
2304
2317
|
const tdStyle = {
|
|
2305
2318
|
padding: padding,
|
|
@@ -2322,6 +2335,8 @@ function Text({ config, devMode, children }) {
|
|
|
2322
2335
|
textDecoration: textDecoration,
|
|
2323
2336
|
direction: direction,
|
|
2324
2337
|
verticalAlign: verticalAlign,
|
|
2338
|
+
opacity: opacity,
|
|
2339
|
+
whiteSpace: whiteSpace,
|
|
2325
2340
|
margin: "0", // Crucial: Remove default margin from <p> tags
|
|
2326
2341
|
padding: "0",
|
|
2327
2342
|
fontFamily: "Arial, Helvetica, sans-serif", // Use a widely supported font stack
|