email-builder-utils 1.1.24 → 1.1.26

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.
Files changed (3) hide show
  1. package/dist/utils/jsonToHTML.d.ts.map +1 -1
  2. package/dist/utils/jsonToHTML.js +94 -74
  3. package/package.json +1 -1
package/dist/utils/jsonToHTML.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAUrC,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;CAChB;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;AAOD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AAiDhF,wBAAsB,aAAa,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAqB9F;AA2UD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAgJ5E"}
1
+ {"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAUrC,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;CAChB;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;AAOD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AAiDhF,wBAAsB,aAAa,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAqB9F;AAsVD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAoK5E"}
package/dist/utils/jsonToHTML.js CHANGED
@@ -265,9 +265,9 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
265
265
  const visualRows = Math.ceil(total / columns);
266
266
  let html = `
267
267
  <!--[if mso]>
268
- <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" style="${exports.tableCommonStyle}">
268
+ <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" style="${exports.tableCommonStyle}border-collapse: separate;border-spacing:${columnGap}px;">
269
269
  <![endif]-->
270
- <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" role="presentation" style="${exports.tableCommonStyle} ${tableStyles}">
270
+ <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" role="presentation" style="${exports.tableCommonStyle} ${tableStyles}border-collapse: separate;border-spacing:${columnGap}px;">
271
271
  `;
272
272
  for (let r = 0; r < visualRows; r++) {
273
273
  html += "<tr>";
@@ -284,13 +284,13 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
284
284
  <td
285
285
  width="${widthPercent}%"
286
286
  ${responsive ? 'class="stack-column"' : ""}
287
- style="vertical-align:${verticalAlign}; padding:0; word-break:break-word; ${styles}"
287
+ style="vertical-align:${verticalAlign}; word-break:break-word; ${styles} "
288
288
  >
289
289
  ${childHtml}
290
290
  </td>`;
291
291
  }
292
292
  else {
293
- html += `<td width="${widthPercent}%" ${responsive ? 'class="stack-column"' : ""} style="padding:0;"></td>`;
293
+ html += `<td width="${widthPercent}%" ${responsive ? 'class="stack-column"' : ""} style=""></td>`;
294
294
  }
295
295
  }
296
296
  html += "</tr>";
@@ -359,6 +359,10 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
359
359
  const outerContainerStyles = buildStyles({
360
360
  ...style,
361
361
  width: undefined,
362
+ borderColor: undefined,
363
+ borderRadius: undefined,
364
+ borderWidth: undefined,
365
+ borderStyle: undefined,
362
366
  }, {
363
367
  perChanges: addPxOrPerToAttributes,
364
368
  pxChanges: addPxToAttributes,
@@ -373,78 +377,94 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
373
377
  const vmlLeft = innerContainerWidth / 2 - playIconWidth / 2;
374
378
  const vmlTop = calculatedHeight / 2 - playIconHeight / 2;
375
379
  const videoContent = `
376
- <!--[if mso]>
377
- <v:group xmlns:v="urn:schemas-microsoft-com:vml" coordsize="${innerContainerWidth},${calculatedHeight}"
378
- coordorigin="0,0"
379
- href="${videoLink}"
380
- style="width:${innerContainerWidth}px;height:${calculatedHeight}px;">
381
- <v:rect fill="t" stroked="f" style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px;">
382
- <v:fill src="${resolvedThumbnail}" type="frame"/>
383
- </v:rect>
384
- <v:shape type="#_x0000_t75"
385
- style="position:absolute;
386
- left:${vmlLeft.toFixed(1)}px;
387
- top:${vmlTop.toFixed(1)}px;
388
- width:${playIconWidth}px;
389
- height:${playIconHeight}px;"
390
- alt="Play" href="${videoLink}" title="${altText || "Video"}"
391
- stroked="f" filled="t">
392
- <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
393
- </v:shape>
394
- </v:group>
395
- <![endif]-->
396
-
397
- <!--[if !mso]><!-->
398
- <table
399
- width="${innerContainerWidth}"
400
- cellpadding="0"
401
- cellspacing="0"
402
- border="0"
403
- role="presentation"
404
- style="
405
- background-image: url('${resolvedThumbnail}');
406
- background-size: cover;
407
- background-position: center;
408
-
409
- max-width: ${innerContainerWidth}px;
410
- height: ${calculatedHeight}px;
411
- box-sizing: border-box;
412
- "
413
- align="center"
380
+ <!--[if mso]>
381
+ <v:group xmlns:v="urn:schemas-microsoft-com:vml"
382
+ coordsize="${innerContainerWidth},${calculatedHeight}"
383
+ href="${videoLink}"
384
+ style="width:${innerContainerWidth}px;height:${calculatedHeight}px;">
385
+ <v:rect fill="t" style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px; stroked="t"
386
+ strokeweight="${borderWidth}px"
387
+ strokecolor="${borderColor}"
388
+ ${borderRadius > 0 ? `arcsize="${Math.min(borderRadius / calculatedHeight, 1).toFixed(2)}"` : ""}
414
389
  >
415
- <tr>
416
- <td style="height: ${calculatedHeight}px; padding: 0; text-align: center; vertical-align: middle; border-radius: ${borderRadius}px;
417
- border: ${borderWidth}px solid ${borderColor};" align="center" valign="middle">
418
- <a href="${videoLink}" target="_blank" style="display:inline-block; border: 0; outline: none; text-decoration: none;">
419
- <img
420
- src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png"
421
- width="${playIconWidth}"
422
- alt="Play"
423
- style="display: block; border: 0; outline: none; text-decoration: none; height: auto;"
424
- />
425
- </a>
426
- </td>
427
- </tr>
428
- </table>
429
- <!--<![endif]-->
430
- `;
390
+ <v:fill src="${resolvedThumbnail}" type="frame" color="${style?.backgroundColor || "#FFFFFF"}"/>
391
+ </v:rect>
392
+ <v:shape type="#_x0000_t75"
393
+ style="position:absolute;
394
+ left:${vmlLeft.toFixed(1)}px;
395
+ top:${vmlTop.toFixed(1)}px;
396
+ width:${playIconWidth}px;
397
+ height:${playIconHeight}px;"
398
+ alt="Play" href="${videoLink}" title="${altText || "Video"}"
399
+ stroked="f" filled="t">
400
+ <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
401
+ </v:shape>
402
+ </v:group>
403
+ <![endif]-->
404
+
405
+ <!--[if !mso]><!-->
406
+ <table
407
+ width="${innerContainerWidth}"
408
+ cellpadding="0"
409
+ cellspacing="0"
410
+ border="0"
411
+ role="presentation"
412
+ align="${style?.textAlign || "left"}"
413
+ style="
414
+ max-width: ${innerContainerWidth}px;
415
+ width: 100%;
416
+ height: ${calculatedHeight}px;
417
+ background-color: ${style?.backgroundColor || "#FFFFFF"};
418
+ background-image: url('${resolvedThumbnail}');
419
+ background-size: cover;
420
+ background-position: center;
421
+ background-repeat: no-repeat;
422
+ box-sizing: border-box;
423
+ border: ${borderWidth}px ${style?.borderStyle || "solid"} ${borderColor};
424
+ border-radius: ${borderRadius}px;
425
+ "
426
+ >
427
+ <tr>
428
+ <td style="padding: 0; height: ${calculatedHeight}px; text-align: center; vertical-align: middle;" valign="middle">
429
+ <a href="${videoLink}" target="_blank" style="display:inline-block; border: 0; outline: none; text-decoration: none;">
430
+ <img
431
+ src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png"
432
+ width="${playIconWidth}"
433
+ alt="Play"
434
+ style="display: block;
435
+ border: 0;
436
+ outline: none;
437
+ text-decoration: none;
438
+ height: auto;"
439
+ />
440
+ </a>
441
+ </td>
442
+ </tr>
443
+ </table>
444
+ <!--<![endif]-->
445
+ `;
431
446
  const wrapperHtml = `
432
- <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0; padding:0; border-collapse: collapse;">
433
- <tr>
434
- <td align="center" style="padding:0; ${outerContainerStyles}">
435
- <table border="0" cellpadding="0" cellspacing="0" role="presentation"
436
- align="center"
437
- style="margin:0 auto; max-width:${cellWidthInPx}px; width:${percentWidth}; border-collapse:collapse;">
438
- <tr>
439
- <td align="center" style="text-align:center; padding:0;">
440
- ${videoContent}
441
- </td>
442
- </tr>
443
- </table>
444
- </td>
445
- </tr>
446
- </table>
447
- `;
447
+ <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0; padding:0; border-collapse: collapse;">
448
+ <tr>
449
+ <td align="${style?.textAlign || "left"}" style="padding:0; ${outerContainerStyles}">
450
+ <table border="0" cellpadding="0" cellspacing="0" role="presentation"
451
+ align="${style?.textAlign || "left"}"
452
+ style="
453
+ margin:0;
454
+ max-width:${cellWidthInPx}px;
455
+ width:${percentWidth};
456
+ border-collapse:collapse;
457
+ ">
458
+ <tr>
459
+ <td align="${style?.textAlign || "left"}" style="text-align:${style?.textAlign || "left"}; padding:0;">
460
+ ${videoContent}
461
+ </td>
462
+ </tr>
463
+ </table>
464
+ </td>
465
+ </tr>
466
+ </table>
467
+ `;
448
468
  return wrapperHtml;
449
469
  }
450
470
  // Enhanced Shape Block HTML Conversion using appendOutlookForShape
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "email-builder-utils",
3
- "version": "1.1.24",
3
+ "version": "1.1.26",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "files": [