@useinsider/guido 1.0.3-beta.1cd6abc → 1.0.3-beta.1d07a49

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

@@ -1,11 +1,12 @@
-var l = Object.defineProperty;
-var C = (E, o, e) => o in E ? l(E, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : E[o] = e;
-var u = (E, o, e) => C(E, typeof o != "symbol" ? o + "" : o, e);
-import { Control as c, UIElementType as $, UEAttr as t } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class L extends c {
+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 {
   constructor() {
     super(...arguments);
-    u(this, "currentNode");
+    l(this, "currentNode");
+    l(this, "lastBlockInstanceId", null);
   }
   getContainer() {
     var e;
@@ -14,65 +15,121 @@ class L extends c {
   onTemplateNodeUpdated(e) {
     this.currentNode = e;
   }
-  _GuLabel({ text: e, name: T = "", position: n = "top" }) {
+  onDestroy() {
+    this.lastBlockInstanceId = null;
+  }
+  /**
+   * Gets the config block element from the current node.
+   * @returns The config block element or null if not found
+   */
+  getConfigBlock() {
+    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 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(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 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, E = "data-block-instance-id") {
+    const o = this.getBlockInstanceId(E);
+    if (!o)
+      return !1;
+    const T = o !== this.lastBlockInstanceId;
+    return T ? (this.currentNode && e(this.currentNode), n(), this.lastBlockInstanceId = o) : n(), T;
+  }
+  _GuLabel({ text: e, name: n = "", position: E = "top" }) {
     return `
-            <${$.LABEL} 
-                style="${n === "top" ? "margin-bottom: 8px;" : ""}"
-                ${t.LABEL.text}="${e}" 
-                ${t.LABEL.name}="${T || `${e} Label`}">
-            </${$.LABEL}>
+            <${t.LABEL} 
+                style="${E === "top" ? "margin-bottom: 8px;" : ""}"
+                ${$.LABEL.text}="${e}" 
+                ${$.LABEL.name}="${n || `${e} Label`}">
+            </${t.LABEL}>
         `;
   }
   _GuToggle(e) {
     return `
-            <${$.SWITCHER}
-                ${t.SWITCHER.name}="${e}">
-            </${$.SWITCHER}>
+            <${t.SWITCHER}
+                ${$.SWITCHER.name}="${e}">
+            </${t.SWITCHER}>
+        `;
+  }
+  _GuSelectItem({ text: e, value: n }) {
+    return `
+            <${t.SELECT_ITEM} 
+                ${$.SELECT_ITEM.text}="${e}" 
+                ${$.SELECT_ITEM.value}="${n}">
+            </${t.SELECT_ITEM}>`;
+  }
+  _GuSelect({ name: e, placeholder: n, options: E, className: o = "es-180w" }) {
+    return `
+            <${t.SELECTPICKER}
+                class="${o}"
+                ${$.SELECTPICKER.name}="${e}"
+                ${$.SELECTPICKER.placeholder}="${n}">
+                    ${E.map((T) => this._GuSelectItem(T)).join("")}
+            </${t.SELECTPICKER}>
         `;
   }
-  _GuSelectItem({ text: e, value: T }) {
+  _GuTextInput({ name: e, placeholder: n, className: E = "", disabled: o = !1 }) {
     return `
-            <${$.SELECT_ITEM} 
-                ${t.SELECT_ITEM.text}="${e}" 
-                ${t.SELECT_ITEM.value}="${T}">
-            </${$.SELECT_ITEM}>`;
+            <${t.TEXT}
+                class=${E}
+                ${$.TEXT.name}="${e}"
+                placeholder="${n || e}"
+                ${o ? `${$.TEXT.disabled}="true"` : ""}>
+            </${t.TEXT}>
+        `;
   }
-  _GuSelect({ name: e, placeholder: T, options: n, className: r = "es-180w" }) {
+  _GuCounter({ name: e, maxValue: n, minValue: E = 1, step: o = 1 }) {
     return `
-            <${$.SELECTPICKER}
-                class="${r}"
-                ${t.SELECTPICKER.name}="${e}"
-                ${t.SELECTPICKER.placeholder}="${T}">
-                    ${n.map((a) => this._GuSelectItem(a)).join("")}
-            </${$.SELECTPICKER}>
+            <${t.COUNTER}
+                ${$.COUNTER.name}="${e}"
+                ${$.COUNTER.minValue}="${E}"
+                ${$.COUNTER.maxValue}="${n}"
+                ${$.COUNTER.step}="${o}">
+            </${t.COUNTER}>
         `;
   }
-  _GuTextInput({ name: e, placeholder: T, className: n = "" }) {
+  _GuRadioButtonItem({ text: e, value: n, icon: E }) {
     return `
-            <${$.TEXT}
-                class=${n}
-                ${t.TEXT.name}="${e}"
-                placeholder="${T || e}">
-            </${$.TEXT}>
+            <${t.RADIO_ITEM}
+                ${$.RADIO_ITEM.value}="${n}"
+                ${e ? `${$.RADIO_ITEM.text}="${e}"` : ""}
+                ${E ? `${$.RADIO_ITEM.icon}="${E}"` : ""}>
+            </${t.RADIO_ITEM}>
         `;
   }
-  _GuCounter({ name: e, maxValue: T, minValue: n = 1, step: r = 1 }) {
+  _GuRadioButton({ name: e, buttons: n, id: E = "" }) {
     return `
-            <${$.COUNTER}
-                ${t.COUNTER.name}="${e}"
-                ${t.COUNTER.minValue}="${n}"
-                ${t.COUNTER.maxValue}="${T}"
-                ${t.COUNTER.step}="${r}">
-            </${$.COUNTER}>
+            <${t.RADIO_BUTTONS}
+                ${E ? `id="${E}"` : ""}
+                ${$.RADIO_BUTTONS.name}="${e}">
+                ${n.map((o) => this._GuRadioButtonItem(o)).join("")}
+            </${t.RADIO_BUTTONS}>
         `;
   }
-  _GuButton({ name: e, label: T, id: n = "" }) {
+  _GuButton({ name: e, label: n, id: E = "" }) {
     return `
-            <${$.BUTTON}
-                ${t.BUTTON.name}="${e}"
-                ${n ? `id="${n}"` : ""}
-                ${t.BUTTON.caption}="${T}"}>
-            </${$.BUTTON}>
+            <${t.BUTTON}
+                ${$.BUTTON.name}="${e}"
+                ${E ? `id="${E}"` : ""}
+                ${$.BUTTON.caption}="${n}"}>
+            </${t.BUTTON}>
         `;
   }
   /**
@@ -80,23 +137,112 @@ class L extends c {
    * @param param0
    * @returns It returns a button with an icon.
    */
-  _GuIconButton({ name: e, icon: T, className: n = "" }) {
+  _GuIconButton({ name: e, icon: n, className: E = "" }) {
     return `
-            <${$.BUTTON}
-                class="${n}"
-                ${t.BUTTON.name}="${e}"
-                ${t.BUTTON.icon}="${T}">
-            </${$.BUTTON}>
+            <${t.BUTTON}
+                class="${E}"
+                ${$.BUTTON.name}="${e}"
+                ${$.BUTTON.icon}="${n}">
+            </${t.BUTTON}>
         `;
   }
-  _GuTwoColumns(e) {
+  _GuOneColumn(e, n = "") {
     return `
-            <div class="checkbox-select-container container two-columns">
+            <div class="container one-column ${n}">
                 ${e.join("")}
             </div>
         `;
   }
+  _GuTwoColumns(e, n = "") {
+    return `
+            <div class="container two-columns ${n}">
+                ${e.join("")}
+            </div>
+        `;
+  }
+  /**
+   * Creates an orderable (sortable) list control
+   * @param name - The control name for value binding
+   * @param items - Array of item keys/values
+   * @param itemLabels - Optional array of objects with key and label properties for display
+   * @returns HTML string for the orderable control
+   */
+  _GuOrderable(e, n) {
+    let E = "";
+    n.forEach((T) => {
+      const u = $.ORDERABLE_ITEM && "name" in $.ORDERABLE_ITEM ? $.ORDERABLE_ITEM.name : "name";
+      E += `
+                <${t.ORDERABLE_ITEM} ${u}="${T.key}">
+                    ${T.content}
+                </${t.ORDERABLE_ITEM}>
+            `;
+    });
+    const o = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
+    return `
+            <${t.ORDERABLE} ${o}="${e}">
+                ${E}
+            </${t.ORDERABLE}>
+        `;
+  }
+  _GuNestedControl(e, n) {
+    return `
+            <${t.NESTED_CONTROL} ${$.NESTED_CONTROL.controlId}="${e}">
+                ${n}
+            </${t.NESTED_CONTROL}>
+        `;
+  }
+  _GuExpandable(e, n) {
+    return `
+            <${t.EXPANDABLE}>
+                <${t.EXPANDABLE_HEADER}>
+                    <${t.LABEL} ${$.LABEL.text}="${e}"></${t.LABEL}>
+                </${t.EXPANDABLE_HEADER}>
+                <${t.EXPANDABLE_CONTENT}>
+
+                    ${n}
+
+                </${t.EXPANDABLE_CONTENT}>
+            </${t.EXPANDABLE}>
+        `;
+  }
+  _GuColorPicker(e) {
+    return `
+            <${t.COLOR}
+                ${$.COLOR.name}="${e}">
+            </${t.COLOR}>
+        `;
+  }
+  _GuFontFamily(e, n = "Select Font") {
+    return `
+            <${t.FONT_FAMILY_SELECT}
+                ${$.FONT_FAMILY_SELECT.name}="${e}"
+                ${$.FONT_FAMILY_SELECT.placeholder}="${n}">
+            </${t.FONT_FAMILY_SELECT}>
+        `;
+  }
+  _GuRadioButtons(e, n) {
+    const E = n.map((o) => `
+                <${t.RADIO_ITEM}
+                    ${$.RADIO_ITEM.text}="${o.text}"
+                    ${$.RADIO_ITEM.value}="${o.value}">
+                </${t.RADIO_ITEM}>
+            `).join("");
+    return `
+            <${t.RADIO_BUTTONS}
+                ${$.RADIO_BUTTONS.name}="${e}">
+                ${E}
+            </${t.RADIO_BUTTONS}>
+        `;
+  }
+  _GuCheckbox(e, n) {
+    return `
+            <${t.CHECKBOX}
+                ${$.CHECKBOX.name}="${e}"
+                ${$.CHECKBOX.caption}="${n}">
+            </${t.CHECKBOX}>
+        `;
+  }
 }
 export {
-  L as CommonControl
+  _ as CommonControl
 };

package/dist/extensions/Blocks/controlFactories.js

@@ -0,0 +1,223 @@
+import { TextAlignBuiltInControl as r, TextColorBuiltInControl as l, TextSizeBuiltInControl as s, TextStyleBuiltInControl as c, TextFontFamilyBuiltInControl as u, ButtonBackgroundColorBuiltInControl as i, TextPaddingsBuiltInControl as d, ImageSizeBuiltInControl as a, ImageMarginsBuiltInControl as g, ButtonAlignBuiltInControl as x, ButtonBorderBuiltInControl as C, ButtonBorderRadiusBuiltInControl as B, ButtonColorBuiltInControl as I, ButtonFontFamilyBuiltInControl as m, ButtonMarginsBuiltInControl as T, ButtonPaddingsBuiltInControl as S, ButtonTextBuiltInControl as y, ButtonTextSizeBuiltInControl as A, ButtonTextStyleAndFontColorBuiltInControl as k, ButtonFitToContainerBuiltInControl as f } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+function q(e, t, n) {
+  return class extends r {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function N(e, t, n = ".ins-recommendation-product-container") {
+  return class extends l {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function $(e, t, n = ".ins-recommendation-product-container") {
+  return class extends s {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function p(e, t, n = ".ins-recommendation-product-container") {
+  return class extends c {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function F(e, t, n = ".ins-recommendation-product-container") {
+  return class extends u {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function z(e, t, n = ".ins-recommendation-product-container") {
+  return class extends i {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function M(e, t, n = ".ins-recommendation-product-container") {
+  return class extends d {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function P(e, t, n = ".ins-recommendation-product-container") {
+  return class extends x {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function R(e, t, n = ".ins-recommendation-product-container") {
+  return class extends I {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function h(e, t, n = ".ins-recommendation-product-container") {
+  return class extends C {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function j(e, t, n = ".ins-recommendation-product-container") {
+  return class extends B {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function v(e, t, n = ".ins-recommendation-product-container") {
+  return class extends m {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function w(e, t, n = ".ins-recommendation-product-container") {
+  return class extends T {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function D(e, t, n = ".ins-recommendation-product-container") {
+  return class extends S {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function E(e, t, n = ".ins-recommendation-product-container") {
+  return class extends y {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function G(e, t, n = ".ins-recommendation-product-container") {
+  return class extends A {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function H(e, t, n) {
+  return class extends k {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function J(e, t, n) {
+  return class extends f {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function K(e, t, n) {
+  return class extends a {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+function L(e, t, n) {
+  return class extends g {
+    getId() {
+      return e;
+    }
+    getTargetNodes(o) {
+      return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
+    }
+  };
+}
+export {
+  P as createButtonAlignControl,
+  h as createButtonBorderControl,
+  j as createButtonBorderRadiusControl,
+  R as createButtonColorControl,
+  J as createButtonFitToContainerControl,
+  v as createButtonFontFamilyControl,
+  w as createButtonMarginsControl,
+  D as createButtonPaddingsControl,
+  E as createButtonTextControl,
+  G as createButtonTextSizeControl,
+  H as createButtonTextStyleAndFontColorControl,
+  L as createImageMarginsControl,
+  K as createImageSizeControl,
+  M as createPaddingsControl,
+  q as createTextAlignControl,
+  z as createTextBackgroundColorControl,
+  N as createTextColorControl,
+  F as createTextFontFamilyControl,
+  $ as createTextSizeControl,
+  p as createTextStyleControl
+};

package/dist/extensions/DynamicContent/dynamic-content-modal.js

@@ -1,27 +1,33 @@
-var i = Object.defineProperty;
-var d = (t, e, n) => e in t ? i(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var a = (t, e, n) => d(t, typeof e != "symbol" ? e + "" : e, n);
-class y {
+var d = Object.defineProperty;
+var m = (t, e, n) => e in t ? d(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var c = (t, e, n) => m(t, typeof e != "symbol" ? e + "" : e, n);
+class C {
   constructor() {
-    a(this, "selectedDynamicContent", null);
-    a(this, "dataSelectCallback", () => {
+    c(this, "selectedDynamicContent", null);
+    c(this, "dataSelectCallback", () => {
     });
+    c(this, "closeDynamicContentHandler", null);
   }
-  openMergeTagsLibrary(e, n) {
-    this.dataSelectCallback = n, this.selectedDynamicContent = e;
-    const s = new CustomEvent("dynamic-content:open", {
-      detail: {
-        attribute: e
-      }
+  /**
+   * Opens the merge tags library modal
+   * @param dynamicContent - Currently selected dynamic content (if any)
+   * @param onDataSelectCallback - Callback invoked when user selects a merge tag
+   * @param position - Optional position data to place the modal
+   */
+  openMergeTagsLibrary(e, n, l) {
+    this.closeDynamicContentHandler && (document.removeEventListener("dynamic-content:close", this.closeDynamicContentHandler), this.closeDynamicContentHandler = null), this.dataSelectCallback = n, this.selectedDynamicContent = e;
+    const o = {
+      attribute: e,
+      position: l
+    }, s = new CustomEvent("dynamic-content:open", {
+      detail: o
     });
-    document.dispatchEvent(s);
-    const o = (l) => {
-      const c = l.detail;
-      this.selectedDynamicContent = c, c.text && c.value && this.dataSelectCallback(c), document.removeEventListener("dynamic-content:close", o);
-    };
-    document.addEventListener("dynamic-content:close", o);
+    document.dispatchEvent(s), this.closeDynamicContentHandler = (i) => {
+      const a = i.detail;
+      this.selectedDynamicContent = a, a.text && a.value && this.dataSelectCallback(a);
+    }, document.addEventListener("dynamic-content:close", this.closeDynamicContentHandler);
   }
 }
 export {
-  y as ExternalMergeTagsLibrary
+  C as ExternalMergeTagsLibrary
 };