@useinsider/guido 1.0.2-beta.85ea6e2 → 1.0.2-beta.86f7e79

package/dist/components/Guido.vue.js

@@ -3,14 +3,14 @@ import a from "./Guido.vue2.js";
 import i from "../_virtual/_plugin-vue2_normalizer.js";
 var t = function() {
   var o = this, r = o._self._c, e = o._self._setupProxy;
-  return r("div", { staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : o._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.SaveAsTemplateDrawer), r(e.OnboardingWrapper), r(e.LoadingWrapper)], 1);
+  return r("div", { staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : o._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.SaveAsTemplateDrawer), e.isTestPartner() ? o._e() : r(e.OnboardingWrapper), r(e.LoadingWrapper)], 1);
 }, s = [], d = /* @__PURE__ */ i(
   a,
   t,
   s,
   !1,
   null,
-  "b74952a6"
+  "39783038"
 );
 const v = d.exports;
 export {

package/dist/components/Guido.vue2.js

@@ -1,18 +1,18 @@
-import { defineComponent as k, defineAsyncComponent as b, computed as E, watch as A, onMounted as W, onUnmounted as H } from "vue";
-import { provideGuidoActions as N } from "../composables/useGuidoActions.js";
-import { usePartner as U } from "../composables/usePartner.js";
-import { useStripo as x } from "../composables/useStripo.js";
-import { DefaultUsername as M, DefaultMessageType as z, DefaultGuidoConfig as B } from "../enums/defaults.js";
-import F from "./organisms/base/Toaster.vue.js";
-import K from "./organisms/header/HeaderWrapper.vue.js";
-import O from "./organisms/LoadingWrapper.vue.js";
-import R from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
-import { useStripoApi as j } from "../services/stripoApi.js";
-import { useDynamicContentStore as q } from "../stores/dynamic-content.js";
-import { useEditorStore as J } from "../stores/editor.js";
-import { usePreviewStore as Q } from "../stores/preview.js";
-import V from "../node_modules/lodash-es/merge.js";
-const de = /* @__PURE__ */ k({
+import { defineComponent as A, defineAsyncComponent as b, computed as T, watch as W, onMounted as H, onUnmounted as N } from "vue";
+import { provideGuidoActions as U } from "../composables/useGuidoActions.js";
+import { usePartner as x } from "../composables/usePartner.js";
+import { useStripo as M } from "../composables/useStripo.js";
+import { DefaultUsername as z, DefaultMessageType as B, DefaultGuidoConfig as F } from "../enums/defaults.js";
+import K from "./organisms/base/Toaster.vue.js";
+import O from "./organisms/header/HeaderWrapper.vue.js";
+import R from "./organisms/LoadingWrapper.vue.js";
+import j from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
+import { useStripoApi as q } from "../services/stripoApi.js";
+import { useDynamicContentStore as J } from "../stores/dynamic-content.js";
+import { useEditorStore as Q } from "../stores/editor.js";
+import { usePreviewStore as V } from "../stores/preview.js";
+import X from "../node_modules/lodash-es/merge.js";
+const le = /* @__PURE__ */ A({
   __name: "Guido",
   props: {
     templateId: null,
@@ -27,12 +27,12 @@ const de = /* @__PURE__ */ k({
     guidoConfig: null
   },
   emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change"],
-  setup(T, { expose: G, emit: o }) {
-    const t = T, I = b(
+  setup(E, { expose: G, emit: t }) {
+    const o = E, P = b(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
-    ), L = b(
+    ), I = b(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), n = q(), c = J(), P = Q(), r = E(() => c.hasChanges), a = t.preselectedDynamicContentList || [], { getPartnerName: m, getProductType: d } = U(), {
+    ), n = J(), c = Q(), L = V(), r = T(() => c.hasChanges), a = o.preselectedDynamicContentList || [], { getPartnerName: m, getProductType: d, isTestPartner: _ } = x(), {
       templateId: l,
       userId: p,
       guidoConfig: u,
@@ -40,34 +40,34 @@ const de = /* @__PURE__ */ k({
       css: f = "",
       partnerName: i = m(),
       productType: s = d(),
-      messageType: y = z,
-      username: C = M
-    } = t;
-    window.GuidoConfig = V(B, u), window.GuidoConfig.partner = {
+      messageType: y = B,
+      username: C = z
+    } = o;
+    window.GuidoConfig = X(F, u), window.GuidoConfig.partner = {
       partnerName: i,
       productType: s,
       messageType: y
     };
-    const { initPlugin: v } = x({
+    const { initPlugin: v } = M({
       emailId: l,
       userId: p,
       username: C,
       partnerName: i,
       productType: s,
       preselectedDynamicContentList: a
-    }), { getDefaultTemplate: w } = j(), _ = E(() => {
+    }), { getDefaultTemplate: w } = q(), k = T(() => {
       var e;
       return !((e = window.GuidoConfig) != null && e.useHeader);
     });
-    N({
+    U({
       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", e), t("save:complete", e);
       }
     });
     const h = (e) => {
@@ -75,9 +75,9 @@ const de = /* @__PURE__ */ k({
     }, D = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
-    return A(() => r.value, () => {
-      o("on-change");
-    }), W(async () => {
+    return W(() => r.value, () => {
+      t("on-change");
+    }), H(async () => {
       console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
       try {
         let e = {
@@ -92,9 +92,9 @@ const de = /* @__PURE__ */ k({
       }
       document.addEventListener("dynamic-content:open", (e) => {
         const S = e;
-        console.debug("dynamic-content:open", S.detail), o("dynamic-content:open", S.detail);
+        console.debug("dynamic-content:open", S.detail), t("dynamic-content:open", S.detail);
       });
-    }), H(() => {
+    }), N(() => {
       window.UIEditor.removeEditor();
     }), G({
       dynamicContent: {
@@ -102,9 +102,9 @@ const de = /* @__PURE__ */ k({
         close: D
       },
       hasChanges: r
-    }), { __sfc: !0, PreviewContainer: I, OnboardingWrapper: L, dynamicContentStore: n, props: t, editorStore: c, previewStore: P, hasChanges: r, preselectedDynamicContentList: a, getPartnerName: m, getProductType: d, templateId: l, userId: p, guidoConfig: u, html: g, css: f, partnerName: i, productType: s, messageType: y, username: C, emit: o, initPlugin: v, getDefaultTemplate: w, noHeader: _, insertDynamicContent: h, closeDynamicContent: D, Toaster: F, HeaderWrapper: K, LoadingWrapper: O, SaveAsTemplateDrawer: R };
+    }), { __sfc: !0, PreviewContainer: P, OnboardingWrapper: I, dynamicContentStore: n, props: o, editorStore: c, previewStore: L, hasChanges: r, preselectedDynamicContentList: a, getPartnerName: m, getProductType: d, isTestPartner: _, templateId: l, userId: p, guidoConfig: u, html: g, css: f, partnerName: i, productType: s, messageType: y, username: C, emit: t, initPlugin: v, getDefaultTemplate: w, noHeader: k, insertDynamicContent: h, closeDynamicContent: D, Toaster: K, HeaderWrapper: O, LoadingWrapper: R, SaveAsTemplateDrawer: j };
   }
 });
 export {
-  de as default
+  le as default
 };

package/dist/components/organisms/email-preview/amp/AmpToggle.vue2.js

@@ -1,30 +1,29 @@
-import { defineComponent as r, computed as i } from "vue";
-import { useTranslations as m } from "../../../../composables/useTranslations.js";
-import { useOnboardingStore as s } from "../../../../stores/onboarding.js";
-import { usePreviewStore as p } from "../../../../stores/preview.js";
-import { InButtonV2 as l, InSegments as d } from "@useinsider/design-system-vue";
-const v = /* @__PURE__ */ r({
+import { defineComponent as m, computed as n } from "vue";
+import { useTranslations as r } from "../../../../composables/useTranslations.js";
+import { usePreviewStore as i } from "../../../../stores/preview.js";
+import { InButtonV2 as s, InSegments as l } from "@useinsider/design-system-vue";
+const _ = /* @__PURE__ */ m({
   __name: "AmpToggle",
-  setup(u) {
-    const t = p(), e = s(), o = m(), a = i(() => [
+  setup(p) {
+    const t = i(), e = r(), o = n(() => [
       {
-        text: o("dynamic-creatives.html"),
+        text: e("dynamic-creatives.html"),
         value: "html"
       },
       {
-        text: o("email-editor.amp-html"),
+        text: e("email-editor.amp-html"),
         value: "AMP",
-        tooltipText: t.hasAMP ? "" : o("email-editor.preview-amp-unavailable-tooltip"),
+        tooltipText: t.hasAMP ? "" : e("email-editor.preview-amp-unavailable-tooltip"),
         position: "bottom",
         align: "center",
         disable: !t.hasAMP
       }
     ]);
-    return { __sfc: !0, previewStore: t, onboardingStore: e, trans: o, segmentList: a, handleFormatChange: (n) => {
-      t.setEmailFormat(n), n === "AMP" && e.shouldShowOnboarding("ampOnboarding") && e.start("ampOnboarding");
-    }, InSegments: d, InButtonV2: l };
+    return { __sfc: !0, previewStore: t, trans: e, segmentList: o, handleFormatChange: (a) => {
+      t.setEmailFormat(a);
+    }, InSegments: l, InButtonV2: s };
   }
 });
 export {
-  v as default
+  _ as default
 };

package/dist/components/organisms/header/ViewOptions.vue.js

@@ -1,16 +1,16 @@
 import i from "./ViewOptions.vue2.js";
 /* empty css                 */
 import o from "../../../_virtual/_plugin-vue2_normalizer.js";
-var r = function() {
+var n = function() {
   var t = this, s = t._self._c, e = t._self._setupProxy;
-  return s("div", { staticClass: "view-options-wrapper" }, [s(e.InSegments, { attrs: { id: "guido__view-option-selection", "with-icon": "", disable: e.editorStore.isViewOptionsDisabled, "segment-list": e.segmentList, selected: e.editorStore.editorVisualMode } }), e.editorStore.isViewOptionsDisabled ? t._e() : s("div", { staticClass: "new-tag" }, [t._v(" " + t._s(e.trans("settings.new")) + " ")])], 1);
-}, n = [], a = /* @__PURE__ */ o(
+  return s("div", { staticClass: "view-options-wrapper" }, [s(e.InSegments, { attrs: { id: "guido__view-option-selection", "with-icon": "", disable: e.editorStore.isViewOptionsDisabled, "segment-list": e.segmentList, selected: e.editorStore.editorVisualMode } }), e.editorStore.isViewOptionsDisabled ? t._e() : s(e.InChips, { staticClass: "new-tag", attrs: { id: "guido__view-options-new-tag", styles: "stroke", value: "chips", "close-button": !1, interactive: !1, text: e.trans("settings.new") } })], 1);
+}, r = [], a = /* @__PURE__ */ o(
   i,
-  r,
   n,
+  r,
   !1,
   null,
-  "99e4d32b"
+  "195ab6d4"
 );
 const c = a.exports;
 export {

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

@@ -2,10 +2,10 @@ import { defineComponent as n } from "vue";
 import { useTranslations as p } from "../../../composables/useTranslations.js";
 import { useEditorStore as s } from "../../../stores/editor.js";
 import { getTooltipOptions as o } from "../../../utils/tooltipUtils.js";
-import { InSegments as r } from "@useinsider/design-system-vue";
-const d = /* @__PURE__ */ n({
+import { InChips as r, InSegments as m } from "@useinsider/design-system-vue";
+const f = /* @__PURE__ */ n({
   __name: "ViewOptions",
-  setup(m) {
+  setup(l) {
     const e = s(), t = p(), i = [
       {
         text: "",
@@ -26,9 +26,9 @@ const d = /* @__PURE__ */ n({
         tooltipOptions: o("guido__view-option-mobile")
       }
     ];
-    return { __sfc: !0, editorStore: e, trans: t, segmentList: i, InSegments: r };
+    return { __sfc: !0, editorStore: e, trans: t, segmentList: i, InSegments: m, InChips: r };
   }
 });
 export {
-  d as default
+  f as default
 };

package/dist/components/organisms/header/version-history/ViewOptions.vue.js

@@ -2,17 +2,17 @@ import i from "./ViewOptions.vue2.js";
 /* empty css                 */
 import o from "../../../../_virtual/_plugin-vue2_normalizer.js";
 var n = function() {
-  var t = this, s = t._self._c, e = t._self._setupProxy;
-  return s("div", { staticClass: "view-options-wrapper" }, [s(e.InSegments, { attrs: { id: "guido__verion-history-view-option-selection", "with-icon": "", "segment-list": e.segmentList, selected: e.versionHistoryStore.editorVisualMode }, on: { click: e.changeVisualMode } }), s("div", { staticClass: "new-tag" }, [t._v(" " + t._s(e.trans("settings.new")) + " ")])], 1);
+  var s = this, t = s._self._c, e = s._self._setupProxy;
+  return t("div", { staticClass: "view-options-wrapper" }, [t(e.InSegments, { attrs: { id: "guido__verion-history-view-option-selection", "with-icon": "", "segment-list": e.segmentList, selected: e.versionHistoryStore.editorVisualMode }, on: { click: e.changeVisualMode } }), t(e.InChips, { staticClass: "new-tag", attrs: { id: "guido__view-options-new-tag", styles: "stroke", value: "chips", "close-button": !1, interactive: !1, text: e.trans("settings.new") } })], 1);
 }, r = [], a = /* @__PURE__ */ o(
   i,
   n,
   r,
   !1,
   null,
-  "c144e1e3"
+  "d405ca59"
 );
-const m = a.exports;
+const d = a.exports;
 export {
-  m as default
+  d as default
 };

package/dist/components/organisms/header/version-history/ViewOptions.vue2.js

@@ -3,10 +3,10 @@ import { useTranslations as m } from "../../../../composables/useTranslations.js
 import { useVersionHistoryApi as l } from "../../../../composables/useVersionHistoryApi.js";
 import { useVersionHistoryStore as a } from "../../../../stores/version-history.js";
 import { getTooltipOptions as n } from "../../../../utils/tooltipUtils.js";
-import { InSegments as c } from "@useinsider/design-system-vue";
-const h = /* @__PURE__ */ p({
+import { InChips as c, InSegments as u } from "@useinsider/design-system-vue";
+const T = /* @__PURE__ */ p({
   __name: "ViewOptions",
-  setup(u) {
+  setup(_) {
     const t = a(), { switchToDesktopPreview: e, switchToMobilePreview: i } = l(), o = m(), r = [
       {
         text: "",
@@ -33,9 +33,9 @@ const h = /* @__PURE__ */ p({
         return;
       }
       e();
-    }, InSegments: c };
+    }, InSegments: u, InChips: c };
   }
 });
 export {
-  h as default
+  T as default
 };

package/dist/components/organisms/onboarding/GenericOnboarding.vue.js

@@ -1,19 +1,19 @@
-import d from "./GenericOnboarding.vue2.js";
+import c from "./GenericOnboarding.vue2.js";
 /* empty css                       */
 import g from "../../../_virtual/_plugin-vue2_normalizer.js";
 var l = function() {
   var r, n, t, i, a, s;
-  var o = this, c = o._self._c, e = o._self._setupProxy;
-  return e.isVisible ? c(e.InOnboard, { key: "guido__editor-onboard", staticClass: "w-21-s p-a z-11", class: (r = e.onboardingStore.getGenericCurrentCard) == null ? void 0 : r.classes, attrs: { id: "guido__editor-onboard", "is-multiple-page": "", visible: "", "image-source": "", title: "", "bottom-position": (n = e.onboardingStore.getGenericCurrentCard) == null ? void 0 : n.bottom, "left-position": (t = e.onboardingStore.getGenericCurrentCard) == null ? void 0 : t.left, "pages-config": e.onboardingStore.onboardings.genericOnboarding.config, "pointer-position": (i = e.onboardingStore.getGenericCurrentCard) == null ? void 0 : i.position, "right-position": (a = e.onboardingStore.getGenericCurrentCard) == null ? void 0 : a.right, "top-position": (s = e.onboardingStore.getGenericCurrentCard) == null ? void 0 : s.top }, on: { backButtonClick: e.handleBack, close: function(u) {
+  var o = this, d = o._self._c, e = o._self._setupProxy;
+  return e.isVisible ? d(e.InOnboard, { key: "guido__editor-onboard", staticClass: "w-21-s p-a z-11", class: (r = e.onboardingStore.getGenericCurrentCard) == null ? void 0 : r.classes, attrs: { id: "guido__editor-onboard", "is-multiple-page": "", visible: "", "image-source": "", title: "", "bottom-position": (n = e.onboardingStore.getGenericCurrentCard) == null ? void 0 : n.bottom, "left-position": (t = e.onboardingStore.getGenericCurrentCard) == null ? void 0 : t.left, "pages-config": e.onboardingStore.onboardings.genericOnboarding.config, "pointer-position": (i = e.onboardingStore.getGenericCurrentCard) == null ? void 0 : i.position, "right-position": (a = e.onboardingStore.getGenericCurrentCard) == null ? void 0 : a.right, "top-position": (s = e.onboardingStore.getGenericCurrentCard) == null ? void 0 : s.top }, on: { backButtonClick: e.handleBack, close: function(u) {
     return e.onboardingStore.close("genericOnboarding");
   }, nextButtonClick: e.handleNext } }) : o._e();
 }, p = [], _ = /* @__PURE__ */ g(
-  d,
+  c,
   l,
   p,
   !1,
   null,
-  "acae5543"
+  "3b4afa54"
 );
 const S = _.exports;
 export {

package/dist/components/organisms/onboarding/GenericOnboarding.vue2.js

@@ -33,7 +33,7 @@ const S = /* @__PURE__ */ l({
       {
         classes: "guido-onboarding-stripes",
         right: "450px",
-        bottom: "50px",
+        bottom: "-38px",
         position: "Right Top",
         title: e("email-editor.onboarding-stripes-title"),
         description: e("email-editor.onboarding-stripes-description"),

package/dist/components/organisms/onboarding/OnboardingWrapper.vue2.js

@@ -1,36 +1,41 @@
-import { defineComponent as g, computed as t, onMounted as b, watch as c } from "vue";
+import { defineComponent as g, computed as e, onMounted as b, watch as t } from "vue";
 import { usePartner as O } from "../../../composables/usePartner.js";
 import { useEditorStore as u } from "../../../stores/editor.js";
-import { useOnboardingStore as l } from "../../../stores/onboarding.js";
-import { usePreviewStore as v } from "../../../stores/preview.js";
+import { useOnboardingStore as v } from "../../../stores/onboarding.js";
+import { usePreviewStore as l } from "../../../stores/preview.js";
 import y from "./AMPOnboarding.vue.js";
 import S from "./GenericOnboarding.vue.js";
-import h from "./NewVersionPopup.vue.js";
-import w from "./TextBlockOnboarding.vue.js";
-import P from "./VersionHistoryOnboarding.vue.js";
+import w from "./NewVersionPopup.vue.js";
+import P from "./TextBlockOnboarding.vue.js";
+import h from "./VersionHistoryOnboarding.vue.js";
 const E = /* @__PURE__ */ g({
   __name: "OnboardingWrapper",
   setup(_) {
-    const o = l(), i = u(), e = v(), { isTestPartner: s } = O(), a = t(() => i.isStripoInitialized), p = t(() => s()), d = [
-      { type: "newVersionPopup", component: h },
+    const o = v(), r = u(), s = l(), { isTestPartner: a } = O(), p = e(() => r.isStripoInitialized), d = e(() => a()), m = [
+      { type: "newVersionPopup", component: w },
       { type: "genericOnboarding", component: S },
-      { type: "textBlockOnboarding", component: w },
-      { type: "versionHistoryOnboarding", component: P },
+      { type: "textBlockOnboarding", component: P },
+      { type: "versionHistoryOnboarding", component: h },
       { type: "ampOnboarding", component: y }
-    ], m = (r) => p.value || !a.value ? !1 : r === "newVersionPopup" ? o.shouldShowOnboarding(r) : o.isActive(r), f = t(() => d.filter((r) => m(r.type)));
+    ], c = (n) => d.value || !p.value ? !1 : n === "newVersionPopup" ? o.shouldShowOnboarding(n) : o.isActive(n), f = e(() => m.filter((n) => c(n.type)));
     return b(async () => {
       await o.fetchUserModalState();
-    }), c(
-      () => i.isVersionHistoryOpen,
-      (r, n) => {
-        r && !n && o.shouldShowOnboarding("versionHistoryOnboarding") && o.start("versionHistoryOnboarding"), !r && n && o.isActive("versionHistoryOnboarding") && o.close("versionHistoryOnboarding");
+    }), t(
+      () => r.isVersionHistoryOpen,
+      (n, i) => {
+        n && !i && o.shouldShowOnboarding("versionHistoryOnboarding") && o.start("versionHistoryOnboarding"), !n && i && o.isActive("versionHistoryOnboarding") && o.close("versionHistoryOnboarding");
       }
-    ), c(
-      () => e.emailFormat,
-      (r, n) => {
-        n !== "AMP" && r === "AMP" && o.shouldShowOnboarding("ampOnboarding") && o.start("ampOnboarding");
+    ), t(
+      () => s.emailFormat,
+      (n, i) => {
+        i !== "AMP" && n === "AMP" && o.shouldShowOnboarding("ampOnboarding") && o.start("ampOnboarding");
       }
-    ), { __sfc: !0, onboardingStore: o, editorStore: i, previewStore: e, isTestPartner: s, isStripoReady: a, isTestPartnerActive: p, onboardingConfigs: d, shouldShow: m, visibleOnboardings: f };
+    ), t(
+      () => r.isPreviewModeOpen,
+      (n) => {
+        !n && o.isActive("ampOnboarding") && o.close("ampOnboarding");
+      }
+    ), { __sfc: !0, onboardingStore: o, editorStore: r, previewStore: s, isTestPartner: a, isStripoReady: p, isTestPartnerActive: d, onboardingConfigs: m, shouldShow: c, visibleOnboardings: f };
   }
 });
 export {

package/dist/composables/usePreviewMode.js

@@ -1,27 +1,26 @@
-import { useEditorStore as p } from "../stores/editor.js";
-import { useOnboardingStore as m } from "../stores/onboarding.js";
+import { useEditorStore as n } from "../stores/editor.js";
 import { usePreviewStore as l } from "../stores/preview.js";
-import { useActionsApi as c } from "./useActionsApi.js";
-import { useCodeEditorApi as u } from "./useCodeEditorApi.js";
+import { useActionsApi as m } from "./useActionsApi.js";
+import { useCodeEditorApi as p } from "./useCodeEditorApi.js";
 const E = () => {
-  const e = p(), o = l(), t = m(), { closeCodeEditor: a } = u(), { getPreviewData: s } = c(), i = () => {
-    t.isActive("ampOnboarding") && t.close("ampOnboarding"), e.isPreviewModeOpen = !1, o.$reset();
+  const o = n(), e = l(), { closeCodeEditor: a } = p(), { getPreviewData: s } = m(), r = () => {
+    o.isPreviewModeOpen = !1, e.$reset();
   };
   return {
-    closePreviewMode: i,
+    closePreviewMode: r,
     openPreviewMode: () => {
-      e.isCodeEditorOpen && a(), e.isPreviewModeOpen = !0;
+      o.isCodeEditorOpen && a(), o.isPreviewModeOpen = !0;
     },
     loadPreviewData: async () => {
-      if (!(e.loadingStatus || o.isLoaded)) {
-        e.loadingStatus = !0;
+      if (!(o.loadingStatus || e.isLoaded)) {
+        o.loadingStatus = !0;
         try {
-          const { html: r, ampHtml: d, ampErrors: n } = await s();
-          o.templateHtml = r || "", o.updateAMPData({ ampHtml: d || "", ampErrors: n || [] }), o.isLoaded = !0;
-        } catch (r) {
-          console.error("Failed to load preview data:", r), i();
+          const { html: t, ampHtml: i, ampErrors: d } = await s();
+          e.templateHtml = t || "", e.ampHtml = i || "", e.ampErrors = d || [], e.setEmailFormat(i ? "AMP" : "html"), e.isLoaded = !0;
+        } catch (t) {
+          console.error("Failed to load preview data:", t), r();
         } finally {
-          e.loadingStatus = !1;
+          o.loadingStatus = !1;
         }
       }
     }

package/dist/guido.css

@@ -1 +1 @@
-[data-v-a18ac2d3] .in-button-v2__wrapper{line-height:0}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.view-options-wrapper[data-v-c144e1e3]{position:relative;display:inline-block}.new-tag[data-v-c144e1e3]{height:24px;position:absolute;top:-8px;right:-16px;background-color:#dae1fb;color:#0a2ecc;font-size:13px;font-weight:400;padding:4px;border-radius:4px;z-index:10;pointer-events:none;border:1px solid #B5C1F1;line-height:16px}[data-v-c144e1e3] .guido__verion-history-view-option-selection-desktop svg,[data-v-c144e1e3] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-c144e1e3] .in-segments-wrapper__button_selected,[data-v-c144e1e3] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-c144e1e3] .in-tooltip-wrapper__icon{cursor:pointer}.view-options-wrapper[data-v-99e4d32b]{position:relative;display:inline-block}.new-tag[data-v-99e4d32b]{height:24px;position:absolute;top:-8px;right:-16px;background-color:#dae1fb;color:#0a2ecc;font-size:13px;font-weight:400;padding:4px;border-radius:4px;z-index:10;pointer-events:none;border:1px solid #B5C1F1;line-height:16px}[data-v-99e4d32b] .guido__view-option-selection-desktop svg,[data-v-99e4d32b] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-99e4d32b] .in-segments-wrapper__button_selected,[data-v-99e4d32b] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-99e4d32b] .in-tooltip-wrapper__icon{cursor:pointer}.guido-loading__wrapper[data-v-2d4cd446]{height:calc(100% - 75px);top:75px}.guido-editor__wrapper[data-v-b74952a6],.guido-editor__container[data-v-b74952a6]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-b74952a6]{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-acae5543] .vueperslides__bullets,[data-v-bccb3b50] .vueperslides__bullets{pointer-events:none!important}
+[data-v-a18ac2d3] .in-button-v2__wrapper{line-height:0}.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-2d4cd446]{height:calc(100% - 75px);top:75px}.guido-editor__wrapper[data-v-39783038],.guido-editor__container[data-v-39783038]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-39783038]{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-3b4afa54] .vueperslides__bullets,[data-v-bccb3b50] .vueperslides__bullets{pointer-events:none!important}

package/dist/stores/onboarding.d.ts

@@ -108,7 +108,15 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"onboar
                 }[];
             };
         };
-        userModalState: Record<string, Record<string, boolean>>;
+        userModalState: {
+            Guido?: {
+                newVersionPopup?: boolean | undefined;
+                genericOnboarding?: boolean | undefined;
+                textBlockOnboarding?: boolean | undefined;
+                versionHistoryOnboarding?: boolean | undefined;
+                ampOnboarding?: boolean | undefined;
+            } | undefined;
+        };
         isFetched: boolean;
     } & import("pinia").PiniaCustomStateProperties<OnboardingStoreState>) => (type: OnboardingType) => {
         cardIndex: number;
@@ -239,7 +247,15 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"onboar
                 }[];
             };
         };
-        userModalState: Record<string, Record<string, boolean>>;
+        userModalState: {
+            Guido?: {
+                newVersionPopup?: boolean | undefined;
+                genericOnboarding?: boolean | undefined;
+                textBlockOnboarding?: boolean | undefined;
+                versionHistoryOnboarding?: boolean | undefined;
+                ampOnboarding?: boolean | undefined;
+            } | undefined;
+        };
         isFetched: boolean;
     } & import("pinia").PiniaCustomStateProperties<OnboardingStoreState>) => (type: OnboardingType) => boolean;
     getCurrentCard: (state: {
@@ -350,7 +366,15 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"onboar
                 }[];
             };
         };
-        userModalState: Record<string, Record<string, boolean>>;
+        userModalState: {
+            Guido?: {
+                newVersionPopup?: boolean | undefined;
+                genericOnboarding?: boolean | undefined;
+                textBlockOnboarding?: boolean | undefined;
+                versionHistoryOnboarding?: boolean | undefined;
+                ampOnboarding?: boolean | undefined;
+            } | undefined;
+        };
         isFetched: boolean;
     } & import("pinia").PiniaCustomStateProperties<OnboardingStoreState>) => (type: OnboardingType) => {
         classes: string;
@@ -477,7 +501,15 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"onboar
                 }[];
             };
         };
-        userModalState: Record<string, Record<string, boolean>>;
+        userModalState: {
+            Guido?: {
+                newVersionPopup?: boolean | undefined;
+                genericOnboarding?: boolean | undefined;
+                textBlockOnboarding?: boolean | undefined;
+                versionHistoryOnboarding?: boolean | undefined;
+                ampOnboarding?: boolean | undefined;
+            } | undefined;
+        };
         isFetched: boolean;
     } & import("pinia").PiniaCustomStateProperties<OnboardingStoreState>) => {
         classes: string;
@@ -604,7 +636,15 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"onboar
                 }[];
             };
         };
-        userModalState: Record<string, Record<string, boolean>>;
+        userModalState: {
+            Guido?: {
+                newVersionPopup?: boolean | undefined;
+                genericOnboarding?: boolean | undefined;
+                textBlockOnboarding?: boolean | undefined;
+                versionHistoryOnboarding?: boolean | undefined;
+                ampOnboarding?: boolean | undefined;
+            } | undefined;
+        };
         isFetched: boolean;
     } & import("pinia").PiniaCustomStateProperties<OnboardingStoreState>) => {
         classes: string;
@@ -731,7 +771,15 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"onboar
                 }[];
             };
         };
-        userModalState: Record<string, Record<string, boolean>>;
+        userModalState: {
+            Guido?: {
+                newVersionPopup?: boolean | undefined;
+                genericOnboarding?: boolean | undefined;
+                textBlockOnboarding?: boolean | undefined;
+                versionHistoryOnboarding?: boolean | undefined;
+                ampOnboarding?: boolean | undefined;
+            } | undefined;
+        };
         isFetched: boolean;
     } & import("pinia").PiniaCustomStateProperties<OnboardingStoreState>) => {
         classes: string;
@@ -858,7 +906,15 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"onboar
                 }[];
             };
         };
-        userModalState: Record<string, Record<string, boolean>>;
+        userModalState: {
+            Guido?: {
+                newVersionPopup?: boolean | undefined;
+                genericOnboarding?: boolean | undefined;
+                textBlockOnboarding?: boolean | undefined;
+                versionHistoryOnboarding?: boolean | undefined;
+                ampOnboarding?: boolean | undefined;
+            } | undefined;
+        };
         isFetched: boolean;
     } & import("pinia").PiniaCustomStateProperties<OnboardingStoreState>) => {
         classes: string;
@@ -985,7 +1041,15 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"onboar
                 }[];
             };
         };
-        userModalState: Record<string, Record<string, boolean>>;
+        userModalState: {
+            Guido?: {
+                newVersionPopup?: boolean | undefined;
+                genericOnboarding?: boolean | undefined;
+                textBlockOnboarding?: boolean | undefined;
+                versionHistoryOnboarding?: boolean | undefined;
+                ampOnboarding?: boolean | undefined;
+            } | undefined;
+        };
         isFetched: boolean;
     } & import("pinia").PiniaCustomStateProperties<OnboardingStoreState>) => (type: OnboardingType) => boolean;
 }, {

package/dist/stores/preview.js

@@ -27,9 +27,7 @@ const s = () => ({
   },
   actions: {
     updateAMPData(t) {
-      this.ampHtml = t.ampHtml ?? "", this.ampErrors = t.ampErrors ?? [];
-      const r = t.ampHtml ? "AMP" : "html";
-      this.emailFormat = r;
+      this.ampHtml = t.ampHtml ?? "", this.ampErrors = t.ampErrors ?? [], this.emailFormat = t.ampHtml ? "AMP" : "html";
     },
     setEmailFormat(t) {
       this.emailFormat = t;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.2-beta.85ea6e2",
+  "version": "1.0.2-beta.86f7e79",
   "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",
@@ -24,7 +24,8 @@
     "lint": "NODE_OPTIONS=--max-old-space-size=2048 eslint ./ && bun run type-check",
     "lint:fix": "NODE_OPTIONS=--max-old-space-size=2048 eslint --fix ./",
     "type-check": "vue-tsc --noEmit --project tsconfig.config.json && vue-tsc --noEmit --project tsconfig.app.json",
-    "test:visual-update": "npx playwright test --update-snapshots --reporter html"
+    "test:visual-update": "npx playwright test --update-snapshots --reporter html",
+    "prepare": "husky"
   },
   "keywords": [],
   "author": "",
@@ -65,6 +66,7 @@
     "eslint-plugin-vue": "10.1.0",
     "eslint-plugin-vue-scoped-css": "2.6.1",
     "globals": "16.0.0",
+    "husky": "9.1.7",
     "msw": "2.10.3",
     "sass": "1.69.7",
     "typescript": "5.5.4",