@useinsider/guido 2.0.0-beta.087a24f → 2.0.0-beta.13a02f6

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

@@ -1,25 +1,25 @@
 var D = Object.defineProperty;
-var x = (T, u, e) => u in T ? D(T, u, { enumerable: !0, configurable: !0, writable: !0, value: e }) : T[u] = e;
-var b = (T, u, e) => x(T, typeof u != "symbol" ? u + "" : u, e);
-import { UEAttr as R, ModificationDescription as p } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as L } from "../../common-control.js";
-import { ItemsBlockId as l } from "../enums/controlEnums.js";
+var x = (T, p, e) => p in T ? D(T, p, { enumerable: !0, configurable: !0, writable: !0, value: e }) : T[p] = e;
+var b = (T, p, e) => x(T, typeof p != "symbol" ? p + "" : p, e);
+import { UEAttr as R, ModificationDescription as u } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as H } from "../../common-control.js";
+import { ItemsBlockId as m } from "../enums/controlEnums.js";
 import { productPairs as h, templateFirstLine as A } from "../enums/productEnums.js";
-import { ItemTypeOptions as P, OrientationOptions as H, ItemInCartOptions as N, SETTINGS_ENUMS as S, DefaultConfigValues as M } from "../enums/settingsEnums.js";
+import { ItemTypeOptions as P, OrientationOptions as k, ItemInCartOptions as N, SETTINGS_ENUMS as S, DefaultConfigValues as L } 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 { getItemsBlockConfig as k, setItemsBlockConfig as f } from "../utils/nodeConfigUtils.js";
+import { useItemsBlockStore as q } from "../store/items-block.js";
+import { getDefaultTemplate as $ } from "../template.js";
+import { getItemsBlockConfig as M, setItemsBlockConfig as f } from "../utils/nodeConfigUtils.js";
 const w = "ui-elements-items-block", o = {
   ITEMS_TYPE: "itemsType",
   ORIENTATION: "orientation",
   ITEM_IDS: "itemIds"
 };
-class j extends L {
+class j extends H {
   constructor() {
     super(...arguments);
-    b(this, "store", $());
+    b(this, "store", q());
   }
   getId() {
     return w;
@@ -43,8 +43,8 @@ class j extends L {
   onTemplateNodeUpdated(e) {
     super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(
       () => {
-        const t = k(this.currentNode);
-        t && (this.store.setItemsType(t.type), this.store.setItemIds(t.itemsSelectValue), this.store.setOrientation(t.orientation), this.store.setCurrencySymbol(t.priceCurrencySymbol), this.store.setCurrencyLocation(t.priceCurrencyLocation), this.store.setFormattedPrice(t.priceFormatted));
+        const t = M(this.currentNode);
+        t && (this.store.setItemsType(t.type), this.store.setItemIds(t.itemsSelectValue), this.store.setOrientation(t.orientation), this.store.setCurrencySymbol(t.priceCurrencySymbol), this.store.setCurrencyLocation(t.priceCurrencyLocation), this.store.setFormattedPrice(t.priceFormatted), this.store.setImageLink(t.imageLink), this.store.setButtonLink(t.buttonLink));
       },
       () => {
         this.api.updateValues({
@@ -78,7 +78,7 @@ class j extends L {
       this._GuLabel({ text: "Orientation" }),
       this._GuRadioButton({
         name: o.ORIENTATION,
-        buttons: H
+        buttons: k
       })
     ])}
         `;
@@ -109,12 +109,16 @@ class j extends L {
     !t || !r || (this.store.setItemsType(t), this.store.setItemIds(r.value), f(this.currentNode, this.api, {
       source: t,
       type: t,
-      itemsSelectValue: r.value
+      itemsSelectValue: r.value,
+      imageLink: this.store.imageLink,
+      buttonLink: this.store.buttonLink
     }), this._updateDataTypeAttributes(t), this._initializeSelectItems(), this._reFillTemplate());
   }
   _onItemIdsChange(e) {
     this.store.setItemIds(e), this.api.updateValues({ [o.ITEM_IDS]: e }), f(this.currentNode, this.api, {
-      itemsSelectValue: e
+      itemsSelectValue: e,
+      imageLink: this.store.imageLink,
+      buttonLink: this.store.buttonLink
     }), this._updateDataNumberAttributes(e), this._reFillTemplate();
   }
   _initializeSelectItems() {
@@ -157,14 +161,14 @@ class j extends L {
       currencyLocation: n,
       formattedPrice: s
     } = this.store;
-    this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(q({
+    this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml($({
       orientation: e,
       itemsType: t,
       itemId: i,
       currencySymbol: r,
       currencyLocation: n,
       formattedPrice: s
-    })).apply(new p("Updated template"));
+    })).apply(new u("Updated template"));
   }
   _getTemplateData() {
     const { itemsType: e, itemIds: t, formattedPrice: i } = this.store, r = N[e].findIndex((s) => s.value === t), n = r > -1 ? r : 0;
@@ -179,33 +183,33 @@ class j extends L {
   }
   _updateImageSrc(e) {
     var i;
-    const t = (i = this.currentNode) == null ? void 0 : i.querySelector(`[esd-extension-block-id="${l.IMAGE}"] img`);
-    t && this.api.getDocumentModifier().modifyHtml(t).setAttribute("src", e).apply(new p("Updated image src"));
+    const t = (i = this.currentNode) == null ? void 0 : i.querySelector(`[esd-extension-block-id="${m.IMAGE}"] img`);
+    t && this.api.getDocumentModifier().modifyHtml(t).setAttribute("src", e).apply(new u("Updated image src"));
   }
   _updateName(e) {
     var n;
-    const t = (n = this.currentNode) == null ? void 0 : n.querySelector(`[esd-extension-block-id="${l.NAME}"]`);
+    const t = (n = this.currentNode) == null ? void 0 : n.querySelector(`[esd-extension-block-id="${m.NAME}"]`);
     if (!t)
       return;
     const i = t.getInnerText().trim();
     let r = t.getInnerHTML();
-    r = r.replace(i, e), this.api.getDocumentModifier().modifyHtml(t).setInnerHtml(r).apply(new p("Updated name"));
+    r = r.replace(i, e), this.api.getDocumentModifier().modifyHtml(t).setInnerHtml(r).apply(new u("Updated name"));
   }
   _updatePrice(e) {
     var g;
-    const t = (g = this.currentNode) == null ? void 0 : g.querySelector(`[esd-extension-block-id="${l.PRICE}"]`);
+    const t = (g = this.currentNode) == null ? void 0 : g.querySelector(`[esd-extension-block-id="${m.PRICE}"]`);
     if (!t)
       return;
     const i = this._getParagraphFromBlock(t);
     if (!i)
       return;
-    const r = i.getInnerHTML() || "", n = i.getInnerText() || "", { currencySymbol: s, currencyLocation: c } = this.store, a = (s == null ? void 0 : s.trim()) || "", m = this._removeCurrencySymbol(n, a), d = this._replacePriceNumber(m, e), I = this._buildPriceContent(d, a, c), _ = r.replace(n, I);
-    this.api.getDocumentModifier().modifyHtml(i).setInnerHtml(_).apply(new p("Updated price"));
+    const r = i.getInnerHTML() || "", n = i.getInnerText() || "", { currencySymbol: s, currencyLocation: c } = this.store, a = (s == null ? void 0 : s.trim()) || "", l = this._removeCurrencySymbol(n, a), d = this._replacePriceNumber(l, e), I = this._buildPriceContent(d, a, c), _ = r.replace(n, I);
+    this.api.getDocumentModifier().modifyHtml(i).setInnerHtml(_).apply(new u("Updated price"));
   }
   _updateOriginalPrice(e) {
     var y;
     const t = (y = this.currentNode) == null ? void 0 : y.querySelector(
-      `[esd-extension-block-id="${l.ORIGINAL_PRICE}"]`
+      `[esd-extension-block-id="${m.ORIGINAL_PRICE}"]`
     );
     if (!t)
       return;
@@ -215,29 +219,29 @@ class j extends L {
     const r = i.querySelector("s");
     if (!r)
       return;
-    const n = r.getInnerHTML() || "", s = r.getInnerText() || "", { currencySymbol: c, currencyLocation: a } = this.store, m = (c == null ? void 0 : c.trim()) || "", d = this._removeCurrencySymbol(s, m), I = this._replacePriceNumber(d, e), _ = this._buildPriceContent(I, m, a), E = `<s>${n.replace(s, _)}</s>`;
-    this.api.getDocumentModifier().modifyHtml(i).setInnerHtml(E).apply(new p("Updated original price"));
+    const n = r.getInnerHTML() || "", s = r.getInnerText() || "", { currencySymbol: c, currencyLocation: a } = this.store, l = (c == null ? void 0 : c.trim()) || "", d = this._removeCurrencySymbol(s, l), I = this._replacePriceNumber(d, e), _ = this._buildPriceContent(I, l, a), E = `<s>${n.replace(s, _)}</s>`;
+    this.api.getDocumentModifier().modifyHtml(i).setInnerHtml(E).apply(new u("Updated original price"));
   }
   _updateQuantity(e) {
-    var s;
-    const t = this.store.itemsType !== S.ITEMS_TYPE.BROWSED_ITEMS, i = (s = this.currentNode) == null ? void 0 : s.querySelector(`[esd-extension-block-id="${l.QUANTITY}"]`);
-    if (!i)
+    var l;
+    const t = this.store.itemsType !== S.ITEMS_TYPE.BROWSED_ITEMS, i = M(this.currentNode), r = (i == null ? void 0 : i.quantityControlEnabled) !== !1, n = t && r, s = (l = this.currentNode) == null ? void 0 : l.querySelector(`[esd-extension-block-id="${m.QUANTITY}"]`);
+    if (!s)
       return;
-    const r = i.getInnerText().trim();
-    let n = i.getInnerHTML();
-    n = n.replace(r, e), this.api.getDocumentModifier().modifyHtml(i).setInnerHtml(n).setStyle("display", t ? "table-cell" : "none").apply(new p("Updated quantity"));
+    const c = s.getInnerText().trim();
+    let a = s.getInnerHTML();
+    a = a.replace(c, e), this.api.getDocumentModifier().modifyHtml(s).setInnerHtml(a).setStyle("display", n ? "table-cell" : "none").apply(new u("Updated quantity"));
   }
   _reOrderTemplate() {
     var I, _, g, E, y, O, C;
-    const e = (I = this.currentNode) == null ? void 0 : I.querySelector(`[esd-extension-block-id="${l.IMAGE}"]`), t = (_ = this.currentNode) == null ? void 0 : _.querySelector(`[esd-extension-block-id="${l.NAME}"]`), i = (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}"]`), c = (C = this.currentNode) == null ? void 0 : C.querySelector("esd-config-block");
+    const e = (I = this.currentNode) == null ? void 0 : I.querySelector(`[esd-extension-block-id="${m.IMAGE}"]`), t = (_ = this.currentNode) == null ? void 0 : _.querySelector(`[esd-extension-block-id="${m.NAME}"]`), i = (g = this.currentNode) == null ? void 0 : g.querySelector(`[esd-extension-block-id="${m.PRICE}"]`), r = (E = this.currentNode) == null ? void 0 : E.querySelector(
+      `[esd-extension-block-id="${m.ORIGINAL_PRICE}"]`
+    ), n = (y = this.currentNode) == null ? void 0 : y.querySelector(`[esd-extension-block-id="${m.QUANTITY}"]`), s = (O = this.currentNode) == null ? void 0 : O.querySelector(`[esd-extension-block-id="${m.BUTTON}"]`), c = (C = this.currentNode) == null ? void 0 : C.querySelector("esd-config-block");
     if (!e || !t || !i || !r || !n || !s)
       return;
-    const { orientation: a } = this.store, m = a === S.ORIENTATION.VERTICAL;
-    let d = m ? F : U;
-    this.api.getDocumentModifier().modifyHtml(e.querySelector("img")).setAttribute("width", M.productImageWidth).setAttribute("height", M.productImageWidth).apply(new p("Updated image width")), setTimeout(() => {
-      d = d.replace("{-{-TEMPLATE_FIRST_LINE-}-}", m ? A : "").replace("{-{-PRODUCT_IMAGE-}-}", e.getOuterHTML()).replace("{-{-PRODUCT_NAME-}-}", t.getOuterHTML()).replaceAll("{-{-PRODUCT_PRICE-}-}", i.getOuterHTML()).replaceAll("{-{-PRODUCT_ORIGINAL_PRICE-}-}", r.getOuterHTML()).replace("{-{-PRODUCT_QUANTITY-}-}", n.getOuterHTML()).replace("{-{-PRODUCT_BUTTON-}-}", s.getOuterHTML()).replace("{-{-CONFIG_BLOCK-}-}", (c == null ? void 0 : c.getOuterHTML()) || ""), d = d.trim().replace(A, "").slice(0, -5), this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(d).apply(new p("Reordered template"));
+    const { orientation: a } = this.store, l = a === S.ORIENTATION.VERTICAL;
+    let d = l ? F : U;
+    this.api.getDocumentModifier().modifyHtml(e.querySelector("img")).setAttribute("width", L.productImageWidth).setAttribute("height", L.productImageWidth).apply(new u("Updated image width")), setTimeout(() => {
+      d = d.replace("{-{-TEMPLATE_FIRST_LINE-}-}", l ? A : "").replace("{-{-PRODUCT_IMAGE-}-}", e.getOuterHTML()).replace("{-{-PRODUCT_NAME-}-}", t.getOuterHTML()).replaceAll("{-{-PRODUCT_PRICE-}-}", i.getOuterHTML()).replaceAll("{-{-PRODUCT_ORIGINAL_PRICE-}-}", r.getOuterHTML()).replace("{-{-PRODUCT_QUANTITY-}-}", n.getOuterHTML()).replace("{-{-PRODUCT_BUTTON-}-}", s.getOuterHTML()).replace("{-{-CONFIG_BLOCK-}-}", (c == null ? void 0 : c.getOuterHTML()) || ""), d = d.trim().replace(A, "").slice(0, -5), this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(d).apply(new u("Reordered template"));
     }, 50);
   }
   _updateDataTypeAttributes(e) {
@@ -247,7 +251,7 @@ class j extends L {
     t && i.modifyHtml(t).setAttribute("data-type", e), this.currentNode.querySelectorAll("[data-type]").forEach((n) => {
       const s = n;
       i.modifyHtml(s).setAttribute("data-type", e);
-    }), i.apply(new p("Updated data-type attribute"));
+    }), i.apply(new u("Updated data-type attribute"));
   }
   _updateDataNumberAttributes(e) {
     if (!this.currentNode)
@@ -259,15 +263,15 @@ class j extends L {
     else if (e) {
       const a = e.match(/\((\d+)\)/);
       if (a) {
-        const [, m] = a;
-        r = m;
+        const [, l] = a;
+        r = l;
       }
     }
     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((a) => {
-      const m = a;
-      s.modifyHtml(m).setAttribute("data-number", r);
-    }), s.apply(new p("Updated data-number attribute"));
+      const l = a;
+      s.modifyHtml(l).setAttribute("data-number", r);
+    }), s.apply(new u("Updated data-number attribute"));
   }
   _reFillTemplate() {
     const e = this._getTemplateData();
@@ -277,14 +281,14 @@ class j extends L {
     var n;
     if (!this.currentNode)
       return;
-    const e = (n = this.currentNode) == null ? void 0 : n.querySelector(`[esd-extension-block-id="${l.NAME}"]`);
+    const e = (n = this.currentNode) == null ? void 0 : n.querySelector(`[esd-extension-block-id="${m.NAME}"]`);
     if (!e)
       return;
     const t = e.querySelector("p > a");
     if (!t)
       return;
     const i = this.store.orientation === S.ORIENTATION.HORIZONTAL, r = this.store.nameTrimming;
-    this.api.getDocumentModifier().modifyHtml(t).setStyle("overflow", "hidden").setStyle("white-space", r ? "nowrap" : "normal").setStyle("text-overflow", r ? "ellipsis" : "unset").setStyle("max-width", i ? "130px" : "520px").setStyle("width", i ? "130px" : "520px").apply(new p("Recalculated trimming after orientation change"));
+    this.api.getDocumentModifier().modifyHtml(t).setStyle("overflow", "hidden").setStyle("white-space", r ? "nowrap" : "normal").setStyle("text-overflow", r ? "ellipsis" : "unset").setStyle("max-width", i ? "130px" : "520px").setStyle("width", i ? "130px" : "520px").apply(new u("Recalculated trimming after orientation change"));
   }
   _getParagraphFromBlock(e) {
     return e.querySelector("p");

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

@@ -22,14 +22,14 @@ class U extends O {
       new T(
         N.SETTINGS,
         [
-          I.ORIGINAL_PRICE_STYLE,
-          I.ORIGINAL_PRICE_ALIGN,
           I.ORIGINAL_PRICE_PADDINGS
         ]
       ),
       new T(
         N.STYLES,
         [
+          I.ORIGINAL_PRICE_STYLE,
+          I.ORIGINAL_PRICE_ALIGN,
           I.ORIGINAL_PRICE_COLOR,
           I.ORIGINAL_PRICE_FONT_FAMILY,
           I.ORIGINAL_PRICE_SIZE
@@ -39,8 +39,6 @@ class U extends O {
       new T(
         N.SETTINGS,
         [
-          I.PRICE_STYLE,
-          I.PRICE_ALIGN,
           I.PRICE_HIDE_DISCOUNT,
           I.PRICE_FORMATTED_PRICE,
           I.PRICE_CURRENCY_SYMBOL,
@@ -52,6 +50,8 @@ class U extends O {
       new T(
         N.STYLES,
         [
+          I.PRICE_STYLE,
+          I.PRICE_ALIGN,
           I.PRICE_COLOR,
           I.PRICE_FONT_FAMILY,
           I.PRICE_SIZE