@useinsider/guido 2.1.0-beta.2ad77c6 → 2.1.0-beta.2d0ecb3

package/dist/config/migrator/itemsBlockMigrator.js

@@ -1,8 +1,8 @@
-var B = Object.defineProperty;
-var U = (e, t, r) => t in e ? B(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
-var M = (e, t, r) => U(e, typeof t != "symbol" ? t + "" : t, r);
-import { productPairs as v } from "../../extensions/Blocks/Items/enums/productEnums.js";
-import { ItemInCartOptions as E, DefaultConfigValues as g, SETTINGS_ENUMS as u } from "../../extensions/Blocks/Items/enums/settingsEnums.js";
+var v = Object.defineProperty;
+var B = (e, t, r) => t in e ? v(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var M = (e, t, r) => B(e, typeof t != "symbol" ? t + "" : t, r);
+import { productPairs as U } from "../../extensions/Blocks/Items/enums/productEnums.js";
+import { ItemInCartOptions as T, DefaultConfigValues as g, SETTINGS_ENUMS as u } from "../../extensions/Blocks/Items/enums/settingsEnums.js";
 import { getDefaultTemplate as K } from "../../extensions/Blocks/Items/template.js";
 const w = {
   img: {
@@ -85,18 +85,19 @@ function q(e) {
   }[e] || u.ITEMS_TYPE.CART_ITEMS : u.ITEMS_TYPE.CART_ITEMS;
 }
 function R(e) {
-  const t = (a, o) => a == null ? o : a === "1" || a === "true", r = (a, o) => a || o, c = e["data-type"] || e["data-source"], i = q(c);
-  let n = e["data-cart_items_select_control_value"] || g.cartItemsSelectControlValue;
-  if (n && !n.includes("{{") && /^\d+$/.test(n)) {
-    const a = parseInt(n) - 1, o = E[i];
-    o && o[a] && (n = o[a].value);
+  var a;
+  const t = (_, c) => _ == null ? c : _ === "1" || _ === "true", r = (_, c) => _ || c, l = e["data-type"] || e["data-source"], i = q(l), n = T[i];
+  let o = e["data-cart_items_select_control_value"] || ((a = n == null ? void 0 : n[0]) == null ? void 0 : a.value) || g.cartItemsSelectControlValue;
+  if (o && !o.includes("{{") && /^\d+$/.test(o)) {
+    const _ = parseInt(o) - 1, c = T[i];
+    c && c[_] && (o = c[_].value);
   }
   return {
     initialized: !0,
     blockInstanceId: r(e["data-block-instance-id"], F()),
     source: i,
     type: i,
-    itemsSelectValue: n,
+    itemsSelectValue: o,
     orientation: e["data-card_orientation_control_value"] || u.ORIENTATION.VERTICAL,
     nameTrimming: t(e["data-product_name_control_trim"], !0),
     priceHideDiscount: t(e["data-product_price_control_nodup"], !0),
@@ -154,36 +155,36 @@ class V {
     try {
       let r = this.removeJinjaConditionals(t);
       r = this.replaceTemplateVariables(r);
-      const c = this.parser.parseFromString(r, "text/html"), i = c.querySelectorAll(
+      const l = this.parser.parseFromString(r, "text/html"), i = l.querySelectorAll(
         "td.esd-cart-items-block, td.esd-browsed-items-block, td.esd-purchased-items-block"
       );
       return i.length === 0 ? (console.warn("ItemsBlockMigrator: No blocks found with items block selectors"), r) : (i.forEach((n) => {
-        const a = this.extractConfiguration(n), o = K({
-          orientation: a.orientation,
-          itemsType: a.itemsType,
-          itemId: a.itemId,
-          currencySymbol: a.currencySymbol,
-          currencyLocation: a.currencyLocation,
-          formattedPrice: a.formattedPrice,
-          configBlockAttributes: a.configBlockAttributes,
+        const o = this.extractConfiguration(n), a = K({
+          orientation: o.orientation,
+          itemsType: o.itemsType,
+          itemId: o.itemId,
+          currencySymbol: o.currencySymbol,
+          currencyLocation: o.currencyLocation,
+          formattedPrice: o.formattedPrice,
+          configBlockAttributes: o.configBlockAttributes,
           migrate: !0,
-          nameStyles: a.nameStyles,
-          buttonStyles: a.buttonStyles,
-          priceStyles: a.priceStyles,
-          originalPriceStyles: a.originalPriceStyles,
-          quantityStyles: a.quantityStyles,
-          nodeConfig: R(a.configBlockAttributes)
-        }), l = this.parser.parseFromString(
-          `<table><tbody><tr>${o}</tr></tbody></table>`,
+          nameStyles: o.nameStyles,
+          buttonStyles: o.buttonStyles,
+          priceStyles: o.priceStyles,
+          originalPriceStyles: o.originalPriceStyles,
+          quantityStyles: o.quantityStyles,
+          nodeConfig: R(o.configBlockAttributes)
+        }), c = this.parser.parseFromString(
+          `<table><tbody><tr>${a}</tr></tbody></table>`,
           "text/html"
         ).querySelector("td");
-        if (l && n.parentNode) {
-          const f = R(a.configBlockAttributes);
-          l.setAttribute("esd-ext-config", JSON.stringify(f));
-          const d = l.querySelector("esd-config-block");
-          d && d.remove(), n.parentNode.replaceChild(l, n);
+        if (c && n.parentNode) {
+          const f = R(o.configBlockAttributes);
+          c.setAttribute("esd-ext-config", JSON.stringify(f));
+          const d = c.querySelector("esd-config-block");
+          d && d.remove(), n.parentNode.replaceChild(c, n);
         }
-      }), c.documentElement.outerHTML);
+      }), l.documentElement.outerHTML);
     } catch (r) {
       return console.error("ItemsBlockMigrator failed:", r), t;
     }
@@ -196,14 +197,14 @@ class V {
    */
   extractConfiguration(t) {
     var C, D, P;
-    const r = ((C = t.querySelector("[data-type]")) == null ? void 0 : C.getAttribute("data-type")) || "CART_ITEMS", c = ((D = t.querySelector("[data-number]")) == null ? void 0 : D.getAttribute("data-number")) || "1", i = parseInt(c) - 1, n = E[r], a = ((P = n == null ? void 0 : n[i]) == null ? void 0 : P.value) || n[0].value, o = t.querySelector('[product-attr="price"]'), _ = (o == null ? void 0 : o.getAttribute("data-currency_symbol")) || "USD", f = ((o == null ? void 0 : o.getAttribute("data-curency")) || "before") === "after" ? "1" : "0", d = (o == null ? void 0 : o.getAttribute("data-formated")) !== "false", s = this.extractConfigBlockAttributes(t, r, c), S = s["data-card_orientation_control_value"];
+    const r = ((C = t.querySelector("[data-type]")) == null ? void 0 : C.getAttribute("data-type")) || "CART_ITEMS", l = ((D = t.querySelector("[data-number]")) == null ? void 0 : D.getAttribute("data-number")) || "1", i = parseInt(l) - 1, n = T[r], o = ((P = n == null ? void 0 : n[i]) == null ? void 0 : P.value) || n[0].value, a = t.querySelector('[product-attr="price"]'), _ = (a == null ? void 0 : a.getAttribute("data-currency_symbol")) || "USD", f = ((a == null ? void 0 : a.getAttribute("data-curency")) || "before") === "after" ? "1" : "0", d = (a == null ? void 0 : a.getAttribute("data-formated")) !== "false", s = this.extractConfigBlockAttributes(t, r, l), S = s["data-card_orientation_control_value"];
     let b;
     S ? b = S === "horizontal" ? "horizontal" : "vertical" : b = t.querySelector('[colspan="2"]') !== null ? "vertical" : "horizontal";
-    const p = t.querySelector('a[product-attr="name"]'), I = (p == null ? void 0 : p.getAttribute("style")) || void 0, y = t.querySelector('a[product-attr="button"]'), m = (y == null ? void 0 : y.getAttribute("style")) || void 0, h = (o == null ? void 0 : o.getAttribute("style")) || void 0, T = t.querySelector("p.original-price"), k = (T == null ? void 0 : T.getAttribute("style")) || void 0, A = t.querySelector('[product-attr="quantity"]'), L = (A == null ? void 0 : A.getAttribute("style")) || void 0;
+    const p = t.querySelector('a[product-attr="name"]'), I = (p == null ? void 0 : p.getAttribute("style")) || void 0, y = t.querySelector('a[product-attr="button"]'), m = (y == null ? void 0 : y.getAttribute("style")) || void 0, h = (a == null ? void 0 : a.getAttribute("style")) || void 0, A = t.querySelector("p.original-price"), k = (A == null ? void 0 : A.getAttribute("style")) || void 0, E = t.querySelector('[product-attr="quantity"]'), L = (E == null ? void 0 : E.getAttribute("style")) || void 0;
     return {
       orientation: b,
       itemsType: r,
-      itemId: a,
+      itemId: o,
       currencySymbol: _,
       currencyLocation: f,
       formattedPrice: d,
@@ -222,27 +223,27 @@ class V {
    * @param itemsType - The type of items (CART_ITEMS, BROWSED_ITEMS, PURCHASED_ITEMS)
    * @param itemNumber - The item number (1-based index)
    */
-  extractConfigBlockAttributes(t, r, c) {
+  extractConfigBlockAttributes(t, r, l) {
     const i = t.querySelector("esd-config-block"), n = {};
     if (!i)
       return this.getDefaultConfigBlockAttributes();
-    if (Array.from(i.attributes).forEach((o) => {
-      o.name.startsWith("data-") && (n[o.name] = o.value);
+    if (Array.from(i.attributes).forEach((a) => {
+      a.name.startsWith("data-") && (n[a.name] = a.value);
     }), n["data-cart_items_select_control_value"]) {
-      const o = n["data-cart_items_select_control_value"];
-      if (/^\d+$/.test(o)) {
-        const _ = parseInt(o) - 1, l = E[r];
-        l && l[_] && (n["data-cart_items_select_control_value"] = l[_].value);
+      const a = n["data-cart_items_select_control_value"];
+      if (/^\d+$/.test(a)) {
+        const _ = parseInt(a) - 1, c = T[r];
+        c && c[_] && (n["data-cart_items_select_control_value"] = c[_].value);
       }
     }
     if (n["data-product_price_control_curency"]) {
-      const o = n["data-product_price_control_curency"];
-      let _ = o;
-      o === "before" ? _ = "0" : o === "after" && (_ = "1"), n["data-product_price_control_curency"] = _, n["data-product_price_currency_location"] = _;
+      const a = n["data-product_price_control_curency"];
+      let _ = a;
+      a === "before" ? _ = "0" : a === "after" && (_ = "1"), n["data-product_price_control_curency"] = _, n["data-product_price_currency_location"] = _;
     }
     (!n["data-product_price_control_currency_symbol"] || n["data-product_price_control_currency_symbol"].trim() === "") && (n["data-product_price_control_currency_symbol"] = "USD");
-    const a = { ...this.getDefaultConfigBlockAttributes(), ...n };
-    return a["data-type"] = r, a["data-source"] = r, a["data-product_image_link"] = $(r, c), a["data-product_button_link"] = x(r, c), a;
+    const o = { ...this.getDefaultConfigBlockAttributes(), ...n };
+    return o["data-type"] = r, o["data-source"] = r, o["data-product_image_link"] = $(r, l), o["data-product_button_link"] = x(r, l), o;
   }
   /**
    * Returns default esd-config-block attributes based on the old template structure
@@ -302,15 +303,15 @@ class V {
    * contains display condition Jinja scripts that should NOT be removed.
    */
   removeJinjaConditionals(t) {
-    const r = "__ESD_DISPLAY_CONDITIONS_PLACEHOLDER__", c = t.match(/esd-custom-display-conditions="[^"]*"/);
-    let i = c ? t.replace(c[0], r) : t;
+    const r = "__ESD_DISPLAY_CONDITIONS_PLACEHOLDER__", l = t.match(/esd-custom-display-conditions="[^"]*"/);
+    let i = l ? t.replace(l[0], r) : t;
     return i = i.replace(
       /\{%\s*if\s+(ins_apr|browsed_item|purchased_item)_total_product_kind\s*(&gt;|>)\s*\d+\s*%\}/g,
       ""
     ), i = i.replace(
       /\{%\s*if\s+(ins_apr|browsed_item|purchased_item)_price_\d+\s*(!&#61;|!=)\s*\1_originalprice_\d+\s*%\}/g,
       ""
-    ), i = i.replace(/\{%\s*endif\s*%\}/g, ""), c && (i = i.replace(r, c[0])), i = i.replace(/\n\s*\n\s*\n/g, `
+    ), i = i.replace(/\{%\s*endif\s*%\}/g, ""), l && (i = i.replace(r, l[0])), i = i.replace(/\n\s*\n\s*\n/g, `
 
 `), i;
   }
@@ -324,26 +325,26 @@ class V {
    * - {{purchased_item_formattedprice_5}} → '1,490.49' (PURCHASED_ITEMS)
    */
   replaceTemplateVariables(t) {
-    const { PAIRS_FOR_EXTENSION: r } = v;
-    return t.replace(/{{([^}]+)}}/g, (c, i) => {
+    const { PAIRS_FOR_EXTENSION: r } = U;
+    return t.replace(/{{([^}]+)}}/g, (l, i) => {
       const n = i.match(/^(ins_apr|browsed_item|purchased_item)_([a-z_]+)_(\d+)$/);
       if (!n)
-        return c;
-      const [, a, o, _] = n, l = O[a];
-      if (!l)
-        return console.warn(`Unknown variable prefix: ${a}`), c;
-      const f = w[o];
+        return l;
+      const [, o, a, _] = n, c = O[o];
+      if (!c)
+        return console.warn(`Unknown variable prefix: ${o}`), l;
+      const f = w[a];
       if (!f)
-        return console.warn(`Unknown variable suffix mapping for: ${o}`), c;
-      const { pairsKey: d, defaultKey: s, isArray: S } = f, p = r[d][l];
+        return console.warn(`Unknown variable suffix mapping for: ${a}`), l;
+      const { pairsKey: d, defaultKey: s, isArray: S } = f, p = r[d][c];
       if (!p)
-        return console.warn(`No data found for: ${d}.${l}`), c;
+        return console.warn(`No data found for: ${d}.${c}`), l;
       if (S) {
         const y = parseInt(_) - 1, m = p[s];
-        return Array.isArray(m) && m[y] ? m[y] : (console.warn(`Array value not found: ${d}.${l}.${s}[${y}]`), c);
+        return Array.isArray(m) && m[y] ? m[y] : (console.warn(`Array value not found: ${d}.${c}.${s}[${y}]`), l);
       }
       const I = p[s];
-      return I !== void 0 ? String(I) : (console.warn(`Default value not found: ${d}.${l}.${s}`), c);
+      return I !== void 0 ? String(I) : (console.warn(`Default value not found: ${d}.${c}.${s}`), l);
     });
   }
 }

package/dist/config/migrator/recommendationMigrator.js

@@ -17,7 +17,7 @@ class w {
         const l = o.getAttribute("id"), r = this.extractBgColor(o), i = this.extractTitle(o), u = this.extractProductRows(o), c = P.replace("{-{-TITLE-}-}", i).replace("{-{-PRODUCT_ROWS-}-}", u), a = this.parser.parseFromString(
           `<table id="tempDoc"><tbody><tr>${c}</tr></tbody></table>`,
           "text/html"
-        ).querySelector(".ins-recommendation-v3-block-v2");
+        ).querySelector(".recommendation-block-v2");
         a && o.parentNode && (l && a.setAttribute("id", l), r && a.setAttribute("bgcolor", r), o.parentNode.replaceChild(a, o));
       }), t.documentElement.outerHTML);
     } catch (t) {

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

@@ -6,7 +6,7 @@ import { ensureMobileCssRulesExist as d } from "./controls/mobileLayout/cssRules
 import { RecommendationConfigService as s } from "./services/configService.js";
 import { useRecommendationExtensionStore as u } from "./store/recommendation.js";
 import { getDefaultTemplate as k } from "./templates/grid/template.js";
-const B = "recommendation-block", c = "ins-recommendation-v3-block-v2", a = "recommendation-id";
+const B = "recommendation-block", c = "recommendation-block-v2", a = "recommendation-id";
 class y extends h {
   constructor() {
     super();

package/dist/extensions/Blocks/Recommendation/constants/defaultConfig.js

@@ -1,66 +1,69 @@
-import { DEFAULT_ROW_SPACING as U, DEFAULT_COLUMN_SPACING as I, DEFAULT_MOBILE_CARDS_IN_ROW as n, DEFAULT_CARDS_IN_ROW as s } from "./layout.js";
-import { ATTR_PRODUCT_IMAGE as t, ATTR_PRODUCT_NAME as e, ATTR_PRODUCT_OLD_PRICE as o, ATTR_PRODUCT_PRICE as _, ATTR_PRODUCT_OMNIBUS_PRICE as T, ATTR_PRODUCT_OMNIBUS_DISCOUNT as r, ATTR_PRODUCT_BUTTON as R } from "./selectors.js";
-const O = {
+import { DEFAULT_MOBILE_ROW_SPACING as U, DEFAULT_MOBILE_COLUMN_SPACING as R, DEFAULT_ROW_SPACING as n, DEFAULT_COLUMN_SPACING as O, DEFAULT_MOBILE_CARDS_IN_ROW as C, DEFAULT_CARDS_IN_ROW as D } from "./layout.js";
+import { ATTR_PRODUCT_IMAGE as _, ATTR_PRODUCT_NAME as o, ATTR_PRODUCT_OLD_PRICE as t, ATTR_PRODUCT_PRICE as e, ATTR_PRODUCT_OMNIBUS_PRICE as T, ATTR_PRODUCT_OMNIBUS_DISCOUNT as I, ATTR_PRODUCT_BUTTON as r } from "./selectors.js";
+const i = {
   code: "USD",
   symbol: "USD",
   alignment: "after",
   decimalCount: 2,
   decimalSeparator: ".",
   thousandSeparator: ","
-}, i = {
+}, A = {
   textBefore: "",
   textAfter: ""
-}, C = {
+}, s = {
   textBefore: "",
   textAfter: ""
-}, D = [
+}, E = [
+  _,
+  o,
   t,
   e,
-  o,
-  _,
   T,
-  r,
-  R
-], A = {
-  [t]: !0,
-  [e]: !0,
+  I,
+  r
+], c = {
   [_]: !0,
   [o]: !0,
+  [e]: !0,
+  [t]: !0,
   [T]: !1,
-  [r]: !1,
-  [R]: !0
-}, E = {
+  [I]: !1,
+  [r]: !0
+}, N = {
   // Settings
   strategy: "mostPopular",
   productIds: [],
   size: "6",
   shuffleProducts: !1,
   language: "en_US",
-  currency: O,
+  currency: i,
   filters: [],
   // Layout
   layout: "grid",
-  cardsInRow: s,
-  mobileCardsInRow: n,
-  columnSpacing: I,
-  rowSpacing: U,
+  cardsInRow: D,
+  mobileCardsInRow: C,
+  columnSpacing: O,
+  rowSpacing: n,
+  mobileColumnSpacing: R,
+  mobileRowSpacing: U,
   // Composition
-  composition: D,
-  visibility: A,
+  composition: E,
+  visibility: c,
   // Element settings
-  omnibusPrice: i,
-  omnibusDiscount: C,
+  omnibusPrice: A,
+  omnibusDiscount: s,
   textTrimming: !1,
   // Meta
   configVersion: 1,
   recommendationId: 0
-}, N = 1;
+}, m = [11, 12], L = 1;
 export {
-  N as CURRENT_CONFIG_VERSION,
-  D as DEFAULT_COMPOSITION,
-  O as DEFAULT_CURRENCY,
-  E as DEFAULT_NODE_CONFIG,
-  C as DEFAULT_OMNIBUS_DISCOUNT,
-  i as DEFAULT_OMNIBUS_PRICE,
-  A as DEFAULT_VISIBILITY
+  L as CURRENT_CONFIG_VERSION,
+  E as DEFAULT_COMPOSITION,
+  i as DEFAULT_CURRENCY,
+  N as DEFAULT_NODE_CONFIG,
+  s as DEFAULT_OMNIBUS_DISCOUNT,
+  A as DEFAULT_OMNIBUS_PRICE,
+  c as DEFAULT_VISIBILITY,
+  m as EXCLUDED_ALGORITHM_IDS
 };

package/dist/extensions/Blocks/Recommendation/constants/layout.js

@@ -1,22 +1,24 @@
 const _ = {
   GRID: "grid",
   LIST: "list"
-}, o = [
+}, A = [
   { icon: "grid-orientation", value: _.GRID },
   { icon: "list-orientation", value: _.LIST }
-], t = 3, n = 3, A = 9, O = 4, R = 1, T = 2, c = 10, s = 20, I = 0, S = 50, P = 5;
+], o = 3, t = 3, O = 9, n = 4, I = 1, L = 2, R = 10, T = 10, c = 10, s = 10, S = 0, U = 50, C = 5;
 export {
-  n as DEFAULT_CARDS_IN_ROW,
-  c as DEFAULT_COLUMN_SPACING,
-  R as DEFAULT_MOBILE_CARDS_IN_ROW,
-  t as DEFAULT_PRODUCTS_PER_ROW,
-  s as DEFAULT_ROW_SPACING,
-  o as LAYOUT_OPTIONS,
+  t as DEFAULT_CARDS_IN_ROW,
+  R as DEFAULT_COLUMN_SPACING,
+  I as DEFAULT_MOBILE_CARDS_IN_ROW,
+  c as DEFAULT_MOBILE_COLUMN_SPACING,
+  s as DEFAULT_MOBILE_ROW_SPACING,
+  o as DEFAULT_PRODUCTS_PER_ROW,
+  T as DEFAULT_ROW_SPACING,
+  A as LAYOUT_OPTIONS,
   _ as LAYOUT_VALUES,
-  T as MAX_MOBILE_PRODUCTS_PER_ROW,
-  O as MAX_PRODUCTS_PER_ROW,
-  A as MAX_PRODUCT_COUNT,
-  S as MAX_SPACING,
-  I as MIN_SPACING,
-  P as SPACING_STEP
+  L as MAX_MOBILE_PRODUCTS_PER_ROW,
+  n as MAX_PRODUCTS_PER_ROW,
+  O as MAX_PRODUCT_COUNT,
+  U as MAX_SPACING,
+  S as MIN_SPACING,
+  C as SPACING_STEP
 };

package/dist/extensions/Blocks/Recommendation/constants/selectors.js

@@ -1,21 +1,23 @@
-const c = ".ins-recommendation-product-container", n = ".ins-recommendation-desktop-container", o = ".ins-recommendation-mobile-container", T = {
+const c = ".recommendation-block-v2", n = ".ins-recommendation-product-container", o = ".ins-recommendation-desktop-container", T = ".ins-recommendation-mobile-container", t = ".ins-recommendation-mobile-row", r = {
   CURRENCY: "currency",
   SYMBOL: "currency-symbol",
   ALIGNMENT: "currency-alignment",
   THOUSAND_SEPARATOR: "currency-thousand-separator",
   DECIMAL_SEPARATOR: "currency-decimal-separator",
   DECIMAL_COUNT: "currency-decimal-count"
-}, t = "productImage", r = "productName", R = "productPrice", e = "productOldPrice", O = "productOmnibusPrice", _ = "productOmnibusDiscount", C = "productButton";
+}, R = "productImage", O = "productName", e = "productPrice", _ = "productOldPrice", E = "productOmnibusPrice", C = "productOmnibusDiscount", s = "productButton";
 export {
-  C as ATTR_PRODUCT_BUTTON,
-  t as ATTR_PRODUCT_IMAGE,
-  r as ATTR_PRODUCT_NAME,
-  e as ATTR_PRODUCT_OLD_PRICE,
-  _ as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
-  O as ATTR_PRODUCT_OMNIBUS_PRICE,
-  R as ATTR_PRODUCT_PRICE,
-  c as CONTAINER_SELECTOR,
-  T as CURRENCY_ATTR,
-  n as DESKTOP_CONTAINER_SELECTOR,
-  o as MOBILE_CONTAINER_SELECTOR
+  s as ATTR_PRODUCT_BUTTON,
+  R as ATTR_PRODUCT_IMAGE,
+  O as ATTR_PRODUCT_NAME,
+  _ as ATTR_PRODUCT_OLD_PRICE,
+  C as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
+  E as ATTR_PRODUCT_OMNIBUS_PRICE,
+  e as ATTR_PRODUCT_PRICE,
+  c as BLOCK_ROOT_SELECTOR,
+  n as CONTAINER_SELECTOR,
+  r as CURRENCY_ATTR,
+  o as DESKTOP_CONTAINER_SELECTOR,
+  T as MOBILE_CONTAINER_SELECTOR,
+  t as MOBILE_ROW_SELECTOR
 };

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

@@ -1,7 +1,7 @@
 import { createButtonFitToContainerControl as T, createButtonTextStyleAndFontColorControl as r, createButtonTextSizeControl as e, createButtonTextControl as B, createButtonPaddingsControl as l, createButtonMarginsControl as C, createButtonFontFamilyControl as O, createButtonColorControl as N, createButtonBorderRadiusControl as i, createButtonBorderControl as a, createButtonAlignControl as c } from "../../../controlFactories.js";
 import { RecommendationBlockId as o } from "../../constants/blockIds.js";
 import { RecommendationControlId as t } from "../../constants/controlIds.js";
-import { CONTAINER_SELECTOR as n } from "../../constants/selectors.js";
+import { BLOCK_ROOT_SELECTOR as n } from "../../constants/selectors.js";
 const U = c(
   t.BUTTON_ALIGN,
   o.BUTTON,
@@ -34,19 +34,19 @@ const U = c(
   t.BUTTON_TEXT,
   o.BUTTON,
   n
-), A = e(
+), S = e(
   t.BUTTON_TEXT_SIZE,
   o.BUTTON,
   n
-), S = r(
+), A = r(
   t.BUTTON_TEXT_STYLE_AND_FONT_COLOR,
   o.BUTTON,
   n
-), E = T(
+), x = T(
   t.BUTTON_FIT_TO_CONTENT,
   o.BUTTON,
   n
-), p = {
+), f = {
   align: U,
   border: d,
   borderRadius: s,
@@ -55,10 +55,10 @@ const U = c(
   margins: u,
   paddings: R,
   text: F,
-  textSize: A,
-  textStyleAndFontColor: S,
-  fitToContent: E
+  textSize: S,
+  textStyleAndFontColor: A,
+  fitToContent: x
 };
 export {
-  p as ButtonControls
+  f as ButtonControls
 };

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

@@ -1,7 +1,7 @@
 import { createImageMarginsControl as m, createImageSizeControl as n } from "../../../controlFactories.js";
 import { RecommendationBlockId as o } from "../../constants/blockIds.js";
 import { RecommendationControlId as r } from "../../constants/controlIds.js";
-import { CONTAINER_SELECTOR as t } from "../../constants/selectors.js";
+import { BLOCK_ROOT_SELECTOR as t } from "../../constants/selectors.js";
 const e = n(
   r.IMAGE_SIZE,
   o.IMAGE,

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

@@ -1,25 +1,29 @@
-var c = Object.defineProperty;
-var d = (o, e, t) => e in o ? c(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var n = (o, e, t) => d(o, typeof e != "symbol" ? e + "" : e, t);
-import { ModificationDescription as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+var L = Object.defineProperty;
+var _ = (o, e, t) => e in o ? L(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var r = (o, e, t) => _(o, typeof e != "symbol" ? e + "" : e, t);
+import { ModificationDescription as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as h } from "../../../common-control.js";
-import { LAYOUT_OPTIONS as g } from "../../constants/layout.js";
-import { RecommendationConfigService as r } from "../../services/configService.js";
-import { useRecommendationExtensionStore as l } from "../../store/recommendation.js";
-import { getCurrentLayout as u, getBlockElement as f, regenerateProductRowsWithStyles as p } from "../main/utils.js";
-const L = "recommendation-layout-control", i = {
+import { LAYOUT_OPTIONS as N, DEFAULT_MOBILE_ROW_SPACING as m, DEFAULT_MOBILE_COLUMN_SPACING as d, DEFAULT_ROW_SPACING as l, DEFAULT_COLUMN_SPACING as g } from "../../constants/layout.js";
+import { RecommendationConfigService as s } from "../../services/configService.js";
+import { useRecommendationExtensionStore as A } from "../../store/recommendation.js";
+import { getCurrentLayout as C, getBlockElement as O, regenerateProductRowsWithStyles as f } from "../main/utils.js";
+const S = "recommendation-layout-control", a = {
   LAYOUT: "layout"
-}, C = {
-  LAYOUT: "data-layout"
+}, n = {
+  LAYOUT: "data-layout",
+  COLUMN_SPACING: "data-column-spacing",
+  ROW_SPACING: "data-row-spacing",
+  MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
+  MOBILE_ROW_SPACING: "data-mobile-row-spacing"
 };
-class Y extends h {
+class G extends h {
   constructor() {
     super(...arguments);
-    n(this, "store", l());
-    n(this, "isChangingLayout", !1);
+    r(this, "store", A());
+    r(this, "isChangingLayout", !1);
   }
   getId() {
-    return L;
+    return S;
   }
   getTemplate() {
     return `
@@ -27,8 +31,8 @@ class Y extends h {
                 ${this._GuTwoColumns([
       this._GuLabel({ text: "Layout Orientation" }),
       this._GuRadioButton({
-        name: i.LAYOUT,
-        buttons: g
+        name: a.LAYOUT,
+        buttons: N
       })
     ])}
             </div>
@@ -41,9 +45,9 @@ class Y extends h {
     super.onTemplateNodeUpdated(t), this._setFormValues();
   }
   _setFormValues() {
-    const s = r.getConfig(this.currentNode).layout || u(this.currentNode);
+    const u = s.getConfig(this.currentNode).layout || C(this.currentNode);
     this.api.updateValues({
-      [i.LAYOUT]: s
+      [a.LAYOUT]: u
     });
   }
   /**
@@ -51,18 +55,26 @@ class Y extends h {
    * Updates node config, data attribute and regenerates product rows
    */
   _onLayoutChange(t) {
-    if (this.isChangingLayout || !this.currentNode || (r.getConfig(this.currentNode).layout || u(this.currentNode)) === t)
+    if (this.isChangingLayout || !this.currentNode || (s.getConfig(this.currentNode).layout || C(this.currentNode)) === t)
       return;
-    const a = f(this.currentNode);
-    if (a) {
+    const c = O(this.currentNode);
+    if (c) {
       this.isChangingLayout = !0;
       try {
-        r.updateConfig(
+        s.updateConfig(
           this.api,
           this.currentNode,
-          { layout: t },
+          {
+            layout: t,
+            columnSpacing: g,
+            rowSpacing: l,
+            mobileColumnSpacing: d,
+            mobileRowSpacing: m
+          },
           `Changed layout to ${t}`
-        ), this.store.patchCurrentBlockConfig({ orientation: t }), this.api.getDocumentModifier().modifyHtml(a).setAttribute(C.LAYOUT, t).apply(new m(`Update layout to ${t}`)), this._regenerateProductRows(t);
+        ), this.store.patchCurrentBlockConfig({ orientation: t });
+        const i = this.api.getDocumentModifier().modifyHtml(c).setAttribute(n.LAYOUT, t).setAttribute(n.COLUMN_SPACING, g.toString()).setAttribute(n.ROW_SPACING, l.toString()).setAttribute(n.MOBILE_COLUMN_SPACING, d.toString()).setAttribute(n.MOBILE_ROW_SPACING, m.toString());
+        t === "list" ? (i.setClass("es-m-p0"), i.setClass("ins-recommendation-list-layout")) : (i.removeClass("es-m-p0"), i.removeClass("ins-recommendation-list-layout")), i.apply(new p(`Update layout to ${t}`)), this._regenerateProductRows(t);
       } finally {
         this.isChangingLayout = !1;
       }
@@ -74,19 +86,19 @@ class Y extends h {
    * @param layout - The layout to use for regeneration (passed explicitly to avoid stale DOM reads)
    */
   _regenerateProductRows(t) {
-    this.currentNode && p({
+    this.currentNode && f({
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier(),
       layout: t
     });
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(i.LAYOUT, (t) => {
+    this.api.onValueChanged(a.LAYOUT, (t) => {
       this._onLayoutChange(t);
     });
   }
 }
 export {
-  L as LAYOUT_CONTROL_ID,
-  Y as LayoutControl
+  S as LAYOUT_CONTROL_ID,
+  G as LayoutControl
 };