@useinsider/guido 2.2.0-beta.eeefcc3 → 3.0.0-beta.fd7cee3

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

@@ -1,41 +1,41 @@
-var _ = Object.defineProperty;
-var c = (i, o, t) => o in i ? _(i, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[o] = t;
-var d = (i, o, t) => c(i, typeof o != "symbol" ? o + "" : o, t);
-import { EditorStatePropertyType as u, PreviewDeviceMode as R } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as h } from "../../../common-control.js";
-import { MAX_PRODUCT_COUNT as C, MAX_PRODUCTS_PER_ROW as p, MAX_MOBILE_PRODUCTS_PER_ROW as m } from "../../constants/layout.js";
-import { RecommendationConfigService as s } from "../../services/configService.js";
+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";
+import { RecommendationConfigService as i } from "../../services/configService.js";
 import { useRecommendationExtensionStore as l } from "../../store/recommendation.js";
-import { ensureMobileCssRulesExist as O } from "../mobileLayout/cssRules.js";
-import { getCurrentLayout as I, regenerateMobileProductRows as g, regenerateProductRowsWithStyles as b } from "./utils.js";
-import { useDebounceFn as N } from "../../../../../node_modules/@vueuse/shared/index.js";
-const P = "recommendation-product-layout-control", e = {
+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",
   PRODUCT_IN_ROW: "cardsInRow",
   PRODUCT_IN_ROW_LABEL: "cardsInRowLabel",
   MOBILE_CARDS_IN_ROW: "mobileCardsInRow",
   MOBILE_CARDS_IN_ROW_LABEL: "mobileCardsInRowLabel"
 };
-class S extends h {
+class V extends R {
   constructor() {
     super(...arguments);
     // Store is used for backward compatibility with product fetching and regeneration
-    d(this, "store", l());
-    d(this, "storeUnsubscription", () => {
+    a(this, "store", l());
+    a(this, "storeUnsubscription", () => {
     });
-    d(this, "_debouncedRegenerateProductRows", N(() => {
+    a(this, "_debouncedRegenerateProductRows", L(() => {
       this._regenerateProductRows();
     }, 500));
   }
   getId() {
-    return P;
+    return M;
   }
   getTemplate() {
     return `
             <div class="product-layout-control-container">
                 ${this._GuTwoColumns([
       this._GuLabel({ text: "Number of Products" }),
-      this._GuCounter({ name: e.PRODUCT_COUNT, maxValue: C }),
+      this._GuCounter({ name: e.PRODUCT_COUNT, maxValue: h }),
       this._GuLabel({
         text: "Products in One Row on Desktop",
         name: e.PRODUCT_IN_ROW_LABEL
@@ -47,7 +47,7 @@ class S extends h {
       }),
       this._GuCounter({
         name: e.MOBILE_CARDS_IN_ROW,
-        maxValue: m
+        maxValue: g
       })
     ])}
             </div>
@@ -63,7 +63,7 @@ class S extends h {
     this.storeUnsubscription();
   }
   _setFormValues() {
-    const t = s.getConfig(this.currentNode);
+    const t = i.getConfig(this.currentNode);
     this.api.updateValues({
       [e.PRODUCT_COUNT]: t.size,
       [e.PRODUCT_IN_ROW]: t.cardsInRow,
@@ -75,7 +75,7 @@ class S extends h {
    * using Stripo's EditorStatePropertyType API.
    */
   _isMobileMode() {
-    return this.api.getEditorState()[u.previewDeviceMode] === R.MOBILE;
+    return this.api.getEditorState()[c.previewDeviceMode] === C.MOBILE;
   }
   /**
    * Updates counter visibility based on layout orientation and editor mode.
@@ -84,8 +84,8 @@ class S extends h {
    * - Grid + mobile mode: show mobile counter, hide desktop counter
    */
   _updateProductsInRowVisibility() {
-    const r = (s.getConfig(this.currentNode).layout || I(this.currentNode)) === "grid", n = this._isMobileMode();
-    this.api.setVisibility(e.PRODUCT_IN_ROW, r && !n), this.api.setVisibility(e.PRODUCT_IN_ROW_LABEL, r && !n), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW, r && n), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW_LABEL, r && n);
+    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);
   }
   /**
    * Subscribes to editor preview mode changes via Stripo API.
@@ -94,43 +94,51 @@ class S extends h {
    */
   _subscribeToEditorModeChanges() {
     this.api.onEditorStatePropUpdated(
-      u.previewDeviceMode,
+      c.previewDeviceMode,
       () => {
         this._updateProductsInRowVisibility();
       }
     );
   }
   _onProductCountChange(t) {
-    this.currentNode && (s.updateConfig(
+    !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 }), this._debouncedRegenerateProductRows());
+    ), this.store.patchCurrentBlockConfig({ size: t }));
   }
   _onProductsInRowChange(t) {
-    this.currentNode && (s.updateConfig(
+    if (!this.currentNode || i.getConfig(this.currentNode).cardsInRow === t)
+      return;
+    const o = t === 1 ? 0 : m;
+    i.updateConfig(
       this.api,
       this.currentNode,
-      { cardsInRow: t },
+      { cardsInRow: t, columnSpacing: o },
       `Changed products per row to ${t}`
-    ), this.store.patchCurrentBlockConfig({ cardsInRow: t }), this._debouncedRegenerateProductRows());
+    ), this.store.patchCurrentBlockConfig({ cardsInRow: t }, { triggerRefetch: !1 }), this._debouncedRegenerateProductRows();
   }
   _onMobileCardsInRowChange(t) {
-    this.currentNode && (s.updateConfig(
+    if (!this.currentNode || i.getConfig(this.currentNode).mobileCardsInRow === t)
+      return;
+    const o = t === 1 ? 0 : O;
+    i.updateConfig(
       this.api,
       this.currentNode,
-      { mobileCardsInRow: t },
+      { mobileCardsInRow: t, mobileColumnSpacing: o },
       `Changed mobile products per row to ${t}`
-    ), O(this.api), g({
+    ), I(this.api), f({
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier()
-    }));
+    });
   }
   _regenerateProductRows() {
-    b({
+    const t = i.getConfig(this.currentNode), s = parseInt(t.size) || 6, o = b(this.store.recommendationProducts, s);
+    P({
       currentNode: this.currentNode,
-      documentModifier: this.api.getDocumentModifier()
+      documentModifier: this.api.getDocumentModifier(),
+      products: o
     });
   }
   _listenToFormUpdates() {
@@ -149,12 +157,12 @@ class S extends h {
   _listenStateUpdates() {
     let t = this.store.recommendationConfigs.orientation;
     this.storeUnsubscription = this.store.$subscribe(() => {
-      const a = this.store.recommendationConfigs.orientation;
-      a !== t && (t = a, this._updateProductsInRowVisibility());
+      const s = this.store.recommendationConfigs.orientation;
+      s !== t && (t = s, this._updateProductsInRowVisibility());
     });
   }
 }
 export {
-  P as PRODUCT_LAYOUT_CONTROL_ID,
-  S as ProductLayoutControl
+  M as PRODUCT_LAYOUT_CONTROL_ID,
+  V as ProductLayoutControl
 };

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

@@ -1,14 +1,14 @@
 var r = Object.defineProperty;
-var u = (o, t, e) => t in o ? r(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var n = (o, t, e) => u(o, typeof t != "symbol" ? t + "" : t, e);
-import { UEAttr as l } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as f } from "../../../common-control.js";
-import { RecommendationConfigService as i } from "../../services/configService.js";
+var f = (o, t, e) => t in o ? r(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var n = (o, t, e) => f(o, typeof t != "symbol" ? t + "" : t, e);
+import { UEAttr as u } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as l } from "../../../common-control.js";
+import { RecommendationConfigService as s } from "../../services/configService.js";
 import { useRecommendationExtensionStore as d } from "../../store/recommendation.js";
-const h = "recommendation-shuffle-control", s = {
+const h = "recommendation-shuffle-control", i = {
   SHUFFLE_PRODUCTS: "shuffleProducts"
 };
-class g extends f {
+class S extends l {
   constructor() {
     super(...arguments);
     // Store is used for backward compatibility with product fetching
@@ -22,7 +22,7 @@ class g extends f {
             <div class="shuffle-control-container">
                 ${this._GuTwoColumns([
       this._GuLabel({ text: "Shuffle Recommended Products" }),
-      this._GuToggle(s.SHUFFLE_PRODUCTS)
+      this._GuToggle(i.SHUFFLE_PRODUCTS)
     ])}
             </div>
         `;
@@ -34,21 +34,21 @@ class g extends f {
     super.onTemplateNodeUpdated(e), this._setFormValues();
   }
   _setFormValues() {
-    const e = i.getConfig(this.currentNode);
+    const e = s.getConfig(this.currentNode);
     this.api.updateValues({
-      [s.SHUFFLE_PRODUCTS]: e.shuffleProducts
+      [i.SHUFFLE_PRODUCTS]: e.shuffleProducts
     });
   }
   _initializeToggle() {
-    const e = i.getConfig(this.currentNode);
+    const e = s.getConfig(this.currentNode);
     this.api.setUIEAttribute(
-      s.SHUFFLE_PRODUCTS,
-      l.SELECTPICKER.items,
+      i.SHUFFLE_PRODUCTS,
+      u.SELECTPICKER.items,
       e.shuffleProducts
     );
   }
   _onShuffleChange(e) {
-    this.currentNode && (i.updateConfig(
+    !this.currentNode || s.getConfig(this.currentNode).shuffleProducts === e || (s.updateConfig(
       this.api,
       this.currentNode,
       { shuffleProducts: e },
@@ -56,12 +56,12 @@ class g extends f {
     ), this.store.patchCurrentBlockConfig({ shuffleProducts: e }));
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(s.SHUFFLE_PRODUCTS, (e) => {
+    this.api.onValueChanged(i.SHUFFLE_PRODUCTS, (e) => {
       this._onShuffleChange(!!e);
     });
   }
 }
 export {
   h as SHUFFLE_CONTROL_ID,
-  g as ShuffleControl
+  S as ShuffleControl
 };