email-builder-utils 1.1.46 → 1.1.48

package/dist/utils/common.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractVimeoId = exports.extractYouTubeId = void 0;
 exports.getVisibilityClass = getVisibilityClass;
+exports.encodeBlockPropsAttr = encodeBlockPropsAttr;
 const extractYouTubeId = (url) => {
     try {
         const u = new URL(url);
@@ -43,3 +44,12 @@ function getVisibilityClass(props) {
         .filter(Boolean)
         .join(" ");
 }
+function encodeBlockPropsAttr(props) {
+    // HTML attribute-safe JSON string.
+    // Keep it minimal and deterministic: the importer reads it back via getAttribute + JSON.parse.
+    return JSON.stringify(props)
+        .replace(/&/g, "&")
+        .replace(/"/g, """)
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+}

package/dist/utils/convertJsonToHtml.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"convertJsonToHtml.d.ts","sourceRoot":"","sources":["../../src/utils/convertJsonToHtml.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,GAAU,UAAU,GAAG,oBAwHpD,CAAC"}
+{"version":3,"file":"convertJsonToHtml.d.ts","sourceRoot":"","sources":["../../src/utils/convertJsonToHtml.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,GAAU,UAAU,GAAG,oBAqLpD,CAAC"}

package/dist/utils/convertJsonToHtml.js

@@ -20,6 +20,7 @@ const convertJsonToHtml = async (jsonData) => {
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="x-apple-disable-message-reformatting" />
+    <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no" />
     <!--[if gte mso 9]><xml>
       <o:OfficeDocumentSettings>
         <o:AllowPNG/>
@@ -27,83 +28,143 @@ const convertJsonToHtml = async (jsonData) => {
       </o:OfficeDocumentSettings>
     </xml><![endif]-->
     <style>
-        .responsive-table {
-          width: 100%;
-          max-width: 600px;
+      html, body {
+        margin: 0 !important;
+        padding: 0 !important;
+        width: 100% !important;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+      }
+
+      body, table, td, p, a {
+        font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
+      }
+
+      table, td {
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+        border-collapse: collapse !important;
+      }
+
+      img {
+        -ms-interpolation-mode: bicubic;
+        border: 0;
+        outline: none;
+        text-decoration: none;
+        display: block;
+        height: auto;
+        line-height: 100%;
+      }
+
+      a {
+        text-decoration: none;
+        color: inherit;
+      }
+
+      .email-container {
+        width: 100%;
+        max-width: 600px;
+        margin: 0 auto;
+      }
+
+      .stack-column,
+      .stack-column-cell {
+        vertical-align: top;
+      }
+
+      .hide-mobile {
+        display: block !important;
+        max-height: none !important;
+        overflow: visible !important;
+      }
+
+      .hide-desktop {
+        display: none !important;
+        max-height: 0 !important;
+        overflow: hidden !important;
+        mso-hide: all !important;
+      }
+
+      @media only screen and (max-width: 600px) {
+        .email-container {
+          width: 100% !important;
         }
-        @media only screen and (max-width: 600px) {
-          .responsive-table {
-            width: 100% !important;
-          }
-          .stack-column,
-          .stack-column td {
-            display: block !important;
-            width: 100% !important;
-            max-width: 100% !important;
-          }
+
+        .stack-column,
+        .stack-column-cell {
+          display: block !important;
+          width: 100% !important;
+          max-width: 100% !important;
         }
+
         .hide-mobile {
-         display: block !important;
-       }
-
-       .hide-desktop {
-         display: block !important;
-         mso-hide: all !important; /* Hide in Outlook (treated as desktop) */
-       }
-
-       @media only screen and (max-width: 600px) {
-         .hide-mobile {
-           display: none !important;
-           max-height: 0 !important;
-           overflow: hidden !important;
-           mso-hide: all !important;
-         }
-       }
-
-       @media only screen and (min-width: 601px) {
-         .hide-desktop {
-           display: none !important;
-           max-height: 0 !important;
-           overflow: hidden !important;
-           mso-hide: all !important;
-         }
-       }
-
-      </style>
-    </head>
-    <body style="margin:0; padding:0; background-color:${canvasColor};">
-      <center style="width:100%; background-color:${canvasColor};">
-        <table
-          class="responsive-table"
-          role="presentation"
-          bgcolor="${canvasColor}"
-          cellpadding="0"
-          cellspacing="0"
-          border="0"
-          width="600"
-          align="center"
-          style="
-            font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
-            margin: 0 auto;
-            table-layout:fixed;
-            width:600px;
-            max-width:600px;
-            background-color: ${canvasColor};
-            ${textColor ? `color: ${textColor};` : ''}
-            ${borderWidth ? `border: ${borderWidth}px ${borderStyle || 'solid'} ${borderColor || 'transparent'};` : ''}
-            ${borderRadius ? `border-radius: ${borderRadius}px;` : ''}"
-        >
-          <tbody>
-            <tr>
-              <td style="padding: ${top}px ${right}px ${bottom}px ${left}px;">
-                ${blocksHtml.join("")}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </center>
-    </body>
-  </html>`;
+          display: none !important;
+          max-height: 0 !important;
+          overflow: hidden !important;
+          mso-hide: all !important;
+        }
+
+        .hide-desktop {
+          display: block !important;
+          max-height: none !important;
+          overflow: visible !important;
+        }
+      }
+    </style>
+  </head>
+  <body style="margin:0; padding:0; background-color:${canvasColor || '#ffffff'};">
+    <center style="width:100%; background-color:${canvasColor || '#ffffff'};">
+
+      <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="${canvasColor || '#ffffff'}">
+        <tr>
+          <td align="center">
+
+            <!--[if mso]>
+            <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600">
+              <tr>
+                <td>
+            <![endif]-->
+
+            <table
+              role="presentation"
+              class="email-container"
+              bgcolor="${canvasColor || '#ffffff'}"
+              cellpadding="0"
+              cellspacing="0"
+              border="0"
+              width="100%"
+              style="
+                font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
+                table-layout: fixed;
+                width: 100%;
+                max-width: 600px;
+                background-color: ${canvasColor || '#ffffff'};
+                ${textColor ? `color: ${textColor};` : ''}
+                ${borderWidth ? `border: ${borderWidth}px ${borderStyle || 'solid'} ${borderColor || 'transparent'};` : ''}
+                ${borderRadius ? `border-radius: ${borderRadius}px;` : ''}"
+            >
+              <tbody>
+                <tr>
+                  <td style="padding: ${top}px ${right}px ${bottom}px ${left}px;">
+                    ${blocksHtml.join("")}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+            <!--[if mso]>
+                </td>
+              </tr>
+            </table>
+            <![endif]-->
+
+          </td>
+        </tr>
+      </table>
+
+    </center>
+  </body>
+</html>`;
     return rawHtml;
 };
 exports.convertJsonToHtml = convertJsonToHtml;

package/dist/utils/gradientUtils.d.ts

@@ -0,0 +1,8 @@
+export declare function extractCssFallbackColor(customCss?: string): string;
+export declare function parseGradient(gradient?: string): {
+    angle: number;
+    colors: string[];
+    fallback: string;
+} | null;
+export declare function cssAngleToVml(angle: number): number;
+//# sourceMappingURL=gradientUtils.d.ts.map

package/dist/utils/gradientUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradientUtils.d.ts","sourceRoot":"","sources":["../../src/utils/gradientUtils.ts"],"names":[],"mappings":"AAsBA,wBAAgB,uBAAuB,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAKlE;AAED,wBAAgB,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM;;;;SAyB9C;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,UAE1C"}

package/dist/utils/gradientUtils.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractCssFallbackColor = extractCssFallbackColor;
+exports.parseGradient = parseGradient;
+exports.cssAngleToVml = cssAngleToVml;
+const GRADIENT_KEYWORDS = new Set([
+    'linear', 'radial', 'conic', 'gradient',
+    'to', 'at', 'top', 'bottom', 'left', 'right', 'center',
+    'closest', 'farthest', 'corner', 'side', 'circle', 'ellipse',
+    'deg', 'turn', 'rad', 'grad', 'from', 'in',
+    'url',
+]);
+function firstGradientColor(gradient) {
+    const tokenRe = /#[0-9a-fA-F]{3,8}|rgba?\([^)]+\)|([a-zA-Z-]+)/g;
+    let m;
+    while ((m = tokenRe.exec(gradient)) !== null) {
+        const namedWord = m[1];
+        if (namedWord) {
+            if (!GRADIENT_KEYWORDS.has(namedWord.toLowerCase()))
+                return namedWord;
+        }
+        else {
+            return m[0];
+        }
+    }
+    return '';
+}
+function extractCssFallbackColor(customCss) {
+    if (!customCss)
+        return '';
+    const gradientMatch = customCss.match(/(?:linear|radial|conic)-gradient\(([^)]+(?:\([^)]*\)[^)]*)*)\)/);
+    if (!gradientMatch)
+        return '';
+    return firstGradientColor(gradientMatch[1]);
+}
+function parseGradient(gradient) {
+    if (!gradient)
+        return null;
+    const lower = gradient.toLowerCase();
+    const degMatch = gradient.match(/(\d+(?:\.\d+)?)deg/);
+    let angle = 180;
+    if (degMatch) {
+        angle = parseFloat(degMatch[1]);
+    }
+    else if (lower.includes('to right'))
+        angle = 90;
+    else if (lower.includes('to left'))
+        angle = 270;
+    else if (lower.includes('to top'))
+        angle = 0;
+    const colors = [];
+    const tokenRe = /#[0-9a-fA-F]{3,8}|rgba?\([^)]+\)|([a-zA-Z-]+)/g;
+    let m;
+    while ((m = tokenRe.exec(gradient)) !== null) {
+        const namedWord = m[1];
+        if (namedWord) {
+            if (!GRADIENT_KEYWORDS.has(namedWord.toLowerCase()))
+                colors.push(namedWord);
+        }
+        else {
+            colors.push(m[0]);
+        }
+    }
+    return { angle, colors, fallback: colors[0] || '#ffffff' };
+}
+function cssAngleToVml(angle) {
+    return (angle + 90) % 360;
+}

package/dist/utils/jsonToHTML.d.ts

@@ -1,30 +1,3 @@
-import { BlockType } from "../types";
-interface BlockJsonProps {
-    columns: number;
-    rows: number;
-    cellWidths: Array<number>;
-    navigateToUrl: string;
-    text: string;
-    altText: string;
-    imageUrl: string;
-    responsive?: boolean;
-    videoUrl?: string;
-    youtubeVideoUrl?: string;
-    thumbnailUrl?: string;
-    shape?: string;
-    hideOnDesktop?: boolean;
-    hideOnMobile?: boolean;
-}
-interface IBlockData {
-    type: BlockType;
-    data: {
-        props: BlockJsonProps;
-        style: any;
-        childrenIds?: Array<string>;
-    };
-}
-export declare const tableCommonStyle = "border-collapse:collapse; table-layout:fixed";
-export declare function convertToHtml(blockData: IBlockData, rootData: any, cellWidthInPx: number): Promise<string>;
-export declare function convertVideoBlock(blockData: any, cellWidthInPx: number): Promise<string>;
-export {};
+export { tableCommonStyle } from "./buildStyles";
+export declare function convertToHtml(blockData: any, rootData: any, cellWidthInPx: number): Promise<string>;
 //# sourceMappingURL=jsonToHTML.d.ts.map

package/dist/utils/jsonToHTML.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAIrC,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,UAAU,UAAU;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc,CAAC;QACtB,KAAK,EAAE,GAAG,CAAC;QACX,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;KAC7B,CAAC;CACH;AAYD,eAAO,MAAM,gBAAgB,iDAAiD,CAAC;AA2I/E,wBAAsB,aAAa,CACjC,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAwBtB;AAqoCD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAwM5E"}
+{"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,wBAAsB,aAAa,CAAC,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAuBvF"}