@useinsider/guido 3.2.0 → 3.3.0

package/dist/components/Guido.vue2.js

@@ -1,131 +1,133 @@
-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 { defineComponent as J, defineAsyncComponent as I, ref as W, computed as B, watch as Q, onMounted as X, onUnmounted as Y } from "vue";
+import { provideGuidoActions as Z } from "../composables/useGuidoActions.js";
+import { usePartner as ee } from "../composables/usePartner.js";
+import { useStripo as oe } 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 { migrate as H } from "../config/migrator/index.js";
+import { ModuleFolderDefaults as x } from "../enums/defaults.js";
+import { RIBBON_SELECTOR as ne } from "../enums/onboarding.js";
+import re from "./organisms/AutoSaveController.vue.js";
+import se from "./organisms/base/Toaster.vue.js";
+import ce from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
+import ae from "./organisms/header/HeaderWrapper.vue.js";
+import ie from "./organisms/LoadingWrapper.vue.js";
+import me from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
+import de from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
+import { useStripoApi as le } from "../services/stripoApi.js";
+import { useConfigStore as ue } from "../stores/config.js";
+import { useDynamicContentStore as pe } from "../stores/dynamic-content.js";
+import { useEditorStore as fe } from "../stores/editor.js";
+import { usePreviewStore as ve } from "../stores/preview.js";
+import { useUnsubscribeStore as ye } from "../stores/unsubscribe.js";
+const We = /* @__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(G, { expose: z, emit: n }) {
+    const g = G, q = I(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
-    ), z = R(
+    ), K = I(
       () => 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 = W(), u = W(), p = pe(), E = ye(), i = ue();
+    i.init(g.config);
+    const f = fe(), V = ve(), m = B(() => f.hasChanges), { isTestPartner: $ } = ee(), 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) || x.SAVED_MODULES, U = (s == null ? void 0 : s.defaultModulesFolderName) || x.DEFAULT_MODULES;
+    f.templateId = v;
+    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 } = oe(h, _), { getDefaultTemplate: O } = le(), { cloneTimersOnSave: P, hasTimerBlocks: A } = te(), j = B(() => {
       var e;
-      return !((e = a.ui) != null && e.showHeader);
+      return !((e = i.ui) != null && e.showHeader);
     });
-    Y({
+    Z({
       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 }));
-    }, N = () => {
+    const N = (e) => {
+      console.debug("dynamic-content:close", e), p.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
+    }, R = () => {
       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(ne);
+      (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 H(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 H(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,
-        close: N
+        insert: N,
+        close: R
       },
-      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: N, closeDynamicContent: R, handleDynamicContentOpen: S, ribbonObserver: c, updateRibbonOffset: b, AutoSaveController: re, Toaster: se, FilterSelectionDrawer: ce, HeaderWrapper: ae, LoadingWrapper: ie, SaveAsTemplateDrawer: me, UnsubscribeWrapper: de };
   }
 });
 export {
-  Re as default
+  We 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/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/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 {

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

@@ -1,23 +1,24 @@
-import { defineComponent as l, computed as i, watch as b } from "vue";
-import { useTranslations as x } from "../../../composables/useTranslations.js";
-import { SERVICE_HOVER_SELECTORS as m } from "../../../enums/onboarding.js";
-import { useOnboardingStore as k } from "../../../stores/onboarding.js";
-import { InOnboard as f } from "@useinsider/design-system-vue";
-const S = /* @__PURE__ */ l({
+import { defineComponent as l, computed as r, watch as m } from "vue";
+import { useRibbonOffset as x } from "../../../composables/useRibbonOffset.js";
+import { useTranslations as f } from "../../../composables/useTranslations.js";
+import { SERVICE_HOVER_SELECTORS as k } from "../../../enums/onboarding.js";
+import { useOnboardingStore as B } from "../../../stores/onboarding.js";
+import { InOnboard as C } from "@useinsider/design-system-vue";
+const y = /* @__PURE__ */ l({
   __name: "GenericOnboarding",
-  setup(B) {
-    const e = x(), o = k(), r = i(() => `${window.innerWidth / 2 - 160}px`), c = () => {
+  setup(T) {
+    const e = f(), o = B(), { getTopPosition: i } = x(), s = r(() => `${window.innerWidth / 2 - 146}px`), c = () => {
       const t = document.querySelector("ui-editor");
-      t != null && t.shadowRoot && m.forEach((n) => {
-        var d;
-        const a = (d = t.shadowRoot) == null ? void 0 : d.querySelector(n);
-        a && a.classList.add("hover");
+      t != null && t.shadowRoot && k.forEach((n) => {
+        var g;
+        const d = (g = t.shadowRoot) == null ? void 0 : g.querySelector(n);
+        d && d.classList.add("hover");
       });
-    }, s = i(() => [
+    }, a = r(() => [
       {
         classes: "guido-onboarding-blocks",
         left: "90px",
-        top: "90px",
+        top: i(90),
         position: "Left Top",
         title: e("email-editor.onboarding-blocks-title"),
         description: e("email-editor.onboarding-blocks-description"),
@@ -51,8 +52,8 @@ const S = /* @__PURE__ */ l({
       },
       {
         classes: "guido-onboarding-preview",
-        left: r.value,
-        top: "90px",
+        left: s.value,
+        top: i(68),
         position: "Top Center",
         title: e("email-editor.onboarding-preview-title"),
         description: e("email-editor.onboarding-preview-description"),
@@ -66,18 +67,18 @@ const S = /* @__PURE__ */ l({
           o.close("genericOnboarding");
         }
       }
-    ]), g = i(() => o.onboardings.genericOnboarding.config.length > 0 && o.onboardings.genericOnboarding.isActive), p = () => {
+    ]), p = r(() => o.onboardings.genericOnboarding.config.length > 0 && o.onboardings.genericOnboarding.isActive), u = () => {
       var t, n;
       (n = (t = o.getGenericCurrentCard) == null ? void 0 : t.nextButtonClick) == null || n.call(t);
-    }, u = () => {
+    }, b = () => {
       var t, n;
       (n = (t = o.getGenericCurrentCard) == null ? void 0 : t.backButtonClick) == null || n.call(t);
     };
-    return b(() => o.onboardings.genericOnboarding.isActive, (t) => {
-      t && o.setConfig("genericOnboarding", s.value);
-    }, { immediate: !0 }), { __sfc: !0, trans: e, onboardingStore: o, centerLeft: r, addHoverToServiceElements: c, onboardingCardsConfig: s, isVisible: g, handleNext: p, handleBack: u, InOnboard: f };
+    return m(() => o.onboardings.genericOnboarding.isActive, (t) => {
+      t && o.setConfig("genericOnboarding", a.value);
+    }, { immediate: !0 }), { __sfc: !0, trans: e, onboardingStore: o, getTopPosition: i, centerLeft: s, addHoverToServiceElements: c, onboardingCardsConfig: a, isVisible: p, handleNext: u, handleBack: b, InOnboard: C };
   }
 });
 export {
-  S as default
+  y as default
 };

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

@@ -13,7 +13,7 @@ var l = function() {
   c,
   !1,
   null,
-  "dd1a237a"
+  "796d193b"
 );
 const I = p.exports;
 export {