@useinsider/guido 3.2.0-beta.739a669 → 3.2.0-beta.78d83bd

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

@@ -1,19 +1,19 @@
-import { BlockType as b, BlockAttr as N } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { BlockType as b, BlockAttr as S } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { ItemsBlockId as O } from "./enums/controlEnums.js";
-import { productPairs as A, templateFirstLine as C } from "./enums/productEnums.js";
-import { ItemInCartOptions as Y, SETTINGS_ENUMS as x, DefaultConfigValues as D } from "./enums/settingsEnums.js";
+import { productPairs as P, templateFirstLine as C } from "./enums/productEnums.js";
+import { ItemInCartOptions as Y, SETTINGS_ENUMS as x, DefaultConfigValues as F } from "./enums/settingsEnums.js";
 import j from "./layouts/horizontal.html.js";
 import q from "./layouts/vertical.html.js";
 import { escapeReplacement as V } from "./utils/nodeConfigUtils.js";
-let [g] = A.PAIRS_FOR_EXTENSION.imageSrc.CART_ITEMS.DEFAULT, [L] = A.PAIRS_FOR_EXTENSION.name.CART_ITEMS.DEFAULT, [m] = A.PAIRS_FOR_EXTENSION.price.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [S] = A.PAIRS_FOR_EXTENSION.originalPrice.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [M] = A.PAIRS_FOR_EXTENSION.quantity.CART_ITEMS.DEFAULT;
-const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCase().startsWith(e.toLowerCase())).join("; ").replace(/;\s*$/, ""), F = (s) => U(s, "text-align"), w = (s, e) => {
+let [M] = P.PAIRS_FOR_EXTENSION.imageSrc.CART_ITEMS.DEFAULT, [D] = P.PAIRS_FOR_EXTENSION.name.CART_ITEMS.DEFAULT, [N] = P.PAIRS_FOR_EXTENSION.price.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [m] = P.PAIRS_FOR_EXTENSION.originalPrice.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [U] = P.PAIRS_FOR_EXTENSION.quantity.CART_ITEMS.DEFAULT;
+const g = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCase().startsWith(e.toLowerCase())).join("; ").replace(/;\s*$/, ""), L = (s) => g(s, "text-align"), A = (s, e) => {
   const r = new RegExp(`${e}\\s*:\\s*([^;]+)`, "i"), a = s.match(r);
   return a ? a[1].trim() : null;
 }, v = (s, e, r) => new RegExp(`(${e}\\s*:\\s*)[^;]+`, "gi").test(s) ? s.replace(
   new RegExp(`(${e}\\s*:\\s*)[^;]+`, "gi"),
   `$1${r}`
 ) : s, Z = (s, e, r, a) => {
-  const i = r || D.productImageHeight, n = (a == null ? void 0 : a.imageVisible) === !1 ? "display: none; " : "";
+  const i = r || F.productImageHeight, n = (a == null ? void 0 : a.imageVisible) === !1 ? "display: none; " : "";
   return `
         <td class="esd-block-image document-node-component default-block-component selectable ng-star-inserted"
             align="center"
@@ -28,8 +28,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
                 href="#!">
                 <img class="adapt-img document-node-component ng-star-inserted"
                     style="object-fit: contain;"
-                    src="${g}"
-                    alt="${L}"
+                    src="${M}"
                     width="${i}"
                     height="${i}">
             </a>
@@ -37,11 +36,10 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
     `;
 }, J = (s, e) => `
     <${b.BLOCK_IMAGE}
-        ${N.BLOCK_IMAGE.src}="${g}"
-        ${N.BLOCK_IMAGE.alt}="${L}"
-        ${N.BLOCK_IMAGE.href}="#!"
-        ${N.BLOCK_IMAGE.width}="${D.productImageWidth}"
-        ${N.BLOCK_IMAGE.height}="${D.productImageWidth}"
+        ${S.BLOCK_IMAGE.src}="${M}"
+        ${S.BLOCK_IMAGE.href}="#!"
+        ${S.BLOCK_IMAGE.width}="${F.productImageWidth}"
+        ${S.BLOCK_IMAGE.height}="${F.productImageWidth}"
         esd-extension-block-id="${O.IMAGE}"
         data-slot-1
         product-attr="imageSrc"
@@ -64,7 +62,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
         text-overflow: ellipsis;
     `;
   if (e) {
-    const c = w(a || "", "text-align") || "center", l = F(a || o), $ = w(l, "color"), t = w(l, "font-size"), E = w(l, "font-family"), _ = w(l, "font-weight"), u = w(l, "font-style"), P = _ === "bold" || _ === "700", p = u === "italic", R = [
+    const c = A(a || "", "text-align") || "center", l = L(a || o), $ = A(l, "color"), t = A(l, "font-size"), E = A(l, "font-family"), _ = A(l, "font-weight"), u = A(l, "font-style"), w = _ === "bold" || _ === "700", p = u === "italic", R = [
       $ ? `color: ${$}` : "",
       t ? `font-size: ${t}` : "",
       E ? `font-family: ${E}` : ""
@@ -74,17 +72,17 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
       "font-size",
       "inherit"
     );
-    d = U(d, "font-weight"), d = U(d, "font-style");
+    d = g(d, "font-weight"), d = g(d, "font-style");
     const T = (i == null ? void 0 : i.nameVisible) === !1 ? "display: none;" : "display: table-cell;";
-    let h = `<a
+    let I = `<a
                         href="#!"
                         style="${d}"
                         product-attr="name"
                         data-slot-2
                         width="100%">
-                        ${L}
+                        ${D}
                     </a>`;
-    return P && (h = `<strong>${h}</strong>`), p && (h = `<em>${h}</em>`), `
+    return w && (I = `<strong>${I}</strong>`), p && (I = `<em>${I}</em>`), `
             <td class="esd-block-text es-p10"
                 align="${c}"
                 width="100%"
@@ -92,7 +90,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
                 esd-extension-block-id="${O.NAME}"
                 style="${T}">
                 <p contenteditable="false" path="1"${R ? ` style="${R}"` : ""}>
-                    ${h}
+                    ${I}
                 </p>
             </td>
         `;
@@ -124,26 +122,26 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
                 product-attr="name"
                 data-slot-2
                 width="100%">
-                ${L}
+                ${D}
             </a>
         </p>
     </${b.BLOCK_TEXT}>
 `;
 }, et = (s, e, r, a, i, n, o, c, l, $) => {
-  let t = m;
+  let t = N;
   if (a && a.trim()) {
     const T = `${a.trim()}`;
-    t = (i || "0") === "1" ? `${m}&nbsp;${T}` : `${T}&nbsp;${m}`;
+    t = (i || "0") === "1" ? `${N}&nbsp;${T}` : `${T}&nbsp;${N}`;
   }
-  const E = i === "1" ? "after" : "before", _ = `data-formated="${r ? "true" : "false"}"`, u = `data-curency="${E}"`, P = a ? `data-currency_symbol="${a}"` : "", p = `data-single_price="${c ? "true" : "false"}"`, d = l === x.ORIENTATION.VERTICAL ? " es-p10b es-p10t" : "";
+  const E = i === "1" ? "after" : "before", _ = `data-formated="${r ? "true" : "false"}"`, u = `data-curency="${E}"`, w = a ? `data-currency_symbol="${a}"` : "", p = `data-single_price="${c ? "true" : "false"}"`, d = l === x.ORIENTATION.VERTICAL ? " es-p10b es-p10t" : "";
   if (n) {
-    const I = F(o || "color: #060606; white-space: nowrap; font-size: 20px;"), h = $ ? "" : ' style="display: none;"';
+    const h = L(o || "color: #060606; white-space: nowrap; font-size: 20px;"), I = $ ? "" : ' style="display: none;"';
     return `
         <td class="esd-block-text items-block-price${d}"
             align="center"
             esd-extension-block-id="${O.PRICE}"
             width="100%"
-            ${h}>
+            ${I}>
             <p product-attr="price"
                 contenteditable="false"
                 data-slot-4
@@ -151,9 +149,9 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
                 data-number="${e}"
                 ${_}
                 ${u}
-                ${P}
+                ${w}
                 ${p}
-                style="${I}">
+                style="${h}">
                 ${t}
             </p>
         </td>`;
@@ -181,19 +179,19 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
         </${b.BLOCK_TEXT}>
     `;
 }, at = (s, e, r, a, i, n, o = !0, c, l, $) => {
-  let t = S;
+  let t = m;
   if (a && a.trim()) {
     const T = `${a.trim()}`;
-    t = (i || "0") === "1" ? `${S}&nbsp;${T}` : `${T}&nbsp;${S}`;
+    t = (i || "0") === "1" ? `${m}&nbsp;${T}` : `${T}&nbsp;${m}`;
   }
-  const E = i === "1" ? "after" : "before", _ = `data-formated="${r ? "true" : "false"}"`, u = `data-curency="${E}"`, P = o ? "" : ' style="display: none;"', p = `data-single_price="${l ? "true" : "false"}"`, d = $ === x.ORIENTATION.VERTICAL ? " es-p10b es-p10t" : "";
+  const E = i === "1" ? "after" : "before", _ = `data-formated="${r ? "true" : "false"}"`, u = `data-curency="${E}"`, w = o ? "" : ' style="display: none;"', p = `data-single_price="${l ? "true" : "false"}"`, d = $ === x.ORIENTATION.VERTICAL ? " es-p10b es-p10t" : "";
   if (n) {
-    const I = F(c || "color: #cc0000; white-space: nowrap; font-size: 19px;");
+    const h = L(c || "color: #cc0000; white-space: nowrap; font-size: 19px;");
     return `
             <td class="esd-block-text items-block-price${d}"
                 esd-extension-block-id="${O.ORIGINAL_PRICE}"
                 width="100%"
-                align="center"${P}>
+                align="center"${w}>
                 <p
                     product-attr="originalPrice"
                     contenteditable="false"
@@ -204,7 +202,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
                     ${u}
                     ${a ? `data-currency_symbol="${a}"` : ""}
                     ${p}
-                    style="${I}">
+                    style="${h}">
                     <s>${t}</s>
                 </p>
             </td>
@@ -237,7 +235,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
 }, st = (s = !0, e, r) => {
   const a = s ? "" : 'style="display: none;"';
   if (e) {
-    const i = "font-size: 14px;", n = w(r || "", "text-align") || "center", o = F(r || i);
+    const i = "font-size: 14px;", n = A(r || "", "text-align") || "center", o = L(r || i);
     return `
             <td class="esd-block-text es-p10 document-node-component default-block-component selectable"
                 width="100%" align="${n}"
@@ -249,7 +247,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
                     width="100%"
                     path="1"
                     style="${o}">
-                    ${M}
+                    ${U}
                 </p>
             </td>`;
   }
@@ -266,13 +264,13 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
                 data-slot-3
                 contenteditable="false"
                 width="100%">
-                ${M}
+                ${U}
             </p>
         </${b.BLOCK_TEXT}>
     `;
 }, lt = (s, e, r = "Buy", a, i, n = !0, o = !0) => {
   if (a) {
-    const c = w(i || "", "background") || w(i || "", "background-color"), l = c ? `border-width: 0px; background: ${c};` : "border-width: 0px;", $ = n ? "es-fw" : "es-il", t = (i || "").replace("border-width: 0;", "");
+    const c = A(i || "", "background") || A(i || "", "background-color"), l = c ? `border-width: 0px; background: ${c};` : "border-width: 0px;", $ = n ? "es-fw" : "es-il", t = (i || "").replace("border-width: 0;", "");
     return `
         <td class="esd-block-button ins-button default-block-component selectable"
             align="center" width="100%" name="buy-button" caption="${r}"
@@ -328,10 +326,10 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
 }, it = (s) => s ? `<td align="center"
             esd-extension-block-id="items-block" width="560"
             data-number="4"
-            class="ins-product-td items-block items-block-v2 esd-items-block esd-extension-block esd-container-frame">` : C, z = (s, e, r, a, i, n, o, c, l, $, t, E, _, u = "horizontal", P, p, R, d) => {
-  const h = `${`data-type="${e}" data-number="${r}"`} data-orientation="${a}"`, y = s.replace(
+            class="ins-product-td items-block items-block-v2 esd-items-block esd-extension-block esd-container-frame">` : C, z = (s, e, r, a, i, n, o, c, l, $, t, E, _, u = "horizontal", w, p, R, d) => {
+  const I = `${`data-type="${e}" data-number="${r}"`} data-orientation="${a}"`, y = s.replace(
     /<td([^>]*class="[^"]*ins-product-td[^"]*"[^>]*)>/,
-    `<td$1 ${h}>`
+    `<td$1 ${I}>`
   ), X = l == null ? void 0 : l["data-product_image_control_image-height"], G = n ? Z(e, r, X, t) : J(e, r), K = (t == null ? void 0 : t.buttonLabel) || "Buy", B = (t == null ? void 0 : t.buttonFullWidth) !== void 0 ? t.buttonFullWidth : !0, W = e === x.ITEMS_TYPE.BROWSED_ITEMS ? !1 : t == null ? void 0 : t.quantityControlEnabled, Q = (t == null ? void 0 : t.buttonVisible) !== void 0 ? t.buttonVisible : (l == null ? void 0 : l["data-product_button_control_enabled"]) !== "false", k = (t == null ? void 0 : t.priceVisible) !== void 0 ? t.priceVisible : (l == null ? void 0 : l["data-product_price_control_enabled"]) !== "false", f = (t == null ? void 0 : t.originalPriceVisible) !== void 0 ? t.originalPriceVisible : (l == null ? void 0 : l["data-product_original_price_control_enabled"]) !== "false", H = y.replace("{-{-TEMPLATE_FIRST_LINE-}-}", it(n)).replace("{-{-PRODUCT_IMAGE-}-}", G).replace("{-{-PRODUCT_NAME-}-}", tt(e, n, a, E, t)).replaceAll(
     "{-{-PRODUCT_PRICE-}-}",
     V(et(
@@ -341,7 +339,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
       o,
       c,
       n,
-      P,
+      w,
       d,
       a,
       k
@@ -387,7 +385,7 @@ function Tt({
   priceStyles: E,
   originalPriceStyles: _,
   quantityStyles: u,
-  priceOrientation: P
+  priceOrientation: w
 }) {
   const p = Y[e].findIndex((y) => y.value === r);
   let R = "1";
@@ -398,10 +396,10 @@ function Tt({
     y && y[1] && ([, R] = y);
   }
   const d = (l == null ? void 0 : l.priceSinglePrice) ?? (c == null ? void 0 : c["data-product_price_control_single_price"]) === "1" ?? !1;
-  g = A.PAIRS_FOR_EXTENSION.imageSrc[e].DEFAULT[p >= 0 ? p : 0], L = A.PAIRS_FOR_EXTENSION.name[e].DEFAULT[p >= 0 ? p : 0];
-  const T = A.PAIRS_FOR_EXTENSION.price[e], I = A.PAIRS_FOR_EXTENSION.originalPrice[e];
-  d ? (m = o ? T.DEFAULT_SINGLE_PRICE_FORMATTED : T.DEFAULT_SINGLE_PRICE, S = o ? I.DEFAULT_SINGLE_PRICE_FORMATTED : I.DEFAULT_SINGLE_PRICE) : (m = o ? T.DEFAULT_PRICE_FORMATTED : T.DEFAULT_PRICE, S = o ? I.DEFAULT_PRICE_FORMATTED : I.DEFAULT_PRICE), M = A.PAIRS_FOR_EXTENSION.quantity[e].DEFAULT;
-  const h = P || (l == null ? void 0 : l.priceOrientation) || "horizontal";
+  M = P.PAIRS_FOR_EXTENSION.imageSrc[e].DEFAULT[p >= 0 ? p : 0], D = P.PAIRS_FOR_EXTENSION.name[e].DEFAULT[p >= 0 ? p : 0];
+  const T = P.PAIRS_FOR_EXTENSION.price[e], h = P.PAIRS_FOR_EXTENSION.originalPrice[e];
+  d ? (N = o ? T.DEFAULT_SINGLE_PRICE_FORMATTED : T.DEFAULT_SINGLE_PRICE, m = o ? h.DEFAULT_SINGLE_PRICE_FORMATTED : h.DEFAULT_SINGLE_PRICE) : (N = o ? T.DEFAULT_PRICE_FORMATTED : T.DEFAULT_PRICE, m = o ? h.DEFAULT_PRICE_FORMATTED : h.DEFAULT_PRICE), U = P.PAIRS_FOR_EXTENSION.quantity[e].DEFAULT;
+  const I = w || (l == null ? void 0 : l.priceOrientation) || "horizontal";
   return s === x.ORIENTATION.VERTICAL ? z(
     q,
     e,
@@ -417,7 +415,7 @@ function Tt({
     l,
     $,
     t,
-    h,
+    I,
     E,
     _,
     u,
@@ -437,7 +435,7 @@ function Tt({
     l,
     $,
     t,
-    h,
+    I,
     E,
     _,
     u,

package/dist/extensions/Blocks/Recommendation/constants/controlIds.js

@@ -1,4 +1,4 @@
-var o = /* @__PURE__ */ ((c) => (c.BUTTON_ALIGN = "recommendation-block-button-align-control", c.BUTTON_BORDER = "recommendation-block-button-border-control", c.BUTTON_BORDER_RADIUS = "recommendation-block-button-border-radius-control", c.BUTTON_COLOR = "recommendation-block-button-color-control", c.BUTTON_FIT_TO_CONTENT = "recommendation-block-button-fit-to-content-control", c.BUTTON_FONT_FAMILY = "recommendation-block-button-font-family-control", c.BUTTON_MARGINS = "recommendation-block-button-margins-control", c.BUTTON_PADDINGS = "recommendation-block-button-paddings-control", c.BUTTON_TEXT = "recommendation-block-button-text-control", c.BUTTON_TEXT_SIZE = "recommendation-block-button-text-size-control", c.BUTTON_TEXT_STYLE_AND_FONT_COLOR = "recommendation-block-button-text-style-and-font-color-control", c.NAME_ALIGN = "recommendation-block-name-align-control", c.NAME_BACKGROUND = "recommendation-block-name-background-control", c.NAME_COLOR = "recommendation-block-name-color-control", c.NAME_FONT_FAMILY = "recommendation-block-name-font-family-control", c.NAME_PADDINGS = "recommendation-block-name-paddings-control", c.NAME_SIZE = "recommendation-block-name-size-control", c.NAME_STYLE = "recommendation-block-name-style-control", c.NAME_TEXT_TRIM = "recommendation-block-name-text-trim-control", c.PRICE_ALIGN = "recommendation-block-price-align-control", c.PRICE_BACKGROUND = "recommendation-block-price-background-control", c.PRICE_COLOR = "recommendation-block-price-color-control", c.PRICE_FONT_FAMILY = "recommendation-block-price-font-family-control", c.PRICE_PADDINGS = "recommendation-block-price-paddings-control", c.PRICE_SIZE = "recommendation-block-price-size-control", c.PRICE_STYLE = "recommendation-block-price-style-control", c.OLD_PRICE_ALIGN = "recommendation-block-old-price-align-control", c.OLD_PRICE_BACKGROUND = "recommendation-block-old-price-background-control", c.OLD_PRICE_COLOR = "recommendation-block-old-price-color-control", c.OLD_PRICE_FONT_FAMILY = "recommendation-block-old-price-font-family-control", c.OLD_PRICE_PADDINGS = "recommendation-block-old-price-paddings-control", c.OLD_PRICE_SIZE = "recommendation-block-old-price-size-control", c.OLD_PRICE_STYLE = "recommendation-block-old-price-style-control", c.OMNIBUS_PRICE_ALIGN = "recommendation-block-omnibus-price-align-control", c.OMNIBUS_PRICE_BACKGROUND = "recommendation-block-omnibus-price-background-control", c.OMNIBUS_PRICE_COLOR = "recommendation-block-omnibus-price-color-control", c.OMNIBUS_PRICE_FONT_FAMILY = "recommendation-block-omnibus-price-font-family-control", c.OMNIBUS_PRICE_PADDINGS = "recommendation-block-omnibus-price-paddings-control", c.OMNIBUS_PRICE_SIZE = "recommendation-block-omnibus-price-size-control", c.OMNIBUS_PRICE_STYLE = "recommendation-block-omnibus-price-style-control", c.OMNIBUS_PRICE_TEXT_BEFORE = "recommendation-block-omnibus-price-text-before-control", c.OMNIBUS_PRICE_TEXT_AFTER = "recommendation-block-omnibus-price-text-after-control", c.OMNIBUS_DISCOUNT_ALIGN = "recommendation-block-omnibus-discount-align-control", c.OMNIBUS_DISCOUNT_BACKGROUND = "recommendation-block-omnibus-discount-background-control", c.OMNIBUS_DISCOUNT_COLOR = "recommendation-block-omnibus-discount-color-control", c.OMNIBUS_DISCOUNT_FONT_FAMILY = "recommendation-block-omnibus-discount-font-family-control", c.OMNIBUS_DISCOUNT_PADDINGS = "recommendation-block-omnibus-discount-paddings-control", c.OMNIBUS_DISCOUNT_SIZE = "recommendation-block-omnibus-discount-size-control", c.OMNIBUS_DISCOUNT_STYLE = "recommendation-block-omnibus-discount-style-control", c.OMNIBUS_DISCOUNT_TEXT_BEFORE = "recommendation-block-omnibus-discount-text-before-control", c.OMNIBUS_DISCOUNT_TEXT_AFTER = "recommendation-block-omnibus-discount-text-after-control", c.IMAGE_SIZE = "recommendation-block-image-size-control", c.IMAGE_MARGINS = "recommendation-block-image-margins-control", c.CUSTOM_ATTR_ALIGN = "recommendation-block-custom-attr-align-control", c.CUSTOM_ATTR_BACKGROUND = "recommendation-block-custom-attr-background-control", c.CUSTOM_ATTR_COLOR = "recommendation-block-custom-attr-color-control", c.CUSTOM_ATTR_FONT_FAMILY = "recommendation-block-custom-attr-font-family-control", c.CUSTOM_ATTR_PADDINGS = "recommendation-block-custom-attr-paddings-control", c.CUSTOM_ATTR_SIZE = "recommendation-block-custom-attr-size-control", c.CUSTOM_ATTR_STYLE = "recommendation-block-custom-attr-style-control", c.SYNC_INFO_MESSAGE = "recommendation-block-sync-info-message", c))(o || {});
+var o = /* @__PURE__ */ ((c) => (c.BUTTON_ALIGN = "recommendation-block-button-align-control", c.BUTTON_BORDER = "recommendation-block-button-border-control", c.BUTTON_BORDER_RADIUS = "recommendation-block-button-border-radius-control", c.BUTTON_COLOR = "recommendation-block-button-color-control", c.BUTTON_FIT_TO_CONTENT = "recommendation-block-button-fit-to-content-control", c.BUTTON_FONT_FAMILY = "recommendation-block-button-font-family-control", c.BUTTON_MARGINS = "recommendation-block-button-margins-control", c.BUTTON_PADDINGS = "recommendation-block-button-paddings-control", c.BUTTON_TEXT = "recommendation-block-button-text-control", c.BUTTON_TEXT_SIZE = "recommendation-block-button-text-size-control", c.BUTTON_TEXT_STYLE_AND_FONT_COLOR = "recommendation-block-button-text-style-and-font-color-control", c.NAME_ALIGN = "recommendation-block-name-align-control", c.NAME_BACKGROUND = "recommendation-block-name-background-control", c.NAME_COLOR = "recommendation-block-name-color-control", c.NAME_FONT_FAMILY = "recommendation-block-name-font-family-control", c.NAME_PADDINGS = "recommendation-block-name-paddings-control", c.NAME_SIZE = "recommendation-block-name-size-control", c.NAME_STYLE = "recommendation-block-name-style-control", c.NAME_TEXT_TRIM = "recommendation-block-name-text-trim-control", c.PRICE_ALIGN = "recommendation-block-price-align-control", c.PRICE_BACKGROUND = "recommendation-block-price-background-control", c.PRICE_COLOR = "recommendation-block-price-color-control", c.PRICE_FONT_FAMILY = "recommendation-block-price-font-family-control", c.PRICE_PADDINGS = "recommendation-block-price-paddings-control", c.PRICE_SIZE = "recommendation-block-price-size-control", c.PRICE_STYLE = "recommendation-block-price-style-control", c.OLD_PRICE_ALIGN = "recommendation-block-old-price-align-control", c.OLD_PRICE_BACKGROUND = "recommendation-block-old-price-background-control", c.OLD_PRICE_COLOR = "recommendation-block-old-price-color-control", c.OLD_PRICE_FONT_FAMILY = "recommendation-block-old-price-font-family-control", c.OLD_PRICE_PADDINGS = "recommendation-block-old-price-paddings-control", c.OLD_PRICE_SIZE = "recommendation-block-old-price-size-control", c.OLD_PRICE_STYLE = "recommendation-block-old-price-style-control", c.OMNIBUS_PRICE_ALIGN = "recommendation-block-omnibus-price-align-control", c.OMNIBUS_PRICE_BACKGROUND = "recommendation-block-omnibus-price-background-control", c.OMNIBUS_PRICE_COLOR = "recommendation-block-omnibus-price-color-control", c.OMNIBUS_PRICE_FONT_FAMILY = "recommendation-block-omnibus-price-font-family-control", c.OMNIBUS_PRICE_PADDINGS = "recommendation-block-omnibus-price-paddings-control", c.OMNIBUS_PRICE_SIZE = "recommendation-block-omnibus-price-size-control", c.OMNIBUS_PRICE_STYLE = "recommendation-block-omnibus-price-style-control", c.OMNIBUS_PRICE_TEXT_BEFORE = "recommendation-block-omnibus-price-text-before-control", c.OMNIBUS_PRICE_TEXT_AFTER = "recommendation-block-omnibus-price-text-after-control", c.OMNIBUS_DISCOUNT_ALIGN = "recommendation-block-omnibus-discount-align-control", c.OMNIBUS_DISCOUNT_BACKGROUND = "recommendation-block-omnibus-discount-background-control", c.OMNIBUS_DISCOUNT_COLOR = "recommendation-block-omnibus-discount-color-control", c.OMNIBUS_DISCOUNT_FONT_FAMILY = "recommendation-block-omnibus-discount-font-family-control", c.OMNIBUS_DISCOUNT_PADDINGS = "recommendation-block-omnibus-discount-paddings-control", c.OMNIBUS_DISCOUNT_SIZE = "recommendation-block-omnibus-discount-size-control", c.OMNIBUS_DISCOUNT_STYLE = "recommendation-block-omnibus-discount-style-control", c.OMNIBUS_DISCOUNT_TEXT_BEFORE = "recommendation-block-omnibus-discount-text-before-control", c.OMNIBUS_DISCOUNT_TEXT_AFTER = "recommendation-block-omnibus-discount-text-after-control", c.IMAGE_SIZE = "recommendation-block-image-size-control", c.IMAGE_MARGINS = "recommendation-block-image-margins-control", c.CUSTOM_ATTR_ALIGN = "recommendation-block-custom-attr-align-control", c.CUSTOM_ATTR_BACKGROUND = "recommendation-block-custom-attr-background-control", c.CUSTOM_ATTR_COLOR = "recommendation-block-custom-attr-color-control", c.CUSTOM_ATTR_FONT_FAMILY = "recommendation-block-custom-attr-font-family-control", c.CUSTOM_ATTR_PADDINGS = "recommendation-block-custom-attr-paddings-control", c.CUSTOM_ATTR_SIZE = "recommendation-block-custom-attr-size-control", c.CUSTOM_ATTR_STYLE = "recommendation-block-custom-attr-style-control", c.CUSTOM_ATTR_TEXT_TRIM = "recommendation-block-custom-attr-text-trim-control", c.SYNC_INFO_MESSAGE = "recommendation-block-sync-info-message", c))(o || {});
 export {
   o as RecommendationControlId
 };

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

@@ -1,21 +1,22 @@
-import { TextPaddingsBuiltInControl as d, ButtonBackgroundColorBuiltInControl as c, TextFontFamilyBuiltInControl as u, TextStyleBuiltInControl as i, TextSizeBuiltInControl as C, TextColorBuiltInControl as g, TextAlignBuiltInControl as a } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { TextPaddingsBuiltInControl as d, ButtonBackgroundColorBuiltInControl as i, TextFontFamilyBuiltInControl as u, TextStyleBuiltInControl as c, TextSizeBuiltInControl as C, TextColorBuiltInControl as g, TextAlignBuiltInControl as a } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { RecommendationBlockId as l } from "../../constants/blockIds.js";
 import { RecommendationControlId as e } from "../../constants/controlIds.js";
-import { BLOCK_ROOT_SELECTOR as I, ATTR_PRODUCT_ATTR as s } from "../../constants/selectors.js";
+import { BLOCK_ROOT_SELECTOR as A, ATTR_PRODUCT_ATTR as s } from "../../constants/selectors.js";
+import { CustomAttributeTextTrimControl as I } from "./textTrim.js";
 function o(t) {
-  const n = t.closest(I);
-  if (!n)
+  const r = t.closest(A);
+  if (!r)
     return [];
-  const r = t.asElement().getAttribute(s);
-  if (r) {
-    const T = `[esd-extension-block-id="${l.CUSTOM_ATTRIBUTE}"][${s}="${r}"]`;
-    return n.querySelectorAll(T);
+  const n = t.asElement().getAttribute(s);
+  if (n) {
+    const T = `[esd-extension-block-id="${l.CUSTOM_ATTRIBUTE}"][${s}="${n}"]`;
+    return r.querySelectorAll(T);
   }
-  return n.querySelectorAll(
+  return r.querySelectorAll(
     `[esd-extension-block-id="${l.CUSTOM_ATTRIBUTE}"]`
   );
 }
-const A = class extends a {
+const m = class extends a {
   getId() {
     return e.CUSTOM_ATTR_ALIGN;
   }
@@ -36,7 +37,7 @@ const A = class extends a {
   getTargetNodes(t) {
     return o(t);
   }
-}, m = class extends i {
+}, x = class extends c {
   getId() {
     return e.CUSTOM_ATTR_STYLE;
   }
@@ -50,29 +51,31 @@ const A = class extends a {
   getTargetNodes(t) {
     return o(t);
   }
-}, R = class extends c {
+}, R = class extends i {
   getId() {
     return e.CUSTOM_ATTR_BACKGROUND;
   }
   getTargetNodes(t) {
     return o(t);
   }
-}, x = class extends d {
+}, B = class extends d {
   getId() {
     return e.CUSTOM_ATTR_PADDINGS;
   }
   getTargetNodes(t) {
     return o(t);
   }
-}, k = {
-  align: A,
+}, p = {
+  align: m,
   color: _,
   size: S,
-  style: m,
+  style: x,
   fontFamily: O,
   background: R,
-  paddings: x
+  paddings: B,
+  textTrim: I
 };
 export {
-  k as CustomAttributeControls
+  p as CustomAttributeControls,
+  I as CustomAttributeTextTrimControl
 };

package/dist/extensions/Blocks/Recommendation/controls/customAttribute/textTrim.js

@@ -0,0 +1,99 @@
+import { ModificationDescription as T } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as m } from "../../../common-control.js";
+import { RecommendationBlockId as n } from "../../constants/blockIds.js";
+import { RecommendationControlId as l } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as u, ATTR_PRODUCT_ATTR as a } from "../../constants/selectors.js";
+import { CSS_CLASS_TEXT_TRIM as o, ensureTextTrimCssRulesExist as c } from "../shared/textTrimCssRules.js";
+const i = {
+  TEXT_TRIM_ENABLED: "customAttrTextTrimEnabled"
+};
+class g extends m {
+  getId() {
+    return l.CUSTOM_ATTR_TEXT_TRIM;
+  }
+  getTemplate() {
+    return `
+            <hr style="margin: 0; border: none; border-top: 1px solid #e0e0e0;" />
+            <div class="custom-attr-text-trim-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: this.api.translate("Trim Long Text") }),
+      this._GuToggle(i.TEXT_TRIM_ENABLED)
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._setFormValues();
+  }
+  // ========================================================================
+  // State Reading
+  // ========================================================================
+  _setFormValues() {
+    this.api.updateValues({
+      [i.TEXT_TRIM_ENABLED]: this._getCurrentTrimState()
+    });
+  }
+  _getCurrentTrimState() {
+    if (!this.currentNode || !("hasClass" in this.currentNode))
+      return !1;
+    if (this.currentNode.hasClass(o))
+      return !0;
+    const t = this._getTargetElements();
+    return t.length > 0 && "hasClass" in t[0] ? t[0].hasClass(o) : !1;
+  }
+  // ========================================================================
+  // Target Element Discovery (per-attribute scoping)
+  // ========================================================================
+  /**
+   * Finds all custom attribute elements of the same type as the current node.
+   *
+   * Similar to getCustomAttrTargetNodes in customAttribute/index.ts, but adapted
+   * for CommonControl lifecycle where currentNode is a class property (not a
+   * parameter from Stripo's getTargetNodes override).
+   */
+  _getTargetElements() {
+    if (!this.currentNode || !("closest" in this.currentNode))
+      return [];
+    const t = this.currentNode.closest(u);
+    if (!t)
+      return [];
+    const e = "asElement" in this.currentNode ? this.currentNode.asElement().getAttribute(a) : null;
+    if (e) {
+      const s = `[esd-extension-block-id="${n.CUSTOM_ATTRIBUTE}"][${a}="${e}"]`;
+      return Array.from(t.querySelectorAll(s));
+    }
+    return Array.from(
+      t.querySelectorAll(
+        `[esd-extension-block-id="${n.CUSTOM_ATTRIBUTE}"]`
+      )
+    );
+  }
+  // ========================================================================
+  // Toggle Handler
+  // ========================================================================
+  _onTextTrimChange(t) {
+    const e = this._getTargetElements();
+    if (!e.length)
+      return;
+    t && c(this.api);
+    const r = this.api.getDocumentModifier();
+    e.forEach((s) => {
+      t ? r.modifyHtml(s).setClass(o) : r.modifyHtml(s).removeClass(o);
+    }), r.apply(
+      new T(
+        t ? "Enable custom attribute text trimming" : "Disable custom attribute text trimming"
+      )
+    );
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(i.TEXT_TRIM_ENABLED, (t) => {
+      this._onTextTrimChange(t);
+    });
+  }
+}
+export {
+  g as CustomAttributeTextTrimControl
+};

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

@@ -1,7 +1,7 @@
-var c = Object.defineProperty;
-var h = (s, i, t) => i in s ? c(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t;
-var a = (s, i, t) => h(s, typeof i != "symbol" ? i + "" : i, t);
-import { UEAttr as l } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+var l = Object.defineProperty;
+var c = (s, i, t) => i in s ? l(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t;
+var a = (s, i, t) => c(s, typeof i != "symbol" ? i + "" : i, t);
+import { UEAttr as h } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as d } from "../../../common-control.js";
 import { RecommendationConfigService as n } from "../../services/configService.js";
 import { useRecommendationExtensionStore as m } from "../../store/recommendation.js";
@@ -42,7 +42,7 @@ class T extends d {
     this._initializeSelectItems(), this._setFormValues(), this._listenToFormUpdates();
   }
   onTemplateNodeUpdated(t) {
-    super.onTemplateNodeUpdated(t), this._setFormValues();
+    super.onTemplateNodeUpdated(t), this._initializeSelectItems(), this._setFormValues();
   }
   _setFormValues() {
     const t = n.getConfig(this.currentNode);
@@ -58,7 +58,7 @@ class T extends d {
       try {
         this.api.setUIEAttribute(
           e.ALGORITHM,
-          l.SELECTPICKER.items,
+          h.SELECTPICKER.items,
           t
         );
       } catch (r) {

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

@@ -114,7 +114,9 @@ class H extends g {
     var r;
     super.onTemplateNodeUpdated(t);
     const e = this._getRecommendationIdFromNode(t);
-    e !== null && e !== this.store.currentRecommendationId && this.store.setCurrentBlock(e), this._syncNodeConfigToStore(), e !== null && !((r = this.store.blockStates[e]) != null && r.isInitialized) && this._fetchBlockData(e), [
+    e !== null && e !== this.store.currentRecommendationId && this.store.setCurrentBlock(e), e !== null && this._syncNodeConfigToStore(), e !== null && !((r = this.store.blockStates[e]) != null && r.isInitialized) && this._fetchBlockData(e).then(() => {
+      this._initializeSubControls();
+    }), [
       this.layoutOrientationControl,
       this.productCountControl,
       this.algorithmControl,

package/dist/extensions/Blocks/Recommendation/controls/name/textTrim.js

@@ -1,14 +1,15 @@
-import { ModificationDescription as a } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as d } from "../../../common-control.js";
-import { RecommendationBlockId as l } from "../../constants/blockIds.js";
-import { RecommendationControlId as m } from "../../constants/controlIds.js";
-import { BLOCK_ROOT_SELECTOR as u } from "../../constants/selectors.js";
-const i = {
+import { ModificationDescription as l } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as u } from "../../../common-control.js";
+import { RecommendationBlockId as a } from "../../constants/blockIds.js";
+import { RecommendationControlId as d } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as m } from "../../constants/selectors.js";
+import { CSS_CLASS_TEXT_TRIM as r, ensureTextTrimCssRulesExist as T } from "../shared/textTrimCssRules.js";
+const s = {
   TEXT_TRIM_ENABLED: "textTrimEnabled"
-}, o = "text-trim-enabled", c = `.${o}`, T = `.${o} p`, p = `.${o} { max-width: 0; }`, _ = `.${o} p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; display: block; }`;
-class N extends d {
+};
+class N extends u {
   getId() {
-    return m.NAME_TEXT_TRIM;
+    return d.NAME_TEXT_TRIM;
   }
   getTemplate() {
     return `
@@ -16,7 +17,7 @@ class N extends d {
             <div class="name-text-trim-control-container">
                 ${this._GuTwoColumns([
       this._GuLabel({ text: this.api.translate("Trim Long Text") }),
-      this._GuToggle(i.TEXT_TRIM_ENABLED)
+      this._GuToggle(s.TEXT_TRIM_ENABLED)
     ])}
             </div>
         `;
@@ -30,76 +31,45 @@ class N extends d {
   _setFormValues() {
     const e = this._getCurrentTrimState();
     this.api.updateValues({
-      [i.TEXT_TRIM_ENABLED]: e
+      [s.TEXT_TRIM_ENABLED]: e
     });
   }
   _getCurrentTrimState() {
     if (!this.currentNode || !("hasClass" in this.currentNode))
       return !1;
-    if (this.currentNode.hasClass(o))
+    if (this.currentNode.hasClass(r))
       return !0;
-    const e = this.currentNode.closest(u);
+    const e = this.currentNode.closest(m);
     if (!e)
       return !1;
     const t = e.querySelector(
-      `[esd-extension-block-id="${l.NAME}"]`
+      `[esd-extension-block-id="${a.NAME}"]`
     );
-    return t && "hasClass" in t ? t.hasClass(o) : !1;
-  }
-  /**
-   * Finds an existing CSS rule in the document stylesheet by exact query
-   * @param query - The CSS query to search for (uses Stripo's CSS query syntax)
-   * @returns The CSS rule node if found, undefined otherwise
-   */
-  _findCssRule(e) {
-    const t = this.api.getDocumentRootCssNode();
-    if (t)
-      return t.querySelector(e);
-  }
-  /**
-   * Finds the .text-trim-enabled p rule by searching all text-trim rules and comparing selectors
-   * This is needed because Stripo's CSS query syntax interprets spaces as path separators
-   * @returns true if the rule exists
-   */
-  _hasParagraphRule() {
-    const e = this.api.getDocumentRootCssNode();
-    return e ? e.querySelectorAll(`*${o}`).some((s) => "getSelector" in s && typeof s.getSelector == "function" ? s.getSelector() === T : !1) : !1;
-  }
-  /**
-   * Ensures the text-trim CSS rules exist in the document stylesheet
-   * Only adds rules if they don't already exist (prevents duplicates across multiple blocks)
-   */
-  _ensureCssRulesExist() {
-    const e = this.api.getDocumentRootCssNode();
-    if (!e)
-      return;
-    const t = this.api.getDocumentModifier();
-    let s = !1;
-    this._findCssRule(c) || (t.modifyCss(e).appendRule(p), s = !0), this._hasParagraphRule() || (t.modifyCss(e).appendRule(_), s = !0), s && t.apply(new a("Add text trim CSS rules"));
+    return t && "hasClass" in t ? t.hasClass(r) : !1;
   }
   _onTextTrimChange(e) {
     if (!this.currentNode || !("closest" in this.currentNode))
       return;
-    const t = this.currentNode.closest(u);
+    const t = this.currentNode.closest(m);
     if (!t || !("querySelectorAll" in t))
       return;
-    const s = Array.from(
-      t.querySelectorAll(`[esd-extension-block-id="${l.NAME}"]`)
+    const i = Array.from(
+      t.querySelectorAll(`[esd-extension-block-id="${a.NAME}"]`)
     );
-    if (!s.length)
+    if (!i.length)
       return;
-    e && this._ensureCssRulesExist();
-    const r = this.api.getDocumentModifier();
-    s.forEach((n) => {
-      e ? r.modifyHtml(n).setClass(o) : r.modifyHtml(n).removeClass(o);
-    }), r.apply(
-      new a(
+    e && T(this.api);
+    const o = this.api.getDocumentModifier();
+    i.forEach((n) => {
+      e ? o.modifyHtml(n).setClass(r) : o.modifyHtml(n).removeClass(r);
+    }), o.apply(
+      new l(
         e ? "Enable product name text trimming" : "Disable product name text trimming"
       )
     );
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(i.TEXT_TRIM_ENABLED, (e) => {
+    this.api.onValueChanged(s.TEXT_TRIM_ENABLED, (e) => {
       this._onTextTrimChange(e);
     });
   }