@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,90 +0,0 @@
1
- import { defineComponent as M, ref as q, computed as P, watch as I, nextTick as N } from "vue";
2
- import { useConfig as D } from "../../../composables/useConfig.js";
3
- import { useRibbonOffset as F } from "../../../composables/useRibbonOffset.js";
4
- import { useTranslations as G } from "../../../composables/useTranslations.js";
5
- import { useOnboardingStore as K } from "../../../stores/onboarding.js";
6
- import { InOnboard as $ } from "@useinsider/design-system-vue";
7
- const Q = /* @__PURE__ */ M({
8
- __name: "EditorTabBarOnboarding",
9
- setup(H) {
10
- const r = "editorTabBarOnboarding", B = "guido__tab-bar-onboard", i = G(), o = K(), { isFeatureEnabled: x } = D(), { getTopPosition: f } = F(), k = () => o.next(r), T = () => o.previous(r), _ = () => void o.close(r), C = 4, O = 17, d = "#guido__kebab-button", b = ".editor-actions-menu__dropdown", c = (t, e, n) => ({
11
- classes: "guido-tab-bar-onboarding",
12
- position: "Right Top",
13
- title: i(t),
14
- description: i(e),
15
- imageSource: "",
16
- backButtonType: "text",
17
- backButtonText: i("action-builder.back"),
18
- backButtonClick: T,
19
- nextButtonType: "text",
20
- nextButtonText: i("action-builder.next"),
21
- nextButtonClick: k,
22
- ...n
23
- }), g = { backButtonType: void 0, backButtonText: void 0, backButtonClick: () => {
24
- } }, v = () => x("autosave") ? [{
25
- card: c("email-editor.onboarding-autosave-title", "email-editor.onboarding-autosave-description", {
26
- pinsMenu: !0
27
- }),
28
- edge: b,
29
- target: '[data-attr-value="guido__kebab-autosave"]'
30
- }] : [], h = () => [
31
- {
32
- card: c("email-editor.onboarding-kebab-title", "email-editor.onboarding-kebab-description", g),
33
- edge: d,
34
- target: d
35
- },
36
- ...v(),
37
- {
38
- card: c("email-editor.onboarding-accessibility-title", "email-editor.onboarding-accessibility-description", {
39
- nextButtonText: i("action-builder.ok"),
40
- nextButtonClick: _,
41
- pinsMenu: !0
42
- }),
43
- edge: b,
44
- target: '[data-attr-value="guido__kebab-accessibility"]'
45
- }
46
- ], y = (t, e) => {
47
- if (e <= 0 || e >= t.length)
48
- return { steps: t, offset: 0 };
49
- const [n, ...a] = t.slice(e);
50
- return { steps: [{ ...n, card: { ...n.card, ...g } }, ...a], offset: e };
51
- }, l = () => ({ top: f(56), right: "150px" });
52
- let s = [];
53
- const p = q(l()), m = async () => {
54
- var R;
55
- await N();
56
- const t = s[o.onboardings.editorTabBarOnboarding.cardIndex], e = (R = document.getElementById(B)) == null ? void 0 : R.offsetParent, n = (t && document.querySelector(t.edge)) ?? document.querySelector(d), a = (t && document.querySelector(t.target)) ?? document.querySelector(d);
57
- if (!e || !n || !a) {
58
- p.value = l();
59
- return;
60
- }
61
- const u = e.getBoundingClientRect(), E = a.getBoundingClientRect();
62
- p.value = {
63
- top: `${Math.round(E.top + E.height / 2 - u.top - O)}px`,
64
- right: `${Math.round(u.right - n.getBoundingClientRect().left - C)}px`
65
- };
66
- }, A = P(
67
- () => o.onboardings.editorTabBarOnboarding.config.length > 0 && o.onboardings.editorTabBarOnboarding.isActive
68
- ), S = () => {
69
- var t, e;
70
- (e = (t = o.getEditorTabBarCurrentCard) == null ? void 0 : t.nextButtonClick) == null || e.call(t);
71
- }, w = () => {
72
- var t, e;
73
- (e = (t = o.getEditorTabBarCurrentCard) == null ? void 0 : t.backButtonClick) == null || e.call(t);
74
- };
75
- return I(
76
- () => o.onboardings.editorTabBarOnboarding.isActive,
77
- async (t) => {
78
- if (!t)
79
- return;
80
- await N();
81
- const { cardOffset: e, cardIndex: n } = o.onboardings.editorTabBarOnboarding, a = y(h(), e + n);
82
- ({ steps: s } = a), o.resetCardIndex(r), o.setConfig(r, s.map((u) => u.card), a.offset), await m();
83
- },
84
- { immediate: !0 }
85
- ), I(() => o.onboardings.editorTabBarOnboarding.cardIndex, m), { __sfc: !0, ONBOARDING: r, CARD_ID: B, trans: i, onboardingStore: o, isFeatureEnabled: x, getTopPosition: f, goNext: k, goBack: T, finish: _, ANCHOR_GAP: C, POINTER_CENTER: O, KEBAB: d, MENU: b, card: c, NO_BACK: g, autoSaveStep: v, buildSteps: h, resumeFrom: y, designFallback: l, steps: s, placement: p, place: m, isVisible: A, handleNext: S, handleBack: w, InOnboard: $ };
86
- }
87
- });
88
- export {
89
- Q as default
90
- };
@@ -1,51 +0,0 @@
1
- import { ToasterTypeOptions as p } from "../enums/toaster.js";
2
- import { useEditorStore as m } from "../stores/editor.js";
3
- import { findEditorApi as d, EDITOR_NOT_READY_MESSAGE as A } from "../utils/stripoEditorApi.js";
4
- import { useToaster as b } from "./useToaster.js";
5
- const C = () => {
6
- const e = m(), { showToaster: a, handleError: t } = b(), s = (i) => {
7
- var g;
8
- const o = (g = d()) == null ? void 0 : g.accessibilityApi;
9
- if (!o) {
10
- a({ type: p.Error, message: A });
11
- return;
12
- }
13
- try {
14
- i(o);
15
- } catch (y) {
16
- t(y, "Accessibility Test action failed");
17
- }
18
- }, c = () => s((i) => {
19
- i.openAccessibilityTestingMode(), e.isAccessibilityTestingOpen = !0;
20
- }), r = () => {
21
- var i;
22
- try {
23
- (i = d()) == null || i.accessibilityApi.closeAccessibilityTestingMode();
24
- } catch (o) {
25
- t(o, "Failed to exit Accessibility Test");
26
- } finally {
27
- e.isAccessibilityTestingOpen = !1, e.imagesHidden = !1, e.colorVisionDeficiency = "";
28
- }
29
- }, T = () => e.isAccessibilityTestingOpen ? r() : c(), n = () => s((i) => {
30
- i.showImages(), e.imagesHidden = !1;
31
- }), l = () => s((i) => {
32
- i.hideImages(), e.imagesHidden = !0;
33
- });
34
- return {
35
- openAccessibilityTestingMode: c,
36
- closeAccessibilityTestingMode: r,
37
- toggleAccessibilityTestingMode: T,
38
- showImages: n,
39
- hideImages: l,
40
- toggleImages: () => e.imagesHidden ? n() : l(),
41
- setColorVisionDeficiency: (i) => s((o) => {
42
- o.setColorVisionDeficiency(i), e.colorVisionDeficiency = i;
43
- }),
44
- switchToDesktopPreview: () => s((i) => i.switchToDesktopPreview()),
45
- switchToMobilePreview: () => s((i) => i.switchToMobilePreview()),
46
- toggleCodeEditor: () => s((i) => i.emitToggleCodeEditor())
47
- };
48
- };
49
- export {
50
- C as useAccessibilityApi
51
- };
@@ -1,2 +0,0 @@
1
- declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
2
- export default _default;
@@ -1,2 +0,0 @@
1
- declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
2
- export default _default;
@@ -1,2 +0,0 @@
1
- declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
2
- export default _default;
@@ -1,2 +0,0 @@
1
- declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
2
- export default _default;
@@ -1,13 +0,0 @@
1
- import type { ColorVisionDeficiency } from '@@/Types/api/accessibility-api';
2
- export declare const useAccessibilityApi: () => {
3
- openAccessibilityTestingMode: () => void;
4
- closeAccessibilityTestingMode: () => void;
5
- toggleAccessibilityTestingMode: () => void;
6
- showImages: () => void;
7
- hideImages: () => void;
8
- toggleImages: () => void;
9
- setColorVisionDeficiency: (type: ColorVisionDeficiency) => void;
10
- switchToDesktopPreview: () => void;
11
- switchToMobilePreview: () => void;
12
- toggleCodeEditor: () => void;
13
- };
@@ -1,234 +0,0 @@
1
- const n = `
2
- ue-ui-simple-panel.accessibility-panel,
3
- ue-accessibility-panel {
4
- height: 100%;
5
- }
6
-
7
- ue-accessibility-panel .header-control-panel-right {
8
- min-width: 50px;
9
- min-height: 50px;
10
- }
11
-
12
- ue-accessibility-panel .tabs-header .accent {
13
- min-width: 21px;
14
- margin-left: 8px;
15
- padding: 3px 5px;
16
- border: 1px solid var(--guido-color-gray-300);
17
- border-radius: 4px;
18
- background-color: var(--guido-color-white);
19
- color: var(--guido-color-gray-800);
20
- font-size: 13px;
21
- font-weight: 400;
22
- line-height: 16px;
23
- }
24
-
25
- ue-accessibility-panel .tabs-header button.checked .accent {
26
- border-color: var(--guido-color-primary-500);
27
- color: var(--guido-color-primary-500);
28
- }
29
-
30
- ue-accessibility-panel .issue-card-surface {
31
- border-radius: 8px;
32
- outline: 1px solid var(--guido-color-gray-300);
33
- outline-offset: -1px;
34
- }
35
-
36
- ue-accessibility-panel .issue-card-surface--active {
37
- outline-color: var(--guido-color-primary-500);
38
- }
39
-
40
- ue-accessibility-panel .issue-card-title {
41
- color: var(--guido-color-gray-800);
42
- }
43
-
44
- ue-accessibility-panel .issue-card-header-row .icon-help {
45
- display: inline-flex;
46
- align-items: center;
47
- justify-content: center;
48
- width: 24px;
49
- height: 24px;
50
- color: var(--guido-color-gray-600);
51
- }
52
-
53
- ue-accessibility-panel .issue-card-header-row .icon-help svg {
54
- width: 14px;
55
- height: 14px;
56
- }
57
-
58
- ue-accessibility-panel .issue-card-header-row ue-icon-component.danger {
59
- color: var(--guido-color-danger-500);
60
- }
61
-
62
- ue-accessibility-panel .issue-card-header-row ue-icon-component.warning {
63
- color: var(--guido-color-warning-500);
64
- }
65
-
66
- ue-accessibility-panel .issue-card-header-row ue-icon-component.info {
67
- color: var(--guido-color-primary-500);
68
- }
69
-
70
- ue-accessibility-passed-tab input,
71
- ue-accessibility-passed-tab ue-select .toggle-select-button {
72
- opacity: 0.6;
73
- cursor: not-allowed;
74
- }
75
-
76
- ue-accessibility-panel .controls-separator-line:has(.fit-to-color) {
77
- padding: 10px;
78
- }
79
-
80
- ue-accessibility-passed-tab .controls-separator-line:has(.fit-to-color) {
81
- padding-bottom: 34px;
82
- }
83
-
84
- ue-accessibility-panel .controls-separator-line:has(.fit-to-color) .sub-container.two-columns {
85
- box-sizing: border-box;
86
- min-height: 50px;
87
- padding: 5px 16px;
88
- align-items: center;
89
- }
90
-
91
- ue-accessibility-panel .controls-list.fit-to-color {
92
- justify-content: flex-end;
93
- align-items: center;
94
- gap: 0;
95
- font-size: 13px;
96
- line-height: 16px;
97
- }
98
-
99
- ue-accessibility-panel .controls-list.fit-to-color ue-icon-component {
100
- align-items: center;
101
- justify-content: center;
102
- width: 24px;
103
- height: 24px;
104
- margin: 0;
105
- }
106
-
107
- ue-accessibility-panel .controls-list.fit-to-color ue-icon-component svg {
108
- width: 16px;
109
- height: 16px;
110
- }
111
-
112
- ue-accessibility-panel .controls-list.fit-to-color ue-icon-component.warning {
113
- color: var(--guido-color-warning-500);
114
- }
115
-
116
- ue-accessibility-panel {
117
- --ue-accessibility-image-width: 240px;
118
- --ue-accessibility-image-height: 240px;
119
- }
120
-
121
- ue-accessibility-panel ue-scrollable-container:has(.accessibility-list-empty, ue-accessibility-passed-tab:empty) {
122
- flex-grow: 1;
123
- }
124
-
125
- ue-accessibility-panel ue-scrollable-container:has(.accessibility-list-empty, ue-accessibility-passed-tab:empty) .ue-scrollable {
126
- height: 100%;
127
- }
128
-
129
- ue-accessibility-panel .ue-scrollable-content:has(.accessibility-list-empty, ue-accessibility-passed-tab:empty) {
130
- display: flex;
131
- flex-direction: column;
132
- justify-content: center;
133
- min-height: 100%;
134
- }
135
-
136
- ue-accessibility-panel .accessibility-list-empty.light-theme.failed-list,
137
- ue-accessibility-panel .accessibility-list-empty.light-theme.ignored-list,
138
- ue-accessibility-passed-tab:empty::before {
139
- display: block;
140
- height: auto;
141
- margin: 0;
142
- padding: 248px 16px 0;
143
- background: url("https://image.useinsider.com/insider-design-system/img/speacial/no-personalization.svg") no-repeat center top / 240px 240px;
144
- color: var(--guido-color-neutral-500);
145
- font-size: 15px;
146
- line-height: 24px;
147
- text-align: center;
148
- white-space: pre-line;
149
- }
150
-
151
- ue-accessibility-passed-tab:empty {
152
- display: block;
153
- }
154
-
155
- ue-accessibility-passed-tab:empty::before {
156
- content: "No Passed Items\\A You have no passed items.";
157
- }
158
-
159
- ue-accessibility-panel .accessibility-list-empty::first-line,
160
- ue-accessibility-passed-tab:empty::first-line {
161
- color: var(--guido-color-neutral-700);
162
- font-size: 18px;
163
- line-height: 40px;
164
- }
165
-
166
- ue-accessibility-panel .e2e-ignore-button > .button,
167
- ue-accessibility-panel .e2e-unignore-button > .button,
168
- ue-accessibility-panel .e2e-auto-tune-button > .button {
169
- border: none;
170
- background-color: var(--guido-color-neutral-200);
171
- color: var(--guido-color-neutral-800);
172
- }
173
-
174
- ue-accessibility-panel .e2e-ignore-button > .button .icon-button,
175
- ue-accessibility-panel .e2e-unignore-button > .button .icon-button,
176
- ue-accessibility-panel .e2e-auto-tune-button > .button .icon-button {
177
- color: var(--guido-color-neutral-800);
178
- }
179
-
180
- ue-accessibility-panel .e2e-ignore-button > .button:hover:not(:disabled,.disabled),
181
- ue-accessibility-panel .e2e-unignore-button > .button:hover:not(:disabled,.disabled),
182
- ue-accessibility-panel .e2e-auto-tune-button > .button:hover:not(:disabled,.disabled) {
183
- background-color: var(--guido-color-neutral-100);
184
- }
185
-
186
- ue-accessibility-panel .e2e-apply-button > .button {
187
- border: none;
188
- background-color: var(--guido-color-primary-100);
189
- color: var(--guido-color-primary-500);
190
- }
191
-
192
- ue-accessibility-panel .e2e-apply-button > .button .icon-button {
193
- color: var(--guido-color-primary-500);
194
- }
195
-
196
- ue-accessibility-panel .e2e-apply-button > .button:hover:not(:disabled,.disabled) {
197
- background-color: var(--guido-color-primary-0);
198
- }
199
-
200
- .e2e-accessibility-refresh .icon-button {
201
- color: var(--guido-color-primary-500);
202
- }
203
-
204
- .ue-popover.dark,
205
- .ue-popover.dark-tiny {
206
- border-radius: 4px;
207
- background: var(--guido-color-gray-800);
208
- box-shadow: 0 15px 17.5px rgb(0 0 0 / 10%), 0 8px 5px rgb(0 0 0 / 10%);
209
- color: var(--guido-color-white);
210
- font-size: 13px;
211
- line-height: 16px;
212
- }
213
-
214
- .ue-popover.dark .popup-pointer ue-icon-component svg,
215
- .ue-popover.dark-tiny .popup-pointer ue-icon-component svg {
216
- fill: var(--guido-color-gray-800);
217
- }
218
-
219
- .ue-popover.dark a,
220
- .ue-popover.dark-tiny a,
221
- .ue-popover.dark ue-description a,
222
- .ue-popover.dark-tiny ue-description a {
223
- color: var(--guido-color-white);
224
- text-decoration: underline;
225
- }
226
-
227
- .ue-popover ue-description a[href^="https://act-rules.github.io/"],
228
- .ue-popover ue-description a[href^="https://dequeuniversity.com/"] {
229
- display: inline;
230
- }
231
- `;
232
- export {
233
- n as default
234
- };