@useinsider/guido 2.2.0-beta.8abc7b6 → 2.2.0-beta.953ff70

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

@@ -1,108 +0,0 @@
-import { ModificationDescription as a } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as c } from "../../../common-control.js";
-import { RecommendationBlockId as l } from "../../constants/blockIds.js";
-import { RecommendationControlId as m } from "../../constants/controlIds.js";
-import { CONTAINER_SELECTOR as u } from "../../constants/selectors.js";
-const i = {
-  TEXT_TRIM_ENABLED: "textTrimEnabled"
-}, o = "text-trim-enabled", d = `.${o}`, T = `.${o} p`, f = `.${o} { max-width: 0; }`, p = `.${o} p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; display: block; }`;
-class g extends c {
-  getId() {
-    return m.NAME_TEXT_TRIM;
-  }
-  getTemplate() {
-    return `
-            <div class="name-text-trim-control-container">
-                ${this._GuTwoColumns([
-      this._GuLabel({ text: "Trim Long Text" }),
-      this._GuToggle(i.TEXT_TRIM_ENABLED)
-    ])}
-            </div>
-        `;
-  }
-  onRender() {
-    this._setFormValues(), this._listenToFormUpdates();
-  }
-  onTemplateNodeUpdated(e) {
-    super.onTemplateNodeUpdated(e), this._setFormValues();
-  }
-  _setFormValues() {
-    const e = this._getCurrentTrimState();
-    this.api.updateValues({
-      [i.TEXT_TRIM_ENABLED]: e
-    });
-  }
-  _getCurrentTrimState() {
-    if (!this.currentNode || !("hasClass" in this.currentNode))
-      return !1;
-    if (this.currentNode.hasClass(o))
-      return !0;
-    const e = this.currentNode.closest(u);
-    if (!e)
-      return !1;
-    const t = e.querySelector(
-      `[esd-extension-block-id="${l.NAME}"]`
-    );
-    return t && "hasClass" in t ? t.hasClass(o) : !1;
-  }
-  /**
-   * Finds an existing CSS rule in the document stylesheet by exact query
-   * @param query - The CSS query to search for (uses Stripo's CSS query syntax)
-   * @returns The CSS rule node if found, undefined otherwise
-   */
-  _findCssRule(e) {
-    const t = this.api.getDocumentRootCssNode();
-    if (t)
-      return t.querySelector(e);
-  }
-  /**
-   * Finds the .text-trim-enabled p rule by searching all text-trim rules and comparing selectors
-   * This is needed because Stripo's CSS query syntax interprets spaces as path separators
-   * @returns true if the rule exists
-   */
-  _hasParagraphRule() {
-    const e = this.api.getDocumentRootCssNode();
-    return e ? e.querySelectorAll(`*${o}`).some((s) => "getSelector" in s && typeof s.getSelector == "function" ? s.getSelector() === T : !1) : !1;
-  }
-  /**
-   * Ensures the text-trim CSS rules exist in the document stylesheet
-   * Only adds rules if they don't already exist (prevents duplicates across multiple blocks)
-   */
-  _ensureCssRulesExist() {
-    const e = this.api.getDocumentRootCssNode();
-    if (!e)
-      return;
-    const t = this.api.getDocumentModifier();
-    let s = !1;
-    this._findCssRule(d) || (t.modifyCss(e).appendRule(f), s = !0), this._hasParagraphRule() || (t.modifyCss(e).appendRule(p), s = !0), s && t.apply(new a("Add text trim CSS rules"));
-  }
-  _onTextTrimChange(e) {
-    if (!this.currentNode || !("closest" in this.currentNode))
-      return;
-    const t = this.currentNode.closest(u);
-    if (!t || !("querySelectorAll" in t))
-      return;
-    const s = Array.from(
-      t.querySelectorAll(`[esd-extension-block-id="${l.NAME}"]`)
-    );
-    if (!s.length)
-      return;
-    e && this._ensureCssRulesExist();
-    const r = this.api.getDocumentModifier();
-    s.forEach((n) => {
-      e ? r.modifyHtml(n).setClass(o) : r.modifyHtml(n).removeClass(o);
-    }), r.apply(
-      new a(
-        e ? "Enable product name text trimming" : "Disable product name text trimming"
-      )
-    );
-  }
-  _listenToFormUpdates() {
-    this.api.onValueChanged(i.TEXT_TRIM_ENABLED, (e) => {
-      this._onTextTrimChange(e);
-    });
-  }
-}
-export {
-  g as NameTextTrimControl
-};

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

@@ -1,44 +0,0 @@
-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
-};

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

@@ -1,48 +0,0 @@
-import { createPaddingsControl as n, createTextBackgroundColorControl as e, createTextFontFamilyControl as C, createTextStyleControl as O, createTextSizeControl as S, createTextColorControl as I, createTextAlignControl as N } 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 { OmnibusDiscountTextAfterControl as l } from "./textAfter.js";
-import { OmnibusDiscountTextBeforeControl as U } from "./textBefore.js";
-const i = N(
-  t.OMNIBUS_DISCOUNT_ALIGN,
-  o.OMNIBUS_DISCOUNT,
-  r
-), T = I(
-  t.OMNIBUS_DISCOUNT_COLOR,
-  o.OMNIBUS_DISCOUNT,
-  r
-), c = S(
-  t.OMNIBUS_DISCOUNT_SIZE,
-  o.OMNIBUS_DISCOUNT,
-  r
-), _ = O(
-  t.OMNIBUS_DISCOUNT_STYLE,
-  o.OMNIBUS_DISCOUNT,
-  r
-), m = C(
-  t.OMNIBUS_DISCOUNT_FONT_FAMILY,
-  o.OMNIBUS_DISCOUNT,
-  r
-), s = e(
-  t.OMNIBUS_DISCOUNT_BACKGROUND,
-  o.OMNIBUS_DISCOUNT,
-  r
-), B = n(
-  t.OMNIBUS_DISCOUNT_PADDINGS,
-  o.OMNIBUS_DISCOUNT,
-  r
-), g = {
-  align: i,
-  color: T,
-  size: c,
-  style: _,
-  fontFamily: m,
-  background: s,
-  paddings: B,
-  textBefore: U,
-  textAfter: l
-};
-export {
-  g as OmnibusDiscountControls
-};

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

@@ -1,48 +0,0 @@
-import { createPaddingsControl as n, createTextBackgroundColorControl as e, createTextFontFamilyControl as C, createTextStyleControl as I, createTextSizeControl as l, createTextColorControl as i, createTextAlignControl 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 r } from "../../constants/selectors.js";
-import { OmnibusPriceTextAfterControl as O } from "./textAfter.js";
-import { OmnibusPriceTextBeforeControl as _ } from "./textBefore.js";
-const m = c(
-  t.OMNIBUS_PRICE_ALIGN,
-  o.OMNIBUS_PRICE,
-  r
-), S = i(
-  t.OMNIBUS_PRICE_COLOR,
-  o.OMNIBUS_PRICE,
-  r
-), B = l(
-  t.OMNIBUS_PRICE_SIZE,
-  o.OMNIBUS_PRICE,
-  r
-), N = I(
-  t.OMNIBUS_PRICE_STYLE,
-  o.OMNIBUS_PRICE,
-  r
-), P = C(
-  t.OMNIBUS_PRICE_FONT_FAMILY,
-  o.OMNIBUS_PRICE,
-  r
-), R = e(
-  t.OMNIBUS_PRICE_BACKGROUND,
-  o.OMNIBUS_PRICE,
-  r
-), a = n(
-  t.OMNIBUS_PRICE_PADDINGS,
-  o.OMNIBUS_PRICE,
-  r
-), f = {
-  align: m,
-  color: S,
-  size: B,
-  style: N,
-  fontFamily: P,
-  background: R,
-  paddings: a,
-  textBefore: _,
-  textAfter: O
-};
-export {
-  f as OmnibusPriceControls
-};

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

@@ -1,44 +0,0 @@
-import { createPaddingsControl as r, createTextBackgroundColorControl as C, createTextFontFamilyControl as e, createTextStyleControl as l, createTextSizeControl as c, createTextColorControl as I, createTextAlignControl as R } 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 a = R(
-  t.PRICE_ALIGN,
-  o.PRICE,
-  n
-), i = I(
-  t.PRICE_COLOR,
-  o.PRICE,
-  n
-), E = c(
-  t.PRICE_SIZE,
-  o.PRICE,
-  n
-), P = l(
-  t.PRICE_STYLE,
-  o.PRICE,
-  n
-), m = e(
-  t.PRICE_FONT_FAMILY,
-  o.PRICE,
-  n
-), s = C(
-  t.PRICE_BACKGROUND,
-  o.PRICE,
-  n
-), d = r(
-  t.PRICE_PADDINGS,
-  o.PRICE,
-  n
-), x = {
-  align: a,
-  color: i,
-  size: E,
-  style: P,
-  fontFamily: m,
-  background: s,
-  paddings: d
-};
-export {
-  x as PriceControls
-};

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