@useinsider/guido 2.0.0-beta.13ba613 → 2.0.0-beta.18d5b06

package/dist/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.js

@@ -1,6 +1,6 @@
 import { useItemsBlockStore as e } from "../store/items-block.js";
 import { syncAttributeFromConfigBlock as r, createBooleanSyncConfig as i, createStringSyncConfig as s } from "./syncAttributeFromConfigBlock.js";
-function C(t) {
+function m(t) {
   const o = e(), n = i(
     "PRODUCT_NAME_TRIMMING",
     (c) => o.setNameTrimming(c),
@@ -12,7 +12,7 @@ function f(t) {
   const o = e(), n = i(
     "PRODUCT_PRICE_HIDE_DISCOUNT",
     (c) => o.setHideDiscount(c),
-    !0
+    !1
   );
   r(t, n);
 }
@@ -24,7 +24,7 @@ function R(t) {
   );
   r(t, n);
 }
-function _(t) {
+function O(t) {
   const o = e(), n = s(
     "PRODUCT_PRICE_CURRENCY_SYMBOL",
     (c) => o.setCurrencySymbol(c),
@@ -32,7 +32,7 @@ function _(t) {
   );
   r(t, n);
 }
-function y(t) {
+function _(t) {
   const o = e(), n = s(
     "PRODUCT_PRICE_CURRENCY_LOCATION",
     (c) => o.setCurrencyLocation(c),
@@ -40,7 +40,7 @@ function y(t) {
   );
   r(t, n);
 }
-function T(t) {
+function I(t) {
   const o = e(), n = s(
     "PRODUCT_BUTTON_LINK",
     (c) => o.setButtonLink(c),
@@ -48,7 +48,7 @@ function T(t) {
   );
   r(t, n);
 }
-function g(t) {
+function T(t) {
   const o = e(), n = s(
     "PRODUCT_IMAGE_LINK",
     (c) => o.setImageLink(c),
@@ -56,12 +56,21 @@ function g(t) {
   );
   r(t, n);
 }
+function y(t) {
+  const o = e(), n = s(
+    "PRODUCT_ORIGINAL_PRICE_CONTROL_ORIENTATION",
+    (c) => o.setPriceOrientation(c),
+    "horizontal"
+  );
+  r(t, n);
+}
 export {
-  T as syncButtonLinkFromAttributes,
-  y as syncCurrencyLocationFromAttributes,
-  _ as syncCurrencySymbolFromAttributes,
+  I as syncButtonLinkFromAttributes,
+  _ as syncCurrencyLocationFromAttributes,
+  O as syncCurrencySymbolFromAttributes,
   R as syncFormattedPriceFromAttributes,
   f as syncHideDiscountFromAttributes,
-  g as syncImageLinkFromAttributes,
-  C as syncNameTrimmingFromAttributes
+  T as syncImageLinkFromAttributes,
+  m as syncNameTrimmingFromAttributes,
+  y as syncPriceOrientationFromAttributes
 };

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

@@ -289,7 +289,7 @@ class b extends g {
       t.CURRENCY_DECIMAL_COUNT
     ].forEach((i) => {
       this.api.onValueChanged(i, (a) => this._onCurrencyConfigChange(i, a));
-    }), this.api.onValueChanged(t.PRODUCT_COUNT, (i) => this._onDataChange(t.PRODUCT_COUNT, String(i))), this.api.onValueChanged(t.PRODUCT_IN_ROW, (i) => this._onDataChange(t.PRODUCT_IN_ROW, i)), this.api.onValueChanged(t.SHUFFLE_PRODUCTS, (i) => this._onDataChange(t.SHUFFLE_PRODUCTS, i)), this.api.onValueChanged(t.RESPONSIVE, (i) => this._onDataChange(t.RESPONSIVE, i)), this.addFilterListener = this._onFilterSelectClick.bind(this), this.addFilterButton = this.getContainer().querySelector("#guido__btn-add-filter"), (o = this.addFilterButton) == null || o.addEventListener("click", this.addFilterListener);
+    }), this.api.onValueChanged(t.PRODUCT_COUNT, (i) => this._onDataChange(t.PRODUCT_COUNT, i.toString())), this.api.onValueChanged(t.PRODUCT_IN_ROW, (i) => this._onDataChange(t.PRODUCT_IN_ROW, i)), this.api.onValueChanged(t.SHUFFLE_PRODUCTS, (i) => this._onDataChange(t.SHUFFLE_PRODUCTS, i)), this.api.onValueChanged(t.RESPONSIVE, (i) => this._onDataChange(t.RESPONSIVE, i)), this.addFilterListener = this._onFilterSelectClick.bind(this), this.addFilterButton = this.getContainer().querySelector("#guido__btn-add-filter"), (o = this.addFilterButton) == null || o.addEventListener("click", this.addFilterListener);
   }
   _listenStateUpdates() {
     this.storeUnsubscription = this.store.$subscribe((e) => {

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

@@ -1,21 +1,21 @@
 import { ExtensionBuilder as e } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { UnsubscribeBlock as i } from "./block.js";
 import { UnsubscribeControl as t } from "./control.js";
-import { PreviewUIElement as o } from "./elements/preview.js";
-import { UnsubscribeIconsRegistry as r } from "./iconsRegistry.js";
-import { SettingsPanel as s } from "./settingsPanel.js";
+import { PreviewUIElement as s } from "./elements/preview.js";
+import { UnsubscribeIconsRegistry as o } from "./iconsRegistry.js";
+import { SettingsPanel as r } from "./settingsPanel.js";
 import n from "./styles.css.js";
-import { UnsubscribeTagRegistry as l } from "./tagRegistry.js";
-const f = new e().addBlock(i).withSettingsPanelRegistry(s).addControl(t).addUiElement(o).addStyles(n).withLocalization({
+import { UnsubscribeTagRegistry as c } from "./tagRegistry.js";
+const g = new e().addBlock(i).withSettingsPanelRegistry(r).addControl(t).addUiElement(s).addStyles(n).withLocalization({
   en: {
-    "Unsubscribe Block": "Unsubscribe Block",
-    "Unsubscribe Block Description": "Add an unsubscribe link to your email",
+    "Unsubscribe Block": "Unsubscribe",
+    "Unsubscribe Block Description": "Unsubscribe lets you add an Unsubscribe Link to direct users to opt out of receiving your messages.",
     "Select Template": "Select Template",
     "Unsubscribe Template": "Unsubscribe Template",
     Showing: "Showing",
     of: "of"
   }
-}).withUiElementTagRegistry(l).withIconsRegistry(r).build();
+}).withUiElementTagRegistry(c).withIconsRegistry(o).build();
 export {
-  f as default
+  g as default
 };

package/dist/extensions/Blocks/common-control.js

@@ -1,12 +1,12 @@
 var c = Object.defineProperty;
-var I = (T, r, e) => r in T ? c(T, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : T[r] = e;
-var l = (T, r, e) => I(T, typeof r != "symbol" ? r + "" : r, e);
-import { Control as s, UIElementType as t, UEAttr as $ } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class B extends s {
+var I = (a, r, e) => r in a ? c(a, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[r] = e;
+var u = (a, r, e) => I(a, typeof r != "symbol" ? r + "" : r, e);
+import { Control as O, UIElementType as t, UEAttr as $ } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class _ extends O {
   constructor() {
     super(...arguments);
-    l(this, "currentNode");
-    l(this, "lastBlockInstanceId", null);
+    u(this, "currentNode");
+    u(this, "lastBlockInstanceId", null);
   }
   getContainer() {
     var e;
@@ -19,54 +19,42 @@ class B extends s {
     this.lastBlockInstanceId = null;
   }
   /**
-   * Gets the Items block container element from the current node.
-   * @returns The container element or null if not found
-   */
-  getItemsBlockContainer() {
-    return this.currentNode ? this.currentNode.closest(".items-block-v2") : null;
-  }
-  /**
-   * Gets the config block element from the current node (legacy support).
-   * @deprecated Use getNodeConfig() from nodeConfigUtils instead for Stripo V2
+   * Gets the config block element from the current node.
    * @returns The config block element or null if not found
    */
   getConfigBlock() {
-    const e = this.getItemsBlockContainer();
+    if (!this.currentNode)
+      return null;
+    const e = this.currentNode.closest(".items-block-v2");
     return e ? e.querySelector("esd-config-block") : null;
   }
   /**
-   * Gets the current block instance ID from the node config (Stripo V2) or legacy config block.
+   * Gets the current block instance ID from the config block.
+   * @param blockInstanceIdAttribute - The attribute name for block instance ID (default: 'data-block-instance-id')
    * @returns The block instance ID or null if not found
    */
-  getBlockInstanceId() {
-    const e = this.getItemsBlockContainer();
-    if (!e)
-      return null;
-    const n = e.getNodeConfig();
-    if (n && typeof n.blockInstanceId == "string")
-      return n.blockInstanceId;
-    const o = this.getConfigBlock();
-    return o ? o.getAttribute("data-block-instance-id") : null;
+  getBlockInstanceId(e = "data-block-instance-id") {
+    const n = this.getConfigBlock();
+    return n ? n.getAttribute(e) : null;
   }
   /**
    * Handles block instance change detection and syncing.
-   * This is a helper method for controls that need to sync config when switching between block instances.
-   * Uses Stripo V2 nodeConfig API for block instance tracking.
-   * @param syncFunction - Function to call when block instance changes (to sync from node config)
+   * This is a helper method for controls that need to sync attributes when switching between block instances.
+   * @param syncFunction - Function to call when block instance changes (to sync from attributes)
    * @param updateUI - Function to call to update the UI (called both on change and when same block)
+   * @param blockInstanceIdAttribute - The attribute name for block instance ID (default: 'data-block-instance-id')
    * @returns true if block instance changed, false otherwise
    */
-  handleBlockInstanceChange(e, n) {
-    const o = this.getBlockInstanceId();
+  handleBlockInstanceChange(e, n, E = "data-block-instance-id") {
+    const o = this.getBlockInstanceId(E);
     if (!o)
       return !1;
-    const E = o !== this.lastBlockInstanceId;
-    return E ? (this.currentNode && e(this.currentNode), n(), this.lastBlockInstanceId = o) : n(), E;
+    const T = o !== this.lastBlockInstanceId;
+    return T ? (this.currentNode && e(this.currentNode), n(), this.lastBlockInstanceId = o) : n(), T;
   }
-  _GuLabel({ text: e, name: n = "", position: o = "top" }) {
+  _GuLabel({ text: e, name: n = "" }) {
     return `
             <${t.LABEL} 
-                style="${o === "top" ? "margin-bottom: 8px;" : ""}"
                 ${$.LABEL.text}="${e}" 
                 ${$.LABEL.name}="${n || `${e} Label`}">
             </${t.LABEL}>
@@ -86,59 +74,59 @@ class B extends s {
                 ${$.SELECT_ITEM.value}="${n}">
             </${t.SELECT_ITEM}>`;
   }
-  _GuSelect({ name: e, placeholder: n, options: o, className: E = "es-180w" }) {
+  _GuSelect({ name: e, placeholder: n, options: E, className: o = "es-180w" }) {
     return `
             <${t.SELECTPICKER}
-                class="${E}"
+                class="${o}"
                 ${$.SELECTPICKER.name}="${e}"
                 ${$.SELECTPICKER.placeholder}="${n}">
-                    ${o.map((a) => this._GuSelectItem(a)).join("")}
+                    ${E.map((T) => this._GuSelectItem(T)).join("")}
             </${t.SELECTPICKER}>
         `;
   }
-  _GuTextInput({ name: e, placeholder: n, className: o = "", disabled: E = !1 }) {
+  _GuTextInput({ name: e, placeholder: n, className: E = "", disabled: o = !1 }) {
     return `
             <${t.TEXT}
-                class=${o}
+                class=${E}
                 ${$.TEXT.name}="${e}"
                 placeholder="${n || e}"
-                ${E ? `${$.TEXT.disabled}="true"` : ""}>
+                ${o ? `${$.TEXT.disabled}="true"` : ""}>
             </${t.TEXT}>
         `;
   }
-  _GuCounter({ name: e, maxValue: n, minValue: o = 1, step: E = 1 }) {
+  _GuCounter({ name: e, maxValue: n, minValue: E = 1, step: o = 1 }) {
     return `
             <${t.COUNTER}
                 ${$.COUNTER.name}="${e}"
-                ${$.COUNTER.minValue}="${o}"
+                ${$.COUNTER.minValue}="${E}"
                 ${$.COUNTER.maxValue}="${n}"
-                ${$.COUNTER.step}="${E}">
+                ${$.COUNTER.step}="${o}">
             </${t.COUNTER}>
         `;
   }
-  _GuRadioButtonItem({ text: e, value: n, icon: o }) {
+  _GuRadioButtonItem({ text: e, value: n, icon: E }) {
     return `
             <${t.RADIO_ITEM}
                 ${$.RADIO_ITEM.value}="${n}"
                 ${e ? `${$.RADIO_ITEM.text}="${e}"` : ""}
-                ${o ? `${$.RADIO_ITEM.icon}="${o}"` : ""}>
+                ${E ? `${$.RADIO_ITEM.icon}="${E}"` : ""}>
             </${t.RADIO_ITEM}>
         `;
   }
-  _GuRadioButton({ name: e, buttons: n, id: o = "" }) {
+  _GuRadioButton({ name: e, buttons: n, id: E = "" }) {
     return `
             <${t.RADIO_BUTTONS}
-                ${o ? `id="${o}"` : ""}
+                ${E ? `id="${E}"` : ""}
                 ${$.RADIO_BUTTONS.name}="${e}">
-                ${n.map((E) => this._GuRadioButtonItem(E)).join("")}
+                ${n.map((o) => this._GuRadioButtonItem(o)).join("")}
             </${t.RADIO_BUTTONS}>
         `;
   }
-  _GuButton({ name: e, label: n, id: o = "" }) {
+  _GuButton({ name: e, label: n, id: E = "" }) {
     return `
             <${t.BUTTON}
                 ${$.BUTTON.name}="${e}"
-                ${o ? `id="${o}"` : ""}
+                ${E ? `id="${E}"` : ""}
                 ${$.BUTTON.caption}="${n}"}>
             </${t.BUTTON}>
         `;
@@ -148,10 +136,10 @@ class B extends s {
    * @param param0
    * @returns It returns a button with an icon.
    */
-  _GuIconButton({ name: e, icon: n, className: o = "" }) {
+  _GuIconButton({ name: e, icon: n, className: E = "" }) {
     return `
             <${t.BUTTON}
-                class="${o}"
+                class="${E}"
                 ${$.BUTTON.name}="${e}"
                 ${$.BUTTON.icon}="${n}">
             </${t.BUTTON}>
@@ -179,19 +167,19 @@ class B extends s {
    * @returns HTML string for the orderable control
    */
   _GuOrderable(e, n) {
-    let o = "";
-    n.forEach((a) => {
-      const u = $.ORDERABLE_ITEM && "name" in $.ORDERABLE_ITEM ? $.ORDERABLE_ITEM.name : "name";
-      o += `
-                <${t.ORDERABLE_ITEM} ${u}="${a.key}">
-                    ${a.content}
+    let E = "";
+    n.forEach((T) => {
+      const l = $.ORDERABLE_ITEM && "name" in $.ORDERABLE_ITEM ? $.ORDERABLE_ITEM.name : "name";
+      E += `
+                <${t.ORDERABLE_ITEM} ${l}="${T.key}">
+                    ${T.content}
                 </${t.ORDERABLE_ITEM}>
             `;
     });
-    const E = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
+    const o = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
     return `
-            <${t.ORDERABLE} ${E}="${e}">
-                ${o}
+            <${t.ORDERABLE} ${o}="${e}">
+                ${E}
             </${t.ORDERABLE}>
         `;
   }
@@ -232,16 +220,16 @@ class B extends s {
         `;
   }
   _GuRadioButtons(e, n) {
-    const o = n.map((E) => `
+    const E = n.map((o) => `
                 <${t.RADIO_ITEM}
-                    ${$.RADIO_ITEM.text}="${E.text}"
-                    ${$.RADIO_ITEM.value}="${E.value}">
+                    ${$.RADIO_ITEM.text}="${o.text}"
+                    ${$.RADIO_ITEM.value}="${o.value}">
                 </${t.RADIO_ITEM}>
             `).join("");
     return `
             <${t.RADIO_BUTTONS}
                 ${$.RADIO_BUTTONS.name}="${e}">
-                ${o}
+                ${E}
             </${t.RADIO_BUTTONS}>
         `;
   }
@@ -255,5 +243,5 @@ class B extends s {
   }
 }
 export {
-  B as CommonControl
+  _ as CommonControl
 };