@useinsider/guido 3.9.0-beta.ba394b1 → 3.9.0-beta.c3e1698

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.
@@ -4,20 +4,21 @@ import e from "../static/styles/components/amp-block.css.js";
4
4
  import i from "../static/styles/components/base-input.css.js";
5
5
  import p from "../static/styles/components/button-group.css.js";
6
6
  import n from "../static/styles/components/button.css.js";
7
- import s from "../static/styles/components/combobox.css.js";
8
- import C from "../static/styles/components/counter.css.js";
7
+ import C from "../static/styles/components/combobox.css.js";
8
+ import s from "../static/styles/components/counter.css.js";
9
9
  import f from "../static/styles/components/dropdown-menu.css.js";
10
10
  import a from "../static/styles/components/loader.css.js";
11
11
  import u from "../static/styles/components/narrow-panel.css.js";
12
- import c from "../static/styles/components/popup.css.js";
13
- import d from "../static/styles/components/switcher.css.js";
14
- import l from "../static/styles/components/tabs.css.js";
15
- import h from "../static/styles/components/tools.css.js";
16
- import w from "../static/styles/components/version-history.css.js";
17
- import y from "../static/styles/components/wide-panel.css.js";
18
- import B from "../static/styles/variables.css.js";
19
- const b = [
20
- B,
12
+ import c from "../static/styles/components/notification.css.js";
13
+ import d from "../static/styles/components/popup.css.js";
14
+ import l from "../static/styles/components/switcher.css.js";
15
+ import h from "../static/styles/components/tabs.css.js";
16
+ import w from "../static/styles/components/tools.css.js";
17
+ import y from "../static/styles/components/version-history.css.js";
18
+ import B from "../static/styles/components/wide-panel.css.js";
19
+ import b from "../static/styles/variables.css.js";
20
+ const A = [
21
+ b,
21
22
  // Must be on top
22
23
  S,
23
24
  // Must be on top
@@ -26,8 +27,8 @@ const b = [
26
27
  i,
27
28
  p,
28
29
  n,
29
- s,
30
30
  C,
31
+ s,
31
32
  f,
32
33
  a,
33
34
  u,
@@ -36,12 +37,13 @@ const b = [
36
37
  l,
37
38
  h,
38
39
  w,
39
- y
40
+ y,
41
+ B
40
42
  ].join(`
41
43
 
42
- `), v = () => ({ importCss: () => {
44
+ `), F = () => ({ importCss: () => {
43
45
  const o = new CSSStyleSheet();
44
- o.replaceSync(b);
46
+ o.replaceSync(A);
45
47
  const r = document.querySelector("ui-editor");
46
48
  if (!r)
47
49
  return;
@@ -49,5 +51,5 @@ const b = [
49
51
  t && (t.adoptedStyleSheets = [o]);
50
52
  } });
51
53
  export {
52
- v as useCustomInterfaceAppearance
54
+ F as useCustomInterfaceAppearance
53
55
  };
@@ -1,30 +1,29 @@
1
- import { useActionsApi as U } from "./useActionsApi.js";
2
- import { useBlocksConfig as R } from "./useBlocksConfig.js";
3
- import { useConfig as x } from "./useConfig.js";
4
- import { useCustomInterfaceAppearance as O } from "./useCustomInterfaceAppearance.js";
5
- import { useFullStoryBridge as q } from "./useFullStoryBridge.js";
6
- import { useStripoEventHandler as H } from "./useStripoEventHandler.js";
7
- import { useStripoNotifications as N } from "./useStripoNotifications.js";
8
- import { useToaster as z } from "./useToaster.js";
9
- import { localePatch as L } from "../config/i18n/index.js";
1
+ import { useActionsApi as I } from "./useActionsApi.js";
2
+ import { useBlocksConfig as U } from "./useBlocksConfig.js";
3
+ import { useConfig as R } from "./useConfig.js";
4
+ import { useCustomInterfaceAppearance as x } from "./useCustomInterfaceAppearance.js";
5
+ import { useFullStoryBridge as O } from "./useFullStoryBridge.js";
6
+ import { useStripoEventHandler as q } from "./useStripoEventHandler.js";
7
+ import { useToaster as H } from "./useToaster.js";
8
+ import { localePatch as z } from "../config/i18n/index.js";
10
9
  import { en as h } from "../config/i18n/en/index.js";
11
- import { ToasterTypeOptions as $ } from "../enums/toaster.js";
12
- import { useStripoApi as G } from "../services/stripoApi.js";
13
- import J from "../static/styles/customEditorStyle.css.js";
10
+ import { ToasterTypeOptions as L } from "../enums/toaster.js";
11
+ import { useStripoApi as $ } from "../services/stripoApi.js";
12
+ import G from "../static/styles/customEditorStyle.css.js";
14
13
  import { useEditorStore as C } from "../stores/editor.js";
15
- import { dynamicContentToMergeTags as X } from "../utils/genericUtil.js";
16
- import j from "../package.json.js";
17
- const pe = (E, l) => {
18
- const { features: c, template: w, isFeatureEnabled: u } = x(), { handleError: m, showToaster: b } = z(), { getToken: T, getCustomFonts: k, getSyncModulesStatus: B } = G(), { handleEvent: F } = H(), { getStripoBlocksConfig: v } = R(), { getStripoNotifications: V } = N(), _ = async (s, i = [], r = !1) => {
14
+ import { dynamicContentToMergeTags as J } from "../utils/genericUtil.js";
15
+ import N from "../package.json.js";
16
+ const ce = (E, l) => {
17
+ const { features: c, template: w, isFeatureEnabled: u } = R(), { handleError: m, showToaster: b } = H(), { getToken: T, getCustomFonts: k, getSyncModulesStatus: B } = $(), { handleEvent: F } = q(), { getStripoBlocksConfig: v } = U(), V = async (s, r = [], i = !1) => {
19
18
  var g, S, y;
20
- const e = C(), { html: p, css: a } = s, { baseBlocks: t, extensions: d } = await v(), f = ((g = c.value) == null ? void 0 : g.displayConditions) ?? !0, M = ((S = c.value) == null ? void 0 : S.modulesDisabled) ?? !1, P = ((y = w.value) == null ? void 0 : y.forceRecreate) ?? !1;
19
+ const e = C(), { html: p, css: a } = s, { baseBlocks: t, extensions: d } = await v(), f = ((g = c.value) == null ? void 0 : g.displayConditions) ?? !0, A = ((S = c.value) == null ? void 0 : S.modulesDisabled) ?? !1, M = ((y = w.value) == null ? void 0 : y.forceRecreate) ?? !1;
21
20
  await window.UIEditor.initEditor(
22
21
  document.querySelector("#guido-editor"),
23
22
  {
24
23
  metadata: E,
25
24
  html: p,
26
25
  css: a,
27
- forceRecreate: P,
26
+ forceRecreate: M,
28
27
  locale: "en",
29
28
  undoButtonSelector: "#guido__undo-button",
30
29
  redoButtonSelector: "#guido__redo-button",
@@ -34,12 +33,12 @@ const pe = (E, l) => {
34
33
  customAppearanceMergetags: !u("liquidSyntax"),
35
34
  customAppearanceMergetagsBorderColor: "#f1f3fe",
36
35
  customAppearanceMergetagsBackgroundColor: "#f1f3fe",
37
- customViewStyles: J,
36
+ customViewStyles: G,
38
37
  conditionsEnabled: f,
39
38
  customConditionsEnabled: f,
40
39
  enableXSSSecurity: !0,
41
- modulesDisabled: M,
42
- syncModulesEnabled: r,
40
+ modulesDisabled: A,
41
+ syncModulesEnabled: i,
43
42
  messageSettingsEnabled: !0,
44
43
  displayGmailAnnotations: !0,
45
44
  displayHiddenPreheader: !1,
@@ -52,11 +51,11 @@ const pe = (E, l) => {
52
51
  editorFonts: {
53
52
  showDefaultStandardFonts: !0,
54
53
  showDefaultNotStandardFonts: !0,
55
- customFonts: i
54
+ customFonts: r
56
55
  },
57
56
  mergeTags: [
58
57
  {
59
- entries: X(
58
+ entries: J(
60
59
  l.preselectedDynamicContentList,
61
60
  u("liquidSyntax")
62
61
  )
@@ -72,8 +71,8 @@ const pe = (E, l) => {
72
71
  },
73
72
  onTemplateLoaded() {
74
73
  try {
75
- const { importCss: o } = O(), { activateCustomViewStyles: n, updateTimerInClonedTemplate: D } = U(), { injectFullStory: I } = q();
76
- o(), n(), I(), D(), l.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
74
+ const { importCss: o } = x(), { activateCustomViewStyles: n, updateTimerInClonedTemplate: P } = I(), { injectFullStory: D } = O();
75
+ o(), n(), D(), P(), l.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
77
76
  e.hasChanges = !1;
78
77
  }, 1e3);
79
78
  } catch (o) {
@@ -93,42 +92,41 @@ const pe = (E, l) => {
93
92
  e.hasChanges = !0;
94
93
  },
95
94
  onEvent: F,
96
- notifications: V(),
97
95
  ignoreClickOutsideSelectors: [
98
96
  "#guido-dynamic-content-modal",
99
97
  ".in-on-board-wrapper",
100
98
  ".in-drawer__container"
101
99
  ],
102
100
  extensions: d,
103
- localePatch: L
101
+ localePatch: z
104
102
  }
105
103
  );
106
- }, A = (s) => new Promise((i, r) => {
104
+ }, _ = (s) => new Promise((r, i) => {
107
105
  var d;
108
106
  if (document.getElementById("UiEditorScript")) {
109
- Promise.resolve(s()).then(i, r);
107
+ Promise.resolve(s()).then(r, i);
110
108
  return;
111
109
  }
112
- const e = j.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, t = document.createElement("script");
110
+ const e = N.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, t = document.createElement("script");
113
111
  t.id = "UiEditorScript", t.type = "module", t.src = a, t.onload = () => {
114
- Promise.resolve(s()).then(i, r);
112
+ Promise.resolve(s()).then(r, i);
115
113
  }, t.onerror = () => {
116
- r(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
114
+ i(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
117
115
  }, document.body.appendChild(t);
118
116
  });
119
117
  return { initPlugin: async (s) => {
120
- const i = C();
118
+ const r = C();
121
119
  try {
122
- await A(async () => {
123
- const [r, e] = await Promise.all([
120
+ await _(async () => {
121
+ const [i, e] = await Promise.all([
124
122
  k(),
125
123
  B()
126
124
  ]);
127
- i.syncModulesEnabled = e, await _(s, r, e);
125
+ r.syncModulesEnabled = e, await V(s, i, e);
128
126
  });
129
127
  } catch {
130
- i.loadingStatus = !1, b({
131
- type: $.Alert,
128
+ r.loadingStatus = !1, b({
129
+ type: L.Alert,
132
130
  message: h["An error has occurred. Please report the error code to support."],
133
131
  actionButton: {
134
132
  text: h["Reload page"],
@@ -139,5 +137,5 @@ const pe = (E, l) => {
139
137
  } };
140
138
  };
141
139
  export {
142
- pe as useStripo
140
+ ce as useStripo
143
141
  };
@@ -1,181 +1,189 @@
1
- import { useConfig as _ } from "../../../composables/useConfig.js";
2
- import { useRecommendation as g } from "../../../composables/useRecommendation.js";
3
- import { CSS_CLASS_RECO_BUTTON as q } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
4
- import { useRecommendationExtensionStore as C } from "../../../extensions/Blocks/Recommendation/store/recommendation.js";
5
- import { isIgnoredRecommendationBlock as w } from "./recommendationIgnoreUtils.js";
6
- function b(e, n, t, o, c = "") {
7
- const i = `{{${c}${e}_${n}_${t}}}`, r = `{{${c}${e}_${n}_currency}}`;
8
- return o === "before" ? `${r} ${i}` : `${i} ${r}`;
1
+ import { useConfig as q } from "../../../composables/useConfig.js";
2
+ import { useRecommendation as C } from "../../../composables/useRecommendation.js";
3
+ import { CSS_CLASS_RECO_BUTTON as E } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
4
+ import { useRecommendationExtensionStore as w } from "../../../extensions/Blocks/Recommendation/store/recommendation.js";
5
+ import { isIgnoredRecommendationBlock as P } from "./recommendationIgnoreUtils.js";
6
+ function f(t, o, e, n, s = "") {
7
+ const i = `{{${s}${t}_${o}_${e}}}`, r = `{{${s}${t}_${o}_currency}}`;
8
+ return n === "before" ? `${r} ${i}` : `${i} ${r}`;
9
9
  }
10
- function m(e) {
11
- let n = e;
12
- for (; n.children.length === 1; )
13
- [n] = n.children;
14
- return n;
10
+ function m(t) {
11
+ let o = t;
12
+ for (; o.children.length === 1; )
13
+ [o] = o.children;
14
+ return o;
15
15
  }
16
- function h(e, n, t, o, c, i) {
17
- switch (n) {
16
+ function h(t, o, e, n, s, i) {
17
+ switch (o) {
18
18
  case "productImage": {
19
- const r = e.querySelector("img");
20
- r && (r.setAttribute("src", `{{${i}${t}_${o}_image_url}}`), r.setAttribute("alt", `{{${i}${t}_${o}_name}}`));
21
- const s = e.querySelector("a");
22
- s && (s.setAttribute("href", `{{${i}${t}_${o}_url}}`), s.classList.add(q));
19
+ const r = t.querySelector("img");
20
+ r && (r.setAttribute("src", `{{${i}${e}_${n}_image_url}}`), r.setAttribute("alt", `{{${i}${e}_${n}_name}}`));
21
+ const c = t.querySelector("a");
22
+ c && (c.setAttribute("href", `{{${i}${e}_${n}_url}}`), c.classList.add(E));
23
23
  break;
24
24
  }
25
25
  case "productName": {
26
- const r = e.querySelector("p");
27
- r && (m(r).textContent = `{{${i}${t}_${o}_name}}`);
26
+ const r = t.querySelector("p");
27
+ r && (m(r).textContent = `{{${i}${e}_${n}_name}}`);
28
28
  break;
29
29
  }
30
30
  case "productPrice": {
31
- const r = e.querySelector(".product-price p") ?? e.querySelector("p");
32
- r && (m(r).textContent = b(
33
- t,
34
- o,
31
+ const r = t.querySelector(".product-price p") ?? t.querySelector("p");
32
+ r && (m(r).textContent = f(
33
+ e,
34
+ n,
35
35
  "price",
36
- c,
36
+ s,
37
37
  i
38
38
  ));
39
- const s = e.querySelector(".product-old-price p");
40
- s && (m(s).textContent = b(
41
- t,
42
- o,
39
+ const c = t.querySelector(".product-old-price p");
40
+ c && (m(c).textContent = f(
41
+ e,
42
+ n,
43
43
  "original_price",
44
- c,
44
+ s,
45
45
  i
46
46
  ));
47
47
  break;
48
48
  }
49
49
  case "productOldPrice": {
50
- const r = e.querySelector("p");
51
- r && (m(r).textContent = b(
52
- t,
53
- o,
50
+ const r = t.querySelector("p");
51
+ r && (m(r).textContent = f(
52
+ e,
53
+ n,
54
54
  "original_price",
55
- c,
55
+ s,
56
56
  i
57
57
  ));
58
58
  break;
59
59
  }
60
60
  case "productButton": {
61
- const r = e.querySelector("a");
62
- r && r.setAttribute("href", `{{${i}${t}_${o}_url}}`);
61
+ const r = t.querySelector("a");
62
+ r && r.setAttribute("href", `{{${i}${e}_${n}_url}}`);
63
63
  break;
64
64
  }
65
65
  case "productOmnibusPrice": {
66
- const r = e.querySelector(".omnibus-price-value");
66
+ const r = t.querySelector(".omnibus-price-value");
67
67
  if (r) {
68
- r.textContent = `{{${i}${t}_${o}_omnibus_price}}`;
69
- const s = r.closest("p");
70
- s && (s.setAttribute("product-attr", "omnibus_price"), s.setAttribute("composition", "true"));
68
+ r.textContent = `{{${i}${e}_${n}_omnibus_price}}`;
69
+ const c = r.closest("p");
70
+ c && (c.setAttribute("product-attr", "omnibus_price"), c.setAttribute("composition", "true"));
71
71
  }
72
72
  break;
73
73
  }
74
74
  case "productOmnibusDiscount": {
75
- const r = e.querySelector(".omnibus-discount-value");
75
+ const r = t.querySelector(".omnibus-discount-value");
76
76
  if (r) {
77
- r.textContent = `{{${i}${t}_${o}_omnibus_discount}}`;
78
- const s = r.closest("p");
79
- s && (s.setAttribute("product-attr", "omnibus_discount"), s.setAttribute("composition", "true"));
77
+ r.textContent = `{{${i}${e}_${n}_omnibus_discount}}`;
78
+ const c = r.closest("p");
79
+ c && (c.setAttribute("product-attr", "omnibus_discount"), c.setAttribute("composition", "true"));
80
80
  }
81
81
  break;
82
82
  }
83
83
  default: {
84
- const r = e.getAttribute("product-attr") ? e : e.querySelector("[product-attr]");
84
+ const r = t.getAttribute("product-attr") ? t : t.querySelector("[product-attr]");
85
85
  if (r) {
86
- const s = r.getAttribute("product-attr"), a = r.querySelector("p");
87
- a && (m(a).textContent = `{{${i}${t}_${o}_${s}}}`);
86
+ const c = r.getAttribute("product-attr"), l = r.querySelector("p");
87
+ l && (m(l).textContent = `{{${i}${e}_${n}_${c}}}`);
88
88
  }
89
89
  break;
90
90
  }
91
91
  }
92
92
  }
93
- function E(e, n, t, o) {
94
- e.querySelectorAll(".recommendation-product-row").forEach((i, r) => {
95
- i.querySelectorAll("[data-attribute-type]").forEach((a) => {
96
- const u = a.getAttribute("data-attribute-type") || "", p = a.querySelectorAll(".attribute-cell");
97
- p.length > 0 ? p.forEach((l) => {
98
- h(l, u, n, r, t, o);
99
- }) : h(a, u, n, r, t, o);
93
+ function R(t, o, e, n) {
94
+ t.querySelectorAll(".recommendation-product-row").forEach((i, r) => {
95
+ i.querySelectorAll("[data-attribute-type]").forEach((l) => {
96
+ const u = l.getAttribute("data-attribute-type") || "", p = l.querySelectorAll(".attribute-cell");
97
+ p.length > 0 ? p.forEach((a) => {
98
+ h(a, u, o, r, e, n);
99
+ }) : h(l, u, o, r, e, n);
100
100
  });
101
101
  });
102
102
  }
103
- function P(e, n, t, o) {
104
- const c = e.querySelectorAll(".recommendation-product-row");
105
- if (!c.length)
103
+ function W(t, o, e, n) {
104
+ const s = t.querySelectorAll(".recommendation-product-row");
105
+ if (!s.length)
106
106
  return;
107
- const [i] = c, r = i.querySelector("[data-attribute-type]"), s = r ? r.querySelectorAll(".attribute-cell").length : 1;
108
- c.forEach((a, u) => {
109
- a.querySelectorAll("[data-attribute-type]").forEach((l) => {
110
- const d = l.getAttribute("data-attribute-type") || "";
111
- l.querySelectorAll(".attribute-cell").forEach((A, $) => {
112
- const S = u * s + $;
113
- h(A, d, n, S, t, o);
107
+ const [i] = s, r = i.querySelector("[data-attribute-type]"), c = r ? r.querySelectorAll(".attribute-cell").length : 1;
108
+ s.forEach((l, u) => {
109
+ l.querySelectorAll("[data-attribute-type]").forEach((a) => {
110
+ const d = a.getAttribute("data-attribute-type") || "";
111
+ a.querySelectorAll(".attribute-cell").forEach((S, _) => {
112
+ const g = u * c + _;
113
+ h(S, d, o, g, e, n);
114
114
  });
115
115
  });
116
116
  });
117
117
  }
118
- function R(e, n, t, o) {
119
- e.querySelectorAll(".ins-recommendation-product-container").forEach((i) => {
120
- P(i, n, t, o);
118
+ function v(t, o, e, n) {
119
+ t.querySelectorAll(".ins-recommendation-product-container").forEach((i) => {
120
+ W(i, o, e, n);
121
121
  });
122
122
  }
123
- function O(e, n, t) {
124
- const o = e.getAttribute("data-layout") || "grid", c = e.getAttribute("currency-alignment") || "after";
125
- o === "list" ? E(e, n, c, t) : R(e, n, c, t);
123
+ function O(t, o, e) {
124
+ const n = t.getAttribute("data-layout") || "grid", s = t.getAttribute("currency-alignment") || "after";
125
+ n === "list" ? R(t, o, s, e) : v(t, o, s, e);
126
126
  }
127
- function y(e, n, t) {
128
- const o = new RegExp(`${n}\\s*:\\s*(\\d+)\\s*px`, "i"), c = e.match(o);
129
- return c ? parseInt(c[1]) : t;
127
+ function b(t, o, e) {
128
+ const n = new RegExp(`${o}\\s*:\\s*(\\d+)\\s*px`, "i"), s = t.match(n);
129
+ return s ? parseInt(s[1]) : e;
130
130
  }
131
- function T(e, n) {
132
- let t = e.parentElement;
133
- for (; t && t !== n; ) {
134
- if (t.tagName === "TD") {
135
- const o = t.getAttribute("width");
136
- if (o && o.endsWith("%") && parseFloat(o) < 100)
137
- return t;
138
- }
139
- t = t.parentElement;
131
+ function A(t) {
132
+ const o = t.trim();
133
+ return o.endsWith("%") ? parseFloat(o) < 100 : /^\d+(?:\.\d+)?(?:px)?$/.test(o) && parseInt(o) > 0;
134
+ }
135
+ function $(t) {
136
+ const o = t.getAttribute("width");
137
+ if (o && A(o))
138
+ return o.trim();
139
+ const e = (t.getAttribute("style") || "").match(/(?:^|[;\s])width\s*:\s*(\d+(?:\.\d+)?(?:px|%))/i);
140
+ return e && A(e[1]) ? e[1] : null;
141
+ }
142
+ function T(t, o) {
143
+ let e = t.parentElement;
144
+ for (; e && e !== o; ) {
145
+ if (e.tagName === "TD" && $(e))
146
+ return e;
147
+ e = e.parentElement;
140
148
  }
141
149
  return null;
142
150
  }
143
- function v(e) {
144
- const n = e.getAttribute("style") || "", t = y(n, "width", 600), o = y(n, "padding", 0) * 2, c = Math.max(0, t - o);
145
- c !== 0 && e.querySelectorAll("img.adapt-img").forEach((i) => {
151
+ function M(t) {
152
+ const o = t.getAttribute("style") || "", e = b(o, "width", 600), n = b(o, "padding", 0) * 2, s = Math.max(0, e - n);
153
+ s !== 0 && t.querySelectorAll("img.adapt-img").forEach((i) => {
146
154
  if (i.hasAttribute("width"))
147
155
  return;
148
- const r = T(i, e);
156
+ const r = T(i, t);
149
157
  if (!r)
150
158
  return;
151
- const s = r.getAttribute("width"), a = parseFloat(s), u = y(r.getAttribute("style") || "", "padding", 0) * 2, p = Math.floor(c * a / 100), l = Math.max(1, p - u);
152
- i.setAttribute("width", String(l));
153
- const d = i.getAttribute("style") || "";
154
- if (!/\bwidth\s*:\s*\d/i.test(d)) {
155
- const f = d && !d.trim().endsWith(";") ? "; " : "";
156
- i.setAttribute("style", `${d}${f}width: ${l}px`);
159
+ const c = $(r), l = b(r.getAttribute("style") || "", "padding", 0) * 2, u = c.endsWith("%") ? Math.floor(s * parseFloat(c) / 100) : parseInt(c), p = Math.max(1, u - l);
160
+ i.setAttribute("width", String(p));
161
+ const a = i.getAttribute("style") || "";
162
+ if (!/\bwidth\s*:\s*\d/i.test(a)) {
163
+ const d = a && !a.trim().endsWith(";") ? "; " : "";
164
+ i.setAttribute("style", `${a}${d}width: ${p}px`);
157
165
  }
158
166
  });
159
167
  }
160
- function W(e, n) {
161
- const t = e.match(/<!DOCTYPE[^>]*>/i);
162
- return (t ? `${t[0]}
163
- ` : "") + n.documentElement.outerHTML;
168
+ function B(t, o) {
169
+ const e = t.match(/<!DOCTYPE[^>]*>/i);
170
+ return (e ? `${e[0]}
171
+ ` : "") + o.documentElement.outerHTML;
164
172
  }
165
- function F(e) {
166
- const n = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), t = new DOMParser().parseFromString(n, "text/html"), o = t.querySelectorAll(".recommendation-block-v2");
167
- if (!o.length)
168
- return e;
169
- const { buildCampaignUrl: c } = g(), i = C();
173
+ function G(t) {
174
+ const o = t.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), e = new DOMParser().parseFromString(o, "text/html"), n = e.querySelectorAll(".recommendation-block-v2");
175
+ if (!n.length)
176
+ return t;
177
+ const { buildCampaignUrl: s } = C(), i = w();
170
178
  i.recommendationCampaignUrls = {};
171
- const { isFeatureEnabled: r } = _(), s = r("liquidSyntax") ? "reco_" : "";
172
- return o.forEach((u) => {
173
- var l, d;
179
+ const { isFeatureEnabled: r } = q(), c = r("liquidSyntax") ? "reco_" : "";
180
+ return n.forEach((u) => {
181
+ var a, d;
174
182
  const p = u.getAttribute("recommendation-id");
175
- p && ((l = u.parentNode) == null || l.insertBefore(t.createComment("REC_START"), u), (d = u.parentNode) == null || d.insertBefore(t.createComment("REC_END"), u.nextSibling), u.querySelectorAll('[data-visibility="0"]').forEach((f) => f.remove()), c(p), w(u) || O(u, p, s), v(u));
176
- }), W(n, t).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
183
+ p && ((a = u.parentNode) == null || a.insertBefore(e.createComment("REC_START"), u), (d = u.parentNode) == null || d.insertBefore(e.createComment("REC_END"), u.nextSibling), u.querySelectorAll('[data-visibility="0"]').forEach((y) => y.remove()), s(p), P(u) || O(u, p, c), M(u));
184
+ }), B(o, e).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
177
185
  }
178
186
  export {
179
- b as formatPriceVariable,
180
- F as prepareRecommendationBlocks
187
+ f as formatPriceVariable,
188
+ G as prepareRecommendationBlocks
181
189
  };
@@ -1,51 +1,73 @@
1
- var h = Object.defineProperty;
2
- var x = (l, e, t) => e in l ? h(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t;
3
- var S = (l, e, t) => x(l, typeof e != "symbol" ? e + "" : e, t);
4
- import { MERGE_TAGS as k, PAGE_TYPES as p } from "../../enums/unsubscribe.js";
5
- import { DATA_ATTRIBUTES as A } from "../../extensions/Blocks/Unsubscribe/utils/constants.js";
6
- import { useUnsubscribeStore as T } from "../../stores/unsubscribe.js";
7
- class C {
1
+ var x = Object.defineProperty;
2
+ var B = (c, e, t) => e in c ? x(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
3
+ var A = (c, e, t) => B(c, typeof e != "symbol" ? e + "" : e, t);
4
+ import { MERGE_TAGS as f, PAGE_TYPES as p } from "../../enums/unsubscribe.js";
5
+ import { UNSUBSCRIBE_BLOCK_SELECTOR as h, DATA_ATTRIBUTES as k } from "../../extensions/Blocks/Unsubscribe/utils/constants.js";
6
+ import { useUnsubscribeStore as C } from "../../stores/unsubscribe.js";
7
+ class $ {
8
8
  constructor() {
9
- S(this, "parser");
9
+ A(this, "parser");
10
10
  this.parser = new DOMParser();
11
11
  }
12
12
  async migrate(e) {
13
13
  try {
14
- const t = this.parser.parseFromString(e, "text/html"), i = t.querySelectorAll("td.unsubscribe-block");
15
- if (!i.length)
16
- return e;
17
- const o = T();
18
- return await o.fetchTemplates(), i.forEach((r) => {
19
- const c = r.getAttribute("id"), g = this.extractPaddingClass(r), u = r.getAttribute("bgcolor") || "", n = this.extractUnsubscribeContent(r), s = this.getCollectionTypeFromMergeTag(n.linkHref), b = o.getSelectedUnsubscribePagesByCollection(s);
20
- console.debug("[UnsubscribeMigrator]", {
21
- mergeTag: n.linkHref,
22
- collectionType: s,
23
- pageIds: b,
24
- paddingClass: g,
25
- bgColor: u
26
- });
27
- const f = this.buildUnsubscribeBlock(
28
- n,
29
- s,
30
- b,
31
- g,
32
- u
33
- ), a = this.parser.parseFromString(
34
- `<table id="tempDoc"><tbody><tr>${f}</tr></tbody></table>`,
35
- "text/html"
36
- ).querySelector(".unsubscribe-block-v2");
37
- a && r.parentNode && (a.setAttribute("id", c || ""), r.parentNode.replaceChild(a, r));
38
- }), t.documentElement.outerHTML;
14
+ const t = this.parser.parseFromString(e, "text/html"), r = t.querySelectorAll("td.unsubscribe-block");
15
+ if (r.length) {
16
+ const s = C();
17
+ await s.fetchTemplates(), this.migrateLegacyBlocks(r, s);
18
+ }
19
+ const n = this.repairUnsubscribeLinks(t);
20
+ return !r.length && !n ? e : t.documentElement.outerHTML;
39
21
  } catch (t) {
40
22
  return console.error("UnsubscribeMigrator failed:", t), e;
41
23
  }
42
24
  }
25
+ migrateLegacyBlocks(e, t) {
26
+ e.forEach((r) => {
27
+ const n = r.getAttribute("id"), s = this.extractPaddingClass(r), l = r.getAttribute("bgcolor") || "", a = this.extractUnsubscribeContent(r), o = this.getCollectionTypeFromMergeTag(a.linkHref), b = t.getSelectedUnsubscribePagesByCollection(o);
28
+ console.debug("[UnsubscribeMigrator]", {
29
+ mergeTag: a.linkHref,
30
+ collectionType: o,
31
+ pageIds: b,
32
+ paddingClass: s,
33
+ bgColor: l
34
+ });
35
+ const u = this.buildUnsubscribeBlock(
36
+ a,
37
+ o,
38
+ b,
39
+ s,
40
+ l
41
+ ), i = this.parser.parseFromString(
42
+ `<table id="tempDoc"><tbody><tr>${u}</tr></tbody></table>`,
43
+ "text/html"
44
+ ).querySelector(h);
45
+ i && r.parentNode && (i.setAttribute("id", n || ""), r.parentNode.replaceChild(i, r));
46
+ });
47
+ }
48
+ // Re-derives the typed merge tag from data-unsubscribe-page-type for any v2
49
+ // block whose anchor href is missing or the legacy default. Returns true when
50
+ // at least one href was rewritten. Typed tags and custom URLs are left intact.
51
+ repairUnsubscribeLinks(e) {
52
+ const t = e.querySelectorAll(`${h}[${k.PAGE_TYPE}]`);
53
+ let r = !1;
54
+ return t.forEach((n) => {
55
+ const s = n.querySelector('a[data-unsubscribe-link="true"], a.unsubscribe-link');
56
+ if (!s)
57
+ return;
58
+ const l = s.getAttribute("href") || "";
59
+ if (l && l !== f.default)
60
+ return;
61
+ const a = Number(n.getAttribute(k.PAGE_TYPE)), o = f[a];
62
+ o && (s.setAttribute("href", o), r = !0);
63
+ }), r;
64
+ }
43
65
  extractPaddingClass(e) {
44
- const i = (e.getAttribute("class") || "").match(/\bes-p\d+\b/);
45
- return i ? i[0] : "";
66
+ const r = (e.getAttribute("class") || "").match(/\bes-p\d+\b/);
67
+ return r ? r[0] : "";
46
68
  }
47
69
  extractUnsubscribeContent(e) {
48
- var m;
70
+ var d;
49
71
  const t = e.querySelector("p");
50
72
  if (!t)
51
73
  return {
@@ -59,8 +81,8 @@ class C {
59
81
  align: "center",
60
82
  paragraphStyle: ""
61
83
  };
62
- const i = e.getAttribute("align") || t.getAttribute("align") || "center", o = t.getAttribute("style") || "", r = t.querySelector("a.unsubscribe-link") || t.querySelector('a[href*="unsubscribe"]');
63
- if (!r)
84
+ const r = e.getAttribute("align") || t.getAttribute("align") || "center", n = t.getAttribute("style") || "", s = t.querySelector("a.unsubscribe-link") || t.querySelector('a[href*="unsubscribe"]');
85
+ if (!s)
64
86
  return {
65
87
  textBefore: "You can ",
66
88
  linkText: "unsubscribe",
@@ -69,55 +91,55 @@ class C {
69
91
  textAfter: " from our emails, if you need to.",
70
92
  isBold: !1,
71
93
  isItalic: !1,
72
- align: i,
73
- paragraphStyle: o
94
+ align: r,
95
+ paragraphStyle: n
74
96
  };
75
- const c = ((m = r.textContent) == null ? void 0 : m.trim()) || "unsubscribe", g = r.getAttribute("href") || "{{ins-unsubscribe-link}}", u = r.getAttribute("style") || "", n = t.textContent || "", s = n.indexOf(c), b = s >= 0 ? n.substring(0, s).trim() : "You can ", f = s >= 0 ? n.substring(s + c.length).trim() : " from our emails, if you need to.", d = !!t.querySelector("b, strong"), a = !!t.querySelector("i, em");
97
+ const l = ((d = s.textContent) == null ? void 0 : d.trim()) || "unsubscribe", a = s.getAttribute("href") || "{{ins-unsubscribe-link}}", o = s.getAttribute("style") || "", b = t.textContent || "", u = b.indexOf(l), g = u >= 0 ? b.substring(0, u).trim() : "You can ", i = u >= 0 ? b.substring(u + l.length).trim() : " from our emails, if you need to.", m = !!t.querySelector("b, strong"), y = !!t.querySelector("i, em");
76
98
  return {
77
- textBefore: b,
78
- linkText: c,
79
- linkHref: this.normalizeUnsubscribeHref(g),
80
- linkStyle: u,
81
- textAfter: f,
82
- isBold: d,
83
- isItalic: a,
84
- align: i,
85
- paragraphStyle: o
99
+ textBefore: g,
100
+ linkText: l,
101
+ linkHref: this.normalizeUnsubscribeHref(a),
102
+ linkStyle: o,
103
+ textAfter: i,
104
+ isBold: m,
105
+ isItalic: y,
106
+ align: r,
107
+ paragraphStyle: n
86
108
  };
87
109
  }
88
- buildUnsubscribeBlock(e, t, i, o, r) {
89
- const c = e.linkStyle ? ` style="${e.linkStyle}"` : "", u = `<a ${`href="${e.linkHref}" class="unsubscribe-link" target="_blank" data-unsubscribe-link="true"`}${c}>${e.linkText}</a>`, n = [];
90
- e.textBefore && n.push(e.textBefore), n.push(u), e.textAfter && n.push(e.textAfter);
91
- let s = n.join(" ");
92
- e.isBold && e.isItalic ? s = `<strong path="1,0"><em path="1,0,0">${s}</em></strong>` : e.isBold ? s = `<strong path="1,0">${s}</strong>` : e.isItalic && (s = `<em path="1,0">${s}</em>`);
93
- const b = e.align ? ` align="${e.align}"` : "", f = r ? ` bgcolor="${r}"` : "", d = e.paragraphStyle ? ` style="${e.paragraphStyle}"` : "", a = i.length > 0 ? ` ${A.PAGE_LIST}="${i.join(",")}"` : "", m = ` ${A.PAGE_TYPE}="${t}"`, y = "esd-block-text unsubscribe-block-v2 esd-block-unsubscribe esd-unsubscribe-block esd-extension-block";
110
+ buildUnsubscribeBlock(e, t, r, n, s) {
111
+ const l = e.linkStyle ? ` style="${e.linkStyle}"` : "", u = `<a ${`href="${Object.values(f).includes(e.linkHref) ? f[t] : e.linkHref}" class="unsubscribe-link" target="_blank" data-unsubscribe-link="true"`}${l}>${e.linkText}</a>`, g = [];
112
+ e.textBefore && g.push(e.textBefore), g.push(u), e.textAfter && g.push(e.textAfter);
113
+ let i = g.join(" ");
114
+ e.isBold && e.isItalic ? i = `<strong path="1,0"><em path="1,0,0">${i}</em></strong>` : e.isBold ? i = `<strong path="1,0">${i}</strong>` : e.isItalic && (i = `<em path="1,0">${i}</em>`);
115
+ const m = e.align ? ` align="${e.align}"` : "", y = s ? ` bgcolor="${s}"` : "", d = e.paragraphStyle ? ` style="${e.paragraphStyle}"` : "", E = r.length > 0 ? ` ${k.PAGE_LIST}="${r.join(",")}"` : "", T = ` ${k.PAGE_TYPE}="${t}"`, S = "esd-block-text unsubscribe-block-v2 esd-block-unsubscribe esd-unsubscribe-block esd-extension-block";
94
116
  return `
95
117
  <td
96
118
  data-migration="true"
97
119
  esd-extension-block-id="unsubscribe-block"
98
- class="${o ? `${y} ${o}` : y}"
99
- ${b}${f}${m}${a}
120
+ class="${n ? `${S} ${n}` : S}"
121
+ ${m}${y}${T}${E}
100
122
  >
101
123
  <p path="1"${d}>
102
- ${s}
124
+ ${i}
103
125
  </p>
104
126
  </td>
105
127
  `;
106
128
  }
107
129
  getCollectionTypeFromMergeTag(e) {
108
- return e === k[p.SUBSCRIPTION_PREFERENCE_CENTER] ? p.SUBSCRIPTION_PREFERENCE_CENTER : e === k[p.GLOBAL_UNSUBSCRIBE] ? p.GLOBAL_UNSUBSCRIBE : p.GLOBAL_UNSUBSCRIBE;
130
+ return e === f[p.SUBSCRIPTION_PREFERENCE_CENTER] ? p.SUBSCRIPTION_PREFERENCE_CENTER : e === f[p.GLOBAL_UNSUBSCRIBE] ? p.GLOBAL_UNSUBSCRIBE : p.GLOBAL_UNSUBSCRIBE;
109
131
  }
110
132
  normalizeUnsubscribeHref(e) {
111
- if (Object.values(k).includes(e))
133
+ if (Object.values(f).includes(e))
112
134
  return e;
113
- const i = e.match(/{{ins-(?:global-)?(?:preferences-)?unsubscribe-link}}/);
114
- return i ? i[0] : e.includes("unsubscribe") || e.includes("unsub") ? (console.warn(
135
+ const r = e.match(/{{ins-(?:global-)?(?:preferences-)?unsubscribe-link}}/);
136
+ return r ? r[0] : e.includes("unsubscribe") || e.includes("unsub") ? (console.warn(
115
137
  `[UnsubscribeMigrator] Unrecognized unsubscribe href format: "${e}". Defaulting to {{ins-unsubscribe-link}}`
116
138
  ), "{{ins-unsubscribe-link}}") : e;
117
139
  }
118
140
  }
119
- async function M(l) {
120
- return new C().migrate(l);
141
+ async function M(c) {
142
+ return new $().migrate(c);
121
143
  }
122
144
  export {
123
145
  M as migrateUnsubscribe
@@ -1,4 +1,4 @@
1
- var n = /* @__PURE__ */ ((r) => (r.Success = "success", r.Warning = "warning", r.Alert = "error", r.Info = "information", r))(n || {});
1
+ var c = /* @__PURE__ */ ((r) => (r.Success = "success", r.Warning = "warning", r.Alert = "alert", r.Dark = "dark", r))(c || {});
2
2
  export {
3
- n as ToasterTypeOptions
3
+ c as ToasterTypeOptions
4
4
  };
@@ -1,5 +1,5 @@
1
- import { ATTR_PRODUCT_IMAGE as p, ATTR_PRODUCT_BUTTON as C, ATTR_PRODUCT_OLD_PRICE as f, ATTR_PRODUCT_PRICE as m } from "../../constants/selectors.js";
2
- import { buildSpacer as I, DEFAULT_CARD_COMPOSITION as g, buildElementRenderer as E, buildCellOptions as a, resolveInlinePriceOrder as w, DEFAULT_CARD_VISIBILITY as y } from "../utils.js";
1
+ import { ATTR_PRODUCT_IMAGE as p, ATTR_PRODUCT_BUTTON as C, ATTR_PRODUCT_OLD_PRICE as A, ATTR_PRODUCT_PRICE as m } from "../../constants/selectors.js";
2
+ import { buildSpacer as I, DEFAULT_CARD_COMPOSITION as g, buildElementRenderer as E, buildCellOptions as i, resolveInlinePriceOrder as w, DEFAULT_CARD_VISIBILITY as y } from "../utils.js";
3
3
  import { listElementRenderer as L, renderInlineListPriceRow as O } from "./elementRenderer.js";
4
4
  const S = "0 5px";
5
5
  function U(l, r, n) {
@@ -27,40 +27,40 @@ const N = `
27
27
  </td>
28
28
  </tr>
29
29
  `;
30
- function $(l, r = g, n = {}, e = {}) {
30
+ function x(l, r = g, n = {}, e = {}) {
31
31
  const {
32
32
  cellPadding: o = S,
33
33
  cardBackgroundColor: d,
34
34
  visibility: c,
35
- priceInline: i = !1
36
- } = e, u = d ? ` style="background-color: ${d};"` : "", s = E(L, r, n), P = s[p](l, a(p, e)), R = w(r), T = `
35
+ priceInline: a = !1
36
+ } = e, u = d ? ` style="table-layout: fixed; background-color: ${d};"` : ' style="table-layout: fixed;"', s = E(L, r, n), P = s[p](l, i(p, e)), R = w(r), T = `
37
37
  <td class="product-info-cell" valign="middle" style="padding: 15px;">
38
38
  <table cellpadding="0" cellspacing="0" role="presentation" width="100%" style="table-layout: fixed;">
39
39
  <tbody>
40
- ${r.filter((t) => t !== p && t !== C).filter((t) => !(i && t === R.skip)).filter((t) => s[t]).map((t) => {
41
- const b = (c == null ? void 0 : c[t]) ?? y[t] ?? !0, A = i && t === R.anchor ? O(
40
+ ${r.filter((t) => t !== p && t !== C).filter((t) => !(a && t === R.skip)).filter((t) => s[t]).map((t) => {
41
+ const b = (c == null ? void 0 : c[t]) ?? y[t] ?? !0, f = a && t === R.anchor ? O(
42
42
  l,
43
43
  R.originalFirst,
44
- a(m, e),
45
- a(f, e)
46
- ) : s[t](l, a(t, e));
47
- return U(A, t, b);
44
+ i(m, e),
45
+ i(A, e)
46
+ ) : s[t](l, i(t, e));
47
+ return U(f, t, b);
48
48
  }).join(`
49
49
  `)}
50
50
  </tbody>
51
51
  </table>
52
52
  </td>
53
- `, _ = s[C](l, a(C, e)), D = P + T + _;
53
+ `, _ = s[C](l, i(C, e)), D = P + T + _;
54
54
  return N.replace("{-{-CARD_PADDING-}-}", o).replace("{-{-WRAPPER_STYLE-}-}", u).replace("{-{-PRODUCT_CONTENT-}-}", D);
55
55
  }
56
56
  function W(l, r, n = {}, e = {}) {
57
57
  const o = I(e.rowSpacingPx);
58
58
  return l.map((d, c) => {
59
- const i = $(d, r, n, e);
60
- return c > 0 ? o + i : i;
59
+ const a = x(d, r, n, e);
60
+ return c > 0 ? o + a : a;
61
61
  }).join("");
62
62
  }
63
63
  export {
64
- $ as getListProductCard,
64
+ x as getListProductCard,
65
65
  W as prepareProductRows
66
66
  };
@@ -1,16 +1,16 @@
1
- import { useToaster as n } from "../../../composables/useToaster.js";
1
+ import { useToaster as r } from "../../../composables/useToaster.js";
2
2
  import { useTranslations as s } from "../../../composables/useTranslations.js";
3
- import { ToasterTypeOptions as r } from "../../../enums/toaster.js";
3
+ import { ToasterTypeOptions as n } from "../../../enums/toaster.js";
4
4
  import { countLiveRecommendationBlocks as i } from "./utils/recommendationBlockCount.js";
5
- const c = "newsletter.multiple-reco-blocks-warning", u = () => {
6
- const { showToaster: o } = n(), t = s();
5
+ const a = "newsletter.multiple-reco-blocks-warning", f = () => {
6
+ const { showToaster: o } = r(), t = s();
7
7
  return { warnIfMultipleBlocks: (e) => {
8
8
  i(e) > 1 && o({
9
- type: r.Info,
10
- message: t(c)
9
+ type: n.Dark,
10
+ message: t(a)
11
11
  });
12
12
  } };
13
13
  };
14
14
  export {
15
- u as useRecommendationBlockWarning
15
+ f as useRecommendationBlockWarning
16
16
  };
@@ -4,12 +4,11 @@ import { useToaster as C } from "../composables/useToaster.js";
4
4
  import { useTranslations as h } from "../composables/useTranslations.js";
5
5
  import { useLiquidValidator as S } from "../composables/validators/useLiquidValidator.js";
6
6
  import { EditorType as v } from "../enums/defaults.js";
7
- import { ToasterTypeOptions as N } from "../enums/toaster.js";
8
- import { useRecommendationExtensionStore as x } from "../extensions/Blocks/Recommendation/store/recommendation.js";
9
- import { useSaveAsTemplateStore as A } from "../stores/save-as-template.js";
7
+ import { useRecommendationExtensionStore as N } from "../extensions/Blocks/Recommendation/store/recommendation.js";
8
+ import { useSaveAsTemplateStore as x } from "../stores/save-as-template.js";
10
9
  import { base64EncodeWithSpecialChars as r } from "../utils/base64.js";
11
- import { useTemplatePreparation as E } from "../utils/templatePreparation.js";
12
- const j = () => {
10
+ import { useTemplatePreparation as A } from "../utils/templatePreparation.js";
11
+ const $ = () => {
13
12
  const { get: n, post: m } = b(), { handleError: o, showToaster: l } = C(), { config: c, isFeatureEnabled: p } = w(), { validateLiquidSyntax: g } = S(), u = h();
14
13
  return {
15
14
  getCategories: async () => {
@@ -40,7 +39,7 @@ const j = () => {
40
39
  createTemplate: async () => {
41
40
  var e, t, d, y;
42
41
  try {
43
- const { prepareTemplateDetails: i } = E(), s = A(), a = await i();
42
+ const { prepareTemplateDetails: i } = A(), s = x(), a = await i();
44
43
  if (p("liquidSyntax") && !await g(a.compiledHtml))
45
44
  return !1;
46
45
  const f = {
@@ -54,7 +53,7 @@ const j = () => {
54
53
  unsubscriptionPreferencePageStatus: !1,
55
54
  unsubscriptionPreferencePages: [],
56
55
  recommendationCampaignUrls: r(
57
- x().recommendationCampaignUrls
56
+ N().recommendationCampaignUrls
58
57
  ),
59
58
  recommendationConfigs: r({}),
60
59
  isGuido: !0,
@@ -75,7 +74,7 @@ const j = () => {
75
74
  "newsletter.template-library-save-alert",
76
75
  { templateName: s.getTemplateName }
77
76
  ),
78
- type: N.Alert
77
+ type: "alert"
79
78
  }), !1) : (l({
80
79
  message: u(
81
80
  "newsletter.template-library-save-success",
@@ -90,5 +89,5 @@ const j = () => {
90
89
  };
91
90
  };
92
91
  export {
93
- j as useTemplateLibraryApi
92
+ $ as useTemplateLibraryApi
94
93
  };
@@ -1,6 +1,6 @@
1
1
  export declare enum ToasterTypeOptions {
2
2
  Success = "success",
3
3
  Warning = "warning",
4
- Alert = "error",
5
- Info = "information"
4
+ Alert = "alert",
5
+ Dark = "dark"
6
6
  }
@@ -4,14 +4,15 @@ export declare const useToasterStore: import("pinia").StoreDefinition<"guidoToas
4
4
  status: boolean;
5
5
  type: import("@@/Types/toaster").ToasterType;
6
6
  text: string;
7
+ icon: string;
8
+ withIcon: boolean;
7
9
  withoutLeftMargin: boolean;
8
- autoHide: boolean;
9
10
  actionButton?: {
10
11
  text: string;
11
12
  onClick: () => void;
12
13
  } | undefined;
13
14
  } & import("pinia").PiniaCustomStateProperties<ToasterState>) => boolean;
14
15
  }, {
15
- showToaster(this: ToasterState, { type, message, actionButton, autoHide }: ToasterOptions): void;
16
+ showToaster(this: ToasterState, { type, message, actionButton }: ToasterOptions): void;
16
17
  hideToaster(this: ToasterState): void;
17
18
  }>;
@@ -0,0 +1,74 @@
1
+ const n = `ue-notifications-container {
2
+ left: 96px;
3
+ margin: 0;
4
+ bottom: 32px;
5
+ top: unset;
6
+ width: unset;
7
+ position: fixed;
8
+ }
9
+
10
+ ue-notifications-container ue-message + ue-message {
11
+ margin-bottom: 24px;
12
+ }
13
+
14
+ ue-notifications-container .alert-message-wrapper {
15
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
16
+ border: none;
17
+ padding: 16px 24px;
18
+ }
19
+
20
+ ue-notifications-container .alert-message-wrapper.info,
21
+ ue-notifications-container .alert-message-wrapper.loader {
22
+ background-color: var(--guido-color-background-toaster-info) !important;
23
+ color: inherit;
24
+ }
25
+
26
+ .alert-message-wrapper .alert-message-main {
27
+ align-items: center;
28
+ }
29
+
30
+ ue-notifications-container ue-caption .caption {
31
+ color: var(--guido-color-white) !important;
32
+ }
33
+
34
+ ue-block-thumb-hint {
35
+ text-align: left;
36
+ }
37
+
38
+ ue-notifications-container .alert-message-wrapper .alert-message-main .alert-message-content {
39
+ width: calc(100% - 64px);
40
+ }
41
+
42
+ ue-notifications-container .alert-message-wrapper .alert-message-main .alert-message-text {
43
+ font-size: 15px;
44
+ font-weight: 600;
45
+ }
46
+
47
+ ue-notifications-container .alert-message-text,
48
+ ue-notifications-container .alert-message-wrapper ue-icon-component.icon,
49
+ ue-notifications-container .alert-message-wrapper ue-icon-component.icon-button {
50
+ color: var(--guido-color-white);
51
+ }
52
+
53
+ ue-notifications-container ue-message ue-button.close {
54
+ margin: 0 0 0 16px;
55
+ }
56
+
57
+ ue-notifications-container .alert-message-wrapper.success {
58
+ background: var(--guido-color-background-toaster-success);
59
+ color: inherit;
60
+ }
61
+
62
+ ue-notifications-container .alert-message-wrapper.error {
63
+ background: var(--guido-color-background-toaster-error);
64
+ color: inherit;
65
+ }
66
+
67
+ ue-notifications-container .alert-message-wrapper.warn {
68
+ background: var(--guido-color-background-toaster-warn);
69
+ color: inherit;
70
+ }
71
+ `;
72
+ export {
73
+ n as default
74
+ };
@@ -1,21 +1,21 @@
1
1
  import { ToasterTypeOptions as e } from "../enums/toaster.js";
2
- import { defineStore as a } from "pinia";
3
- const u = () => ({
2
+ import { defineStore as i } from "pinia";
3
+ const a = () => ({
4
4
  status: !1,
5
5
  type: e.Success,
6
6
  text: "",
7
+ icon: "",
8
+ withIcon: !0,
7
9
  withoutLeftMargin: !1,
8
- autoHide: !0,
9
10
  actionButton: void 0
10
- }), h = a("guidoToaster", {
11
- state: () => u(),
11
+ }), n = i("guidoToaster", {
12
+ state: () => a(),
12
13
  getters: {
13
- // A toast without auto-hide (e.g. Stripo `loader`) stays until hideToaster.
14
- shouldAutoHide: (t) => t.status && !!t.text && t.autoHide
14
+ shouldAutoHide: (t) => t.status && !!t.text
15
15
  },
16
16
  actions: {
17
- showToaster({ type: t = e.Success, message: s, actionButton: o, autoHide: i = !0 }) {
18
- this.status = !0, this.text = s, this.type = t, this.actionButton = o, this.autoHide = i;
17
+ showToaster({ type: t = e.Success, message: s, actionButton: o }) {
18
+ this.status = !0, this.text = s, this.type = t, this.actionButton = o;
19
19
  },
20
20
  hideToaster() {
21
21
  this.status = !1;
@@ -23,5 +23,5 @@ const u = () => ({
23
23
  }
24
24
  });
25
25
  export {
26
- h as useToasterStore
26
+ n as useToasterStore
27
27
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@useinsider/guido",
3
- "version": "3.9.0-beta.ba394b1",
3
+ "version": "3.9.0-beta.c3e1698",
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",
@@ -37,7 +37,7 @@
37
37
  "license": "ISC",
38
38
  "dependencies": {
39
39
  "@stripoinc/ui-editor-extensions": "3.8.0",
40
- "@useinsider/design-system-vue": "1.4.0",
40
+ "@useinsider/design-system-vue": "1.1.0-beta.73ec2fa",
41
41
  "@vueuse/core": "11.3.0",
42
42
  "lodash-es": "4.17.21",
43
43
  "pinia": "2.3.1",
@@ -1,26 +0,0 @@
1
- import { useToaster as d } from "./useToaster.js";
2
- import { ToasterTypeOptions as c } from "../enums/toaster.js";
3
- const g = () => {
4
- const { showToaster: l, hideToaster: u } = d();
5
- let s = null;
6
- const n = (o, t, i, e, f = !0) => {
7
- s = i;
8
- const r = e != null && e.action ? { text: e.action.label, onClick: e.action.func } : void 0;
9
- l({ type: o, message: t, actionButton: r, autoHide: (e == null ? void 0 : e.autoClose) ?? f });
10
- };
11
- return { getStripoNotifications: () => ({
12
- info: (o, t, i) => n(c.Info, o, t, i),
13
- success: (o, t, i) => n(c.Success, o, t, i),
14
- warn: (o, t, i) => n(c.Warning, o, t, i),
15
- error: (o, t, i) => n(c.Alert, o, t, i),
16
- // A loader marks an in-progress operation; Stripo dismisses it via hide(id)
17
- // when finished, so it must not auto-hide.
18
- loader: (o, t, i) => n(c.Info, o, t, i, !1),
19
- hide: (o) => {
20
- s === o && (u(), s = null);
21
- }
22
- }) };
23
- };
24
- export {
25
- g as useStripoNotifications
26
- };
@@ -1,10 +0,0 @@
1
- import type { StripoNotifications } from '@@/Types/stripo';
2
- /**
3
- * Adapter that routes Stripo's in-editor notifications through Guido's own
4
- * InToasts-based toaster, so the editor only ever shows one toaster style.
5
- * Passed to `initEditor` as the `notifications` config (Stripo then delegates
6
- * rendering to us instead of drawing its native <ue-notifications-container>).
7
- */
8
- export declare const useStripoNotifications: () => {
9
- getStripoNotifications: () => StripoNotifications;
10
- };