@useinsider/guido 3.17.0-beta.bc6e089 → 3.17.0-beta.c3ab4de

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

@@ -0,0 +1,24 @@
+import n from "./ColorVisionSelect.vue2.js";
+/* empty css                       */
+import i from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var l = function() {
+  var t = this, o = t._self._c, e = t._self._setupProxy;
+  return o("div", { ref: "root", staticClass: "color-vision-select p-r" }, [o(e.InButtonV2, { attrs: { id: "guido__a11y-color-vision-trigger", "left-icon": "line-show-on", "right-icon": "line-chevron-small-down", type: "secondary", "disabled-status": e.editorStore.loadingStatus, "label-text": e.selectedLabel }, on: { click: function(s) {
+    e.isOpen = !e.isOpen;
+  } } }), e.isOpen ? o("div", { staticClass: "color-vision-select__menu p-a" }, t._l(e.OPTIONS, function(s) {
+    return o("button", { key: s.value || "none", staticClass: "color-vision-select__option d-f f-d-c", class: { "color-vision-select__option_selected": s.value === e.editorStore.colorVisionDeficiency }, attrs: { type: "button" }, on: { click: function(_) {
+      return e.select(s.value);
+    } } }, [o("span", { staticClass: "color-vision-select__option-label f-s-2" }, [t._v(t._s(e.trans(s.labelKey)))]), s.descriptionKey ? o("span", { staticClass: "color-vision-select__option-description f-s-1 t-c-53" }, [t._v(" " + t._s(e.trans(s.descriptionKey)) + " ")]) : t._e()]);
+  }), 0) : t._e()], 1);
+}, r = [], c = /* @__PURE__ */ i(
+  n,
+  l,
+  r,
+  !1,
+  null,
+  "869e2871"
+);
+const f = c.exports;
+export {
+  f 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 { InButtonV2 as y } from "@useinsider/design-system-vue";
+import { onClickOutside as K } from "../../../../node_modules/@vueuse/core/index.js";
+const A = /* @__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), l = m(() => {
+      const i = e.find((d) => d.value === t.colorVisionDeficiency) ?? e[0];
+      return a(i.labelKey);
+    }), s = (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: l, select: s, InButtonV2: y };
+  }
+});
+export {
+  A as default
+};

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

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

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

@@ -0,0 +1,74 @@
+import { defineComponent as p, computed as d, watch as x } from "vue";
+import { useRibbonOffset as B } from "../../../composables/useRibbonOffset.js";
+import { useTranslations as m } from "../../../composables/useTranslations.js";
+import { useOnboardingStore as k } from "../../../stores/onboarding.js";
+import { InOnboard as T } from "@useinsider/design-system-vue";
+const y = /* @__PURE__ */ p({
+  __name: "EditorTabBarOnboarding",
+  setup(f) {
+    const n = "editorTabBarOnboarding", t = m(), i = k(), { getTopPosition: a } = B(), r = () => i.next(n), c = () => i.previous(n), s = () => void i.close(n), b = d(() => [
+      {
+        classes: "guido-tab-bar-onboarding",
+        right: "150px",
+        top: a(56),
+        position: "Right Top",
+        title: t("email-editor.onboarding-kebab-title"),
+        description: t("email-editor.onboarding-kebab-description"),
+        imageSource: "",
+        backButtonClick: () => {
+        },
+        nextButtonType: "text",
+        nextButtonText: t("action-builder.next"),
+        nextButtonClick: r
+      },
+      {
+        classes: "guido-tab-bar-onboarding",
+        right: "320px",
+        top: a(56),
+        position: "Right Top",
+        title: t("email-editor.onboarding-autosave-title"),
+        description: t("email-editor.onboarding-autosave-description"),
+        imageSource: "",
+        backButtonType: "text",
+        backButtonText: t("action-builder.back"),
+        backButtonClick: c,
+        nextButtonType: "text",
+        nextButtonText: t("action-builder.next"),
+        nextButtonClick: r
+      },
+      {
+        classes: "guido-tab-bar-onboarding",
+        right: "150px",
+        top: a(56),
+        position: "Right Top",
+        title: t("email-editor.onboarding-accessibility-title"),
+        description: t("email-editor.onboarding-accessibility-description"),
+        imageSource: "",
+        backButtonType: "text",
+        backButtonText: t("action-builder.back"),
+        backButtonClick: c,
+        nextButtonType: "text",
+        nextButtonText: t("action-builder.ok"),
+        nextButtonClick: s
+      }
+    ]), u = d(
+      () => i.onboardings.editorTabBarOnboarding.config.length > 0 && i.onboardings.editorTabBarOnboarding.isActive
+    ), g = () => {
+      var o, e;
+      (e = (o = i.getEditorTabBarCurrentCard) == null ? void 0 : o.nextButtonClick) == null || e.call(o);
+    }, l = () => {
+      var o, e;
+      (e = (o = i.getEditorTabBarCurrentCard) == null ? void 0 : o.backButtonClick) == null || e.call(o);
+    };
+    return x(
+      () => i.onboardings.editorTabBarOnboarding.isActive,
+      (o) => {
+        o && i.setConfig(n, b.value);
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, ONBOARDING: n, trans: t, onboardingStore: i, getTopPosition: a, goNext: r, goBack: c, finish: s, onboardingCardsConfig: b, isVisible: u, handleNext: g, handleBack: l, InOnboard: T };
+  }
+});
+export {
+  y as default
+};

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

@@ -1,46 +1,55 @@
-import { defineComponent as b, computed as e, onMounted as O, watch as t } from "vue";
-import u from "./AMPOnboarding.vue.js";
-import v from "./GenericOnboarding.vue.js";
-import l from "./ItemsOnboarding.vue.js";
-import y from "./NewVersionPopup.vue.js";
-import S from "./TextBlockOnboarding.vue.js";
-import h from "./VersionHistoryOnboarding.vue.js";
-import { usePartner as w } from "../../../composables/usePartner.js";
-import { useEditorStore as P } from "../../../stores/editor.js";
-import { useOnboardingStore as _ } from "../../../stores/onboarding.js";
-import { usePreviewStore as A } from "../../../stores/preview.js";
-const G = /* @__PURE__ */ b({
+import { defineComponent as O, computed as a, onMounted as u, watch as e } from "vue";
+import l from "./AMPOnboarding.vue.js";
+import v from "./EditorTabBarOnboarding.vue.js";
+import y from "./GenericOnboarding.vue.js";
+import S from "./ItemsOnboarding.vue.js";
+import h from "./NewVersionPopup.vue.js";
+import w from "./TextBlockOnboarding.vue.js";
+import P from "./VersionHistoryOnboarding.vue.js";
+import { useConfig as A } from "../../../composables/useConfig.js";
+import { usePartner as T } from "../../../composables/usePartner.js";
+import { useEditorStore as _ } from "../../../stores/editor.js";
+import { useOnboardingStore as H } from "../../../stores/onboarding.js";
+import { usePreviewStore as B } from "../../../stores/preview.js";
+const j = /* @__PURE__ */ O({
   __name: "OnboardingWrapper",
   emits: ["onboarding-finished"],
-  setup(H, { emit: f }) {
-    const o = _(), r = P(), s = A(), { isTestPartner: a } = w(), p = e(() => r.isStripoInitialized), d = e(() => a()), m = [
-      { type: "newVersionPopup", component: y },
-      { type: "genericOnboarding", component: v },
-      { type: "textBlockOnboarding", component: S },
-      { type: "versionHistoryOnboarding", component: h },
-      { type: "ampOnboarding", component: u },
-      { type: "itemsOnboarding", component: l }
-    ], c = (n) => d.value || !p.value ? !1 : n === "newVersionPopup" ? o.shouldShowOnboarding(n) : o.isActive(n), g = e(() => m.filter((n) => c(n.type)));
-    return O(async () => {
+  setup(M, { emit: g }) {
+    const o = H(), i = _(), d = B(), { isTestPartner: p } = T(), { isFeatureEnabled: m } = A(), t = a(() => i.isStripoInitialized), s = a(() => p()), b = [
+      { type: "newVersionPopup", component: h },
+      { type: "genericOnboarding", component: y },
+      { type: "textBlockOnboarding", component: w },
+      { type: "versionHistoryOnboarding", component: P },
+      { type: "ampOnboarding", component: l },
+      { type: "itemsOnboarding", component: S },
+      { type: "editorTabBarOnboarding", component: v }
+    ], c = (n) => s.value || !t.value ? !1 : n === "newVersionPopup" ? o.shouldShowOnboarding(n) : o.isActive(n), f = a(() => b.filter((n) => c(n.type)));
+    return u(async () => {
       await o.fetchUserModalState();
-    }), t(
-      () => r.isVersionHistoryOpen,
-      (n, i) => {
-        n && !i && o.shouldShowOnboarding("versionHistoryOnboarding") && o.start("versionHistoryOnboarding"), !n && i && o.isActive("versionHistoryOnboarding") && o.close("versionHistoryOnboarding");
+    }), e(
+      () => i.isVersionHistoryOpen,
+      (n, r) => {
+        n && !r && o.shouldShowOnboarding("versionHistoryOnboarding") && o.start("versionHistoryOnboarding"), !n && r && o.isActive("versionHistoryOnboarding") && o.close("versionHistoryOnboarding");
       }
-    ), t(
-      () => s.emailFormat,
-      (n, i) => {
-        i !== "AMP" && n === "AMP" && o.shouldShowOnboarding("ampOnboarding") && o.start("ampOnboarding");
+    ), e(
+      () => d.emailFormat,
+      (n, r) => {
+        r !== "AMP" && n === "AMP" && o.shouldShowOnboarding("ampOnboarding") && o.start("ampOnboarding");
       }
-    ), t(
-      () => r.isPreviewModeOpen,
+    ), e(
+      () => i.isPreviewModeOpen,
       (n) => {
         !n && o.isActive("ampOnboarding") && o.close("ampOnboarding");
       }
-    ), { __sfc: !0, emit: f, onboardingStore: o, editorStore: r, previewStore: s, isTestPartner: a, isStripoReady: p, isTestPartnerActive: d, onboardingConfigs: m, shouldShow: c, visibleOnboardings: g };
+    ), e(
+      t,
+      (n) => {
+        n && m("accessibilityTesting") && !s.value && !o.isOnboardingActive() && o.shouldShowOnboarding("editorTabBarOnboarding") && o.start("editorTabBarOnboarding");
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, emit: g, onboardingStore: o, editorStore: i, previewStore: d, isTestPartner: p, isFeatureEnabled: m, isStripoReady: t, isTestPartnerActive: s, onboardingConfigs: b, shouldShow: c, visibleOnboardings: f };
   }
 });
 export {
-  G as default
+  j as default
 };

package/dist/composables/useAccessibilityApi.js

@@ -0,0 +1,31 @@
+import { useEditorStore as r } from "../stores/editor.js";
+const A = () => {
+  const e = r(), i = () => window.StripoEditorApi.accessibilityApi, s = () => {
+    i().openAccessibilityTestingMode(), e.isAccessibilityTestingOpen = !0;
+  }, o = () => {
+    i().closeAccessibilityTestingMode(), e.isAccessibilityTestingOpen = !1, e.imagesHidden = !1, e.colorVisionDeficiency = "";
+  }, g = () => e.isAccessibilityTestingOpen ? o() : s(), l = () => i().isAccessibilityTestingModeOpen(), t = () => {
+    i().showImages(), e.imagesHidden = !1;
+  }, c = () => {
+    i().hideImages(), e.imagesHidden = !0;
+  };
+  return {
+    openAccessibilityTestingMode: s,
+    closeAccessibilityTestingMode: o,
+    toggleAccessibilityTestingMode: g,
+    isAccessibilityTestingModeOpen: l,
+    showImages: t,
+    hideImages: c,
+    toggleImages: () => e.imagesHidden ? t() : c(),
+    setColorVisionDeficiency: (n) => {
+      i().setColorVisionDeficiency(n), e.colorVisionDeficiency = n;
+    },
+    getColorVisionDeficiency: () => i().getColorVisionDeficiency(),
+    switchToDesktopPreview: () => i().switchToDesktopPreview(),
+    switchToMobilePreview: () => i().switchToMobilePreview(),
+    toggleCodeEditor: () => i().emitToggleCodeEditor()
+  };
+};
+export {
+  A as useAccessibilityApi
+};

package/dist/composables/useCustomInterfaceAppearance.js

@@ -2,60 +2,63 @@ import S from "../static/assets/icons/line-change.svg.js";
 import i from "../static/assets/icons/line-delete.svg.js";
 import n from "../static/assets/icons/line-plus.svg.js";
 import p from "../static/styles/base.css.js";
-import s from "../static/styles/components/alert-message.css.js";
-import C from "../static/styles/components/amp-block.css.js";
-import a from "../static/styles/components/base-input.css.js";
-import f from "../static/styles/components/button-group.css.js";
-import c from "../static/styles/components/button.css.js";
-import u from "../static/styles/components/combobox.css.js";
-import l from "../static/styles/components/counter.css.js";
-import d from "../static/styles/components/dropdown-menu.css.js";
-import h from "../static/styles/components/loader.css.js";
-import g from "../static/styles/components/narrow-panel.css.js";
+import s from "../static/styles/components/accessibility.css.js";
+import C from "../static/styles/components/alert-message.css.js";
+import c from "../static/styles/components/amp-block.css.js";
+import f from "../static/styles/components/base-input.css.js";
+import a from "../static/styles/components/button-group.css.js";
+import u from "../static/styles/components/button.css.js";
+import l from "../static/styles/components/combobox.css.js";
+import d from "../static/styles/components/counter.css.js";
+import h from "../static/styles/components/dropdown-menu.css.js";
+import g from "../static/styles/components/loader.css.js";
+import y from "../static/styles/components/narrow-panel.css.js";
 import I from "../static/styles/components/popup.css.js";
-import w from "../static/styles/components/recommendation-strategy.css.js";
-import y from "../static/styles/components/switcher.css.js";
-import b from "../static/styles/components/tabs.css.js";
-import B from "../static/styles/components/tools.css.js";
-import $ from "../static/styles/components/version-history.css.js";
+import b from "../static/styles/components/recommendation-strategy.css.js";
+import w from "../static/styles/components/switcher.css.js";
+import B from "../static/styles/components/tabs.css.js";
+import $ from "../static/styles/components/tools.css.js";
+import A from "../static/styles/components/version-history.css.js";
 import P from "../static/styles/components/wide-panel.css.js";
 import x from "../static/styles/variables.css.js";
 function r(t, o) {
   return `--guido-icon-${t}: url("data:image/svg+xml,${encodeURIComponent(o.trim())}");`;
 }
-const A = `:host {
+const R = `:host {
     ${r("line-change", S)}
     ${r("line-delete", i)}
     ${r("line-plus", n)}
-}`, R = [
+}`, V = [
   x,
   // Must be on top
-  A,
+  R,
   p,
   // Must be on top
-  s,
   C,
-  a,
-  f,
   c,
+  f,
+  a,
   u,
   l,
   d,
   h,
   g,
-  I,
   y,
-  b,
+  I,
+  w,
   B,
   $,
+  A,
   P,
-  w
-  // Last: overrides button.css / wide-panel.css defaults
+  b,
+  // Overrides button.css / wide-panel.css defaults
+  s
+  // Last: overrides button.css / tabs.css / tools.css defaults
 ].join(`
 
-`), Y = () => ({ importCss: () => {
+`), _ = () => ({ importCss: () => {
   const o = new CSSStyleSheet();
-  o.replaceSync(R);
+  o.replaceSync(V);
   const e = document.querySelector("ui-editor");
   if (!e)
     return;
@@ -63,5 +66,5 @@ const A = `:host {
   m && (m.adoptedStyleSheets = [o]);
 } });
 export {
-  Y as useCustomInterfaceAppearance
+  _ as useCustomInterfaceAppearance
 };

package/dist/config/i18n/en/labels.json.js

@@ -1,19 +1,43 @@
-const e = "Items", o = "Default", t = "Custom", s = {
+const e = "Items", o = "Default", i = "Custom", t = {
   "Global Styles & Layout": "Global Styles and Layout",
   "Structures & Modules": "Structures and Modules",
   "Recommendation Block": "Recommendation Block",
   Items: e,
   "This block is switched from the Old Version to the New Version. We recommend you check the Recommendation block and test your message to ensure it works properly.": "This block is switched from the Old Version to the New Version. We recommend you check the Recommendation block and test your message to ensure it works properly.",
   "This block is switched from the Old Version to the New Version. We recommend you check the Items block and test your message to ensure it works properly.": "This block is switched from the Old Version to the New Version. We recommend you check the Items block and test your message to ensure it works properly.",
+  "email-editor.a11y-hide-images": "Hide images",
+  "email-editor.a11y-show-images": "Show images",
+  "email-editor.cvd-none": "No Color Deficiency",
+  "email-editor.cvd-protanopia": "Protanopia",
+  "email-editor.cvd-protanopia-description": "Causes red-green confusion and makes reds appear darker.",
+  "email-editor.cvd-deuteranopia": "Deuteranopia",
+  "email-editor.cvd-deuteranopia-description": "Causes red-green confusion.",
+  "email-editor.cvd-tritanopia": "Tritanopia",
+  "email-editor.cvd-tritanopia-description": "Causes blue-yellow confusion.",
+  "email-editor.cvd-achromatopsia": "Achromatopsia",
+  "email-editor.cvd-achromatopsia-description": "Causes complete color blindness.",
+  "email-editor.more-actions": "More actions",
+  "email-editor.preferences": "Preferences",
+  "email-editor.actions": "Actions",
+  "email-editor.accessibility-test": "Accessibility Test",
+  "email-editor.autosaved-at-today": '<span class="f-w-600">Autosaved</span> at {time}, Today',
+  "email-editor.autosaved-at-date": '<span class="f-w-600">Autosaved</span> at {date}',
+  "email-editor.export-html": "Export HTML",
+  "email-editor.onboarding-kebab-title": "Discover Preferences and Actions",
+  "email-editor.onboarding-kebab-description": "You can now access your Preferences and Actions easily such as Autosave, Export HTML, Version History, Accessibility Test and Save As Template.",
+  "email-editor.onboarding-autosave-title": "Autosave Your Design",
+  "email-editor.onboarding-autosave-description": "You can save your design automatically by enabling Autosave without losing your work.",
+  "email-editor.onboarding-accessibility-title": "Test Accessibility of Your Design",
+  "email-editor.onboarding-accessibility-description": "You can test the accessibility of your design to see the Failed, Passed items and update the Failed ones accordingly.",
   "Pixel Tracking Opt-in": "Pixel Tracking Opt-in",
   "OPT-IN SELECTION": "OPT-IN SELECTION",
   "UNSUBSCRIBE GROUPS": "UNSUBSCRIBE GROUPS",
   Default: o,
-  Custom: t
+  Custom: i
 };
 export {
-  t as Custom,
+  i as Custom,
   o as Default,
   e as Items,
-  s as default
+  t as default
 };