@useinsider/guido 3.5.2-beta.c2f8a2e → 3.6.0-beta.0e98cf4

package/dist/extensions/Blocks/Recommendation/controls/main/index.js

@@ -1,31 +1,31 @@
-var f = Object.defineProperty;
-var p = (d, l, t) => l in d ? f(d, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[l] = t;
-var s = (d, l, t) => p(d, typeof l != "symbol" ? l + "" : l, t);
+var C = Object.defineProperty;
+var p = (d, c, t) => c in d ? C(d, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[c] = t;
+var s = (d, c, t) => p(d, typeof c != "symbol" ? c + "" : c, t);
 import { CommonControl as g } from "../../../common-control.js";
 import { DEFAULT_NODE_CONFIG as a } from "../../constants/defaultConfig.js";
 import { RecommendationConfigService as h } from "../../services/configService.js";
 import { useRecommendationExtensionStore as y } from "../../store/recommendation.js";
-import { AlgorithmControl as R } from "./algorithm.js";
-import { ALGORITHM_CONTROL_ID as J } from "./algorithm.js";
-import { CurrencyControl as N } from "./currency.js";
-import { CURRENCY_CONTROL_ID as X } from "./currency.js";
+import { AlgorithmControl as N } from "./algorithm.js";
+import { ALGORITHM_CONTROL_ID as Q } from "./algorithm.js";
+import { CurrencyControl as R } from "./currency.js";
+import { CURRENCY_CONTROL_ID as Z } from "./currency.js";
 import { FiltersControl as _ } from "./filters.js";
-import { FILTERS_CONTROL_ID as tt } from "./filters.js";
+import { FILTERS_CONTROL_ID as et } from "./filters.js";
 import { LayoutOrientationControl as b } from "./layoutOrientation.js";
-import { LAYOUT_ORIENTATION_CONTROL_ID as ot } from "./layoutOrientation.js";
+import { LAYOUT_ORIENTATION_CONTROL_ID as rt } from "./layoutOrientation.js";
 import { LocaleControl as O } from "./locale.js";
-import { LOCALE_CONTROL_ID as nt } from "./locale.js";
+import { LOCALE_CONTROL_ID as it } from "./locale.js";
 import { ProductCountControl as I } from "./productCount.js";
-import { PRODUCT_COUNT_CONTROL_ID as st } from "./productCount.js";
+import { PRODUCT_COUNT_CONTROL_ID as at } from "./productCount.js";
 import { ProductLayoutControl as T } from "./productLayout.js";
 import { PRODUCT_LAYOUT_CONTROL_ID as lt } from "./productLayout.js";
 import { ShuffleControl as S } from "./shuffle.js";
-import { SHUFFLE_CONTROL_ID as ut } from "./shuffle.js";
-import { getBlockElement as L, updateProductContentInPlace as P, regenerateProductRowsWithStyles as D } from "./utils.js";
-import { adjustProductsToSize as ht, formatProductPrice as mt, getCardComposition as Ct, getCurrentLayout as ft, reapplySpacing as pt, regenerateMobileProductRows as gt, regenerateProductRows as yt, setCurrencyAttributes as Rt, updatePricesInPlace as Nt, updateSingleProductContent as _t } from "./utils.js";
+import { SHUFFLE_CONTROL_ID as dt } from "./shuffle.js";
+import { setCurrencyAttributes as L, getBlockElement as P, updateProductContentInPlace as D, regenerateProductRowsWithStyles as k } from "./utils.js";
+import { adjustProductsToSize as mt, formatProductPrice as ft, getCardComposition as Ct, getCurrentLayout as pt, reapplySpacing as gt, regenerateMobileProductRows as yt, regenerateProductRows as Nt, updatePricesInPlace as Rt, updateSingleProductContent as _t } from "./utils.js";
 import { useDebounceFn as m } from "../../../../../node_modules/@vueuse/shared/index.js";
-const k = "recommendation-id", E = "ui-elements-recommendation-block";
-class H extends g {
+const E = "recommendation-id", v = "ui-elements-recommendation-block";
+class K extends g {
   constructor() {
     super(...arguments);
     s(this, "store", y());
@@ -62,11 +62,11 @@ class H extends g {
       if (!this.currentNode || !this.api)
         return;
       const e = this.api.getDocumentModifier();
-      P({
+      D({
         currentNode: this.currentNode,
         documentModifier: e,
         products: t
-      }) || D({
+      }) || k({
         currentNode: this.currentNode,
         documentModifier: e,
         products: t
@@ -74,10 +74,10 @@ class H extends g {
     }, 100));
   }
   getId() {
-    return E;
+    return v;
   }
   getTemplate() {
-    return this.algorithmControl = new R(), this.localeControl = new O(), this.currencyControl = new N(), this.productCountControl = new I(), this.productLayoutControl = new T(), this.filtersControl = new _(), this.shuffleControl = new S(), this.layoutOrientationControl = new b(), [
+    return this.algorithmControl = new N(), this.localeControl = new O(), this.currencyControl = new R(), this.productCountControl = new I(), this.productLayoutControl = new T(), this.filtersControl = new _(), this.shuffleControl = new S(), this.layoutOrientationControl = new b(), [
       this.algorithmControl,
       this.localeControl,
       this.currencyControl,
@@ -263,7 +263,11 @@ class H extends g {
       this.currentNode,
       e,
       "Applied smart defaults"
-    ), this.store.patchCurrentBlockConfig({
+    ), o && e.currency && L({
+      currentNode: this.currentNode,
+      documentModifier: this.api.getDocumentModifier(),
+      currency: e.currency
+    }), this.store.patchCurrentBlockConfig({
       ...o ? {
         currencySettings: {
           name: o,
@@ -283,10 +287,10 @@ class H extends g {
    * Reads the recommendation-id attribute from the block element within the node
    */
   _getRecommendationIdFromNode(t) {
-    const e = L(t);
+    const e = P(t);
     if (!e || !("getAttribute" in e))
       return null;
-    const o = e.getAttribute(k);
+    const o = e.getAttribute(E);
     if (!o)
       return null;
     const r = parseInt(o);
@@ -316,8 +320,8 @@ class H extends g {
       }
       const i = t.$state.configVersion;
       i !== o && (o = i, this._persistFiltersToNodeConfig(), this._debouncedFetchProducts());
-      const c = t.recommendationProducts, u = c !== e, C = Array.isArray(c) && c.length > 0;
-      u && C && (e = c, this._debouncedRegenerateWithProducts());
+      const l = t.recommendationProducts, u = l !== e, f = Array.isArray(l) && l.length > 0;
+      u && f && (e = l, this._debouncedRegenerateWithProducts());
     });
   }
   /**
@@ -337,35 +341,35 @@ class H extends g {
   }
 }
 export {
-  J as ALGORITHM_CONTROL_ID,
-  R as AlgorithmControl,
-  E as CONTROL_BLOCK_ID,
-  X as CURRENCY_CONTROL_ID,
-  N as CurrencyControl,
-  tt as FILTERS_CONTROL_ID,
+  Q as ALGORITHM_CONTROL_ID,
+  N as AlgorithmControl,
+  v as CONTROL_BLOCK_ID,
+  Z as CURRENCY_CONTROL_ID,
+  R as CurrencyControl,
+  et as FILTERS_CONTROL_ID,
   _ as FiltersControl,
-  ot as LAYOUT_ORIENTATION_CONTROL_ID,
-  nt as LOCALE_CONTROL_ID,
+  rt as LAYOUT_ORIENTATION_CONTROL_ID,
+  it as LOCALE_CONTROL_ID,
   b as LayoutOrientationControl,
   O as LocaleControl,
-  st as PRODUCT_COUNT_CONTROL_ID,
+  at as PRODUCT_COUNT_CONTROL_ID,
   lt as PRODUCT_LAYOUT_CONTROL_ID,
   I as ProductCountControl,
   T as ProductLayoutControl,
-  H as RecommendationBlockControl,
-  ut as SHUFFLE_CONTROL_ID,
+  K as RecommendationBlockControl,
+  dt as SHUFFLE_CONTROL_ID,
   S as ShuffleControl,
-  ht as adjustProductsToSize,
-  mt as formatProductPrice,
-  L as getBlockElement,
+  mt as adjustProductsToSize,
+  ft as formatProductPrice,
+  P as getBlockElement,
   Ct as getCardComposition,
-  ft as getCurrentLayout,
-  pt as reapplySpacing,
-  gt as regenerateMobileProductRows,
-  yt as regenerateProductRows,
-  D as regenerateProductRowsWithStyles,
-  Rt as setCurrencyAttributes,
-  Nt as updatePricesInPlace,
-  P as updateProductContentInPlace,
+  pt as getCurrentLayout,
+  gt as reapplySpacing,
+  yt as regenerateMobileProductRows,
+  Nt as regenerateProductRows,
+  k as regenerateProductRowsWithStyles,
+  L as setCurrencyAttributes,
+  Rt as updatePricesInPlace,
+  D as updateProductContentInPlace,
   _t as updateSingleProductContent
 };

package/dist/extensions/Blocks/Recommendation/controls/main/utils.js

@@ -1,14 +1,14 @@
 import { ModificationDescription as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { RecommendationBlockId as m } from "../../constants/blockIds.js";
-import { MOBILE_CONTAINER_SELECTOR as q, MOBILE_ROW_SELECTOR as k, CURRENCY_ATTR as y, DESKTOP_CONTAINER_SELECTOR as P, CONTAINER_SELECTOR as v, ATTR_PRODUCT_ATTR as W } from "../../constants/selectors.js";
+import { CURRENCY_ATTR as y, MOBILE_CONTAINER_SELECTOR as q, MOBILE_ROW_SELECTOR as k, DESKTOP_CONTAINER_SELECTOR as P, CONTAINER_SELECTOR as v, ATTR_PRODUCT_ATTR as V } from "../../constants/selectors.js";
 import { RecommendationConfigService as E } from "../../services/configService.js";
 import { useRecommendationExtensionStore as C } from "../../store/recommendation.js";
 import { prepareProductRows as _ } from "../../templates/index.js";
-import { formatPrice as j } from "../../utils/priceFormatter.js";
-import { isTdNode as F } from "../../utils/tagName.js";
-import { getDefaultProducts as L, DEFAULT_CARD_COMPOSITION as R, sanitizeImageUrl as V } from "../../templates/utils.js";
+import { formatPrice as W } from "../../utils/priceFormatter.js";
+import { isTdNode as j } from "../../utils/tagName.js";
+import { getDefaultProducts as L, DEFAULT_CARD_COMPOSITION as h, sanitizeImageUrl as F, toDisplayableAttributeValue as G } from "../../templates/utils.js";
 const M = "recommendation-block-v2";
-function h(t) {
+function R(t) {
   if (!t)
     return null;
   if ("getAttribute" in t) {
@@ -19,18 +19,18 @@ function h(t) {
   return "querySelector" in t ? t.querySelector(`.${M}`) ?? null : null;
 }
 function b(t) {
-  const e = h(t);
+  const e = R(t);
   if (!e || !("getAttribute" in e))
     return "grid";
   const o = e.getAttribute("data-layout");
   return o === "list" || o === "horizontal" ? "list" : "grid";
 }
 function x(t) {
-  const e = h(t);
+  const e = R(t);
   if (!e || !("getAttribute" in e))
-    return R;
+    return h;
   const o = e.getAttribute("data-card-composition");
-  return o ? o.split(",").filter(Boolean) : R;
+  return o ? o.split(",").filter(Boolean) : h;
 }
 function D(t) {
   if (!t || !("childNodes" in t))
@@ -47,14 +47,14 @@ function S(t, e, o) {
 function U(t, e) {
   return t && t.length > 0 ? t : e.length > 0 ? e : L();
 }
-function G(t) {
+function Y(t) {
   const { currentNode: e, documentModifier: o } = t;
   if (!e || !("querySelector" in e))
     return;
   const n = e.querySelector(k);
   n && (o.modifyHtml(n).setInnerHtml(""), o.apply(new p("Cleared mobile row content")));
 }
-function Y(t) {
+function K(t) {
   const {
     currentNode: e,
     documentModifier: o,
@@ -66,7 +66,7 @@ function Y(t) {
     return;
   const r = i ?? b(e), s = E.getConfig(e);
   if (r === "list" || !s.mobileLayoutEnabled) {
-    G({ currentNode: e, documentModifier: o });
+    Y({ currentNode: e, documentModifier: o });
     return;
   }
   const u = e.querySelector(k);
@@ -79,7 +79,7 @@ function Y(t) {
   })}</table></td>`;
   o.modifyHtml(u).setInnerHtml(g), o.apply(new p("Updated mobile product rows"));
 }
-function K(t) {
+function X(t) {
   const {
     currentNode: e,
     documentModifier: o,
@@ -98,7 +98,7 @@ function K(t) {
     composition: a,
     filterList: u.filterList
   });
-  o.modifyHtml(s).setInnerHtml(g).apply(new p("Updated product")), Y(t), n == null || n();
+  o.modifyHtml(s).setInnerHtml(g).apply(new p("Updated product")), K(t), n == null || n();
 }
 function T(t, e, o, n) {
   const c = `0 ${Math.floor(o / 2)}px`;
@@ -111,7 +111,7 @@ function T(t, e, o, n) {
     t.querySelectorAll(".product-card-wrapper")
   ).forEach((u) => {
     const l = "parentNode" in u ? u.parentNode : null;
-    l && F(l) && (e.modifyHtml(l).setStyle("padding", c), r = !0);
+    l && j(l) && (e.modifyHtml(l).setStyle("padding", c), r = !0);
   }), r;
 }
 function I(t, e, o) {
@@ -121,7 +121,7 @@ function I(t, e, o) {
     e.modifyHtml(r).setStyle("height", n), c = !0;
   }), c;
 }
-function X(t) {
+function z(t) {
   const { currentNode: e, documentModifier: o } = t;
   if (!e)
     return;
@@ -160,9 +160,9 @@ function X(t) {
   }
   c && o.apply(new p("Reapply spacing after regeneration"));
 }
-function se(t) {
+function ae(t) {
   const { currentNode: e, documentModifier: o, afterRegenerate: n, products: i, layout: c, composition: r } = t;
-  e && K({
+  e && X({
     currentNode: e,
     documentModifier: o,
     products: i,
@@ -170,12 +170,12 @@ function se(t) {
     composition: r,
     afterRegenerate: () => {
       setTimeout(() => {
-        X({ currentNode: e, documentModifier: o });
+        z({ currentNode: e, documentModifier: o });
       }, 0), n == null || n();
     }
   });
 }
-function ae(t, e) {
+function de(t, e) {
   return t.length === e ? t : t.length > e ? t.slice(0, e) : [...t, ...L(e - t.length)];
 }
 function H() {
@@ -191,12 +191,12 @@ function H() {
 }
 function A(t, e = "price") {
   const o = H(), n = t[e], i = (n == null ? void 0 : n[o.code]) ?? Object.values(n ?? {})[0] ?? 0;
-  return j({
+  return W({
     price: i,
     currency: o
   });
 }
-function z(t) {
+function J(t) {
   var c, r;
   const e = H(), o = ((c = t.original_price) == null ? void 0 : c[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, n = ((r = t.price) == null ? void 0 : r[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, i = o > 0 ? Math.round((o - n) / o * 100) : 0;
   return i > 0 ? `-${i}%` : "0%";
@@ -217,12 +217,12 @@ function $(t) {
     S(e, u, l) && (s = !0);
   }
   if (r && "querySelector" in r) {
-    const u = r.querySelector(".omnibus-discount-value") ?? null, l = z(o);
+    const u = r.querySelector(".omnibus-discount-value") ?? null, l = J(o);
     S(e, u, l) && (s = !0);
   }
   return s;
 }
-function J(t) {
+function Q(t) {
   const {
     documentModifier: e,
     product: o,
@@ -237,7 +237,7 @@ function J(t) {
   let d = !1;
   if (n && "querySelector" in n) {
     const a = n.querySelector("img");
-    a && (e.modifyHtml(a).setAttribute("src", V(o.image_url)).setAttribute("alt", o.name), d = !0);
+    a && (e.modifyHtml(a).setAttribute("src", F(o.image_url)).setAttribute("alt", o.name), d = !0);
     const f = n.querySelector("a");
     f && (e.modifyHtml(f).setAttribute("href", o.url), d = !0);
   }
@@ -262,7 +262,7 @@ function B(t) {
   return "querySelector" in t ? t.querySelector(P) ?? t : t;
 }
 const O = "product_attribute.";
-function Q(t, e) {
+function Z(t, e) {
   var n;
   let o;
   if (t.startsWith(O)) {
@@ -270,9 +270,9 @@ function Q(t, e) {
     o = (n = e.product_attributes) == null ? void 0 : n[i];
   } else
     o = e[t];
-  return typeof o == "string" && o.length > 0 ? o : typeof o == "number" ? String(o) : null;
+  return G(o) || null;
 }
-function Z(t, e, o) {
+function ee(t, e, o) {
   if (!("querySelectorAll" in t))
     return !1;
   const n = t.querySelectorAll(
@@ -284,7 +284,7 @@ function Z(t, e, o) {
   n.forEach((r) => {
     if (!("getAttribute" in r))
       return;
-    const s = r.getAttribute(W);
+    const s = r.getAttribute(V);
     if (!s)
       return;
     const u = i.get(s) ?? [];
@@ -296,7 +296,7 @@ function Z(t, e, o) {
     r.slice(0, u).forEach((l, d) => {
       if (!("querySelector" in l))
         return;
-      const a = Q(s, o[d]);
+      const a = Z(s, o[d]);
       if (a === null)
         return;
       const f = l.querySelector("p") ?? null;
@@ -324,7 +324,7 @@ function w(t, e, o) {
   ), d = Math.min(n.length, o.length);
   let a = !1;
   for (let f = 0; f < d; f++) {
-    const g = J({
+    const g = Q({
       documentModifier: e,
       product: o[f],
       imageEl: n[f] ?? null,
@@ -337,9 +337,9 @@ function w(t, e, o) {
     });
     a = a || g;
   }
-  return Z(t, e, o) && (a = !0), a;
+  return ee(t, e, o) && (a = !0), a;
 }
-function de(t) {
+function fe(t) {
   const { currentNode: e, documentModifier: o, products: n } = t;
   if (!e || !("querySelectorAll" in e))
     return !1;
@@ -387,7 +387,7 @@ function N(t, e, o) {
     }) && (u = !0);
   return u;
 }
-function fe(t) {
+function me(t) {
   const { currentNode: e, documentModifier: o } = t;
   if (!e || !("querySelectorAll" in e))
     return !1;
@@ -406,8 +406,8 @@ function fe(t) {
   }
   return r && o.apply(new p("Updated price formatting in-place")), r;
 }
-function me(t) {
-  const { currentNode: e, documentModifier: o, currency: n } = t, i = h(e);
+function pe(t) {
+  const { currentNode: e, documentModifier: o, currency: n } = t, i = R(e);
   if (!i)
     return;
   const c = n.alignment === "before" ? "0" : "1", r = (s, u) => {
@@ -416,17 +416,17 @@ function me(t) {
   r(y.CURRENCY, n.code), r(y.SYMBOL, n.symbol), r(y.ALIGNMENT, c), r(y.THOUSAND_SEPARATOR, n.thousandSeparator), r(y.DECIMAL_SEPARATOR, n.decimalSeparator), r(y.DECIMAL_COUNT, n.decimalCount.toString()), o.apply(new p("Update currency attributes"));
 }
 export {
-  ae as adjustProductsToSize,
+  de as adjustProductsToSize,
   A as formatProductPrice,
-  h as getBlockElement,
+  R as getBlockElement,
   x as getCardComposition,
   b as getCurrentLayout,
-  X as reapplySpacing,
-  Y as regenerateMobileProductRows,
-  K as regenerateProductRows,
-  se as regenerateProductRowsWithStyles,
-  me as setCurrencyAttributes,
-  fe as updatePricesInPlace,
-  de as updateProductContentInPlace,
-  J as updateSingleProductContent
+  z as reapplySpacing,
+  K as regenerateMobileProductRows,
+  X as regenerateProductRows,
+  ae as regenerateProductRowsWithStyles,
+  pe as setCurrencyAttributes,
+  me as updatePricesInPlace,
+  fe as updateProductContentInPlace,
+  Q as updateSingleProductContent
 };

package/dist/extensions/Blocks/Recommendation/store/recommendation.js

@@ -453,7 +453,7 @@ const N = () => ({
         details: !0,
         campaignId: o.variationId
       };
-      r.strategy === "manualMerchandising" ? a.productId = r.productIds.slice(0, s).join(",") : r.strategy === "similarViewed" && (a.productId = "{itemId}"), r.strategy === "userBased" && (a.userId = "{user_id}"), c && (a.filter = c), r.shuffleProducts && (a.shuffle = !0);
+      r.strategy === "manualMerchandising" ? a.productId = r.productIds.join(",") : r.strategy === "similarViewed" && (a.productId = "{itemId}"), r.strategy === "userBased" && (a.userId = "{user_id}"), c && (a.filter = c), r.shuffleProducts && (a.shuffle = !0);
       let f;
       try {
         f = await h.fetchRecommendationProducts(i, a);

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

@@ -1,11 +1,14 @@
-import { RecommendationBlockId as s } from "../../constants/blockIds.js";
-import { ATTR_PRODUCT_ATTR as u, CSS_CLASS_RECO_BUTTON as p, ATTR_PRODUCT_BUTTON as m, ATTR_PRODUCT_OMNIBUS_DISCOUNT as h, ATTR_PRODUCT_OMNIBUS_PRICE as y, ATTR_PRODUCT_OLD_PRICE as T, ATTR_PRODUCT_PRICE as f, ATTR_PRODUCT_NAME as _, ATTR_PRODUCT_IMAGE as x } from "../../constants/selectors.js";
-import { useRecommendationExtensionStore as $ } from "../../store/recommendation.js";
+import { RecommendationBlockId as l } from "../../constants/blockIds.js";
+import { ATTR_PRODUCT_ATTR as u, CSS_CLASS_RECO_BUTTON as p, ATTR_PRODUCT_BUTTON as m, ATTR_PRODUCT_OMNIBUS_DISCOUNT as h, ATTR_PRODUCT_OMNIBUS_PRICE as y, ATTR_PRODUCT_OLD_PRICE as T, ATTR_PRODUCT_PRICE as f, ATTR_PRODUCT_NAME as $, ATTR_PRODUCT_IMAGE as _ } from "../../constants/selectors.js";
+import { useRecommendationExtensionStore as x } from "../../store/recommendation.js";
 import { formatPrice as C } from "../../utils/priceFormatter.js";
 import { CUSTOM_CELL_HTML as R, sanitizeImageUrl as O } from "../utils.js";
-const a = "0 5px", l = "attribute-cell";
+const s = "0 5px", a = "attribute-cell";
+function S(t, e = s) {
+  return `<td class="${a}" style="padding: ${e};" width="${t}%"></td>`;
+}
 function g() {
-  const t = $(), { currencySettings: e } = t.recommendationConfigs;
+  const t = x(), { currencySettings: e } = t.recommendationConfigs;
   return {
     code: e.value,
     symbol: e.symbol,
@@ -22,9 +25,9 @@ function i(t, e = "price") {
     currency: o
   });
 }
-const S = {
-  [x]: (t) => `
-        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
+const A = {
+  [_]: (t) => `
+        <td class="${a}" style="padding: ${s}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -37,7 +40,7 @@ const S = {
                         <td
                             class="esd-block-image product-image"
                             align="center"
-                            esd-extension-block-id="${s.IMAGE}">
+                            esd-extension-block-id="${l.IMAGE}">
                             <a target="_blank" href="${t.url}" class="${p}">
                                 <img
                                     src="${O(t.image_url)}"
@@ -51,8 +54,8 @@ const S = {
             </table>
         </td>
     `,
-  [_]: (t) => `
-        <td class="${l}" style="padding: ${a}; height: 100%;" valign="middle">
+  [$]: (t) => `
+        <td class="${a}" style="padding: ${s}; height: 100%;" valign="middle">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -66,7 +69,7 @@ const S = {
                         <td
                             class="esd-block-text product-name es-p10t es-p10b es-p15l es-p15r"
                             align="center"
-                            esd-extension-block-id="${s.NAME}">
+                            esd-extension-block-id="${l.NAME}">
                             <p contenteditable="false" style="font-size: 16px; color: #333333;">
                                 <strong>${t.name}</strong>
                             </p>
@@ -77,7 +80,7 @@ const S = {
         </td>
     `,
   [f]: (t) => `
-        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
+        <td class="${a}" style="padding: ${s}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -90,7 +93,7 @@ const S = {
                         <td
                             class="esd-block-text product-price es-p15l es-p15r"
                             align="center"
-                            esd-extension-block-id="${s.PRICE}">
+                            esd-extension-block-id="${l.PRICE}">
                             <p contenteditable="false" style="font-size: 16px; color: #333333;">
                                 <strong>${i(t, "price")}</strong>
                             </p>
@@ -101,7 +104,7 @@ const S = {
         </td>
     `,
   [T]: (t) => `
-        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
+        <td class="${a}" style="padding: ${s}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -114,7 +117,7 @@ const S = {
                         <td
                             class="esd-block-text product-old-price es-p15l es-p15r"
                             align="center"
-                            esd-extension-block-id="${s.OLD_PRICE}">
+                            esd-extension-block-id="${l.OLD_PRICE}">
                             <p contenteditable="false" style="font-size: 14px; color: #999999;">
                                 <strong>${i(t, "original_price")}</strong>
                             </p>
@@ -125,7 +128,7 @@ const S = {
         </td>
     `,
   [y]: (t) => `
-        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
+        <td class="${a}" style="padding: ${s}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -140,7 +143,7 @@ const S = {
                             align="center"
                             data-text-before="Lowest 30-day price: "
                             data-text-after=""
-                            esd-extension-block-id="${s.OMNIBUS_PRICE}">
+                            esd-extension-block-id="${l.OMNIBUS_PRICE}">
                             <p contenteditable="false" style="font-size: 12px; color: #666666;">
                                 <span class="omnibus-text-before">Lowest 30-day price: </span>
                                 <span class="omnibus-price-value">${i(t, "original_price")}</span>
@@ -156,7 +159,7 @@ const S = {
     var r, c;
     const e = g(), o = ((r = t.original_price) == null ? void 0 : r[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, n = ((c = t.price) == null ? void 0 : c[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, d = o > 0 ? Math.round((o - n) / o * 100) : 0, b = d > 0 ? `-${d}%` : "0%";
     return `
-        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
+        <td class="${a}" style="padding: ${s}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -171,7 +174,7 @@ const S = {
                             align="center"
                             data-text-before=""
                             data-text-after=""
-                            esd-extension-block-id="${s.OMNIBUS_DISCOUNT}">
+                            esd-extension-block-id="${l.OMNIBUS_DISCOUNT}">
                             <p contenteditable="false" style="font-size: 12px; color: #666666;">
                                 <span class="omnibus-text-before"></span>
                                 <span class="omnibus-discount-value">${b}</span>
@@ -185,7 +188,7 @@ const S = {
     `;
   },
   [m]: () => `
-        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
+        <td class="${a}" style="padding: ${s}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -198,7 +201,7 @@ const S = {
                         <td
                             class="esd-block-button product-button es-p10t es-p10b"
                             align="center"
-                            esd-extension-block-id="${s.BUTTON}">
+                            esd-extension-block-id="${l.BUTTON}">
                             <span
                                 class="es-button-border"
                                 style="
@@ -237,7 +240,7 @@ const S = {
    * @param content - Display content for the cell
    */
   [R]: (t, e) => `
-        <td class="${l}" style="padding: ${a}; height: 100%;" valign="middle">
+        <td class="${a}" style="padding: ${s}; height: 100%;" valign="middle">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -252,7 +255,7 @@ const S = {
                             ${u}="${t}"
                             class="esd-block-text product-custom-attribute es-p0t es-p0b es-p15l es-p15r"
                             align="center"
-                            esd-extension-block-id="${s.CUSTOM_ATTRIBUTE}">
+                            esd-extension-block-id="${l.CUSTOM_ATTRIBUTE}">
                             <p contenteditable="false" style="font-size: 12px; color: #666666;">${e}</p>
                         </td>
                     </tr>
@@ -262,7 +265,8 @@ const S = {
     `
 };
 export {
-  l as ATTRIBUTE_CELL_CLASS,
-  a as DEFAULT_CELL_PADDING,
-  S as gridElementRenderer
+  a as ATTRIBUTE_CELL_CLASS,
+  s as DEFAULT_CELL_PADDING,
+  S as buildFillerCell,
+  A as gridElementRenderer
 };