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

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

@@ -1,103 +1,335 @@
-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 }
+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" }
 ];
-class g extends b {
+class b extends y {
   constructor() {
     super(...arguments);
-    a(this, "currentComposition", []);
-    a(this, "currentVisibility", {});
+    u(this, "currentComposition", []);
+    u(this, "currentStyling", {});
   }
   getId() {
-    return h;
+    return m;
   }
   getTemplate() {
-    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}`)}
+    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")}
                 </div>
-            `
-    }));
+            </div>
+        `;
+  }
+  /**
+   * Generate styling controls for Product Price element
+   */
+  _getProductPriceStylingControls() {
     return `
-            <div class="container">
-                ${this._GuLabel({ text: "Card Element Order & Visibility" })}
-                ${this._GuOrderable("cardComposition", i)}
+            <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>
         `;
   }
   onRender() {
-    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();
-      });
+    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");
     });
   }
-  onTemplateNodeUpdated(i) {
-    super.onTemplateNodeUpdated(i), this._initializeComposition();
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._initializeComposition();
   }
   /**
-   * Initialize the composition order and visibility from the block or use defaults
+   * Initialize the composition order from the block or use defaults
    */
   _initializeComposition() {
-    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;
+    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;
     } else
-      this.currentComposition = s.map((t) => t.key);
-    if (l)
-      try {
-        const t = JSON.parse(l);
-        this.currentVisibility = t;
-      } catch {
-        this.currentVisibility = s.reduce((t, r) => (t[r.key] = r.visible, t), {});
-      }
-    else
-      this.currentVisibility = s.reduce((t, r) => (t[r.key] = r.visible, t), {});
-    const d = {
+      this.currentComposition = d.map((o) => o.key);
+    this.api.updateValues({
       cardComposition: this.currentComposition
-    };
-    s.forEach((t) => {
-      d[`visibility_${t.key}`] = this.currentVisibility[t.key] ?? !0;
-    }), this.api.updateValues(d);
+    });
   }
   /**
    * Apply the reordered composition to the block's HTML structure
    */
-  _applyCompositionToBlock(i) {
+  _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", i.join(",")).apply(new u("Stored card composition order"));
+    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)
+      try {
+        this.currentStyling = JSON.parse(e), this._populateControlsWithStyling();
+      } catch (o) {
+        console.error("Failed to parse stored styling:", o), this._loadDefaultStyling();
+      }
+    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();
   }
   /**
-   * Apply visibility changes to the block's HTML structure
+   * Persist current styling to block attributes
    */
-  _applyVisibilityToBlock() {
+  _persistStyling() {
     if (!this.currentNode)
       return;
-    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"));
+    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"));
+  }
+  /**
+   * Apply styling to a specific element in the DOM
+   */
+  _applyStylingToElement(t) {
+    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`));
+    });
   }
 }
 export {
-  h as COMPOSITION_CONTROL_BLOCK_ID,
-  g as RecommendationCardCompositionControl
+  m as COMPOSITION_CONTROL_BLOCK_ID,
+  b as RecommendationCardCompositionControl
 };

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

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

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

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

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

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

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

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

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

@@ -1,13 +1,12 @@
 import { ButtonColorBuiltInControl 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 {
+class l extends t {
   getId() {
-    return e.BUTTON_COLOR;
+    return "recommendation-block-button-color-control";
   }
   getTargetNodes(o) {
-    return o.closest(".ins-recommendation-product-container").querySelectorAll(`[esd-extension-block-id="${n.BUTTON}"]`);
+    return o.closest(".ins-recommendation-product-container").querySelectorAll('[esd-extension-block-id="recommendation-block-button"]');
   }
 }
 export {
-  c as ButtonColorControl
+  l as ButtonColorControl
 };

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

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

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

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

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

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

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

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

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

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

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

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