@useinsider/guido 3.2.0-beta.e01b42a → 3.2.0-beta.e0e56ef

package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue.js

@@ -1,16 +1,16 @@
 import s from "./EmailSizeIndicator.vue2.js";
 /* empty css                        */
-import r from "../../../../_virtual/_plugin-vue2_normalizer.js";
-var o = function() {
-  var e = this, i = e._self._c, t = e._self._setupProxy;
-  return t.previewStore.previewHtml ? i("div", { staticClass: "d-f a-i-c j-c-c" }, [i(t.InProgress, { staticClass: "min-w-15-s", attrs: { id: "email-size-progress", "description-status": "", "description-position": "left", description: t.htmlSize, "max-value": t.MAX_EMAIL_SIZE_IN_KB, type: t.progress.type, value: t.progress.value } }), i(t.InTooltipV2, { attrs: { id: "email-size-tooltip", "icon-status": "", "static-position": "bottom center", "dynamic-position": !1, text: t.trans("email-editor.preview-design-size-tooltip") } })], 1) : e._e();
-}, a = [], n = /* @__PURE__ */ r(
+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 j-c-c" }, [t.previewStore.isLoaded ? [e(t.InProgress, { staticClass: "min-w-15-s", attrs: { id: "email-size-progress", "description-status": "", "description-position": "left", description: t.htmlSize, "max-value": t.MAX_EMAIL_SIZE_IN_KB, type: t.progress.type, value: t.progress.value } }), e(t.InTooltipV2, { attrs: { id: "email-size-tooltip", "icon-status": "", "static-position": "bottom center", "dynamic-position": !1, text: t.trans("email-editor.preview-design-size-tooltip") } })] : e(t.InSkeleton, { attrs: { sizing: { width: 200, height: 20 } } })], 2);
+}, a = [], n = /* @__PURE__ */ o(
   s,
-  o,
+  r,
   a,
   !1,
   null,
-  "079d2bf7"
+  "2cb418af"
 );
 const m = n.exports;
 export {

package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue2.js

@@ -1,25 +1,17 @@
-import { defineComponent as c, ref as n, computed as l, watch as u } from "vue";
-import { useTranslations as p } from "../../../../composables/useTranslations.js";
-import { usePreviewStore as _ } from "../../../../stores/preview.js";
-import { InTooltipV2 as v, InProgress as f } from "@useinsider/design-system-vue";
-const S = /* @__PURE__ */ c({
+import { defineComponent as i, computed as t } from "vue";
+import { useTranslations as m } from "../../../../composables/useTranslations.js";
+import { usePreviewStore as a } from "../../../../stores/preview.js";
+import { InTooltipV2 as p, InSkeleton as c, InProgress as _ } from "@useinsider/design-system-vue";
+const z = /* @__PURE__ */ i({
   __name: "EmailSizeIndicator",
-  setup(w) {
-    const t = _(), o = 102, e = n(0), s = n({
-      type: "success",
-      value: 0
-    }), a = l(() => `~${e.value} KB`), r = () => {
-      const m = new Blob([t.previewHtml]).size;
-      e.value = Math.round(m / 1024), s.value = {
-        type: e.value < o ? "success" : "warning",
-        value: Math.min(e.value, o)
-      };
-    }, i = p();
-    return u(() => t.previewHtml, () => {
-      r();
-    }, { immediate: !0 }), { __sfc: !0, previewStore: t, MAX_EMAIL_SIZE_IN_KB: o, htmlKB: e, progress: s, htmlSize: a, calculateProgress: r, trans: i, InProgress: f, InTooltipV2: v };
+  setup(l) {
+    const e = a(), o = 102, r = t(() => `~${e.emailSizeKB} KB`), n = t(() => ({
+      type: e.emailSizeKB < o ? "success" : "warning",
+      value: Math.min(e.emailSizeKB, o)
+    })), s = m();
+    return { __sfc: !0, previewStore: e, MAX_EMAIL_SIZE_IN_KB: o, htmlSize: r, progress: n, trans: s, InProgress: _, InSkeleton: c, InTooltipV2: p };
   }
 });
 export {
-  S as default
+  z as default
 };

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

@@ -4,7 +4,7 @@ import d from "../../../_virtual/_plugin-vue2_normalizer.js";
 var u = function() {
   var s, i, n, a;
   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.testEmailClick } }) : 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 } }), (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 t.handleSave(!1);
   } } }), e(t.MigrationConfirmModal, { ref: "migrationModalRef", on: { confirm: function(r) {
     return t.executeSave(!1);
@@ -15,7 +15,7 @@ var u = function() {
   p,
   !1,
   null,
-  "acff76a8"
+  "4e2a4adb"
 );
 const v = c.exports;
 export {

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

@@ -1,51 +1,66 @@
-import { defineComponent as E, ref as n, computed as g } from "vue";
-import { useConfig as w } from "../../../composables/useConfig.js";
-import { useExport as C } from "../../../composables/useExport.js";
-import { useTestEmailClick as M } from "../../../composables/useGuidoActions.js";
-import { useSave as O } from "../../../composables/useSave.js";
-import { useTranslations as A } from "../../../composables/useTranslations.js";
-import { useVersionHistoryApi as k } from "../../../composables/useVersionHistoryApi.js";
-import { useEditorStore as B } from "../../../stores/editor.js";
-import { useTemplateStore as R } from "../../../stores/template.js";
-import { getTooltipOptions as b } from "../../../utils/tooltipUtils.js";
-import { InButtonV2 as D } from "@useinsider/design-system-vue";
-import { storeToRefs as I } from "pinia";
-import P from "./MigrationConfirmModal.vue.js";
-const Z = /* @__PURE__ */ E({
+import { defineComponent as O, ref as n, computed as h } from "vue";
+import { useActionsApi as q } from "../../../composables/useActionsApi.js";
+import { useConfig as b } from "../../../composables/useConfig.js";
+import { useExport as k } from "../../../composables/useExport.js";
+import { useTestEmailClick as B } from "../../../composables/useGuidoActions.js";
+import { useHtmlCompiler as D } from "../../../composables/useHtmlCompiler.js";
+import { useSave as F } from "../../../composables/useSave.js";
+import { useTranslations as L } from "../../../composables/useTranslations.js";
+import { useVersionHistoryApi as R } from "../../../composables/useVersionHistoryApi.js";
+import { useLiquidValidator as z } from "../../../composables/validators/useLiquidValidator.js";
+import { useEditorStore as I } from "../../../stores/editor.js";
+import { useTemplateStore as P } from "../../../stores/template.js";
+import { getTooltipOptions as j } from "../../../utils/tooltipUtils.js";
+import { InButtonV2 as G } from "@useinsider/design-system-vue";
+import { storeToRefs as J } from "pinia";
+import K from "./MigrationConfirmModal.vue.js";
+const ut = /* @__PURE__ */ O({
   __name: "EditorActions",
-  setup(j, { expose: H }) {
-    const { config: a } = w(), { exportHtml: m } = C(), { save: p } = O(), { openVersionHistory: l, closeVersionHistory: u } = k(), e = B(), c = R(), { hasMigrations: f } = I(c), r = A(), s = n(!1), i = n(!1), v = n(), S = M(), V = () => {
+  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) {
-        u();
+        p();
         return;
       }
-      l();
-    }, T = async () => {
-      s.value = !0, await m(), s.value = !1;
+      c();
+    }, w = async () => {
+      i.value = !0, await m(), i.value = !1;
     }, _ = () => {
       e.isSaveAsTemplateDrawerOpen = !0;
-    }, h = g(() => e.isVersionHistoryOpen ? r("newsletter.close-version-history") : r("newsletter.version-history")), x = g(
+    }, C = h(() => e.isVersionHistoryOpen ? s("newsletter.close-version-history") : s("newsletter.version-history")), A = h(
       () => {
-        var o, t;
-        return ((t = (o = a.value) == null ? void 0 : o.features) == null ? void 0 : t.versionHistory) && !e.isPreviewModeOpen;
+        var t, o;
+        return ((o = (t = a.value) == null ? void 0 : t.features) == null ? void 0 : o.versionHistory) && !e.isPreviewModeOpen;
       }
-    ), d = async (o) => {
-      i.value = !0, e.loadingStatus = !0;
-      const t = await p(o);
-      return i.value = !1, (o || !t) && (e.loadingStatus = !1), t;
-    }, y = (o) => {
-      var t;
-      if (!o && f.value) {
-        (t = v.value) == null || t.open();
+    ), 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();
         return;
       }
-      return d(o);
+      return V(t);
+    }, M = async () => {
+      if (l("liquidSyntax")) {
+        e.loadingStatus = !0;
+        try {
+          const { html: t } = await f({ minimize: !0, resetDataSavedFlag: !1 }), { compiledHtml: o } = d(t);
+          if (!await v(o))
+            return;
+        } finally {
+          e.loadingStatus = !1;
+        }
+      }
+      H();
     };
-    return H({
-      handleSave: y
-    }), { __sfc: !0, config: a, exportHtml: m, save: p, openVersionHistory: l, closeVersionHistory: u, editorStore: e, templateStore: c, hasMigrations: f, trans: r, isExporting: s, isSaving: i, migrationModalRef: v, testEmailClick: S, handleVersionHistory: V, handleExport: T, handleSaveAs: _, versionHistoryTooltipText: h, isVersionHistoryButtonVisible: x, executeSave: d, handleSave: y, getTooltipOptions: b, InButtonV2: D, MigrationConfirmModal: P };
+    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 };
   }
 });
 export {
-  Z as default
+  ut as default
 };

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

@@ -1,17 +1,17 @@
-import o from "./RightSlot.vue2.js";
-import s from "../../../_virtual/_plugin-vue2_normalizer.js";
-var n = function() {
-  var r = this, t = r._self._c, e = r._self._setupProxy;
-  return t("div", { staticClass: "d-f" }, [e.editorStore.isVersionHistoryOpen ? t(e.RestoreButton) : t(e.EditorActions, { ref: "editorActionsRef" })], 1);
-}, i = [], _ = /* @__PURE__ */ s(
-  o,
-  n,
+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,
+  a,
   !1,
   null,
   null
 );
-const l = _.exports;
+const u = n.exports;
 export {
-  l as default
+  u as default
 };

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

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

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

@@ -1,33 +1,31 @@
-import { defineComponent as l, computed as a, watch as u } from "vue";
+import { defineComponent as b, computed as d, watch as m } from "vue";
+import { useRibbonOffset as l } from "../../../composables/useRibbonOffset.js";
 import { useTranslations as x } from "../../../composables/useTranslations.js";
-import { RIBBON_SELECTOR as T, UI_EDITOR_SELECTOR as O, CARD_COMPOSITION_TAB_SELECTOR as B, SETTINGS_TAB_SELECTOR as f } from "../../../enums/onboarding.js";
-import { useOnboardingStore as C } from "../../../stores/onboarding.js";
-import { InOnboard as k } from "@useinsider/design-system-vue";
-const E = /* @__PURE__ */ l({
+import { UI_EDITOR_SELECTOR as T, CARD_COMPOSITION_TAB_SELECTOR as O, SETTINGS_TAB_SELECTOR as f } from "../../../enums/onboarding.js";
+import { useOnboardingStore as k } from "../../../stores/onboarding.js";
+import { InOnboard as B } from "@useinsider/design-system-vue";
+const E = /* @__PURE__ */ b({
   __name: "ItemsOnboarding",
-  setup(_) {
-    const e = x(), o = C(), c = a(() => {
-      const t = document.querySelector(T);
-      return (t == null ? void 0 : t.offsetHeight) ?? 0;
-    }), n = (t) => `${t + c.value}px`, r = (t) => {
-      const i = document.querySelector(O);
-      if (!(i != null && i.shadowRoot))
+  setup(C) {
+    const i = x(), o = k(), { getTopPosition: n } = l(), r = (t) => {
+      const e = document.querySelector(T);
+      if (!(e != null && e.shadowRoot))
         return;
-      const { shadowRoot: s } = i, m = s.querySelector(t);
-      m && m.click();
-    }, d = a(() => [
+      const { shadowRoot: s } = e, c = s.querySelector(t);
+      c && c.click();
+    }, a = d(() => [
       {
         classes: "guido-items-onboarding-card-1",
         right: "426px",
         top: n(90),
         position: "Right Top",
-        title: e("email-editor.onboarding-items-title"),
-        description: e("email-editor.onboarding-items-description"),
+        title: i("email-editor.onboarding-items-title"),
+        description: i("email-editor.onboarding-items-description"),
         imageSource: "",
         backButtonClick: () => {
         },
         nextButtonType: "text",
-        nextButtonText: e("products.next"),
+        nextButtonText: i("products.next"),
         nextButtonClick: () => {
           o.next("itemsOnboarding");
         }
@@ -37,16 +35,16 @@ const E = /* @__PURE__ */ l({
         right: "426px",
         top: n(218),
         position: "Right Top",
-        title: e("email-editor.onboarding-items-item-type-title"),
-        description: e("email-editor.onboarding-items-item-type-description"),
+        title: i("email-editor.onboarding-items-item-type-title"),
+        description: i("email-editor.onboarding-items-item-type-description"),
         imageSource: "",
         backButtonType: "text",
-        backButtonText: e("ds-steps.back"),
+        backButtonText: i("ds-steps.back"),
         backButtonClick: () => {
           o.previous("itemsOnboarding");
         },
         nextButtonType: "text",
-        nextButtonText: e("products.next"),
+        nextButtonText: i("products.next"),
         nextButtonClick: () => {
           o.next("itemsOnboarding");
         }
@@ -56,42 +54,42 @@ const E = /* @__PURE__ */ l({
         right: "426px",
         top: n(140),
         position: "Right Top",
-        title: e("email-editor.onboarding-items-composition-title"),
-        description: e("email-editor.onboarding-items-composition-description"),
+        title: i("email-editor.onboarding-items-composition-title"),
+        description: i("email-editor.onboarding-items-composition-description"),
         imageSource: "",
         backButtonType: "text",
-        backButtonText: e("ds-steps.back"),
+        backButtonText: i("ds-steps.back"),
         backButtonClick: () => {
           o.previous("itemsOnboarding");
         },
         nextButtonType: "text",
-        nextButtonText: e("action-builder.ok"),
+        nextButtonText: i("action-builder.ok"),
         nextButtonClick: () => {
           o.close("itemsOnboarding");
         }
       }
-    ]), g = a(() => o.onboardings.itemsOnboarding.config.length > 0 && o.onboardings.itemsOnboarding.isActive), p = () => {
-      var t, i;
-      (i = (t = o.getItemsCurrentCard) == null ? void 0 : t.nextButtonClick) == null || i.call(t);
-    }, b = () => {
-      var t, i;
-      (i = (t = o.getItemsCurrentCard) == null ? void 0 : t.backButtonClick) == null || i.call(t);
+    ]), g = d(() => o.onboardings.itemsOnboarding.config.length > 0 && o.onboardings.itemsOnboarding.isActive), p = () => {
+      var t, e;
+      (e = (t = o.getItemsCurrentCard) == null ? void 0 : t.nextButtonClick) == null || e.call(t);
+    }, u = () => {
+      var t, e;
+      (e = (t = o.getItemsCurrentCard) == null ? void 0 : t.backButtonClick) == null || e.call(t);
     };
-    return u(
+    return m(
       () => o.isActive("itemsOnboarding"),
       (t) => {
-        t && o.setConfig("itemsOnboarding", d.value);
+        t && o.setConfig("itemsOnboarding", a.value);
       },
       { immediate: !0 }
-    ), u(
+    ), m(
       () => o.onboardings.itemsOnboarding.cardIndex,
-      (t, i) => {
+      (t, e) => {
         if (!o.isActive("itemsOnboarding"))
           return;
-        const s = `${i}-${t}`;
-        s === "1-2" && r(B), s === "2-1" && r(f);
+        const s = `${e}-${t}`;
+        s === "1-2" && r(O), s === "2-1" && r(f);
       }
-    ), { __sfc: !0, trans: e, onboardingStore: o, ribbonOffset: c, getTopPosition: n, switchTab: r, onboardingCardsConfig: d, isVisible: g, handleNext: p, handleBack: b, InOnboard: k };
+    ), { __sfc: !0, trans: i, onboardingStore: o, getTopPosition: n, switchTab: r, onboardingCardsConfig: a, isVisible: g, handleNext: p, handleBack: u, InOnboard: B };
   }
 });
 export {

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

@@ -13,9 +13,9 @@ var g = function() {
   b,
   !1,
   null,
-  "d073b1dc"
+  "cadfc82d"
 );
-const f = p.exports;
+const C = p.exports;
 export {
-  f as default
+  C as default
 };