@useinsider/guido 2.0.0-beta.ac3cd4d → 2.0.0-beta.af0a69f

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 (48) hide show
  1. package/dist/@types/config/schemas.js +36 -50
  2. package/dist/components/organisms/email-preview/PreviewContainer.vue.js +3 -3
  3. package/dist/components/organisms/email-preview/amp/AmpErrorModal.vue.js +8 -8
  4. package/dist/components/organisms/email-preview/amp/AmpErrorModal.vue2.js +12 -11
  5. package/dist/components/organisms/email-preview/amp/AmpToggle.vue.js +7 -8
  6. package/dist/components/organisms/email-preview/amp/AmpToggle.vue2.js +14 -12
  7. package/dist/components/organisms/email-preview/desktop-preview/DesktopPreview.vue.js +10 -14
  8. package/dist/components/organisms/email-preview/desktop-preview/DesktopPreview.vue2.js +18 -22
  9. package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue.js +3 -3
  10. package/dist/components/organisms/email-preview/mobile-preview/ContentView.vue.js +11 -10
  11. package/dist/components/organisms/email-preview/mobile-preview/MobilePreview.vue.js +11 -10
  12. package/dist/components/organisms/email-preview/mobile-preview/MobilePreview.vue2.js +15 -14
  13. package/dist/components/organisms/header/LeftSlot.vue.js +9 -9
  14. package/dist/components/organisms/header/MiddleSlot.vue.js +5 -4
  15. package/dist/components/organisms/header/MiddleSlot.vue2.js +14 -13
  16. package/dist/components/organisms/header/RightSlot.vue.js +7 -7
  17. package/dist/components/organisms/header/RightSlot.vue2.js +10 -10
  18. package/dist/components/organisms/onboarding/NewVersionPopup.vue2.js +15 -15
  19. package/dist/components/organisms/unsubscribe/UnsubscribeTypeSelection.vue.js +1 -1
  20. package/dist/components/organisms/unsubscribe/UnsubscribeTypeSelection.vue2.js +20 -19
  21. package/dist/components/wrappers/WpModal.vue.js +4 -3
  22. package/dist/composables/useConfig.js +27 -29
  23. package/dist/composables/useSave.js +11 -13
  24. package/dist/enums/academy.js +8 -0
  25. package/dist/enums/onboarding.js +1 -2
  26. package/dist/enums/unsubscribe.js +20 -21
  27. package/dist/extensions/Blocks/Unsubscribe/extension.js +9 -9
  28. package/dist/guido.css +1 -1
  29. package/dist/src/@types/config/index.d.ts +2 -2
  30. package/dist/src/@types/config/schemas.d.ts +0 -26
  31. package/dist/src/@types/config/types.d.ts +1 -7
  32. package/dist/src/composables/useConfig.d.ts +0 -6
  33. package/dist/src/enums/academy.d.ts +12 -0
  34. package/dist/src/enums/onboarding.d.ts +0 -1
  35. package/dist/src/enums/unsubscribe.d.ts +0 -1
  36. package/dist/src/stores/config.d.ts +1 -146
  37. package/dist/static/assets/desktop/desktop-mockup-center.svg.js +4 -0
  38. package/dist/static/assets/desktop/desktop-mockup-left.svg.js +4 -0
  39. package/dist/static/assets/desktop/desktop-mockup-right.svg.js +4 -0
  40. package/dist/static/assets/mobile/email-mockup.svg.js +4 -0
  41. package/dist/static/assets/mobile/inbox-mockup.svg.js +4 -0
  42. package/dist/static/styles/components/button.css.js +1 -1
  43. package/dist/stores/config.js +0 -7
  44. package/package.json +1 -1
  45. package/dist/components/organisms/email-preview/desktop-preview/EmailHeaderInfo.vue.js +0 -17
  46. package/dist/components/organisms/email-preview/desktop-preview/EmailHeaderInfo.vue2.js +0 -20
  47. package/dist/static/assets/inbox-mockup.svg.js +0 -4
  48. package/dist/static/assets/phone-mockup.svg.js +0 -4
@@ -1,5 +1,5 @@
1
- import { object as o, number as b, optional as e, string as t, pipe as u, picklist as n, custom as d, boolean as c, array as a, minLength as p, literal as r, variant as S } from "../../node_modules/valibot/dist/index.js";
2
- const m = {
1
+ import { object as o, number as p, optional as e, string as t, pipe as m, picklist as n, boolean as c, array as a, minLength as u, literal as r, custom as b, variant as S } from "../../node_modules/valibot/dist/index.js";
2
+ const i = {
3
3
  /** Promotional/marketing emails */
4
4
  PROMOTIONAL: 1,
5
5
  /** Transactional/system emails */
@@ -13,22 +13,22 @@ const m = {
13
13
  UNSUBSCRIBE_PAGES: 97
14
14
  }, h = o({
15
15
  /** Unique identifier for the template being edited */
16
- templateId: u(
16
+ templateId: m(
17
17
  t(),
18
- p(1, "templateId is required")
18
+ u(1, "templateId is required")
19
19
  ),
20
20
  /** Unique identifier for the user editing the template */
21
- userId: u(
21
+ userId: m(
22
22
  t(),
23
- p(1, "userId is required")
23
+ u(1, "userId is required")
24
24
  ),
25
25
  /** Optional variation ID for A/B testing */
26
26
  variationId: e(t())
27
27
  }), k = o({
28
28
  /** Partner/organization name (required) */
29
- name: u(
29
+ name: m(
30
30
  t(),
31
- p(1, "partner.name is required")
31
+ u(1, "partner.name is required")
32
32
  ),
33
33
  /** Product type identifier */
34
34
  productType: e(
@@ -41,8 +41,8 @@ const m = {
41
41
  ),
42
42
  /** Message type (promotional or transactional) */
43
43
  messageType: e(
44
- n([m.PROMOTIONAL, m.TRANSACTIONAL]),
45
- m.PROMOTIONAL
44
+ n([i.PROMOTIONAL, i.TRANSACTIONAL]),
45
+ i.PROMOTIONAL
46
46
  ),
47
47
  /** Display name for the current user */
48
48
  username: e(t(), "Guido User")
@@ -60,7 +60,7 @@ const m = {
60
60
  value: t()
61
61
  })
62
62
  )
63
- }), C = o({
63
+ }), R = o({
64
64
  /** Initial HTML content */
65
65
  html: e(t(), ""),
66
66
  /** Initial CSS content */
@@ -71,8 +71,8 @@ const m = {
71
71
  []
72
72
  ),
73
73
  /** Selected unsubscribe page IDs */
74
- selectedUnsubscribePages: e(a(b()), [])
75
- }), R = o({
74
+ selectedUnsubscribePages: e(a(p()), [])
75
+ }), C = o({
76
76
  /** Sender display name */
77
77
  senderName: e(t(), ""),
78
78
  /** Email subject line */
@@ -83,15 +83,15 @@ const m = {
83
83
  /** Path to translations object */
84
84
  translationsPath: e(t(), "window.trans.en"),
85
85
  /** Migration date for template compatibility */
86
- migrationDate: e(b(), 1759696858),
86
+ migrationDate: e(p(), 1759696858),
87
87
  /** Email header settings */
88
- emailHeader: e(R, { senderName: "", subject: "" })
88
+ emailHeader: e(C, { senderName: "", subject: "" })
89
89
  }), T = o({
90
90
  /** Whether to show the header bar */
91
91
  showHeader: e(c(), !0),
92
92
  /** Custom label for back button (if shown) */
93
93
  backButtonLabel: e(t())
94
- }), f = o({
94
+ }), A = o({
95
95
  /** Enable dynamic content insertion */
96
96
  dynamicContent: e(c(), !0),
97
97
  /** Enable save as template functionality */
@@ -106,7 +106,7 @@ const m = {
106
106
  unsubscribe: e(c(), !0),
107
107
  /** Disable modules panel in the editor */
108
108
  modulesDisabled: e(c(), !1)
109
- }), A = n([
109
+ }), f = n([
110
110
  "amp-accordion",
111
111
  "amp-carousel",
112
112
  "amp-form-controls",
@@ -131,7 +131,7 @@ const m = {
131
131
  ]), E = o({
132
132
  /** Default blocks to exclude from the editor */
133
133
  excludeDefaults: e(
134
- a(A),
134
+ a(f),
135
135
  []
136
136
  ),
137
137
  /** Custom blocks to include in the editor */
@@ -145,7 +145,7 @@ const m = {
145
145
  /** Human-readable description */
146
146
  description: e(t()),
147
147
  /** Priority for rule ordering (lower = earlier) */
148
- priority: b()
148
+ priority: p()
149
149
  }), N = o({
150
150
  ...l.entries,
151
151
  type: r("replace"),
@@ -173,32 +173,21 @@ const m = {
173
173
  ...l.entries,
174
174
  type: r("custom"),
175
175
  /** Custom processor function */
176
- processor: d(
177
- (i) => typeof i == "function",
176
+ processor: b(
177
+ (d) => typeof d == "function",
178
178
  "processor must be a function"
179
179
  )
180
- }), x = S("type", [
180
+ }), B = S("type", [
181
181
  N,
182
182
  O,
183
183
  L,
184
184
  v
185
- ]), B = o({
185
+ ]), P = o({
186
186
  /** Custom compiler rules to apply */
187
- customRules: e(a(x), []),
187
+ customRules: e(a(B), []),
188
188
  /** Skip default compiler rules */
189
189
  ignoreDefaultRules: e(c(), !1)
190
- }), P = o({
191
- /**
192
- * External validation handler called before save completes.
193
- * Return false to cancel the save operation.
194
- */
195
- externalValidation: e(
196
- d(
197
- (i) => typeof i == "function",
198
- "externalValidation must be a function"
199
- )
200
- )
201
- }), D = o({
190
+ }), x = o({
202
191
  // Required sections
203
192
  /** Identity configuration (required) */
204
193
  identity: h,
@@ -206,40 +195,37 @@ const m = {
206
195
  partner: k,
207
196
  // Optional sections (with defaults)
208
197
  /** Template content and presets */
209
- template: e(C, {}),
198
+ template: e(R, {}),
210
199
  /** Editor settings */
211
200
  editor: e(I, {}),
212
201
  /** UI configuration */
213
202
  ui: e(T, {}),
214
203
  /** Feature toggles */
215
- features: e(f, {}),
204
+ features: e(A, {}),
216
205
  /** Block configuration */
217
206
  blocks: e(E, {}),
218
207
  /** Compiler configuration */
219
- compiler: e(B, {}),
220
- /** Callbacks and event handlers */
221
- callbacks: e(P, {})
208
+ compiler: e(P, {})
222
209
  });
223
210
  export {
224
211
  E as BlocksSchema,
225
- P as CallbacksSchema,
226
- x as CompilerRuleSchema,
227
- B as CompilerSchema,
212
+ B as CompilerRuleSchema,
213
+ P as CompilerSchema,
228
214
  g as CustomBlockTypeSchema,
229
215
  v as CustomRuleSchema,
230
- A as DefaultBlockTypeSchema,
216
+ f as DefaultBlockTypeSchema,
231
217
  y as DynamicContentSchema,
232
218
  I as EditorSchema,
233
- R as EmailHeaderSchema,
234
- f as FeaturesSchema,
235
- D as GuidoConfigSchema,
219
+ C as EmailHeaderSchema,
220
+ A as FeaturesSchema,
221
+ x as GuidoConfigSchema,
236
222
  h as IdentitySchema,
237
- m as MessageType,
223
+ i as MessageType,
238
224
  k as PartnerSchema,
239
225
  s as ProductType,
240
226
  O as RegexRuleSchema,
241
227
  L as RemoveRuleSchema,
242
228
  N as ReplaceRuleSchema,
243
- C as TemplateSchema,
229
+ R as TemplateSchema,
244
230
  T as UISchema
245
231
  };
@@ -2,7 +2,7 @@ import s from "./PreviewContainer.vue2.js";
2
2
  import t from "../../../_virtual/_plugin-vue2_normalizer.js";
3
3
  var i = function() {
4
4
  var o = this, r = o._self._c, e = o._self._setupProxy;
5
- return e.previewStore.isLoaded ? r("div", { staticClass: "d-f f-d-c h-1 b-c-5 bor-r-2 pb-5" }, [r("div", { staticClass: "f-g-1 d-f p-5 o-a g-4 min-h-600" }, [r(e.DesktopPreview, { staticClass: "f-g-1 min-w-0" }), r(e.MobilePreview, { staticClass: "f-0 min-w-a" })], 1), e.previewStore.isAMPErrorModalVisible ? r(e.AmpErrorModal, { on: { close: function(_) {
5
+ return e.previewStore.isLoaded ? r("div", { staticClass: "d-f f-d-c h-1 b-c-5 bor-r-2" }, [r("div", { staticClass: "f-g-1 d-f p-5 o-a g-4 min-h-600" }, [r(e.DesktopPreview, { staticClass: "f-g-1 min-w-0" }), r(e.MobilePreview, { staticClass: "f-0 min-w-a" })], 1), e.previewStore.isAMPErrorModalVisible ? r(e.AmpErrorModal, { on: { close: function(_) {
6
6
  return e.previewStore.closeErrorModal();
7
7
  } } }) : o._e()], 1) : o._e();
8
8
  }, n = [], a = /* @__PURE__ */ t(
@@ -13,7 +13,7 @@ var i = function() {
13
13
  null,
14
14
  null
15
15
  );
16
- const p = a.exports;
16
+ const d = a.exports;
17
17
  export {
18
- p as default
18
+ d as default
19
19
  };
@@ -1,22 +1,22 @@
1
1
  import s from "./AmpErrorModal.vue2.js";
2
2
  /* empty css */
3
- import a from "../../../../_virtual/_plugin-vue2_normalizer.js";
3
+ import i from "../../../../_virtual/_plugin-vue2_normalizer.js";
4
4
  var n = function() {
5
5
  var e = this, r = e._self._c, t = e._self._setupProxy;
6
- return r(t.WpModal, { attrs: { id: "amp-error-modal", size: "medium", description: t.trans("email-editor.amp-validation-description"), "footer-button-options": t.footerButtonOptions, title: t.trans("email-editor.amp-validation-title") }, on: { close: function(o) {
6
+ return r(t.WpModal, { attrs: { id: "amp-error-modal", size: "small", description: t.trans("email-editor.amp-validation-description", { academyLink: t.ACADEMY_LINKS.AMP_FOR_EMAILS }), "footer-button-options": t.footerButtonOptions, title: t.trans("email-editor.amp-validation-title") }, on: { close: function(o) {
7
7
  return t.emit("close");
8
- }, "primary-action": t.handleFixInCodeEditor } }, [r("div", { staticClass: "d-f f-d-c" }, [r("div", { staticClass: "mb-3" }, [r("div", { staticClass: "l-s-5 f-s-1 f-w-600 t-c-55 t-t-u" }, [e._v(" " + e._s(t.errorCountText) + " ")])]), r("div", { staticClass: "d-f f-d-c g-13 max-h-21-s o-y-a error-list" }, e._l(t.previewStore.ampErrors, function(o, i) {
9
- return r(t.InOnPageMessage, { key: i, attrs: { icon: "filled-error-box", size: "medium", type: "alert", text: o } });
8
+ }, "primary-action": t.handleFixInCodeEditor } }, [r("div", { staticClass: "d-f f-d-c" }, [r("div", { staticClass: "mb-3" }, [r("div", { staticClass: "l-s-5 f-s-1 f-w-600 t-c-55 t-t-u" }, [e._v(" " + e._s(t.errorCountText) + " ")])]), r("div", { staticClass: "d-f f-d-c g-13 max-h-21-s o-y-a error-list" }, e._l(t.previewStore.ampErrors, function(o, a) {
9
+ return r(t.InOnPageMessage, { key: a, attrs: { icon: "filled-error-box", size: "small", type: "alert", text: o } });
10
10
  }), 1)])]);
11
- }, l = [], d = /* @__PURE__ */ a(
11
+ }, l = [], d = /* @__PURE__ */ i(
12
12
  s,
13
13
  n,
14
14
  l,
15
15
  !1,
16
16
  null,
17
- "7a09985c"
17
+ "5a366d74"
18
18
  );
19
- const _ = d.exports;
19
+ const f = d.exports;
20
20
  export {
21
- _ as default
21
+ f as default
22
22
  };
@@ -1,15 +1,16 @@
1
- import { defineComponent as p, ref as m, computed as c } from "vue";
1
+ import { defineComponent as a, ref as m, computed as c } from "vue";
2
2
  import d from "../../../wrappers/WpModal.vue.js";
3
3
  import { useCodeEditorApi as l } from "../../../../composables/useCodeEditorApi.js";
4
- import { usePreviewMode as u } from "../../../../composables/usePreviewMode.js";
5
- import { useTranslations as f } from "../../../../composables/useTranslations.js";
6
- import { usePreviewStore as _ } from "../../../../stores/preview.js";
7
- import { InOnPageMessage as g } from "@useinsider/design-system-vue";
8
- const P = /* @__PURE__ */ p({
4
+ import { usePreviewMode as f } from "../../../../composables/usePreviewMode.js";
5
+ import { useTranslations as u } from "../../../../composables/useTranslations.js";
6
+ import { ACADEMY_LINKS as _ } from "../../../../enums/academy.js";
7
+ import { usePreviewStore as g } from "../../../../stores/preview.js";
8
+ import { InOnPageMessage as x } from "@useinsider/design-system-vue";
9
+ const T = /* @__PURE__ */ a({
9
10
  __name: "AmpErrorModal",
10
11
  emits: ["close"],
11
- setup(x, { emit: e }) {
12
- const o = f(), { closePreviewMode: r } = u(), { openCodeEditor: t } = l(), n = _(), s = m({
12
+ setup(y, { emit: e }) {
13
+ const o = u(), { closePreviewMode: r } = f(), { openCodeEditor: t } = l(), n = g(), s = m({
13
14
  cancelOrBackButton: {
14
15
  type: "secondary",
15
16
  labelText: o("campaign-builder.cancel"),
@@ -21,10 +22,10 @@ const P = /* @__PURE__ */ p({
21
22
  }
22
23
  }), i = () => {
23
24
  e("close"), r(), t();
24
- }, a = c(() => `${o("products.errors")}(${n.ampErrors.length})`);
25
- return { __sfc: !0, emit: e, trans: o, closePreviewMode: r, openCodeEditor: t, previewStore: n, footerButtonOptions: s, handleFixInCodeEditor: i, errorCountText: a, WpModal: d, InOnPageMessage: g };
25
+ }, p = c(() => `${o("products.errors")}(${n.ampErrors.length})`);
26
+ return { __sfc: !0, emit: e, trans: o, closePreviewMode: r, openCodeEditor: t, previewStore: n, footerButtonOptions: s, handleFixInCodeEditor: i, errorCountText: p, WpModal: d, ACADEMY_LINKS: _, InOnPageMessage: x };
26
27
  }
27
28
  });
28
29
  export {
29
- P as default
30
+ T as default
30
31
  };
@@ -1,20 +1,19 @@
1
1
  import o from "./AmpToggle.vue2.js";
2
- /* empty css */
3
2
  import n from "../../../../_virtual/_plugin-vue2_normalizer.js";
4
- var s = function() {
3
+ var a = function() {
5
4
  var r = this, t = r._self._c, e = r._self._setupProxy;
6
- return t("div", [t("div", { staticClass: "d-f a-i-c ml-3" }, [t(e.InSegments, { attrs: { id: "guido__amp-toggle", "segment-list": e.segmentList, selected: e.previewStore.emailFormat }, on: { click: e.handleFormatChange } }), e.previewStore.showAMPErrorButton ? t(e.InButtonV2, { staticClass: "ml-2 d-f a-i-c b-c-11 b-c-h-11 t-c-4 t-c-h-4 i-c-4 bor-w-1 bor-s-s bor-c-11 bor-r-2", attrs: { id: "guido__amp-error-button", "left-icon": "line-error-box", type: "danger", "label-text-status": !1 }, on: { click: function(l) {
5
+ return t("div", [t("div", { staticClass: "d-f a-i-c ml-3" }, [t(e.InSegments, { attrs: { id: "guido__amp-toggle", "with-icon": "", "segment-list": e.segmentList, selected: e.previewStore.emailFormat }, on: { click: e.handleFormatChange } }), e.previewStore.showAMPErrorButton ? t(e.InButtonV2, { staticClass: "ml-2", attrs: { id: "guido__amp-error-button", "left-icon": "filled-amp", type: "danger", "label-text": e.trans("email-editor.check-amp-errors", { count: e.previewStore.ampErrors.length }) }, on: { click: function(m) {
7
6
  return e.previewStore.openErrorModal();
8
7
  } } }) : r._e()], 1)]);
9
- }, a = [], i = /* @__PURE__ */ n(
8
+ }, i = [], s = /* @__PURE__ */ n(
10
9
  o,
11
- s,
12
10
  a,
11
+ i,
13
12
  !1,
14
13
  null,
15
- "b5997368"
14
+ null
16
15
  );
17
- const d = i.exports;
16
+ const p = s.exports;
18
17
  export {
19
- d as default
18
+ p as default
20
19
  };
@@ -1,26 +1,28 @@
1
- import { defineComponent as m, computed as n } from "vue";
2
- import { useTranslations as r } from "../../../../composables/useTranslations.js";
3
- import { usePreviewStore as i } from "../../../../stores/preview.js";
1
+ import { defineComponent as n, computed as i } from "vue";
2
+ import { useTranslations as m } from "../../../../composables/useTranslations.js";
3
+ import { usePreviewStore as r } from "../../../../stores/preview.js";
4
4
  import { InButtonV2 as s, InSegments as l } from "@useinsider/design-system-vue";
5
- const _ = /* @__PURE__ */ m({
5
+ const _ = /* @__PURE__ */ n({
6
6
  __name: "AmpToggle",
7
7
  setup(p) {
8
- const t = i(), e = r(), o = n(() => [
8
+ const e = r(), t = m(), o = i(() => [
9
9
  {
10
- text: e("dynamic-creatives.html"),
11
- value: "html"
10
+ text: t("dynamic-creatives.html"),
11
+ value: "html",
12
+ icon: "line-code"
12
13
  },
13
14
  {
14
- text: e("email-editor.amp-html"),
15
+ text: t("email-editor.amp-html"),
15
16
  value: "AMP",
16
- tooltipText: t.hasAMP ? "" : e("email-editor.preview-amp-unavailable-tooltip"),
17
+ icon: "filled-amp",
18
+ tooltipText: e.hasAMP ? "" : t("email-editor.preview-amp-unavailable-tooltip"),
17
19
  position: "bottom",
18
20
  align: "center",
19
- disable: !t.hasAMP
21
+ disable: !e.hasAMP
20
22
  }
21
23
  ]);
22
- return { __sfc: !0, previewStore: t, trans: e, segmentList: o, handleFormatChange: (a) => {
23
- t.setEmailFormat(a);
24
+ return { __sfc: !0, previewStore: e, trans: t, segmentList: o, handleFormatChange: (a) => {
25
+ e.setEmailFormat(a);
24
26
  }, InSegments: l, InButtonV2: s };
25
27
  }
26
28
  });
@@ -1,22 +1,18 @@
1
- import o from "./DesktopPreview.vue2.js";
1
+ import r from "./DesktopPreview.vue2.js";
2
2
  /* empty css */
3
3
  import a from "../../../../_virtual/_plugin-vue2_normalizer.js";
4
- var s = function() {
5
- var r = this, t = r._self._c, e = r._self._setupProxy;
6
- return t("div", { ref: "containerRef", staticStyle: { "min-height": "720px", height: "80vh" } }, [t(e.InContainer, { staticClass: "s-2 m-b-5 desktop-preview-container", attrs: { "full-width-content-status": "", "header-status": "", "border-radius": "bor-r-1", "container-type": "default", "footer-status": !1 }, scopedSlots: r._u([{ key: "headerLeftSlot", fn: function() {
7
- return [t(e.EmailHeaderInfo)];
8
- }, proxy: !0 }, { key: "headerRightSlot", fn: function() {
9
- return [t(e.EmailSizeIndicator)];
10
- }, proxy: !0 }]) }, [e.isContainerReady ? t("iframe", { staticClass: "email-iframe w-1 bor-w-0", style: { height: e.iframeHeight }, attrs: { sandbox: "allow-same-origin allow-popups allow-forms allow-scripts", srcdoc: e.previewStore.previewHtml } }) : r._e()])], 1);
11
- }, i = [], n = /* @__PURE__ */ a(
12
- o,
13
- s,
4
+ var i = function() {
5
+ var t = this, e = t._self._c, s = t._self._setupProxy;
6
+ return e("div", { staticClass: "desktop-preview-wrapper" }, [e("p", { staticClass: "f-s-1 f-w-600 l-h-1 t-t-u t-c-53 mb-6 l-s-5" }, [t._v(" " + t._s(s.trans("email-editor.desktop-preview")) + " ")]), e("div", { ref: "containerRef", staticClass: "desktop-preview d-f f-d-c o-h s-1" }, [e("div", { staticClass: "desktop-preview__browser-header d-f w-1 f-sh-0" }, [e("img", { staticClass: "desktop-preview__browser-header-left f-sh-0", attrs: { alt: "", src: s.desktopMockupLeft } }), e("div", { staticClass: "desktop-preview__browser-header-center f-g-1", style: s.centerBackgroundStyle }), e("img", { staticClass: "desktop-preview__browser-header-right f-sh-0", attrs: { alt: "", src: s.desktopMockupRight } })]), e("div", { staticClass: "desktop-preview__content d-f f-g-1 o-h b-c-5 min-h-0" }, [e("div", { staticClass: "f-g-1 h-1 o-h b-c-4 min-w-0" }, [s.isContainerReady ? e("iframe", { staticClass: "desktop-preview__iframe d-b w-1 h-1 b-c-4 bor-s-n", attrs: { sandbox: "allow-same-origin allow-popups allow-forms allow-scripts", srcdoc: s.previewStore.previewHtml } }) : t._e()])])])]);
7
+ }, o = [], p = /* @__PURE__ */ a(
8
+ r,
14
9
  i,
10
+ o,
15
11
  !1,
16
12
  null,
17
- "2dd60b0c"
13
+ "d37ce87d"
18
14
  );
19
- const d = n.exports;
15
+ const n = p.exports;
20
16
  export {
21
- d as default
17
+ n as default
22
18
  };
@@ -1,31 +1,27 @@
1
- import { defineComponent as d, ref as r, onMounted as h, onBeforeUnmount as v, nextTick as g } from "vue";
2
- import { usePreviewStore as _ } from "../../../../stores/preview.js";
3
- import { InContainer as I } from "@useinsider/design-system-vue";
4
- import R from "./EmailHeaderInfo.vue.js";
5
- import C from "./EmailSizeIndicator.vue.js";
6
- const B = /* @__PURE__ */ d({
1
+ import { defineComponent as m, ref as s, computed as p, onMounted as u, onBeforeUnmount as f, nextTick as l } from "vue";
2
+ import { useTranslations as d } from "../../../../composables/useTranslations.js";
3
+ import k from "../../../../static/assets/desktop/desktop-mockup-center.svg.js";
4
+ import _ from "../../../../static/assets/desktop/desktop-mockup-left.svg.js";
5
+ import v from "../../../../static/assets/desktop/desktop-mockup-right.svg.js";
6
+ import { usePreviewStore as g } from "../../../../stores/preview.js";
7
+ const x = /* @__PURE__ */ m({
7
8
  __name: "DesktopPreview",
8
- setup(H) {
9
- const t = r(), i = r("400px"), a = r(!1), m = _(), n = () => {
10
- if (!t.value)
11
- return;
12
- const o = t.value.querySelector(".in-container");
13
- if (!o)
14
- return;
15
- const u = o.getBoundingClientRect(), s = o.querySelector(".in-container__header"), f = s ? s.getBoundingClientRect().height : 0, p = u.height - f;
16
- i.value = `${p}px`;
17
- };
9
+ setup(w) {
10
+ const c = d(), o = s(), t = s(!1), i = g();
18
11
  let e = null;
19
- const c = () => {
20
- n(), t.value && (e = new ResizeObserver(n), e.observe(t.value), g(() => {
21
- a.value = !0;
12
+ const a = p(() => ({
13
+ backgroundImage: `url("${k}")`
14
+ })), n = () => {
15
+ o.value && (e = new ResizeObserver(() => {
16
+ }), e.observe(o.value), l(() => {
17
+ t.value = !0;
22
18
  }));
23
- }, l = () => {
19
+ }, r = () => {
24
20
  e == null || e.disconnect();
25
21
  };
26
- return h(c), v(l), { __sfc: !0, containerRef: t, iframeHeight: i, isContainerReady: a, previewStore: m, calculateIframeHeight: n, resizeObserver: e, initIframe: c, cleanIframe: l, InContainer: I, EmailHeaderInfo: R, EmailSizeIndicator: C };
22
+ return u(n), f(r), { __sfc: !0, trans: c, containerRef: o, isContainerReady: t, previewStore: i, resizeObserver: e, centerBackgroundStyle: a, initIframe: n, cleanIframe: r, desktopMockupLeft: _, desktopMockupRight: v };
27
23
  }
28
24
  });
29
25
  export {
30
- B as default
26
+ x as default
31
27
  };
@@ -2,15 +2,15 @@ import i from "./EmailSizeIndicator.vue2.js";
2
2
  /* empty css */
3
3
  import r from "../../../../_virtual/_plugin-vue2_normalizer.js";
4
4
  var o = function() {
5
- var s = this, e = s._self._c, t = s._self._setupProxy;
6
- return e("div", { staticClass: "d-f a-i-c j-c-c" }, [e(t.InProgress, { staticClass: "min-w-15-s", attrs: { id: "email-size-progress", "description-status": "", "description-position": "left", description: t.htmlSize, "max-value": t.MAX_EMAIL_SIZE_IN_KB, type: t.progress.type, value: t.progress.value } }), e(t.InTooltip, { staticClass: "d-f ml-1", attrs: { id: "email-size-tooltip", align: "center", position: "bottom", text: t.trans("email-editor.preview-design-size-tooltip") } })], 1);
5
+ var t = this, s = t._self._c, e = t._self._setupProxy;
6
+ return e.previewStore.previewHtml ? s("div", { staticClass: "d-f a-i-c j-c-c" }, [s(e.InProgress, { staticClass: "min-w-15-s", attrs: { id: "email-size-progress", "description-status": "", "description-position": "left", description: e.htmlSize, "max-value": e.MAX_EMAIL_SIZE_IN_KB, type: e.progress.type, value: e.progress.value } }), s(e.InTooltip, { staticClass: "d-f ml-1", attrs: { id: "email-size-tooltip", align: "center", position: "bottom", text: e.trans("email-editor.preview-design-size-tooltip") } })], 1) : t._e();
7
7
  }, a = [], n = /* @__PURE__ */ r(
8
8
  i,
9
9
  o,
10
10
  a,
11
11
  !1,
12
12
  null,
13
- "c2adc57d"
13
+ "913a3417"
14
14
  );
15
15
  const m = n.exports;
16
16
  export {
@@ -1,19 +1,20 @@
1
- import n from "./ContentView.vue2.js";
2
- import e from "../../../../_virtual/_plugin-vue2_normalizer.js";
3
- var c = function() {
1
+ import e from "./ContentView.vue2.js";
2
+ /* empty css */
3
+ import n from "../../../../_virtual/_plugin-vue2_normalizer.js";
4
+ var i = function() {
4
5
  var a = this, s = a._self._c, t = a._self._setupProxy;
5
6
  return s("div", { staticClass: "w-1 h-1 b-c-4 d-f f-d-c" }, [s("div", { staticClass: "d-f j-c-s-b a-i-c p-2 h-6-s" }, [s("div", { staticClass: "d-f a-i-c cur-p", on: { click: function(l) {
6
7
  return a.$emit("back-to-inbox");
7
- } } }, [s(t.InIcons, { staticClass: "f-s-3 i-c-7", attrs: { name: "line-chevron-left" } }), s("span", { staticClass: "ml-2 f-s-1 f-w-400 l-h-1 t-c-7" }, [a._v(a._s(t.trans("newsletter.inbox")))])], 1), s("div", { staticClass: "d-f a-i-c" }, [s(t.InIcons, { staticClass: "i-c-52", attrs: { name: "line-chevron-down" } }), s(t.InIcons, { staticClass: "ml-1 i-c-52", attrs: { name: "line-chevron-up" } })], 1)]), s("iframe", { ref: "iframeRef", staticClass: "f-g-1 w-1 d-b b-c-4 bor-s-n", attrs: { sandbox: "allow-same-origin allow-popups allow-forms allow-scripts", srcdoc: t.previewStore.previewHtml }, on: { load: t.onLoad } })]);
8
- }, i = [], o = /* @__PURE__ */ e(
9
- n,
10
- c,
8
+ } } }, [s(t.InIcons, { staticClass: "f-s-3 i-c-7", attrs: { name: "line-chevron-left" } }), s("span", { staticClass: "ml-2 f-s-1 f-w-400 l-h-1 t-c-7" }, [a._v(a._s(t.trans("newsletter.inbox")))])], 1), s("div", { staticClass: "d-f a-i-c" }, [s(t.InIcons, { staticClass: "i-c-52", attrs: { name: "line-chevron-down" } }), s(t.InIcons, { staticClass: "ml-1 i-c-52", attrs: { name: "line-chevron-up" } })], 1)]), s("div", { staticClass: "iframe-wrapper f-g-1 o-h" }, [s("iframe", { ref: "iframeRef", staticClass: "iframe-scaled d-b b-c-4 bor-s-n", attrs: { sandbox: "allow-same-origin allow-popups allow-forms allow-scripts", srcdoc: t.previewStore.previewHtml }, on: { load: t.onLoad } })])]);
9
+ }, r = [], c = /* @__PURE__ */ n(
10
+ e,
11
11
  i,
12
+ r,
12
13
  !1,
13
14
  null,
14
- null
15
+ "283eeb6b"
15
16
  );
16
- const d = o.exports;
17
+ const p = c.exports;
17
18
  export {
18
- d as default
19
+ p as default
19
20
  };
@@ -1,17 +1,18 @@
1
- import t from "./MobilePreview.vue2.js";
2
- import n from "../../../../_virtual/_plugin-vue2_normalizer.js";
3
- var a = function() {
4
- var o = this, s = o._self._c, e = o._self._setupProxy;
5
- return s("div", { staticClass: "d-f j-c-c pl-5" }, [s("div", { staticClass: "p-r w-35-s h-26-s" }, [s("img", { staticClass: "w-1 h-1 d-b p-e-n", attrs: { alt: e.mockup.alt, src: e.mockup.image } }), s("div", { staticClass: "p-a w-21-s h-24-s o-h", style: { top: e.phoneScreenTopMargin, left: "20px" } }, [e.showInbox ? s(e.InboxView, { on: { "open-email": e.openEmail } }) : s(e.ContentView, { on: { "back-to-inbox": e.backToInbox } })], 1)])]);
6
- }, r = [], i = /* @__PURE__ */ n(
7
- t,
8
- a,
1
+ import s from "./MobilePreview.vue2.js";
2
+ /* empty css */
3
+ import a from "../../../../_virtual/_plugin-vue2_normalizer.js";
4
+ var i = function() {
5
+ var o = this, t = o._self._c, e = o._self._setupProxy;
6
+ return t("div", { staticClass: "mobile-preview-wrapper" }, [t("p", { staticClass: "f-s-1 f-w-600 l-h-1 t-t-u t-c-53 ml-5 mb-6 l-s-5" }, [o._v(" " + o._s(e.trans("email-editor.mobile-preview")) + " ")]), t("div", { staticClass: "d-f j-c-c pl-5" }, [t("div", { staticClass: "mobile-preview-wrapper__phone p-r" }, [t("img", { staticClass: "w-1 h-1 d-b p-e-n s-2", attrs: { alt: e.mockup.alt, src: e.mockup.image } }), t("div", { staticClass: "mobile-preview-wrapper__content p-a o-h", style: { top: e.phoneScreenTopMargin } }, [e.showInbox ? t(e.InboxView, { on: { "open-email": e.openEmail } }) : t(e.ContentView, { on: { "back-to-inbox": e.backToInbox } })], 1)])])]);
7
+ }, r = [], n = /* @__PURE__ */ a(
8
+ s,
9
+ i,
9
10
  r,
10
11
  !1,
11
12
  null,
12
- null
13
+ "a6fbc0a8"
13
14
  );
14
- const _ = i.exports;
15
+ const _ = n.exports;
15
16
  export {
16
17
  _ as default
17
18
  };
@@ -1,22 +1,23 @@
1
- import { defineComponent as m, ref as i, computed as e } from "vue";
2
- import a from "../../../../static/assets/inbox-mockup.svg.js";
3
- import c from "../../../../static/assets/phone-mockup.svg.js";
4
- import s from "./ContentView.vue.js";
5
- import u from "./InboxView.vue.js";
6
- const w = /* @__PURE__ */ m({
1
+ import { defineComponent as a, ref as i, computed as e } from "vue";
2
+ import { useTranslations as s } from "../../../../composables/useTranslations.js";
3
+ import c from "../../../../static/assets/mobile/email-mockup.svg.js";
4
+ import u from "../../../../static/assets/mobile/inbox-mockup.svg.js";
5
+ import f from "./ContentView.vue.js";
6
+ import l from "./InboxView.vue.js";
7
+ const k = /* @__PURE__ */ a({
7
8
  __name: "MobilePreview",
8
- setup(f) {
9
- const o = i(!1), n = e(() => ({
10
- image: o.value ? a : c,
9
+ setup(v) {
10
+ const n = s(), o = i(!1), r = e(() => ({
11
+ image: o.value ? u : c,
11
12
  alt: o.value ? "Inbox mockup" : "Phone mockup"
12
- })), r = () => {
13
+ })), t = () => {
13
14
  o.value = !1;
14
- }, t = () => {
15
+ }, m = () => {
15
16
  o.value = !0;
16
- }, p = e(() => o.value ? "88px" : "44px");
17
- return { __sfc: !0, showInbox: o, mockup: n, openEmail: r, backToInbox: t, phoneScreenTopMargin: p, ContentView: s, InboxView: u };
17
+ }, p = e(() => o.value ? "88px" : "64px");
18
+ return { __sfc: !0, trans: n, showInbox: o, mockup: r, openEmail: t, backToInbox: m, phoneScreenTopMargin: p, ContentView: f, InboxView: l };
18
19
  }
19
20
  });
20
21
  export {
21
- w as default
22
+ k as default
22
23
  };
@@ -1,18 +1,18 @@
1
- import s from "./LeftSlot.vue2.js";
1
+ import r from "./LeftSlot.vue2.js";
2
2
  /* empty css */
3
- import r from "../../../_virtual/_plugin-vue2_normalizer.js";
4
- var n = function() {
3
+ import n from "../../../_virtual/_plugin-vue2_normalizer.js";
4
+ var s = function() {
5
5
  var e = this, o = e._self._c, t = e._self._setupProxy;
6
- return o("div", { staticClass: "d-f a-i-c" }, [o(t.InButtonV2, { staticClass: "p-2", attrs: { id: "guido__back-button", "left-icon": "line-arrow-left", styling: "text", type: "secondary", "label-text": t.backButtonLabel }, on: { click: t.handleBackClick } }), t.editorStore.isVersionHistoryOpen ? o(t.RestoreButton, { staticClass: "ml-3" }) : e._e()], 1);
7
- }, a = [], i = /* @__PURE__ */ r(
6
+ return o("div", { staticClass: "d-f a-i-c" }, [o(t.InButtonV2, { attrs: { id: "guido__back-button", "left-icon": "line-arrow-left", styling: "ghost", type: "secondary", "label-text": t.backButtonLabel }, on: { click: t.handleBackClick } }), t.editorStore.isVersionHistoryOpen ? o(t.RestoreButton, { staticClass: "ml-3" }) : e._e()], 1);
7
+ }, a = [], i = /* @__PURE__ */ n(
8
+ r,
8
9
  s,
9
- n,
10
10
  a,
11
11
  !1,
12
12
  null,
13
- "06e6f7a7"
13
+ "ebbb05a8"
14
14
  );
15
- const p = i.exports;
15
+ const d = i.exports;
16
16
  export {
17
- p as default
17
+ d as default
18
18
  };