@useinsider/guido 3.0.0 → 3.1.0

package/dist/extensions/Blocks/Recommendation/controls/{layout/index.js → main/layoutOrientation.js}

@@ -1,45 +1,55 @@
-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 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";
+var O = Object.defineProperty;
+var p = (o, e, t) => e in o ? O(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var r = (o, e, t) => p(o, typeof e != "symbol" ? e + "" : e, t);
+import { ModificationDescription as h } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as N } from "../../../common-control.js";
+import { ATTR_DATA_CUSTOM_ATTRIBUTES as L } from "../../constants/selectors.js";
+import { LAYOUT_OPTIONS as T, 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 { DEFAULT_COMPOSITION as _ } from "../../constants/defaultConfig.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 = {
+import { useRecommendationExtensionStore as f } from "../../store/recommendation.js";
+import { getCurrentLayout as C, getBlockElement as I, regenerateProductRowsWithStyles as S } from "./utils.js";
+const U = "recommendation-layout-orientation-control", A = "recommendationInfoBannerTest", a = {
   LAYOUT: "layout"
-}, n = {
+}, y = "data-card-composition", i = {
   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 G extends h {
+class Y extends N {
   constructor() {
     super(...arguments);
-    r(this, "store", A());
+    r(this, "store", f());
     r(this, "isChangingLayout", !1);
   }
   getId() {
-    return S;
+    return U;
   }
   getTemplate() {
     return `
             <div class="layout-control-container">
+                ${this._GuOnPageMessage({ name: A })}
+
                 ${this._GuTwoColumns([
-      this._GuLabel({ text: "Layout Orientation" }),
+      this._GuLabel({ text: this.api.translate("Layout Orientation") }),
       this._GuRadioButton({
         name: a.LAYOUT,
-        buttons: N
+        buttons: T
       })
     ])}
             </div>
         `;
   }
   onRender() {
-    this._setFormValues(), this._listenToFormUpdates();
+    this._setInfoMessageValue(
+      A,
+      this.api.translate(
+        `Note that updating the Layout Orientation, Number of Products and
+                Products in One Row settings resets the style of your Recommendation block.`
+      )
+    ), this._setFormValues(), this._listenToFormUpdates();
   }
   onTemplateNodeUpdated(t) {
     super.onTemplateNodeUpdated(t), this._setFormValues();
@@ -57,7 +67,7 @@ class G extends h {
   _onLayoutChange(t) {
     if (this.isChangingLayout || !this.currentNode || (s.getConfig(this.currentNode).layout || C(this.currentNode)) === t)
       return;
-    const c = O(this.currentNode);
+    const c = I(this.currentNode);
     if (c) {
       this.isChangingLayout = !0;
       try {
@@ -73,8 +83,8 @@ class G extends h {
           },
           `Changed layout to ${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);
+        const n = this.api.getDocumentModifier().modifyHtml(c).setAttribute(i.LAYOUT, t).setAttribute(i.COLUMN_SPACING, g.toString()).setAttribute(i.ROW_SPACING, l.toString()).setAttribute(i.MOBILE_COLUMN_SPACING, d.toString()).setAttribute(i.MOBILE_ROW_SPACING, m.toString());
+        t === "list" ? (n.setClass("es-m-p0"), n.setClass("ins-recommendation-list-layout")) : (n.removeClass("es-m-p0"), n.removeClass("ins-recommendation-list-layout")), n.setAttribute(y, _.join(",")).setAttribute(L, "[]"), n.apply(new h(`Update layout to ${t}`)), this._regenerateProductRows(t);
       } finally {
         this.isChangingLayout = !1;
       }
@@ -86,10 +96,11 @@ class G extends h {
    * @param layout - The layout to use for regeneration (passed explicitly to avoid stale DOM reads)
    */
   _regenerateProductRows(t) {
-    this.currentNode && f({
+    this.currentNode && S({
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier(),
-      layout: t
+      layout: t,
+      composition: _
     });
   }
   _listenToFormUpdates() {
@@ -99,6 +110,6 @@ class G extends h {
   }
 }
 export {
-  S as LAYOUT_CONTROL_ID,
-  G as LayoutControl
+  U as LAYOUT_ORIENTATION_CONTROL_ID,
+  Y as LayoutOrientationControl
 };

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

@@ -21,10 +21,10 @@ class E extends c {
     return `
             <div class="locale-control-container">
                 ${this._GuTwoColumns([
-      this._GuLabel({ text: "Recommendation Locale" }),
+      this._GuLabel({ text: this.api.translate("Recommendation Locale") }),
       this._GuSelect({
         name: n.LOCALE,
-        placeholder: "Select Recommendation Locale",
+        placeholder: this.api.translate("Select Recommendation Locale"),
         options: this.store.getLanguages
       })
     ])}

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

@@ -0,0 +1,58 @@
+var s = Object.defineProperty;
+var u = (e, o, t) => o in e ? s(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t;
+var i = (e, o, t) => u(e, typeof o != "symbol" ? o + "" : o, t);
+import { CommonControl as a } from "../../../common-control.js";
+import { MAX_PRODUCT_COUNT as c } from "../../constants/layout.js";
+import { RecommendationConfigService as n } from "../../services/configService.js";
+import { useRecommendationExtensionStore as d } from "../../store/recommendation.js";
+const C = "recommendation-product-count-control", r = {
+  PRODUCT_COUNT: "size"
+};
+class g extends a {
+  constructor() {
+    super(...arguments);
+    i(this, "store", d());
+  }
+  getId() {
+    return C;
+  }
+  getTemplate() {
+    return `
+            <div class="product-count-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: this.api.translate("Number of Products") }),
+      this._GuCounter({ name: r.PRODUCT_COUNT, maxValue: c })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._setFormValues();
+  }
+  _setFormValues() {
+    const t = n.getConfig(this.currentNode);
+    this.api.updateValues({
+      [r.PRODUCT_COUNT]: t.size
+    });
+  }
+  _onProductCountChange(t) {
+    !this.currentNode || n.getConfig(this.currentNode).size === t || (n.updateConfig(
+      this.api,
+      this.currentNode,
+      { size: t },
+      `Changed product count to ${t}`
+    ), this.store.patchCurrentBlockConfig({ size: t }));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(r.PRODUCT_COUNT, (t) => {
+      this._onProductCountChange(t.toString());
+    });
+  }
+}
+export {
+  C as PRODUCT_COUNT_CONTROL_ID,
+  g as ProductCountControl
+};

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

@@ -1,60 +1,80 @@
-var u = Object.defineProperty;
-var _ = (n, r, t) => r in n ? u(n, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[r] = t;
-var a = (n, r, t) => _(n, typeof r != "symbol" ? r + "" : r, t);
-import { EditorStatePropertyType as c, PreviewDeviceMode as C } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as R } from "../../../common-control.js";
-import { MAX_PRODUCT_COUNT as h, MAX_PRODUCTS_PER_ROW as p, MAX_MOBILE_PRODUCTS_PER_ROW as g, DEFAULT_COLUMN_SPACING as m, DEFAULT_MOBILE_COLUMN_SPACING as O } from "../../constants/layout.js";
+var I = Object.defineProperty;
+var E = (a, n, t) => n in a ? I(a, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[n] = t;
+var u = (a, n, t) => E(a, typeof n != "symbol" ? n + "" : n, t);
+import { EditorStatePropertyType as O, PreviewDeviceMode as f, UEAttr as N } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as T } from "../../../common-control.js";
+import { MAX_PRODUCTS_PER_ROW as p, MAX_MOBILE_PRODUCTS_PER_ROW as M, DEFAULT_MOBILE_CARDS_IN_ROW as L, DEFAULT_COLUMN_SPACING as P, DEFAULT_MOBILE_COLUMN_SPACING as y } from "../../constants/layout.js";
 import { RecommendationConfigService as i } from "../../services/configService.js";
-import { useRecommendationExtensionStore as l } from "../../store/recommendation.js";
-import { ensureMobileCssRulesExist as I } from "../mobileLayout/cssRules.js";
-import { getCurrentLayout as N, regenerateMobileProductRows as f, adjustProductsToSize as b, regenerateProductRowsWithStyles as P } from "./utils.js";
-import { useDebounceFn as L } from "../../../../../node_modules/@vueuse/shared/index.js";
-const M = "recommendation-product-layout-control", e = {
-  PRODUCT_COUNT: "size",
+import { useRecommendationExtensionStore as D } from "../../store/recommendation.js";
+import { setMobileLayoutOptOut as m, ensureMobileCssRulesExist as C } from "../mobileLayout/cssRules.js";
+import { getCurrentLayout as w, getBlockElement as U, regenerateProductRowsWithStyles as b, regenerateMobileProductRows as g, adjustProductsToSize as A } from "./utils.js";
+import { useDebounceFn as B } from "../../../../../node_modules/@vueuse/shared/index.js";
+const S = "recommendation-product-layout-control", e = {
+  // "Products in One Row" — shown when toggle is OFF
   PRODUCT_IN_ROW: "cardsInRow",
   PRODUCT_IN_ROW_LABEL: "cardsInRowLabel",
+  // "Products in One Row on Desktop" — shown when toggle is ON + desktop preview
+  PRODUCT_IN_ROW_DESKTOP: "cardsInRowDesktop",
+  PRODUCT_IN_ROW_DESKTOP_LABEL: "cardsInRowDesktopLabel",
+  // "Products in One Row on Mobile" — shown when toggle is ON + mobile preview
   MOBILE_CARDS_IN_ROW: "mobileCardsInRow",
-  MOBILE_CARDS_IN_ROW_LABEL: "mobileCardsInRowLabel"
+  MOBILE_CARDS_IN_ROW_LABEL: "mobileCardsInRowLabel",
+  // Toggle
+  MOBILE_LAYOUT_TOGGLE: "mobileLayoutEnabled",
+  MOBILE_LAYOUT_LABEL: "mobileLayoutLabel"
 };
-class V extends R {
+class v extends T {
   constructor() {
     super(...arguments);
     // Store is used for backward compatibility with product fetching and regeneration
-    a(this, "store", l());
-    a(this, "storeUnsubscription", () => {
+    u(this, "store", D());
+    u(this, "storeUnsubscription", () => {
     });
-    a(this, "_debouncedRegenerateProductRows", L(() => {
+    u(this, "_debouncedRegenerateProductRows", B(() => {
       this._regenerateProductRows();
     }, 500));
   }
   getId() {
-    return M;
+    return S;
   }
   getTemplate() {
     return `
-            <div class="product-layout-control-container">
+            <div class="product-layout-control-container" data-product-layout-control>
                 ${this._GuTwoColumns([
-      this._GuLabel({ text: "Number of Products" }),
-      this._GuCounter({ name: e.PRODUCT_COUNT, maxValue: h }),
       this._GuLabel({
-        text: "Products in One Row on Desktop",
+        text: this.api.translate("Products in One Row"),
         name: e.PRODUCT_IN_ROW_LABEL
       }),
       this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue: p }),
       this._GuLabel({
-        text: "Products in One Row on Mobile",
+        text: this.api.translate("Products in One Row on Desktop"),
+        name: e.PRODUCT_IN_ROW_DESKTOP_LABEL
+      }),
+      this._GuCounter({ name: e.PRODUCT_IN_ROW_DESKTOP, maxValue: p }),
+      this._GuLabel({
+        text: this.api.translate("Products in One Row on Mobile"),
         name: e.MOBILE_CARDS_IN_ROW_LABEL
       }),
       this._GuCounter({
         name: e.MOBILE_CARDS_IN_ROW,
-        maxValue: g
-      })
+        maxValue: M
+      }),
+      this._GuLabel({
+        text: this.api.translate("Mobile Layout Optimization"),
+        name: e.MOBILE_LAYOUT_LABEL,
+        hint: this.api.translate(
+          `Mobile Layout Optimization lets you display up to 2 products in one row.
+                            Note that enabling Mobile Layout Optimization increases the size of
+                            your recommendation block.`
+        )
+      }),
+      this._GuToggle(e.MOBILE_LAYOUT_TOGGLE)
     ])}
             </div>
         `;
   }
   onRender() {
-    this._setFormValues(), this._updateProductsInRowVisibility(), this._listenToFormUpdates(), this._listenStateUpdates(), this._subscribeToEditorModeChanges();
+    this._initializeMobileLayoutToggle(), this._setFormValues(), this._updateProductsInRowVisibility(), this._listenToFormUpdates(), this._listenStateUpdates(), this._listenEditorModeChanges();
   }
   onTemplateNodeUpdated(t) {
     super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateProductsInRowVisibility();
@@ -65,53 +85,104 @@ class V extends R {
   _setFormValues() {
     const t = i.getConfig(this.currentNode);
     this.api.updateValues({
-      [e.PRODUCT_COUNT]: t.size,
       [e.PRODUCT_IN_ROW]: t.cardsInRow,
+      [e.PRODUCT_IN_ROW_DESKTOP]: t.cardsInRow,
+      [e.MOBILE_LAYOUT_TOGGLE]: t.mobileLayoutEnabled,
       [e.MOBILE_CARDS_IN_ROW]: t.mobileCardsInRow
     });
   }
   /**
-   * Checks if the editor is currently in mobile preview mode
-   * using Stripo's EditorStatePropertyType API.
+   * Returns true when the editor preview is in mobile mode.
    */
-  _isMobileMode() {
-    return this.api.getEditorState()[c.previewDeviceMode] === C.MOBILE;
+  _isMobilePreview() {
+    return this.api.getEditorState()[O.previewDeviceMode] === f.MOBILE;
   }
   /**
-   * Updates counter visibility based on layout orientation and editor mode.
-   * - List layout: hide both counters (products always full-width)
-   * - Grid + desktop mode: show desktop counter, hide mobile counter
-   * - Grid + mobile mode: show mobile counter, hide desktop counter
+   * Updates counter visibility based on layout, mobileLayoutEnabled, and editor preview mode.
+   *
+   * Three mutually exclusive rows exist in the template:
+   *   1. "Products in One Row"            — generic, shown when toggle is OFF
+   *   2. "Products in One Row on Desktop" — shown when toggle is ON + desktop preview
+   *   3. "Products in One Row on Mobile"  — shown when toggle is ON + mobile preview
+   *
+   * Only one row is visible at a time. This avoids setUIEAttribute on hidden
+   * elements, which Stripo does not apply reliably.
    */
   _updateProductsInRowVisibility() {
-    const o = (i.getConfig(this.currentNode).layout || N(this.currentNode)) === "grid", d = this._isMobileMode();
-    this.api.setVisibility(e.PRODUCT_IN_ROW, o && !d), this.api.setVisibility(e.PRODUCT_IN_ROW_LABEL, o && !d), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW, o && d), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW_LABEL, o && d);
+    var R;
+    const t = i.getConfig(this.currentNode), o = (t.layout || w(this.currentNode)) === "grid", { mobileLayoutEnabled: r } = t, d = this._isMobilePreview();
+    this.api.setVisibility(e.MOBILE_LAYOUT_TOGGLE, o), this.api.setVisibility(e.MOBILE_LAYOUT_LABEL, o);
+    const c = o && !r, _ = o && r && !d, l = o && r && d;
+    this.api.setVisibility(e.PRODUCT_IN_ROW, c), this.api.setVisibility(e.PRODUCT_IN_ROW_LABEL, c), this.api.setVisibility(e.PRODUCT_IN_ROW_DESKTOP, _), this.api.setVisibility(e.PRODUCT_IN_ROW_DESKTOP_LABEL, _), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW, l), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW_LABEL, l);
+    const h = (R = this.getContainer()) == null ? void 0 : R.querySelector("[data-product-layout-control]");
+    h && (h.style.display = o ? "" : "none");
   }
   /**
-   * Subscribes to editor preview mode changes via Stripo API.
-   * When the user switches between desktop/mobile preview, toggles
-   * which "Products in One Row" counter is visible.
+   * Initializes the mobile layout toggle using the same pattern as shuffle.ts.
+   * Sets the initial UI attribute value from the node config.
    */
-  _subscribeToEditorModeChanges() {
-    this.api.onEditorStatePropUpdated(
-      c.previewDeviceMode,
-      () => {
-        this._updateProductsInRowVisibility();
-      }
+  _initializeMobileLayoutToggle() {
+    const t = i.getConfig(this.currentNode);
+    this.api.setUIEAttribute(
+      e.MOBILE_LAYOUT_TOGGLE,
+      N.SELECTPICKER.items,
+      t.mobileLayoutEnabled
     );
   }
-  _onProductCountChange(t) {
-    !this.currentNode || i.getConfig(this.currentNode).size === t || (i.updateConfig(
-      this.api,
-      this.currentNode,
-      { size: t },
-      `Changed product count to ${t}`
-    ), this.store.patchCurrentBlockConfig({ size: t }));
+  /**
+   * Handles mobile layout toggle change.
+   * When enabled: opts in to mobile layout, restores previous mobileCardsInRow.
+   * When disabled: snapshots current mobileCardsInRow, resets to 1, opts out.
+   */
+  _onMobileLayoutToggleChange(t) {
+    if (!this.currentNode)
+      return;
+    const s = i.getConfig(this.currentNode);
+    if (s.mobileLayoutEnabled === t)
+      return;
+    const o = U(this.currentNode);
+    if (t) {
+      const r = s.previousMobileCardsInRow || L;
+      i.updateConfig(
+        this.api,
+        this.currentNode,
+        {
+          mobileLayoutEnabled: !0,
+          mobileCardsInRow: r
+        },
+        "Enabled mobile layout optimization"
+      ), this.store.patchCurrentBlockConfig(
+        { mobileLayoutEnabled: !0 },
+        { triggerRefetch: !1 }
+      ), o && m(this.api, o, !1), C(this.api), b({
+        currentNode: this.currentNode,
+        documentModifier: this.api.getDocumentModifier()
+      });
+    } else {
+      const r = s.mobileCardsInRow;
+      i.updateConfig(
+        this.api,
+        this.currentNode,
+        {
+          mobileLayoutEnabled: !1,
+          previousMobileCardsInRow: r,
+          mobileCardsInRow: L
+        },
+        "Disabled mobile layout optimization"
+      ), this.store.patchCurrentBlockConfig(
+        { mobileLayoutEnabled: !1 },
+        { triggerRefetch: !1 }
+      ), o && m(this.api, o, !0), g({
+        currentNode: this.currentNode,
+        documentModifier: this.api.getDocumentModifier()
+      });
+    }
+    this._setFormValues(), this._updateProductsInRowVisibility();
   }
   _onProductsInRowChange(t) {
     if (!this.currentNode || i.getConfig(this.currentNode).cardsInRow === t)
       return;
-    const o = t === 1 ? 0 : m;
+    const o = t === 1 ? 0 : P;
     i.updateConfig(
       this.api,
       this.currentNode,
@@ -122,37 +193,39 @@ class V extends R {
   _onMobileCardsInRowChange(t) {
     if (!this.currentNode || i.getConfig(this.currentNode).mobileCardsInRow === t)
       return;
-    const o = t === 1 ? 0 : O;
+    const o = t === 1 ? 0 : y;
     i.updateConfig(
       this.api,
       this.currentNode,
       { mobileCardsInRow: t, mobileColumnSpacing: o },
       `Changed mobile products per row to ${t}`
-    ), I(this.api), f({
+    ), C(this.api), g({
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier()
     });
   }
   _regenerateProductRows() {
-    const t = i.getConfig(this.currentNode), s = parseInt(t.size) || 6, o = b(this.store.recommendationProducts, s);
-    P({
+    const t = i.getConfig(this.currentNode), s = parseInt(t.size) || 6, o = A(this.store.recommendationProducts, s);
+    b({
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier(),
       products: o
     });
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(e.PRODUCT_COUNT, (t) => {
-      this._onProductCountChange(t.toString());
-    }), this.api.onValueChanged(e.PRODUCT_IN_ROW, (t) => {
+    this.api.onValueChanged(e.PRODUCT_IN_ROW, (t) => {
       this._onProductsInRowChange(Number(t));
+    }), this.api.onValueChanged(e.PRODUCT_IN_ROW_DESKTOP, (t) => {
+      this._onProductsInRowChange(Number(t));
+    }), this.api.onValueChanged(e.MOBILE_LAYOUT_TOGGLE, (t) => {
+      this._onMobileLayoutToggleChange(!!t);
     }), this.api.onValueChanged(e.MOBILE_CARDS_IN_ROW, (t) => {
       this._onMobileCardsInRowChange(Number(t));
     });
   }
   /**
    * Subscribe to store changes to update visibility when layout changes
-   * This is still needed because layout changes come from LayoutControl
+   * This is still needed because layout changes come from LayoutOrientationControl
    */
   _listenStateUpdates() {
     let t = this.store.recommendationConfigs.orientation;
@@ -161,8 +234,21 @@ class V extends R {
       s !== t && (t = s, this._updateProductsInRowVisibility());
     });
   }
+  /**
+   * Subscribe to editor preview mode changes (desktop ↔ mobile).
+   * When the user switches preview mode and mobile layout is enabled,
+   * we swap which "Products in One Row" counter is visible.
+   */
+  _listenEditorModeChanges() {
+    this.api.onEditorStatePropUpdated(
+      O.previewDeviceMode,
+      () => {
+        i.getConfig(this.currentNode).mobileLayoutEnabled && this._updateProductsInRowVisibility();
+      }
+    );
+  }
 }
 export {
-  M as PRODUCT_LAYOUT_CONTROL_ID,
-  V as ProductLayoutControl
+  S as PRODUCT_LAYOUT_CONTROL_ID,
+  v as ProductLayoutControl
 };

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

@@ -19,9 +19,9 @@ class S extends l {
   }
   getTemplate() {
     return `
-            <div class="shuffle-control-container">
+            <div class="shuffle-control-container" style="border-bottom: 1px solid #e0e0e0;">
                 ${this._GuTwoColumns([
-      this._GuLabel({ text: "Shuffle Recommended Products" }),
+      this._GuLabel({ text: this.api.translate("Shuffle Recommended Products") }),
       this._GuToggle(i.SHUFFLE_PRODUCTS)
     ])}
             </div>