@useinsider/guido 3.21.2-beta.45bb425 → 3.21.2-beta.4c14c74

package/dist/extensions/Blocks/Items/controls/price/priceOrientation.js

@@ -1,17 +1,17 @@
-import { ModificationDescription as p } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ModificationDescription as d } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as O } from "../../../common-control.js";
 import { ItemsBlockControlId as m } from "../../enums/controlEnums.js";
-import { SETTINGS_ENUMS as h } from "../../enums/settingsEnums.js";
-import { getItemsBlockConfig as u, setItemsBlockConfig as I } from "../../utils/nodeConfigUtils.js";
-const N = m.PRICE_ORIENTATION, c = {
+import { SETTINGS_ENUMS as u } from "../../enums/settingsEnums.js";
+import { getItemsBlockConfig as h, setItemsBlockConfig as I } from "../../utils/nodeConfigUtils.js";
+const y = m.PRICE_ORIENTATION, p = {
   PRICE_ORIENTATION: "priceOrientation"
-}, y = [
+}, N = [
   { icon: "vertical-orientation", value: "vertical" },
   { icon: "horizontal-orientation", value: "horizontal" }
 ];
 class P extends O {
   getId() {
-    return N;
+    return y;
   }
   getTemplate() {
     return `
@@ -21,15 +21,14 @@ class P extends O {
         `;
   }
   onRender() {
-    const i = u(this.currentNode);
-    this.api.updateValues({ [c.PRICE_ORIENTATION]: (i == null ? void 0 : i.priceOrientation) ?? "horizontal" }), this.api.onValueChanged(c.PRICE_ORIENTATION, (t) => {
-      typeof t == "string" && this._onPriceOrientationChange(t);
+    this.forgetLastPanelNode(), this.api.onValueChanged(p.PRICE_ORIENTATION, (i) => {
+      typeof i == "string" && this._onPriceOrientationChange(i);
     });
   }
   onTemplateNodeUpdated(i) {
     super.onTemplateNodeUpdated(i), this.handleBlockInstanceChange(() => {
-      const t = u(this.currentNode);
-      this.api.updateValues({ [c.PRICE_ORIENTATION]: (t == null ? void 0 : t.priceOrientation) ?? "horizontal" });
+      const t = h(this.currentNode);
+      this.api.updateValues({ [p.PRICE_ORIENTATION]: (t == null ? void 0 : t.priceOrientation) ?? "horizontal" });
     });
   }
   _onPriceOrientationChange(i) {
@@ -37,46 +36,46 @@ class P extends O {
       priceOrientation: i
     }), !this.currentNode)
       return;
-    const t = u(this.currentNode), e = ((t == null ? void 0 : t.orientation) ?? h.ORIENTATION.VERTICAL) === h.ORIENTATION.VERTICAL, o = i === "horizontal";
+    const t = h(this.currentNode), e = ((t == null ? void 0 : t.orientation) ?? u.ORIENTATION.VERTICAL) === u.ORIENTATION.VERTICAL, o = i === "horizontal";
     e ? this._updateVerticalLayout(o) : this._updateHorizontalLayout(o);
   }
   _updateVerticalLayout(i) {
-    var a, s, l, n;
-    const t = ((s = (a = this.currentNode) == null ? void 0 : a.closest(".ins-product-td")) == null ? void 0 : s.querySelectorAll(".product-price-class")) || [], r = ((n = (l = this.currentNode) == null ? void 0 : l.closest(".ins-product-td")) == null ? void 0 : n.querySelectorAll(".product-original-price-class")) || [];
+    var a, l, s, n;
+    const t = ((l = (a = this.currentNode) == null ? void 0 : a.closest(".ins-product-td")) == null ? void 0 : l.querySelectorAll(".product-price-class")) || [], r = ((n = (s = this.currentNode) == null ? void 0 : s.closest(".ins-product-td")) == null ? void 0 : n.querySelectorAll(".product-original-price-class")) || [];
     if (!t || !r)
       return;
     const e = i ? "50%" : "100%", o = this.api.getDocumentModifier();
-    t.forEach((d) => {
-      o.modifyHtml(d).setAttribute("width", e).setStyle("width", e);
-    }), r.forEach((d) => {
-      o.modifyHtml(d).setAttribute("width", e).setStyle("width", e);
-    }), o.apply(new p(`Updated original price element width to ${e}`));
+    t.forEach((c) => {
+      o.modifyHtml(c).setAttribute("width", e).setStyle("width", e);
+    }), r.forEach((c) => {
+      o.modifyHtml(c).setAttribute("width", e).setStyle("width", e);
+    }), o.apply(new d(`Updated original price element width to ${e}`));
   }
   _updateHorizontalLayout(i) {
-    var o, a, s, l;
-    const t = ((a = (o = this.currentNode) == null ? void 0 : o.closest(".ins-product-td")) == null ? void 0 : a.querySelectorAll(".horizontal-price")) || [], r = (l = (s = this.currentNode) == null ? void 0 : s.closest(".ins-product-td")) == null ? void 0 : l.querySelector(".vertical-price");
+    var o, a, l, s;
+    const t = ((a = (o = this.currentNode) == null ? void 0 : o.closest(".ins-product-td")) == null ? void 0 : a.querySelectorAll(".horizontal-price")) || [], r = (s = (l = this.currentNode) == null ? void 0 : l.closest(".ins-product-td")) == null ? void 0 : s.querySelector(".vertical-price");
     if (!t || !r || t.length === 0)
       return;
     const e = this.api.getDocumentModifier();
     i ? (t.forEach((n) => {
       e.modifyHtml(n).setStyle("display", "table-cell");
-    }), e.modifyHtml(r).setStyle("display", "none"), e.apply(new p("Show horizontal price orientation"))) : (t.forEach((n) => {
+    }), e.modifyHtml(r).setStyle("display", "none"), e.apply(new d("Show horizontal price orientation"))) : (t.forEach((n) => {
       e.modifyHtml(n).setStyle("display", "none");
-    }), e.modifyHtml(r).setStyle("display", "table-cell"), e.apply(new p("Show vertical price orientation")));
+    }), e.modifyHtml(r).setStyle("display", "table-cell"), e.apply(new d("Show vertical price orientation")));
   }
   _getPriceOrientation() {
     return `
             ${this._GuTwoColumns([
       this._GuLabel({ text: "Price Orientation" }),
       this._GuRadioButton({
-        name: c.PRICE_ORIENTATION,
-        buttons: y
+        name: p.PRICE_ORIENTATION,
+        buttons: N
       })
     ])}
         `;
   }
 }
 export {
-  N as CONTROL_BLOCK_ID,
+  y as CONTROL_BLOCK_ID,
   P as PriceOrientationControl
 };

package/dist/extensions/Blocks/Items/controls/price/singlePrice.js

@@ -1,9 +1,9 @@
-import { ModificationDescription as S, UIElementType as d, UEAttr as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ModificationDescription as S, UIElementType as _, UEAttr as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as A } from "../../../common-control.js";
-import { ItemsBlockControlId as T, ItemsBlockId as p } from "../../enums/controlEnums.js";
-import { productPairs as R } from "../../enums/productEnums.js";
-import { getItemsBlockConfig as I, setItemsBlockConfig as N, escapeReplacement as h } from "../../utils/nodeConfigUtils.js";
-const u = T.PRICE_SINGLE_PRICE, l = {
+import { ItemsBlockControlId as T, ItemsBlockId as d } from "../../enums/controlEnums.js";
+import { productPairs as p } from "../../enums/productEnums.js";
+import { getItemsBlockConfig as g, setItemsBlockConfig as N, escapeReplacement as h } from "../../utils/nodeConfigUtils.js";
+const u = T.PRICE_SINGLE_PRICE, a = {
   SINGLE_PRICE: "singlePrice"
 };
 class k extends A {
@@ -18,53 +18,52 @@ class k extends A {
         `;
   }
   onRender() {
-    const e = I(this.currentNode);
-    this.api.updateValues({ [l.SINGLE_PRICE]: (e == null ? void 0 : e.priceSinglePrice) ?? !1 }), this.api.onValueChanged(l.SINGLE_PRICE, (i) => {
-      this._onSinglePriceChange(i);
+    this.forgetLastPanelNode(), this.api.onValueChanged(a.SINGLE_PRICE, (e) => {
+      this._onSinglePriceChange(e);
     });
   }
   onTemplateNodeUpdated(e) {
     super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(() => {
-      const i = I(this.currentNode);
-      this.api.updateValues({ [l.SINGLE_PRICE]: (i == null ? void 0 : i.priceSinglePrice) ?? !1 });
+      const t = g(this.currentNode);
+      this.api.updateValues({ [a.SINGLE_PRICE]: (t == null ? void 0 : t.priceSinglePrice) ?? !1 });
     });
   }
   _onSinglePriceChange(e) {
     if (console.debug("Single price changed to: ", e), !this.currentNode)
       return;
-    const i = I(this.currentNode), c = (i == null ? void 0 : i.type) ?? "CART_ITEMS", r = (i == null ? void 0 : i.priceFormatted) ?? !1, t = R.PAIRS_FOR_EXTENSION.price[c], n = R.PAIRS_FOR_EXTENSION.originalPrice[c], [E, g] = e ? [
-      r ? t.DEFAULT_PRICE_FORMATTED : t.DEFAULT_PRICE,
-      r ? t.DEFAULT_SINGLE_PRICE_FORMATTED : t.DEFAULT_SINGLE_PRICE
+    const t = g(this.currentNode), c = (t == null ? void 0 : t.type) ?? "CART_ITEMS", r = (t == null ? void 0 : t.priceFormatted) ?? !1, i = p.PAIRS_FOR_EXTENSION.price[c], n = p.PAIRS_FOR_EXTENSION.originalPrice[c], [l, L] = e ? [
+      r ? i.DEFAULT_PRICE_FORMATTED : i.DEFAULT_PRICE,
+      r ? i.DEFAULT_SINGLE_PRICE_FORMATTED : i.DEFAULT_SINGLE_PRICE
     ] : [
-      r ? t.DEFAULT_SINGLE_PRICE_FORMATTED : t.DEFAULT_SINGLE_PRICE,
-      r ? t.DEFAULT_PRICE_FORMATTED : t.DEFAULT_PRICE
-    ], P = r ? n.DEFAULT_PRICE_FORMATTED : n.DEFAULT_PRICE, _ = r ? n.DEFAULT_SINGLE_PRICE_FORMATTED : n.DEFAULT_SINGLE_PRICE, [L, C] = e ? [P, _] : [_, P], s = this.api.getDocumentModifier();
+      r ? i.DEFAULT_SINGLE_PRICE_FORMATTED : i.DEFAULT_SINGLE_PRICE,
+      r ? i.DEFAULT_PRICE_FORMATTED : i.DEFAULT_PRICE
+    ], I = r ? n.DEFAULT_PRICE_FORMATTED : n.DEFAULT_PRICE, P = r ? n.DEFAULT_SINGLE_PRICE_FORMATTED : n.DEFAULT_SINGLE_PRICE, [R, C] = e ? [I, P] : [P, I], s = this.api.getDocumentModifier();
     N(this.currentNode, this.api, { priceSinglePrice: e }, s);
     const o = this.currentNode.closest(".items-block");
     ((o == null ? void 0 : o.querySelectorAll(
-      `[esd-extension-block-id="${p.PRICE}"]`
-    )) || []).forEach((a) => {
-      this._updatePriceBlock(s, a, E, g, e);
+      `[esd-extension-block-id="${d.PRICE}"]`
+    )) || []).forEach((E) => {
+      this._updatePriceBlock(s, E, l, L, e);
     }), ((o == null ? void 0 : o.querySelectorAll(
-      `[esd-extension-block-id="${p.ORIGINAL_PRICE}"]`
-    )) || []).forEach((a) => {
-      this._updatePriceBlock(s, a, L, C, e);
+      `[esd-extension-block-id="${d.ORIGINAL_PRICE}"]`
+    )) || []).forEach((E) => {
+      this._updatePriceBlock(s, E, R, C, e);
     }), s.apply(new S(
       `Updated price to ${e ? "single" : "total"} price`
     ));
   }
-  _updatePriceBlock(e, i, c, r, t) {
-    const n = `data-single_price="${t ? "true" : "false"}"`, E = i.getInnerHTML().trim().replace(c, h(r)).replace(/data-single_price=(?:"[^"]*"|'[^']*')/g, n);
-    e.modifyHtml(i).setInnerHtml(E);
+  _updatePriceBlock(e, t, c, r, i) {
+    const n = `data-single_price="${i ? "true" : "false"}"`, l = t.getInnerHTML().trim().replace(c, h(r)).replace(/data-single_price=(?:"[^"]*"|'[^']*')/g, n);
+    e.modifyHtml(t).setInnerHtml(l);
   }
   _getSinglePrice() {
     return `
             <div class="display-flex align-items-center justify-content-between">
-                <${d.LABEL}
+                <${_.LABEL}
                     ${m.LABEL.text}="${this.api.translate("Show Single Product Price")}"
                 >
-                </${d.LABEL}>
-                ${this._GuToggle(l.SINGLE_PRICE)}
+                </${_.LABEL}>
+                ${this._GuToggle(a.SINGLE_PRICE)}
             </div>
         `;
   }

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

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

@@ -4,7 +4,7 @@ var v = (_, g, t) => ct(_, typeof g != "symbol" ? g + "" : g, t);
 import { ACADEMY_LINKS as dt } from "../../../../../enums/academy.js";
 import { UIElementType as f, UEAttr as O, ModificationDescription as y } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as ut } from "../../../common-control.js";
-import { ATTR_PRODUCT_IMAGE as q, ATTR_PRODUCT_NAME as mt, ATTR_PRODUCT_PRICE as p, ATTR_PRODUCT_OLD_PRICE as I, ATTR_PRODUCT_OMNIBUS_PRICE as ht, ATTR_PRODUCT_OMNIBUS_DISCOUNT as pt, ATTR_PRODUCT_BUTTON as F, ATTR_RECOMMENDATION_TITLE as $, ATTR_DATA_CARD_COMPOSITION as K, ATTR_DATA_CUSTOM_ATTRIBUTES as W, ATTR_CUSTOM_PREFIX as N, SELECTOR_ATTRIBUTE_ROW as E, SELECTOR_TITLE_CELL as z, ATTR_DATA_VISIBILITY as D, ATTR_DATA_ATTRIBUTE_TYPE as R, CSS_CLASS_ATTRIBUTE_ROW as G, CSS_CLASS_SPACER as _t, BUILT_IN_DEFAULT_ATTRIBUTES as gt } from "../../constants/selectors.js";
+import { ATTR_PRODUCT_IMAGE as q, ATTR_PRODUCT_NAME as mt, ATTR_PRODUCT_PRICE as p, ATTR_PRODUCT_OLD_PRICE as I, ATTR_PRODUCT_OMNIBUS_PRICE as ht, ATTR_PRODUCT_OMNIBUS_DISCOUNT as pt, ATTR_PRODUCT_BUTTON as F, ATTR_RECOMMENDATION_TITLE as $, ATTR_DATA_CARD_COMPOSITION as K, ATTR_DATA_CUSTOM_ATTRIBUTES as W, ATTR_CUSTOM_PREFIX as N, SELECTOR_ATTRIBUTE_ROW as E, SELECTOR_TITLE_CELL as G, ATTR_DATA_VISIBILITY as D, ATTR_DATA_ATTRIBUTE_TYPE as R, CSS_CLASS_ATTRIBUTE_ROW as z, CSS_CLASS_SPACER as _t, BUILT_IN_DEFAULT_ATTRIBUTES as gt } from "../../constants/selectors.js";
 import { DEFAULT_COMPOSITION as Y, DEFAULT_VISIBILITY as X } from "../../constants/defaultConfig.js";
 import { RecommendationConfigService as T } from "../../services/configService.js";
 import { useRecommendationExtensionStore as ft } from "../../store/recommendation.js";
@@ -142,7 +142,7 @@ class se extends ut {
         `;
   }
   onRender() {
-    this._initializeComposition(), this._registerValueChangeListeners(), this._setupEventListeners(), this._updateOrderableState(), this._subscribeToStoreChanges(), this._syncDisabledState();
+    this.forgetLastPanelNode(), this._registerValueChangeListeners(), this._setupEventListeners(), this._updateOrderableState(), this._subscribeToStoreChanges();
   }
   /**
    * Card composition restructures the block (toggles/reorders/adds attribute
@@ -230,7 +230,7 @@ class se extends ut {
   }
   _hasTitle() {
     var t;
-    return !!((t = this.currentNode) != null && t.querySelector(z));
+    return !!((t = this.currentNode) != null && t.querySelector(G));
   }
   _getDefaultVisibilities() {
     return { ...X };
@@ -712,7 +712,7 @@ class se extends ut {
               );
             }
           ).join(""), ot = Ct(x, l).repeat(S - B);
-          return `<tr class="${G}" ${R}="${r}" ${D}="1">${st}${ot}</tr>`;
+          return `<tr class="${z}" ${R}="${r}" ${D}="1">${st}${ot}</tr>`;
         }
         return this._getExistingRowHtml(u, j);
       }).join("");
@@ -867,7 +867,7 @@ class se extends ut {
     return t.length > 0 ? t : this._findTitleRowsByClass();
   }
   _findTitleRowsByClass() {
-    const t = this._findTitleContainerBody(), e = t && "children" in t ? t.children() : [], r = e.findIndex((s) => !!s.querySelector(z));
+    const t = this._findTitleContainerBody(), e = t && "children" in t ? t.children() : [], r = e.findIndex((s) => !!s.querySelector(G));
     if (r === -1)
       return [];
     const i = e[r + 1];
@@ -974,7 +974,7 @@ class se extends ut {
       const r = this.store.recommendationConfigs.orientation;
       r !== t && (t = r, this._updateOrderableState());
       const i = Object.keys(this.store.filterList).sort().join(",");
-      i !== e && (e = i, this._initializeComposition());
+      i !== e && (e = i, this.currentNode && this._initializeComposition());
     });
   }
   /**
@@ -1027,7 +1027,7 @@ class se extends ut {
       [i]: e,
       product_attributes: { [i]: e }
     }, l = s[r](o).replace(/<tr>/, "").replace(/<\/tr>/, "");
-    return `<tr class="${G}" ${R}="${r}" ${D}="1">${l}</tr>`;
+    return `<tr class="${z}" ${R}="${r}" ${D}="1">${l}</tr>`;
   }
 }
 export {