@useinsider/guido 1.0.3-beta.d74964e → 1.0.3-beta.d8a9e56

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

@@ -1,181 +1,61 @@
-var l = Object.defineProperty;
-var g = (o, s, e) => s in o ? l(o, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[s] = e;
-var r = (o, s, e) => g(o, typeof s != "symbol" ? s + "" : s, e);
-import { dynamicContentToMergeTags as d } from "../../utils/genericUtil.js";
-import { UIElement as u, UIElementType as a, UEAttr as m, UIElementTagRegistry as h } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+var o = Object.defineProperty;
+var g = (n, t, e) => t in n ? o(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var i = (n, t, e) => g(n, typeof t != "symbol" ? t + "" : t, e);
+import { dynamicContentToMergeTags as m } from "../../utils/genericUtil.js";
+import { UIElement as c, UIElementType as r, UEAttr as l, UIElementTagRegistry as d } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { ExternalMergeTagsLibrary as T } from "./dynamic-content-modal.js";
-const c = "external-dynamic-content-ui-element", y = "button-add-dynamic-content";
-class _ extends h {
-  registerUiElements(s) {
-    s[a.MERGETAGS] = c;
+const a = "external-dynamic-content-ui-element", y = "button-add-dynamic-content";
+class p extends d {
+  registerUiElements(t) {
+    t[r.MERGETAGS] = a;
   }
 }
-class b extends u {
+class C extends c {
   constructor() {
     super(...arguments);
-    r(this, "mergeTagsButton", null);
-    r(this, "mergeTagsLibrary", null);
-    r(this, "clickListener", null);
-    r(this, "lastClickedPosition");
-    r(this, "mousedownListener", null);
-    r(this, "closeEventListener", null);
+    i(this, "mergeTagsButton", null);
+    i(this, "listener", () => {
+    });
+    i(this, "mergeTagsLibrary", null);
+    i(this, "selectedDynamicContent", { value: "", text: "" });
   }
   getId() {
-    return c;
+    return a;
   }
   onRender(e) {
-    var t;
-    this.mergeTagsButton = e.querySelector("#guido__btn-add-dynamic-content"), this.clickListener = this._onClick.bind(this), (t = this.mergeTagsButton) == null || t.addEventListener("click", this.clickListener), this._setupCoordinateTracking(), this.closeEventListener = this._handleCloseEvent.bind(this), document.addEventListener("dynamic-content:close", this.closeEventListener);
+    var s;
+    this.listener = this._onClick.bind(this), this.mergeTagsButton = e.querySelector("#guido__btn-add-dynamic-content"), (s = this.mergeTagsButton) == null || s.addEventListener("click", this.listener);
   }
   onDestroy() {
     var e;
-    this.clickListener && ((e = this.mergeTagsButton) == null || e.removeEventListener("click", this.clickListener)), this._cleanupCoordinateTracking(), this.closeEventListener && document.removeEventListener("dynamic-content:close", this.closeEventListener), this.mergeTagsButton = null, this.clickListener = null, this.closeEventListener = null, this.lastClickedPosition = void 0;
+    (e = this.mergeTagsButton) == null || e.removeEventListener("click", this.listener);
   }
   _onClick() {
     this.openMergeTagLibrary();
   }
-  /**
-   * Handles close event - unselects the merge tag when closing without data
-   * This allows onAttributeUpdated to fire again on next click
-   */
-  _handleCloseEvent(e) {
-    const t = e, { text: n = "", value: i = "" } = t.detail || {};
-    (!n || !i) && this.api.triggerValueChange(null);
-  }
-  /**
-   * Called when Stripo detects merge tag interactions
-   * This is the key method that receives notifications about merge tag clicks
-   * @param name - Attribute name (e.g., 'mergeTag')
-   * @param value - MergeTag object with label, value, selStart, selEnd, etc.
-   */
-  onAttributeUpdated(e, t) {
-    if (e !== "mergeTag" || !t)
-      return;
-    const n = {
-      text: t.label,
-      value: t.value
-    }, i = this.lastClickedPosition;
-    this.lastClickedPosition = void 0, this._openDynamicContentLibrary(n, i);
-  }
   openMergeTagLibrary() {
-    const e = this._getButtonPosition(), t = { value: "", text: "" };
-    this._openDynamicContentLibrary(t, e);
-  }
-  /**
-   * Opens the dynamic content library for external apps
-   * Dispatches event with dynamic content data and position
-   */
-  _openDynamicContentLibrary(e, t) {
-    this._ensureMergeTagsLibrary(), this.mergeTagsLibrary.openMergeTagsLibrary(
-      e,
-      (n) => {
-        n.text && n.value && this.api.triggerValueChange(d([n])[0]);
-      },
-      t
-    );
-  }
-  /**
-   * Ensures merge tags library is initialized
-   */
-  _ensureMergeTagsLibrary() {
-    this.mergeTagsLibrary || (this.mergeTagsLibrary = new T());
-  }
-  /**
-   * Gets the button's position on the screen
-   * Used to position the modal or anything else near the button
-   */
-  _getButtonPosition() {
-    const e = this.mergeTagsButton.getBoundingClientRect();
-    return {
-      x: e.left,
-      y: e.top,
-      width: e.width,
-      height: e.height
-    };
-  }
-  /**
-   * Sets up coordinate tracking for merge tag clicks in the iframe
-   * Workaround from Stripo intercepting click events - tracks mousedown events instead
-   */
-  _setupCoordinateTracking() {
-    const e = () => {
-      const t = this._getEditorFrame();
-      if (!t) {
-        setTimeout(e, 100);
-        return;
+    this.mergeTagsLibrary || (this.mergeTagsLibrary = new T()), this.mergeTagsLibrary.openMergeTagsLibrary(
+      this.selectedDynamicContent,
+      (e) => {
+        this.api.onValueChanged(m([e])[0]);
       }
-      this.mousedownListener = (n) => {
-        const i = this._findMergeTagElement(n.target);
-        i && (this.lastClickedPosition = this._calculateAbsolutePosition(t, i));
-      }, t.contentWindow.document.addEventListener("mousedown", this.mousedownListener);
-    };
-    e();
-  }
-  /**
-   * Gets the editor iframe element
-   */
-  _getEditorFrame() {
-    var n;
-    const e = document.querySelector("ui-editor");
-    if (!(e != null && e.shadowRoot))
-      return null;
-    const t = e.shadowRoot.querySelector("iframe");
-    return (n = t == null ? void 0 : t.contentWindow) != null && n.document ? t : null;
-  }
-  /**
-   * Finds merge tag element in the element tree
-   */
-  _findMergeTagElement(e) {
-    var n, i;
-    let t = e;
-    for (; t; ) {
-      if ((n = t.classList) != null && n.contains("target") || (i = t.classList) != null && i.contains("esd-merge-tag"))
-        return t;
-      t = t.parentElement;
-    }
-    return null;
-  }
-  /**
-   * Calculates absolute position of element relative to page
-   */
-  _calculateAbsolutePosition(e, t) {
-    const n = e.getBoundingClientRect(), i = t.getBoundingClientRect();
-    return {
-      x: n.x + i.x,
-      y: n.y + i.y,
-      width: i.width,
-      height: i.height
-    };
-  }
-  /**
-   * Cleans up the coordinate tracking event listener
-   */
-  _cleanupCoordinateTracking() {
-    var t;
-    if (!this.mousedownListener)
-      return;
-    const e = this._getEditorFrame();
-    (t = e == null ? void 0 : e.contentWindow) != null && t.document && e.contentWindow.document.removeEventListener("mousedown", this.mousedownListener), this.mousedownListener = null;
+    );
   }
-  /**
-   * Returns the HTML template for the "Add Dynamic Content" button
-   * This button is placed in the merge tags selector UI
-   */
   getTemplate() {
     return `
             <div>
-                <${a.BUTTON} 
+                <${r.BUTTON} 
                     id="guido__btn-add-dynamic-content" 
                     class="btn btn-primary"
-                    ${m.BUTTON.name}="${y}">
-                        <${a.ICON} src="plus" class="icon icon-button color-primary">
-                        </${a.ICON}>
+                    ${l.BUTTON.name}="${y}">
+                        <${r.ICON} src="plus" class="icon icon-button color-primary">
+                        </${r.ICON}>
                         ${this.api.translate("Add Dynamic Content")}
-                </${a.BUTTON}>
+                </${r.BUTTON}>
             </div>`;
   }
 }
 export {
-  _ as DynamicContentTagRegistry,
-  b as DynamicContentUiElementExtension
+  p as DynamicContentTagRegistry,
+  C as DynamicContentUiElementExtension
 };

package/dist/guido.css

@@ -1 +1 @@
-.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-0502bceb] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.guido-loading__wrapper[data-v-dced5582]{height:100%;top:75px}.guido-editor__wrapper[data-v-b22f3777],.guido-editor__container[data-v-b22f3777]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-b22f3777]{height:calc(100vh - 75px)}[data-v-70835920] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-dd57102d] .guido__verion-history-view-option-selection-desktop svg,[data-v-dd57102d] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-dd57102d] .in-segments-wrapper__button_selected,[data-v-dd57102d] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-7a09985c]{gap:16px}[data-v-c2adc57d] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-2dd60b0c],[data-v-2dd60b0c] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-f20b3a9b]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-v-d3c52b44] .vueperslides__bullets,[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}
+[data-v-2c168944] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.guido-loading__wrapper[data-v-dced5582]{height:100%;top:75px}.guido-editor__wrapper[data-v-aca05338],.guido-editor__container[data-v-aca05338]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-aca05338]{height:calc(100vh - 75px)}.error-list[data-v-7a09985c]{gap:16px}[data-v-c2adc57d] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-2dd60b0c],[data-v-2dd60b0c] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-f20b3a9b]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-v-d3c52b44] .vueperslides__bullets,[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}