@useinsider/guido 3.19.0-beta.acb00a2 → 3.19.0-beta.c604f7d

package/dist/src/stores/version-history.d.ts

@@ -1,4 +1,4 @@
-import type { VersionHistoryState } from '@@/Types/version-history-api';
+import type { VersionHistoryState } from '@@/Types/api/version-history-api';
 export interface StoreState extends VersionHistoryState {
     editorVisualMode: 'desktop' | 'mobile';
 }

package/dist/src/utils/timeUtil.d.ts

@@ -6,3 +6,8 @@
  * @example formatLocalTime(date, true)        -> 12:20:02 (UTC+3 Istanbul)
  */
 export declare const formatLocalTime: (date: Date, useTimezone?: boolean) => string;
+export declare const autoSaveTimestamp: (date: Date, now?: Date) => {
+    isToday: boolean;
+    time: string;
+    date: string;
+};

package/dist/static/styles/components/accessibility.css.js

@@ -0,0 +1,234 @@
+const n = `
+ue-ui-simple-panel.accessibility-panel,
+ue-accessibility-panel {
+    height: 100%;
+}
+
+ue-accessibility-panel .header-control-panel-right {
+    min-width: 50px;
+    min-height: 50px;
+}
+
+ue-accessibility-panel .tabs-header .accent {
+    min-width: 21px;
+    margin-left: 8px;
+    padding: 3px 5px;
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+    background-color: var(--guido-color-white);
+    color: var(--guido-color-gray-800);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+}
+
+ue-accessibility-panel .tabs-header button.checked .accent {
+    border-color: var(--guido-color-primary-500);
+    color: var(--guido-color-primary-500);
+}
+
+ue-accessibility-panel .issue-card-surface {
+    border-radius: 8px;
+    outline: 1px solid var(--guido-color-gray-300);
+    outline-offset: -1px;
+}
+
+ue-accessibility-panel .issue-card-surface--active {
+    outline-color: var(--guido-color-primary-500);
+}
+
+ue-accessibility-panel .issue-card-title {
+    color: var(--guido-color-gray-800);
+}
+
+ue-accessibility-panel .issue-card-header-row .icon-help {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: var(--guido-color-gray-600);
+}
+
+ue-accessibility-panel .issue-card-header-row .icon-help svg {
+    width: 14px;
+    height: 14px;
+}
+
+ue-accessibility-panel .issue-card-header-row ue-icon-component.danger {
+    color: var(--guido-color-danger-500);
+}
+
+ue-accessibility-panel .issue-card-header-row ue-icon-component.warning {
+    color: var(--guido-color-warning-500);
+}
+
+ue-accessibility-panel .issue-card-header-row ue-icon-component.info {
+    color: var(--guido-color-primary-500);
+}
+
+ue-accessibility-passed-tab input,
+ue-accessibility-passed-tab ue-select .toggle-select-button {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+ue-accessibility-panel .controls-separator-line:has(.fit-to-color) {
+    padding: 10px;
+}
+
+ue-accessibility-passed-tab .controls-separator-line:has(.fit-to-color) {
+    padding-bottom: 34px;
+}
+
+ue-accessibility-panel .controls-separator-line:has(.fit-to-color) .sub-container.two-columns {
+    box-sizing: border-box;
+    min-height: 50px;
+    padding: 5px 16px;
+    align-items: center;
+}
+
+ue-accessibility-panel .controls-list.fit-to-color {
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0;
+    font-size: 13px;
+    line-height: 16px;
+}
+
+ue-accessibility-panel .controls-list.fit-to-color ue-icon-component {
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    margin: 0;
+}
+
+ue-accessibility-panel .controls-list.fit-to-color ue-icon-component svg {
+    width: 16px;
+    height: 16px;
+}
+
+ue-accessibility-panel .controls-list.fit-to-color ue-icon-component.warning {
+    color: var(--guido-color-warning-500);
+}
+
+ue-accessibility-panel {
+    --ue-accessibility-image-width: 240px;
+    --ue-accessibility-image-height: 240px;
+}
+
+ue-accessibility-panel ue-scrollable-container:has(.accessibility-list-empty, ue-accessibility-passed-tab:empty) {
+    flex-grow: 1;
+}
+
+ue-accessibility-panel ue-scrollable-container:has(.accessibility-list-empty, ue-accessibility-passed-tab:empty) .ue-scrollable {
+    height: 100%;
+}
+
+ue-accessibility-panel .ue-scrollable-content:has(.accessibility-list-empty, ue-accessibility-passed-tab:empty) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 100%;
+}
+
+ue-accessibility-panel .accessibility-list-empty.light-theme.failed-list,
+ue-accessibility-panel .accessibility-list-empty.light-theme.ignored-list,
+ue-accessibility-passed-tab:empty::before {
+    display: block;
+    height: auto;
+    margin: 0;
+    padding: 248px 16px 0;
+    background: url("https://image.useinsider.com/insider-design-system/img/speacial/no-personalization.svg") no-repeat center top / 240px 240px;
+    color: var(--guido-color-neutral-500);
+    font-size: 15px;
+    line-height: 24px;
+    text-align: center;
+    white-space: pre-line;
+}
+
+ue-accessibility-passed-tab:empty {
+    display: block;
+}
+
+ue-accessibility-passed-tab:empty::before {
+    content: "No Passed Items\\A You have no passed items.";
+}
+
+ue-accessibility-panel .accessibility-list-empty::first-line,
+ue-accessibility-passed-tab:empty::first-line {
+    color: var(--guido-color-neutral-700);
+    font-size: 18px;
+    line-height: 40px;
+}
+
+ue-accessibility-panel .e2e-ignore-button > .button,
+ue-accessibility-panel .e2e-unignore-button > .button,
+ue-accessibility-panel .e2e-auto-tune-button > .button {
+    border: none;
+    background-color: var(--guido-color-neutral-200);
+    color: var(--guido-color-neutral-800);
+}
+
+ue-accessibility-panel .e2e-ignore-button > .button .icon-button,
+ue-accessibility-panel .e2e-unignore-button > .button .icon-button,
+ue-accessibility-panel .e2e-auto-tune-button > .button .icon-button {
+    color: var(--guido-color-neutral-800);
+}
+
+ue-accessibility-panel .e2e-ignore-button > .button:hover:not(:disabled,.disabled),
+ue-accessibility-panel .e2e-unignore-button > .button:hover:not(:disabled,.disabled),
+ue-accessibility-panel .e2e-auto-tune-button > .button:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-neutral-100);
+}
+
+ue-accessibility-panel .e2e-apply-button > .button {
+    border: none;
+    background-color: var(--guido-color-primary-100);
+    color: var(--guido-color-primary-500);
+}
+
+ue-accessibility-panel .e2e-apply-button > .button .icon-button {
+    color: var(--guido-color-primary-500);
+}
+
+ue-accessibility-panel .e2e-apply-button > .button:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-primary-0);
+}
+
+.e2e-accessibility-refresh .icon-button {
+    color: var(--guido-color-primary-500);
+}
+
+.ue-popover.dark,
+.ue-popover.dark-tiny {
+    border-radius: 4px;
+    background: var(--guido-color-gray-800);
+    box-shadow: 0 15px 17.5px rgb(0 0 0 / 10%), 0 8px 5px rgb(0 0 0 / 10%);
+    color: var(--guido-color-white);
+    font-size: 13px;
+    line-height: 16px;
+}
+
+.ue-popover.dark .popup-pointer ue-icon-component svg,
+.ue-popover.dark-tiny .popup-pointer ue-icon-component svg {
+    fill: var(--guido-color-gray-800);
+}
+
+.ue-popover.dark a,
+.ue-popover.dark-tiny a,
+.ue-popover.dark ue-description a,
+.ue-popover.dark-tiny ue-description a {
+    color: var(--guido-color-white);
+    text-decoration: underline;
+}
+
+.ue-popover ue-description a[href^="https://act-rules.github.io/"],
+.ue-popover ue-description a[href^="https://dequeuniversity.com/"] {
+    display: inline;
+}
+`;
+export {
+  n as default
+};

package/dist/static/styles/variables.css.js

@@ -14,8 +14,10 @@ const o = `:host {
     --guido-color-gray-0: #F9F9F9;
     --guido-color-neutral-800: #222938;
     --guido-color-neutral-700: #2C3546;
+    --guido-color-neutral-500: #5D6980;
     --guido-color-neutral-200: #DCDFE6;
     --guido-color-neutral-100: #EFF2F4;
+    --guido-color-warning-500: #FFBF00;
     --guido-color-danger-300: #e84342;
     --guido-color-danger-500: #DC2A2A; 
     --guido-box-shadow: 0 4px 12px 0 rgba(44,53,70,0.15);

package/dist/stores/editor.js

@@ -6,6 +6,9 @@ const o = e("guidoEditor", {
     isSaveAsTemplateDrawerOpen: !1,
     isVersionHistoryOpen: !1,
     isPreviewModeOpen: !1,
+    isAccessibilityTestingOpen: !1,
+    imagesHidden: !1,
+    colorVisionDeficiency: "",
     editorVisualMode: "desktop",
     hasChanges: !1,
     // Bumped on every Stripo document change. `hasChanges` is a latch that stays
@@ -21,20 +24,20 @@ const o = e("guidoEditor", {
   }),
   getters: {
     // Middle Slot
-    isEditorToolbarVisible: (i) => !i.isVersionHistoryOpen && !i.isPreviewModeOpen,
+    isEditorToolbarVisible: (i) => !i.isVersionHistoryOpen && !i.isPreviewModeOpen && !i.isAccessibilityTestingOpen,
     isUndoButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
     isRedoButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
     isCodeEditorButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
     isPreviewButtonDisabled: (i) => i.loadingStatus,
     isViewOptionsDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
     // Right Slot
+    isNormalMode: (i) => !i.isVersionHistoryOpen && !i.isAccessibilityTestingOpen,
     isVersionHistoryButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
     isExportButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
     isSaveAsButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
     isTestButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
-    isSaveButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen || i.isPreviewModeOpen,
-    // Autosave
-    isInSaveableState: (i) => !i.loadingStatus && !i.isVersionHistoryOpen && !i.isPreviewModeOpen && !i.isCodeEditorOpen
+    isSaveButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen || i.isPreviewModeOpen || i.isAccessibilityTestingOpen,
+    isInSaveableState: (i) => !i.loadingStatus && !i.isVersionHistoryOpen && !i.isPreviewModeOpen && !i.isCodeEditorOpen && !i.isAccessibilityTestingOpen
   }
 });
 export {

package/dist/stores/guido-email-editor.js

@@ -4,9 +4,7 @@ const d = e("guidoEmailEditor", {
     html: "",
     css: "",
     lastUpdatedAt: 0,
-    templateId: "",
-    bridgeActive: !1,
-    applyAcks: {}
+    templateId: ""
   }),
   getters: {
     /** True once the bridge has published at least one snapshot. */

package/dist/stores/onboarding.js

@@ -1,23 +1,26 @@
-import { useOnboardingApi as e } from "../services/onboardingApi.js";
+import { useOnboardingApi as t } from "../services/onboardingApi.js";
 import { defineStore as s } from "pinia";
-const t = () => ({
+const e = () => ({
   cardIndex: 0,
   isActive: !1,
-  config: []
+  config: [],
+  cardOffset: 0
 }), a = () => ({
   onboardings: {
-    newVersionPopup: t(),
-    genericOnboarding: t(),
-    textBlockOnboarding: t(),
-    versionHistoryOnboarding: t(),
-    ampOnboarding: t(),
-    itemsOnboarding: t(),
-    recommendationStrategyOnboarding: t(),
-    recommendationLegacyStrategyOnboarding: t()
+    newVersionPopup: e(),
+    genericOnboarding: e(),
+    textBlockOnboarding: e(),
+    versionHistoryOnboarding: e(),
+    ampOnboarding: e(),
+    itemsOnboarding: e(),
+    editorTabBarOnboarding: e(),
+    recommendationStrategyOnboarding: e(),
+    recommendationLegacyStrategyOnboarding: e()
   },
   userModalState: {},
-  isFetched: !1
-}), c = s("guidoOnboarding", {
+  isFetched: !1,
+  closedThisSession: []
+}), g = s("guidoOnboarding", {
   state: () => a(),
   getters: {
     getOnboarding: (n) => (o) => n.onboardings[o],
@@ -46,6 +49,14 @@ const t = () => ({
       const { itemsOnboarding: o } = n.onboardings;
       return o.config[o.cardIndex];
     },
+    getEditorTabBarCurrentCard: (n) => {
+      const { editorTabBarOnboarding: o } = n.onboardings;
+      return o.config[o.cardIndex];
+    },
+    isEditorActionsMenuPinned: (n) => {
+      const { editorTabBarOnboarding: o } = n.onboardings, i = o.config[o.cardIndex];
+      return o.isActive && !!(i != null && i.pinsMenu);
+    },
     getRecommendationStrategyCurrentCard: (n) => {
       const { recommendationStrategyOnboarding: o } = n.onboardings;
       return o.config[o.cardIndex];
@@ -63,7 +74,10 @@ const t = () => ({
     closeOtherOnboardings(n) {
       Object.keys(this.onboardings).forEach((o) => {
         const i = o;
-        i !== n && this.onboardings[i].isActive && (this.onboardings[i].isActive = !1, this.onboardings[i].cardIndex = 0, this.onboardings[i].config = []);
+        if (i !== n && this.onboardings[i].isActive) {
+          const r = this.onboardings[i];
+          r.cardOffset += r.cardIndex, r.isActive = !1, r.cardIndex = 0, r.config = [];
+        }
       });
     },
     start(n) {
@@ -72,8 +86,16 @@ const t = () => ({
     startOnboarding(n) {
       this.shouldShowOnboarding(n) && !this.isActive(n) && this.start(n);
     },
+    closeForSession(n) {
+      this.closedThisSession.includes(n) || this.closedThisSession.push(n), this.onboardings[n].isActive = !1, this.onboardings[n].cardIndex = 0, this.onboardings[n].config = [], this.onboardings[n].cardOffset = 0;
+    },
     async close(n) {
-      await this.setUserModalState(n, "true", "Guido"), this.onboardings[n].isActive = !1, this.onboardings[n].cardIndex = 0, this.onboardings[n].config = [];
+      this.closeForSession(n);
+      try {
+        await this.setUserModalState(n, "true", "Guido");
+      } catch (o) {
+        console.warn("guido:onboarding:close-not-persisted", n, o);
+      }
     },
     next(n) {
       this.onboardings[n].cardIndex < this.onboardings[n].config.length - 1 && this.onboardings[n].cardIndex++;
@@ -85,11 +107,11 @@ const t = () => ({
       const r = this.onboardings[n].config[o];
       r && (r.top = i.top, r.position = i.position);
     },
-    setConfig(n, o) {
-      this.onboardings[n].config = o ?? [], this.onboardings[n].cardIndex >= this.onboardings[n].config.length && (this.onboardings[n].cardIndex = 0);
+    setConfig(n, o, i = 0) {
+      this.onboardings[n].config = o ?? [], this.onboardings[n].cardOffset = i, this.onboardings[n].cardIndex >= this.onboardings[n].config.length && (this.onboardings[n].cardIndex = 0);
     },
     async onDiscoverNowClicked() {
-      await this.setUserModalState("newVersionPopup", "true", "Guido"), await this.setUserModalState("genericOnboarding", "true", "Guido"), this.start("genericOnboarding");
+      this.start("genericOnboarding"), await this.setUserModalState("newVersionPopup", "true", "Guido"), await this.setUserModalState("genericOnboarding", "true", "Guido");
     },
     onRemindMeLater() {
       sessionStorage.setItem("newVersionPopupDismissed", "true");
@@ -103,7 +125,7 @@ const t = () => ({
     async fetchUserModalState() {
       if (this.isFetched)
         return;
-      const { fetchUserModalState: n } = e();
+      const { fetchUserModalState: n } = t();
       try {
         const o = await n();
         this.userModalState = o, this.isFetched = !0;
@@ -111,11 +133,11 @@ const t = () => ({
       }
     },
     async setUserModalState(n, o, i) {
-      const { setUserModalState: r } = e();
+      const { setUserModalState: r } = t();
       await r(n, o, i), this.isFetched = !1, await this.fetchUserModalState();
     }
   }
 });
 export {
-  c as useOnboardingStore
+  g as useOnboardingStore
 };

package/dist/utils/timeUtil.js

@@ -1,19 +1,8 @@
-const r = (t) => {
-  const e = -t.getTimezoneOffset(), o = e >= 0 ? "+" : "-", n = Math.abs(e), s = Math.floor(n / 60), i = n % 60;
-  return i === 0 ? `UTC${o}${s}` : `UTC${o}${s}:${String(i).padStart(2, "0")}`;
-}, a = () => {
-  var e;
-  const { timeZone: t } = new Intl.DateTimeFormat().resolvedOptions();
-  return ((e = t.split("/").pop()) == null ? void 0 : e.replace(/_/g, " ")) ?? t;
-}, c = (t, e = !1) => {
-  const o = t.toLocaleTimeString([], {
-    hour: "2-digit",
-    hour12: !1,
-    minute: "2-digit",
-    second: "2-digit"
-  });
-  return e ? `${o} (${r(t)} ${a()})` : o;
-};
+const a = (t) => String(t).padStart(2, "0"), g = (t, e) => t.getFullYear() === e.getFullYear() && t.getMonth() === e.getMonth() && t.getDate() === e.getDate(), i = (t, e = /* @__PURE__ */ new Date()) => ({
+  isToday: g(t, e),
+  time: `${a(t.getHours())}:${a(t.getMinutes())}`,
+  date: t.toLocaleDateString([], { day: "2-digit", month: "2-digit", year: "numeric" })
+});
 export {
-  c as formatLocalTime
+  i as autoSaveTimestamp
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.19.0-beta.acb00a2",
+  "version": "3.19.0-beta.c604f7d",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",

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

@@ -1,22 +0,0 @@
-import o from "./AutoSaveToggle.vue2.js";
-/* empty css                    */
-import i from "../../../_virtual/_plugin-vue2_normalizer.js";
-var n = function() {
-  var e = this, a = e._self._c, t = e._self._setupProxy;
-  return t.isFeatureEnabled("autosave") ? a("div", { staticClass: "d-f a-i-c mr-3 auto-save-toggle", on: { mouseenter: function(s) {
-    t.isHovered = !0;
-  }, mouseleave: function(s) {
-    t.isHovered = !1;
-  } } }, [a(t.InToggle, { attrs: { id: "guido__autosave-toggle", name: "guido-autosave-toggle", checked: t.autosaveStore.isOn, disable: t.editorStore.loadingStatus }, on: { click: t.toggle } }), a("span", { staticClass: "ml-2 auto-save-toggle__label t-c-55" }, [e._v(" " + e._s(t.trans("email-editor.auto-save")) + " ")]), t.autosaveStore.status === t.AUTOSAVE_STATUS.SAVING ? a("span", { staticClass: "ml-2 d-f a-i-c f-s-1" }, [a(t.InLoading, { attrs: { "color-class": "i-c-53", size: "16" } }), a("span", { staticClass: "ml-1 t-c-53" }, [e._v(" " + e._s(t.trans("newsletter.saving")) + " ")])], 1) : t.lastSavedLabel ? a("span", { staticClass: "ml-2 f-s-1 t-c-53" }, [e._v(" " + e._s(t.lastSavedLabel) + " ")]) : e._e(), t.isHovered ? a(t.InInfoBox, { staticClass: "auto-save-toggle__info-box", attrs: { id: "guido__autosave-info-box", size: "small", variant: "information", "description-text": t.trans("email-editor.auto-save-description"), "title-text": t.trans("email-editor.auto-save-title") } }) : e._e()], 1) : e._e();
-}, l = [], r = /* @__PURE__ */ i(
-  o,
-  n,
-  l,
-  !1,
-  null,
-  "2c964af4"
-);
-const d = r.exports;
-export {
-  d as default
-};

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

@@ -1,19 +0,0 @@
-import { defineComponent as i, ref as f, computed as u } from "vue";
-import { useConfig as l } from "../../../composables/useConfig.js";
-import { useTranslations as p } from "../../../composables/useTranslations.js";
-import { useAutosaveStore as c, AUTOSAVE_STATUS as t } from "../../../stores/autosave.js";
-import { useEditorStore as S } from "../../../stores/editor.js";
-import { formatLocalTime as d } from "../../../utils/timeUtil.js";
-import { InToggle as g, InLoading as _, InInfoBox as A } from "@useinsider/design-system-vue";
-const U = /* @__PURE__ */ i({
-  __name: "AutoSaveToggle",
-  setup(v) {
-    const { isFeatureEnabled: e } = l(), r = S(), o = c(), s = p(), n = f(!1), a = u(() => o.status !== t.SAVED || !o.lastSavedAt ? "" : d(o.lastSavedAt));
-    return { __sfc: !0, isFeatureEnabled: e, editorStore: r, autosaveStore: o, trans: s, isHovered: n, lastSavedLabel: a, toggle: (m) => {
-      o.isOn = m;
-    }, AUTOSAVE_STATUS: t, InInfoBox: A, InLoading: _, InToggle: g };
-  }
-});
-export {
-  U as default
-};