@useinsider/guido 3.15.0 → 3.15.1-beta.6da4177

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

@@ -1,9 +1,10 @@
 import { extractWrapperTags as C } 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 B } from "../controls/shared/textTrimCssRules.js";
-import { toCustomCompositionKey as v } from "../templates/utils.js";
-import { hasQuerySelectorAll as _, hasGetAttribute as l, hasGetStyle as I, hasGetComputedStyle as U } from "./tagName.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";
 const s = [
   "font-size",
   "font-family",
@@ -13,14 +14,14 @@ const s = [
   "text-align",
   "line-height",
   "text-decoration"
-], N = [
+], M = [
   "background",
   "background-color",
   "border-width",
   "border-color",
   "border-style",
   "border-radius"
-], M = [
+], D = [
   ...s,
   "background",
   "background-color",
@@ -31,14 +32,14 @@ const s = [
   "width",
   "mso-border-alt",
   "mso-padding-alt"
-], D = [
+], G = [
   "display",
   "width",
   "height",
   "max-width",
   "border-radius",
   "margin"
-], b = /* @__PURE__ */ new Set(["transparent", "rgba(0, 0, 0, 0)"]), G = [
+], 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" },
@@ -50,7 +51,7 @@ const s = [
 function O(t) {
   return t && "getInnerHTML" in t && typeof t.getInnerHTML == "function" ? t.getInnerHTML().trim() : "";
 }
-function L(t) {
+function w(t) {
   return t && "getInnerText" in t && typeof t.getInnerText == "function" ? t.getInnerText().trim() : "";
 }
 function a(t, e, r) {
@@ -66,20 +67,20 @@ function k(t) {
   if (!t || !I(t))
     return;
   const e = t.getStyle("background-color") || t.getStyle("background");
-  return e && !b.has(e) ? e : void 0;
+  return e && !g.has(e) ? e : void 0;
 }
-function g(t, e) {
+function b(t, e) {
   const r = {};
   return a(r, t, e), h(r);
 }
-function w(t) {
+function K(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));
   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 = g(e, N), o = g(r, M), i = e && "getAttribute" in e ? e.getAttribute("class") ?? "" : "", u = /\bes-fw\b/.test(i), { openTags: T, closeTags: d } = C(O(r)), m = L(r);
+  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);
   return !n && !o && !u && !T && !m ? null : {
     buttonBorderStyle: n || void 0,
     buttonAnchorStyle: o || void 0,
@@ -89,18 +90,18 @@ function $(t) {
     closeTags: d
   };
 }
-function K(t) {
-  const e = g(t.querySelector("img"), D);
+function H(t) {
+  const e = b(t.querySelector("img"), G);
   return e ? { imgStyle: e } : null;
 }
-function H(t, e) {
-  return e === "button" ? $(t) : e === "image" ? K(t) : w(t);
+function F(t, e) {
+  return e === "button" ? $(t) : e === "image" ? H(t) : K(t);
 }
 function f(t, e) {
   if (!t || !("querySelector" in t))
     return;
   const r = t.querySelector(S) ?? t;
-  if (G.forEach(({ attrKey: i, blockId: u, kind: 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))
@@ -110,46 +111,46 @@ function f(t, e) {
     `[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, v(u), "text"));
+    !u || n.has(u) || (n.add(u), e(i, B(u), "text"));
   });
 }
-function F(t) {
+function j(t) {
   const e = {};
   return f(t, (r, n, o) => {
     if (!("querySelector" in r))
       return;
-    const i = H(r, o);
+    const i = F(r, o);
     i && (e[n] = i);
   }), e;
 }
-function j(t) {
+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);
 }
-function X(t) {
+function z(t) {
   if (!t)
     return;
   const e = l(t) ? t.getAttribute("bgcolor") : null;
-  if (e && !b.has(e))
+  if (e && !g.has(e))
     return e;
   const r = k(t);
   if (r)
     return r;
-  const n = U(t) ? t.getComputedStyle("background-color") : void 0;
-  return n && !b.has(n) ? n : void 0;
+  const n = N(t) ? t.getComputedStyle("background-color") : void 0;
+  return n && !g.has(n) ? n : void 0;
 }
-function z(t) {
+function Q(t) {
   const e = {};
   return f(t, (r, n, o) => {
     if (o !== "text")
       return;
-    const i = X(r);
+    const i = z(r);
     i && (e[n] = i);
   }), e;
 }
-function Q(t) {
+function V(t) {
   const e = {};
   return f(t, (r, n, o) => {
     if (o === "image")
@@ -158,30 +159,30 @@ function Q(t) {
     i && (e[n] = i);
   }), e;
 }
-const V = /^es-[pm]\d+[trbl]?$/;
-function W(t) {
+const W = /^es-[pm]\d+[trbl]?$/;
+function Y(t) {
   const e = l(t) ? t.getAttribute("class") : null;
   if (!e)
     return;
-  const r = e.split(/\s+/).filter((n) => V.test(n) || n === B);
+  const r = e.split(/\s+/).filter((n) => W.test(n) || n === v);
   return r.length ? r.join(" ") : void 0;
 }
-function Y(t) {
+function J(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}"]`));
 }
-function J(t) {
-  const e = {}, r = Y(t);
+function Z(t) {
+  const e = {}, r = J(t);
   return f(t, (n, o, i) => {
     if (i === "image" || r && (o === p || o === y))
       return;
-    const u = W(n);
+    const u = Y(n);
     u && (e[o] = u);
   }), e;
 }
-function Z(t) {
+function tt(t) {
   const e = {};
   return f(t, (r, n) => {
     if (n !== A && n !== R || !l(r))
@@ -190,7 +191,7 @@ function Z(t) {
     (o != null || i != null) && (e[n] = { before: o ?? void 0, after: i ?? void 0 });
   }), e;
 }
-function tt(t) {
+function et(t) {
   const e = {};
   if (!t || !("querySelector" in t))
     return e;
@@ -198,28 +199,28 @@ function tt(t) {
   return _(r) && r.querySelectorAll(".recommendation-attribute-row").forEach((n) => {
     if (!l(n))
       return;
-    const o = n.getAttribute("data-attribute-type"), i = n.getAttribute("data-visibility");
+    const o = U(n), i = n.getAttribute("data-visibility");
     o && i != null && (e[o] = i !== "0");
   }), e;
 }
-function ct(t) {
+function at(t) {
   return {
-    styleTemplates: F(t),
-    cardBackgroundColor: j(t),
-    cellBackgroundColors: z(t),
-    cellAlignments: Q(t),
-    cellClasses: J(t),
-    omnibusTexts: Z(t),
-    visibility: tt(t)
+    styleTemplates: j(t),
+    cardBackgroundColor: X(t),
+    cellBackgroundColors: Q(t),
+    cellAlignments: V(t),
+    cellClasses: Z(t),
+    omnibusTexts: tt(t),
+    visibility: et(t)
   };
 }
 export {
-  F as captureAttributeStyleTemplates,
-  j as captureCardBackgroundColor,
-  Q as captureCellAlignments,
-  z as captureCellBackgroundColors,
-  J as captureCellClasses,
-  Z as captureOmnibusTexts,
-  ct as captureStyles,
-  tt as captureVisibility
+  j as captureAttributeStyleTemplates,
+  X as captureCardBackgroundColor,
+  V as captureCellAlignments,
+  Q as captureCellBackgroundColors,
+  Z as captureCellClasses,
+  tt as captureOmnibusTexts,
+  at as captureStyles,
+  et as captureVisibility
 };

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

@@ -0,0 +1,89 @@
+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);
+}
+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 A(t) {
+  return `${s}${t}`;
+}
+function P(t) {
+  return t.type === "defaultAttribute" ? t.attributeName : `${f}${t.attributeName}`;
+}
+function _(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) {
+  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 g(t, r, n = {}) {
+  return t.startsWith(f) ? t : m(t, r, n);
+}
+function C(t, r, n = {}) {
+  return t.map((e) => {
+    if (!e.startsWith(s))
+      return e;
+    const u = T(e);
+    return A(g(u, r, n));
+  });
+}
+function E(t, r, n = {}) {
+  return t.map((e) => g(e, r, n));
+}
+function S(t) {
+  const r = a(t, l);
+  if (!(r != null && r.startsWith(s)))
+    return r;
+  const n = "querySelector" in t ? t.querySelector(`[${i}]`) : void 0, e = a(n, i);
+  return e ? A(e) : 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 W(t, r) {
+  const n = (h) => t.querySelector(
+    `${R}[${l}="${h}"]`
+  );
+  if (!r.startsWith(s))
+    return n(r) ?? null;
+  const e = T(r), u = n(r);
+  if (u && $(u, e, !0))
+    return u;
+  const c = A(y(e)), o = c === r ? void 0 : n(c);
+  return o && $(o, e, !1) ? o : null;
+}
+function q(t, r) {
+  const n = T(r), e = A(y(n));
+  return e === r ? t : t.replace(
+    `${l}="${e}"`,
+    `${l}="${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
+};

package/dist/extensions/Blocks/common-control.js

@@ -47,15 +47,15 @@ class d extends I {
     const t = this.getBlockInstanceId();
     if (!t)
       return !1;
-    const o = t !== this.lastBlockInstanceId;
-    return e(), o && (this.lastBlockInstanceId = t), o;
+    const E = t !== this.lastBlockInstanceId;
+    return e(), E && (this.lastBlockInstanceId = t), E;
   }
-  _GuLabel({ text: e, name: t = "", hint: o }) {
+  _GuLabel({ text: e, name: t = "", hint: E }) {
     return `
             <${n.LABEL}
                 ${$.LABEL.text}="${e}"
                 ${$.LABEL.name}="${t || `${e} Label`}"
-                ${o ? `${$.LABEL.hint}="${o}"` : ""}>
+                ${E ? `${$.LABEL.hint}="${E}"` : ""}>
             </${n.LABEL}>
         `;
   }
@@ -73,7 +73,7 @@ class d extends I {
    * Use in getTemplate() — the icon is registered in a hidden store so Stripo initializes it.
    * Pair with _setInfoMessageValue() in onRender() to set the text content.
    */
-  _GuOnPageMessage({ name: e, icon: t = "not-found", type: o = "info" }) {
+  _GuOnPageMessage({ name: e, icon: t = "not-found", type: E = "info" }) {
     return `
             <div data-info-message="${e}" style="display: none; padding: 16px 16px 0;">
                 <div class="icon-store" style="display: none;">
@@ -81,7 +81,7 @@ class d extends I {
                         ${this._GuIcon({ src: t, className: "icon" })}
                     </div>
                 </div>
-                ${this._GuMessage({ name: e, type: o })}
+                ${this._GuMessage({ name: e, type: E })}
             </div>
         `;
   }
@@ -91,7 +91,7 @@ class d extends I {
    * and combines it with the text in Stripo's alert-message layout.
    */
   _setInfoMessageValue(e, t) {
-    const o = this.getContainer(), E = o.querySelector(`[data-icon-key="${e}"]`), a = E == null ? void 0 : E.querySelector("ue-icon-component"), l = (a == null ? void 0 : a.outerHTML) ?? "";
+    const E = this.getContainer(), o = E.querySelector(`[data-icon-key="${e}"]`), a = o == null ? void 0 : o.querySelector("ue-icon-component"), l = (a == null ? void 0 : a.outerHTML) ?? "";
     this.api.setUIEAttribute(
       e,
       "value",
@@ -104,7 +104,7 @@ class d extends I {
             </div>
             `
     );
-    const T = o.querySelector(`[data-info-message="${e}"]`);
+    const T = E.querySelector(`[data-info-message="${e}"]`);
     T && (T.style.display = "");
   }
   _GuToggle(e) {
@@ -121,59 +121,66 @@ class d extends I {
                 ${$.SELECT_ITEM.value}="${t}">
             </${n.SELECT_ITEM}>`;
   }
-  _GuSelect({ name: e, placeholder: t, options: o, className: E = "es-180w" }) {
+  _GuSelect({
+    name: e,
+    placeholder: t,
+    options: E,
+    className: o = "es-180w",
+    searchable: a = !1
+  }) {
     return `
             <${n.SELECTPICKER}
-                class="${E}"
+                class="${o}"
                 ${$.SELECTPICKER.name}="${e}"
+                ${a ? `${$.SELECTPICKER.searchable}="true"` : ""}
                 ${$.SELECTPICKER.placeholder}="${t}">
-                    ${o.map((a) => this._GuSelectItem(a)).join("")}
+                    ${E.map((l) => this._GuSelectItem(l)).join("")}
             </${n.SELECTPICKER}>
         `;
   }
-  _GuTextInput({ name: e, placeholder: t, className: o = "", disabled: E = !1 }) {
+  _GuTextInput({ name: e, placeholder: t, className: E = "", disabled: o = !1 }) {
     return `
             <${n.TEXT}
-                class=${o}
+                class=${E}
                 ${$.TEXT.name}="${e}"
                 placeholder="${t || e}"
-                ${E ? `${$.TEXT.disabled}="true"` : ""}>
+                ${o ? `${$.TEXT.disabled}="true"` : ""}>
             </${n.TEXT}>
         `;
   }
-  _GuCounter({ name: e, maxValue: t, minValue: o = 1, step: E = 1 }) {
+  _GuCounter({ name: e, maxValue: t, minValue: E = 1, step: o = 1 }) {
     return `
             <${n.COUNTER}
                 ${$.COUNTER.name}="${e}"
-                ${$.COUNTER.minValue}="${o}"
+                ${$.COUNTER.minValue}="${E}"
                 ${$.COUNTER.maxValue}="${t}"
-                ${$.COUNTER.step}="${E}">
+                ${$.COUNTER.step}="${o}">
             </${n.COUNTER}>
         `;
   }
-  _GuRadioButtonItem({ text: e, value: t, icon: o }) {
+  _GuRadioButtonItem({ text: e, value: t, icon: E }) {
     return `
             <${n.RADIO_ITEM}
                 ${$.RADIO_ITEM.value}="${t}"
                 ${e ? `${$.RADIO_ITEM.text}="${e}"` : ""}
-                ${o ? `${$.RADIO_ITEM.icon}="${o}"` : ""}>
+                ${E ? `${$.RADIO_ITEM.icon}="${E}"` : ""}>
             </${n.RADIO_ITEM}>
         `;
   }
-  _GuRadioButton({ name: e, buttons: t, id: o = "" }) {
+  _GuRadioButton({ name: e, buttons: t, id: E = "" }) {
     return `
             <${n.RADIO_BUTTONS}
-                ${o ? `id="${o}"` : ""}
+                ${E ? `id="${E}"` : ""}
                 ${$.RADIO_BUTTONS.name}="${e}">
-                ${t.map((E) => this._GuRadioButtonItem(E)).join("")}
+                ${t.map((o) => this._GuRadioButtonItem(o)).join("")}
             </${n.RADIO_BUTTONS}>
         `;
   }
-  _GuButton({ name: e, label: t, id: o = "" }) {
+  _GuButton({ name: e, label: t, id: E = "" }) {
     return `
             <${n.BUTTON}
                 ${$.BUTTON.name}="${e}"
-                ${o ? `id="${o}"` : ""}
+                ${E ? `id="${E}"` : ""}
                 ${$.BUTTON.caption}="${t}"}>
             </${n.BUTTON}>
         `;
@@ -191,10 +198,10 @@ class d extends I {
    * @param param0
    * @returns It returns a button with an icon.
    */
-  _GuIconButton({ name: e, icon: t, className: o = "" }) {
+  _GuIconButton({ name: e, icon: t, className: E = "" }) {
     return `
             <${n.BUTTON}
-                class="${o}"
+                class="${E}"
                 ${$.BUTTON.name}="${e}"
                 ${$.BUTTON.icon}="${t}">
             </${n.BUTTON}>
@@ -222,19 +229,19 @@ class d extends I {
    * @returns HTML string for the orderable control
    */
   _GuOrderable(e, t) {
-    let o = "";
+    let E = "";
     t.forEach((a) => {
       const l = $.ORDERABLE_ITEM && "name" in $.ORDERABLE_ITEM ? $.ORDERABLE_ITEM.name : "name";
-      o += `
+      E += `
                 <${n.ORDERABLE_ITEM} ${l}="${a.key}">
                     ${a.content}
                 </${n.ORDERABLE_ITEM}>
             `;
     });
-    const E = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
+    const o = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
     return `
-            <${n.ORDERABLE} ${E}="${e}">
-                ${o}
+            <${n.ORDERABLE} ${o}="${e}">
+                ${E}
             </${n.ORDERABLE}>
         `;
   }
@@ -275,16 +282,16 @@ class d extends I {
         `;
   }
   _GuRadioButtons(e, t) {
-    const o = t.map((E) => `
+    const E = t.map((o) => `
                 <${n.RADIO_ITEM}
-                    ${$.RADIO_ITEM.text}="${E.text}"
-                    ${$.RADIO_ITEM.value}="${E.value}">
+                    ${$.RADIO_ITEM.text}="${o.text}"
+                    ${$.RADIO_ITEM.value}="${o.value}">
                 </${n.RADIO_ITEM}>
             `).join("");
     return `
             <${n.RADIO_BUTTONS}
                 ${$.RADIO_BUTTONS.name}="${e}">
-                ${o}
+                ${E}
             </${n.RADIO_BUTTONS}>
         `;
   }

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

@@ -14,8 +14,9 @@ export declare function parseRecommendationVariable(field: string): {
  * `{{recoId_index_attribute}}` variables: the built-in compiler attributes plus
  * each account attribute in its canonical token form — bare for
  * `defaultAttribute`, `product_attribute.<name>` for `productAttribute`. Using
- * `resolveProductAttrValue` (the same producer the block builder uses) keeps the
- * validator's notion of "valid form" identical to what is actually emitted.
+ * `filterToProductAttrValue` (the same producer the block builder uses) keeps the
+ * validator's notion of "valid form" identical to what is actually emitted, and
+ * admits both forms when a default and a custom attribute share a name.
  */
 export declare function buildPartnerAttributeNameSet(filterList: FiltersResponse): Set<string>;
 /**

package/dist/src/config/migrator/recommendation/types.d.ts

@@ -193,6 +193,7 @@ export type PerElementStyles = Record<string, MappedTextStyle | MappedButtonStyl
 export interface MappedComposition {
     composition: string[];
     visibility: Record<string, boolean>;
+    /** Canonical `product-attr` values, mirrored into `data-custom-attributes`. */
     customAttributes: string[];
     /** Mapping of customAttr key → full `product-attr` value. */
     customAttrValues: Record<string, string>;

package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts

@@ -8,6 +8,6 @@
  */
 export { RecommendationBlockId } from './blockIds';
 export { RecommendationControlId } from './controlIds';
-export { BLOCK_ROOT_SELECTOR, CONTAINER_SELECTOR, DESKTOP_CONTAINER_SELECTOR, MOBILE_CONTAINER_SELECTOR, MOBILE_ROW_SELECTOR, CSS_CLASS_RECO_BUTTON, CSS_CLASS_SKIP_COMPILE, RECOMMENDATION_VARIABLE_BUILTIN_ATTRIBUTES, CURRENCY_ATTR, ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON, ATTR_CUSTOM_PREFIX, ATTR_DATA_CUSTOM_ATTRIBUTES, ATTR_PRODUCT_ATTR, PRODUCT_ATTRIBUTE_PREFIX, BUILT_IN_DEFAULT_ATTRIBUTES, } from './selectors';
+export { BLOCK_ROOT_SELECTOR, CONTAINER_SELECTOR, DESKTOP_CONTAINER_SELECTOR, MOBILE_CONTAINER_SELECTOR, MOBILE_ROW_SELECTOR, CSS_CLASS_RECO_BUTTON, CSS_CLASS_SKIP_COMPILE, RECOMMENDATION_VARIABLE_BUILTIN_ATTRIBUTES, CURRENCY_ATTR, ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON, ATTR_CUSTOM_PREFIX, ATTR_DATA_CARD_COMPOSITION, ATTR_DATA_CUSTOM_ATTRIBUTES, ATTR_PRODUCT_ATTR, SELECTOR_ATTRIBUTE_ROW, ATTR_DATA_ATTRIBUTE_TYPE, PRODUCT_ATTRIBUTE_PREFIX, BUILT_IN_DEFAULT_ATTRIBUTES, } from './selectors';
 export { LAYOUT_VALUES, LAYOUT_OPTIONS, DEFAULT_PRODUCTS_PER_ROW, DEFAULT_CARDS_IN_ROW, DEFAULT_MOBILE_CARDS_IN_ROW, MAX_PRODUCT_COUNT, MIN_PRODUCT_COUNT, MAX_PRODUCTS_PER_ROW, MIN_PRODUCTS_PER_ROW, MAX_MOBILE_PRODUCTS_PER_ROW, MIN_MOBILE_PRODUCTS_PER_ROW, DEFAULT_COLUMN_SPACING, DEFAULT_ROW_SPACING, DEFAULT_MOBILE_COLUMN_SPACING, DEFAULT_MOBILE_ROW_SPACING, MIN_SPACING, MAX_SPACING, SPACING_STEP, } from './layout';
 export { DEFAULT_NODE_CONFIG, DEFAULT_CURRENCY, DEFAULT_COMPOSITION, DEFAULT_VISIBILITY, CURRENT_CONFIG_VERSION, EXCLUDED_ALGORITHM_IDS, } from './defaultConfig';

package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts

@@ -66,8 +66,14 @@ export declare const ATTR_PRODUCT_BUTTON = "productButton";
 export declare const ATTR_CUSTOM_PREFIX = "customAttr:";
 /** HTML data attribute storing JSON array of added custom attribute names */
 export declare const ATTR_DATA_CUSTOM_ATTRIBUTES = "data-custom-attributes";
+/** HTML data attribute on the block root holding the comma-joined composition order */
+export declare const ATTR_DATA_CARD_COMPOSITION = "data-card-composition";
 /** HTML attribute on <td> elements identifying the product attribute for compiler template variable generation */
 export declare const ATTR_PRODUCT_ATTR = "product-attr";
+/** Row wrapper of one composition entry inside a product card */
+export declare const SELECTOR_ATTRIBUTE_ROW = ".recommendation-attribute-row";
+/** HTML attribute on an attribute row holding its composition key */
+export declare const ATTR_DATA_ATTRIBUTE_TYPE = "data-attribute-type";
 /** Prefix `resolveProductAttrValue` puts on custom (non-default) product attributes in `product-attr` values */
 export declare const PRODUCT_ATTRIBUTE_PREFIX = "product_attribute.";
 /**

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

@@ -29,6 +29,8 @@ export declare class RecommendationCardCompositionControl extends CommonControl
     private _initializeComposition;
     private _registerValueChangeListeners;
     private _readCompositionFromNode;
+    /** Upgrades legacy bare-name custom keys to the canonical form. (SD-147101) */
+    private _normalizeComposition;
     private _readCustomAttributesFromNode;
     private _readVisibilityFromRows;
     private _getDefaultVisibilities;
@@ -61,7 +63,15 @@ export declare class RecommendationCardCompositionControl extends CommonControl
     private _createPriceGroupItemHtml;
     private _createCustomItemHtml;
     /**
-     * Builds select options from the store's filterList.
+     * Dropdown label of an attribute. A partner can own a default and a custom
+     * attribute under the same name; the type is spelled out only then, so partners
+     * without a collision keep clean labels. (SD-147101)
+     */
+    private _toOptionLabel;
+    /**
+     * Builds select options from the store's filterList. Option values are
+     * `product-attr` values, so a default attribute and a same-named custom one
+     * never collapse onto a single option. (SD-147101)
      * Falls back to a single option for the currently selected attribute.
      */
     private _getSelectOptions;
@@ -144,6 +154,12 @@ export declare class RecommendationCardCompositionControl extends CommonControl
      */
     private _onCustomAttributeChanged;
     private _onReorder;
+    /**
+     * Outer HTML of an existing attribute row, rewritten to the canonical key when
+     * the row still carries a legacy bare-name one. Copying rows this way lets the
+     * DOM converge on the next composition change without writing on open.
+     */
+    private _getExistingRowHtml;
     private _injectCustomAttributeHtml;
     private _injectGridAttributeRow;
     private _injectListAttributeRow;
@@ -204,13 +220,19 @@ export declare class RecommendationCardCompositionControl extends CommonControl
      */
     private _subscribeToStoreChanges;
     /**
-     * Returns filters eligible for the custom attribute dropdown,
-     * excluding default attributes already covered by built-in toggle items.
+     * Returns filters eligible for the custom attribute dropdown, excluding default
+     * attributes already covered by built-in toggle items.
+     *
+     * Deduped by canonical value: a partner can own two backend rows of the same type
+     * and name (e.g. two `defaultAttribute` "discount"), which are indistinguishable
+     * once reduced to a `product-attr`. Left in, they render as identical options and
+     * skew the collision count that decides the (Default)/(Custom) suffix. (SD-147101)
      */
     private _getAddableFilters;
     /**
-     * Looks up the display name for an attribute from the store's filterList.
-     * Falls back to Title Case conversion of the snake_case attribute name.
+     * Looks up the display name for a `product-attr` value from the store's filterList.
+     * Matches on the canonical value, so a default and a same-named custom attribute
+     * resolve to their own entry. Falls back to Title Case of the bare name.
      */
     private _getDisplayNameForAttribute;
     /**