@useinsider/guido 3.5.1-beta.ff14e7c → 3.5.1

package/dist/config/migrator/checkboxMigrator.js

@@ -1,85 +1,36 @@
-var x = Object.defineProperty;
-var y = (s, t, e) => t in s ? x(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var m = (s, t, e) => y(s, typeof t != "symbol" ? t + "" : t, e);
-import b from "../../extensions/Blocks/Checkbox/template.js";
-class f {
+var h = Object.defineProperty;
+var g = (r, t, e) => t in r ? h(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var l = (r, t, e) => g(r, typeof t != "symbol" ? t + "" : t, e);
+import f from "../../extensions/Blocks/Checkbox/template.js";
+import { extractTextFromElement as m, buildTextBlock as p } from "./textBlockMigration.js";
+class C {
   constructor() {
-    m(this, "parser");
+    l(this, "parser");
     this.parser = new DOMParser();
   }
   migrate(t) {
     try {
-      const e = this.parser.parseFromString(t, "text/html"), i = e.querySelectorAll("td.checkbox-block");
-      return i.length === 0 ? t : (i.forEach((r) => {
-        if (r.classList.contains("checkbox-block-v2"))
+      const e = this.parser.parseFromString(t, "text/html"), n = e.querySelectorAll("td.checkbox-block");
+      if (n.length === 0)
+        return t;
+      let i = !1;
+      return n.forEach((o) => {
+        if (o.classList.contains("checkbox-block-v2"))
           return;
-        const n = r.getAttribute("id"), l = this.extractTextFromElement(r, "ins-title"), c = this.extractTextFromElement(r, "ins-description"), a = this.buildTextBlock(l), p = this.buildTextBlock(c), g = b.replace("{-{-TITLE-}-}", a).replace("{-{-DESCRIPTION-}-}", p), o = this.parser.parseFromString(
-          `<table id="tempDoc"><tbody><tr>${g}</tr></tbody></table>`,
+        const b = o.getAttribute("id"), s = m(o, "ins-title"), a = m(o, "ins-description"), u = p(s, s.containerClass), x = p(a, a.containerClass), d = f.replace("{-{-TITLE-}-}", u).replace("{-{-DESCRIPTION-}-}", x), c = this.parser.parseFromString(
+          `<table id="tempDoc"><tbody><tr>${d}</tr></tbody></table>`,
           "text/html"
         ).querySelector(".checkbox-block-v2");
-        o && r.parentNode && (o.setAttribute("id", n || ""), r.parentNode.replaceChild(o, r));
-      }), e.documentElement.outerHTML);
+        c && o.parentNode && (c.setAttribute("id", b || ""), o.parentNode.replaceChild(c, o), i = !0);
+      }), i ? e.documentElement.outerHTML : t;
     } catch (e) {
       return console.error("CheckboxMigrator failed:", e), t;
     }
   }
-  extractTextFromElement(t, e) {
-    var o, d;
-    const i = t.querySelector(`.${e}`);
-    if (!i)
-      return {
-        text: e === "ins-title" ? "Title" : "Description",
-        isBold: !1,
-        isItalic: !1,
-        align: "left",
-        styles: ""
-      };
-    const r = i.querySelector("p");
-    if (!r)
-      return {
-        text: ((o = i.textContent) == null ? void 0 : o.trim()) || (e === "ins-title" ? "Title" : "Description"),
-        isBold: !1,
-        isItalic: !1,
-        align: i.getAttribute("align") || "left",
-        styles: ""
-      };
-    const n = ((d = r.textContent) == null ? void 0 : d.trim()) || (e === "ins-title" ? "Title" : "Description"), l = r.getAttribute("style") || "", c = i.getAttribute("align") || r.getAttribute("align") || "left", a = /font-weight\s*:\s*bold/i.test(l) || !!r.querySelector("b, strong"), p = /font-style\s*:\s*italic/i.test(l) || !!r.querySelector("i, em"), g = this.removeStyleProperties(l, ["font-weight", "font-style"]), u = this.convertInlineToBlock(g);
-    return {
-      text: n,
-      isBold: a,
-      isItalic: p,
-      align: c,
-      styles: u
-    };
-  }
-  buildTextBlock(t) {
-    let e = t.text;
-    t.isBold && t.isItalic ? e = `<strong path="1,0"><em path="1,0,0">${e}</em></strong>` : t.isBold ? e = `<strong path="1,0">${e}</strong>` : t.isItalic && (e = `<em path="1,0">${e}</em>`);
-    const i = t.align ? ` align="${t.align}"` : "", r = t.styles ? ` style="${t.styles}"` : "";
-    return `
-            <td class="esd-block-text" ${i}>
-                <p path="1" ${r}>
-                    ${e}
-                </p>
-            </td>
-        `;
-  }
-  removeStyleProperties(t, e) {
-    return t ? e.reduce((r, n) => {
-      const l = new RegExp(`${n}\\s*:\\s*[^;]*;?`, "gi");
-      return r.replace(l, "");
-    }, t).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
-  }
-  convertInlineToBlock(t) {
-    if (!t)
-      return "";
-    let e = t.replace(/display\s*:\s*inline/gi, "display: block");
-    return /display\s*:/i.test(e) || (e = e ? `${e}; display: block` : "display: block"), e.replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim();
-  }
 }
-function k(s) {
-  return new f().migrate(s);
+function E(r) {
+  return new C().migrate(r);
 }
 export {
-  k as migrateCheckbox
+  E as migrateCheckbox
 };

package/dist/config/migrator/radioButtonMigrator.js

@@ -1,109 +1,54 @@
-var x = Object.defineProperty;
-var T = (l, e, t) => e in l ? x(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t;
-var b = (l, e, t) => T(l, typeof e != "symbol" ? e + "" : e, t);
-import S from "../../extensions/Blocks/RadioButton/template.js";
-class B {
+var q = Object.defineProperty;
+var C = (o, t, e) => t in o ? q(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var g = (o, t, e) => C(o, typeof t != "symbol" ? t + "" : t, e);
+import N from "../../extensions/Blocks/RadioButton/template.js";
+import { extractTextFromElement as b, buildTextBlock as f } from "./textBlockMigration.js";
+class R {
   constructor() {
-    b(this, "parser");
+    g(this, "parser");
     this.parser = new DOMParser();
   }
-  migrate(e) {
+  migrate(t) {
     try {
-      const t = this.parser.parseFromString(e, "text/html"), s = t.querySelectorAll("td.radio-button-block"), i = t.querySelectorAll("td.radio-button-v2");
-      if (s.length === 0 && i.length === 0)
-        return e;
-      let o = !1;
-      return s.forEach((r) => {
+      const e = this.parser.parseFromString(t, "text/html"), n = e.querySelectorAll("td.radio-button-block"), a = e.querySelectorAll("td.radio-button-v2");
+      if (n.length === 0 && a.length === 0)
+        return t;
+      let i = !1;
+      return n.forEach((r) => {
         if (r.classList.contains("radio-button-v2"))
           return;
-        const n = r.getAttribute("id"), a = this.extractTextFromElement(r, "ins-title"), g = this.extractTextFromElement(r, "ins-description"), c = this.extractTextFromElement(r, "ins-subscribe"), u = this.extractTextFromElement(r, "ins-unsubscribe"), p = this.buildTextBlock(a), d = this.buildTextBlock(g), y = this.buildTextBlock({ ...c, classList: "" }), f = this.buildTextBlock({ ...u, classList: "" }), h = S.replace("{-{-TITLE-}-}", p).replace("{-{-DESCRIPTION-}-}", d).replace("{-{-YES-}-}", y).replace("{-{-NO-}-}", f), m = this.parser.parseFromString(
-          `<table id="tempDoc"><tbody><tr>${h}</tr></tbody></table>`,
+        const s = r.getAttribute("id"), c = b(r, "ins-title"), d = b(r, "ins-description"), u = b(r, "ins-subscribe"), l = b(r, "ins-unsubscribe"), p = f(c, c.containerClass), m = f(d, d.containerClass), h = f(u), S = f(l), T = N.replace("{-{-TITLE-}-}", p).replace("{-{-DESCRIPTION-}-}", m).replace("{-{-YES-}-}", h).replace("{-{-NO-}-}", S), y = this.parser.parseFromString(
+          `<table id="tempDoc"><tbody><tr>${T}</tr></tbody></table>`,
           "text/html"
         ).querySelector(".radio-button-v2");
-        m && r.parentNode && (m.setAttribute("id", n || ""), r.parentNode.replaceChild(m, r), o = !0);
-      }), o = this.healRadioButtonV2(t) || o, o ? t.documentElement.outerHTML : e;
-    } catch (t) {
-      return console.error("RadioButtonMigrator failed:", t), e;
+        y && r.parentNode && (y.setAttribute("id", s || ""), r.parentNode.replaceChild(y, r), i = !0);
+      }), i = this.healRadioButtonV2(e) || i, i ? e.documentElement.outerHTML : t;
+    } catch (e) {
+      return console.error("RadioButtonMigrator failed:", e), t;
     }
   }
-  healRadioButtonV2(e) {
-    let t = !1;
-    return e.querySelectorAll("td.radio-button-v2").forEach((s) => {
-      var d;
-      s.classList.contains("radio-button-block") || (s.classList.add("radio-button-block"), t = !0);
-      const i = s.querySelector("input#radioYes"), o = s.querySelector("input#radioNo");
-      if (!i || !o)
+  healRadioButtonV2(t) {
+    let e = !1;
+    return t.querySelectorAll("td.radio-button-v2").forEach((n) => {
+      var m;
+      n.classList.contains("radio-button-block") || (n.classList.add("radio-button-block"), e = !0);
+      const a = n.querySelector("input#radioYes"), i = n.querySelector("input#radioNo");
+      if (!a || !i)
         return;
-      const r = ((d = i.parentElement) == null ? void 0 : d.querySelector(":scope > p")) || null;
-      if (!r && !i.hasAttribute("align"))
+      const r = ((m = a.parentElement) == null ? void 0 : m.querySelector(":scope > p")) || null;
+      if (!r && !a.hasAttribute("align"))
         return;
-      const n = i.closest("tr"), a = o.closest("tr");
-      if (!n || !a || n === a || !n.parentNode)
+      const s = a.closest("tr"), c = i.closest("tr");
+      if (!s || !c || s === c || !s.parentNode)
         return;
-      const g = (r == null ? void 0 : r.innerHTML.trim()) || "Yes", c = a.cloneNode(!0), u = c.querySelector("input#radioNo"), p = c.querySelector("p");
-      u && (u.setAttribute("id", "radioYes"), u.removeAttribute("align")), p && (p.innerHTML = g), n.parentNode.replaceChild(c, n), t = !0;
-    }), t;
-  }
-  extractTextFromElement(e, t) {
-    var d, y;
-    const s = e.querySelector(`.${t}`);
-    if (!s)
-      return {
-        text: t === "ins-title" ? "Title" : "Description",
-        isBold: !1,
-        isItalic: !1,
-        align: "left",
-        styles: "",
-        classList: ""
-      };
-    const i = s.querySelector("p");
-    if (!i)
-      return {
-        text: ((d = s.textContent) == null ? void 0 : d.trim()) || (t === "ins-title" ? "Title" : "Description"),
-        isBold: !1,
-        isItalic: !1,
-        align: s.getAttribute("align") || "left",
-        styles: "",
-        classList: ""
-      };
-    const o = ((y = i.textContent) == null ? void 0 : y.trim()) || (t === "ins-title" ? "Title" : "Description"), r = i.getAttribute("style") || "", n = s.getAttribute("align") || i.getAttribute("align") || "left", a = /font-weight\s*:\s*bold/i.test(r) || !!i.querySelector("b, strong"), g = /font-style\s*:\s*italic/i.test(r) || !!i.querySelector("i, em"), c = this.removeStyleProperties(r, ["font-weight", "font-style"]), u = this.convertInlineToBlock(c), p = s.getAttribute("class") || "";
-    return {
-      text: o,
-      isBold: a,
-      isItalic: g,
-      align: n,
-      styles: u,
-      classList: p
-    };
-  }
-  buildTextBlock(e) {
-    let t = e.text;
-    e.isBold && e.isItalic ? t = `<strong path="1,0"><em path="1,0,0">${t}</em></strong>` : e.isBold ? t = `<strong path="1,0">${t}</strong>` : e.isItalic && (t = `<em path="1,0">${t}</em>`);
-    const s = e.align ? ` align="${e.align}"` : "", i = e.styles ? ` style="${e.styles.replaceAll('"', "'")}"` : "";
-    return `
-            <td class="esd-block-text ${e.classList}" ${s}>
-                <p path="1" ${i}>
-                    ${t}
-                </p>
-            </td>
-        `;
-  }
-  removeStyleProperties(e, t) {
-    return e ? t.reduce((i, o) => {
-      const r = new RegExp(`${o}\\s*:\\s*[^;]*;?`, "gi");
-      return i.replace(r, "");
-    }, e).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
-  }
-  convertInlineToBlock(e) {
-    if (!e)
-      return "";
-    let t = e.replace(/display\s*:\s*inline/gi, "display: block");
-    return /display\s*:/i.test(t) || (t = t ? `${t}; display: block` : "display: block"), t.replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim();
+      const d = (r == null ? void 0 : r.innerHTML.trim()) || "Yes", u = c.cloneNode(!0), l = u.querySelector("input#radioNo"), p = u.querySelector("p");
+      l && (l.setAttribute("id", "radioYes"), l.removeAttribute("align")), p && (p.innerHTML = d), s.parentNode.replaceChild(u, s), e = !0;
+    }), e;
   }
 }
-function L(l) {
-  return new B().migrate(l);
+function w(o) {
+  return new R().migrate(o);
 }
 export {
-  L as migrateRadioButton
+  w as migrateRadioButton
 };

package/dist/config/migrator/textBlockMigration.js

@@ -0,0 +1,65 @@
+const I = {
+  "ins-title": "Title",
+  "ins-description": "Description",
+  "ins-subscribe": "Yes",
+  "ins-unsubscribe": "No"
+}, y = /font-weight\s*:\s*[^;]*;?/gi, S = /font-style\s*:\s*[^;]*;?/gi, u = /;\s*;/g, T = /^;|;$/g, d = /display\s*:\s*inline/gi, m = /display\s*:/i, b = /font-weight\s*:\s*bold/i, A = /font-style\s*:\s*italic/i, R = /^<(?:strong|b)\b/i, $ = /^<(?:em|i)\b/i;
+function L(t) {
+  return t ? t.replace(y, "").replace(S, "").replace(u, ";").replace(T, "").trim() : "";
+}
+function O(t) {
+  if (!t)
+    return "";
+  let e = t.replace(d, "display: block");
+  return m.test(e) || (e = e ? `${e}; display: block` : "display: block"), e.replace(u, ";").replace(T, "").trim();
+}
+function B(t, e) {
+  var c, a;
+  const o = I[e], l = t.querySelector(`.${e}`);
+  if (!l)
+    return {
+      paragraphs: [{ innerHtml: o, isBold: !1, isItalic: !1, styles: "" }],
+      align: "left",
+      containerClass: ""
+    };
+  const n = Array.from(l.querySelectorAll("p")), p = l.getAttribute("align") || ((c = n[0]) == null ? void 0 : c.getAttribute("align")) || "left", i = l.getAttribute("class") || "";
+  return n.length === 0 ? {
+    paragraphs: [{
+      innerHtml: ((a = l.textContent) == null ? void 0 : a.trim()) || o,
+      isBold: !1,
+      isItalic: !1,
+      styles: ""
+    }],
+    align: p,
+    containerClass: ""
+  } : { paragraphs: n.map((r) => {
+    const _ = r.getAttribute("style") || "", f = b.test(_) || !!r.querySelector("b, strong"), g = A.test(_) || !!r.querySelector("i, em"), E = L(_);
+    return {
+      // Legacy parity: empty <p> → fallback placeholder; <p><br></p> is not empty.
+      innerHtml: r.innerHTML.trim() || o,
+      isBold: f,
+      isItalic: g,
+      styles: O(E)
+    };
+  }), align: p, containerClass: i };
+}
+function C(t, e = "") {
+  const o = t.align ? ` align="${t.align}"` : "", l = t.paragraphs.map((n, p) => {
+    const i = p + 1;
+    let s = n.innerHtml;
+    const c = n.isBold && !R.test(s), a = n.isItalic && !$.test(s);
+    c && a ? s = `<strong path="${i},0"><em path="${i},0,0">${s}</em></strong>` : c ? s = `<strong path="${i},0">${s}</strong>` : a && (s = `<em path="${i},0">${s}</em>`);
+    const r = n.styles ? ` style="${n.styles.replaceAll('"', "'")}"` : "";
+    return `<p path="${i}"${r}>${s}</p>`;
+  }).join(`
+                    `);
+  return `
+            <td class="esd-block-text ${e}" ${o}>
+                    ${l}
+            </td>
+        `;
+}
+export {
+  C as buildTextBlock,
+  B as extractTextFromElement
+};

package/dist/src/config/migrator/textBlockMigration.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Shared text-block migration helpers used by both `radioButtonMigrator` and
+ * `checkboxMigrator`. Extracts a legacy v1 `.ins-title` / `.ins-description`
+ * cell into a paragraph descriptor and rebuilds it as a v2 `esd-block-text`
+ * cell — preserving every <p>, every inline tag (<u>, <a>, <br>, <strong>,
+ * <em>) and re-encoding bold/italic detection as canonical tags.
+ */
+export type InsCellClass = 'ins-title' | 'ins-description' | 'ins-subscribe' | 'ins-unsubscribe';
+type ParagraphContent = {
+    innerHtml: string;
+    isBold: boolean;
+    isItalic: boolean;
+    styles: string;
+};
+export type TextContent = {
+    paragraphs: ParagraphContent[];
+    align: string;
+};
+export type ExtractedTextContent = TextContent & {
+    containerClass: string;
+};
+export declare function extractTextFromElement(parent: Element, className: InsCellClass): ExtractedTextContent;
+export declare function buildTextBlock(content: TextContent, extraClass?: string): string;
+export {};

package/dist/static/styles/components/wide-panel.css.js

@@ -11,6 +11,11 @@ ue-description a {
     display: none;
 }
 
+/* Override the rule above for the Gmail Promotions switcher docs link — remove with DT-28355. */
+ue-lock-container.e2e-promotions-switcher ue-description a {
+    display: unset;
+}
+
 .label {
     font-size: 13px;
     color: var(--guido-color-gray-800);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.5.1-beta.ff14e7c",
+  "version": "3.5.1",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",