@useinsider/guido 1.0.0-beta.462f217 → 1.0.0-beta.4694612

package/dist/@types/generic.d.ts

@@ -14,3 +14,7 @@ export interface EmailHeader {
     senderName: string;
     subject: string;
 }
+export type MergeTag = {
+    label: string;
+    value: string;
+};

package/dist/components/Guido.vue.d.ts

@@ -8,6 +8,7 @@ type __VLS_Props = {
     username?: string;
     html?: string;
     css?: string;
+    preselectedDynamicContentList: DynamicContent[];
     guidoConfig: GuidoConfig;
 };
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {
@@ -19,7 +20,10 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__
     "dynamic-content:open": (detail: DynamicContent | null) => void;
     back: () => void;
     "save:start": () => void;
-    "save:complete": (template: Omit<Template, "forceRecreate">) => void;
+    "save:complete": (data: {
+        template: Omit<Template, "forceRecreate">;
+        dynamicContentList: DynamicContent[];
+    }) => void;
 }, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/components/Guido.vue.js

@@ -10,7 +10,7 @@ var s = function() {
   a,
   !1,
   null,
-  "5fe1cbdf"
+  "4083db95"
 );
 const c = n.exports;
 export {

package/dist/components/Guido.vue2.js

@@ -1,12 +1,13 @@
-import { defineComponent as S, defineAsyncComponent as D, onMounted as E } from "vue";
-import { provideGuidoActions as P } from "../composables/useGuidoActions.js";
-import { usePartner as _ } from "../composables/usePartner.js";
-import { useStripo as G } from "../composables/useStripo.js";
-import { DefaultUsername as I, DefaultGuidoConfig as k } from "../enums/defaults.js";
-import T from "./organisms/header/HeaderWrapper.vue.js";
-import { useStripoApi as A } from "../services/stripoApi.js";
-import { usePreviewStore as N } from "../stores/preview.js";
-const M = /* @__PURE__ */ S({
+import { defineComponent as L, defineAsyncComponent as E, onMounted as P } from "vue";
+import { provideGuidoActions as _ } from "../composables/useGuidoActions.js";
+import { usePartner as G } from "../composables/usePartner.js";
+import { useStripo as I } from "../composables/useStripo.js";
+import { DefaultUsername as k, DefaultGuidoConfig as T } from "../enums/defaults.js";
+import A from "./organisms/header/HeaderWrapper.vue.js";
+import { useStripoApi as N } from "../services/stripoApi.js";
+import { useDynamicContentStore as x } from "../stores/dynamic-content.js";
+import { usePreviewStore as W } from "../stores/preview.js";
+const q = /* @__PURE__ */ L({
   __name: "Guido",
   props: {
     templateId: null,
@@ -16,68 +17,82 @@ const M = /* @__PURE__ */ S({
     username: null,
     html: null,
     css: null,
+    preselectedDynamicContentList: null,
     guidoConfig: null
   },
   emits: ["dynamic-content:open", "back", "save:start", "save:complete"],
-  setup(C, { expose: b, emit: o }) {
-    const t = C, w = D(
+  setup(S, { expose: b, emit: t }) {
+    const o = S, w = E(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
-    ), { getPartnerName: n, getProductType: c } = _(), h = N(), {
+    ), n = x(), c = o.preselectedDynamicContentList || [], { getPartnerName: i, getProductType: s } = G(), h = W(), {
       templateId: a,
       userId: r,
-      guidoConfig: i,
-      html: s = "",
-      css: d = "",
-      partnerName: l = n(),
-      productType: u = c(),
-      username: m = I
-    } = t;
+      guidoConfig: m,
+      html: d = "",
+      css: l = "",
+      partnerName: u = i(),
+      productType: p = s(),
+      username: y = k
+    } = o;
     window.GuidoConfig = {
-      ...k,
-      ...i
+      ...T,
+      ...m
     };
-    const { initPlugin: p } = G({ emailId: a, userId: r, username: m, partnerName: l, productType: u }), { getDefaultTemplate: f } = A();
-    P({
+    const { initPlugin: C } = I({
+      emailId: a,
+      userId: r,
+      username: y,
+      partnerName: u,
+      productType: p,
+      preselectedDynamicContentList: c
+    }), { getDefaultTemplate: g } = N();
+    _({
       onBack: () => {
-        console.debug("guido:back"), o("back");
+        console.debug("guido:back"), t("back");
       },
       onSaveStart: () => {
-        console.debug("guido:save:start"), o("save:start");
+        console.debug("guido:save:start"), t("save:start");
       },
       onSaveComplete: (e) => {
-        console.debug("guido:save:complete", e), o("save:complete", e);
+        console.debug("guido:save:complete", {
+          template: e,
+          dynamicContentList: n.getSelectedDynamicContentList
+        }), t("save:complete", {
+          template: e,
+          dynamicContentList: n.getSelectedDynamicContentList
+        });
       }
     });
-    const g = (e) => {
-      console.debug("dynamic-content:close", e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
+    const f = (e) => {
+      console.debug("dynamic-content:close", e), n.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
     }, v = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
-    return E(async () => {
+    return P(async () => {
       console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
       try {
         let e = {
-          html: s,
-          css: d,
+          html: d,
+          css: l,
           forceRecreate: !0
           // TODO: It should be false for old templates. We will communicate with Stripo
         };
-        e.html || (e = await f()), await p(e);
+        e.html || (e = await g()), await C(e), n.selectedDynamicContentList = c;
       } catch (e) {
         console.error("Failed to initialize Stripo editor:", e);
       }
       document.addEventListener("dynamic-content:open", (e) => {
-        const y = e;
-        console.debug("dynamic-content:open", y.detail), o("dynamic-content:open", y.detail);
+        const D = e;
+        console.debug("dynamic-content:open", D.detail), t("dynamic-content:open", D.detail);
       });
     }), b({
       dynamicContent: {
-        insert: g,
+        insert: f,
         close: v
       }
-    }), { __sfc: !0, PreviewContainer: w, props: t, getPartnerName: n, getProductType: c, previewStore: h, templateId: a, userId: r, guidoConfig: i, html: s, css: d, partnerName: l, productType: u, username: m, emit: o, initPlugin: p, getDefaultTemplate: f, insertDynamicContent: g, closeDynamicContent: v, HeaderWrapper: T };
+    }), { __sfc: !0, PreviewContainer: w, dynamicContentStore: n, props: o, preselectedDynamicContentList: c, getPartnerName: i, getProductType: s, previewStore: h, templateId: a, userId: r, guidoConfig: m, html: d, css: l, partnerName: u, productType: p, username: y, emit: t, initPlugin: C, getDefaultTemplate: g, insertDynamicContent: f, closeDynamicContent: v, HeaderWrapper: A };
   }
 });
 export {
-  M as default
+  q as default
 };

package/dist/components/organisms/email-preview/amp/AmpErrorModal.vue.js

@@ -14,7 +14,7 @@ var n = function() {
   l,
   !1,
   null,
-  "cfb613b7"
+  "7a09985c"
 );
 const _ = d.exports;
 export {

package/dist/components/organisms/email-preview/desktop-preview/DesktopPreview.vue.js

@@ -14,9 +14,9 @@ var s = function() {
   i,
   !1,
   null,
-  "9c6e7ff0"
+  "2dd60b0c"
 );
-const m = n.exports;
+const d = n.exports;
 export {
-  m as default
+  d as default
 };

package/dist/components/organisms/email-preview/desktop-preview/DesktopPreview.vue2.js

@@ -1,30 +1,31 @@
-import { defineComponent as f, ref as r, onMounted as p, nextTick as d, onBeforeUnmount as h } from "vue";
-import { usePreviewStore as v } from "../../../../stores/preview.js";
-import { InContainer as g } from "@useinsider/design-system-vue";
-import _ from "./EmailHeaderInfo.vue.js";
-import R from "./EmailSizeIndicator.vue.js";
-const I = /* @__PURE__ */ f({
+import { defineComponent as d, ref as r, onMounted as h, onBeforeUnmount as v, nextTick as g } from "vue";
+import { usePreviewStore as _ } from "../../../../stores/preview.js";
+import { InContainer as I } from "@useinsider/design-system-vue";
+import R from "./EmailHeaderInfo.vue.js";
+import C from "./EmailSizeIndicator.vue.js";
+const B = /* @__PURE__ */ d({
   __name: "DesktopPreview",
-  setup(C) {
-    const t = r(), i = r("400px"), a = r(!1), l = v(), n = () => {
+  setup(H) {
+    const t = r(), i = r("400px"), a = r(!1), m = _(), n = () => {
       if (!t.value)
         return;
       const o = t.value.querySelector(".in-container");
       if (!o)
         return;
-      const s = o.getBoundingClientRect(), c = o.querySelector(".in-container__header"), u = c ? c.getBoundingClientRect().height : 0, m = s.height - u;
-      i.value = `${m}px`;
+      const u = o.getBoundingClientRect(), s = o.querySelector(".in-container__header"), f = s ? s.getBoundingClientRect().height : 0, p = u.height - f;
+      i.value = `${p}px`;
     };
     let e = null;
-    return p(() => {
-      n(), t.value && (e = new ResizeObserver(n), e.observe(t.value), d(() => {
+    const c = () => {
+      n(), t.value && (e = new ResizeObserver(n), e.observe(t.value), g(() => {
         a.value = !0;
       }));
-    }), h(() => {
+    }, l = () => {
       e == null || e.disconnect();
-    }), { __sfc: !0, containerRef: t, iframeHeight: i, isContainerReady: a, previewStore: l, calculateIframeHeight: n, resizeObserver: e, InContainer: g, EmailHeaderInfo: _, EmailSizeIndicator: R };
+    };
+    return h(c), v(l), { __sfc: !0, containerRef: t, iframeHeight: i, isContainerReady: a, previewStore: m, calculateIframeHeight: n, resizeObserver: e, initIframe: c, cleanIframe: l, InContainer: I, EmailHeaderInfo: R, EmailSizeIndicator: C };
   }
 });
 export {
-  I as default
+  B as default
 };

package/dist/components/organisms/email-preview/desktop-preview/EmailHeaderInfo.vue2.js

@@ -1,18 +1,18 @@
-import { defineComponent as m, computed as t } from "vue";
+import { defineComponent as m, computed as o } from "vue";
 import { useConfig as a } from "../../../../composables/useConfig.js";
-import { useTranslations as c } from "../../../../composables/useTranslations.js";
-import { InIcons as i } from "@useinsider/design-system-vue";
+import { useTranslations as i } from "../../../../composables/useTranslations.js";
+import { InIcons as c } from "@useinsider/design-system-vue";
 const l = /* @__PURE__ */ m({
   __name: "EmailHeaderInfo",
   setup(f) {
-    const { config: n } = a(), s = c(), o = t(() => {
+    const { config: t } = a(), n = i(), s = o(() => {
       var e;
-      return ((e = n.emailHeader) == null ? void 0 : e.senderName) || `(${s("settings.sender-name")})`;
-    }), r = t(() => {
+      return ((e = t.emailHeader) == null ? void 0 : e.senderName) || n("settings.sender-name");
+    }), r = o(() => {
       var e;
-      return ((e = n.emailHeader) == null ? void 0 : e.subject) || s("newsletter.subject");
+      return ((e = t.emailHeader) == null ? void 0 : e.subject) || n("email-editor.default-subject");
     });
-    return { __sfc: !0, config: n, trans: s, senderName: o, subject: r, InIcons: i };
+    return { __sfc: !0, config: t, trans: n, senderName: s, subject: r, InIcons: c };
   }
 });
 export {

package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue.js

@@ -10,7 +10,7 @@ var o = function() {
   a,
   !1,
   null,
-  "bd212ce2"
+  "c2adc57d"
 );
 const m = n.exports;
 export {

package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue2.js

@@ -1,20 +1,23 @@
 import { defineComponent as c, ref as n, computed as l, watch as u } from "vue";
 import { useTranslations as p } from "../../../../composables/useTranslations.js";
-import { usePreviewStore as v } from "../../../../stores/preview.js";
-import { InTooltip as _, InProgress as f } from "@useinsider/design-system-vue";
+import { usePreviewStore as _ } from "../../../../stores/preview.js";
+import { InTooltip as v, InProgress as f } from "@useinsider/design-system-vue";
 const S = /* @__PURE__ */ c({
   __name: "EmailSizeIndicator",
   setup(w) {
-    const t = v(), o = 102, e = n(0), s = n({
+    const t = _(), o = 102, e = n(0), s = n({
       type: "success",
       value: 0
     }), a = l(() => `~${e.value} KB`), r = () => {
       const m = new Blob([t.previewHtml]).size;
-      e.value = Math.round(m / 1024), s.value.value = Math.min(e.value, o), s.value.type = e.value < o ? "success" : "warning";
+      e.value = Math.round(m / 1024), s.value = {
+        type: e.value < o ? "success" : "warning",
+        value: Math.min(e.value, o)
+      };
     }, i = p();
     return u(() => t.previewHtml, () => {
       r();
-    }, { immediate: !0 }), { __sfc: !0, previewStore: t, MAX_EMAIL_SIZE_IN_KB: o, htmlKB: e, progress: s, htmlSize: a, calculateProgress: r, trans: i, InProgress: f, InTooltip: _ };
+    }, { immediate: !0 }), { __sfc: !0, previewStore: t, MAX_EMAIL_SIZE_IN_KB: o, htmlKB: e, progress: s, htmlSize: a, calculateProgress: r, trans: i, InProgress: f, InTooltip: v };
   }
 });
 export {

package/dist/components/organisms/email-preview/mobile-preview/ContentView.vue2.js

@@ -1,18 +1,18 @@
 import { defineComponent as m, ref as c } from "vue";
-import { useResponsivePreview as a } from "../../../../composables/useResponsivePreview.js";
-import { useTranslations as f } from "../../../../composables/useTranslations.js";
+import { useResponsivePreview as f } from "../../../../composables/useResponsivePreview.js";
+import { useTranslations as a } from "../../../../composables/useTranslations.js";
 import { usePreviewStore as p } from "../../../../stores/preview.js";
 import { InIcons as u } from "@useinsider/design-system-vue";
 const h = /* @__PURE__ */ m({
   __name: "ContentView",
   emits: ["back-to-inbox"],
   setup(v) {
-    const i = f(), t = p(), n = c(), { setupEmailResponsiveFit: r } = a(), s = (o) => {
+    const i = a(), t = p(), n = c(), { setupResponsivePreview: r } = f(), s = (o) => {
       ["transform", "transform-origin", "height"].forEach((e) => {
         o.documentElement.style.removeProperty(e);
       });
     };
-    return { __sfc: !0, trans: i, previewStore: t, iframeRef: n, setupEmailResponsiveFit: r, clearAMPTransforms: s, onLoad: () => {
+    return { __sfc: !0, trans: i, previewStore: t, iframeRef: n, setupResponsivePreview: r, clearAMPTransforms: s, onLoad: () => {
       const o = n.value, e = o == null ? void 0 : o.contentDocument;
       e && (r(o), t.isAMPResponsive && s(e));
     }, InIcons: u };

package/dist/components/organisms/email-preview/mobile-preview/InboxView.vue.js

@@ -1,20 +1,20 @@
 import e from "./InboxView.vue2.js";
 /* empty css               */
-import r from "../../../../_virtual/_plugin-vue2_normalizer.js";
-var a = function() {
+import a from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var r = function() {
   var s = this, t = s._self._c, c = s._self._setupProxy;
   return t("div", { staticClass: "p-y-13 p-x-3 bor-b-w-1 bor-b-s-s bor-b-c-50 cur-p b-c-4 b-c-h-5 p-3", on: { click: function(_) {
     return c.emit("open-email");
   } } }, [t("div", { staticClass: "d-f j-c-s-b a-i-c w-1" }, [t("div", { staticClass: "f-g-1 min-w-0-s" }, [t("div", { staticClass: "f-s-1 f-w-600 t-c-53 l-h-1 mb-12 cropped-text" }, [s._v(" " + s._s(c.senderName) + " ")]), t("div", { staticClass: "f-s-12 f-w-400 t-c-55 l-h-1 cropped-text" }, [s._v(" " + s._s(c.subject) + " ")])]), t("div", { staticClass: "f-sh-0 ml-2 f-s-12 f-w-400 t-c-55 l-h-1" }, [s._v(" " + s._s(c.trans("product-catalog.today")) + " ")]), t(c.InIcons, { staticClass: "i-c-52", attrs: { name: "line-chevron-right" } })], 1)]);
-}, i = [], n = /* @__PURE__ */ r(
+}, i = [], n = /* @__PURE__ */ a(
   e,
-  a,
+  r,
   i,
   !1,
   null,
-  "d3bb77b4"
+  "f20b3a9b"
 );
-const d = n.exports;
+const m = n.exports;
 export {
-  d as default
+  m as default
 };

package/dist/components/organisms/email-preview/mobile-preview/InboxView.vue2.js

@@ -1,19 +1,19 @@
-import { defineComponent as a, computed as t } from "vue";
+import { defineComponent as a, computed as o } from "vue";
 import { useConfig as i } from "../../../../composables/useConfig.js";
 import { useTranslations as c } from "../../../../composables/useTranslations.js";
-import { InIcons as p } from "@useinsider/design-system-vue";
+import { InIcons as f } from "@useinsider/design-system-vue";
 const b = /* @__PURE__ */ a({
   __name: "InboxView",
   emits: ["open-email"],
-  setup(f, { emit: o }) {
-    const n = c(), { config: s } = i(), r = t(() => {
+  setup(p, { emit: s }) {
+    const t = c(), { config: n } = i(), r = o(() => {
       var e;
-      return ((e = s.emailHeader) == null ? void 0 : e.senderName) || `(${n("settings.sender-name")})`;
-    }), m = t(() => {
+      return ((e = n.emailHeader) == null ? void 0 : e.senderName) || t("settings.sender-name");
+    }), m = o(() => {
       var e;
-      return ((e = s.emailHeader) == null ? void 0 : e.subject) || n("newsletter.subject");
+      return ((e = n.emailHeader) == null ? void 0 : e.subject) || t("email-editor.default-subject");
     });
-    return { __sfc: !0, emit: o, trans: n, config: s, senderName: r, subject: m, InIcons: p };
+    return { __sfc: !0, emit: s, trans: t, config: n, senderName: r, subject: m, InIcons: f };
   }
 });
 export {

package/dist/components/organisms/header/MiddleSlot.vue2.js

@@ -1,9 +1,9 @@
 import { defineComponent as p, computed as m } from "vue";
 import { usePreviewMode as l } from "../../../composables/usePreviewMode.js";
 import { useTranslations as c } from "../../../composables/useTranslations.js";
-import f from "../email-preview/amp/AmpToggle.vue.js";
-import { useEditorStore as a } from "../../../stores/editor.js";
-import { usePreviewStore as d } from "../../../stores/preview.js";
+import a from "../email-preview/amp/AmpToggle.vue.js";
+import { useEditorStore as d } from "../../../stores/editor.js";
+import { usePreviewStore as f } from "../../../stores/preview.js";
 import { InButtonV2 as w } from "@useinsider/design-system-vue";
 import v from "./version-history/VersionHistory.vue.js";
 import u from "./version-history/ViewOptions.vue.js";
@@ -11,15 +11,13 @@ import P from "./ViewOptions.vue.js";
 const B = /* @__PURE__ */ p({
   __name: "MiddleSlot",
   setup(g) {
-    const r = a(), o = c(), e = d(), { openPreviewMode: t, closePreviewMode: i } = l(), s = m(() => o(e.isPreviewModeOpen ? "newsletter.close-email-preview" : "newsletter.email-preview"));
-    return { __sfc: !0, editorStore: r, trans: o, previewStore: e, openPreviewMode: t, closePreviewMode: i, previewTooltipText: s, getTooltipOptions: (n) => ({
+    const r = d(), e = c(), o = f(), { openPreviewMode: t, closePreviewMode: i } = l(), s = m(() => o.isPreviewModeOpen ? e("newsletter.close-email-preview") : e("newsletter.email-preview"));
+    return { __sfc: !0, editorStore: r, trans: e, previewStore: o, openPreviewMode: t, closePreviewMode: i, previewTooltipText: s, getTooltipOptions: (n) => ({
       id: `${n}-tooltip`,
       dynamicPosition: !1,
       staticPosition: "bottom center",
       iconStatus: !1
-    }), handlePreviewToggle: () => {
-      e.isPreviewModeOpen ? i() : t();
-    }, AmpToggle: f, InButtonV2: w, VersionHistory: v, VersionHistoryViewOptions: u, ViewOptions: P };
+    }), handlePreviewToggle: () => o.isPreviewModeOpen ? i() : t(), AmpToggle: a, InButtonV2: w, VersionHistory: v, VersionHistoryViewOptions: u, ViewOptions: P };
   }
 });
 export {

package/dist/components/wrappers/WpModal.vue.d.ts

@@ -1,15 +1,4 @@
-interface FooterButtonGroup {
-    primaryButton?: {
-        type: string;
-        labelText: string;
-        disabledStatus?: boolean;
-    };
-    cancelOrBackButton?: {
-        type: string;
-        labelText: string;
-        styling: string;
-    };
-}
+import type { FooterButtonGroup } from '@@/Types/preview';
 type __VLS_Props = {
     id: string;
     title: string;

package/dist/composables/useActionsApi.js

@@ -1,5 +1,6 @@
-const w = () => {
-  const s = (t = {}) => new Promise((e, a) => {
+import { useToaster as d } from "./useToaster.js";
+const E = () => {
+  const { handleError: m } = d(), s = (t = {}) => new Promise((e, a) => {
     const i = { ...{
       minimize: !0,
       utmEntity: {
@@ -20,12 +21,12 @@ const w = () => {
       resetDataSavedFlag: !1,
       disableLineHeightsReplace: !0
     }, ...t }, n = {
-      callback: (m, l, c, r, p) => {
-        m ? a(m) : e({
+      callback: (r, l, c, p, u) => {
+        r ? a(r) : e({
           html: l,
           ampHtml: c,
-          ampErrors: r,
-          displayConditions: p
+          ampErrors: p,
+          displayConditions: u
         });
       },
       ...i
@@ -35,20 +36,29 @@ const w = () => {
   return { getCompiledEmail: s, activateCustomViewStyles: (t = !0) => {
     window.StripoEditorApi.actionsApi.activateCustomViewStyles(t);
   }, getPreviewData: async (t) => {
-    const {
-      html: e,
-      displayConditions: a,
-      ampHtml: o = "",
-      ampErrors: i = []
-    } = await s({ minimize: !1, resetDataSavedFlag: !1, ...t });
-    return {
-      html: e,
-      ampHtml: o,
-      ampErrors: i,
-      displayConditions: a
-    };
+    try {
+      const {
+        html: e,
+        displayConditions: a,
+        ampHtml: o = "",
+        ampErrors: i = []
+      } = await s({ minimize: !1, resetDataSavedFlag: !1, ...t });
+      return {
+        html: e,
+        ampHtml: o,
+        ampErrors: i,
+        displayConditions: a
+      };
+    } catch (e) {
+      return m(e, "Error loading preview"), {
+        html: "",
+        ampHtml: "",
+        ampErrors: [],
+        displayConditions: []
+      };
+    }
   } };
 };
 export {
-  w as useActionsApi
+  E as useActionsApi
 };

package/dist/composables/useConfig.d.ts

@@ -1,5 +1,4 @@
 import type { GuidoConfig } from '@@/Types/generic';
 export declare const useConfig: () => {
     config: GuidoConfig;
-    getConfig: () => GuidoConfig;
 };

package/dist/composables/useConfig.js

@@ -1,11 +1,7 @@
-import { DefaultGuidoConfig as n } from "../enums/defaults.js";
-const t = () => {
-  const o = () => typeof window > "u" ? n : window.GuidoConfig || n;
-  return {
-    config: o(),
-    getConfig: o
-  };
-};
+import { DefaultGuidoConfig as o } from "../enums/defaults.js";
+const t = () => ({
+  config: typeof window > "u" ? o : window.GuidoConfig || o
+});
 export {
   t as useConfig
 };

package/dist/composables/usePreviewMode.js

@@ -1,31 +1,31 @@
-import { useEditorStore as d } from "../stores/editor.js";
-import { usePreviewStore as n } from "../stores/preview.js";
-import { useActionsApi as m } from "./useActionsApi.js";
+import { useEditorStore as n } from "../stores/editor.js";
+import { usePreviewStore as m } from "../stores/preview.js";
+import { useActionsApi as p } from "./useActionsApi.js";
 import { useCodeEditorApi as l } from "./useCodeEditorApi.js";
-const M = () => {
-  const r = d(), e = n(), { closeCodeEditor: i } = l(), { getPreviewData: s } = m();
+const E = () => {
+  const i = n(), e = m(), { closeCodeEditor: s } = l(), { getPreviewData: a } = p(), r = () => {
+    e.isPreviewModeOpen = !1, e.$reset();
+  };
   return {
-    closePreviewMode: () => {
-      e.isPreviewModeOpen = !1, e.resetState();
-    },
+    closePreviewMode: r,
     openPreviewMode: () => {
-      r.isCodeEditorOpen && i(), e.isPreviewModeOpen = !0;
+      i.isCodeEditorOpen && s(), e.isPreviewModeOpen = !0;
     },
     loadPreviewData: async () => {
       if (!(e.isLoading || e.isLoaded)) {
-        e.setLoading(!0);
+        e.isLoading = !0;
         try {
-          const { html: o, ampHtml: t, ampErrors: a } = await s();
-          e.setTemplateHtml(o || ""), e.setAmpHtml(t || ""), e.setAmpErrors(a || []), e.setEmailFormat(t ? "AMP" : "html"), e.setLoaded(!0);
+          const { html: o, ampHtml: t, ampErrors: d } = await a();
+          e.templateHtml = o || "", e.ampHtml = t || "", e.ampErrors = d || [], e.setEmailFormat(t ? "AMP" : "html"), e.isLoaded = !0;
         } catch (o) {
-          console.error("Failed to load preview data:", o);
+          console.error("Failed to load preview data:", o), r();
         } finally {
-          e.setLoading(!1);
+          e.isLoading = !1;
         }
       }
     }
   };
 };
 export {
-  M as usePreviewMode
+  E as usePreviewMode
 };

package/dist/composables/useResponsivePreview.d.ts

@@ -1,5 +1,5 @@
 export declare const useResponsivePreview: () => {
-    setupEmailResponsiveFit: (iframe: HTMLIFrameElement) => void;
+    setupResponsivePreview: (iframe: HTMLIFrameElement) => void;
     tearDownEmailResponsiveFit: (iframe: HTMLIFrameElement) => void;
     hasResponsiveMetaViewport: (doc: Document) => boolean;
 };

package/dist/composables/useResponsivePreview.js

@@ -40,7 +40,7 @@ const { debounce: y } = p(), h = (t) => {
 }, S = (t) => {
   const { targetWidth: e, deviceWidth: n, minScale: o, maxScale: r } = t, s = n / e;
   return Math.min(Math.max(s, o), r);
-}, R = (t, e) => {
+}, P = (t, e) => {
   const n = E(t), o = S({
     targetWidth: n,
     deviceWidth: e,
@@ -54,30 +54,30 @@ const { debounce: y } = p(), h = (t) => {
     return !1;
   const n = e.getAttribute("content") || "";
   return c.META_VIEWPORT.test(n);
-}, x = (t) => t.clientWidth || t.getBoundingClientRect().width || 375, m = (t) => {
+}, R = (t) => t.clientWidth || t.getBoundingClientRect().width || 375, d = (t) => {
   const e = t.contentWindow;
   l && e && e.removeEventListener("resize", l), i && window.removeEventListener("resize", i), l = null, i = null;
-}, P = (t, e) => {
+}, x = (t, e) => {
   const n = t.contentWindow;
   if (!n)
     return;
-  m(t);
+  d(t);
   const o = () => y(e, a.RESIZE_DEBOUNCE_MS);
   l = o, n.addEventListener("resize", l), i = o, window.addEventListener("resize", i);
 }, M = () => ({
-  setupEmailResponsiveFit: (n) => {
+  setupResponsivePreview: (n) => {
     const o = n.contentDocument, r = n.contentWindow;
     if (!o || !r)
       return;
     b(o);
     const s = () => {
-      const d = x(n);
-      u(o) ? g(o) : R(o, d);
+      const m = R(n);
+      u(o) ? g(o) : P(o, m);
     };
-    s(), P(n, s);
+    s(), x(n, s);
   },
   tearDownEmailResponsiveFit: (n) => {
-    m(n);
+    d(n);
   },
   hasResponsiveMetaViewport: u
 });

package/dist/composables/useStripo.js

@@ -1,20 +1,21 @@
 import { useActionsApi as g } from "./useActionsApi.js";
 import { useCustomInterfaceAppearance as f } from "./useCustomInterfaceAppearance.js";
-import { useToaster as E } from "./useToaster.js";
-import { displayConditions as S } from "../enums/displayConditions.js";
-import y from "../extensions/DynamicContent/extension.js";
-import { useStripoApi as C } from "../services/stripoApi.js";
+import { useToaster as y } from "./useToaster.js";
+import { displayConditions as C } from "../enums/displayConditions.js";
+import E from "../extensions/DynamicContent/extension.js";
+import { useStripoApi as S } from "../services/stripoApi.js";
 import { useEditorStore as w } from "../stores/editor.js";
-const A = (a) => {
-  const { handleError: d } = E(), { getToken: c, getCustomFonts: u } = C(), l = (e, r = []) => {
-    const i = w(), { html: t, css: s, forceRecreate: m } = e;
+import { dynamicContentToMergeTags as b } from "../utils/genericUtil.js";
+const M = (d) => {
+  const { handleError: c } = y(), { getToken: a, getCustomFonts: u } = S(), l = (e, r = []) => {
+    const i = w(), { html: t, css: s, forceRecreate: p } = e;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
-        metadata: a,
+        metadata: d,
         html: t,
         css: s,
-        forceRecreate: m,
+        forceRecreate: p,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
@@ -30,19 +31,24 @@ const A = (a) => {
                 `,
         conditionsEnabled: !0,
         customConditionsEnabled: !0,
-        conditionCategories: S,
+        conditionCategories: C,
         messageSettingsEnabled: !1,
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
           customFonts: r
         },
+        mergeTags: [
+          {
+            entries: b(d.preselectedDynamicContentList)
+          }
+        ],
         async onTokenRefreshRequest(o) {
           try {
-            const n = await c();
+            const n = await a();
             o(n);
           } catch (n) {
-            d(n, "Failed to refresh token");
+            c(n, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
@@ -50,7 +56,7 @@ const A = (a) => {
             const { importCss: o } = f(), { activateCustomViewStyles: n } = g();
             o(), n();
           } catch (o) {
-            d(o, "Failed to load custom interface appearance");
+            c(o, "Failed to load custom interface appearance");
           }
         },
         onCodeEditorVisibilityChanged(o) {
@@ -63,10 +69,10 @@ const A = (a) => {
           i.isVersionHistoryOpen = o;
         },
         ignoreClickOutsideSelectors: ["#guido-dynamic-content-modal"],
-        extensions: [y]
+        extensions: [E]
       }
     );
-  }, p = (e) => new Promise((r, i) => {
+  }, m = (e) => new Promise((r, i) => {
     if (document.getElementById("UiEditorScript")) {
       e(), r();
       return;
@@ -80,12 +86,12 @@ const A = (a) => {
     }, document.body.appendChild(t);
   });
   return { initPlugin: async (e) => {
-    await p(async () => {
+    await m(async () => {
       const r = await u();
       l(e, r);
     });
   } };
 };
 export {
-  A as useStripo
+  M as useStripo
 };

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

@@ -1,15 +1,16 @@
-var l = Object.defineProperty;
-var o = (i, t, e) => t in i ? l(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var r = (i, t, e) => o(i, typeof t != "symbol" ? t + "" : t, e);
+var o = Object.defineProperty;
+var m = (i, t, e) => t in i ? o(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var r = (i, t, e) => m(i, typeof t != "symbol" ? t + "" : t, e);
+import { dynamicContentToMergeTags as l } from "../../utils/genericUtil.js";
 import { d as n } from "../../_virtual/index.js";
-import { ExternalMergeTagsLibrary as c } from "./dynamic-content-modal.js";
-const a = "external-dynamic-content-ui-element", m = "button-add-dynamic-content";
-class d extends n.UIElementTagRegistry {
+import { ExternalMergeTagsLibrary as g } from "./dynamic-content-modal.js";
+const a = "external-dynamic-content-ui-element", c = "button-add-dynamic-content";
+class p extends n.UIElementTagRegistry {
   registerUiElements(t) {
     t[n.UIElementType.MERGETAGS] = a;
   }
 }
-class b extends n.UIElement {
+class u extends n.UIElement {
   constructor() {
     super(...arguments);
     r(this, "mergeTagsButton", null);
@@ -33,13 +34,10 @@ class b extends n.UIElement {
     this.openMergeTagLibrary();
   }
   openMergeTagLibrary() {
-    this.mergeTagsLibrary || (this.mergeTagsLibrary = new c()), this.mergeTagsLibrary.openMergeTagsLibrary(
+    this.mergeTagsLibrary || (this.mergeTagsLibrary = new g()), this.mergeTagsLibrary.openMergeTagsLibrary(
       this.selectedDynamicContent,
       (e) => {
-        this.api.onValueChanged({
-          label: e.fallback ? `${e.text} | ${e.fallback}` : e.text,
-          value: e.fallback ? `{{${e.value}|${e.fallback}}}` : `{{${e.value}}}`
-        });
+        this.api.onValueChanged(l([e])[0]);
       }
     );
   }
@@ -49,7 +47,7 @@ class b extends n.UIElement {
                 <${n.UIElementType.BUTTON} 
                     id="guido__btn-add-dynamic-content" 
                     class="btn btn-primary"
-                    ${n.UEAttr.BUTTON.name}="${m}">
+                    ${n.UEAttr.BUTTON.name}="${c}">
                         <${n.UIElementType.ICON} src="plus" class="icon icon-button color-primary">
                         </${n.UIElementType.ICON}>
                         ${this.api.translate("Add Dynamic Content")}
@@ -58,6 +56,6 @@ class b extends n.UIElement {
   }
 }
 export {
-  d as DynamicContentTagRegistry,
-  b as DynamicContentUiElementExtension
+  p as DynamicContentTagRegistry,
+  u as DynamicContentUiElementExtension
 };

package/dist/guido.css

@@ -1 +1 @@
-.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}[data-v-6a2bde67] .guido__verion-history-view-option-selection-desktop svg,[data-v-6a2bde67] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6a2bde67] .in-segments-wrapper__button_selected,[data-v-6a2bde67] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-c4fe2637] .guido__view-option-selection-desktop svg,[data-v-c4fe2637] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-c4fe2637] .in-segments-wrapper__button_selected,[data-v-c4fe2637] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.guido-editor__wrapper[data-v-5fe1cbdf],.guido-editor__container[data-v-5fe1cbdf]{width:100%;height:calc(100vh - 75px)}.error-list[data-v-cfb613b7]{gap:16px}[data-v-bd212ce2] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-9c6e7ff0],[data-v-9c6e7ff0] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-d3bb77b4]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}[data-v-6a2bde67] .guido__verion-history-view-option-selection-desktop svg,[data-v-6a2bde67] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6a2bde67] .in-segments-wrapper__button_selected,[data-v-6a2bde67] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-c4fe2637] .guido__view-option-selection-desktop svg,[data-v-c4fe2637] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-c4fe2637] .in-segments-wrapper__button_selected,[data-v-c4fe2637] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.guido-editor__wrapper[data-v-4083db95],.guido-editor__container[data-v-4083db95]{width:100%;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}

package/dist/stores/dynamic-content.d.ts

@@ -0,0 +1,27 @@
+import type { DynamicContent } from '@@/Types/generic';
+export declare const useDynamicContentStore: import("pinia").StoreDefinition<"dynamicContent", {
+    selectedDynamicContent: DynamicContent;
+    selectedDynamicContentList: DynamicContent[];
+}, {
+    getSelectedDynamicContentList: (state: {
+        selectedDynamicContent: {
+            value: string;
+            text: string;
+            fallback?: string | undefined;
+        };
+        selectedDynamicContentList: {
+            value: string;
+            text: string;
+            fallback?: string | undefined;
+        }[];
+    } & import("pinia").PiniaCustomStateProperties<{
+        selectedDynamicContent: DynamicContent;
+        selectedDynamicContentList: DynamicContent[];
+    }>) => {
+        text: string;
+        value: string;
+        fallback: string | undefined;
+    }[];
+}, {
+    setSelectedDynamicContent(dynamicContent: DynamicContent): void;
+}>;

package/dist/stores/dynamic-content.js

@@ -0,0 +1,23 @@
+import { removeDuplicatesFromArray as n } from "../utils/arrayUtil.js";
+import { defineStore as a } from "pinia";
+const s = a("dynamicContent", {
+  state: () => ({
+    selectedDynamicContent: { text: "", value: "", fallback: "" },
+    selectedDynamicContentList: []
+  }),
+  actions: {
+    setSelectedDynamicContent(e) {
+      this.selectedDynamicContent = e, this.selectedDynamicContentList.push(e);
+    }
+  },
+  getters: {
+    getSelectedDynamicContentList: (e) => n(e.selectedDynamicContentList).map((t) => ({
+      text: t.text,
+      value: t.value,
+      fallback: t.fallback
+    })) || []
+  }
+});
+export {
+  s as useDynamicContentStore
+};

package/dist/stores/preview.d.ts

@@ -1,14 +1,4 @@
-export type EmailFormat = 'html' | 'AMP';
-export interface PreviewState {
-    emailFormat: EmailFormat;
-    ampHtml: string;
-    ampErrors: string[];
-    templateHtml: string;
-    isLoading: boolean;
-    isLoaded: boolean;
-    isAMPErrorModalVisible: boolean;
-    isPreviewModeOpen: boolean;
-}
+import type { PreviewState, EmailFormat } from '@@/Types/preview';
 export declare const usePreviewStore: import("pinia").StoreDefinition<"preview", PreviewState, {
     isAMPModeEnabled: (state: {
         emailFormat: EmailFormat;
@@ -20,16 +10,7 @@ export declare const usePreviewStore: import("pinia").StoreDefinition<"preview",
         isAMPErrorModalVisible: boolean;
         isPreviewModeOpen: boolean;
     } & import("pinia").PiniaCustomStateProperties<PreviewState>) => boolean;
-    previewHtml: (state: {
-        emailFormat: EmailFormat;
-        ampHtml: string;
-        ampErrors: string[];
-        templateHtml: string;
-        isLoading: boolean;
-        isLoaded: boolean;
-        isAMPErrorModalVisible: boolean;
-        isPreviewModeOpen: boolean;
-    } & import("pinia").PiniaCustomStateProperties<PreviewState>) => string;
+    previewHtml(): string;
     hasAMP: (state: {
         emailFormat: EmailFormat;
         ampHtml: string;
@@ -50,38 +31,14 @@ export declare const usePreviewStore: import("pinia").StoreDefinition<"preview",
         isAMPErrorModalVisible: boolean;
         isPreviewModeOpen: boolean;
     } & import("pinia").PiniaCustomStateProperties<PreviewState>) => boolean;
-    showAMPErrorButton: (state: {
-        emailFormat: EmailFormat;
-        ampHtml: string;
-        ampErrors: string[];
-        templateHtml: string;
-        isLoading: boolean;
-        isLoaded: boolean;
-        isAMPErrorModalVisible: boolean;
-        isPreviewModeOpen: boolean;
-    } & import("pinia").PiniaCustomStateProperties<PreviewState>) => boolean;
-    isAMPResponsive: (state: {
-        emailFormat: EmailFormat;
-        ampHtml: string;
-        ampErrors: string[];
-        templateHtml: string;
-        isLoading: boolean;
-        isLoaded: boolean;
-        isAMPErrorModalVisible: boolean;
-        isPreviewModeOpen: boolean;
-    } & import("pinia").PiniaCustomStateProperties<PreviewState>) => boolean;
+    showAMPErrorButton(): boolean;
+    isAMPResponsive(): boolean;
 }, {
     updateAMPData(ampData: {
         ampHtml?: string;
         ampErrors?: string[];
     }): void;
     setEmailFormat(format: EmailFormat): void;
-    setTemplateHtml(html: string): void;
-    setAmpHtml(html: string): void;
-    setAmpErrors(errors: string[]): void;
-    setLoading(loading: boolean): void;
-    setLoaded(loaded: boolean): void;
-    resetState(): void;
     closeErrorModal(): void;
     openErrorModal(): void;
     openPreviewMode(): void;

package/dist/stores/preview.js

@@ -1,5 +1,5 @@
-import { defineStore as r } from "pinia";
-const t = () => ({
+import { defineStore as t } from "pinia";
+const s = () => ({
   emailFormat: "html",
   ampHtml: "",
   ampErrors: [],
@@ -8,15 +8,24 @@ const t = () => ({
   isLoaded: !1,
   isAMPErrorModalVisible: !1,
   isPreviewModeOpen: !1
-}), s = r("preview", {
-  state: () => t(),
+}), o = t("preview", {
+  state: () => s(),
   getters: {
     isAMPModeEnabled: (e) => e.emailFormat === "AMP",
-    previewHtml: (e) => e.emailFormat === "AMP" ? e.ampHtml : e.templateHtml,
-    hasAMP: (e) => !!e.ampHtml,
+    previewHtml() {
+      return this.isAMPModeEnabled ? this.ampHtml : this.templateHtml;
+    },
+    hasAMP: (e) => {
+      var r;
+      return !!((r = e.ampHtml) != null && r.trim());
+    },
     hasAMPErrors: (e) => e.ampErrors.length > 0,
-    showAMPErrorButton: (e) => e.emailFormat === "AMP" && e.ampErrors.length > 0,
-    isAMPResponsive: (e) => e.emailFormat === "AMP" && e.ampHtml.includes("@media") && e.ampHtml.includes(".adapt-img")
+    showAMPErrorButton() {
+      return this.isAMPModeEnabled && this.hasAMPErrors;
+    },
+    isAMPResponsive() {
+      return this.isAMPModeEnabled && this.ampHtml.includes("@media") && this.ampHtml.includes(".adapt-img");
+    }
   },
   actions: {
     updateAMPData(e) {
@@ -25,25 +34,6 @@ const t = () => ({
     setEmailFormat(e) {
       this.emailFormat = e;
     },
-    setTemplateHtml(e) {
-      this.templateHtml = e;
-    },
-    setAmpHtml(e) {
-      this.ampHtml = e;
-    },
-    setAmpErrors(e) {
-      this.ampErrors = e;
-    },
-    setLoading(e) {
-      this.isLoading = e;
-    },
-    setLoaded(e) {
-      this.isLoaded = e;
-    },
-    resetState() {
-      const e = t();
-      this.$patch(e);
-    },
     closeErrorModal() {
       this.isAMPErrorModalVisible = !1;
     },
@@ -59,5 +49,5 @@ const t = () => ({
   }
 });
 export {
-  s as usePreviewStore
+  o as usePreviewStore
 };

package/dist/utils/arrayUtil.d.ts

@@ -0,0 +1 @@
+export declare const removeDuplicatesFromArray: <T>(arr?: T[]) => T[];

package/dist/utils/arrayUtil.js

@@ -0,0 +1,10 @@
+const s = (t = []) => {
+  const e = /* @__PURE__ */ new Set();
+  return t.filter((n) => {
+    const r = JSON.stringify(n);
+    return e.has(r) ? !1 : (e.add(r), !0);
+  });
+};
+export {
+  s as removeDuplicatesFromArray
+};

package/dist/utils/genericUtil.d.ts

@@ -0,0 +1,2 @@
+import type { DynamicContent, MergeTag } from '@@/Types/generic';
+export declare const dynamicContentToMergeTags: (dynamicContentList: DynamicContent[]) => MergeTag[];

package/dist/utils/genericUtil.js

@@ -0,0 +1,7 @@
+const c = (l) => l.map((a) => ({
+  label: a.fallback ? `${a.text} | ${a.fallback}` : a.text,
+  value: a.fallback ? `{{${a.value}|${a.fallback}}}` : `{{${a.value}}}`
+}));
+export {
+  c as dynamicContentToMergeTags
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.0-beta.462f217",
+  "version": "1.0.0-beta.4694612",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",