@useinsider/guido 2.0.0-beta.bf65edd → 2.0.0-beta.c0d8594

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

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

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, 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);
+    }), 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);
   }
   _listenStateUpdates() {
     this.storeUnsubscription = this.store.$subscribe((e) => {

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

@@ -1,8 +1,8 @@
 var c = Object.defineProperty;
-var I = (a, r, e) => r in a ? c(a, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[r] = e;
-var l = (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 {
+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 {
   constructor() {
     super(...arguments);
     l(this, "currentNode");
@@ -19,43 +19,54 @@ class _ extends O {
     this.lastBlockInstanceId = null;
   }
   /**
-   * Gets the config block element from the current node.
+   * 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
    * @returns The config block element or null if not found
    */
   getConfigBlock() {
-    if (!this.currentNode)
-      return null;
-    const e = this.currentNode.closest(".items-block-v2");
+    const e = this.getItemsBlockContainer();
     return e ? e.querySelector("esd-config-block") : null;
   }
   /**
-   * Gets the current block instance ID from the config block.
-   * @param blockInstanceIdAttribute - The attribute name for block instance ID (default: 'data-block-instance-id')
+   * Gets the current block instance ID from the node config (Stripo V2) or legacy config block.
    * @returns The block instance ID or null if not found
    */
-  getBlockInstanceId(e = "data-block-instance-id") {
-    const n = this.getConfigBlock();
-    return n ? n.getAttribute(e) : null;
+  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;
   }
   /**
    * Handles block instance change detection and syncing.
-   * 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)
+   * 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)
    * @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, E = "data-block-instance-id") {
-    const o = this.getBlockInstanceId(E);
+  handleBlockInstanceChange(e, n) {
+    const o = this.getBlockInstanceId();
     if (!o)
       return !1;
-    const T = o !== this.lastBlockInstanceId;
-    return T ? (this.currentNode && e(this.currentNode), n(), this.lastBlockInstanceId = o) : n(), T;
+    const E = o !== this.lastBlockInstanceId;
+    return E ? (this.currentNode && e(this.currentNode), n(), this.lastBlockInstanceId = o) : n(), E;
   }
-  _GuLabel({ text: e, name: n = "", position: E = "top" }) {
+  _GuLabel({ text: e, name: n = "", position: o = "top" }) {
     return `
             <${t.LABEL} 
-                style="${E === "top" ? "margin-bottom: 8px;" : ""}"
+                style="${o === "top" ? "margin-bottom: 8px;" : ""}"
                 ${$.LABEL.text}="${e}" 
                 ${$.LABEL.name}="${n || `${e} Label`}">
             </${t.LABEL}>
@@ -75,59 +86,59 @@ class _ extends O {
                 ${$.SELECT_ITEM.value}="${n}">
             </${t.SELECT_ITEM}>`;
   }
-  _GuSelect({ name: e, placeholder: n, options: E, className: o = "es-180w" }) {
+  _GuSelect({ name: e, placeholder: n, options: o, className: E = "es-180w" }) {
     return `
             <${t.SELECTPICKER}
-                class="${o}"
+                class="${E}"
                 ${$.SELECTPICKER.name}="${e}"
                 ${$.SELECTPICKER.placeholder}="${n}">
-                    ${E.map((T) => this._GuSelectItem(T)).join("")}
+                    ${o.map((a) => this._GuSelectItem(a)).join("")}
             </${t.SELECTPICKER}>
         `;
   }
-  _GuTextInput({ name: e, placeholder: n, className: E = "", disabled: o = !1 }) {
+  _GuTextInput({ name: e, placeholder: n, className: o = "", disabled: E = !1 }) {
     return `
             <${t.TEXT}
-                class=${E}
+                class=${o}
                 ${$.TEXT.name}="${e}"
                 placeholder="${n || e}"
-                ${o ? `${$.TEXT.disabled}="true"` : ""}>
+                ${E ? `${$.TEXT.disabled}="true"` : ""}>
             </${t.TEXT}>
         `;
   }
-  _GuCounter({ name: e, maxValue: n, minValue: E = 1, step: o = 1 }) {
+  _GuCounter({ name: e, maxValue: n, minValue: o = 1, step: E = 1 }) {
     return `
             <${t.COUNTER}
                 ${$.COUNTER.name}="${e}"
-                ${$.COUNTER.minValue}="${E}"
+                ${$.COUNTER.minValue}="${o}"
                 ${$.COUNTER.maxValue}="${n}"
-                ${$.COUNTER.step}="${o}">
+                ${$.COUNTER.step}="${E}">
             </${t.COUNTER}>
         `;
   }
-  _GuRadioButtonItem({ text: e, value: n, icon: E }) {
+  _GuRadioButtonItem({ text: e, value: n, icon: o }) {
     return `
             <${t.RADIO_ITEM}
                 ${$.RADIO_ITEM.value}="${n}"
                 ${e ? `${$.RADIO_ITEM.text}="${e}"` : ""}
-                ${E ? `${$.RADIO_ITEM.icon}="${E}"` : ""}>
+                ${o ? `${$.RADIO_ITEM.icon}="${o}"` : ""}>
             </${t.RADIO_ITEM}>
         `;
   }
-  _GuRadioButton({ name: e, buttons: n, id: E = "" }) {
+  _GuRadioButton({ name: e, buttons: n, id: o = "" }) {
     return `
             <${t.RADIO_BUTTONS}
-                ${E ? `id="${E}"` : ""}
+                ${o ? `id="${o}"` : ""}
                 ${$.RADIO_BUTTONS.name}="${e}">
-                ${n.map((o) => this._GuRadioButtonItem(o)).join("")}
+                ${n.map((E) => this._GuRadioButtonItem(E)).join("")}
             </${t.RADIO_BUTTONS}>
         `;
   }
-  _GuButton({ name: e, label: n, id: E = "" }) {
+  _GuButton({ name: e, label: n, id: o = "" }) {
     return `
             <${t.BUTTON}
                 ${$.BUTTON.name}="${e}"
-                ${E ? `id="${E}"` : ""}
+                ${o ? `id="${o}"` : ""}
                 ${$.BUTTON.caption}="${n}"}>
             </${t.BUTTON}>
         `;
@@ -137,10 +148,10 @@ class _ extends O {
    * @param param0
    * @returns It returns a button with an icon.
    */
-  _GuIconButton({ name: e, icon: n, className: E = "" }) {
+  _GuIconButton({ name: e, icon: n, className: o = "" }) {
     return `
             <${t.BUTTON}
-                class="${E}"
+                class="${o}"
                 ${$.BUTTON.name}="${e}"
                 ${$.BUTTON.icon}="${n}">
             </${t.BUTTON}>
@@ -168,19 +179,19 @@ class _ extends O {
    * @returns HTML string for the orderable control
    */
   _GuOrderable(e, n) {
-    let E = "";
-    n.forEach((T) => {
+    let o = "";
+    n.forEach((a) => {
       const u = $.ORDERABLE_ITEM && "name" in $.ORDERABLE_ITEM ? $.ORDERABLE_ITEM.name : "name";
-      E += `
-                <${t.ORDERABLE_ITEM} ${u}="${T.key}">
-                    ${T.content}
+      o += `
+                <${t.ORDERABLE_ITEM} ${u}="${a.key}">
+                    ${a.content}
                 </${t.ORDERABLE_ITEM}>
             `;
     });
-    const o = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
+    const E = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
     return `
-            <${t.ORDERABLE} ${o}="${e}">
-                ${E}
+            <${t.ORDERABLE} ${E}="${e}">
+                ${o}
             </${t.ORDERABLE}>
         `;
   }
@@ -221,16 +232,16 @@ class _ extends O {
         `;
   }
   _GuRadioButtons(e, n) {
-    const E = n.map((o) => `
+    const o = n.map((E) => `
                 <${t.RADIO_ITEM}
-                    ${$.RADIO_ITEM.text}="${o.text}"
-                    ${$.RADIO_ITEM.value}="${o.value}">
+                    ${$.RADIO_ITEM.text}="${E.text}"
+                    ${$.RADIO_ITEM.value}="${E.value}">
                 </${t.RADIO_ITEM}>
             `).join("");
     return `
             <${t.RADIO_BUTTONS}
                 ${$.RADIO_BUTTONS.name}="${e}">
-                ${E}
+                ${o}
             </${t.RADIO_BUTTONS}>
         `;
   }
@@ -244,5 +255,5 @@ class _ extends O {
   }
 }
 export {
-  _ as CommonControl
+  B as CommonControl
 };