@useinsider/guido 3.2.1-beta.d58ee72 → 3.3.0-beta.1d2853a

package/dist/components/Guido.vue2.js

@@ -1,131 +1,135 @@
-import { defineComponent as j, defineAsyncComponent as R, ref as A, computed as I, watch as J, onMounted as Q, onUnmounted as X } from "vue";
-import { provideGuidoActions as Y } from "../composables/useGuidoActions.js";
-import { usePartner as Z } from "../composables/usePartner.js";
-import { useStripo as ee } from "../composables/useStripo.js";
-import { useTimerClone as te } from "../composables/useTimerClone.js";
-import { migrate as W } from "../config/migrator/index.js";
-import { ModuleFolderDefaults as B } from "../enums/defaults.js";
-import { RIBBON_SELECTOR as oe } from "../enums/onboarding.js";
-import ne from "./organisms/base/Toaster.vue.js";
-import se from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
-import re from "./organisms/header/HeaderWrapper.vue.js";
-import ce from "./organisms/LoadingWrapper.vue.js";
-import ae from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
-import ie from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
-import { useStripoApi as me } from "../services/stripoApi.js";
-import { useConfigStore as de } from "../stores/config.js";
-import { useDynamicContentStore as le } from "../stores/dynamic-content.js";
-import { useEditorStore as ue } from "../stores/editor.js";
-import { usePreviewStore as pe } from "../stores/preview.js";
-import { useUnsubscribeStore as fe } from "../stores/unsubscribe.js";
-const Re = /* @__PURE__ */ j({
+import { defineComponent as J, defineAsyncComponent as R, ref as I, computed as W, watch as Q, onMounted as X, onUnmounted as Y } from "vue";
+import { useCortexBlueprintBridge as Z } from "../composables/useCortexBlueprintBridge.js";
+import { provideGuidoActions as ee } from "../composables/useGuidoActions.js";
+import { useGuidoStateBridge as oe } from "../composables/useGuidoStateBridge.js";
+import { usePartner as te } from "../composables/usePartner.js";
+import { useStripo as ne } from "../composables/useStripo.js";
+import { useTimerClone as re } from "../composables/useTimerClone.js";
+import { migrate as x } from "../config/migrator/index.js";
+import { ModuleFolderDefaults as G } from "../enums/defaults.js";
+import { RIBBON_SELECTOR as se } from "../enums/onboarding.js";
+import ce from "./organisms/AutoSaveController.vue.js";
+import ae from "./organisms/base/Toaster.vue.js";
+import ie from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
+import me from "./organisms/header/HeaderWrapper.vue.js";
+import de from "./organisms/LoadingWrapper.vue.js";
+import le from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
+import ue from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
+import { useStripoApi as pe } from "../services/stripoApi.js";
+import { useConfigStore as fe } from "../stores/config.js";
+import { useDynamicContentStore as ve } from "../stores/dynamic-content.js";
+import { useEditorStore as ye } from "../stores/editor.js";
+import { usePreviewStore as he } from "../stores/preview.js";
+import { useUnsubscribeStore as Se } from "../stores/unsubscribe.js";
+const He = /* @__PURE__ */ J({
   __name: "Guido",
   props: {
     config: null
   },
   emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready", "onboarding:finished", "test-email:click"],
-  setup(H, { expose: x, emit: s }) {
-    const b = H, G = R(
+  setup(H, { expose: z, emit: n }) {
+    const g = H, q = R(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
-    ), z = R(
+    ), K = R(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), S = A(), d = A(), l = le(), g = fe(), a = de();
-    a.init(b.config);
-    const u = ue(), q = pe(), i = I(() => u.hasChanges), { isTestPartner: K } = Z(), w = () => {
+    ), w = I(), u = I(), p = ve(), E = Se(), i = fe();
+    i.init(g.config);
+    const f = ye(), V = he(), m = W(() => f.hasChanges), { isTestPartner: $ } = te(), D = () => {
       var e;
-      return (e = S.value) == null ? void 0 : e.handleSave(!0);
+      return (e = w.value) == null ? void 0 : e.handleSave(!0);
     }, {
-      templateId: p,
-      userId: E,
-      partnerName: D,
-      username: C,
-      template: t,
-      editor: r
-    } = a, m = (t == null ? void 0 : t.html) || "", T = (t == null ? void 0 : t.css) || "", f = (t == null ? void 0 : t.preselectedDynamicContent) || [], k = (r == null ? void 0 : r.savedModulesFolderName) || B.SAVED_MODULES, F = (r == null ? void 0 : r.defaultModulesFolderName) || B.DEFAULT_MODULES;
-    u.templateId = p;
-    const v = {
-      emailId: p,
-      userId: E,
-      username: C,
-      partnerName: D,
-      savedModulesFolderName: k,
-      defaultModulesFolderName: F
-    }, L = {
-      preselectedDynamicContentList: f,
+      templateId: v,
+      userId: C,
+      partnerName: T,
+      username: k,
+      template: o,
+      editor: s
+    } = i, d = (o == null ? void 0 : o.html) || "", F = (o == null ? void 0 : o.css) || "", y = (o == null ? void 0 : o.preselectedDynamicContent) || [], L = (s == null ? void 0 : s.savedModulesFolderName) || G.SAVED_MODULES, U = (s == null ? void 0 : s.defaultModulesFolderName) || G.DEFAULT_MODULES;
+    f.templateId = v, Z(), oe();
+    const h = {
+      emailId: v,
+      userId: C,
+      username: k,
+      partnerName: T,
+      savedModulesFolderName: L,
+      defaultModulesFolderName: U
+    }, _ = {
+      preselectedDynamicContentList: y,
       onReady: () => {
-        console.debug("guido:ready"), s("ready");
+        console.debug("guido:ready"), n("ready");
       }
-    }, { initPlugin: U } = ee(v, L), { getDefaultTemplate: _ } = me(), { cloneTimersOnSave: M, hasTimerBlocks: O } = te(), V = I(() => {
+    }, { initPlugin: M } = ne(h, _), { getDefaultTemplate: O } = pe(), { cloneTimersOnSave: P, hasTimerBlocks: A } = re(), j = W(() => {
       var e;
-      return !((e = a.ui) != null && e.showHeader);
+      return !((e = i.ui) != null && e.showHeader);
     });
-    Y({
+    ee({
       onBack: () => {
-        console.debug("guido:back"), s("back");
+        console.debug("guido:back"), n("back");
       },
       onSaveStart: () => {
-        console.debug("guido:save:start"), s("save:start");
+        console.debug("guido:save:start"), n("save:start");
       },
       onSaveComplete: (e) => {
-        const n = { ...e, metadata: v };
-        console.debug("guido:save:complete", n), s("save:complete", n);
+        const t = { ...e, metadata: h };
+        console.debug("guido:save:complete", t), n("save:complete", t);
       },
       onTestEmailClick: () => {
-        console.debug("guido:test-email:click"), s("test-email:click");
+        console.debug("guido:test-email:click"), n("test-email:click");
       }
     });
-    const P = (e) => {
-      console.debug("dynamic-content:close", e), l.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
+    const B = (e) => {
+      console.debug("dynamic-content:close", e), p.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
     }, N = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
-    J(() => i.value, () => {
-      s("on-change", i.value);
+    Q(() => m.value, () => {
+      n("on-change", m.value);
     });
-    const y = (e) => {
-      const n = e, { attribute: o, position: $ } = n.detail;
-      console.debug("dynamic-content:open", n.detail), s("dynamic-content:open", o, $);
+    const S = (e) => {
+      const t = e, { attribute: l, position: a } = t.detail;
+      console.debug("dynamic-content:open", t.detail), n("dynamic-content:open", l, a);
     };
     let c = null;
-    const h = () => {
-      var n;
-      const e = document.querySelector(oe);
-      (n = d.value) == null || n.style.setProperty("--ribbon-offset", `${(e == null ? void 0 : e.offsetHeight) ?? 0}px`);
+    const b = () => {
+      var t;
+      const e = document.querySelector(se);
+      (t = u.value) == null || t.style.setProperty("--ribbon-offset", `${(e == null ? void 0 : e.offsetHeight) ?? 0}px`);
     };
-    return Q(async () => {
-      var n;
-      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow"), h();
-      const e = (n = d.value) == null ? void 0 : n.parentElement;
-      e && (c = new ResizeObserver(h), c.observe(e));
+    return X(async () => {
+      var t, l;
+      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow"), b();
+      const e = (t = u.value) == null ? void 0 : t.parentElement;
+      e && (c = new ResizeObserver(b), c.observe(e));
       try {
-        g.selectedUnsubscribePages = (t == null ? void 0 : t.selectedUnsubscribePages) || [];
-        let o = {
-          html: m && await W(m),
-          css: T
+        E.selectedUnsubscribePages = (o == null ? void 0 : o.selectedUnsubscribePages) || [];
+        const a = ((l = o == null ? void 0 : o.migration) == null ? void 0 : l.recommendationConfigs) ?? {};
+        let r = {
+          html: d && await x(d, a),
+          css: F
         };
-        o.html || (o = await _(), o.html = await W(o.html)), O(o.html) && (o.html = await M(o.html)), await U(o), l.selectedDynamicContentList = f;
-      } catch (o) {
-        console.error("Failed to initialize Stripo editor:", o);
+        r.html || (r = await O(), r.html = await x(r.html, a)), A(r.html) && (r.html = await P(r.html)), await M(r), p.selectedDynamicContentList = y;
+      } catch (a) {
+        console.error("Failed to initialize Stripo editor:", a);
       }
-      document.addEventListener("dynamic-content:open", y);
-    }), X(() => {
-      c == null || c.disconnect(), document.removeEventListener("dynamic-content:open", y);
+      document.addEventListener("dynamic-content:open", S);
+    }), Y(() => {
+      c == null || c.disconnect(), document.removeEventListener("dynamic-content:open", S);
       try {
         window.UIEditor.removeEditor();
       } catch {
         console.debug("Failed to remove Stripo editor: No editor found");
       }
-      a.reset();
-    }), x({
+      i.reset();
+    }), z({
       dynamicContent: {
-        insert: P,
+        insert: B,
         close: N
       },
-      hasChanges: i,
-      saveSilent: w
-    }), { __sfc: !0, PreviewContainer: G, OnboardingWrapper: z, headerWrapperRef: S, wrapperRef: d, dynamicContentStore: l, unsubscribeStore: g, props: b, configStore: a, editorStore: u, previewStore: q, hasChanges: i, isTestPartner: K, saveSilent: w, templateId: p, userId: E, partnerName: D, username: C, templateConfig: t, editorConfig: r, html: m, css: T, preselectedDynamicContentList: f, savedModulesFolderName: k, defaultModulesFolderName: F, emit: s, metadata: v, options: L, initPlugin: U, getDefaultTemplate: _, cloneTimersOnSave: M, hasTimerBlocks: O, noHeader: V, insertDynamicContent: P, closeDynamicContent: N, handleDynamicContentOpen: y, ribbonObserver: c, updateRibbonOffset: h, Toaster: ne, FilterSelectionDrawer: se, HeaderWrapper: re, LoadingWrapper: ce, SaveAsTemplateDrawer: ae, UnsubscribeWrapper: ie };
+      hasChanges: m,
+      saveSilent: D
+    }), { __sfc: !0, PreviewContainer: q, OnboardingWrapper: K, headerWrapperRef: w, wrapperRef: u, dynamicContentStore: p, unsubscribeStore: E, props: g, configStore: i, editorStore: f, previewStore: V, hasChanges: m, isTestPartner: $, saveSilent: D, templateId: v, userId: C, partnerName: T, username: k, templateConfig: o, editorConfig: s, html: d, css: F, preselectedDynamicContentList: y, savedModulesFolderName: L, defaultModulesFolderName: U, emit: n, metadata: h, options: _, initPlugin: M, getDefaultTemplate: O, cloneTimersOnSave: P, hasTimerBlocks: A, noHeader: j, insertDynamicContent: B, closeDynamicContent: N, handleDynamicContentOpen: S, ribbonObserver: c, updateRibbonOffset: b, AutoSaveController: ce, Toaster: ae, FilterSelectionDrawer: ie, HeaderWrapper: me, LoadingWrapper: de, SaveAsTemplateDrawer: le, UnsubscribeWrapper: ue };
   }
 });
 export {
-  Re as default
+  He as default
 };

package/dist/components/organisms/AutoSaveController.vue.js

@@ -0,0 +1,17 @@
+import n from "./AutoSaveController.vue2.js";
+import t from "../../_virtual/_plugin-vue2_normalizer.js";
+var o = function() {
+  var r = this, e = r._self._c;
+  return r._self._setupProxy, e("div", { staticClass: "d-n" });
+}, s = [], _ = /* @__PURE__ */ t(
+  n,
+  o,
+  s,
+  !1,
+  null,
+  null
+);
+const f = _.exports;
+export {
+  f as default
+};

package/dist/components/organisms/AutoSaveController.vue2.js

@@ -0,0 +1,13 @@
+import { defineComponent as t } from "vue";
+import { useAutoSave as r } from "../../composables/useAutoSave.js";
+import { useSave as s } from "../../composables/useSave.js";
+const f = /* @__PURE__ */ t({
+  __name: "AutoSaveController",
+  setup(a) {
+    const { save: e } = s(), o = () => e(!1, !0);
+    return r(o), { __sfc: !0, save: e, backgroundSave: o };
+  }
+});
+export {
+  f as default
+};

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

@@ -0,0 +1,18 @@
+import l from "./AiStatusPill.vue2.js";
+/* empty css                  */
+import e from "../../../_virtual/_plugin-vue2_normalizer.js";
+var i = function() {
+  var s = this, t = s._self._c, a = s._self._setupProxy;
+  return a.showStatusPill ? t("div", { staticClass: "ai-status-pill", attrs: { "aria-live": "polite", role: "status" } }, [t("span", { staticClass: "ai-status-pill__dot" }), t("span", { staticClass: "ai-status-pill__label" }, [s._v(s._s(a.statusLabel))])]) : s._e();
+}, _ = [], r = /* @__PURE__ */ e(
+  l,
+  i,
+  _,
+  !1,
+  null,
+  "dea97ab5"
+);
+const c = r.exports;
+export {
+  c as default
+};

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

@@ -0,0 +1,13 @@
+import { defineComponent as e } from "vue";
+import { useAiStatusStore as r } from "../../../stores/ai-status.js";
+import { storeToRefs as a } from "pinia";
+const f = /* @__PURE__ */ e({
+  __name: "AiStatusPill",
+  setup(i) {
+    const t = r(), { showStatusPill: s, statusLabel: o } = a(t);
+    return { __sfc: !0, aiStatus: t, showStatusPill: s, statusLabel: o };
+  }
+});
+export {
+  f as default
+};

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

@@ -0,0 +1,22 @@
+import o from "./AutoSaveToggle.vue2.js";
+/* empty css                    */
+import i from "../../../_virtual/_plugin-vue2_normalizer.js";
+var n = function() {
+  var e = this, a = e._self._c, t = e._self._setupProxy;
+  return t.isFeatureEnabled("autosave") ? a("div", { staticClass: "d-f a-i-c mr-3 auto-save-toggle", on: { mouseenter: function(s) {
+    t.isHovered = !0;
+  }, mouseleave: function(s) {
+    t.isHovered = !1;
+  } } }, [a(t.InToggle, { attrs: { id: "guido__autosave-toggle", name: "guido-autosave-toggle", checked: t.autosaveStore.isOn, disable: t.editorStore.loadingStatus }, on: { click: t.toggle } }), a("span", { staticClass: "ml-2 auto-save-toggle__label t-c-55" }, [e._v(" " + e._s(t.trans("email-editor.auto-save")) + " ")]), t.autosaveStore.status === t.AUTOSAVE_STATUS.SAVING ? a("span", { staticClass: "ml-2 d-f a-i-c f-s-1" }, [a(t.InLoading, { attrs: { "color-class": "i-c-53", size: "16" } }), a("span", { staticClass: "ml-1 t-c-53" }, [e._v(" " + e._s(t.trans("newsletter.saving")) + " ")])], 1) : t.lastSavedLabel ? a("span", { staticClass: "ml-2 f-s-1 t-c-53" }, [e._v(" " + e._s(t.lastSavedLabel) + " ")]) : e._e(), t.isHovered ? a(t.InInfoBox, { staticClass: "auto-save-toggle__info-box", attrs: { id: "guido__autosave-info-box", size: "small", variant: "information", "description-text": t.trans("email-editor.auto-save-description"), "title-text": t.trans("email-editor.auto-save-title") } }) : e._e()], 1) : e._e();
+}, l = [], r = /* @__PURE__ */ i(
+  o,
+  n,
+  l,
+  !1,
+  null,
+  "2c964af4"
+);
+const d = r.exports;
+export {
+  d as default
+};

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

@@ -0,0 +1,19 @@
+import { defineComponent as i, ref as f, computed as u } from "vue";
+import { useConfig as l } from "../../../composables/useConfig.js";
+import { useTranslations as p } from "../../../composables/useTranslations.js";
+import { useAutosaveStore as c, AUTOSAVE_STATUS as t } from "../../../stores/autosave.js";
+import { useEditorStore as S } from "../../../stores/editor.js";
+import { formatLocalTime as d } from "../../../utils/timeUtil.js";
+import { InToggle as g, InLoading as _, InInfoBox as A } from "@useinsider/design-system-vue";
+const U = /* @__PURE__ */ i({
+  __name: "AutoSaveToggle",
+  setup(v) {
+    const { isFeatureEnabled: e } = l(), r = S(), o = c(), s = p(), n = f(!1), a = u(() => o.status !== t.SAVED || !o.lastSavedAt ? "" : d(o.lastSavedAt));
+    return { __sfc: !0, isFeatureEnabled: e, editorStore: r, autosaveStore: o, trans: s, isHovered: n, lastSavedLabel: a, toggle: (m) => {
+      o.isOn = m;
+    }, AUTOSAVE_STATUS: t, InInfoBox: A, InLoading: _, InToggle: g };
+  }
+});
+export {
+  U as default
+};

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

@@ -1,17 +1,17 @@
-import i from "./MiddleSlot.vue2.js";
+import r from "./MiddleSlot.vue2.js";
 import s from "../../../_virtual/_plugin-vue2_normalizer.js";
 var t = function() {
-  var r = this, e = r._self._c, o = r._self._setupProxy;
-  return e("div", [o.editorStore.isVersionHistoryOpen ? e("div", { staticClass: "d-f" }, [e(o.VersionHistory), e(o.VersionHistoryViewOptions)], 1) : o.editorStore.isPreviewModeOpen ? e("div", { staticClass: "d-f" }, [e(o.EmailSizeIndicator), e(o.AmpToggle)], 1) : r._e(), e(o.EditorToolbar, { directives: [{ name: "show", rawName: "v-show", value: o.editorStore.isEditorToolbarVisible, expression: "editorStore.isEditorToolbarVisible" }] })], 1);
-}, n = [], a = /* @__PURE__ */ s(
-  i,
+  var o = this, e = o._self._c, i = o._self._setupProxy;
+  return e("div", { staticClass: "d-f a-i-c" }, [i.editorStore.isVersionHistoryOpen ? e("div", { staticClass: "d-f" }, [e(i.VersionHistory), e(i.VersionHistoryViewOptions)], 1) : i.editorStore.isPreviewModeOpen ? e("div", { staticClass: "d-f" }, [e(i.EmailSizeIndicator), e(i.AmpToggle)], 1) : o._e(), e(i.EditorToolbar, { directives: [{ name: "show", rawName: "v-show", value: i.editorStore.isEditorToolbarVisible, expression: "editorStore.isEditorToolbarVisible" }] }), e(i.AiStatusPill)], 1);
+}, a = [], n = /* @__PURE__ */ s(
+  r,
   t,
-  n,
+  a,
   !1,
   null,
   null
 );
-const c = a.exports;
+const c = n.exports;
 export {
   c as default
 };

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

@@ -2,15 +2,16 @@ import { defineComponent as o } from "vue";
 import r from "../email-preview/amp/AmpToggle.vue.js";
 import t from "../email-preview/desktop-preview/EmailSizeIndicator.vue.js";
 import { useEditorStore as i } from "../../../stores/editor.js";
-import e from "./EditorToolbar.vue.js";
-import m from "./version-history/VersionHistory.vue.js";
-import p from "./version-history/ViewOptions.vue.js";
-const S = /* @__PURE__ */ o({
+import e from "./AiStatusPill.vue.js";
+import m from "./EditorToolbar.vue.js";
+import p from "./version-history/VersionHistory.vue.js";
+import s from "./version-history/ViewOptions.vue.js";
+const V = /* @__PURE__ */ o({
   __name: "MiddleSlot",
-  setup(s) {
-    return { __sfc: !0, editorStore: i(), AmpToggle: r, EmailSizeIndicator: t, EditorToolbar: e, VersionHistory: m, VersionHistoryViewOptions: p };
+  setup(f) {
+    return { __sfc: !0, editorStore: i(), AmpToggle: r, EmailSizeIndicator: t, AiStatusPill: e, EditorToolbar: m, VersionHistory: p, VersionHistoryViewOptions: s };
   }
 });
 export {
-  S as default
+  V as default
 };

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

@@ -1,11 +1,11 @@
-import i from "./RightSlot.vue2.js";
-import r from "../../../_virtual/_plugin-vue2_normalizer.js";
-var o = function() {
-  var s = this, e = s._self._c, t = s._self._setupProxy;
-  return e("div", { staticClass: "d-f a-i-c" }, [t.isLiquidEnabled && !t.editorStore.isVersionHistoryOpen ? e(t.InChips, { staticClass: "mr-3", attrs: { id: "guido__liquid-tag-chip", styles: "stroke", type: "default", value: "liquid-tags", "close-button": !1, "disabled-status": t.editorStore.loadingStatus, interactive: !1, text: t.trans("email-editor.liquid-tags-enabled") } }) : s._e(), t.editorStore.isVersionHistoryOpen ? e(t.RestoreButton) : e(t.EditorActions, { ref: "editorActionsRef" })], 1);
-}, a = [], n = /* @__PURE__ */ r(
-  i,
-  o,
+import s from "./RightSlot.vue2.js";
+import o from "../../../_virtual/_plugin-vue2_normalizer.js";
+var r = function() {
+  var i = this, e = i._self._c, t = i._self._setupProxy;
+  return e("div", { staticClass: "d-f a-i-c" }, [t.editorStore.isVersionHistoryOpen ? i._e() : e(t.AutoSaveToggle), t.isLiquidEnabled && !t.editorStore.isVersionHistoryOpen ? e(t.InChips, { staticClass: "mr-1", attrs: { id: "guido__liquid-tag-chip", styles: "stroke", type: "default", value: "liquid-tags", "close-button": !1, "disabled-status": t.editorStore.loadingStatus, interactive: !1, text: t.trans("email-editor.liquid-tags-enabled") } }) : i._e(), t.editorStore.isVersionHistoryOpen ? e(t.RestoreButton) : e(t.EditorActions, { ref: "editorActionsRef" })], 1);
+}, a = [], n = /* @__PURE__ */ o(
+  s,
+  r,
   a,
   !1,
   null,

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

@@ -1,22 +1,23 @@
 import { defineComponent as a, ref as f, computed as p } from "vue";
 import { useConfig as u } from "../../../composables/useConfig.js";
 import { useTranslations as d } from "../../../composables/useTranslations.js";
-import { useEditorStore as c } from "../../../stores/editor.js";
-import { InChips as l } from "@useinsider/design-system-vue";
-import _ from "./EditorActions.vue.js";
-import S from "./version-history/RestoreButton.vue.js";
-const x = /* @__PURE__ */ a({
+import { useEditorStore as l } from "../../../stores/editor.js";
+import { InChips as c } from "@useinsider/design-system-vue";
+import _ from "./AutoSaveToggle.vue.js";
+import S from "./EditorActions.vue.js";
+import g from "./version-history/RestoreButton.vue.js";
+const T = /* @__PURE__ */ a({
   __name: "RightSlot",
   setup(h, { expose: r }) {
-    const { isFeatureEnabled: o } = u(), n = d(), i = c(), t = f(null), s = p(() => o("liquidSyntax"));
+    const { isFeatureEnabled: o } = u(), i = d(), n = l(), t = f(null), s = p(() => o("liquidSyntax"));
     return r({
       handleSave: (m) => {
         var e;
         return (e = t.value) == null ? void 0 : e.handleSave(m);
       }
-    }), { __sfc: !0, isFeatureEnabled: o, trans: n, editorStore: i, editorActionsRef: t, isLiquidEnabled: s, InChips: l, EditorActions: _, RestoreButton: S };
+    }), { __sfc: !0, isFeatureEnabled: o, trans: i, editorStore: n, editorActionsRef: t, isLiquidEnabled: s, InChips: c, AutoSaveToggle: _, EditorActions: S, RestoreButton: g };
   }
 });
 export {
-  x as default
+  T as default
 };

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

@@ -1,37 +1,57 @@
-import { defineComponent as p, computed as e, watch as m } from "vue";
-import { useTranslations as g } from "../../../composables/useTranslations.js";
-import { useOnboardingStore as u } from "../../../stores/onboarding.js";
-import { InOnboard as b } from "@useinsider/design-system-vue";
-const O = /* @__PURE__ */ p({
+import { defineComponent as u, computed as d, watch as b, nextTick as f } from "vue";
+import { useTranslations as C } from "../../../composables/useTranslations.js";
+import { HEADER_SELECTOR as O, AMP_TOGGLE_BUTTON_SELECTOR as _, AMP_TOGGLE_WRAPPER_SELECTOR as T, POPOVER_LEFT_OFFSET as g, POPOVER_TOP_GAP as E } from "../../../enums/onboarding.js";
+import { useOnboardingStore as x } from "../../../stores/onboarding.js";
+import { InOnboard as P } from "@useinsider/design-system-vue";
+const G = /* @__PURE__ */ u({
   __name: "AMPOnboarding",
-  setup(l) {
-    const i = g(), o = u(), r = e(() => `${window.innerWidth / 2 - 110}px`), a = e(() => [
-      {
-        classes: "guido-amp-onboarding",
-        left: r.value,
-        top: "70px",
-        position: "Top Center",
-        title: i("email-editor.onboarding-amp-title"),
-        description: i("email-editor.onboarding-amp-description"),
-        imageSource: "",
-        backButtonClick: () => {
-        },
-        nextButtonType: "text",
-        nextButtonText: i("action-builder.ok"),
-        nextButtonClick: () => void o.close("ampOnboarding")
-      }
-    ]), d = e(() => o.onboardings.ampOnboarding.config.length > 0 && o.onboardings.ampOnboarding.isActive), s = () => {
-      var n, t;
-      (t = (n = o.getAmpCurrentCard) == null ? void 0 : n.nextButtonClick) == null || t.call(n);
-    }, c = () => {
-      var n, t;
-      (t = (n = o.getAmpCurrentCard) == null ? void 0 : n.backButtonClick) == null || t.call(n);
+  setup(R) {
+    const e = C(), o = x(), r = () => {
+      const t = document.querySelector(O), n = document.querySelector(_), c = n == null ? void 0 : n.closest(T);
+      if (!c || !t)
+        return {
+          left: `${((t == null ? void 0 : t.offsetWidth) ?? window.innerWidth) / 2 - g}px`,
+          top: "68px"
+        };
+      const s = t.getBoundingClientRect(), i = c.getBoundingClientRect();
+      return {
+        left: `${i.left - s.left + i.width / 2 - g}px`,
+        top: `${i.bottom - s.top + E}px`
+      };
+    }, a = d(() => {
+      const { left: t, top: n } = r();
+      return [
+        {
+          classes: "guido-amp-onboarding",
+          left: t,
+          top: n,
+          position: "Top Center",
+          title: e("email-editor.onboarding-amp-title"),
+          description: e("email-editor.onboarding-amp-description"),
+          imageSource: "",
+          backButtonClick: () => {
+          },
+          nextButtonType: "text",
+          nextButtonText: e("action-builder.ok"),
+          nextButtonClick: () => void o.close("ampOnboarding")
+        }
+      ];
+    }), l = d(() => o.onboardings.ampOnboarding.config.length > 0 && o.onboardings.ampOnboarding.isActive), p = () => {
+      var t, n;
+      (n = (t = o.getAmpCurrentCard) == null ? void 0 : t.nextButtonClick) == null || n.call(t);
+    }, m = () => {
+      var t, n;
+      (n = (t = o.getAmpCurrentCard) == null ? void 0 : t.backButtonClick) == null || n.call(t);
     };
-    return m(() => o.onboardings.ampOnboarding.isActive, (n) => {
-      n && o.setConfig("ampOnboarding", a.value);
-    }, { immediate: !0 }), { __sfc: !0, trans: i, onboardingStore: o, centerLeft: r, onboardingCardsConfig: a, isVisible: d, handleNext: s, handleBack: c, InOnboard: b };
+    return b(
+      () => o.onboardings.ampOnboarding.isActive,
+      async (t) => {
+        t && (await f(), o.setConfig("ampOnboarding", a.value));
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, trans: e, onboardingStore: o, getTogglePosition: r, onboardingCardsConfig: a, isVisible: l, handleNext: p, handleBack: m, InOnboard: P };
   }
 });
 export {
-  O as default
+  G as default
 };

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

@@ -13,7 +13,7 @@ var l = function() {
   p,
   !1,
   null,
-  "29b9af29"
+  "7419ae06"
 );
 const S = _.exports;
 export {