@useinsider/guido 2.1.0-beta.e2d48fe → 2.1.0-beta.e4c3fa1

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

@@ -0,0 +1,168 @@
+var u = Object.defineProperty;
+var _ = (n, r, t) => r in n ? u(n, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[r] = t;
+var a = (n, r, t) => _(n, typeof r != "symbol" ? r + "" : r, t);
+import { EditorStatePropertyType as c, PreviewDeviceMode as C } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as R } from "../../../common-control.js";
+import { MAX_PRODUCT_COUNT as h, MAX_PRODUCTS_PER_ROW as p, MAX_MOBILE_PRODUCTS_PER_ROW as g, DEFAULT_COLUMN_SPACING as m, DEFAULT_MOBILE_COLUMN_SPACING as O } from "../../constants/layout.js";
+import { RecommendationConfigService as i } from "../../services/configService.js";
+import { useRecommendationExtensionStore as l } from "../../store/recommendation.js";
+import { ensureMobileCssRulesExist as I } from "../mobileLayout/cssRules.js";
+import { getCurrentLayout as N, regenerateMobileProductRows as f, adjustProductsToSize as b, regenerateProductRowsWithStyles as P } from "./utils.js";
+import { useDebounceFn as L } from "../../../../../node_modules/@vueuse/shared/index.js";
+const M = "recommendation-product-layout-control", e = {
+  PRODUCT_COUNT: "size",
+  PRODUCT_IN_ROW: "cardsInRow",
+  PRODUCT_IN_ROW_LABEL: "cardsInRowLabel",
+  MOBILE_CARDS_IN_ROW: "mobileCardsInRow",
+  MOBILE_CARDS_IN_ROW_LABEL: "mobileCardsInRowLabel"
+};
+class V extends R {
+  constructor() {
+    super(...arguments);
+    // Store is used for backward compatibility with product fetching and regeneration
+    a(this, "store", l());
+    a(this, "storeUnsubscription", () => {
+    });
+    a(this, "_debouncedRegenerateProductRows", L(() => {
+      this._regenerateProductRows();
+    }, 500));
+  }
+  getId() {
+    return M;
+  }
+  getTemplate() {
+    return `
+            <div class="product-layout-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Number of Products" }),
+      this._GuCounter({ name: e.PRODUCT_COUNT, maxValue: h }),
+      this._GuLabel({
+        text: "Products in One Row on Desktop",
+        name: e.PRODUCT_IN_ROW_LABEL
+      }),
+      this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue: p }),
+      this._GuLabel({
+        text: "Products in One Row on Mobile",
+        name: e.MOBILE_CARDS_IN_ROW_LABEL
+      }),
+      this._GuCounter({
+        name: e.MOBILE_CARDS_IN_ROW,
+        maxValue: g
+      })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._updateProductsInRowVisibility(), this._listenToFormUpdates(), this._listenStateUpdates(), this._subscribeToEditorModeChanges();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateProductsInRowVisibility();
+  }
+  onDestroy() {
+    this.storeUnsubscription();
+  }
+  _setFormValues() {
+    const t = i.getConfig(this.currentNode);
+    this.api.updateValues({
+      [e.PRODUCT_COUNT]: t.size,
+      [e.PRODUCT_IN_ROW]: t.cardsInRow,
+      [e.MOBILE_CARDS_IN_ROW]: t.mobileCardsInRow
+    });
+  }
+  /**
+   * Checks if the editor is currently in mobile preview mode
+   * using Stripo's EditorStatePropertyType API.
+   */
+  _isMobileMode() {
+    return this.api.getEditorState()[c.previewDeviceMode] === C.MOBILE;
+  }
+  /**
+   * Updates counter visibility based on layout orientation and editor mode.
+   * - List layout: hide both counters (products always full-width)
+   * - Grid + desktop mode: show desktop counter, hide mobile counter
+   * - Grid + mobile mode: show mobile counter, hide desktop counter
+   */
+  _updateProductsInRowVisibility() {
+    const o = (i.getConfig(this.currentNode).layout || N(this.currentNode)) === "grid", d = this._isMobileMode();
+    this.api.setVisibility(e.PRODUCT_IN_ROW, o && !d), this.api.setVisibility(e.PRODUCT_IN_ROW_LABEL, o && !d), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW, o && d), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW_LABEL, o && d);
+  }
+  /**
+   * Subscribes to editor preview mode changes via Stripo API.
+   * When the user switches between desktop/mobile preview, toggles
+   * which "Products in One Row" counter is visible.
+   */
+  _subscribeToEditorModeChanges() {
+    this.api.onEditorStatePropUpdated(
+      c.previewDeviceMode,
+      () => {
+        this._updateProductsInRowVisibility();
+      }
+    );
+  }
+  _onProductCountChange(t) {
+    !this.currentNode || i.getConfig(this.currentNode).size === t || (i.updateConfig(
+      this.api,
+      this.currentNode,
+      { size: t },
+      `Changed product count to ${t}`
+    ), this.store.patchCurrentBlockConfig({ size: t }));
+  }
+  _onProductsInRowChange(t) {
+    if (!this.currentNode || i.getConfig(this.currentNode).cardsInRow === t)
+      return;
+    const o = t === 1 ? 0 : m;
+    i.updateConfig(
+      this.api,
+      this.currentNode,
+      { cardsInRow: t, columnSpacing: o },
+      `Changed products per row to ${t}`
+    ), this.store.patchCurrentBlockConfig({ cardsInRow: t }, { triggerRefetch: !1 }), this._debouncedRegenerateProductRows();
+  }
+  _onMobileCardsInRowChange(t) {
+    if (!this.currentNode || i.getConfig(this.currentNode).mobileCardsInRow === t)
+      return;
+    const o = t === 1 ? 0 : O;
+    i.updateConfig(
+      this.api,
+      this.currentNode,
+      { mobileCardsInRow: t, mobileColumnSpacing: o },
+      `Changed mobile products per row to ${t}`
+    ), I(this.api), f({
+      currentNode: this.currentNode,
+      documentModifier: this.api.getDocumentModifier()
+    });
+  }
+  _regenerateProductRows() {
+    const t = i.getConfig(this.currentNode), s = parseInt(t.size) || 6, o = b(this.store.recommendationProducts, s);
+    P({
+      currentNode: this.currentNode,
+      documentModifier: this.api.getDocumentModifier(),
+      products: o
+    });
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(e.PRODUCT_COUNT, (t) => {
+      this._onProductCountChange(t.toString());
+    }), this.api.onValueChanged(e.PRODUCT_IN_ROW, (t) => {
+      this._onProductsInRowChange(Number(t));
+    }), this.api.onValueChanged(e.MOBILE_CARDS_IN_ROW, (t) => {
+      this._onMobileCardsInRowChange(Number(t));
+    });
+  }
+  /**
+   * Subscribe to store changes to update visibility when layout changes
+   * This is still needed because layout changes come from LayoutControl
+   */
+  _listenStateUpdates() {
+    let t = this.store.recommendationConfigs.orientation;
+    this.storeUnsubscription = this.store.$subscribe(() => {
+      const s = this.store.recommendationConfigs.orientation;
+      s !== t && (t = s, this._updateProductsInRowVisibility());
+    });
+  }
+}
+export {
+  M as PRODUCT_LAYOUT_CONTROL_ID,
+  V as ProductLayoutControl
+};

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

@@ -0,0 +1,67 @@
+var r = Object.defineProperty;
+var f = (o, t, e) => t in o ? r(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var n = (o, t, e) => f(o, typeof t != "symbol" ? t + "" : t, e);
+import { UEAttr as u } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as l } from "../../../common-control.js";
+import { RecommendationConfigService as s } from "../../services/configService.js";
+import { useRecommendationExtensionStore as d } from "../../store/recommendation.js";
+const h = "recommendation-shuffle-control", i = {
+  SHUFFLE_PRODUCTS: "shuffleProducts"
+};
+class S extends l {
+  constructor() {
+    super(...arguments);
+    // Store is used for backward compatibility with product fetching
+    n(this, "store", d());
+  }
+  getId() {
+    return h;
+  }
+  getTemplate() {
+    return `
+            <div class="shuffle-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Shuffle Recommended Products" }),
+      this._GuToggle(i.SHUFFLE_PRODUCTS)
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._initializeToggle(), this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(e) {
+    super.onTemplateNodeUpdated(e), this._setFormValues();
+  }
+  _setFormValues() {
+    const e = s.getConfig(this.currentNode);
+    this.api.updateValues({
+      [i.SHUFFLE_PRODUCTS]: e.shuffleProducts
+    });
+  }
+  _initializeToggle() {
+    const e = s.getConfig(this.currentNode);
+    this.api.setUIEAttribute(
+      i.SHUFFLE_PRODUCTS,
+      u.SELECTPICKER.items,
+      e.shuffleProducts
+    );
+  }
+  _onShuffleChange(e) {
+    !this.currentNode || s.getConfig(this.currentNode).shuffleProducts === e || (s.updateConfig(
+      this.api,
+      this.currentNode,
+      { shuffleProducts: e },
+      `${e ? "Enabled" : "Disabled"} product shuffle`
+    ), this.store.patchCurrentBlockConfig({ shuffleProducts: e }));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(i.SHUFFLE_PRODUCTS, (e) => {
+      this._onShuffleChange(!!e);
+    });
+  }
+}
+export {
+  h as SHUFFLE_CONTROL_ID,
+  S as ShuffleControl
+};

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

@@ -0,0 +1,361 @@
+import { ModificationDescription as y } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { RecommendationBlockId as m } from "../../constants/blockIds.js";
+import { MOBILE_CONTAINER_SELECTOR as g, CURRENCY_ATTR as p, DESKTOP_CONTAINER_SELECTOR as C, CONTAINER_SELECTOR as $ } from "../../constants/selectors.js";
+import { RecommendationConfigService as k } from "../../services/configService.js";
+import { useRecommendationExtensionStore as b } from "../../store/recommendation.js";
+import { prepareProductRows as N } from "../../templates/index.js";
+import { formatPrice as H } from "../../utils/priceFormatter.js";
+import { isTdNode as B } from "../../utils/tagName.js";
+import { getDefaultProducts as T, DEFAULT_CARD_COMPOSITION as q, sanitizeImageUrl as v } from "../../templates/utils.js";
+const M = "ins-recommendation-v3-block-v2";
+function A(t) {
+  if (!t)
+    return null;
+  if ("getAttribute" in t) {
+    const e = t.getAttribute("class");
+    if (e && e.includes(M))
+      return t;
+  }
+  return "querySelector" in t ? t.querySelector(`.${M}`) : null;
+}
+function P(t) {
+  const e = A(t);
+  if (!e || !("getAttribute" in e))
+    return "grid";
+  const o = e.getAttribute("data-layout");
+  return o === "list" || o === "horizontal" ? "list" : "grid";
+}
+function w(t) {
+  const e = A(t);
+  if (!e || !("getAttribute" in e))
+    return q;
+  const o = e.getAttribute("data-card-composition");
+  return o ? o.split(",").filter(Boolean) : q;
+}
+function S(t, e, o) {
+  if (!e || !("childNodes" in e))
+    return !1;
+  const i = e.childNodes().find(
+    (c) => "getType" in c && c.getType() === "text"
+  );
+  return i ? (t.modifyHtml(i).setText(o), !0) : !1;
+}
+function _(t, e) {
+  return t && t.length > 0 ? t : e.length > 0 ? e : T();
+}
+function j(t) {
+  const { currentNode: e, documentModifier: o, products: n, layout: i } = t;
+  if (!e || !("querySelector" in e))
+    return;
+  const c = e.querySelector(g);
+  if (!c)
+    return;
+  const r = b(), s = k.getConfig(e), u = _(n, r.recommendationProducts), l = w(e), f = i ?? P(e), a = N(u, f, {
+    productsPerRow: s.mobileCardsInRow,
+    composition: l
+  });
+  o.modifyHtml(c).setInnerHtml(a).apply(new y("Updated mobile product rows"));
+}
+function V(t) {
+  const {
+    currentNode: e,
+    documentModifier: o,
+    afterRegenerate: n,
+    products: i,
+    layout: c
+  } = t;
+  if (!e || !("querySelector" in e))
+    return;
+  const r = e.querySelector(C) ?? e.querySelector($);
+  if (!r)
+    return;
+  const s = b(), u = _(i, s.recommendationProducts), { cardsInRow: l } = s.recommendationConfigs, f = w(e), a = c ?? P(e), d = N(u, a, {
+    productsPerRow: l,
+    composition: f
+  });
+  o.modifyHtml(r).setInnerHtml(d).apply(new y("Updated product")), j(t), n == null || n();
+}
+function h(t, e, o, n) {
+  const c = `0 ${Math.floor(o / 2)}px`;
+  let r = !1;
+  return n === "grid" ? Array.from(
+    t.querySelectorAll(".attribute-cell")
+  ).forEach((u) => {
+    e.modifyHtml(u).setStyle("padding", c), r = !0;
+  }) : Array.from(
+    t.querySelectorAll(".product-card-wrapper")
+  ).forEach((u) => {
+    const l = "parentNode" in u ? u.parentNode : null;
+    l && B(l) && (e.modifyHtml(l).setStyle("padding", c), r = !0);
+  }), r;
+}
+function R(t, e, o) {
+  const n = `${o}px`, i = Array.from(t.querySelectorAll(".spacer"));
+  let c = !1;
+  return i.forEach((r) => {
+    e.modifyHtml(r).setStyle("height", n), c = !0;
+  }), c;
+}
+function G(t) {
+  const { currentNode: e, documentModifier: o } = t;
+  if (!e)
+    return;
+  const n = k.getConfig(e), i = P(e);
+  let c = !1;
+  const r = e.querySelector(C);
+  if (r) {
+    c = h(
+      r,
+      o,
+      n.columnSpacing,
+      i
+    );
+    const l = R(
+      r,
+      o,
+      n.rowSpacing
+    );
+    c = c || l;
+  }
+  const s = e.querySelector(g);
+  if (s) {
+    const u = h(
+      s,
+      o,
+      n.mobileColumnSpacing,
+      i
+    );
+    c = c || u;
+    const l = R(
+      s,
+      o,
+      n.mobileRowSpacing
+    );
+    c = c || l;
+  }
+  c && o.apply(new y("Reapply spacing after regeneration"));
+}
+function oe(t) {
+  const { currentNode: e, documentModifier: o, afterRegenerate: n, products: i, layout: c } = t;
+  e && V({
+    currentNode: e,
+    documentModifier: o,
+    products: i,
+    layout: c,
+    afterRegenerate: () => {
+      setTimeout(() => {
+        G({ currentNode: e, documentModifier: o });
+      }, 0), n == null || n();
+    }
+  });
+}
+function ne(t, e) {
+  return t.length === e ? t : t.length > e ? t.slice(0, e) : [...t, ...T(e - t.length)];
+}
+function x() {
+  const t = b(), { currencySettings: e } = t.recommendationConfigs, o = parseInt(e.decimalCount);
+  return {
+    code: e.value,
+    symbol: e.symbol,
+    alignment: e.alignment === "0" ? "before" : "after",
+    decimalCount: Number.isNaN(o) ? 2 : o,
+    decimalSeparator: e.decimalSeparator,
+    thousandSeparator: e.thousandSeparator
+  };
+}
+function E(t, e = "price") {
+  const o = x(), n = t[e], i = (n == null ? void 0 : n[o.code]) ?? Object.values(n ?? {})[0] ?? 0;
+  return H({
+    price: i,
+    currency: o
+  });
+}
+function W(t) {
+  var c, r;
+  const e = x(), o = ((c = t.original_price) == null ? void 0 : c[e.code]) ?? Object.values(t.original_price ?? {})[0] ?? 0, n = ((r = t.price) == null ? void 0 : r[e.code]) ?? Object.values(t.price ?? {})[0] ?? 0, i = o > 0 ? Math.round((o - n) / o * 100) : 0;
+  return i > 0 ? `-${i}%` : "0%";
+}
+function D(t) {
+  const { documentModifier: e, product: o, priceEl: n, oldPriceEl: i, omnibusPriceEl: c, omnibusDiscountEl: r } = t;
+  let s = !1;
+  if (n && "querySelector" in n) {
+    const u = n.querySelector("strong"), l = E(o, "price");
+    S(e, u, l) && (s = !0);
+  }
+  if (i && "querySelector" in i) {
+    const u = i.querySelector("strong"), l = E(o, "original_price");
+    S(e, u, l) && (s = !0);
+  }
+  if (c && "querySelector" in c) {
+    const u = c.querySelector(".omnibus-price-value"), l = E(o, "original_price");
+    S(e, u, l) && (s = !0);
+  }
+  if (r && "querySelector" in r) {
+    const u = r.querySelector(".omnibus-discount-value"), l = W(o);
+    S(e, u, l) && (s = !0);
+  }
+  return s;
+}
+function Y(t) {
+  const {
+    documentModifier: e,
+    product: o,
+    imageEl: n,
+    nameEl: i,
+    priceEl: c,
+    oldPriceEl: r,
+    omnibusPriceEl: s,
+    omnibusDiscountEl: u,
+    buttonEl: l
+  } = t;
+  let f = !1;
+  if (n && "querySelector" in n) {
+    const a = n.querySelector("img");
+    a && (e.modifyHtml(a).setAttribute("src", v(o.image_url)).setAttribute("alt", o.name), f = !0);
+    const d = n.querySelector("a");
+    d && (e.modifyHtml(d).setAttribute("href", o.url), f = !0);
+  }
+  if (i && "querySelector" in i) {
+    const a = i.querySelector("strong");
+    S(e, a, o.name) && (f = !0);
+  }
+  if (D({
+    documentModifier: e,
+    product: o,
+    priceEl: c,
+    oldPriceEl: r,
+    omnibusPriceEl: s,
+    omnibusDiscountEl: u
+  }) && (f = !0), l && "querySelector" in l) {
+    const a = l.querySelector("a.es-button") || l.querySelector("a");
+    a && (e.modifyHtml(a).setAttribute("href", o.url), f = !0);
+  }
+  return f;
+}
+function L(t) {
+  return "querySelector" in t ? t.querySelector(C) ?? t : t;
+}
+function I(t, e, o) {
+  if (!("querySelectorAll" in t))
+    return !1;
+  const n = t.querySelectorAll(
+    `[esd-extension-block-id="${m.IMAGE}"]`
+  ), i = t.querySelectorAll(
+    `[esd-extension-block-id="${m.NAME}"]`
+  ), c = t.querySelectorAll(
+    `[esd-extension-block-id="${m.PRICE}"]`
+  ), r = t.querySelectorAll(
+    `[esd-extension-block-id="${m.OLD_PRICE}"]`
+  ), s = t.querySelectorAll(
+    `[esd-extension-block-id="${m.OMNIBUS_PRICE}"]`
+  ), u = t.querySelectorAll(
+    `[esd-extension-block-id="${m.OMNIBUS_DISCOUNT}"]`
+  ), l = t.querySelectorAll(
+    `[esd-extension-block-id="${m.BUTTON}"]`
+  ), f = Math.min(n.length, o.length);
+  let a = !1;
+  for (let d = 0; d < f; d++) {
+    const U = Y({
+      documentModifier: e,
+      product: o[d],
+      imageEl: n[d] ?? null,
+      nameEl: i[d] ?? null,
+      priceEl: c[d] ?? null,
+      oldPriceEl: r[d] ?? null,
+      omnibusPriceEl: s[d] ?? null,
+      omnibusDiscountEl: u[d] ?? null,
+      buttonEl: l[d] ?? null
+    });
+    a = a || U;
+  }
+  return a;
+}
+function re(t) {
+  const { currentNode: e, documentModifier: o, products: n } = t;
+  if (!e || !("querySelectorAll" in e))
+    return !1;
+  const i = L(e);
+  if (!("querySelectorAll" in i) || i.querySelectorAll(
+    `[esd-extension-block-id="${m.IMAGE}"]`
+  ).length !== n.length)
+    return !1;
+  let r = I(i, o, n);
+  if ("querySelector" in e) {
+    const s = e.querySelector(g);
+    if (s) {
+      const u = I(
+        s,
+        o,
+        n
+      );
+      r = r || u;
+    }
+  }
+  return r && o.apply(new y("Updated product content in-place")), !0;
+}
+function O(t, e, o) {
+  if (!("querySelectorAll" in t))
+    return !1;
+  const n = t.querySelectorAll(
+    `[esd-extension-block-id="${m.PRICE}"]`
+  ), i = t.querySelectorAll(
+    `[esd-extension-block-id="${m.OLD_PRICE}"]`
+  ), c = t.querySelectorAll(
+    `[esd-extension-block-id="${m.OMNIBUS_PRICE}"]`
+  ), r = t.querySelectorAll(
+    `[esd-extension-block-id="${m.OMNIBUS_DISCOUNT}"]`
+  ), s = Math.min(n.length, o.length);
+  let u = !1;
+  for (let l = 0; l < s; l++)
+    D({
+      documentModifier: e,
+      product: o[l],
+      priceEl: n[l] ?? null,
+      oldPriceEl: i[l] ?? null,
+      omnibusPriceEl: c[l] ?? null,
+      omnibusDiscountEl: r[l] ?? null
+    }) && (u = !0);
+  return u;
+}
+function ie(t) {
+  const { currentNode: e, documentModifier: o } = t;
+  if (!e || !("querySelectorAll" in e))
+    return !1;
+  const i = b().recommendationProducts;
+  if (i.length === 0)
+    return !1;
+  const c = L(e);
+  let r = O(c, o, i);
+  if ("querySelector" in e) {
+    const s = e.querySelector(g);
+    if (s) {
+      const u = O(s, o, i);
+      r = r || u;
+    }
+  }
+  return r && o.apply(new y("Updated price formatting in-place")), r;
+}
+function ce(t) {
+  const { currentNode: e, documentModifier: o, currency: n } = t, i = A(e);
+  if (!i)
+    return;
+  const c = n.alignment === "before" ? "0" : "1", r = (s, u) => {
+    o.modifyHtml(i).setAttribute(s, u);
+  };
+  r(p.CURRENCY, n.code), r(p.SYMBOL, n.symbol), r(p.ALIGNMENT, c), r(p.THOUSAND_SEPARATOR, n.thousandSeparator), r(p.DECIMAL_SEPARATOR, n.decimalSeparator), r(p.DECIMAL_COUNT, n.decimalCount.toString()), o.apply(new y("Update currency attributes"));
+}
+export {
+  ne as adjustProductsToSize,
+  E as formatProductPrice,
+  A as getBlockElement,
+  w as getCardComposition,
+  P as getCurrentLayout,
+  G as reapplySpacing,
+  j as regenerateMobileProductRows,
+  V as regenerateProductRows,
+  oe as regenerateProductRowsWithStyles,
+  ce as setCurrencyAttributes,
+  ie as updatePricesInPlace,
+  re as updateProductContentInPlace,
+  Y as updateSingleProductContent
+};

package/dist/extensions/Blocks/Recommendation/controls/mobileLayout/cssRules.js

@@ -0,0 +1,21 @@
+import { ModificationDescription as r } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+const i = "ins-recommendation-desktop-container", s = "ins-recommendation-mobile-container", l = `.${s} { display: none; }`, u = `@media only screen and (max-width: 480px) { .${i} { display: none !important; } .${s} { display: table !important; } }`, c = `.${s}`;
+function a(o, e) {
+  return !!o.querySelector(e);
+}
+function d(o) {
+  return o.querySelectorAll(`*${i}`).length > 0;
+}
+function p(o) {
+  const e = o.getDocumentRootCssNode();
+  if (!e)
+    return;
+  const n = o.getDocumentModifier();
+  let t = !1;
+  a(e, c) || (n.modifyCss(e).appendRule(l), t = !0), d(e) || (n.modifyCss(e).appendRule(u), t = !0), t && n.apply(new r("Add mobile layout CSS rules"));
+}
+export {
+  i as CSS_CLASS_DESKTOP_CONTAINER,
+  s as CSS_CLASS_MOBILE_CONTAINER,
+  p as ensureMobileCssRulesExist
+};

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 a, createTextAlignControl as i } from "../../../controlFactories.js";
+import { RecommendationBlockId as o } from "../../constants/blockIds.js";
+import { RecommendationControlId as t } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as r } from "../../constants/selectors.js";
+import { NameTextTrimControl as m } from "./textTrim.js";
+const A = i(
+  t.NAME_ALIGN,
+  o.NAME,
+  r
+), N = a(
+  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
+), p = {
+  align: A,
+  color: N,
+  size: E,
+  style: M,
+  fontFamily: s,
+  background: d,
+  paddings: T,
+  textTrim: m
+};
+export {
+  p as NameControls
+};