@useinsider/guido 2.0.0-beta.e73ba15 → 2.0.0-beta.edc1f0a

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

@@ -1,7 +1,12 @@
-const _ = 3, R = 3, O = 9, D = 4;
+const _ = 3, A = 3, C = 9, P = 4, o = 10, t = 20, R = 0, c = 50, n = 5;
 export {
-  R as DEFAULT_CARDS_IN_ROW,
+  A as DEFAULT_CARDS_IN_ROW,
+  o as DEFAULT_COLUMN_SPACING,
   _ as DEFAULT_PRODUCTS_PER_ROW,
-  D as MAX_PRODUCTS_PER_ROW,
-  O as MAX_PRODUCT_COUNT
+  t as DEFAULT_ROW_SPACING,
+  P as MAX_PRODUCTS_PER_ROW,
+  C as MAX_PRODUCT_COUNT,
+  c as MAX_SPACING,
+  R as MIN_SPACING,
+  n as SPACING_STEP
 };

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

@@ -1,12 +1,13 @@
-import { ModificationDescription as l } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as i } from "../../../common-control.js";
+import { ModificationDescription as d } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as s } from "../../../common-control.js";
+import { getCurrentLayout as l } from "../main/utils.js";
 const u = "recommendation-card-background-color-control", e = {
   CARD_BACKGROUND_COLOR: "cardBackgroundColor"
-}, c = {
+}, a = {
   VERTICAL: ".product-card-segment",
   HORIZONTAL: ".product-card-wrapper"
 };
-class g extends i {
+class _ extends s {
   getId() {
     return u;
   }
@@ -23,43 +24,22 @@ class g extends i {
   onRender() {
     this._setFormValues(), this._listenToFormUpdates();
   }
-  onTemplateNodeUpdated(t) {
-    super.onTemplateNodeUpdated(t), this._setFormValues();
+  onTemplateNodeUpdated(r) {
+    super.onTemplateNodeUpdated(r), this._setFormValues();
   }
   _setFormValues() {
-    const t = this._getCurrentCardBackgroundColor();
+    const r = this._getCurrentCardBackgroundColor();
     this.api.updateValues({
-      [e.CARD_BACKGROUND_COLOR]: t
+      [e.CARD_BACKGROUND_COLOR]: r
     });
   }
-  /**
-   * Gets the block element - either currentNode itself or as a descendant
-   * The currentNode could BE the block element or contain it
-   */
-  _getBlockElement() {
-    if (!this.currentNode)
-      return null;
-    if ("getAttribute" in this.currentNode) {
-      const t = this.currentNode.getAttribute("class");
-      if (t && t.includes("ins-recommendation-v3-block-v2"))
-        return this.currentNode;
-    }
-    return "querySelector" in this.currentNode ? this.currentNode.querySelector(".ins-recommendation-v3-block-v2") : null;
-  }
-  /**
-   * Gets the current layout orientation from the block's data attribute
-   */
-  _getCurrentLayout() {
-    const t = this._getBlockElement();
-    return !t || !("getAttribute" in t) ? "vertical" : t.getAttribute("data-layout") === "horizontal" ? "horizontal" : "vertical";
-  }
   /**
    * Gets the appropriate selector based on layout
    * Vertical: .product-card-segment (inner table per product cell)
    * Horizontal: .product-card-wrapper (table per product row)
    */
   _getCardSelector() {
-    return this._getCurrentLayout() === "vertical" ? c.VERTICAL : c.HORIZONTAL;
+    return l(this.currentNode) === "vertical" ? a.VERTICAL : a.HORIZONTAL;
   }
   /**
    * Reads the current background color from the first product card element
@@ -68,33 +48,33 @@ class g extends i {
   _getCurrentCardBackgroundColor() {
     if (!this.currentNode || !("querySelectorAll" in this.currentNode))
       return "transparent";
-    const t = this._getCardSelector(), r = this.currentNode.querySelector(t);
-    return !r || !("getStyle" in r) ? "transparent" : r.getStyle("background-color") || "transparent";
+    const r = this._getCardSelector(), t = this.currentNode.querySelector(r);
+    return !t || !("getStyle" in t) ? "transparent" : t.getStyle("background-color") || "transparent";
   }
   /**
    * Handles card background color changes
    * Applies the color to all product card elements based on layout
    */
-  _onCardBackgroundColorChange(t) {
+  _onCardBackgroundColorChange(r) {
     if (!this.currentNode || !("querySelectorAll" in this.currentNode))
       return;
-    const r = this._getCardSelector(), o = Array.from(
-      this.currentNode.querySelectorAll(r)
+    const t = this._getCardSelector(), o = Array.from(
+      this.currentNode.querySelectorAll(t)
     );
     if (o.length === 0)
       return;
     const n = this.api.getDocumentModifier();
-    o.forEach((a) => {
-      n.modifyHtml(a).setStyle("background-color", t);
-    }), n.apply(new l("Update card background color"));
+    o.forEach((c) => {
+      n.modifyHtml(c).setStyle("background-color", r);
+    }), n.apply(new d("Update card background color"));
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(e.CARD_BACKGROUND_COLOR, (t) => {
-      this._onCardBackgroundColorChange(t);
+    this.api.onValueChanged(e.CARD_BACKGROUND_COLOR, (r) => {
+      this._onCardBackgroundColorChange(r);
     });
   }
 }
 export {
   u as CARD_BACKGROUND_COLOR_CONTROL_ID,
-  g as CardBackgroundColorControl
+  _ as CardBackgroundColorControl
 };

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

@@ -1,29 +1,31 @@
-var f = Object.defineProperty;
-var C = (a, n, t) => n in a ? f(a, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[n] = t;
-var c = (a, n, t) => C(a, typeof n != "symbol" ? n + "" : n, t);
-import { ModificationDescription as d } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as g } from "../../../common-control.js";
-import { ATTR_PRODUCT_IMAGE as O, ATTR_PRODUCT_NAME as A, ATTR_PRODUCT_PRICE as R, ATTR_PRODUCT_OLD_PRICE as N, ATTR_PRODUCT_OMNIBUS_PRICE as E, ATTR_PRODUCT_OMNIBUS_DISCOUNT as D, ATTR_PRODUCT_BUTTON as v } from "../../constants/selectors.js";
-import { useRecommendationExtensionStore as I } from "../../store/recommendation.js";
-const V = "ui-elements-recommendation-card-composition", S = {
+var T = Object.defineProperty;
+var C = (a, n, t) => n in a ? T(a, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[n] = t;
+var l = (a, n, t) => C(a, typeof n != "symbol" ? n + "" : n, t);
+import { ModificationDescription as u } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as f } from "../../../common-control.js";
+import { ATTR_PRODUCT_IMAGE as O, ATTR_PRODUCT_NAME as g, ATTR_PRODUCT_PRICE as R, ATTR_PRODUCT_OLD_PRICE as A, ATTR_PRODUCT_OMNIBUS_PRICE as D, ATTR_PRODUCT_OMNIBUS_DISCOUNT as N, ATTR_PRODUCT_BUTTON as V } from "../../constants/selectors.js";
+import { useRecommendationExtensionStore as E } from "../../store/recommendation.js";
+import { getTableDisplayValue as I } from "../../utils/tagName.js";
+import { getCurrentLayout as P } from "../main/utils.js";
+const S = "ui-elements-recommendation-card-composition", k = {
   ORDERABLE: "cardComposition"
-}, b = ".recommendation-attribute-row", P = ".product-card-wrapper > tbody", y = "data-card-composition", p = "data-attribute-type", h = "data-visibility", s = [
+}, c = ".recommendation-attribute-row", v = ".product-card-wrapper > tbody", _ = "data-card-composition", d = "data-attribute-type", m = "data-visibility", s = [
   { key: O, label: "Product Image", visible: !0 },
-  { key: A, label: "Product Name", visible: !0 },
+  { key: g, label: "Product Name", visible: !0 },
   { key: R, label: "Product Price", visible: !0 },
-  { key: N, label: "Product Original Price", visible: !0 },
-  { key: E, label: "Omnibus Price", visible: !1 },
-  { key: D, label: "Omnibus Discount", visible: !1 },
-  { key: v, label: "Product Button", visible: !0 }
+  { key: A, label: "Product Original Price", visible: !0 },
+  { key: D, label: "Omnibus Price", visible: !1 },
+  { key: N, label: "Omnibus Discount", visible: !1 },
+  { key: V, label: "Product Button", visible: !0 }
 ];
-class x extends g {
+class H extends f {
   constructor() {
     super(...arguments);
-    c(this, "store", I());
-    c(this, "unsubscribeOrientation", null);
+    l(this, "store", E());
+    l(this, "unsubscribeOrientation", null);
   }
   getId() {
-    return V;
+    return S;
   }
   getTemplate() {
     const t = s.map((e) => ({
@@ -34,7 +36,7 @@ class x extends g {
     return `
             <div class="container" data-card-composition-control>
                 ${this._GuLabel({ text: "Card Element Order & Visibility" })}
-                ${this._GuOrderable(S.ORDERABLE, t)}
+                ${this._GuOrderable(k.ORDERABLE, t)}
             </div>
         `;
   }
@@ -85,7 +87,7 @@ class x extends g {
   _readCompositionFromNode() {
     if (!this.currentNode || !("getAttribute" in this.currentNode))
       return s.map((e) => e.key);
-    const t = this.currentNode.getAttribute(y);
+    const t = this.currentNode.getAttribute(_);
     return t ? t.split(",").filter(Boolean) : s.map((e) => e.key);
   }
   /**
@@ -101,7 +103,7 @@ class x extends g {
   _readVisibilityFromRows() {
     if (!this.currentNode)
       return this._getDefaultVisibilities();
-    const t = Array.from(this.currentNode.querySelectorAll(b)), e = this._extractVisibilityFromRows(t);
+    const t = Array.from(this.currentNode.querySelectorAll(c)), e = this._extractVisibilityFromRows(t);
     return this._mergeWithDefaults(e);
   }
   /**
@@ -118,7 +120,7 @@ class x extends g {
     return t.forEach((i) => {
       if (!("getAttribute" in i))
         return;
-      const o = i.getAttribute(p), r = i.getAttribute(h);
+      const o = i.getAttribute(d), r = i.getAttribute(m);
       o && r !== null && (e[o] = this._parseVisibilityValue(r));
     }), e;
   }
@@ -146,7 +148,7 @@ class x extends g {
     if (!this.currentNode)
       return;
     const e = this._getCurrentLayout();
-    this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(y, t.join(",")).apply(new d("Update card composition")), e === "vertical" && this._reorderProductAttributes(t);
+    this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(_, t.join(",")).apply(new u("Update card composition")), e === "vertical" && this._reorderProductAttributes(t);
   }
   /**
    * Reorders attribute rows within each product card based on composition order
@@ -155,21 +157,21 @@ class x extends g {
   _reorderProductAttributes(t) {
     if (!this.currentNode)
       return;
-    const e = this.currentNode.querySelectorAll(P);
+    const e = this.currentNode.querySelectorAll(v);
     if (!(e != null && e.length))
       return;
     const i = this.api.getDocumentModifier();
     e.forEach((o) => {
       const r = this._buildCompositionHtml(o, t);
       i.modifyHtml(o).setInnerHtml(r);
-    }), i.apply(new d("Reorder product attributes"));
+    }), i.apply(new u("Reorder product attributes"));
   }
   /**
    * Builds HTML string with attributes ordered according to composition
    */
   _buildCompositionHtml(t, e) {
     return e.reduce((i, o) => {
-      const r = t.querySelector(`${b}[${p}="${o}"]`);
+      const r = t.querySelector(`${c}[${d}="${o}"]`);
       return r && "getOuterHTML" in r ? i + r.getOuterHTML() : i;
     }, "");
   }
@@ -182,33 +184,20 @@ class x extends g {
   _applyVisibilityToBlock(t, e) {
     if (!this.currentNode)
       return;
-    const i = this.currentNode.querySelectorAll(`${b}[${p}="${t}"]`);
+    const i = this.currentNode.querySelectorAll(`${c}[${d}="${t}"]`);
     if (!(i != null && i.length))
       return;
-    const o = e ? "1" : "0", r = `Set ${t} visibility to ${e ? "visible" : "hidden"}`, m = this.api.getDocumentModifier();
-    i.forEach((l) => {
-      let u = "TR";
-      if ("tagName" in l && l.tagName)
-        u = l.tagName.toUpperCase();
-      else if ("getTagName" in l) {
-        const _ = l;
-        typeof _.getTagName == "function" && (u = _.getTagName().toUpperCase());
-      }
-      const T = e ? u === "TD" || u === "BLOCK_IMAGE" || u === "BLOCK_BUTTON" ? "table-cell" : "table-row" : "none";
-      m.modifyHtml(l).setStyle("display", T).setAttribute(h, o);
-    }), m.apply(new d(r));
+    const o = e ? "1" : "0", r = `Set ${t} visibility to ${e ? "visible" : "hidden"}`, b = this.api.getDocumentModifier();
+    i.forEach((p) => {
+      const y = I(p), h = e ? y : "none";
+      b.modifyHtml(p).setStyle("display", h).setAttribute(m, o);
+    }), b.apply(new u(r));
   }
   /**
    * Gets the current layout orientation from store or DOM
    */
   _getCurrentLayout() {
-    const t = this.store.recommendationConfigs.orientation;
-    if (t)
-      return t;
-    if (!this.currentNode || !("querySelector" in this.currentNode))
-      return "vertical";
-    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    return !e || !("getAttribute" in e) ? "vertical" : e.getAttribute("data-layout") === "horizontal" ? "horizontal" : "vertical";
+    return this.store.recommendationConfigs.orientation || P(this.currentNode);
   }
   /**
    * Updates orderable state based on layout orientation
@@ -238,6 +227,6 @@ class x extends g {
   }
 }
 export {
-  V as COMPOSITION_CONTROL_BLOCK_ID,
-  x as RecommendationCardCompositionControl
+  S as COMPOSITION_CONTROL_BLOCK_ID,
+  H as RecommendationCardCompositionControl
 };

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

@@ -1,25 +1,33 @@
-var l = Object.defineProperty;
-var a = (s, n, t) => n in s ? l(s, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[n] = t;
-var r = (s, n, t) => a(s, typeof n != "symbol" ? n + "" : n, t);
+var a = Object.defineProperty;
+var h = (n, s, e) => s in n ? a(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
+var r = (n, s, e) => h(n, typeof s != "symbol" ? s + "" : s, e);
 import { CommonControl as m } from "../../../common-control.js";
-import { useRecommendationExtensionStore as c } from "../../store/recommendation.js";
+import { useRecommendationExtensionStore as u } from "../../store/recommendation.js";
 import { AlgorithmControl as C } from "./algorithm.js";
-import { ALGORITHM_CONTROL_ID as U } from "./algorithm.js";
-import { CurrencyControl as h } from "./currency.js";
-import { CURRENCY_CONTROL_ID as $ } from "./currency.js";
-import { FiltersControl as u } from "./filters.js";
-import { FILTERS_CONTROL_ID as F } from "./filters.js";
+import { ALGORITHM_CONTROL_ID as x } from "./algorithm.js";
+import { CurrencyControl as c } from "./currency.js";
+import { CURRENCY_CONTROL_ID as k } from "./currency.js";
+import { FiltersControl as d } from "./filters.js";
+import { FILTERS_CONTROL_ID as A } from "./filters.js";
 import { LocaleControl as f } from "./locale.js";
-import { LOCALE_CONTROL_ID as A } from "./locale.js";
-import { ProductLayoutControl as d } from "./productLayout.js";
-import { PRODUCT_LAYOUT_CONTROL_ID as v } from "./productLayout.js";
-import { ShuffleControl as p } from "./shuffle.js";
+import { LOCALE_CONTROL_ID as z } from "./locale.js";
+import { ProductLayoutControl as p } from "./productLayout.js";
+import { PRODUCT_LAYOUT_CONTROL_ID as Y } from "./productLayout.js";
+import { ShuffleControl as R } from "./shuffle.js";
 import { SHUFFLE_CONTROL_ID as B } from "./shuffle.js";
-const R = "ui-elements-recommendation-block";
-class I extends m {
+import { useDebounceFn as y } from "../../../../../node_modules/@vueuse/shared/index.js";
+const T = /* @__PURE__ */ new Set([
+  "size",
+  "strategy",
+  "filters",
+  "productIds",
+  "language",
+  "shuffleProducts"
+]), _ = "ui-elements-recommendation-block";
+class F extends m {
   constructor() {
     super(...arguments);
-    r(this, "store", c());
+    r(this, "store", u());
     r(this, "storeUnsubscription", () => {
     });
     // Sub-control instances for lifecycle management
@@ -29,12 +37,18 @@ class I extends m {
     r(this, "productLayoutControl", null);
     r(this, "filtersControl", null);
     r(this, "shuffleControl", null);
+    /**
+     * Debounced product fetch to prevent rapid API calls during config changes
+     */
+    r(this, "_debouncedFetchProducts", y(() => {
+      this.store.fetchRecommendationProducts();
+    }, 500));
   }
   getId() {
-    return R;
+    return _;
   }
   getTemplate() {
-    return this.algorithmControl = new C(), this.localeControl = new f(), this.currencyControl = new h(), this.productLayoutControl = new d(), this.filtersControl = new u(), this.shuffleControl = new p(), `
+    return this.algorithmControl = new C(), this.localeControl = new f(), this.currencyControl = new c(), this.productLayoutControl = new p(), this.filtersControl = new d(), this.shuffleControl = new R(), `
             <div class="recommendation-controls-container">
                 ${this.algorithmControl.getTemplate()}
                 ${this.localeControl.getTemplate()}
@@ -50,17 +64,39 @@ class I extends m {
       this.store.fetchRecommendationFilters(),
       this.store.fetchRecommendationCreateData(),
       this.store.fetchRecommendationProducts()
-    ])).forEach((o, e) => {
-      o.status === "rejected" && console.warn(`Recommendation block: ${[
+    ])).forEach((t, o) => {
+      t.status === "rejected" && console.warn(`Recommendation block: ${[
         "fetchRecommendationFilters",
         "fetchRecommendationCreateData",
         "fetchRecommendationProducts"
-      ][e]} failed`, o.reason);
+      ][o]} failed`, t.reason);
     }), this._initializeSubControls(), this._listenStateUpdates();
   }
+  onTemplateNodeUpdated(e) {
+    super.onTemplateNodeUpdated(e), [
+      this.algorithmControl,
+      this.localeControl,
+      this.currencyControl,
+      this.productLayoutControl,
+      this.filtersControl,
+      this.shuffleControl
+    ].forEach((o) => {
+      var i;
+      o != null && o.api && (o.currentNode = e, (i = o.onTemplateNodeUpdated) == null || i.call(o, e));
+    });
+  }
   onDestroy() {
-    var t, o, e, i;
-    this.storeUnsubscription(), (o = (t = this.filtersControl) == null ? void 0 : t.onDestroy) == null || o.call(t), (i = (e = this.productLayoutControl) == null ? void 0 : e.onDestroy) == null || i.call(e);
+    this.storeUnsubscription(), [
+      this.algorithmControl,
+      this.localeControl,
+      this.currencyControl,
+      this.productLayoutControl,
+      this.filtersControl,
+      this.shuffleControl
+    ].forEach((t) => {
+      var o;
+      return (o = t == null ? void 0 : t.onDestroy) == null ? void 0 : o.call(t);
+    });
   }
   /**
    * Initialize all sub-controls with the shared API context
@@ -74,33 +110,38 @@ class I extends m {
       this.productLayoutControl,
       this.filtersControl,
       this.shuffleControl
-    ].forEach((o) => {
-      var e;
-      o && (o.api = this.api, o.currentNode = this.currentNode, (e = o.onRender) == null || e.call(o));
+    ].forEach((t) => {
+      var o;
+      t && (t.api = this.api, t.currentNode = this.currentNode, (o = t.onRender) == null || o.call(t));
     });
   }
   /**
    * Listen to store changes that require product refresh
+   * Only triggers for meaningful config changes (size, strategy, filters, etc.)
+   * Uses debounce to prevent rapid API calls
    */
   _listenStateUpdates() {
-    this.storeUnsubscription = this.store.$subscribe((t) => {
-      "payload" in t && t.payload.recommendationConfigs && this.store.fetchRecommendationProducts();
+    this.storeUnsubscription = this.store.$subscribe((e) => {
+      if ("payload" in e) {
+        const t = e.payload.recommendationConfigs;
+        t && Object.keys(t).some((l) => T.has(l)) && this._debouncedFetchProducts();
+      }
     });
   }
 }
 export {
-  U as ALGORITHM_CONTROL_ID,
+  x as ALGORITHM_CONTROL_ID,
   C as AlgorithmControl,
-  R as CONTROL_BLOCK_ID,
-  $ as CURRENCY_CONTROL_ID,
-  h as CurrencyControl,
-  F as FILTERS_CONTROL_ID,
-  u as FiltersControl,
-  A as LOCALE_CONTROL_ID,
+  _ as CONTROL_BLOCK_ID,
+  k as CURRENCY_CONTROL_ID,
+  c as CurrencyControl,
+  A as FILTERS_CONTROL_ID,
+  d as FiltersControl,
+  z as LOCALE_CONTROL_ID,
   f as LocaleControl,
-  v as PRODUCT_LAYOUT_CONTROL_ID,
-  d as ProductLayoutControl,
-  I as RecommendationBlockControl,
+  Y as PRODUCT_LAYOUT_CONTROL_ID,
+  p as ProductLayoutControl,
+  F as RecommendationBlockControl,
   B as SHUFFLE_CONTROL_ID,
-  p as ShuffleControl
+  R as ShuffleControl
 };

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

@@ -1,44 +1,43 @@
-var u = Object.defineProperty;
-var d = (i, o, t) => o in i ? u(i, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[o] = t;
-var s = (i, o, t) => d(i, typeof o != "symbol" ? o + "" : o, t);
-import { UEAttr as a } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as c } from "../../../common-control.js";
-import { MAX_PRODUCT_COUNT as _, MAX_PRODUCTS_PER_ROW as R } from "../../constants/layout.js";
-import { useRecommendationExtensionStore as m } from "../../store/recommendation.js";
-import { getCurrentLayout as C, regenerateProductRows as h, reapplySpacing as l } from "./utils.js";
+var a = Object.defineProperty;
+var u = (i, o, t) => o in i ? a(i, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[o] = t;
+var n = (i, o, t) => u(i, typeof o != "symbol" ? o + "" : o, t);
+import { CommonControl as d } from "../../../common-control.js";
+import { MAX_PRODUCT_COUNT as c, MAX_PRODUCTS_PER_ROW as _ } from "../../constants/layout.js";
+import { useRecommendationExtensionStore as R } from "../../store/recommendation.js";
+import { getCurrentLayout as m, regenerateProductRows as h, reapplySpacing as C } from "./utils.js";
 import { useDebounceFn as p } from "../../../../../node_modules/@vueuse/shared/index.js";
-const O = "recommendation-product-layout-control", e = {
+const l = "recommendation-product-layout-control", e = {
   PRODUCT_COUNT: "size",
   PRODUCT_IN_ROW: "cardsInRow",
   PRODUCT_IN_ROW_LABEL: "cardsInRowLabel"
 };
-class D extends c {
+class b extends d {
   constructor() {
     super(...arguments);
-    s(this, "store", m());
-    s(this, "storeUnsubscription", () => {
+    n(this, "store", R());
+    n(this, "storeUnsubscription", () => {
     });
-    s(this, "_debouncedRegenerateProductRows", p(() => {
+    n(this, "_debouncedRegenerateProductRows", p(() => {
       this._regenerateProductRows();
     }, 500));
   }
   getId() {
-    return O;
+    return l;
   }
   getTemplate() {
     return `
             <div class="product-layout-control-container">
                 ${this._GuTwoColumns([
       this._GuLabel({ text: "Number of Products" }),
-      this._GuCounter({ name: e.PRODUCT_COUNT, maxValue: _ }),
+      this._GuCounter({ name: e.PRODUCT_COUNT, maxValue: c }),
       this._GuLabel({ text: "Products in One Row", name: e.PRODUCT_IN_ROW_LABEL }),
-      this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue: R })
+      this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue: _ })
     ])}
             </div>
         `;
   }
   onRender() {
-    this._initializeCounterValues(), this._setFormValues(), this._updateProductsInRowVisibility(), this._listenToFormUpdates(), this._listenStateUpdates();
+    this._setFormValues(), this._updateProductsInRowVisibility(), this._listenToFormUpdates(), this._listenStateUpdates();
   }
   onTemplateNodeUpdated(t) {
     super.onTemplateNodeUpdated(t), this._updateProductsInRowVisibility();
@@ -53,25 +52,13 @@ class D extends c {
       [e.PRODUCT_IN_ROW]: t.cardsInRow
     });
   }
-  _initializeCounterValues() {
-    const { recommendationConfigs: t } = this.store;
-    this.api.setUIEAttribute(
-      e.PRODUCT_COUNT,
-      a.SELECTPICKER.items,
-      Number(t.size)
-    ), this.api.setUIEAttribute(
-      e.PRODUCT_IN_ROW,
-      a.SELECTPICKER.items,
-      t.cardsInRow
-    );
-  }
   /**
    * Updates "Products in One Row" visibility based on layout orientation
    * This control is hidden for horizontal layout (products always take full width)
    * Reads from store first (reliable during state transitions), falls back to DOM
    */
   _updateProductsInRowVisibility() {
-    const r = (this.store.recommendationConfigs.orientation || C(this.currentNode)) === "vertical";
+    const r = (this.store.recommendationConfigs.orientation || m(this.currentNode)) === "vertical";
     this.api.setVisibility(e.PRODUCT_IN_ROW, r), this.api.setVisibility(e.PRODUCT_IN_ROW_LABEL, r);
   }
   _onProductCountChange(t) {
@@ -93,7 +80,7 @@ class D extends c {
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier(),
       afterRegenerate: () => {
-        l({
+        C({
           currentNode: this.currentNode,
           documentModifier: this.api.getDocumentModifier()
         });
@@ -113,12 +100,12 @@ class D extends c {
   _listenStateUpdates() {
     let t = this.store.recommendationConfigs.orientation;
     this.storeUnsubscription = this.store.$subscribe(() => {
-      const n = this.store.recommendationConfigs.orientation;
-      n !== t && (t = n, this._updateProductsInRowVisibility());
+      const s = this.store.recommendationConfigs.orientation;
+      s !== t && (t = s, this._updateProductsInRowVisibility());
     });
   }
 }
 export {
-  O as PRODUCT_LAYOUT_CONTROL_ID,
-  D as ProductLayoutControl
+  l as PRODUCT_LAYOUT_CONTROL_ID,
+  b as ProductLayoutControl
 };