@useinsider/guido 3.0.0-beta.7a5aecd → 3.0.0-beta.7d3a300

package/dist/extensions/Blocks/Recommendation/settingsPanel.js

@@ -1,8 +1,8 @@
-import { SettingsPanelRegistry as S, SettingsPanelTab as I, SettingsTab as T, ContainerControls as E, TextControls as C } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { SettingsPanelRegistry as S, SettingsPanelTab as _, SettingsTab as O, ContainerControls as E, TextControls as C } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { BLOCK_ID as R } from "./block.js";
 import { RecommendationBlockId as N } from "./constants/blockIds.js";
-import { RecommendationControlId as _ } from "./constants/controlIds.js";
-import { CONTROL_BLOCK_ID as L } from "./controls/main/index.js";
+import { RecommendationControlId as T } from "./constants/controlIds.js";
+import { CONTROL_BLOCK_ID as U } from "./controls/main/index.js";
 import "./store/recommendation.js";
 import "./controls/name/index.js";
 import "./controls/price/index.js";
@@ -11,163 +11,181 @@ import "./controls/omnibusPrice/index.js";
 import "./controls/omnibusDiscount/index.js";
 import "./controls/button/index.js";
 import "./controls/image/index.js";
-import { SPACING_CONTROL_ID as U } from "./controls/spacing/index.js";
-import { CARD_BACKGROUND_COLOR_CONTROL_ID as B } from "./controls/cardBackground/index.js";
+import { SPACING_CONTROL_ID as A } from "./controls/spacing/index.js";
+import { CARD_BACKGROUND_COLOR_CONTROL_ID as L } from "./controls/cardBackground/index.js";
 import { LAYOUT_CONTROL_ID as D } from "./controls/layout/index.js";
-import { COMPOSITION_CONTROL_BLOCK_ID as A } from "./controls/cardComposition/index.js";
-class s extends S {
-  registerBlockControls(O) {
-    O[R] = [
-      new I(
-        T.SETTINGS,
-        [
-          L,
+import { COMPOSITION_CONTROL_BLOCK_ID as B } from "./controls/cardComposition/index.js";
+class d extends S {
+  registerBlockControls(I) {
+    I[R] = [
+      new _(
+        O.SETTINGS,
+        [
+          U,
           E.EXTERNAL_INDENTS
         ]
       ),
-      new I(
-        T.STYLES,
+      new _(
+        O.STYLES,
         [
           C.TEXT_BLOCK_BACKGROUND_COLOR,
-          B,
+          L,
           D,
-          U
+          A
         ]
       ),
-      new I(
+      new _(
         "Card Composition",
         [
-          A
+          B
         ]
       ).withLabel("Card Composition")
-    ], O[N.NAME] = [
-      new I(
-        T.SETTINGS,
+    ], I[N.NAME] = [
+      new _(
+        O.SETTINGS,
+        [
+          T.NAME_STYLE,
+          T.NAME_ALIGN,
+          T.NAME_TEXT_TRIM,
+          T.NAME_PADDINGS
+        ]
+      ),
+      new _(
+        O.STYLES,
+        [
+          T.NAME_BACKGROUND,
+          T.NAME_FONT_FAMILY,
+          T.NAME_SIZE,
+          T.NAME_COLOR
+        ]
+      )
+    ], I[N.PRICE] = [
+      new _(
+        O.SETTINGS,
         [
-          _.NAME_STYLE,
-          _.NAME_ALIGN,
-          _.NAME_TEXT_TRIM,
-          _.NAME_PADDINGS
+          T.PRICE_STYLE,
+          T.PRICE_ALIGN,
+          T.PRICE_PADDINGS
         ]
       ),
-      new I(
-        T.STYLES,
+      new _(
+        O.STYLES,
         [
-          _.NAME_BACKGROUND,
-          _.NAME_FONT_FAMILY,
-          _.NAME_SIZE,
-          _.NAME_COLOR
+          T.PRICE_BACKGROUND,
+          T.PRICE_FONT_FAMILY,
+          T.PRICE_SIZE,
+          T.PRICE_COLOR
         ]
       )
-    ], O[N.PRICE] = [
-      new I(
-        T.SETTINGS,
+    ], I[N.OLD_PRICE] = [
+      new _(
+        O.SETTINGS,
         [
-          _.PRICE_STYLE,
-          _.PRICE_ALIGN,
-          _.PRICE_PADDINGS
+          T.OLD_PRICE_STYLE,
+          T.OLD_PRICE_ALIGN,
+          T.OLD_PRICE_PADDINGS
         ]
       ),
-      new I(
-        T.STYLES,
+      new _(
+        O.STYLES,
         [
-          _.PRICE_BACKGROUND,
-          _.PRICE_FONT_FAMILY,
-          _.PRICE_SIZE,
-          _.PRICE_COLOR
+          T.OLD_PRICE_BACKGROUND,
+          T.OLD_PRICE_FONT_FAMILY,
+          T.OLD_PRICE_SIZE,
+          T.OLD_PRICE_COLOR
         ]
       )
-    ], O[N.OLD_PRICE] = [
-      new I(
-        T.SETTINGS,
+    ], I[N.OMNIBUS_PRICE] = [
+      new _(
+        O.SETTINGS,
         [
-          _.OLD_PRICE_STYLE,
-          _.OLD_PRICE_ALIGN,
-          _.OLD_PRICE_PADDINGS
+          T.OMNIBUS_PRICE_TEXT_BEFORE,
+          T.OMNIBUS_PRICE_TEXT_AFTER,
+          T.OMNIBUS_PRICE_STYLE,
+          T.OMNIBUS_PRICE_ALIGN,
+          T.OMNIBUS_PRICE_PADDINGS
         ]
       ),
-      new I(
-        T.STYLES,
+      new _(
+        O.STYLES,
         [
-          _.OLD_PRICE_BACKGROUND,
-          _.OLD_PRICE_FONT_FAMILY,
-          _.OLD_PRICE_SIZE,
-          _.OLD_PRICE_COLOR
+          T.OMNIBUS_PRICE_BACKGROUND,
+          T.OMNIBUS_PRICE_FONT_FAMILY,
+          T.OMNIBUS_PRICE_SIZE,
+          T.OMNIBUS_PRICE_COLOR
         ]
       )
-    ], O[N.OMNIBUS_PRICE] = [
-      new I(
-        T.SETTINGS,
+    ], I[N.OMNIBUS_DISCOUNT] = [
+      new _(
+        O.SETTINGS,
         [
-          _.OMNIBUS_PRICE_TEXT_BEFORE,
-          _.OMNIBUS_PRICE_TEXT_AFTER,
-          _.OMNIBUS_PRICE_STYLE,
-          _.OMNIBUS_PRICE_ALIGN,
-          _.OMNIBUS_PRICE_PADDINGS
+          T.OMNIBUS_DISCOUNT_TEXT_BEFORE,
+          T.OMNIBUS_DISCOUNT_TEXT_AFTER,
+          T.OMNIBUS_DISCOUNT_STYLE,
+          T.OMNIBUS_DISCOUNT_ALIGN,
+          T.OMNIBUS_DISCOUNT_PADDINGS
         ]
       ),
-      new I(
-        T.STYLES,
+      new _(
+        O.STYLES,
         [
-          _.OMNIBUS_PRICE_BACKGROUND,
-          _.OMNIBUS_PRICE_FONT_FAMILY,
-          _.OMNIBUS_PRICE_SIZE,
-          _.OMNIBUS_PRICE_COLOR
+          T.OMNIBUS_DISCOUNT_BACKGROUND,
+          T.OMNIBUS_DISCOUNT_FONT_FAMILY,
+          T.OMNIBUS_DISCOUNT_SIZE,
+          T.OMNIBUS_DISCOUNT_COLOR
         ]
       )
-    ], O[N.OMNIBUS_DISCOUNT] = [
-      new I(
-        T.SETTINGS,
+    ], I[N.BUTTON] = [
+      new _(
+        O.SETTINGS,
         [
-          _.OMNIBUS_DISCOUNT_TEXT_BEFORE,
-          _.OMNIBUS_DISCOUNT_TEXT_AFTER,
-          _.OMNIBUS_DISCOUNT_STYLE,
-          _.OMNIBUS_DISCOUNT_ALIGN,
-          _.OMNIBUS_DISCOUNT_PADDINGS
+          T.BUTTON_TEXT,
+          T.BUTTON_ALIGN,
+          T.BUTTON_PADDINGS,
+          T.BUTTON_MARGINS
         ]
       ),
-      new I(
-        T.STYLES,
+      new _(
+        O.STYLES,
         [
-          _.OMNIBUS_DISCOUNT_BACKGROUND,
-          _.OMNIBUS_DISCOUNT_FONT_FAMILY,
-          _.OMNIBUS_DISCOUNT_SIZE,
-          _.OMNIBUS_DISCOUNT_COLOR
+          T.BUTTON_COLOR,
+          T.BUTTON_FONT_FAMILY,
+          T.BUTTON_TEXT_SIZE,
+          T.BUTTON_TEXT_STYLE_AND_FONT_COLOR,
+          T.BUTTON_FIT_TO_CONTENT,
+          T.BUTTON_BORDER_RADIUS,
+          T.BUTTON_BORDER
         ]
       )
-    ], O[N.BUTTON] = [
-      new I(
-        T.SETTINGS,
+    ], I[N.CUSTOM_ATTRIBUTE] = [
+      new _(
+        O.SETTINGS,
         [
-          _.BUTTON_TEXT,
-          _.BUTTON_ALIGN,
-          _.BUTTON_PADDINGS,
-          _.BUTTON_MARGINS
+          T.CUSTOM_ATTR_STYLE,
+          T.CUSTOM_ATTR_ALIGN,
+          T.CUSTOM_ATTR_PADDINGS
         ]
       ),
-      new I(
-        T.STYLES,
+      new _(
+        O.STYLES,
         [
-          _.BUTTON_COLOR,
-          _.BUTTON_FONT_FAMILY,
-          _.BUTTON_TEXT_SIZE,
-          _.BUTTON_TEXT_STYLE_AND_FONT_COLOR,
-          _.BUTTON_FIT_TO_CONTENT,
-          _.BUTTON_BORDER_RADIUS,
-          _.BUTTON_BORDER
+          T.CUSTOM_ATTR_BACKGROUND,
+          T.CUSTOM_ATTR_FONT_FAMILY,
+          T.CUSTOM_ATTR_SIZE,
+          T.CUSTOM_ATTR_COLOR
         ]
       )
-    ], O[N.IMAGE] = [
-      new I(
-        T.SETTINGS,
+    ], I[N.IMAGE] = [
+      new _(
+        O.SETTINGS,
         [
-          _.IMAGE_SIZE,
-          _.IMAGE_MARGINS
+          T.IMAGE_SIZE,
+          T.IMAGE_MARGINS
         ]
       )
     ];
   }
 }
 export {
-  s as SettingsPanel
+  d as SettingsPanel
 };

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

@@ -5,11 +5,11 @@ import { defineStore as G } from "pinia";
 import { DEFAULT_CARDS_IN_ROW as F } from "../constants/layout.js";
 import { EXCLUDED_ALGORITHM_IDS as w } from "../constants/defaultConfig.js";
 import { getDefaultProducts as S } from "../templates/utils.js";
-import { generateCompleteFilterQuery as I } from "../utils/filterUtil.js";
+import { generateCompleteFilterQuery as b } from "../utils/filterUtil.js";
 import { isFilterValid as D } from "../validation/filterSchema.js";
 const h = y();
 let u = null, m = null, d = null;
-function b() {
+function I() {
   return {
     cardsInRow: F,
     currencySettings: {
@@ -32,12 +32,13 @@ function b() {
     strategy: "mostPopular",
     textTrimming: !0,
     unresponsive: !1,
-    size: "6"
+    size: "6",
+    customAttributes: []
   };
 }
 function P() {
   return {
-    recommendationConfigs: b(),
+    recommendationConfigs: I(),
     recommendationProducts: [],
     filterStatus: !1,
     filterSelectionDrawerStatus: !1,
@@ -66,7 +67,7 @@ const v = () => ({
      * This allows all existing code that reads `store.recommendationConfigs` to work unchanged.
      */
     recommendationConfigs(t) {
-      return t.currentRecommendationId !== null && t.blockStates[t.currentRecommendationId] ? t.blockStates[t.currentRecommendationId].recommendationConfigs : b();
+      return t.currentRecommendationId !== null && t.blockStates[t.currentRecommendationId] ? t.blockStates[t.currentRecommendationId].recommendationConfigs : I();
     },
     /**
      * Proxy getter: delegates to blockStates[currentRecommendationId].recommendationProducts
@@ -352,7 +353,7 @@ const v = () => ({
       }), r.recommendationConfigs.filters = e;
     },
     generateFilterQuery() {
-      return I(this.recommendationConfigs.filters);
+      return b(this.recommendationConfigs.filters);
     },
     // ====================================================================
     // Per-Block Product Fetching
@@ -373,7 +374,7 @@ const v = () => ({
     },
     async _doFetchProducts() {
       var p;
-      const t = this.currentRecommendationId, r = this.blockStates[t], { recommendationConfigs: e } = r, n = e.filters.filter((a) => a.isValid), c = I(n), i = ((p = g.find((a) => a.key === e.strategy)) == null ? void 0 : p.path) || "", o = C(), s = {
+      const t = this.currentRecommendationId, r = this.blockStates[t], { recommendationConfigs: e } = r, n = e.filters.filter((a) => a.isValid), c = b(n), i = ((p = g.find((a) => a.key === e.strategy)) == null ? void 0 : p.path) || "", o = C(), s = {
         locale: e.language,
         currency: e.currencySettings.value,
         partnerName: o.partnerName,

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

@@ -1,11 +1,11 @@
 import { RecommendationBlockId as s } from "../../constants/blockIds.js";
-import { ATTR_PRODUCT_BUTTON as b, ATTR_PRODUCT_OMNIBUS_DISCOUNT as u, ATTR_PRODUCT_OMNIBUS_PRICE as m, ATTR_PRODUCT_OLD_PRICE as h, ATTR_PRODUCT_PRICE as y, ATTR_PRODUCT_NAME as f, ATTR_PRODUCT_IMAGE as x } from "../../constants/selectors.js";
-import { useRecommendationExtensionStore as T } from "../../store/recommendation.js";
-import { formatPrice as _ } from "../../utils/priceFormatter.js";
-import { sanitizeImageUrl as $ } from "../utils.js";
-const a = "0 5px", o = "attribute-cell";
+import { ATTR_PRODUCT_ATTR as g, ATTR_PRODUCT_BUTTON as u, ATTR_PRODUCT_OMNIBUS_DISCOUNT as m, ATTR_PRODUCT_OMNIBUS_PRICE as h, ATTR_PRODUCT_OLD_PRICE as y, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_NAME as f, ATTR_PRODUCT_IMAGE as _ } from "../../constants/selectors.js";
+import { useRecommendationExtensionStore as x } from "../../store/recommendation.js";
+import { formatPrice as $ } from "../../utils/priceFormatter.js";
+import { sanitizeImageUrl as C, CUSTOM_CELL_HTML as R } from "../utils.js";
+const a = "0 5px", l = "attribute-cell";
 function p() {
-  const t = T(), { currencySettings: e } = t.recommendationConfigs;
+  const t = x(), { currencySettings: e } = t.recommendationConfigs;
   return {
     code: e.value,
     symbol: e.symbol,
@@ -15,16 +15,16 @@ function p() {
     thousandSeparator: e.thousandSeparator
   };
 }
-function c(t, e = "price") {
-  const n = p(), l = t[e], r = (l == null ? void 0 : l[n.code]) ?? Object.values(l ?? {})[0] ?? 0;
-  return _({
-    price: r,
-    currency: n
+function r(t, e = "price") {
+  const o = p(), n = t[e], d = (n == null ? void 0 : n[o.code]) ?? Object.values(n ?? {})[0] ?? 0;
+  return $({
+    price: d,
+    currency: o
   });
 }
-const P = {
-  [x]: (t) => `
-        <td class="${o}" style="padding: ${a}; height: 100%;" valign="top">
+const I = {
+  [_]: (t) => `
+        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -40,7 +40,7 @@ const P = {
                             esd-extension-block-id="${s.IMAGE}">
                             <a target="_blank" href="${t.url}">
                                 <img
-                                    src="${$(t.image_url)}"
+                                    src="${C(t.image_url)}"
                                     alt="${t.name}"
                                     style="display: block; max-width: 100%; height: auto;"
                                     class="adapt-img">
@@ -52,7 +52,7 @@ const P = {
         </td>
     `,
   [f]: (t) => `
-        <td class="${o}" style="padding: ${a}; height: 100%;" valign="middle">
+        <td class="${l}" style="padding: ${a}; height: 100%;" valign="middle">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -76,8 +76,8 @@ const P = {
             </table>
         </td>
     `,
-  [y]: (t) => `
-        <td class="${o}" style="padding: ${a}; height: 100%;" valign="top">
+  [T]: (t) => `
+        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -92,7 +92,7 @@ const P = {
                             align="center"
                             esd-extension-block-id="${s.PRICE}">
                             <p contenteditable="false" style="font-size: 16px; color: #333333;">
-                                <strong>${c(t, "price")}</strong>
+                                <strong>${r(t, "price")}</strong>
                             </p>
                         </td>
                     </tr>
@@ -100,8 +100,8 @@ const P = {
             </table>
         </td>
     `,
-  [h]: (t) => `
-        <td class="${o}" style="padding: ${a}; height: 100%;" valign="top">
+  [y]: (t) => `
+        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -116,7 +116,7 @@ const P = {
                             align="center"
                             esd-extension-block-id="${s.OLD_PRICE}">
                             <p contenteditable="false" style="font-size: 14px; color: #999999;">
-                                <strong>${c(t, "original_price")}</strong>
+                                <strong>${r(t, "original_price")}</strong>
                             </p>
                         </td>
                     </tr>
@@ -124,8 +124,8 @@ const P = {
             </table>
         </td>
     `,
-  [m]: (t) => `
-        <td class="${o}" style="padding: ${a}; height: 100%;" valign="top">
+  [h]: (t) => `
+        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -143,7 +143,7 @@ const P = {
                             esd-extension-block-id="${s.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">${c(t, "original_price")}</span>
+                                <span class="omnibus-price-value">${r(t, "original_price")}</span>
                                 <span class="omnibus-text-after"></span>
                             </p>
                         </td>
@@ -152,11 +152,11 @@ const P = {
             </table>
         </td>
     `,
-  [u]: (t) => {
-    var d, i;
-    const e = p(), n = ((d = t.original_price) == null ? void 0 : d[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, l = ((i = t.price) == null ? void 0 : i[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, r = n > 0 ? Math.round((n - l) / n * 100) : 0, g = r > 0 ? `-${r}%` : "0%";
+  [m]: (t) => {
+    var c, i;
+    const e = p(), o = ((c = t.original_price) == null ? void 0 : c[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, n = ((i = t.price) == null ? void 0 : i[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="${o}" style="padding: ${a}; height: 100%;" valign="top">
+        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -174,7 +174,7 @@ const P = {
                             esd-extension-block-id="${s.OMNIBUS_DISCOUNT}">
                             <p contenteditable="false" style="font-size: 12px; color: #666666;">
                                 <span class="omnibus-text-before"></span>
-                                <span class="omnibus-discount-value">${g}</span>
+                                <span class="omnibus-discount-value">${b}</span>
                                 <span class="omnibus-text-after"></span>
                             </p>
                         </td>
@@ -184,8 +184,8 @@ const P = {
         </td>
     `;
   },
-  [b]: () => `
-        <td class="${o}" style="padding: ${a}; height: 100%;" valign="top">
+  [u]: () => `
+        <td class="${l}" style="padding: ${a}; height: 100%;" valign="top">
             <table
                 class="product-card-segment"
                 width="100%"
@@ -219,10 +219,39 @@ const P = {
                 </tbody>
             </table>
         </td>
+    `,
+  /**
+   * Custom attribute cell template — same structure as built-in entries
+   * (outer td → inner product-card-segment table).
+   * Used by `buildElementRenderer` for `customAttr:*` composition entries.
+   */
+  [R]: (t, e) => `
+        <td class="${l}" style="padding: ${a}; height: 100%;" valign="middle">
+            <table
+                class="product-card-segment"
+                width="100%"
+                height="100%"
+                cellpadding="0"
+                cellspacing="0"
+                border="0"
+                style="table-layout: fixed;">
+                <tbody>
+                    <tr valign="top">
+                        <td
+                            ${g}="product_attribute.${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}">
+                            <p contenteditable="false" style="font-size: 12px; color: #666666;">${e}</p>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </td>
     `
 };
 export {
-  o as ATTRIBUTE_CELL_CLASS,
+  l as ATTRIBUTE_CELL_CLASS,
   a as DEFAULT_CELL_PADDING,
-  P as gridElementRenderer
+  I as gridElementRenderer
 };

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

@@ -1,7 +1,7 @@
-import { DEFAULT_PRODUCTS_PER_ROW as m, DEFAULT_MOBILE_CARDS_IN_ROW as I } from "../../constants/layout.js";
-import { DEFAULT_CARD_COMPOSITION as _, spacer as E, getDefaultProducts as S, createBlockTemplate as A, DEFAULTS as b, DEFAULT_CARD_VISIBILITY as D } from "../utils.js";
-import { gridElementRenderer as w, ATTRIBUTE_CELL_CLASS as C, DEFAULT_CELL_PADDING as f } from "./elementRenderer.js";
-const O = `
+import { DEFAULT_PRODUCTS_PER_ROW as m, DEFAULT_MOBILE_CARDS_IN_ROW as E } from "../../constants/layout.js";
+import { DEFAULT_CARD_COMPOSITION as I, spacer as _, getDefaultProducts as S, createBlockTemplate as b, DEFAULTS as A, buildElementRenderer as D, DEFAULT_CARD_VISIBILITY as w } from "../utils.js";
+import { gridElementRenderer as f, ATTRIBUTE_CELL_CLASS as C, DEFAULT_CELL_PADDING as O } from "./elementRenderer.js";
+const U = `
     <tr class="recommendation-product-row">
         <td>
             <table
@@ -18,7 +18,7 @@ const O = `
             </table>
         </td>
     </tr>
-`, U = `
+`, g = `
     <tr
         class="recommendation-attribute-row"
         data-attribute-type="{-{-ATTR_TYPE-}-}"
@@ -27,40 +27,37 @@ const O = `
         {-{-CELLS-}-}
     </tr>
 `;
-function g(t, e, r, n = _) {
-  const c = (100 / e).toFixed(2), s = e - t.length, o = `<td class="${C}" style="padding: ${f};" width="${c}%"></td>`, i = s > 0 ? o.repeat(s) : "";
-  return n.filter((l) => r[l]).map((l) => {
-    const p = D[l] ?? !0, T = p ? "" : 'style="display: none;"', u = t.map((R) => {
-      const L = r[l];
-      return L(R).replace("<td", `<td width="${c}%"`);
-    }).join("");
-    return U.replace("{-{-ATTR_TYPE-}-}", l).replace("{-{-VISIBILITY-}-}", p ? "1" : "0").replace("{-{-DISPLAY_STYLE-}-}", T).replace("{-{-CELLS-}-}", u + i);
+function P(t, e, l, o = I) {
+  const n = (100 / e).toFixed(2), c = e - t.length, r = `<td class="${C}" style="padding: ${O};" width="${n}%"></td>`, i = c > 0 ? r.repeat(c) : "", a = D(l, o);
+  return o.filter((s) => a[s]).map((s) => {
+    const p = w[s] ?? !0, u = p ? "" : 'style="display: none;"', R = t.map((L) => a[s](L).replace("<td", `<td width="${n}%"`)).join("");
+    return g.replace("{-{-ATTR_TYPE-}-}", s).replace("{-{-VISIBILITY-}-}", p ? "1" : "0").replace("{-{-DISPLAY_STYLE-}-}", u).replace("{-{-CELLS-}-}", R + i);
   }).join("");
 }
-function P(t, e, r, n) {
-  const c = [];
-  for (let o = 0; o < t.length; o += e)
-    c.push(t.slice(o, o + e));
-  return c.map((o, i) => {
-    const a = g(
-      o,
-      e,
+function h(t, e, l, o) {
+  const n = [];
+  for (let r = 0; r < t.length; r += e)
+    n.push(t.slice(r, r + e));
+  return n.map((r, i) => {
+    const a = P(
       r,
-      n
-    ), l = O.replace("{-{-ATTRIBUTE_ROWS-}-}", a);
-    return i > 0 ? E + l : l;
+      e,
+      l,
+      o
+    ), d = U.replace("{-{-ATTRIBUTE_ROWS-}-}", a);
+    return i > 0 ? _ + d : d;
   }).join("");
 }
-function d(t, e, r) {
-  return P(t, e, w, r);
+function T(t, e, l) {
+  return h(t, e, f, l);
 }
-function W(t) {
-  const e = t ? `ins-recommendation-v3-block-${t}` : void 0, r = A("grid", e), n = S(), c = d(n, m), s = d(n, I);
-  return r.replace("{-{-TITLE-}-}", b.TITLE).replace("{-{-PRODUCT_ROWS-}-}", c).replace("{-{-MOBILE_PRODUCT_ROWS-}-}", s);
+function F(t) {
+  const e = t ? `ins-recommendation-v3-block-${t}` : void 0, l = b("grid", e), o = S(), n = T(o, m), c = T(o, E);
+  return l.replace("{-{-TITLE-}-}", A.TITLE).replace("{-{-PRODUCT_ROWS-}-}", n).replace("{-{-MOBILE_PRODUCT_ROWS-}-}", c);
 }
 export {
-  W as getDefaultTemplate,
-  g as prepareGridAttributeRows,
-  P as prepareGridProductRows,
-  d as prepareProductRows
+  F as getDefaultTemplate,
+  P as prepareGridAttributeRows,
+  h as prepareGridProductRows,
+  T as prepareProductRows
 };

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

@@ -1,12 +1,12 @@
 import { DEFAULT_PRODUCTS_PER_ROW as s } from "../constants/layout.js";
-import { prepareProductRows as R } from "./grid/template.js";
-import { prepareProductRows as c } from "./list/template.js";
-function a(r, o, p = {}) {
-  if (o === "list")
-    return c(r);
-  const { productsPerRow: t = s, composition: e } = p;
-  return R(r, t, e);
+import { prepareProductRows as c } from "./grid/template.js";
+import { prepareProductRows as i } from "./list/template.js";
+function P(r, p, o = {}) {
+  if (p === "list")
+    return i(r, o.composition);
+  const { productsPerRow: t = s, composition: e } = o;
+  return c(r, t, e);
 }
 export {
-  a as prepareProductRows
+  P as prepareProductRows
 };