@useinsider/guido 1.0.3-beta.df46976 → 1.0.3-beta.dfb1fcf

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

@@ -1,77 +1,77 @@
-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 u = Object.defineProperty;
+var C = (o, n, E) => n in o ? u(o, n, { enumerable: !0, configurable: !0, writable: !0, value: E }) : o[n] = E;
+var a = (o, n, E) => C(o, typeof n != "symbol" ? n + "" : n, E);
+import { Control as R, UIElementType as $, UEAttr as e } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class N extends R {
   constructor() {
     super(...arguments);
-    u(this, "currentNode");
+    a(this, "currentNode");
   }
   getContainer() {
-    var e;
-    return (e = document.querySelector("ui-editor")) == null ? void 0 : e.shadowRoot;
+    var E;
+    return (E = document.querySelector("ui-editor")) == null ? void 0 : E.shadowRoot;
   }
-  onTemplateNodeUpdated(e) {
-    this.currentNode = e;
+  onTemplateNodeUpdated(E) {
+    this.currentNode = E;
   }
-  _GuLabel({ text: e, name: T = "", position: n = "top" }) {
+  _GuLabel({ text: E, name: t = "", position: T = "top" }) {
     return `
             <${$.LABEL} 
-                style="${n === "top" ? "margin-bottom: 8px;" : ""}"
-                ${t.LABEL.text}="${e}" 
-                ${t.LABEL.name}="${T || `${e} Label`}">
+                style="${T === "top" ? "margin-bottom: 8px;" : ""}"
+                ${e.LABEL.text}="${E}" 
+                ${e.LABEL.name}="${t || `${E} Label`}">
             </${$.LABEL}>
         `;
   }
-  _GuToggle(e) {
+  _GuToggle(E) {
     return `
             <${$.SWITCHER}
-                ${t.SWITCHER.name}="${e}">
+                ${e.SWITCHER.name}="${E}">
             </${$.SWITCHER}>
         `;
   }
-  _GuSelectItem({ text: e, value: T }) {
+  _GuSelectItem({ text: E, value: t }) {
     return `
             <${$.SELECT_ITEM} 
-                ${t.SELECT_ITEM.text}="${e}" 
-                ${t.SELECT_ITEM.value}="${T}">
+                ${e.SELECT_ITEM.text}="${E}" 
+                ${e.SELECT_ITEM.value}="${t}">
             </${$.SELECT_ITEM}>`;
   }
-  _GuSelect({ name: e, placeholder: T, options: n, className: r = "es-180w" }) {
+  _GuSelect({ name: E, placeholder: t, options: T, className: r = "es-180w" }) {
     return `
             <${$.SELECTPICKER}
                 class="${r}"
-                ${t.SELECTPICKER.name}="${e}"
-                ${t.SELECTPICKER.placeholder}="${T}">
-                    ${n.map((a) => this._GuSelectItem(a)).join("")}
+                ${e.SELECTPICKER.name}="${E}"
+                ${e.SELECTPICKER.placeholder}="${t}">
+                    ${T.map((O) => this._GuSelectItem(O)).join("")}
             </${$.SELECTPICKER}>
         `;
   }
-  _GuTextInput({ name: e, placeholder: T, className: n = "" }) {
+  _GuTextInput({ name: E, placeholder: t, className: T = "" }) {
     return `
             <${$.TEXT}
-                class=${n}
-                ${t.TEXT.name}="${e}"
-                placeholder="${T || e}">
+                class=${T}
+                ${e.TEXT.name}="${E}"
+                placeholder="${t || E}">
             </${$.TEXT}>
         `;
   }
-  _GuCounter({ name: e, maxValue: T, minValue: n = 1, step: r = 1 }) {
+  _GuCounter({ name: E, maxValue: t, minValue: T = 1, step: r = 1 }) {
     return `
             <${$.COUNTER}
-                ${t.COUNTER.name}="${e}"
-                ${t.COUNTER.minValue}="${n}"
-                ${t.COUNTER.maxValue}="${T}"
-                ${t.COUNTER.step}="${r}">
+                ${e.COUNTER.name}="${E}"
+                ${e.COUNTER.minValue}="${T}"
+                ${e.COUNTER.maxValue}="${t}"
+                ${e.COUNTER.step}="${r}">
             </${$.COUNTER}>
         `;
   }
-  _GuButton({ name: e, label: T, id: n = "" }) {
+  _GuButton({ name: E, label: t, id: T = "" }) {
     return `
             <${$.BUTTON}
-                ${t.BUTTON.name}="${e}"
-                ${n ? `id="${n}"` : ""}
-                ${t.BUTTON.caption}="${T}"}>
+                ${e.BUTTON.name}="${E}"
+                ${T ? `id="${T}"` : ""}
+                ${e.BUTTON.caption}="${t}"}>
             </${$.BUTTON}>
         `;
   }
@@ -80,23 +80,105 @@ 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: t, className: T = "" }) {
     return `
             <${$.BUTTON}
-                class="${n}"
-                ${t.BUTTON.name}="${e}"
-                ${t.BUTTON.icon}="${T}">
+                class="${T}"
+                ${e.BUTTON.name}="${E}"
+                ${e.BUTTON.icon}="${t}">
             </${$.BUTTON}>
         `;
   }
-  _GuTwoColumns(e) {
+  _GuTwoColumns(E) {
     return `
             <div class="checkbox-select-container container two-columns">
-                ${e.join("")}
+                ${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, t) {
+    let T = "";
+    t.forEach((O) => {
+      const L = e.ORDERABLE_ITEM && "name" in e.ORDERABLE_ITEM ? e.ORDERABLE_ITEM.name : "name";
+      T += `
+                <${$.ORDERABLE_ITEM} ${L}="${O.key}">
+                    ${O.content}
+                </${$.ORDERABLE_ITEM}>
+            `;
+    });
+    const r = e.ORDERABLE && "name" in e.ORDERABLE ? e.ORDERABLE.name : "name";
+    return `
+            <${$.ORDERABLE} ${r}="${E}">
+                ${T}
+            </${$.ORDERABLE}>
+        `;
+  }
+  _GuNestedControl(E, t) {
+    return `
+            <${$.NESTED_CONTROL} ${e.NESTED_CONTROL.controlId}="${E}">
+                ${t}
+            </${$.NESTED_CONTROL}>
+        `;
+  }
+  _GuExpandable(E, t) {
+    return `
+            <${$.EXPANDABLE}>
+                <${$.EXPANDABLE_HEADER}>
+                    <${$.LABEL} ${e.LABEL.text}="${E}"></${$.LABEL}>
+                </${$.EXPANDABLE_HEADER}>
+                <${$.EXPANDABLE_CONTENT}>
+
+                    ${t}
+
+                </${$.EXPANDABLE_CONTENT}>
+            </${$.EXPANDABLE}>
+        `;
+  }
+  _GuColorPicker(E) {
+    return `
+            <${$.COLOR}
+                ${e.COLOR.name}="${E}">
+            </${$.COLOR}>
+        `;
+  }
+  _GuFontFamily(E, t = "Select Font") {
+    return `
+            <${$.FONT_FAMILY_SELECT}
+                ${e.FONT_FAMILY_SELECT.name}="${E}"
+                ${e.FONT_FAMILY_SELECT.placeholder}="${t}">
+            </${$.FONT_FAMILY_SELECT}>
+        `;
+  }
+  _GuRadioButtons(E, t) {
+    const T = t.map((r) => `
+                <${$.RADIO_ITEM}
+                    ${e.RADIO_ITEM.text}="${r.text}"
+                    ${e.RADIO_ITEM.value}="${r.value}">
+                </${$.RADIO_ITEM}>
+            `).join("");
+    return `
+            <${$.RADIO_BUTTONS}
+                ${e.RADIO_BUTTONS.name}="${E}">
+                ${T}
+            </${$.RADIO_BUTTONS}>
+        `;
+  }
+  _GuCheckbox(E, t) {
+    return `
+            <${$.CHECKBOX}
+                ${e.CHECKBOX.name}="${E}"
+                ${e.CHECKBOX.caption}="${t}">
+            </${$.CHECKBOX}>
+        `;
+  }
 }
 export {
-  L as CommonControl
+  N as CommonControl
 };

package/dist/extensions/Blocks/controlFactories.js

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