@useinsider/guido 3.7.2-beta.1489585 → 3.7.2-beta.2220fb0

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 (62) hide show
  1. package/dist/@types/config/schemas.js +70 -66
  2. package/dist/composables/usePreviewMode.js +15 -14
  3. package/dist/composables/useRecommendationPreview.js +100 -0
  4. package/dist/config/compiler/recommendationCompilerRules.js +1 -1
  5. package/dist/config/compiler/utils/recommendationCompilerUtils.js +92 -78
  6. package/dist/config/migrator/recommendation/htmlBuilder.js +59 -58
  7. package/dist/config/migrator/recommendation/settingsMapper.js +38 -33
  8. package/dist/extensions/Blocks/Recommendation/block.js +60 -41
  9. package/dist/extensions/Blocks/Recommendation/canvasPreview.css.js +16 -0
  10. package/dist/extensions/Blocks/Recommendation/constants/defaultConfig.js +41 -32
  11. package/dist/extensions/Blocks/Recommendation/constants/selectors.js +10 -11
  12. package/dist/extensions/Blocks/Recommendation/controls/cardComposition/index.js +369 -288
  13. package/dist/extensions/Blocks/Recommendation/controls/main/index.js +96 -82
  14. package/dist/extensions/Blocks/Recommendation/controls/main/layoutOrientation.js +39 -30
  15. package/dist/extensions/Blocks/Recommendation/controls/main/pricePlacement.js +133 -0
  16. package/dist/extensions/Blocks/Recommendation/controls/main/productLayout.js +34 -28
  17. package/dist/extensions/Blocks/Recommendation/controls/main/utils.js +338 -288
  18. package/dist/extensions/Blocks/Recommendation/extension.js +30 -30
  19. package/dist/extensions/Blocks/Recommendation/iconsRegistry.js +21 -7
  20. package/dist/extensions/Blocks/Recommendation/recommendation.css.js +64 -4
  21. package/dist/extensions/Blocks/Recommendation/settingsPanel.js +2 -3
  22. package/dist/extensions/Blocks/Recommendation/store/recommendation.js +7 -5
  23. package/dist/extensions/Blocks/Recommendation/templates/grid/elementRenderer.js +217 -155
  24. package/dist/extensions/Blocks/Recommendation/templates/grid/template.js +31 -56
  25. package/dist/extensions/Blocks/Recommendation/templates/index.js +10 -29
  26. package/dist/extensions/Blocks/Recommendation/templates/list/elementRenderer.js +135 -145
  27. package/dist/extensions/Blocks/Recommendation/templates/list/template.js +22 -43
  28. package/dist/extensions/Blocks/Recommendation/templates/utils.js +96 -109
  29. package/dist/extensions/Blocks/Recommendation/utils/preserveTextStyles.js +19 -24
  30. package/dist/extensions/Blocks/Recommendation/utils/tagName.js +22 -30
  31. package/dist/extensions/Blocks/controlFactories.js +133 -159
  32. package/dist/src/@types/config/schemas.d.ts +16 -0
  33. package/dist/src/composables/useConfig.d.ts +4 -0
  34. package/dist/src/composables/useRecommendationPreview.d.ts +10 -0
  35. package/dist/src/config/migrator/recommendation/settingsMapper.d.ts +1 -1
  36. package/dist/src/extensions/Blocks/Items/controls/index.d.ts +1 -1
  37. package/dist/src/extensions/Blocks/Recommendation/block.d.ts +10 -0
  38. package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts +1 -1
  39. package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts +0 -2
  40. package/dist/src/extensions/Blocks/Recommendation/controls/button/index.d.ts +1 -1
  41. package/dist/src/extensions/Blocks/Recommendation/controls/cardComposition/index.d.ts +29 -3
  42. package/dist/src/extensions/Blocks/Recommendation/controls/index.d.ts +1 -1
  43. package/dist/src/extensions/Blocks/Recommendation/controls/main/index.d.ts +3 -1
  44. package/dist/src/extensions/Blocks/Recommendation/controls/main/layoutOrientation.d.ts +1 -2
  45. package/dist/src/extensions/Blocks/Recommendation/controls/main/pricePlacement.d.ts +59 -0
  46. package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts +47 -20
  47. package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts +2 -0
  48. package/dist/src/extensions/Blocks/Recommendation/templates/grid/elementRenderer.d.ts +16 -0
  49. package/dist/src/extensions/Blocks/Recommendation/templates/grid/template.d.ts +4 -4
  50. package/dist/src/extensions/Blocks/Recommendation/templates/index.d.ts +1 -1
  51. package/dist/src/extensions/Blocks/Recommendation/templates/list/elementRenderer.d.ts +13 -0
  52. package/dist/src/extensions/Blocks/Recommendation/templates/list/template.d.ts +3 -3
  53. package/dist/src/extensions/Blocks/Recommendation/templates/utils.d.ts +47 -163
  54. package/dist/src/extensions/Blocks/Recommendation/types/nodeConfig.d.ts +15 -0
  55. package/dist/src/extensions/Blocks/Recommendation/utils/preserveTextStyles.d.ts +0 -15
  56. package/dist/src/extensions/Blocks/Recommendation/utils/stylePreserver.d.ts +113 -0
  57. package/dist/src/extensions/Blocks/Recommendation/utils/tagName.d.ts +9 -29
  58. package/dist/src/extensions/Blocks/controlFactories.d.ts +1 -11
  59. package/dist/src/stores/config.d.ts +36 -0
  60. package/package.json +1 -1
  61. package/dist/extensions/Blocks/Recommendation/utils/captureStyleTemplates.js +0 -216
  62. package/dist/src/extensions/Blocks/Recommendation/utils/captureStyleTemplates.d.ts +0 -78
@@ -1,173 +1,215 @@
1
- import { RecommendationBlockId as b } from "../../constants/blockIds.js";
2
- import { ATTR_PRODUCT_ATTR as k, ATTR_PRODUCT_BUTTON as h, CSS_CLASS_RECO_BUTTON as f, ATTR_PRODUCT_OMNIBUS_DISCOUNT as R, ATTR_PRODUCT_OMNIBUS_PRICE as O, ATTR_PRODUCT_OLD_PRICE as U, ATTR_PRODUCT_PRICE as v, ATTR_PRODUCT_NAME as E, ATTR_PRODUCT_IMAGE as I } from "../../constants/selectors.js";
3
- import { useRecommendationExtensionStore as L } from "../../store/recommendation.js";
4
- import { formatPrice as D } from "../../utils/priceFormatter.js";
5
- import { CUSTOM_CELL_HTML as N, renderStyledParagraph as T, cellBgStyleAttr as $, DEFAULT_BUTTON_BORDER_STYLE as M, DEFAULT_BUTTON_ANCHOR_STYLE as z, renderButtonLabel as F, resolveButtonBorderClass as G, resolvePStyle as P, resolveOmnibusText as x, DEFAULT_IMG_STYLE as j, sanitizeImageUrl as w, resolveSegmentBgStyle as Y } from "../utils.js";
6
- const d = "0 5px", t = "attribute-cell";
7
- function Q(r, e = d) {
8
- return `<td class="${t}" style="padding: ${e};" width="${r}%"></td>`;
1
+ import { RecommendationBlockId as l } from "../../constants/blockIds.js";
2
+ import { ATTR_PRODUCT_ATTR as u, CSS_CLASS_RECO_BUTTON as g, ATTR_PRODUCT_BUTTON as h, ATTR_PRODUCT_OMNIBUS_DISCOUNT as $, ATTR_PRODUCT_OMNIBUS_PRICE as y, ATTR_PRODUCT_OLD_PRICE as m, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_NAME as x, ATTR_PRODUCT_IMAGE as f } from "../../constants/selectors.js";
3
+ import { formatProductPrice as o, isSamePrice as b, CUSTOM_CELL_HTML as _, getCurrentCurrencyConfig as C, sanitizeImageUrl as R } from "../utils.js";
4
+ const s = "0 5px", d = "attribute-cell";
5
+ function U(e, t = s) {
6
+ return `<td class="${d}" style="padding: ${t};" width="${e}%"></td>`;
9
7
  }
10
- function u(r, e = "") {
11
- const l = Y(e, r);
12
- return `<table class="product-card-segment" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"${l ? ` style="${l}"` : ""}>`;
13
- }
14
- function A() {
15
- const r = L(), { currencySettings: e } = r.recommendationConfigs;
16
- return {
17
- code: e.value,
18
- symbol: e.symbol,
19
- alignment: e.alignment === "0" ? "before" : "after",
20
- decimalCount: parseInt(e.decimalCount) || 2,
21
- decimalSeparator: e.decimalSeparator,
22
- thousandSeparator: e.thousandSeparator
23
- };
24
- }
25
- function m(r, e = "price") {
26
- const l = A(), a = r[e], c = (a == null ? void 0 : a[l.code]) ?? Object.values(a ?? {})[0] ?? 0;
27
- return D({
28
- price: c,
29
- currency: l
30
- });
8
+ function I(e, t = !0) {
9
+ const n = `<s><strong>${o(e, "original_price")}</strong></s>`, r = (a) => `<td
10
+ class="esd-block-text product-price ${a}"
11
+ align="center"
12
+ valign="middle"
13
+ esd-extension-block-id="${l.PRICE}">
14
+ <p contenteditable="false" style="font-size: 16px; color: #333333;">
15
+ <strong>${o(e, "price")}</strong>
16
+ </p>
17
+ </td>`, i = (a) => `<td
18
+ class="esd-block-text product-old-price ${a}"
19
+ align="center"
20
+ valign="middle"
21
+ data-same-price="${b(e)}"
22
+ esd-extension-block-id="${l.OLD_PRICE}">
23
+ <p contenteditable="false" style="font-size: 14px; color: #999999;">
24
+ ${n}
25
+ </p>
26
+ </td>`, p = t ? i("es-p15l es-p5r") : r("es-p15l es-p5r"), c = t ? r("es-p5l es-p15r") : i("es-p5l es-p15r");
27
+ return `
28
+ <td class="${d}" style="padding: ${s}; height: 100%;" valign="top">
29
+ <table
30
+ class="product-card-segment"
31
+ width="100%"
32
+ height="100%"
33
+ cellpadding="0"
34
+ cellspacing="0"
35
+ border="0">
36
+ <tbody>
37
+ <tr valign="top">
38
+ <td align="center">
39
+ <table cellpadding="0" cellspacing="0" border="0" align="center" style="margin: 0 auto;">
40
+ <tbody>
41
+ <tr valign="middle">
42
+ ${p}
43
+ ${c}
44
+ </tr>
45
+ </tbody>
46
+ </table>
47
+ </td>
48
+ </tr>
49
+ </tbody>
50
+ </table>
51
+ </td>
52
+ `;
31
53
  }
32
- const W = {
33
- [I]: (r, e) => {
34
- var c;
35
- const l = (e == null ? void 0 : e.cellPadding) ?? d, a = ((c = e == null ? void 0 : e.styleTemplate) == null ? void 0 : c.imgStyle) ?? j;
36
- return `
37
- <td class="${t}" style="padding: ${l}; height: 100%;" valign="top">
38
- ${u(e == null ? void 0 : e.cardBackgroundColor)}
54
+ function P(e) {
55
+ const t = `<s><strong>${o(e, "original_price")}</strong></s>`;
56
+ return `
57
+ <td class="${d}" style="padding: ${s}; height: 100%;" valign="top">
58
+ <table
59
+ class="product-card-segment"
60
+ width="100%"
61
+ height="100%"
62
+ cellpadding="0"
63
+ cellspacing="0"
64
+ border="0">
39
65
  <tbody>
40
66
  <tr valign="top">
41
67
  <td
42
- class="esd-block-image product-image"
68
+ class="esd-block-text product-old-price es-p15l es-p15r"
43
69
  align="center"
44
- esd-extension-block-id="${b.IMAGE}">
45
- <a target="_blank" href="${r.url}" class="${f}">
46
- <img
47
- src="${w(r.image_url)}"
48
- alt="${r.name}"
49
- style="${a}"
50
- class="adapt-img">
51
- </a>
70
+ data-same-price="${b(e)}"
71
+ esd-extension-block-id="${l.OLD_PRICE}">
72
+ <p contenteditable="false" style="font-size: 14px; color: #999999;">
73
+ ${t}
74
+ </p>
52
75
  </td>
53
76
  </tr>
54
77
  </tbody>
55
78
  </table>
56
79
  </td>
57
80
  `;
58
- },
59
- [E]: (r, e) => {
60
- const l = (e == null ? void 0 : e.cellPadding) ?? d, a = T(
61
- r.name,
62
- { pStyle: "font-size: 16px; color: #333333;", openTags: "<strong>", closeTags: "</strong>" },
63
- e == null ? void 0 : e.styleTemplate
64
- );
65
- return `
66
- <td class="${t}" style="padding: ${l}; height: 100%;" valign="middle">
67
- ${u(e == null ? void 0 : e.cardBackgroundColor, "table-layout: fixed;")}
81
+ }
82
+ const E = {
83
+ [f]: (e) => `
84
+ <td class="${d}" style="padding: ${s}; height: 100%;" valign="top">
85
+ <table
86
+ class="product-card-segment"
87
+ width="100%"
88
+ height="100%"
89
+ cellpadding="0"
90
+ cellspacing="0"
91
+ border="0">
68
92
  <tbody>
69
93
  <tr valign="top">
70
94
  <td
71
- class="esd-block-text product-name ${(e == null ? void 0 : e.cellClasses) ?? "es-p10t es-p10b es-p15l es-p15r"}"
72
- align="${(e == null ? void 0 : e.cellAlignment) ?? "center"}"
73
- esd-extension-block-id="${b.NAME}"${$(e == null ? void 0 : e.cellBackgroundColor)}>
74
- ${a}
95
+ class="esd-block-image product-image"
96
+ align="center"
97
+ esd-extension-block-id="${l.IMAGE}">
98
+ <a target="_blank" href="${e.url}" class="${g}">
99
+ <img
100
+ src="${R(e.image_url)}"
101
+ alt="${e.name}"
102
+ style="display: block; max-width: 100%; height: auto;"
103
+ class="adapt-img">
104
+ </a>
75
105
  </td>
76
106
  </tr>
77
107
  </tbody>
78
108
  </table>
79
109
  </td>
80
- `;
81
- },
82
- [v]: (r, e) => {
83
- const l = (e == null ? void 0 : e.cellPadding) ?? d, a = T(
84
- m(r, "price"),
85
- { pStyle: "font-size: 16px; color: #333333;", openTags: "<strong>", closeTags: "</strong>" },
86
- e == null ? void 0 : e.styleTemplate
87
- );
88
- return `
89
- <td class="${t}" style="padding: ${l}; height: 100%;" valign="top">
90
- ${u(e == null ? void 0 : e.cardBackgroundColor)}
110
+ `,
111
+ [x]: (e) => `
112
+ <td class="${d}" style="padding: ${s}; height: 100%;" valign="middle">
113
+ <table
114
+ class="product-card-segment"
115
+ width="100%"
116
+ height="100%"
117
+ cellpadding="0"
118
+ cellspacing="0"
119
+ border="0"
120
+ style="table-layout: fixed;">
91
121
  <tbody>
92
122
  <tr valign="top">
93
123
  <td
94
- class="esd-block-text product-price ${(e == null ? void 0 : e.cellClasses) ?? "es-p15l es-p15r"}"
95
- align="${(e == null ? void 0 : e.cellAlignment) ?? "center"}"
96
- esd-extension-block-id="${b.PRICE}"${$(e == null ? void 0 : e.cellBackgroundColor)}>
97
- ${a}
124
+ class="esd-block-text product-name es-p10t es-p10b es-p15l es-p15r"
125
+ align="center"
126
+ esd-extension-block-id="${l.NAME}">
127
+ <p contenteditable="false" style="font-size: 16px; color: #333333;">
128
+ <strong>${e.name}</strong>
129
+ </p>
98
130
  </td>
99
131
  </tr>
100
132
  </tbody>
101
133
  </table>
102
134
  </td>
103
- `;
104
- },
105
- [U]: (r, e) => {
106
- const l = (e == null ? void 0 : e.cellPadding) ?? d, a = T(
107
- m(r, "original_price"),
108
- { pStyle: "font-size: 14px; color: #999999;", openTags: "<s><strong>", closeTags: "</strong></s>" },
109
- e == null ? void 0 : e.styleTemplate
110
- );
111
- return `
112
- <td class="${t}" style="padding: ${l}; height: 100%;" valign="top">
113
- ${u(e == null ? void 0 : e.cardBackgroundColor)}
135
+ `,
136
+ [T]: (e) => `
137
+ <td class="${d}" style="padding: ${s}; height: 100%;" valign="top">
138
+ <table
139
+ class="product-card-segment"
140
+ width="100%"
141
+ height="100%"
142
+ cellpadding="0"
143
+ cellspacing="0"
144
+ border="0">
114
145
  <tbody>
115
146
  <tr valign="top">
116
147
  <td
117
- class="esd-block-text product-old-price ${(e == null ? void 0 : e.cellClasses) ?? "es-p15l es-p15r"}"
118
- align="${(e == null ? void 0 : e.cellAlignment) ?? "center"}"
119
- esd-extension-block-id="${b.OLD_PRICE}"${$(e == null ? void 0 : e.cellBackgroundColor)}>
120
- ${a}
148
+ class="esd-block-text product-price es-p15l es-p15r"
149
+ align="center"
150
+ esd-extension-block-id="${l.PRICE}">
151
+ <p contenteditable="false" style="font-size: 16px; color: #333333;">
152
+ <strong>${o(e, "price")}</strong>
153
+ </p>
121
154
  </td>
122
155
  </tr>
123
156
  </tbody>
124
157
  </table>
125
158
  </td>
126
- `;
127
- },
128
- [O]: (r, e) => {
129
- const l = (e == null ? void 0 : e.cellPadding) ?? d, a = P("font-size: 12px; color: #666666;", e == null ? void 0 : e.styleTemplate), { before: c, after: g } = x(e == null ? void 0 : e.omnibusText, "Lowest 30-day price: ");
130
- return `
131
- <td class="${t}" style="padding: ${l}; height: 100%;" valign="top">
132
- ${u(e == null ? void 0 : e.cardBackgroundColor)}
159
+ `,
160
+ [m]: (e) => P(e),
161
+ [y]: (e) => `
162
+ <td class="${d}" style="padding: ${s}; height: 100%;" valign="top">
163
+ <table
164
+ class="product-card-segment"
165
+ width="100%"
166
+ height="100%"
167
+ cellpadding="0"
168
+ cellspacing="0"
169
+ border="0">
133
170
  <tbody>
134
171
  <tr valign="top">
135
172
  <td
136
- class="esd-block-text product-omnibus-price ${(e == null ? void 0 : e.cellClasses) ?? "es-p15l es-p15r"}"
137
- align="${(e == null ? void 0 : e.cellAlignment) ?? "center"}"
138
- data-text-before="${c}"
139
- data-text-after="${g}"
140
- esd-extension-block-id="${b.OMNIBUS_PRICE}"${$(e == null ? void 0 : e.cellBackgroundColor)}>
141
- <p contenteditable="false" style="${a}">
142
- <span class="omnibus-text-before">${c}</span>
143
- <span class="omnibus-price-value">${m(r, "original_price")}</span>
144
- <span class="omnibus-text-after">${g}</span>
173
+ class="esd-block-text product-omnibus-price es-p15l es-p15r"
174
+ align="center"
175
+ data-text-before="Lowest 30-day price: "
176
+ data-text-after=""
177
+ esd-extension-block-id="${l.OMNIBUS_PRICE}">
178
+ <p contenteditable="false" style="font-size: 12px; color: #666666;">
179
+ <span class="omnibus-text-before">Lowest 30-day price: </span>
180
+ <span class="omnibus-price-value">${o(e, "original_price")}</span>
181
+ <span class="omnibus-text-after"></span>
145
182
  </p>
146
183
  </td>
147
184
  </tr>
148
185
  </tbody>
149
186
  </table>
150
187
  </td>
151
- `;
152
- },
153
- [R]: (r, e) => {
154
- var s, S;
155
- const l = (e == null ? void 0 : e.cellPadding) ?? d, a = P("font-size: 12px; color: #666666;", e == null ? void 0 : e.styleTemplate), c = A(), g = ((s = r.original_price) == null ? void 0 : s[c.code]) ?? Object.values(r.original_price ?? {})[0] ?? 0, y = ((S = r.price) == null ? void 0 : S[c.code]) ?? Object.values(r.price ?? {})[0] ?? 0, C = g > 0 ? Math.round((g - y) / g * 100) : 0, B = C > 0 ? `-${C}%` : "0%", { before: _, after: n } = x(e == null ? void 0 : e.omnibusText);
188
+ `,
189
+ [$]: (e) => {
190
+ var c, a;
191
+ const t = C(), n = ((c = e.original_price) == null ? void 0 : c[t.code]) ?? Object.values(e.original_price ?? {})[0] ?? 0, r = ((a = e.price) == null ? void 0 : a[t.code]) ?? Object.values(e.price ?? {})[0] ?? 0, i = n > 0 ? Math.round((n - r) / n * 100) : 0, p = i > 0 ? `-${i}%` : "0%";
156
192
  return `
157
- <td class="${t}" style="padding: ${l}; height: 100%;" valign="top">
158
- ${u(e == null ? void 0 : e.cardBackgroundColor)}
193
+ <td class="${d}" style="padding: ${s}; height: 100%;" valign="top">
194
+ <table
195
+ class="product-card-segment"
196
+ width="100%"
197
+ height="100%"
198
+ cellpadding="0"
199
+ cellspacing="0"
200
+ border="0">
159
201
  <tbody>
160
202
  <tr valign="top">
161
203
  <td
162
- class="esd-block-text product-omnibus-discount ${(e == null ? void 0 : e.cellClasses) ?? "es-p15l es-p15r"}"
163
- align="${(e == null ? void 0 : e.cellAlignment) ?? "center"}"
164
- data-text-before="${_}"
165
- data-text-after="${n}"
166
- esd-extension-block-id="${b.OMNIBUS_DISCOUNT}"${$(e == null ? void 0 : e.cellBackgroundColor)}>
167
- <p contenteditable="false" style="${a}">
168
- <span class="omnibus-text-before">${_}</span>
169
- <span class="omnibus-discount-value">${B}</span>
170
- <span class="omnibus-text-after">${n}</span>
204
+ class="esd-block-text product-omnibus-discount es-p15l es-p15r"
205
+ align="center"
206
+ data-text-before=""
207
+ data-text-after=""
208
+ esd-extension-block-id="${l.OMNIBUS_DISCOUNT}">
209
+ <p contenteditable="false" style="font-size: 12px; color: #666666;">
210
+ <span class="omnibus-text-before"></span>
211
+ <span class="omnibus-discount-value">${p}</span>
212
+ <span class="omnibus-text-after"></span>
171
213
  </p>
172
214
  </td>
173
215
  </tr>
@@ -176,24 +218,43 @@ const W = {
176
218
  </td>
177
219
  `;
178
220
  },
179
- [h]: (r, e) => {
180
- const l = (e == null ? void 0 : e.cellPadding) ?? d, a = e == null ? void 0 : e.styleTemplate, c = (a == null ? void 0 : a.buttonBorderStyle) ?? M, g = (a == null ? void 0 : a.buttonAnchorStyle) ?? z, y = F((a == null ? void 0 : a.buttonText) ?? "Buy", a);
181
- return `
182
- <td class="${t}" style="padding: ${l}; height: 100%;" valign="top">
183
- ${u(e == null ? void 0 : e.cardBackgroundColor)}
221
+ [h]: () => `
222
+ <td class="${d}" style="padding: ${s}; height: 100%;" valign="top">
223
+ <table
224
+ class="product-card-segment"
225
+ width="100%"
226
+ height="100%"
227
+ cellpadding="0"
228
+ cellspacing="0"
229
+ border="0">
184
230
  <tbody>
185
231
  <tr valign="top">
186
232
  <td
187
- class="esd-block-button product-button ${(e == null ? void 0 : e.cellClasses) ?? "es-p10t es-p10b"}"
188
- align="${(e == null ? void 0 : e.cellAlignment) ?? "center"}"
189
- esd-extension-block-id="${b.BUTTON}">
190
- <span class="${G(a)}" style="${c}">
233
+ class="esd-block-button product-button es-p10t es-p10b"
234
+ align="center"
235
+ esd-extension-block-id="${l.BUTTON}">
236
+ <span
237
+ class="es-button-border"
238
+ style="
239
+ border-width: 1px;
240
+ background: rgb(217, 234, 211);
241
+ border-color: rgb(106, 168, 79);
242
+ ">
191
243
  <a
192
244
  href="#"
193
- class="es-button ${f}"
245
+ class="es-button ${g}"
194
246
  target="_blank"
195
- style="${g}">
196
- ${y}
247
+ style="
248
+ color: rgb(56, 118, 29);
249
+ background: rgb(217, 234, 211);
250
+ font-family: arial, 'helvetica neue', helvetica, sans-serif;
251
+ font-size: 16px;
252
+ font-weight: normal;
253
+ line-height: 120%;
254
+ mso-border-alt: 10px solid rgb(217, 234, 211);
255
+ mso-padding-alt: 0;
256
+ ">
257
+ Buy
197
258
  </a>
198
259
  </span>
199
260
  </td>
@@ -201,8 +262,7 @@ const W = {
201
262
  </tbody>
202
263
  </table>
203
264
  </td>
204
- `;
205
- },
265
+ `,
206
266
  /**
207
267
  * Custom attribute cell template — same structure as built-in entries
208
268
  * (outer td → inner product-card-segment table).
@@ -210,34 +270,36 @@ const W = {
210
270
  * @param productAttrValue - Resolved product-attr value (e.g., "brand" for default, "product_attribute.rating_star" for custom)
211
271
  * @param content - Display content for the cell
212
272
  */
213
- [N]: (r, e, l) => {
214
- const a = (l == null ? void 0 : l.cellPadding) ?? d, c = T(
215
- e,
216
- { pStyle: "font-size: 12px; color: #666666;", openTags: "", closeTags: "" },
217
- l == null ? void 0 : l.styleTemplate
218
- );
219
- return `
220
- <td class="${t}" style="padding: ${a}; height: 100%;" valign="middle">
221
- ${u(l == null ? void 0 : l.cardBackgroundColor, "table-layout: fixed;")}
273
+ [_]: (e, t) => `
274
+ <td class="${d}" style="padding: ${s}; height: 100%;" valign="middle">
275
+ <table
276
+ class="product-card-segment"
277
+ width="100%"
278
+ height="100%"
279
+ cellpadding="0"
280
+ cellspacing="0"
281
+ border="0"
282
+ style="table-layout: fixed;">
222
283
  <tbody>
223
284
  <tr valign="top">
224
285
  <td
225
- ${k}="${r}"
226
- class="esd-block-text product-custom-attribute ${(l == null ? void 0 : l.cellClasses) ?? "es-p0t es-p0b es-p15l es-p15r"}"
227
- align="${(l == null ? void 0 : l.cellAlignment) ?? "center"}"
228
- esd-extension-block-id="${b.CUSTOM_ATTRIBUTE}"${$(l == null ? void 0 : l.cellBackgroundColor)}>
229
- ${c}
286
+ ${u}="${e}"
287
+ class="esd-block-text product-custom-attribute es-p0t es-p0b es-p15l es-p15r"
288
+ align="center"
289
+ esd-extension-block-id="${l.CUSTOM_ATTRIBUTE}">
290
+ <p contenteditable="false" style="font-size: 12px; color: #666666;">${t}</p>
230
291
  </td>
231
292
  </tr>
232
293
  </tbody>
233
294
  </table>
234
295
  </td>
235
- `;
236
- }
296
+ `
237
297
  };
238
298
  export {
239
- t as ATTRIBUTE_CELL_CLASS,
240
- d as DEFAULT_CELL_PADDING,
241
- Q as buildFillerCell,
242
- W as gridElementRenderer
299
+ d as ATTRIBUTE_CELL_CLASS,
300
+ s as DEFAULT_CELL_PADDING,
301
+ U as buildFillerCell,
302
+ E as gridElementRenderer,
303
+ P as renderGridOldPriceCell,
304
+ I as renderInlineGridPriceCell
243
305
  };
@@ -1,7 +1,7 @@
1
- import { DEFAULT_PRODUCTS_PER_ROW as f } from "../../constants/layout.js";
2
- import { getDefaultProducts as A, DEFAULTS as C, createBlockTemplate as g, buildSpacer as P, DEFAULT_CARD_COMPOSITION as O, buildElementRenderer as U, DEFAULT_CARD_VISIBILITY as Y } from "../utils.js";
3
- import { DEFAULT_CELL_PADDING as h, buildFillerCell as B, gridElementRenderer as F } from "./elementRenderer.js";
4
- const W = `
1
+ import { DEFAULT_PRODUCTS_PER_ROW as E } from "../../constants/layout.js";
2
+ import { getDefaultProducts as L, DEFAULTS as S, createBlockTemplate as _, DEFAULT_CARD_COMPOSITION as w, spacer as C, buildElementRenderer as O, resolveInlinePriceOrder as A, DEFAULT_CARD_VISIBILITY as D } from "../utils.js";
3
+ import { renderInlineGridPriceCell as P, buildFillerCell as g, gridElementRenderer as h } from "./elementRenderer.js";
4
+ const U = `
5
5
  <tr class="recommendation-product-row">
6
6
  <td>
7
7
  <table
@@ -18,7 +18,7 @@ const W = `
18
18
  </table>
19
19
  </td>
20
20
  </tr>
21
- `, k = `
21
+ `, Y = `
22
22
  <tr
23
23
  class="recommendation-attribute-row"
24
24
  data-attribute-type="{-{-ATTR_TYPE-}-}"
@@ -27,64 +27,39 @@ const W = `
27
27
  {-{-CELLS-}-}
28
28
  </tr>
29
29
  `;
30
- function H(e, r, c, o = O, n = {}, p = {}) {
31
- const {
32
- cellPadding: i = h,
33
- styleTemplates: s,
34
- cardBackgroundColor: T,
35
- cellBackgroundColors: l,
36
- cellAlignments: d,
37
- cellClasses: u,
38
- omnibusTexts: a,
39
- visibility: R
40
- } = p, m = (100 / r).toFixed(2), I = r - e.length, S = I > 0 ? B(m, i).repeat(I) : "", L = U(c, o, n);
41
- return o.filter((t) => L[t]).map((t) => {
42
- const E = (R == null ? void 0 : R[t]) ?? Y[t] ?? !0, b = E ? "" : 'style="display: none;"', _ = {
43
- cellPadding: i,
44
- cardBackgroundColor: T,
45
- cellBackgroundColor: l == null ? void 0 : l[t],
46
- cellAlignment: d == null ? void 0 : d[t],
47
- cellClasses: u == null ? void 0 : u[t],
48
- omnibusText: a == null ? void 0 : a[t],
49
- styleTemplate: s == null ? void 0 : s[t]
50
- }, w = e.map((D) => L[t](D, _).replace("<td", `<td width="${m}%"`)).join("");
51
- return k.replace("{-{-ATTR_TYPE-}-}", t).replace("{-{-VISIBILITY-}-}", E ? "1" : "0").replace("{-{-DISPLAY_STYLE-}-}", b).replace("{-{-CELLS-}-}", w + S);
30
+ function y(e, t, o, r = w, i = {}, p = {}) {
31
+ const { priceInline: s = !1 } = p, u = (100 / t).toFixed(2), n = t - e.length, T = n > 0 ? g(u).repeat(n) : "", d = O(o, r, i), c = A(r), R = s ? r.filter((l) => l !== c.skip) : r, I = (l, a) => s && l === c.anchor ? P(a, c.originalFirst) : d[l](a);
32
+ return R.filter((l) => d[l]).map((l) => {
33
+ const a = D[l] ?? !0, m = a ? "" : 'style="display: none;"', b = e.map((f) => I(l, f).replace("<td", `<td width="${u}%"`)).join("");
34
+ return Y.replace("{-{-ATTR_TYPE-}-}", l).replace("{-{-VISIBILITY-}-}", a ? "1" : "0").replace("{-{-DISPLAY_STYLE-}-}", m).replace("{-{-CELLS-}-}", b + T);
52
35
  }).join("");
53
36
  }
54
- function x(e, r, c, o, n = {}, p = {}) {
55
- const i = [];
56
- for (let l = 0; l < e.length; l += r)
57
- i.push(e.slice(l, l + r));
58
- const s = P(p.rowSpacingPx);
59
- return i.map((l, d) => {
60
- const u = H(
61
- l,
62
- r,
63
- c,
64
- o,
37
+ function B(e, t, o, r, i = {}, p = {}) {
38
+ const s = [];
39
+ for (let n = 0; n < e.length; n += t)
40
+ s.push(e.slice(n, n + t));
41
+ return s.map((n, T) => {
42
+ const d = y(
65
43
  n,
44
+ t,
45
+ o,
46
+ r,
47
+ i,
66
48
  p
67
- ), a = W.replace("{-{-ATTRIBUTE_ROWS-}-}", u);
68
- return d > 0 ? s + a : a;
49
+ ), c = U.replace("{-{-ATTRIBUTE_ROWS-}-}", d);
50
+ return T > 0 ? C + c : c;
69
51
  }).join("");
70
52
  }
71
- function V(e, r, c, o = {}, n = {}) {
72
- return x(
73
- e,
74
- r,
75
- F,
76
- c,
77
- o,
78
- n
79
- );
53
+ function F(e, t, o, r = {}, i = {}) {
54
+ return B(e, t, h, o, r, i);
80
55
  }
81
- function $(e) {
82
- const r = e ? `ins-recommendation-v3-block-${e}` : void 0, c = g("grid", r), o = A(), n = V(o, f);
83
- return c.replace("{-{-TITLE-}-}", C.TITLE).replace("{-{-PRODUCT_ROWS-}-}", n).replace("{-{-MOBILE_PRODUCT_ROWS-}-}", "");
56
+ function j(e) {
57
+ const t = e ? `ins-recommendation-v3-block-${e}` : void 0, o = _("grid", t), r = L(), i = F(r, E);
58
+ return o.replace("{-{-TITLE-}-}", S.TITLE).replace("{-{-PRODUCT_ROWS-}-}", i).replace("{-{-MOBILE_PRODUCT_ROWS-}-}", "");
84
59
  }
85
60
  export {
86
- $ as getDefaultTemplate,
87
- H as prepareGridAttributeRows,
88
- x as prepareGridProductRows,
89
- V as prepareProductRows
61
+ j as getDefaultTemplate,
62
+ y as prepareGridAttributeRows,
63
+ B as prepareGridProductRows,
64
+ F as prepareProductRows
90
65
  };
@@ -1,33 +1,14 @@
1
- import { DEFAULT_PRODUCTS_PER_ROW as f } from "../constants/layout.js";
2
- import { prepareProductRows as w } from "./grid/template.js";
3
- import { prepareProductRows as g } from "./list/template.js";
4
- function L(o, t, r = {}) {
5
- const {
6
- cellPadding: s,
7
- rowSpacingPx: i,
8
- styleTemplates: c,
9
- cardBackgroundColor: l,
10
- cellBackgroundColors: p,
11
- cellAlignments: n,
12
- cellClasses: a,
13
- omnibusTexts: d,
14
- visibility: m
15
- } = r, e = {
16
- cellPadding: s,
17
- rowSpacingPx: i,
18
- styleTemplates: c,
19
- cardBackgroundColor: l,
20
- cellBackgroundColors: p,
21
- cellAlignments: n,
22
- cellClasses: a,
23
- omnibusTexts: d,
24
- visibility: m
25
- };
1
+ import { DEFAULT_PRODUCTS_PER_ROW as s } from "../constants/layout.js";
2
+ import { prepareProductRows as m } from "./grid/template.js";
3
+ import { prepareProductRows as n } from "./list/template.js";
4
+ import "../store/recommendation.js";
5
+ function P(o, t, r = {}) {
6
+ const e = { priceInline: r.priceInline };
26
7
  if (t === "list")
27
- return g(o, r.composition, r.filterList, e);
28
- const { productsPerRow: u = f, composition: P, filterList: R } = r;
29
- return w(o, u, P, R, e);
8
+ return n(o, r.composition, r.filterList, e);
9
+ const { productsPerRow: i = s, composition: p, filterList: c } = r;
10
+ return m(o, i, p, c, e);
30
11
  }
31
12
  export {
32
- L as prepareProductRows
13
+ P as prepareProductRows
33
14
  };