@useinsider/guido 2.1.0-beta.a720424 → 2.1.0-beta.e13d291

package/dist/config/migrator/recommendationMigrator.js

@@ -1,8 +1,8 @@
 var h = Object.defineProperty;
 var T = (A, e, t) => e in A ? h(A, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : A[e] = t;
 var m = (A, e, t) => T(A, typeof e != "symbol" ? e + "" : e, t);
-import P, { prepareProductRows as S } from "../../extensions/Blocks/Recommendation/templates/migrationTemplate.js";
-import { getDefaultProducts as q } from "../../extensions/Blocks/Recommendation/templates/templateUtils.js";
+import P, { prepareProductRows as S } from "../../extensions/Blocks/Recommendation/templates/grid/migration.js";
+import { getDefaultProducts as q } from "../../extensions/Blocks/Recommendation/templates/utils.js";
 class w {
   constructor() {
     m(this, "parser");

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

@@ -1,7 +1,8 @@
-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";
+import { Block as o, BlockCompositionType as i } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { RecommendationConfigService as t } from "./services/configService.js";
+import { getDefaultTemplate as r } from "./templates/grid/template.js";
 const n = "recommendation-block";
-class m extends e {
+class g extends o {
   constructor() {
     super();
   }
@@ -12,7 +13,7 @@ class m extends e {
     return "recommendation-icon";
   }
   getBlockCompositionType() {
-    return t.CONTAINER;
+    return i.CONTAINER;
   }
   getName() {
     return this.api.translate("Recommendation Block");
@@ -21,10 +22,43 @@ class m extends e {
     return this.api.translate("Recommendation Block Title Description");
   }
   getTemplate() {
-    return o();
+    return r();
+  }
+  /**
+   * Called when a new block is dropped into the template
+   *
+   * Initializes the block with default configuration stored via node config.
+   * This ensures the configuration persists with the template.
+   * @param node - The newly created block node
+   */
+  onCreated(e) {
+    t.initializeConfig(this.api, e);
+  }
+  /**
+   * Called when the document changes or template is loaded
+   *
+   * Handles migration from legacy templates that don't have node config.
+   * Also handles config version upgrades for future migrations.
+   * @param node - The block node that may need migration
+   */
+  onDocumentChanged(e) {
+    !e || !("getNodeConfig" in e) || t.needsMigration(e) && this._migrateFromLegacy(e);
+  }
+  /**
+   * Migrate configuration from legacy format
+   *
+   * Legacy templates may store configuration in:
+   * - data-attributes (data-layout, data-card-composition, etc.)
+   * - Pinia store (lost on reload - this is what we're fixing)
+   *
+   * This method reads what we can from the DOM and initializes proper node config.
+   * @param node - The block node to migrate
+   */
+  _migrateFromLegacy(e) {
+    t.migrateFromDataAttributes(this.api, e);
   }
 }
 export {
   n as BLOCK_ID,
-  m as RecommendationBlock
+  g 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,64 @@
+import { DEFAULT_ROW_SPACING as s, DEFAULT_COLUMN_SPACING as R, DEFAULT_CARDS_IN_ROW as n } from "./layout.js";
+import { ATTR_PRODUCT_IMAGE as t, ATTR_PRODUCT_NAME as T, ATTR_PRODUCT_OLD_PRICE as e, ATTR_PRODUCT_PRICE as o, ATTR_PRODUCT_OMNIBUS_PRICE as _, ATTR_PRODUCT_OMNIBUS_DISCOUNT as r, ATTR_PRODUCT_BUTTON as U } from "./selectors.js";
+const I = {
+  code: "USD",
+  symbol: "USD",
+  alignment: "after",
+  decimalCount: 2,
+  decimalSeparator: ".",
+  thousandSeparator: ","
+}, O = {
+  textBefore: "",
+  textAfter: ""
+}, i = {
+  textBefore: "",
+  textAfter: ""
+}, C = [
+  t,
+  T,
+  e,
+  o,
+  _,
+  r,
+  U
+], D = {
+  [t]: !0,
+  [T]: !0,
+  [o]: !0,
+  [e]: !0,
+  [_]: !1,
+  [r]: !1,
+  [U]: !0
+}, a = {
+  // Settings
+  strategy: "mostPopular",
+  productIds: [],
+  size: "6",
+  shuffleProducts: !1,
+  language: "en_US",
+  currency: I,
+  filters: [],
+  // Layout
+  layout: "grid",
+  cardsInRow: n,
+  columnSpacing: R,
+  rowSpacing: s,
+  // Composition
+  composition: C,
+  visibility: D,
+  // Element settings
+  omnibusPrice: O,
+  omnibusDiscount: i,
+  textTrimming: !1,
+  // Meta
+  configVersion: 1
+}, E = 1;
+export {
+  E as CURRENT_CONFIG_VERSION,
+  C as DEFAULT_COMPOSITION,
+  I as DEFAULT_CURRENCY,
+  a as DEFAULT_NODE_CONFIG,
+  i as DEFAULT_OMNIBUS_DISCOUNT,
+  O as DEFAULT_OMNIBUS_PRICE,
+  D as DEFAULT_VISIBILITY
+};

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

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

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

@@ -0,0 +1,19 @@
+const c = ".ins-recommendation-product-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"
+}, r = "productImage", n = "productName", o = "productPrice", t = "productOldPrice", R = "productOmnibusPrice", O = "productOmnibusDiscount", _ = "productButton";
+export {
+  _ as ATTR_PRODUCT_BUTTON,
+  r as ATTR_PRODUCT_IMAGE,
+  n as ATTR_PRODUCT_NAME,
+  t as ATTR_PRODUCT_OLD_PRICE,
+  O as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
+  R as ATTR_PRODUCT_OMNIBUS_PRICE,
+  o as ATTR_PRODUCT_PRICE,
+  c as CONTAINER_SELECTOR,
+  T as CURRENCY_ATTR
+};

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
+};

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

@@ -0,0 +1,232 @@
+var T = Object.defineProperty;
+var C = (a, s, t) => s in a ? T(a, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[s] = t;
+var l = (a, s, t) => C(a, typeof s != "symbol" ? s + "" : s, t);
+import { ModificationDescription as u } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as f } from "../../../common-control.js";
+import { ATTR_PRODUCT_IMAGE as O, ATTR_PRODUCT_NAME as g, ATTR_PRODUCT_PRICE as R, ATTR_PRODUCT_OLD_PRICE as A, ATTR_PRODUCT_OMNIBUS_PRICE as D, ATTR_PRODUCT_OMNIBUS_DISCOUNT as N, ATTR_PRODUCT_BUTTON as V } from "../../constants/selectors.js";
+import { useRecommendationExtensionStore as E } from "../../store/recommendation.js";
+import { getTableDisplayValue as I } from "../../utils/tagName.js";
+import { getCurrentLayout as P } from "../main/utils.js";
+const S = "ui-elements-recommendation-card-composition", k = {
+  ORDERABLE: "cardComposition"
+}, c = ".recommendation-attribute-row", v = ".product-card-wrapper > tbody", _ = "data-card-composition", d = "data-attribute-type", m = "data-visibility", n = [
+  { key: O, label: "Product Image", visible: !0 },
+  { key: g, label: "Product Name", visible: !0 },
+  { key: R, label: "Product Price", visible: !0 },
+  { key: A, label: "Product Original Price", visible: !0 },
+  { key: D, label: "Omnibus Price", visible: !1 },
+  { key: N, label: "Omnibus Discount", visible: !1 },
+  { key: V, label: "Product Button", visible: !0 }
+];
+class H extends f {
+  constructor() {
+    super(...arguments);
+    l(this, "store", E());
+    l(this, "unsubscribeOrientation", null);
+  }
+  getId() {
+    return S;
+  }
+  getTemplate() {
+    const t = n.map((e) => ({
+      key: e.key,
+      label: e.label,
+      content: this._createItemContent(e.label, e.key)
+    }));
+    return `
+            <div class="container" data-card-composition-control>
+                ${this._GuLabel({ text: "Card Element Order & Visibility" })}
+                ${this._GuOrderable(k.ORDERABLE, t)}
+            </div>
+        `;
+  }
+  onRender() {
+    this._initializeComposition(), this._registerValueChangeListeners(), this._updateOrderableState(), this._subscribeToOrientationChanges();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._initializeComposition(), this._updateOrderableState();
+  }
+  /**
+   * Creates the HTML content for an orderable item with label and toggle
+   */
+  _createItemContent(t, e) {
+    return `
+            <div style="display: flex; align-items: center; justify-content: space-between;
+                padding: 8px; gap: 8px;">
+                <span style="flex: 1;">${t}</span>
+                ${this._GuToggle(`visibility_${e}`)}
+            </div>
+        `;
+  }
+  /**
+   * Registers event listeners for composition and visibility changes
+   */
+  _registerValueChangeListeners() {
+    this.api.onValueChanged("cardComposition", (t) => {
+      this._applyCompositionToBlock(t);
+    }), n.forEach((t) => {
+      this.api.onValueChanged(`visibility_${t.key}`, (e) => {
+        this._applyVisibilityToBlock(t.key, e);
+      });
+    });
+  }
+  /**
+   * Initializes composition order and visibility state from the current node
+   */
+  _initializeComposition() {
+    const t = this._readCompositionFromNode(), e = this._readVisibilityFromRows(), i = {
+      cardComposition: t,
+      ...this._buildVisibilityValues(e)
+    };
+    this.api.updateValues(i);
+  }
+  /**
+   * Reads composition order from node's data-card-composition attribute
+   * Falls back to default order if attribute is not present
+   */
+  _readCompositionFromNode() {
+    if (!this.currentNode || !("getAttribute" in this.currentNode))
+      return n.map((e) => e.key);
+    const t = this.currentNode.getAttribute(_);
+    return t ? t.split(",").filter(Boolean) : n.map((e) => e.key);
+  }
+  /**
+   * Builds visibility values object from the visibility map
+   */
+  _buildVisibilityValues(t) {
+    return n.reduce((e, i) => (e[`visibility_${i.key}`] = t[i.key] ?? !0, e), {});
+  }
+  /**
+   * Read visibility state from individual row elements' data-visibility attributes
+   * This ensures toggles reflect the actual DOM state
+   */
+  _readVisibilityFromRows() {
+    if (!this.currentNode)
+      return this._getDefaultVisibilities();
+    const t = Array.from(this.currentNode.querySelectorAll(c)), e = this._extractVisibilityFromRows(t);
+    return this._mergeWithDefaults(e);
+  }
+  /**
+   * Returns default visibility values for all items
+   */
+  _getDefaultVisibilities() {
+    return n.reduce((t, e) => (t[e.key] = e.visible, t), {});
+  }
+  /**
+   * Extracts visibility values from DOM nodes
+   */
+  _extractVisibilityFromRows(t) {
+    const e = {};
+    return t.forEach((i) => {
+      if (!("getAttribute" in i))
+        return;
+      const o = i.getAttribute(d), r = i.getAttribute(m);
+      o && r !== null && (e[o] = this._parseVisibilityValue(r));
+    }), e;
+  }
+  /**
+   * Parses visibility value from string to boolean
+   * Accepts "1", "true" as true, everything else as false
+   */
+  _parseVisibilityValue(t) {
+    return t === "1" || t === "true";
+  }
+  /**
+   * Merges extracted visibilities with default values for missing keys
+   */
+  _mergeWithDefaults(t) {
+    return n.forEach((e) => {
+      e.key in t || (t[e.key] = e.visible);
+    }), t;
+  }
+  /**
+   * Apply the reordered composition to the block's HTML structure
+   * Updates the data-card-composition attribute and reorders product attributes
+   * Note: Reordering is only applied for grid layout
+   */
+  _applyCompositionToBlock(t) {
+    if (!this.currentNode)
+      return;
+    const e = this._getCurrentLayout();
+    this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(_, t.join(",")).apply(new u("Update card composition")), e === "grid" && this._reorderProductAttributes(t);
+  }
+  /**
+   * Reorders attribute rows within each product card based on composition order
+   * Targets the tbody inside each product-attribute-cell to preserve card structure
+   */
+  _reorderProductAttributes(t) {
+    if (!this.currentNode)
+      return;
+    const e = this.currentNode.querySelectorAll(v);
+    if (!(e != null && e.length))
+      return;
+    const i = this.api.getDocumentModifier();
+    e.forEach((o) => {
+      const r = this._buildCompositionHtml(o, t);
+      i.modifyHtml(o).setInnerHtml(r);
+    }), i.apply(new u("Reorder product attributes"));
+  }
+  /**
+   * Builds HTML string with attributes ordered according to composition
+   */
+  _buildCompositionHtml(t, e) {
+    return e.reduce((i, o) => {
+      const r = t.querySelector(`${c}[${d}="${o}"]`);
+      return r && "getOuterHTML" in r ? i + r.getOuterHTML() : i;
+    }, "");
+  }
+  /**
+   * Apply visibility changes to the block's HTML structure
+   * Updates display style and data-visibility attribute for all matching elements
+   * - <tr> elements: use display: none / table-row
+   * - <td> elements: use display: none / table-cell
+   */
+  _applyVisibilityToBlock(t, e) {
+    if (!this.currentNode)
+      return;
+    const i = this.currentNode.querySelectorAll(`${c}[${d}="${t}"]`);
+    if (!(i != null && i.length))
+      return;
+    const o = e ? "1" : "0", r = `Set ${t} visibility to ${e ? "visible" : "hidden"}`, b = this.api.getDocumentModifier();
+    i.forEach((p) => {
+      const y = I(p), h = e ? y : "none";
+      b.modifyHtml(p).setStyle("display", h).setAttribute(m, o);
+    }), b.apply(new u(r));
+  }
+  /**
+   * Gets the current layout orientation from store or DOM
+   */
+  _getCurrentLayout() {
+    return this.store.recommendationConfigs.orientation || P(this.currentNode);
+  }
+  /**
+   * Updates orderable state based on layout orientation
+   * Adds/removes disabled class to hide drag icons for list layout
+   */
+  _updateOrderableState() {
+    const e = this._getCurrentLayout() === "list", i = this.getContainer();
+    if (!i)
+      return;
+    const o = i.querySelector("[data-card-composition-control]");
+    if (!o)
+      return;
+    const r = o.querySelector("ue-orderable");
+    r && r.classList.toggle("orderable-disabled", e);
+  }
+  /**
+   * Subscribe to store orientation changes
+   * Updates orderable state when layout changes via the layout control
+   */
+  _subscribeToOrientationChanges() {
+    this.unsubscribeOrientation && this.unsubscribeOrientation();
+    let t = this.store.recommendationConfigs.orientation;
+    this.unsubscribeOrientation = this.store.$subscribe(() => {
+      const e = this.store.recommendationConfigs.orientation;
+      e !== t && (t = e, this._updateOrderableState());
+    });
+  }
+}
+export {
+  S as COMPOSITION_CONTROL_BLOCK_ID,
+  H as RecommendationCardCompositionControl
+};

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

@@ -0,0 +1,19 @@
+import { createImageMarginsControl as m, createImageSizeControl as n } from "../../../controlFactories.js";
+import { RecommendationBlockId as o } from "../../constants/blockIds.js";
+import { RecommendationControlId as r } from "../../constants/controlIds.js";
+import { CONTAINER_SELECTOR as t } from "../../constants/selectors.js";
+const e = n(
+  r.IMAGE_SIZE,
+  o.IMAGE,
+  t
+), i = m(
+  r.IMAGE_MARGINS,
+  o.IMAGE,
+  t
+), C = {
+  size: e,
+  margins: i
+};
+export {
+  C as ImageControls
+};