@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
|
@@ -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;
|
package/dist/components/Row.d.ts
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
2
|
import { AlignItems, BorderConfig, JustifyContent } from "../types";
|
|
3
|
+
export interface BackgroundImageType {
|
|
4
|
+
src: string;
|
|
5
|
+
repeat?: "no-repeat" | "repeat" | "repeat-x" | "repeat-y";
|
|
6
|
+
size?: "auto" | "cover" | "contain";
|
|
7
|
+
position?: string;
|
|
8
|
+
}
|
|
3
9
|
export interface RowConfig {
|
|
4
10
|
gap?: string;
|
|
5
11
|
justifyContent?: JustifyContent;
|
|
@@ -8,6 +14,7 @@ export interface RowConfig {
|
|
|
8
14
|
height?: string;
|
|
9
15
|
padding?: string;
|
|
10
16
|
backgroundColor?: string;
|
|
17
|
+
backgroundImage?: BackgroundImageType;
|
|
11
18
|
borderRadius?: string;
|
|
12
19
|
border?: BorderConfig;
|
|
13
20
|
}
|
|
@@ -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
|
}
|
|
@@ -2171,10 +2184,15 @@ function getBorderStyle$1(border) {
|
|
|
2171
2184
|
return style;
|
|
2172
2185
|
}
|
|
2173
2186
|
function Row({ children, config, devNode }) {
|
|
2187
|
+
var _a, _b, _c;
|
|
2174
2188
|
const childrenArray = (Array.isArray(children) ? children : [children]).filter((child) => child != null);
|
|
2175
2189
|
const numChildren = childrenArray.length;
|
|
2176
2190
|
// 1. Outer TD for Background and Border Radius (no border here)
|
|
2177
|
-
const backgroundTdStyle = Object.assign({ backgroundColor: config.backgroundColor, borderRadius: config.borderRadius, width: config.width || "100%", height: config.height
|
|
2191
|
+
const backgroundTdStyle = Object.assign({ backgroundColor: config.backgroundColor, borderRadius: config.borderRadius, width: config.width || "100%", height: config.height,
|
|
2192
|
+
// Background Image styles
|
|
2193
|
+
backgroundImage: config.backgroundImage
|
|
2194
|
+
? `url(${config.backgroundImage.src})`
|
|
2195
|
+
: 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" }));
|
|
2178
2196
|
// 2. Inner Table for Border and Border Radius
|
|
2179
2197
|
const borderTableStyle = Object.assign({ width: "100%", height: "100%", borderCollapse: "separate", borderSpacing: 0, borderRadius: config.borderRadius }, getBorderStyle$1(config.border));
|
|
2180
2198
|
// 3. TD for Padding
|
|
@@ -2299,7 +2317,7 @@ var Spacer_default = React.memo(Spacer, arePropsEqual);
|
|
|
2299
2317
|
|
|
2300
2318
|
function Text({ config, devMode, children }) {
|
|
2301
2319
|
var _a;
|
|
2302
|
-
const { text, padding, color, textAlign, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, } = config;
|
|
2320
|
+
const { text, padding, color, textAlign, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textTransform, textDecoration, direction, verticalAlign, backgroundColor, opacity, whiteSpace, } = config;
|
|
2303
2321
|
// 1. TD Style: Where padding and background are reliably applied.
|
|
2304
2322
|
const tdStyle = {
|
|
2305
2323
|
padding: padding,
|
|
@@ -2322,6 +2340,8 @@ function Text({ config, devMode, children }) {
|
|
|
2322
2340
|
textDecoration: textDecoration,
|
|
2323
2341
|
direction: direction,
|
|
2324
2342
|
verticalAlign: verticalAlign,
|
|
2343
|
+
opacity: opacity,
|
|
2344
|
+
whiteSpace: whiteSpace,
|
|
2325
2345
|
margin: "0", // Crucial: Remove default margin from <p> tags
|
|
2326
2346
|
padding: "0",
|
|
2327
2347
|
fontFamily: "Arial, Helvetica, sans-serif", // Use a widely supported font stack
|