@useinsider/guido 1.0.3-beta.d1ff593 → 1.0.3-beta.d574817

package/dist/extensions/Blocks/Recommendation/cardCompositionControl.js

@@ -1,335 +1,103 @@
-var h = Object.defineProperty;
-var f = (c, l, t) => l in c ? h(c, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[l] = t;
-var u = (c, l, t) => f(c, typeof l != "symbol" ? l + "" : l, t);
-import { ModificationDescription as p } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as y } from "../common-control.js";
-const m = "ui-elements-recommendation-card-composition", d = [
-  { key: "productImage", label: "Product Image" },
-  { key: "productName", label: "Product Name" },
-  { key: "productPrice", label: "Product Price" },
-  { key: "productOriginalPrice", label: "Product Original Price" },
-  { key: "productButton", label: "Product Button" }
+var m = Object.defineProperty;
+var y = (n, o, i) => o in n ? m(n, o, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[o] = i;
+var a = (n, o, i) => y(n, typeof o != "symbol" ? o + "" : o, i);
+import { ModificationDescription as u } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as b } from "../common-control.js";
+const h = "ui-elements-recommendation-card-composition", s = [
+  { key: "productImage", label: "Product Image", visible: !0 },
+  { key: "productName", label: "Product Name", visible: !0 },
+  { key: "productPrice", label: "Product Price", visible: !0 },
+  { key: "productOriginalPrice", label: "Product Original Price", visible: !0 },
+  { key: "productButton", label: "Product Button", visible: !0 }
 ];
-class b extends y {
+class g extends b {
   constructor() {
     super(...arguments);
-    u(this, "currentComposition", []);
-    u(this, "currentStyling", {});
+    a(this, "currentComposition", []);
+    a(this, "currentVisibility", {});
   }
   getId() {
-    return m;
+    return h;
   }
   getTemplate() {
-    const t = d.map((e) => {
-      let i = "";
-      return e.key === "productName" ? i = this._getProductNameStylingControls() : e.key === "productPrice" ? i = this._getProductPriceStylingControls() : e.key === "productOriginalPrice" ? i = this._getProductOriginalPriceStylingControls() : e.key === "productButton" && (i = this._getProductButtonStylingControls()), {
-        key: e.key,
-        label: e.label,
-        content: i ? this._GuExpandable(e.label, i) : ""
-      };
-    });
-    return console.debug("orderable", this._GuOrderable("cardComposition", t)), `
-            <div class="container">
-                ${this._GuLabel({ text: "Card Element Order" })}
-                ${this._GuOrderable("cardComposition", t)}
-            </div>
-        `;
-  }
-  _getTextColor(t, e) {
-    return `
-            ${this._GuTwoColumns([
-      this._GuLabel({ text: t }),
-      this._GuColorPicker(e)
-    ])}
-        `;
-  }
-  _getFontFamily(t, e) {
-    return `
-            ${this._GuTwoColumns([
-      this._GuLabel({ text: t }),
-      this._GuFontFamily(e, "Select Font")
-    ])}
-        `;
-  }
-  /**
-   * Generate styling controls for Product Name element
-   */
-  _getProductNameStylingControls() {
-    return `
-            ${this._getTextColor("Text Color", "productName.color")}
-
-            <div class="control-group" style="padding: 10px 0;">
-                ${this._GuLabel({ text: "Text Alignment" })}
-                ${this._GuRadioButtons("productName.textAlign", [
-      { text: "Left", value: "left" },
-      { text: "Center", value: "center" },
-      { text: "Right", value: "right" },
-      { text: "Justify", value: "justify" }
-    ])}
-            </div>
-
-            ${this._getFontFamily("Font Family", "productName.fontFamily")}
-
-            <div class="control-group" style="padding: 10px 0;">
-                ${this._GuLabel({ text: "Font Size (px)" })}
-                ${this._GuCounter({ name: "productName.fontSize", minValue: 8, maxValue: 72, step: 1 })}
-            </div>
-
-            <div class="control-group" style="padding: 10px 0;">
-                ${this._GuLabel({ text: "Text Style" })}
-                <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 8px;">
-                    ${this._GuCheckbox("productName.fontWeight", "Bold")}
-                    ${this._GuCheckbox("productName.fontStyle", "Italic")}
-                    ${this._GuCheckbox("productName.textDecoration", "Underline")}
+    const i = s.map((e) => ({
+      key: e.key,
+      label: e.label,
+      content: `
+                <div style="display: flex; align-items: center; justify-content: space-between;
+                    padding: 8px; gap: 8px;">
+                    <span style="flex: 1;">${e.label}</span>
+                    ${this._GuToggle(`visibility_${e.key}`)}
                 </div>
-            </div>
-        `;
-  }
-  /**
-   * Generate styling controls for Product Price element
-   */
-  _getProductPriceStylingControls() {
+            `
+    }));
     return `
-            <div class="control-group" style="padding: 10px 0;">
-                ${this._GuLabel({ text: "Text Color" })}
-                ${this._GuColorPicker("productPrice.color")}
-            </div>
-
-            <div class="control-group" style="padding: 10px 0;">
-                ${this._GuLabel({ text: "Text Alignment" })}
-                ${this._GuRadioButtons("productPrice.textAlign", [
-      { text: "Left", value: "left" },
-      { text: "Center", value: "center" },
-      { text: "Right", value: "right" }
-    ])}
-            </div>
-
-            <div class="control-group" style="padding: 10px 0;">
-                ${this._GuLabel({ text: "Font Size (px)" })}
-                ${this._GuCounter({ name: "productPrice.fontSize", minValue: 8, maxValue: 48, step: 1 })}
-            </div>
-
-            <div class="control-group" style="padding: 10px 0;">
-                ${this._GuCheckbox("productPrice.fontWeight", "Bold")}
-            </div>
-        `;
-  }
-  /**
-   * Generate styling controls for Product Original Price element
-   */
-  _getProductOriginalPriceStylingControls() {
-    return `
-            <div class="control-group" style="padding: 10px 0;">
-                ${this._GuLabel({ text: "Text Color" })}
-                ${this._GuColorPicker("productOriginalPrice.color")}
-            </div>
-
-            <div class="control-group" style="padding: 10px 0;">
-                ${this._GuLabel({ text: "Font Size (px)" })}
-                ${this._GuCounter({ name: "productOriginalPrice.fontSize", minValue: 8, maxValue: 48, step: 1 })}
-            </div>
-        `;
-  }
-  /**
-   * Generate styling controls for Product Button element
-   */
-  _getProductButtonStylingControls() {
-    return `
-            <div class="control-group" style="padding: 10px 0;">
-                ${this._GuLabel({ text: "Button Text Color" })}
-                ${this._GuColorPicker("productButton.color")}
-            </div>
-
-            <div class="control-group" style="padding: 10px 0;">
-                ${this._GuLabel({ text: "Font Size (px)" })}
-                ${this._GuCounter({ name: "productButton.fontSize", minValue: 10, maxValue: 32, step: 1 })}
-            </div>
-
-            <div class="control-group" style="padding: 10px 0;">
-                ${this._GuCheckbox("productButton.fontWeight", "Bold")}
+            <div class="container">
+                ${this._GuLabel({ text: "Card Element Order & Visibility" })}
+                ${this._GuOrderable("cardComposition", i)}
             </div>
         `;
   }
   onRender() {
-    this._initializeComposition(), this._initializeStyling(), this.api.onValueChanged("cardComposition", (t) => {
-      this.currentComposition = t, console.debug("Card composition reordered:", t), this._applyCompositionToBlock(t);
-    }), this.api.onValueChanged("productName.color", (t) => {
-      this._updateElementStyling("productName", "color", t), this._applyStylingToElement("productName");
-    }), this.api.onValueChanged("productName.textAlign", (t) => {
-      this._updateElementStyling("productName", "textAlign", t), this._applyStylingToElement("productName");
-    }), this.api.onValueChanged("productName.fontFamily", (t) => {
-      this._updateElementStyling("productName", "fontFamily", t), this._applyStylingToElement("productName");
-    }), this.api.onValueChanged("productName.fontSize", (t) => {
-      this._updateElementStyling("productName", "fontSize", t), this._applyStylingToElement("productName");
-    }), this.api.onValueChanged("productName.fontWeight", (t) => {
-      this._updateElementStyling("productName", "fontWeight", t), this._applyStylingToElement("productName");
-    }), this.api.onValueChanged("productName.fontStyle", (t) => {
-      this._updateElementStyling("productName", "fontStyle", t), this._applyStylingToElement("productName");
-    }), this.api.onValueChanged("productName.textDecoration", (t) => {
-      this._updateElementStyling("productName", "textDecoration", t), this._applyStylingToElement("productName");
-    }), this.api.onValueChanged("productPrice.color", (t) => {
-      this._updateElementStyling("productPrice", "color", t), this._applyStylingToElement("productPrice");
-    }), this.api.onValueChanged("productPrice.textAlign", (t) => {
-      this._updateElementStyling("productPrice", "textAlign", t), this._applyStylingToElement("productPrice");
-    }), this.api.onValueChanged("productPrice.fontSize", (t) => {
-      this._updateElementStyling("productPrice", "fontSize", t), this._applyStylingToElement("productPrice");
-    }), this.api.onValueChanged("productPrice.fontWeight", (t) => {
-      this._updateElementStyling("productPrice", "fontWeight", t), this._applyStylingToElement("productPrice");
-    }), this.api.onValueChanged("productOriginalPrice.color", (t) => {
-      this._updateElementStyling("productOriginalPrice", "color", t), this._applyStylingToElement("productOriginalPrice");
-    }), this.api.onValueChanged("productOriginalPrice.fontSize", (t) => {
-      this._updateElementStyling("productOriginalPrice", "fontSize", t), this._applyStylingToElement("productOriginalPrice");
-    }), this.api.onValueChanged("productButton.color", (t) => {
-      this._updateElementStyling("productButton", "color", t), this._applyStylingToElement("productButton");
-    }), this.api.onValueChanged("productButton.fontSize", (t) => {
-      this._updateElementStyling("productButton", "fontSize", t), this._applyStylingToElement("productButton");
-    }), this.api.onValueChanged("productButton.fontWeight", (t) => {
-      this._updateElementStyling("productButton", "fontWeight", t), this._applyStylingToElement("productButton");
+    this._initializeComposition(), this.api.onValueChanged("cardComposition", (i) => {
+      this.currentComposition = i, this._applyCompositionToBlock(i);
+    }), s.forEach((i) => {
+      this.api.onValueChanged(`visibility_${i.key}`, (e) => {
+        this.currentVisibility[i.key] = e, this._applyVisibilityToBlock();
+      });
     });
   }
-  onTemplateNodeUpdated(t) {
-    super.onTemplateNodeUpdated(t), this._initializeComposition();
+  onTemplateNodeUpdated(i) {
+    super.onTemplateNodeUpdated(i), this._initializeComposition();
   }
   /**
-   * Initialize the composition order from the block or use defaults
+   * Initialize the composition order and visibility from the block or use defaults
    */
   _initializeComposition() {
-    var i;
-    const t = (i = this.currentNode) == null ? void 0 : i.querySelector(".ins-recommendation-v3-block-v2");
-    let e = null;
-    if (t && "getAttribute" in t && (e = t.getAttribute("data-card-composition")), e) {
-      const o = e.split(",").filter(Boolean), s = d.map((n) => n.key);
-      o.every((n) => s.includes(n)) && o.length > 0 ? this.currentComposition = o : this.currentComposition = s;
+    var p;
+    const i = (p = this.currentNode) == null ? void 0 : p.querySelector(".ins-recommendation-v3-block-v2");
+    let e = null, l = null;
+    if (i && "getAttribute" in i && (e = i.getAttribute("data-card-composition"), l = i.getAttribute("data-card-visibility")), e) {
+      const t = e.split(",").filter(Boolean), r = s.map((c) => c.key);
+      t.every((c) => r.includes(c)) && t.length > 0 ? this.currentComposition = t : this.currentComposition = r;
     } else
-      this.currentComposition = d.map((o) => o.key);
-    this.api.updateValues({
-      cardComposition: this.currentComposition
-    });
-  }
-  /**
-   * Apply the reordered composition to the block's HTML structure
-   */
-  _applyCompositionToBlock(t) {
-    if (!this.currentNode)
-      return;
-    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute("data-card-composition", t.join(",")).apply(new p("Stored card composition order")), console.debug("Card composition updated:", t);
-  }
-  /**
-   * Initialize styling from stored block attributes
-   */
-  _initializeStyling() {
-    var i;
-    const t = (i = this.currentNode) == null ? void 0 : i.querySelector(".ins-recommendation-v3-block-v2");
-    if (!t || !("getAttribute" in t)) {
-      this._loadDefaultStyling();
-      return;
-    }
-    const e = t.getAttribute("data-card-styling");
-    if (e)
+      this.currentComposition = s.map((t) => t.key);
+    if (l)
       try {
-        this.currentStyling = JSON.parse(e), this._populateControlsWithStyling();
-      } catch (o) {
-        console.error("Failed to parse stored styling:", o), this._loadDefaultStyling();
+        const t = JSON.parse(l);
+        this.currentVisibility = t;
+      } catch {
+        this.currentVisibility = s.reduce((t, r) => (t[r.key] = r.visible, t), {});
       }
     else
-      this._loadDefaultStyling();
-  }
-  /**
-   * Load default styling values and populate controls
-   */
-  _loadDefaultStyling() {
-    this.currentStyling = {
-      productName: {
-        color: "#333333",
-        textAlign: "center",
-        fontSize: 16,
-        fontWeight: !0
-      },
-      productPrice: {
-        color: "#333333",
-        textAlign: "center",
-        fontSize: 16,
-        fontWeight: !0
-      },
-      productOriginalPrice: {
-        color: "#999999",
-        fontSize: 14
-      },
-      productButton: {
-        color: "#333333",
-        fontSize: 16
-      }
-    }, this._populateControlsWithStyling();
-  }
-  /**
-   * Populate control values with current styling
-   */
-  _populateControlsWithStyling() {
-    const t = {};
-    if (this.currentStyling.productName) {
-      const e = this.currentStyling.productName;
-      e.color && (t["productName.color"] = e.color), e.textAlign && (t["productName.textAlign"] = e.textAlign), e.fontFamily && (t["productName.fontFamily"] = e.fontFamily), e.fontSize && (t["productName.fontSize"] = e.fontSize), e.fontWeight !== void 0 && (t["productName.fontWeight"] = e.fontWeight), e.fontStyle !== void 0 && (t["productName.fontStyle"] = e.fontStyle), e.textDecoration !== void 0 && (t["productName.textDecoration"] = e.textDecoration);
-    }
-    if (this.currentStyling.productPrice) {
-      const e = this.currentStyling.productPrice;
-      e.color && (t["productPrice.color"] = e.color), e.textAlign && (t["productPrice.textAlign"] = e.textAlign), e.fontSize && (t["productPrice.fontSize"] = e.fontSize), e.fontWeight !== void 0 && (t["productPrice.fontWeight"] = e.fontWeight);
-    }
-    if (this.currentStyling.productOriginalPrice) {
-      const e = this.currentStyling.productOriginalPrice;
-      e.color && (t["productOriginalPrice.color"] = e.color), e.fontSize && (t["productOriginalPrice.fontSize"] = e.fontSize);
-    }
-    if (this.currentStyling.productButton) {
-      const e = this.currentStyling.productButton;
-      e.color && (t["productButton.color"] = e.color), e.fontSize && (t["productButton.fontSize"] = e.fontSize), e.fontWeight !== void 0 && (t["productButton.fontWeight"] = e.fontWeight);
-    }
-    this.api.updateValues(t);
-  }
-  /**
-   * Update styling object for a specific element and property
-   */
-  _updateElementStyling(t, e, i) {
-    this.currentStyling[t] || (this.currentStyling[t] = {});
-    const o = this.currentStyling[t];
-    o && (e === "color" && typeof i == "string" ? o.color = i : e === "textAlign" && typeof i == "string" ? o.textAlign = i : e === "fontFamily" && typeof i == "string" ? o.fontFamily = i : e === "fontSize" && typeof i == "number" ? o.fontSize = i : e === "fontWeight" && typeof i == "boolean" ? o.fontWeight = i : e === "fontStyle" && typeof i == "boolean" ? o.fontStyle = i : e === "textDecoration" && typeof i == "boolean" && (o.textDecoration = i)), this._persistStyling();
+      this.currentVisibility = s.reduce((t, r) => (t[r.key] = r.visible, t), {});
+    const d = {
+      cardComposition: this.currentComposition
+    };
+    s.forEach((t) => {
+      d[`visibility_${t.key}`] = this.currentVisibility[t.key] ?? !0;
+    }), this.api.updateValues(d);
   }
   /**
-   * Persist current styling to block attributes
+   * Apply the reordered composition to the block's HTML structure
    */
-  _persistStyling() {
+  _applyCompositionToBlock(i) {
     if (!this.currentNode)
       return;
-    const t = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    t && this.api.getDocumentModifier().modifyHtml(t).setAttribute("data-card-styling", JSON.stringify(this.currentStyling)).apply(new p("Updated card element styling"));
+    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute("data-card-composition", i.join(",")).apply(new u("Stored card composition order"));
   }
   /**
-   * Apply styling to a specific element in the DOM
+   * Apply visibility changes to the block's HTML structure
    */
-  _applyStylingToElement(t) {
+  _applyVisibilityToBlock() {
     if (!this.currentNode)
       return;
-    const e = this.currentStyling[t];
-    if (!e)
-      return;
-    const o = {
-      productName: ".product-name-cell",
-      productPrice: ".price-cell .current-price",
-      productOriginalPrice: ".price-cell .old-price",
-      productButton: ".buy-button"
-    }[t];
-    if (!o)
-      return;
-    this.currentNode.querySelectorAll(o).forEach((a) => {
-      if (!a || !("style" in a))
-        return;
-      const n = [];
-      e.color && n.push(`color: ${e.color}`), e.textAlign && n.push(`text-align: ${e.textAlign}`), e.fontFamily && n.push(`font-family: ${e.fontFamily}`), e.fontSize && n.push(`font-size: ${e.fontSize}px`), e.fontWeight ? n.push("font-weight: bold") : e.fontWeight === !1 && n.push("font-weight: normal"), e.fontStyle ? n.push("font-style: italic") : e.fontStyle === !1 && n.push("font-style: normal"), e.textDecoration ? n.push("text-decoration: underline") : e.textDecoration === !1 && n.push("text-decoration: none");
-      const g = [...(("getAttribute" in a ? a.getAttribute("style") : null) || "").split(";").map((r) => r.trim()).filter((r) => r && !r.startsWith("color:") && !r.startsWith("text-align:") && !r.startsWith("font-family:") && !r.startsWith("font-size:") && !r.startsWith("font-weight:") && !r.startsWith("font-style:") && !r.startsWith("text-decoration:")), ...n].join("; ");
-      this.api.getDocumentModifier().modifyHtml(a).setAttribute("style", g).apply(new p(`Applied ${t} styling`));
-    });
+    const i = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    i && this.api.getDocumentModifier().modifyHtml(i).setAttribute("data-card-visibility", JSON.stringify(this.currentVisibility)).apply(new u("Stored card visibility settings"));
   }
 }
 export {
-  m as COMPOSITION_CONTROL_BLOCK_ID,
-  b as RecommendationCardCompositionControl
+  h as COMPOSITION_CONTROL_BLOCK_ID,
+  g as RecommendationCardCompositionControl
 };

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

@@ -0,0 +1,5 @@
+var o = /* @__PURE__ */ ((c) => (c.BUTTON = "recommendation-block-button", c.NAME = "recommendation-block-name", c.PRICE = "recommendation-block-price", c.OLD_PRICE = "recommendation-block-old-price", c.IMAGE = "recommendation-block-image", c))(o || {}), r = /* @__PURE__ */ ((c) => (c.BUTTON_ALIGN = "recommendation-block-button-align-control", c.BUTTON_BORDER = "recommendation-block-button-border-control", c.BUTTON_BORDER_RADIUS = "recommendation-block-button-border-radius-control", c.BUTTON_COLOR = "recommendation-block-button-color-control", c.BUTTON_FIT_TO_CONTENT = "recommendation-block-button-fit-to-content-control", c.BUTTON_FONT_FAMILY = "recommendation-block-button-font-family-control", c.BUTTON_MARGINS = "recommendation-block-button-margins-control", c.BUTTON_PADDINGS = "recommendation-block-button-paddings-control", c.BUTTON_TEXT = "recommendation-block-button-text-control", c.BUTTON_TEXT_SIZE = "recommendation-block-button-text-size-control", c.BUTTON_TEXT_STYLE_AND_FONT_COLOR = "recommendation-block-button-text-style-and-font-color-control", c.NAME_ALIGN = "recommendation-block-name-align-control", c.NAME_BACKGROUND = "recommendation-block-name-background-control", c.NAME_COLOR = "recommendation-block-name-color-control", c.NAME_FONT_FAMILY = "recommendation-block-name-font-family-control", c.NAME_PADDINGS = "recommendation-block-name-paddings-control", c.NAME_SIZE = "recommendation-block-name-size-control", c.NAME_STYLE = "recommendation-block-name-style-control", c.PRICE_ALIGN = "recommendation-block-price-align-control", c.PRICE_BACKGROUND = "recommendation-block-price-background-control", c.PRICE_COLOR = "recommendation-block-price-color-control", c.PRICE_FONT_FAMILY = "recommendation-block-price-font-family-control", c.PRICE_PADDINGS = "recommendation-block-price-paddings-control", c.PRICE_SIZE = "recommendation-block-price-size-control", c.PRICE_STYLE = "recommendation-block-price-style-control", c.OLD_PRICE_ALIGN = "recommendation-block-old-price-align-control", c.OLD_PRICE_BACKGROUND = "recommendation-block-old-price-background-control", c.OLD_PRICE_COLOR = "recommendation-block-old-price-color-control", c.OLD_PRICE_FONT_FAMILY = "recommendation-block-old-price-font-family-control", c.OLD_PRICE_PADDINGS = "recommendation-block-old-price-paddings-control", c.OLD_PRICE_SIZE = "recommendation-block-old-price-size-control", c.OLD_PRICE_STYLE = "recommendation-block-old-price-style-control", c.IMAGE_SIZE = "recommendation-block-image-size-control", c.IMAGE_MARGINS = "recommendation-block-image-margins-control", c))(r || {});
+export {
+  o as RecommendationBlockId,
+  r as RecommendationControlId
+};

package/dist/extensions/Blocks/Recommendation/control.js

@@ -5,7 +5,8 @@ import { currencyDecimalCounts as l, currencyOperators as c, currencyLocationMap
 import { UEAttr as m, ModificationDescription as S } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as g } from "../common-control.js";
 import { useRecommendationExtensionStore as O } from "./store/recommendation.js";
-import { DEFAULT_CARD_COMPOSITION as C, getDefaultProducts as p, prepareProductRows as E } from "./template.js";
+import { prepareProductRows as p } from "./templates/blockTemplate.js";
+import { DEFAULT_CARD_COMPOSITION as C, getDefaultProducts as E } from "./templates/templateUtils.js";
 import { useDebounceFn as U } from "../../../node_modules/@vueuse/shared/index.js";
 const L = "ui-elements-recommendation-block", t = {
   ALGORITHM: "strategy",
@@ -23,7 +24,7 @@ const L = "ui-elements-recommendation-block", t = {
   SHUFFLE_PRODUCTS: "shuffleProducts",
   RESPONSIVE: "unresponsive"
 };
-class y extends g {
+class b extends g {
   constructor() {
     super(...arguments);
     r(this, "store", O());
@@ -249,7 +250,7 @@ class y extends g {
       console.error("Could not find container table for product rows");
       return;
     }
-    const o = this.store.recommendationProducts.length > 0 ? this.store.recommendationProducts : p(), { cardsInRow: i } = this.store.recommendationConfigs, a = this._getCardComposition(), u = E(o, i, a);
+    const o = this.store.recommendationProducts.length > 0 ? this.store.recommendationProducts : E(), { cardsInRow: i } = this.store.recommendationConfigs, a = this._getCardComposition(), u = p(o, i, a);
     this.api.getDocumentModifier().modifyHtml(e).setInnerHtml(u).apply(new S("Updated product"));
   }
   _onCurrencyConfigChange(e, o) {
@@ -301,5 +302,5 @@ class y extends g {
 }
 export {
   L as CONTROL_BLOCK_ID,
-  y as RecommendationBlockControl
+  b as RecommendationBlockControl
 };

package/dist/extensions/Blocks/Recommendation/controls/button/align.js

@@ -1,12 +1,13 @@
-import { ButtonAlignBuiltInControl as o } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class r extends o {
+import { ButtonAlignBuiltInControl as t } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { RecommendationControlId as e, RecommendationBlockId as n } from "../../constants.js";
+class c extends t {
   getId() {
-    return "recommendation-block-button-align-control";
+    return e.BUTTON_ALIGN;
   }
-  getTargetNodes(t) {
-    return t.closest(".ins-recommendation-product-container").querySelectorAll('[esd-extension-block-id="recommendation-block-button"]');
+  getTargetNodes(o) {
+    return o.closest(".ins-recommendation-product-container").querySelectorAll(`[esd-extension-block-id="${n.BUTTON}"]`);
   }
 }
 export {
-  r as ButtonAlignControl
+  c as ButtonAlignControl
 };

package/dist/extensions/Blocks/Recommendation/controls/button/border.js

@@ -1,12 +1,13 @@
-import { ButtonBorderBuiltInControl as o } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class l extends o {
+import { ButtonBorderBuiltInControl as t } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { RecommendationControlId as e, RecommendationBlockId as n } from "../../constants.js";
+class s extends t {
   getId() {
-    return "recommendation-block-button-border-control";
+    return e.BUTTON_BORDER;
   }
-  getTargetNodes(t) {
-    return t.closest(".ins-recommendation-product-container").querySelectorAll('[esd-extension-block-id="recommendation-block-button"]');
+  getTargetNodes(o) {
+    return o.closest(".ins-recommendation-product-container").querySelectorAll(`[esd-extension-block-id="${n.BUTTON}"]`);
   }
 }
 export {
-  l as ButtonBorderControl
+  s as ButtonBorderControl
 };

package/dist/extensions/Blocks/Recommendation/controls/button/borderRadius.js

@@ -1,12 +1,13 @@
-import { ButtonBorderRadiusBuiltInControl as o } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class d extends o {
+import { ButtonBorderRadiusBuiltInControl as t } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { RecommendationControlId as e, RecommendationBlockId as n } from "../../constants.js";
+class i extends t {
   getId() {
-    return "recommendation-block-button-border-radius-control";
+    return e.BUTTON_BORDER_RADIUS;
   }
-  getTargetNodes(t) {
-    return t.closest(".ins-recommendation-product-container").querySelectorAll('[esd-extension-block-id="recommendation-block-button"]');
+  getTargetNodes(o) {
+    return o.closest(".ins-recommendation-product-container").querySelectorAll(`[esd-extension-block-id="${n.BUTTON}"]`);
   }
 }
 export {
-  d as ButtonBorderRadiusControl
+  i as ButtonBorderRadiusControl
 };

package/dist/extensions/Blocks/Recommendation/controls/button/color.js

@@ -1,12 +1,13 @@
 import { ButtonColorBuiltInControl as t } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class l extends t {
+import { RecommendationControlId as e, RecommendationBlockId as n } from "../../constants.js";
+class c extends t {
   getId() {
-    return "recommendation-block-button-color-control";
+    return e.BUTTON_COLOR;
   }
   getTargetNodes(o) {
-    return o.closest(".ins-recommendation-product-container").querySelectorAll('[esd-extension-block-id="recommendation-block-button"]');
+    return o.closest(".ins-recommendation-product-container").querySelectorAll(`[esd-extension-block-id="${n.BUTTON}"]`);
   }
 }
 export {
-  l as ButtonColorControl
+  c as ButtonColorControl
 };

package/dist/extensions/Blocks/Recommendation/controls/button/fitToContent.js

@@ -1,12 +1,13 @@
 import { ButtonFitToContainerBuiltInControl as o } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class c extends o {
+import { RecommendationControlId as e, RecommendationBlockId as n } from "../../constants.js";
+class s extends o {
   getId() {
-    return "recommendation-block-button-fit-to-content-control";
+    return e.BUTTON_FIT_TO_CONTENT;
   }
   getTargetNodes(t) {
-    return t.closest(".ins-recommendation-product-container").querySelectorAll('[esd-extension-block-id="recommendation-block-button"]');
+    return t.closest(".ins-recommendation-product-container").querySelectorAll(`[esd-extension-block-id="${n.BUTTON}"]`);
   }
 }
 export {
-  c as ButtonFitToContentControl
+  s as ButtonFitToContentControl
 };

package/dist/extensions/Blocks/Recommendation/controls/button/fontFamily.js

@@ -1,12 +1,13 @@
 import { ButtonFontFamilyBuiltInControl as o } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class l extends o {
+import { RecommendationControlId as e, RecommendationBlockId as n } from "../../constants.js";
+class s extends o {
   getId() {
-    return "recommendation-block-button-font-family-control";
+    return e.BUTTON_FONT_FAMILY;
   }
   getTargetNodes(t) {
-    return t.closest(".ins-recommendation-product-container").querySelectorAll('[esd-extension-block-id="recommendation-block-button"]');
+    return t.closest(".ins-recommendation-product-container").querySelectorAll(`[esd-extension-block-id="${n.BUTTON}"]`);
   }
 }
 export {
-  l as ButtonFontFamilyControl
+  s as ButtonFontFamilyControl
 };

package/dist/extensions/Blocks/Recommendation/controls/button/margins.js

@@ -1,12 +1,13 @@
 import { ButtonMarginsBuiltInControl as o } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class s extends o {
+import { RecommendationControlId as e, RecommendationBlockId as n } from "../../constants.js";
+class m extends o {
   getId() {
-    return "recommendation-block-button-margins-control";
+    return e.BUTTON_MARGINS;
   }
   getTargetNodes(t) {
-    return t.closest(".ins-recommendation-product-container").querySelectorAll('[esd-extension-block-id="recommendation-block-button"]');
+    return t.closest(".ins-recommendation-product-container").querySelectorAll(`[esd-extension-block-id="${n.BUTTON}"]`);
   }
 }
 export {
-  s as ButtonMarginsControl
+  m as ButtonMarginsControl
 };

package/dist/extensions/Blocks/Recommendation/controls/button/paddings.js

@@ -1,12 +1,13 @@
 import { ButtonPaddingsBuiltInControl as o } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class d extends o {
+import { RecommendationControlId as e, RecommendationBlockId as n } from "../../constants.js";
+class i extends o {
   getId() {
-    return "recommendation-block-button-paddings-control";
+    return e.BUTTON_PADDINGS;
   }
   getTargetNodes(t) {
-    return t.closest(".ins-recommendation-product-container").querySelectorAll('[esd-extension-block-id="recommendation-block-button"]');
+    return t.closest(".ins-recommendation-product-container").querySelectorAll(`[esd-extension-block-id="${n.BUTTON}"]`);
   }
 }
 export {
-  d as ButtonPaddingsControl
+  i as ButtonPaddingsControl
 };

package/dist/extensions/Blocks/Recommendation/controls/button/text.js

@@ -1,12 +1,13 @@
 import { ButtonTextBuiltInControl as o } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class l extends o {
+import { RecommendationControlId as e, RecommendationBlockId as n } from "../../constants.js";
+class c extends o {
   getId() {
-    return "recommendation-block-button-text-control";
+    return e.BUTTON_TEXT;
   }
   getTargetNodes(t) {
-    return t.closest(".ins-recommendation-product-container").querySelectorAll('[esd-extension-block-id="recommendation-block-button"]');
+    return t.closest(".ins-recommendation-product-container").querySelectorAll(`[esd-extension-block-id="${n.BUTTON}"]`);
   }
 }
 export {
-  l as ButtonTextControl
+  c as ButtonTextControl
 };