@useinsider/guido 3.2.0-beta.4345b1b → 3.2.0-beta.51460b4

package/dist/composables/useActionsApi.js

@@ -89,11 +89,11 @@ const v = () => {
     updateHtmlAndCss: (t, e) => {
       window.StripoEditorApi.actionsApi.updateHtmlAndCss(t, e);
     },
-    editorSave: () => new Promise((t) => {
-      window.StripoEditorApi.actionsApi.save((e) => {
-        e && n(e, "Failed to save template"), t();
+    editorSave: () => {
+      window.StripoEditorApi.actionsApi.save((t) => {
+        t && n(t, "Failed to save template");
       });
-    })
+    }
   };
 };
 export {

package/dist/composables/useSave.js

@@ -19,7 +19,7 @@ const F = () => {
       return;
     if ((i = a.value) != null && i.externalValidation && !await a.value.externalValidation(t))
       return;
-    await c();
+    c();
     const { unsubscribePayload: f, stripoModules: v } = d(t.rawHtml);
     return await u(f), t.modules = v, m || s(t), t;
   } };

package/dist/config/compiler/recommendationCompilerRules.js

@@ -1,16 +1,16 @@
-import { useRecommendation as C } from "../../composables/useRecommendation.js";
-import { DUMMY_IMAGE_MAPPINGS as h, REGEX as T, VerticalOrientation as M, CSS as E, ATTRIBUTES as A, CONDITIONS as g, HTML as N } from "../../enums/recommendation.js";
+import { useRecommendation as N } from "../../composables/useRecommendation.js";
+import { DUMMY_IMAGE_MAPPINGS as C, REGEX as T, VerticalOrientation as M, CSS as E, ATTRIBUTES as R, CONDITIONS as $, HTML as h } from "../../enums/recommendation.js";
 import { prepareRecommendationBlocks as x } from "./utils/recommendationCompilerUtils.js";
 const w = [
   {
     id: "replace-images-with-variable-names",
     description: "Replacing dummy images with variable names in recommendation module",
     type: "custom",
-    processor: (c) => {
-      let e = c;
-      return Object.entries(h).forEach(([, l]) => {
-        Object.entries(l).forEach(([n, s]) => {
-          e = e.replaceAll(s, `{{${n}}}`);
+    processor: (i) => {
+      let e = i;
+      return Object.entries(C).forEach(([, p]) => {
+        Object.entries(p).forEach(([c, n]) => {
+          e = e.replaceAll(n, `{{${c}}}`);
         });
       }), e;
     },
@@ -29,21 +29,21 @@ const w = [
     id: "add-recommendation-unresponsive-css",
     description: "Adding recommendation unresponsive css",
     type: "custom",
-    processor: (c) => {
-      const { calculateCardWidth: e, getRecommendationCampaignData: l } = C();
-      let n = c;
-      const s = n.match(T.ID);
-      if (s) {
+    processor: (i) => {
+      const { calculateCardWidth: e, getRecommendationCampaignData: p } = N();
+      let c = i;
+      const n = c.match(T.ID);
+      if (n) {
         const a = [];
-        if (s.forEach((i) => {
-          const d = /recommendation-id="(.*?)"/i.exec(i), _ = d ? d[1].trim() : "", R = l(_);
-          R.textTrimming && R.orientation === M && a.push(e(R));
+        if (n.forEach((s) => {
+          const d = /recommendation-id="(.*?)"/i.exec(s), _ = d ? d[1].trim() : "", A = p(_);
+          A.textTrimming && A.orientation === M && a.push(e(A));
         }), a.length) {
-          const i = `width:${Math.min(...a)}px!important;`;
-          n = n.replace(E.REGULAR_NAME_HEIGHT, `${E.TRIMMED_NAME_HEIGHT} ${i} ${E.ELLIPSIS}`).replace(E.REGULAR_NAME_CONTAINER_HEIGHT, E.TRIMMED_NAME_CONTAINER_CSS).replace(E.RESPONSIVE_NAME_SIZE, `${E.RESPONSIVE_NAME_HEIGHT} ${i} ${E.ELLIPSIS}`).replace(E.RESPONSIVE_NAME_CONTAINER_HEIGHT, E.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
+          const s = `width:${Math.min(...a)}px!important;`;
+          c = c.replace(E.REGULAR_NAME_HEIGHT, `${E.TRIMMED_NAME_HEIGHT} ${s} ${E.ELLIPSIS}`).replace(E.REGULAR_NAME_CONTAINER_HEIGHT, E.TRIMMED_NAME_CONTAINER_CSS).replace(E.RESPONSIVE_NAME_SIZE, `${E.RESPONSIVE_NAME_HEIGHT} ${s} ${E.ELLIPSIS}`).replace(E.RESPONSIVE_NAME_CONTAINER_HEIGHT, E.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
         }
       }
-      return n;
+      return c;
     },
     priority: 52
   },
@@ -51,34 +51,34 @@ const w = [
     id: "prepare-recommendations",
     description: "Replacing product data with template variables in recommendation blocks",
     type: "custom",
-    processor: (c) => x(c),
+    processor: (i) => x(i),
     priority: 48
   },
   {
     id: "add-discount-conditions",
     description: "Adding discount conditions to the recommendation block",
     type: "custom",
-    processor: (c) => {
-      let e = c;
-      const l = e.match(T.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: n } = C();
-      return l !== null && l.forEach((s) => {
-        const a = s.match(T.CUSTOM_FIELD);
+    processor: (i) => {
+      let e = i;
+      const p = e.match(T.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: c } = N();
+      return p !== null && p.forEach((n) => {
+        const a = n.match(T.CUSTOM_FIELD);
         if (!a)
           return;
-        const [i] = a, d = i.match(T.CUSTOM_FIELD_INDEXES_PART), _ = i.match(T.CUSTOM_FIELD_NAME_PART), R = s.match(T.ATTRIBUTE_PARAGRAPH_START_TAG);
-        if (!d || !_ || !R)
+        const [s] = a, d = s.match(T.CUSTOM_FIELD_INDEXES_PART), _ = s.match(T.CUSTOM_FIELD_NAME_PART), A = n.match(T.ATTRIBUTE_PARAGRAPH_START_TAG);
+        if (!d || !_ || !A)
           return;
-        const [S] = d, [b] = _, [m] = R, o = b.substring(1, b.length - 2), r = m.match(T.COMPOSITION) !== null;
-        let t = i;
+        const [I] = d, [S] = _, [m] = A, o = S.substring(1, S.length - 2), r = m.match(T.COMPOSITION) !== null;
+        let t = s;
         if (r) {
-          const I = S.substring(2, S.length - 3), p = n(I);
-          o === A.OMNIBUS_PRICE && (p.priceBeforeTextValue && (t = `${p.priceBeforeTextValue}${t}`), p.priceAfterTextValue && (t = `${t}${p.priceAfterTextValue}`)), o === A.OMNIBUS_DISCOUNT && (p.discountBeforeTextValue && (t = `${p.discountBeforeTextValue}${t}`), p.discountAfterTextValue && (t = `${t}${p.discountAfterTextValue}`));
+          const b = I.substring(2, I.length - 3), l = c(b);
+          o === R.OMNIBUS_PRICE && (l.priceBeforeTextValue && (t = `${l.priceBeforeTextValue}${t}`), l.priceAfterTextValue && (t = `${t}${l.priceAfterTextValue}`)), o === R.OMNIBUS_DISCOUNT && (l.discountBeforeTextValue && (t = `${l.discountBeforeTextValue}${t}`), l.discountAfterTextValue && (t = `${t}${l.discountAfterTextValue}`));
         }
-        const u = S.substring(2);
+        const u = I.substring(2);
         let f = "";
-        o in g.IF && (f = g.IF[o].replaceAll(`{${A.DISCOUNT}}`, `${u}${A.DISCOUNT}`).replaceAll(`{${A.OMNIBUS_DISCOUNT}}`, `${u}${A.OMNIBUS_DISCOUNT}`).replaceAll(`{${A.OMNIBUS_PRICE}}`, `${u}${A.OMNIBUS_PRICE}`));
-        const $ = `${m}${t}${N.PARAGRAPH_END_TAG}`, y = `${f}${r ? $ : s}${g.ELSE}${m}${N.PARAGRAPH_END_TAG}${g.END_IF}`;
-        e = e.replace(s, y);
+        o in $.IF && (f = $.IF[o].replaceAll(`{${R.DISCOUNT}}`, `${u}${R.DISCOUNT}`).replaceAll(`{${R.OMNIBUS_DISCOUNT}}`, `${u}${R.OMNIBUS_DISCOUNT}`).replaceAll(`{${R.OMNIBUS_PRICE}}`, `${u}${R.OMNIBUS_PRICE}`));
+        const g = `${m}${t}${h.PARAGRAPH_END_TAG}`, y = `${f}${r ? g : n}${$.ELSE}${m}${h.PARAGRAPH_END_TAG}${$.END_IF}`;
+        e = e.replace(n, y);
       }), e;
     },
     priority: 53
@@ -95,24 +95,19 @@ const w = [
   {
     id: "strip-recommendation-editor-attributes",
     description: "Strip editor-only attributes from compiled recommendation output",
-    type: "custom",
-    // Scoped to REC_START/REC_END markers so it cannot strip `product-attr`
-    // from Items block elements, which the items compiler rule depends on.
-    processor: (c) => {
-      const e = /\s+(?:esd-extension-block-id|data-attribute-type|data-visibility|data-text-before|data-text-after|product-attr|composition)="[^"]*"/g;
-      return c.replace(
-        /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g,
-        (l, n) => `<!--REC_START-->${n.replace(e, "")}<!--REC_END-->`
-      );
-    },
+    type: "regex",
+    // eslint-disable-next-line @stylistic/max-len
+    pattern: '\\s+(?:esd-extension-block-id|data-attribute-type|data-visibility|data-text-before|data-text-after|product-attr|composition)="[^"]*"',
+    replacement: "",
+    flags: "g",
     priority: 55
   },
   {
     id: "strip-unused-recommendation-classes",
     description: "Remove CSS classes not referenced by any style rule from recommendation elements",
     type: "custom",
-    processor: (c) => {
-      let e = c.replace(
+    processor: (i) => {
+      let e = i.replace(
         / class="(?:product-card-segment|attribute-cell|recommendation-attribute-row|product-image|product-name|product-price|product-old-price|product-omnibus-price|product-omnibus-discount|product-button|recommendation-product-row|product-card-wrapper)"/g,
         ""
       );
@@ -124,8 +119,8 @@ const w = [
     id: "remove-empty-mobile-layout-artifacts",
     description: "Remove empty mobile container rows and unused mobile layout CSS",
     type: "custom",
-    processor: (c) => {
-      let e = c;
+    processor: (i) => {
+      let e = i;
       return e = e.replace(
         /<tr[^>]*class="ins-recommendation-mobile-row"[^>]*><\/tr>/g,
         ""
@@ -134,9 +129,9 @@ const w = [
         ""
       ), e = e.replace(
         /@media[^{]*max-width\s*:\s*480px[^{]*\{((?:[^{}]*\{[^{}]*\})*[^{}]*)\}/g,
-        (l, n) => {
-          const s = n.match(/[^{}]+\{[^{}]*\}/g) || [], a = /ins-recommendation|product-image-cell|button-cell|product-info-cell/;
-          return s.every((d) => a.test(d)) ? "" : l;
+        (p, c) => {
+          const n = c.match(/[^{}]+\{[^{}]*\}/g) || [], a = /ins-recommendation|product-image-cell|button-cell|product-info-cell/;
+          return n.every((d) => a.test(d)) ? "" : p;
         }
       )), e;
     },
@@ -146,38 +141,38 @@ const w = [
     id: "deduplicate-inline-styles",
     description: "Replace repeated inline styles with CSS class references within recommendation blocks",
     type: "custom",
-    processor: (c) => {
-      const e = c.replace(
+    processor: (i) => {
+      const e = i.replace(
         /<a\b[^>]*\bes-button\b[^>]*>/g,
         (o) => o.replace(
           /([;"]color:)([^;"]+)/g,
           (r, t, u) => u.includes("!important") ? r : `${t}${u} !important`
         )
-      ), l = /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g, n = / style="([^"]*)"/g, s = /* @__PURE__ */ new Map();
-      let a = l.exec(e);
+      ), p = /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g, c = / style="([^"]*)"/g, n = /* @__PURE__ */ new Map();
+      let a = p.exec(e);
       for (; a !== null; ) {
-        let o = n.exec(a[1]);
+        let o = c.exec(a[1]);
         for (; o !== null; ) {
           const [, r] = o;
-          s.set(r, (s.get(r) || 0) + 1), o = n.exec(a[1]);
+          n.set(r, (n.get(r) || 0) + 1), o = c.exec(a[1]);
         }
-        n.lastIndex = 0, a = l.exec(e);
+        c.lastIndex = 0, a = p.exec(e);
       }
-      const i = /* @__PURE__ */ new Map(), d = [];
+      const s = /* @__PURE__ */ new Map(), d = [];
       let _ = 0;
-      if (s.forEach((o, r) => {
+      if (n.forEach((o, r) => {
         if (o >= 6) {
           const t = `rc${_++}`;
-          i.set(r, t), d.push(`.${t}{${r}}`);
+          s.set(r, t), d.push(`.${t}{${r}}`);
         }
-      }), i.size === 0) {
+      }), s.size === 0) {
         let o = e;
         return o = o.replaceAll("<!--REC_START-->", ""), o = o.replaceAll("<!--REC_END-->", ""), o;
       }
-      const R = (o) => o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), S = (o, r) => `${o.slice(0, -1)} ${r}"`, b = /* @__PURE__ */ new Map();
-      i.forEach((o, r) => {
-        const t = R(r);
-        b.set(r, {
+      const A = (o) => o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), I = (o, r) => `${o.slice(0, -1)} ${r}"`, S = /* @__PURE__ */ new Map();
+      s.forEach((o, r) => {
+        const t = A(r);
+        S.set(r, {
           caseA: new RegExp(`(class="[^"]*")((?:[^>]*?)) style="${t}"`, "g"),
           caseB: new RegExp(` style="${t}"((?:[^>]*?))(class="[^"]*")`, "g")
         });
@@ -187,14 +182,14 @@ const w = [
         /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g,
         (o, r) => {
           let t = r;
-          return i.forEach((u, f) => {
-            const $ = b.get(f);
+          return s.forEach((u, f) => {
+            const g = S.get(f);
             t = t.replace(
-              $.caseA,
-              (y, I, p) => S(I, u) + p
+              g.caseA,
+              (y, b, l) => I(b, u) + l
             ), t = t.replace(
-              $.caseB,
-              (y, I, p) => I + S(p, u)
+              g.caseB,
+              (y, b, l) => b + I(l, u)
             ), t = t.replaceAll(` style="${f}"`, ` class="${u}"`);
           }), t;
         }

package/dist/config/migrator/radioButtonMigrator.js

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

package/dist/extensions/Blocks/Items/controls/price/singlePrice.js

@@ -1,75 +1,75 @@
-import { ModificationDescription as S, UIElementType as d, UEAttr as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as A } from "../../../common-control.js";
-import { ItemsBlockControlId as T, ItemsBlockId as p } from "../../enums/controlEnums.js";
-import { productPairs as R } from "../../enums/productEnums.js";
-import { getItemsBlockConfig as I, setItemsBlockConfig as N, escapeReplacement as h } from "../../utils/nodeConfigUtils.js";
-const u = T.PRICE_SINGLE_PRICE, l = {
+import { ModificationDescription as m, UIElementType as _, UEAttr as A } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as h } from "../../../common-control.js";
+import { ItemsBlockControlId as L, ItemsBlockId as R } from "../../enums/controlEnums.js";
+import { productPairs as T } from "../../enums/productEnums.js";
+import { getItemsBlockConfig as I, setItemsBlockConfig as u, escapeReplacement as N } from "../../utils/nodeConfigUtils.js";
+const D = L.PRICE_SINGLE_PRICE, l = {
   SINGLE_PRICE: "singlePrice"
 };
-class k extends A {
+class y extends h {
   getId() {
-    return u;
+    return D;
   }
   getTemplate() {
     return `
-            <div class="container ${T.PRICE_SINGLE_PRICE}">
+            <div class="container ${L.PRICE_SINGLE_PRICE}">
                 ${this._getSinglePrice()}
             </div>
         `;
   }
   onRender() {
     const e = I(this.currentNode);
-    this.api.updateValues({ [l.SINGLE_PRICE]: (e == null ? void 0 : e.priceSinglePrice) ?? !1 }), this.api.onValueChanged(l.SINGLE_PRICE, (i) => {
-      this._onSinglePriceChange(i);
+    this.api.updateValues({ [l.SINGLE_PRICE]: (e == null ? void 0 : e.priceSinglePrice) ?? !1 }), this.api.onValueChanged(l.SINGLE_PRICE, (t) => {
+      this._onSinglePriceChange(t);
     });
   }
   onTemplateNodeUpdated(e) {
     super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(() => {
-      const i = I(this.currentNode);
-      this.api.updateValues({ [l.SINGLE_PRICE]: (i == null ? void 0 : i.priceSinglePrice) ?? !1 });
+      const t = I(this.currentNode);
+      this.api.updateValues({ [l.SINGLE_PRICE]: (t == null ? void 0 : t.priceSinglePrice) ?? !1 });
     });
   }
   _onSinglePriceChange(e) {
-    if (console.debug("Single price changed to: ", e), !this.currentNode)
+    if (console.debug("Single price changed to: ", e), u(this.currentNode, this.api, { priceSinglePrice: e }), !this.currentNode)
       return;
-    const i = I(this.currentNode), c = (i == null ? void 0 : i.type) ?? "CART_ITEMS", r = (i == null ? void 0 : i.priceFormatted) ?? !1, t = R.PAIRS_FOR_EXTENSION.price[c], n = R.PAIRS_FOR_EXTENSION.originalPrice[c], [E, g] = e ? [
-      r ? t.DEFAULT_PRICE_FORMATTED : t.DEFAULT_PRICE,
-      r ? t.DEFAULT_SINGLE_PRICE_FORMATTED : t.DEFAULT_SINGLE_PRICE
+    const t = I(this.currentNode), o = (t == null ? void 0 : t.type) ?? "CART_ITEMS", r = (t == null ? void 0 : t.priceFormatted) ?? !1, i = T.PAIRS_FOR_EXTENSION.price[o], c = T.PAIRS_FOR_EXTENSION.originalPrice[o], [P, p] = e ? [
+      r ? i.DEFAULT_PRICE_FORMATTED : i.DEFAULT_PRICE,
+      r ? i.DEFAULT_SINGLE_PRICE_FORMATTED : i.DEFAULT_SINGLE_PRICE
     ] : [
-      r ? t.DEFAULT_SINGLE_PRICE_FORMATTED : t.DEFAULT_SINGLE_PRICE,
-      r ? t.DEFAULT_PRICE_FORMATTED : t.DEFAULT_PRICE
-    ], P = r ? n.DEFAULT_PRICE_FORMATTED : n.DEFAULT_PRICE, _ = r ? n.DEFAULT_SINGLE_PRICE_FORMATTED : n.DEFAULT_SINGLE_PRICE, [L, C] = e ? [P, _] : [_, P], s = this.api.getDocumentModifier();
-    N(this.currentNode, this.api, { priceSinglePrice: e }, s);
-    const o = this.currentNode.closest(".items-block");
-    ((o == null ? void 0 : o.querySelectorAll(
-      `[esd-extension-block-id="${p.PRICE}"]`
+      r ? i.DEFAULT_SINGLE_PRICE_FORMATTED : i.DEFAULT_SINGLE_PRICE,
+      r ? i.DEFAULT_PRICE_FORMATTED : i.DEFAULT_PRICE
+    ], s = r ? c.DEFAULT_PRICE_FORMATTED : c.DEFAULT_PRICE, d = r ? c.DEFAULT_SINGLE_PRICE_FORMATTED : c.DEFAULT_SINGLE_PRICE, [g, C] = e ? [s, d] : [d, s], n = this.currentNode.closest(".items-block"), S = (n == null ? void 0 : n.querySelectorAll(
+      `[esd-extension-block-id="${R.PRICE}"]`
+    )) || [], E = this.api.getDocumentModifier();
+    S.forEach((a) => {
+      this._updatePriceBlock(E, a, P, p, e);
+    }), ((n == null ? void 0 : n.querySelectorAll(
+      `[esd-extension-block-id="${R.ORIGINAL_PRICE}"]`
     )) || []).forEach((a) => {
-      this._updatePriceBlock(s, a, E, g, e);
-    }), ((o == null ? void 0 : o.querySelectorAll(
-      `[esd-extension-block-id="${p.ORIGINAL_PRICE}"]`
-    )) || []).forEach((a) => {
-      this._updatePriceBlock(s, a, L, C, e);
-    }), s.apply(new S(
+      this._updatePriceBlock(E, a, g, C, e);
+    }), E.apply(new m(
       `Updated price to ${e ? "single" : "total"} price`
     ));
   }
-  _updatePriceBlock(e, i, c, r, t) {
-    const n = `data-single_price="${t ? "true" : "false"}"`, E = i.getInnerHTML().trim().replace(c, h(r)).replace(/data-single_price=(?:"[^"]*"|'[^']*')/g, n);
-    e.modifyHtml(i).setInnerHtml(E);
+  _updatePriceBlock(e, t, o, r, i) {
+    const c = t.getInnerHTML().trim().replace(o, N(r));
+    e.modifyHtml(t).setInnerHtml(c), t.querySelectorAll('[product-attr="price"], [product-attr="originalPrice"]').forEach((s) => {
+      e.modifyHtml(s).setAttribute("data-single_price", i ? "true" : "false");
+    });
   }
   _getSinglePrice() {
     return `
             <div class="display-flex align-items-center justify-content-between">
-                <${d.LABEL}
-                    ${m.LABEL.text}="${this.api.translate("Show Single Product Price")}"
+                <${_.LABEL}
+                    ${A.LABEL.text}="${this.api.translate("Show Single Product Price")}"
                 >
-                </${d.LABEL}>
+                </${_.LABEL}>
                 ${this._GuToggle(l.SINGLE_PRICE)}
             </div>
         `;
   }
 }
 export {
-  u as CONTROL_BLOCK_ID,
-  k as PriceSinglePriceControl
+  D as CONTROL_BLOCK_ID,
+  y as PriceSinglePriceControl
 };

package/dist/extensions/Blocks/Items/enums/productEnums.js

@@ -1,6 +1,6 @@
 import _ from "../../../../node_modules/lodash-es/flatMap.js";
-import E from "../../../../node_modules/lodash-es/range.js";
-const T = '<td align="center" class="ins-product-td items-block items-block-v2">', a = { PAIRS_FOR_EXTENSION: {
+import a from "../../../../node_modules/lodash-es/range.js";
+const T = '<td align="center" class="ins-product-td items-block items-block-v2">', E = { PAIRS_FOR_EXTENSION: {
   imageSrc: {
     CART_ITEMS: {
       ATTR: "ins_apr_img",
@@ -212,10 +212,10 @@ const T = '<td align="center" class="ins-product-td items-block items-block-v2">
   }
 } };
 function m(e, s = 8) {
-  return E(1, s + 1).map((i) => `${e}_${i}`);
+  return a(1, s + 1).map((i) => `${e}_${i}`);
 }
-function r() {
-  const { PAIRS_FOR_EXTENSION: e } = a, s = [];
+function t() {
+  const { PAIRS_FOR_EXTENSION: e } = E, s = [];
   return s.push(
     e.imageSrc.CART_ITEMS.ATTR,
     e.imageSrc.BROWSED_ITEMS.ATTR,
@@ -234,34 +234,22 @@ function r() {
   ), s.push(
     e.price.CART_ITEMS.PRICE,
     e.price.CART_ITEMS.PRICE_FORMATTED,
-    e.price.CART_ITEMS.SINGLE_PRICE,
-    e.price.CART_ITEMS.SINGLE_PRICE_FORMATTED,
     e.price.CART_ITEMS.CURRENCY,
     e.price.BROWSED_ITEMS.PRICE,
     e.price.BROWSED_ITEMS.PRICE_FORMATTED,
-    e.price.BROWSED_ITEMS.SINGLE_PRICE,
-    e.price.BROWSED_ITEMS.SINGLE_PRICE_FORMATTED,
     e.price.BROWSED_ITEMS.CURRENCY,
     e.price.PURCHASED_ITEMS.PRICE,
     e.price.PURCHASED_ITEMS.PRICE_FORMATTED,
-    e.price.PURCHASED_ITEMS.SINGLE_PRICE,
-    e.price.PURCHASED_ITEMS.SINGLE_PRICE_FORMATTED,
     e.price.PURCHASED_ITEMS.CURRENCY
   ), s.push(
     e.originalPrice.CART_ITEMS.PRICE,
     e.originalPrice.CART_ITEMS.PRICE_FORMATTED,
-    e.originalPrice.CART_ITEMS.SINGLE_PRICE,
-    e.originalPrice.CART_ITEMS.SINGLE_PRICE_FORMATTED,
     e.originalPrice.CART_ITEMS.CURRENCY,
     e.originalPrice.BROWSED_ITEMS.PRICE,
     e.originalPrice.BROWSED_ITEMS.PRICE_FORMATTED,
-    e.originalPrice.BROWSED_ITEMS.SINGLE_PRICE,
-    e.originalPrice.BROWSED_ITEMS.SINGLE_PRICE_FORMATTED,
     e.originalPrice.BROWSED_ITEMS.CURRENCY,
     e.originalPrice.PURCHASED_ITEMS.PRICE,
     e.originalPrice.PURCHASED_ITEMS.PRICE_FORMATTED,
-    e.originalPrice.PURCHASED_ITEMS.SINGLE_PRICE,
-    e.originalPrice.PURCHASED_ITEMS.SINGLE_PRICE_FORMATTED,
     e.originalPrice.PURCHASED_ITEMS.CURRENCY
   ), s.push(
     e.button.CART_ITEMS.HREF,
@@ -274,11 +262,11 @@ function r() {
   ), s;
 }
 const o = _(
-  r(),
+  t(),
   (e) => m(e)
 );
 export {
   o as itemsBlockDynamicVariables,
-  a as productPairs,
+  E as productPairs,
   T as templateFirstLine
 };

package/dist/extensions/Blocks/RadioButton/template.js

@@ -119,7 +119,7 @@ const e = {
                                                         id="radioYes"
                                                         name="unsubscribe"
                                                         data-cke-editable="1"
-                                                        style="margin: 0px; vertical-align: middle;>
+                                                        style="margin: 0px; vertical-align: middle;">
                                                     </td>
                                                 {-{-YES-}-}
                                             </tr>

package/dist/extensions/Blocks/Unsubscribe/block.js

@@ -3,15 +3,15 @@ var h = (n, i, e) => i in n ? d(n, i, { enumerable: !0, configurable: !0, writab
 var u = (n, i, e) => h(n, typeof i != "symbol" ? i + "" : i, e);
 import { PAGE_TYPES as E } from "../../../enums/unsubscribe.js";
 import { useUnsubscribeStore as c } from "../../../stores/unsubscribe.js";
-import { Block as _, BlockCompositionType as S, BlockType as L, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { getDefaultTemplate as v } from "./template.js";
+import { Block as _, BlockCompositionType as S, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { getDefaultTemplate as L } from "./template.js";
 import { UNSUBSCRIBE_EVENTS as a, DATA_ATTRIBUTES as o } from "./utils/constants.js";
 import { parsePageList as p } from "./utils/utils.js";
-const g = "unsubscribe-block", T = 'a[data-unsubscribe-link="true"]', f = ".unsubscribe-block-v2", B = "{{ins-unsubscribe-link}}", C = {
+const v = "unsubscribe-block", g = 'a[data-unsubscribe-link="true"]', f = ".unsubscribe-block-v2", T = "{{ins-unsubscribe-link}}", B = {
   [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
   [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
 };
-class I extends _ {
+class R extends _ {
   constructor() {
     super();
     u(this, "selectEventListener", null);
@@ -19,7 +19,7 @@ class I extends _ {
     u(this, "currentNode");
   }
   getId() {
-    return g;
+    return v;
   }
   getIcon() {
     return "unsubscribe-icon";
@@ -34,7 +34,7 @@ class I extends _ {
     return this.api.translate("Unsubscribe Block Description");
   }
   getTemplate() {
-    return v();
+    return L();
   }
   onSelect(e) {
     this.currentNode = e, !("getAttribute" in e && e.getAttribute("data-migration")) && (this._resetStoreState(), this._loadBlockState(e), this._setupSelectEventListener(), this._setupCancelEventListener(), this._checkExistingBlocks(), this._openDrawer());
@@ -66,7 +66,7 @@ class I extends _ {
     try {
       if (!this.currentNode)
         return;
-      this.api.getDocumentModifier().modifyHtml(this.currentNode).replaceWith(`<${L.EMPTY_CONTAINER}/>`).apply(new b("Removed unsubscribe block due to cancel"));
+      this.api.getDocumentModifier().modifyHtml(this.currentNode).delete().apply(new b("Removed unsubscribe block due to cancel"));
     } catch (e) {
       console.warn("[UnsubscribeBlock] Failed to remove unsubscribe block:", e);
     }
@@ -77,14 +77,14 @@ class I extends _ {
   _updateBlock(e, r) {
     if (!this.currentNode || !("querySelector" in this.currentNode))
       return;
-    const s = this.currentNode.querySelector(T);
+    const s = this.currentNode.querySelector(g);
     if (!s)
       return;
     const t = this._getMergeTag(e);
     this.api.getDocumentModifier().modifyHtml(s).setAttribute("href", t).apply(new b(`Updated unsubscribe link to ${t}`)), this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(o.PAGE_TYPE, e.toString()).setAttribute(o.PAGE_LIST, r).apply(new b("Updated unsubscribe block metadata"));
   }
   _getMergeTag(e) {
-    return C[e] ?? B;
+    return B[e] ?? T;
   }
   _openDrawer() {
     if (!(this.currentNode && this.currentNode.getAttribute("data-unsubscribe-page-type")))
@@ -130,6 +130,6 @@ class I extends _ {
   }
 }
 export {
-  g as UNSUBSCRIBE_BLOCK_ID,
-  I as UnsubscribeBlock
+  v as UNSUBSCRIBE_BLOCK_ID,
+  R as UnsubscribeBlock
 };

package/dist/src/composables/useActionsApi.d.ts

@@ -7,5 +7,5 @@ export declare const useActionsApi: () => {
     getPreviewData: (options?: CompileEmailOptions) => Promise<CompiledEmailResult>;
     updateTimerInClonedTemplate: () => Promise<string | null>;
     updateHtmlAndCss: (html: string, css: string) => void;
-    editorSave: () => Promise<void>;
+    editorSave: () => void;
 };

package/dist/src/extensions/Blocks/RadioButton/template.d.ts

@@ -1,4 +1,4 @@
-declare const migrationTemplate = "\n    <td\n        align=\"left\"\n        esd-extension-block-id=\"radio-button-block\"\n        esd-handler-name=\"esd-extension-RadioButtonBlock\"\n        class=\"\n            radio-button\n            radio-button-v2\n            esd-block-ra\n            esd-radio-button-block\n            esd-extension-block\n            es-p10t\n            es-p10b\n            es-p30r\n            es-p30l\"\n    >\n        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n            <tbody>\n                <tr>\n                    <td align=\"left\" width=\"70%\" style=\"vertical-align: top;\">\n                        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                            <tbody>\n                                <tr>\n                                    {-{-TITLE-}-}\n                                </tr>\n                                <tr>\n                                    {-{-DESCRIPTION-}-}\n                                </tr>\n                            </tbody>\n                        </table>\n                    </td>\n                    <td align=\"right\" width=\"30%\" style=\"vertical-align: middle;\">\n                        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                            <tbody>\n                                <tr>\n                                    <td width=\"50%\">\n                                        <table width=\"100%\">\n                                            <tr>\n                                                <td width=\"24\">\n                                                    <input\n                                                        type=\"radio\"\n                                                        id=\"radioYes\"\n                                                        name=\"unsubscribe\"\n                                                        data-cke-editable=\"1\"\n                                                        style=\"margin: 0px; vertical-align: middle;>\n                                                    </td>\n                                                {-{-YES-}-}\n                                            </tr>\n                                        </table>\n                                    </td>\n                                    <td width=\"50%\">\n                                        <table width=\"100%\">\n                                            <tr>\n                                                <td width=\"24\">\n                                                    <input\n                                                        type=\"radio\"\n                                                        id=\"radioNo\"\n                                                        name=\"unsubscribe\"\n                                                        data-cke-editable=\"1\"\n                                                        style=\"margin: 0px; vertical-align: middle;\">\n                                                </td>\n                                                {-{-NO-}-}\n                                            </tr>\n                                        </table>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </td>\n";
+declare const migrationTemplate = "\n    <td\n        align=\"left\"\n        esd-extension-block-id=\"radio-button-block\"\n        esd-handler-name=\"esd-extension-RadioButtonBlock\"\n        class=\"\n            radio-button\n            radio-button-v2\n            esd-block-ra\n            esd-radio-button-block\n            esd-extension-block\n            es-p10t\n            es-p10b\n            es-p30r\n            es-p30l\"\n    >\n        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n            <tbody>\n                <tr>\n                    <td align=\"left\" width=\"70%\" style=\"vertical-align: top;\">\n                        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                            <tbody>\n                                <tr>\n                                    {-{-TITLE-}-}\n                                </tr>\n                                <tr>\n                                    {-{-DESCRIPTION-}-}\n                                </tr>\n                            </tbody>\n                        </table>\n                    </td>\n                    <td align=\"right\" width=\"30%\" style=\"vertical-align: middle;\">\n                        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                            <tbody>\n                                <tr>\n                                    <td width=\"50%\">\n                                        <table width=\"100%\">\n                                            <tr>\n                                                <td width=\"24\">\n                                                    <input\n                                                        type=\"radio\"\n                                                        id=\"radioYes\"\n                                                        name=\"unsubscribe\"\n                                                        data-cke-editable=\"1\"\n                                                        style=\"margin: 0px; vertical-align: middle;\">\n                                                    </td>\n                                                {-{-YES-}-}\n                                            </tr>\n                                        </table>\n                                    </td>\n                                    <td width=\"50%\">\n                                        <table width=\"100%\">\n                                            <tr>\n                                                <td width=\"24\">\n                                                    <input\n                                                        type=\"radio\"\n                                                        id=\"radioNo\"\n                                                        name=\"unsubscribe\"\n                                                        data-cke-editable=\"1\"\n                                                        style=\"margin: 0px; vertical-align: middle;\">\n                                                </td>\n                                                {-{-NO-}-}\n                                            </tr>\n                                        </table>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </td>\n";
 /**
  * @returns The template for the default checkbox block
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.2.0-beta.4345b1b",
+  "version": "3.2.0-beta.51460b4",
   "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",