@useinsider/guido 3.22.0 → 3.23.0

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

@@ -1,20 +1,20 @@
 import { ModificationDescription as N, UEAttr as L } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as $ } from "../../common-control.js";
-import { reorientBlockCellPadding as D, nameMaxWidthFor as f } from "../constants/cardLayout.js";
-import { ItemsBlockId as I } from "../enums/controlEnums.js";
-import { productPairs as y, templateFirstLine as x } from "../enums/productEnums.js";
-import { SETTINGS_ENUMS as T, ItemTypeOptions as H, OrientationOptions as w, ItemInCartOptions as g, DefaultConfigValues as U } from "../enums/settingsEnums.js";
+import { CommonControl as F } from "../../common-control.js";
+import { reorientBlockCellPadding as D, nameMaxWidthFor as $ } from "../constants/cardLayout.js";
+import { ItemsBlockId as T } from "../enums/controlEnums.js";
+import { productPairs as S, templateFirstLine as x } from "../enums/productEnums.js";
+import { SETTINGS_ENUMS as I, ItemTypeOptions as H, OrientationOptions as w, ItemInCartOptions as O, DefaultConfigValues as U } from "../enums/settingsEnums.js";
 import q from "../layouts/horizontal.html.js";
-import V from "../layouts/vertical.html.js";
-import { getDefaultTemplate as B, wrapInTableRow as C, applyPriceOrientationStyles as G } from "../template.js";
+import B from "../layouts/vertical.html.js";
+import { getDefaultTemplate as V, wrapInTableRow as C, applyPriceOrientationStyles as G } from "../template.js";
 import { findNameTextNode as Y } from "../utils/nameNode.js";
-import { getItemsBlockConfig as _, setItemsBlockConfig as M, escapeReplacement as A, deriveItemNumber as v } from "../utils/nodeConfigUtils.js";
+import { getItemsBlockConfig as _, setItemsBlockConfig as b, escapeReplacement as g, deriveItemNumber as v } from "../utils/nodeConfigUtils.js";
 const Q = "ui-elements-items-block", p = {
   ITEMS_TYPE: "itemsType",
   ORIENTATION: "orientation",
   ITEM_IDS: "itemIds"
 };
-class se extends $ {
+class oe extends F {
   getId() {
     return Q;
   }
@@ -28,19 +28,14 @@ class se extends $ {
         `;
   }
   onRender() {
-    const e = _(this.currentNode);
-    this.api.updateValues({
-      [p.ORIENTATION]: (e == null ? void 0 : e.orientation) ?? T.ORIENTATION.VERTICAL,
-      [p.ITEMS_TYPE]: (e == null ? void 0 : e.type) ?? T.ITEMS_TYPE.CART_ITEMS,
-      [p.ITEM_IDS]: (e == null ? void 0 : e.itemsSelectValue) ?? ""
-    }), this._listenToFormUpdates();
+    this.forgetLastPanelNode(), this._listenToFormUpdates();
   }
   onTemplateNodeUpdated(e) {
     super.onTemplateNodeUpdated(e), console.debug("Items Block Config", e.getNodeConfig()), this.handleBlockInstanceChange(() => {
       const r = _(this.currentNode);
       this.api.updateValues({
-        [p.ORIENTATION]: (r == null ? void 0 : r.orientation) ?? T.ORIENTATION.VERTICAL,
-        [p.ITEMS_TYPE]: (r == null ? void 0 : r.type) ?? T.ITEMS_TYPE.CART_ITEMS,
+        [p.ORIENTATION]: (r == null ? void 0 : r.orientation) ?? I.ORIENTATION.VERTICAL,
+        [p.ITEMS_TYPE]: (r == null ? void 0 : r.type) ?? I.ITEMS_TYPE.CART_ITEMS,
         [p.ITEM_IDS]: (r == null ? void 0 : r.itemsSelectValue) ?? ""
       }), this._initializeSelectItems();
     });
@@ -85,7 +80,7 @@ class se extends $ {
   _onOrientationChange(e) {
     this.api.updateValues({ [p.ORIENTATION]: e });
     const r = this.api.getDocumentModifier();
-    M(this.currentNode, this.api, {
+    b(this.currentNode, this.api, {
       orientation: e,
       priceOrientation: "horizontal"
     }, r), r.apply(new N("Changed orientation")), this._reOrderTemplate(), setTimeout(() => {
@@ -93,15 +88,15 @@ class se extends $ {
     }, 50);
   }
   _onItemsTypeChange(e) {
-    const r = T.ITEMS_TYPE[e], t = g[e], i = t == null ? void 0 : t[0];
+    const r = I.ITEMS_TYPE[e], t = O[e], i = t == null ? void 0 : t[0];
     if (!r || !i)
       return;
-    const n = i.value, s = i.value.replace("Url}}", "Image}}"), a = this.api.getDocumentModifier();
-    M(this.currentNode, this.api, {
+    const n = i.value, o = i.value.replace("Url}}", "Image}}"), a = this.api.getDocumentModifier();
+    b(this.currentNode, this.api, {
       source: r,
       type: r,
       itemsSelectValue: i.value,
-      imageLink: s,
+      imageLink: o,
       buttonLink: n
     }, a), this._updateDataTypeAttributes(r, a), this._initializeSelectItems();
     const l = this._getTemplateData(r, i.value);
@@ -110,7 +105,7 @@ class se extends $ {
   _onItemIdsChange(e) {
     this.api.updateValues({ [p.ITEM_IDS]: e });
     const r = e, t = e.replace("Url}}", "Image}}"), i = this.api.getDocumentModifier();
-    M(this.currentNode, this.api, {
+    b(this.currentNode, this.api, {
       itemsSelectValue: e,
       imageLink: t,
       buttonLink: r
@@ -124,11 +119,11 @@ class se extends $ {
       L.SELECTPICKER.items,
       H
     );
-    const e = _(this.currentNode), r = (e == null ? void 0 : e.type) ?? T.ITEMS_TYPE.CART_ITEMS, t = (e == null ? void 0 : e.itemsSelectValue) ?? "";
+    const e = _(this.currentNode), r = (e == null ? void 0 : e.type) ?? I.ITEMS_TYPE.CART_ITEMS, t = (e == null ? void 0 : e.itemsSelectValue) ?? "";
     this.api.updateValues({
       [p.ITEMS_TYPE]: r
     });
-    const i = g[r];
+    const i = O[r];
     this.api.setUIEAttribute(
       p.ITEM_IDS,
       L.SELECTPICKER.items,
@@ -150,113 +145,113 @@ class se extends $ {
     );
   }
   _renderTemplate() {
-    const e = _(this.currentNode), r = (e == null ? void 0 : e.orientation) ?? T.ORIENTATION.VERTICAL, t = (e == null ? void 0 : e.type) ?? T.ITEMS_TYPE.CART_ITEMS, i = (e == null ? void 0 : e.itemsSelectValue) ?? "", n = (e == null ? void 0 : e.priceCurrencySymbol) ?? "", s = (e == null ? void 0 : e.priceCurrencyLocation) ?? "0", a = (e == null ? void 0 : e.priceFormatted) ?? !1;
-    this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(B({
+    const e = _(this.currentNode), r = (e == null ? void 0 : e.orientation) ?? I.ORIENTATION.VERTICAL, t = (e == null ? void 0 : e.type) ?? I.ITEMS_TYPE.CART_ITEMS, i = (e == null ? void 0 : e.itemsSelectValue) ?? "", n = (e == null ? void 0 : e.priceCurrencySymbol) ?? "", o = (e == null ? void 0 : e.priceCurrencyLocation) ?? "0", a = (e == null ? void 0 : e.priceFormatted) ?? !1;
+    this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(V({
       orientation: r,
       itemsType: t,
       itemId: i,
       currencySymbol: n,
-      currencyLocation: s,
+      currencyLocation: o,
       formattedPrice: a
     })).apply(new N("Updated template"));
   }
   _getTemplateData(e, r) {
-    const t = _(this.currentNode), i = e ?? (t == null ? void 0 : t.type) ?? T.ITEMS_TYPE.CART_ITEMS, n = r ?? (t == null ? void 0 : t.itemsSelectValue) ?? "", s = (t == null ? void 0 : t.priceFormatted) ?? !1, a = (t == null ? void 0 : t.priceSinglePrice) ?? !1, l = g[i].findIndex((h) => h.value === n), c = l > -1 ? l : 0, o = y.PAIRS_FOR_EXTENSION.price[i], d = y.PAIRS_FOR_EXTENSION.originalPrice[i];
+    const t = _(this.currentNode), i = e ?? (t == null ? void 0 : t.type) ?? I.ITEMS_TYPE.CART_ITEMS, n = r ?? (t == null ? void 0 : t.itemsSelectValue) ?? "", o = (t == null ? void 0 : t.priceFormatted) ?? !1, a = (t == null ? void 0 : t.priceSinglePrice) ?? !1, l = O[i].findIndex((h) => h.value === n), c = l > -1 ? l : 0, s = S.PAIRS_FOR_EXTENSION.price[i], d = S.PAIRS_FOR_EXTENSION.originalPrice[i];
     let m, u;
-    return a ? (m = s ? o.DEFAULT_SINGLE_PRICE_FORMATTED : o.DEFAULT_SINGLE_PRICE, u = s ? d.DEFAULT_SINGLE_PRICE_FORMATTED : d.DEFAULT_SINGLE_PRICE) : (m = s ? o.DEFAULT_PRICE_FORMATTED : o.DEFAULT_PRICE, u = s ? d.DEFAULT_PRICE_FORMATTED : d.DEFAULT_PRICE), {
-      imageSrc: y.PAIRS_FOR_EXTENSION.imageSrc[i].DEFAULT[c],
-      name: y.PAIRS_FOR_EXTENSION.name[i].DEFAULT[c],
+    return a ? (m = o ? s.DEFAULT_SINGLE_PRICE_FORMATTED : s.DEFAULT_SINGLE_PRICE, u = o ? d.DEFAULT_SINGLE_PRICE_FORMATTED : d.DEFAULT_SINGLE_PRICE) : (m = o ? s.DEFAULT_PRICE_FORMATTED : s.DEFAULT_PRICE, u = o ? d.DEFAULT_PRICE_FORMATTED : d.DEFAULT_PRICE), {
+      imageSrc: S.PAIRS_FOR_EXTENSION.imageSrc[i].DEFAULT[c],
+      name: S.PAIRS_FOR_EXTENSION.name[i].DEFAULT[c],
       price: m,
       originalPrice: u,
-      quantity: y.PAIRS_FOR_EXTENSION.quantity[i].DEFAULT,
-      button: y.PAIRS_FOR_EXTENSION.button[i].DEFAULT_LABEL
+      quantity: S.PAIRS_FOR_EXTENSION.quantity[i].DEFAULT,
+      button: S.PAIRS_FOR_EXTENSION.button[i].DEFAULT_LABEL
     };
   }
   _updateImageSrc(e, r) {
     var i;
-    const t = (i = this.currentNode) == null ? void 0 : i.querySelector(`[esd-extension-block-id="${I.IMAGE}"] img`);
+    const t = (i = this.currentNode) == null ? void 0 : i.querySelector(`[esd-extension-block-id="${T.IMAGE}"] img`);
     t && r.modifyHtml(t).setAttribute("src", e);
   }
   _updateName(e, r) {
-    var s;
-    const t = (s = this.currentNode) == null ? void 0 : s.querySelector(`[esd-extension-block-id="${I.NAME}"]`);
+    var o;
+    const t = (o = this.currentNode) == null ? void 0 : o.querySelector(`[esd-extension-block-id="${T.NAME}"]`);
     if (!t)
       return;
     const i = t.getInnerText().trim();
     let n = t.getInnerHTML().trim();
-    n = n.replace(i, A(e)), r.modifyHtml(t).setInnerHtml(n);
+    n = n.replace(i, g(e)), r.modifyHtml(t).setInnerHtml(n);
   }
   _updatePrice(e, r) {
     var a;
     const t = ((a = this.currentNode) == null ? void 0 : a.querySelectorAll(
-      `[esd-extension-block-id="${I.PRICE}"]`
-    )) || [], i = _(this.currentNode), n = (i == null ? void 0 : i.priceCurrencySymbol) ?? "", s = (i == null ? void 0 : i.priceCurrencyLocation) ?? "0";
+      `[esd-extension-block-id="${T.PRICE}"]`
+    )) || [], i = _(this.currentNode), n = (i == null ? void 0 : i.priceCurrencySymbol) ?? "", o = (i == null ? void 0 : i.priceCurrencyLocation) ?? "0";
     t.forEach((l) => {
       const c = this._getParagraphFromBlock(l);
       if (!c)
         return;
-      const o = c.getInnerHTML().trim() || "", d = c.getInnerText().trim() || "", m = (n == null ? void 0 : n.trim()) || "", u = this._removeCurrencySymbol(d, m), h = this._replacePriceNumber(u, e), E = this._buildPriceContent(h, m, s), S = o.replace(d, A(E));
-      r.modifyHtml(c).setInnerHtml(S);
+      const s = c.getInnerHTML().trim() || "", d = c.getInnerText().trim() || "", m = (n == null ? void 0 : n.trim()) || "", u = this._removeCurrencySymbol(d, m), h = this._replacePriceNumber(u, e), E = this._buildPriceContent(h, m, o), y = s.replace(d, g(E));
+      r.modifyHtml(c).setInnerHtml(y);
     });
   }
   _updateOriginalPrice(e, r) {
     var a;
     const t = ((a = this.currentNode) == null ? void 0 : a.querySelectorAll(
-      `[esd-extension-block-id="${I.ORIGINAL_PRICE}"]`
-    )) || [], i = _(this.currentNode), n = (i == null ? void 0 : i.priceCurrencySymbol) ?? "", s = (i == null ? void 0 : i.priceCurrencyLocation) ?? "0";
+      `[esd-extension-block-id="${T.ORIGINAL_PRICE}"]`
+    )) || [], i = _(this.currentNode), n = (i == null ? void 0 : i.priceCurrencySymbol) ?? "", o = (i == null ? void 0 : i.priceCurrencyLocation) ?? "0";
     t.forEach((l) => {
       const c = this._getParagraphFromBlock(l);
       if (!c)
         return;
-      const o = c.querySelector("s");
-      if (!o)
+      const s = c.querySelector("s");
+      if (!s)
         return;
-      const d = o.getInnerHTML().trim() || "", m = o.getInnerText().trim() || "", u = (n == null ? void 0 : n.trim()) || "", h = this._removeCurrencySymbol(m, u), E = this._replacePriceNumber(h, e), S = this._buildPriceContent(E, u, s), R = `<s>${d.replace(m, A(S))}</s>`;
-      r.modifyHtml(c).setInnerHtml(R);
+      const d = s.getInnerHTML().trim() || "", m = s.getInnerText().trim() || "", u = (n == null ? void 0 : n.trim()) || "", h = this._removeCurrencySymbol(m, u), E = this._replacePriceNumber(h, e), y = this._buildPriceContent(E, u, o), A = `<s>${d.replace(m, g(y))}</s>`;
+      r.modifyHtml(c).setInnerHtml(A);
     });
   }
   _updateQuantity(e, r, t) {
     var h;
-    const i = _(this.currentNode), s = (r ?? (i == null ? void 0 : i.type) ?? T.ITEMS_TYPE.CART_ITEMS) !== T.ITEMS_TYPE.BROWSED_ITEMS, a = (i == null ? void 0 : i.quantityControlEnabled) !== !1, l = s && a, c = (h = this.currentNode) == null ? void 0 : h.querySelector(`[esd-extension-block-id="${I.QUANTITY}"]`);
+    const i = _(this.currentNode), o = (r ?? (i == null ? void 0 : i.type) ?? I.ITEMS_TYPE.CART_ITEMS) !== I.ITEMS_TYPE.BROWSED_ITEMS, a = (i == null ? void 0 : i.quantityControlEnabled) !== !1, l = o && a, c = (h = this.currentNode) == null ? void 0 : h.querySelector(`[esd-extension-block-id="${T.QUANTITY}"]`);
     if (!c)
       return;
-    const o = this._getParagraphFromBlock(c);
-    if (!o)
+    const s = this._getParagraphFromBlock(c);
+    if (!s)
       return;
-    const d = o.getInnerText().trim();
-    let m = o.getInnerHTML().trim();
-    function u(E, S, P) {
+    const d = s.getInnerText().trim();
+    let m = s.getInnerHTML().trim();
+    function u(E, y, P) {
       return E.replace(
-        new RegExp(`(>\\s*)?${S}(\\s*<)?`, "g"),
+        new RegExp(`(>\\s*)?${y}(\\s*<)?`, "g"),
         `$1${P}$2`
       );
     }
-    m = u(m, d, e), t.modifyHtml(o).setInnerHtml(m), t.modifyHtml(c).setStyle("display", l ? "table-cell" : "none");
+    m = u(m, d, e), t.modifyHtml(s).setInnerHtml(m), t.modifyHtml(c).setStyle("display", l ? "table-cell" : "none");
   }
   _reOrderTemplate(e) {
-    var h, E, S, P, R, b;
-    const r = (h = this.currentNode) == null ? void 0 : h.querySelector(`[esd-extension-block-id="${I.IMAGE}"]`), t = (E = this.currentNode) == null ? void 0 : E.querySelector(`[esd-extension-block-id="${I.NAME}"]`), i = ((S = this.currentNode) == null ? void 0 : S.querySelectorAll(
-      `[esd-extension-block-id="${I.PRICE}"]`
+    var h, E, y, P, A, M;
+    const r = (h = this.currentNode) == null ? void 0 : h.querySelector(`[esd-extension-block-id="${T.IMAGE}"]`), t = (E = this.currentNode) == null ? void 0 : E.querySelector(`[esd-extension-block-id="${T.NAME}"]`), i = ((y = this.currentNode) == null ? void 0 : y.querySelectorAll(
+      `[esd-extension-block-id="${T.PRICE}"]`
     )) || [], n = ((P = this.currentNode) == null ? void 0 : P.querySelectorAll(
-      `[esd-extension-block-id="${I.ORIGINAL_PRICE}"]`
-    )) || [], [s] = i, [a] = n, l = (R = this.currentNode) == null ? void 0 : R.querySelector(`[esd-extension-block-id="${I.QUANTITY}"]`), c = (b = this.currentNode) == null ? void 0 : b.querySelector(`[esd-extension-block-id="${I.BUTTON}"]`);
-    if (!r || !t || !s || !a || !l || !c)
+      `[esd-extension-block-id="${T.ORIGINAL_PRICE}"]`
+    )) || [], [o] = i, [a] = n, l = (A = this.currentNode) == null ? void 0 : A.querySelector(`[esd-extension-block-id="${T.QUANTITY}"]`), c = (M = this.currentNode) == null ? void 0 : M.querySelector(`[esd-extension-block-id="${T.BUTTON}"]`);
+    if (!r || !t || !o || !a || !l || !c)
       return;
-    const o = _(this.currentNode), d = (o == null ? void 0 : o.orientation) ?? T.ORIENTATION.VERTICAL, m = d === T.ORIENTATION.VERTICAL;
-    let u = m ? V : q;
+    const s = _(this.currentNode), d = (s == null ? void 0 : s.orientation) ?? I.ORIENTATION.VERTICAL, m = d === I.ORIENTATION.VERTICAL;
+    let u = m ? B : q;
     setTimeout(() => {
-      const k = A(D(s.getOuterHTML(), m)), F = A(
+      const f = g(D(o.getOuterHTML(), m)), k = g(
         D(a.getOuterHTML(), m)
       );
-      u = u.replace("{-{-TEMPLATE_FIRST_LINE-}-}", m ? x : "").replace("{-{-PRODUCT_IMAGE-}-}", C(r.getOuterHTML())).replace("{-{-PRODUCT_NAME-}-}", C(t.getOuterHTML())).replaceAll("{-{-PRODUCT_PRICE-}-}", C(k)).replaceAll("{-{-PRODUCT_ORIGINAL_PRICE-}-}", C(F)).replace("{-{-PRODUCT_QUANTITY-}-}", C(l.getOuterHTML())).replace("{-{-PRODUCT_BUTTON-}-}", C(c.getOuterHTML())), u = G(
+      u = u.replace("{-{-TEMPLATE_FIRST_LINE-}-}", m ? x : "").replace("{-{-PRODUCT_IMAGE-}-}", C(r.getOuterHTML())).replace("{-{-PRODUCT_NAME-}-}", C(t.getOuterHTML())).replaceAll("{-{-PRODUCT_PRICE-}-}", C(f)).replaceAll("{-{-PRODUCT_ORIGINAL_PRICE-}-}", C(k)).replace("{-{-PRODUCT_QUANTITY-}-}", C(l.getOuterHTML())).replace("{-{-PRODUCT_BUTTON-}-}", C(c.getOuterHTML())), u = G(
         u,
         d,
-        (o == null ? void 0 : o.priceOrientation) ?? "horizontal",
-        (o == null ? void 0 : o.priceVisible) ?? !0,
-        (o == null ? void 0 : o.originalPriceVisible) ?? !0
+        (s == null ? void 0 : s.priceOrientation) ?? "horizontal",
+        (s == null ? void 0 : s.priceVisible) ?? !0,
+        (s == null ? void 0 : s.originalPriceVisible) ?? !0
       ), u = u.trim().replace(x, "").slice(0, -5);
-      const O = e ?? this.api.getDocumentModifier();
-      O.modifyHtml(r.querySelector("img")).setAttribute("width", U.productImageWidth).setAttribute("height", U.productImageWidth), O.modifyHtml(this.currentNode).setInnerHtml(u), e || O.apply(new N("Reordered template"));
+      const R = e ?? this.api.getDocumentModifier();
+      R.modifyHtml(r.querySelector("img")).setAttribute("width", U.productImageWidth).setAttribute("height", U.productImageWidth), R.modifyHtml(this.currentNode).setInnerHtml(u), e || R.apply(new N("Reordered template"));
     }, 50);
   }
   _updateDataTypeAttributes(e, r) {
@@ -264,15 +259,15 @@ class se extends $ {
       return;
     const t = this.currentNode.closest(".ins-product-td");
     t && r.modifyHtml(t).setAttribute("data-type", e), this.currentNode.querySelectorAll("[data-type]").forEach((n) => {
-      const s = n;
-      r.modifyHtml(s).setAttribute("data-type", e);
+      const o = n;
+      r.modifyHtml(o).setAttribute("data-type", e);
     });
   }
   _updateDataNumberAttributes(e, r) {
     if (!this.currentNode)
       return;
-    const t = _(this.currentNode), i = (t == null ? void 0 : t.type) ?? T.ITEMS_TYPE.CART_ITEMS, n = v(e, i), s = this.currentNode.closest(".ins-product-td");
-    s && r.modifyHtml(s).setAttribute("data-number", n), this.currentNode.querySelectorAll("[data-number]").forEach((l) => {
+    const t = _(this.currentNode), i = (t == null ? void 0 : t.type) ?? I.ITEMS_TYPE.CART_ITEMS, n = v(e, i), o = this.currentNode.closest(".ins-product-td");
+    o && r.modifyHtml(o).setAttribute("data-number", n), this.currentNode.querySelectorAll("[data-number]").forEach((l) => {
       const c = l;
       r.modifyHtml(c).setAttribute("data-number", n);
     });
@@ -282,16 +277,16 @@ class se extends $ {
     this._updateImageSrc(r.imageSrc, t), this._updateName(r.name, t), this._updatePrice(r.price, t), this._updateOriginalPrice(r.originalPrice, t), this._updateQuantity(r.quantity, e, t), t.apply(new N("Refilled template"));
   }
   _recalculateTrimming() {
-    var s;
+    var o;
     if (!this.currentNode)
       return;
-    const e = (s = this.currentNode) == null ? void 0 : s.querySelector(`[esd-extension-block-id="${I.NAME}"]`);
+    const e = (o = this.currentNode) == null ? void 0 : o.querySelector(`[esd-extension-block-id="${T.NAME}"]`);
     if (!e)
       return;
     const r = Y(e);
     if (!r)
       return;
-    const t = _(this.currentNode), i = (t == null ? void 0 : t.nameTrimming) ?? !0, n = f(t == null ? void 0 : t.orientation);
+    const t = _(this.currentNode), i = (t == null ? void 0 : t.nameTrimming) ?? !0, n = $(t == null ? void 0 : t.orientation);
     this.api.getDocumentModifier().modifyHtml(r).setStyle("overflow", "hidden").setStyle("white-space", i ? "nowrap" : "normal").setStyle("text-overflow", i ? "ellipsis" : "unset").setStyle("max-width", n).removeStyle("width").apply(new N("Recalculated trimming after orientation change"));
   }
   _getParagraphFromBlock(e) {
@@ -309,7 +304,7 @@ class se extends $ {
     } else {
       const n = t.match(/([^0-9.,\s]+)/);
       if (n && n[1]) {
-        const s = n[1].trim(), a = new RegExp(`\\s*${this._escapeRegex(s)}\\s*`);
+        const o = n[1].trim(), a = new RegExp(`\\s*${this._escapeRegex(o)}\\s*`);
         i = t.replace(a, "").trim();
       }
     }
@@ -325,5 +320,5 @@ class se extends $ {
 }
 export {
   Q as CONTROL_BLOCK_ID,
-  se as ItemsBlockControl
+  oe as ItemsBlockControl
 };

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

@@ -2,23 +2,24 @@ var b = Object.defineProperty;
 var A = (m, c, e) => c in m ? b(m, c, { enumerable: !0, configurable: !0, writable: !0, value: e }) : m[c] = e;
 var u = (m, c, e) => A(m, typeof c != "symbol" ? c + "" : c, e);
 import { useConfig as g } from "../../../composables/useConfig.js";
-import { BlockId as D } from "../../../enums/block.js";
-import { getMigrationBannerHtml as E } from "../../../utils/migrationBannerHtml.js";
+import { BlockId as E } from "../../../enums/block.js";
+import { getMigrationBannerHtml as D } from "../../../utils/migrationBannerHtml.js";
 import { Block as S, BlockCompositionType as v, ModificationDescription as _ } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CURRENT_CONFIG_VERSION as N, PRE_RRS_CONFIG_VERSION as M } from "./constants/defaultConfig.js";
+import { CURRENT_CONFIG_VERSION as M, PRE_RRS_CONFIG_VERSION as N } from "./constants/defaultConfig.js";
 import { RECOMMENDATION_ID_ATTR as f } from "./constants/selectors.js";
-import { ensureMobileFitRule as w, syncHeightBound as O } from "./controls/image/index.js";
-import { regenerateMobileProductRows as H } from "./controls/main/utils.js";
-import { ensureMobileCssRulesExist as I, setMobileLayoutOptOut as R, hasMobileLayoutOptOut as T } from "./controls/mobileLayout/cssRules.js";
+import { ensureMobileFitRule as T, syncHeightBound as w } from "./controls/image/index.js";
+import { regenerateMobileProductRows as O } from "./controls/main/utils.js";
+import { ensureMobileCssRulesExist as I, setMobileLayoutOptOut as R, hasMobileLayoutOptOut as x } from "./controls/mobileLayout/cssRules.js";
+import { CSS_CLASS_TEXT_TRIM as H, ensureTextTrimCssRulesExist as $ } from "./controls/shared/textTrimCssRules.js";
 import { RecommendationConfigService as a } from "./services/configService.js";
 import { useRecommendationExtensionStore as p } from "./store/recommendation.js";
-import { getDefaultTemplate as x } from "./templates/grid/template.js";
+import { getDefaultTemplate as q } from "./templates/grid/template.js";
 import { useRecommendationBlockWarning as F } from "./useRecommendationBlockWarning.js";
-import { registerNodeConfigWriter as y, readBlockNodeConfigs as $ } from "./utils/nodeConfigWriter.js";
-import { refreshArrivedStrategyBlocks as q, resolveSourceConfig as L, refreshDuplicatedStrategyBlocks as P } from "./utils/strategyCommit.js";
-const k = D.Recommendation, h = "recommendation-block-v2", C = "hide-price";
+import { registerNodeConfigWriter as y, readBlockNodeConfigs as L } from "./utils/nodeConfigWriter.js";
+import { refreshArrivedStrategyBlocks as P, resolveSourceConfig as V, refreshDuplicatedStrategyBlocks as W } from "./utils/strategyCommit.js";
+const k = E.Recommendation, h = "recommendation-block-v2", C = "hide-price";
 let B = !1;
-class se extends S {
+class ae extends S {
   constructor() {
     super();
     /**
@@ -52,7 +53,7 @@ class se extends S {
     );
   }
   getSettingsPanelTitleHtml() {
-    return E(
+    return D(
       k,
       this.api.translate("Recommendation Block"),
       this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Recommendation block and test your message to ensure it works properly.")
@@ -76,7 +77,7 @@ class se extends S {
    */
   getTemplate() {
     const e = this._generateNextId();
-    return this._pendingBlockId = e, x(e);
+    return this._pendingBlockId = e, q(e);
   }
   /**
    * Called when a new block is dropped into the template
@@ -110,7 +111,7 @@ class se extends S {
       e,
       {
         recommendationId: i,
-        configVersion: r ? N : M,
+        configVersion: r ? M : N,
         ...s ? { partnerName: g().partnerName.value } : {},
         // An RRS block picks a strategy, not an algorithm, and its algorithm control is
         // hidden. Keeping the `mostPopular` default would bake a most-popular feed URL
@@ -121,7 +122,7 @@ class se extends S {
     if (l.setCurrentBlock(i), this._stampHidePrice(e, n.priceHideIfSameAsDiscounted), o) {
       I(this.api);
       const d = this._getBlockElement(e);
-      d && (R(this.api, d, !0), H({
+      d && (R(this.api, d, !0), O({
         currentNode: e,
         documentModifier: this.api.getDocumentModifier()
       }));
@@ -155,13 +156,13 @@ class se extends S {
           "Assign recommendation ID to legacy block"
         );
       }
-      this._healLingeringDuplicate(e), a.needsMigration(e) && this._migrateFromLegacy(e), this._healHidePriceAttr(e), this._ensureMobileFitRule(e), this._syncHeightBound(e);
+      this._healLingeringDuplicate(e), a.needsMigration(e) && this._migrateFromLegacy(e), this._healHidePriceAttr(e), this._ensureMobileFitRule(e), this._syncHeightBound(e), this._ensureTextTrimCss(e);
       try {
         B || (I(this.api), B = !0);
         const t = a.getConfig(e), i = this._getBlockElement(e);
         if (i) {
           const r = !t.mobileLayoutEnabled;
-          T(i) !== r && R(this.api, i, r);
+          x(i) !== r && R(this.api, i, r);
         }
       } catch {
       }
@@ -179,7 +180,15 @@ class se extends S {
   }
   _ensureMobileFitRule(e) {
     try {
-      w(this.api, e);
+      T(this.api, e);
+    } catch {
+    }
+  }
+  // A migrated block arrives with trimmed cells but without the stylesheet rules the toggle would have added.
+  _ensureTextTrimCss(e) {
+    var t;
+    try {
+      (t = this._getBlockElement(e)) != null && t.querySelector(`.${H}`) && $(this.api);
     } catch {
     }
   }
@@ -187,7 +196,7 @@ class se extends S {
     const t = this._getBlockElement(e);
     if (t)
       try {
-        O(this.api, t);
+        w(this.api, t);
       } catch {
       }
   }
@@ -270,7 +279,7 @@ class se extends S {
       const d = { strategyId: l.strategyId };
       return t.add(n), this._refreshClaims.set(n, d), [{ id: n, config: l, claim: d }];
     });
-    i.length && q(i.map(({ id: r, config: s }) => ({ id: r, config: s }))).catch((r) => console.error("[recommendation] refreshing an arrived strategy failed", r)).finally(() => i.forEach(({ id: r, claim: s }) => this._releaseRefreshClaim(r, s)));
+    i.length && P(i.map(({ id: r, config: s }) => ({ id: r, config: s }))).catch((r) => console.error("[recommendation] refreshing an arrived strategy failed", r)).finally(() => i.forEach(({ id: r, claim: s }) => this._releaseRefreshClaim(r, s)));
   }
   /**
    * A new document reports each block to onCreated and onDocumentInit, not always in one batch, so a
@@ -282,7 +291,7 @@ class se extends S {
       return !0;
     if (i.strategyId === t)
       return !1;
-    const r = $(e);
+    const r = L(e);
     return r.length > 0 && r.every((s) => s.strategyId === t);
   }
   _releaseRefreshClaim(e, t) {
@@ -344,10 +353,10 @@ class se extends S {
     if (r.cloneBlockState(t, i), r.setCurrentBlock(i), g().isFeatureEnabled("reusableRecommendationStrategy")) {
       this._resetSourceIds.add(t), y(this.api);
       const s = a.getConfig(e), n = [
-        { id: t, claim: { strategyId: L(t, s).strategyId } },
+        { id: t, claim: { strategyId: V(t, s).strategyId } },
         { id: i, claim: { strategyId: s.strategyId } }
       ].filter(({ id: o }) => !this._refreshClaims.has(o));
-      n.forEach(({ id: o, claim: l }) => this._refreshClaims.set(o, l)), P(t, i, s).catch((o) => console.error("[recommendation] refreshing a duplicated strategy failed", o)).finally(() => n.forEach(({ id: o, claim: l }) => this._releaseRefreshClaim(o, l)));
+      n.forEach(({ id: o, claim: l }) => this._refreshClaims.set(o, l)), W(t, i, s).catch((o) => console.error("[recommendation] refreshing a duplicated strategy failed", o)).finally(() => n.forEach(({ id: o, claim: l }) => this._releaseRefreshClaim(o, l)));
     }
     this._warnIfMultipleBlocks();
   }
@@ -451,5 +460,5 @@ class se extends S {
 }
 export {
   k as BLOCK_ID,
-  se as RecommendationBlock
+  ae as RecommendationBlock
 };

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

@@ -7,7 +7,7 @@ const u = "recommendation-card-background-color-control", e = {
   GRID: ".product-card-segment",
   LIST: ".product-card-wrapper"
 };
-class _ extends s {
+class h extends s {
   getId() {
     return u;
   }
@@ -18,7 +18,7 @@ class _ extends s {
     ]);
   }
   onRender() {
-    this._setFormValues(), this._listenToFormUpdates();
+    this.forgetLastPanelNode(), this._listenToFormUpdates();
   }
   onTemplateNodeUpdated(r) {
     super.onTemplateNodeUpdated(r), this._setFormValues();
@@ -72,5 +72,5 @@ class _ extends s {
 }
 export {
   u as CARD_BACKGROUND_COLOR_CONTROL_ID,
-  _ as CardBackgroundColorControl
+  h as CardBackgroundColorControl
 };