@useinsider/guido 3.2.0-beta.78d83bd → 3.2.0-beta.7e0c6bd

package/dist/components/organisms/extensions/recommendation/Filters.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as v, computed as l, ref as O, watch as f } from "vue";
+import { defineComponent as v, computed as o, ref as O, watch as f } from "vue";
 import { useTranslations as g } from "../../../../composables/useTranslations.js";
 import { useRecommendationExtensionStore as R } from "../../../../extensions/Blocks/Recommendation/store/recommendation.js";
 import { getTooltipOptions as T } from "../../../../utils/tooltipUtils.js";
@@ -12,11 +12,11 @@ const V = /* @__PURE__ */ v({
   },
   emits: ["reset-validation"],
   setup(x, { expose: u, emit: s }) {
-    const p = g(), t = R(), a = l(() => t.getUniqueFilterGroups.map((e) => ({
+    const p = g(), t = R(), n = o(() => t.getUniqueFilterGroups.map((e) => ({
       text: e.toString(),
       value: e
     }))), r = O(1);
-    f(a, (e) => {
+    f(n, (e) => {
       if (!e.length)
         return;
       e.some((h) => h.value === r.value) || (r.value = e[0].value);
@@ -27,27 +27,24 @@ const V = /* @__PURE__ */ v({
     u({ switchToGroup: i });
     const c = () => {
       s("reset-validation");
-      const e = t.getUniqueFilterGroups, o = e.length > 0 ? Math.max(...e) + 1 : 1;
-      t.addFilterGroup(o), r.value = o;
-    }, d = l(() => a.value.length >= 3), n = l(() => t.getSelectedFilterGroup(r.value)), F = l(() => n.value.length >= 10), _ = l(() => n.value.length > 1), G = l(() => a.value.length > 1), m = l(() => {
-      var o;
-      return ((o = n.value[0]) == null ? void 0 : o.outerGroupOperator) || "*";
-    });
-    return { __sfc: !0, MAX_FILTER_GROUP_COUNT: 3, MAX_FILTER_PER_GROUP_COUNT: 10, trans: p, store: t, emit: s, filterGroupList: a, selectedFilterGroup: r, switchToGroup: i, handleAddFilterGroup: c, isMaxFilterGroupCount: d, selectedFilterGroupFilters: n, isMaxFilterPerGroupCount: F, hasLogicAdapter: _, hasRemoveFilterButton: G, outerGroupOperator: m, handleOuterGroupOperatorChange: (e) => {
-      n.value.forEach((o) => {
-        t.updateFilter({ ...o, outerGroupOperator: e });
+      const e = t.getUniqueFilterGroups, a = e.length > 0 ? Math.max(...e) + 1 : 1;
+      t.addFilterGroup(a), r.value = a;
+    }, d = o(() => n.value.length >= 3), l = o(() => t.getSelectedFilterGroup(r.value)), F = o(() => l.value.length >= 10), _ = o(() => l.value.length > 1), G = o(() => n.value.length > 1), m = o(() => l.value[0]?.outerGroupOperator || "*");
+    return { __sfc: !0, MAX_FILTER_GROUP_COUNT: 3, MAX_FILTER_PER_GROUP_COUNT: 10, trans: p, store: t, emit: s, filterGroupList: n, selectedFilterGroup: r, switchToGroup: i, handleAddFilterGroup: c, isMaxFilterGroupCount: d, selectedFilterGroupFilters: l, isMaxFilterPerGroupCount: F, hasLogicAdapter: _, hasRemoveFilterButton: G, outerGroupOperator: m, handleOuterGroupOperatorChange: (e) => {
+      l.value.forEach((a) => {
+        t.updateFilter({ ...a, outerGroupOperator: e });
       });
     }, handleAddFilter: () => {
       s("reset-validation"), t.addFilter(
         t.createDefaultFilter(
           r.value,
-          n.value.length + 1
+          l.value.length + 1
         )
       );
     }, handleDeleteFilter: (e) => {
       t.deleteFilter(e);
     }, handleDeleteFilterGroup: () => {
-      a.value.length <= 1 || t.deleteFilterGroup(r.value);
+      n.value.length <= 1 || t.deleteFilterGroup(r.value);
     }, getTooltipOptions: T, InSegments: E, InButtonV2: U, FilterItem: A, LogicAdapter: C };
   }
 });

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

@@ -1,23 +1,22 @@
-import l from "./EditorActions.vue2.js";
+import i from "./EditorActions.vue2.js";
 /* empty css                   */
-import d from "../../../_virtual/_plugin-vue2_normalizer.js";
-var u = function() {
-  var s, i, n, a;
+import n from "../../../_virtual/_plugin-vue2_normalizer.js";
+var a = function() {
   var o = this, e = o._self._c, t = o._self._setupProxy;
-  return e("div", { staticClass: "d-f editor-actions" }, [t.isVersionHistoryButtonVisible ? e(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryButtonDisabled, "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._e(), e(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isExportButtonDisabled, "label-text-status": !1, "loading-status": t.isExporting, "tooltip-options": t.getTooltipOptions("guido__export-button"), "tooltip-text": t.trans("newsletter.export") }, on: { click: t.handleExport } }), (i = (s = t.config) == null ? void 0 : s.features) != null && i.saveAsTemplate ? e(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isSaveAsButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__save-as-button"), "tooltip-text": t.trans("newsletter.save-templates") }, on: { click: t.handleSaveAs } }) : o._e(), (a = (n = t.config) == null ? void 0 : n.features) != null && a.testMessage ? e(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isTestButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__test-button", { staticPosition: "bottom right" }), "tooltip-text": t.trans("newsletter.test-email") }, on: { click: t.handleTestEmail } }) : o._e(), t.editorStore.isPreviewModeOpen ? o._e() : e(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": !t.isSaving && t.editorStore.isSaveButtonDisabled, "loading-status": t.isSaving }, on: { click: function(r) {
+  return e("div", { staticClass: "d-f editor-actions" }, [t.isVersionHistoryButtonVisible ? e(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryButtonDisabled, "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._e(), e(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isExportButtonDisabled, "label-text-status": !1, "loading-status": t.isExporting, "tooltip-options": t.getTooltipOptions("guido__export-button"), "tooltip-text": t.trans("newsletter.export") }, on: { click: t.handleExport } }), t.config?.features?.saveAsTemplate ? e(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isSaveAsButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__save-as-button"), "tooltip-text": t.trans("newsletter.save-templates") }, on: { click: t.handleSaveAs } }) : o._e(), t.config?.features?.testMessage ? e(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isTestButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__test-button", { staticPosition: "bottom right" }), "tooltip-text": t.trans("newsletter.test-email") }, on: { click: t.handleTestEmail } }) : o._e(), t.editorStore.isPreviewModeOpen ? o._e() : e(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": !t.isSaving && t.editorStore.isSaveButtonDisabled, "loading-status": t.isSaving }, on: { click: function(s) {
     return t.handleSave(!1);
-  } } }), e(t.MigrationConfirmModal, { ref: "migrationModalRef", on: { confirm: function(r) {
+  } } }), e(t.MigrationConfirmModal, { ref: "migrationModalRef", on: { confirm: function(s) {
     return t.executeSave(!1);
   } } })], 1);
-}, p = [], c = /* @__PURE__ */ d(
-  l,
-  u,
-  p,
+}, r = [], l = /* @__PURE__ */ n(
+  i,
+  a,
+  r,
   !1,
   null,
   "4e2a4adb"
 );
-const v = c.exports;
+const _ = l.exports;
 export {
-  v as default
+  _ as default
 };

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

@@ -17,8 +17,8 @@ import K from "./MigrationConfirmModal.vue.js";
 const ut = /* @__PURE__ */ O({
   __name: "EditorActions",
   setup(N, { expose: x }) {
-    const { config: a, isFeatureEnabled: l } = b(), { exportHtml: m } = k(), { save: u } = F(), { openVersionHistory: c, closeVersionHistory: p } = R(), { getCompiledEmail: f } = q(), { compileHtml: d } = D(), { validateLiquidSyntax: v } = z(), e = I(), y = P(), { hasMigrations: S } = J(y), s = L(), i = n(!1), r = n(!1), g = n(), H = B(), T = () => {
-      if (e.isVersionHistoryOpen) {
+    const { config: a, isFeatureEnabled: l } = b(), { exportHtml: m } = k(), { save: u } = F(), { openVersionHistory: c, closeVersionHistory: p } = R(), { getCompiledEmail: f } = q(), { compileHtml: d } = D(), { validateLiquidSyntax: v } = z(), t = I(), y = P(), { hasMigrations: S } = J(y), s = L(), i = n(!1), r = n(!1), g = n(), H = B(), T = () => {
+      if (t.isVersionHistoryOpen) {
         p();
         return;
       }
@@ -26,39 +26,35 @@ const ut = /* @__PURE__ */ O({
     }, w = async () => {
       i.value = !0, await m(), i.value = !1;
     }, _ = () => {
-      e.isSaveAsTemplateDrawerOpen = !0;
-    }, C = h(() => e.isVersionHistoryOpen ? s("newsletter.close-version-history") : s("newsletter.version-history")), A = h(
-      () => {
-        var t, o;
-        return ((o = (t = a.value) == null ? void 0 : t.features) == null ? void 0 : o.versionHistory) && !e.isPreviewModeOpen;
-      }
-    ), V = async (t) => {
-      r.value = !0, e.loadingStatus = !0;
-      const o = await u(t);
-      return r.value = !1, (t || !o) && (e.loadingStatus = !1), o;
-    }, E = (t) => {
-      var o;
-      if (!t && S.value) {
-        (o = g.value) == null || o.open();
+      t.isSaveAsTemplateDrawerOpen = !0;
+    }, C = h(() => t.isVersionHistoryOpen ? s("newsletter.close-version-history") : s("newsletter.version-history")), A = h(
+      () => a.value?.features?.versionHistory && !t.isPreviewModeOpen
+    ), V = async (o) => {
+      r.value = !0, t.loadingStatus = !0;
+      const e = await u(o);
+      return r.value = !1, (o || !e) && (t.loadingStatus = !1), e;
+    }, E = (o) => {
+      if (!o && S.value) {
+        g.value?.open();
         return;
       }
-      return V(t);
+      return V(o);
     }, M = async () => {
       if (l("liquidSyntax")) {
-        e.loadingStatus = !0;
+        t.loadingStatus = !0;
         try {
-          const { html: t } = await f({ minimize: !0, resetDataSavedFlag: !1 }), { compiledHtml: o } = d(t);
-          if (!await v(o))
+          const { html: o } = await f({ minimize: !0, resetDataSavedFlag: !1 }), { compiledHtml: e } = d(o);
+          if (!await v(e))
             return;
         } finally {
-          e.loadingStatus = !1;
+          t.loadingStatus = !1;
         }
       }
       H();
     };
     return x({
       handleSave: E
-    }), { __sfc: !0, config: a, isFeatureEnabled: l, exportHtml: m, save: u, openVersionHistory: c, closeVersionHistory: p, getCompiledEmail: f, compileHtml: d, validateLiquidSyntax: v, editorStore: e, templateStore: y, hasMigrations: S, trans: s, isExporting: i, isSaving: r, migrationModalRef: g, testEmailClick: H, handleVersionHistory: T, handleExport: w, handleSaveAs: _, versionHistoryTooltipText: C, isVersionHistoryButtonVisible: A, executeSave: V, handleSave: E, handleTestEmail: M, getTooltipOptions: j, InButtonV2: G, MigrationConfirmModal: K };
+    }), { __sfc: !0, config: a, isFeatureEnabled: l, exportHtml: m, save: u, openVersionHistory: c, closeVersionHistory: p, getCompiledEmail: f, compileHtml: d, validateLiquidSyntax: v, editorStore: t, templateStore: y, hasMigrations: S, trans: s, isExporting: i, isSaving: r, migrationModalRef: g, testEmailClick: H, handleVersionHistory: T, handleExport: w, handleSaveAs: _, versionHistoryTooltipText: C, isVersionHistoryButtonVisible: A, executeSave: V, handleSave: E, handleTestEmail: M, getTooltipOptions: j, InButtonV2: G, MigrationConfirmModal: K };
   }
 });
 export {

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

@@ -1,20 +1,17 @@
-import { defineComponent as n, ref as m } from "vue";
-import { InContainer as a } from "@useinsider/design-system-vue";
-import f from "./LeftSlot.vue.js";
-import p from "./MiddleSlot.vue.js";
-import i from "./RightSlot.vue.js";
-const c = /* @__PURE__ */ n({
+import { defineComponent as t, ref as n } from "vue";
+import { InContainer as m } from "@useinsider/design-system-vue";
+import a from "./LeftSlot.vue.js";
+import f from "./MiddleSlot.vue.js";
+import p from "./RightSlot.vue.js";
+const S = /* @__PURE__ */ t({
   __name: "HeaderWrapper",
-  setup(l, { expose: r }) {
-    const e = m(null);
-    return r({
-      handleSave: (t) => {
-        var o;
-        return (o = e.value) == null ? void 0 : o.handleSave(t);
-      }
-    }), { __sfc: !0, rightSlotRef: e, InContainer: a, LeftSlot: f, MiddleSlot: p, RightSlot: i };
+  setup(i, { expose: o }) {
+    const e = n(null);
+    return o({
+      handleSave: (r) => e.value?.handleSave(r)
+    }), { __sfc: !0, rightSlotRef: e, InContainer: m, LeftSlot: a, MiddleSlot: f, RightSlot: p };
   }
 });
 export {
-  c as default
+  S as default
 };

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

@@ -1,19 +1,16 @@
-import { defineComponent as l, computed as d, ref as p } from "vue";
-import { useConfig as k } from "../../../composables/useConfig.js";
-import { useBack as B } from "../../../composables/useGuidoActions.js";
-import { usePreviewMode as b } from "../../../composables/usePreviewMode.js";
-import { useTranslations as v } from "../../../composables/useTranslations.js";
-import { useVersionHistoryApi as _ } from "../../../composables/useVersionHistoryApi.js";
-import { useEditorStore as V } from "../../../stores/editor.js";
-import { InButtonV2 as g } from "@useinsider/design-system-vue";
-import { useDebounceFn as w } from "../../../node_modules/@vueuse/shared/index.js";
-const D = /* @__PURE__ */ l({
+import { defineComponent as m, computed as f, ref as l } from "vue";
+import { useConfig as d } from "../../../composables/useConfig.js";
+import { useBack as p } from "../../../composables/useGuidoActions.js";
+import { usePreviewMode as k } from "../../../composables/usePreviewMode.js";
+import { useTranslations as B } from "../../../composables/useTranslations.js";
+import { useVersionHistoryApi as b } from "../../../composables/useVersionHistoryApi.js";
+import { useEditorStore as v } from "../../../stores/editor.js";
+import { InButtonV2 as _ } from "@useinsider/design-system-vue";
+import { useDebounceFn as V } from "../../../node_modules/@vueuse/shared/index.js";
+const A = /* @__PURE__ */ m({
   __name: "LeftSlot",
-  setup(y) {
-    const e = V(), i = B(), { closeVersionHistory: n } = _(), { closePreviewMode: s } = b(), o = v(), { config: t } = k(), f = d(() => {
-      var u, m;
-      return e.isVersionHistoryOpen || e.isPreviewModeOpen ? o("email-editor.back-to-editor") : (m = (u = t.value) == null ? void 0 : u.ui) != null && m.backButtonLabel ? t.value.ui.backButtonLabel : o("email-editor.back-to-design");
-    }), r = p(!1), c = () => {
+  setup(g) {
+    const e = v(), i = p(), { closeVersionHistory: n } = b(), { closePreviewMode: s } = k(), o = B(), { config: t } = d(), u = f(() => e.isVersionHistoryOpen || e.isPreviewModeOpen ? o("email-editor.back-to-editor") : t.value?.ui?.backButtonLabel ? t.value.ui.backButtonLabel : o("email-editor.back-to-design")), r = l(!1), c = () => {
       if (e.isVersionHistoryOpen) {
         n();
         return;
@@ -23,14 +20,14 @@ const D = /* @__PURE__ */ l({
         return;
       }
       e.loadingStatus = !0, i();
-    }, a = w(() => {
+    }, a = V(() => {
       c(), r.value = !1;
     }, 500);
-    return { __sfc: !0, editorStore: e, handleBack: i, closeVersionHistory: n, closePreviewMode: s, trans: o, config: t, backButtonLabel: f, isBackButtonDisabled: r, executeBackAction: c, debouncedBackAction: a, handleBackClick: () => {
+    return { __sfc: !0, editorStore: e, handleBack: i, closeVersionHistory: n, closePreviewMode: s, trans: o, config: t, backButtonLabel: u, isBackButtonDisabled: r, executeBackAction: c, debouncedBackAction: a, handleBackClick: () => {
       r.value = !0, a();
-    }, InButtonV2: g };
+    }, InButtonV2: _ };
   }
 });
 export {
-  D as default
+  A as default
 };

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

@@ -1,16 +1,19 @@
-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 { defineComponent as e, defineAsyncComponent as o } from "vue";
+import m from "../email-preview/amp/AmpToggle.vue.js";
+import n from "../email-preview/desktop-preview/EmailSizeIndicator.vue.js";
+import { useEditorStore as s } from "../../../stores/editor.js";
+import p from "./EditorToolbar.vue.js";
+const u = /* @__PURE__ */ e({
   __name: "MiddleSlot",
-  setup(s) {
-    return { __sfc: !0, editorStore: i(), AmpToggle: r, EmailSizeIndicator: t, EditorToolbar: e, VersionHistory: m, VersionHistoryViewOptions: p };
+  setup(f) {
+    const r = o(
+      () => import("./version-history/VersionHistory.vue.js")
+    ), t = o(
+      () => import("./version-history/ViewOptions.vue.js")
+    ), i = s();
+    return { __sfc: !0, VersionHistory: r, VersionHistoryViewOptions: t, editorStore: i, AmpToggle: m, EmailSizeIndicator: n, EditorToolbar: p };
   }
 });
 export {
-  S as default
+  u as default
 };

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

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

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

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

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

@@ -1,37 +1,55 @@
-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 B } 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(P) {
+    const n = C(), t = x(), i = () => {
+      const o = document.querySelector(O), c = document.querySelector(_)?.closest(T);
+      if (!c || !o)
+        return {
+          left: `${(o?.offsetWidth ?? window.innerWidth) / 2 - g}px`,
+          top: "68px"
+        };
+      const s = o.getBoundingClientRect(), e = c.getBoundingClientRect();
+      return {
+        left: `${e.left - s.left + e.width / 2 - g}px`,
+        top: `${e.bottom - s.top + E}px`
+      };
+    }, r = d(() => {
+      const { left: o, top: a } = i();
+      return [
+        {
+          classes: "guido-amp-onboarding",
+          left: o,
+          top: a,
+          position: "Top Center",
+          title: n("email-editor.onboarding-amp-title"),
+          description: n("email-editor.onboarding-amp-description"),
+          imageSource: "",
+          backButtonClick: () => {
+          },
+          nextButtonType: "text",
+          nextButtonText: n("action-builder.ok"),
+          nextButtonClick: () => void t.close("ampOnboarding")
+        }
+      ];
+    }), l = d(() => t.onboardings.ampOnboarding.config.length > 0 && t.onboardings.ampOnboarding.isActive), p = () => {
+      t.getAmpCurrentCard?.nextButtonClick?.();
+    }, m = () => {
+      t.getAmpCurrentCard?.backButtonClick?.();
     };
-    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(
+      () => t.onboardings.ampOnboarding.isActive,
+      async (o) => {
+        o && (await f(), t.setConfig("ampOnboarding", r.value));
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, trans: n, onboardingStore: t, getTogglePosition: i, onboardingCardsConfig: r, isVisible: l, handleNext: p, handleBack: m, InOnboard: B };
   }
 });
 export {
-  O as default
+  G as default
 };

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

@@ -1,21 +1,20 @@
-import c from "./GenericOnboarding.vue2.js";
+import n 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, 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) {
+import t from "../../../_virtual/_plugin-vue2_normalizer.js";
+var i = function() {
+  var o = this, r = o._self._c, e = o._self._setupProxy;
+  return e.isVisible ? r(e.InOnboard, { key: "guido__editor-onboard", staticClass: "w-21-s p-a z-11", class: e.onboardingStore.getGenericCurrentCard?.classes, attrs: { id: "guido__editor-onboard", "is-multiple-page": "", visible: "", "image-source": "", title: "", "bottom-position": e.onboardingStore.getGenericCurrentCard?.bottom, "left-position": e.onboardingStore.getGenericCurrentCard?.left, "pages-config": e.onboardingStore.onboardings.genericOnboarding.config, "pointer-position": e.onboardingStore.getGenericCurrentCard?.position, "right-position": e.onboardingStore.getGenericCurrentCard?.right, "top-position": e.onboardingStore.getGenericCurrentCard?.top }, on: { backButtonClick: e.handleBack, close: function(c) {
     return e.onboardingStore.close("genericOnboarding");
   }, nextButtonClick: e.handleNext } }) : o._e();
-}, p = [], _ = /* @__PURE__ */ g(
-  c,
-  l,
-  p,
+}, a = [], s = /* @__PURE__ */ t(
+  n,
+  i,
+  a,
   !1,
   null,
-  "29b9af29"
+  "7419ae06"
 );
-const S = _.exports;
+const _ = s.exports;
 export {
-  S as default
+  _ as default
 };

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

@@ -1,33 +1,33 @@
-import { defineComponent as l, computed as i, watch as b } from "vue";
+import { defineComponent as b, computed as i, watch as l } from "vue";
+import { useRibbonOffset as m } from "../../../composables/useRibbonOffset.js";
 import { useTranslations as x } from "../../../composables/useTranslations.js";
-import { SERVICE_HOVER_SELECTORS as m } from "../../../enums/onboarding.js";
+import { SERVICE_HOVER_SELECTORS as f } 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 { InOnboard as B } from "@useinsider/design-system-vue";
+const w = /* @__PURE__ */ b({
   __name: "GenericOnboarding",
-  setup(B) {
-    const e = x(), o = k(), r = i(() => `${window.innerWidth / 2 - 160}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);
+  setup(C) {
+    const t = x(), e = k(), { getTopPosition: n } = m(), r = i(() => `${window.innerWidth / 2 - 146}px`), s = () => {
+      const o = document.querySelector("ui-editor");
+      o?.shadowRoot && f.forEach((p) => {
+        const a = o.shadowRoot?.querySelector(p);
         a && a.classList.add("hover");
       });
-    }, s = i(() => [
+    }, c = i(() => [
       {
         classes: "guido-onboarding-blocks",
         left: "90px",
-        top: "90px",
+        top: n(90),
         position: "Left Top",
-        title: e("email-editor.onboarding-blocks-title"),
-        description: e("email-editor.onboarding-blocks-description"),
+        title: t("email-editor.onboarding-blocks-title"),
+        description: t("email-editor.onboarding-blocks-description"),
         imageSource: "",
         backButtonClick: () => {
         },
         nextButtonType: "text",
-        nextButtonText: e("products.next"),
+        nextButtonText: t("products.next"),
         nextButtonClick: () => {
-          c(), o.next("genericOnboarding");
+          s(), e.next("genericOnboarding");
         }
       },
       {
@@ -35,49 +35,47 @@ const S = /* @__PURE__ */ l({
         right: "426px",
         bottom: "38px",
         position: "Right Bottom",
-        title: e("email-editor.onboarding-stripes-title"),
-        description: e("email-editor.onboarding-stripes-description"),
+        title: t("email-editor.onboarding-stripes-title"),
+        description: t("email-editor.onboarding-stripes-description"),
         imageSource: "",
         backButtonType: "text",
-        backButtonText: e("ds-steps.back"),
+        backButtonText: t("ds-steps.back"),
         backButtonClick: () => {
-          o.previous("genericOnboarding");
+          e.previous("genericOnboarding");
         },
         nextButtonType: "text",
-        nextButtonText: e("products.next"),
+        nextButtonText: t("products.next"),
         nextButtonClick: () => {
-          o.next("genericOnboarding");
+          e.next("genericOnboarding");
         }
       },
       {
         classes: "guido-onboarding-preview",
         left: r.value,
-        top: "90px",
+        top: n(68),
         position: "Top Center",
-        title: e("email-editor.onboarding-preview-title"),
-        description: e("email-editor.onboarding-preview-description"),
+        title: t("email-editor.onboarding-preview-title"),
+        description: t("email-editor.onboarding-preview-description"),
         imageSource: "",
         backButtonType: "text",
-        backButtonText: e("ds-steps.back"),
-        backButtonClick: () => o.previous("genericOnboarding"),
+        backButtonText: t("ds-steps.back"),
+        backButtonClick: () => e.previous("genericOnboarding"),
         nextButtonType: "text",
-        nextButtonText: e("action-builder.ok"),
+        nextButtonText: t("action-builder.ok"),
         nextButtonClick: () => {
-          o.close("genericOnboarding");
+          e.close("genericOnboarding");
         }
       }
-    ]), g = i(() => o.onboardings.genericOnboarding.config.length > 0 && o.onboardings.genericOnboarding.isActive), p = () => {
-      var t, n;
-      (n = (t = o.getGenericCurrentCard) == null ? void 0 : t.nextButtonClick) == null || n.call(t);
+    ]), d = i(() => e.onboardings.genericOnboarding.config.length > 0 && e.onboardings.genericOnboarding.isActive), g = () => {
+      e.getGenericCurrentCard?.nextButtonClick?.();
     }, u = () => {
-      var t, n;
-      (n = (t = o.getGenericCurrentCard) == null ? void 0 : t.backButtonClick) == null || n.call(t);
+      e.getGenericCurrentCard?.backButtonClick?.();
     };
-    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 l(() => e.onboardings.genericOnboarding.isActive, (o) => {
+      o && e.setConfig("genericOnboarding", c.value);
+    }, { immediate: !0 }), { __sfc: !0, trans: t, onboardingStore: e, getTopPosition: n, centerLeft: r, addHoverToServiceElements: s, onboardingCardsConfig: c, isVisible: d, handleNext: g, handleBack: u, InOnboard: B };
   }
 });
 export {
-  S as default
+  w as default
 };