@useinsider/guido 1.0.0-beta.a19efaa → 1.0.0-beta.a3ed027

package/dist/components/organisms/design-preview/EmailView.vue.js

@@ -0,0 +1,19 @@
+import i from "./EmailView.vue2.js";
+import n from "../../../_virtual/_plugin-vue2_normalizer.js";
+var t = function() {
+  var e = this, s = e._self._c, a = e._self._setupProxy;
+  return s("div", { staticClass: "w-1 h-1 b-c-4 d-f f-d-c" }, [s("div", { staticClass: "d-f j-c-s-b a-i-c p-2 h-6-s" }, [s("div", { staticClass: "d-f a-i-c cur-p", on: { click: function(l) {
+    return e.$emit("back-to-inbox");
+  } } }, [s(a.InIcons, { staticClass: "f-s-3 i-c-7", attrs: { name: "line-chevron-left" } }), s("span", { staticClass: "ml-2 f-s-1 f-w-400 l-h-1 t-c-7" }, [e._v(e._s(a.trans("newsletter.inbox")))])], 1), s("div", { staticClass: "d-f a-i-c" }, [s(a.InIcons, { staticClass: "i-c-52", attrs: { name: "line-chevron-down" } }), s(a.InIcons, { staticClass: "ml-1 i-c-52", attrs: { name: "line-chevron-up" } })], 1)]), s("div", { directives: [{ name: "show", rawName: "v-show", value: a.isLoadingIframe, expression: "isLoadingIframe" }], staticClass: "d-f a-i-c j-c-c w-1 h-1" }, [s(a.InLoading)], 1), s("iframe", { directives: [{ name: "show", rawName: "v-show", value: !a.isLoadingIframe, expression: "!isLoadingIframe" }], ref: "iframeRef", staticClass: "f-g-1 w-1 d-b b-c-4 bor-s-n", attrs: { sandbox: "allow-same-origin allow-popups allow-forms allow-scripts", srcdoc: e.emailHtml }, on: { load: a.onLoad } })]);
+}, o = [], c = /* @__PURE__ */ n(
+  i,
+  t,
+  o,
+  !1,
+  null,
+  null
+);
+const d = c.exports;
+export {
+  d as default
+};

package/dist/components/organisms/design-preview/EmailView.vue2.js

@@ -0,0 +1,24 @@
+import { defineComponent as u, ref as l } from "vue";
+import { useMobileGmailFit as f } from "../../../composables/useMobileGmailFit.js";
+import { useTranslations as d } from "../../../composables/useTranslations.js";
+import { InLoading as y, InIcons as v } from "@useinsider/design-system-vue";
+const I = /* @__PURE__ */ u({
+  __name: "EmailView",
+  props: {
+    emailHtml: null,
+    isAmp: { type: Boolean }
+  },
+  emits: ["back-to-inbox", "load"],
+  setup(c, { emit: t }) {
+    const o = c, p = d(), n = l(), { setupMobileGmailFit: s } = f(), m = l(!0), r = () => !!o.isAmp && o.emailHtml.includes("@media") && o.emailHtml.includes(".adapt-img"), i = (e) => {
+      e.documentElement.style.removeProperty("transform"), e.documentElement.style.removeProperty("transform-origin"), e.documentElement.style.removeProperty("height");
+    };
+    return { __sfc: !0, props: o, emit: t, trans: p, iframeRef: n, setupMobileGmailFit: s, isLoadingIframe: m, isAmpResponsive: r, clearAmpTransforms: i, onLoad: () => {
+      const e = n.value, a = e == null ? void 0 : e.contentDocument;
+      !e || !a || (s(e), r() && setTimeout(() => i(a), 50), t("load"), m.value = !1);
+    }, InIcons: v, InLoading: y };
+  }
+});
+export {
+  I as default
+};

package/dist/components/organisms/design-preview/InboxView.vue.d.ts

@@ -0,0 +1,17 @@
+import type { EmailData } from '@@/Types/generic';
+interface Props {
+    emailData?: EmailData;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
+    "open-email": () => void;
+}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/organisms/design-preview/InboxView.vue.js

@@ -0,0 +1,19 @@
+import a from "./InboxView.vue2.js";
+import e from "../../../_virtual/_plugin-vue2_normalizer.js";
+var n = 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(l) {
+    return s.$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" }, [s._v(" " + s._s(c.senderName) + " ")]), t("div", { staticClass: "f-s-12 f-w-400 t-c-55 l-h-1" }, [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)]);
+}, r = [], i = /* @__PURE__ */ e(
+  a,
+  n,
+  r,
+  !1,
+  null,
+  null
+);
+const m = i.exports;
+export {
+  m as default
+};

package/dist/components/organisms/design-preview/InboxView.vue2.js

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

package/dist/components/organisms/design-preview/MobilePreview.vue.d.ts

@@ -0,0 +1,17 @@
+import type { EmailData } from '@@/Types/generic';
+interface Props {
+    emailHtml: string;
+    isAmp: boolean;
+    emailData?: EmailData;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/organisms/design-preview/MobilePreview.vue.js

@@ -0,0 +1,17 @@
+import e from "./MobilePreview.vue2.js";
+import o from "../../../_virtual/_plugin-vue2_normalizer.js";
+var i = function() {
+  var t = this, s = t._self._c, a = t._self._setupProxy;
+  return s("div", { staticClass: "d-f j-c-c pl-5" }, [s("div", { staticClass: "p-r w-35-s h-26-s" }, [s("img", { staticClass: "w-1 h-1 d-b p-e-n", attrs: { alt: a.mockupAlt, src: a.mockupImage } }), s("div", { staticClass: "p-a w-21-s h-24-s o-h", style: { top: a.phoneScreenTopMargin, left: "20px" } }, [a.showInbox ? s(a.InboxView, { attrs: { "email-data": a.props.emailData }, on: { "open-email": a.openEmail } }) : s(a.EmailView, { attrs: { "email-html": t.emailHtml, "is-amp": t.isAmp }, on: { "back-to-inbox": a.backToInbox } })], 1)])]);
+}, l = [], n = /* @__PURE__ */ o(
+  e,
+  i,
+  l,
+  !1,
+  null,
+  null
+);
+const c = n.exports;
+export {
+  c as default
+};

package/dist/components/organisms/design-preview/MobilePreview.vue2.js

@@ -0,0 +1,23 @@
+import { defineComponent as s, ref as c, computed as e } from "vue";
+import { INBOX_PREVIEW_PATH as u, PHONE_PREVIEW_PATH as i } from "../../../enums/emailPreview.js";
+import f from "./EmailView.vue.js";
+import _ from "./InboxView.vue.js";
+const b = /* @__PURE__ */ s({
+  __name: "MobilePreview",
+  props: {
+    emailHtml: null,
+    isAmp: { type: Boolean },
+    emailData: null
+  },
+  setup(n) {
+    const t = n, o = c(!1), m = e(() => o.value ? u : i), p = e(() => o.value ? "Inbox mockup" : "Phone mockup"), a = () => {
+      o.value = !1;
+    }, l = () => {
+      o.value = !0;
+    }, r = e(() => o.value ? "88px" : "44px");
+    return { __sfc: !0, props: t, showInbox: o, mockupImage: m, mockupAlt: p, openEmail: a, backToInbox: l, phoneScreenTopMargin: r, EmailView: f, InboxView: _ };
+  }
+});
+export {
+  b as default
+};

package/dist/components/organisms/header/AmpToggle.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

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

@@ -0,0 +1,17 @@
+import t from "./AmpToggle.vue2.js";
+import s from "../../../_virtual/_plugin-vue2_normalizer.js";
+var a = function() {
+  var e = this, o = e._self._c, r = e._self._setupProxy;
+  return r.editorStore.isPreviewModeOpen ? o("div", [o("div", { staticClass: "d-f a-i-c ml-3" }, [o(r.InSegments, { attrs: { id: "guido__amp-toggle", "segment-list": r.segmentList, selected: r.editorStore.emailFormat }, on: { click: r.handleFormatChange } }), r.showErrorButton ? o(r.InButtonV2, { staticClass: "ml-2 d-f a-i-c b-c-11 b-c-h-11 t-c-4 t-c-h-4 i-c-4 bor-w-1 bor-s-s bor-c-11 bor-r-2", attrs: { id: "guido__amp-error-button", "left-icon": "line-error-box", type: "danger", "label-text-status": !1 }, on: { click: r.handleErrorClick } }) : e._e()], 1), r.showErrorModal ? o(r.AmpErrorModal, { attrs: { errors: r.editorStore.ampErrors || [] }, on: { close: r.closeErrorModal } }) : e._e()], 1) : e._e();
+}, n = [], l = /* @__PURE__ */ s(
+  t,
+  a,
+  n,
+  !1,
+  null,
+  null
+);
+const d = l.exports;
+export {
+  d as default
+};

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

@@ -0,0 +1,48 @@
+import { defineComponent as h, ref as v, computed as a, watch as E } from "vue";
+import { useActionsApi as g } from "../../../composables/useActionsApi.js";
+import { useToaster as w } from "../../../composables/useToaster.js";
+import { useTranslations as M } from "../../../composables/useTranslations.js";
+import A from "../design-preview/AmpErrorModal.vue.js";
+import { useEditorStore as _ } from "../../../stores/editor.js";
+import { InButtonV2 as P, InSegments as y } from "@useinsider/design-system-vue";
+const D = /* @__PURE__ */ h({
+  __name: "AmpToggle",
+  setup(F) {
+    const t = _(), { getPreviewData: s } = g(), { showToaster: l } = w(), e = M(), r = v(!1), m = a(() => !!t.ampHtml), n = a(() => !!(t.ampErrors && t.ampErrors.length > 0)), p = a(() => [
+      { text: e("dynamic-creatives.html"), value: "html" },
+      {
+        text: e("email.amp-html"),
+        value: "amp",
+        tooltipText: m.value ? "" : e("email.preview-amp-unavailable-tooltip"),
+        position: "bottom",
+        align: "center",
+        disable: !m.value
+      }
+    ]), i = async () => {
+      try {
+        const o = await s();
+        t.ampHtml = o.ampHtml ?? null, t.ampErrors = o.ampErrors ?? null, t.emailFormat = o.ampHtml ? "amp" : "html";
+      } catch {
+        l({
+          type: "error",
+          message: "Failed to load AMP data. Please try again later."
+        });
+      }
+    };
+    E([() => t.editorVisualMode, () => t.isPreviewModeOpen], () => {
+      t.isPreviewModeOpen && i();
+    }, { immediate: !0 });
+    const c = (o) => {
+      t.emailFormat = o;
+    }, u = () => {
+      r.value = !0;
+    }, d = a(() => t.emailFormat === "amp" && n.value);
+    function f() {
+      r.value = !1;
+    }
+    return { __sfc: !0, editorStore: t, getPreviewData: s, showToaster: l, trans: e, showErrorModal: r, hasAMP: m, hasAMPErrors: n, segmentList: p, updateAmpData: i, handleFormatChange: c, handleErrorClick: u, showErrorButton: d, closeErrorModal: f, AmpErrorModal: A, InSegments: y, InButtonV2: P };
+  }
+});
+export {
+  D as default
+};

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

@@ -1,11 +1,11 @@
-import r from "./LeftSlot.vue2.js";
+import n from "./LeftSlot.vue2.js";
 import o from "../../../_virtual/_plugin-vue2_normalizer.js";
-var n = function() {
-  var t = this, e = t._self._c, s = t._self._setupProxy;
-  return e("div", { staticClass: "d-f a-i-c" }, [e(s.InButtonV2, { staticClass: "p-2", attrs: { id: "guido__back-button", "label-text": "Back", "left-icon": "line-arrow-left", styling: "text", type: "secondary" } }), s.editorStore.isVersionHistoryOpen ? e(s.RestoreButton, { staticClass: "ml-3" }) : t._e()], 1);
+var r = function() {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s("div", { staticClass: "d-f a-i-c" }, [s(t.InButtonV2, { staticClass: "p-2", attrs: { id: "guido__back-button", "label-text": "Back", "left-icon": "line-arrow-left", styling: "text", type: "secondary" }, on: { click: t.handleBack } }), t.editorStore.isVersionHistoryOpen ? s(t.RestoreButton, { staticClass: "ml-3" }) : e._e()], 1);
 }, a = [], i = /* @__PURE__ */ o(
-  r,
   n,
+  r,
   a,
   !1,
   null,

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

@@ -1,13 +1,15 @@
-import { defineComponent as t } from "vue";
-import { useEditorStore as o } from "../../../stores/editor.js";
-import { InButtonV2 as r } from "@useinsider/design-system-vue";
-import e from "./version-history/RestoreButton.vue.js";
-const _ = /* @__PURE__ */ t({
+import { defineComponent as r } from "vue";
+import { useBack as e } from "../../../composables/useGuidoActions.js";
+import { useEditorStore as m } from "../../../stores/editor.js";
+import { InButtonV2 as n } from "@useinsider/design-system-vue";
+import s from "./version-history/RestoreButton.vue.js";
+const c = /* @__PURE__ */ r({
   __name: "LeftSlot",
-  setup(m) {
-    return { __sfc: !0, editorStore: o(), InButtonV2: r, RestoreButton: e };
+  setup(f) {
+    const o = m(), t = e();
+    return { __sfc: !0, editorStore: o, handleBack: t, InButtonV2: n, RestoreButton: s };
   }
 });
 export {
-  _ as default
+  c as default
 };

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

@@ -1,10 +1,10 @@
-import i from "./MiddleSlot.vue2.js";
-import s from "../../../_virtual/_plugin-vue2_normalizer.js";
+import s from "./MiddleSlot.vue2.js";
+import i from "../../../_virtual/_plugin-vue2_normalizer.js";
 var n = function() {
-  var e = this, o = e._self._c, t = e._self._setupProxy;
-  return t.editorStore.isVersionHistoryOpen ? o("div", { staticClass: "d-f" }, [o(t.VersionHistory), o(t.VersionHistoryViewOptions)], 1) : o("div", { staticClass: "d-f" }, [o(t.InButtonV2, { attrs: { id: "guido__undo-button", "left-icon": "line-undo", styling: "ghost", type: "secondary", "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__undo-button"), "tooltip-text": t.trans("action-builder.undo") } }), o(t.InButtonV2, { attrs: { id: "guido__redo-button", "left-icon": "line-redo", styling: "ghost", type: "secondary", "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__redo-button"), "tooltip-text": t.trans("action-builder.redo") } }), o(t.InButtonV2, { attrs: { id: "guido__code-button", "data-testid": "Code Editor", "left-icon": "line-code", styling: "ghost", type: "secondary", "label-text-status": !1, "selected-status": t.editorStore.isCodeEditorOpen, "tooltip-options": t.getTooltipOptions("guido__code-button"), "tooltip-text": t.codeEditorTooltipText } }), o(t.InButtonV2, { attrs: { id: "guido__preview-button", "left-icon": "line-show-on", styling: "ghost", type: "secondary", "label-text-status": !1, "selected-status": t.editorStore.isPreviewModeOpen, "tooltip-options": t.getTooltipOptions("guido__preview-button"), "tooltip-text": t.previewTooltipText }, on: { click: t.handlePreview } }), o(t.ViewOptions, { staticClass: "ml-3" })], 1);
-}, l = [], r = /* @__PURE__ */ s(
-  i,
+  var o = this, e = o._self._c, t = o._self._setupProxy;
+  return t.editorStore.isVersionHistoryOpen ? e("div", { staticClass: "d-f" }, [e(t.VersionHistory), e(t.VersionHistoryViewOptions)], 1) : e("div", { staticClass: "d-f" }, [e(t.InButtonV2, { attrs: { id: "guido__undo-button", "left-icon": "line-undo", styling: "ghost", type: "secondary", "disabled-status": t.isPreviewModeOpen, "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__redo-button", "left-icon": "line-redo", styling: "ghost", type: "secondary", "disabled-status": t.isPreviewModeOpen, "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__code-button", "data-testid": "Code Editor", "left-icon": "line-code", styling: "ghost", "tooltip-text": "Code Editor", type: "secondary", "disabled-status": t.isPreviewModeOpen, "label-text-status": !1, "selected-status": t.editorStore.isCodeEditorOpen, "tooltip-options": t.getTooltipOptions("guido__code-button") } }), e(t.InButtonV2, { attrs: { id: "guido__preview-button", "left-icon": "line-show-on", styling: "ghost", type: "secondary", "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__preview-button"), "tooltip-text": t.isPreviewModeOpen ? t.trans("newsletter.close-email-preview") : t.trans("newsletter.email-preview") }, on: { click: t.handlePreviewClick } }), e(t.ViewOptions, { staticClass: "ml-3" }), e(t.AmpToggle)], 1);
+}, l = [], r = /* @__PURE__ */ i(
+  s,
   n,
   l,
   !1,

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

@@ -1,20 +1,25 @@
-import { defineComponent as s, computed as t } from "vue";
-import { InButtonV2 as n } from "@useinsider/design-system-vue";
+import { defineComponent as s, computed as n } from "vue";
 import { useTranslations as p } from "../../../composables/useTranslations.js";
 import { useEditorStore as m } from "../../../stores/editor.js";
-import { getTooltipOptions as l } from "../../../utils/tooltipUtils.js";
-import d from "./version-history/VersionHistory.vue.js";
-import w from "./version-history/ViewOptions.vue.js";
-import c from "./ViewOptions.vue.js";
-const M = /* @__PURE__ */ s({
+import { InButtonV2 as c } from "@useinsider/design-system-vue";
+import d from "./AmpToggle.vue.js";
+import f from "./version-history/VersionHistory.vue.js";
+import a from "./version-history/ViewOptions.vue.js";
+import l from "./ViewOptions.vue.js";
+const T = /* @__PURE__ */ s({
   __name: "MiddleSlot",
-  setup(f) {
-    const e = m(), o = p(), r = t(() => e.isCodeEditorOpen ? o("newsletter.close-html-editor") : o("newsletter.html-editor")), i = t(() => e.isPreviewModeOpen ? o("newsletter.close-email-preview") : o("newsletter.email-preview"));
-    return { __sfc: !0, editorStore: e, trans: o, codeEditorTooltipText: r, previewTooltipText: i, handlePreview: () => {
-      e.isPreviewModeOpen = !e.isPreviewModeOpen;
-    }, InButtonV2: n, getTooltipOptions: l, VersionHistory: d, VersionHistoryViewOptions: w, ViewOptions: c };
+  setup(u) {
+    const o = m(), t = p(), e = () => {
+      o.isPreviewModeOpen = !o.isPreviewModeOpen;
+    }, i = n(() => o.isPreviewModeOpen);
+    return { __sfc: !0, editorStore: o, trans: t, handlePreviewClick: e, isPreviewModeOpen: i, getTooltipOptions: (r) => ({
+      id: `${r}-tooltip`,
+      dynamicPosition: !1,
+      staticPosition: "bottom center",
+      iconStatus: !1
+    }), InButtonV2: c, AmpToggle: d, VersionHistory: f, VersionHistoryViewOptions: a, ViewOptions: l };
   }
 });
 export {
-  M as default
+  T as default
 };

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

@@ -1,17 +1,17 @@
-import s from "./RightSlot.vue2.js";
+import o from "./RightSlot.vue2.js";
 import i from "../../../_virtual/_plugin-vue2_normalizer.js";
 var n = function() {
-  var e = this, o = e._self._c, t = e._self._setupProxy;
-  return o("div", { staticClass: "d-f" }, [o(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen, "tooltip-options": t.getTooltipOptions("guido__history-button"), "tooltip-text": t.versionHistoryTooltipText }, on: { click: t.handleVersionHistory } }), o(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__export-button"), "tooltip-text": t.trans("newsletter.export") }, on: { click: t.exportHtml } }), o(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__save-as-button"), "tooltip-text": t.trans("newsletter.save-templates") } }), o(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__test-button"), "tooltip-text": t.trans("newsletter.test-email") } }), o(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": t.editorStore.isVersionHistoryOpen } })], 1);
-}, r = [], l = /* @__PURE__ */ i(
-  s,
+  var s = this, e = s._self._c, t = s._self._setupProxy;
+  return e("div", { staticClass: "d-f" }, [e(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isPreviewModeOpen, "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen }, on: { click: t.handleVersionHistory } }), e(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 }, on: { click: t.exportHtml } }), e(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 } }), e(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": t.editorStore.isVersionHistoryOpen || t.editorStore.isPreviewModeOpen }, on: { click: t.handleSave } })], 1);
+}, r = [], a = /* @__PURE__ */ i(
+  o,
   n,
   r,
   !1,
   null,
   null
 );
-const d = l.exports;
+const c = a.exports;
 export {
-  d as default
+  c as default
 };

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

@@ -1,23 +1,35 @@
-import { defineComponent as p, computed as m } from "vue";
-import { InButtonV2 as c } from "@useinsider/design-system-vue";
-import { useExport as f } from "../../../composables/useExport.js";
-import { useTranslations as l } from "../../../composables/useTranslations.js";
+import { defineComponent as m } from "vue";
+import { useActionsApi as p } from "../../../composables/useActionsApi.js";
+import { useExport as c } from "../../../composables/useExport.js";
+import { useSaveStart as l, useSaveComplete as f } from "../../../composables/useGuidoActions.js";
 import { useVersionHistoryApi as u } from "../../../composables/useVersionHistoryApi.js";
-import { useEditorStore as y } from "../../../stores/editor.js";
-import { getTooltipOptions as a } from "../../../utils/tooltipUtils.js";
-const O = /* @__PURE__ */ p({
+import { useEditorStore as d } from "../../../stores/editor.js";
+import { InButtonV2 as S } from "@useinsider/design-system-vue";
+const E = /* @__PURE__ */ m({
   __name: "RightSlot",
-  setup(H) {
-    const { exportHtml: e } = f(), { openVersionHistory: r, closeVersionHistory: s } = u(), o = y(), t = l(), i = () => {
-      if (o.isVersionHistoryOpen) {
-        s();
+  setup(h) {
+    const { exportHtml: a } = c(), { getCompiledEmail: t } = p(), e = l(), r = f(), { openVersionHistory: s, closeVersionHistory: n } = u(), i = d();
+    return { __sfc: !0, exportHtml: a, getCompiledEmail: t, saveStart: e, saveComplete: r, openVersionHistory: s, closeVersionHistory: n, editorStore: i, handleVersionHistory: () => {
+      if (i.isVersionHistoryOpen) {
+        n();
         return;
       }
-      r();
-    }, n = m(() => o.isVersionHistoryOpen ? t("newsletter.close-version-history") : t("newsletter.version-history"));
-    return { __sfc: !0, exportHtml: e, openVersionHistory: r, closeVersionHistory: s, editorStore: o, trans: t, handleVersionHistory: i, versionHistoryTooltipText: n, InButtonV2: c, getTooltipOptions: a };
+      s();
+    }, handleSave: async () => {
+      e();
+      try {
+        const { html: o } = await t();
+        r({
+          html: o || "",
+          css: ""
+          // CSS is embedded in HTML from Stripo
+        });
+      } catch (o) {
+        console.error("Failed to get template data for save:", o);
+      }
+    }, InButtonV2: S };
   }
 });
 export {
-  O as default
+  E as default
 };

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

@@ -1,16 +1,16 @@
 import r from "./ViewOptions.vue2.js";
 /* empty css                 */
-import s from "../../../_virtual/_plugin-vue2_normalizer.js";
-var n = function() {
+import i from "../../../_virtual/_plugin-vue2_normalizer.js";
+var s = function() {
   var t = this, o = t._self._c, e = t._self._setupProxy;
-  return o(e.InSegments, { attrs: { id: "guido__view-option-selection", "with-icon": "", "segment-list": e.segmentList, selected: e.editorStore.editorVisualMode } });
-}, i = [], _ = /* @__PURE__ */ s(
+  return o(e.InSegments, { attrs: { id: "guido__view-option-selection", "with-icon": "", disable: e.editorStore.isPreviewModeOpen, "segment-list": e.segmentList, selected: e.editorStore.editorVisualMode } });
+}, n = [], _ = /* @__PURE__ */ i(
   r,
+  s,
   n,
-  i,
   !1,
   null,
-  "0fff376c"
+  "f90d31ea"
 );
 const l = _.exports;
 export {

package/dist/composables/useActionsApi.d.ts

@@ -1,5 +1,7 @@
+import type { CompileEmailOptions } from '@@/Types/stripo';
 import { GetCompiledEmailOptions, CompiledEmailResult } from '@@/Types/actions-api';
 export declare const useActionsApi: () => {
     getCompiledEmail: (options?: GetCompiledEmailOptions) => Promise<CompiledEmailResult>;
     activateCustomViewStyles: (isActive?: boolean) => void;
+    getPreviewData: (options?: CompileEmailOptions) => Promise<CompiledEmailResult>;
 };

package/dist/composables/useActionsApi.js

@@ -1,38 +1,49 @@
-const g = () => ({ getCompiledEmail: (t = {}) => new Promise((i, a) => {
-  const s = { ...{
-    minimize: !0,
-    utmEntity: {
-      utmSource: "",
-      utmMedium: "",
-      utmCampaign: "",
-      utmContent: "",
-      utmTerm: "",
-      customUtms: [
-        {
-          name1: "val1",
-          name2: "val2"
-        }
-      ]
-    },
-    mergeTags: ["Tag1", "Tag2"],
-    forseAmp: !1,
-    resetDataSavedFlag: !1,
-    disableLineHeightsReplace: !0
-  }, ...t }, o = {
-    callback: (e, m, l, n, c) => {
-      e ? a(e) : i({
-        html: m,
-        ampHtml: l,
-        ampErrors: n,
-        displayConditions: c
-      });
-    },
-    ...s
-  };
-  window.StripoEditorApi.actionsApi.compileEmail(o);
-}), activateCustomViewStyles: (t = !0) => {
-  window.StripoEditorApi.actionsApi.activateCustomViewStyles(t);
-} });
+const w = () => {
+  const a = (e = {}) => new Promise((t, s) => {
+    const m = { ...{
+      minimize: !0,
+      utmEntity: {
+        utmSource: "",
+        utmMedium: "",
+        utmCampaign: "",
+        utmContent: "",
+        utmTerm: "",
+        customUtms: [
+          {
+            name1: "val1",
+            name2: "val2"
+          }
+        ]
+      },
+      mergeTags: ["Tag1", "Tag2"],
+      forseAmp: !1,
+      resetDataSavedFlag: !1,
+      disableLineHeightsReplace: !0
+    }, ...e }, o = {
+      callback: (i, n, l, r, c) => {
+        i ? s(i) : t({
+          html: n,
+          ampHtml: l,
+          ampErrors: r,
+          displayConditions: c
+        });
+      },
+      ...m
+    };
+    window.StripoEditorApi.actionsApi.compileEmail(o);
+  });
+  return { getCompiledEmail: a, activateCustomViewStyles: (e = !0) => {
+    window.StripoEditorApi.actionsApi.activateCustomViewStyles(e);
+  }, getPreviewData: async (e) => {
+    const t = await a({ minimize: !1, resetDataSavedFlag: !1, ...e });
+    return {
+      html: t.html,
+      ampHtml: t.ampHtml ?? "",
+      ampErrors: t.ampErrors ?? null,
+      displayConditions: t.displayConditions
+    };
+  } };
+};
 export {
-  g as useActionsApi
+  w as useActionsApi
 };

package/dist/composables/useDebounce.d.ts

@@ -0,0 +1,4 @@
+export declare const useDebounce: () => {
+    debounce: (fn: () => void, ms?: number) => void;
+    clearDebounce: () => void;
+};

package/dist/composables/useDebounce.js

@@ -0,0 +1,12 @@
+import { ref as c } from "vue";
+const r = () => {
+  const e = c(void 0);
+  return { debounce: (o, u = 150) => {
+    e.value && window.clearTimeout(e.value), e.value = window.setTimeout(o, u);
+  }, clearDebounce: () => {
+    e.value && (window.clearTimeout(e.value), e.value = void 0);
+  } };
+};
+export {
+  r as useDebounce
+};

package/dist/composables/useGuidoActions.d.ts

@@ -0,0 +1,46 @@
+import type { Template } from '@@/Types/stripo';
+import type { InjectionKey } from 'vue';
+export type BackHandler = () => void;
+export type SaveStartHandler = () => void;
+export type SaveCompleteHandler = (template: Omit<Template, 'forceRecreate'>) => void;
+export declare const BACK_KEY: InjectionKey<BackHandler>;
+export declare const SAVE_START_KEY: InjectionKey<SaveStartHandler>;
+export declare const SAVE_COMPLETE_KEY: InjectionKey<SaveCompleteHandler>;
+/**
+ * Provides Guido action handlers to child components
+ */
+export declare const provideGuidoActions: (actions: {
+    onBack: BackHandler;
+    onSaveStart: SaveStartHandler;
+    onSaveComplete: SaveCompleteHandler;
+}) => void;
+/**
+ * Provides individual Guido action handlers
+ */
+export declare const provideBackHandler: (handler: BackHandler) => void;
+export declare const provideSaveStartHandler: (handler: SaveStartHandler) => void;
+export declare const provideSaveCompleteHandler: (handler: SaveCompleteHandler) => void;
+/**
+ * Hook to use the back navigation handler
+ * @returns Back navigation function
+ */
+export declare const useBack: () => BackHandler;
+/**
+ * Hook to use the save start handler
+ * @returns Save start function
+ */
+export declare const useSaveStart: () => SaveStartHandler;
+/**
+ * Hook to use the save complete handler
+ * @returns Save complete function
+ */
+export declare const useSaveComplete: () => SaveCompleteHandler;
+/**
+ * Convenience hook to get all Guido actions
+ * @returns Object containing all action handlers
+ */
+export declare const useGuidoActions: () => {
+    back: BackHandler;
+    saveStart: SaveStartHandler;
+    saveComplete: SaveCompleteHandler;
+};