@useinsider/guido 1.0.3-beta.8df77fb → 1.0.3-beta.8eea45e

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

@@ -1,46 +1,52 @@
-var d = Object.defineProperty;
-var l = (r, n, t) => n in r ? d(r, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[n] = t;
-var o = (r, n, t) => l(r, typeof n != "symbol" ? n + "" : n, t);
-import { useHttp as L } from "../../../composables/useHttp.js";
-import { DEFAULT_UNSUBSCRIBE_GROUP as c } from "../../../enums/unsubscribe.js";
-import { Control as p, UIElementType as i, UEAttr as e, ModificationDescription as h } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-const m = "ui-elements-radio-button", u = "select", { get: $ } = L();
-class S extends p {
+var E = Object.defineProperty;
+var p = (o, i, t) => i in o ? E(o, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[i] = t;
+var a = (o, i, t) => p(o, typeof i != "symbol" ? i + "" : i, t);
+import { useHttp as m } from "../../../composables/useHttp.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/AiAssistantValueType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockCompositionType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockName.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BuiltInControlTypes.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/ContextActionType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/EditorStatePropertyType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PanelPosition.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/Popover.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PreviewDeviceMode.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/SettingsTab.js";
+import { UEAttr as e } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementsAttributes.js";
+import { UIElementType as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementType.js";
+import { Control as c } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/controls/Control.js";
+import { ModificationDescription as d } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/modifications/ModificationDescription.js";
+const l = "ui-elements-radio-button", n = "select", { get: L } = m();
+class R extends c {
   constructor() {
     super(...arguments);
-    o(this, "currentNode");
-    o(this, "selectedUnsubGroup");
-    o(this, "unsubList", []);
+    a(this, "currentNode");
+    a(this, "selectedUnsubGroup");
+    a(this, "unsubList", []);
   }
   getId() {
-    return m;
+    return l;
   }
   _setFormValues() {
-    if (this.selectedUnsubGroup = "", this.currentNode && "getAttribute" in this.currentNode) {
-      const t = this.currentNode.getAttribute("id");
-      if (t) {
-        const s = t === c.sendGridId ? t : Number(t);
-        s && (this.selectedUnsubGroup = s);
-      }
-    }
     this.api.updateValues({
-      [u]: this.selectedUnsubGroup
+      [n]: ""
     });
   }
   _getLabel(t, s = `${Math.random()}`) {
     return `
-            <${i.LABEL} 
+            <${r.LABEL} 
                 ${e.LABEL.text}="${t}" 
                 ${e.LABEL.name}="${s}">
-            </${i.LABEL}>
+            </${r.LABEL}>
         `;
   }
   _getSelectItem(t, s) {
     return `
-            <${i.SELECT_ITEM} 
+            <${r.SELECT_ITEM} 
                 ${e.SELECT_ITEM.text}="${t}" 
                 ${e.SELECT_ITEM.value}="${s}">
-            </${i.SELECT_ITEM}>`;
+            </${r.SELECT_ITEM}>`;
   }
   _getSelect() {
     return this.unsubList.map((t) => this._getSelectItem(t.name, t.sendGridId)).join("");
@@ -49,45 +55,50 @@ class S extends p {
     return `
             <div class="checkbox-controls-container">
                 <div class="checkbox-select-container container two-columns stretch">
-                    <${i.LABEL}
+                    <${r.LABEL}
                         ${e.LABEL.text}="${this.api.translate("Unsubscribe Group")}"
                         ${e.LABEL.name}="${Math.random()}">
-                    </${i.LABEL}>
+                    </${r.LABEL}>
 
-                    <${i.SELECTPICKER}
-                        ${e.SELECTPICKER.name}="${u}"
+                    <${r.SELECTPICKER}
+                        ${e.SELECTPICKER.name}="${n}"
                         ${e.SELECTPICKER.placeholder}="${this.api.translate("Select Unsubscribe Group")}">
                             ${this._getSelect()}
-                    </${i.SELECTPICKER}>
+                    </${r.SELECTPICKER}>
                 </div>
             </div>
         `;
   }
   _onSelectChange(t) {
-    this.currentNode && this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute("id", t.toString()).apply(new h(`Updated text to ${t}`));
+    this.currentNode && this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute("id", t.toString()).apply(new d(`Updated text to ${t}`));
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(u, (t) => this._onSelectChange(t));
+    this.api.onValueChanged(n, (t) => this._onSelectChange(t));
   }
   onTemplateNodeUpdated(t) {
-    this.currentNode = t, this._setFormValues();
+    if (this.currentNode = t, "getAttribute" in t) {
+      const s = Number(t.getAttribute("id"));
+      s && (this.selectedUnsubGroup = s, this.api.updateValues({
+        [n]: this.selectedUnsubGroup
+      }));
+    }
   }
   // eslint-disable-next-line @typescript-eslint/no-misused-promises
   async onRender() {
-    const t = await $(
+    const t = await L(
       "/unsubscribe-groups/unsubscribe-list"
-    ), s = [c, ...t.data], E = s.map((a) => ({
-      [e.SELECT_ITEM.text]: a.name,
-      [e.SELECT_ITEM.value]: a.sendGridId
+    ), s = t.data.map((u) => ({
+      [e.SELECT_ITEM.text]: u.name,
+      [e.SELECT_ITEM.value]: u.sendGridId
     }));
-    this.unsubList = s, this.api.setUIEAttribute(
-      u,
+    this.unsubList = t.data, this.api.setUIEAttribute(
+      n,
       e.SELECTPICKER.items,
-      E
+      s
     ), this._setFormValues(), this._listenToFormUpdates();
   }
 }
 export {
-  m as CONTROL_BLOCK_ID,
-  S as RadioButtonControl
+  l as CONTROL_BLOCK_ID,
+  R as RadioButtonControl
 };

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

@@ -1,9 +1,20 @@
-import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/AiAssistantValueType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockCompositionType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockName.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BuiltInControlTypes.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/ContextActionType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/EditorStatePropertyType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PanelPosition.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/Popover.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PreviewDeviceMode.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/SettingsTab.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementType.js";
+import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/ExtensionBuilder.js";
 import { RadioButtonCustomBlock as t } from "./block.js";
 import { RadioButtonControl as i } from "./control.js";
-import { RadioButtonIconsRegistry as n } from "./iconsRegistry.js";
 import { RadioButtonBlockSettingsPanel as r } from "./settingsPanel.js";
-const l = new o().addBlock(t).withSettingsPanelRegistry(r).addControl(i).withIconsRegistry(n).build();
+const C = new o().addBlock(t).withSettingsPanelRegistry(r).addControl(i).build();
 export {
-  l as default
+  C as default
 };

package/dist/extensions/Blocks/RadioButton/settingsPanel.js

@@ -1,26 +1,39 @@
-import { SettingsPanelRegistry as r, SettingsPanelTab as t, SettingsTab as o, ContainerControls as e, TextControls as s } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { BLOCK_ID as T } from "./block.js";
-import { CONTROL_BLOCK_ID as i } from "./control.js";
-class a extends r {
-  registerBlockControls(n) {
-    n[T] = [
-      new t(
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/AiAssistantValueType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockCompositionType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockName.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockType.js";
+import { ContainerControls as t, TextControls as m } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BuiltInControlTypes.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/ContextActionType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/EditorStatePropertyType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PanelPosition.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/Popover.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PreviewDeviceMode.js";
+import { SettingsTab as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/SettingsTab.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementType.js";
+import { SettingsPanelRegistry as e } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/controls/SettingsPanelRegistry.js";
+import { SettingsPanelTab as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/controls/SettingsPanelTab.js";
+import { BLOCK_ID as p } from "./block.js";
+import { CONTROL_BLOCK_ID as n } from "./control.js";
+class K extends e {
+  registerBlockControls(i) {
+    i[p] = [
+      new r(
         o.SETTINGS,
         [
-          i,
-          e.EXTERNAL_INDENTS,
-          e.DISPLAY_CONDITIONS
+          n,
+          t.EXTERNAL_INDENTS,
+          t.DISPLAY_CONDITIONS
         ]
       ),
-      new t(
+      new r(
         o.STYLES,
         [
-          s.TEXT_BLOCK_BACKGROUND_COLOR
+          m.TEXT_BLOCK_BACKGROUND_COLOR
         ]
       )
     ];
   }
 }
 export {
-  a as RadioButtonBlockSettingsPanel
+  K as RadioButtonBlockSettingsPanel
 };

package/dist/{src/extensions → extensions}/Blocks/RadioButton/template.d.ts

@@ -1,4 +1,4 @@
-declare const migrationTemplate = "\n    <td\n        align=\"left\"\n        esd-extension-block-id=\"radio-button-block\"\n        esd-handler-name=\"esd-extension-RadioButtonBlock\"\n        class=\"\n            radio-button\n            radio-button-v2\n            esd-block-ra\n            esd-radio-button-block\n            esd-extension-block\n            es-p10t\n            es-p10b\n            es-p30r\n            es-p30l\"\n    >\n        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n            <tbody>\n                <tr>\n                    <td align=\"left\" width=\"70%\" style=\"vertical-align: top;\">\n                        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                            <tbody>\n                                <tr>\n                                    {-{-TITLE-}-}\n                                </tr>\n                                <tr>\n                                    {-{-DESCRIPTION-}-}\n                                </tr>\n                            </tbody>\n                        </table>\n                    </td>\n                    <td align=\"right\" width=\"30%\" style=\"vertical-align: middle;\">\n                        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                            <tbody>\n                                <tr>\n                                    <td width=\"50%\">\n                                        <table width=\"100%\">\n                                            <tr>\n                                                <td width=\"24\">\n                                                    <input\n                                                        type=\"radio\"\n                                                        id=\"radioYes\"\n                                                        name=\"unsubscribe\"\n                                                        data-cke-editable=\"1\"\n                                                        style=\"margin: 0px; vertical-align: middle;>\n                                                    </td>\n                                                {-{-YES-}-}\n                                            </tr>\n                                        </table>\n                                    </td>\n                                    <td width=\"50%\">\n                                        <table width=\"100%\">\n                                            <tr>\n                                                <td width=\"24\">\n                                                    <input\n                                                        type=\"radio\"\n                                                        id=\"radioNo\"\n                                                        name=\"unsubscribe\"\n                                                        data-cke-editable=\"1\"\n                                                        style=\"margin: 0px; vertical-align: middle;\">\n                                                </td>\n                                                {-{-NO-}-}\n                                            </tr>\n                                        </table>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </td>\n";
+declare const migrationTemplate = "\n    <td \n        align=\"left\" \n        esd-extension-block-id=\"radio-button-block\" \n        esd-handler-name=\"esd-extension-RadioButtonBlock\"\n        class=\"radio-button-v2 esd-block-ra esd-radio-button-block esd-extension-block es-p10t es-p10b es-p30r es-p30l\"\n    >\n        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n            <tbody>\n                <tr>\n                    <td align=\"left\" width=\"70%\" style=\"vertical-align: top;\">\n                        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                            <tbody>\n                                <tr>\n                                    {-{-TITLE-}-}\n                                </tr>\n                                <tr>\n                                    {-{-DESCRIPTION-}-}\n                                </tr>\n                            </tbody>\n                        </table>\n                    </td>\n                    <td align=\"right\" width=\"30%\" style=\"vertical-align: middle;\">\n                        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                            <tbody>\n                                <tr>\n                                    <td width=\"50%\">\n                                        <table width=\"100%\">\n                                            <tr>\n                                                <td width=\"24\">\n                                                    <input\n                                                        type=\"radio\"\n                                                        id=\"radioYes\"\n                                                        name=\"unsubscribe\"\n                                                        data-cke-editable=\"1\"\n                                                        style=\"margin: 0px; vertical-align: middle;>\n                                                    </td>\n                                                {-{-YES-}-}\n                                            </tr>\n                                        </table>\n                                    </td>\n                                    <td width=\"50%\">\n                                        <table width=\"100%\">\n                                            <tr>\n                                                <td width=\"24\">\n                                                    <input\n                                                        type=\"radio\"\n                                                        id=\"radioNo\"\n                                                        name=\"unsubscribe\"\n                                                        data-cke-editable=\"1\"\n                                                        style=\"margin: 0px; vertical-align: middle;\">\n                                                </td>\n                                                {-{-NO-}-}\n                                            </tr>\n                                        </table>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </td>\n";
 /**
  * @returns The template for the default checkbox block
  */

package/dist/extensions/Blocks/RadioButton/template.js

@@ -1,23 +1,34 @@
-import { BlockType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/AiAssistantValueType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockCompositionType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockName.js";
+import { BlockType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BuiltInControlTypes.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/ContextActionType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/EditorStatePropertyType.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PanelPosition.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/Popover.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PreviewDeviceMode.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/SettingsTab.js";
+import "../../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementType.js";
 const e = {
   TITLE: "This is a title text",
   DESCRIPTION: "This is a description text",
   YES: "Yes",
   NO: "No"
-}, d = `
-    <td align="left" class="radio-button radio-button-v2 esd-block-radio es-p10t es-p10b es-p30r es-p30l">
+}, i = `
+    <td align="left" class="radio-button-v2 esd-block-radio es-p10t es-p10b es-p30r es-p30l">
         <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
             <tbody>
                 <tr>
                     <td align="left" width="70%" style="vertical-align: top;">
                         <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
                             <tbody>
-                                <${t.BLOCK_TEXT}>
-                                    {-{-TITLE-}-}
-                                </${t.BLOCK_TEXT}>
-                                <${t.BLOCK_TEXT}>
-                                    {-{-DESCRIPTION-}-}
-                                </${t.BLOCK_TEXT}>
+                                    <${t.BLOCK_TEXT}>
+                                        {-{-TITLE-}-}
+                                    </${t.BLOCK_TEXT}>
+                                    <${t.BLOCK_TEXT}>
+                                        {-{-DESCRIPTION-}-}
+                                    </${t.BLOCK_TEXT}>
                             </tbody>
                         </table>
                     </td>
@@ -75,21 +86,12 @@ const e = {
             </tbody>
         </table>
     </td>
-`, a = `
-    <td
-        align="left"
-        esd-extension-block-id="radio-button-block"
+`, h = `
+    <td 
+        align="left" 
+        esd-extension-block-id="radio-button-block" 
         esd-handler-name="esd-extension-RadioButtonBlock"
-        class="
-            radio-button
-            radio-button-v2
-            esd-block-ra
-            esd-radio-button-block
-            esd-extension-block
-            es-p10t
-            es-p10b
-            es-p30r
-            es-p30l"
+        class="radio-button-v2 esd-block-ra esd-radio-button-block esd-extension-block es-p10t es-p10b es-p30r es-p30l"
     >
         <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
             <tbody>
@@ -149,10 +151,10 @@ const e = {
         </table>
     </td>
 `;
-function l() {
-  return d.replace("{-{-TITLE-}-}", `<p path="1">${e.TITLE}</p>`).replace("{-{-DESCRIPTION-}-}", `<p path="1">${e.DESCRIPTION}</p>`).replace("{-{-YES-}-}", `<p path="1">${e.YES}</p>`).replace("{-{-NO-}-}", `<p path="1">${e.NO}</p>`);
+function m() {
+  return i.replace("{-{-TITLE-}-}", `<p path="1">${e.TITLE}</p>`).replace("{-{-DESCRIPTION-}-}", `<p path="1">${e.DESCRIPTION}</p>`).replace("{-{-YES-}-}", `<p path="1">${e.YES}</p>`).replace("{-{-NO-}-}", `<p path="1">${e.NO}</p>`);
 }
 export {
-  a as default,
-  l as getDefaultTemplate
+  h as default,
+  m as getDefaultTemplate
 };

package/dist/{src/extensions → extensions}/Blocks/_Boilerplate/block.d.ts

@@ -1,7 +1,6 @@
 import { Block, BlockCompositionType } from '@stripoinc/ui-editor-extensions';
 export declare const BLOCK_ID = "{{your-block}}";
 export declare class CustomBlock extends Block {
-    constructor();
     getId(): string;
     getIcon(): string;
     getBlockCompositionType(): BlockCompositionType;

package/dist/extensions/DynamicContent/dynamic-content-modal.d.ts

@@ -0,0 +1,6 @@
+import type { DynamicContent } from '@@/Types/generic';
+export declare class ExternalMergeTagsLibrary {
+    selectedDynamicContent: DynamicContent | null;
+    dataSelectCallback: (data: DynamicContent) => void;
+    openMergeTagsLibrary(dynamicContent: DynamicContent, onDataSelectCallback: (data: DynamicContent) => void): void;
+}

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

@@ -1,33 +1,27 @@
-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 {
+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 {
   constructor() {
-    c(this, "selectedDynamicContent", null);
-    c(this, "dataSelectCallback", () => {
+    a(this, "selectedDynamicContent", null);
+    a(this, "dataSelectCallback", () => {
     });
-    c(this, "closeDynamicContentHandler", null);
   }
-  /**
-   * 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
+  openMergeTagsLibrary(e, n) {
+    this.dataSelectCallback = n, this.selectedDynamicContent = e;
+    const s = new CustomEvent("dynamic-content:open", {
+      detail: {
+        attribute: e
+      }
     });
-    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);
+    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);
   }
 }
 export {
-  C as ExternalMergeTagsLibrary
+  y as ExternalMergeTagsLibrary
 };

package/dist/extensions/DynamicContent/dynamic-content.d.ts

@@ -0,0 +1,16 @@
+import { UIElementType, UIElement, UIElementTagRegistry } from '@stripoinc/ui-editor-extensions';
+export declare class DynamicContentTagRegistry extends UIElementTagRegistry {
+    registerUiElements(uiElementsTagsMap: Record<UIElementType, string>): void;
+}
+export declare class DynamicContentUiElementExtension extends UIElement {
+    private mergeTagsButton;
+    private listener;
+    private mergeTagsLibrary;
+    private selectedDynamicContent;
+    getId(): string;
+    onRender(container: HTMLElement): void;
+    onDestroy(): void;
+    _onClick(): void;
+    openMergeTagLibrary(): void;
+    getTemplate(): string;
+}

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

@@ -1,156 +1,75 @@
-var c = Object.defineProperty;
-var g = (o, s, t) => s in o ? c(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
-var r = (o, s, t) => g(o, typeof s != "symbol" ? s + "" : s, t);
-import { mergeTagToDynamicContent as d, dynamicContentToMergeTags as m } from "../../utils/genericUtil.js";
-import { UIElement as u, UIElementType as a, UEAttr as h, UIElementTagRegistry as T } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { ExternalMergeTagsLibrary as y } from "./dynamic-content-modal.js";
-const l = "external-dynamic-content-ui-element", C = "button-add-dynamic-content";
-class p extends T {
-  registerUiElements(s) {
-    s[a.MERGETAGS] = l;
+var a = Object.defineProperty;
+var m = (n, e, t) => e in n ? a(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var r = (n, e, t) => m(n, typeof e != "symbol" ? e + "" : e, t);
+import { dynamicContentToMergeTags as g } from "../../utils/genericUtil.js";
+import "../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/AiAssistantValueType.js";
+import "../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockCompositionType.js";
+import "../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockName.js";
+import "../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BlockType.js";
+import "../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/BuiltInControlTypes.js";
+import "../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/ContextActionType.js";
+import "../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/EditorStatePropertyType.js";
+import "../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PanelPosition.js";
+import "../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/Popover.js";
+import "../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/PreviewDeviceMode.js";
+import "../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/SettingsTab.js";
+import { UEAttr as c } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementsAttributes.js";
+import { UIElementType as i } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/constants/UIElementType.js";
+import { UIElement as l } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/ui-elements/UIElement.js";
+import { UIElementTagRegistry as d } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/ui-elements/UIElementTagRegistry.js";
+import { ExternalMergeTagsLibrary as p } from "./dynamic-content-modal.js";
+const s = "external-dynamic-content-ui-element", T = "button-add-dynamic-content";
+class O extends d {
+  registerUiElements(e) {
+    e[i.MERGETAGS] = s;
   }
 }
-class b extends u {
+class k extends l {
   constructor() {
     super(...arguments);
     r(this, "mergeTagsButton", null);
+    r(this, "listener", () => {
+    });
     r(this, "mergeTagsLibrary", null);
-    r(this, "clickListener", null);
-    r(this, "lastClickedElement", null);
-    r(this, "lastClickedFrame", null);
-    r(this, "mousedownListener", null);
+    r(this, "selectedDynamicContent", { value: "", text: "" });
   }
   getId() {
-    return l;
+    return s;
   }
   onRender(t) {
-    var e;
-    this.mergeTagsButton = t.querySelector("#guido__btn-add-dynamic-content"), this.clickListener = this._onClick.bind(this), (e = this.mergeTagsButton) == null || e.addEventListener("click", this.clickListener), this._setupCoordinateTracking();
+    var o;
+    this.listener = this._onClick.bind(this), this.mergeTagsButton = t.querySelector("#guido__btn-add-dynamic-content"), (o = this.mergeTagsButton) == null || o.addEventListener("click", this.listener);
   }
   onDestroy() {
     var t;
-    this.clickListener && ((t = this.mergeTagsButton) == null || t.removeEventListener("click", this.clickListener)), this._cleanupCoordinateTracking(), this.mergeTagsButton = null, this.clickListener = null, this.lastClickedElement = null, this.lastClickedFrame = null;
+    (t = this.mergeTagsButton) == null || t.removeEventListener("click", this.listener);
   }
   _onClick() {
     this.openMergeTagLibrary();
   }
-  /**
-   * 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(t, e) {
-    if (t !== "mergeTag" || !(e != null && e.value))
-      return;
-    const n = d(e), i = this._getLastClickedPosition();
-    this.lastClickedElement = null, this.lastClickedFrame = null, this._openDynamicContentLibrary(n, i);
-  }
   openMergeTagLibrary() {
-    const t = this._getButtonPosition(), e = { value: "", text: "" };
-    this._openDynamicContentLibrary(e, t);
-  }
-  /**
-   * Opens the dynamic content library for external apps
-   * Dispatches event with dynamic content data and position
-   */
-  _openDynamicContentLibrary(t, e) {
-    this.mergeTagsLibrary || (this.mergeTagsLibrary = new y()), this.mergeTagsLibrary.openMergeTagsLibrary(
-      t,
-      (n) => {
-        n.text && n.value ? this.api.triggerValueChange(m([n])[0]) : this.api.triggerValueChange(null);
-      },
-      e
+    this.mergeTagsLibrary || (this.mergeTagsLibrary = new p()), this.mergeTagsLibrary.openMergeTagsLibrary(
+      this.selectedDynamicContent,
+      (t) => {
+        this.api.onValueChanged(g([t])[0]);
+      }
     );
   }
-  /**
-   * Gets the button's position on the screen
-   * Used to position the modal or anything else near the button
-   */
-  _getButtonPosition() {
-    if (!this.mergeTagsButton)
-      return { x: 0, y: 0, width: 0, height: 0 };
-    const { x: t, y: e, width: n, height: i } = this.mergeTagsButton.getBoundingClientRect();
-    return { x: t, y: e, width: n, height: i };
-  }
-  /**
-   * Sets up coordinate tracking for merge tag clicks in the iframe
-   * Workaround from Stripo intercepting click events - tracks mousedown events instead
-   */
-  _setupCoordinateTracking() {
-    var e;
-    const t = this._getEditorFrame();
-    (e = t == null ? void 0 : t.contentWindow) != null && e.document && (this.mousedownListener = (n) => {
-      const i = this._findMergeTagElement(n.target);
-      i && (this.lastClickedElement = i, this.lastClickedFrame = t);
-    }, t.contentWindow.document.addEventListener("mousedown", this.mousedownListener));
-  }
-  /**
-   * Gets the editor iframe element
-   */
-  _getEditorFrame() {
-    var n;
-    const t = document.querySelector("ui-editor");
-    if (!(t != null && t.shadowRoot))
-      return null;
-    const e = t.shadowRoot.querySelector("iframe");
-    return (n = e == null ? void 0 : e.contentWindow) != null && n.document ? e : null;
-  }
-  /**
-   * Finds merge tag element in the element tree
-   */
-  _findMergeTagElement(t) {
-    return t.closest(".target, .esd-merge-tag");
-  }
-  /**
-   * Gets the position of the last clicked element, calculated on-demand
-   * This ensures we always use the correct element's position even with rapid clicks
-   */
-  _getLastClickedPosition() {
-    if (!(!this.lastClickedElement || !this.lastClickedFrame))
-      return this._calculateAbsolutePosition(this.lastClickedFrame, this.lastClickedElement);
-  }
-  /**
-   * Calculates absolute position of element relative to page
-   */
-  _calculateAbsolutePosition(t, e) {
-    const n = t.getBoundingClientRect(), i = e.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 e;
-    if (!this.mousedownListener)
-      return;
-    const t = this._getEditorFrame();
-    (e = t == null ? void 0 : t.contentWindow) != null && e.document && t.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} 
+                <${i.BUTTON} 
                     id="guido__btn-add-dynamic-content" 
                     class="btn btn-primary"
-                    ${h.BUTTON.name}="${C}">
-                        <${a.ICON} src="plus" class="icon icon-button color-primary">
-                        </${a.ICON}>
+                    ${c.BUTTON.name}="${T}">
+                        <${i.ICON} src="plus" class="icon icon-button color-primary">
+                        </${i.ICON}>
                         ${this.api.translate("Add Dynamic Content")}
-                </${a.BUTTON}>
+                </${i.BUTTON}>
             </div>`;
   }
 }
 export {
-  p as DynamicContentTagRegistry,
-  b as DynamicContentUiElementExtension
+  O as DynamicContentTagRegistry,
+  k as DynamicContentUiElementExtension
 };