@useinsider/guido 3.20.1-beta.8a05319 → 3.20.1

package/dist/config/compiler/itemsCompilerRules.js

@@ -1,6 +1,6 @@
 import { pairProductVariables as o } from "../../utils/pairProductVariables.js";
-import { normalizeItemsBlockWidths as r, wrapHiddenPriceTdsForOutlook as e, MSO_ITEMS_HIDE_START as t, MSO_ITEMS_HIDE_END as s } from "./utils/itemsCompilerUtils.js";
-const d = [
+import { normalizeItemsBlockWidths as r, wrapHiddenPriceTdsForOutlook as t, lockHorizontalItemImageWidths as e, MSO_ITEMS_HIDE_START as s, MSO_ITEMS_HIDE_END as p } from "./utils/itemsCompilerUtils.js";
+const c = [
   {
     id: "normalize-items-block-widths",
     // Runs before the other items rules so they see non-zero widths; not AMP-safe.
@@ -25,20 +25,27 @@ const d = [
     // with safe placeholder comments and collapse them inline for web-engine Outlook.
     description: "Mark hidden Items price tds for Outlook conditional hiding",
     type: "custom",
-    processor: e,
+    processor: t,
     priority: 65
     // After pair-product-variables (60), before outlook rules (70+)
   },
+  {
+    id: "lock-horizontal-item-image-widths",
+    description: "Pin horizontal Items thumbnails to their width so narrow rows cannot collapse them",
+    type: "custom",
+    processor: e,
+    priority: 66
+  },
   {
     id: "swap-items-mso-markers",
     // Injecting the delicate `<!-- -->` ghost token LAST (after reco minify P99
     // and reco swap P100) keeps it out of every whitespace/comment-mangling pass.
     description: "Swap Items MSO markers into [if !mso] conditional comments",
     type: "custom",
-    processor: (i) => i.replaceAll(`<!--${t}-->`, "<!--[if !mso]><!-- -->").replaceAll(`<!--${s}-->`, "<!--<![endif]-->"),
+    processor: (i) => i.replaceAll(`<!--${s}-->`, "<!--[if !mso]><!-- -->").replaceAll(`<!--${p}-->`, "<!--<![endif]-->"),
     priority: 101
   }
 ];
 export {
-  d as itemsCompilerRules
+  c as itemsCompilerRules
 };

package/dist/config/compiler/utils/itemsCompilerUtils.js

@@ -1,55 +1,75 @@
-import { PRODUCT_WRAPPER_SELECTOR as A, hasZeroWidthDeclaration as E, isZeroWidthValue as u, withWidthPin as h, PRODUCT_TD_SELECTOR as S, withoutZeroWidth as _ } from "../../../extensions/Blocks/Items/constants/cardWidth.js";
-import { protectLiquid as m, restoreLiquid as y } from "../../../utils/liquidProtection.js";
-const f = "MSO_ITEMS_HIDE_START", D = "MSO_ITEMS_HIDE_END", T = "mso-hide:all; max-height:0; overflow:hidden; font-size:0; line-height:0;", M = ".ins-product-cart td.horizontal-price, .ins-product-cart td.vertical-price";
-function g(e) {
-  if (!e.includes("vertical-price") || !e.includes("ins-product-cart"))
-    return e;
-  const n = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), r = new DOMParser().parseFromString(n, "text/html");
-  let s = !1;
-  if (r.querySelectorAll(M).forEach((t) => {
-    var d, a;
-    const o = t.getAttribute("style") || "";
-    if (!/display\s*:\s*none/i.test(o))
+import { PRODUCT_WRAPPER_SELECTOR as h, hasZeroWidthDeclaration as E, isZeroWidthValue as f, withWidthPin as T, PRODUCT_TD_SELECTOR as _, withoutZeroWidth as y } from "../../../extensions/Blocks/Items/constants/cardWidth.js";
+import { DefaultConfigValues as D } from "../../../extensions/Blocks/Items/enums/settingsEnums.js";
+import { protectLiquid as p, restoreLiquid as A } from "../../../utils/liquidProtection.js";
+const m = "MSO_ITEMS_HIDE_START", S = "MSO_ITEMS_HIDE_END", M = "mso-hide:all; max-height:0; overflow:hidden; font-size:0; line-height:0;", I = ".ins-product-cart td.horizontal-price, .ins-product-cart td.vertical-price", O = ".ins-product-td td.product-image-class img[width]", g = Number(D.productImageWidth);
+function C(t) {
+  if (!t.includes("vertical-price") || !t.includes("ins-product-cart"))
+    return t;
+  const s = t.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), o = new DOMParser().parseFromString(s, "text/html");
+  let n = !1;
+  if (o.querySelectorAll(I).forEach((e) => {
+    var d, u;
+    const r = e.getAttribute("style") || "";
+    if (!/display\s*:\s*none/i.test(r))
       return;
-    const l = t.previousSibling;
-    if (((l == null ? void 0 : l.nodeType) !== Node.COMMENT_NODE || l.data !== f) && ((d = t.parentNode) == null || d.insertBefore(r.createComment(f), t), (a = t.parentNode) == null || a.insertBefore(r.createComment(D), t.nextSibling)), !/mso-hide/i.test(o)) {
-      const p = o.trim().endsWith(";") ? " " : "; ";
-      t.setAttribute("style", `${o}${p}${T}`);
+    const l = e.previousSibling;
+    if (((l == null ? void 0 : l.nodeType) !== Node.COMMENT_NODE || l.data !== m) && ((d = e.parentNode) == null || d.insertBefore(o.createComment(m), e), (u = e.parentNode) == null || u.insertBefore(o.createComment(S), e.nextSibling)), !/mso-hide/i.test(r)) {
+      const a = r.trim().endsWith(";") ? " " : "; ";
+      e.setAttribute("style", `${r}${a}${M}`);
     }
-    s = !0;
-  }), !s)
-    return e;
-  const c = n.match(/<!DOCTYPE[^>]*>/i);
+    n = !0;
+  }), !n)
+    return t;
+  const c = s.match(/<!DOCTYPE[^>]*>/i);
   return ((c ? `${c[0]}
-` : "") + r.documentElement.outerHTML).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
+` : "") + o.documentElement.outerHTML).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
-function I(e) {
-  if (!e.includes("ins-product-wrapper") && !e.includes("ins-product-td"))
-    return e;
-  const n = new DOMParser().parseFromString(m(e), "text/html");
-  let r = !1;
-  if (n.querySelectorAll(A).forEach((i) => {
-    const t = i.getAttribute("style") || "";
-    if (!E(t) && !u(i.getAttribute("width")))
+function N(t) {
+  if (!t.includes("ins-product-wrapper") && !t.includes("ins-product-td"))
+    return t;
+  const s = new DOMParser().parseFromString(p(t), "text/html");
+  let o = !1;
+  if (s.querySelectorAll(h).forEach((i) => {
+    const e = i.getAttribute("style") || "";
+    if (!E(e) && !f(i.getAttribute("width")))
       return;
-    const o = h(t);
-    o !== t && (i.setAttribute("style", o), r = !0), u(i.getAttribute("width")) && (i.setAttribute("width", "100%"), r = !0);
-  }), n.querySelectorAll(S).forEach((i) => {
-    const t = i.getAttribute("style") || "";
-    if (E(t)) {
-      const o = _(t);
-      o ? i.setAttribute("style", o) : i.removeAttribute("style"), r = !0;
+    const r = T(e);
+    r !== e && (i.setAttribute("style", r), o = !0), f(i.getAttribute("width")) && (i.setAttribute("width", "100%"), o = !0);
+  }), s.querySelectorAll(_).forEach((i) => {
+    const e = i.getAttribute("style") || "";
+    if (E(e)) {
+      const r = y(e);
+      r ? i.setAttribute("style", r) : i.removeAttribute("style"), o = !0;
     }
-    u(i.getAttribute("width")) && (i.removeAttribute("width"), r = !0);
-  }), !r)
-    return e;
-  const s = e.match(/<!DOCTYPE[^>]*>/i), c = s ? `${s[0]}
+    f(i.getAttribute("width")) && (i.removeAttribute("width"), o = !0);
+  }), !o)
+    return t;
+  const n = t.match(/<!DOCTYPE[^>]*>/i), c = n ? `${n[0]}
 ` : "";
-  return y(c + n.documentElement.outerHTML);
+  return A(c + s.documentElement.outerHTML);
+}
+function L(t) {
+  if (!t.includes("product-image-class"))
+    return t;
+  const s = new DOMParser().parseFromString(p(t), "text/html");
+  let o = !1;
+  if (s.querySelectorAll(O).forEach((i) => {
+    var u, a;
+    const e = ((u = i.getAttribute("width")) == null ? void 0 : u.trim()) ?? "", r = ((a = i.getAttribute("style")) == null ? void 0 : a.trim()) ?? "";
+    if (!/^\d+$/.test(e) || /(^|;)\s*min-width\s*:/i.test(r))
+      return;
+    const l = r && !r.endsWith(";") ? ";" : "", d = Math.min(Number(e), g);
+    i.setAttribute("style", `${r}${l}min-width:${d}px;max-width:${e}px`), o = !0;
+  }), !o)
+    return t;
+  const n = t.match(/<!DOCTYPE[^>]*>/i), c = n ? `${n[0]}
+` : "";
+  return A(c + s.documentElement.outerHTML);
 }
 export {
-  D as MSO_ITEMS_HIDE_END,
-  f as MSO_ITEMS_HIDE_START,
-  I as normalizeItemsBlockWidths,
-  g as wrapHiddenPriceTdsForOutlook
+  S as MSO_ITEMS_HIDE_END,
+  m as MSO_ITEMS_HIDE_START,
+  L as lockHorizontalItemImageWidths,
+  N as normalizeItemsBlockWidths,
+  C as wrapHiddenPriceTdsForOutlook
 };

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

@@ -1,42 +1,42 @@
 var at = Object.defineProperty;
-var ct = (h, p, t) => p in h ? at(h, p, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[p] = t;
-var $ = (h, p, t) => ct(h, typeof p != "symbol" ? p + "" : p, t);
+var ct = (_, g, t) => g in _ ? at(_, g, { enumerable: !0, configurable: !0, writable: !0, value: t }) : _[g] = t;
+var v = (_, g, t) => ct(_, typeof g != "symbol" ? g + "" : g, t);
 import { ACADEMY_LINKS as dt } from "../../../../../enums/academy.js";
-import { UIElementType as _, UEAttr as O, ModificationDescription as y } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { UIElementType as f, UEAttr as O, ModificationDescription as y } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as ut } from "../../../common-control.js";
-import { ATTR_PRODUCT_IMAGE as q, ATTR_PRODUCT_NAME as mt, ATTR_PRODUCT_PRICE as C, ATTR_PRODUCT_OLD_PRICE as L, ATTR_PRODUCT_OMNIBUS_PRICE as ht, ATTR_PRODUCT_OMNIBUS_DISCOUNT as pt, ATTR_PRODUCT_BUTTON as x, ATTR_RECOMMENDATION_TITLE as I, ATTR_DATA_CARD_COMPOSITION as K, ATTR_DATA_CUSTOM_ATTRIBUTES as W, ATTR_CUSTOM_PREFIX as v, SELECTOR_ATTRIBUTE_ROW as N, SELECTOR_TITLE_CELL as z, ATTR_DATA_VISIBILITY as D, ATTR_DATA_ATTRIBUTE_TYPE as E, CSS_CLASS_ATTRIBUTE_ROW as G, CSS_CLASS_SPACER as _t, BUILT_IN_DEFAULT_ATTRIBUTES as gt } from "../../constants/selectors.js";
+import { ATTR_PRODUCT_IMAGE as q, ATTR_PRODUCT_NAME as mt, ATTR_PRODUCT_PRICE as p, ATTR_PRODUCT_OLD_PRICE as I, ATTR_PRODUCT_OMNIBUS_PRICE as ht, ATTR_PRODUCT_OMNIBUS_DISCOUNT as pt, ATTR_PRODUCT_BUTTON as F, ATTR_RECOMMENDATION_TITLE as $, ATTR_DATA_CARD_COMPOSITION as K, ATTR_DATA_CUSTOM_ATTRIBUTES as W, ATTR_CUSTOM_PREFIX as N, SELECTOR_ATTRIBUTE_ROW as E, SELECTOR_TITLE_CELL as z, ATTR_DATA_VISIBILITY as D, ATTR_DATA_ATTRIBUTE_TYPE as R, CSS_CLASS_ATTRIBUTE_ROW as G, CSS_CLASS_SPACER as _t, BUILT_IN_DEFAULT_ATTRIBUTES as gt } from "../../constants/selectors.js";
 import { DEFAULT_COMPOSITION as Y, DEFAULT_VISIBILITY as X } from "../../constants/defaultConfig.js";
-import { RecommendationConfigService as g } from "../../services/configService.js";
+import { RecommendationConfigService as T } from "../../services/configService.js";
 import { useRecommendationExtensionStore as ft } from "../../store/recommendation.js";
 import { ATTRIBUTE_CELL_CLASS as bt, gridElementRenderer as yt, DEFAULT_CELL_PADDING as Tt, buildFillerCell as Ct } from "../../templates/grid/elementRenderer.js";
 import { listElementRenderer as St } from "../../templates/list/elementRenderer.js";
 import { buildTitleRows as At, DEFAULT_TITLE_PARAGRAPH as It, DEFAULT_TITLE_TEXT as $t } from "../../templates/titleRows.js";
 import { resolveInlinePriceOrder as vt, toDisplayName as Nt, toDisplayableAttributeValue as Et, buildElementRenderer as J } from "../../templates/utils.js";
-import { normalizeCompositionKeys as Rt, normalizeCustomAttrValues as Lt, compositionKeyToProductAttr as k, resolveRowCompositionKey as Ot, filterToProductAttrValue as T, findAttributeRow as Dt, rewriteLegacyRowKeyHtml as Q, bareAttributeName as H, isDefaultProductAttr as Ht, productAttrToCompositionKey as M } from "../../utils/compositionKeys.js";
+import { normalizeCompositionKeys as Rt, normalizeCustomAttrValues as Lt, compositionKeyToProductAttr as k, resolveRowVisibilityKeys as Ot, filterToProductAttrValue as C, findAttributeRow as Dt, rewriteLegacyRowKeyHtml as Q, bareAttributeName as H, isDefaultProductAttr as Ht, productAttrToCompositionKey as M } from "../../utils/compositionKeys.js";
 import { getTableDisplayValue as Pt } from "../../utils/tagName.js";
 import { isPartnerManagedBlock as wt, regenerateProductRowsWithStyles as Bt, getMainContainerTbody as kt, getCurrentLayout as Mt } from "../main/utils.js";
 const Ut = "ui-elements-recommendation-card-composition", U = ".product-card-wrapper > tbody", Z = ".product-info-cell > table > tbody", tt = {
   ADD_ATTRIBUTE: "addAttribute"
-}, f = 5, P = "reorderIcon_", qt = '<svg width="14" height="10" viewBox="0 0 14 10" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2.5" r="1.2"/><circle cx="7" cy="2.5" r="1.2"/><circle cx="12" cy="2.5" r="1.2"/><circle cx="2" cy="7.5" r="1.2"/><circle cx="7" cy="7.5" r="1.2"/><circle cx="12" cy="7.5" r="1.2"/></svg>', m = [
+}, b = 5, P = "reorderIcon_", qt = '<svg width="14" height="10" viewBox="0 0 14 10" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2.5" r="1.2"/><circle cx="7" cy="2.5" r="1.2"/><circle cx="12" cy="2.5" r="1.2"/><circle cx="2" cy="7.5" r="1.2"/><circle cx="7" cy="7.5" r="1.2"/><circle cx="12" cy="7.5" r="1.2"/></svg>', m = [
   { key: q, label: "Product Image" },
   { key: mt, label: "Product Name" },
-  { key: C, label: "Product Price" },
-  { key: L, label: "Product Original Price" },
+  { key: p, label: "Product Price" },
+  { key: I, label: "Product Original Price" },
   { key: ht, label: "Omnibus Price" },
   { key: pt, label: "Omnibus Discount" },
-  { key: x, label: "Product Button" }
-], R = { key: I, label: "Title" }, xt = new Set(m.map((h) => h.key)), A = "customAttr_", w = "deleteAttr_";
+  { key: F, label: "Product Button" }
+], L = { key: $, label: "Title" }, Ft = new Set(m.map((_) => _.key)), A = "customAttr_", w = "deleteAttr_";
 class se extends ut {
   constructor() {
     super(...arguments);
-    $(this, "store", ft());
-    $(this, "unsubscribeStore", null);
-    $(this, "eventController", null);
+    v(this, "store", ft());
+    v(this, "unsubscribeStore", null);
+    v(this, "eventController", null);
     /**
      * Guard flag: when true, onTemplateNodeUpdated skips _initializeComposition.
      * Used during _onReorder to prevent multiple intermediate rebuilds.
      */
-    $(this, "reorderInProgress", !1);
+    v(this, "reorderInProgress", !1);
   }
   getId() {
     return Ut;
@@ -50,7 +50,7 @@ class se extends ut {
                 ${this._GuToggle(`visibility_${d.key}`)}
             </div>
         `).join(""), e = Array.from(
-      { length: f },
+      { length: b },
       (d, c) => `
                 <div data-custom-select-key="${A}${c}" style="display: none;">
                     ${this._GuSelect({
@@ -62,34 +62,34 @@ class se extends ut {
       })}
                 </div>
             `
-    ).join(""), r = m.length + f, i = Array.from(
+    ).join(""), r = m.length + b, i = Array.from(
       { length: r },
       (d, c) => `
                 <div data-reorder-icon-key="${P}${c}" style="display: none;">
-                    <${_.BUTTON}
+                    <${f.BUTTON}
                         class="guido-drag-handle-btn flat-inline flat-white"
                         ${O.BUTTON.name}="${P}${c}"
                     >
-                        <${_.ICON}
+                        <${f.ICON}
                             src="reorder"
                             class="icon-button"
-                        ></${_.ICON}>
-                    </${_.BUTTON}>
+                        ></${f.ICON}>
+                    </${f.BUTTON}>
                 </div>
             `
     ).join(""), s = Array.from(
-      { length: f },
+      { length: b },
       (d, c) => `
                 <div data-custom-delete-key="${w}${c}" style="display: none;">
-                    <${_.BUTTON}
+                    <${f.BUTTON}
                         class="custom-attr-delete flat-inline flat-white"
                         ${O.BUTTON.name}="${w}${c}"
                     >
-                        <${_.ICON}
+                        <${f.ICON}
                             src="delete"
                             class="icon-button"
-                        ></${_.ICON}>
-                    </${_.BUTTON}>
+                        ></${f.ICON}>
+                    </${f.BUTTON}>
                 </div>
             `
     ).join(""), o = dt.EMAIL_RECOMMENDATION_BLOCK, n = this.api.translate(
@@ -123,10 +123,10 @@ class se extends ut {
                 </div>
 
                 <div class="orderable-list">
-                    <div class="orderable-item title-item" data-key="${R.key}">
-                        <span class="item-label">${this.api.translate(R.label)}</span>
+                    <div class="orderable-item title-item" data-key="${L.key}">
+                        <span class="item-label">${this.api.translate(L.label)}</span>
                         <div class="item-action">
-                            ${this._GuToggle(`visibility_${R.key}`)}
+                            ${this._GuToggle(`visibility_${L.key}`)}
                         </div>
                     </div>
                 </div>
@@ -172,12 +172,12 @@ class se extends ut {
     this.api.updateValues(s), i && this._initializeCustomSelects(e), this._updateAddButtonState();
   }
   _registerValueChangeListeners() {
-    [R, ...m].forEach((t) => {
+    [L, ...m].forEach((t) => {
       this.api.onValueChanged(`visibility_${t.key}`, (e) => {
         this._applyVisibilityToBlock(t.key, e);
       });
     });
-    for (let t = 0; t < f; t++) {
+    for (let t = 0; t < b; t++) {
       const e = `${A}${t}`, r = t;
       this.api.onValueChanged(e, (i) => {
         this._onCustomAttributeChanged(r, i);
@@ -193,7 +193,7 @@ class se extends ut {
     const t = this.currentNode.getAttribute(K);
     if (t)
       return this._normalizeComposition(t.split(",").filter(Boolean));
-    const { composition: e } = g.getConfig(this.currentNode);
+    const { composition: e } = T.getConfig(this.currentNode);
     return e != null && e.length ? this._normalizeComposition([...e]) : [...Y];
   }
   /** Upgrades legacy bare-name custom keys to the canonical form. (SD-147101) */
@@ -214,19 +214,19 @@ class se extends ut {
       } catch {
         return [];
       }
-    return this._readCompositionFromNode().filter((e) => e.startsWith(v)).map(k);
+    return this._readCompositionFromNode().filter((e) => e.startsWith(N)).map(k);
   }
   _readVisibilityFromRows() {
     if (!this.currentNode)
       return this._getDefaultVisibilities();
-    const t = Array.from(this.currentNode.querySelectorAll(N)), e = this._extractVisibilityFromRows(t);
+    const t = Array.from(this.currentNode.querySelectorAll(E)), e = this._extractVisibilityFromRows(t);
     if (Object.keys(e).length > 0)
       return this._withTitlePresence(this._mergeWithDefaults(e));
-    const r = g.getConfig(this.currentNode).visibility;
+    const r = T.getConfig(this.currentNode).visibility;
     return this._withTitlePresence(this._mergeWithDefaults({ ...r }));
   }
   _withTitlePresence(t) {
-    return t[I] = this._hasTitle(), t;
+    return t[$] = this._hasTitle(), t;
   }
   _hasTitle() {
     var t;
@@ -240,8 +240,10 @@ class se extends ut {
     return t.forEach((r) => {
       if (!("getAttribute" in r))
         return;
-      const i = Ot(r), s = r.getAttribute(D);
-      i && s !== null && (e[i] = this._parseVisibilityValue(s));
+      const i = r.getAttribute(D);
+      i !== null && Ot(r).forEach((s) => {
+        e[s] = this._parseVisibilityValue(i);
+      });
     }), e;
   }
   _parseVisibilityValue(t) {
@@ -253,7 +255,7 @@ class se extends ut {
     }), t;
   }
   _buildVisibilityValues(t) {
-    return [R, ...m].reduce((e, r) => (e[`visibility_${r.key}`] = t[r.key] ?? !0, e), {});
+    return [L, ...m].reduce((e, r) => (e[`visibility_${r.key}`] = t[r.key] ?? !0, e), {});
   }
   // ========================================================================
   // UI Rendering (Orderable List)
@@ -270,22 +272,22 @@ class se extends ut {
     const i = r.querySelector("[data-composition-list]");
     if (!i)
       return !1;
-    const s = !g.getConfig(this.currentNode).priceMovedToNextLine;
+    const s = this._isInlinePrices();
     if (!(i.dataset.inlinePrices !== String(s)) && this._tryReorderInPlace(i, t))
       return !1;
     i.dataset.inlinePrices = String(s);
     const n = new Set(e), l = vt(t);
     let a = 0, d = 0;
     const c = t.map((u) => {
-      if (s && (u === C || u === L))
+      if (s && (u === p || u === I))
         return u === l.anchor ? this._createPriceGroupItemHtml(d++, l.originalFirst) : "";
-      if (xt.has(u)) {
-        const b = m.find((S) => S.key === u);
-        return this._createBuiltInItemHtml(b, d++);
+      if (Ft.has(u)) {
+        const h = m.find((S) => S.key === u);
+        return this._createBuiltInItemHtml(h, d++);
       }
-      if (u.startsWith(v)) {
-        const b = k(u);
-        if (n.has(b))
+      if (u.startsWith(N)) {
+        const h = k(u);
+        if (n.has(h))
           return this._createCustomItemHtml(u, a++, d++);
       }
       return "";
@@ -306,7 +308,7 @@ class se extends ut {
     if (i.length !== e.length)
       return !1;
     const s = [...i].sort().join(","), o = [...e].sort().join(",");
-    if (s !== o || e.some((a) => a.startsWith(v)))
+    if (s !== o || e.some((a) => a.startsWith(N)))
       return !1;
     const n = /* @__PURE__ */ new Map();
     r.forEach((a) => {
@@ -344,18 +346,18 @@ class se extends ut {
    */
   _createPriceGroupItemHtml(t, e) {
     var n, l;
-    const r = ((n = m.find((a) => a.key === C)) == null ? void 0 : n.label) ?? "Product Price", i = ((l = m.find((a) => a.key === L)) == null ? void 0 : l.label) ?? "Product Original Price", s = (a, d) => `
+    const r = ((n = m.find((a) => a.key === p)) == null ? void 0 : n.label) ?? "Product Price", i = ((l = m.find((a) => a.key === I)) == null ? void 0 : l.label) ?? "Product Original Price", s = (a, d) => `
             <div class="price-suborderable-item" draggable="true" data-subkey="${a}">
                 <span class="sub-drag-handle">${qt}</span>
                 <span class="item-label">${this.api.translate(d)}</span>
-            </div>`, o = e ? s(L, i) + s(C, r) : s(C, r) + s(L, i);
+            </div>`, o = e ? s(I, i) + s(p, r) : s(p, r) + s(I, i);
     return `
             <div class="orderable-item price-group-item" draggable="true"
-                data-key="${C}" data-group="prices">
+                data-key="${p}" data-group="prices">
                 <div class="price-group-header">
                     <span class="guido-drag-handle" data-reorder-icon-slot="${t}"></span>
                     <span class="item-label">${this.api.translate("Product Prices")}</span>
-                    <div class="item-action" data-action-for="${C}"></div>
+                    <div class="item-action" data-action-for="${p}"></div>
                 </div>
                 <div class="price-suborderable-list">${o}</div>
             </div>
@@ -395,13 +397,13 @@ class se extends ut {
     const i = /* @__PURE__ */ new Map();
     r.forEach((o) => i.set(o.attributeName, (i.get(o.attributeName) ?? 0) + 1));
     const s = new Set(e);
-    return s.delete(t), r.filter((o) => !s.has(T(o))).map((o) => ({
+    return s.delete(t), r.filter((o) => !s.has(C(o))).map((o) => ({
       text: this._toOptionLabel(
         o.displayName,
         o.type === "defaultAttribute",
         (i.get(o.attributeName) ?? 0) > 1
       ),
-      value: T(o)
+      value: C(o)
     }));
   }
   /**
@@ -463,7 +465,7 @@ class se extends ut {
    * Same rescue pattern as _rescueTogglesToStore — prevents innerHTML from destroying them.
    */
   _rescueSelectsToStore(t) {
-    for (let e = 0; e < f; e++) {
+    for (let e = 0; e < b; e++) {
       const r = `${A}${e}`, i = t.querySelector(`[data-custom-select-key="${r}"]`), s = t.querySelector(`[data-custom-select-slot="${e}"]`);
       if (s) {
         const o = s.querySelector("ue-select");
@@ -489,7 +491,7 @@ class se extends ut {
    * Same rescue pattern as _rescueSelectsToStore — prevents innerHTML from destroying them.
    */
   _rescueDeleteButtonsToStore(t) {
-    for (let e = 0; e < f; e++) {
+    for (let e = 0; e < b; e++) {
       const r = `${w}${e}`, i = t.querySelector(`[data-custom-delete-key="${r}"]`), s = t.querySelector(`[data-custom-delete-slot="${e}"]`);
       if (s) {
         const o = s.querySelector("ue-button");
@@ -515,7 +517,7 @@ class se extends ut {
    * Same rescue pattern as _rescueDeleteButtonsToStore — prevents innerHTML from destroying them.
    */
   _rescueReorderIconsToStore(t) {
-    const e = m.length + f;
+    const e = m.length + b;
     for (let r = 0; r < e; r++) {
       const i = `${P}${r}`, s = t.querySelector(`[data-reorder-icon-key="${i}"]`), o = t.querySelector(`[data-reorder-icon-slot="${r}"]`);
       if (o) {
@@ -534,8 +536,8 @@ class se extends ut {
       return;
     const r = e.querySelector("[data-composition-list]"), i = e.querySelector("#guido__btn-add-attribute");
     r && (this._setupDragAndDrop(r, t), this._setupDeleteHandler(r, t)), i && i.addEventListener("click", () => {
-      const s = new Set(this._readCustomAttributesFromNode()), o = this._getAddableFilters().find((n) => !s.has(T(n)));
-      o && this._onAddAttribute(T(o), o.displayName);
+      const s = new Set(this._readCustomAttributesFromNode()), o = this._getAddableFilters().find((n) => !s.has(C(n)));
+      o && this._onAddAttribute(C(o), o.displayName);
     }, { signal: t });
   }
   /**
@@ -646,11 +648,11 @@ class se extends ut {
     this._updateBothAttributes(o, r), this._injectCustomAttributeHtml(e, l, s, o), this._renderOrderableItems(o, r), this._initializeCustomSelects(r);
   }
   _onReorder(t) {
-    const e = t.filter((r) => r.startsWith(v)).map(k);
+    const e = t.filter((r) => r.startsWith(N)).map(k);
     this.reorderInProgress = !0;
     try {
       this._updateBothAttributes(t, e);
-      const r = !g.getConfig(this.currentNode).priceMovedToNextLine;
+      const r = this._isInlinePrices();
       this._getCurrentLayout() === "grid" && !r ? this._reorderProductAttributes(t) : this.currentNode && Bt({
         currentNode: this.currentNode,
         documentModifier: this.api.getDocumentModifier()
@@ -673,7 +675,7 @@ class se extends ut {
     if (r && "getOuterHTML" in r)
       return Q(r.getOuterHTML(), e);
     const i = t.querySelector(
-      `${N}[${E}="${e}"]`
+      `${E}[${R}="${e}"]`
     );
     return i && "getOuterHTML" in i ? Q(i.getOuterHTML(), e) : "";
   }
@@ -686,15 +688,15 @@ class se extends ut {
     const s = this.currentNode.querySelectorAll(U);
     if (!(s != null && s.length))
       return;
-    const o = g.getConfig(this.currentNode), l = `0 ${Math.floor(o.columnSpacing / 2)}px`, a = this.api.getDocumentModifier(), d = this.store.recommendationProducts.length;
+    const o = T.getConfig(this.currentNode), l = `0 ${Math.floor(o.columnSpacing / 2)}px`, a = this.api.getDocumentModifier(), d = this.store.recommendationProducts.length;
     let c = 0;
     s.forEach((u) => {
       var V;
-      const b = u.querySelector(N), S = ((V = b == null ? void 0 : b.querySelectorAll(`.${bt}`)) == null ? void 0 : V.length) || 1, F = (100 / S).toFixed(2), { bgStyle: et, bgAttr: rt } = this._extractSegmentBgFromCard(u), B = d > 0 ? Math.min(S, d - c) : S, it = i.map((j) => {
+      const h = u.querySelector(E), S = ((V = h == null ? void 0 : h.querySelectorAll(`.${bt}`)) == null ? void 0 : V.length) || 1, x = (100 / S).toFixed(2), { bgStyle: et, bgAttr: rt } = this._extractSegmentBgFromCard(u), B = d > 0 ? Math.min(S, d - c) : S, it = i.map((j) => {
         if (j === r) {
           const st = Array.from(
             { length: B },
-            (Ft, nt) => {
+            (xt, nt) => {
               const lt = this._resolveAttributeContent(
                 t,
                 e,
@@ -703,14 +705,14 @@ class se extends ut {
               return this._getGridCellHtml(
                 t,
                 lt,
-                F,
+                x,
                 et,
                 rt,
                 l
               );
             }
-          ).join(""), ot = Ct(F, l).repeat(S - B);
-          return `<tr class="${G}" ${E}="${r}" ${D}="1">${st}${ot}</tr>`;
+          ).join(""), ot = Ct(x, l).repeat(S - B);
+          return `<tr class="${G}" ${R}="${r}" ${D}="1">${st}${ot}</tr>`;
         }
         return this._getExistingRowHtml(u, j);
       }).join("");
@@ -721,7 +723,7 @@ class se extends ut {
     const s = this.currentNode.querySelectorAll(Z);
     if (!(s != null && s.length))
       return;
-    const o = i.filter((l) => l !== q && l !== x), n = this.api.getDocumentModifier();
+    const o = i.filter((l) => l !== q && l !== F), n = this.api.getDocumentModifier();
     s.forEach((l, a) => {
       const d = o.map((c) => {
         if (c === r) {
@@ -748,7 +750,7 @@ class se extends ut {
         r.modifyHtml(s).setInnerHtml(o);
       });
     } else {
-      const i = t.filter((o) => o !== q && o !== x), s = this.currentNode.querySelectorAll(Z);
+      const i = t.filter((o) => o !== q && o !== F), s = this.currentNode.querySelectorAll(Z);
       s == null || s.forEach((o) => {
         const n = this._buildCompositionHtml(o, i);
         r.modifyHtml(o).setInnerHtml(n);
@@ -770,7 +772,7 @@ class se extends ut {
     if (!this.currentNode)
       return;
     const r = {
-      ...g.getConfig(this.currentNode),
+      ...T.getConfig(this.currentNode),
       composition: t
     };
     this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(K, t.join(",")).setAttribute(W, JSON.stringify(e)).setNodeConfig(r).apply(new y(this.api.translate("Update card composition")));
@@ -804,37 +806,47 @@ class se extends ut {
   _applyVisibilityToBlock(t, e) {
     if (!this.currentNode)
       return;
-    if (t === I) {
+    if (t === $) {
       this._applyTitleVisibilityToBlock(e);
       return;
     }
-    const r = this.currentNode.querySelectorAll(`${N}[${E}="${t}"]`);
-    if (!(r != null && r.length))
+    const r = this._resolveVisibilityKeys(t), { currentNode: i } = this, s = r.flatMap((c) => Array.from(i.querySelectorAll(`${E}[${R}="${c}"]`) ?? []));
+    if (!s.length)
       return;
-    const i = e ? "1" : "0", s = e ? this.api.translate("visible") : this.api.translate("hidden"), o = `${this.api.translate("Set visibility")}: ${t} → ${s}`, n = this.api.getDocumentModifier();
-    r.forEach((a) => {
-      const d = Pt(a), c = e ? d : "none";
-      n.modifyHtml(a).setStyle("display", c).setAttribute(D, i);
+    const o = e ? "1" : "0", n = e ? this.api.translate("visible") : this.api.translate("hidden"), l = `${this.api.translate("Set visibility")}: ${t} → ${n}`, a = this.api.getDocumentModifier();
+    s.forEach((c) => {
+      const u = Pt(c), h = e ? u : "none";
+      a.modifyHtml(c).setStyle("display", h).setAttribute(D, o);
     });
-    const l = {
-      ...g.getConfig(this.currentNode),
-      visibility: { ...this._readVisibilityFromRows(), [t]: e }
+    const d = {
+      ...T.getConfig(this.currentNode),
+      visibility: {
+        ...this._readVisibilityFromRows(),
+        ...Object.fromEntries(r.map((c) => [c, e]))
+      }
     };
-    n.modifyHtml(this.currentNode).setNodeConfig(l), n.apply(new y(o));
+    a.modifyHtml(this.currentNode).setNodeConfig(d), a.apply(new y(l));
+  }
+  /** Inline "Product Prices" group row is tagged with whichever price comes first, so it drives both keys. */
+  _resolveVisibilityKeys(t) {
+    return this._isInlinePrices() && t === p ? [p, I] : [t];
+  }
+  _isInlinePrices() {
+    return !T.getConfig(this.currentNode).priceMovedToNextLine;
   }
   _applyTitleVisibilityToBlock(t) {
-    const e = g.getConfig(this.currentNode), r = t ? this._resolveTitleInjection(e) : null, i = t ? [] : this._findTitleRows(), s = t ? this._hasTitle() || !r : i.length === 0;
+    const e = T.getConfig(this.currentNode), r = t ? this._resolveTitleInjection(e) : null, i = t ? [] : this._findTitleRows(), s = t ? this._hasTitle() || !r : i.length === 0;
     if (!this.currentNode || s)
       return;
     const o = this.api.getDocumentModifier();
     r ? o.modifyHtml(r.containerBody).setInnerHtml(r.html) : i.forEach((l) => o.modifyHtml(l).delete()), o.modifyHtml(this.currentNode).setNodeConfig({
       ...e,
       previousTitleHtml: t ? e.previousTitleHtml : this._readTitleHtml(i),
-      visibility: { ...this._readVisibilityFromRows(), [I]: t }
+      visibility: { ...this._readVisibilityFromRows(), [$]: t }
     });
     const n = t ? this.api.translate("visible") : this.api.translate("hidden");
     o.apply(new y(
-      `${this.api.translate("Set visibility")}: ${I} → ${n}`
+      `${this.api.translate("Set visibility")}: ${$} → ${n}`
     ));
   }
   _resolveTitleInjection(t) {
@@ -850,7 +862,7 @@ class se extends ut {
   _findTitleRows() {
     var e;
     const t = Array.from(((e = this.currentNode) == null ? void 0 : e.querySelectorAll(
-      `${N}[${E}="${I}"]`
+      `${E}[${R}="${$}"]`
     )) ?? []);
     return t.length > 0 ? t : this._findTitleRowsByClass();
   }
@@ -884,7 +896,7 @@ class se extends ut {
   _findNthCustomKeyIndex(t, e) {
     let r = 0;
     for (let i = 0; i < t.length; i++)
-      if (t[i].startsWith(v)) {
+      if (t[i].startsWith(N)) {
         if (r === e)
           return i;
         r++;
@@ -944,7 +956,7 @@ class se extends ut {
    * or when all available filters have already been added (no unused attributes left).
    */
   _updateAddButtonState() {
-    const t = this._readCustomAttributesFromNode(), e = t.length >= f, r = new Set(t), i = this._getAddableFilters(), s = i.length > 0 && i.every((o) => r.has(T(o)));
+    const t = this._readCustomAttributesFromNode(), e = t.length >= b, r = new Set(t), i = this._getAddableFilters(), s = i.length > 0 && i.every((o) => r.has(C(o)));
     this.api.setUIEAttribute(
       tt.ADD_ATTRIBUTE,
       O.BUTTON.disabled,
@@ -977,7 +989,7 @@ class se extends ut {
   _getAddableFilters() {
     const t = /* @__PURE__ */ new Set();
     return Object.values(this.store.filterList).filter((e) => !(e.type === "defaultAttribute" && gt.has(e.attributeName))).filter((e) => {
-      const r = T(e);
+      const r = C(e);
       return t.has(r) ? !1 : (t.add(r), !0);
     });
   }
@@ -987,7 +999,7 @@ class se extends ut {
    * resolve to their own entry. Falls back to Title Case of the bare name.
    */
   _getDisplayNameForAttribute(t) {
-    const e = Object.values(this.store.filterList).find((r) => T(r) === t);
+    const e = Object.values(this.store.filterList).find((r) => C(r) === t);
     return e ? e.displayName : Nt(H(t));
   }
   /**
@@ -1015,7 +1027,7 @@ class se extends ut {
       [i]: e,
       product_attributes: { [i]: e }
     }, l = s[r](o).replace(/<tr>/, "").replace(/<\/tr>/, "");
-    return `<tr class="${G}" ${E}="${r}" ${D}="1">${l}</tr>`;
+    return `<tr class="${G}" ${R}="${r}" ${D}="1">${l}</tr>`;
   }
 }
 export {

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

@@ -1,10 +1,10 @@
-import { extractWrapperTags as C } from "../../../../utils/preserveTextStyles.js";
+import { extractWrapperTags as A } from "../../../../utils/preserveTextStyles.js";
 import { RecommendationBlockId as c } from "../constants/blockIds.js";
-import { DESKTOP_CONTAINER_SELECTOR as S, ATTR_PRODUCT_NAME as E, ATTR_PRODUCT_PRICE as p, ATTR_PRODUCT_OLD_PRICE as y, ATTR_PRODUCT_OMNIBUS_PRICE as A, ATTR_PRODUCT_OMNIBUS_DISCOUNT as R, ATTR_PRODUCT_BUTTON as P, ATTR_PRODUCT_IMAGE as q, ATTR_PRODUCT_ATTR as x } from "../constants/selectors.js";
-import { CSS_CLASS_TEXT_TRIM as v } from "../controls/shared/textTrimCssRules.js";
-import { toCustomCompositionKey as B } from "../templates/utils.js";
-import { resolveRowCompositionKey as U } from "./compositionKeys.js";
-import { hasQuerySelectorAll as _, hasGetAttribute as l, hasGetStyle as I, hasGetComputedStyle as N } from "./tagName.js";
+import { DESKTOP_CONTAINER_SELECTOR as b, ATTR_PRODUCT_NAME as k, ATTR_PRODUCT_PRICE as y, ATTR_PRODUCT_OLD_PRICE as p, ATTR_PRODUCT_OMNIBUS_PRICE as R, ATTR_PRODUCT_OMNIBUS_DISCOUNT as _, ATTR_PRODUCT_BUTTON as x, ATTR_PRODUCT_IMAGE as q, ATTR_PRODUCT_ATTR as v } from "../constants/selectors.js";
+import { CSS_CLASS_TEXT_TRIM as B } from "../controls/shared/textTrimCssRules.js";
+import { toCustomCompositionKey as U } from "../templates/utils.js";
+import { resolveRowVisibilityKeys as N, isMergedInlinePriceRow as C } from "./compositionKeys.js";
+import { hasQuerySelectorAll as I, hasGetAttribute as l, hasGetStyle as O, hasGetComputedStyle as M } from "./tagName.js";
 const s = [
   "font-size",
   "font-family",
@@ -14,14 +14,14 @@ const s = [
   "text-align",
   "line-height",
   "text-decoration"
-], M = [
+], D = [
   "background",
   "background-color",
   "border-width",
   "border-color",
   "border-style",
   "border-radius"
-], D = [
+], w = [
   ...s,
   "background",
   "background-color",
@@ -40,47 +40,47 @@ const s = [
   "border-radius",
   "margin"
 ], g = /* @__PURE__ */ new Set(["transparent", "rgba(0, 0, 0, 0)"]), L = [
-  { attrKey: E, blockId: c.NAME, kind: "text" },
-  { attrKey: p, blockId: c.PRICE, kind: "text" },
-  { attrKey: y, blockId: c.OLD_PRICE, kind: "text" },
-  { attrKey: A, blockId: c.OMNIBUS_PRICE, kind: "text" },
-  { attrKey: R, blockId: c.OMNIBUS_DISCOUNT, kind: "text" },
-  { attrKey: P, blockId: c.BUTTON, kind: "button" },
+  { attrKey: k, blockId: c.NAME, kind: "text" },
+  { attrKey: y, blockId: c.PRICE, kind: "text" },
+  { attrKey: p, blockId: c.OLD_PRICE, kind: "text" },
+  { attrKey: R, blockId: c.OMNIBUS_PRICE, kind: "text" },
+  { attrKey: _, blockId: c.OMNIBUS_DISCOUNT, kind: "text" },
+  { attrKey: x, blockId: c.BUTTON, kind: "button" },
   { attrKey: q, blockId: c.IMAGE, kind: "image" }
 ];
-function O(t) {
+function h(t) {
   return t && "getInnerHTML" in t && typeof t.getInnerHTML == "function" ? t.getInnerHTML().trim() : "";
 }
-function w(t) {
+function K(t) {
   return t && "getInnerText" in t && typeof t.getInnerText == "function" ? t.getInnerText().trim() : "";
 }
 function a(t, e, r) {
-  !e || !I(e) || r.forEach((n) => {
+  !e || !O(e) || r.forEach((n) => {
     const o = e.getStyle(n);
     o && o !== "inherit" && o !== "initial" && (t[n] = o);
   });
 }
-function h(t) {
+function E(t) {
   return Object.entries(t).map(([e, r]) => `${e}: ${r};`).join(" ");
 }
-function k(t) {
-  if (!t || !I(t))
+function P(t) {
+  if (!t || !O(t))
     return;
   const e = t.getStyle("background-color") || t.getStyle("background");
   return e && !g.has(e) ? e : void 0;
 }
-function b(t, e) {
+function S(t, e) {
   const r = {};
-  return a(r, t, e), h(r);
+  return a(r, t, e), E(r);
 }
-function K(t) {
+function $(t) {
   const e = t.querySelector("p"), r = {};
   a(r, t, s), a(r, e, s), a(r, t.querySelector("strong"), s), a(r, t.querySelector("em"), s), a(r, t.querySelector("s"), s);
-  const n = h(r), { openTags: o, closeTags: i } = C(O(e));
+  const n = E(r), { openTags: o, closeTags: i } = A(h(e));
   return !n && !o ? null : { pStyle: n || void 0, openTags: o, closeTags: i };
 }
-function $(t) {
-  const e = t.querySelector(".es-button-border"), r = t.querySelector("a.es-button") ?? t.querySelector("a"), n = b(e, M), o = b(r, D), i = e && "getAttribute" in e ? e.getAttribute("class") ?? "" : "", u = /\bes-fw\b/.test(i), { openTags: T, closeTags: d } = C(O(r)), m = w(r);
+function H(t) {
+  const e = t.querySelector(".es-button-border"), r = t.querySelector("a.es-button") ?? t.querySelector("a"), n = S(e, D), o = S(r, w), i = e && "getAttribute" in e ? e.getAttribute("class") ?? "" : "", u = /\bes-fw\b/.test(i), { openTags: T, closeTags: d } = A(h(r)), m = K(r);
   return !n && !o && !u && !T && !m ? null : {
     buttonBorderStyle: n || void 0,
     buttonAnchorStyle: o || void 0,
@@ -90,44 +90,44 @@ function $(t) {
     closeTags: d
   };
 }
-function H(t) {
-  const e = b(t.querySelector("img"), G);
+function F(t) {
+  const e = S(t.querySelector("img"), G);
   return e ? { imgStyle: e } : null;
 }
-function F(t, e) {
-  return e === "button" ? $(t) : e === "image" ? H(t) : K(t);
+function j(t, e) {
+  return e === "button" ? H(t) : e === "image" ? F(t) : $(t);
 }
 function f(t, e) {
   if (!t || !("querySelector" in t))
     return;
-  const r = t.querySelector(S) ?? t;
+  const r = t.querySelector(b) ?? t;
   if (L.forEach(({ attrKey: i, blockId: u, kind: T }) => {
     const d = r.querySelector(`[esd-extension-block-id="${u}"]`);
     d && e(d, i, T);
-  }), !_(r))
+  }), !I(r))
     return;
   const n = /* @__PURE__ */ new Set();
   r.querySelectorAll(
     `[esd-extension-block-id="${c.CUSTOM_ATTRIBUTE}"]`
   ).forEach((i) => {
-    const u = l(i) ? i.getAttribute(x) : null;
-    !u || n.has(u) || (n.add(u), e(i, B(u), "text"));
+    const u = l(i) ? i.getAttribute(v) : null;
+    !u || n.has(u) || (n.add(u), e(i, U(u), "text"));
   });
 }
-function j(t) {
+function V(t) {
   const e = {};
   return f(t, (r, n, o) => {
     if (!("querySelector" in r))
       return;
-    const i = F(r, o);
+    const i = j(r, o);
     i && (e[n] = i);
   }), e;
 }
 function X(t) {
   if (!t || !("querySelector" in t))
     return;
-  const e = t.querySelector(S) ?? t, r = e.querySelector(".product-card-segment") ?? e.querySelector(".product-card-wrapper");
-  return k(r);
+  const e = t.querySelector(b) ?? t, r = e.querySelector(".product-card-segment") ?? e.querySelector(".product-card-wrapper");
+  return P(r);
 }
 function z(t) {
   if (!t)
@@ -135,10 +135,10 @@ function z(t) {
   const e = l(t) ? t.getAttribute("bgcolor") : null;
   if (e && !g.has(e))
     return e;
-  const r = k(t);
+  const r = P(t);
   if (r)
     return r;
-  const n = N(t) ? t.getComputedStyle("background-color") : void 0;
+  const n = M(t) ? t.getComputedStyle("background-color") : void 0;
   return n && !g.has(n) ? n : void 0;
 }
 function Q(t) {
@@ -150,7 +150,7 @@ function Q(t) {
     i && (e[n] = i);
   }), e;
 }
-function V(t) {
+function W(t) {
   const e = {};
   return f(t, (r, n, o) => {
     if (o === "image")
@@ -159,68 +159,70 @@ function V(t) {
     i && (e[n] = i);
   }), e;
 }
-const W = /^es-[pm]\d+[trbl]?$/;
-function Y(t) {
+const Y = /^es-[pm]\d+[trbl]?$/;
+function J(t) {
   const e = l(t) ? t.getAttribute("class") : null;
   if (!e)
     return;
-  const r = e.split(/\s+/).filter((n) => W.test(n) || n === v);
+  const r = e.split(/\s+/).filter((n) => Y.test(n) || n === B);
   return r.length ? r.join(" ") : void 0;
 }
-function J(t) {
+function Z(t) {
   if (!t || !("querySelector" in t))
     return !1;
-  const e = t.querySelector(S) ?? t, r = (n) => !!(n && "querySelector" in n && n.querySelector(".product-price") && n.querySelector(".product-old-price"));
-  return r(e.querySelector(`[data-attribute-type="${p}"]`)) || r(e.querySelector(`[data-attribute-type="${y}"]`));
+  const e = t.querySelector(b) ?? t;
+  return C(e.querySelector(`[data-attribute-type="${y}"]`)) || C(e.querySelector(`[data-attribute-type="${p}"]`));
 }
-function Z(t) {
-  const e = {}, r = J(t);
+function tt(t) {
+  const e = {}, r = Z(t);
   return f(t, (n, o, i) => {
-    if (i === "image" || r && (o === p || o === y))
+    if (i === "image" || r && (o === y || o === p))
       return;
-    const u = Y(n);
+    const u = J(n);
     u && (e[o] = u);
   }), e;
 }
-function tt(t) {
+function et(t) {
   const e = {};
   return f(t, (r, n) => {
-    if (n !== A && n !== R || !l(r))
+    if (n !== R && n !== _ || !l(r))
       return;
     const o = r.getAttribute("data-text-before"), i = r.getAttribute("data-text-after");
     (o != null || i != null) && (e[n] = { before: o ?? void 0, after: i ?? void 0 });
   }), e;
 }
-function et(t) {
+function rt(t) {
   const e = {};
   if (!t || !("querySelector" in t))
     return e;
-  const r = t.querySelector(S) ?? t;
-  return _(r) && r.querySelectorAll(".recommendation-attribute-row").forEach((n) => {
+  const r = t.querySelector(b) ?? t;
+  return I(r) && r.querySelectorAll(".recommendation-attribute-row").forEach((n) => {
     if (!l(n))
       return;
-    const o = U(n), i = n.getAttribute("data-visibility");
-    o && i != null && (e[o] = i !== "0");
+    const o = n.getAttribute("data-visibility");
+    o != null && N(n).forEach((i) => {
+      e[i] = o !== "0";
+    });
   }), e;
 }
-function at(t) {
+function lt(t) {
   return {
-    styleTemplates: j(t),
+    styleTemplates: V(t),
     cardBackgroundColor: X(t),
     cellBackgroundColors: Q(t),
-    cellAlignments: V(t),
-    cellClasses: Z(t),
-    omnibusTexts: tt(t),
-    visibility: et(t)
+    cellAlignments: W(t),
+    cellClasses: tt(t),
+    omnibusTexts: et(t),
+    visibility: rt(t)
   };
 }
 export {
-  j as captureAttributeStyleTemplates,
+  V as captureAttributeStyleTemplates,
   X as captureCardBackgroundColor,
-  V as captureCellAlignments,
+  W as captureCellAlignments,
   Q as captureCellBackgroundColors,
-  Z as captureCellClasses,
-  tt as captureOmnibusTexts,
-  at as captureStyles,
-  et as captureVisibility
+  tt as captureCellClasses,
+  et as captureOmnibusTexts,
+  lt as captureStyles,
+  rt as captureVisibility
 };

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

@@ -1,89 +1,98 @@
-import { ATTR_CUSTOM_PREFIX as s, ATTR_PRODUCT_ATTR as i, PRODUCT_ATTRIBUTE_PREFIX as f, ATTR_DATA_ATTRIBUTE_TYPE as l, SELECTOR_ATTRIBUTE_ROW as R } from "../constants/selectors.js";
-function d(t) {
-  return !t.startsWith(f);
+import { ATTR_CUSTOM_PREFIX as o, ATTR_PRODUCT_PRICE as g, ATTR_PRODUCT_OLD_PRICE as d, PRODUCT_ATTRIBUTE_PREFIX as a, ATTR_DATA_ATTRIBUTE_TYPE as f, ATTR_PRODUCT_ATTR as c, SELECTOR_ATTRIBUTE_ROW as y } from "../constants/selectors.js";
+function q(t) {
+  return !t.startsWith(a);
 }
-function y(t) {
-  return t.startsWith(f) ? t.substring(f.length) : t;
-}
-function T(t) {
-  return t.startsWith(s) ? t.substring(s.length) : t;
+function $(t) {
+  return t.startsWith(a) ? t.substring(a.length) : t;
 }
 function A(t) {
-  return `${s}${t}`;
+  return t.startsWith(o) ? t.substring(o.length) : t;
+}
+function T(t) {
+  return `${o}${t}`;
 }
-function P(t) {
-  return t.type === "defaultAttribute" ? t.attributeName : `${f}${t.attributeName}`;
+function C(t) {
+  return t.type === "defaultAttribute" ? t.attributeName : `${a}${t.attributeName}`;
 }
-function _(t, r) {
+function h(t, r) {
   const n = Object.values(r).filter((e) => e.attributeName === t);
   return n.find((e) => e.type === "defaultAttribute") ?? n[0];
 }
-function a(t, r) {
+function l(t, r) {
   return t && "getAttribute" in t ? t.getAttribute(r) : null;
 }
-function m(t, r, n = {}) {
-  const e = `${s}${t}`, u = r == null ? void 0 : r.querySelector(
-    `${R}[${l}="${e}"]`
-  ), c = a(u, i) ?? a(u == null ? void 0 : u.querySelector(`[${i}]`), i);
-  if (c)
-    return c;
-  const o = _(t, n);
-  return o ? P(o) : t;
+function S(t, r, n = {}) {
+  const e = `${o}${t}`, u = r == null ? void 0 : r.querySelector(
+    `${y}[${f}="${e}"]`
+  ), i = l(u, c) ?? l(u == null ? void 0 : u.querySelector(`[${c}]`), c);
+  if (i)
+    return i;
+  const s = h(t, n);
+  return s ? C(s) : t;
 }
-function g(t, r, n = {}) {
-  return t.startsWith(f) ? t : m(t, r, n);
+function P(t, r, n = {}) {
+  return t.startsWith(a) ? t : S(t, r, n);
 }
-function C(t, r, n = {}) {
+function O(t, r, n = {}) {
   return t.map((e) => {
-    if (!e.startsWith(s))
+    if (!e.startsWith(o))
       return e;
-    const u = T(e);
-    return A(g(u, r, n));
+    const u = A(e);
+    return T(P(u, r, n));
   });
 }
-function E(t, r, n = {}) {
-  return t.map((e) => g(e, r, n));
+function p(t, r, n = {}) {
+  return t.map((e) => P(e, r, n));
 }
-function S(t) {
-  const r = a(t, l);
-  if (!(r != null && r.startsWith(s)))
+function b(t) {
+  const r = l(t, f);
+  if (!(r != null && r.startsWith(o)))
     return r;
-  const n = "querySelector" in t ? t.querySelector(`[${i}]`) : void 0, e = a(n, i);
-  return e ? A(e) : r;
+  const n = "querySelector" in t ? t.querySelector(`[${c}]`) : void 0, e = l(n, c);
+  return e ? T(e) : r;
+}
+function m(t) {
+  return !!(t && "querySelector" in t && t.querySelector(".product-price") && t.querySelector(".product-old-price"));
+}
+function D(t) {
+  const r = b(t);
+  return r ? m(t) ? [g, d] : [r] : [];
 }
-function $(t, r, n) {
-  const e = a(t, i), u = a(t.querySelector(`[${i}]`), i), c = e ?? u;
-  return c === null ? n : c === r;
+function R(t, r, n) {
+  const e = l(t, c), u = l(t.querySelector(`[${c}]`), c), i = e ?? u;
+  return i === null ? n : i === r;
 }
-function W(t, r) {
-  const n = (h) => t.querySelector(
-    `${R}[${l}="${h}"]`
+function I(t, r) {
+  const n = (_) => t.querySelector(
+    `${y}[${f}="${_}"]`
   );
-  if (!r.startsWith(s))
+  if (!r.startsWith(o))
     return n(r) ?? null;
-  const e = T(r), u = n(r);
-  if (u && $(u, e, !0))
+  const e = A(r), u = n(r);
+  if (u && R(u, e, !0))
     return u;
-  const c = A(y(e)), o = c === r ? void 0 : n(c);
-  return o && $(o, e, !1) ? o : null;
+  const i = T($(e)), s = i === r ? void 0 : n(i);
+  return s && R(s, e, !1) ? s : null;
 }
-function q(t, r) {
-  const n = T(r), e = A(y(n));
+function U(t, r) {
+  const n = A(r), e = T($(n));
   return e === r ? t : t.replace(
-    `${l}="${e}"`,
-    `${l}="${r}"`
+    `${f}="${e}"`,
+    `${f}="${r}"`
   );
 }
 export {
-  y as bareAttributeName,
-  T as compositionKeyToProductAttr,
-  P as filterToProductAttrValue,
-  W as findAttributeRow,
-  _ as findFilterByBareName,
-  d as isDefaultProductAttr,
-  C as normalizeCompositionKeys,
-  E as normalizeCustomAttrValues,
-  A as productAttrToCompositionKey,
-  S as resolveRowCompositionKey,
-  q as rewriteLegacyRowKeyHtml
+  $ as bareAttributeName,
+  A as compositionKeyToProductAttr,
+  C as filterToProductAttrValue,
+  I as findAttributeRow,
+  h as findFilterByBareName,
+  q as isDefaultProductAttr,
+  m as isMergedInlinePriceRow,
+  O as normalizeCompositionKeys,
+  p as normalizeCustomAttrValues,
+  T as productAttrToCompositionKey,
+  b as resolveRowCompositionKey,
+  D as resolveRowVisibilityKeys,
+  U as rewriteLegacyRowKeyHtml
 };

package/dist/src/config/compiler/utils/itemsCompilerUtils.d.ts

@@ -15,3 +15,8 @@ export declare function wrapHiddenPriceTdsForOutlook(html: string): string;
  * dropped so it keeps its column width (a pin there overflows 33%/50% columns).
  */
 export declare function normalizeItemsBlockWidths(html: string): string;
+/**
+ * The mobile `.adapt-img { width: 100% }` rule sizes the horizontal thumbnail by its auto-width column,
+ * so it grows in a roomy row and collapses to nothing in a crowded one — bound it to [default, width].
+ */
+export declare function lockHorizontalItemImageWidths(html: string): string;

package/dist/src/extensions/Blocks/Recommendation/controls/cardComposition/index.d.ts

@@ -189,6 +189,9 @@ export declare class RecommendationCardCompositionControl extends CommonControl
      */
     private _buildCompositionHtml;
     private _applyVisibilityToBlock;
+    /** Inline "Product Prices" group row is tagged with whichever price comes first, so it drives both keys. */
+    private _resolveVisibilityKeys;
+    private _isInlinePrices;
     private _applyTitleVisibilityToBlock;
     private _resolveTitleInjection;
     private _readTitleHtml;

package/dist/src/extensions/Blocks/Recommendation/utils/compositionKeys.d.ts

@@ -33,6 +33,10 @@ export declare function normalizeCustomAttrValues(values: string[], blockNode?:
  * value, which stays correct on rows still tagged with a legacy bare name.
  */
 export declare function resolveRowCompositionKey(row: ImmutableHtmlNode): string | null;
+/** Inline price mode renders sale + original price in ONE row, tagged with whichever comes first. */
+export declare function isMergedInlinePriceRow(row: ImmutableHtmlNode | null | undefined): boolean;
+/** Keys whose visibility a row carries: the merged inline price row stands for both prices. */
+export declare function resolveRowVisibilityKeys(row: ImmutableHtmlNode): string[];
 /**
  * Finds an attribute row by composition key, tolerating rows still tagged with the
  * legacy bare-name key. Custom candidates are validated against their `product-attr`,

package/package.json

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