@useinsider/guido 3.17.0-beta.5e11759 → 3.17.0-beta.5e4fb0b

package/dist/@types/config/schemas.js

@@ -1,5 +1,5 @@
-import { ModuleFolderDefaults as f } from "../../enums/defaults.js";
-import { object as a, number as n, optional as e, string as t, picklist as i, pipe as m, minLength as b, custom as y, boolean as o, array as c, transform as C, record as k, fallback as R, literal as u, looseObject as g, variant as T, union as h, unknown as r, lazy as I } from "../../node_modules/valibot/dist/index.js";
+import { ModuleFolderDefaults as S } from "../../enums/defaults.js";
+import { object as a, number as n, optional as e, string as t, picklist as i, pipe as m, minLength as b, custom as h, boolean as o, array as c, transform as C, record as k, fallback as R, literal as u, looseObject as g, variant as T, union as y, unknown as r, lazy as I } from "../../node_modules/valibot/dist/index.js";
 const p = {
   /** Promotional/marketing emails */
   PROMOTIONAL: 1,
@@ -68,22 +68,22 @@ const p = {
       value: t()
     })
   )
-}), S = I(() => g({
+}), f = I(() => g({
   text: e(t()),
   // eslint-disable-next-line camelcase -- backend field name
   tag_text: e(t()),
   value: e(t()),
-  children: e(c(S)),
+  children: e(c(f)),
   // eslint-disable-next-line camelcase -- backend field name
-  select_items: e(c(S))
+  select_items: e(c(f))
 })), N = k(
   t(),
-  R(c(S), [])
+  R(c(f), [])
 ), P = g({
   /** Block ID (matches the dictionary key and the legacy HTML element id) */
   id: e(n()),
   /** Decimal places for price display (legacy data may use string or number) */
-  decimalCount: e(h([t(), n()])),
+  decimalCount: e(y([t(), n()])),
   /** Pinned product IDs (empty array when filter-driven) */
   productIds: e(c(r())),
   /** Whether the block requested live products at send time */
@@ -117,7 +117,7 @@ const p = {
   /** Block type marker used by some legacy variants */
   blockType: e(t()),
   /** Size variant marker (legacy data may use string or number) */
-  size: e(h([t(), n()])),
+  size: e(y([t(), n()])),
   /** Vertical responsiveness flag (legacy size=1 variants) */
   verticalResponsiveness: e(o()),
   /** Legacy "Move to next line" price placement toggle (cardPricePlacement.js) */
@@ -189,9 +189,9 @@ const p = {
   /** Email header settings */
   emailHeader: e(D, { senderName: "", subject: "" }),
   /** Folder name for user-saved modules (used by Stripo plugin panel for path construction) */
-  savedModulesFolderName: e(t(), f.SAVED_MODULES),
+  savedModulesFolderName: e(t(), S.SAVED_MODULES),
   /** Folder name for default/prebuilt modules (used by Stripo plugin panel for path construction) */
-  defaultModulesFolderName: e(t(), f.DEFAULT_MODULES)
+  defaultModulesFolderName: e(t(), S.DEFAULT_MODULES)
 }), F = a({
   /** Whether to show the header bar */
   showHeader: e(o(), !0),
@@ -216,6 +216,8 @@ const p = {
   liquidSyntax: e(o(), !1),
   /** Enable autosave (3-min interval + tab-hide). User toggles on/off from the header. */
   autosave: e(o(), !1),
+  /** Enable the Stripo Accessibility Checker control in the editor toolbar. */
+  accessibilityTesting: e(o(), !1),
   /** Enable pre-save domain-allowlist validation (opt-in; Guido self-serves the block toaster) */
   allowlistEnabled: e(o(), !1),
   /** Enable persistent link tracking-id assignment for the click heatmap (opt-in) */
@@ -288,7 +290,7 @@ const p = {
   ...d.entries,
   type: u("custom"),
   /** Custom processor function */
-  processor: y(
+  processor: h(
     (s) => typeof s == "function",
     "processor must be a function"
   )
@@ -308,7 +310,7 @@ const p = {
    * Return false to cancel the save operation.
    */
   externalValidation: e(
-    y(
+    h(
       (s) => typeof s == "function",
       "externalValidation must be a function"
     )
@@ -344,7 +346,7 @@ export {
   G as CustomRuleSchema,
   B as DefaultBlockTypeSchema,
   N as DynamicContentListSchema,
-  S as DynamicContentNodeSchema,
+  f as DynamicContentNodeSchema,
   E as DynamicContentSchema,
   O as EditorSchema,
   D as EmailHeaderSchema,

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

@@ -0,0 +1,17 @@
+import e from "./AutoSaveStatus.vue2.js";
+import n from "../../../_virtual/_plugin-vue2_normalizer.js";
+var r = function() {
+  var s = this, t = s._self._c, a = s._self._setupProxy;
+  return a.isFeatureEnabled("autosave") ? t("div", { staticClass: "d-f a-i-c auto-save-status" }, [a.autosaveStore.status === a.AUTOSAVE_STATUS.SAVING ? t("span", { staticClass: "d-f a-i-c f-s-1" }, [t(a.InLoading, { attrs: { "color-class": "i-c-53", size: "16" } }), t("span", { staticClass: "ml-1 t-c-53" }, [s._v(s._s(a.trans("newsletter.saving")))])], 1) : a.savedLabel ? t("span", { staticClass: "f-s-1 t-c-53" }, [s._v(s._s(a.savedLabel))]) : s._e()]) : s._e();
+}, _ = [], o = /* @__PURE__ */ n(
+  e,
+  r,
+  _,
+  !1,
+  null,
+  null
+);
+const u = o.exports;
+export {
+  u as default
+};

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

@@ -0,0 +1,21 @@
+import { defineComponent as i, computed as u } from "vue";
+import { useConfig as d } from "../../../composables/useConfig.js";
+import { useTranslations as p } from "../../../composables/useTranslations.js";
+import { useAutosaveStore as f, AUTOSAVE_STATUS as o } from "../../../stores/autosave.js";
+import { autoSaveTimestamp as S } from "../../../utils/timeUtil.js";
+import { InLoading as c } from "@useinsider/design-system-vue";
+const g = /* @__PURE__ */ i({
+  __name: "AutoSaveStatus",
+  setup(v) {
+    const { isFeatureEnabled: a } = d(), t = f(), e = p(), s = u(() => {
+      if (t.status !== o.SAVED || !t.lastSavedAt)
+        return "";
+      const { isToday: r, time: m, date: n } = S(t.lastSavedAt);
+      return r ? e("email-editor.autosaved-at-today", { time: m }) : e("email-editor.autosaved-at-date", { date: n });
+    });
+    return { __sfc: !0, isFeatureEnabled: a, autosaveStore: t, trans: e, savedLabel: s, AUTOSAVE_STATUS: o, InLoading: c };
+  }
+});
+export {
+  g as default
+};

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

@@ -1,23 +1,23 @@
-import l from "./EditorActions.vue2.js";
+import r from "./EditorActions.vue2.js";
 /* empty css                   */
-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.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) {
+import a from "../../../_virtual/_plugin-vue2_normalizer.js";
+var d = function() {
+  var o, s;
+  var e = this, i = e._self._c, t = e._self._setupProxy;
+  return i("div", { staticClass: "d-f a-i-c editor-actions" }, [t.editorStore.isPreviewModeOpen ? e._e() : i("div", { staticClass: "editor-actions__divider" }), (s = (o = t.config) == null ? void 0 : o.features) != null && s.testMessage && !t.editorStore.isPreviewModeOpen ? i(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 } }) : e._e(), t.editorStore.isPreviewModeOpen ? e._e() : i(t.EditorActionsMenu), t.editorStore.isPreviewModeOpen ? e._e() : i("div", { staticClass: "editor-actions__divider" }), t.editorStore.isPreviewModeOpen ? e._e() : i(t.InButtonV2, { attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": !t.isSaving && t.editorStore.isSaveButtonDisabled, "loading-status": t.isSaving }, on: { click: function(n) {
     return t.handleSave(!1);
-  } } }), e(t.MigrationConfirmModal, { ref: "migrationModalRef", on: { confirm: function(r) {
+  } } }), i(t.MigrationConfirmModal, { ref: "migrationModalRef", on: { confirm: function(n) {
     return t.executeSave(!1);
   } } })], 1);
-}, p = [], c = /* @__PURE__ */ d(
+}, l = [], c = /* @__PURE__ */ a(
+  r,
+  d,
   l,
-  u,
-  p,
   !1,
   null,
-  "6e711fd7"
+  "8aa5b2ca"
 );
-const v = c.exports;
+const p = c.exports;
 export {
-  v as default
+  p as default
 };

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

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

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

@@ -0,0 +1,20 @@
+import i from "./EditorActionsMenu.vue2.js";
+/* empty css                       */
+import a from "../../../_virtual/_plugin-vue2_normalizer.js";
+var o = function() {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s("div", { ref: "root", staticClass: "editor-actions-menu p-r" }, [s(t.InButtonV2, { attrs: { id: "guido__kebab-button", "data-testid": "Editor Actions Menu", "left-icon": "line-more-vertical", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.loadingStatus, "label-text-status": !1, "selected-status": t.isOpen, "tooltip-options": t.getTooltipOptions("guido__kebab-button"), "tooltip-text": t.trans("email-editor.more-actions") }, on: { click: function(c) {
+    t.isOpen = !t.isOpen;
+  } } }), t.isOpen ? s("div", { staticClass: "editor-actions-menu__panel p-a" }, [t.isAutosaveVisible ? [s("p", { staticClass: "editor-actions-menu__section f-s-1 t-c-53" }, [e._v(" " + e._s(t.trans("email-editor.preferences")) + " ")]), s("div", { staticClass: "editor-actions-menu__row editor-actions-menu__row_static d-f a-i-c j-c-s-b" }, [s("span", { staticClass: "f-s-2" }, [e._v(e._s(t.trans("email-editor.auto-save")))]), s(t.InToggle, { attrs: { id: "guido__kebab-autosave-toggle", name: "guido-kebab-autosave-toggle", checked: t.autosaveStore.isOn, disable: t.editorStore.loadingStatus }, on: { click: t.toggleAutosave } })], 1), s("div", { staticClass: "editor-actions-menu__divider" })] : e._e(), s("p", { staticClass: "editor-actions-menu__section f-s-1 t-c-53" }, [e._v(" " + e._s(t.trans("email-editor.actions")) + " ")]), t.isVersionHistoryVisible ? s("button", { staticClass: "editor-actions-menu__row d-f a-i-c", attrs: { id: "guido__kebab-version-history", type: "button", disabled: t.editorStore.isVersionHistoryButtonDisabled }, on: { click: t.handleVersionHistory } }, [s(t.InIcons, { staticClass: "mr-2", attrs: { name: "line-reset", size: "16" } }), s("span", { staticClass: "f-s-2" }, [e._v(e._s(t.trans("newsletter.version-history")))])], 1) : e._e(), t.isAccessibilityVisible ? s("button", { staticClass: "editor-actions-menu__row d-f a-i-c", attrs: { id: "guido__kebab-accessibility", type: "button", disabled: t.editorStore.loadingStatus }, on: { click: t.handleAccessibility } }, [s("svg", { staticClass: "mr-2 editor-actions-menu__icon", attrs: { "aria-hidden": "true", fill: "none", height: "16", viewBox: "0 0 20 20", width: "16" } }, [s("rect", { attrs: { height: "18", rx: "9", stroke: "currentColor", "stroke-width": "2", width: "18", x: "1", y: "1" } }), s("path", { attrs: { fill: "currentColor", d: t.ACCESSIBILITY_ICON_PATH } })]), s("span", { staticClass: "f-s-2" }, [e._v(e._s(t.trans("email-editor.accessibility-test")))])]) : e._e(), t.isSaveAsVisible ? s("button", { staticClass: "editor-actions-menu__row d-f a-i-c", attrs: { id: "guido__kebab-save-as", type: "button", disabled: t.editorStore.isSaveAsButtonDisabled }, on: { click: t.handleSaveAs } }, [s(t.InIcons, { staticClass: "mr-2", attrs: { name: "line-newsletter-save-as-template", size: "16" } }), s("span", { staticClass: "f-s-2" }, [e._v(e._s(t.trans("newsletter.save-templates")))])], 1) : e._e(), s("button", { staticClass: "editor-actions-menu__row d-f a-i-c", attrs: { id: "guido__kebab-export", type: "button", disabled: t.isExporting || t.editorStore.isExportButtonDisabled }, on: { click: t.handleExport } }, [s(t.InIcons, { staticClass: "mr-2", attrs: { name: "line-export", size: "16" } }), s("span", { staticClass: "f-s-2" }, [e._v(e._s(t.trans("email-editor.export-html")))])], 1)], 2) : e._e()], 1);
+}, n = [], r = /* @__PURE__ */ a(
+  i,
+  o,
+  n,
+  !1,
+  null,
+  "5f25a263"
+);
+const b = r.exports;
+export {
+  b as default
+};

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

@@ -0,0 +1,39 @@
+import { defineComponent as I, ref as c, computed as t } from "vue";
+import { useAccessibilityApi as E } from "../../../composables/useAccessibilityApi.js";
+import { useConfig as O } from "../../../composables/useConfig.js";
+import { useExport as x } from "../../../composables/useExport.js";
+import { useTranslations as h } from "../../../composables/useTranslations.js";
+import { useVersionHistoryApi as B } from "../../../composables/useVersionHistoryApi.js";
+import { useAutosaveStore as M } from "../../../stores/autosave.js";
+import { useEditorStore as w } from "../../../stores/editor.js";
+import { getTooltipOptions as Z } from "../../../utils/tooltipUtils.js";
+import { InToggle as k, InIcons as D, InButtonV2 as F } from "@useinsider/design-system-vue";
+import { onClickOutside as N } from "../../../node_modules/@vueuse/core/index.js";
+const X = /* @__PURE__ */ I({
+  __name: "EditorActionsMenu",
+  setup(P) {
+    const v = "M14.8125 6.08473C15.332 5.94828 15.6875 6.47668 15.6875 6.95875C15.6873 7.44052 15.2498 7.66778 14.8125 7.8318C14.798 7.83727 14.7826 7.84147 14.7676 7.84547L12.3262 8.69898C12.013 8.81663 11.8784 8.93913 11.8486 8.99391L11.8467 8.99879C11.8153 9.05489 11.7235 9.29227 11.8379 10.0076L11.9961 11.238L12.8887 16.0154C12.8969 16.0521 12.9036 16.0895 12.9092 16.1267C12.9741 16.5696 12.6498 16.9997 12.0342 16.9998C11.4983 16.9998 11.2617 16.63 11.1592 16.1267C11.1592 16.1267 10.3701 11.8181 9.9873 11.8181C9.60444 11.8205 8.94137 15.6235 8.83887 16.1267C8.7363 16.63 8.49971 16.9998 7.96387 16.9998C7.34999 16.9996 7.02548 16.5711 7.08887 16.1296L7.0957 16.0955C7.09789 16.0818 7.09981 16.0676 7.10254 16.0545L7.9834 11.2371L8.1416 10.0066C8.17359 9.80644 8.26392 9.23379 8.15137 8.9441C8.11665 8.85389 8.0452 8.7492 7.7793 8.64723L5.17962 7.83495C5.17734 7.83424 5.17578 7.83212 5.17578 7.82972C5.17578 7.82745 5.17437 7.82541 5.17224 7.8246C4.74007 7.66146 4.31254 7.43412 4.3125 6.95777C4.31258 6.47553 4.66813 5.9482 5.1875 6.08473C5.26161 6.10405 5.33481 6.12744 5.40625 6.15504C6.12486 6.3593 8.37146 6.9607 9.98828 6.9607C11.7281 6.96068 14.1981 6.26431 14.707 6.115C14.7342 6.10658 14.7619 6.09917 14.7891 6.09156L14.7998 6.08766L14.8125 6.08473ZM9.70117 3.02906C9.99821 2.96998 10.3061 3.00106 10.5859 3.11695C10.8657 3.23286 11.1052 3.42866 11.2734 3.68043C11.4416 3.93217 11.5312 4.22828 11.5312 4.53101C11.5308 4.93693 11.369 5.326 11.082 5.61305C10.795 5.9001 10.406 6.06183 10 6.06226C9.69721 6.06226 9.40119 5.97264 9.14941 5.80445C8.89762 5.63621 8.70086 5.39673 8.58496 5.11695C8.46918 4.83725 8.439 4.52909 8.49805 4.23219C8.55716 3.93526 8.70292 3.6621 8.91699 3.44801C9.13112 3.23391 9.4042 3.08814 9.70117 3.02906Z", { config: i, isFeatureEnabled: n } = O(), { exportHtml: l } = x(), { openVersionHistory: C, closeVersionHistory: p } = B(), { toggleAccessibilityTestingMode: u } = E(), r = w(), m = M(), d = h(), f = c(!1), a = c(!1), A = c(null), y = t(() => n("autosave")), g = t(() => {
+      var o, e;
+      return !!((e = (o = i.value) == null ? void 0 : o.features) != null && e.versionHistory);
+    }), L = t(() => n("accessibilityTesting")), V = t(() => {
+      var o, e;
+      return !!((e = (o = i.value) == null ? void 0 : o.features) != null && e.saveAsTemplate);
+    }), s = () => {
+      f.value = !1;
+    }, b = () => {
+      r.isVersionHistoryOpen ? p() : C(), s();
+    }, _ = () => {
+      u(), s();
+    }, H = () => {
+      r.isSaveAsTemplateDrawerOpen = !0, s();
+    }, S = async () => {
+      a.value = !0, await l(), a.value = !1, s();
+    }, T = (o) => {
+      m.isOn = o;
+    };
+    return N(A, s), { __sfc: !0, ACCESSIBILITY_ICON_PATH: v, config: i, isFeatureEnabled: n, exportHtml: l, openVersionHistory: C, closeVersionHistory: p, toggleAccessibilityTestingMode: u, editorStore: r, autosaveStore: m, trans: d, isOpen: f, isExporting: a, root: A, isAutosaveVisible: y, isVersionHistoryVisible: g, isAccessibilityVisible: L, isSaveAsVisible: V, close: s, handleVersionHistory: b, handleAccessibility: _, handleSaveAs: H, handleExport: S, toggleAutosave: T, getTooltipOptions: Z, InButtonV2: F, InIcons: D, InToggle: k };
+  }
+});
+export {
+  X as default
+};

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

@@ -1,16 +1,16 @@
 import o from "./LeftSlot.vue2.js";
 /* empty css              */
-import a from "../../../_virtual/_plugin-vue2_normalizer.js";
-var n = function() {
+import n from "../../../_virtual/_plugin-vue2_normalizer.js";
+var a = function() {
   var e = this, s = e._self._c, t = e._self._setupProxy;
   return s("div", { staticClass: "d-f a-i-c" }, [s(t.InButtonV2, { attrs: { id: "guido__back-button", "left-icon": "line-arrow-left", styling: "ghost", type: "secondary", "disabled-status": t.isBackButtonDisabled, "label-text": t.backButtonLabel, "skeleton-sizing": { width: 150, height: 26 }, "skeleton-status": t.editorStore.loadingStatus }, on: { click: t.handleBackClick } })], 1);
-}, i = [], r = /* @__PURE__ */ a(
+}, i = [], r = /* @__PURE__ */ n(
   o,
-  n,
+  a,
   i,
   !1,
   null,
-  "73199fa4"
+  "2f127fb6"
 );
 const f = r.exports;
 export {

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

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

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

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

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

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

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

@@ -1,17 +1,18 @@
 import s from "./RightSlot.vue2.js";
+/* empty css               */
 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(
+  var e = this, i = e._self._c, t = e._self._setupProxy;
+  return i("div", { staticClass: "d-f a-i-c right-slot" }, [t.isNormalMode ? i(t.AutoSaveStatus) : e._e(), t.isLiquidEnabled && t.isNormalMode ? i(t.InChips, { 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") } }) : e._e(), t.isNormalMode ? i(t.EditorActions, { ref: "editorActionsRef" }) : t.editorStore.isVersionHistoryOpen ? i(t.RestoreButton) : e._e()], 1);
+}, a = [], d = /* @__PURE__ */ o(
   s,
   r,
   a,
   !1,
   null,
-  null
+  "1ad38e93"
 );
-const u = n.exports;
+const c = d.exports;
 export {
-  u as default
+  c as default
 };

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

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

package/dist/components/organisms/header/accessibility/AccessibilityToolbar.vue.js

@@ -0,0 +1,18 @@
+import i from "./AccessibilityToolbar.vue2.js";
+/* empty css                          */
+import s 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 a-i-c accessibility-toolbar" }, [e(t.InButtonV2, { attrs: { id: "guido__a11y-no-images", "data-testid": "Accessibility No Images", "left-icon": "line-image", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.loadingStatus, "label-text-status": !1, "selected-status": t.editorStore.imagesHidden, "tooltip-options": t.getTooltipOptions("guido__a11y-no-images"), "tooltip-text": t.imagesTooltip }, on: { click: t.toggleImages } }), e(t.InButtonV2, { attrs: { id: "guido__a11y-code", "data-testid": "Accessibility Code Editor", "left-icon": "line-code", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.loadingStatus, "label-text-status": !1, "selected-status": t.editorStore.isCodeEditorOpen, "tooltip-options": t.getTooltipOptions("guido__a11y-code"), "tooltip-text": t.trans("newsletter.html-editor") }, on: { click: t.toggleCodeEditor } }), e(t.ColorVisionSelect), e(t.InSegments, { attrs: { id: "guido__a11y-view-selection", "with-icon": "", "segment-list": t.segmentList, selected: t.editorStore.editorVisualMode }, on: { click: t.handleView } })], 1);
+}, l = [], n = /* @__PURE__ */ s(
+  i,
+  a,
+  l,
+  !1,
+  null,
+  "4e1e854b"
+);
+const _ = n.exports;
+export {
+  _ as default
+};

package/dist/components/organisms/header/accessibility/AccessibilityToolbar.vue2.js

@@ -0,0 +1,37 @@
+import { defineComponent as d, computed as n } from "vue";
+import { useAccessibilityApi as c } from "../../../../composables/useAccessibilityApi.js";
+import { useTranslations as g } from "../../../../composables/useTranslations.js";
+import { useEditorStore as u } from "../../../../stores/editor.js";
+import { getTooltipOptions as e } from "../../../../utils/tooltipUtils.js";
+import { InSegments as _, InButtonV2 as f } from "@useinsider/design-system-vue";
+import w from "./ColorVisionSelect.vue.js";
+const A = /* @__PURE__ */ d({
+  __name: "AccessibilityToolbar",
+  setup(b) {
+    const t = u(), o = g(), {
+      toggleImages: r,
+      toggleCodeEditor: m,
+      switchToDesktopPreview: i,
+      switchToMobilePreview: s
+    } = c(), l = n(() => [
+      {
+        text: "",
+        icon: "line-desktop",
+        value: "desktop",
+        tooltipText: o("newsletter.desktop"),
+        tooltipOptions: e("guido__a11y-view-desktop")
+      },
+      {
+        text: "",
+        icon: "line-menu-mobileapp",
+        value: "mobile",
+        tooltipText: o("newsletter.mobile"),
+        tooltipOptions: e("guido__a11y-view-mobile")
+      }
+    ]), p = n(() => t.imagesHidden ? o("email-editor.a11y-show-images") : o("email-editor.a11y-hide-images"));
+    return { __sfc: !0, editorStore: t, trans: o, toggleImages: r, toggleCodeEditor: m, switchToDesktopPreview: i, switchToMobilePreview: s, segmentList: l, imagesTooltip: p, handleView: (a) => a === "mobile" ? s() : i(), getTooltipOptions: e, InButtonV2: f, InSegments: _, ColorVisionSelect: w };
+  }
+});
+export {
+  A as default
+};