@useinsider/guido 2.1.0-beta.bc18abc → 2.1.0-beta.da327fa
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.
- package/dist/composables/useActionsApi.js +15 -13
- package/dist/config/migrator/itemsBlockMigrator.js +140 -123
- package/dist/extensions/Blocks/Items/block.js +19 -28
- package/dist/extensions/Blocks/Items/controls/button/link.js +19 -31
- package/dist/extensions/Blocks/Items/controls/cardComposition.js +124 -85
- package/dist/extensions/Blocks/Items/controls/image/link.js +19 -31
- package/dist/extensions/Blocks/Items/controls/name/trimming.js +28 -40
- package/dist/extensions/Blocks/Items/controls/price/currencyLocation.js +35 -47
- package/dist/extensions/Blocks/Items/controls/price/currencySymbol.js +49 -54
- package/dist/extensions/Blocks/Items/controls/price/formattedPrice.js +42 -51
- package/dist/extensions/Blocks/Items/controls/price/hideDiscount.js +23 -36
- package/dist/extensions/Blocks/Items/controls/price/priceOrientation.js +45 -57
- package/dist/extensions/Blocks/Items/controls/price/singlePrice.js +42 -60
- package/dist/extensions/Blocks/Items/controls/settingsControl.js +189 -196
- package/dist/extensions/Blocks/Items/enums/settingsEnums.js +0 -2
- package/dist/extensions/Blocks/Items/extension.js +8 -9
- package/dist/extensions/Blocks/Items/settingsPanel.js +10 -15
- package/dist/extensions/Blocks/Items/template.js +181 -175
- package/dist/extensions/Blocks/Items/utils/nodeConfigUtils.js +65 -65
- package/dist/extensions/Blocks/Recommendation/utils/preserveTextStyles.js +3 -3
- package/dist/extensions/Blocks/common-control.js +91 -92
- package/dist/src/extensions/Blocks/Items/block.d.ts +0 -1
- package/dist/src/extensions/Blocks/Items/controls/button/link.d.ts +0 -1
- package/dist/src/extensions/Blocks/Items/controls/cardComposition.d.ts +5 -5
- package/dist/src/extensions/Blocks/Items/controls/image/link.d.ts +0 -1
- package/dist/src/extensions/Blocks/Items/controls/name/trimming.d.ts +0 -1
- package/dist/src/extensions/Blocks/Items/controls/price/currencyLocation.d.ts +0 -1
- package/dist/src/extensions/Blocks/Items/controls/price/currencySymbol.d.ts +0 -1
- package/dist/src/extensions/Blocks/Items/controls/price/formattedPrice.d.ts +0 -1
- package/dist/src/extensions/Blocks/Items/controls/price/hideDiscount.d.ts +0 -1
- package/dist/src/extensions/Blocks/Items/controls/price/priceOrientation.d.ts +0 -1
- package/dist/src/extensions/Blocks/Items/controls/price/singlePrice.d.ts +0 -5
- package/dist/src/extensions/Blocks/Items/controls/settingsControl.d.ts +10 -12
- package/dist/src/extensions/Blocks/Items/utils/nodeConfigUtils.d.ts +2 -1
- package/dist/src/extensions/Blocks/common-control.d.ts +4 -5
- package/package.json +1 -1
- package/dist/extensions/Blocks/Items/store/items-block.js +0 -79
- package/dist/src/extensions/Blocks/Items/store/items-block.d.ts +0 -45
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { ModificationDescription as
|
|
5
|
-
import { CommonControl as
|
|
6
|
-
import { ItemsBlockId as
|
|
1
|
+
var I = Object.defineProperty;
|
|
2
|
+
var U = (d, a, t) => a in d ? I(d, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[a] = t;
|
|
3
|
+
var p = (d, a, t) => U(d, typeof a != "symbol" ? a + "" : a, t);
|
|
4
|
+
import { ModificationDescription as c } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
|
+
import { CommonControl as b } from "../../common-control.js";
|
|
6
|
+
import { ItemsBlockId as r } from "../enums/controlEnums.js";
|
|
7
7
|
import { SETTINGS_ENUMS as h } from "../enums/settingsEnums.js";
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
const b = "ui-elements-items-card-composition-block", i = {
|
|
8
|
+
import { getItemsBlockConfig as R, setItemsBlockConfig as m } from "../utils/nodeConfigUtils.js";
|
|
9
|
+
const g = "ui-elements-items-card-composition-block", i = {
|
|
11
10
|
PRODUCT_IMAGE: "image",
|
|
12
11
|
PRODUCT_NAME: "name",
|
|
13
12
|
PRODUCT_QUANTITY: "quantity",
|
|
@@ -15,11 +14,10 @@ const b = "ui-elements-items-card-composition-block", i = {
|
|
|
15
14
|
PRODUCT_ORIGINAL_PRICE: "originalPrice",
|
|
16
15
|
PRODUCT_BUTTON: "button"
|
|
17
16
|
};
|
|
18
|
-
class
|
|
17
|
+
class M extends b {
|
|
19
18
|
constructor() {
|
|
20
19
|
super(...arguments);
|
|
21
|
-
|
|
22
|
-
P(this, "visibilityState", {
|
|
20
|
+
p(this, "visibilityState", {
|
|
23
21
|
[i.PRODUCT_IMAGE]: !0,
|
|
24
22
|
[i.PRODUCT_NAME]: !0,
|
|
25
23
|
[i.PRODUCT_QUANTITY]: !0,
|
|
@@ -29,7 +27,7 @@ class S extends I {
|
|
|
29
27
|
});
|
|
30
28
|
}
|
|
31
29
|
getId() {
|
|
32
|
-
return
|
|
30
|
+
return g;
|
|
33
31
|
}
|
|
34
32
|
getTemplate() {
|
|
35
33
|
return `
|
|
@@ -49,14 +47,9 @@ class S extends I {
|
|
|
49
47
|
this._syncVisibilityFromAttributes(), this._handleBrowsedItemsQuantity(), this._initializeToggles(), this._listenToFormUpdates();
|
|
50
48
|
}
|
|
51
49
|
onTemplateNodeUpdated(t) {
|
|
52
|
-
super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(
|
|
53
|
-
()
|
|
54
|
-
|
|
55
|
-
},
|
|
56
|
-
() => {
|
|
57
|
-
this._updateTogglesFromState();
|
|
58
|
-
}
|
|
59
|
-
);
|
|
50
|
+
super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(() => {
|
|
51
|
+
this._syncVisibilityFromAttributes(), this._handleBrowsedItemsQuantity(!0), this._updateTogglesFromState();
|
|
52
|
+
});
|
|
60
53
|
}
|
|
61
54
|
_getToggleContainer({ name: t, label: e }) {
|
|
62
55
|
return `
|
|
@@ -94,42 +87,45 @@ class S extends I {
|
|
|
94
87
|
[i.PRODUCT_BUTTON]: "buttonVisible"
|
|
95
88
|
};
|
|
96
89
|
Object.entries(e).forEach(([o, n]) => {
|
|
97
|
-
const
|
|
98
|
-
this.visibilityState[o] =
|
|
90
|
+
const s = t[n];
|
|
91
|
+
this.visibilityState[o] = s !== !1;
|
|
99
92
|
});
|
|
100
93
|
}
|
|
101
94
|
/**
|
|
102
95
|
* If itemsType is not BROWSED_ITEMS, show quantity
|
|
103
96
|
* If itemsType is BROWSED_ITEMS, hide quantity
|
|
104
97
|
* and mark it as '0'
|
|
98
|
+
* @param syncOnly - If true, only sync local state and UI without modifying the document
|
|
105
99
|
*/
|
|
106
|
-
_handleBrowsedItemsQuantity() {
|
|
107
|
-
const
|
|
100
|
+
_handleBrowsedItemsQuantity(t = !1) {
|
|
101
|
+
const e = R(this.currentNode), n = ((e == null ? void 0 : e.type) ?? h.ITEMS_TYPE.CART_ITEMS) !== h.ITEMS_TYPE.BROWSED_ITEMS;
|
|
108
102
|
if (!e)
|
|
109
103
|
return;
|
|
110
|
-
const
|
|
111
|
-
this.visibilityState[i.PRODUCT_QUANTITY] =
|
|
112
|
-
}
|
|
113
|
-
_applyVisibilityStyles() {
|
|
114
|
-
const
|
|
115
|
-
[i.PRODUCT_IMAGE]:
|
|
116
|
-
[i.PRODUCT_NAME]:
|
|
117
|
-
[i.PRODUCT_QUANTITY]:
|
|
118
|
-
[i.PRODUCT_PRICE]:
|
|
119
|
-
[i.PRODUCT_ORIGINAL_PRICE]:
|
|
120
|
-
[i.PRODUCT_BUTTON]:
|
|
121
|
-
};
|
|
122
|
-
Object.entries(
|
|
123
|
-
var
|
|
124
|
-
const
|
|
125
|
-
if (!
|
|
104
|
+
const s = e.quantityControlEnabled !== !1;
|
|
105
|
+
this.visibilityState[i.PRODUCT_QUANTITY] = n && s, this.api.setVisibility(`${i.PRODUCT_QUANTITY}Container`, n), t || this._updateVisibilityAttribute(i.PRODUCT_QUANTITY, n && s);
|
|
106
|
+
}
|
|
107
|
+
_applyVisibilityStyles(t) {
|
|
108
|
+
const e = {
|
|
109
|
+
[i.PRODUCT_IMAGE]: r.IMAGE,
|
|
110
|
+
[i.PRODUCT_NAME]: r.NAME,
|
|
111
|
+
[i.PRODUCT_QUANTITY]: r.QUANTITY,
|
|
112
|
+
[i.PRODUCT_PRICE]: r.PRICE,
|
|
113
|
+
[i.PRODUCT_ORIGINAL_PRICE]: r.ORIGINAL_PRICE,
|
|
114
|
+
[i.PRODUCT_BUTTON]: r.BUTTON
|
|
115
|
+
}, o = t ?? this.api.getDocumentModifier();
|
|
116
|
+
Object.entries(e).forEach(([n, s]) => {
|
|
117
|
+
var C;
|
|
118
|
+
const l = (C = this.currentNode) == null ? void 0 : C.querySelectorAll(`[esd-extension-block-id="${s}"]`);
|
|
119
|
+
if (!l)
|
|
126
120
|
return;
|
|
127
|
-
const
|
|
128
|
-
|
|
129
|
-
|
|
121
|
+
const P = this.visibilityState[n];
|
|
122
|
+
l.forEach((T) => {
|
|
123
|
+
o.modifyHtml(T).setStyle("display", P ? "table-cell" : "none");
|
|
124
|
+
});
|
|
125
|
+
}), this._updatePriceCellWidthsForVerticalLayout(o), t || o.apply(new c("Applied visibility styles"));
|
|
130
126
|
}
|
|
131
|
-
_updateVisibilityAttribute(t, e) {
|
|
132
|
-
const
|
|
127
|
+
_updateVisibilityAttribute(t, e, o) {
|
|
128
|
+
const s = {
|
|
133
129
|
[i.PRODUCT_IMAGE]: "imageVisible",
|
|
134
130
|
[i.PRODUCT_NAME]: "nameVisible",
|
|
135
131
|
[i.PRODUCT_QUANTITY]: "quantityControlEnabled",
|
|
@@ -137,9 +133,9 @@ class S extends I {
|
|
|
137
133
|
[i.PRODUCT_ORIGINAL_PRICE]: "originalPriceVisible",
|
|
138
134
|
[i.PRODUCT_BUTTON]: "buttonVisible"
|
|
139
135
|
}[t];
|
|
140
|
-
|
|
141
|
-
[
|
|
142
|
-
});
|
|
136
|
+
s && m(this.currentNode, this.api, {
|
|
137
|
+
[s]: e
|
|
138
|
+
}, o);
|
|
143
139
|
}
|
|
144
140
|
_listenToFormUpdates() {
|
|
145
141
|
this.api.onValueChanged(i.PRODUCT_IMAGE, (t) => {
|
|
@@ -157,35 +153,67 @@ class S extends I {
|
|
|
157
153
|
});
|
|
158
154
|
}
|
|
159
155
|
_onProductImageChange(t) {
|
|
160
|
-
var
|
|
161
|
-
const e = (
|
|
162
|
-
|
|
156
|
+
var s;
|
|
157
|
+
const e = (s = this.currentNode) == null ? void 0 : s.querySelector(`[esd-extension-block-id="${r.IMAGE}"]`);
|
|
158
|
+
if (!e)
|
|
159
|
+
return;
|
|
160
|
+
this.visibilityState[i.PRODUCT_IMAGE] = t;
|
|
161
|
+
const o = this.api.getDocumentModifier();
|
|
162
|
+
o.modifyHtml(e).setStyle("display", t ? "table-cell" : "none"), this._updateVisibilityAttribute(i.PRODUCT_IMAGE, t, o);
|
|
163
|
+
const n = `Product image visibility changed to ${t ? "visible" : "hidden"}`;
|
|
164
|
+
o.apply(new c(n));
|
|
163
165
|
}
|
|
164
166
|
_onProductNameChange(t) {
|
|
165
|
-
var
|
|
166
|
-
const e = (
|
|
167
|
-
|
|
167
|
+
var s;
|
|
168
|
+
const e = (s = this.currentNode) == null ? void 0 : s.querySelector(`[esd-extension-block-id="${r.NAME}"]`);
|
|
169
|
+
if (!e)
|
|
170
|
+
return;
|
|
171
|
+
this.visibilityState[i.PRODUCT_NAME] = t;
|
|
172
|
+
const o = this.api.getDocumentModifier();
|
|
173
|
+
o.modifyHtml(e).setStyle("display", t ? "table-cell" : "none"), this._updateVisibilityAttribute(i.PRODUCT_NAME, t, o);
|
|
174
|
+
const n = `Product name visibility changed to ${t ? "visible" : "hidden"}`;
|
|
175
|
+
o.apply(new c(n));
|
|
168
176
|
}
|
|
169
177
|
_onProductQuantityChange(t) {
|
|
170
|
-
var
|
|
171
|
-
const e = (
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
178
|
+
var s;
|
|
179
|
+
const e = (s = this.currentNode) == null ? void 0 : s.querySelector(`[esd-extension-block-id="${r.QUANTITY}"]`);
|
|
180
|
+
if (!e)
|
|
181
|
+
return;
|
|
182
|
+
this.visibilityState[i.PRODUCT_QUANTITY] = t;
|
|
183
|
+
const o = this.api.getDocumentModifier();
|
|
184
|
+
o.modifyHtml(e).setStyle("display", t ? "table-cell" : "none"), this._updateVisibilityAttribute(i.PRODUCT_QUANTITY, t, o);
|
|
185
|
+
const n = `Product quantity visibility changed to ${t ? "visible" : "hidden"}`;
|
|
186
|
+
o.apply(new c(n));
|
|
175
187
|
}
|
|
176
188
|
_onProductPriceChange(t) {
|
|
177
|
-
var
|
|
178
|
-
const e = (
|
|
179
|
-
|
|
189
|
+
var s;
|
|
190
|
+
const e = (s = this.currentNode) == null ? void 0 : s.querySelectorAll(
|
|
191
|
+
`[esd-extension-block-id="${r.PRICE}"]`
|
|
192
|
+
);
|
|
193
|
+
if (!e)
|
|
194
|
+
return;
|
|
195
|
+
this.visibilityState[i.PRODUCT_PRICE] = t;
|
|
196
|
+
const o = this.api.getDocumentModifier();
|
|
197
|
+
e.forEach((l) => {
|
|
198
|
+
o.modifyHtml(l).setStyle("display", t ? "table-cell" : "none");
|
|
199
|
+
}), this._updateVisibilityAttribute(i.PRODUCT_PRICE, t, o), this._updatePriceCellWidthsForVerticalLayout(o);
|
|
200
|
+
const n = `Product price visibility changed to ${t ? "visible" : "hidden"}`;
|
|
201
|
+
o.apply(new c(n));
|
|
180
202
|
}
|
|
181
203
|
_onProductOriginalPriceChange(t) {
|
|
182
|
-
var
|
|
183
|
-
const e = (
|
|
184
|
-
`[esd-extension-block-id="${
|
|
204
|
+
var s;
|
|
205
|
+
const e = (s = this.currentNode) == null ? void 0 : s.querySelectorAll(
|
|
206
|
+
`[esd-extension-block-id="${r.ORIGINAL_PRICE}"]`
|
|
185
207
|
);
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
208
|
+
if (!e)
|
|
209
|
+
return;
|
|
210
|
+
this.visibilityState[i.PRODUCT_ORIGINAL_PRICE] = t;
|
|
211
|
+
const o = this.api.getDocumentModifier();
|
|
212
|
+
e.forEach((l) => {
|
|
213
|
+
o.modifyHtml(l).setStyle("display", t ? "table-cell" : "none");
|
|
214
|
+
}), this._updateVisibilityAttribute(i.PRODUCT_ORIGINAL_PRICE, t, o), this._updatePriceCellWidthsForVerticalLayout(o);
|
|
215
|
+
const n = `Product original price visibility changed to ${t ? "visible" : "hidden"}`;
|
|
216
|
+
o.apply(new c(n));
|
|
189
217
|
}
|
|
190
218
|
/**
|
|
191
219
|
* Updates both price cell widths in vertical layout based on priceOrientation and visibility.
|
|
@@ -195,28 +223,39 @@ class S extends I {
|
|
|
195
223
|
* - When price is hidden, original price cell expands to 100%
|
|
196
224
|
* - When both are visible, they share 50% each
|
|
197
225
|
*/
|
|
198
|
-
_updatePriceCellWidthsForVerticalLayout() {
|
|
199
|
-
var
|
|
200
|
-
|
|
226
|
+
_updatePriceCellWidthsForVerticalLayout(t) {
|
|
227
|
+
var O, y;
|
|
228
|
+
const e = R(this.currentNode);
|
|
229
|
+
if (!((e == null ? void 0 : e.orientation) === h.ORIENTATION.VERTICAL))
|
|
201
230
|
return;
|
|
202
|
-
const
|
|
203
|
-
if (
|
|
204
|
-
const
|
|
205
|
-
|
|
231
|
+
const n = (O = this.currentNode) == null ? void 0 : O.querySelectorAll(".product-price-class"), s = (y = this.currentNode) == null ? void 0 : y.querySelectorAll(".product-original-price-class"), l = (e == null ? void 0 : e.priceOrientation) === "vertical", P = this.visibilityState[i.PRODUCT_PRICE], C = this.visibilityState[i.PRODUCT_ORIGINAL_PRICE], T = t ?? this.api.getDocumentModifier();
|
|
232
|
+
if (n && n.length > 0) {
|
|
233
|
+
const _ = l || !C ? "100%" : "50%";
|
|
234
|
+
n.forEach((u) => {
|
|
235
|
+
T.modifyHtml(u).setStyle("width", _);
|
|
236
|
+
});
|
|
206
237
|
}
|
|
207
|
-
if (
|
|
208
|
-
const
|
|
209
|
-
|
|
238
|
+
if (s && s.length > 0) {
|
|
239
|
+
const _ = l || !P ? "100%" : "50%";
|
|
240
|
+
s.forEach((u) => {
|
|
241
|
+
T.modifyHtml(u).setStyle("width", _);
|
|
242
|
+
});
|
|
210
243
|
}
|
|
211
|
-
T.apply(new
|
|
244
|
+
t || T.apply(new c("Updated price cell widths for vertical layout"));
|
|
212
245
|
}
|
|
213
246
|
_onProductButtonChange(t) {
|
|
214
|
-
var
|
|
215
|
-
const e = (
|
|
216
|
-
|
|
247
|
+
var s;
|
|
248
|
+
const e = (s = this.currentNode) == null ? void 0 : s.querySelector(`[esd-extension-block-id="${r.BUTTON}"]`);
|
|
249
|
+
if (!e)
|
|
250
|
+
return;
|
|
251
|
+
this.visibilityState[i.PRODUCT_BUTTON] = t;
|
|
252
|
+
const o = this.api.getDocumentModifier();
|
|
253
|
+
o.modifyHtml(e).setStyle("display", t ? "table-cell" : "none"), this._updateVisibilityAttribute(i.PRODUCT_BUTTON, t, o);
|
|
254
|
+
const n = `Product button visibility changed to ${t ? "visible" : "hidden"}`;
|
|
255
|
+
o.apply(new c(n));
|
|
217
256
|
}
|
|
218
257
|
}
|
|
219
258
|
export {
|
|
220
|
-
|
|
221
|
-
|
|
259
|
+
g as COMPOSITION_CONTROL_BLOCK_ID,
|
|
260
|
+
M as ItemsBlockCardCompositionControl
|
|
222
261
|
};
|
|
@@ -1,52 +1,40 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
import { ItemsBlockControlId as d } from "../../enums/controlEnums.js";
|
|
6
|
-
import { useItemsBlockStore as L } from "../../store/items-block.js";
|
|
7
|
-
import { getItemsBlockConfig as p } from "../../utils/nodeConfigUtils.js";
|
|
8
|
-
const r = d.IMAGE_LINK, i = {
|
|
1
|
+
import { CommonControl as a } from "../../../common-control.js";
|
|
2
|
+
import { ItemsBlockControlId as i } from "../../enums/controlEnums.js";
|
|
3
|
+
import { getItemsBlockConfig as o } from "../../utils/nodeConfigUtils.js";
|
|
4
|
+
const s = i.IMAGE_LINK, n = {
|
|
9
5
|
LINK: "link"
|
|
10
6
|
};
|
|
11
|
-
class
|
|
12
|
-
constructor() {
|
|
13
|
-
super(...arguments);
|
|
14
|
-
s(this, "store", L());
|
|
15
|
-
}
|
|
7
|
+
class p extends a {
|
|
16
8
|
getId() {
|
|
17
|
-
return
|
|
9
|
+
return s;
|
|
18
10
|
}
|
|
19
11
|
getTemplate() {
|
|
20
12
|
return `
|
|
21
|
-
<div class="container ${
|
|
13
|
+
<div class="container ${s}">
|
|
22
14
|
${this._getLink()}
|
|
23
15
|
</div>
|
|
24
16
|
`;
|
|
25
17
|
}
|
|
26
18
|
onRender() {
|
|
19
|
+
const e = o(this.currentNode);
|
|
27
20
|
this.api.updateValues({
|
|
28
|
-
[
|
|
21
|
+
[n.LINK]: (e == null ? void 0 : e.imageLink) ?? ""
|
|
29
22
|
});
|
|
30
23
|
}
|
|
31
|
-
onTemplateNodeUpdated(
|
|
32
|
-
super.onTemplateNodeUpdated(
|
|
33
|
-
()
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
this.api.updateValues({
|
|
39
|
-
[i.LINK]: this.store.imageLink
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
);
|
|
24
|
+
onTemplateNodeUpdated(e) {
|
|
25
|
+
super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(() => {
|
|
26
|
+
const t = o(this.currentNode);
|
|
27
|
+
this.api.updateValues({
|
|
28
|
+
[n.LINK]: (t == null ? void 0 : t.imageLink) ?? ""
|
|
29
|
+
});
|
|
30
|
+
});
|
|
43
31
|
}
|
|
44
32
|
_getLink() {
|
|
45
33
|
return `
|
|
46
34
|
${this._GuOneColumn([
|
|
47
35
|
this._GuLabel({ text: "Link" }),
|
|
48
36
|
this._GuTextInput({
|
|
49
|
-
name:
|
|
37
|
+
name: n.LINK,
|
|
50
38
|
placeholder: "Enter Link",
|
|
51
39
|
className: "es-100",
|
|
52
40
|
disabled: !0
|
|
@@ -56,6 +44,6 @@ class g extends l {
|
|
|
56
44
|
}
|
|
57
45
|
}
|
|
58
46
|
export {
|
|
59
|
-
|
|
60
|
-
|
|
47
|
+
s as CONTROL_BLOCK_ID,
|
|
48
|
+
p as ImageLinkControl
|
|
61
49
|
};
|
|
@@ -1,70 +1,58 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
import { SETTINGS_ENUMS as I } from "../../enums/settingsEnums.js";
|
|
8
|
-
import { useItemsBlockStore as N } from "../../store/items-block.js";
|
|
9
|
-
import { getItemsBlockConfig as f, setItemsBlockConfig as M } from "../../utils/nodeConfigUtils.js";
|
|
10
|
-
const y = p.NAME_TRIMMING, m = {
|
|
1
|
+
import { ModificationDescription as s, UIElementType as a, UEAttr as T } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
2
|
+
import { CommonControl as d } from "../../../common-control.js";
|
|
3
|
+
import { ItemsBlockControlId as l } from "../../enums/controlEnums.js";
|
|
4
|
+
import { SETTINGS_ENUMS as h } from "../../enums/settingsEnums.js";
|
|
5
|
+
import { getItemsBlockConfig as r, setItemsBlockConfig as c } from "../../utils/nodeConfigUtils.js";
|
|
6
|
+
const I = l.NAME_TRIMMING, n = {
|
|
11
7
|
TRIMMING: "trimming"
|
|
12
8
|
};
|
|
13
|
-
class
|
|
14
|
-
constructor() {
|
|
15
|
-
super(...arguments);
|
|
16
|
-
s(this, "store", N());
|
|
17
|
-
}
|
|
9
|
+
class S extends d {
|
|
18
10
|
getId() {
|
|
19
|
-
return
|
|
11
|
+
return I;
|
|
20
12
|
}
|
|
21
13
|
getTemplate() {
|
|
22
14
|
return `
|
|
23
|
-
<div class="container ${
|
|
15
|
+
<div class="container ${l.NAME_TRIMMING}">
|
|
24
16
|
${this._getTextTrimming()}
|
|
25
17
|
</div>
|
|
26
18
|
`;
|
|
27
19
|
}
|
|
28
20
|
onRender() {
|
|
29
|
-
|
|
30
|
-
|
|
21
|
+
const e = r(this.currentNode);
|
|
22
|
+
this.api.updateValues({ [n.TRIMMING]: (e == null ? void 0 : e.nameTrimming) ?? !0 }), this.api.onValueChanged(n.TRIMMING, (t) => {
|
|
23
|
+
this._onTrimmingChange(t);
|
|
31
24
|
});
|
|
32
25
|
}
|
|
33
26
|
onTemplateNodeUpdated(e) {
|
|
34
|
-
super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(
|
|
35
|
-
()
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
},
|
|
39
|
-
() => {
|
|
40
|
-
this.api.updateValues({ [m.TRIMMING]: this.store.nameTrimming });
|
|
41
|
-
}
|
|
42
|
-
);
|
|
27
|
+
super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(() => {
|
|
28
|
+
const t = r(this.currentNode);
|
|
29
|
+
this.api.updateValues({ [n.TRIMMING]: (t == null ? void 0 : t.nameTrimming) ?? !0 });
|
|
30
|
+
});
|
|
43
31
|
}
|
|
44
32
|
_onTrimmingChange(e) {
|
|
45
|
-
|
|
33
|
+
c(this.currentNode, this.api, { nameTrimming: e }), this.api.updateValues({ [n.TRIMMING]: e }), this._applyTrimmingStyles(e);
|
|
46
34
|
}
|
|
47
35
|
_applyTrimmingStyles(e) {
|
|
48
|
-
var
|
|
49
|
-
const
|
|
50
|
-
if (!
|
|
36
|
+
var m;
|
|
37
|
+
const t = (m = this.currentNode) == null ? void 0 : m.querySelector("p > a");
|
|
38
|
+
if (!t)
|
|
51
39
|
return;
|
|
52
|
-
const
|
|
53
|
-
|
|
40
|
+
const i = r(this.currentNode), p = e !== void 0 ? e : (i == null ? void 0 : i.nameTrimming) ?? !0, o = (i == null ? void 0 : i.orientation) === h.ORIENTATION.VERTICAL;
|
|
41
|
+
p ? this.api.getDocumentModifier().modifyHtml(t).setStyle("white-space", "nowrap").setStyle("overflow", "hidden").setStyle("text-overflow", "ellipsis").setStyle("max-width", o ? "130px" : "520px").apply(new s("Text Trimming Enabled")) : this.api.getDocumentModifier().modifyHtml(t).removeStyle("white-space").removeStyle("overflow").removeStyle("text-overflow").removeStyle("max-width").setStyle("max-width", o ? "130px" : "520px").apply(new s("Text Trimming Disabled"));
|
|
54
42
|
}
|
|
55
43
|
_getTextTrimming() {
|
|
56
44
|
return `
|
|
57
45
|
<div class="display-flex align-items-center justify-content-between">
|
|
58
|
-
<${
|
|
59
|
-
${
|
|
46
|
+
<${a.LABEL}
|
|
47
|
+
${T.LABEL.text}="${this.api.translate("Text Trimming")}"
|
|
60
48
|
>
|
|
61
|
-
</${
|
|
62
|
-
${this._GuToggle(
|
|
49
|
+
</${a.LABEL}>
|
|
50
|
+
${this._GuToggle(n.TRIMMING)}
|
|
63
51
|
</div>
|
|
64
52
|
`;
|
|
65
53
|
}
|
|
66
54
|
}
|
|
67
55
|
export {
|
|
68
|
-
|
|
69
|
-
|
|
56
|
+
I as CONTROL_BLOCK_ID,
|
|
57
|
+
S as NameTrimmingControl
|
|
70
58
|
};
|
|
@@ -1,62 +1,50 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
import { ItemsBlockControlId as h } from "../../enums/controlEnums.js";
|
|
8
|
-
import { useItemsBlockStore as f } from "../../store/items-block.js";
|
|
9
|
-
import { getItemsBlockConfig as E, setItemsBlockConfig as O } from "../../utils/nodeConfigUtils.js";
|
|
10
|
-
const b = h.PRICE_CURRENCY_LOCATION, a = {
|
|
1
|
+
import { currencyLocationMaps as u } from "../../../../../enums/extensions/recommendationBlock.js";
|
|
2
|
+
import { UEAttr as R, ModificationDescription as L } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
3
|
+
import { CommonControl as N } from "../../../common-control.js";
|
|
4
|
+
import { ItemsBlockControlId as m } from "../../enums/controlEnums.js";
|
|
5
|
+
import { getItemsBlockConfig as C, setItemsBlockConfig as I, escapeReplacement as T } from "../../utils/nodeConfigUtils.js";
|
|
6
|
+
const E = m.PRICE_CURRENCY_LOCATION, c = {
|
|
11
7
|
CURRENCY_LOCATION: "currencyLocation"
|
|
12
8
|
};
|
|
13
|
-
class
|
|
14
|
-
constructor() {
|
|
15
|
-
super(...arguments);
|
|
16
|
-
p(this, "store", f());
|
|
17
|
-
}
|
|
9
|
+
class A extends N {
|
|
18
10
|
getId() {
|
|
19
|
-
return
|
|
11
|
+
return E;
|
|
20
12
|
}
|
|
21
13
|
getTemplate() {
|
|
22
14
|
return `
|
|
23
|
-
<div class="container ${
|
|
15
|
+
<div class="container ${m.PRICE_CURRENCY_LOCATION}">
|
|
24
16
|
${this._getCurrencyLocation()}
|
|
25
17
|
</div>
|
|
26
18
|
`;
|
|
27
19
|
}
|
|
28
20
|
onRender() {
|
|
29
|
-
|
|
30
|
-
|
|
21
|
+
const e = C(this.currentNode);
|
|
22
|
+
this.api.setUIEAttribute(c.CURRENCY_LOCATION, R.SELECTPICKER.items, u), this.api.updateValues({ [c.CURRENCY_LOCATION]: (e == null ? void 0 : e.priceCurrencyLocation) ?? "0" }), this.api.onValueChanged(c.CURRENCY_LOCATION, (t) => {
|
|
23
|
+
this._onCurrencyLocationChange(t);
|
|
31
24
|
});
|
|
32
25
|
}
|
|
33
26
|
onTemplateNodeUpdated(e) {
|
|
34
|
-
super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(
|
|
35
|
-
()
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
},
|
|
39
|
-
() => {
|
|
40
|
-
this.api.updateValues({ [a.CURRENCY_LOCATION]: this.store.currencyLocation });
|
|
41
|
-
}
|
|
42
|
-
);
|
|
27
|
+
super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(() => {
|
|
28
|
+
const t = C(this.currentNode);
|
|
29
|
+
this.api.updateValues({ [c.CURRENCY_LOCATION]: (t == null ? void 0 : t.priceCurrencyLocation) ?? "0" });
|
|
30
|
+
});
|
|
43
31
|
}
|
|
44
32
|
_onCurrencyLocationChange(e) {
|
|
45
|
-
if (console.debug("Currency location changed to: ", e),
|
|
33
|
+
if (console.debug("Currency location changed to: ", e), I(this.currentNode, this.api, { priceCurrencyLocation: e }), !this.currentNode)
|
|
46
34
|
return;
|
|
47
35
|
const t = this._getPriceBlocks();
|
|
48
36
|
if (!t || t.length === 0)
|
|
49
37
|
return;
|
|
50
|
-
const r = e || "0",
|
|
51
|
-
t.forEach((
|
|
52
|
-
const s = this._getParagraph(
|
|
38
|
+
const r = C(this.currentNode), n = e || "0", o = (r == null ? void 0 : r.priceCurrencySymbol) ?? "", i = this.api.getDocumentModifier();
|
|
39
|
+
t.forEach((a) => {
|
|
40
|
+
const s = this._getParagraph(a);
|
|
53
41
|
if (!s)
|
|
54
42
|
return;
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
43
|
+
const h = s.getInnerHTML().trim() || "", l = s.getInnerText().trim() || "", p = (o == null ? void 0 : o.trim()) || "", d = this._removeCurrencySymbol(l, p), g = this._detectSymbolInText(l) || p, _ = this._buildPriceContent(d, g, n), y = h.replace(l, T(_));
|
|
44
|
+
i.modifyHtml(s).setInnerHtml(y);
|
|
45
|
+
}), i.apply(new L(
|
|
46
|
+
`Updated currency location to ${n === "1" ? "after" : "before"}`
|
|
47
|
+
));
|
|
60
48
|
}
|
|
61
49
|
_getPriceBlocks() {
|
|
62
50
|
var e, t;
|
|
@@ -72,13 +60,13 @@ class B extends T {
|
|
|
72
60
|
const r = e || "";
|
|
73
61
|
let n = r;
|
|
74
62
|
if (t) {
|
|
75
|
-
const
|
|
76
|
-
n = r.replace(
|
|
63
|
+
const o = new RegExp(`\\s*${this._escapeRegex(t)}\\s*`);
|
|
64
|
+
n = r.replace(o, "").trim();
|
|
77
65
|
} else {
|
|
78
|
-
const
|
|
79
|
-
if (
|
|
80
|
-
const
|
|
81
|
-
n = r.replace(
|
|
66
|
+
const o = r.match(/([^0-9.,\s]+)/);
|
|
67
|
+
if (o && o[1]) {
|
|
68
|
+
const i = o[1].trim(), a = new RegExp(`\\s*${this._escapeRegex(i)}\\s*`);
|
|
69
|
+
n = r.replace(a, "").trim();
|
|
82
70
|
}
|
|
83
71
|
}
|
|
84
72
|
return n;
|
|
@@ -95,15 +83,15 @@ class B extends T {
|
|
|
95
83
|
${this._GuTwoColumns([
|
|
96
84
|
this._GuLabel({ text: "Currency Location" }),
|
|
97
85
|
this._GuSelect({
|
|
98
|
-
name:
|
|
86
|
+
name: c.CURRENCY_LOCATION,
|
|
99
87
|
placeholder: "",
|
|
100
|
-
options:
|
|
88
|
+
options: u
|
|
101
89
|
})
|
|
102
90
|
])}
|
|
103
91
|
`;
|
|
104
92
|
}
|
|
105
93
|
}
|
|
106
94
|
export {
|
|
107
|
-
|
|
108
|
-
|
|
95
|
+
E as CONTROL_BLOCK_ID,
|
|
96
|
+
A as PriceCurrencyLocationControl
|
|
109
97
|
};
|