@useinsider/guido 3.2.0-beta.565bfaf → 3.2.0-beta.570fb6d

package/dist/extensions/Blocks/Recommendation/templates/list/elementRenderer.js

@@ -1,10 +1,10 @@
+import { useRecommendationExtensionStore as p } from "../../store/recommendation.js";
+import { formatPrice as b } from "../../utils/priceFormatter.js";
+import { sanitizeImageUrl as u, CUSTOM_CELL_HTML as m } from "../utils.js";
+import { ATTR_PRODUCT_ATTR as g, ATTR_PRODUCT_BUTTON as i, ATTR_PRODUCT_IMAGE as c, ATTR_PRODUCT_OMNIBUS_DISCOUNT as f, ATTR_PRODUCT_OMNIBUS_PRICE as T, ATTR_PRODUCT_OLD_PRICE as x, ATTR_PRODUCT_PRICE as _, ATTR_PRODUCT_NAME as R } from "../../constants/selectors.js";
 import { RecommendationBlockId as o } from "../../constants/blockIds.js";
-import { ATTR_PRODUCT_ATTR as u, ATTR_PRODUCT_BUTTON as l, ATTR_PRODUCT_IMAGE as d, ATTR_PRODUCT_OMNIBUS_DISCOUNT as m, ATTR_PRODUCT_OMNIBUS_PRICE as g, ATTR_PRODUCT_OLD_PRICE as f, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_NAME as x } from "../../constants/selectors.js";
-import { useRecommendationExtensionStore as _ } from "../../store/recommendation.js";
-import { formatPrice as R } from "../../utils/priceFormatter.js";
-import { sanitizeImageUrl as C, CUSTOM_CELL_HTML as y } from "../utils.js";
-function p() {
-  const t = _(), { currencySettings: e } = t.recommendationConfigs;
+function l() {
+  const t = p(), { currencySettings: e } = t.recommendationConfigs;
   return {
     code: e.value,
     symbol: e.symbol,
@@ -15,29 +15,29 @@ function p() {
   };
 }
 function s(t, e = "price") {
-  const n = p(), r = t[e], a = (r == null ? void 0 : r[n.code]) ?? Object.values(r ?? {})[0] ?? 0;
-  return R({
+  const n = l(), r = t[e], a = r?.[n.code] ?? Object.values(r ?? {})[0] ?? 0;
+  return b({
     price: a,
     currency: n
   });
 }
-const I = {
+const P = {
   /**
    * Image cell - left column (120px fixed width)
    * Has recommendation-attribute-row class and data attributes for Card Composition control
    */
-  [d]: (t) => `
+  [c]: (t) => `
         <td
             width="120"
             class="esd-block-image product-image-cell recommendation-attribute-row es-p5"
             esd-extension-block-id="${o.IMAGE}"
-            data-attribute-type="${d}"
+            data-attribute-type="${c}"
             data-visibility="1"
             align="center"
             valign="middle">
             <a target="_blank" href="${t.url}">
                 <img
-                    src="${C(t.image_url)}"
+                    src="${u(t.image_url)}"
                     alt="${t.name}"
                     style="display: block; max-width: 100%; height: auto;"
                     class="adapt-img product-image">
@@ -47,7 +47,7 @@ const I = {
   /**
    * Name element - row for info cell table
    */
-  [x]: (t) => `
+  [R]: (t) => `
         <tr>
             <td
                 class="esd-block-text product-name"
@@ -62,7 +62,7 @@ const I = {
   /**
    * Price element - row for info cell table
    */
-  [T]: (t) => `
+  [_]: (t) => `
         <tr>
             <td
                 class="esd-block-text product-price"
@@ -77,7 +77,7 @@ const I = {
   /**
    * Old price element - row for info cell table
    */
-  [f]: (t) => `
+  [x]: (t) => `
         <tr>
             <td
                 class="esd-block-text product-old-price"
@@ -94,7 +94,7 @@ const I = {
   /**
    * Omnibus price element - row for info cell table
    */
-  [g]: (t) => `
+  [T]: (t) => `
         <tr>
             <td
                 class="esd-block-text product-omnibus-price"
@@ -113,9 +113,8 @@ const I = {
   /**
    * Omnibus discount element - row for info cell table
    */
-  [m]: (t) => {
-    var i, c;
-    const e = p(), n = ((i = t.original_price) == null ? void 0 : i[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, r = ((c = t.price) == null ? void 0 : c[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, a = n > 0 ? Math.round((n - r) / n * 100) : 0, b = a > 0 ? `-${a}%` : "0%";
+  [f]: (t) => {
+    const e = l(), n = t.original_price?.[e.code] ?? Object.values(t.original_price ?? {})[0] ?? 0, r = t.price?.[e.code] ?? Object.values(t.price ?? {})[0] ?? 0, a = n > 0 ? Math.round((n - r) / n * 100) : 0, d = a > 0 ? `-${a}%` : "0%";
     return `
         <tr>
             <td
@@ -126,7 +125,7 @@ const I = {
                 align="left">
                 <p contenteditable="false" style="font-size: 12px; color: #666666; margin: 0;">
                     <span class="omnibus-text-before"></span>
-                    <span class="omnibus-discount-value">${b}</span>
+                    <span class="omnibus-discount-value">${d}</span>
                     <span class="omnibus-text-after"></span>
                 </p>
             </td>
@@ -137,12 +136,12 @@ const I = {
    * Button cell - right column (100px fixed width)
    * Has recommendation-attribute-row class and data attributes for Card Composition control
    */
-  [l]: (t) => `
+  [i]: (t) => `
         <td
             width="100"
             class="esd-block-button button-cell recommendation-attribute-row product-button es-p5l es-p5r"
             esd-extension-block-id="${o.BUTTON}"
-            data-attribute-type="${l}"
+            data-attribute-type="${i}"
             data-visibility="1"
             align="center"
             valign="middle">
@@ -169,10 +168,10 @@ const I = {
    * @param productAttrValue - Resolved product-attr value (e.g., "brand" for default, "product_attribute.rating_star" for custom)
    * @param content - Display content for the cell
    */
-  [y]: (t, e) => `
+  [m]: (t, e) => `
         <tr>
             <td
-                ${u}="${t}"
+                ${g}="${t}"
                 class="esd-block-text product-custom-attribute"
                 esd-extension-block-id="${o.CUSTOM_ATTRIBUTE}"
                 align="left">
@@ -182,5 +181,5 @@ const I = {
     `
 };
 export {
-  I as listElementRenderer
+  P as listElementRenderer
 };

package/dist/extensions/Blocks/Recommendation/templates/list/template.js

@@ -1,7 +1,7 @@
-import { ATTR_PRODUCT_IMAGE as d, ATTR_PRODUCT_BUTTON as a } from "../../constants/selectors.js";
-import { DEFAULT_CARD_COMPOSITION as m, spacer as C, buildElementRenderer as b, DEFAULT_CARD_VISIBILITY as T } from "../utils.js";
-import { listElementRenderer as R } from "./elementRenderer.js";
-function f(r, n, l) {
+import { DEFAULT_CARD_COMPOSITION as b, spacer as m, buildElementRenderer as C, DEFAULT_CARD_VISIBILITY as T } from "../utils.js";
+import { listElementRenderer as f } from "./elementRenderer.js";
+import { ATTR_PRODUCT_IMAGE as a, ATTR_PRODUCT_BUTTON as d } from "../../constants/selectors.js";
+function R(r, n, l) {
   const t = l ? "" : ' style="display: none;"', o = r.replace(/<tr>/, "").replace(/<\/tr>/, "");
   return `<tr
             class="recommendation-attribute-row"
@@ -26,26 +26,26 @@ const y = `
         </td>
     </tr>
 `;
-function O(r, n = m, l = {}) {
-  const t = b(R, n, l), o = t[d](r), c = `
+function O(r, n = b, l = {}) {
+  const t = C(f, n, l), o = t[a](r), c = `
         <td class="product-info-cell" valign="middle" style="padding: 15px;">
-            <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
+            <table cellpadding="0" cellspacing="0" role="presentation" width="100%" style="table-layout: fixed;">
                 <tbody>
-                    ${n.filter((e) => e !== d && e !== a).filter((e) => t[e]).map((e) => {
+                    ${n.filter((e) => e !== a && e !== d).filter((e) => t[e]).map((e) => {
     const u = T[e] ?? !0;
-    return f(t[e](r), e, u);
+    return R(t[e](r), e, u);
   }).join(`
                     `)}
                 </tbody>
             </table>
         </td>
-    `, s = t[a](r), p = o + c + s;
+    `, s = t[d](r), p = o + c + s;
   return y.replace("{-{-PRODUCT_CONTENT-}-}", p);
 }
 function D(r, n, l = {}) {
   return r.map((t, o) => {
     const i = O(t, n, l);
-    return o > 0 ? C + i : i;
+    return o > 0 ? m + i : i;
   }).join("");
 }
 export {

package/dist/extensions/Blocks/Recommendation/templates/utils.js

@@ -1,60 +1,58 @@
-import { ATTR_PRODUCT_IMAGE as m, ATTR_PRODUCT_NAME as b, ATTR_PRODUCT_OLD_PRICE as T, ATTR_PRODUCT_PRICE as _, ATTR_PRODUCT_OMNIBUS_PRICE as g, ATTR_PRODUCT_OMNIBUS_DISCOUNT as C, ATTR_PRODUCT_BUTTON as f, ATTR_CUSTOM_PREFIX as u } from "../constants/selectors.js";
-function U(t) {
+import { ATTR_PRODUCT_IMAGE as u, ATTR_PRODUCT_NAME as m, ATTR_PRODUCT_OLD_PRICE as b, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_OMNIBUS_PRICE as _, ATTR_PRODUCT_OMNIBUS_DISCOUNT as g, ATTR_PRODUCT_BUTTON as C, ATTR_CUSTOM_PREFIX as p } from "../constants/selectors.js";
+function O(t) {
   return t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase());
 }
-function R(t, e) {
-  const n = Object.values(e).find((r) => r.attributeName === t);
-  return (n == null ? void 0 : n.type) === "defaultAttribute";
+function f(t, e) {
+  return Object.values(e).find((r) => r.attributeName === t)?.type === "defaultAttribute";
 }
-function y(t, e) {
-  return R(t, e) ? t : `product_attribute.${t}`;
+function U(t, e) {
+  return f(t, e) ? t : `product_attribute.${t}`;
 }
-const P = Symbol("customCellHtml");
-function S(t, e, n = {}) {
-  const r = t[P];
+const y = Symbol("customCellHtml");
+function E(t, e, n = {}) {
+  const r = t[y];
   if (!r)
     return { ...t };
   const l = { ...t };
-  return e.filter((o) => o.startsWith(u) && !l[o]).forEach((o) => {
-    const s = o.substring(u.length), a = U(s), D = y(s, n), O = R(s, n);
+  return e.filter((o) => o.startsWith(p) && !l[o]).forEach((o) => {
+    const s = o.substring(p.length), a = O(s), A = U(s, n), D = f(s, n);
     l[o] = (d) => {
-      var p;
-      const i = O ? d[s] : (p = d.product_attributes) == null ? void 0 : p[s];
+      const i = D ? d[s] : d.product_attributes?.[s];
       let c = a;
-      return typeof i == "string" ? c = i : typeof i == "number" && (c = String(i)), r(D, c);
+      return typeof i == "string" ? c = i : typeof i == "number" && (c = String(i)), r(A, c);
     };
   }), l;
 }
-const L = {
+const S = {
   TITLE: "You May Also Like!"
-}, M = [
+}, L = [
+  u,
   m,
   b,
   T,
   _,
   g,
-  C,
-  f
-], $ = {
+  C
+], M = {
+  [u]: !0,
   [m]: !0,
-  [b]: !0,
-  [_]: !0,
   [T]: !0,
+  [b]: !0,
+  [_]: !1,
   [g]: !1,
-  [C]: !1,
-  [f]: !0
-}, h = `
+  [C]: !0
+}, P = `
     <tr>
         <td class="spacer" style="height: 10px;"></td>
     </tr>
-`, A = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png";
-function w(t) {
-  return !t || typeof t != "string" || t.trim() === "" ? A : t.startsWith("http://") ? t.replace("http://", "https://") : t;
+`, R = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png";
+function $(t) {
+  return !t || typeof t != "string" || t.trim() === "" ? R : t.startsWith("http://") ? t.replace("http://", "https://") : t;
 }
-function I(t) {
+function h(t) {
   return {
     name: "Product Name",
-    image_url: A,
+    image_url: R,
     price: { USD: 18 },
     original_price: { USD: 20 },
     discount: { USD: 2 },
@@ -66,13 +64,13 @@ function I(t) {
     category: []
   };
 }
-function N(t = 6) {
+function w(t = 6) {
   return Array.from(
     { length: t },
-    (e, n) => I(String(n + 1))
+    (e, n) => h(String(n + 1))
   );
 }
-function k(t = "grid", e) {
+function N(t = "grid", e) {
   const n = t === "list" ? `
         data-layout="list"` : "", r = e ? ` ${e}` : "";
   return `
@@ -110,7 +108,7 @@ function k(t = "grid", e) {
                                     </table>
                                 </td>
                             </tr>
-                            ${h}
+                            ${P}
                             <tr>
                                 <td>
                                     <table
@@ -149,17 +147,17 @@ function k(t = "grid", e) {
 `;
 }
 export {
-  P as CUSTOM_CELL_HTML,
-  L as DEFAULTS,
-  M as DEFAULT_CARD_COMPOSITION,
-  $ as DEFAULT_CARD_VISIBILITY,
-  A as PLACEHOLDER_IMAGE,
-  S as buildElementRenderer,
-  k as createBlockTemplate,
-  N as getDefaultProducts,
-  R as isDefaultAttribute,
-  y as resolveProductAttrValue,
-  w as sanitizeImageUrl,
-  h as spacer,
-  U as toDisplayName
+  y as CUSTOM_CELL_HTML,
+  S as DEFAULTS,
+  L as DEFAULT_CARD_COMPOSITION,
+  M as DEFAULT_CARD_VISIBILITY,
+  R as PLACEHOLDER_IMAGE,
+  E as buildElementRenderer,
+  N as createBlockTemplate,
+  w as getDefaultProducts,
+  f as isDefaultAttribute,
+  U as resolveProductAttrValue,
+  $ as sanitizeImageUrl,
+  P as spacer,
+  O as toDisplayName
 };

package/dist/extensions/Blocks/Recommendation/utils/filterUtil.js

@@ -1,28 +1,31 @@
 function l(t) {
   if (t.length === 0)
     return "";
-  const o = t.sort((r, e) => r.filterNumber - e.filterNumber), n = o.map((r) => `[${r.attribute}][${r.operator}][${r.value}]`), [p, ...i] = n;
-  let u = p;
-  for (let r = 0; r < i.length; r++) {
+  const o = t.sort((r, e) => r.filterNumber - e.filterNumber), u = o.map((r) => {
+    const e = r.operator === "||", a = e ? "=" : r.operator, c = e ? decodeURIComponent(r.value).split(",").join("||") : r.value;
+    return `[${r.attribute}][${a}][${c}]`;
+  }), [s, ...p] = u;
+  let n = s;
+  for (let r = 0; r < p.length; r++) {
     const e = o[r].innerGroupOperator;
-    u += `${e}${i[r]}`;
+    n += `${e}${p[r]}`;
   }
-  return `(${u})`;
+  return `(${n})`;
 }
-function f(t) {
+function G(t) {
   if (!t || t.length === 0)
     return "";
-  const o = t.reduce((r, e) => (r[e.filterGroup] || (r[e.filterGroup] = []), r[e.filterGroup].push(e), r), {}), n = Object.keys(o).map(Number).sort((r, e) => r - e), p = n.map((r) => {
+  const o = t.reduce((r, e) => (r[e.filterGroup] || (r[e.filterGroup] = []), r[e.filterGroup].push(e), r), {}), u = Object.keys(o).map(Number).sort((r, e) => r - e), s = u.map((r) => {
     const e = o[r];
     return l(e);
-  }), [i, ...u] = p;
-  let s = i;
-  for (let r = 0; r < u.length; r++) {
-    const e = n[r + 1], c = o[e][0].outerGroupOperator;
-    s += `${c}${u[r]}`;
+  }), [p, ...n] = s;
+  let i = p;
+  for (let r = 0; r < n.length; r++) {
+    const e = u[r + 1], c = o[e][0].outerGroupOperator;
+    i += `${c}${n[r]}`;
   }
-  return s.trim();
+  return i.trim();
 }
 export {
-  f as generateCompleteFilterQuery
+  G as generateCompleteFilterQuery
 };

package/dist/extensions/Blocks/Recommendation/validation/filterSchema.js

@@ -1,29 +1,26 @@
-import { safeParse as o, object as p, boolean as l, number as i, pipe as c, minLength as f, string as m } from "../../../../node_modules/valibot/dist/index.js";
-const e = c(m(), f(1)), s = p({
+import { safeParse as i, object as a, boolean as p, number as n, pipe as l, minLength as c, string as f } from "../../../../node_modules/valibot/dist/index.js";
+const e = l(f(), c(1)), o = a({
   type: e,
   attribute: e,
   operator: e,
   innerGroupOperator: e,
   outerGroupOperator: e,
   value: e,
-  filterGroup: i(),
-  filterNumber: i(),
-  isValid: l()
+  filterGroup: n(),
+  filterNumber: n(),
+  isValid: p()
 });
-function g(t) {
-  return o(s, t).success;
+function b(t) {
+  return i(o, t).success;
 }
-function S(t) {
-  const r = o(s, t);
+function g(t) {
+  const r = i(o, t);
   return r.success ? /* @__PURE__ */ new Set() : new Set(
-    r.issues.flatMap((u) => {
-      var n;
-      return ((n = u.path) == null ? void 0 : n.map((a) => String(a.key))) ?? [];
-    })
+    r.issues.flatMap((s) => s.path?.map((u) => String(u.key)) ?? [])
   );
 }
 export {
-  s as FilterSchema,
-  S as getInvalidFilterFields,
-  g as isFilterValid
+  o as FilterSchema,
+  g as getInvalidFilterFields,
+  b as isFilterValid
 };

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, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { getDefaultTemplate as L } from "./template.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 { UNSUBSCRIBE_EVENTS as a, DATA_ATTRIBUTES as o } from "./utils/constants.js";
 import { parsePageList as p } from "./utils/utils.js";
-const v = "unsubscribe-block", g = 'a[data-unsubscribe-link="true"]', f = ".unsubscribe-block-v2", T = "{{ins-unsubscribe-link}}", B = {
+const g = "unsubscribe-block", T = 'a[data-unsubscribe-link="true"]', f = ".unsubscribe-block-v2", B = "{{ins-unsubscribe-link}}", C = {
   [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
   [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
 };
-class R extends _ {
+class I extends _ {
   constructor() {
     super();
     u(this, "selectEventListener", null);
@@ -19,7 +19,7 @@ class R extends _ {
     u(this, "currentNode");
   }
   getId() {
-    return v;
+    return g;
   }
   getIcon() {
     return "unsubscribe-icon";
@@ -34,7 +34,7 @@ class R extends _ {
     return this.api.translate("Unsubscribe Block Description");
   }
   getTemplate() {
-    return L();
+    return v();
   }
   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 R extends _ {
     try {
       if (!this.currentNode)
         return;
-      this.api.getDocumentModifier().modifyHtml(this.currentNode).delete().apply(new b("Removed unsubscribe block due to cancel"));
+      this.api.getDocumentModifier().modifyHtml(this.currentNode).replaceWith(`<${L.EMPTY_CONTAINER}/>`).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 R extends _ {
   _updateBlock(e, r) {
     if (!this.currentNode || !("querySelector" in this.currentNode))
       return;
-    const s = this.currentNode.querySelector(g);
+    const s = this.currentNode.querySelector(T);
     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 B[e] ?? T;
+    return C[e] ?? B;
   }
   _openDrawer() {
     if (!(this.currentNode && this.currentNode.getAttribute("data-unsubscribe-page-type")))
@@ -130,6 +130,6 @@ class R extends _ {
   }
 }
 export {
-  v as UNSUBSCRIBE_BLOCK_ID,
-  R as UnsubscribeBlock
+  g as UNSUBSCRIBE_BLOCK_ID,
+  I as UnsubscribeBlock
 };

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

@@ -47,8 +47,7 @@ class B extends T {
     }), this.valueChangeHandlers = [], this.currentNode = void 0, this.currentPages = void 0, this.currentPreviewIndex = 0, this.lastParsedAttribute = void 0;
   }
   get totalTemplates() {
-    var e;
-    return ((e = this.currentPages) == null ? void 0 : e.length) ?? 0;
+    return this.currentPages?.length ?? 0;
   }
   _listenToFormUpdates() {
     this.valueChangeHandlers.push(
@@ -77,24 +76,23 @@ class B extends T {
     await l().fetchTemplates(), this._updatePreview(), this._updateCounter();
   }
   _updatePreview() {
-    var e;
-    if ((e = this.currentPages) != null && e.length)
+    if (this.currentPages?.length)
       try {
-        const t = this.currentPages[this.currentPreviewIndex], o = l().getThumbnailByTemplateId(t);
+        const e = this.currentPages[this.currentPreviewIndex], o = l().getThumbnailByTemplateId(e);
         if (!o) {
-          console.warn("[UnsubscribeControl] No thumbnail found for page:", t);
+          console.warn("[UnsubscribeControl] No thumbnail found for page:", e);
           return;
         }
         this.api.updateValues({
           [r.PREVIEW_IMAGE]: o
         });
-      } catch (t) {
-        console.error("[UnsubscribeControl] Failed to update preview:", t);
+      } catch (e) {
+        console.error("[UnsubscribeControl] Failed to update preview:", e);
       }
   }
   _updateCounter() {
-    const e = this.currentPreviewIndex + 1, t = this.totalTemplates, c = this.currentPreviewIndex === 0, o = this.currentPreviewIndex >= t - 1;
-    this.api.setUIEAttribute(r.PREV_BUTTON, i.BUTTON.disabled, c), this.api.setUIEAttribute(r.NEXT_BUTTON, i.BUTTON.disabled, o), this.api.setUIEAttribute(
+    const e = this.currentPreviewIndex + 1, t = this.totalTemplates, o = this.currentPreviewIndex === 0, c = this.currentPreviewIndex >= t - 1;
+    this.api.setUIEAttribute(r.PREV_BUTTON, i.BUTTON.disabled, o), this.api.setUIEAttribute(r.NEXT_BUTTON, i.BUTTON.disabled, c), this.api.setUIEAttribute(
       r.COUNTER_TEXT,
       i.LABEL.text,
       `${this.api.translate("Showing")} ${e} ${this.api.translate("of")} ${t}`
@@ -135,14 +133,14 @@ class B extends T {
             </${n.LABEL}>
         `;
   }
-  _getIconButton(e, t, c) {
-    const o = c ? `${i.BUTTON.disabled}="true"` : "";
+  _getIconButton(e, t, o) {
+    const c = o ? `${i.BUTTON.disabled}="true"` : "";
     return `
             <${n.BUTTON}
                 id="${e}"
                 class="flat-inline flat-white"
                 ${i.BUTTON.name}="${e}"
-                ${o}
+                ${c}
             >
                 <${n.ICON}
                     src="${t}"

package/dist/extensions/Blocks/Unsubscribe/elements/preview.js

@@ -1,15 +1,15 @@
-var n = Object.defineProperty;
-var m = (s, i, e) => i in s ? n(s, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[i] = e;
-var r = (s, i, e) => m(s, typeof i != "symbol" ? i + "" : i, e);
-import { UIElement as l } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-const E = "unsubscribe-preview", c = "img", a = "Unsubscribe page preview", g = "is-loaded";
-class d extends l {
+var r = Object.defineProperty;
+var n = (s, e, i) => e in s ? r(s, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[e] = i;
+var t = (s, e, i) => n(s, typeof e != "symbol" ? e + "" : e, i);
+import { UIElement as m } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+const l = "unsubscribe-preview", E = "img", c = "Unsubscribe page preview", a = "is-loaded";
+class u extends m {
   constructor() {
     super(...arguments);
-    r(this, "imgElement");
+    t(this, "imgElement");
   }
   getId() {
-    return E;
+    return l;
   }
   getTemplate() {
     return `
@@ -17,28 +17,26 @@ class d extends l {
                 <div class="unsubscribe-preview-loader"></div>
                 <img
                     src=""
-                    alt="${a}"
+                    alt="${c}"
                     class="unsubscribe-preview-image"
                 />
             </div>
         `;
   }
-  onRender(e) {
-    this.imgElement = e.querySelector(c);
+  onRender(i) {
+    this.imgElement = i.querySelector(E);
   }
-  setValue(e) {
-    var t;
-    this.imgElement && (this.imgElement.src = e, (t = this.imgElement.parentElement) == null || t.classList.add(g));
+  setValue(i) {
+    this.imgElement && (this.imgElement.src = i, this.imgElement.parentElement?.classList.add(a));
   }
   getValue() {
-    var e;
-    return ((e = this.imgElement) == null ? void 0 : e.src) ?? "";
+    return this.imgElement?.src ?? "";
   }
   onDestroy() {
     this.imgElement = void 0;
   }
 }
 export {
-  E as PREVIEW_UI_ELEMENT_ID,
-  d as PreviewUIElement
+  l as PREVIEW_UI_ELEMENT_ID,
+  u as PreviewUIElement
 };