@useinsider/guido 3.23.0-beta.86bed27 → 3.23.0-beta.9f6bfbf

package/dist/extensions/Blocks/Items/block.js

@@ -1,33 +1,42 @@
 var k = Object.defineProperty;
-var S = (d, l, t) => l in d ? k(d, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[l] = t;
-var g = (d, l, t) => S(d, typeof l != "symbol" ? l + "" : l, t);
-import { BlockId as D } from "../../../enums/block.js";
-import { useOnboardingStore as T } from "../../../stores/onboarding.js";
-import { getMigrationBannerHtml as N } from "../../../utils/migrationBannerHtml.js";
-import { Block as H, BlockCompositionType as R, ModificationDescription as u } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { PRODUCT_WRAPPER_SELECTOR as M, isZeroWidthValue as m } from "./constants/cardWidth.js";
-import { currencyAttrTargets as w, ITEMS_CURRENCY_ATTR as y } from "./constants/currency.js";
-import { ItemsBlockId as E } from "./enums/controlEnums.js";
-import { SETTINGS_ENUMS as b, DefaultConfigValues as p } from "./enums/settingsEnums.js";
-import { getDefaultTemplate as O } from "./template.js";
-import { getItemsBlockContainer as _, getItemsBlockConfig as C, deriveItemNumber as B, generateBlockInstanceId as P, getDefaultItemsBlockConfig as v } from "./utils/nodeConfigUtils.js";
-const A = D.Items, V = "Reconcile Items currency DOM attributes";
-class $ extends H {
+var E = (h, d, t) => d in h ? k(h, d, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[d] = t;
+var C = (h, d, t) => E(h, typeof d != "symbol" ? d + "" : d, t);
+import { useConfig as P } from "../../../composables/useConfig.js";
+import { BlockId as H } from "../../../enums/block.js";
+import { useOnboardingStore as N } from "../../../stores/onboarding.js";
+import { getMigrationBannerHtml as R } from "../../../utils/migrationBannerHtml.js";
+import { Block as M, BlockCompositionType as O, ModificationDescription as p } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { PRODUCT_WRAPPER_SELECTOR as w, isZeroWidthValue as g } from "./constants/cardWidth.js";
+import { DEFAULT_ITEMS_PRICE_FORMAT as I, isNewPriceFormatRoot as v, currencyAttrTargets as B, ITEMS_CURRENCY_ATTR as y } from "./constants/currency.js";
+import { ItemsBlockId as A } from "./enums/controlEnums.js";
+import { SETTINGS_ENUMS as S, DefaultConfigValues as b } from "./enums/settingsEnums.js";
+import { getDefaultTemplate as F } from "./template.js";
+import { getItemsBlockContainer as T, getItemsBlockConfig as _, deriveItemNumber as L, generateBlockInstanceId as x, getDefaultItemsBlockConfig as V } from "./utils/nodeConfigUtils.js";
+import { buildPriceFormatSnapshot as W, planPriceFormatOps as z, samePriceText as U, replacePriceText as Y, paragraphKindOf as j } from "./utils/priceFormatOps.js";
+const D = H.Items, q = "Reconcile Items currency DOM attributes";
+function K() {
+  return {
+    priceThousandSeparator: I.thousandSeparator,
+    priceDecimalSeparator: I.decimalSeparator,
+    priceDecimalCount: I.decimalCount
+  };
+}
+class at extends M {
   constructor() {
     super(...arguments);
     /** Block instances whose currency attrs were already self-healed this session (SD-147588 — undo-safe). */
-    g(this, "_currencyHealed", /* @__PURE__ */ new Set());
+    C(this, "_currencyHealed", /* @__PURE__ */ new Set());
     /** blockInstanceIds already claimed by a live block this session (SD-147588 collision detection). */
-    g(this, "_seenInstanceIds", /* @__PURE__ */ new Set());
+    C(this, "_seenInstanceIds", /* @__PURE__ */ new Set());
   }
   getId() {
-    return A;
+    return D;
   }
   getIcon() {
     return "items-icon";
   }
   getBlockCompositionType() {
-    return R.CONTAINER;
+    return O.CONTAINER;
   }
   getName() {
     return this.api.translate("Items");
@@ -36,20 +45,21 @@ class $ extends H {
     return this.api.translate("Items lets you display personalized products based on user behavior.");
   }
   getSettingsPanelTitleHtml() {
-    return N(
-      A,
+    return R(
+      D,
       this.api.translate("Items"),
       this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Items block and test your message to ensure it works properly.")
     );
   }
   getTemplate() {
-    return O({
-      orientation: b.ORIENTATION.VERTICAL,
-      itemsType: b.ITEMS_TYPE.CART_ITEMS,
+    return F({
+      orientation: S.ORIENTATION.VERTICAL,
+      itemsType: S.ITEMS_TYPE.CART_ITEMS,
       itemId: "{{Abandoned Cart Item (1) Url}}",
-      currencySymbol: p.productPriceCurrencySymbolControlValue,
-      currencyLocation: p.productPriceCurrencyLocationControlValue,
-      formattedPrice: p.productPriceFormattedControlValue === "1"
+      currencySymbol: b.productPriceCurrencySymbolControlValue,
+      currencyLocation: b.productPriceCurrencyLocationControlValue,
+      formattedPrice: b.productPriceFormattedControlValue === "1",
+      priceFormat: this._isPriceFormattingEnabled() ? I : void 0
     });
   }
   allowInnerBlocksDND() {
@@ -59,26 +69,29 @@ class $ extends H {
     return !0;
   }
   onCreated(t) {
-    const e = this.api.getDocumentModifier(), c = this.api.getDocumentRootCssNode();
-    c.querySelector('[product-attr="imageSrc"] img') || e.modifyCss(c).appendRule('[product-attr="imageSrc"] img {object-fit: contain;}');
-    const r = _(t);
-    if (!r)
+    const e = this.api.getDocumentModifier(), s = this.api.getDocumentRootCssNode();
+    s.querySelector('[product-attr="imageSrc"] img') || e.modifyCss(s).appendRule('[product-attr="imageSrc"] img {object-fit: contain;}');
+    const o = T(t);
+    if (!o)
       return;
-    const o = r.getNodeConfig(), n = o && Object.keys(o).length > 0, i = C(t);
-    if (i != null && i.initialized) {
-      if (!n) {
-        const a = this.api.getDocumentModifier();
-        a.modifyHtml(r).setNodeConfig(i), this._stampProductTdDomAttributes(r, i, a), this._healCollapsedWidths(r, a), this._shouldReconcileCurrency(i) && this._reconcileCurrencyDomAttributes(r, i, a), a.apply(new u("Migrate legacy config to nodeConfig")), this._markCurrencyHealed(i.blockInstanceId);
+    const i = o.getNodeConfig(), c = i && Object.keys(i).length > 0, r = _(t);
+    if (r != null && r.initialized) {
+      if (!c) {
+        const l = this.api.getDocumentModifier();
+        l.modifyHtml(o).setNodeConfig(r), this._stampProductTdDomAttributes(o, r, l), this._healCollapsedWidths(o, l), this._shouldReconcileCurrency(r) && this._reconcileCurrencyDomAttributes(o, r, l), l.apply(new p("Migrate legacy config to nodeConfig")), this._markCurrencyHealed(r.blockInstanceId);
         return;
       }
     } else {
-      const a = v(), I = this.api.getDocumentModifier();
-      I.modifyHtml(r).setNodeConfig(a), this._stampProductTdDomAttributes(r, a, I, !0), I.apply(new u("Initialize Items block with default configuration")), T().startOnboarding("itemsOnboarding");
+      const l = {
+        ...V(),
+        ...this._isPriceFormattingEnabled() ? K() : {}
+      }, f = this.api.getDocumentModifier();
+      f.modifyHtml(o).setNodeConfig(l), this._stampProductTdDomAttributes(o, l, f, !0), f.apply(new p("Initialize Items block with default configuration")), N().startOnboarding("itemsOnboarding");
       return;
     }
-    const s = this._resolveInstanceId(i.blockInstanceId), f = this.api.getDocumentModifier();
-    let h = !1;
-    s !== i.blockInstanceId && (f.modifyHtml(r).setNodeConfig({ ...i, blockInstanceId: s }), h = !0), !this._currencyHealed.has(s) && this._reconcileCurrencyDomAttributes(r, i, f) && (h = !0), this._healCollapsedWidths(r, f) && (h = !0), h && f.apply(new u("Assign Items block instance ID and reconcile currency")), this._markCurrencyHealed(s);
+    const n = this._resolveInstanceId(r.blockInstanceId), a = { ...r, blockInstanceId: n }, u = this.api.getDocumentModifier();
+    let m = !1;
+    n !== r.blockInstanceId && (u.modifyHtml(o).setNodeConfig(a), m = !0), !this._currencyHealed.has(n) && this._reconcileCurrencyDomAttributes(o, a, u) && (m = !0), this._healCollapsedWidths(o, u) && (m = !0), m && u.apply(new p("Assign Items block instance ID and reconcile currency")), this._markCurrencyHealed(n);
   }
   /**
    * Re-seeds nodeConfig from the persisted esd-ext-config when a saved module
@@ -87,23 +100,23 @@ class $ extends H {
    * Guarded to the nodeConfig-empty case so it runs once and never loops.
    */
   onDocumentChanged(t) {
-    const e = _(t);
+    const e = T(t);
     if (!e)
       return;
-    const c = e.getNodeConfig();
-    if (c && Object.keys(c).length > 0) {
-      const i = C(t);
-      if (i != null && i.initialized && this._shouldReconcileCurrency(i)) {
-        const s = this.api.getDocumentModifier();
-        this._reconcileCurrencyDomAttributes(e, i, s) && s.apply(new u(V)), this._markCurrencyHealed(i.blockInstanceId);
+    const s = e.getNodeConfig();
+    if (s && Object.keys(s).length > 0) {
+      const r = _(t);
+      if (r != null && r.initialized && this._shouldReconcileCurrency(r)) {
+        const n = this.api.getDocumentModifier();
+        this._reconcileCurrencyDomAttributes(e, r, n) && n.apply(new p(q)), this._markCurrencyHealed(r.blockInstanceId);
       }
       return;
     }
-    const o = C(t);
-    if (!(o != null && o.initialized))
+    const i = _(t);
+    if (!(i != null && i.initialized))
       return;
-    const n = this.api.getDocumentModifier();
-    n.modifyHtml(e).setNodeConfig(o), this._stampProductTdDomAttributes(e, o, n), this._healCollapsedWidths(e, n), this._shouldReconcileCurrency(o) && this._reconcileCurrencyDomAttributes(e, o, n), n.apply(new u("Recover Items block config from saved module")), this._markCurrencyHealed(o.blockInstanceId);
+    const c = this.api.getDocumentModifier();
+    c.modifyHtml(e).setNodeConfig(i), this._stampProductTdDomAttributes(e, i, c), this._healCollapsedWidths(e, c), this._shouldReconcileCurrency(i) && this._reconcileCurrencyDomAttributes(e, i, c), c.apply(new p("Recover Items block config from saved module")), this._markCurrencyHealed(i.blockInstanceId);
   }
   /**
    * Bakes the compiler-read DOM attributes (`data-type`, `data-number`, `data-nodup`) onto the
@@ -113,21 +126,21 @@ class $ extends H {
    * restored before export. The name `<a>` carries no data-type/data-number of its own and
    * relies on this td-level fallback in pairProductVariables.
    */
-  _stampProductTdDomAttributes(t, e, c, r = !1) {
-    const o = B(e.itemsSelectValue, e.type), n = (i, s) => {
-      r && t.getAttribute(i) || c.modifyHtml(t).setAttribute(i, s);
+  _stampProductTdDomAttributes(t, e, s, o = !1) {
+    const i = L(e.itemsSelectValue, e.type), c = (r, n) => {
+      o && t.getAttribute(r) || s.modifyHtml(t).setAttribute(r, n);
     };
-    n("data-type", e.type), n("data-number", o), n("data-nodup", String(e.priceHideDiscount));
+    c("data-type", e.type), c("data-number", i), c("data-nodup", String(e.priceHideDiscount));
   }
   /**
    * Repairs a saved module's collapsed card into the state the load migrator produces. Acts only
    * on a zero width, so Stripo's non-zero drop-time width never triggers it and a healed block no-ops.
    */
   _healCollapsedWidths(t, e) {
-    const r = t.querySelectorAll(M).filter((o) => m(o.getAttribute("width")) || m(o.getStyle("width")));
-    return !m(t.getAttribute("width")) && !r.length ? !1 : (t.hasClass("esd-container-frame") && e.modifyHtml(t).removeClass("esd-container-frame"), t.getAttribute("width") !== null && e.modifyHtml(t).removeAttribute("width"), r.forEach((o) => {
-      const n = o.getAttribute("width");
-      (n === null || m(n)) && e.modifyHtml(o).setAttribute("width", "100%"), m(o.getStyle("width")) && e.modifyHtml(o).setStyle("width", "100%");
+    const o = t.querySelectorAll(w).filter((i) => g(i.getAttribute("width")) || g(i.getStyle("width")));
+    return !g(t.getAttribute("width")) && !o.length ? !1 : (t.hasClass("esd-container-frame") && e.modifyHtml(t).removeClass("esd-container-frame"), t.getAttribute("width") !== null && e.modifyHtml(t).removeAttribute("width"), o.forEach((i) => {
+      const c = i.getAttribute("width");
+      (c === null || g(c)) && e.modifyHtml(i).setAttribute("width", "100%"), g(i.getStyle("width")) && e.modifyHtml(i).setStyle("width", "100%");
     }), !0);
   }
   /**
@@ -156,30 +169,55 @@ class $ extends H {
     let e = t;
     if (!e || this._seenInstanceIds.has(e))
       do
-        e = P();
+        e = x();
       while (this._seenInstanceIds.has(e));
     return this._seenInstanceIds.add(e), e;
   }
   /**
-   * Stamps the export-read currency attrs onto every price `<p>` from config, so a template whose
-   * attrs drifted (e.g. a location toggle before the sync fix) self-heals to match the editor.
-   * Config is the source of truth — never derive from visible text.
-   *
-   * Authority split lives in `currencyAttrTargets` (SD-147588) — position only when a location
-   * is recorded, symbol only when customized — so this heal and the module-drop repair can't drift.
-   *
-   * Returns true only when an attr actually changed, so the caller can skip an empty apply that
-   * would otherwise re-trigger onDocumentChanged and loop.
+   * Single self-heal slot: the flag only decides whether a legacy root is converted; a root
+   * already in the new format is reconciled from config regardless. Returns whether anything was queued.
    */
-  _reconcileCurrencyDomAttributes(t, e, c) {
-    const { position: r, symbol: o } = w(e), n = t.querySelectorAll(`.${E.PRICE} p`);
-    let i = !1;
-    return n.forEach((s) => {
-      r !== void 0 && s.getAttribute(y.POSITION) !== r && (c.modifyHtml(s).setAttribute(y.POSITION, r), i = !0), o !== void 0 && s.getAttribute(y.SYMBOL) !== o && (c.modifyHtml(s).setAttribute(y.SYMBOL, o), i = !0);
-    }), i;
+  _reconcileCurrencyDomAttributes(t, e, s) {
+    const o = this._isPriceFormattingEnabled();
+    if (!o && !v(t))
+      return this._reconcileLegacyCurrencyAttributes(t, e, s);
+    const i = this._priceParagraphs(t), c = W({
+      rootAttr: (n) => t.getAttribute(n),
+      config: e,
+      paragraphs: i.map(({ kind: n, node: a }) => ({
+        kind: n,
+        attr: (u) => a.getAttribute(u),
+        text: a.getInnerText()
+      }))
+    }), r = z(c, { convertLegacy: o });
+    return r.changed ? (Object.entries(r.rootSet).forEach(([n, a]) => {
+      s.modifyHtml(t).setAttribute(n, a);
+    }), i.forEach(({ kind: n, node: a }) => {
+      var l;
+      r.paragraphRemove.filter((f) => a.getAttribute(f) !== null).forEach((f) => s.modifyHtml(a).removeAttribute(f));
+      const u = (l = r.texts) == null ? void 0 : l[n], m = a.getInnerText();
+      u !== void 0 && !U(m, u) && s.modifyHtml(a).setInnerHtml(Y(a.getInnerHTML(), m, u));
+    }), r.configPatch && s.modifyHtml(t).setNodeConfig({ ...e, ...r.configPatch }), !0) : !1;
+  }
+  /** Legacy `<p>` contract via `currencyAttrTargets`: position when recorded, symbol only when custom. */
+  _reconcileLegacyCurrencyAttributes(t, e, s) {
+    const { position: o, symbol: i } = B(e), c = t.querySelectorAll(`.${A.PRICE} p`);
+    let r = !1;
+    return c.forEach((n) => {
+      o !== void 0 && n.getAttribute(y.POSITION) !== o && (s.modifyHtml(n).setAttribute(y.POSITION, o), r = !0), i !== void 0 && n.getAttribute(y.SYMBOL) !== i && (s.modifyHtml(n).setAttribute(y.SYMBOL, i), r = !0);
+    }), r;
+  }
+  _priceParagraphs(t) {
+    return t.querySelectorAll(`.${A.PRICE} p`).flatMap((s) => {
+      const o = j(s.getAttribute("product-attr"));
+      return o ? [{ kind: o, node: s }] : [];
+    });
+  }
+  _isPriceFormattingEnabled() {
+    return P().isFeatureEnabled("itemsPriceFormatting");
   }
 }
 export {
-  A as BLOCK_ID,
-  $ as ItemsBlock
+  D as BLOCK_ID,
+  at as ItemsBlock
 };

package/dist/extensions/Blocks/Items/constants/currency.js

@@ -1,25 +1,70 @@
 import { DefaultConfigValues as c } from "../enums/settingsEnums.js";
-const s = {
+const n = {
   POSITION: "data-curency",
   SYMBOL: "data-currency_symbol"
 };
-function e(r) {
-  return r === "1" ? "after" : "before";
+function u(t) {
+  return t === "1" ? "after" : "before";
 }
-function i(r) {
-  const o = (r ?? "").trim();
-  return o !== "" && o !== c.productPriceCurrencySymbolControlValue;
+function i(t) {
+  const r = (t ?? "").trim();
+  return r !== "" && r !== c.productPriceCurrencySymbolControlValue;
 }
-function a(r) {
-  const o = r.priceCurrencyLocation, n = typeof o == "string" && o.trim() !== "", t = (r.priceCurrencySymbol ?? "").trim();
+function p(t) {
+  const r = t.priceCurrencyLocation, e = typeof r == "string" && r.trim() !== "", a = (t.priceCurrencySymbol ?? "").trim();
   return {
-    position: n ? e(o) : void 0,
-    symbol: i(t) ? t : void 0
+    position: e ? u(r) : void 0,
+    symbol: i(a) ? a : void 0
   };
 }
+const s = {
+  SYMBOL: "currency-symbol",
+  ALIGNMENT: "currency-alignment",
+  THOUSAND_SEPARATOR: "currency-thousand-separator",
+  DECIMAL_SEPARATOR: "currency-decimal-separator",
+  DECIMAL_COUNT: "currency-decimal-count",
+  SINGLE_PRICE: "data-single_price"
+}, C = [
+  "data-formated",
+  "data-single_price",
+  n.POSITION,
+  n.SYMBOL
+], o = {
+  thousandSeparator: ",",
+  decimalSeparator: ".",
+  decimalCount: 2
+};
+function m(t) {
+  const r = typeof t == "string" ? parseInt(t) : t;
+  return typeof r == "number" && Number.isFinite(r) && r >= 0 ? Math.trunc(r) : o.decimalCount;
+}
+function d(t) {
+  const r = t == null ? void 0 : t.priceThousandSeparator, e = t == null ? void 0 : t.priceDecimalSeparator;
+  return {
+    thousandSeparator: typeof r == "string" && r !== "" ? r : o.thousandSeparator,
+    decimalSeparator: typeof e == "string" && e !== "" ? e : o.decimalSeparator,
+    decimalCount: (t == null ? void 0 : t.priceDecimalCount) === void 0 ? o.decimalCount : m(t.priceDecimalCount)
+  };
+}
+function y(t) {
+  return typeof (t == null ? void 0 : t.priceDecimalCount) == "number";
+}
+function S(t) {
+  if (!t || typeof t.getAttribute != "function")
+    return !1;
+  const r = t.getAttribute(s.DECIMAL_COUNT);
+  return r != null;
+}
 export {
-  s as ITEMS_CURRENCY_ATTR,
-  a as currencyAttrTargets,
-  e as currencyPositionFromLocation,
-  i as isCustomCurrencySymbol
+  o as DEFAULT_ITEMS_PRICE_FORMAT,
+  n as ITEMS_CURRENCY_ATTR,
+  s as ITEMS_PRICE_FORMAT_ATTR,
+  C as LEGACY_PRICE_PARAGRAPH_ATTRS,
+  p as currencyAttrTargets,
+  u as currencyPositionFromLocation,
+  i as isCustomCurrencySymbol,
+  y as isNewPriceFormatConfig,
+  S as isNewPriceFormatRoot,
+  m as normalizeDecimalCount,
+  d as priceFormatFromConfig
 };

package/dist/extensions/Blocks/Items/controls/button/link.js

@@ -1,31 +1,28 @@
-import { CommonControl as r } from "../../../common-control.js";
-import { ItemsBlockControlId as i } from "../../enums/controlEnums.js";
-import { getItemsBlockConfig as o } from "../../utils/nodeConfigUtils.js";
-const s = i.BUTTON_LINK, n = {
+import { CommonControl as s } from "../../../common-control.js";
+import { ItemsBlockControlId as r } from "../../enums/controlEnums.js";
+import { getItemsBlockConfig as a } from "../../utils/nodeConfigUtils.js";
+const e = r.BUTTON_LINK, n = {
   LINK: "link"
 };
-class m extends r {
+class L extends s {
   getId() {
-    return s;
+    return e;
   }
   getTemplate() {
     return `
-            <div class="container ${s}">
+            <div class="container ${e}">
                 ${this._getLink()}
             </div>
         `;
   }
   onRender() {
-    const t = o(this.currentNode);
-    this.api.updateValues({
-      [n.LINK]: (t == null ? void 0 : t.buttonLink) ?? ""
-    });
+    this.forgetLastPanelNode();
   }
-  onTemplateNodeUpdated(t) {
-    super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(() => {
-      const e = o(this.currentNode);
+  onTemplateNodeUpdated(o) {
+    super.onTemplateNodeUpdated(o), this.handleBlockInstanceChange(() => {
+      const t = a(this.currentNode);
       this.api.updateValues({
-        [n.LINK]: (e == null ? void 0 : e.buttonLink) ?? ""
+        [n.LINK]: (t == null ? void 0 : t.buttonLink) ?? ""
       });
     });
   }
@@ -44,6 +41,6 @@ class m extends r {
   }
 }
 export {
-  m as ButtonLinkControl,
-  s as CONTROL_BLOCK_ID
+  L as ButtonLinkControl,
+  e as CONTROL_BLOCK_ID
 };

package/dist/extensions/Blocks/Items/controls/cardComposition.js

@@ -1,12 +1,12 @@
 var I = Object.defineProperty;
 var U = (d, a, t) => a in d ? I(d, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[a] = t;
-var p = (d, a, t) => U(d, typeof a != "symbol" ? a + "" : a, t);
+var y = (d, a, t) => U(d, typeof a != "symbol" ? a + "" : a, t);
 import { ModificationDescription as c } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as b } from "../../common-control.js";
 import { ItemsBlockId as r } from "../enums/controlEnums.js";
 import { SETTINGS_ENUMS as h } from "../enums/settingsEnums.js";
 import { getItemsBlockConfig as R, setItemsBlockConfig as m } from "../utils/nodeConfigUtils.js";
-const g = "ui-elements-items-card-composition-block", i = {
+const N = "ui-elements-items-card-composition-block", i = {
   PRODUCT_IMAGE: "image",
   PRODUCT_NAME: "name",
   PRODUCT_QUANTITY: "quantity",
@@ -17,7 +17,7 @@ const g = "ui-elements-items-card-composition-block", i = {
 class M extends b {
   constructor() {
     super(...arguments);
-    p(this, "visibilityState", {
+    y(this, "visibilityState", {
       [i.PRODUCT_IMAGE]: !0,
       [i.PRODUCT_NAME]: !0,
       [i.PRODUCT_QUANTITY]: !0,
@@ -27,7 +27,7 @@ class M extends b {
     });
   }
   getId() {
-    return g;
+    return N;
   }
   getTemplate() {
     return `
@@ -44,7 +44,7 @@ class M extends b {
         `;
   }
   onRender() {
-    this._syncVisibilityFromAttributes(), this._handleBrowsedItemsQuantity(), this._initializeToggles(), this._listenToFormUpdates();
+    this.forgetLastPanelNode(), this._listenToFormUpdates();
   }
   onTemplateNodeUpdated(t) {
     super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(() => {
@@ -61,9 +61,6 @@ class M extends b {
             </div>
         `;
   }
-  _initializeToggles() {
-    this._updateTogglesFromState();
-  }
   _updateTogglesFromState() {
     this.api.updateValues({
       [i.PRODUCT_IMAGE]: this.visibilityState[i.PRODUCT_IMAGE],
@@ -224,21 +221,21 @@ class M extends b {
    *   - When both are visible, they share 50% each
    */
   _updatePriceCellWidthsForVerticalLayout(t) {
-    var O, y;
+    var O, p;
     const e = R(this.currentNode);
     if (!((e == null ? void 0 : e.orientation) === h.ORIENTATION.VERTICAL))
       return;
-    const n = (O = this.currentNode) == null ? void 0 : O.querySelectorAll(".product-price-class"), s = (y = this.currentNode) == null ? void 0 : y.querySelectorAll(".product-original-price-class"), l = (e == null ? void 0 : e.priceOrientation) === "vertical", P = this.visibilityState[i.PRODUCT_PRICE], C = this.visibilityState[i.PRODUCT_ORIGINAL_PRICE], T = t ?? this.api.getDocumentModifier();
+    const n = (O = this.currentNode) == null ? void 0 : O.querySelectorAll(".product-price-class"), s = (p = this.currentNode) == null ? void 0 : p.querySelectorAll(".product-original-price-class"), l = (e == null ? void 0 : e.priceOrientation) === "vertical", P = this.visibilityState[i.PRODUCT_PRICE], C = this.visibilityState[i.PRODUCT_ORIGINAL_PRICE], T = t ?? this.api.getDocumentModifier();
     if (n && n.length > 0) {
-      const _ = l || !C ? "100%" : "50%";
-      n.forEach((u) => {
-        T.modifyHtml(u).setStyle("width", _);
+      const u = l || !C ? "100%" : "50%";
+      n.forEach((_) => {
+        T.modifyHtml(_).setStyle("width", u);
       });
     }
     if (s && s.length > 0) {
-      const _ = l || !P ? "100%" : "50%";
-      s.forEach((u) => {
-        T.modifyHtml(u).setStyle("width", _);
+      const u = l || !P ? "100%" : "50%";
+      s.forEach((_) => {
+        T.modifyHtml(_).setStyle("width", u);
       });
     }
     t || T.apply(new c("Updated price cell widths for vertical layout"));
@@ -256,6 +253,6 @@ class M extends b {
   }
 }
 export {
-  g as COMPOSITION_CONTROL_BLOCK_ID,
+  N as COMPOSITION_CONTROL_BLOCK_ID,
   M as ItemsBlockCardCompositionControl
 };

package/dist/extensions/Blocks/Items/controls/image/link.js

@@ -1,31 +1,28 @@
-import { CommonControl as a } from "../../../common-control.js";
-import { ItemsBlockControlId as i } from "../../enums/controlEnums.js";
-import { getItemsBlockConfig as o } from "../../utils/nodeConfigUtils.js";
-const s = i.IMAGE_LINK, n = {
+import { CommonControl as s } from "../../../common-control.js";
+import { ItemsBlockControlId as r } from "../../enums/controlEnums.js";
+import { getItemsBlockConfig as a } from "../../utils/nodeConfigUtils.js";
+const t = r.IMAGE_LINK, n = {
   LINK: "link"
 };
-class p extends a {
+class L extends s {
   getId() {
-    return s;
+    return t;
   }
   getTemplate() {
     return `
-            <div class="container ${s}">
+            <div class="container ${t}">
                 ${this._getLink()}
             </div>
         `;
   }
   onRender() {
-    const e = o(this.currentNode);
-    this.api.updateValues({
-      [n.LINK]: (e == null ? void 0 : e.imageLink) ?? ""
-    });
+    this.forgetLastPanelNode();
   }
-  onTemplateNodeUpdated(e) {
-    super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(() => {
-      const t = o(this.currentNode);
+  onTemplateNodeUpdated(o) {
+    super.onTemplateNodeUpdated(o), this.handleBlockInstanceChange(() => {
+      const e = a(this.currentNode);
       this.api.updateValues({
-        [n.LINK]: (t == null ? void 0 : t.imageLink) ?? ""
+        [n.LINK]: (e == null ? void 0 : e.imageLink) ?? ""
       });
     });
   }
@@ -44,6 +41,6 @@ class p extends a {
   }
 }
 export {
-  s as CONTROL_BLOCK_ID,
-  p as ImageLinkControl
+  t as CONTROL_BLOCK_ID,
+  L as ImageLinkControl
 };

package/dist/extensions/Blocks/Items/controls/name/trimming.js

@@ -1,9 +1,9 @@
-import { ModificationDescription as d, UIElementType as s, UEAttr as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ModificationDescription as d, UIElementType as m, UEAttr as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as T } from "../../../common-control.js";
 import { nameMaxWidthFor as h } from "../../constants/cardLayout.js";
 import { ItemsBlockControlId as a } from "../../enums/controlEnums.js";
 import { findNameTextNode as c } from "../../utils/nameNode.js";
-import { getItemsBlockConfig as r, setItemsBlockConfig as g } from "../../utils/nodeConfigUtils.js";
+import { getItemsBlockConfig as s, setItemsBlockConfig as g } from "../../utils/nodeConfigUtils.js";
 const I = a.NAME_TRIMMING, n = {
   TRIMMING: "trimming"
 };
@@ -19,14 +19,13 @@ class E extends T {
         `;
   }
   onRender() {
-    const e = r(this.currentNode);
-    this.api.updateValues({ [n.TRIMMING]: (e == null ? void 0 : e.nameTrimming) ?? !0 }), this.api.onValueChanged(n.TRIMMING, (t) => {
-      this._onTrimmingChange(t);
+    this.forgetLastPanelNode(), this.api.onValueChanged(n.TRIMMING, (e) => {
+      this._onTrimmingChange(e);
     });
   }
   onTemplateNodeUpdated(e) {
     super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(() => {
-      const t = r(this.currentNode);
+      const t = s(this.currentNode);
       this.api.updateValues({ [n.TRIMMING]: (t == null ? void 0 : t.nameTrimming) ?? !0 });
     });
   }
@@ -37,16 +36,16 @@ class E extends T {
     const t = c(this.currentNode);
     if (!t)
       return;
-    const i = r(this.currentNode), m = e !== void 0 ? e : (i == null ? void 0 : i.nameTrimming) ?? !0, l = h(i == null ? void 0 : i.orientation), o = this.api.getDocumentModifier().modifyHtml(t);
-    m ? o.setStyle("white-space", "nowrap").setStyle("overflow", "hidden").setStyle("text-overflow", "ellipsis") : o.removeStyle("white-space").removeStyle("overflow").removeStyle("text-overflow"), o.setStyle("max-width", l).apply(new d(`Text Trimming ${m ? "Enabled" : "Disabled"}`));
+    const i = s(this.currentNode), r = e !== void 0 ? e : (i == null ? void 0 : i.nameTrimming) ?? !0, l = h(i == null ? void 0 : i.orientation), o = this.api.getDocumentModifier().modifyHtml(t);
+    r ? o.setStyle("white-space", "nowrap").setStyle("overflow", "hidden").setStyle("text-overflow", "ellipsis") : o.removeStyle("white-space").removeStyle("overflow").removeStyle("text-overflow"), o.setStyle("max-width", l).apply(new d(`Text Trimming ${r ? "Enabled" : "Disabled"}`));
   }
   _getTextTrimming() {
     return `
             <div class="display-flex align-items-center justify-content-between">
-                <${s.LABEL}
+                <${m.LABEL}
                     ${p.LABEL.text}="${this.api.translate("Text Trimming")}"
                 >
-                </${s.LABEL}>
+                </${m.LABEL}>
                 ${this._GuToggle(n.TRIMMING)}
             </div>
         `;