@useinsider/guido 2.0.0-beta.536ec84 → 2.0.0-beta.54d276a

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

@@ -0,0 +1,154 @@
+var g = Object.defineProperty;
+var h = (n, o, t) => o in n ? g(n, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[o] = t;
+var c = (n, o, t) => h(n, typeof o != "symbol" ? o + "" : o, 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 { CONTAINER_SELECTOR as y } from "../../constants/selectors.js";
+import { useRecommendationExtensionStore as C } from "../../store/recommendation.js";
+import { prepareProductRows as _ } from "../../templates/index.js";
+import { DEFAULT_CARD_COMPOSITION as d, getDefaultProducts as A } from "../../templates/utils.js";
+const L = "recommendation-layout-control", l = {
+  LAYOUT: "layout"
+}, m = {
+  LAYOUT: "data-layout"
+}, T = [
+  { text: "Vertical", value: "vertical" },
+  { text: "Horizontal", value: "horizontal" }
+];
+class U extends f {
+  constructor() {
+    super(...arguments);
+    c(this, "store", C());
+    c(this, "isChangingLayout", !1);
+  }
+  getId() {
+    return L;
+  }
+  getTemplate() {
+    return `
+            <div class="layout-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Layout Orientation" }),
+      this._GuRadioButton({
+        name: l.LAYOUT,
+        buttons: T
+      })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._setFormValues();
+  }
+  _setFormValues() {
+    const t = this._getCurrentLayout();
+    this.api.updateValues({
+      [l.LAYOUT]: t
+    });
+  }
+  /**
+   * Gets the block element - either currentNode itself or as a descendant
+   * The currentNode could BE the block element or contain it
+   */
+  _getBlockElement() {
+    if (!this.currentNode)
+      return null;
+    if ("getAttribute" in this.currentNode) {
+      const t = this.currentNode.getAttribute("class");
+      if (t && t.includes("ins-recommendation-v3-block-v2"))
+        return this.currentNode;
+    }
+    return "querySelector" in this.currentNode ? this.currentNode.querySelector(".ins-recommendation-v3-block-v2") : null;
+  }
+  /**
+   * Reads the current layout from the block's data attribute
+   * @returns The layout value ('vertical' or 'horizontal'), defaults to 'vertical'
+   */
+  _getCurrentLayout() {
+    const t = this._getBlockElement();
+    return !t || !("getAttribute" in t) ? "vertical" : t.getAttribute(m.LAYOUT) === "horizontal" ? "horizontal" : "vertical";
+  }
+  /**
+   * Get the current card composition from block data attribute or use default
+   */
+  _getCardComposition() {
+    const t = this._getBlockElement();
+    if (!t || !("getAttribute" in t))
+      return d;
+    const e = t.getAttribute("data-card-composition");
+    return e ? e.split(",").filter(Boolean) : d;
+  }
+  /**
+   * Handles layout change
+   * Updates the block's data attribute and regenerates product rows
+   */
+  _onLayoutChange(t) {
+    if (this.isChangingLayout || this._getCurrentLayout() === t)
+      return;
+    const r = this._getBlockElement();
+    if (r) {
+      this.isChangingLayout = !0;
+      try {
+        this.store.$patch({
+          recommendationConfigs: {
+            orientation: t
+          }
+        }), this.api.getDocumentModifier().modifyHtml(r).setAttribute(m.LAYOUT, t).apply(new u(`Update layout to ${t}`)), this._regenerateProductRows(t);
+      } finally {
+        this.isChangingLayout = !1;
+      }
+    }
+  }
+  /**
+   * Regenerates product rows based on the selected layout
+   */
+  _regenerateProductRows(t) {
+    if (!this.currentNode || !("querySelector" in this.currentNode))
+      return;
+    const e = this.currentNode.querySelector(y);
+    if (!e)
+      return;
+    const r = this._getCurrentCardBackgroundColor(), i = this.store.recommendationProducts.length > 0 ? this.store.recommendationProducts : A(), { cardsInRow: s } = this.store.recommendationConfigs, a = this._getCardComposition(), p = _(i, t, {
+      productsPerRow: s,
+      composition: a
+    });
+    this.api.getDocumentModifier().modifyHtml(e).setInnerHtml(p).apply(new u(`Regenerated products for ${t} layout`)), this._applyCardBackgroundColor(r, t);
+  }
+  /**
+   * Gets current card background color from existing elements
+   * Checks both vertical (.product-card-segment) and horizontal (.product-card-wrapper) selectors
+   */
+  _getCurrentCardBackgroundColor() {
+    if (!this.currentNode)
+      return null;
+    const t = this.currentNode.querySelector(".product-card-segment"), e = this.currentNode.querySelector(".product-card-wrapper");
+    let r = null;
+    return t && "getStyle" in t && (r = t.getStyle("background-color")), (!r || r === "transparent") && e && "getStyle" in e && (r = e.getStyle("background-color")), r;
+  }
+  /**
+   * Applies card background color to appropriate elements based on layout
+   */
+  _applyCardBackgroundColor(t, e) {
+    if (!t || t === "transparent" || !this.currentNode)
+      return;
+    const r = e === "vertical" ? ".product-card-segment" : ".product-card-wrapper", i = Array.from(this.currentNode.querySelectorAll(r));
+    if (i.length === 0)
+      return;
+    const s = this.api.getDocumentModifier();
+    i.forEach((a) => {
+      s.modifyHtml(a).setStyle("background-color", t);
+    }), s.apply(new u("Apply card background color"));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(l.LAYOUT, (t) => {
+      this._onLayoutChange(t);
+    });
+  }
+}
+export {
+  L as LAYOUT_CONTROL_ID,
+  U as LayoutControl
+};

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

@@ -0,0 +1,372 @@
+var S = Object.defineProperty;
+var O = (c, s, t) => s in c ? S(c, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[s] = t;
+var u = (c, s, t) => O(c, typeof s != "symbol" ? s + "" : s, t);
+import { currencyDecimalCounts as R, currencyOperators as d, currencyLocationMaps as g } from "../../../../../enums/extensions/recommendationBlock.js";
+import { UEAttr as N, ModificationDescription as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as L } from "../../../common-control.js";
+import { CONTAINER_SELECTOR as f } from "../../constants/selectors.js";
+import { useRecommendationExtensionStore as U } from "../../store/recommendation.js";
+import { prepareProductRows as E } from "../../templates/index.js";
+import { DEFAULT_CARD_COMPOSITION as m, getDefaultProducts as y } from "../../templates/utils.js";
+import { useDebounceFn as T } from "../../../../../node_modules/@vueuse/shared/index.js";
+const A = "ui-elements-recommendation-block", e = {
+  ALGORITHM: "strategy",
+  PRODUCT_IDS: "productIds",
+  LOCALE: "language",
+  CURRENCY: "value",
+  CURRENCY_LOCATION: "alignment",
+  CURRENCY_SYMBOL: "symbol",
+  CURRENCY_THOUSAND_SEPARATOR: "thousandSeparator",
+  CURRENCY_DECIMAL_SEPARATOR: "decimalSeparator",
+  CURRENCY_DECIMAL_COUNT: "decimalCount",
+  FILTERS: "filterStatus",
+  PRODUCT_COUNT: "size",
+  PRODUCT_IN_ROW: "cardsInRow",
+  PRODUCT_IN_ROW_LABEL: "cardsInRowLabel",
+  SHUFFLE_PRODUCTS: "shuffleProducts"
+};
+class V extends L {
+  constructor() {
+    super(...arguments);
+    u(this, "store", U());
+    u(this, "storeUnsubscription", () => {
+    });
+    u(this, "addFilterListener", () => {
+    });
+    u(this, "addFilterButton", null);
+    u(this, "_debouncedRegenerateProductRows", T(() => {
+      this._regenerateProductRows();
+    }, 500));
+  }
+  getId() {
+    return A;
+  }
+  getTemplate() {
+    return `
+            <div class="recommendation-controls-container">
+                ${this._getAlgorithms()}
+                ${this._getLanguages()}
+                ${this._getCurrency()}
+                ${this._getFilterStatus()}
+                ${this._getProductLayout()}
+                ${this._getShuffleProducts()}
+            </div>
+        `;
+  }
+  async onRender() {
+    (await Promise.allSettled([
+      this.store.fetchRecommendationFilters(),
+      this.store.fetchRecommendationCreateData(),
+      this.store.fetchRecommendationProducts()
+    ])).forEach((i, o) => {
+      i.status === "rejected" && console.warn(`Recommendation block: ${[
+        "fetchRecommendationFilters",
+        "fetchRecommendationCreateData",
+        "fetchRecommendationProducts"
+      ][o]} failed`, i.reason);
+    }), this._listenStateUpdates(), this._initializeSelectItems(), this._setFormValues(), this._updateProductsInRowVisibility(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._updateProductsInRowVisibility();
+  }
+  onDestroy() {
+    var t;
+    (t = this.addFilterButton) == null || t.removeEventListener("click", this.addFilterListener), this.storeUnsubscription();
+  }
+  _setFormValues() {
+    const t = this.store.recommendationConfigs;
+    this._setProductIdsVisibility(), this.api.updateValues({
+      [e.ALGORITHM]: t.strategy,
+      [e.PRODUCT_IDS]: t.productIds.join(","),
+      [e.CURRENCY]: t.currencySettings.value,
+      [e.LOCALE]: t.language,
+      [e.CURRENCY_LOCATION]: t.currencySettings.alignment,
+      [e.CURRENCY_SYMBOL]: t.currencySettings.symbol,
+      [e.CURRENCY_THOUSAND_SEPARATOR]: t.currencySettings.thousandSeparator,
+      [e.CURRENCY_DECIMAL_SEPARATOR]: t.currencySettings.decimalSeparator,
+      [e.CURRENCY_DECIMAL_COUNT]: t.currencySettings.decimalCount,
+      [e.PRODUCT_COUNT]: t.size,
+      [e.PRODUCT_IN_ROW]: t.cardsInRow,
+      [e.SHUFFLE_PRODUCTS]: t.shuffleProducts
+    });
+  }
+  _initializeSelectItems() {
+    const { store: t } = this, i = t.getActivePredictiveAlgorithms, o = t.getLanguages, r = {
+      [e.ALGORITHM]: i,
+      [e.LOCALE]: o,
+      [e.CURRENCY]: t.currencyList,
+      [e.CURRENCY_LOCATION]: g,
+      [e.CURRENCY_SYMBOL]: t.getCurrencySymbolList,
+      [e.CURRENCY_THOUSAND_SEPARATOR]: d,
+      [e.CURRENCY_DECIMAL_SEPARATOR]: d,
+      [e.CURRENCY_DECIMAL_COUNT]: R,
+      [e.PRODUCT_COUNT]: Number(t.recommendationConfigs.size),
+      [e.PRODUCT_IN_ROW]: t.recommendationConfigs.cardsInRow,
+      [e.SHUFFLE_PRODUCTS]: t.recommendationConfigs.shuffleProducts
+    };
+    Object.entries(r).forEach(([l, n]) => {
+      this.api.setUIEAttribute(l, N.SELECTPICKER.items, n);
+    });
+  }
+  _getAlgorithms() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Recommendation Algorithm" }),
+      this._GuSelect({
+        name: e.ALGORITHM,
+        placeholder: "Select Recommendation Algorithm",
+        options: this.store.getActivePredictiveAlgorithms
+      }),
+      this._GuLabel({ text: "Product Ids", name: `${e.PRODUCT_IDS}_label` }),
+      this._GuTextInput({
+        name: e.PRODUCT_IDS,
+        placeholder: "Enter Product Ids",
+        className: "es-180w"
+      })
+    ])}
+        `;
+  }
+  _getLanguages() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Recommendation Locale" }),
+      this._GuSelect({
+        name: e.LOCALE,
+        placeholder: "Select Recommendation Locale",
+        options: this.store.getLanguages
+      })
+    ])}
+        `;
+  }
+  _getCurrency() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Currency" }),
+      this._GuSelect({
+        name: e.CURRENCY,
+        placeholder: "Select Currency",
+        options: this.store.currencyList
+      }),
+      this._GuLabel({ text: "Currency Location" }),
+      this._GuSelect({
+        name: e.CURRENCY_LOCATION,
+        placeholder: "Select Currency Location",
+        options: g
+      }),
+      this._GuLabel({ text: "Currency Symbol" }),
+      this._GuSelect({
+        name: e.CURRENCY_SYMBOL,
+        placeholder: "Select Currency Symbol",
+        options: this.store.getCurrencySymbolList
+      }),
+      this._GuLabel({ text: "Thousand Separator" }),
+      this._GuSelect({
+        name: e.CURRENCY_THOUSAND_SEPARATOR,
+        placeholder: "Select Thousand Separator",
+        options: d
+      }),
+      this._GuLabel({ text: "Decimal Separator" }),
+      this._GuSelect({
+        name: e.CURRENCY_DECIMAL_SEPARATOR,
+        placeholder: "Select Decimal Separator",
+        options: d
+      }),
+      this._GuLabel({ text: "Decimal Count" }),
+      this._GuSelect({
+        name: e.CURRENCY_DECIMAL_COUNT,
+        placeholder: "Select Decimal Count",
+        options: R
+      })
+    ])}
+        `;
+  }
+  _getProductLayout() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Number of Products" }),
+      this._GuCounter({ name: e.PRODUCT_COUNT, maxValue: 9 }),
+      this._GuLabel({ text: "Products in One Row", name: e.PRODUCT_IN_ROW_LABEL }),
+      this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue: 4 })
+    ])}
+        `;
+  }
+  /**
+   * Gets the current layout orientation from the block's data attribute
+   */
+  _getCurrentLayout() {
+    if (!this.currentNode || !("querySelector" in this.currentNode))
+      return "vertical";
+    const t = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    return !t || !("getAttribute" in t) ? "vertical" : t.getAttribute("data-layout") === "horizontal" ? "horizontal" : "vertical";
+  }
+  /**
+   * Updates "Products in One Row" visibility based on layout orientation
+   * This control is hidden for horizontal layout (products always take full width)
+   * Reads from store first (reliable during state transitions), falls back to DOM
+   */
+  _updateProductsInRowVisibility() {
+    const o = (this.store.recommendationConfigs.orientation || this._getCurrentLayout()) === "vertical";
+    this.api.setVisibility(e.PRODUCT_IN_ROW, o), this.api.setVisibility(e.PRODUCT_IN_ROW_LABEL, o);
+  }
+  _getFilterStatus() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Filters" }),
+      this._GuButton({
+        name: e.FILTERS,
+        label: "Add Filter",
+        id: "guido__btn-add-filter"
+      })
+    ])}
+        `;
+  }
+  _getShuffleProducts() {
+    return `
+            ${this._GuTwoColumns([
+      this._GuLabel({ text: "Shuffle Recommended Products" }),
+      this._GuToggle(e.SHUFFLE_PRODUCTS)
+    ])}
+        `;
+  }
+  _onFilterSelectClick() {
+    this.store.$patch({
+      filterSelectionDrawerStatus: !0
+    });
+  }
+  _onDataChange(t, i) {
+    this.currentNode && (this.store.$patch({
+      recommendationConfigs: {
+        [t]: i
+      }
+    }), this._debouncedRegenerateProductRows());
+  }
+  /**
+   * Get the current card composition from block data attribute or use default
+   */
+  _getCardComposition() {
+    if (!this.currentNode)
+      return m;
+    const t = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    if (!t || !("getAttribute" in t))
+      return m;
+    const i = t.getAttribute("data-card-composition");
+    return i ? i.split(",").filter(Boolean) : m;
+  }
+  _regenerateProductRows() {
+    if (!this.currentNode || !("querySelector" in this.currentNode))
+      return;
+    const t = this.currentNode.querySelector(f);
+    if (!t)
+      return;
+    const i = this.store.recommendationProducts.length > 0 ? this.store.recommendationProducts : y(), { cardsInRow: o } = this.store.recommendationConfigs, r = this._getCardComposition(), l = this._getCurrentLayout(), n = E(i, l, {
+      productsPerRow: o,
+      composition: r
+    });
+    this.api.getDocumentModifier().modifyHtml(t).setInnerHtml(n).apply(new p("Updated product")), this._reapplySpacing();
+  }
+  /**
+   * Reapply spacing values after product regeneration
+   * This ensures spacing persists when products are regenerated
+   */
+  _reapplySpacing() {
+    if (!this.currentNode)
+      return;
+    const t = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    if (!t || !("getAttribute" in t))
+      return;
+    const i = t.getAttribute("data-column-spacing"), o = t.getAttribute("data-row-spacing"), r = this.api.getDocumentModifier(), l = this._getCurrentLayout();
+    if (i) {
+      const n = parseInt(i);
+      if (!Number.isNaN(n)) {
+        const C = `0 ${Math.floor(n / 2)}px`;
+        l === "vertical" ? Array.from(
+          this.currentNode.querySelectorAll(".attribute-cell")
+        ).forEach((a) => {
+          r.modifyHtml(a).setStyle("padding", C);
+        }) : Array.from(
+          this.currentNode.querySelectorAll(".product-card-wrapper")
+        ).forEach((a) => {
+          "parentNode" in a && a.parentNode && typeof a.parentNode == "object" && "tagName" in a.parentNode && a.parentNode.tagName === "TD" && r.modifyHtml(a.parentNode).setStyle("padding", C);
+        });
+      }
+    }
+    if (o) {
+      const n = parseInt(o);
+      if (!Number.isNaN(n)) {
+        const _ = `${n}px`;
+        Array.from(this.currentNode.querySelectorAll(".spacer")).forEach((h) => {
+          r.modifyHtml(h).setStyle("height", _);
+        });
+      }
+    }
+    (i || o) && r.apply(new p("Reapply spacing after regeneration"));
+  }
+  _onCurrencyConfigChange(t, i) {
+    this.currentNode && this.store.$patch({
+      recommendationConfigs: {
+        currencySettings: {
+          [t]: i
+        }
+      }
+    });
+  }
+  _onCurrencyChange(t) {
+    const [, i] = t.split(".");
+    this.store.$patch({
+      recommendationConfigs: {
+        currencySettings: {
+          name: i,
+          value: i
+        }
+      }
+    });
+  }
+  _setProductIdsVisibility() {
+    const { recommendationConfigs: t } = this.store, i = t.strategy === "manualMerchandising";
+    this.api.setVisibility(e.PRODUCT_IDS, i), this.api.setVisibility(`${e.PRODUCT_IDS}_label`, i);
+  }
+  _listenToFormUpdates() {
+    var i;
+    this.api.onValueChanged(e.ALGORITHM, (o) => {
+      const r = o;
+      this._onDataChange(e.ALGORITHM, r), this._setProductIdsVisibility();
+    }), this.api.onValueChanged(e.PRODUCT_IDS, (o) => {
+      this._onDataChange(e.PRODUCT_IDS, o.split(",") || []);
+    }), this.api.onValueChanged(e.LOCALE, (o) => {
+      this._onDataChange(e.LOCALE, o);
+    }), this.api.onValueChanged(e.CURRENCY, (o) => {
+      this._onCurrencyChange(o);
+    }), [
+      e.CURRENCY_LOCATION,
+      e.CURRENCY_SYMBOL,
+      e.CURRENCY_THOUSAND_SEPARATOR,
+      e.CURRENCY_DECIMAL_SEPARATOR,
+      e.CURRENCY_DECIMAL_COUNT
+    ].forEach((o) => {
+      this.api.onValueChanged(o, (r) => {
+        this._onCurrencyConfigChange(o, r);
+      });
+    }), this.api.onValueChanged(e.PRODUCT_COUNT, (o) => {
+      this._onDataChange(e.PRODUCT_COUNT, o.toString());
+    }), this.api.onValueChanged(e.PRODUCT_IN_ROW, (o) => {
+      this._onDataChange(e.PRODUCT_IN_ROW, o);
+    }), this.api.onValueChanged(e.SHUFFLE_PRODUCTS, (o) => {
+      this._onDataChange(e.SHUFFLE_PRODUCTS, o);
+    }), this.addFilterListener = this._onFilterSelectClick.bind(this), this.addFilterButton = this.getContainer().querySelector("#guido__btn-add-filter"), (i = this.addFilterButton) == null || i.addEventListener("click", this.addFilterListener);
+  }
+  _listenStateUpdates() {
+    let t = this.store.recommendationConfigs.orientation;
+    this.storeUnsubscription = this.store.$subscribe((i) => {
+      if ("payload" in i) {
+        const r = i.payload.recommendationConfigs;
+        r && (this.api.updateValues(r), this.store.fetchRecommendationProducts());
+      }
+      const o = this.store.recommendationConfigs.orientation;
+      o !== t && (t = o, this._updateProductsInRowVisibility());
+    });
+  }
+}
+export {
+  A as CONTROL_BLOCK_ID,
+  V as RecommendationBlockControl
+};

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

@@ -0,0 +1,46 @@
+import { createPaddingsControl as n, createTextBackgroundColorControl as e, createTextFontFamilyControl as l, createTextStyleControl as C, createTextSizeControl as c, createTextColorControl as N, createTextAlignControl as a } from "../../../controlFactories.js";
+import { RecommendationBlockId as o } from "../../constants/blockIds.js";
+import { RecommendationControlId as t } from "../../constants/controlIds.js";
+import { CONTAINER_SELECTOR as r } from "../../constants/selectors.js";
+import { NameTextTrimControl as i } from "./textTrim.js";
+const m = a(
+  t.NAME_ALIGN,
+  o.NAME,
+  r
+), A = N(
+  t.NAME_COLOR,
+  o.NAME,
+  r
+), E = c(
+  t.NAME_SIZE,
+  o.NAME,
+  r
+), M = C(
+  t.NAME_STYLE,
+  o.NAME,
+  r
+), s = l(
+  t.NAME_FONT_FAMILY,
+  o.NAME,
+  r
+), d = e(
+  t.NAME_BACKGROUND,
+  o.NAME,
+  r
+), T = n(
+  t.NAME_PADDINGS,
+  o.NAME,
+  r
+), F = {
+  align: m,
+  color: A,
+  size: E,
+  style: M,
+  fontFamily: s,
+  background: d,
+  paddings: T,
+  textTrim: i
+};
+export {
+  F as NameControls
+};

package/dist/extensions/Blocks/Recommendation/controls/name/textTrim.js

@@ -0,0 +1,76 @@
+import { ModificationDescription as l } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as c } from "../../../common-control.js";
+import { RecommendationBlockId as a } from "../../constants/blockIds.js";
+import { RecommendationControlId as d } from "../../constants/controlIds.js";
+import { CONTAINER_SELECTOR as m } from "../../constants/selectors.js";
+const s = {
+  TEXT_TRIM_ENABLED: "textTrimEnabled"
+}, r = "text-trim-enabled";
+class p extends c {
+  getId() {
+    return d.NAME_TEXT_TRIM;
+  }
+  getTemplate() {
+    return `
+            <div class="name-text-trim-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Trim Long Text" }),
+      this._GuToggle(s.TEXT_TRIM_ENABLED)
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._setFormValues();
+  }
+  _setFormValues() {
+    const t = this._getCurrentTrimState();
+    this.api.updateValues({
+      [s.TEXT_TRIM_ENABLED]: t
+    });
+  }
+  _getCurrentTrimState() {
+    if (!this.currentNode || !("hasClass" in this.currentNode))
+      return !1;
+    if (this.currentNode.hasClass(r))
+      return !0;
+    const t = this.currentNode.closest(m);
+    if (!t)
+      return !1;
+    const e = t.querySelector(
+      `[esd-extension-block-id="${a.NAME}"]`
+    );
+    return e && "hasClass" in e ? e.hasClass(r) : !1;
+  }
+  _onTextTrimChange(t) {
+    if (!this.currentNode || !("closest" in this.currentNode))
+      return;
+    const e = this.currentNode.closest(m);
+    if (!e || !("querySelectorAll" in e))
+      return;
+    const i = Array.from(
+      e.querySelectorAll(`[esd-extension-block-id="${a.NAME}"]`)
+    );
+    if (!i.length)
+      return;
+    const o = this.api.getDocumentModifier();
+    i.forEach((n) => {
+      t ? o.modifyHtml(n).setClass(r) : o.modifyHtml(n).removeClass(r);
+    }), o.apply(
+      new l(
+        t ? "Enable product name text trimming" : "Disable product name text trimming"
+      )
+    );
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(s.TEXT_TRIM_ENABLED, (t) => {
+      this._onTextTrimChange(t);
+    });
+  }
+}
+export {
+  p as NameTextTrimControl
+};

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

@@ -0,0 +1,44 @@
+import { createPaddingsControl as r, createTextBackgroundColorControl as C, createTextFontFamilyControl as e, createTextStyleControl as l, createTextSizeControl as c, createTextColorControl as _, createTextAlignControl as I } 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 O = I(
+  t.OLD_PRICE_ALIGN,
+  o.OLD_PRICE,
+  n
+), R = _(
+  t.OLD_PRICE_COLOR,
+  o.OLD_PRICE,
+  n
+), a = c(
+  t.OLD_PRICE_SIZE,
+  o.OLD_PRICE,
+  n
+), i = l(
+  t.OLD_PRICE_STYLE,
+  o.OLD_PRICE,
+  n
+), E = e(
+  t.OLD_PRICE_FONT_FAMILY,
+  o.OLD_PRICE,
+  n
+), L = C(
+  t.OLD_PRICE_BACKGROUND,
+  o.OLD_PRICE,
+  n
+), P = r(
+  t.OLD_PRICE_PADDINGS,
+  o.OLD_PRICE,
+  n
+), T = {
+  align: O,
+  color: R,
+  size: a,
+  style: i,
+  fontFamily: E,
+  background: L,
+  paddings: P
+};
+export {
+  T as OldPriceControls
+};