@templatical/renderer 0.44.2 → 0.45.0

package/dist/index.d.ts

@@ -170,6 +170,16 @@ export declare function richTextGapClass(gap: number): string;
  */
 export declare function resolveParagraphGap(spacing: number | undefined): number;
 //#endregion
+//#region src/renderers/button.d.ts
+/**
+ * Marks the `mj-button` of a full-width button. MJML gives the button's `<a>`
+ * a width only for a px `width`; for `100%` it widens the `<table>` and leaves
+ * the `<a>` at `display:inline-block`, so only the label is clickable.
+ * `renderToMjml` scopes the head rule that makes the `<a>` fill the button to
+ * this class.
+ */
+export declare const BUTTON_FULL_WIDTH_CSS_CLASS = "tpl-button-full";
+//#endregion
 //#region src/columns.d.ts
 /**
  * Get width percentages for each column in a layout.

package/dist/index.js

@@ -1,7 +1,7 @@
-import { HEADING_LEVEL_FONT_SIZE, RICH_TEXT_SPACING, applyLayout, assertNoSlotInContent, assertNoWrapperInContent, findOpenTagEnd, getTagAttrValue, isButton, isCustomBlock, isDivider, isHtml, isImage, isMenu, isParagraph, isSection, isSocialIcons, isSpacer, isTable, isTitle, isVideo, isWrapper, resolveContentDirection, toBorderDeclarations, toBorderRadiusCss } from "@templatical/types";
+import { HEADING_LEVEL_FONT_SIZE, RICH_TEXT_SPACING, applyLayout, assertNoSlotInContent, assertNoWrapperInContent, findOpenTagEnd, getTagAttrValue, isButton, isCustomBlock, isDivider, isHtml, isImage, isMenu, isParagraph, isSection, isSocialIcons, isSpacer, isTable, isTitle, isVideo, isWrapper, resolveContentDirection, socialIconAssetDir, toBorderDeclarations, toBorderRadiusCss } from "@templatical/types";
 //#endregion
 //#region src/render-context.ts
-const DEFAULT_SOCIAL_ICONS_BASE_URL = `https://cdn.jsdelivr.net/npm/@templatical/renderer@0.44.2/assets/social`;
+const DEFAULT_SOCIAL_ICONS_BASE_URL = `https://cdn.jsdelivr.net/npm/@templatical/renderer@0.45.0/assets/social`;
 const BUILT_IN_FONT_FALLBACKS = {
 	arial: "Arial, sans-serif",
 	helvetica: "Helvetica, sans-serif",
@@ -495,6 +495,14 @@ function renderImage(block, context) {
 //#endregion
 //#region src/renderers/button.ts
 /**
+* Marks the `mj-button` of a full-width button. MJML gives the button's `<a>`
+* a width only for a px `width`; for `100%` it widens the `<table>` and leaves
+* the `<a>` at `display:inline-block`, so only the label is clickable.
+* `renderToMjml` scopes the head rule that makes the `<a>` fill the button to
+* this class.
+*/
+const BUTTON_FULL_WIDTH_CSS_CLASS = "tpl-button-full";
+/**
 * Render a button block to MJML markup.
 */
 function renderButton(block, context) {
@@ -512,7 +520,7 @@ function renderButton(block, context) {
 	const targetAttr = block.openInNewTab ? " target=\"_blank\" rel=\"noopener\"" : "";
 	const fontFamilyAttr = renderFontFamilyAttr$2(block.fontFamily, context);
 	const widthAttr = renderWidthAttr(block.width);
-	const visibilityAttr = getCssClassAttr(block);
+	const cssClassAttr = getCssClassAttr(block, block.width === "full" ? [BUTTON_FULL_WIDTH_CSS_CLASS] : []);
 	return `<mj-button${hrefAttr}${targetAttr}
   background-color="${backgroundColor}"
   color="${textColor}"
@@ -521,7 +529,7 @@ function renderButton(block, context) {
   border-radius="${borderRadius}"${borderAttr(block.border)}
   inner-padding="${buttonPadding}"
   align="${block.align ?? "center"}"
-  padding="${padding}"${bgColor}${fontFamilyAttr}${widthAttr}${visibilityAttr}
+  padding="${padding}"${bgColor}${fontFamilyAttr}${widthAttr}${cssClassAttr}
 >${text}</mj-button>`;
 }
 /**
@@ -603,13 +611,14 @@ ${content}
 /**
 * Render a social icons block to MJML markup.
 *
-* Icons are emitted as `<img src="…/{style}/{platform}.png">` rather than
+* Icons are emitted as `<img src="…/{dir}/{platform}.png">` rather than
 * inline SVG or base64 data URIs. Outlook desktop (Word rendering engine)
 * does not support SVG and rejects base64 in `<img src>`, so hosted PNGs are
 * the only format that renders across every mainstream client. The base URL
 * is read from `context.socialIconsBaseUrl` (configurable via
 * `RenderOptions.socialIconsBaseUrl`; default is the version-pinned jsDelivr
-* mirror of this package).
+* mirror of this package). `{dir}` is the style, plus `-{tone}` for a
+* one-color tone (`socialIconAssetDir`).
 */
 function renderSocialIcons(block, context) {
 	if (isHiddenOnAll(block)) return "";
@@ -621,6 +630,7 @@ function renderSocialIcons(block, context) {
 	const align = block.align;
 	const iconSize = block.iconSize;
 	const iconStyle = block.iconStyle;
+	const assetDir = socialIconAssetDir(iconStyle, block.iconTone);
 	const spacing = block.spacing;
 	let iconSizePx;
 	switch (iconSize) {
@@ -655,7 +665,7 @@ function renderSocialIcons(block, context) {
 ${icons.map((icon, index) => {
 		const platform = icon.platform;
 		const url = escapeAttr(icon.url);
-		const iconSrc = `${context.socialIconsBaseUrl}/${iconStyle}/${platform}.png`;
+		const iconSrc = `${context.socialIconsBaseUrl}/${assetDir}/${platform}.png`;
 		const rightPad = index === iconCount - 1 ? 0 : spacing;
 		return `<mj-social-element src="${iconSrc}" href="${url}" icon-size="${iconSizePx}px" padding="0 ${rightPad}px 0 0" border-radius="${borderRadius}" background-color="transparent"></mj-social-element>`;
 	}).join("\n")}
@@ -960,6 +970,19 @@ function renderBlock(block, context) {
 //#endregion
 //#region src/index.ts
 /**
+* Makes a full-width button's whole fill clickable. MJML sizes a button's `<a>`
+* only for a px width, so without this rule the link of a `100%` button stays
+* the size of its label.
+*
+* It sits in the inline `<mj-style>` so `mjml`'s juice pass writes it onto the
+* `<a>`; MRML's default build emits that block as a plain `<style>` instead.
+* `!important` lets it beat MJML's inline `display:inline-block` either way.
+* Every template carries it, so nothing has to walk the tree for full-width
+* buttons: juice drops a rule that matches nothing, so with `mjml` it costs
+* nothing in the compiled HTML.
+*/
+const BUTTON_FULL_WIDTH_RULE = `.${BUTTON_FULL_WIDTH_CSS_CLASS} a { display: block !important; }`;
+/**
 * Render template content to an MJML string.
 *
 * The function is async because resolving custom blocks may require
@@ -998,6 +1021,7 @@ async function renderToMjml(content, options) {
     </mj-attributes>${fontDeclarations}
     <mj-style inline="inline">
       ${richTextStylesheet(collectParagraphGaps(blocks), contentDirection)}
+      ${BUTTON_FULL_WIDTH_RULE}
     </mj-style>
     <mj-style>
       a { color: ${linkColor}; text-decoration: ${linkDecoration}; }
@@ -1139,6 +1163,6 @@ function renderCustomBlockStylesheets(stylesheets) {
 	return stylesheets.map((css) => `\n    <mj-style>\n${css}\n    </mj-style>`).join("");
 }
 //#endregion
-export { DEFAULT_SOCIAL_ICONS_BASE_URL, RICH_TEXT_CSS_CLASS, RenderContext, UNRENDERABLE_MARKER_PREFIX, convertMergeTagsToValues, escapeAttr, escapeHtml, getCssClassAttr, getCssClasses, getWidthPercentages, getWidthPixels, isHiddenOnAll, renderBlock, renderToMjml, renderUnrenderableBlock, resolveParagraphGap, richTextGapClass, toPaddingString };
+export { BUTTON_FULL_WIDTH_CSS_CLASS, DEFAULT_SOCIAL_ICONS_BASE_URL, RICH_TEXT_CSS_CLASS, RenderContext, UNRENDERABLE_MARKER_PREFIX, convertMergeTagsToValues, escapeAttr, escapeHtml, getCssClassAttr, getCssClasses, getWidthPercentages, getWidthPixels, isHiddenOnAll, renderBlock, renderToMjml, renderUnrenderableBlock, resolveParagraphGap, richTextGapClass, toPaddingString };
 
 //# sourceMappingURL=index.js.map