@useinsider/guido 3.8.0 → 3.8.1-beta.0fbf78a

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 (54) hide show
  1. package/dist/composables/useHtmlValidator.js +180 -133
  2. package/dist/config/compiler/utils/recommendationCompilerUtils.js +64 -69
  3. package/dist/config/compiler/utils/recommendationIgnoreUtils.js +15 -0
  4. package/dist/config/migrator/itemsBlockMigrator.js +154 -115
  5. package/dist/config/migrator/recommendation/extractors.js +44 -22
  6. package/dist/config/migrator/recommendation/htmlBuilder.js +175 -169
  7. package/dist/config/migrator/recommendationMigrator.js +30 -31
  8. package/dist/extensions/Blocks/Items/template.js +26 -27
  9. package/dist/extensions/Blocks/Recommendation/constants/selectors.js +22 -15
  10. package/dist/extensions/Blocks/Recommendation/controls/cardComposition/index.js +55 -41
  11. package/dist/extensions/Blocks/Recommendation/controls/main/index.js +42 -43
  12. package/dist/extensions/Blocks/Recommendation/controls/main/layoutOrientation.js +48 -45
  13. package/dist/extensions/Blocks/Recommendation/controls/main/productCount.js +3 -2
  14. package/dist/extensions/Blocks/Recommendation/controls/main/productLayout.js +64 -60
  15. package/dist/extensions/Blocks/Recommendation/controls/main/utils.js +294 -335
  16. package/dist/extensions/Blocks/Recommendation/controls/syncInfoMessage.js +7 -6
  17. package/dist/extensions/Blocks/Recommendation/extension.js +7 -5
  18. package/dist/extensions/Blocks/Recommendation/settingsPanel.js +4 -2
  19. package/dist/extensions/Blocks/Recommendation/store/recommendation.js +3 -2
  20. package/dist/extensions/Blocks/Recommendation/templates/grid/elementRenderer.js +142 -173
  21. package/dist/extensions/Blocks/Recommendation/templates/grid/template.js +56 -29
  22. package/dist/extensions/Blocks/Recommendation/templates/index.js +30 -8
  23. package/dist/extensions/Blocks/Recommendation/templates/list/elementRenderer.js +132 -105
  24. package/dist/extensions/Blocks/Recommendation/templates/list/template.js +44 -23
  25. package/dist/extensions/Blocks/Recommendation/templates/utils.js +112 -64
  26. package/dist/extensions/Blocks/Recommendation/utils/captureStyleTemplates.js +219 -0
  27. package/dist/extensions/Blocks/Recommendation/utils/preserveTextStyles.js +24 -19
  28. package/dist/extensions/Blocks/Recommendation/utils/tagName.js +30 -22
  29. package/dist/extensions/Blocks/Unsubscribe/block.js +1 -1
  30. package/dist/extensions/Blocks/controlFactories.js +159 -133
  31. package/dist/src/composables/useHtmlValidator.d.ts +27 -0
  32. package/dist/src/composables/useHtmlValidator.test.d.ts +1 -0
  33. package/dist/src/config/compiler/utils/recommendationIgnoreUtils.d.ts +17 -0
  34. package/dist/src/config/compiler/utils/recommendationIgnoreUtils.test.d.ts +1 -0
  35. package/dist/src/config/migrator/recommendation/extractors.d.ts +15 -0
  36. package/dist/src/config/migrator/recommendation/htmlBuilder.d.ts +8 -0
  37. package/dist/src/extensions/Blocks/Items/controls/index.d.ts +1 -1
  38. package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts +1 -1
  39. package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts +23 -0
  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 +7 -0
  42. package/dist/src/extensions/Blocks/Recommendation/controls/main/layoutOrientation.d.ts +7 -1
  43. package/dist/src/extensions/Blocks/Recommendation/controls/main/productLayout.d.ts +6 -0
  44. package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts +29 -47
  45. package/dist/src/extensions/Blocks/Recommendation/templates/grid/template.d.ts +4 -4
  46. package/dist/src/extensions/Blocks/Recommendation/templates/index.d.ts +1 -1
  47. package/dist/src/extensions/Blocks/Recommendation/templates/list/template.d.ts +3 -2
  48. package/dist/src/extensions/Blocks/Recommendation/templates/utils.d.ts +165 -11
  49. package/dist/src/extensions/Blocks/Recommendation/utils/captureStyleTemplates.d.ts +78 -0
  50. package/dist/src/extensions/Blocks/Recommendation/utils/preserveTextStyles.d.ts +15 -0
  51. package/dist/src/extensions/Blocks/Recommendation/utils/tagName.d.ts +29 -9
  52. package/dist/src/extensions/Blocks/controlFactories.d.ts +11 -1
  53. package/package.json +1 -1
  54. package/dist/src/extensions/Blocks/Recommendation/utils/stylePreserver.d.ts +0 -113
@@ -1,14 +1,14 @@
1
1
  import { BlockId as f } from "../../enums/block.js";
2
- import { useTemplateStore as u } from "../../stores/template.js";
3
- import { mapComposition as b } from "./recommendation/compositionMapper.js";
4
- import { extractTitleText as y, extractCardBgColor as C } from "./recommendation/extractors.js";
5
- import { buildBlockHtml as v } from "./recommendation/htmlBuilder.js";
6
- import { parseRecommendationId as w, parseLegacyConfig as R } from "./recommendation/parseLegacyConfig.js";
7
- import { mapSettings as S } from "./recommendation/settingsMapper.js";
2
+ import { useTemplateStore as b } from "../../stores/template.js";
3
+ import { mapComposition as y } from "./recommendation/compositionMapper.js";
4
+ import { extractCurrencyFromBlock as v, extractTitleText as C, extractCardBgColor as M, isPartnerManagedBlock as S } from "./recommendation/extractors.js";
5
+ import { buildBlockHtml as w } from "./recommendation/htmlBuilder.js";
6
+ import { parseRecommendationId as x, parseLegacyConfig as R } from "./recommendation/parseLegacyConfig.js";
7
+ import { mapSettings as T } from "./recommendation/settingsMapper.js";
8
8
  const h = 'td[esd-dev-product-config][class*="ins-recommendation-v3-block-"]:not(.recommendation-block-v2), td.product-block[esd-handler-name*="EmailRecommendationV3"][esd-dev-product-config]:not(.recommendation-block-v2)';
9
- function x(i, t, c) {
10
- var s;
11
- const o = w(t);
9
+ function B(i, t, a) {
10
+ var d;
11
+ const o = x(t);
12
12
  if (o === null)
13
13
  return console.warn(
14
14
  "[RecommendationMigrator] Skipping block — missing/invalid `ins-recommendation-v3-campaign-id`"
@@ -18,30 +18,29 @@ function x(i, t, c) {
18
18
  return console.warn(
19
19
  `[RecommendationMigrator] Aborting block id=${o} — \`esd-dev-product-config\` missing or unable to be parsed`
20
20
  ), !1;
21
- const n = c[String(o)];
22
- if (!n)
23
- return console.warn(
24
- `[RecommendationMigrator] Aborting block id=${o} — recommendationConfigs entry missing in Guido Config`
25
- ), !1;
26
- const a = S(n, r, o), e = b((s = r.composition) == null ? void 0 : s.variables), d = y(t), l = C(t), g = {
27
- ...a,
21
+ const n = a[String(o)] ?? {
22
+ currencySettings: v(t)
23
+ }, c = T(n, r, o), e = y((d = r.composition) == null ? void 0 : d.variables), l = C(t), g = M(t), p = {
24
+ ...c,
28
25
  composition: e.composition,
29
26
  visibility: e.visibility,
30
27
  textTrimming: e.anyTextTrimming
31
- }, p = `
28
+ }, m = S(t), u = `
32
29
  <table>
33
30
  <tbody>
34
31
  <tr>
35
32
  <td class="esd-structure" align="left">
36
33
  <table width="100%" cellpadding="0" cellspacing="0">
37
34
  <tbody>
38
- <tr>${v({
39
- nodeConfig: g,
35
+ <tr>${w({
36
+ nodeConfig: p,
40
37
  composition: e,
41
- cardBg: l,
42
- titleText: d,
38
+ cardBg: g,
39
+ titleText: l,
43
40
  legacyId: t.getAttribute("id") ?? void 0,
44
- legacyBgColor: t.getAttribute("bgcolor") ?? void 0
41
+ legacyBgColor: t.getAttribute("bgcolor") ?? void 0,
42
+ preserveInnerHtml: m ? t.innerHTML : void 0,
43
+ skipCompile: m
45
44
  })}</tr>
46
45
  </tbody>
47
46
  </table>
@@ -49,15 +48,15 @@ function x(i, t, c) {
49
48
  </tr>
50
49
  </tbody>
51
50
  </table>
52
- `, m = i.parseFromString(p, "text/html").querySelector("td.esd-structure");
53
- return !m || !t.parentNode ? (console.warn(
51
+ `, s = i.parseFromString(u, "text/html").querySelector("td.esd-structure");
52
+ return !s || !t.parentNode ? (console.warn(
54
53
  `[RecommendationMigrator] Aborting block id=${o} — failed to construct new HTML element`
55
- ), !1) : (t.parentNode.replaceChild(m, t), !0);
54
+ ), !1) : (t.parentNode.replaceChild(s, t), !0);
56
55
  }
57
- function I(i, t = {}) {
58
- const c = new DOMParser(), o = c.parseFromString(i, "text/html"), r = Array.from(o.querySelectorAll(h));
56
+ function q(i, t = {}) {
57
+ const a = new DOMParser(), o = a.parseFromString(i, "text/html"), r = Array.from(o.querySelectorAll(h));
59
58
  try {
60
- u().$patch((e) => {
59
+ b().$patch((e) => {
61
60
  e.migrations = {
62
61
  ...e.migrations,
63
62
  [f.Recommendation]: r.length
@@ -68,14 +67,14 @@ function I(i, t = {}) {
68
67
  if (r.length === 0)
69
68
  return i;
70
69
  let n = 0;
71
- return r.forEach((a) => {
70
+ return r.forEach((c) => {
72
71
  try {
73
- x(c, a, t) && (n += 1);
72
+ B(a, c, t) && (n += 1);
74
73
  } catch (e) {
75
74
  console.error("[RecommendationMigrator] Unexpected error migrating block:", e);
76
75
  }
77
76
  }), n > 0 && console.info(`[RecommendationMigrator] Migrated ${n} legacy Recommendation block(s)`), o.documentElement.outerHTML;
78
77
  }
79
78
  export {
80
- I as migrateRecommendation
79
+ q as migrateRecommendation
81
80
  };
@@ -1,9 +1,9 @@
1
1
  import { BlockType as b, BlockAttr as N } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
2
  import { ItemsBlockId as O } from "./enums/controlEnums.js";
3
- import { productPairs as A, templateFirstLine as C } from "./enums/productEnums.js";
4
- import { ItemInCartOptions as Y, SETTINGS_ENUMS as x, DefaultConfigValues as D } from "./enums/settingsEnums.js";
5
- import j from "./layouts/horizontal.html.js";
6
- import q from "./layouts/vertical.html.js";
3
+ import { productPairs as A, templateFirstLine as Q } from "./enums/productEnums.js";
4
+ import { ItemInCartOptions as C, SETTINGS_ENUMS as x, DefaultConfigValues as D } from "./enums/settingsEnums.js";
5
+ import Y from "./layouts/horizontal.html.js";
6
+ import j from "./layouts/vertical.html.js";
7
7
  import { escapeReplacement as V } from "./utils/nodeConfigUtils.js";
8
8
  let [g] = A.PAIRS_FOR_EXTENSION.imageSrc.CART_ITEMS.DEFAULT, [L] = A.PAIRS_FOR_EXTENSION.name.CART_ITEMS.DEFAULT, [m] = A.PAIRS_FOR_EXTENSION.price.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [S] = A.PAIRS_FOR_EXTENSION.originalPrice.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [M] = A.PAIRS_FOR_EXTENSION.quantity.CART_ITEMS.DEFAULT;
9
9
  const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCase().startsWith(e.toLowerCase())).join("; ").replace(/;\s*$/, ""), F = (s) => U(s, "text-align"), w = (s, e) => {
@@ -12,7 +12,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
12
12
  }, v = (s, e, r) => new RegExp(`(${e}\\s*:\\s*)[^;]+`, "gi").test(s) ? s.replace(
13
13
  new RegExp(`(${e}\\s*:\\s*)[^;]+`, "gi"),
14
14
  `$1${r}`
15
- ) : s, Z = (s, e, r, a) => {
15
+ ) : s, q = (s, e, r, a) => {
16
16
  const i = r || D.productImageHeight, n = (a == null ? void 0 : a.imageVisible) === !1 ? "display: none; " : "";
17
17
  return `
18
18
  <td class="esd-block-image document-node-component default-block-component selectable ng-star-inserted"
@@ -35,7 +35,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
35
35
  </a>
36
36
  </td>
37
37
  `;
38
- }, J = (s, e) => `
38
+ }, Z = (s, e) => `
39
39
  <${b.BLOCK_IMAGE}
40
40
  ${N.BLOCK_IMAGE.src}="${g}"
41
41
  ${N.BLOCK_IMAGE.alt}="${L}"
@@ -48,7 +48,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
48
48
  data-type="${s}"
49
49
  data-number="${e}"
50
50
  />
51
- `, tt = (s, e, r, a, i) => {
51
+ `, J = (s, e, r, a, i) => {
52
52
  const o = `
53
53
  text-decoration:none;
54
54
  font-size: inherit;
@@ -129,7 +129,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
129
129
  </p>
130
130
  </${b.BLOCK_TEXT}>
131
131
  `;
132
- }, et = (s, e, r, a, i, n, o, c, l, $) => {
132
+ }, tt = (s, e, r, a, i, n, o, c, l, $) => {
133
133
  let t = m;
134
134
  if (a && a.trim()) {
135
135
  const T = `${a.trim()}`;
@@ -180,7 +180,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
180
180
  </p>
181
181
  </${b.BLOCK_TEXT}>
182
182
  `;
183
- }, at = (s, e, r, a, i, n, o = !0, c, l, $) => {
183
+ }, et = (s, e, r, a, i, n, o = !0, c, l, $) => {
184
184
  let t = S;
185
185
  if (a && a.trim()) {
186
186
  const T = `${a.trim()}`;
@@ -234,7 +234,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
234
234
  </p>
235
235
  </${b.BLOCK_TEXT}>
236
236
  `;
237
- }, st = (s = !0, e, r) => {
237
+ }, at = (s = !0, e, r) => {
238
238
  const a = s ? "" : 'style="display: none;"';
239
239
  if (e) {
240
240
  const i = "font-size: 14px;", n = w(r || "", "text-align") || "center", o = F(r || i);
@@ -270,7 +270,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
270
270
  </p>
271
271
  </${b.BLOCK_TEXT}>
272
272
  `;
273
- }, lt = (s, e, r = "Buy", a, i, n = !0, o = !0) => {
273
+ }, st = (s, e, r = "Buy", a, i, n = !0, o = !0) => {
274
274
  if (a) {
275
275
  const c = w(i || "", "background") || w(i || "", "background-color"), l = c ? `border-width: 0px; background: ${c};` : "border-width: 0px;", $ = n ? "es-fw" : "es-il", t = (i || "").replace("border-width: 0;", "");
276
276
  return `
@@ -305,7 +305,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
305
305
  >${r}
306
306
  </${b.BLOCK_BUTTON}>
307
307
  `;
308
- }, rt = (s, e, r, a = !0, i = !0) => {
308
+ }, lt = (s, e, r, a = !0, i = !0) => {
309
309
  const n = e === x.ORIENTATION.VERTICAL, o = r === "horizontal";
310
310
  if (n) {
311
311
  const c = !o, l = c || !i ? "100%" : "50%", $ = c || !a ? "100%" : "50%";
@@ -325,16 +325,12 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
325
325
  /<td\s+[^>]*class="[^"]*vertical-price[^"]*"[^>]*>/gi,
326
326
  (c) => c.replace(/display:\s*none;?/gi, "display: table-cell;")
327
327
  );
328
- }, it = (s) => s ? `<td align="center"
328
+ }, rt = (s) => s ? `<td align="center"
329
329
  esd-extension-block-id="items-block" width="560"
330
- data-number="4"
331
- class="ins-product-td items-block items-block-v2 esd-items-block esd-extension-block esd-container-frame">` : C, z = (s, e, r, a, i, n, o, c, l, $, t, E, _, u = "horizontal", P, p, R, d) => {
332
- const h = `${`data-type="${e}" data-number="${r}"`} data-orientation="${a}"`, y = s.replace(
333
- /<td([^>]*class="[^"]*ins-product-td[^"]*"[^>]*)>/,
334
- `<td$1 ${h}>`
335
- ), X = l == null ? void 0 : l["data-product_image_control_image-height"], G = n ? Z(e, r, X, t) : J(e, r), K = (t == null ? void 0 : t.buttonLabel) || "Buy", B = (t == null ? void 0 : t.buttonFullWidth) !== void 0 ? t.buttonFullWidth : !0, W = e === x.ITEMS_TYPE.BROWSED_ITEMS ? !1 : t == null ? void 0 : t.quantityControlEnabled, Q = (t == null ? void 0 : t.buttonVisible) !== void 0 ? t.buttonVisible : (l == null ? void 0 : l["data-product_button_control_enabled"]) !== "false", k = (t == null ? void 0 : t.priceVisible) !== void 0 ? t.priceVisible : (l == null ? void 0 : l["data-product_price_control_enabled"]) !== "false", f = (t == null ? void 0 : t.originalPriceVisible) !== void 0 ? t.originalPriceVisible : (l == null ? void 0 : l["data-product_original_price_control_enabled"]) !== "false", H = y.replace("{-{-TEMPLATE_FIRST_LINE-}-}", it(n)).replace("{-{-PRODUCT_IMAGE-}-}", G).replace("{-{-PRODUCT_NAME-}-}", tt(e, n, a, E, t)).replaceAll(
330
+ class="ins-product-td items-block items-block-v2 esd-items-block esd-extension-block esd-container-frame">` : Q, z = (s, e, r, a, i, n, o, c, l, $, t, E, _, u = "horizontal", P, p, R, d) => {
331
+ const h = `${`data-type="${e}" data-number="${r}"`} data-orientation="${a}"`, y = l == null ? void 0 : l["data-product_image_control_image-height"], X = n ? q(e, r, y, t) : Z(e, r), G = (t == null ? void 0 : t.buttonLabel) || "Buy", K = (t == null ? void 0 : t.buttonFullWidth) !== void 0 ? t.buttonFullWidth : !0, B = e === x.ITEMS_TYPE.BROWSED_ITEMS ? !1 : t == null ? void 0 : t.quantityControlEnabled, W = (t == null ? void 0 : t.buttonVisible) !== void 0 ? t.buttonVisible : (l == null ? void 0 : l["data-product_button_control_enabled"]) !== "false", k = (t == null ? void 0 : t.priceVisible) !== void 0 ? t.priceVisible : (l == null ? void 0 : l["data-product_price_control_enabled"]) !== "false", f = (t == null ? void 0 : t.originalPriceVisible) !== void 0 ? t.originalPriceVisible : (l == null ? void 0 : l["data-product_original_price_control_enabled"]) !== "false", H = s.replace("{-{-TEMPLATE_FIRST_LINE-}-}", rt(n)).replace("{-{-PRODUCT_IMAGE-}-}", X).replace("{-{-PRODUCT_NAME-}-}", J(e, n, a, E, t)).replaceAll(
336
332
  "{-{-PRODUCT_PRICE-}-}",
337
- V(et(
333
+ V(tt(
338
334
  e,
339
335
  r,
340
336
  i,
@@ -348,7 +344,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
348
344
  ))
349
345
  ).replaceAll(
350
346
  "{-{-PRODUCT_ORIGINAL_PRICE-}-}",
351
- V(at(
347
+ V(et(
352
348
  e,
353
349
  r,
354
350
  i,
@@ -360,11 +356,14 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
360
356
  d,
361
357
  a
362
358
  ))
363
- ).replace("{-{-PRODUCT_QUANTITY-}-}", st(W, n, R)).replace(
359
+ ).replace("{-{-PRODUCT_QUANTITY-}-}", at(B, n, R)).replace(
364
360
  "{-{-PRODUCT_BUTTON-}-}",
365
- lt(e, r, K, n, _, B, Q)
361
+ st(e, r, G, n, _, K, W)
362
+ ).replace(
363
+ /<td([^>]*class="[^"]*ins-product-td[^"]*"[^>]*)>/,
364
+ `<td$1 ${h}>`
366
365
  );
367
- return rt(
366
+ return lt(
368
367
  H,
369
368
  a,
370
369
  u,
@@ -389,7 +388,7 @@ function Tt({
389
388
  quantityStyles: u,
390
389
  priceOrientation: P
391
390
  }) {
392
- const p = Y[e].findIndex((y) => y.value === r);
391
+ const p = C[e].findIndex((y) => y.value === r);
393
392
  let R = "1";
394
393
  if (p >= 0)
395
394
  R = String(p + 1);
@@ -403,7 +402,7 @@ function Tt({
403
402
  d ? (m = o ? T.DEFAULT_SINGLE_PRICE_FORMATTED : T.DEFAULT_SINGLE_PRICE, S = o ? I.DEFAULT_SINGLE_PRICE_FORMATTED : I.DEFAULT_SINGLE_PRICE) : (m = o ? T.DEFAULT_PRICE_FORMATTED : T.DEFAULT_PRICE, S = o ? I.DEFAULT_PRICE_FORMATTED : I.DEFAULT_PRICE), M = A.PAIRS_FOR_EXTENSION.quantity[e].DEFAULT;
404
403
  const h = P || (l == null ? void 0 : l.priceOrientation) || "horizontal";
405
404
  return s === x.ORIENTATION.VERTICAL ? z(
406
- q,
405
+ j,
407
406
  e,
408
407
  R,
409
408
  s,
@@ -423,7 +422,7 @@ function Tt({
423
422
  u,
424
423
  d
425
424
  ) : z(
426
- j,
425
+ Y,
427
426
  e,
428
427
  R,
429
428
  s,
@@ -1,11 +1,11 @@
1
- const T = ".recommendation-block-v2", c = ".ins-recommendation-product-container", o = ".ins-recommendation-desktop-container", n = ".ins-recommendation-mobile-container", t = ".ins-recommendation-mobile-row", r = "reco-v3-button", _ = {
1
+ const c = ".recommendation-block-v2", t = ".ins-recommendation-product-container", o = ".ins-recommendation-desktop-container", n = ".ins-recommendation-mobile-container", _ = ".ins-recommendation-mobile-row", r = "reco-v3-button", R = "ins-skip-compile", e = {
2
2
  CURRENCY: "currency",
3
3
  SYMBOL: "currency-symbol",
4
4
  ALIGNMENT: "currency-alignment",
5
5
  THOUSAND_SEPARATOR: "currency-thousand-separator",
6
6
  DECIMAL_SEPARATOR: "currency-decimal-separator",
7
7
  DECIMAL_COUNT: "currency-decimal-count"
8
- }, R = "productImage", e = "productName", O = "productPrice", s = "productOldPrice", i = "productOmnibusPrice", C = "productOmnibusDiscount", E = "productButton", A = "customAttr:", u = "data-custom-attributes", m = "product-attr", a = /* @__PURE__ */ new Set([
8
+ }, O = "productImage", s = "productName", E = "productPrice", i = "productOldPrice", A = "productOmnibusPrice", C = "productOmnibusDiscount", u = "productButton", I = "customAttr:", S = "data-custom-attributes", m = "product-attr", U = "product_attribute.", T = /* @__PURE__ */ new Set([
9
9
  "name",
10
10
  // productName
11
11
  "price",
@@ -20,24 +20,31 @@ const T = ".recommendation-block-v2", c = ".ins-recommendation-product-container
20
20
  // productOmnibusPrice
21
21
  "omnibus_discount"
22
22
  // productOmnibusDiscount
23
+ ]), a = /* @__PURE__ */ new Set([
24
+ ...T,
25
+ "currency",
26
+ "discount"
23
27
  ]);
24
28
  export {
25
- A as ATTR_CUSTOM_PREFIX,
26
- u as ATTR_DATA_CUSTOM_ATTRIBUTES,
29
+ I as ATTR_CUSTOM_PREFIX,
30
+ S as ATTR_DATA_CUSTOM_ATTRIBUTES,
27
31
  m as ATTR_PRODUCT_ATTR,
28
- E as ATTR_PRODUCT_BUTTON,
29
- R as ATTR_PRODUCT_IMAGE,
30
- e as ATTR_PRODUCT_NAME,
31
- s as ATTR_PRODUCT_OLD_PRICE,
32
+ u as ATTR_PRODUCT_BUTTON,
33
+ O as ATTR_PRODUCT_IMAGE,
34
+ s as ATTR_PRODUCT_NAME,
35
+ i as ATTR_PRODUCT_OLD_PRICE,
32
36
  C as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
33
- i as ATTR_PRODUCT_OMNIBUS_PRICE,
34
- O as ATTR_PRODUCT_PRICE,
35
- T as BLOCK_ROOT_SELECTOR,
36
- a as BUILT_IN_DEFAULT_ATTRIBUTES,
37
- c as CONTAINER_SELECTOR,
37
+ A as ATTR_PRODUCT_OMNIBUS_PRICE,
38
+ E as ATTR_PRODUCT_PRICE,
39
+ c as BLOCK_ROOT_SELECTOR,
40
+ T as BUILT_IN_DEFAULT_ATTRIBUTES,
41
+ t as CONTAINER_SELECTOR,
38
42
  r as CSS_CLASS_RECO_BUTTON,
39
- _ as CURRENCY_ATTR,
43
+ R as CSS_CLASS_SKIP_COMPILE,
44
+ e as CURRENCY_ATTR,
40
45
  o as DESKTOP_CONTAINER_SELECTOR,
41
46
  n as MOBILE_CONTAINER_SELECTOR,
42
- t as MOBILE_ROW_SELECTOR
47
+ _ as MOBILE_ROW_SELECTOR,
48
+ U as PRODUCT_ATTRIBUTE_PREFIX,
49
+ a as RECOMMENDATION_VARIABLE_BUILTIN_ATTRIBUTES
43
50
  };
@@ -1,9 +1,9 @@
1
1
  var J = Object.defineProperty;
2
2
  var Q = (p, _, t) => _ in p ? J(p, _, { enumerable: !0, configurable: !0, writable: !0, value: t }) : p[_] = t;
3
- var S = (p, _, t) => Q(p, typeof _ != "symbol" ? _ + "" : _, t);
3
+ var T = (p, _, t) => Q(p, typeof _ != "symbol" ? _ + "" : _, t);
4
4
  import { UIElementType as f, UEAttr as I, ModificationDescription as A } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
5
  import { CommonControl as Z } from "../../../common-control.js";
6
- import { ATTR_PRODUCT_IMAGE as D, ATTR_PRODUCT_NAME as tt, ATTR_PRODUCT_PRICE as et, ATTR_PRODUCT_OLD_PRICE as rt, ATTR_PRODUCT_OMNIBUS_PRICE as ot, ATTR_PRODUCT_OMNIBUS_DISCOUNT as st, ATTR_PRODUCT_BUTTON as U, ATTR_DATA_CUSTOM_ATTRIBUTES as q, ATTR_CUSTOM_PREFIX as m, BUILT_IN_DEFAULT_ATTRIBUTES as it } from "../../constants/selectors.js";
6
+ import { ATTR_PRODUCT_IMAGE as L, ATTR_PRODUCT_NAME as tt, ATTR_PRODUCT_PRICE as et, ATTR_PRODUCT_OLD_PRICE as rt, ATTR_PRODUCT_OMNIBUS_PRICE as ot, ATTR_PRODUCT_OMNIBUS_DISCOUNT as st, ATTR_PRODUCT_BUTTON as B, ATTR_DATA_CUSTOM_ATTRIBUTES as q, ATTR_CUSTOM_PREFIX as m, BUILT_IN_DEFAULT_ATTRIBUTES as it } from "../../constants/selectors.js";
7
7
  import { DEFAULT_COMPOSITION as P, DEFAULT_VISIBILITY as F } from "../../constants/defaultConfig.js";
8
8
  import { RecommendationConfigService as nt } from "../../services/configService.js";
9
9
  import { useRecommendationExtensionStore as lt } from "../../store/recommendation.js";
@@ -11,32 +11,32 @@ import { ATTRIBUTE_CELL_CLASS as at, gridElementRenderer as ct, DEFAULT_CELL_PAD
11
11
  import { listElementRenderer as mt } from "../../templates/list/elementRenderer.js";
12
12
  import { toDisplayName as ht, isDefaultAttribute as pt, toDisplayableAttributeValue as _t, buildElementRenderer as w } from "../../templates/utils.js";
13
13
  import { getTableDisplayValue as ft } from "../../utils/tagName.js";
14
- import { getCurrentLayout as gt } from "../main/utils.js";
15
- const bt = "ui-elements-recommendation-card-composition", C = ".recommendation-attribute-row", L = ".product-card-wrapper > tbody", M = ".product-info-cell > table > tbody", V = "data-card-composition", y = "data-attribute-type", v = "data-visibility", x = {
14
+ import { isPartnerManagedBlock as gt, getCurrentLayout as bt } from "../main/utils.js";
15
+ const yt = "ui-elements-recommendation-card-composition", S = ".recommendation-attribute-row", N = ".product-card-wrapper > tbody", M = ".product-info-cell > table > tbody", V = "data-card-composition", y = "data-attribute-type", v = "data-visibility", x = {
16
16
  ADD_ATTRIBUTE: "addAttribute"
17
17
  }, g = 5, E = "reorderIcon_", h = [
18
- { key: D, label: "Product Image" },
18
+ { key: L, label: "Product Image" },
19
19
  { key: tt, label: "Product Name" },
20
20
  { key: et, label: "Product Price" },
21
21
  { key: rt, label: "Product Original Price" },
22
22
  { key: ot, label: "Omnibus Price" },
23
23
  { key: st, label: "Omnibus Discount" },
24
- { key: U, label: "Product Button" }
25
- ], yt = new Set(h.map((p) => p.key)), T = "customAttr_", R = "deleteAttr_";
24
+ { key: B, label: "Product Button" }
25
+ ], At = new Set(h.map((p) => p.key)), C = "customAttr_", R = "deleteAttr_";
26
26
  class Ut extends Z {
27
27
  constructor() {
28
28
  super(...arguments);
29
- S(this, "store", lt());
30
- S(this, "unsubscribeStore", null);
31
- S(this, "eventController", null);
29
+ T(this, "store", lt());
30
+ T(this, "unsubscribeStore", null);
31
+ T(this, "eventController", null);
32
32
  /**
33
33
  * Guard flag: when true, onTemplateNodeUpdated skips _initializeComposition.
34
34
  * Used during _onReorder to prevent multiple intermediate rebuilds.
35
35
  */
36
- S(this, "reorderInProgress", !1);
36
+ T(this, "reorderInProgress", !1);
37
37
  }
38
38
  getId() {
39
- return bt;
39
+ return yt;
40
40
  }
41
41
  // ========================================================================
42
42
  // Lifecycle
@@ -49,9 +49,9 @@ class Ut extends Z {
49
49
  `).join(""), r = Array.from(
50
50
  { length: g },
51
51
  (l, u) => `
52
- <div data-custom-select-key="${T}${u}" style="display: none;">
52
+ <div data-custom-select-key="${C}${u}" style="display: none;">
53
53
  ${this._GuSelect({
54
- name: `${T}${u}`,
54
+ name: `${C}${u}`,
55
55
  placeholder: this.api.translate("Select Attribute"),
56
56
  options: []
57
57
  })}
@@ -128,10 +128,24 @@ class Ut extends Z {
128
128
  `;
129
129
  }
130
130
  onRender() {
131
- this._initializeComposition(), this._registerValueChangeListeners(), this._setupEventListeners(), this._updateOrderableState(), this._subscribeToStoreChanges();
131
+ this._initializeComposition(), this._registerValueChangeListeners(), this._setupEventListeners(), this._updateOrderableState(), this._subscribeToStoreChanges(), this._syncDisabledState();
132
+ }
133
+ /**
134
+ * Card composition restructures the block (toggles/reorders/adds attribute
135
+ * cells), which would corrupt a partner-managed (`ins-skip-compile`) block's
136
+ * preserved markup. There is no native tab-disable API, so the whole control
137
+ * container is rendered inert (greyed + non-interactive) instead.
138
+ */
139
+ _syncDisabledState() {
140
+ var e;
141
+ const t = (e = this.getContainer()) == null ? void 0 : e.querySelector("[data-card-composition-control]");
142
+ if (!t)
143
+ return;
144
+ const r = gt(this.currentNode);
145
+ t.style.pointerEvents = r ? "none" : "", t.style.opacity = r ? "0.5" : "";
132
146
  }
133
147
  onTemplateNodeUpdated(t) {
134
- super.onTemplateNodeUpdated(t), !this.reorderInProgress && (this._initializeComposition(), this._updateOrderableState());
148
+ super.onTemplateNodeUpdated(t), !this.reorderInProgress && (this._initializeComposition(), this._updateOrderableState(), this._syncDisabledState());
135
149
  }
136
150
  onDestroy() {
137
151
  super.onDestroy(), this.eventController && (this.eventController.abort(), this.eventController = null), this.unsubscribeStore && (this.unsubscribeStore(), this.unsubscribeStore = null);
@@ -150,7 +164,7 @@ class Ut extends Z {
150
164
  });
151
165
  });
152
166
  for (let t = 0; t < g; t++) {
153
- const r = `${T}${t}`, e = t;
167
+ const r = `${C}${t}`, e = t;
154
168
  this.api.onValueChanged(r, (o) => {
155
169
  this._onCustomAttributeChanged(e, o);
156
170
  });
@@ -180,7 +194,7 @@ class Ut extends Z {
180
194
  _readVisibilityFromRows() {
181
195
  if (!this.currentNode)
182
196
  return this._getDefaultVisibilities();
183
- const t = Array.from(this.currentNode.querySelectorAll(C)), r = this._extractVisibilityFromRows(t);
197
+ const t = Array.from(this.currentNode.querySelectorAll(S)), r = this._extractVisibilityFromRows(t);
184
198
  return this._mergeWithDefaults(r);
185
199
  }
186
200
  _getDefaultVisibilities() {
@@ -224,7 +238,7 @@ class Ut extends Z {
224
238
  const s = new Set(r);
225
239
  let i = 0, n = 0;
226
240
  const a = t.map((c) => {
227
- if (yt.has(c)) {
241
+ if (At.has(c)) {
228
242
  const l = h.find((u) => u.key === c);
229
243
  return this._createBuiltInItemHtml(l, n++);
230
244
  }
@@ -315,7 +329,7 @@ class Ut extends Z {
315
329
  _initializeCustomSelects(t) {
316
330
  t.length !== 0 && setTimeout(() => {
317
331
  t.forEach((r, e) => {
318
- const o = `${T}${e}`, s = this._getSelectOptions(r, t);
332
+ const o = `${C}${e}`, s = this._getSelectOptions(r, t);
319
333
  this.api.setUIEAttribute(o, I.SELECTPICKER.items, s), this.api.updateValues({ [o]: r });
320
334
  });
321
335
  }, 0);
@@ -339,7 +353,7 @@ class Ut extends Z {
339
353
  */
340
354
  _moveSelectsIntoItems(t, r) {
341
355
  for (let e = 0; e < r; e++) {
342
- const o = `${T}${e}`, s = t.querySelector(`[data-custom-select-key="${o}"]`), i = t.querySelector(`[data-custom-select-slot="${e}"]`);
356
+ const o = `${C}${e}`, s = t.querySelector(`[data-custom-select-key="${o}"]`), i = t.querySelector(`[data-custom-select-slot="${e}"]`);
343
357
  if (s && i) {
344
358
  const n = s.querySelector("ue-select");
345
359
  n && i.appendChild(n);
@@ -367,7 +381,7 @@ class Ut extends Z {
367
381
  */
368
382
  _rescueSelectsToStore(t) {
369
383
  for (let r = 0; r < g; r++) {
370
- const e = `${T}${r}`, o = t.querySelector(`[data-custom-select-key="${e}"]`), s = t.querySelector(`[data-custom-select-slot="${r}"]`);
384
+ const e = `${C}${r}`, o = t.querySelector(`[data-custom-select-key="${e}"]`), s = t.querySelector(`[data-custom-select-slot="${r}"]`);
371
385
  if (s) {
372
386
  const i = s.querySelector("ue-select");
373
387
  i && o && o.appendChild(i);
@@ -525,18 +539,18 @@ class Ut extends Z {
525
539
  this._getCurrentLayout() === "grid" ? this._injectGridAttributeRow(t, r, e, o) : this._injectListAttributeRow(t, r, e, o);
526
540
  }
527
541
  _injectGridAttributeRow(t, r, e, o) {
528
- const s = this.currentNode.querySelectorAll(L);
542
+ const s = this.currentNode.querySelectorAll(N);
529
543
  if (!(s != null && s.length))
530
544
  return;
531
545
  const i = nt.getConfig(this.currentNode), a = `0 ${Math.floor(i.columnSpacing / 2)}px`, c = this.api.getDocumentModifier(), l = this.store.recommendationProducts.length;
532
546
  let u = 0;
533
547
  s.forEach((d) => {
534
- var H;
535
- const b = d.querySelector(C), $ = ((H = b == null ? void 0 : b.querySelectorAll(`.${at}`)) == null ? void 0 : H.length) || 1, B = (100 / $).toFixed(2), { bgStyle: j, bgAttr: W } = this._extractSegmentBgFromCard(d), O = l > 0 ? Math.min($, l - u) : $, K = o.map((k) => {
536
- if (k === e) {
548
+ var k;
549
+ const b = d.querySelector(S), $ = ((k = b == null ? void 0 : b.querySelectorAll(`.${at}`)) == null ? void 0 : k.length) || 1, U = (100 / $).toFixed(2), { bgStyle: j, bgAttr: W } = this._extractSegmentBgFromCard(d), O = l > 0 ? Math.min($, l - u) : $, K = o.map((H) => {
550
+ if (H === e) {
537
551
  const z = Array.from(
538
552
  { length: O },
539
- (At, Y) => {
553
+ (St, Y) => {
540
554
  const X = this._resolveAttributeContent(
541
555
  t,
542
556
  r,
@@ -545,19 +559,19 @@ class Ut extends Z {
545
559
  return this._getGridCellHtml(
546
560
  t,
547
561
  X,
548
- B,
562
+ U,
549
563
  j,
550
564
  W,
551
565
  a
552
566
  );
553
567
  }
554
- ).join(""), G = dt(B, a).repeat($ - O);
568
+ ).join(""), G = dt(U, a).repeat($ - O);
555
569
  return `<tr class="recommendation-attribute-row" ${y}="${e}" ${v}="1">${z}${G}</tr>`;
556
570
  }
557
- const N = d.querySelector(
558
- `${C}[${y}="${k}"]`
571
+ const D = d.querySelector(
572
+ `${S}[${y}="${H}"]`
559
573
  );
560
- return N && "getOuterHTML" in N ? N.getOuterHTML() : "";
574
+ return D && "getOuterHTML" in D ? D.getOuterHTML() : "";
561
575
  }).join("");
562
576
  u += O, l > 0 && u >= l && (u = 0), c.modifyHtml(d).setInnerHtml(K);
563
577
  }), c.apply(new A(`${this.api.translate("Add custom attribute")}: ${r}`));
@@ -566,7 +580,7 @@ class Ut extends Z {
566
580
  const s = this.currentNode.querySelectorAll(M);
567
581
  if (!(s != null && s.length))
568
582
  return;
569
- const i = o.filter((a) => a !== D && a !== U), n = this.api.getDocumentModifier();
583
+ const i = o.filter((a) => a !== L && a !== B), n = this.api.getDocumentModifier();
570
584
  s.forEach((a, c) => {
571
585
  const l = i.map((u) => {
572
586
  if (u === e) {
@@ -574,7 +588,7 @@ class Ut extends Z {
574
588
  return this._getListRowHtml(t, b, e);
575
589
  }
576
590
  const d = a.querySelector(
577
- `${C}[${y}="${u}"]`
591
+ `${S}[${y}="${u}"]`
578
592
  );
579
593
  return d && "getOuterHTML" in d ? d.getOuterHTML() : "";
580
594
  }).join("");
@@ -590,13 +604,13 @@ class Ut extends Z {
590
604
  return;
591
605
  const r = this._getCurrentLayout(), e = this.api.getDocumentModifier();
592
606
  if (r === "grid") {
593
- const o = this.currentNode.querySelectorAll(L);
607
+ const o = this.currentNode.querySelectorAll(N);
594
608
  o == null || o.forEach((s) => {
595
609
  const i = this._buildCompositionHtml(s, t);
596
610
  e.modifyHtml(s).setInnerHtml(i);
597
611
  });
598
612
  } else {
599
- const o = t.filter((i) => i !== D && i !== U), s = this.currentNode.querySelectorAll(M);
613
+ const o = t.filter((i) => i !== L && i !== B), s = this.currentNode.querySelectorAll(M);
600
614
  s == null || s.forEach((i) => {
601
615
  const n = this._buildCompositionHtml(i, o);
602
616
  e.modifyHtml(i).setInnerHtml(n);
@@ -624,7 +638,7 @@ class Ut extends Z {
624
638
  _reorderProductAttributes(t) {
625
639
  if (!this.currentNode)
626
640
  return;
627
- const r = this.currentNode.querySelectorAll(L);
641
+ const r = this.currentNode.querySelectorAll(N);
628
642
  if (!(r != null && r.length))
629
643
  return;
630
644
  const e = this.api.getDocumentModifier();
@@ -639,7 +653,7 @@ class Ut extends Z {
639
653
  */
640
654
  _buildCompositionHtml(t, r) {
641
655
  return r.reduce((e, o) => {
642
- const s = t.querySelector(`${C}[${y}="${o}"]`);
656
+ const s = t.querySelector(`${S}[${y}="${o}"]`);
643
657
  return s && "getOuterHTML" in s ? e + s.getOuterHTML() : e;
644
658
  }, "");
645
659
  }
@@ -649,7 +663,7 @@ class Ut extends Z {
649
663
  _applyVisibilityToBlock(t, r) {
650
664
  if (!this.currentNode)
651
665
  return;
652
- const e = this.currentNode.querySelectorAll(`${C}[${y}="${t}"]`);
666
+ const e = this.currentNode.querySelectorAll(`${S}[${y}="${t}"]`);
653
667
  if (!(e != null && e.length))
654
668
  return;
655
669
  const o = r ? "1" : "0", s = r ? this.api.translate("visible") : this.api.translate("hidden"), i = `${this.api.translate("Set visibility")}: ${t} → ${s}`, n = this.api.getDocumentModifier();
@@ -677,7 +691,7 @@ class Ut extends Z {
677
691
  return -1;
678
692
  }
679
693
  _getCurrentLayout() {
680
- return this.store.recommendationConfigs.orientation || gt(this.currentNode);
694
+ return this.store.recommendationConfigs.orientation || bt(this.currentNode);
681
695
  }
682
696
  /**
683
697
  * Extracts background color properties from existing card elements.
@@ -793,6 +807,6 @@ class Ut extends Z {
793
807
  }
794
808
  }
795
809
  export {
796
- bt as COMPOSITION_CONTROL_BLOCK_ID,
810
+ yt as COMPOSITION_CONTROL_BLOCK_ID,
797
811
  Ut as RecommendationCardCompositionControl
798
812
  };