@useinsider/guido 2.1.0-beta.7d0f92a → 2.1.0-beta.860ef21

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

@@ -1,222 +0,0 @@
-var G = Object.defineProperty;
-var I = (o, n, t) => n in o ? G(o, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[n] = t;
-var l = (o, n, t) => I(o, typeof n != "symbol" ? n + "" : n, t);
-import { ModificationDescription as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as L } from "../../../common-control.js";
-import { SPACING_STEP as b, MAX_SPACING as y, MIN_SPACING as A, DEFAULT_COLUMN_SPACING as a, DEFAULT_ROW_SPACING as m } from "../../constants/layout.js";
-import { RecommendationConfigService as d } from "../../services/configService.js";
-import { useRecommendationExtensionStore as w } from "../../store/recommendation.js";
-import { safeGetStyle as S, safeGetParent as V } from "../../utils/tagName.js";
-import { getCurrentLayout as C } from "../main/utils.js";
-import { useDebounceFn as O } from "../../../../../node_modules/@vueuse/shared/index.js";
-const R = "recommendation-spacing-control", s = {
-  COLUMN_SPACING: "columnSpacing",
-  COLUMN_SPACING_LABEL: "columnSpacingLabel",
-  ROW_SPACING: "rowSpacing"
-}, P = {
-  COLUMN_SPACING: "data-column-spacing",
-  ROW_SPACING: "data-row-spacing"
-};
-function N(o, n) {
-  if (!o)
-    return n;
-  const t = parseFloat(o);
-  return Number.isNaN(t) ? n : t;
-}
-class $ extends L {
-  constructor() {
-    super(...arguments);
-    l(this, "store", w());
-    l(this, "unsubscribeOrientation", null);
-    /**
-     * Debounced version of _onColumnSpacingChange
-     * Prevents excessive DOM updates when user rapidly adjusts the counter
-     */
-    l(this, "_debouncedOnColumnSpacingChange", O((t) => {
-      this._onColumnSpacingChange(t);
-    }, 300));
-    /**
-     * Debounced version of _onRowSpacingChange
-     * Prevents excessive DOM updates when user rapidly adjusts the counter
-     */
-    l(this, "_debouncedOnRowSpacingChange", O((t) => {
-      this._onRowSpacingChange(t);
-    }, 300));
-  }
-  getId() {
-    return R;
-  }
-  getTemplate() {
-    return `
-            <div class="spacing-control-container">
-                ${this._GuTwoColumns([
-      this._GuLabel({ text: "Column Spacing (px)", name: s.COLUMN_SPACING_LABEL }),
-      this._GuCounter({
-        name: s.COLUMN_SPACING,
-        minValue: A,
-        maxValue: y,
-        step: b
-      }),
-      this._GuLabel({ text: "Row Spacing (px)" }),
-      this._GuCounter({
-        name: s.ROW_SPACING,
-        minValue: A,
-        maxValue: y,
-        step: b
-      })
-    ])}
-            </div>
-        `;
-  }
-  onRender() {
-    this._setFormValues(), this._updateColumnSpacingVisibility(), this._listenToFormUpdates(), this._subscribeToOrientationChanges();
-  }
-  onTemplateNodeUpdated(t) {
-    super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateColumnSpacingVisibility();
-  }
-  onDestroy() {
-    this.unsubscribeOrientation && (this.unsubscribeOrientation(), this.unsubscribeOrientation = null);
-  }
-  /**
-   * Updates column spacing visibility based on layout orientation
-   * Column spacing is hidden for list layout (products are stacked vertically)
-   * Reads from node config first, falls back to store then DOM
-   */
-  _updateColumnSpacingVisibility() {
-    if (!this.api)
-      return;
-    const t = d.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, i = (t.layout || e || C(this.currentNode)) === "grid";
-    this.api.setVisibility(s.COLUMN_SPACING, i), this.api.setVisibility(s.COLUMN_SPACING_LABEL, i);
-  }
-  /**
-   * Reads spacing values from node config first, falls back to DOM styles
-   */
-  _setFormValues() {
-    if (!this.api)
-      return;
-    const t = d.getConfig(this.currentNode), e = t.columnSpacing !== a ? t.columnSpacing : this._getStoredColumnSpacing(), r = t.rowSpacing !== m ? t.rowSpacing : this._getStoredRowSpacing();
-    this.api.updateValues({
-      [s.COLUMN_SPACING]: e,
-      [s.ROW_SPACING]: r
-    });
-  }
-  /**
-   * Gets stored column spacing from the first attribute row cell's padding.
-   * For grid layout: cells inside .recommendation-attribute-row have padding applied.
-   * For list layout: the parent of .product-card-wrapper has the padding.
-   * The padding is applied as "0 {halfSpacing}px", so we extract and multiply by 2.
-   */
-  _getStoredColumnSpacing() {
-    if (!this.currentNode)
-      return a;
-    if (C(this.currentNode) === "grid") {
-      const p = this.currentNode.querySelector(".recommendation-attribute-row"), c = p == null ? void 0 : p.querySelector("td"), f = S(c, "padding");
-      if (!f)
-        return a;
-      const _ = f.trim().split(/\s+/);
-      return _.length < 2 ? a : N(_[1], a / 2) * 2;
-    }
-    const e = this.currentNode.querySelector(".product-card-wrapper"), r = V(e), i = S(r, "padding");
-    if (!i)
-      return a;
-    const u = i.trim().split(/\s+/);
-    return u.length < 2 ? a : N(u[1], a / 2) * 2;
-  }
-  /**
-   * Gets stored row spacing from the first spacer element's height style
-   */
-  _getStoredRowSpacing() {
-    if (!this.currentNode)
-      return m;
-    const t = this.currentNode.querySelector(".spacer"), e = S(t, "height");
-    return N(e, m);
-  }
-  /**
-   * Handles column spacing changes.
-   * For grid layout: applies horizontal padding to all cells inside attribute rows.
-   * For list layout: applies padding to parent of product card wrappers.
-   */
-  _onColumnSpacingChange(t) {
-    if (!this.currentNode)
-      return;
-    d.updateConfig(
-      this.api,
-      this.currentNode,
-      { columnSpacing: t },
-      `Changed column spacing to ${t}px`
-    ), this._storeColumnSpacing(t);
-    const r = d.getConfig(this.currentNode).layout || C(this.currentNode), i = this.api.getDocumentModifier(), h = `0 ${t / 2}px`;
-    r === "grid" ? Array.from(
-      this.currentNode.querySelectorAll(".attribute-cell")
-    ).forEach((c) => {
-      i.modifyHtml(c).setStyle("padding", h);
-    }) : Array.from(
-      this.currentNode.querySelectorAll(".product-card-wrapper")
-    ).forEach((c) => {
-      "parent" in c && c.parent() && i.modifyHtml(c.parent()).setStyle("padding", h);
-    }), i.apply(new g(`Update column spacing to ${t}px`));
-  }
-  /**
-   * Handles row spacing changes
-   * Applies height to all spacer elements between product rows
-   */
-  _onRowSpacingChange(t) {
-    if (!this.currentNode)
-      return;
-    d.updateConfig(
-      this.api,
-      this.currentNode,
-      { rowSpacing: t },
-      `Changed row spacing to ${t}px`
-    ), this._storeRowSpacing(t);
-    const e = Array.from(
-      this.currentNode.querySelectorAll(".spacer")
-    );
-    if (!e.length)
-      return;
-    const r = this.api.getDocumentModifier(), i = `${t}px`;
-    e.forEach((u) => {
-      r.modifyHtml(u).setStyle("height", i);
-    }), r.apply(new g(`Update row spacing to ${t}px`));
-  }
-  /**
-   * Stores column spacing value in block data attribute
-   */
-  _storeColumnSpacing(t) {
-    if (!this.currentNode)
-      return;
-    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(P.COLUMN_SPACING, t.toString()).apply(new g("Store column spacing"));
-  }
-  /**
-   * Stores row spacing value in block data attribute
-   */
-  _storeRowSpacing(t) {
-    if (!this.currentNode)
-      return;
-    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(P.ROW_SPACING, t.toString()).apply(new g("Store row spacing"));
-  }
-  _listenToFormUpdates() {
-    this.api.onValueChanged(s.COLUMN_SPACING, (t) => {
-      const e = parseInt(t);
-      Number.isNaN(e) || this._debouncedOnColumnSpacingChange(e);
-    }), this.api.onValueChanged(s.ROW_SPACING, (t) => {
-      const e = parseInt(t);
-      Number.isNaN(e) || this._debouncedOnRowSpacingChange(e);
-    });
-  }
-  /**
-   * Subscribe to store orientation changes
-   * Updates column spacing visibility when layout changes via the layout control
-   */
-  _subscribeToOrientationChanges() {
-    this.unsubscribeOrientation && this.unsubscribeOrientation(), this.unsubscribeOrientation = this.store.$subscribe((t) => {
-      t.type === "patch object" && this._updateColumnSpacingVisibility();
-    });
-  }
-}
-export {
-  R as SPACING_CONTROL_ID,
-  $ as SpacingControl
-};

package/dist/extensions/Blocks/Recommendation/services/configService.js

@@ -1,240 +0,0 @@
-import { ModificationDescription as f } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CURRENT_CONFIG_VERSION as u, DEFAULT_NODE_CONFIG as e } from "../constants/defaultConfig.js";
-import { setCurrencyAttributes as g } from "../controls/main/utils.js";
-import { hasMinimalConfig as a } from "../types/nodeConfig.js";
-class C {
-  // ========================================================================
-  // Read Operations
-  // ========================================================================
-  /**
-   * Get configuration from a node, with defaults for missing values
-   *
-   * This is the primary way to read configuration from a block.
-   * Always returns a complete config object with defaults merged in.
-   * @example
-   * const config = RecommendationConfigService.getConfig(this.currentNode);
-   * console.log(config.strategy); // 'mostPopular'
-   * @param node - The immutable HTML node to read config from
-   * @returns Complete configuration with defaults for missing values
-   */
-  static getConfig(i) {
-    if (!i)
-      return this.cloneDefaults();
-    if (!("getNodeConfig" in i) || typeof i.getNodeConfig != "function")
-      return this.cloneDefaults();
-    try {
-      const t = i.getNodeConfig();
-      return t ? this.mergeWithDefaults(t) : this.cloneDefaults();
-    } catch {
-      return this.cloneDefaults();
-    }
-  }
-  /**
-   * Check if a node has valid configuration stored
-   *
-   * Used for migration detection - returns false for legacy templates
-   * that need their configuration migrated.
-   * @param node - The immutable HTML node to check
-   * @returns True if node has valid config with version number
-   */
-  static hasConfig(i) {
-    if (!i || !("getNodeConfig" in i) || typeof i.getNodeConfig != "function")
-      return !1;
-    try {
-      const t = i.getNodeConfig();
-      return a(t);
-    } catch {
-      return !1;
-    }
-  }
-  /**
-   * Get the configuration version from a node
-   * @param node - The immutable HTML node to check
-   * @returns Config version number, or 0 if no config exists
-   */
-  static getConfigVersion(i) {
-    return this.hasConfig(i) && this.getConfig(i).configVersion || 0;
-  }
-  // ========================================================================
-  // Write Operations
-  // ========================================================================
-  /**
-   * Update specific configuration values
-   *
-   * Merges the updates with existing config and persists to node.
-   * This is the primary way to update configuration from controls.
-   * @example
-   * RecommendationConfigService.updateConfig(
-   *   this.api,
-   *   this.currentNode,
-   *   { strategy: 'complementaryItems' },
-   *   'Changed recommendation algorithm'
-   * );
-   * @param api - Stripo extension API with document modifier
-   * @param node - The immutable HTML node to update
-   * @param updates - Partial config with values to update
-   * @param description - Human-readable description for undo/redo
-   * @returns The new complete configuration
-   */
-  static updateConfig(i, t, o, n) {
-    const s = this.getConfig(t), r = this.deepMerge(s, o);
-    return this.saveConfig(i, t, r, n), r;
-  }
-  /**
-   * Initialize configuration for a new block
-   *
-   * Called when a block is first created (dropped into template).
-   * Can optionally merge in partial config from migration.
-   * @example
-   * // In Block.onCreated lifecycle
-   * RecommendationConfigService.initializeConfig(this.api, node);
-   * @param api - Stripo extension API with document modifier
-   * @param node - The immutable HTML node to initialize
-   * @param partialConfig - Optional partial config to merge with defaults
-   * @returns The initialized configuration
-   */
-  static initializeConfig(i, t, o) {
-    const n = o ? this.mergeWithDefaults(o) : this.cloneDefaults();
-    return this.saveConfig(i, t, n, "Initialize recommendation block"), g({
-      currentNode: t,
-      documentModifier: i.getDocumentModifier(),
-      currency: n.currency
-    }), n;
-  }
-  /**
-   * Save complete configuration to a node
-   *
-   * Low-level method - prefer `updateConfig` or `initializeConfig` in most cases.
-   * @param api - Stripo extension API with document modifier
-   * @param node - The immutable HTML node to save to
-   * @param config - Complete configuration to save
-   * @param description - Human-readable description for undo/redo
-   */
-  static saveConfig(i, t, o, n) {
-    try {
-      i.getDocumentModifier().modifyHtml(t).setNodeConfig(o).apply(new f(n));
-    } catch (s) {
-      console.warn("[RecommendationConfigService] Failed to save config:", s);
-    }
-  }
-  // ========================================================================
-  // Migration Helpers
-  // ========================================================================
-  /**
-   * Migrate configuration from legacy data-attributes
-   *
-   * Reads existing data-attributes and creates a proper node config.
-   * Used when loading templates created before node config was implemented.
-   * @param api - Stripo extension API with document modifier
-   * @param node - The block node to migrate
-   * @returns The migrated configuration
-   */
-  static migrateFromDataAttributes(i, t) {
-    const o = {
-      configVersion: u
-    };
-    if ("getAttribute" in t && typeof t.getAttribute == "function") {
-      const n = t.getAttribute("data-layout");
-      n === "list" || n === "horizontal" ? o.layout = "list" : (n === "grid" || n === "vertical") && (o.layout = "grid");
-      const s = t.getAttribute("data-card-composition");
-      s && (o.composition = s.split(",").filter(Boolean));
-      const r = t.getAttribute("data-column-spacing");
-      r && (o.columnSpacing = parseInt(r) || e.columnSpacing);
-      const c = t.getAttribute("data-row-spacing");
-      c && (o.rowSpacing = parseInt(c) || e.rowSpacing);
-    }
-    return this.initializeConfig(i, t, o);
-  }
-  /**
-   * Check if configuration needs migration
-   * @param node - The block node to check
-   * @returns True if migration is needed
-   */
-  static needsMigration(i) {
-    return i ? this.hasConfig(i) ? this.getConfigVersion(i) < u : !0 : !1;
-  }
-  // ========================================================================
-  // Internal Helpers
-  // ========================================================================
-  /**
-   * Clone default config to avoid mutations
-   */
-  static cloneDefaults() {
-    return {
-      ...e,
-      currency: { ...e.currency },
-      omnibusPrice: { ...e.omnibusPrice },
-      omnibusDiscount: { ...e.omnibusDiscount },
-      composition: [...e.composition],
-      visibility: { ...e.visibility },
-      filters: [],
-      productIds: [],
-      recommendationId: 0
-    };
-  }
-  /**
-   * Merge partial config with defaults
-   *
-   * Deep merges nested objects like currency, omnibus settings.
-   */
-  static mergeWithDefaults(i) {
-    const t = this.cloneDefaults();
-    return {
-      ...t,
-      ...i,
-      currency: {
-        ...t.currency,
-        ...i.currency || {}
-      },
-      omnibusPrice: {
-        ...t.omnibusPrice,
-        ...i.omnibusPrice || {}
-      },
-      omnibusDiscount: {
-        ...t.omnibusDiscount,
-        ...i.omnibusDiscount || {}
-      },
-      visibility: {
-        ...t.visibility,
-        ...i.visibility || {}
-      },
-      composition: i.composition || t.composition,
-      filters: i.filters || [],
-      productIds: i.productIds || []
-    };
-  }
-  /**
-   * Deep merge for nested objects
-   *
-   * Recursively merges source into target, preserving existing values
-   * that aren't explicitly overwritten.
-   */
-  static deepMerge(i, t) {
-    return {
-      ...i,
-      ...t,
-      currency: {
-        ...i.currency,
-        ...t.currency || {}
-      },
-      omnibusPrice: {
-        ...i.omnibusPrice,
-        ...t.omnibusPrice || {}
-      },
-      omnibusDiscount: {
-        ...i.omnibusDiscount,
-        ...t.omnibusDiscount || {}
-      },
-      visibility: {
-        ...i.visibility,
-        ...t.visibility || {}
-      },
-      composition: t.composition ?? i.composition,
-      filters: t.filters ?? i.filters,
-      productIds: t.productIds ?? i.productIds
-    };
-  }
-}
-export {
-  C as RecommendationConfigService
-};

package/dist/extensions/Blocks/Recommendation/templates/grid/elementRenderer.js

@@ -1,233 +0,0 @@
-import { RecommendationBlockId as s } from "../../constants/blockIds.js";
-import { ATTR_PRODUCT_BUTTON as b, ATTR_PRODUCT_OMNIBUS_DISCOUNT as u, ATTR_PRODUCT_OMNIBUS_PRICE as m, ATTR_PRODUCT_OLD_PRICE as h, ATTR_PRODUCT_PRICE as y, ATTR_PRODUCT_NAME as f, ATTR_PRODUCT_IMAGE as x } from "../../constants/selectors.js";
-import { useRecommendationExtensionStore as T } from "../../store/recommendation.js";
-import { formatPrice as _ } from "../../utils/priceFormatter.js";
-import { sanitizeImageUrl as $ } from "../utils.js";
-const o = "0 5px", a = "attribute-cell";
-function p() {
-  const t = T(), { currencySettings: e } = t.recommendationConfigs;
-  return {
-    code: e.value,
-    symbol: e.symbol,
-    alignment: e.alignment === "0" ? "before" : "after",
-    decimalCount: parseInt(e.decimalCount) || 2,
-    decimalSeparator: e.decimalSeparator,
-    thousandSeparator: e.thousandSeparator
-  };
-}
-function r(t, e = "price") {
-  const n = p(), l = t[e], i = (l == null ? void 0 : l[n.code]) ?? Object.values(l ?? {})[0] ?? 0;
-  return _({
-    price: i,
-    currency: n
-  });
-}
-const P = {
-  [x]: (t) => `
-        <td class="${a}" style="padding: ${o}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tbody>
-                    <tr valign="top">
-                        <td
-                            class="esd-block-image product-image"
-                            align="center"
-                            esd-extension-block-id="${s.IMAGE}">
-                            <div style="position: relative; width: 100%; padding-bottom: 100%; overflow: hidden;">
-                                <a
-                                    target="_blank"
-                                    href="${t.url}"
-                                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-                                    <img
-                                        src="${$(t.image_url)}"
-                                        alt="${t.name}"
-                                        style="max-width: 100%; max-height: 100%; object-fit: contain; display: block;"
-                                        class="adapt-img">
-                                </a>
-                            </div>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </td>
-    `,
-  [f]: (t) => `
-        <td class="${a}" style="padding: ${o}; height: 100%;" valign="middle">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0"
-                style="table-layout: fixed;">
-                <tbody>
-                    <tr valign="top">
-                        <td
-                            class="esd-block-text product-name es-p10t es-p10b es-p15l es-p15r"
-                            align="center"
-                            esd-extension-block-id="${s.NAME}">
-                            <p contenteditable="false" style="font-size: 16px; color: #333333;">
-                                <strong>${t.name}</strong>
-                            </p>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </td>
-    `,
-  [y]: (t) => `
-        <td class="${a}" style="padding: ${o}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tbody>
-                    <tr valign="top">
-                        <td
-                            class="esd-block-text product-price es-p15l es-p15r"
-                            align="center"
-                            esd-extension-block-id="${s.PRICE}">
-                            <p contenteditable="false" style="font-size: 16px; color: #333333;">
-                                <strong>${r(t, "price")}</strong>
-                            </p>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </td>
-    `,
-  [h]: (t) => `
-        <td class="${a}" style="padding: ${o}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tbody>
-                    <tr valign="top">
-                        <td
-                            class="esd-block-text product-old-price es-p15l es-p15r"
-                            align="center"
-                            esd-extension-block-id="${s.OLD_PRICE}">
-                            <p contenteditable="false" style="font-size: 14px; color: #999999;">
-                                <strong>${r(t, "original_price")}</strong>
-                            </p>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </td>
-    `,
-  [m]: (t) => `
-        <td class="${a}" style="padding: ${o}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tbody>
-                    <tr valign="top">
-                        <td
-                            class="esd-block-text product-omnibus-price es-p15l es-p15r"
-                            align="center"
-                            data-text-before="Lowest 30-day price: "
-                            data-text-after=""
-                            esd-extension-block-id="${s.OMNIBUS_PRICE}">
-                            <p style="font-size: 12px; color: #666666;">
-                                <span class="omnibus-text-before">Lowest 30-day price: </span>
-                                <span class="omnibus-price-value">${r(t, "original_price")}</span>
-                                <span class="omnibus-text-after"></span>
-                            </p>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </td>
-    `,
-  [u]: (t) => {
-    var d, c;
-    const e = p(), n = ((d = t.original_price) == null ? void 0 : d[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, l = ((c = t.price) == null ? void 0 : c[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, i = n > 0 ? Math.round((n - l) / n * 100) : 0, g = i > 0 ? `-${i}%` : "0%";
-    return `
-        <td class="${a}" style="padding: ${o}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tbody>
-                    <tr valign="top">
-                        <td
-                            class="esd-block-text product-omnibus-discount es-p15l es-p15r"
-                            align="center"
-                            data-text-before=""
-                            data-text-after=""
-                            esd-extension-block-id="${s.OMNIBUS_DISCOUNT}">
-                            <p style="font-size: 12px; color: #666666;">
-                                <span class="omnibus-text-before"></span>
-                                <span class="omnibus-discount-value">${g}</span>
-                                <span class="omnibus-text-after"></span>
-                            </p>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </td>
-    `;
-  },
-  [b]: () => `
-        <td class="${a}" style="padding: ${o}; height: 100%;" valign="top">
-            <table
-                class="product-card-segment"
-                width="100%"
-                height="100%"
-                cellpadding="0"
-                cellspacing="0"
-                border="0">
-                <tbody>
-                    <tr valign="top">
-                        <td
-                            class="esd-block-button product-button es-p10t es-p10b"
-                            align="center"
-                            esd-extension-block-id="${s.BUTTON}">
-                            <span
-                                class="es-button-border"
-                                style="
-                                    border-width: 1px;
-                                    background: rgb(217, 234, 211);
-                                    border-color: rgb(106, 168, 79);
-                                ">
-                                <a
-                                    href="#"
-                                    class="es-button buy-button"
-                                    target="_blank"
-                                    style="color: rgb(56, 118, 29); background: rgb(217, 234, 211);">
-                                    Buy
-                                </a>
-                            </span>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </td>
-    `
-};
-export {
-  a as ATTRIBUTE_CELL_CLASS,
-  o as DEFAULT_CELL_PADDING,
-  P as gridElementRenderer
-};