@useinsider/guido 1.0.3-beta.154cb70 → 1.0.3-beta.15f3cdb

package/dist/extensions/Blocks/Recommendation/controls/cardBackgroundColorControl.js

@@ -0,0 +1,68 @@
+import { ModificationDescription as a } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as d } from "../../common-control.js";
+const c = "recommendation-card-background-color-control", o = {
+  CARD_BACKGROUND_COLOR: "cardBackgroundColor"
+};
+class u extends d {
+  getId() {
+    return c;
+  }
+  getTemplate() {
+    return `
+            <div class="card-bg-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Card Background Color" }),
+      this._GuColorPicker(o.CARD_BACKGROUND_COLOR)
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(r) {
+    super.onTemplateNodeUpdated(r), this._setFormValues();
+  }
+  _setFormValues() {
+    const r = this._getCurrentCardBackgroundColor();
+    this.api.updateValues({
+      [o.CARD_BACKGROUND_COLOR]: r
+    });
+  }
+  /**
+   * Reads the current background color from the first product card wrapper
+   * @returns The background color value or 'transparent' if not found
+   */
+  _getCurrentCardBackgroundColor() {
+    if (!this.currentNode || !("querySelectorAll" in this.currentNode))
+      return "transparent";
+    const r = this.currentNode.querySelector(".product-card-wrapper");
+    return !r || !("getStyle" in r) ? "transparent" : r.getStyle("background-color") || "transparent";
+  }
+  /**
+   * Handles card background color changes
+   * Applies the color to all product card wrapper elements
+   */
+  _onCardBackgroundColorChange(r) {
+    if (!this.currentNode || !("querySelectorAll" in this.currentNode))
+      return;
+    const e = Array.from(
+      this.currentNode.querySelectorAll(".product-card-wrapper")
+    );
+    if (e.length === 0)
+      return;
+    const t = this.api.getDocumentModifier();
+    e.forEach((n) => {
+      t.modifyHtml(n).setStyle("background-color", r);
+    }), t.apply(new a("Update card background color"));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(o.CARD_BACKGROUND_COLOR, (r) => {
+      this._onCardBackgroundColorChange(r);
+    });
+  }
+}
+export {
+  c as CARD_BACKGROUND_COLOR_CONTROL_ID,
+  u as CardBackgroundColorControl
+};

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

@@ -0,0 +1,175 @@
+import { createButtonAlignControl as N, createButtonBorderControl as E, createButtonBorderRadiusControl as _, createButtonColorControl as I, createButtonFitToContainerControl as a, createButtonFontFamilyControl as B, createButtonMarginsControl as i, createButtonPaddingsControl as P, createButtonTextControl as R, createButtonTextSizeControl as s, createButtonTextStyleAndFontColorControl as A, createImageMarginsControl as d, createImageSizeControl as L, createTextAlignControl as r, createTextBackgroundColorControl as e, createTextColorControl as C, createTextFontFamilyControl as l, createPaddingsControl as c, createTextSizeControl as T, createTextStyleControl as O } from "../../controlFactories.js";
+import { RecommendationBlockId as o, RecommendationControlId as t } from "../constants.js";
+const n = ".ins-recommendation-product-container", D = r(
+  t.NAME_ALIGN,
+  o.NAME,
+  n
+), M = C(
+  t.NAME_COLOR,
+  o.NAME,
+  n
+), m = T(
+  t.NAME_SIZE,
+  o.NAME,
+  n
+), F = O(
+  t.NAME_STYLE,
+  o.NAME,
+  n
+), U = l(
+  t.NAME_FONT_FAMILY,
+  o.NAME,
+  n
+), g = e(
+  t.NAME_BACKGROUND,
+  o.NAME,
+  n
+), G = c(
+  t.NAME_PADDINGS,
+  o.NAME,
+  n
+), x = r(
+  t.PRICE_ALIGN,
+  o.PRICE,
+  n
+), y = C(
+  t.PRICE_COLOR,
+  o.PRICE,
+  n
+), z = T(
+  t.PRICE_SIZE,
+  o.PRICE,
+  n
+), Y = O(
+  t.PRICE_STYLE,
+  o.PRICE,
+  n
+), k = l(
+  t.PRICE_FONT_FAMILY,
+  o.PRICE,
+  n
+), Z = e(
+  t.PRICE_BACKGROUND,
+  o.PRICE,
+  n
+), p = c(
+  t.PRICE_PADDINGS,
+  o.PRICE,
+  n
+), K = r(
+  t.OLD_PRICE_ALIGN,
+  o.OLD_PRICE,
+  n
+), X = C(
+  t.OLD_PRICE_COLOR,
+  o.OLD_PRICE,
+  n
+), f = T(
+  t.OLD_PRICE_SIZE,
+  o.OLD_PRICE,
+  n
+), b = O(
+  t.OLD_PRICE_STYLE,
+  o.OLD_PRICE,
+  n
+), h = l(
+  t.OLD_PRICE_FONT_FAMILY,
+  o.OLD_PRICE,
+  n
+), j = e(
+  t.OLD_PRICE_BACKGROUND,
+  o.OLD_PRICE,
+  n
+), q = c(
+  t.OLD_PRICE_PADDINGS,
+  o.OLD_PRICE,
+  n
+), v = N(
+  t.BUTTON_ALIGN,
+  o.BUTTON,
+  n
+), w = E(
+  t.BUTTON_BORDER,
+  o.BUTTON,
+  n
+), H = _(
+  t.BUTTON_BORDER_RADIUS,
+  o.BUTTON,
+  n
+), J = I(
+  t.BUTTON_COLOR,
+  o.BUTTON,
+  n
+), Q = B(
+  t.BUTTON_FONT_FAMILY,
+  o.BUTTON,
+  n
+), V = i(
+  t.BUTTON_MARGINS,
+  o.BUTTON,
+  n
+), W = P(
+  t.BUTTON_PADDINGS,
+  o.BUTTON,
+  n
+), $ = R(
+  t.BUTTON_TEXT,
+  o.BUTTON,
+  n
+), oo = s(
+  t.BUTTON_TEXT_SIZE,
+  o.BUTTON,
+  n
+), to = A(
+  t.BUTTON_TEXT_STYLE_AND_FONT_COLOR,
+  o.BUTTON,
+  n
+), no = a(
+  t.BUTTON_FIT_TO_CONTENT,
+  o.BUTTON,
+  n
+), ro = L(
+  t.IMAGE_SIZE,
+  o.IMAGE,
+  n
+), eo = d(
+  t.IMAGE_MARGINS,
+  o.IMAGE,
+  n
+);
+export {
+  v as ButtonAlignControl,
+  w as ButtonBorderControl,
+  H as ButtonBorderRadiusControl,
+  J as ButtonColorControl,
+  no as ButtonFitToContentControl,
+  Q as ButtonFontFamilyControl,
+  V as ButtonMarginsControl,
+  W as ButtonPaddingsControl,
+  $ as ButtonTextControl,
+  oo as ButtonTextSizeControl,
+  to as ButtonTextStyleAndFontColorControl,
+  eo as ImageMarginsControl,
+  ro as ImageSizeControl,
+  D as NameAlignControl,
+  g as NameBackgroundControl,
+  M as NameColorControl,
+  U as NameFontFamilyControl,
+  G as NamePaddingsControl,
+  m as NameSizeControl,
+  F as NameStyleControl,
+  K as OldPriceAlignControl,
+  j as OldPriceBackgroundControl,
+  X as OldPriceColorControl,
+  h as OldPriceFontFamilyControl,
+  q as OldPricePaddingsControl,
+  f as OldPriceSizeControl,
+  b as OldPriceStyleControl,
+  x as PriceAlignControl,
+  Z as PriceBackgroundControl,
+  y as PriceColorControl,
+  k as PriceFontFamilyControl,
+  p as PricePaddingsControl,
+  z as PriceSizeControl,
+  Y as PriceStyleControl
+};

package/dist/extensions/Blocks/Recommendation/controls/nameTextTrimControl.js

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

package/dist/extensions/Blocks/Recommendation/controls/spacingControl.js

@@ -0,0 +1,188 @@
+var C = Object.defineProperty;
+var g = (i, r, e) => r in i ? C(i, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[r] = e;
+var S = (i, r, e) => g(i, typeof r != "symbol" ? r + "" : r, e);
+import { ModificationDescription as l } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as m } from "../../common-control.js";
+import { useDebounceFn as d } from "../../../../node_modules/@vueuse/shared/index.js";
+const _ = "recommendation-spacing-control", c = {
+  COLUMN_SPACING: "columnSpacing",
+  ROW_SPACING: "rowSpacing"
+}, N = {
+  COLUMN_SPACING: "data-column-spacing",
+  ROW_SPACING: "data-row-spacing"
+}, n = {
+  COLUMN_SPACING: 10,
+  // 5px on each side = 10px total
+  ROW_SPACING: 20
+}, p = {
+  MIN_SPACING: 0,
+  MAX_SPACING: 50,
+  STEP: 5
+};
+class G extends m {
+  constructor() {
+    super(...arguments);
+    /**
+     * Debounced version of _onColumnSpacingChange
+     * Prevents excessive DOM updates when user rapidly adjusts the counter
+     */
+    S(this, "_debouncedOnColumnSpacingChange", d((e) => {
+      this._onColumnSpacingChange(e);
+    }, 300));
+    /**
+     * Debounced version of _onRowSpacingChange
+     * Prevents excessive DOM updates when user rapidly adjusts the counter
+     */
+    S(this, "_debouncedOnRowSpacingChange", d((e) => {
+      this._onRowSpacingChange(e);
+    }, 300));
+  }
+  getId() {
+    return _;
+  }
+  getTemplate() {
+    return `
+            <div class="spacing-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Column Spacing (px)" }),
+      this._GuCounter({
+        name: c.COLUMN_SPACING,
+        minValue: p.MIN_SPACING,
+        maxValue: p.MAX_SPACING,
+        step: p.STEP
+      }),
+      this._GuLabel({ text: "Row Spacing (px)" }),
+      this._GuCounter({
+        name: c.ROW_SPACING,
+        minValue: p.MIN_SPACING,
+        maxValue: p.MAX_SPACING,
+        step: p.STEP
+      })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(e) {
+    super.onTemplateNodeUpdated(e), this._setFormValues();
+  }
+  /**
+   * Reads spacing values from data attributes or returns defaults
+   */
+  _setFormValues() {
+    const e = this._getStoredColumnSpacing(), t = this._getStoredRowSpacing();
+    this.api.updateValues({
+      [c.COLUMN_SPACING]: e,
+      [c.ROW_SPACING]: t
+    });
+  }
+  /**
+   * Gets stored column spacing from the first product card wrapper's parent element's padding
+   * Reads the actual padding value instead of relying on data attributes
+   *
+   * The padding is applied as "0 {halfSpacing}px" on the parent TD element,
+   * so we need to extract the horizontal padding value and multiply by 2 to get total spacing.
+   */
+  _getStoredColumnSpacing() {
+    if (!this.currentNode)
+      return n.COLUMN_SPACING;
+    const e = this.currentNode.querySelector(".product-card-wrapper");
+    if (!e || !("parent" in e) || typeof e.parent != "function")
+      return n.COLUMN_SPACING;
+    const t = e.parent();
+    if (!t || !("getStyle" in t))
+      return n.COLUMN_SPACING;
+    const o = t.getStyle("padding");
+    if (!o)
+      return n.COLUMN_SPACING;
+    const u = o.trim().split(/\s+/);
+    if (u.length < 2)
+      return n.COLUMN_SPACING;
+    const [, a] = u, s = parseFloat(a);
+    return Number.isNaN(s) ? n.COLUMN_SPACING : s * 2;
+  }
+  /**
+   * Gets stored row spacing from the first spacer element's height style
+   * Reads the actual height value instead of relying on data attributes
+   */
+  _getStoredRowSpacing() {
+    if (!this.currentNode)
+      return n.ROW_SPACING;
+    const e = this.currentNode.querySelector(".spacer");
+    if (!e || !("getStyle" in e))
+      return n.ROW_SPACING;
+    const t = e.getStyle("height");
+    if (!t)
+      return n.ROW_SPACING;
+    const o = parseFloat(t);
+    return Number.isNaN(o) ? n.ROW_SPACING : o;
+  }
+  /**
+   * Handles column spacing changes
+   * Applies horizontal padding to all product card wrappers
+   */
+  _onColumnSpacingChange(e) {
+    if (!this.currentNode)
+      return;
+    const t = Array.from(
+      this.currentNode.querySelectorAll(".product-card-wrapper")
+    );
+    if (!t)
+      return;
+    const o = this.api.getDocumentModifier(), a = `0 ${e / 2}px`;
+    console.debug("padding", a), t.forEach((s) => {
+      "parent" in s && s.parent() && o.modifyHtml(s.parent()).setStyle("padding", a);
+    }), o.apply(new l(`Update column spacing to ${e}px`));
+  }
+  /**
+   * Handles row spacing changes
+   * Applies height to all spacer elements between product rows
+   */
+  _onRowSpacingChange(e) {
+    if (!this.currentNode)
+      return;
+    this._storeRowSpacing(e);
+    const t = Array.from(
+      this.currentNode.querySelectorAll(".spacer")
+    );
+    if (console.debug("spacerCells", t), console.debug("spacing", e), !t.length)
+      return;
+    const o = this.api.getDocumentModifier(), u = `${e}px`;
+    t.forEach((a) => {
+      o.modifyHtml(a).setStyle("height", u);
+    }), o.apply(new l(`Update row spacing to ${e}px`));
+  }
+  /**
+   * Stores column spacing value in block data attribute
+   */
+  _storeColumnSpacing(e) {
+    if (!this.currentNode)
+      return;
+    const t = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    t && this.api.getDocumentModifier().modifyHtml(t).setAttribute(N.COLUMN_SPACING, e.toString()).apply(new l("Store column spacing"));
+  }
+  /**
+   * Stores row spacing value in block data attribute
+   */
+  _storeRowSpacing(e) {
+    if (!this.currentNode)
+      return;
+    const t = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    t && this.api.getDocumentModifier().modifyHtml(t).setAttribute(N.ROW_SPACING, e.toString()).apply(new l("Store row spacing"));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(c.COLUMN_SPACING, (e) => {
+      const t = parseInt(e);
+      Number.isNaN(t) || this._debouncedOnColumnSpacingChange(t);
+    }), this.api.onValueChanged(c.ROW_SPACING, (e) => {
+      const t = parseInt(e);
+      Number.isNaN(t) || this._debouncedOnRowSpacingChange(t);
+    });
+  }
+}
+export {
+  _ as SPACING_CONTROL_ID,
+  G as SpacingControl
+};

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

@@ -1,45 +1,15 @@
 import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { RecommendationBlock as r } from "./block.js";
-import { RecommendationCardCompositionControl as t } from "./cardCompositionControl.js";
+import { RecommendationBlock as t } from "./block.js";
+import { RecommendationCardCompositionControl as r } from "./cardCompositionControl.js";
 import { RecommendationBlockControl as n } from "./control.js";
-import { ButtonAlignControl as d } from "./controls/button/align.js";
-import { ButtonBorderControl as l } from "./controls/button/border.js";
-import { ButtonBorderRadiusControl as m } from "./controls/button/borderRadius.js";
-import { ButtonColorControl as i } from "./controls/button/color.js";
-import { ButtonFitToContentControl as C } from "./controls/button/fitToContent.js";
-import { ButtonFontFamilyControl as a } from "./controls/button/fontFamily.js";
-import { ButtonMarginsControl as e } from "./controls/button/margins.js";
-import { ButtonPaddingsControl as p } from "./controls/button/paddings.js";
-import { ButtonTextControl as f } from "./controls/button/text.js";
-import { ButtonTextSizeControl as c } from "./controls/button/textSize.js";
-import { ButtonTextStyleAndFontColorControl as s } from "./controls/button/textStyleAndFontColor.js";
-import { ImageMarginsControl as g } from "./controls/image/margins.js";
-import { ImageSizeControl as B } from "./controls/image/size.js";
-import { NameAlignControl as P } from "./controls/name/align.js";
-import { NameBackgroundControl as u } from "./controls/name/background.js";
-import { NameColorControl as y } from "./controls/name/color.js";
-import { NameFontFamilyControl as S } from "./controls/name/fontFamily.js";
-import { NamePaddingsControl as F } from "./controls/name/paddings.js";
-import { NameSizeControl as R } from "./controls/name/size.js";
-import { NameStyleControl as N } from "./controls/name/style.js";
-import { OldPriceAlignControl as O } from "./controls/oldPrice/align.js";
-import { OldPriceBackgroundControl as k } from "./controls/oldPrice/background.js";
-import { OldPriceColorControl as x } from "./controls/oldPrice/color.js";
-import { OldPriceFontFamilyControl as z } from "./controls/oldPrice/fontFamily.js";
-import { OldPricePaddingsControl as A } from "./controls/oldPrice/paddings.js";
-import { OldPriceSizeControl as I } from "./controls/oldPrice/size.js";
-import { OldPriceStyleControl as T } from "./controls/oldPrice/style.js";
-import { PriceAlignControl as w } from "./controls/price/align.js";
-import { PriceBackgroundControl as h } from "./controls/price/background.js";
-import { PriceColorControl as M } from "./controls/price/color.js";
-import { PriceFontFamilyControl as b } from "./controls/price/fontFamily.js";
-import { PricePaddingsControl as E } from "./controls/price/paddings.js";
-import { PriceSizeControl as j } from "./controls/price/size.js";
-import { PriceStyleControl as q } from "./controls/price/style.js";
+import { ButtonAlignControl as d, ButtonBorderControl as l, ButtonBorderRadiusControl as C, ButtonColorControl as a, ButtonFitToContentControl as i, ButtonFontFamilyControl as e, ButtonMarginsControl as m, ButtonPaddingsControl as c, ButtonTextControl as g, ButtonTextSizeControl as s, ButtonTextStyleAndFontColorControl as B, ImageMarginsControl as P, ImageSizeControl as u, NameAlignControl as p, NameBackgroundControl as y, NameColorControl as S, NameFontFamilyControl as f, NamePaddingsControl as F, NameSizeControl as N, NameStyleControl as R, OldPriceAlignControl as k, OldPriceBackgroundControl as x, OldPriceColorControl as O, OldPriceFontFamilyControl as T, OldPricePaddingsControl as z, OldPriceSizeControl as A, OldPriceStyleControl as I, PriceAlignControl as w, PriceBackgroundControl as h, PriceColorControl as M, PriceFontFamilyControl as b, PricePaddingsControl as E, PriceSizeControl as j, PriceStyleControl as q } from "./controls/index.js";
 import { RecommendationIconsRegistry as v } from "./iconsRegistry.js";
 import D from "./recommendation.css.js";
 import { SettingsPanel as G } from "./settingsPanel.js";
-const Io = new o().addBlock(r).withSettingsPanelRegistry(G).addControl(n).addControl(d).addControl(l).addControl(m).addControl(i).addControl(C).addControl(a).addControl(e).addControl(p).addControl(f).addControl(c).addControl(s).addControl(g).addControl(B).addControl(P).addControl(u).addControl(y).addControl(S).addControl(F).addControl(R).addControl(N).addControl(O).addControl(k).addControl(x).addControl(z).addControl(A).addControl(I).addControl(T).addControl(w).addControl(h).addControl(M).addControl(b).addControl(E).addControl(j).addControl(q).addControl(t).addStyles(D).withIconsRegistry(v).build();
+import { CardBackgroundColorControl as H } from "./controls/cardBackgroundColorControl.js";
+import { SpacingControl as J } from "./controls/spacingControl.js";
+import { NameTextTrimControl as K } from "./controls/nameTextTrimControl.js";
+const to = new o().addBlock(t).withSettingsPanelRegistry(G).addControl(n).addControl(H).addControl(J).addControl(d).addControl(l).addControl(C).addControl(a).addControl(i).addControl(e).addControl(m).addControl(c).addControl(g).addControl(s).addControl(B).addControl(P).addControl(u).addControl(p).addControl(y).addControl(S).addControl(f).addControl(F).addControl(N).addControl(R).addControl(K).addControl(k).addControl(x).addControl(O).addControl(T).addControl(z).addControl(A).addControl(I).addControl(w).addControl(h).addControl(M).addControl(b).addControl(E).addControl(j).addControl(q).addControl(r).addStyles(D).withIconsRegistry(v).build();
 export {
-  Io as default
+  to as default
 };