@useinsider/guido 3.11.0-beta.04c9b87 → 3.11.0-beta.181af4d

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

@@ -1,5 +1,5 @@
 import { ModuleFolderDefaults as S } from "../../enums/defaults.js";
-import { object as a, number as s, optional as e, string as t, picklist as l, pipe as p, minLength as b, custom as h, boolean as o, array as c, record as k, literal as i, looseObject as y, variant as g, union as f, unknown as n } from "../../node_modules/valibot/dist/index.js";
+import { object as a, number as s, optional as e, string as t, picklist as i, pipe as p, minLength as b, custom as y, boolean as o, array as c, record as h, literal as l, looseObject as k, variant as g, union as f, unknown as n } from "../../node_modules/valibot/dist/index.js";
 const d = {
   /** Promotional/marketing emails */
   PROMOTIONAL: 1,
@@ -38,7 +38,7 @@ const d = {
   ),
   /** Product type identifier */
   productType: e(
-    l([
+    i([
       r.EMAIL,
       r.ARCHITECT,
       r.UNSUBSCRIBE_PAGES
@@ -47,7 +47,7 @@ const d = {
   ),
   /** Message type (promotional or transactional) */
   messageType: e(
-    l([d.PROMOTIONAL, d.TRANSACTIONAL]),
+    i([d.PROMOTIONAL, d.TRANSACTIONAL]),
     d.PROMOTIONAL
   ),
   /** Display name for the current user */
@@ -68,7 +68,7 @@ const d = {
       value: t()
     })
   )
-}), I = y({
+}), I = k({
   /** Block ID (matches the dictionary key and the legacy HTML element id) */
   id: e(s()),
   /** Decimal places for price display (legacy data may use string or number) */
@@ -121,7 +121,7 @@ const d = {
    * strategy, currency, locale, and layout data.
    */
   recommendationConfigs: e(
-    k(t(), I),
+    h(t(), I),
     {}
   )
 }), P = a({
@@ -183,8 +183,10 @@ const d = {
   /** Enable Liquid template syntax */
   liquidSyntax: e(o(), !1),
   /** Enable autosave (3-min interval + tab-hide). User toggles on/off from the header. */
-  autosave: e(o(), !1)
-}), N = l([
+  autosave: e(o(), !1),
+  /** Enable the Stripo Accessibility Checker control in the editor toolbar. */
+  accessibilityTesting: e(o(), !1)
+}), N = i([
   "amp-accordion",
   "amp-carousel",
   "amp-form-controls",
@@ -198,7 +200,7 @@ const d = {
   "text-block",
   "timer-block",
   "video-block"
-]), D = l([
+]), D = i([
   "dynamic-content",
   "checkbox-block",
   "radio-button-block",
@@ -226,7 +228,7 @@ const d = {
   priority: s()
 }), F = a({
   ...m.entries,
-  type: i("replace"),
+  type: l("replace"),
   /** String to search for */
   search: t(),
   /** Replacement string */
@@ -235,7 +237,7 @@ const d = {
   replaceAll: e(o())
 }), U = a({
   ...m.entries,
-  type: i("regex"),
+  type: l("regex"),
   /** Regex pattern string */
   pattern: t(),
   /** Replacement string (supports $1, $2, etc.) */
@@ -244,14 +246,14 @@ const d = {
   flags: e(t())
 }), B = a({
   ...m.entries,
-  type: i("remove"),
+  type: l("remove"),
   /** Strings or patterns to remove */
   targets: c(t())
 }), w = a({
   ...m.entries,
-  type: i("custom"),
+  type: l("custom"),
   /** Custom processor function */
-  processor: h(
+  processor: y(
     (u) => typeof u == "function",
     "processor must be a function"
   )
@@ -271,7 +273,7 @@ const d = {
    * Return false to cancel the save operation.
    */
   externalValidation: e(
-    h(
+    y(
       (u) => typeof u == "function",
       "externalValidation must be a function"
     )

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

@@ -0,0 +1,17 @@
+import e from "./AutoSaveStatus.vue2.js";
+import r from "../../../_virtual/_plugin-vue2_normalizer.js";
+var n = function() {
+  var s = this, t = s._self._c, a = s._self._setupProxy;
+  return a.isFeatureEnabled("autosave") ? t("div", { staticClass: "d-f a-i-c mr-3 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__ */ r(
+  e,
+  n,
+  _,
+  !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,21 +1,21 @@
-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 l = function() {
+  var i, s;
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o("div", { staticClass: "d-f a-i-c editor-actions" }, [(s = (i = t.config) == null ? void 0 : i.features) != null && s.testMessage && !t.editorStore.isPreviewModeOpen ? o(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() : o(t.EditorActionsMenu), t.editorStore.isPreviewModeOpen ? e._e() : o(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(n) {
     return t.handleSave(!1);
-  } } }), e(t.MigrationConfirmModal, { ref: "migrationModalRef", on: { confirm: function(r) {
+  } } }), o(t.MigrationConfirmModal, { ref: "migrationModalRef", on: { confirm: function(n) {
     return t.executeSave(!1);
   } } })], 1);
-}, p = [], c = /* @__PURE__ */ d(
+}, d = [], c = /* @__PURE__ */ a(
+  r,
   l,
-  u,
-  p,
+  d,
   !1,
   null,
-  "82128f7d"
+  "d51fb931"
 );
 const v = c.exports;
 export {

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 s = this, e = s._self._c, t = s._self._setupProxy;
+  return e("div", { ref: "root", staticClass: "editor-actions-menu p-r" }, [e(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(l) {
+    t.isOpen = !t.isOpen;
+  } } }), t.isOpen ? e("div", { staticClass: "editor-actions-menu__panel p-a" }, [t.isAutosaveVisible ? [e("p", { staticClass: "editor-actions-menu__section f-s-1 t-c-55" }, [s._v(" " + s._s(t.trans("email-editor.preferences")) + " ")]), e("div", { staticClass: "editor-actions-menu__row editor-actions-menu__row_static d-f a-i-c j-c-s-b" }, [e("span", { staticClass: "f-s-2" }, [s._v(s._s(t.trans("email-editor.auto-save")))]), e(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), e("div", { staticClass: "editor-actions-menu__divider" })] : s._e(), e("p", { staticClass: "editor-actions-menu__section f-s-1 t-c-55" }, [s._v(" " + s._s(t.trans("email-editor.actions")) + " ")]), t.isVersionHistoryVisible ? e("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 } }, [e(t.InIcons, { staticClass: "mr-2", attrs: { name: "line-architect-version-history", size: "16" } }), e("span", { staticClass: "f-s-2" }, [s._v(s._s(t.trans("newsletter.version-history")))])], 1) : s._e(), t.isAccessibilityVisible ? e("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 } }, [e(t.InIcons, { staticClass: "mr-2", attrs: { name: "line-menu-access-area", size: "16" } }), e("span", { staticClass: "f-s-2" }, [s._v(s._s(t.trans("email-editor.accessibility-test")))])], 1) : s._e(), t.isSaveAsVisible ? e("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 } }, [e(t.InIcons, { staticClass: "mr-2", attrs: { name: "line-newsletter-save-as-template", size: "16" } }), e("span", { staticClass: "f-s-2" }, [s._v(s._s(t.trans("newsletter.save-templates")))])], 1) : s._e(), e("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 } }, [e(t.InIcons, { staticClass: "mr-2", attrs: { name: "line-export", size: "16" } }), e("span", { staticClass: "f-s-2" }, [s._v(s._s(t.trans("newsletter.export")))])], 1)], 2) : s._e()], 1);
+}, n = [], r = /* @__PURE__ */ a(
+  i,
+  o,
+  n,
+  !1,
+  null,
+  "287a74e3"
+);
+const b = r.exports;
+export {
+  b as default
+};

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

@@ -0,0 +1,39 @@
+import { defineComponent as O, ref as c, computed as t } from "vue";
+import { useAccessibilityApi as x } from "../../../composables/useAccessibilityApi.js";
+import { useConfig as h } from "../../../composables/useConfig.js";
+import { useExport as I } from "../../../composables/useExport.js";
+import { useTranslations as B } from "../../../composables/useTranslations.js";
+import { useVersionHistoryApi as C } from "../../../composables/useVersionHistoryApi.js";
+import { useAutosaveStore as w } from "../../../stores/autosave.js";
+import { useEditorStore as M } from "../../../stores/editor.js";
+import { getTooltipOptions as k } from "../../../utils/tooltipUtils.js";
+import { InToggle as D, InIcons as F, InButtonV2 as j } from "@useinsider/design-system-vue";
+import { onClickOutside as q } from "../../../node_modules/@vueuse/core/index.js";
+const Y = /* @__PURE__ */ O({
+  __name: "EditorActionsMenu",
+  setup(z) {
+    const { config: i, isFeatureEnabled: n } = h(), { exportHtml: l } = I(), { openVersionHistory: p, closeVersionHistory: u } = C(), { toggleAccessibilityTestingMode: m } = x(), r = M(), f = w(), d = B(), v = 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);
+    }), V = t(() => n("accessibilityTesting")), b = t(() => {
+      var o, e;
+      return !!((e = (o = i.value) == null ? void 0 : o.features) != null && e.saveAsTemplate);
+    }), s = () => {
+      v.value = !1;
+    }, H = () => {
+      r.isVersionHistoryOpen ? u() : p(), s();
+    }, _ = () => {
+      m(), s();
+    }, S = () => {
+      r.isSaveAsTemplateDrawerOpen = !0, s();
+    }, T = async () => {
+      a.value = !0, await l(), a.value = !1, s();
+    }, E = (o) => {
+      f.isOn = o;
+    };
+    return q(A, s), { __sfc: !0, config: i, isFeatureEnabled: n, exportHtml: l, openVersionHistory: p, closeVersionHistory: u, toggleAccessibilityTestingMode: m, editorStore: r, autosaveStore: f, trans: d, isOpen: v, isExporting: a, root: A, isAutosaveVisible: y, isVersionHistoryVisible: g, isAccessibilityVisible: V, isSaveAsVisible: b, close: s, handleVersionHistory: H, handleAccessibility: _, handleSaveAs: S, handleExport: T, toggleAutosave: E, getTooltipOptions: k, InButtonV2: j, InIcons: F, InToggle: D };
+  }
+});
+export {
+  Y as default
+};

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

@@ -10,9 +10,9 @@ var s = function() {
   d,
   !1,
   null,
-  "5c02dcc7"
+  "d11dd577"
 );
-const p = i.exports;
+const c = i.exports;
 export {
-  p as default
+  c as default
 };

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

@@ -8,6 +8,8 @@ const c = /* @__PURE__ */ n({
   setup(l, { expose: r }) {
     const e = m(null);
     return r({
+      // Stryker disable next-line OptionalChaining: RightSlot is always rendered (no
+      // v-if), so rightSlotRef.value is never null and `?.` cannot short-circuit.
       handleSave: (t) => {
         var o;
         return (o = e.value) == null ? void 0 : o.handleSave(t);

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

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

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

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

@@ -0,0 +1,18 @@
+import o from "./AccessibilityToolbar.vue2.js";
+/* empty css                          */
+import s from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var a = function() {
+  var i = this, e = i._self._c, t = i._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("div", { staticClass: "accessibility-toolbar__divider" }), e(t.ColorVisionSelect), e(t.InSegments, { staticClass: "ml-2", attrs: { id: "guido__a11y-view-selection", "with-icon": "", "segment-list": t.segmentList, selected: t.editorStore.editorVisualMode }, on: { click: t.handleView } })], 1);
+}, l = [], d = /* @__PURE__ */ s(
+  o,
+  a,
+  l,
+  !1,
+  null,
+  "e222d603"
+);
+const g = d.exports;
+export {
+  g 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
+};

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

@@ -0,0 +1,24 @@
+import i from "./ColorVisionSelect.vue2.js";
+/* empty css                       */
+import n from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var l = function() {
+  var e = this, t = e._self._c, s = e._self._setupProxy;
+  return t("div", { ref: "root", staticClass: "color-vision-select p-r" }, [t("button", { staticClass: "color-vision-select__trigger d-f a-i-c", attrs: { id: "guido__a11y-color-vision-trigger", type: "button", disabled: s.editorStore.loadingStatus }, on: { click: function(o) {
+    s.isOpen = !s.isOpen;
+  } } }, [t(s.InIcons, { staticClass: "mr-2", attrs: { name: "line-show-on", size: "16" } }), t("span", { staticClass: "color-vision-select__label f-s-2" }, [e._v(e._s(s.selectedLabel))]), t(s.InIcons, { staticClass: "ml-2", attrs: { name: "line-chevron-small-down", size: "16" } })], 1), s.isOpen ? t("div", { staticClass: "color-vision-select__menu p-a" }, e._l(s.OPTIONS, function(o) {
+    return t("button", { key: o.value || "none", staticClass: "color-vision-select__option d-f f-d-c", class: { "color-vision-select__option_selected": o.value === s.editorStore.colorVisionDeficiency }, attrs: { type: "button" }, on: { click: function(_) {
+      return s.select(o.value);
+    } } }, [t("span", { staticClass: "color-vision-select__option-label f-s-2" }, [e._v(e._s(s.trans(o.labelKey)))]), o.descriptionKey ? t("span", { staticClass: "color-vision-select__option-description f-s-1 t-c-55" }, [e._v(" " + e._s(s.trans(o.descriptionKey)) + " ")]) : e._e()]);
+  }), 0) : e._e()]);
+}, c = [], r = /* @__PURE__ */ n(
+  i,
+  l,
+  c,
+  !1,
+  null,
+  "383f6378"
+);
+const p = r.exports;
+export {
+  p as default
+};

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

@@ -0,0 +1,48 @@
+import { defineComponent as p, ref as c, computed as m } from "vue";
+import { useAccessibilityApi as u } from "../../../../composables/useAccessibilityApi.js";
+import { useTranslations as v } from "../../../../composables/useTranslations.js";
+import { useEditorStore as f } from "../../../../stores/editor.js";
+import { InIcons as y } from "@useinsider/design-system-vue";
+import { onClickOutside as K } from "../../../../node_modules/@vueuse/core/index.js";
+const V = /* @__PURE__ */ p({
+  __name: "ColorVisionSelect",
+  setup(b) {
+    const e = [
+      {
+        value: "",
+        labelKey: "email-editor.cvd-none"
+      },
+      {
+        value: "protanopia",
+        labelKey: "email-editor.cvd-protanopia",
+        descriptionKey: "email-editor.cvd-protanopia-description"
+      },
+      {
+        value: "deuteranopia",
+        labelKey: "email-editor.cvd-deuteranopia",
+        descriptionKey: "email-editor.cvd-deuteranopia-description"
+      },
+      {
+        value: "tritanopia",
+        labelKey: "email-editor.cvd-tritanopia",
+        descriptionKey: "email-editor.cvd-tritanopia-description"
+      },
+      {
+        value: "achromatopsia",
+        labelKey: "email-editor.cvd-achromatopsia",
+        descriptionKey: "email-editor.cvd-achromatopsia-description"
+      }
+    ], t = f(), a = v(), { setColorVisionDeficiency: r } = u(), o = c(!1), n = c(null), s = m(() => {
+      const i = e.find((d) => d.value === t.colorVisionDeficiency) ?? e[0];
+      return a(i.labelKey);
+    }), l = (i) => {
+      r(i), o.value = !1;
+    };
+    return K(n, () => {
+      o.value = !1;
+    }), { __sfc: !0, OPTIONS: e, editorStore: t, trans: a, setColorVisionDeficiency: r, isOpen: o, root: n, selectedLabel: s, select: l, InIcons: y };
+  }
+});
+export {
+  V as default
+};