@useinsider/guido 3.21.0-beta.c433290 → 3.21.0-beta.e175deb

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/README.md +0 -1
  2. package/dist/@types/config/schemas.js +10 -11
  3. package/dist/components/Guido.vue.js +2 -2
  4. package/dist/components/Guido.vue2.js +106 -117
  5. package/dist/components/organisms/AutoSaveController.vue2.js +10 -20
  6. package/dist/components/organisms/header/AutoSaveToggle.vue.js +22 -0
  7. package/dist/components/organisms/header/AutoSaveToggle.vue2.js +19 -0
  8. package/dist/components/organisms/header/EditorActions.vue.js +13 -13
  9. package/dist/components/organisms/header/EditorActions.vue2.js +73 -58
  10. package/dist/components/organisms/header/HeaderWrapper.vue.js +6 -6
  11. package/dist/components/organisms/header/HeaderWrapper.vue2.js +17 -9
  12. package/dist/components/organisms/header/LeftSlot.vue.js +1 -1
  13. package/dist/components/organisms/header/LeftSlot.vue2.js +23 -28
  14. package/dist/components/organisms/header/MiddleSlot.vue.js +4 -4
  15. package/dist/components/organisms/header/MiddleSlot.vue2.js +7 -8
  16. package/dist/components/organisms/header/RightSlot.vue.js +10 -11
  17. package/dist/components/organisms/header/RightSlot.vue2.js +18 -13
  18. package/dist/components/organisms/onboarding/OnboardingWrapper.vue.js +12 -12
  19. package/dist/components/organisms/onboarding/OnboardingWrapper.vue2.js +35 -60
  20. package/dist/composables/useCustomInterfaceAppearance.js +41 -42
  21. package/dist/config/i18n/en/labels.json.js +4 -36
  22. package/dist/config/i18n/en/tooltips.json.js +1 -2
  23. package/dist/guido.css +1 -1
  24. package/dist/package.json.js +1 -1
  25. package/dist/sprite.svg +0 -10
  26. package/dist/src/@types/config/schemas.d.ts +0 -2
  27. package/dist/src/components/organisms/AutoSaveController.vue.d.ts +1 -19
  28. package/dist/src/components/organisms/header/HeaderWrapper.vue.d.ts +19 -1
  29. package/dist/src/components/organisms/header/RightSlot.vue.d.ts +19 -1
  30. package/dist/src/composables/useActionsApi.d.ts +2 -2
  31. package/dist/src/composables/useConfig.d.ts +0 -2
  32. package/dist/src/stores/autosave.d.ts +1 -73
  33. package/dist/src/stores/config.d.ts +0 -20
  34. package/dist/src/stores/editor.d.ts +0 -109
  35. package/dist/src/stores/onboarding.d.ts +33 -964
  36. package/dist/src/stores/version-history.d.ts +1 -1
  37. package/dist/src/utils/timeUtil.d.ts +8 -5
  38. package/dist/static/styles/variables.css.js +0 -2
  39. package/dist/stores/autosave.js +7 -12
  40. package/dist/stores/editor.js +3 -8
  41. package/dist/stores/onboarding.js +22 -48
  42. package/dist/utils/timeUtil.js +17 -6
  43. package/package.json +2 -2
  44. package/dist/components/organisms/header/AutoSaveStatus.vue.js +0 -17
  45. package/dist/components/organisms/header/AutoSaveStatus.vue2.js +0 -25
  46. package/dist/components/organisms/header/EditorActionsMenu.vue.js +0 -20
  47. package/dist/components/organisms/header/EditorActionsMenu.vue2.js +0 -98
  48. package/dist/components/organisms/header/accessibility/AccessibilityToolbar.vue.js +0 -18
  49. package/dist/components/organisms/header/accessibility/AccessibilityToolbar.vue2.js +0 -37
  50. package/dist/components/organisms/header/accessibility/ColorVisionSelect.vue.js +0 -22
  51. package/dist/components/organisms/header/accessibility/ColorVisionSelect.vue2.js +0 -48
  52. package/dist/components/organisms/onboarding/EditorTabBarOnboarding.vue.js +0 -19
  53. package/dist/components/organisms/onboarding/EditorTabBarOnboarding.vue2.js +0 -90
  54. package/dist/composables/useAccessibilityApi.js +0 -51
  55. package/dist/src/components/organisms/header/EditorActionsMenu.vue.d.ts +0 -2
  56. package/dist/src/components/organisms/header/accessibility/AccessibilityToolbar.vue.d.ts +0 -2
  57. package/dist/src/components/organisms/header/accessibility/ColorVisionSelect.vue.d.ts +0 -2
  58. package/dist/src/components/organisms/onboarding/EditorTabBarOnboarding.vue.d.ts +0 -2
  59. package/dist/src/composables/useAccessibilityApi.d.ts +0 -13
  60. package/dist/static/styles/components/accessibility.css.js +0 -234
  61. /package/dist/src/components/organisms/header/{AutoSaveStatus.vue.d.ts → AutoSaveToggle.vue.d.ts} +0 -0
@@ -1,4 +1,4 @@
1
- import type { VersionHistoryState } from '@@/Types/api/version-history-api';
1
+ import type { VersionHistoryState } from '@@/Types/version-history-api';
2
2
  export interface StoreState extends VersionHistoryState {
3
3
  editorVisualMode: 'desktop' | 'mobile';
4
4
  }
@@ -1,5 +1,8 @@
1
- export declare const autoSaveTimestamp: (date: Date, now?: Date) => {
2
- isToday: boolean;
3
- time: string;
4
- date: string;
5
- };
1
+ /**
2
+ * Formats a Date as local time in 24-hour format.
3
+ * Pass `useTimezone = true` to append the UTC offset and city name — useful when the
4
+ * timestamp must clearly communicate the client's timezone.
5
+ * @example formatLocalTime(date) -> 12:20:02
6
+ * @example formatLocalTime(date, true) -> 12:20:02 (UTC+3 Istanbul)
7
+ */
8
+ export declare const formatLocalTime: (date: Date, useTimezone?: boolean) => string;
@@ -14,10 +14,8 @@ const o = `:host {
14
14
  --guido-color-gray-0: #F9F9F9;
15
15
  --guido-color-neutral-800: #222938;
16
16
  --guido-color-neutral-700: #2C3546;
17
- --guido-color-neutral-500: #5D6980;
18
17
  --guido-color-neutral-200: #DCDFE6;
19
18
  --guido-color-neutral-100: #EFF2F4;
20
- --guido-color-warning-500: #FFBF00;
21
19
  --guido-color-danger-300: #e84342;
22
20
  --guido-color-danger-500: #DC2A2A;
23
21
  --guido-box-shadow: 0 4px 12px 0 rgba(44,53,70,0.15);
@@ -1,22 +1,17 @@
1
- import { defineStore as e } from "pinia";
2
- const s = {
1
+ import { defineStore as t } from "pinia";
2
+ const e = {
3
3
  IDLE: "idle",
4
4
  SAVING: "saving",
5
5
  SAVED: "saved",
6
6
  ERROR: "error"
7
- }, S = e("guidoAutosave", {
7
+ }, o = t("guidoAutosave", {
8
8
  state: () => ({
9
9
  isOn: !0,
10
10
  lastSavedAt: null,
11
- status: s.IDLE
12
- }),
13
- getters: {
14
- // Whether the header actually renders autosave text: the divider beside it must not be
15
- // left hanging over empty space when it does not.
16
- hasStatusLabel: (t) => t.status === s.SAVING || t.status === s.SAVED && t.lastSavedAt !== null
17
- }
11
+ status: e.IDLE
12
+ })
18
13
  });
19
14
  export {
20
- s as AUTOSAVE_STATUS,
21
- S as useAutosaveStore
15
+ e as AUTOSAVE_STATUS,
16
+ o as useAutosaveStore
22
17
  };
@@ -6,9 +6,6 @@ const o = e("guidoEditor", {
6
6
  isSaveAsTemplateDrawerOpen: !1,
7
7
  isVersionHistoryOpen: !1,
8
8
  isPreviewModeOpen: !1,
9
- isAccessibilityTestingOpen: !1,
10
- imagesHidden: !1,
11
- colorVisionDeficiency: "",
12
9
  editorVisualMode: "desktop",
13
10
  hasChanges: !1,
14
11
  // Bumped on every Stripo document change. `hasChanges` is a latch that stays
@@ -24,21 +21,19 @@ const o = e("guidoEditor", {
24
21
  }),
25
22
  getters: {
26
23
  // Middle Slot
27
- isEditorToolbarVisible: (i) => !i.isVersionHistoryOpen && !i.isPreviewModeOpen && !i.isAccessibilityTestingOpen,
24
+ isEditorToolbarVisible: (i) => !i.isVersionHistoryOpen && !i.isPreviewModeOpen,
28
25
  isUndoButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
29
26
  isRedoButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
30
27
  isCodeEditorButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
31
28
  isPreviewButtonDisabled: (i) => i.loadingStatus,
32
29
  isViewOptionsDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
33
30
  // Right Slot
34
- isNormalMode: (i) => !i.isVersionHistoryOpen && !i.isAccessibilityTestingOpen,
35
31
  isVersionHistoryButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
36
32
  isExportButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
37
33
  isSaveAsButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
38
34
  isTestButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
39
- isSaveButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen || i.isPreviewModeOpen || i.isAccessibilityTestingOpen,
40
- // Accessibility Test is absent on purpose: it only simulates, but its Apply / Auto-tune
41
- // edit the document, so pausing autosave there would lose those fixes.
35
+ isSaveButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen || i.isPreviewModeOpen,
36
+ // Autosave
42
37
  isInSaveableState: (i) => !i.loadingStatus && !i.isVersionHistoryOpen && !i.isPreviewModeOpen && !i.isCodeEditorOpen
43
38
  }
44
39
  });
@@ -1,26 +1,23 @@
1
- import { useOnboardingApi as t } from "../services/onboardingApi.js";
1
+ import { useOnboardingApi as e } from "../services/onboardingApi.js";
2
2
  import { defineStore as s } from "pinia";
3
- const e = () => ({
3
+ const t = () => ({
4
4
  cardIndex: 0,
5
5
  isActive: !1,
6
- config: [],
7
- cardOffset: 0
6
+ config: []
8
7
  }), a = () => ({
9
8
  onboardings: {
10
- newVersionPopup: e(),
11
- genericOnboarding: e(),
12
- textBlockOnboarding: e(),
13
- versionHistoryOnboarding: e(),
14
- ampOnboarding: e(),
15
- itemsOnboarding: e(),
16
- editorTabBarOnboarding: e(),
17
- recommendationStrategyOnboarding: e(),
18
- recommendationLegacyStrategyOnboarding: e()
9
+ newVersionPopup: t(),
10
+ genericOnboarding: t(),
11
+ textBlockOnboarding: t(),
12
+ versionHistoryOnboarding: t(),
13
+ ampOnboarding: t(),
14
+ itemsOnboarding: t(),
15
+ recommendationStrategyOnboarding: t(),
16
+ recommendationLegacyStrategyOnboarding: t()
19
17
  },
20
18
  userModalState: {},
21
- isFetched: !1,
22
- closedThisSession: []
23
- }), g = s("guidoOnboarding", {
19
+ isFetched: !1
20
+ }), c = s("guidoOnboarding", {
24
21
  state: () => a(),
25
22
  getters: {
26
23
  /** @deprecated Components use the type-specific getters. Slated for deletion, see the SD-667788 dead-code ledger. */
@@ -51,14 +48,6 @@ const e = () => ({
51
48
  const { itemsOnboarding: o } = n.onboardings;
52
49
  return o.config[o.cardIndex];
53
50
  },
54
- getEditorTabBarCurrentCard: (n) => {
55
- const { editorTabBarOnboarding: o } = n.onboardings;
56
- return o.config[o.cardIndex];
57
- },
58
- isEditorActionsMenuPinned: (n) => {
59
- const { editorTabBarOnboarding: o } = n.onboardings, i = o.config[o.cardIndex];
60
- return o.isActive && !!(i != null && i.pinsMenu);
61
- },
62
51
  getRecommendationStrategyCurrentCard: (n) => {
63
52
  const { recommendationStrategyOnboarding: o } = n.onboardings;
64
53
  return o.config[o.cardIndex];
@@ -76,10 +65,7 @@ const e = () => ({
76
65
  closeOtherOnboardings(n) {
77
66
  Object.keys(this.onboardings).forEach((o) => {
78
67
  const i = o;
79
- if (i !== n && this.onboardings[i].isActive) {
80
- const r = this.onboardings[i];
81
- r.cardOffset += r.cardIndex, r.isActive = !1, r.cardIndex = 0, r.config = [];
82
- }
68
+ i !== n && this.onboardings[i].isActive && (this.onboardings[i].isActive = !1, this.onboardings[i].cardIndex = 0, this.onboardings[i].config = []);
83
69
  });
84
70
  },
85
71
  start(n) {
@@ -88,16 +74,8 @@ const e = () => ({
88
74
  startOnboarding(n) {
89
75
  this.shouldShowOnboarding(n) && !this.isActive(n) && this.start(n);
90
76
  },
91
- closeForSession(n) {
92
- 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;
93
- },
94
77
  async close(n) {
95
- this.closeForSession(n);
96
- try {
97
- await this.setUserModalState(n, "true", "Guido");
98
- } catch (o) {
99
- console.warn("guido:onboarding:close-not-persisted", n, o);
100
- }
78
+ await this.setUserModalState(n, "true", "Guido"), this.onboardings[n].isActive = !1, this.onboardings[n].cardIndex = 0, this.onboardings[n].config = [];
101
79
  },
102
80
  next(n) {
103
81
  this.onboardings[n].cardIndex < this.onboardings[n].config.length - 1 && this.onboardings[n].cardIndex++;
@@ -110,16 +88,11 @@ const e = () => ({
110
88
  const r = this.onboardings[n].config[o];
111
89
  r && (r.top = i.top, r.position = i.position);
112
90
  },
113
- // InOnboard always opens on its first slide, so a tour re-installing its config after a
114
- // Guido remount has to come back to the first card or the two point at different ones.
115
- resetCardIndex(n) {
116
- this.onboardings[n].cardIndex = 0;
117
- },
118
- setConfig(n, o, i = 0) {
119
- this.onboardings[n].config = o ?? [], this.onboardings[n].cardOffset = i, this.onboardings[n].cardIndex >= this.onboardings[n].config.length && (this.onboardings[n].cardIndex = 0);
91
+ setConfig(n, o) {
92
+ this.onboardings[n].config = o ?? [], this.onboardings[n].cardIndex >= this.onboardings[n].config.length && (this.onboardings[n].cardIndex = 0);
120
93
  },
121
94
  async onDiscoverNowClicked() {
122
- this.start("genericOnboarding"), await this.setUserModalState("newVersionPopup", "true", "Guido"), await this.setUserModalState("genericOnboarding", "true", "Guido");
95
+ await this.setUserModalState("newVersionPopup", "true", "Guido"), await this.setUserModalState("genericOnboarding", "true", "Guido"), this.start("genericOnboarding");
123
96
  },
124
97
  onRemindMeLater() {
125
98
  sessionStorage.setItem("newVersionPopupDismissed", "true");
@@ -127,13 +100,14 @@ const e = () => ({
127
100
  async onNewVersionPopupClose() {
128
101
  await this.setUserModalState("newVersionPopup", "true", "Guido");
129
102
  },
103
+ /** @deprecated No caller in src/. Slated for deletion, see the SD-667788 dead-code ledger. */
130
104
  isOnboardingActive() {
131
105
  return Object.values(this.onboardings).some((n) => n.isActive);
132
106
  },
133
107
  async fetchUserModalState() {
134
108
  if (this.isFetched)
135
109
  return;
136
- const { fetchUserModalState: n } = t();
110
+ const { fetchUserModalState: n } = e();
137
111
  try {
138
112
  const o = await n();
139
113
  this.userModalState = o, this.isFetched = !0;
@@ -141,11 +115,11 @@ const e = () => ({
141
115
  }
142
116
  },
143
117
  async setUserModalState(n, o, i) {
144
- const { setUserModalState: r } = t();
118
+ const { setUserModalState: r } = e();
145
119
  await r(n, o, i), this.isFetched = !1, await this.fetchUserModalState();
146
120
  }
147
121
  }
148
122
  });
149
123
  export {
150
- g as useOnboardingStore
124
+ c as useOnboardingStore
151
125
  };
@@ -1,8 +1,19 @@
1
- const g = (t) => String(t).padStart(2, "0"), a = (t, e) => t.getFullYear() === e.getFullYear() && t.getMonth() === e.getMonth() && t.getDate() === e.getDate(), o = (t, e = /* @__PURE__ */ new Date()) => ({
2
- isToday: a(t, e),
3
- time: `${g(t.getHours())}:${g(t.getMinutes())}`,
4
- date: `${g(t.getDate())}.${g(t.getMonth() + 1)}.${t.getFullYear()}`
5
- });
1
+ const r = (t) => {
2
+ const e = -t.getTimezoneOffset(), o = e >= 0 ? "+" : "-", n = Math.abs(e), s = Math.floor(n / 60), i = n % 60;
3
+ return i === 0 ? `UTC${o}${s}` : `UTC${o}${s}:${String(i).padStart(2, "0")}`;
4
+ }, a = () => {
5
+ var e;
6
+ const { timeZone: t } = new Intl.DateTimeFormat().resolvedOptions();
7
+ return ((e = t.split("/").pop()) == null ? void 0 : e.replace(/_/g, " ")) ?? t;
8
+ }, c = (t, e = !1) => {
9
+ const o = t.toLocaleTimeString([], {
10
+ hour: "2-digit",
11
+ hour12: !1,
12
+ minute: "2-digit",
13
+ second: "2-digit"
14
+ });
15
+ return e ? `${o} (${r(t)} ${a()})` : o;
16
+ };
6
17
  export {
7
- o as autoSaveTimestamp
18
+ c as formatLocalTime
8
19
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@useinsider/guido",
3
- "version": "3.21.0-beta.c433290",
3
+ "version": "3.21.0-beta.e175deb",
4
4
  "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
5
5
  "main": "./dist/guido.umd.cjs",
6
6
  "module": "./dist/library.js",
@@ -123,7 +123,7 @@
123
123
  },
124
124
  "guido": {
125
125
  "stripo": {
126
- "version": "2.79.0"
126
+ "version": "2.81.0"
127
127
  }
128
128
  }
129
129
  }
@@ -1,17 +0,0 @@
1
- import t from "./AutoSaveStatus.vue2.js";
2
- import r from "../../../_virtual/_plugin-vue2_normalizer.js";
3
- var _ = function() {
4
- var s = this, e = s._self._c, a = s._self._setupProxy;
5
- return a.isFeatureEnabled("autosave") ? e("div", { staticClass: "d-f a-i-c auto-save-status" }, [a.autosaveStore.status === a.AUTOSAVE_STATUS.SAVING ? e("span", { staticClass: "d-f a-i-c f-s-1" }, [e(a.InLoading, { attrs: { "color-class": "i-c-53", size: "16" } }), e("span", { staticClass: "ml-1 t-c-53" }, [s._v(s._s(a.trans("newsletter.saving")))])], 1) : a.savedLabel ? e("span", { staticClass: "f-s-1 t-c-53" }, [s._v(s._s(a.savedLabel.before)), a.savedLabel.word ? e("span", { staticClass: "f-w-600" }, [s._v(s._s(a.savedLabel.word))]) : s._e(), s._v(s._s(a.savedLabel.after))]) : s._e()]) : s._e();
6
- }, n = [], o = /* @__PURE__ */ r(
7
- t,
8
- _,
9
- n,
10
- !1,
11
- null,
12
- null
13
- );
14
- const v = o.exports;
15
- export {
16
- v as default
17
- };
@@ -1,25 +0,0 @@
1
- import { defineComponent as p, computed as S } from "vue";
2
- import { useConfig as A } from "../../../composables/useConfig.js";
3
- import { useTranslations as T } from "../../../composables/useTranslations.js";
4
- import { useAutosaveStore as v, AUTOSAVE_STATUS as m } from "../../../stores/autosave.js";
5
- import { autoSaveTimestamp as b } from "../../../utils/timeUtil.js";
6
- import { InLoading as D } from "@useinsider/design-system-vue";
7
- const j = /* @__PURE__ */ p({
8
- __name: "AutoSaveStatus",
9
- setup(O) {
10
- const { isFeatureEnabled: u } = A(), a = v(), n = T(), t = "__BOLD_START__", o = "__BOLD_END__", s = (i) => i.split(t).join("").split(o).join(""), _ = S(() => {
11
- if (a.status !== m.SAVED || !a.lastSavedAt)
12
- return null;
13
- const { isToday: i, time: c, date: f } = b(a.lastSavedAt), l = { boldStart: t, boldEnd: o }, e = i ? n("email-editor.autosaved-at-today", { ...l, time: c }) : n("email-editor.autosaved-at-date", { ...l, date: f }), r = e.indexOf(t), d = e.indexOf(o, r + t.length);
14
- return r === -1 || d === -1 ? { before: s(e), word: "", after: "" } : {
15
- before: s(e.slice(0, r)),
16
- word: s(e.slice(r + t.length, d)),
17
- after: s(e.slice(d + o.length))
18
- };
19
- });
20
- return { __sfc: !0, isFeatureEnabled: u, autosaveStore: a, trans: n, BOLD_START: t, BOLD_END: o, stripMarkers: s, savedLabel: _, AUTOSAVE_STATUS: m, InLoading: D };
21
- }
22
- });
23
- export {
24
- j as default
25
- };
@@ -1,20 +0,0 @@
1
- import i from "./EditorActionsMenu.vue2.js";
2
- /* empty css */
3
- import s from "../../../_virtual/_plugin-vue2_normalizer.js";
4
- var n = function() {
5
- var e = this, o = e._self._c, t = e._self._setupProxy;
6
- return o("div", { staticClass: "editor-actions-menu p-r" }, [o(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.isPanelOpen, "tooltip-options": t.getTooltipOptions("guido__kebab-button"), "tooltip-text": t.trans("email-editor.more-actions") }, on: { click: function(d) {
7
- t.isOpen = !t.isOpen;
8
- } } }), o(t.InDropdownMenu, { staticClass: "editor-actions-menu__dropdown", attrs: { id: "guido__kebab-menu", "box-width": "basedOnLongestItem", "static-position": "bottom right", "dynamic-position": !1, "max-height": 400, options: t.options, "select-all-option-status": !1, status: t.isPanelOpen }, on: { clickOutside: t.close, optionClick: t.handleOptionClick } })], 1);
9
- }, a = [], r = /* @__PURE__ */ s(
10
- i,
11
- n,
12
- a,
13
- !1,
14
- null,
15
- "d0e6b57a"
16
- );
17
- const _ = r.exports;
18
- export {
19
- _ as default
20
- };
@@ -1,98 +0,0 @@
1
- import { defineComponent as D, ref as C, computed as i, watch as L } from "vue";
2
- import { useAccessibilityApi as R } from "../../../composables/useAccessibilityApi.js";
3
- import { useConfig as Y } from "../../../composables/useConfig.js";
4
- import { useExport as F } from "../../../composables/useExport.js";
5
- import { useTranslations as N } from "../../../composables/useTranslations.js";
6
- import { useVersionHistoryApi as U } from "../../../composables/useVersionHistoryApi.js";
7
- import { useAutosaveStore as X } from "../../../stores/autosave.js";
8
- import { useEditorStore as j } from "../../../stores/editor.js";
9
- import { useOnboardingStore as q } from "../../../stores/onboarding.js";
10
- import { getTooltipOptions as z } from "../../../utils/tooltipUtils.js";
11
- import { InToggle as G, InDropdownMenu as J, InButtonV2 as K } from "@useinsider/design-system-vue";
12
- const ce = /* @__PURE__ */ D({
13
- __name: "EditorActionsMenu",
14
- setup(Q) {
15
- const c = "guido__kebab-autosave", u = "guido__kebab-version-history", d = "guido__kebab-accessibility", p = "guido__kebab-save-as", v = "guido__kebab-export", { config: m, isFeatureEnabled: b } = Y(), { exportHtml: y } = F(), { openVersionHistory: A, closeVersionHistory: S } = U(), { toggleAccessibilityTestingMode: _ } = R(), e = j(), a = X(), f = q(), o = N(), g = C(!1), M = i(() => g.value || f.isEditorActionsMenuPinned), r = C(!1), O = i(() => b("autosave")), x = i(
16
- () => {
17
- var t, s;
18
- return !!((s = (t = m.value) == null ? void 0 : t.features) != null && s.versionHistory) && !e.isPreviewModeOpen;
19
- }
20
- ), h = i(
21
- () => b("accessibilityTesting") && !e.isPreviewModeOpen
22
- ), V = i(() => {
23
- var t, s;
24
- return !!((s = (t = m.value) == null ? void 0 : t.features) != null && s.saveAsTemplate);
25
- }), E = i(() => O.value ? [
26
- { categoryText: o("email-editor.preferences") },
27
- {
28
- text: o("email-editor.auto-save"),
29
- value: c,
30
- disable: e.loadingStatus,
31
- rightSlotComponent: G,
32
- rightSlotProps: {
33
- id: "guido__kebab-autosave-toggle",
34
- name: "guido-kebab-autosave-toggle",
35
- class: "p-e-n",
36
- checked: a.isOn,
37
- disable: e.loadingStatus
38
- }
39
- },
40
- { divider: "solid" }
41
- ] : []), T = i(() => [
42
- { categoryText: o("email-editor.actions") },
43
- ...x.value ? [{
44
- text: o("newsletter.version-history"),
45
- value: u,
46
- iconLeft: "line-architect-version-history",
47
- disable: e.isVersionHistoryButtonDisabled
48
- }] : [],
49
- ...h.value ? [{
50
- text: o("email-editor.accessibility-test"),
51
- value: d,
52
- iconLeft: "line-accessibility",
53
- disable: e.loadingStatus
54
- }] : [],
55
- ...V.value ? [{
56
- text: o("newsletter.save-templates"),
57
- value: p,
58
- iconLeft: "line-newsletter-save-as-template",
59
- disable: e.isSaveAsButtonDisabled
60
- }] : [],
61
- {
62
- text: o("email-editor.export-html"),
63
- value: v,
64
- iconLeft: "line-export",
65
- disable: r.value || e.isExportButtonDisabled
66
- }
67
- ]), P = i(() => [...E.value, ...T.value]), n = () => {
68
- g.value = !1;
69
- };
70
- L(() => f.isEditorActionsMenuPinned, (t) => {
71
- t || n();
72
- });
73
- const k = () => {
74
- a.isOn = !a.isOn;
75
- }, w = () => {
76
- e.isVersionHistoryOpen ? S() : A(), n();
77
- }, H = () => {
78
- _(), n();
79
- }, I = () => {
80
- e.isSaveAsTemplateDrawerOpen = !0, n();
81
- }, B = async () => {
82
- r.value = !0, await y(), r.value = !1, n();
83
- }, l = {
84
- [c]: k,
85
- [u]: w,
86
- [d]: H,
87
- [p]: I,
88
- [v]: B
89
- };
90
- return { __sfc: !0, AUTOSAVE: c, VERSION_HISTORY: u, ACCESSIBILITY: d, SAVE_AS: p, EXPORT: v, config: m, isFeatureEnabled: b, exportHtml: y, openVersionHistory: A, closeVersionHistory: S, toggleAccessibilityTestingMode: _, editorStore: e, autosaveStore: a, onboardingStore: f, trans: o, isOpen: g, isPanelOpen: M, isExporting: r, isAutosaveVisible: O, isVersionHistoryVisible: x, isAccessibilityVisible: h, isSaveAsVisible: V, preferenceOptions: E, actionOptions: T, options: P, close: n, toggleAutosave: k, handleVersionHistory: w, handleAccessibility: H, handleSaveAs: I, handleExport: B, optionHandlers: l, handleOptionClick: ({ value: t }) => {
91
- var s;
92
- return (s = l[t]) == null ? void 0 : s.call(l);
93
- }, getTooltipOptions: z, InButtonV2: K, InDropdownMenu: J };
94
- }
95
- });
96
- export {
97
- ce as default
98
- };
@@ -1,18 +0,0 @@
1
- import i from "./AccessibilityToolbar.vue2.js";
2
- /* empty css */
3
- import s from "../../../../_virtual/_plugin-vue2_normalizer.js";
4
- var a = function() {
5
- var o = this, e = o._self._c, t = o._self._setupProxy;
6
- 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-no-image-v2", 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": "", disable: t.editorStore.loadingStatus, "segment-list": t.segmentList, selected: t.editorStore.editorVisualMode }, on: { click: t.handleView } })], 1);
7
- }, l = [], d = /* @__PURE__ */ s(
8
- i,
9
- a,
10
- l,
11
- !1,
12
- null,
13
- "391019bc"
14
- );
15
- const _ = d.exports;
16
- export {
17
- _ as default
18
- };
@@ -1,37 +0,0 @@
1
- import { defineComponent as d, computed as n } from "vue";
2
- import { useAccessibilityApi as c } from "../../../../composables/useAccessibilityApi.js";
3
- import { useTranslations as g } from "../../../../composables/useTranslations.js";
4
- import { useEditorStore as u } from "../../../../stores/editor.js";
5
- import { getTooltipOptions as e } from "../../../../utils/tooltipUtils.js";
6
- import { InSegments as _, InButtonV2 as f } from "@useinsider/design-system-vue";
7
- import w from "./ColorVisionSelect.vue.js";
8
- const A = /* @__PURE__ */ d({
9
- __name: "AccessibilityToolbar",
10
- setup(b) {
11
- const t = u(), o = g(), {
12
- toggleImages: r,
13
- toggleCodeEditor: m,
14
- switchToDesktopPreview: i,
15
- switchToMobilePreview: s
16
- } = c(), l = n(() => [
17
- {
18
- text: "",
19
- icon: "line-desktop",
20
- value: "desktop",
21
- tooltipText: o("newsletter.desktop"),
22
- tooltipOptions: e("guido__a11y-view-desktop")
23
- },
24
- {
25
- text: "",
26
- icon: "line-menu-mobileapp",
27
- value: "mobile",
28
- tooltipText: o("newsletter.mobile"),
29
- tooltipOptions: e("guido__a11y-view-mobile")
30
- }
31
- ]), p = n(() => t.imagesHidden ? o("email-editor.a11y-show-images") : o("email-editor.a11y-hide-images"));
32
- 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 };
33
- }
34
- });
35
- export {
36
- A as default
37
- };
@@ -1,22 +0,0 @@
1
- import i from "./ColorVisionSelect.vue2.js";
2
- /* empty css */
3
- import n from "../../../../_virtual/_plugin-vue2_normalizer.js";
4
- var l = function() {
5
- var o = this, e = o._self._c, t = o._self._setupProxy;
6
- return e("div", { staticClass: "color-vision-select p-r" }, [e(t.InButtonV2, { attrs: { id: "guido__a11y-color-vision-trigger", "left-icon": "line-show-on", "right-icon": "line-chevron-small-down", type: "secondary", "disabled-status": t.editorStore.loadingStatus, "label-text": t.selectedOption.text }, on: { click: function(s) {
7
- t.isOpen = !t.isOpen;
8
- } } }), e(t.InDropdownMenu, { staticClass: "color-vision-select__dropdown", attrs: { id: "guido__a11y-color-vision-menu", "is-wrapped-description": "", "box-width": "basedOnLongestItem", "static-position": "bottom left", "dynamic-position": !1, "max-height": 400, options: t.options, "pre-selected-values": [t.selectedOption], "select-all-option-status": !1, status: t.isOpen }, on: { clickOutside: function(s) {
9
- t.isOpen = !1;
10
- }, optionClick: t.select } })], 1);
11
- }, r = [], a = /* @__PURE__ */ n(
12
- i,
13
- l,
14
- r,
15
- !1,
16
- null,
17
- "64cb50da"
18
- );
19
- const u = a.exports;
20
- export {
21
- u as default
22
- };
@@ -1,48 +0,0 @@
1
- import { defineComponent as d, ref as p, computed as c } from "vue";
2
- import { useAccessibilityApi as m } from "../../../../composables/useAccessibilityApi.js";
3
- import { useTranslations as u } from "../../../../composables/useTranslations.js";
4
- import { useEditorStore as v } from "../../../../stores/editor.js";
5
- import { InDropdownMenu as f, InButtonV2 as y } from "@useinsider/design-system-vue";
6
- const C = /* @__PURE__ */ d({
7
- __name: "ColorVisionSelect",
8
- setup(K) {
9
- const i = "none", a = [
10
- {
11
- value: i,
12
- labelKey: "email-editor.cvd-none"
13
- },
14
- {
15
- value: "protanopia",
16
- labelKey: "email-editor.cvd-protanopia",
17
- descriptionKey: "email-editor.cvd-protanopia-description"
18
- },
19
- {
20
- value: "deuteranopia",
21
- labelKey: "email-editor.cvd-deuteranopia",
22
- descriptionKey: "email-editor.cvd-deuteranopia-description"
23
- },
24
- {
25
- value: "tritanopia",
26
- labelKey: "email-editor.cvd-tritanopia",
27
- descriptionKey: "email-editor.cvd-tritanopia-description"
28
- },
29
- {
30
- value: "achromatopsia",
31
- labelKey: "email-editor.cvd-achromatopsia",
32
- descriptionKey: "email-editor.cvd-achromatopsia-description"
33
- }
34
- ], r = v(), o = u(), { setColorVisionDeficiency: n } = m(), s = p(!1), t = c(() => a.map((e) => ({
35
- text: o(e.labelKey),
36
- value: e.value,
37
- ...e.descriptionKey ? { description: o(e.descriptionKey) } : {}
38
- }))), l = c(
39
- () => t.value.find((e) => e.value === (r.colorVisionDeficiency || i)) ?? t.value[0]
40
- );
41
- return { __sfc: !0, NONE: i, OPTIONS: a, editorStore: r, trans: o, setColorVisionDeficiency: n, isOpen: s, options: t, selectedOption: l, select: ({ value: e }) => {
42
- n(e === i ? "" : e), s.value = !1;
43
- }, InButtonV2: y, InDropdownMenu: f };
44
- }
45
- });
46
- export {
47
- C as default
48
- };
@@ -1,19 +0,0 @@
1
- import i from "./EditorTabBarOnboarding.vue2.js";
2
- /* empty css */
3
- import a from "../../../_virtual/_plugin-vue2_normalizer.js";
4
- var s = function() {
5
- var r, n;
6
- var t = this, e = t._self._c, o = t._self._setupProxy;
7
- return o.isVisible ? e(o.InOnboard, { key: "guido__tab-bar-onboard", staticClass: "w-21-s p-a z-11", class: (r = o.onboardingStore.getEditorTabBarCurrentCard) == null ? void 0 : r.classes, attrs: { id: o.CARD_ID, "is-multiple-page": "", visible: "", "image-source": "", title: "", "pages-config": o.onboardingStore.onboardings.editorTabBarOnboarding.config, "pointer-position": (n = o.onboardingStore.getEditorTabBarCurrentCard) == null ? void 0 : n.position, "right-position": o.placement.right, "top-position": o.placement.top }, on: { backButtonClick: o.handleBack, close: o.finish, nextButtonClick: o.handleNext } }) : t._e();
8
- }, c = [], d = /* @__PURE__ */ a(
9
- i,
10
- s,
11
- c,
12
- !1,
13
- null,
14
- "219b4f7c"
15
- );
16
- const g = d.exports;
17
- export {
18
- g as default
19
- };