@useinsider/guido 2.2.0-beta.fa4cec8 → 3.0.0-beta.2235a35

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

@@ -1,140 +1,195 @@
 var G = Object.defineProperty;
-var I = (o, n, t) => n in o ? G(o, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[n] = t;
-var l = (o, n, t) => I(o, typeof n != "symbol" ? n + "" : n, t);
-import { ModificationDescription as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as L } from "../../../common-control.js";
-import { SPACING_STEP as b, MAX_SPACING as y, MIN_SPACING as A, DEFAULT_COLUMN_SPACING as a, DEFAULT_ROW_SPACING as m } from "../../constants/layout.js";
+var R = (p, c, t) => c in p ? G(p, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : p[c] = t;
+var h = (p, c, t) => R(p, typeof c != "symbol" ? c + "" : c, t);
+import { EditorStatePropertyType as y, PreviewDeviceMode as w, ModificationDescription as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as V } from "../../../common-control.js";
+import { DESKTOP_CONTAINER_SELECTOR as m, MOBILE_CONTAINER_SELECTOR as E } from "../../constants/selectors.js";
+import { SPACING_STEP as S, MAX_SPACING as _, MIN_SPACING as N, DEFAULT_COLUMN_SPACING as C, DEFAULT_ROW_SPACING as P } from "../../constants/layout.js";
 import { RecommendationConfigService as d } from "../../services/configService.js";
-import { useRecommendationExtensionStore as w } from "../../store/recommendation.js";
-import { safeGetStyle as S, safeGetParent as V } from "../../utils/tagName.js";
-import { getCurrentLayout as C } from "../main/utils.js";
-import { useDebounceFn as O } from "../../../../../node_modules/@vueuse/shared/index.js";
-const R = "recommendation-spacing-control", s = {
+import { useRecommendationExtensionStore as B } from "../../store/recommendation.js";
+import { safeGetStyle as A, safeGetParent as U } from "../../utils/tagName.js";
+import { getCurrentLayout as b, getBlockElement as x } from "../main/utils.js";
+import { useDebounceFn as f } from "../../../../../node_modules/@vueuse/shared/index.js";
+const W = "recommendation-spacing-control", i = {
   COLUMN_SPACING: "columnSpacing",
   COLUMN_SPACING_LABEL: "columnSpacingLabel",
-  ROW_SPACING: "rowSpacing"
-}, P = {
+  ROW_SPACING: "rowSpacing",
+  ROW_SPACING_LABEL: "rowSpacingLabel",
+  MOBILE_COLUMN_SPACING: "mobileColumnSpacing",
+  MOBILE_COLUMN_SPACING_LABEL: "mobileColumnSpacingLabel",
+  MOBILE_ROW_SPACING: "mobileRowSpacing",
+  MOBILE_ROW_SPACING_LABEL: "mobileRowSpacingLabel"
+}, O = {
   COLUMN_SPACING: "data-column-spacing",
-  ROW_SPACING: "data-row-spacing"
+  ROW_SPACING: "data-row-spacing",
+  MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
+  MOBILE_ROW_SPACING: "data-mobile-row-spacing"
 };
-function N(o, n) {
-  if (!o)
-    return n;
-  const t = parseFloat(o);
-  return Number.isNaN(t) ? n : t;
+function L(p, c) {
+  if (!p)
+    return c;
+  const t = parseFloat(p);
+  return Number.isNaN(t) ? c : t;
 }
-class $ extends L {
+class X extends V {
   constructor() {
     super(...arguments);
-    l(this, "store", w());
-    l(this, "unsubscribeOrientation", null);
+    h(this, "store", B());
+    h(this, "unsubscribeOrientation", null);
     /**
      * Debounced version of _onColumnSpacingChange
      * Prevents excessive DOM updates when user rapidly adjusts the counter
      */
-    l(this, "_debouncedOnColumnSpacingChange", O((t) => {
+    h(this, "_debouncedOnColumnSpacingChange", f((t) => {
       this._onColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onRowSpacingChange
-     * Prevents excessive DOM updates when user rapidly adjusts the counter
      */
-    l(this, "_debouncedOnRowSpacingChange", O((t) => {
+    h(this, "_debouncedOnRowSpacingChange", f((t) => {
       this._onRowSpacingChange(t);
     }, 300));
+    /**
+     * Debounced version of _onMobileColumnSpacingChange
+     */
+    h(this, "_debouncedOnMobileColumnSpacingChange", f((t) => {
+      this._onMobileColumnSpacingChange(t);
+    }, 300));
+    /**
+     * Debounced version of _onMobileRowSpacingChange
+     */
+    h(this, "_debouncedOnMobileRowSpacingChange", f((t) => {
+      this._onMobileRowSpacingChange(t);
+    }, 300));
   }
   getId() {
-    return R;
+    return W;
   }
   getTemplate() {
     return `
             <div class="spacing-control-container">
                 ${this._GuTwoColumns([
-      this._GuLabel({ text: "Column Spacing (px)", name: s.COLUMN_SPACING_LABEL }),
+      this._GuLabel({ text: "Column Spacing on Desktop (px)", name: i.COLUMN_SPACING_LABEL }),
+      this._GuCounter({
+        name: i.COLUMN_SPACING,
+        minValue: N,
+        maxValue: _,
+        step: S
+      }),
+      this._GuLabel({ text: "Row Spacing on Desktop (px)", name: i.ROW_SPACING_LABEL }),
       this._GuCounter({
-        name: s.COLUMN_SPACING,
-        minValue: A,
-        maxValue: y,
-        step: b
+        name: i.ROW_SPACING,
+        minValue: N,
+        maxValue: _,
+        step: S
       }),
-      this._GuLabel({ text: "Row Spacing (px)" }),
+      this._GuLabel({
+        text: "Column Spacing on Mobile (px)",
+        name: i.MOBILE_COLUMN_SPACING_LABEL
+      }),
+      this._GuCounter({
+        name: i.MOBILE_COLUMN_SPACING,
+        minValue: N,
+        maxValue: _,
+        step: S
+      }),
+      this._GuLabel({ text: "Row Spacing on Mobile (px)", name: i.MOBILE_ROW_SPACING_LABEL }),
       this._GuCounter({
-        name: s.ROW_SPACING,
-        minValue: A,
-        maxValue: y,
-        step: b
+        name: i.MOBILE_ROW_SPACING,
+        minValue: N,
+        maxValue: _,
+        step: S
       })
     ])}
             </div>
         `;
   }
   onRender() {
-    this._setFormValues(), this._updateColumnSpacingVisibility(), this._listenToFormUpdates(), this._subscribeToOrientationChanges();
+    this._setFormValues(), this._updateSpacingVisibility(), this._listenToFormUpdates(), this._subscribeToOrientationChanges(), this._subscribeToEditorModeChanges();
   }
   onTemplateNodeUpdated(t) {
-    super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateColumnSpacingVisibility();
+    super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateSpacingVisibility();
   }
   onDestroy() {
     this.unsubscribeOrientation && (this.unsubscribeOrientation(), this.unsubscribeOrientation = null);
   }
   /**
-   * Updates column spacing visibility based on layout orientation
-   * Column spacing is hidden for list layout (products are stacked vertically)
-   * Reads from node config first, falls back to store then DOM
+   * Checks if the editor is currently in mobile preview mode
+   * using Stripo's EditorStatePropertyType API.
    */
-  _updateColumnSpacingVisibility() {
+  _isMobileMode() {
+    return this.api.getEditorState()[y.previewDeviceMode] === w.MOBILE;
+  }
+  /**
+   * Updates spacing control visibility based on layout orientation, editor mode,
+   * and products-per-row count.
+   * - List layout: hide column spacing (products are full-width), hide ALL mobile
+   *   spacing controls (list is responsive — single row spacing applies to both views)
+   * - Desktop mode: show desktop spacing, hide mobile spacing
+   * - Mobile mode: show mobile spacing, hide desktop spacing
+   * - 1 product per row: hide column spacing (no gap between single column)
+   */
+  _updateSpacingVisibility() {
     if (!this.api)
       return;
-    const t = d.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, i = (t.layout || e || C(this.currentNode)) === "grid";
-    this.api.setVisibility(s.COLUMN_SPACING, i), this.api.setVisibility(s.COLUMN_SPACING_LABEL, i);
+    const t = d.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, n = t.layout || e || b(this.currentNode), o = n === "grid", a = n === "list", r = this._isMobileMode(), l = t.cardsInRow > 1, u = t.mobileCardsInRow > 1;
+    this.api.setVisibility(i.COLUMN_SPACING, o && !r && l), this.api.setVisibility(i.COLUMN_SPACING_LABEL, o && !r && l), this.api.setVisibility(i.ROW_SPACING, a || !r), this.api.setVisibility(i.ROW_SPACING_LABEL, a || !r), this.api.setVisibility(i.MOBILE_COLUMN_SPACING, o && r && u), this.api.setVisibility(i.MOBILE_COLUMN_SPACING_LABEL, o && r && u), this.api.setVisibility(i.MOBILE_ROW_SPACING, !a && r), this.api.setVisibility(i.MOBILE_ROW_SPACING_LABEL, !a && r);
   }
   /**
-   * Reads spacing values from node config first, falls back to DOM styles
+   * Reads spacing values from node config first, falls back to DOM styles.
+   * DOM fallback is only used for legacy templates that lack node config.
    */
   _setFormValues() {
     if (!this.api)
       return;
-    const t = d.getConfig(this.currentNode), e = t.columnSpacing !== a ? t.columnSpacing : this._getStoredColumnSpacing(), r = t.rowSpacing !== m ? t.rowSpacing : this._getStoredRowSpacing();
+    const t = d.hasConfig(this.currentNode), e = d.getConfig(this.currentNode), n = t ? e.columnSpacing : this._getStoredColumnSpacing(), o = t ? e.rowSpacing : this._getStoredRowSpacing();
     this.api.updateValues({
-      [s.COLUMN_SPACING]: e,
-      [s.ROW_SPACING]: r
+      [i.COLUMN_SPACING]: n,
+      [i.ROW_SPACING]: o,
+      [i.MOBILE_COLUMN_SPACING]: e.mobileColumnSpacing,
+      [i.MOBILE_ROW_SPACING]: e.mobileRowSpacing
     });
   }
   /**
    * Gets stored column spacing from the first attribute row cell's padding.
+   * Scoped to the desktop container for accurate readings.
    * For grid layout: cells inside .recommendation-attribute-row have padding applied.
    * For list layout: the parent of .product-card-wrapper has the padding.
    * The padding is applied as "0 {halfSpacing}px", so we extract and multiply by 2.
    */
   _getStoredColumnSpacing() {
     if (!this.currentNode)
-      return a;
-    if (C(this.currentNode) === "grid") {
-      const p = this.currentNode.querySelector(".recommendation-attribute-row"), c = p == null ? void 0 : p.querySelector("td"), f = S(c, "padding");
-      if (!f)
-        return a;
-      const _ = f.trim().split(/\s+/);
-      return _.length < 2 ? a : N(_[1], a / 2) * 2;
+      return C;
+    const t = this.currentNode.querySelector(m) ?? this.currentNode;
+    if (b(this.currentNode) === "grid") {
+      const u = t.querySelector(".recommendation-attribute-row"), s = u == null ? void 0 : u.querySelector("td"), I = A(s, "padding");
+      if (!I)
+        return C;
+      const M = I.trim().split(/\s+/);
+      return M.length < 2 ? C : L(M[1], C / 2) * 2;
     }
-    const e = this.currentNode.querySelector(".product-card-wrapper"), r = V(e), i = S(r, "padding");
-    if (!i)
-      return a;
-    const u = i.trim().split(/\s+/);
-    return u.length < 2 ? a : N(u[1], a / 2) * 2;
+    const n = t.querySelector(".product-card-wrapper"), o = U(n), a = A(o, "padding");
+    if (!a)
+      return C;
+    const r = a.trim().split(/\s+/);
+    return r.length < 2 ? C : L(r[1], C / 2) * 2;
   }
   /**
    * Gets stored row spacing from the first spacer element's height style
+   * Scoped to the desktop container for accurate readings.
    */
   _getStoredRowSpacing() {
     if (!this.currentNode)
-      return m;
-    const t = this.currentNode.querySelector(".spacer"), e = S(t, "height");
-    return N(e, m);
+      return P;
+    const e = (this.currentNode.querySelector(m) ?? this.currentNode).querySelector(".spacer"), n = A(e, "height");
+    return L(n, P);
   }
+  // ========================================================================
+  // Desktop Spacing Handlers
+  // ========================================================================
   /**
-   * Handles column spacing changes.
-   * For grid layout: applies horizontal padding to all cells inside attribute rows.
-   * For list layout: applies padding to parent of product card wrappers.
+   * Handles column spacing changes for desktop.
+   * Applies horizontal padding only to the desktop container elements.
    */
   _onColumnSpacingChange(t) {
     if (!this.currentNode)
@@ -144,21 +199,21 @@ class $ extends L {
       this.currentNode,
       { columnSpacing: t },
       `Changed column spacing to ${t}px`
-    ), this._storeColumnSpacing(t);
-    const r = d.getConfig(this.currentNode).layout || C(this.currentNode), i = this.api.getDocumentModifier(), h = `0 ${t / 2}px`;
-    r === "grid" ? Array.from(
-      this.currentNode.querySelectorAll(".attribute-cell")
-    ).forEach((c) => {
-      i.modifyHtml(c).setStyle("padding", h);
+    ), this._storeDataAttribute(O.COLUMN_SPACING, t);
+    const n = d.getConfig(this.currentNode).layout || b(this.currentNode), o = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, l = this.currentNode.querySelector(m);
+    l && (n === "grid" ? Array.from(
+      l.querySelectorAll(".attribute-cell")
+    ).forEach((s) => {
+      o.modifyHtml(s).setStyle("padding", r);
     }) : Array.from(
-      this.currentNode.querySelectorAll(".product-card-wrapper")
-    ).forEach((c) => {
-      "parent" in c && c.parent() && i.modifyHtml(c.parent()).setStyle("padding", h);
-    }), i.apply(new g(`Update column spacing to ${t}px`));
+      l.querySelectorAll(".product-card-wrapper")
+    ).forEach((s) => {
+      "parent" in s && s.parent() && o.modifyHtml(s.parent()).setStyle("padding", r);
+    }), o.apply(new g(`Update column spacing to ${t}px`)));
   }
   /**
-   * Handles row spacing changes
-   * Applies height to all spacer elements between product rows
+   * Handles row spacing changes for desktop.
+   * Applies height only to spacer elements in the desktop container.
    */
   _onRowSpacingChange(t) {
     if (!this.currentNode)
@@ -168,55 +223,124 @@ class $ extends L {
       this.currentNode,
       { rowSpacing: t },
       `Changed row spacing to ${t}px`
-    ), this._storeRowSpacing(t);
-    const e = Array.from(
-      this.currentNode.querySelectorAll(".spacer")
+    ), this._storeDataAttribute(O.ROW_SPACING, t);
+    const e = this.currentNode.querySelector(m);
+    if (!e)
+      return;
+    const n = Array.from(
+      e.querySelectorAll(".spacer")
     );
-    if (!e.length)
+    if (!n.length)
       return;
-    const r = this.api.getDocumentModifier(), i = `${t}px`;
-    e.forEach((u) => {
-      r.modifyHtml(u).setStyle("height", i);
-    }), r.apply(new g(`Update row spacing to ${t}px`));
+    const o = this.api.getDocumentModifier(), a = `${t}px`;
+    n.forEach((r) => {
+      o.modifyHtml(r).setStyle("height", a);
+    }), o.apply(new g(`Update row spacing to ${t}px`));
   }
+  // ========================================================================
+  // Mobile Spacing Handlers
+  // ========================================================================
   /**
-   * Stores column spacing value in block data attribute
+   * Handles column spacing changes for mobile.
+   * Applies horizontal padding only to the mobile container elements.
    */
-  _storeColumnSpacing(t) {
+  _onMobileColumnSpacingChange(t) {
     if (!this.currentNode)
       return;
-    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(P.COLUMN_SPACING, t.toString()).apply(new g("Store column spacing"));
+    d.updateConfig(
+      this.api,
+      this.currentNode,
+      { mobileColumnSpacing: t },
+      `Changed mobile column spacing to ${t}px`
+    ), this._storeDataAttribute(O.MOBILE_COLUMN_SPACING, t);
+    const n = d.getConfig(this.currentNode).layout || b(this.currentNode), o = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, l = this.currentNode.querySelector(E);
+    l && (n === "grid" ? Array.from(
+      l.querySelectorAll(".attribute-cell")
+    ).forEach((s) => {
+      o.modifyHtml(s).setStyle("padding", r);
+    }) : Array.from(
+      l.querySelectorAll(".product-card-wrapper")
+    ).forEach((s) => {
+      "parent" in s && s.parent() && o.modifyHtml(s.parent()).setStyle("padding", r);
+    }), o.apply(new g(`Update mobile column spacing to ${t}px`)));
   }
   /**
-   * Stores row spacing value in block data attribute
+   * Handles row spacing changes for mobile.
+   * Applies height only to spacer elements in the mobile container.
    */
-  _storeRowSpacing(t) {
+  _onMobileRowSpacingChange(t) {
     if (!this.currentNode)
       return;
-    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(P.ROW_SPACING, t.toString()).apply(new g("Store row spacing"));
+    d.updateConfig(
+      this.api,
+      this.currentNode,
+      { mobileRowSpacing: t },
+      `Changed mobile row spacing to ${t}px`
+    ), this._storeDataAttribute(O.MOBILE_ROW_SPACING, t);
+    const e = this.currentNode.querySelector(E);
+    if (!e)
+      return;
+    const n = Array.from(
+      e.querySelectorAll(".spacer")
+    );
+    if (!n.length)
+      return;
+    const o = this.api.getDocumentModifier(), a = `${t}px`;
+    n.forEach((r) => {
+      o.modifyHtml(r).setStyle("height", a);
+    }), o.apply(new g(`Update mobile row spacing to ${t}px`));
   }
+  // ========================================================================
+  // Data Attribute Storage
+  // ========================================================================
+  /**
+   * Stores a spacing value as a data attribute on the block root element
+   */
+  _storeDataAttribute(t, e) {
+    const n = x(this.currentNode);
+    n && this.api.getDocumentModifier().modifyHtml(n).setAttribute(t, e.toString()).apply(new g(`Store ${t}`));
+  }
+  // ========================================================================
+  // Event Listeners
+  // ========================================================================
   _listenToFormUpdates() {
-    this.api.onValueChanged(s.COLUMN_SPACING, (t) => {
+    this.api.onValueChanged(i.COLUMN_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnColumnSpacingChange(e);
-    }), this.api.onValueChanged(s.ROW_SPACING, (t) => {
+    }), this.api.onValueChanged(i.ROW_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnRowSpacingChange(e);
+    }), this.api.onValueChanged(i.MOBILE_COLUMN_SPACING, (t) => {
+      const e = parseInt(t);
+      Number.isNaN(e) || this._debouncedOnMobileColumnSpacingChange(e);
+    }), this.api.onValueChanged(i.MOBILE_ROW_SPACING, (t) => {
+      const e = parseInt(t);
+      Number.isNaN(e) || this._debouncedOnMobileRowSpacingChange(e);
     });
   }
   /**
    * Subscribe to store orientation changes
-   * Updates column spacing visibility when layout changes via the layout control
+   * Updates spacing visibility when layout changes via the layout control
    */
   _subscribeToOrientationChanges() {
     this.unsubscribeOrientation && this.unsubscribeOrientation(), this.unsubscribeOrientation = this.store.$subscribe((t) => {
-      t.type === "patch object" && this._updateColumnSpacingVisibility();
+      t.type === "patch object" && (this._updateSpacingVisibility(), this._setFormValues());
     });
   }
+  /**
+   * Subscribes to editor preview mode changes via Stripo API.
+   * Toggles which spacing controls (desktop/mobile) are visible.
+   */
+  _subscribeToEditorModeChanges() {
+    this.api.onEditorStatePropUpdated(
+      y.previewDeviceMode,
+      () => {
+        this._updateSpacingVisibility();
+      }
+    );
+  }
 }
 export {
-  R as SPACING_CONTROL_ID,
-  $ as SpacingControl
+  W as SPACING_CONTROL_ID,
+  X as SpacingControl
 };