@useinsider/guido 2.1.0-beta.acbfaec → 2.1.0-beta.b6f853c

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

@@ -1,18 +1,29 @@
-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 p = Object.defineProperty;
+var f = (r, o, t) => o in r ? p(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
+var g = (r, o, t) => f(r, typeof o != "symbol" ? o + "" : o, t);
+import { Block as h, BlockCompositionType as I, ModificationDescription as _ } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ensureMobileCssRulesExist as d } from "./controls/mobileLayout/cssRules.js";
+import { RecommendationConfigService as s } from "./services/configService.js";
+import { useRecommendationExtensionStore as u } from "./store/recommendation.js";
+import { getDefaultTemplate as k } from "./templates/grid/template.js";
+const B = "recommendation-block", c = "ins-recommendation-v3-block-v2", a = "recommendation-id";
+class y extends h {
   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 B;
   }
   getIcon() {
     return "recommendation-icon";
   }
   getBlockCompositionType() {
-    return t.CONTAINER;
+    return I.CONTAINER;
   }
   getName() {
     return this.api.translate("Recommendation Block");
@@ -20,11 +31,124 @@ class m extends e {
   getDescription() {
     return this.api.translate("Recommendation Block Title Description");
   }
+  /**
+   * 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, k(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 n = s.initializeConfig(this.api, t, { recommendationId: e }), i = u();
+    i.setCurrentBlock(e), d(this.api), i.patchCurrentBlockConfig({ language: n.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), d(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 && u().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((i) => {
+        if ("getAttribute" in i) {
+          const m = i.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 n = this._getBlockElement(t);
+    if (!n)
+      return;
+    const i = this.api.getDocumentModifier();
+    i.modifyHtml(n).setAttribute(a, e.toString()), i.apply(new _(`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 n = e.getAttribute(a);
+    if (!n)
+      return null;
+    const i = parseInt(n);
+    return Number.isNaN(i) ? null : i;
+  }
+  /**
+   * 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
+  B as BLOCK_ID,
+  y 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
+};

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