@useinsider/guido 1.0.3-beta.b163fb8 → 1.0.3-beta.b363d6c

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

@@ -1,70 +1,70 @@
 var d = Object.defineProperty;
 var h = (i, t, e) => t in i ? d(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var s = (i, t, e) => h(i, typeof t != "symbol" ? t + "" : t, e);
-import { ModificationDescription as n, UIElementType as a, UEAttr as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+var n = (i, t, e) => h(i, typeof t != "symbol" ? t + "" : t, e);
+import { ModificationDescription as a, UIElementType as l, UEAttr as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as c } from "../../../common-control.js";
-import { ItemsBlockControlId as l } from "../../enums/controlEnums.js";
+import { ItemsBlockControlId as p } from "../../enums/controlEnums.js";
 import { SETTINGS_ENUMS as I } from "../../enums/settingsEnums.js";
 import { useItemsBlockStore as N } from "../../store/items-block.js";
-import { syncNameTrimmingFromAttributes as y } from "../../utils/syncAttributesFromConfigBlock.js";
-import { updateConfigBlockAttributes as M } from "../../utils/updateAttributes.js";
-const f = l.NAME_TRIMMING, r = {
+import { syncNameTrimmingFromAttributes as M } from "../../utils/syncAttributesFromConfigBlock.js";
+import { updateConfigBlockAttributes as u } from "../../utils/updateAttributes.js";
+const y = p.NAME_TRIMMING, o = {
   TRIMMING: "trimming"
 };
-class R extends c {
+class _ extends c {
   constructor() {
     super(...arguments);
-    s(this, "store", N());
+    n(this, "store", N());
   }
   getId() {
-    return f;
+    return y;
   }
   getTemplate() {
     return `
-            <div class="${l.NAME_TRIMMING}">
+            <div class="${p.NAME_TRIMMING}">
                 ${this._getTextTrimming()}
             </div>
         `;
   }
   onRender() {
-    this.api.updateValues({ [r.TRIMMING]: this.store.nameTrimming }), this.api.onValueChanged(r.TRIMMING, (e) => {
+    this.api.updateValues({ [o.TRIMMING]: this.store.nameTrimming }), this.api.onValueChanged(o.TRIMMING, (e) => {
       this._onTrimmingChange(e);
     });
   }
   onTemplateNodeUpdated(e) {
     super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(
-      () => y(this.currentNode),
+      () => M(this.currentNode),
       () => {
-        this.api.updateValues({ [r.TRIMMING]: this.store.nameTrimming });
+        this.api.updateValues({ [o.TRIMMING]: this.store.nameTrimming });
       }
-    ), this.store.nameTrimming && this._applyTrimmingStyles();
+    );
   }
   _onTrimmingChange(e) {
-    this.store.setNameTrimming(e), M(this.currentNode, this.api), this.api.updateValues({ [r.TRIMMING]: e }), this._applyTrimmingStyles(e);
+    this.store.setNameTrimming(e), u(this.currentNode, this.api), this.api.updateValues({ [o.TRIMMING]: e }), this._applyTrimmingStyles(e);
   }
   _applyTrimmingStyles(e) {
-    var m;
-    const o = (m = this.currentNode) == null ? void 0 : m.querySelector("p > a");
-    if (!o)
+    var s;
+    const r = (s = this.currentNode) == null ? void 0 : s.querySelector("p > a");
+    if (!r)
       return;
-    const p = e !== void 0 ? e : this.store.nameTrimming, T = this.store.orientation === I.ORIENTATION.VERTICAL;
-    p ? this.api.getDocumentModifier().modifyHtml(o).setStyle("white-space", "nowrap").setStyle("overflow", "hidden").setStyle("text-overflow", "ellipsis").setStyle("max-width", T ? "130px" : "550px").apply(new n("Text Trimming Enabled")) : this.api.getDocumentModifier().modifyHtml(o).removeStyle("white-space").removeStyle("overflow").removeStyle("text-overflow").removeStyle("max-width").apply(new n("Text Trimming Disabled"));
+    const T = e !== void 0 ? e : this.store.nameTrimming, m = this.store.orientation === I.ORIENTATION.VERTICAL;
+    T ? this.api.getDocumentModifier().modifyHtml(r).setStyle("white-space", "nowrap").setStyle("overflow", "hidden").setStyle("text-overflow", "ellipsis").setStyle("max-width", m ? "130px" : "520px").apply(new a("Text Trimming Enabled")) : this.api.getDocumentModifier().modifyHtml(r).removeStyle("white-space").removeStyle("overflow").removeStyle("text-overflow").removeStyle("max-width").setStyle("max-width", m ? "130px" : "520px").apply(new a("Text Trimming Disabled"));
   }
   _getTextTrimming() {
     return `
             <div class="container">
                 <div class="display-flex align-items-center justify-content-between">
-                    <${a.LABEL} 
+                    <${l.LABEL} 
                         ${g.LABEL.text}="${this.api.translate("Text Trimming")}"
                     >
-                    </${a.LABEL}>
-                    ${this._GuToggle(r.TRIMMING)}
+                    </${l.LABEL}>
+                    ${this._GuToggle(o.TRIMMING)}
                 </div>
             </div>
         `;
   }
 }
 export {
-  f as CONTROL_BLOCK_ID,
-  R as NameTrimmingControl
+  y as CONTROL_BLOCK_ID,
+  _ as NameTrimmingControl
 };

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

@@ -1,29 +1,29 @@
-var P = Object.defineProperty;
-var M = (T, u, e) => u in T ? P(T, u, { enumerable: !0, configurable: !0, writable: !0, value: e }) : T[u] = e;
-var C = (T, u, e) => M(T, typeof u != "symbol" ? u + "" : u, e);
-import { UEAttr as b, ModificationDescription as d } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as D } from "../../common-control.js";
-import { ItemsBlockId as m } from "../enums/controlEnums.js";
-import { productPairs as p, templateFirstLine as A } from "../enums/productEnums.js";
-import { ItemTypeOptions as R, OrientationOptions as L, ItemInCartOptions as N, SETTINGS_ENUMS as S } from "../enums/settingsEnums.js";
-import x from "../layouts/horizontal.html.js";
-import H from "../layouts/vertical.html.js";
-import { useItemsBlockStore as U } from "../store/items-block.js";
-import { getDefaultTemplate as F } from "../template.js";
-import { syncCurrencySymbolFromAttributes as $, syncCurrencyLocationFromAttributes as k, syncFormattedPriceFromAttributes as q } from "../utils/syncAttributesFromConfigBlock.js";
+var M = Object.defineProperty;
+var D = (h, p, e) => p in h ? M(h, p, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[p] = e;
+var b = (h, p, e) => D(h, typeof p != "symbol" ? p + "" : p, e);
+import { UEAttr as A, ModificationDescription as d } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as x } from "../../common-control.js";
+import { ItemsBlockId as l } from "../enums/controlEnums.js";
+import { productPairs as T, templateFirstLine as R } from "../enums/productEnums.js";
+import { ItemTypeOptions as P, OrientationOptions as L, ItemInCartOptions as N, SETTINGS_ENUMS as S, DefaultConfigValues as H } from "../enums/settingsEnums.js";
+import U from "../layouts/horizontal.html.js";
+import F from "../layouts/vertical.html.js";
+import { useItemsBlockStore as $ } from "../store/items-block.js";
+import { getDefaultTemplate as q } from "../template.js";
+import { syncCurrencySymbolFromAttributes as k, syncCurrencyLocationFromAttributes as w, syncFormattedPriceFromAttributes as B } from "../utils/syncAttributesFromConfigBlock.js";
 import { updateConfigBlockAttributes as f } from "../utils/updateAttributes.js";
-const w = "ui-elements-items-block", o = {
+const G = "ui-elements-items-block", o = {
   ITEMS_TYPE: "itemsType",
   ORIENTATION: "orientation",
   ITEM_IDS: "itemIds"
 };
-class Z extends D {
+class te extends x {
   constructor() {
     super(...arguments);
-    C(this, "store", U());
+    b(this, "store", $());
   }
   getId() {
-    return w;
+    return G;
   }
   getTemplate() {
     return `
@@ -44,7 +44,7 @@ class Z extends D {
   onTemplateNodeUpdated(e) {
     super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(
       () => {
-        $(this.currentNode), k(this.currentNode), q(this.currentNode);
+        k(this.currentNode), w(this.currentNode), B(this.currentNode);
       },
       () => {
         this.api.updateValues({
@@ -67,7 +67,7 @@ class Z extends D {
         name: o.ITEMS_TYPE,
         className: "es-100",
         placeholder: "Select Item Type",
-        options: R
+        options: P
       })
     ])}
         `;
@@ -97,7 +97,9 @@ class Z extends D {
         `;
   }
   _onOrientationChange(e) {
-    console.debug("Orientation changed to: ", e), this.store.setOrientation(e), this.api.updateValues({ [o.ORIENTATION]: e }), f(this.currentNode, this.api), this._reOrderTemplate(), this._recalculateTrimming();
+    console.debug("Orientation changed to: ", e), this.store.setOrientation(e), this.api.updateValues({ [o.ORIENTATION]: e }), f(this.currentNode, this.api), this._reOrderTemplate(), setTimeout(() => {
+      this._recalculateTrimming();
+    }, 50);
   }
   _onItemsTypeChange(e) {
     const i = S.ITEMS_TYPE[e], t = N[e], r = t == null ? void 0 : t[0];
@@ -109,8 +111,8 @@ class Z extends D {
   _initializeSelectItems() {
     this.api.setUIEAttribute(
       o.ITEMS_TYPE,
-      b.SELECTPICKER.items,
-      R
+      A.SELECTPICKER.items,
+      P
     );
     const { itemsType: e, itemIds: i } = this.store;
     this.api.updateValues({
@@ -119,7 +121,7 @@ class Z extends D {
     const t = N[e];
     this.api.setUIEAttribute(
       o.ITEM_IDS,
-      b.SELECTPICKER.items,
+      A.SELECTPICKER.items,
       t
     ), this.api.updateValues({
       [o.ITEM_IDS]: i
@@ -146,7 +148,7 @@ class Z extends D {
       currencyLocation: n,
       formattedPrice: s
     } = this.store;
-    this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(F({
+    this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(q({
       orientation: e,
       itemsType: i,
       itemId: t,
@@ -158,22 +160,22 @@ class Z extends D {
   _getTemplateData() {
     const { itemsType: e, itemIds: i, formattedPrice: t } = this.store, r = N[e].findIndex((s) => s.value === i), n = r > -1 ? r : 0;
     return {
-      imageSrc: p.PAIRS_FOR_EXTENSION.imageSrc[e].DEFAULT[n],
-      name: p.PAIRS_FOR_EXTENSION.name[e].DEFAULT[n],
-      price: t ? p.PAIRS_FOR_EXTENSION.price[e].DEFAULT_PRICE_FORMATTED : p.PAIRS_FOR_EXTENSION.price[e].DEFAULT_PRICE,
-      originalPrice: t ? p.PAIRS_FOR_EXTENSION.originalPrice[e].DEFAULT_PRICE_FORMATTED : p.PAIRS_FOR_EXTENSION.originalPrice[e].DEFAULT_PRICE,
-      quantity: p.PAIRS_FOR_EXTENSION.quantity[e].DEFAULT,
-      button: p.PAIRS_FOR_EXTENSION.button[e].DEFAULT_LABEL
+      imageSrc: T.PAIRS_FOR_EXTENSION.imageSrc[e].DEFAULT[n],
+      name: T.PAIRS_FOR_EXTENSION.name[e].DEFAULT[n],
+      price: t ? T.PAIRS_FOR_EXTENSION.price[e].DEFAULT_PRICE_FORMATTED : T.PAIRS_FOR_EXTENSION.price[e].DEFAULT_PRICE,
+      originalPrice: t ? T.PAIRS_FOR_EXTENSION.originalPrice[e].DEFAULT_PRICE_FORMATTED : T.PAIRS_FOR_EXTENSION.originalPrice[e].DEFAULT_PRICE,
+      quantity: T.PAIRS_FOR_EXTENSION.quantity[e].DEFAULT,
+      button: T.PAIRS_FOR_EXTENSION.button[e].DEFAULT_LABEL
     };
   }
   _updateImageSrc(e) {
     var t;
-    const i = (t = this.currentNode) == null ? void 0 : t.querySelector(`[esd-extension-block-id="${m.IMAGE}"] img`);
+    const i = (t = this.currentNode) == null ? void 0 : t.querySelector(`[esd-extension-block-id="${l.IMAGE}"] img`);
     i && this.api.getDocumentModifier().modifyHtml(i).setAttribute("src", e).apply(new d("Updated image src"));
   }
   _updateName(e) {
     var n;
-    const i = (n = this.currentNode) == null ? void 0 : n.querySelector(`[esd-extension-block-id="${m.NAME}"]`);
+    const i = (n = this.currentNode) == null ? void 0 : n.querySelector(`[esd-extension-block-id="${l.NAME}"]`);
     if (!i)
       return;
     const t = i.getInnerText().trim();
@@ -181,20 +183,20 @@ class Z extends D {
     r = r.replace(t, e), this.api.getDocumentModifier().modifyHtml(i).setInnerHtml(r).apply(new d("Updated name"));
   }
   _updatePrice(e) {
-    var E;
-    const i = (E = this.currentNode) == null ? void 0 : E.querySelector(`[esd-extension-block-id="${m.PRICE}"]`);
+    var g;
+    const i = (g = this.currentNode) == null ? void 0 : g.querySelector(`[esd-extension-block-id="${l.PRICE}"]`);
     if (!i)
       return;
     const t = this._getParagraphFromBlock(i);
     if (!t)
       return;
-    const r = t.getInnerHTML() || "", n = t.getInnerText() || "", { currencySymbol: s, currencyLocation: a } = this.store, l = (s == null ? void 0 : s.trim()) || "", c = this._removeCurrencySymbol(n, l), h = this._replacePriceNumber(c, e), I = this._buildPriceContent(h, l, a), _ = r.replace(n, I);
+    const r = t.getInnerHTML() || "", n = t.getInnerText() || "", { currencySymbol: s, currencyLocation: a } = this.store, c = (s == null ? void 0 : s.trim()) || "", m = this._removeCurrencySymbol(n, c), u = this._replacePriceNumber(m, e), I = this._buildPriceContent(u, c, a), _ = r.replace(n, I);
     this.api.getDocumentModifier().modifyHtml(t).setInnerHtml(_).apply(new d("Updated price"));
   }
   _updateOriginalPrice(e) {
     var y;
     const i = (y = this.currentNode) == null ? void 0 : y.querySelector(
-      `[esd-extension-block-id="${m.ORIGINAL_PRICE}"]`
+      `[esd-extension-block-id="${l.ORIGINAL_PRICE}"]`
     );
     if (!i)
       return;
@@ -204,12 +206,12 @@ class Z extends D {
     const r = t.querySelector("s");
     if (!r)
       return;
-    const n = r.getInnerHTML() || "", s = r.getInnerText() || "", { currencySymbol: a, currencyLocation: l } = this.store, c = (a == null ? void 0 : a.trim()) || "", h = this._removeCurrencySymbol(s, c), I = this._replacePriceNumber(h, e), _ = this._buildPriceContent(I, c, l), g = `<s>${n.replace(s, _)}</s>`;
-    this.api.getDocumentModifier().modifyHtml(t).setInnerHtml(g).apply(new d("Updated original price"));
+    const n = r.getInnerHTML() || "", s = r.getInnerText() || "", { currencySymbol: a, currencyLocation: c } = this.store, m = (a == null ? void 0 : a.trim()) || "", u = this._removeCurrencySymbol(s, m), I = this._replacePriceNumber(u, e), _ = this._buildPriceContent(I, m, c), E = `<s>${n.replace(s, _)}</s>`;
+    this.api.getDocumentModifier().modifyHtml(t).setInnerHtml(E).apply(new d("Updated original price"));
   }
   _updateQuantity(e) {
     var a;
-    const i = this.store.itemsType !== S.ITEMS_TYPE.BROWSED_ITEMS, t = (a = this.currentNode) == null ? void 0 : a.querySelector(`[esd-extension-block-id="${m.QUANTITY}"]`);
+    const i = this.store.itemsType !== S.ITEMS_TYPE.BROWSED_ITEMS, t = (a = this.currentNode) == null ? void 0 : a.querySelector(`[esd-extension-block-id="${l.QUANTITY}"]`);
     if (!t)
       return;
     const r = t.getStyle("display") === "none", n = t.getInnerText().trim();
@@ -221,15 +223,17 @@ class Z extends D {
    * @description Reorders the template structure based on current orientation and visibility settings.
    */
   _reOrderTemplate() {
-    var h, I, _, E, g, y, O;
-    const e = (h = this.currentNode) == null ? void 0 : h.querySelector(`[esd-extension-block-id="${m.IMAGE}"]`), i = (I = this.currentNode) == null ? void 0 : I.querySelector(`[esd-extension-block-id="${m.NAME}"]`), t = (_ = this.currentNode) == null ? void 0 : _.querySelector(`[esd-extension-block-id="${m.PRICE}"]`), r = (E = this.currentNode) == null ? void 0 : E.querySelector(
-      `[esd-extension-block-id="${m.ORIGINAL_PRICE}"]`
-    ), n = (g = this.currentNode) == null ? void 0 : g.querySelector(`[esd-extension-block-id="${m.QUANTITY}"]`), s = (y = this.currentNode) == null ? void 0 : y.querySelector(`[esd-extension-block-id="${m.BUTTON}"]`), a = (O = this.currentNode) == null ? void 0 : O.querySelector("esd-config-block");
+    var I, _, g, E, y, O, C;
+    const e = (I = this.currentNode) == null ? void 0 : I.querySelector(`[esd-extension-block-id="${l.IMAGE}"]`), i = (_ = this.currentNode) == null ? void 0 : _.querySelector(`[esd-extension-block-id="${l.NAME}"]`), t = (g = this.currentNode) == null ? void 0 : g.querySelector(`[esd-extension-block-id="${l.PRICE}"]`), r = (E = this.currentNode) == null ? void 0 : E.querySelector(
+      `[esd-extension-block-id="${l.ORIGINAL_PRICE}"]`
+    ), n = (y = this.currentNode) == null ? void 0 : y.querySelector(`[esd-extension-block-id="${l.QUANTITY}"]`), s = (O = this.currentNode) == null ? void 0 : O.querySelector(`[esd-extension-block-id="${l.BUTTON}"]`), a = (C = this.currentNode) == null ? void 0 : C.querySelector("esd-config-block");
     if (!e || !i || !t || !r || !n || !s || !a)
       return;
-    const { orientation: l } = this.store;
-    let c = l === S.ORIENTATION.VERTICAL ? H : x;
-    c = c.replace("{-{-TEMPLATE_FIRST_LINE-}-}", A).replace("{-{-PRODUCT_IMAGE-}-}", e.getOuterHTML()).replace("{-{-PRODUCT_NAME-}-}", i.getOuterHTML()).replace("{-{-PRODUCT_PRICE-}-}", t.getOuterHTML()).replace("{-{-PRODUCT_ORIGINAL_PRICE-}-}", r.getOuterHTML()).replace("{-{-PRODUCT_QUANTITY-}-}", n.getOuterHTML()).replace("{-{-PRODUCT_BUTTON-}-}", s.getOuterHTML()).replace("{-{-CONFIG_BLOCK-}-}", a.getOuterHTML()), c = c.trim().replace(A, "").slice(0, -5), this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(c).apply(new d("Reordered template"));
+    const { orientation: c } = this.store, m = c === S.ORIENTATION.VERTICAL;
+    let u = m ? F : U;
+    this.api.getDocumentModifier().modifyHtml(e.querySelector("img")).setAttribute("width", H.productImageWidth).apply(new d("Updated image width")), setTimeout(() => {
+      u = u.replace("{-{-TEMPLATE_FIRST_LINE-}-}", m ? R : "").replace("{-{-PRODUCT_IMAGE-}-}", e.getOuterHTML()).replace("{-{-PRODUCT_NAME-}-}", i.getOuterHTML()).replace("{-{-PRODUCT_PRICE-}-}", t.getOuterHTML()).replace("{-{-PRODUCT_ORIGINAL_PRICE-}-}", r.getOuterHTML()).replace("{-{-PRODUCT_QUANTITY-}-}", n.getOuterHTML()).replace("{-{-PRODUCT_BUTTON-}-}", s.getOuterHTML()).replace("{-{-CONFIG_BLOCK-}-}", a.getOuterHTML()), u = u.trim().replace(R, "").slice(0, -5), this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(u).apply(new d("Reordered template"));
+    }, 50);
   }
   _updateDataTypeAttributes(e) {
     if (!this.currentNode)
@@ -243,21 +247,21 @@ class Z extends D {
   _updateDataNumberAttributes(e) {
     if (!this.currentNode)
       return;
-    const { itemsType: i } = this.store, t = N[i].findIndex((l) => l.value === e);
+    const { itemsType: i } = this.store, t = N[i].findIndex((c) => c.value === e);
     let r = "1";
     if (t >= 0)
       r = String(t + 1);
     else if (e) {
-      const l = e.match(/\((\d+)\)/);
-      if (l) {
-        const [, c] = l;
-        r = c;
+      const c = e.match(/\((\d+)\)/);
+      if (c) {
+        const [, m] = c;
+        r = m;
       }
     }
     const n = this.currentNode.closest(".ins-product-td"), s = this.api.getDocumentModifier();
-    n && s.modifyHtml(n).setAttribute("data-number", r), this.currentNode.querySelectorAll("[data-number]").forEach((l) => {
-      const c = l;
-      s.modifyHtml(c).setAttribute("data-number", r);
+    n && s.modifyHtml(n).setAttribute("data-number", r), this.currentNode.querySelectorAll("[data-number]").forEach((c) => {
+      const m = c;
+      s.modifyHtml(m).setAttribute("data-number", r);
     }), s.apply(new d("Updated data-number attribute"));
   }
   _reFillTemplate() {
@@ -265,17 +269,17 @@ class Z extends D {
     this._updateImageSrc(e.imageSrc), this._updateName(e.name), this._updatePrice(e.price), this._updateOriginalPrice(e.originalPrice), this._updateQuantity(e.quantity);
   }
   _recalculateTrimming() {
-    var r;
-    if (!this.store.nameTrimming || !this.currentNode)
+    var n;
+    if (!this.currentNode)
       return;
-    const e = (r = this.currentNode) == null ? void 0 : r.querySelector(`[esd-extension-block-id="${m.NAME}"]`);
+    const e = (n = this.currentNode) == null ? void 0 : n.querySelector(`[esd-extension-block-id="${l.NAME}"]`);
     if (!e)
       return;
-    const i = e.querySelector("p");
+    const i = e.querySelector("p > a");
     if (!i)
       return;
-    const t = this.store.orientation === S.ORIENTATION.VERTICAL;
-    this.api.getDocumentModifier().modifyHtml(i).setStyle("white-space", "nowrap").setStyle("overflow", "hidden").setStyle("text-overflow", "ellipsis").setStyle("max-width", t ? "130px" : "100%").apply(new d("Recalculated trimming after orientation change"));
+    const t = this.store.orientation === S.ORIENTATION.VERTICAL, r = this.store.nameTrimming;
+    this.api.getDocumentModifier().modifyHtml(i).setStyle("overflow", "hidden").setStyle("white-space", r ? "nowrap" : "normal").setStyle("text-overflow", r ? "ellipsis" : "unset").setStyle("max-width", t ? "130px" : "520px").setStyle("width", t ? "130px" : "520px").apply(new d("Recalculated trimming after orientation change"));
   }
   _getParagraphFromBlock(e) {
     return e.querySelector("p");
@@ -307,6 +311,6 @@ class Z extends D {
   }
 }
 export {
-  w as CONTROL_BLOCK_ID,
-  Z as ItemsBlockControl
+  G as CONTROL_BLOCK_ID,
+  te as ItemsBlockControl
 };

package/dist/extensions/Blocks/Items/enums/settingsEnums.js

@@ -19,7 +19,7 @@ const e = {
   itemsType: e.ITEMS_TYPE.CART_ITEMS,
   cartItemsSelectControlValue: "{{Abandoned Cart Item (1) Url}}",
   cardOrientationControlValue: e.ORIENTATION.HORIZONTAL,
-  productNameTrimmingControlValue: "0",
+  productNameTrimmingControlValue: "1",
   productPriceHideDiscountControlValue: "0",
   productPriceFormattedControlValue: "1",
   productPriceCurrencySymbolControlValue: "USD",
@@ -34,7 +34,8 @@ const e = {
   productQuantityVisible: "1",
   productPriceVisible: "1",
   productOriginalPriceVisible: "1",
-  productButtonVisible: "1"
+  productButtonVisible: "1",
+  productImageWidth: "70"
 }, o = {
   [e.ITEMS_TYPE.CART_ITEMS]: [
     { text: "Abandoned Cart Item (1)", value: "{{Abandoned Cart Item (1) Url}}" },

package/dist/extensions/Blocks/Items/store/items-block.js

@@ -8,7 +8,7 @@ const n = (t) => t.replace(/Url\}/, "Image}"), o = (t) => t.replace(/Image\}/, "
     imageLink: n(t),
     buttonLink: o(t),
     orientation: e.cardOrientationControlValue,
-    nameTrimming: !1,
+    nameTrimming: !0,
     hideDiscount: !1,
     currencySymbol: "USD",
     currencyLocation: "0",

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

@@ -1,17 +1,17 @@
 import { BlockType as l, BlockAttr as _ } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { ItemsBlockId as d } from "./enums/controlEnums.js";
+import { ItemsBlockId as T } from "./enums/controlEnums.js";
 import { productPairs as i, templateFirstLine as N } from "./enums/productEnums.js";
-import { ItemInCartOptions as P, SETTINGS_ENUMS as O } from "./enums/settingsEnums.js";
-import f from "./layouts/horizontal.html.js";
-import B from "./layouts/vertical.html.js";
-let [R] = i.PAIRS_FOR_EXTENSION.imageSrc.CART_ITEMS.DEFAULT, [C] = i.PAIRS_FOR_EXTENSION.name.CART_ITEMS.DEFAULT, [I] = i.PAIRS_FOR_EXTENSION.price.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [$] = i.PAIRS_FOR_EXTENSION.originalPrice.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [u] = i.PAIRS_FOR_EXTENSION.quantity.CART_ITEMS.DEFAULT;
-const g = (a, t) => `
+import { ItemInCartOptions as f, SETTINGS_ENUMS as O, DefaultConfigValues as P } from "./enums/settingsEnums.js";
+import B from "./layouts/horizontal.html.js";
+import g from "./layouts/vertical.html.js";
+let [C] = i.PAIRS_FOR_EXTENSION.imageSrc.CART_ITEMS.DEFAULT, [A] = i.PAIRS_FOR_EXTENSION.name.CART_ITEMS.DEFAULT, [p] = i.PAIRS_FOR_EXTENSION.price.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [I] = i.PAIRS_FOR_EXTENSION.originalPrice.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [u] = i.PAIRS_FOR_EXTENSION.quantity.CART_ITEMS.DEFAULT;
+const h = (a, t) => `
     <${l.BLOCK_IMAGE} 
-        ${_.BLOCK_IMAGE.src}="${R}"
-        ${_.BLOCK_IMAGE.alt}="Product Image"
+        ${_.BLOCK_IMAGE.src}="${C}"
+        ${_.BLOCK_IMAGE.alt}="${A}"
         ${_.BLOCK_IMAGE.href}="#!"
-        ${_.BLOCK_IMAGE.width}="70"
-        esd-extension-block-id="${d.IMAGE}"
+        ${_.BLOCK_IMAGE.width}=${P.productImageWidth}
+        esd-extension-block-id="${T.IMAGE}"
         data-slot-1
         product-attr="imageSrc"
         data-type="${a}" 
@@ -23,7 +23,7 @@ const g = (a, t) => `
         align="center" 
         class="es-p10" 
         data-type="${a}"
-        esd-extension-block-id="${d.NAME}"
+        esd-extension-block-id="${T.NAME}"
     >
         <p contenteditable="false">
             <a  
@@ -35,24 +35,30 @@ const g = (a, t) => `
                     line-height: inherit;
                     font-family: inherit;
                     color: inherit;
+                    display: block; 
+                    word-wrap:break-word; 
+                    white-space: nowrap;
+                    width: 520px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                 "
                 product-attr="name"
                 data-slot-2
                 width="100%">
-                ${C}
+                ${A}
             </a>
         </p>
     </${l.BLOCK_TEXT}>
-`, S = (a, t, n, e, c) => {
-  let o = I;
+`, S = (a, t, o, e, c) => {
+  let n = p;
   if (e && e.trim()) {
-    const T = `&nbsp;${e.trim()}&nbsp;`;
-    o = (c || "0") === "1" ? `${I}${T}` : `${T}${I}`;
+    const E = `&nbsp;${e.trim()}&nbsp;`;
+    n = (c || "0") === "1" ? `${p}${E}` : `${E}${p}`;
   }
-  const r = c === "1" ? "after" : "before", E = `data-formated="${n ? "true" : "false"}"`, s = `data-curency="${r}"`;
+  const r = c === "1" ? "after" : "before", d = `data-formated="${o ? "true" : "false"}"`, s = `data-curency="${r}"`;
   return `
     <${l.BLOCK_TEXT} 
-        esd-extension-block-id="${d.PRICE}"
+        esd-extension-block-id="${T.PRICE}"
         class="items-block-price"
         width="100%" 
         align="center" 
@@ -63,25 +69,25 @@ const g = (a, t) => `
             data-slot-4
             data-type="${a}"
             data-number="${t}"
-            ${E}
+            ${d}
             ${s}
             ${e ? `data-currency_symbol="${e}"` : ""}
         >
-            ${o}
+            ${n}
         </p>
     </${l.BLOCK_TEXT}>
 `;
-}, L = (a, t, n, e, c) => {
-  let o = $;
+}, L = (a, t, o, e, c) => {
+  let n = I;
   if (e && e.trim()) {
-    const T = `&nbsp;${e.trim()}&nbsp;`;
-    o = (c || "0") === "1" ? `${$}${T}` : `${T}${$}`;
+    const E = `&nbsp;${e.trim()}&nbsp;`;
+    n = (c || "0") === "1" ? `${I}${E}` : `${E}${I}`;
   }
-  const r = c === "1" ? "after" : "before", E = `data-formated="${n ? "true" : "false"}"`, s = `data-curency="${r}"`;
+  const r = c === "1" ? "after" : "before", d = `data-formated="${o ? "true" : "false"}"`, s = `data-curency="${r}"`;
   return `
     <${l.BLOCK_TEXT} 
         class="items-block-price"
-        esd-extension-block-id="${d.ORIGINAL_PRICE}"
+        esd-extension-block-id="${T.ORIGINAL_PRICE}"
         width="100%" 
         align="center" 
     >
@@ -92,11 +98,11 @@ const g = (a, t) => `
             style="color: #cc0000"
             data-type="${a}"
             data-number="${t}"
-            ${E}
+            ${d}
             ${s}
             ${e ? `data-currency_symbol="${e}"` : ""}
         >
-            <s>${o}</s>
+            <s>${n}</s>
         </p>
     </${l.BLOCK_TEXT}>
 `;
@@ -105,7 +111,7 @@ const g = (a, t) => `
         width="100%" 
         align="center"
         class="es-p10" 
-        esd-extension-block-id="${d.QUANTITY}"
+        esd-extension-block-id="${T.QUANTITY}"
     >
         <p
             product-attr="quantity"
@@ -115,75 +121,75 @@ const g = (a, t) => `
             ${u}
         </p>
     </${l.BLOCK_TEXT}>
-`, h = (a, t) => `
+`, U = (a, t) => `
     <${l.BLOCK_BUTTON} 
         width="100%"
         class="ins-button" 
         name="buy-button" 
         caption="Buy" 
         align="center"
-        esd-extension-block-id="${d.BUTTON}"
+        esd-extension-block-id="${T.BUTTON}"
         product-attr="button"
         data-slot-6
         data-type="${a}"
         data-number="${t}"
     >Buy
     </${l.BLOCK_BUTTON}>
-`, U = () => `
+`, D = () => `
     <esd-config-block style="display: none;"></esd-config-block>
-`, p = (a, t, n, e, c, o, r, E) => {
-  const A = `${`data-type="${t}" data-number="${n}"`} data-orientation="${e}"`;
+`, R = (a, t, o, e, c, n, r, d) => {
+  const $ = `${`data-type="${t}" data-number="${o}"`} data-orientation="${e}"`;
   return a.replace(
     /<td([^>]*class="[^"]*ins-product-td[^"]*"[^>]*)>/,
-    `<td$1 ${A}>`
-  ).replace("{-{-TEMPLATE_FIRST_LINE-}-}", N).replace("{-{-PRODUCT_IMAGE-}-}", g(t, n)).replace("{-{-PRODUCT_NAME-}-}", F(t)).replace(
+    `<td$1 ${$}>`
+  ).replace("{-{-TEMPLATE_FIRST_LINE-}-}", N).replace("{-{-PRODUCT_IMAGE-}-}", h(t, o)).replace("{-{-PRODUCT_NAME-}-}", F(t)).replace(
     "{-{-PRODUCT_PRICE-}-}",
-    S(t, n, c, o, r)
+    S(t, o, c, n, r)
   ).replace(
     "{-{-PRODUCT_ORIGINAL_PRICE-}-}",
     L(
       t,
-      n,
-      c,
       o,
+      c,
+      n,
       r
     )
-  ).replace("{-{-PRODUCT_QUANTITY-}-}", b()).replace("{-{-PRODUCT_BUTTON-}-}", h(t, n)).replace("{-{-CONFIG_BLOCK-}-}", U());
+  ).replace("{-{-PRODUCT_QUANTITY-}-}", b()).replace("{-{-PRODUCT_BUTTON-}-}", U(t, o)).replace("{-{-CONFIG_BLOCK-}-}", D());
 };
-function x({
+function G({
   orientation: a,
   itemsType: t = O.ITEMS_TYPE.CART_ITEMS,
-  itemId: n,
+  itemId: o,
   currencySymbol: e,
   currencyLocation: c,
-  formattedPrice: o = !0
+  formattedPrice: n = !0
 }) {
-  const r = P[t].findIndex((s) => s.value === n);
-  let E = "1";
+  const r = f[t].findIndex((s) => s.value === o);
+  let d = "1";
   if (r >= 0)
-    E = String(r + 1);
-  else if (n) {
-    const s = n.match(/\((\d+)\)/);
-    s && s[1] && ([, E] = s);
+    d = String(r + 1);
+  else if (o) {
+    const s = o.match(/\((\d+)\)/);
+    s && s[1] && ([, d] = s);
   }
-  return R = i.PAIRS_FOR_EXTENSION.imageSrc[t].DEFAULT[r >= 0 ? r : 0], C = i.PAIRS_FOR_EXTENSION.name[t].DEFAULT[r >= 0 ? r : 0], I = o ? i.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE_FORMATTED : i.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE, $ = o ? i.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE_FORMATTED : i.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE, u = i.PAIRS_FOR_EXTENSION.quantity[t].DEFAULT, a === O.ORIENTATION.VERTICAL ? p(
-    B,
+  return C = i.PAIRS_FOR_EXTENSION.imageSrc[t].DEFAULT[r >= 0 ? r : 0], A = i.PAIRS_FOR_EXTENSION.name[t].DEFAULT[r >= 0 ? r : 0], p = n ? i.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE_FORMATTED : i.PAIRS_FOR_EXTENSION.price[t].DEFAULT_PRICE, I = n ? i.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE_FORMATTED : i.PAIRS_FOR_EXTENSION.originalPrice[t].DEFAULT_PRICE, u = i.PAIRS_FOR_EXTENSION.quantity[t].DEFAULT, a === O.ORIENTATION.VERTICAL ? R(
+    g,
     t,
-    E,
+    d,
     a,
-    o,
+    n,
     e,
     c
-  ) : p(
-    f,
+  ) : R(
+    B,
     t,
-    E,
+    d,
     a,
-    o,
+    n,
     e,
     c
   );
 }
 export {
-  x as getDefaultTemplate
+  G as getDefaultTemplate
 };

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

@@ -1,17 +1,17 @@
-var _ = Object.defineProperty;
-var S = (n, i, e) => i in n ? _(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
-var u = (n, i, e) => S(n, typeof i != "symbol" ? i + "" : i, e);
+var d = Object.defineProperty;
+var _ = (n, i, e) => i in n ? d(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
+var u = (n, i, e) => _(n, typeof i != "symbol" ? i + "" : i, e);
 import { PAGE_TYPES as E } from "../../../enums/unsubscribe.js";
 import { useUnsubscribeStore as c } from "../../../stores/unsubscribe.js";
-import { Block as d, BlockCompositionType as L, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { getDefaultTemplate as h } from "./template.js";
+import { Block as h, BlockCompositionType as S, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { getDefaultTemplate as L } from "./template.js";
 import { UNSUBSCRIBE_EVENTS as a, DATA_ATTRIBUTES as o } from "./utils/constants.js";
-import { parsePageList as m } from "./utils/utils.js";
-const v = "unsubscribe-block", g = 'a[data-unsubscribe-link="true"]', T = ".unsubscribe-block-v2", f = "{{ins-unsubscribe-link}}", B = {
+import { parsePageList as p } from "./utils/utils.js";
+const g = "unsubscribe-block", v = 'a[data-unsubscribe-link="true"]', f = ".unsubscribe-block-v2", B = "{{ins-unsubscribe-link}}", T = {
   [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
   [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
 };
-class D extends d {
+class R extends h {
   constructor() {
     super();
     u(this, "selectEventListener", null);
@@ -19,13 +19,13 @@ class D extends d {
     u(this, "currentNode");
   }
   getId() {
-    return v;
+    return g;
   }
   getIcon() {
     return "unsubscribe-icon";
   }
   getBlockCompositionType() {
-    return L.BLOCK;
+    return S.BLOCK;
   }
   getName() {
     return this.api.translate("Unsubscribe Block");
@@ -34,13 +34,10 @@ class D extends d {
     return this.api.translate("Unsubscribe Block Description");
   }
   getTemplate() {
-    return h();
-  }
-  onCreated(e) {
-    "getOuterHTML" in e && !e.getOuterHTML() || "getAttribute" in e && e.getAttribute("data-migration") || (this.currentNode = e, this._resetStoreState(), this._setupSelectEventListener(), this._setupCancelEventListener(), this._checkExistingBlocks(), this._openDrawer());
+    return L();
   }
   onSelect(e) {
-    this.currentNode = e, this._resetStoreState(), this._loadBlockState(e), this._setupSelectEventListener();
+    this.currentNode = e, !("getAttribute" in e && e.getAttribute("data-migration")) && (this._resetStoreState(), this._loadBlockState(e), this._setupSelectEventListener(), this._setupCancelEventListener(), this._checkExistingBlocks(), this._openDrawer());
   }
   onDelete(e) {
     this._removeEventListeners(), this._removeBlockTemplatesFromStore(e), this._resetStoreState();
@@ -66,7 +63,13 @@ class D extends d {
     this.cancelEventListener && (document.removeEventListener(a.CANCEL, this.cancelEventListener), this.cancelEventListener = null);
   }
   _handleCancel() {
-    this.currentNode && this.api.getDocumentModifier().modifyHtml(this.currentNode).delete().apply(new b("Removed unsubscribe block due to cancel"));
+    try {
+      if (!this.currentNode)
+        return;
+      this.api.getDocumentModifier().modifyHtml(this.currentNode).delete().apply(new b("Removed unsubscribe block due to cancel"));
+    } catch (e) {
+      console.warn("[UnsubscribeBlock] Failed to remove unsubscribe block:", e);
+    }
   }
   _removeEventListeners() {
     this._removeSelectEventListener(), this._removeCancelEventListener();
@@ -74,26 +77,27 @@ class D extends d {
   _updateBlock(e, s) {
     if (!this.currentNode || !("querySelector" in this.currentNode))
       return;
-    const t = this.currentNode.querySelector(g);
+    const t = this.currentNode.querySelector(v);
     if (!t)
       return;
     const r = this._getMergeTag(e);
     this.api.getDocumentModifier().modifyHtml(t).setAttribute("href", r).apply(new b(`Updated unsubscribe link to ${r}`)), this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(o.PAGE_TYPE, e.toString()).setAttribute(o.PAGE_LIST, s).apply(new b("Updated unsubscribe block metadata"));
   }
   _getMergeTag(e) {
-    return B[e] ?? f;
+    return T[e] ?? B;
   }
   _openDrawer() {
-    try {
-      const e = c();
-      e.typeSelectionDrawerStatus = !0;
-    } catch (e) {
-      console.error("[UnsubscribeBlock] Failed to open drawer:", e);
-    }
+    if (!(this.currentNode && this.currentNode.getAttribute("data-unsubscribe-page-type")))
+      try {
+        const e = c();
+        e.typeSelectionDrawerStatus = !0;
+      } catch (e) {
+        console.error("[UnsubscribeBlock] Failed to open drawer:", e);
+      }
   }
   _checkExistingBlocks() {
     const e = c();
-    e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(T).forEach((t) => {
+    e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(f).forEach((t) => {
       if ("getAttribute" in t) {
         const r = t.getAttribute(o.PAGE_TYPE);
         if (r) {
@@ -109,8 +113,8 @@ class D extends d {
     const s = e.getAttribute(o.PAGE_TYPE), t = e.getAttribute(o.PAGE_LIST);
     if (!s || !t)
       return;
-    const r = c(), l = Number(s), p = m(t);
-    r.setCollectionWithoutAutoSelection(l), r.loadSelectedTemplates(p);
+    const r = c(), l = Number(s), m = p(t);
+    r.setCollectionWithoutAutoSelection(l), r.loadSelectedTemplates(m);
   }
   _resetStoreState() {
     c().$reset();
@@ -121,11 +125,11 @@ class D extends d {
     const s = e.getAttribute(o.PAGE_LIST);
     if (!s)
       return;
-    const t = c(), r = m(s);
+    const t = c(), r = p(s);
     t.removeUnsubscribePages(r);
   }
 }
 export {
-  v as UNSUBSCRIBE_BLOCK_ID,
-  D as UnsubscribeBlock
+  g as UNSUBSCRIBE_BLOCK_ID,
+  R as UnsubscribeBlock
 };

package/dist/src/extensions/Blocks/Items/enums/settingsEnums.d.ts

@@ -40,6 +40,7 @@ export declare const DefaultConfigValues: {
     productPriceVisible: string;
     productOriginalPriceVisible: string;
     productButtonVisible: string;
+    productImageWidth: string;
 };
 export declare const ItemInCartOptions: {
     [x: string]: {

package/dist/src/extensions/Blocks/Unsubscribe/block.d.ts

@@ -1,4 +1,4 @@
-import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import type { ImmutableHtmlElementNode } from '@stripoinc/ui-editor-extensions';
 import { Block, BlockCompositionType } from '@stripoinc/ui-editor-extensions';
 export declare const UNSUBSCRIBE_BLOCK_ID = "unsubscribe-block";
 export declare class UnsubscribeBlock extends Block {
@@ -12,9 +12,8 @@ export declare class UnsubscribeBlock extends Block {
     getName(): string;
     getDescription(): string;
     getTemplate(): string;
-    onCreated(node: ImmutableHtmlNode): void;
-    onSelect(node: ImmutableHtmlNode): undefined;
-    onDelete(node: ImmutableHtmlNode): undefined;
+    onSelect(node: ImmutableHtmlElementNode): void;
+    onDelete(node: ImmutableHtmlElementNode): void;
     onDestroy(): void;
     private _setupSelectEventListener;
     private _removeSelectEventListener;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.3-beta.b163fb8",
+  "version": "1.0.3-beta.b363d6c",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",