@useinsider/guido 1.0.3-beta.3cb36f8 → 1.0.3-beta.3e280d4

package/dist/extensions/Blocks/RadioButton/extension.js

@@ -1,20 +1,9 @@
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/AiAssistantValueType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockCompositionType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockName.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BuiltInControlTypes.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/ContextActionType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/EditorStatePropertyType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PanelPosition.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/Popover.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PreviewDeviceMode.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/SettingsTab.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementType.js";
-import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/ExtensionBuilder.js";
+import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { RadioButtonCustomBlock as t } from "./block.js";
 import { RadioButtonControl as i } from "./control.js";
+import { RadioButtonIconsRegistry as n } from "./iconsRegistry.js";
 import { RadioButtonBlockSettingsPanel as r } from "./settingsPanel.js";
-const C = new o().addBlock(t).withSettingsPanelRegistry(r).addControl(i).build();
+const l = new o().addBlock(t).withSettingsPanelRegistry(r).addControl(i).withIconsRegistry(n).build();
 export {
-  C as default
+  l as default
 };

package/dist/extensions/Blocks/RadioButton/iconsRegistry.js

@@ -0,0 +1,14 @@
+import { IconsRegistry as i } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class s extends i {
+  registerIconsSvg(t) {
+    t["radio-button-icon"] = `
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="10" cy="10" r="9" stroke="#666666" fill="#FFFFFF" stroke-width="2"/>
+                <circle cx="10" cy="10" r="3" fill="#666666"/>
+            </svg>
+        `;
+  }
+}
+export {
+  s as RadioButtonIconsRegistry
+};

package/dist/extensions/Blocks/RadioButton/settingsPanel.js

@@ -1,39 +1,26 @@
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/AiAssistantValueType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockCompositionType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockName.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockType.js";
-import { ContainerControls as t, TextControls as m } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BuiltInControlTypes.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/ContextActionType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/EditorStatePropertyType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PanelPosition.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/Popover.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PreviewDeviceMode.js";
-import { SettingsTab as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/SettingsTab.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementType.js";
-import { SettingsPanelRegistry as e } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/controls/SettingsPanelRegistry.js";
-import { SettingsPanelTab as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/controls/SettingsPanelTab.js";
-import { BLOCK_ID as p } from "./block.js";
-import { CONTROL_BLOCK_ID as n } from "./control.js";
-class K extends e {
-  registerBlockControls(i) {
-    i[p] = [
-      new r(
+import { SettingsPanelRegistry as r, SettingsPanelTab as t, SettingsTab as o, ContainerControls as e, TextControls as s } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { BLOCK_ID as T } from "./block.js";
+import { CONTROL_BLOCK_ID as i } from "./control.js";
+class a extends r {
+  registerBlockControls(n) {
+    n[T] = [
+      new t(
         o.SETTINGS,
         [
-          n,
-          t.EXTERNAL_INDENTS,
-          t.DISPLAY_CONDITIONS
+          i,
+          e.EXTERNAL_INDENTS,
+          e.DISPLAY_CONDITIONS
         ]
       ),
-      new r(
+      new t(
         o.STYLES,
         [
-          m.TEXT_BLOCK_BACKGROUND_COLOR
+          s.TEXT_BLOCK_BACKGROUND_COLOR
         ]
       )
     ];
   }
 }
 export {
-  K as RadioButtonBlockSettingsPanel
+  a as RadioButtonBlockSettingsPanel
 };

package/dist/extensions/Blocks/RadioButton/template.js

@@ -1,21 +1,10 @@
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/AiAssistantValueType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockCompositionType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockName.js";
-import { BlockType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BuiltInControlTypes.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/ContextActionType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/EditorStatePropertyType.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PanelPosition.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/Popover.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PreviewDeviceMode.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/SettingsTab.js";
-import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementType.js";
+import { BlockType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 const e = {
   TITLE: "This is a title text",
   DESCRIPTION: "This is a description text",
   YES: "Yes",
   NO: "No"
-}, i = `
+}, d = `
     <td align="left" class="radio-button-v2 esd-block-radio es-p10t es-p10b es-p30r es-p30l">
         <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
             <tbody>
@@ -23,12 +12,12 @@ const e = {
                     <td align="left" width="70%" style="vertical-align: top;">
                         <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
                             <tbody>
-                                    <${t.BLOCK_TEXT}>
-                                        {-{-TITLE-}-}
-                                    </${t.BLOCK_TEXT}>
-                                    <${t.BLOCK_TEXT}>
-                                        {-{-DESCRIPTION-}-}
-                                    </${t.BLOCK_TEXT}>
+                                <${t.BLOCK_TEXT}>
+                                    {-{-TITLE-}-}
+                                </${t.BLOCK_TEXT}>
+                                <${t.BLOCK_TEXT}>
+                                    {-{-DESCRIPTION-}-}
+                                </${t.BLOCK_TEXT}>
                             </tbody>
                         </table>
                     </td>
@@ -86,7 +75,7 @@ const e = {
             </tbody>
         </table>
     </td>
-`, h = `
+`, l = `
     <td 
         align="left" 
         esd-extension-block-id="radio-button-block" 
@@ -151,10 +140,10 @@ const e = {
         </table>
     </td>
 `;
-function m() {
-  return i.replace("{-{-TITLE-}-}", `<p path="1">${e.TITLE}</p>`).replace("{-{-DESCRIPTION-}-}", `<p path="1">${e.DESCRIPTION}</p>`).replace("{-{-YES-}-}", `<p path="1">${e.YES}</p>`).replace("{-{-NO-}-}", `<p path="1">${e.NO}</p>`);
+function a() {
+  return d.replace("{-{-TITLE-}-}", `<p path="1">${e.TITLE}</p>`).replace("{-{-DESCRIPTION-}-}", `<p path="1">${e.DESCRIPTION}</p>`).replace("{-{-YES-}-}", `<p path="1">${e.YES}</p>`).replace("{-{-NO-}-}", `<p path="1">${e.NO}</p>`);
 }
 export {
-  h as default,
-  m as getDefaultTemplate
+  l as default,
+  a as getDefaultTemplate
 };

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

@@ -0,0 +1,30 @@
+import { Block as e, BlockCompositionType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { getDefaultTemplate as o } from "./template.js";
+const n = "recommendation-block";
+class m extends e {
+  constructor() {
+    super();
+  }
+  getId() {
+    return n;
+  }
+  getIcon() {
+    return "recommendation-icon";
+  }
+  getBlockCompositionType() {
+    return t.CONTAINER;
+  }
+  getName() {
+    return this.api.translate("Recommendation Block");
+  }
+  getDescription() {
+    return this.api.translate("Recommendation Block Title Description");
+  }
+  getTemplate() {
+    return o();
+  }
+}
+export {
+  n as BLOCK_ID,
+  m as RecommendationBlock
+};

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

@@ -0,0 +1,335 @@
+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 b extends y {
+  constructor() {
+    super(...arguments);
+    u(this, "currentComposition", []);
+    u(this, "currentStyling", {});
+  }
+  getId() {
+    return m;
+  }
+  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")}
+                </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>
+        `;
+  }
+  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");
+    });
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._initializeComposition();
+  }
+  /**
+   * Initialize the composition order 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;
+    } 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)
+      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();
+  }
+  /**
+   * Persist current styling to block attributes
+   */
+  _persistStyling() {
+    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"));
+  }
+  /**
+   * 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 {
+  m as COMPOSITION_CONTROL_BLOCK_ID,
+  b 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
+};