@useinsider/guido 2.1.0-beta.01eaf27 → 2.1.0-beta.04bd1f4

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

@@ -22,6 +22,8 @@ class U extends O {
       new T(
         _.SETTINGS,
         [
+          I.ORIGINAL_PRICE_STYLE,
+          I.ORIGINAL_PRICE_ALIGN,
           I.PRICE_ORIENTATION,
           I.ORIGINAL_PRICE_PADDINGS
         ]
@@ -29,17 +31,17 @@ class U extends O {
       new T(
         _.STYLES,
         [
-          I.ORIGINAL_PRICE_STYLE,
-          I.ORIGINAL_PRICE_ALIGN,
-          I.ORIGINAL_PRICE_COLOR,
           I.ORIGINAL_PRICE_FONT_FAMILY,
-          I.ORIGINAL_PRICE_SIZE
+          I.ORIGINAL_PRICE_SIZE,
+          I.ORIGINAL_PRICE_COLOR
         ]
       )
     ], N[E.PRICE] = [
       new T(
         _.SETTINGS,
         [
+          I.PRICE_STYLE,
+          I.PRICE_ALIGN,
           I.PRICE_HIDE_DISCOUNT,
           I.PRICE_FORMATTED_PRICE,
           I.PRICE_SINGLE_PRICE,
@@ -51,11 +53,9 @@ class U extends O {
       new T(
         _.STYLES,
         [
-          I.PRICE_STYLE,
-          I.PRICE_ALIGN,
-          I.PRICE_COLOR,
           I.PRICE_FONT_FAMILY,
-          I.PRICE_SIZE
+          I.PRICE_SIZE,
+          I.PRICE_COLOR
         ]
       )
     ], N[E.NAME] = [
@@ -77,17 +77,12 @@ class U extends O {
         ]
       )
     ], N[E.QUANTITY] = [
-      new T(
-        _.SETTINGS,
-        [
-          I.QUANTITY_FONT_FAMILY,
-          I.QUANTITY_STYLE
-        ]
-      ),
       new T(
         _.STYLES,
         [
+          I.QUANTITY_STYLE,
           I.QUANTITY_ALIGN,
+          I.QUANTITY_FONT_FAMILY,
           I.QUANTITY_SIZE,
           I.QUANTITY_COLOR,
           I.QUANTITY_PADDINGS

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

@@ -2,8 +2,8 @@ import { BlockType as b, BlockAttr as N } from "../../../node_modules/@stripoinc
 import { ItemsBlockId as O } from "./enums/controlEnums.js";
 import { productPairs as A, templateFirstLine as C } from "./enums/productEnums.js";
 import { ItemInCartOptions as Y, SETTINGS_ENUMS as x, DefaultConfigValues as D } from "./enums/settingsEnums.js";
-import q from "./layouts/horizontal.html.js";
-import j from "./layouts/vertical.html.js";
+import j from "./layouts/horizontal.html.js";
+import q from "./layouts/vertical.html.js";
 import { escapeReplacement as V } from "./utils/nodeConfigUtils.js";
 let [g] = A.PAIRS_FOR_EXTENSION.imageSrc.CART_ITEMS.DEFAULT, [L] = A.PAIRS_FOR_EXTENSION.name.CART_ITEMS.DEFAULT, [m] = A.PAIRS_FOR_EXTENSION.price.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [S] = A.PAIRS_FOR_EXTENSION.originalPrice.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [M] = A.PAIRS_FOR_EXTENSION.quantity.CART_ITEMS.DEFAULT;
 const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCase().startsWith(e.toLowerCase())).join("; ").replace(/;\s*$/, ""), F = (s) => U(s, "text-align"), w = (s, e) => {
@@ -27,6 +27,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
                 target="_blank"
                 href="#!">
                 <img class="adapt-img document-node-component ng-star-inserted"
+                    style="object-fit: contain;"
                     src="${g}"
                     alt="${L}"
                     width="${i}"
@@ -402,7 +403,7 @@ function Tt({
   d ? (m = o ? T.DEFAULT_SINGLE_PRICE_FORMATTED : T.DEFAULT_SINGLE_PRICE, S = o ? I.DEFAULT_SINGLE_PRICE_FORMATTED : I.DEFAULT_SINGLE_PRICE) : (m = o ? T.DEFAULT_PRICE_FORMATTED : T.DEFAULT_PRICE, S = o ? I.DEFAULT_PRICE_FORMATTED : I.DEFAULT_PRICE), M = A.PAIRS_FOR_EXTENSION.quantity[e].DEFAULT;
   const h = P || (l == null ? void 0 : l.priceOrientation) || "horizontal";
   return s === x.ORIENTATION.VERTICAL ? z(
-    j,
+    q,
     e,
     R,
     s,
@@ -422,7 +423,7 @@ function Tt({
     u,
     d
   ) : z(
-    q,
+    j,
     e,
     R,
     s,

package/dist/extensions/Blocks/Items/utils/nodeConfigUtils.js

@@ -1,13 +1,13 @@
 import { ModificationDescription as b } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { DefaultConfigValues as o, SETTINGS_ENUMS as n, ItemInCartOptions as g } from "../enums/settingsEnums.js";
-function d() {
+function _() {
   return String(Date.now() + Math.floor(Math.random() * 1e3));
 }
 const E = (r) => r.replace(/\$/g, "$$$$");
 function S() {
   return {
     initialized: !0,
-    blockInstanceId: d(),
+    blockInstanceId: _(),
     source: n.ITEMS_TYPE.CART_ITEMS,
     type: n.ITEMS_TYPE.CART_ITEMS,
     itemsSelectValue: o.cartItemsSelectControlValue,
@@ -33,7 +33,7 @@ function S() {
     buttonVisible: o.productButtonVisible === "1"
   };
 }
-function s(r) {
+function p(r) {
   if (!r)
     return null;
   const t = r.closest(".items-block-v2");
@@ -66,16 +66,16 @@ function C(r) {
   const t = r.querySelector("esd-config-block");
   if (!t)
     return null;
-  const e = (c, a) => c == null ? a : c === "1" || c === "true", i = (c, a) => c || a, l = t.getAttribute("data-type"), u = m(l), _ = t.getAttribute("data-cart_items_select_control_value"), p = I(_, u);
+  const e = (c, s) => c == null ? s : c === "1" || c === "true", i = (c, s) => c || s, u = t.getAttribute("data-type"), a = m(u), d = t.getAttribute("data-cart_items_select_control_value"), l = I(d, a);
   return {
     initialized: e(t.getAttribute("data-initialized"), !1),
     blockInstanceId: i(
       t.getAttribute("data-block-instance-id"),
-      d()
+      _()
     ),
-    source: u,
-    type: u,
-    itemsSelectValue: p,
+    source: a,
+    type: a,
+    itemsSelectValue: l,
     orientation: t.getAttribute("data-card_orientation_control_value") || n.ORIENTATION.VERTICAL,
     nameTrimming: e(
       t.getAttribute("data-product_name_control_trim"),
@@ -150,7 +150,7 @@ function C(r) {
   };
 }
 function y(r) {
-  const t = s(r);
+  const t = p(r);
   if (!t)
     return null;
   const e = t.getNodeConfig();
@@ -159,18 +159,18 @@ function y(r) {
   const i = C(t);
   return i || null;
 }
-function A(r, t, e) {
-  const i = s(r);
-  if (!i)
+function A(r, t, e, i) {
+  const u = p(r);
+  if (!u)
     return;
-  const u = { ...i.getNodeConfig() || {}, ...e };
-  t.getDocumentModifier().modifyHtml(i).setNodeConfig(u).apply(new b("Update Items block configuration"));
+  const d = { ...u.getNodeConfig() || {}, ...e }, l = i ?? t.getDocumentModifier();
+  l.modifyHtml(u).setNodeConfig(d), i || l.apply(new b("Update Items block configuration"));
 }
 export {
   E as escapeReplacement,
-  d as generateBlockInstanceId,
+  _ as generateBlockInstanceId,
   S as getDefaultItemsBlockConfig,
   y as getItemsBlockConfig,
-  s as getItemsBlockContainer,
+  p as getItemsBlockContainer,
   A as setItemsBlockConfig
 };

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

@@ -1,18 +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 "./templates/blockTemplate.js";
-const n = "recommendation-block";
-class m extends e {
+var h = Object.defineProperty;
+var I = (r, o, t) => o in r ? h(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
+var g = (r, o, t) => I(r, typeof o != "symbol" ? o + "" : o, t);
+import { useTemplateStore as k } from "../../../stores/template.js";
+import { Block as _, BlockCompositionType as B, UIElementType as d, UEAttr as C, ModificationDescription as A } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ensureMobileCssRulesExist as u } from "./controls/mobileLayout/cssRules.js";
+import { RecommendationConfigService as s } from "./services/configService.js";
+import { useRecommendationExtensionStore as p } from "./store/recommendation.js";
+import { getDefaultTemplate as R } from "./templates/grid/template.js";
+const f = "recommendation-block", c = "ins-recommendation-v3-block-v2", a = "recommendation-id";
+class E extends _ {
   constructor() {
     super();
+    /**
+     * Stores the ID generated in getTemplate() so onCreated() can reuse it.
+     * This avoids generating a new (different) ID in onCreated().
+     */
+    g(this, "_pendingBlockId", null);
   }
   getId() {
-    return n;
+    return f;
   }
   getIcon() {
     return "recommendation-icon";
   }
   getBlockCompositionType() {
-    return t.CONTAINER;
+    return B.CONTAINER;
   }
   getName() {
     return this.api.translate("Recommendation Block");
@@ -20,11 +32,143 @@ class m extends e {
   getDescription() {
     return this.api.translate("Recommendation Block Title Description");
   }
+  getSettingsPanelTitleHtml() {
+    if (k().migrations[f] === 0)
+      return "";
+    const e = this.api.translate("Recommendation Block"), i = this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Recommendation block and test your message to ensure it works properly.");
+    return `<div>
+            <div style="display: flex; align-items: center;">
+                <span>${e}</span>
+            </div>
+            <div class="recommendation-migration-info">
+                <${d.ICON}
+                    ${C.ICON.src}="migration-info-icon"
+                    class="recommendation-migration-info__icon">
+                </${d.ICON}>
+                <p class="recommendation-migration-info__text">
+                    ${i}
+                </p>
+            </div>
+        </div>`;
+  }
+  /**
+   * Returns the template HTML for a new recommendation block.
+   * Generates a unique recommendation ID and embeds the instance class
+   * (ins-recommendation-v3-block-{id}) directly in the template HTML.
+   * This is necessary because Stripo's Angular rendering manages the class
+   * attribute and overwrites dynamically added classes via setAttribute.
+   */
   getTemplate() {
-    return o();
+    const t = this._generateNextId();
+    return this._pendingBlockId = t, R(t);
+  }
+  /**
+   * Called when a new block is dropped into the template
+   *
+   * Uses the ID from getTemplate() (which already embedded the instance class)
+   * and assigns the recommendation-id attribute + initializes configuration.
+   * @param node - The newly created block node
+   */
+  onCreated(t) {
+    const e = this._pendingBlockId ?? this._generateNextId();
+    this._pendingBlockId = null, this._assignRecommendationId(t, e);
+    const i = s.initializeConfig(this.api, t, { recommendationId: e }), n = p();
+    n.setCurrentBlock(e), u(this.api), n.patchCurrentBlockConfig({ language: i.language }, { triggerRefetch: !1 });
+  }
+  /**
+   * Called when the document changes or template is loaded
+   *
+   * Handles migration from legacy templates that don't have node config
+   * and assigns recommendation-id to legacy blocks that lack one.
+   * @param node - The block node that may need migration
+   */
+  onDocumentChanged(t) {
+    if (!(!t || !("getNodeConfig" in t))) {
+      if (!this._getRecommendationId(t)) {
+        const e = this._generateNextId();
+        this._assignRecommendationId(t, e), s.hasConfig(t) && s.updateConfig(
+          this.api,
+          t,
+          { recommendationId: e },
+          "Assign recommendation ID to legacy block"
+        );
+      }
+      s.needsMigration(t) && this._migrateFromLegacy(t), u(this.api);
+    }
+  }
+  /**
+   * Called when a block is deleted from the template
+   *
+   * Cleans up the per-block state from the Pinia store.
+   * @param node - The block node being deleted
+   */
+  onDelete(t) {
+    const e = this._getRecommendationId(t);
+    e && p().removeBlockState(e);
+  }
+  /**
+   * Generates the next unique recommendation ID by scanning all existing blocks
+   * in the document and finding the maximum existing ID + 1.
+   */
+  _generateNextId() {
+    let t = 0;
+    try {
+      const e = this.api.getDocumentRoot();
+      e && "querySelectorAll" in e && e.querySelectorAll(`.${c}`).forEach((n) => {
+        if ("getAttribute" in n) {
+          const m = n.getAttribute(a), l = m ? parseInt(m) : 0;
+          l > t && (t = l);
+        }
+      });
+    } catch {
+    }
+    return t + 1;
+  }
+  /**
+   * Assigns a recommendation-id attribute to the block element.
+   * The instance class (ins-recommendation-v3-block-{id}) is embedded in the template
+   * HTML by getTemplate(), since Stripo's Angular rendering overwrites dynamically
+   * added classes via setAttribute.
+   */
+  _assignRecommendationId(t, e) {
+    const i = this._getBlockElement(t);
+    if (!i)
+      return;
+    const n = this.api.getDocumentModifier();
+    n.modifyHtml(i).setAttribute(a, e.toString()), n.apply(new A(`Assign recommendation ID ${e}`));
+  }
+  /**
+   * Gets the recommendation-id from a block node
+   */
+  _getRecommendationId(t) {
+    const e = this._getBlockElement(t);
+    if (!e || !("getAttribute" in e))
+      return null;
+    const i = e.getAttribute(a);
+    if (!i)
+      return null;
+    const n = parseInt(i);
+    return Number.isNaN(n) ? null : n;
+  }
+  /**
+   * Gets the block element (the element with BLOCK_CLASS)
+   */
+  _getBlockElement(t) {
+    if ("getAttribute" in t) {
+      const e = t.getAttribute("class");
+      if (e && e.includes(c))
+        return t;
+    }
+    return "querySelector" in t ? t.querySelector(`.${c}`) : null;
+  }
+  /**
+   * Migrate configuration from legacy format
+   */
+  _migrateFromLegacy(t) {
+    s.migrateFromDataAttributes(this.api, t);
   }
 }
 export {
-  n as BLOCK_ID,
-  m as RecommendationBlock
+  f as BLOCK_ID,
+  E as RecommendationBlock
 };

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

@@ -0,0 +1,4 @@
+var b = /* @__PURE__ */ ((r) => (r.BUTTON = "recommendation-block-button", r.NAME = "recommendation-block-name", r.PRICE = "recommendation-block-price", r.OLD_PRICE = "recommendation-block-old-price", r.OMNIBUS_PRICE = "recommendation-block-omnibus-price", r.OMNIBUS_DISCOUNT = "recommendation-block-omnibus-discount", r.IMAGE = "recommendation-block-image", r))(b || {});
+export {
+  b as RecommendationBlockId
+};

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

@@ -0,0 +1,4 @@
+var o = /* @__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.NAME_TEXT_TRIM = "recommendation-block-name-text-trim-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.OMNIBUS_PRICE_ALIGN = "recommendation-block-omnibus-price-align-control", c.OMNIBUS_PRICE_BACKGROUND = "recommendation-block-omnibus-price-background-control", c.OMNIBUS_PRICE_COLOR = "recommendation-block-omnibus-price-color-control", c.OMNIBUS_PRICE_FONT_FAMILY = "recommendation-block-omnibus-price-font-family-control", c.OMNIBUS_PRICE_PADDINGS = "recommendation-block-omnibus-price-paddings-control", c.OMNIBUS_PRICE_SIZE = "recommendation-block-omnibus-price-size-control", c.OMNIBUS_PRICE_STYLE = "recommendation-block-omnibus-price-style-control", c.OMNIBUS_PRICE_TEXT_BEFORE = "recommendation-block-omnibus-price-text-before-control", c.OMNIBUS_PRICE_TEXT_AFTER = "recommendation-block-omnibus-price-text-after-control", c.OMNIBUS_DISCOUNT_ALIGN = "recommendation-block-omnibus-discount-align-control", c.OMNIBUS_DISCOUNT_BACKGROUND = "recommendation-block-omnibus-discount-background-control", c.OMNIBUS_DISCOUNT_COLOR = "recommendation-block-omnibus-discount-color-control", c.OMNIBUS_DISCOUNT_FONT_FAMILY = "recommendation-block-omnibus-discount-font-family-control", c.OMNIBUS_DISCOUNT_PADDINGS = "recommendation-block-omnibus-discount-paddings-control", c.OMNIBUS_DISCOUNT_SIZE = "recommendation-block-omnibus-discount-size-control", c.OMNIBUS_DISCOUNT_STYLE = "recommendation-block-omnibus-discount-style-control", c.OMNIBUS_DISCOUNT_TEXT_BEFORE = "recommendation-block-omnibus-discount-text-before-control", c.OMNIBUS_DISCOUNT_TEXT_AFTER = "recommendation-block-omnibus-discount-text-after-control", c.IMAGE_SIZE = "recommendation-block-image-size-control", c.IMAGE_MARGINS = "recommendation-block-image-margins-control", c))(o || {});
+export {
+  o as RecommendationControlId
+};

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

@@ -0,0 +1,66 @@
+import { DEFAULT_ROW_SPACING as U, DEFAULT_COLUMN_SPACING as I, DEFAULT_MOBILE_CARDS_IN_ROW as n, DEFAULT_CARDS_IN_ROW as s } from "./layout.js";
+import { ATTR_PRODUCT_IMAGE as t, ATTR_PRODUCT_NAME as e, ATTR_PRODUCT_OLD_PRICE as o, ATTR_PRODUCT_PRICE as _, ATTR_PRODUCT_OMNIBUS_PRICE as T, ATTR_PRODUCT_OMNIBUS_DISCOUNT as r, ATTR_PRODUCT_BUTTON as R } from "./selectors.js";
+const O = {
+  code: "USD",
+  symbol: "USD",
+  alignment: "after",
+  decimalCount: 2,
+  decimalSeparator: ".",
+  thousandSeparator: ","
+}, i = {
+  textBefore: "",
+  textAfter: ""
+}, C = {
+  textBefore: "",
+  textAfter: ""
+}, D = [
+  t,
+  e,
+  o,
+  _,
+  T,
+  r,
+  R
+], A = {
+  [t]: !0,
+  [e]: !0,
+  [_]: !0,
+  [o]: !0,
+  [T]: !1,
+  [r]: !1,
+  [R]: !0
+}, E = {
+  // Settings
+  strategy: "mostPopular",
+  productIds: [],
+  size: "6",
+  shuffleProducts: !1,
+  language: "en_US",
+  currency: O,
+  filters: [],
+  // Layout
+  layout: "grid",
+  cardsInRow: s,
+  mobileCardsInRow: n,
+  columnSpacing: I,
+  rowSpacing: U,
+  // Composition
+  composition: D,
+  visibility: A,
+  // Element settings
+  omnibusPrice: i,
+  omnibusDiscount: C,
+  textTrimming: !1,
+  // Meta
+  configVersion: 1,
+  recommendationId: 0
+}, N = 1;
+export {
+  N as CURRENT_CONFIG_VERSION,
+  D as DEFAULT_COMPOSITION,
+  O as DEFAULT_CURRENCY,
+  E as DEFAULT_NODE_CONFIG,
+  C as DEFAULT_OMNIBUS_DISCOUNT,
+  i as DEFAULT_OMNIBUS_PRICE,
+  A as DEFAULT_VISIBILITY
+};

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

@@ -0,0 +1,22 @@
+const _ = {
+  GRID: "grid",
+  LIST: "list"
+}, o = [
+  { icon: "grid-orientation", value: _.GRID },
+  { icon: "list-orientation", value: _.LIST }
+], t = 3, n = 3, A = 9, O = 4, R = 1, T = 2, c = 10, s = 20, I = 0, S = 50, P = 5;
+export {
+  n as DEFAULT_CARDS_IN_ROW,
+  c as DEFAULT_COLUMN_SPACING,
+  R as DEFAULT_MOBILE_CARDS_IN_ROW,
+  t as DEFAULT_PRODUCTS_PER_ROW,
+  s as DEFAULT_ROW_SPACING,
+  o as LAYOUT_OPTIONS,
+  _ as LAYOUT_VALUES,
+  T as MAX_MOBILE_PRODUCTS_PER_ROW,
+  O as MAX_PRODUCTS_PER_ROW,
+  A as MAX_PRODUCT_COUNT,
+  S as MAX_SPACING,
+  I as MIN_SPACING,
+  P as SPACING_STEP
+};

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

@@ -0,0 +1,21 @@
+const c = ".ins-recommendation-product-container", n = ".ins-recommendation-desktop-container", o = ".ins-recommendation-mobile-container", T = {
+  CURRENCY: "currency",
+  SYMBOL: "currency-symbol",
+  ALIGNMENT: "currency-alignment",
+  THOUSAND_SEPARATOR: "currency-thousand-separator",
+  DECIMAL_SEPARATOR: "currency-decimal-separator",
+  DECIMAL_COUNT: "currency-decimal-count"
+}, t = "productImage", r = "productName", R = "productPrice", e = "productOldPrice", O = "productOmnibusPrice", _ = "productOmnibusDiscount", C = "productButton";
+export {
+  C as ATTR_PRODUCT_BUTTON,
+  t as ATTR_PRODUCT_IMAGE,
+  r as ATTR_PRODUCT_NAME,
+  e as ATTR_PRODUCT_OLD_PRICE,
+  _ as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
+  O as ATTR_PRODUCT_OMNIBUS_PRICE,
+  R as ATTR_PRODUCT_PRICE,
+  c as CONTAINER_SELECTOR,
+  T as CURRENCY_ATTR,
+  n as DESKTOP_CONTAINER_SELECTOR,
+  o as MOBILE_CONTAINER_SELECTOR
+};

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

@@ -0,0 +1,64 @@
+import { createButtonFitToContainerControl as T, createButtonTextStyleAndFontColorControl as r, createButtonTextSizeControl as e, createButtonTextControl as B, createButtonPaddingsControl as l, createButtonMarginsControl as C, createButtonFontFamilyControl as O, createButtonColorControl as N, createButtonBorderRadiusControl as i, createButtonBorderControl as a, createButtonAlignControl as c } from "../../../controlFactories.js";
+import { RecommendationBlockId as o } from "../../constants/blockIds.js";
+import { RecommendationControlId as t } from "../../constants/controlIds.js";
+import { CONTAINER_SELECTOR as n } from "../../constants/selectors.js";
+const U = c(
+  t.BUTTON_ALIGN,
+  o.BUTTON,
+  n
+), d = a(
+  t.BUTTON_BORDER,
+  o.BUTTON,
+  n
+), s = i(
+  t.BUTTON_BORDER_RADIUS,
+  o.BUTTON,
+  n
+), _ = N(
+  t.BUTTON_COLOR,
+  o.BUTTON,
+  n
+), m = O(
+  t.BUTTON_FONT_FAMILY,
+  o.BUTTON,
+  n
+), u = C(
+  t.BUTTON_MARGINS,
+  o.BUTTON,
+  n
+), R = l(
+  t.BUTTON_PADDINGS,
+  o.BUTTON,
+  n
+), F = B(
+  t.BUTTON_TEXT,
+  o.BUTTON,
+  n
+), A = e(
+  t.BUTTON_TEXT_SIZE,
+  o.BUTTON,
+  n
+), S = r(
+  t.BUTTON_TEXT_STYLE_AND_FONT_COLOR,
+  o.BUTTON,
+  n
+), E = T(
+  t.BUTTON_FIT_TO_CONTENT,
+  o.BUTTON,
+  n
+), p = {
+  align: U,
+  border: d,
+  borderRadius: s,
+  color: _,
+  fontFamily: m,
+  margins: u,
+  paddings: R,
+  text: F,
+  textSize: A,
+  textStyleAndFontColor: S,
+  fitToContent: E
+};
+export {
+  p as ButtonControls
+};

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

@@ -0,0 +1,80 @@
+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"
+}, a = {
+  GRID: ".product-card-segment",
+  LIST: ".product-card-wrapper"
+};
+class _ extends s {
+  getId() {
+    return u;
+  }
+  getTemplate() {
+    return `
+            <div class="card-bg-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Card Background Color" }),
+      this._GuColorPicker(e.CARD_BACKGROUND_COLOR)
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(r) {
+    super.onTemplateNodeUpdated(r), this._setFormValues();
+  }
+  _setFormValues() {
+    const r = this._getCurrentCardBackgroundColor();
+    this.api.updateValues({
+      [e.CARD_BACKGROUND_COLOR]: r
+    });
+  }
+  /**
+   * Gets the appropriate selector based on layout
+   * Grid: .product-card-segment (inner table per product cell)
+   * List: .product-card-wrapper (table per product row)
+   */
+  _getCardSelector() {
+    return l(this.currentNode) === "grid" ? a.GRID : a.LIST;
+  }
+  /**
+   * Reads the current background color from the first product card element
+   * @returns The background color value or 'transparent' if not found
+   */
+  _getCurrentCardBackgroundColor() {
+    if (!this.currentNode || !("querySelectorAll" in this.currentNode))
+      return "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(r) {
+    if (!this.currentNode || !("querySelectorAll" in this.currentNode))
+      return;
+    const t = this._getCardSelector(), o = Array.from(
+      this.currentNode.querySelectorAll(t)
+    );
+    if (o.length === 0)
+      return;
+    const n = this.api.getDocumentModifier();
+    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, (r) => {
+      this._onCardBackgroundColorChange(r);
+    });
+  }
+}
+export {
+  u as CARD_BACKGROUND_COLOR_CONTROL_ID,
+  _ as CardBackgroundColorControl
+};