@useinsider/guido 1.0.3-beta.ea69f4a → 1.0.3-beta.f2389d0

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 (33) hide show
  1. package/README.md +3 -0
  2. package/dist/components/Guido.vue.js +1 -1
  3. package/dist/components/organisms/LoadingWrapper.vue.js +1 -1
  4. package/dist/components/organisms/header/RightSlot.vue2.js +13 -13
  5. package/dist/composables/useActionsApi.js +23 -32
  6. package/dist/composables/useStripo.js +46 -48
  7. package/dist/extensions/Blocks/Items/controls/name/trimming.js +25 -25
  8. package/dist/extensions/Blocks/Items/controls/price/priceOrientation.js +92 -0
  9. package/dist/extensions/Blocks/Items/controls/settingsControl.js +94 -90
  10. package/dist/extensions/Blocks/Items/enums/controlEnums.js +2 -2
  11. package/dist/extensions/Blocks/Items/enums/productEnums.js +3 -2
  12. package/dist/extensions/Blocks/Items/enums/settingsEnums.js +3 -2
  13. package/dist/extensions/Blocks/Items/extension.js +7 -6
  14. package/dist/extensions/Blocks/Items/layouts/horizontal.html.js +2 -2
  15. package/dist/extensions/Blocks/Items/layouts/vertical.html.js +17 -5
  16. package/dist/extensions/Blocks/Items/settingsPanel.js +25 -24
  17. package/dist/extensions/Blocks/Items/store/items-block.js +8 -4
  18. package/dist/extensions/Blocks/Items/template.js +65 -59
  19. package/dist/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.js +35 -26
  20. package/dist/extensions/Blocks/Items/utils/updateAttributes.js +29 -27
  21. package/dist/extensions/Blocks/Unsubscribe/block.js +34 -30
  22. package/dist/guido.css +1 -1
  23. package/dist/src/composables/useActionsApi.d.ts +0 -1
  24. package/dist/src/extensions/Blocks/Items/controls/price/priceOrientation.d.ts +15 -0
  25. package/dist/src/extensions/Blocks/Items/enums/controlEnums.d.ts +1 -0
  26. package/dist/src/extensions/Blocks/Items/enums/productEnums.d.ts +1 -0
  27. package/dist/src/extensions/Blocks/Items/enums/settingsEnums.d.ts +1 -0
  28. package/dist/src/extensions/Blocks/Items/store/items-block.d.ts +2 -0
  29. package/dist/src/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.d.ts +6 -0
  30. package/dist/src/extensions/Blocks/Unsubscribe/block.d.ts +3 -4
  31. package/package.json +3 -1
  32. package/dist/composables/useTimerClone.js +0 -67
  33. package/dist/src/composables/useTimerClone.d.ts +0 -5
package/README.md CHANGED
@@ -600,6 +600,9 @@ Create a `.env` file with the following variables: (You can get env variables fr
600
600
  VITE_STRIPO_PLUGIN_ID=your_plugin_id
601
601
  VITE_STRIPO_SECRET_KEY=your_secret_key
602
602
  VITE_STRIPO_ROLE=your_role
603
+
604
+ # Playwright Test Configuration (Optional - for local debugging only)
605
+ HEADED=false # Set to 'true' to run tests with visible browser
603
606
  ```
604
607
 
605
608
  ### Project Structure
@@ -12,7 +12,7 @@ var t = function() {
12
12
  n,
13
13
  !1,
14
14
  null,
15
- "23c413c9"
15
+ "98181b5a"
16
16
  );
17
17
  const v = s.exports;
18
18
  export {
@@ -10,7 +10,7 @@ var s = function() {
10
10
  n,
11
11
  !1,
12
12
  null,
13
- "dced5582"
13
+ "07c4b2d8"
14
14
  );
15
15
  const l = _.exports;
16
16
  export {
@@ -1,4 +1,4 @@
1
- import { defineComponent as H, ref as p, computed as _ } from "vue";
1
+ import { defineComponent as H, ref as m, computed as _ } from "vue";
2
2
  import { useConfig as h } from "../../../composables/useConfig.js";
3
3
  import { useExport as V } from "../../../composables/useExport.js";
4
4
  import { useTestEmailClick as x } from "../../../composables/useGuidoActions.js";
@@ -10,25 +10,25 @@ import { getTooltipOptions as O } from "../../../utils/tooltipUtils.js";
10
10
  import { InButtonV2 as A } from "@useinsider/design-system-vue";
11
11
  const J = /* @__PURE__ */ H({
12
12
  __name: "RightSlot",
13
- setup(k, { expose: m }) {
14
- const { config: c } = h(), { exportHtml: r } = V(), { save: n } = E(), { openVersionHistory: i, closeVersionHistory: a } = w(), t = C(), o = T(), e = p(!1), s = p(!1), u = x(), f = () => {
15
- if (t.isVersionHistoryOpen) {
13
+ setup(k, { expose: c }) {
14
+ const { config: u } = h(), { exportHtml: r } = V(), { save: n } = E(), { openVersionHistory: i, closeVersionHistory: a } = w(), o = C(), t = T(), e = m(!1), s = m(!1), f = x(), v = () => {
15
+ if (o.isVersionHistoryOpen) {
16
16
  a();
17
17
  return;
18
18
  }
19
19
  i();
20
- }, v = async () => {
20
+ }, d = async () => {
21
21
  e.value = !0, await r(), e.value = !1;
22
- }, d = () => {
23
- t.isSaveAsTemplateDrawerOpen = !0;
24
- }, y = _(() => t.isVersionHistoryOpen ? o("newsletter.close-version-history") : o("newsletter.version-history")), l = async (S) => {
25
- s.value = !0, t.loadingStatus = !0;
26
- const g = await n(S);
27
- return s.value = !1, t.loadingStatus = !1, g;
22
+ }, y = () => {
23
+ o.isSaveAsTemplateDrawerOpen = !0;
24
+ }, S = _(() => o.isVersionHistoryOpen ? t("newsletter.close-version-history") : t("newsletter.version-history")), l = async (p) => {
25
+ s.value = !0, o.loadingStatus = !0;
26
+ const g = await n(p);
27
+ return s.value = !1, p && (o.loadingStatus = !1), g;
28
28
  };
29
- return m({
29
+ return c({
30
30
  handleSave: l
31
- }), { __sfc: !0, config: c, exportHtml: r, save: n, openVersionHistory: i, closeVersionHistory: a, editorStore: t, trans: o, isExporting: e, isSaving: s, testEmailClick: u, handleVersionHistory: f, handleExport: v, handleSaveAs: d, versionHistoryTooltipText: y, handleSave: l, getTooltipOptions: O, InButtonV2: A };
31
+ }), { __sfc: !0, config: u, exportHtml: r, save: n, openVersionHistory: i, closeVersionHistory: a, editorStore: o, trans: t, isExporting: e, isSaving: s, testEmailClick: f, handleVersionHistory: v, handleExport: d, handleSaveAs: y, versionHistoryTooltipText: S, handleSave: l, getTooltipOptions: O, InButtonV2: A };
32
32
  }
33
33
  });
34
34
  export {
@@ -1,6 +1,6 @@
1
- import { useToaster as w } from "./useToaster.js";
1
+ import { useToaster as g } from "./useToaster.js";
2
2
  const A = () => {
3
- const { handleError: l } = w(), s = (e = {}) => new Promise((t, a) => {
3
+ const { handleError: l } = g(), n = (t = {}) => new Promise((e, a) => {
4
4
  const i = { ...{
5
5
  minimize: !0,
6
6
  utmEntity: {
@@ -20,13 +20,13 @@ const A = () => {
20
20
  forceAmp: !1,
21
21
  resetDataSavedFlag: !1,
22
22
  disableLineHeightsReplace: !0
23
- }, ...e }, m = {
24
- callback: (n, p, c, d, u) => {
25
- n ? a(n) : t({
26
- html: p,
27
- ampHtml: c,
28
- ampErrors: d,
29
- displayConditions: u
23
+ }, ...t }, m = {
24
+ callback: (s, c, p, u, d) => {
25
+ s ? a(s) : e({
26
+ html: c,
27
+ ampHtml: p,
28
+ ampErrors: u,
29
+ displayConditions: d
30
30
  });
31
31
  },
32
32
  ...i
@@ -34,53 +34,44 @@ const A = () => {
34
34
  window.StripoEditorApi.actionsApi.compileEmail(m);
35
35
  });
36
36
  return {
37
- getCompiledEmail: s,
38
- getTemplateData: () => new Promise((e) => {
39
- const t = ({ html: a, css: o, width: i, height: r, utmParams: m, syncModulesIds: n }) => e({
37
+ getCompiledEmail: n,
38
+ getTemplateData: () => new Promise((t) => {
39
+ const e = ({ html: a, css: o, width: i, height: r, utmParams: m, syncModulesIds: s }) => t({
40
40
  html: a,
41
41
  css: o,
42
42
  width: i,
43
43
  height: r,
44
44
  utmParams: m,
45
- syncModulesIds: n
45
+ syncModulesIds: s
46
46
  });
47
- window.StripoEditorApi.actionsApi.getTemplateData(t);
47
+ window.StripoEditorApi.actionsApi.getTemplateData(e);
48
48
  }),
49
- activateCustomViewStyles: (e = !0) => {
50
- window.StripoEditorApi.actionsApi.activateCustomViewStyles(e);
49
+ activateCustomViewStyles: (t = !0) => {
50
+ window.StripoEditorApi.actionsApi.activateCustomViewStyles(t);
51
51
  },
52
- getPreviewData: async (e) => {
52
+ getPreviewData: async (t) => {
53
53
  try {
54
54
  const {
55
- html: t,
55
+ html: e,
56
56
  displayConditions: a,
57
57
  ampHtml: o = "",
58
58
  ampErrors: i = []
59
- } = await s({ minimize: !1, resetDataSavedFlag: !1, ...e });
59
+ } = await n({ minimize: !1, resetDataSavedFlag: !1, ...t });
60
60
  return {
61
- html: t,
61
+ html: e,
62
62
  ampHtml: o,
63
63
  ampErrors: i,
64
64
  displayConditions: a
65
65
  };
66
- } catch (t) {
67
- return l(t, "Error loading preview"), {
66
+ } catch (e) {
67
+ return l(e, "Error loading preview"), {
68
68
  html: "",
69
69
  ampHtml: "",
70
70
  ampErrors: [],
71
71
  displayConditions: []
72
72
  };
73
73
  }
74
- },
75
- updateTimerInClonedTemplate: () => new Promise((e) => {
76
- try {
77
- window.StripoEditorApi.actionsApi.updateTimerInClonedTemplate((t, a) => {
78
- t ? (l(t, "Failed to update timer in cloned template"), e(null)) : e(a || null);
79
- });
80
- } catch (t) {
81
- l(t, "Failed to call updateTimerInClonedTemplate"), e(null);
82
- }
83
- })
74
+ }
84
75
  };
85
76
  };
86
77
  export {
@@ -1,26 +1,25 @@
1
- import { useActionsApi as V } from "./useActionsApi.js";
2
- import { useBlocksConfig as _ } from "./useBlocksConfig.js";
3
- import { useConfig as A } from "./useConfig.js";
4
- import { useCustomInterfaceAppearance as B } from "./useCustomInterfaceAppearance.js";
5
- import { useStripoEventHandler as v } from "./useStripoEventHandler.js";
6
- import { useTimerClone as F } from "./useTimerClone.js";
7
- import { useToaster as I } from "./useToaster.js";
8
- import { displayConditions as M } from "../enums/displayConditions.js";
9
- import { useStripoApi as U } from "../services/stripoApi.js";
10
- import D from "../static/styles/customEditorStyle.css.js";
11
- import { useEditorStore as P } from "../stores/editor.js";
12
- import { dynamicContentToMergeTags as H } from "../utils/genericUtil.js";
13
- import O from "../package.json.js";
14
- const Y = (c) => {
15
- const { config: u } = A(), { handleError: p } = I(), { getToken: m, getCustomFonts: C } = U(), { handleEvent: S } = v(), { getStripoBlocksConfig: E } = _(), w = async (i, r = []) => {
16
- var g, y;
17
- const e = P(), { html: s, css: f, forceRecreate: a } = i, { baseBlocks: t, extensions: d } = await E();
1
+ import { useActionsApi as w } from "./useActionsApi.js";
2
+ import { useBlocksConfig as b } from "./useBlocksConfig.js";
3
+ import { useConfig as k } from "./useConfig.js";
4
+ import { useCustomInterfaceAppearance as V } from "./useCustomInterfaceAppearance.js";
5
+ import { useStripoEventHandler as _ } from "./useStripoEventHandler.js";
6
+ import { useToaster as B } from "./useToaster.js";
7
+ import { displayConditions as T } from "../enums/displayConditions.js";
8
+ import { useStripoApi as A } from "../services/stripoApi.js";
9
+ import F from "../static/styles/customEditorStyle.css.js";
10
+ import { useEditorStore as M } from "../stores/editor.js";
11
+ import { dynamicContentToMergeTags as U } from "../utils/genericUtil.js";
12
+ import v from "../package.json.js";
13
+ const J = (c) => {
14
+ const { config: u } = k(), { handleError: l } = B(), { getToken: f, getCustomFonts: y } = A(), { handleEvent: S } = _(), { getStripoBlocksConfig: C } = b(), E = async (i, r = []) => {
15
+ var m, g;
16
+ const t = M(), { html: n, css: p, forceRecreate: a } = i, { baseBlocks: e, extensions: d } = await C();
18
17
  window.UIEditor.initEditor(
19
18
  document.querySelector("#guido-editor"),
20
19
  {
21
20
  metadata: c,
22
- html: s,
23
- css: f,
21
+ html: n,
22
+ css: p,
24
23
  forceRecreate: a,
25
24
  locale: "en",
26
25
  undoButtonSelector: "#guido__undo-button",
@@ -31,10 +30,10 @@ const Y = (c) => {
31
30
  customAppearanceMergetags: !0,
32
31
  customAppearanceMergetagsBorderColor: "#f1f3fe",
33
32
  customAppearanceMergetagsBackgroundColor: "#f1f3fe",
34
- customViewStyles: D,
35
- conditionsEnabled: ((g = u.features) == null ? void 0 : g.displayConditions) ?? !0,
36
- customConditionsEnabled: ((y = u.features) == null ? void 0 : y.displayConditions) ?? !0,
37
- conditionCategories: M,
33
+ customViewStyles: F,
34
+ conditionsEnabled: ((m = u.features) == null ? void 0 : m.displayConditions) ?? !0,
35
+ customConditionsEnabled: ((g = u.features) == null ? void 0 : g.displayConditions) ?? !0,
36
+ conditionCategories: T,
38
37
  enableXSSSecurity: !0,
39
38
  messageSettingsEnabled: !0,
40
39
  displayGmailAnnotations: !0,
@@ -42,7 +41,7 @@ const Y = (c) => {
42
41
  displayTitle: !1,
43
42
  displayUTM: !1,
44
43
  selectElementAfterDrop: !0,
45
- ...t ? { baseBlocks: t } : {},
44
+ ...e ? { baseBlocks: e } : {},
46
45
  editorFonts: {
47
46
  showDefaultStandardFonts: !0,
48
47
  showDefaultNotStandardFonts: !0,
@@ -50,39 +49,38 @@ const Y = (c) => {
50
49
  },
51
50
  mergeTags: [
52
51
  {
53
- entries: H(c.preselectedDynamicContentList)
52
+ entries: U(c.preselectedDynamicContentList)
54
53
  }
55
54
  ],
56
55
  async onTokenRefreshRequest(o) {
57
56
  try {
58
- const n = await m();
59
- o(n);
60
- } catch (n) {
61
- p(n, "Failed to refresh token");
57
+ const s = await f();
58
+ o(s);
59
+ } catch (s) {
60
+ l(s, "Failed to refresh token");
62
61
  }
63
62
  },
64
63
  onTemplateLoaded() {
65
- var o, n;
66
64
  try {
67
- const { importCss: l } = B(), { activateCustomViewStyles: T, updateTimerInClonedTemplate: b } = V(), { updateTimersOnLoad: k } = F();
68
- l(), T(), typeof ((n = (o = window.StripoEditorApi) == null ? void 0 : o.actionsApi) == null ? void 0 : n.updateTimerInClonedTemplate) == "function" ? b() : k(m), c.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
69
- e.hasChanges = !1;
65
+ const { importCss: o } = V(), { activateCustomViewStyles: s } = w();
66
+ o(), s(), c.onReady(), t.isStripoInitialized = !0, t.loadingStatus = !1, setTimeout(() => {
67
+ t.hasChanges = !1;
70
68
  }, 1e3);
71
- } catch (l) {
72
- p(l, "Failed to load custom interface appearance");
69
+ } catch (o) {
70
+ l(o, "Failed to load custom interface appearance");
73
71
  }
74
72
  },
75
73
  onCodeEditorVisibilityChanged(o) {
76
- e.isCodeEditorOpen = o;
74
+ t.isCodeEditorOpen = o;
77
75
  },
78
76
  onEditorVisualModeChanged(o) {
79
- e.editorVisualMode = o.toLowerCase();
77
+ t.editorVisualMode = o.toLowerCase();
80
78
  },
81
79
  onVersionHistoryVisibilityChanged(o) {
82
- e.isVersionHistoryOpen = o;
80
+ t.isVersionHistoryOpen = o;
83
81
  },
84
82
  onDataChanged() {
85
- e.hasChanges = !0;
83
+ t.hasChanges = !0;
86
84
  },
87
85
  onEvent: S,
88
86
  ignoreClickOutsideSelectors: [
@@ -93,26 +91,26 @@ const Y = (c) => {
93
91
  extensions: d
94
92
  }
95
93
  );
96
- }, h = (i) => new Promise((r, e) => {
94
+ }, h = (i) => new Promise((r, t) => {
97
95
  var d;
98
96
  if (document.getElementById("UiEditorScript")) {
99
97
  i(), r();
100
98
  return;
101
99
  }
102
- const s = O.guido, a = `https://email-static.useinsider.com/guido/${(d = s == null ? void 0 : s.stripo) == null ? void 0 : d.version}/UIEditor.js`, t = document.createElement("script");
103
- t.id = "UiEditorScript", t.type = "module", t.src = a, t.onload = () => {
100
+ const n = v.guido, a = `https://email-static.useinsider.com/guido/${(d = n == null ? void 0 : n.stripo) == null ? void 0 : d.version}/UIEditor.js`, e = document.createElement("script");
101
+ e.id = "UiEditorScript", e.type = "module", e.src = a, e.onload = () => {
104
102
  i(), r();
105
- }, t.onerror = () => {
106
- e(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
107
- }, document.body.appendChild(t);
103
+ }, e.onerror = () => {
104
+ t(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
105
+ }, document.body.appendChild(e);
108
106
  });
109
107
  return { initPlugin: async (i) => {
110
108
  await h(async () => {
111
- const r = await C();
112
- await w(i, r);
109
+ const r = await y();
110
+ await E(i, r);
113
111
  });
114
112
  } };
115
113
  };
116
114
  export {
117
- Y as useStripo
115
+ J as useStripo
118
116
  };
@@ -1,70 +1,70 @@
1
1
  var d = Object.defineProperty;
2
2
  var h = (i, t, e) => t in i ? d(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
3
- var s = (i, t, e) => h(i, typeof t != "symbol" ? t + "" : t, e);
4
- import { ModificationDescription as n, UIElementType as a, UEAttr as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
3
+ var n = (i, t, e) => h(i, typeof t != "symbol" ? t + "" : t, e);
4
+ import { ModificationDescription as a, UIElementType as l, UEAttr as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
5
  import { CommonControl as c } from "../../../common-control.js";
6
- import { ItemsBlockControlId as l } from "../../enums/controlEnums.js";
6
+ import { ItemsBlockControlId as p } from "../../enums/controlEnums.js";
7
7
  import { SETTINGS_ENUMS as I } from "../../enums/settingsEnums.js";
8
8
  import { useItemsBlockStore as N } from "../../store/items-block.js";
9
- import { syncNameTrimmingFromAttributes as y } from "../../utils/syncAttributesFromConfigBlock.js";
10
- import { updateConfigBlockAttributes as M } from "../../utils/updateAttributes.js";
11
- const f = l.NAME_TRIMMING, r = {
9
+ import { syncNameTrimmingFromAttributes as M } from "../../utils/syncAttributesFromConfigBlock.js";
10
+ import { updateConfigBlockAttributes as u } from "../../utils/updateAttributes.js";
11
+ const y = p.NAME_TRIMMING, o = {
12
12
  TRIMMING: "trimming"
13
13
  };
14
- class R extends c {
14
+ class _ extends c {
15
15
  constructor() {
16
16
  super(...arguments);
17
- s(this, "store", N());
17
+ n(this, "store", N());
18
18
  }
19
19
  getId() {
20
- return f;
20
+ return y;
21
21
  }
22
22
  getTemplate() {
23
23
  return `
24
- <div class="${l.NAME_TRIMMING}">
24
+ <div class="${p.NAME_TRIMMING}">
25
25
  ${this._getTextTrimming()}
26
26
  </div>
27
27
  `;
28
28
  }
29
29
  onRender() {
30
- this.api.updateValues({ [r.TRIMMING]: this.store.nameTrimming }), this.api.onValueChanged(r.TRIMMING, (e) => {
30
+ this.api.updateValues({ [o.TRIMMING]: this.store.nameTrimming }), this.api.onValueChanged(o.TRIMMING, (e) => {
31
31
  this._onTrimmingChange(e);
32
32
  });
33
33
  }
34
34
  onTemplateNodeUpdated(e) {
35
35
  super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(
36
- () => y(this.currentNode),
36
+ () => M(this.currentNode),
37
37
  () => {
38
- this.api.updateValues({ [r.TRIMMING]: this.store.nameTrimming });
38
+ this.api.updateValues({ [o.TRIMMING]: this.store.nameTrimming });
39
39
  }
40
- ), this.store.nameTrimming && this._applyTrimmingStyles();
40
+ );
41
41
  }
42
42
  _onTrimmingChange(e) {
43
- this.store.setNameTrimming(e), M(this.currentNode, this.api), this.api.updateValues({ [r.TRIMMING]: e }), this._applyTrimmingStyles(e);
43
+ this.store.setNameTrimming(e), u(this.currentNode, this.api), this.api.updateValues({ [o.TRIMMING]: e }), this._applyTrimmingStyles(e);
44
44
  }
45
45
  _applyTrimmingStyles(e) {
46
- var m;
47
- const o = (m = this.currentNode) == null ? void 0 : m.querySelector("p > a");
48
- if (!o)
46
+ var s;
47
+ const r = (s = this.currentNode) == null ? void 0 : s.querySelector("p > a");
48
+ if (!r)
49
49
  return;
50
- const p = e !== void 0 ? e : this.store.nameTrimming, T = this.store.orientation === I.ORIENTATION.VERTICAL;
51
- p ? this.api.getDocumentModifier().modifyHtml(o).setStyle("white-space", "nowrap").setStyle("overflow", "hidden").setStyle("text-overflow", "ellipsis").setStyle("max-width", T ? "130px" : "550px").apply(new n("Text Trimming Enabled")) : this.api.getDocumentModifier().modifyHtml(o).removeStyle("white-space").removeStyle("overflow").removeStyle("text-overflow").removeStyle("max-width").apply(new n("Text Trimming Disabled"));
50
+ const T = e !== void 0 ? e : this.store.nameTrimming, m = this.store.orientation === I.ORIENTATION.VERTICAL;
51
+ T ? this.api.getDocumentModifier().modifyHtml(r).setStyle("white-space", "nowrap").setStyle("overflow", "hidden").setStyle("text-overflow", "ellipsis").setStyle("max-width", m ? "130px" : "520px").apply(new a("Text Trimming Enabled")) : this.api.getDocumentModifier().modifyHtml(r).removeStyle("white-space").removeStyle("overflow").removeStyle("text-overflow").removeStyle("max-width").setStyle("max-width", m ? "130px" : "520px").apply(new a("Text Trimming Disabled"));
52
52
  }
53
53
  _getTextTrimming() {
54
54
  return `
55
55
  <div class="container">
56
56
  <div class="display-flex align-items-center justify-content-between">
57
- <${a.LABEL}
57
+ <${l.LABEL}
58
58
  ${g.LABEL.text}="${this.api.translate("Text Trimming")}"
59
59
  >
60
- </${a.LABEL}>
61
- ${this._GuToggle(r.TRIMMING)}
60
+ </${l.LABEL}>
61
+ ${this._GuToggle(o.TRIMMING)}
62
62
  </div>
63
63
  </div>
64
64
  `;
65
65
  }
66
66
  }
67
67
  export {
68
- f as CONTROL_BLOCK_ID,
69
- R as NameTrimmingControl
68
+ y as CONTROL_BLOCK_ID,
69
+ _ as NameTrimmingControl
70
70
  };
@@ -0,0 +1,92 @@
1
+ var I = Object.defineProperty;
2
+ var y = (n, o, t) => o in n ? I(n, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[o] = t;
3
+ var m = (n, o, t) => y(n, typeof o != "symbol" ? o + "" : o, t);
4
+ import { ModificationDescription as h } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
+ import { CommonControl as E } from "../../../common-control.js";
6
+ import { ItemsBlockControlId as O } from "../../enums/controlEnums.js";
7
+ import { SETTINGS_ENUMS as N } from "../../enums/settingsEnums.js";
8
+ import { useItemsBlockStore as f } from "../../store/items-block.js";
9
+ import { syncPriceOrientationFromAttributes as T } from "../../utils/syncAttributesFromConfigBlock.js";
10
+ import { updateConfigBlockAttributes as P } from "../../utils/updateAttributes.js";
11
+ const _ = O.PRICE_ORIENTATION, p = {
12
+ PRICE_ORIENTATION: "priceOrientation"
13
+ }, C = [
14
+ { icon: "vertical-orientation", value: "vertical" },
15
+ { icon: "horizontal-orientation", value: "horizontal" }
16
+ ];
17
+ class v extends E {
18
+ constructor() {
19
+ super(...arguments);
20
+ m(this, "store", f());
21
+ }
22
+ getId() {
23
+ return _;
24
+ }
25
+ getTemplate() {
26
+ return `
27
+ <div class="${O.PRICE_ORIENTATION}">
28
+ ${this._getPriceOrientation()}
29
+ </div>
30
+ `;
31
+ }
32
+ onRender() {
33
+ this.api.updateValues({ [p.PRICE_ORIENTATION]: this.store.priceOrientation }), this.api.onValueChanged(p.PRICE_ORIENTATION, (t) => {
34
+ this._onPriceOrientationChange(t);
35
+ });
36
+ }
37
+ onTemplateNodeUpdated(t) {
38
+ super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(
39
+ () => {
40
+ T(this.currentNode);
41
+ },
42
+ () => {
43
+ this.api.updateValues({ [p.PRICE_ORIENTATION]: this.store.priceOrientation });
44
+ }
45
+ );
46
+ }
47
+ _onPriceOrientationChange(t) {
48
+ if (console.debug("Price orientation changed to: ", t), this.store.setPriceOrientation(t), P(this.currentNode, this.api), !this.currentNode)
49
+ return;
50
+ const { orientation: i } = this.store, r = i === N.ORIENTATION.VERTICAL, e = t === "horizontal";
51
+ r ? this._updateVerticalLayout(e) : this._updateHorizontalLayout(e);
52
+ }
53
+ _updateHorizontalLayout(t) {
54
+ var c, l, d, a;
55
+ const i = ((l = (c = this.currentNode) == null ? void 0 : c.closest(".ins-product-td")) == null ? void 0 : l.querySelectorAll(".product-price-class")) || [], r = ((a = (d = this.currentNode) == null ? void 0 : d.closest(".ins-product-td")) == null ? void 0 : a.querySelectorAll(".product-original-price-class")) || [];
56
+ if (!i || !r)
57
+ return;
58
+ const e = t ? "50%" : "100%", s = this.api.getDocumentModifier();
59
+ i.forEach((u) => {
60
+ s.modifyHtml(u).setAttribute("width", e).setStyle("width", e);
61
+ }), r.forEach((u) => {
62
+ s.modifyHtml(u).setAttribute("width", e).setStyle("width", e);
63
+ }), s.apply(new h(`Updated original price element width to ${e}`));
64
+ }
65
+ _updateVerticalLayout(t) {
66
+ var s, c, l, d;
67
+ const i = ((c = (s = this.currentNode) == null ? void 0 : s.closest(".ins-product-td")) == null ? void 0 : c.querySelectorAll(".horizontal-price")) || [], r = (d = (l = this.currentNode) == null ? void 0 : l.closest(".ins-product-td")) == null ? void 0 : d.querySelector(".vertical-price");
68
+ if (!i || !r || i.length === 0)
69
+ return;
70
+ const e = this.api.getDocumentModifier();
71
+ t ? (i.forEach((a) => {
72
+ e.modifyHtml(a).setStyle("display", "table-cell");
73
+ }), e.modifyHtml(r).setStyle("display", "none").apply(new h("Hide vertical price element"))) : (i.forEach((a) => {
74
+ e.modifyHtml(a).setStyle("display", "none");
75
+ }), e.modifyHtml(r).setStyle("display", "table-cell").apply(new h("Show vertical price element")));
76
+ }
77
+ _getPriceOrientation() {
78
+ return `
79
+ ${this._GuTwoColumns([
80
+ this._GuLabel({ text: "Price Orientation" }),
81
+ this._GuRadioButton({
82
+ name: p.PRICE_ORIENTATION,
83
+ buttons: C
84
+ })
85
+ ])}
86
+ `;
87
+ }
88
+ }
89
+ export {
90
+ _ as CONTROL_BLOCK_ID,
91
+ v as PriceOrientationControl
92
+ };