@useinsider/guido 1.0.3-beta.0d0bb85 → 1.0.3-beta.0da597d

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 (118) hide show
  1. package/README.md +172 -3
  2. package/dist/components/Guido.vue.js +1 -1
  3. package/dist/components/Guido.vue2.js +79 -73
  4. package/dist/components/organisms/header/LeftSlot.vue.js +1 -1
  5. package/dist/components/organisms/header/LeftSlot.vue2.js +16 -15
  6. package/dist/components/organisms/header/RightSlot.vue.js +11 -11
  7. package/dist/components/organisms/header/RightSlot.vue2.js +23 -22
  8. package/dist/composables/useBlocksConfig.js +48 -0
  9. package/dist/composables/useGuidoActions.js +19 -9
  10. package/dist/composables/useStripo.js +50 -59
  11. package/dist/config/compiler/unsubscribeCompilerRules.js +33 -28
  12. package/dist/enums/defaults.js +16 -9
  13. package/dist/enums/extensions/recommendationBlock.js +2 -2
  14. package/dist/enums/unsubscribe.js +10 -9
  15. package/dist/extensions/Blocks/Checkbox/block.js +5 -2
  16. package/dist/extensions/Blocks/Checkbox/extension.js +2 -2
  17. package/dist/extensions/Blocks/CouponBlock/extension.js +2 -2
  18. package/dist/extensions/Blocks/Items/block.js +66 -0
  19. package/dist/extensions/Blocks/Items/controls/button/link.js +68 -0
  20. package/dist/extensions/Blocks/Items/controls/cardComposition.js +99 -0
  21. package/dist/extensions/Blocks/Items/controls/image/link.js +68 -0
  22. package/dist/extensions/Blocks/Items/controls/index.js +217 -0
  23. package/dist/extensions/Blocks/Items/controls/name/trimming.js +70 -0
  24. package/dist/extensions/Blocks/Items/controls/price/currencyLocation.js +107 -0
  25. package/dist/extensions/Blocks/Items/controls/price/currencySymbol.js +123 -0
  26. package/dist/extensions/Blocks/Items/controls/price/formattedPrice.js +76 -0
  27. package/dist/extensions/Blocks/Items/controls/price/hideDiscount.js +61 -0
  28. package/dist/extensions/Blocks/Items/controls/settingsControl.js +280 -0
  29. package/dist/extensions/Blocks/Items/enums/controlEnums.js +5 -0
  30. package/dist/extensions/Blocks/Items/enums/productEnums.js +195 -0
  31. package/dist/extensions/Blocks/Items/enums/settingsEnums.js +70 -0
  32. package/dist/extensions/Blocks/Items/extension.js +19 -0
  33. package/dist/extensions/Blocks/Items/iconsRegistry.js +32 -0
  34. package/dist/extensions/Blocks/Items/items.css.js +23 -0
  35. package/dist/extensions/Blocks/Items/layouts/horizontal.html.js +61 -0
  36. package/dist/extensions/Blocks/Items/layouts/vertical.html.js +61 -0
  37. package/dist/extensions/Blocks/Items/settingsPanel.js +106 -0
  38. package/dist/extensions/Blocks/Items/store/items-block.js +71 -0
  39. package/dist/extensions/Blocks/Items/template.js +110 -0
  40. package/dist/extensions/Blocks/Items/utils/configBlockUtils.js +17 -0
  41. package/dist/extensions/Blocks/Items/utils/syncAttributeFromConfigBlock.js +28 -0
  42. package/dist/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.js +67 -0
  43. package/dist/extensions/Blocks/Items/utils/updateAttributes.js +44 -0
  44. package/dist/extensions/Blocks/RadioButton/block.js +5 -2
  45. package/dist/extensions/Blocks/Recommendation/extension.js +4 -4
  46. package/dist/extensions/Blocks/Recommendation/iconsRegistry.js +43 -43
  47. package/dist/extensions/Blocks/Recommendation/store/recommendation.js +1 -1
  48. package/dist/extensions/Blocks/Recommendation/templates/blockTemplate.js +4 -4
  49. package/dist/extensions/Blocks/common-control.js +174 -110
  50. package/dist/extensions/Blocks/controlFactories.js +223 -0
  51. package/dist/extensions/DynamicContent/dynamic-content-modal.js +25 -19
  52. package/dist/extensions/DynamicContent/dynamic-content.js +128 -33
  53. package/dist/guido.css +1 -1
  54. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js +213 -168
  55. package/dist/package.json.js +1 -1
  56. package/dist/services/recommendationApi.js +13 -19
  57. package/dist/services/stripoApi.js +1 -1
  58. package/dist/src/@types/generic.d.ts +36 -6
  59. package/dist/src/components/Guido.vue.d.ts +3 -2
  60. package/dist/src/components/wrappers/WpModal.vue.d.ts +1 -1
  61. package/dist/src/composables/useBlocksConfig.d.ts +11 -0
  62. package/dist/src/composables/useGuidoActions.d.ts +9 -0
  63. package/dist/src/extensions/Blocks/Checkbox/block.d.ts +1 -0
  64. package/dist/src/extensions/Blocks/Items/block.d.ts +13 -0
  65. package/dist/src/extensions/Blocks/Items/controls/button/link.d.ts +14 -0
  66. package/dist/src/extensions/Blocks/Items/controls/cardComposition.d.ts +20 -0
  67. package/dist/src/extensions/Blocks/Items/controls/image/link.d.ts +14 -0
  68. package/dist/src/extensions/Blocks/Items/controls/index.d.ts +501 -0
  69. package/dist/src/extensions/Blocks/Items/controls/name/trimming.d.ts +14 -0
  70. package/dist/src/extensions/Blocks/Items/controls/price/currencyLocation.d.ts +19 -0
  71. package/dist/src/extensions/Blocks/Items/controls/price/currencySymbol.d.ts +21 -0
  72. package/dist/src/extensions/Blocks/Items/controls/price/formattedPrice.d.ts +14 -0
  73. package/dist/src/extensions/Blocks/Items/controls/price/hideDiscount.d.ts +13 -0
  74. package/dist/src/extensions/Blocks/Items/controls/settingsControl.d.ts +42 -0
  75. package/dist/src/extensions/Blocks/Items/enums/controlEnums.d.ts +61 -0
  76. package/dist/src/extensions/Blocks/Items/enums/productEnums.d.ts +154 -0
  77. package/dist/src/extensions/Blocks/Items/enums/settingsEnums.d.ts +43 -0
  78. package/dist/src/extensions/Blocks/Items/extension.d.ts +2 -0
  79. package/dist/src/extensions/Blocks/Items/iconsRegistry.d.ts +4 -0
  80. package/dist/src/extensions/Blocks/Items/settingsPanel.d.ts +4 -0
  81. package/dist/src/extensions/Blocks/Items/store/items-block.d.ts +41 -0
  82. package/dist/src/extensions/Blocks/Items/template.d.ts +16 -0
  83. package/dist/src/extensions/Blocks/Items/utils/configBlockUtils.d.ts +23 -0
  84. package/dist/src/extensions/Blocks/Items/utils/syncAttributeFromConfigBlock.d.ts +32 -0
  85. package/dist/src/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.d.ts +44 -0
  86. package/dist/src/extensions/Blocks/Items/utils/updateAttributes.d.ts +8 -0
  87. package/dist/src/extensions/Blocks/RadioButton/block.d.ts +1 -0
  88. package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts +1 -1
  89. package/dist/src/extensions/Blocks/common-control.d.ts +44 -7
  90. package/dist/src/extensions/Blocks/controlFactories.d.ts +312 -0
  91. package/dist/src/extensions/DynamicContent/dynamic-content-modal.d.ts +9 -2
  92. package/dist/src/extensions/DynamicContent/dynamic-content.d.ts +52 -2
  93. package/dist/src/stores/config.d.ts +9 -2
  94. package/dist/src/stores/dynamic-content.d.ts +3 -3
  95. package/dist/src/stores/editor.d.ts +1 -1
  96. package/dist/src/stores/onboarding.d.ts +1 -1
  97. package/dist/src/stores/preview.d.ts +1 -1
  98. package/dist/src/stores/recommendation.d.ts +1 -1
  99. package/dist/src/stores/save-as-template.d.ts +1 -1
  100. package/dist/src/stores/toaster.d.ts +1 -1
  101. package/dist/src/stores/unsubscribe.d.ts +1 -1
  102. package/dist/src/stores/version-history.d.ts +1 -1
  103. package/dist/src/utils/arrayUtil.d.ts +0 -5
  104. package/dist/src/utils/genericUtil.d.ts +1 -0
  105. package/dist/static/styles/components/narrow-panel.css.js +10 -0
  106. package/dist/static/styles/customEditorStyle.css.js +1 -1
  107. package/dist/stores/config.js +5 -5
  108. package/dist/stores/dynamic-content.js +2 -2
  109. package/dist/stores/editor.js +1 -1
  110. package/dist/stores/onboarding.js +27 -27
  111. package/dist/stores/preview.js +1 -1
  112. package/dist/stores/recommendation.js +3 -3
  113. package/dist/stores/save-as-template.js +2 -2
  114. package/dist/stores/toaster.js +1 -1
  115. package/dist/stores/unsubscribe.js +1 -1
  116. package/dist/stores/version-history.js +4 -4
  117. package/dist/utils/genericUtil.js +18 -8
  118. package/package.json +11 -4
@@ -0,0 +1,223 @@
1
+ import { TextAlignBuiltInControl as r, TextColorBuiltInControl as l, TextSizeBuiltInControl as s, TextStyleBuiltInControl as c, TextFontFamilyBuiltInControl as u, ButtonBackgroundColorBuiltInControl as i, TextPaddingsBuiltInControl as d, ImageSizeBuiltInControl as a, ImageMarginsBuiltInControl as g, ButtonAlignBuiltInControl as x, ButtonBorderBuiltInControl as C, ButtonBorderRadiusBuiltInControl as B, ButtonColorBuiltInControl as I, ButtonFontFamilyBuiltInControl as m, ButtonMarginsBuiltInControl as T, ButtonPaddingsBuiltInControl as S, ButtonTextBuiltInControl as y, ButtonTextSizeBuiltInControl as A, ButtonTextStyleAndFontColorBuiltInControl as k, ButtonFitToContainerBuiltInControl as f } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
+ function q(e, t, n) {
3
+ return class extends r {
4
+ getId() {
5
+ return e;
6
+ }
7
+ getTargetNodes(o) {
8
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
9
+ }
10
+ };
11
+ }
12
+ function N(e, t, n = ".ins-recommendation-product-container") {
13
+ return class extends l {
14
+ getId() {
15
+ return e;
16
+ }
17
+ getTargetNodes(o) {
18
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
19
+ }
20
+ };
21
+ }
22
+ function $(e, t, n = ".ins-recommendation-product-container") {
23
+ return class extends s {
24
+ getId() {
25
+ return e;
26
+ }
27
+ getTargetNodes(o) {
28
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
29
+ }
30
+ };
31
+ }
32
+ function p(e, t, n = ".ins-recommendation-product-container") {
33
+ return class extends c {
34
+ getId() {
35
+ return e;
36
+ }
37
+ getTargetNodes(o) {
38
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
39
+ }
40
+ };
41
+ }
42
+ function F(e, t, n = ".ins-recommendation-product-container") {
43
+ return class extends u {
44
+ getId() {
45
+ return e;
46
+ }
47
+ getTargetNodes(o) {
48
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
49
+ }
50
+ };
51
+ }
52
+ function z(e, t, n = ".ins-recommendation-product-container") {
53
+ return class extends i {
54
+ getId() {
55
+ return e;
56
+ }
57
+ getTargetNodes(o) {
58
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
59
+ }
60
+ };
61
+ }
62
+ function M(e, t, n = ".ins-recommendation-product-container") {
63
+ return class extends d {
64
+ getId() {
65
+ return e;
66
+ }
67
+ getTargetNodes(o) {
68
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
69
+ }
70
+ };
71
+ }
72
+ function P(e, t, n = ".ins-recommendation-product-container") {
73
+ return class extends x {
74
+ getId() {
75
+ return e;
76
+ }
77
+ getTargetNodes(o) {
78
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
79
+ }
80
+ };
81
+ }
82
+ function R(e, t, n = ".ins-recommendation-product-container") {
83
+ return class extends I {
84
+ getId() {
85
+ return e;
86
+ }
87
+ getTargetNodes(o) {
88
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
89
+ }
90
+ };
91
+ }
92
+ function h(e, t, n = ".ins-recommendation-product-container") {
93
+ return class extends C {
94
+ getId() {
95
+ return e;
96
+ }
97
+ getTargetNodes(o) {
98
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
99
+ }
100
+ };
101
+ }
102
+ function j(e, t, n = ".ins-recommendation-product-container") {
103
+ return class extends B {
104
+ getId() {
105
+ return e;
106
+ }
107
+ getTargetNodes(o) {
108
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
109
+ }
110
+ };
111
+ }
112
+ function v(e, t, n = ".ins-recommendation-product-container") {
113
+ return class extends m {
114
+ getId() {
115
+ return e;
116
+ }
117
+ getTargetNodes(o) {
118
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
119
+ }
120
+ };
121
+ }
122
+ function w(e, t, n = ".ins-recommendation-product-container") {
123
+ return class extends T {
124
+ getId() {
125
+ return e;
126
+ }
127
+ getTargetNodes(o) {
128
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
129
+ }
130
+ };
131
+ }
132
+ function D(e, t, n = ".ins-recommendation-product-container") {
133
+ return class extends S {
134
+ getId() {
135
+ return e;
136
+ }
137
+ getTargetNodes(o) {
138
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
139
+ }
140
+ };
141
+ }
142
+ function E(e, t, n = ".ins-recommendation-product-container") {
143
+ return class extends y {
144
+ getId() {
145
+ return e;
146
+ }
147
+ getTargetNodes(o) {
148
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
149
+ }
150
+ };
151
+ }
152
+ function G(e, t, n = ".ins-recommendation-product-container") {
153
+ return class extends A {
154
+ getId() {
155
+ return e;
156
+ }
157
+ getTargetNodes(o) {
158
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
159
+ }
160
+ };
161
+ }
162
+ function H(e, t, n) {
163
+ return class extends k {
164
+ getId() {
165
+ return e;
166
+ }
167
+ getTargetNodes(o) {
168
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
169
+ }
170
+ };
171
+ }
172
+ function J(e, t, n) {
173
+ return class extends f {
174
+ getId() {
175
+ return e;
176
+ }
177
+ getTargetNodes(o) {
178
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
179
+ }
180
+ };
181
+ }
182
+ function K(e, t, n) {
183
+ return class extends a {
184
+ getId() {
185
+ return e;
186
+ }
187
+ getTargetNodes(o) {
188
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
189
+ }
190
+ };
191
+ }
192
+ function L(e, t, n) {
193
+ return class extends g {
194
+ getId() {
195
+ return e;
196
+ }
197
+ getTargetNodes(o) {
198
+ return o.closest(n).querySelectorAll(`[esd-extension-block-id="${t}"]`);
199
+ }
200
+ };
201
+ }
202
+ export {
203
+ P as createButtonAlignControl,
204
+ h as createButtonBorderControl,
205
+ j as createButtonBorderRadiusControl,
206
+ R as createButtonColorControl,
207
+ J as createButtonFitToContainerControl,
208
+ v as createButtonFontFamilyControl,
209
+ w as createButtonMarginsControl,
210
+ D as createButtonPaddingsControl,
211
+ E as createButtonTextControl,
212
+ G as createButtonTextSizeControl,
213
+ H as createButtonTextStyleAndFontColorControl,
214
+ L as createImageMarginsControl,
215
+ K as createImageSizeControl,
216
+ M as createPaddingsControl,
217
+ q as createTextAlignControl,
218
+ z as createTextBackgroundColorControl,
219
+ N as createTextColorControl,
220
+ F as createTextFontFamilyControl,
221
+ $ as createTextSizeControl,
222
+ p as createTextStyleControl
223
+ };
@@ -1,27 +1,33 @@
1
- var i = Object.defineProperty;
2
- var d = (t, e, n) => e in t ? i(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
3
- var a = (t, e, n) => d(t, typeof e != "symbol" ? e + "" : e, n);
4
- class y {
1
+ var d = Object.defineProperty;
2
+ var m = (t, e, n) => e in t ? d(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
3
+ var c = (t, e, n) => m(t, typeof e != "symbol" ? e + "" : e, n);
4
+ class C {
5
5
  constructor() {
6
- a(this, "selectedDynamicContent", null);
7
- a(this, "dataSelectCallback", () => {
6
+ c(this, "selectedDynamicContent", null);
7
+ c(this, "dataSelectCallback", () => {
8
8
  });
9
+ c(this, "closeDynamicContentHandler", null);
9
10
  }
10
- openMergeTagsLibrary(e, n) {
11
- this.dataSelectCallback = n, this.selectedDynamicContent = e;
12
- const s = new CustomEvent("dynamic-content:open", {
13
- detail: {
14
- attribute: e
15
- }
11
+ /**
12
+ * Opens the merge tags library modal
13
+ * @param dynamicContent - Currently selected dynamic content (if any)
14
+ * @param onDataSelectCallback - Callback invoked when user selects a merge tag
15
+ * @param position - Optional position data to place the modal
16
+ */
17
+ openMergeTagsLibrary(e, n, l) {
18
+ this.closeDynamicContentHandler && (document.removeEventListener("dynamic-content:close", this.closeDynamicContentHandler), this.closeDynamicContentHandler = null), this.dataSelectCallback = n, this.selectedDynamicContent = e;
19
+ const o = {
20
+ attribute: e,
21
+ position: l
22
+ }, s = new CustomEvent("dynamic-content:open", {
23
+ detail: o
16
24
  });
17
- document.dispatchEvent(s);
18
- const o = (l) => {
19
- const c = l.detail;
20
- this.selectedDynamicContent = c, c.text && c.value && this.dataSelectCallback(c), document.removeEventListener("dynamic-content:close", o);
21
- };
22
- document.addEventListener("dynamic-content:close", o);
25
+ document.dispatchEvent(s), this.closeDynamicContentHandler = (i) => {
26
+ const a = i.detail;
27
+ this.selectedDynamicContent = a, a.text && a.value && this.dataSelectCallback(a);
28
+ }, document.addEventListener("dynamic-content:close", this.closeDynamicContentHandler);
23
29
  }
24
30
  }
25
31
  export {
26
- y as ExternalMergeTagsLibrary
32
+ C as ExternalMergeTagsLibrary
27
33
  };
@@ -1,61 +1,156 @@
1
- var o = Object.defineProperty;
2
- var g = (n, t, e) => t in n ? o(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
3
- var i = (n, t, e) => g(n, typeof t != "symbol" ? t + "" : t, e);
4
- import { dynamicContentToMergeTags as m } from "../../utils/genericUtil.js";
5
- import { UIElement as c, UIElementType as r, UEAttr as l, UIElementTagRegistry as d } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
6
- import { ExternalMergeTagsLibrary as T } from "./dynamic-content-modal.js";
7
- const a = "external-dynamic-content-ui-element", y = "button-add-dynamic-content";
8
- class p extends d {
9
- registerUiElements(t) {
10
- t[r.MERGETAGS] = a;
1
+ var c = Object.defineProperty;
2
+ var g = (o, s, t) => s in o ? c(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
3
+ var r = (o, s, t) => g(o, typeof s != "symbol" ? s + "" : s, t);
4
+ import { mergeTagToDynamicContent as d, dynamicContentToMergeTags as m } from "../../utils/genericUtil.js";
5
+ import { UIElement as u, UIElementType as a, UEAttr as h, UIElementTagRegistry as T } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
6
+ import { ExternalMergeTagsLibrary as y } from "./dynamic-content-modal.js";
7
+ const l = "external-dynamic-content-ui-element", C = "button-add-dynamic-content";
8
+ class p extends T {
9
+ registerUiElements(s) {
10
+ s[a.MERGETAGS] = l;
11
11
  }
12
12
  }
13
- class C extends c {
13
+ class b extends u {
14
14
  constructor() {
15
15
  super(...arguments);
16
- i(this, "mergeTagsButton", null);
17
- i(this, "listener", () => {
18
- });
19
- i(this, "mergeTagsLibrary", null);
20
- i(this, "selectedDynamicContent", { value: "", text: "" });
16
+ r(this, "mergeTagsButton", null);
17
+ r(this, "mergeTagsLibrary", null);
18
+ r(this, "clickListener", null);
19
+ r(this, "lastClickedElement", null);
20
+ r(this, "lastClickedFrame", null);
21
+ r(this, "mousedownListener", null);
21
22
  }
22
23
  getId() {
23
- return a;
24
+ return l;
24
25
  }
25
- onRender(e) {
26
- var s;
27
- this.listener = this._onClick.bind(this), this.mergeTagsButton = e.querySelector("#guido__btn-add-dynamic-content"), (s = this.mergeTagsButton) == null || s.addEventListener("click", this.listener);
26
+ onRender(t) {
27
+ var e;
28
+ this.mergeTagsButton = t.querySelector("#guido__btn-add-dynamic-content"), this.clickListener = this._onClick.bind(this), (e = this.mergeTagsButton) == null || e.addEventListener("click", this.clickListener), this._setupCoordinateTracking();
28
29
  }
29
30
  onDestroy() {
30
- var e;
31
- (e = this.mergeTagsButton) == null || e.removeEventListener("click", this.listener);
31
+ var t;
32
+ this.clickListener && ((t = this.mergeTagsButton) == null || t.removeEventListener("click", this.clickListener)), this._cleanupCoordinateTracking(), this.mergeTagsButton = null, this.clickListener = null, this.lastClickedElement = null, this.lastClickedFrame = null;
32
33
  }
33
34
  _onClick() {
34
35
  this.openMergeTagLibrary();
35
36
  }
37
+ /**
38
+ * Called when Stripo detects merge tag interactions
39
+ * This is the key method that receives notifications about merge tag clicks
40
+ * @param name - Attribute name (e.g., 'mergeTag')
41
+ * @param value - MergeTag object with label, value, selStart, selEnd, etc.
42
+ */
43
+ onAttributeUpdated(t, e) {
44
+ if (t !== "mergeTag" || !(e != null && e.value))
45
+ return;
46
+ const n = d(e), i = this._getLastClickedPosition();
47
+ this.lastClickedElement = null, this.lastClickedFrame = null, this._openDynamicContentLibrary(n, i);
48
+ }
36
49
  openMergeTagLibrary() {
37
- this.mergeTagsLibrary || (this.mergeTagsLibrary = new T()), this.mergeTagsLibrary.openMergeTagsLibrary(
38
- this.selectedDynamicContent,
39
- (e) => {
40
- this.api.onValueChanged(m([e])[0]);
41
- }
50
+ const t = this._getButtonPosition(), e = { value: "", text: "" };
51
+ this._openDynamicContentLibrary(e, t);
52
+ }
53
+ /**
54
+ * Opens the dynamic content library for external apps
55
+ * Dispatches event with dynamic content data and position
56
+ */
57
+ _openDynamicContentLibrary(t, e) {
58
+ this.mergeTagsLibrary || (this.mergeTagsLibrary = new y()), this.mergeTagsLibrary.openMergeTagsLibrary(
59
+ t,
60
+ (n) => {
61
+ n.text && n.value ? this.api.triggerValueChange(m([n])[0]) : this.api.triggerValueChange(null);
62
+ },
63
+ e
42
64
  );
43
65
  }
66
+ /**
67
+ * Gets the button's position on the screen
68
+ * Used to position the modal or anything else near the button
69
+ */
70
+ _getButtonPosition() {
71
+ if (!this.mergeTagsButton)
72
+ return { x: 0, y: 0, width: 0, height: 0 };
73
+ const { x: t, y: e, width: n, height: i } = this.mergeTagsButton.getBoundingClientRect();
74
+ return { x: t, y: e, width: n, height: i };
75
+ }
76
+ /**
77
+ * Sets up coordinate tracking for merge tag clicks in the iframe
78
+ * Workaround from Stripo intercepting click events - tracks mousedown events instead
79
+ */
80
+ _setupCoordinateTracking() {
81
+ var e;
82
+ const t = this._getEditorFrame();
83
+ (e = t == null ? void 0 : t.contentWindow) != null && e.document && (this.mousedownListener = (n) => {
84
+ const i = this._findMergeTagElement(n.target);
85
+ i && (this.lastClickedElement = i, this.lastClickedFrame = t);
86
+ }, t.contentWindow.document.addEventListener("mousedown", this.mousedownListener));
87
+ }
88
+ /**
89
+ * Gets the editor iframe element
90
+ */
91
+ _getEditorFrame() {
92
+ var n;
93
+ const t = document.querySelector("ui-editor");
94
+ if (!(t != null && t.shadowRoot))
95
+ return null;
96
+ const e = t.shadowRoot.querySelector("iframe");
97
+ return (n = e == null ? void 0 : e.contentWindow) != null && n.document ? e : null;
98
+ }
99
+ /**
100
+ * Finds merge tag element in the element tree
101
+ */
102
+ _findMergeTagElement(t) {
103
+ return t.closest(".target, .esd-merge-tag");
104
+ }
105
+ /**
106
+ * Gets the position of the last clicked element, calculated on-demand
107
+ * This ensures we always use the correct element's position even with rapid clicks
108
+ */
109
+ _getLastClickedPosition() {
110
+ if (!(!this.lastClickedElement || !this.lastClickedFrame))
111
+ return this._calculateAbsolutePosition(this.lastClickedFrame, this.lastClickedElement);
112
+ }
113
+ /**
114
+ * Calculates absolute position of element relative to page
115
+ */
116
+ _calculateAbsolutePosition(t, e) {
117
+ const n = t.getBoundingClientRect(), i = e.getBoundingClientRect();
118
+ return {
119
+ x: n.x + i.x,
120
+ y: n.y + i.y,
121
+ width: i.width,
122
+ height: i.height
123
+ };
124
+ }
125
+ /**
126
+ * Cleans up the coordinate tracking event listener
127
+ */
128
+ _cleanupCoordinateTracking() {
129
+ var e;
130
+ if (!this.mousedownListener)
131
+ return;
132
+ const t = this._getEditorFrame();
133
+ (e = t == null ? void 0 : t.contentWindow) != null && e.document && t.contentWindow.document.removeEventListener("mousedown", this.mousedownListener), this.mousedownListener = null;
134
+ }
135
+ /**
136
+ * Returns the HTML template for the "Add Dynamic Content" button
137
+ * This button is placed in the merge tags selector UI
138
+ */
44
139
  getTemplate() {
45
140
  return `
46
141
  <div>
47
- <${r.BUTTON}
142
+ <${a.BUTTON}
48
143
  id="guido__btn-add-dynamic-content"
49
144
  class="btn btn-primary"
50
- ${l.BUTTON.name}="${y}">
51
- <${r.ICON} src="plus" class="icon icon-button color-primary">
52
- </${r.ICON}>
145
+ ${h.BUTTON.name}="${C}">
146
+ <${a.ICON} src="plus" class="icon icon-button color-primary">
147
+ </${a.ICON}>
53
148
  ${this.api.translate("Add Dynamic Content")}
54
- </${r.BUTTON}>
149
+ </${a.BUTTON}>
55
150
  </div>`;
56
151
  }
57
152
  }
58
153
  export {
59
154
  p as DynamicContentTagRegistry,
60
- C as DynamicContentUiElementExtension
155
+ b as DynamicContentUiElementExtension
61
156
  };
package/dist/guido.css CHANGED
@@ -1 +1 @@
1
- .gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-2c168944] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.guido-loading__wrapper[data-v-dced5582]{height:100%;top:75px}.guido-editor__wrapper[data-v-3c910a93],.guido-editor__container[data-v-3c910a93]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-3c910a93]{height:calc(100vh - 75px)}[data-v-70835920] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-dd57102d] .guido__verion-history-view-option-selection-desktop svg,[data-v-dd57102d] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-dd57102d] .in-segments-wrapper__button_selected,[data-v-dd57102d] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-7a09985c]{gap:16px}[data-v-c2adc57d] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-2dd60b0c],[data-v-2dd60b0c] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-f20b3a9b]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-v-d3c52b44] .vueperslides__bullets,[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}
1
+ .gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-0502bceb] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.guido-loading__wrapper[data-v-dced5582]{height:100%;top:75px}.guido-editor__wrapper[data-v-23c413c9],.guido-editor__container[data-v-23c413c9]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-23c413c9]{height:calc(100vh - 75px)}[data-v-70835920] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-dd57102d] .guido__verion-history-view-option-selection-desktop svg,[data-v-dd57102d] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-dd57102d] .in-segments-wrapper__button_selected,[data-v-dd57102d] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-7a09985c]{gap:16px}[data-v-c2adc57d] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-2dd60b0c],[data-v-2dd60b0c] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-f20b3a9b]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-v-d3c52b44] .vueperslides__bullets,[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}