@useinsider/guido 3.2.0-beta.565bfaf → 3.2.0-beta.570fb6d

package/dist/extensions/Blocks/Recommendation/controls/customAttribute/textTrim.js

@@ -0,0 +1,99 @@
+import { ModificationDescription as T } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as m } from "../../../common-control.js";
+import { CSS_CLASS_TEXT_TRIM as o, ensureTextTrimCssRulesExist as l } from "../shared/textTrimCssRules.js";
+import { RecommendationControlId as u } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as c, ATTR_PRODUCT_ATTR as n } from "../../constants/selectors.js";
+import { RecommendationBlockId as a } from "../../constants/blockIds.js";
+const i = {
+  TEXT_TRIM_ENABLED: "customAttrTextTrimEnabled"
+};
+class g extends m {
+  getId() {
+    return u.CUSTOM_ATTR_TEXT_TRIM;
+  }
+  getTemplate() {
+    return `
+            <hr style="margin: 0; border: none; border-top: 1px solid #e0e0e0;" />
+            <div class="custom-attr-text-trim-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: this.api.translate("Trim Long Text") }),
+      this._GuToggle(i.TEXT_TRIM_ENABLED)
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._setFormValues();
+  }
+  // ========================================================================
+  // State Reading
+  // ========================================================================
+  _setFormValues() {
+    this.api.updateValues({
+      [i.TEXT_TRIM_ENABLED]: this._getCurrentTrimState()
+    });
+  }
+  _getCurrentTrimState() {
+    if (!this.currentNode || !("hasClass" in this.currentNode))
+      return !1;
+    if (this.currentNode.hasClass(o))
+      return !0;
+    const t = this._getTargetElements();
+    return t.length > 0 && "hasClass" in t[0] ? t[0].hasClass(o) : !1;
+  }
+  // ========================================================================
+  // Target Element Discovery (per-attribute scoping)
+  // ========================================================================
+  /**
+   * Finds all custom attribute elements of the same type as the current node.
+   *
+   * Similar to getCustomAttrTargetNodes in customAttribute/index.ts, but adapted
+   * for CommonControl lifecycle where currentNode is a class property (not a
+   * parameter from Stripo's getTargetNodes override).
+   */
+  _getTargetElements() {
+    if (!this.currentNode || !("closest" in this.currentNode))
+      return [];
+    const t = this.currentNode.closest(c);
+    if (!t)
+      return [];
+    const e = "asElement" in this.currentNode ? this.currentNode.asElement().getAttribute(n) : null;
+    if (e) {
+      const s = `[esd-extension-block-id="${a.CUSTOM_ATTRIBUTE}"][${n}="${e}"]`;
+      return Array.from(t.querySelectorAll(s));
+    }
+    return Array.from(
+      t.querySelectorAll(
+        `[esd-extension-block-id="${a.CUSTOM_ATTRIBUTE}"]`
+      )
+    );
+  }
+  // ========================================================================
+  // Toggle Handler
+  // ========================================================================
+  _onTextTrimChange(t) {
+    const e = this._getTargetElements();
+    if (!e.length)
+      return;
+    t && l(this.api);
+    const r = this.api.getDocumentModifier();
+    e.forEach((s) => {
+      t ? r.modifyHtml(s).setClass(o) : r.modifyHtml(s).removeClass(o);
+    }), r.apply(
+      new T(
+        t ? "Enable custom attribute text trimming" : "Disable custom attribute text trimming"
+      )
+    );
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(i.TEXT_TRIM_ENABLED, (t) => {
+      this._onTextTrimChange(t);
+    });
+  }
+}
+export {
+  g as CustomAttributeTextTrimControl
+};

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

@@ -1,15 +1,15 @@
 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 { BLOCK_ROOT_SELECTOR as t } from "../../constants/selectors.js";
+import { BLOCK_ROOT_SELECTOR as o } from "../../constants/selectors.js";
+import { RecommendationBlockId as r } from "../../constants/blockIds.js";
+import { RecommendationControlId as t } from "../../constants/controlIds.js";
 const e = n(
-  r.IMAGE_SIZE,
-  o.IMAGE,
-  t
+  t.IMAGE_SIZE,
+  r.IMAGE,
+  o
 ), i = m(
-  r.IMAGE_MARGINS,
-  o.IMAGE,
-  t
+  t.IMAGE_MARGINS,
+  r.IMAGE,
+  o
 ), C = {
   size: e,
   margins: i

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

@@ -1,9 +1,9 @@
-var c = Object.defineProperty;
-var h = (s, i, t) => i in s ? c(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t;
-var a = (s, i, t) => h(s, typeof i != "symbol" ? i + "" : i, t);
-import { UEAttr as l } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+var l = Object.defineProperty;
+var h = (o, i, t) => i in o ? l(o, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[i] = t;
+var a = (o, i, t) => h(o, typeof i != "symbol" ? i + "" : i, t);
+import { UEAttr as c } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as d } from "../../../common-control.js";
-import { RecommendationConfigService as n } from "../../services/configService.js";
+import { RecommendationConfigService as r } from "../../services/configService.js";
 import { useRecommendationExtensionStore as m } from "../../store/recommendation.js";
 const g = "recommendation-algorithm-control", e = {
   ALGORITHM: "strategy",
@@ -42,35 +42,34 @@ class T extends d {
     this._initializeSelectItems(), this._setFormValues(), this._listenToFormUpdates();
   }
   onTemplateNodeUpdated(t) {
-    super.onTemplateNodeUpdated(t), this._setFormValues();
+    super.onTemplateNodeUpdated(t), this._initializeSelectItems(), this._setFormValues();
   }
   _setFormValues() {
-    const t = n.getConfig(this.currentNode);
+    const t = r.getConfig(this.currentNode);
     this._setProductIdsVisibility(t.strategy), this.api.updateValues({
       [e.ALGORITHM]: t.strategy,
       [e.PRODUCT_IDS]: t.productIds.join(",")
     });
   }
   _initializeSelectItems() {
-    var o;
-    const t = (o = this.store) == null ? void 0 : o.getActivePredictiveAlgorithms;
-    if (t != null && t.length)
+    const t = this.store?.getActivePredictiveAlgorithms;
+    if (t?.length)
       try {
         this.api.setUIEAttribute(
           e.ALGORITHM,
-          l.SELECTPICKER.items,
+          c.SELECTPICKER.items,
           t
         );
-      } catch (r) {
-        console.warn("[AlgorithmControl] Failed to set algorithm options:", r);
+      } catch (s) {
+        console.warn("[AlgorithmControl] Failed to set algorithm options:", s);
       }
   }
   _setProductIdsVisibility(t) {
-    const r = (t ?? n.getConfig(this.currentNode).strategy) === "manualMerchandising";
-    this.api.setVisibility(e.PRODUCT_IDS, r), this.api.setVisibility(`${e.PRODUCT_IDS}_label`, r);
+    const n = (t ?? r.getConfig(this.currentNode).strategy) === "manualMerchandising";
+    this.api.setVisibility(e.PRODUCT_IDS, n), this.api.setVisibility(`${e.PRODUCT_IDS}_label`, n);
   }
   _onAlgorithmChange(t) {
-    !this.currentNode || n.getConfig(this.currentNode).strategy === t || (n.updateConfig(
+    !this.currentNode || r.getConfig(this.currentNode).strategy === t || (r.updateConfig(
       this.api,
       this.currentNode,
       { strategy: t },
@@ -80,13 +79,13 @@ class T extends d {
   _onProductIdsChange(t) {
     if (!this.currentNode)
       return;
-    const o = t.split(",").map((r) => r.trim()).filter(Boolean);
-    n.updateConfig(
+    const s = t.split(",").map((n) => n.trim()).filter(Boolean);
+    r.updateConfig(
       this.api,
       this.currentNode,
-      { productIds: o },
+      { productIds: s },
       "Updated product IDs"
-    ), this.store.patchCurrentBlockConfig({ productIds: o });
+    ), this.store.patchCurrentBlockConfig({ productIds: s });
   }
   _listenToFormUpdates() {
     this.api.onValueChanged(e.ALGORITHM, (t) => {

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

@@ -1,6 +1,6 @@
 var n = Object.defineProperty;
-var o = (i, e, t) => e in i ? n(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var r = (i, e, t) => o(i, typeof e != "symbol" ? e + "" : e, t);
+var o = (e, t, i) => t in e ? n(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
+var r = (e, t, i) => o(e, typeof t != "symbol" ? t + "" : t, i);
 import { CommonControl as s } from "../../../common-control.js";
 import { useRecommendationExtensionStore as l } from "../../store/recommendation.js";
 const d = "recommendation-filters-control", a = {
@@ -35,15 +35,13 @@ class h extends s {
     this._setupButtonListener();
   }
   onDestroy() {
-    var t;
-    (t = this.addFilterButton) == null || t.removeEventListener("click", this.addFilterListener);
+    this.addFilterButton?.removeEventListener("click", this.addFilterListener);
   }
   _onFilterSelectClick() {
     this.store.openFilterDrawer();
   }
   _setupButtonListener() {
-    var t;
-    this.addFilterListener = this._onFilterSelectClick.bind(this), this.addFilterButton = this.getContainer().querySelector("#guido__btn-add-filter"), (t = this.addFilterButton) == null || t.addEventListener("click", this.addFilterListener);
+    this.addFilterListener = this._onFilterSelectClick.bind(this), this.addFilterButton = this.getContainer().querySelector("#guido__btn-add-filter"), this.addFilterButton?.addEventListener("click", this.addFilterListener);
   }
 }
 export {

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

@@ -1,8 +1,8 @@
 var f = Object.defineProperty;
-var p = (d, l, t) => l in d ? f(d, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[l] = t;
-var s = (d, l, t) => p(d, typeof l != "symbol" ? l + "" : l, t);
+var p = (d, c, t) => c in d ? f(d, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[c] = t;
+var i = (d, c, t) => p(d, typeof c != "symbol" ? c + "" : c, t);
 import { CommonControl as g } from "../../../common-control.js";
-import { DEFAULT_NODE_CONFIG as a } from "../../constants/defaultConfig.js";
+import { DEFAULT_NODE_CONFIG as s } from "../../constants/defaultConfig.js";
 import { RecommendationConfigService as h } from "../../services/configService.js";
 import { useRecommendationExtensionStore as y } from "../../store/recommendation.js";
 import { AlgorithmControl as R } from "./algorithm.js";
@@ -12,13 +12,13 @@ import { CURRENCY_CONTROL_ID as X } from "./currency.js";
 import { FiltersControl as _ } from "./filters.js";
 import { FILTERS_CONTROL_ID as tt } from "./filters.js";
 import { LayoutOrientationControl as b } from "./layoutOrientation.js";
-import { LAYOUT_ORIENTATION_CONTROL_ID as ot } from "./layoutOrientation.js";
+import { LAYOUT_ORIENTATION_CONTROL_ID as et } from "./layoutOrientation.js";
 import { LocaleControl as O } from "./locale.js";
 import { LOCALE_CONTROL_ID as nt } from "./locale.js";
 import { ProductCountControl as I } from "./productCount.js";
 import { PRODUCT_COUNT_CONTROL_ID as st } from "./productCount.js";
 import { ProductLayoutControl as T } from "./productLayout.js";
-import { PRODUCT_LAYOUT_CONTROL_ID as lt } from "./productLayout.js";
+import { PRODUCT_LAYOUT_CONTROL_ID as ct } from "./productLayout.js";
 import { ShuffleControl as S } from "./shuffle.js";
 import { SHUFFLE_CONTROL_ID as ut } from "./shuffle.js";
 import { getBlockElement as L, updateProductContentInPlace as P, regenerateProductRowsWithStyles as D } from "./utils.js";
@@ -28,22 +28,22 @@ const k = "recommendation-id", E = "ui-elements-recommendation-block";
 class H extends g {
   constructor() {
     super(...arguments);
-    s(this, "store", y());
-    s(this, "storeUnsubscription", () => {
+    i(this, "store", y());
+    i(this, "storeUnsubscription", () => {
     });
     // Sub-control instances for lifecycle management
-    s(this, "algorithmControl", null);
-    s(this, "localeControl", null);
-    s(this, "currencyControl", null);
-    s(this, "productCountControl", null);
-    s(this, "productLayoutControl", null);
-    s(this, "filtersControl", null);
-    s(this, "shuffleControl", null);
-    s(this, "layoutOrientationControl", null);
+    i(this, "algorithmControl", null);
+    i(this, "localeControl", null);
+    i(this, "currencyControl", null);
+    i(this, "productCountControl", null);
+    i(this, "productLayoutControl", null);
+    i(this, "filtersControl", null);
+    i(this, "shuffleControl", null);
+    i(this, "layoutOrientationControl", null);
     /**
      * Debounced product fetch to prevent rapid API calls during config changes
      */
-    s(this, "_debouncedFetchProducts", m(() => {
+    i(this, "_debouncedFetchProducts", m(() => {
       this.store.fetchRecommendationProducts();
     }, 500));
     /**
@@ -57,18 +57,18 @@ class H extends g {
      * count. The store pads products to the configured size, so in-place only
      * fails when the size actually changed.
      */
-    s(this, "_debouncedRegenerateWithProducts", m(() => {
+    i(this, "_debouncedRegenerateWithProducts", m(() => {
       const t = this.store.recommendationProducts;
       if (!this.currentNode || !this.api)
         return;
-      const e = this.api.getDocumentModifier();
+      const o = this.api.getDocumentModifier();
       P({
         currentNode: this.currentNode,
-        documentModifier: e,
+        documentModifier: o,
         products: t
       }) || D({
         currentNode: this.currentNode,
-        documentModifier: e,
+        documentModifier: o,
         products: t
       });
     }, 100));
@@ -86,8 +86,8 @@ class H extends g {
       this.filtersControl,
       this.shuffleControl,
       this.layoutOrientationControl
-    ].forEach((e) => {
-      e.api = this.api;
+    ].forEach((o) => {
+      o.api = this.api;
     }), `
             <div class="recommendation-controls-container">
                 ${this.layoutOrientationControl.getTemplate()}
@@ -102,19 +102,19 @@ class H extends g {
         `;
   }
   async onRender() {
-    var e;
     const t = this._getRecommendationIdFromNode(this.currentNode) ?? this.store.currentRecommendationId;
-    if (t !== null && this.store.setCurrentBlock(t), this._listenStateUpdates(), t !== null && ((e = this.store.blockStates[t]) != null && e.isInitialized)) {
+    if (t !== null && this.store.setCurrentBlock(t), this._listenStateUpdates(), t !== null && this.store.blockStates[t]?.isInitialized) {
       this._initializeSubControls();
       return;
     }
     await this._fetchBlockData(t), this._initializeSubControls();
   }
   onTemplateNodeUpdated(t) {
-    var r;
     super.onTemplateNodeUpdated(t);
-    const e = this._getRecommendationIdFromNode(t);
-    e !== null && e !== this.store.currentRecommendationId && this.store.setCurrentBlock(e), this._syncNodeConfigToStore(), e !== null && !((r = this.store.blockStates[e]) != null && r.isInitialized) && this._fetchBlockData(e), [
+    const o = this._getRecommendationIdFromNode(t);
+    o !== null && o !== this.store.currentRecommendationId && this.store.setCurrentBlock(o), o !== null && this._syncNodeConfigToStore(), o !== null && !this.store.blockStates[o]?.isInitialized && this._fetchBlockData(o).then(() => {
+      this._initializeSubControls();
+    }), [
       this.layoutOrientationControl,
       this.productCountControl,
       this.algorithmControl,
@@ -123,9 +123,8 @@ class H extends g {
       this.productLayoutControl,
       this.filtersControl,
       this.shuffleControl
-    ].forEach((n) => {
-      var i;
-      n != null && n.api && (n.currentNode = t, (i = n.onTemplateNodeUpdated) == null || i.call(n, t));
+    ].forEach((r) => {
+      r?.api && (r.currentNode = t, r.onTemplateNodeUpdated?.(t));
     });
   }
   onDestroy() {
@@ -138,10 +137,7 @@ class H extends g {
       this.productLayoutControl,
       this.filtersControl,
       this.shuffleControl
-    ].forEach((e) => {
-      var o;
-      return (o = e == null ? void 0 : e.onDestroy) == null ? void 0 : o.call(e);
-    });
+    ].forEach((o) => o?.onDestroy?.());
   }
   /**
    * Initialize all sub-controls with the shared API context
@@ -157,9 +153,8 @@ class H extends g {
       this.productLayoutControl,
       this.filtersControl,
       this.shuffleControl
-    ].forEach((e) => {
-      var o;
-      e && (e.api = this.api, e.currentNode = this.currentNode, (o = e.onRender) == null || o.call(e));
+    ].forEach((o) => {
+      o && (o.api = this.api, o.currentNode = this.currentNode, o.onRender?.());
     });
   }
   /**
@@ -174,8 +169,7 @@ class H extends g {
    * values are being prepared for the upcoming initial fetch.
    */
   _syncNodeConfigToStore() {
-    var r;
-    const t = h.getConfig(this.currentNode), e = this.store.currentRecommendationId, o = e !== null && ((r = this.store.blockStates[e]) == null ? void 0 : r.isInitialized);
+    const t = h.getConfig(this.currentNode), o = this.store.currentRecommendationId, e = o !== null && this.store.blockStates[o]?.isInitialized;
     this.store.patchCurrentBlockConfig({
       strategy: t.strategy,
       language: t.language,
@@ -184,7 +178,7 @@ class H extends g {
       // Only sync filters from node config during initial load.
       // After initialization, the Pinia store is the source of truth
       // for filters (edited via the filter drawer).
-      ...o ? {} : { filters: t.filters },
+      ...e ? {} : { filters: t.filters },
       shuffleProducts: t.shuffleProducts,
       currencySettings: {
         name: t.currency.code,
@@ -210,13 +204,13 @@ class H extends g {
     t !== null && this.store.markBlockInitialized(t), (await Promise.allSettled([
       this.store.fetchRecommendationCreateData(),
       this.store.fetchRecommendationFilters()
-    ])).forEach((o, r) => {
-      o.status === "rejected" && console.warn(`Recommendation block: ${["fetchRecommendationCreateData", "fetchRecommendationFilters"][r]} failed`, o.reason);
+    ])).forEach((e, r) => {
+      e.status === "rejected" && console.warn(`Recommendation block: ${["fetchRecommendationCreateData", "fetchRecommendationFilters"][r]} failed`, e.reason);
     }), this._applySmartDefaults();
     try {
       await this.store.fetchRecommendationProducts();
-    } catch (o) {
-      console.warn("Recommendation block: fetchRecommendationProducts failed", o);
+    } catch (e) {
+      console.warn("Recommendation block: fetchRecommendationProducts failed", e);
     }
   }
   /**
@@ -232,62 +226,62 @@ class H extends g {
   _applySmartDefaults() {
     if (!this.currentNode || !this.api)
       return;
-    const t = h.getConfig(this.currentNode), e = {};
-    let o = null, r = null, n = null;
-    if (t.currency.code === a.currency.code) {
-      const { currencyList: i } = this.store;
-      i.length > 0 && (i.some(
-        (u) => u.value === `price.${a.currency.code}`
-      ) || (o = i[0].value.replace("price.", ""), e.currency = {
-        ...a.currency,
-        code: o,
-        symbol: o
+    const t = h.getConfig(this.currentNode), o = {};
+    let e = null, r = null, l = null;
+    if (t.currency.code === s.currency.code) {
+      const { currencyList: n } = this.store;
+      n.length > 0 && (n.some(
+        (u) => u.value === `price.${s.currency.code}`
+      ) || (e = n[0].value.replace("price.", ""), o.currency = {
+        ...s.currency,
+        code: e,
+        symbol: e
       }));
     }
-    if (t.strategy === a.strategy) {
-      const i = this.store.getActivePredictiveAlgorithms;
-      i.length > 0 && (i.some(
-        (u) => u.value === a.strategy
-      ) || (r = i[0].value, e.strategy = r));
+    if (t.strategy === s.strategy) {
+      const n = this.store.getActivePredictiveAlgorithms;
+      n.length > 0 && (n.some(
+        (u) => u.value === s.strategy
+      ) || (r = n[0].value, o.strategy = r));
     }
-    if (t.language === a.language) {
-      const i = this.store.getLanguages;
-      i.length > 0 && (i.some(
-        (u) => u.value === a.language
-      ) || (n = i[0].value, e.language = n));
+    if (t.language === s.language) {
+      const n = this.store.getLanguages;
+      n.length > 0 && (n.some(
+        (u) => u.value === s.language
+      ) || (l = n[0].value, o.language = l));
     }
-    !o && !r && !n || (h.updateConfig(
+    !e && !r && !l || (h.updateConfig(
       this.api,
       this.currentNode,
-      e,
+      o,
       "Applied smart defaults"
     ), this.store.patchCurrentBlockConfig({
-      ...o ? {
+      ...e ? {
         currencySettings: {
-          name: o,
-          value: o,
-          symbol: o,
-          alignment: a.currency.alignment === "before" ? "0" : "1",
-          decimalCount: a.currency.decimalCount.toString(),
-          decimalSeparator: a.currency.decimalSeparator,
-          thousandSeparator: a.currency.thousandSeparator
+          name: e,
+          value: e,
+          symbol: e,
+          alignment: s.currency.alignment === "before" ? "0" : "1",
+          decimalCount: s.currency.decimalCount.toString(),
+          decimalSeparator: s.currency.decimalSeparator,
+          thousandSeparator: s.currency.thousandSeparator
         }
       } : {},
       ...r ? { strategy: r } : {},
-      ...n ? { language: n } : {}
+      ...l ? { language: l } : {}
     }, { triggerRefetch: !1 }));
   }
   /**
    * Reads the recommendation-id attribute from the block element within the node
    */
   _getRecommendationIdFromNode(t) {
-    const e = L(t);
-    if (!e || !("getAttribute" in e))
+    const o = L(t);
+    if (!o || !("getAttribute" in o))
       return null;
-    const o = e.getAttribute(k);
-    if (!o)
+    const e = o.getAttribute(k);
+    if (!e)
       return null;
-    const r = parseInt(o);
+    const r = parseInt(e);
     return Number.isNaN(r) ? null : r;
   }
   /**
@@ -305,17 +299,17 @@ class H extends g {
    */
   _listenStateUpdates() {
     const { store: t } = this;
-    let e = t.recommendationProducts, o = t.$state.configVersion, r = t.currentRecommendationId;
+    let o = t.recommendationProducts, e = t.$state.configVersion, r = t.currentRecommendationId;
     this.storeUnsubscription = t.$subscribe(() => {
-      const n = t.currentRecommendationId;
-      if (n !== r) {
-        r = n, e = t.recommendationProducts, o = t.$state.configVersion;
+      const l = t.currentRecommendationId;
+      if (l !== r) {
+        r = l, o = t.recommendationProducts, e = t.$state.configVersion;
         return;
       }
-      const i = t.$state.configVersion;
-      i !== o && (o = i, this._persistFiltersToNodeConfig(), this._debouncedFetchProducts());
-      const c = t.recommendationProducts, u = c !== e, C = Array.isArray(c) && c.length > 0;
-      u && C && (e = c, this._debouncedRegenerateWithProducts());
+      const n = t.$state.configVersion;
+      n !== e && (e = n, this._persistFiltersToNodeConfig(), this._debouncedFetchProducts());
+      const a = t.recommendationProducts, u = a !== o, C = Array.isArray(a) && a.length > 0;
+      u && C && (o = a, this._debouncedRegenerateWithProducts());
     });
   }
   /**
@@ -342,12 +336,12 @@ export {
   N as CurrencyControl,
   tt as FILTERS_CONTROL_ID,
   _ as FiltersControl,
-  ot as LAYOUT_ORIENTATION_CONTROL_ID,
+  et as LAYOUT_ORIENTATION_CONTROL_ID,
   nt as LOCALE_CONTROL_ID,
   b as LayoutOrientationControl,
   O as LocaleControl,
   st as PRODUCT_COUNT_CONTROL_ID,
-  lt as PRODUCT_LAYOUT_CONTROL_ID,
+  ct as PRODUCT_LAYOUT_CONTROL_ID,
   I as ProductCountControl,
   T as ProductLayoutControl,
   H as RecommendationBlockControl,

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

@@ -3,12 +3,12 @@ var p = (o, e, t) => e in o ? O(o, e, { enumerable: !0, configurable: !0, writab
 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 f } from "../../store/recommendation.js";
-import { getCurrentLayout as C, getBlockElement as I, regenerateProductRowsWithStyles as S } from "./utils.js";
+import { useRecommendationExtensionStore as L } from "../../store/recommendation.js";
+import { getCurrentLayout as m, getBlockElement as T, regenerateProductRowsWithStyles as f } from "./utils.js";
+import { LAYOUT_OPTIONS as I, DEFAULT_MOBILE_ROW_SPACING as d, DEFAULT_MOBILE_COLUMN_SPACING as l, DEFAULT_ROW_SPACING as g, DEFAULT_COLUMN_SPACING as _ } from "../../constants/layout.js";
+import { DEFAULT_COMPOSITION as C } from "../../constants/defaultConfig.js";
+import { ATTR_DATA_CUSTOM_ATTRIBUTES as S } from "../../constants/selectors.js";
 const U = "recommendation-layout-orientation-control", A = "recommendationInfoBannerTest", a = {
   LAYOUT: "layout"
 }, y = "data-card-composition", i = {
@@ -21,7 +21,7 @@ const U = "recommendation-layout-orientation-control", A = "recommendationInfoBa
 class Y extends N {
   constructor() {
     super(...arguments);
-    r(this, "store", f());
+    r(this, "store", L());
     r(this, "isChangingLayout", !1);
   }
   getId() {
@@ -36,7 +36,7 @@ class Y extends N {
       this._GuLabel({ text: this.api.translate("Layout Orientation") }),
       this._GuRadioButton({
         name: a.LAYOUT,
-        buttons: T
+        buttons: I
       })
     ])}
             </div>
@@ -55,7 +55,7 @@ class Y extends N {
     super.onTemplateNodeUpdated(t), this._setFormValues();
   }
   _setFormValues() {
-    const u = s.getConfig(this.currentNode).layout || C(this.currentNode);
+    const u = s.getConfig(this.currentNode).layout || m(this.currentNode);
     this.api.updateValues({
       [a.LAYOUT]: u
     });
@@ -65,9 +65,9 @@ class Y extends N {
    * Updates node config, data attribute and regenerates product rows
    */
   _onLayoutChange(t) {
-    if (this.isChangingLayout || !this.currentNode || (s.getConfig(this.currentNode).layout || C(this.currentNode)) === t)
+    if (this.isChangingLayout || !this.currentNode || (s.getConfig(this.currentNode).layout || m(this.currentNode)) === t)
       return;
-    const c = I(this.currentNode);
+    const c = T(this.currentNode);
     if (c) {
       this.isChangingLayout = !0;
       try {
@@ -76,15 +76,15 @@ class Y extends N {
           this.currentNode,
           {
             layout: t,
-            columnSpacing: g,
-            rowSpacing: l,
-            mobileColumnSpacing: d,
-            mobileRowSpacing: m
+            columnSpacing: _,
+            rowSpacing: g,
+            mobileColumnSpacing: l,
+            mobileRowSpacing: d
           },
           `Changed layout to ${t}`
         ), this.store.patchCurrentBlockConfig({ orientation: 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);
+        const n = this.api.getDocumentModifier().modifyHtml(c).setAttribute(i.LAYOUT, t).setAttribute(i.COLUMN_SPACING, _.toString()).setAttribute(i.ROW_SPACING, g.toString()).setAttribute(i.MOBILE_COLUMN_SPACING, l.toString()).setAttribute(i.MOBILE_ROW_SPACING, d.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, C.join(",")).setAttribute(S, "[]"), n.apply(new h(`Update layout to ${t}`)), this._regenerateProductRows(t);
       } finally {
         this.isChangingLayout = !1;
       }
@@ -96,11 +96,11 @@ class Y extends N {
    * @param layout - The layout to use for regeneration (passed explicitly to avoid stale DOM reads)
    */
   _regenerateProductRows(t) {
-    this.currentNode && S({
+    this.currentNode && f({
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier(),
       layout: t,
-      composition: _
+      composition: C
     });
   }
   _listenToFormUpdates() {