@useinsider/guido 3.6.0-beta.6fd3d23 → 3.6.0-beta.70bbf9f

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 (35) hide show
  1. package/dist/composables/useHtmlValidator.js +165 -118
  2. package/dist/config/compiler/utils/recommendationCompilerUtils.js +28 -27
  3. package/dist/config/compiler/utils/recommendationIgnoreUtils.js +15 -0
  4. package/dist/config/migrator/recommendation/extractors.js +44 -22
  5. package/dist/config/migrator/recommendation/htmlBuilder.js +175 -169
  6. package/dist/config/migrator/recommendationMigrator.js +30 -31
  7. package/dist/extensions/Blocks/Recommendation/constants/selectors.js +21 -15
  8. package/dist/extensions/Blocks/Recommendation/controls/cardComposition/index.js +38 -24
  9. package/dist/extensions/Blocks/Recommendation/controls/main/index.js +39 -38
  10. package/dist/extensions/Blocks/Recommendation/controls/main/layoutOrientation.js +45 -35
  11. package/dist/extensions/Blocks/Recommendation/controls/main/productCount.js +3 -2
  12. package/dist/extensions/Blocks/Recommendation/controls/main/productLayout.js +62 -52
  13. package/dist/extensions/Blocks/Recommendation/controls/main/utils.js +74 -67
  14. package/dist/extensions/Blocks/Recommendation/controls/syncInfoMessage.js +7 -6
  15. package/dist/extensions/Blocks/Recommendation/extension.js +6 -5
  16. package/dist/extensions/Blocks/Recommendation/settingsPanel.js +3 -2
  17. package/dist/extensions/Blocks/Recommendation/store/recommendation.js +3 -2
  18. package/dist/extensions/Blocks/Recommendation/templates/grid/elementRenderer.js +2 -4
  19. package/dist/extensions/Blocks/Recommendation/templates/grid/template.js +3 -2
  20. package/dist/extensions/Blocks/Recommendation/templates/index.js +5 -4
  21. package/dist/extensions/Blocks/Recommendation/templates/list/elementRenderer.js +8 -8
  22. package/dist/extensions/Blocks/Recommendation/utils/priceFormatter.js +17 -17
  23. package/dist/src/composables/useHtmlValidator.d.ts +27 -0
  24. package/dist/src/config/compiler/utils/recommendationIgnoreUtils.d.ts +17 -0
  25. package/dist/src/config/compiler/utils/recommendationIgnoreUtils.test.d.ts +1 -0
  26. package/dist/src/config/migrator/recommendation/extractors.d.ts +15 -0
  27. package/dist/src/config/migrator/recommendation/htmlBuilder.d.ts +8 -0
  28. package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts +1 -1
  29. package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts +21 -0
  30. package/dist/src/extensions/Blocks/Recommendation/controls/cardComposition/index.d.ts +7 -0
  31. package/dist/src/extensions/Blocks/Recommendation/controls/main/layoutOrientation.d.ts +5 -0
  32. package/dist/src/extensions/Blocks/Recommendation/controls/main/productLayout.d.ts +6 -0
  33. package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts +9 -0
  34. package/package.json +1 -1
  35. /package/dist/src/{extensions/Blocks/Recommendation/utils/priceFormatter.test.d.ts → composables/useHtmlValidator.test.d.ts} +0 -0
@@ -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,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 T = ".recommendation-block-v2", n = ".ins-recommendation-product-container", o = ".ins-recommendation-desktop-container", t = ".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", S = "customAttr:", I = "data-custom-attributes", m = "product-attr", c = /* @__PURE__ */ new Set([
9
9
  "name",
10
10
  // productName
11
11
  "price",
@@ -20,24 +20,30 @@ 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
+ ...c,
25
+ "currency",
26
+ "discount"
23
27
  ]);
24
28
  export {
25
- A as ATTR_CUSTOM_PREFIX,
26
- u as ATTR_DATA_CUSTOM_ATTRIBUTES,
29
+ S as ATTR_CUSTOM_PREFIX,
30
+ I 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,
37
+ A as ATTR_PRODUCT_OMNIBUS_PRICE,
38
+ E as ATTR_PRODUCT_PRICE,
35
39
  T as BLOCK_ROOT_SELECTOR,
36
- a as BUILT_IN_DEFAULT_ATTRIBUTES,
37
- c as CONTAINER_SELECTOR,
40
+ c as BUILT_IN_DEFAULT_ATTRIBUTES,
41
+ n 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
- n as MOBILE_CONTAINER_SELECTOR,
42
- t as MOBILE_ROW_SELECTOR
46
+ t as MOBILE_CONTAINER_SELECTOR,
47
+ _ as MOBILE_ROW_SELECTOR,
48
+ a as RECOMMENDATION_VARIABLE_BUILTIN_ATTRIBUTES
43
49
  };
@@ -3,7 +3,7 @@ var J = (p, _, t) => _ in p ? X(p, _, { enumerable: !0, configurable: !0, writab
3
3
  var C = (p, _, t) => J(p, typeof _ != "symbol" ? _ + "" : _, t);
4
4
  import { UIElementType as f, UEAttr as $, ModificationDescription as A } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
5
  import { CommonControl as Q } from "../../../common-control.js";
6
- import { ATTR_PRODUCT_IMAGE as L, ATTR_PRODUCT_NAME as Z, ATTR_PRODUCT_PRICE as tt, ATTR_PRODUCT_OLD_PRICE as et, ATTR_PRODUCT_OMNIBUS_PRICE as rt, ATTR_PRODUCT_OMNIBUS_DISCOUNT as ot, ATTR_PRODUCT_BUTTON as D, ATTR_DATA_CUSTOM_ATTRIBUTES as k, ATTR_CUSTOM_PREFIX as m, BUILT_IN_DEFAULT_ATTRIBUTES as st } from "../../constants/selectors.js";
6
+ import { ATTR_PRODUCT_IMAGE as D, ATTR_PRODUCT_NAME as Z, ATTR_PRODUCT_PRICE as tt, ATTR_PRODUCT_OLD_PRICE as et, ATTR_PRODUCT_OMNIBUS_PRICE as rt, ATTR_PRODUCT_OMNIBUS_DISCOUNT as ot, ATTR_PRODUCT_BUTTON as L, ATTR_DATA_CUSTOM_ATTRIBUTES as H, ATTR_CUSTOM_PREFIX as m, BUILT_IN_DEFAULT_ATTRIBUTES as st } from "../../constants/selectors.js";
7
7
  import { DEFAULT_COMPOSITION as q, DEFAULT_VISIBILITY as P } from "../../constants/defaultConfig.js";
8
8
  import { RecommendationConfigService as it } from "../../services/configService.js";
9
9
  import { useRecommendationExtensionStore as nt } from "../../store/recommendation.js";
@@ -11,19 +11,19 @@ import { ATTRIBUTE_CELL_CLASS as lt, gridElementRenderer as at, DEFAULT_CELL_PAD
11
11
  import { listElementRenderer as ut } from "../../templates/list/elementRenderer.js";
12
12
  import { toDisplayName as dt, isDefaultAttribute as mt, buildElementRenderer as F } from "../../templates/utils.js";
13
13
  import { getTableDisplayValue as ht } from "../../utils/tagName.js";
14
- import { getCurrentLayout as pt } from "../main/utils.js";
15
- const _t = "ui-elements-recommendation-card-composition", S = ".recommendation-attribute-row", N = ".product-card-wrapper > tbody", w = ".product-info-cell > table > tbody", M = "data-card-composition", y = "data-attribute-type", I = "data-visibility", x = {
14
+ import { isPartnerManagedBlock as pt, getCurrentLayout as _t } from "../main/utils.js";
15
+ const ft = "ui-elements-recommendation-card-composition", S = ".recommendation-attribute-row", N = ".product-card-wrapper > tbody", w = ".product-info-cell > table > tbody", M = "data-card-composition", y = "data-attribute-type", I = "data-visibility", x = {
16
16
  ADD_ATTRIBUTE: "addAttribute"
17
17
  }, g = 5, v = "reorderIcon_", h = [
18
- { key: L, label: "Product Image" },
18
+ { key: D, label: "Product Image" },
19
19
  { key: Z, label: "Product Name" },
20
20
  { key: tt, label: "Product Price" },
21
21
  { key: et, label: "Product Original Price" },
22
22
  { key: rt, label: "Omnibus Price" },
23
23
  { key: ot, label: "Omnibus Discount" },
24
- { key: D, label: "Product Button" }
25
- ], ft = new Set(h.map((p) => p.key)), T = "customAttr_", E = "deleteAttr_";
26
- class Nt extends Q {
24
+ { key: L, label: "Product Button" }
25
+ ], gt = new Set(h.map((p) => p.key)), T = "customAttr_", E = "deleteAttr_";
26
+ class Dt extends Q {
27
27
  constructor() {
28
28
  super(...arguments);
29
29
  C(this, "store", nt());
@@ -36,7 +36,7 @@ class Nt extends Q {
36
36
  C(this, "reorderInProgress", !1);
37
37
  }
38
38
  getId() {
39
- return _t;
39
+ return ft;
40
40
  }
41
41
  // ========================================================================
42
42
  // Lifecycle
@@ -128,10 +128,24 @@ class Nt extends Q {
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 = pt(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);
@@ -168,7 +182,7 @@ class Nt extends Q {
168
182
  _readCustomAttributesFromNode() {
169
183
  if (!this.currentNode || !("getAttribute" in this.currentNode))
170
184
  return [];
171
- const t = this.currentNode.getAttribute(k);
185
+ const t = this.currentNode.getAttribute(H);
172
186
  if (!t)
173
187
  return [];
174
188
  try {
@@ -224,7 +238,7 @@ class Nt extends Q {
224
238
  const s = new Set(r);
225
239
  let i = 0, n = 0;
226
240
  const c = t.map((a) => {
227
- if (ft.has(a)) {
241
+ if (gt.has(a)) {
228
242
  const l = h.find((u) => u.key === a);
229
243
  return this._createBuiltInItemHtml(l, n++);
230
244
  }
@@ -531,13 +545,13 @@ class Nt extends Q {
531
545
  const i = it.getConfig(this.currentNode), c = `0 ${Math.floor(i.columnSpacing / 2)}px`, a = this.api.getDocumentModifier(), l = this.store.recommendationProducts.length;
532
546
  let u = 0;
533
547
  s.forEach((d) => {
534
- var U;
535
- const b = d.querySelector(S), R = ((U = b == null ? void 0 : b.querySelectorAll(`.${lt}`)) == null ? void 0 : U.length) || 1, V = (100 / R).toFixed(2), { bgStyle: j, bgAttr: W } = this._extractSegmentBgFromCard(d), K = o.map((B) => {
536
- if (B === e) {
548
+ var B;
549
+ const b = d.querySelector(S), R = ((B = b == null ? void 0 : b.querySelectorAll(`.${lt}`)) == null ? void 0 : B.length) || 1, V = (100 / R).toFixed(2), { bgStyle: j, bgAttr: W } = this._extractSegmentBgFromCard(d), K = o.map((U) => {
550
+ if (U === e) {
537
551
  const z = Array.from(
538
552
  { length: R },
539
- (gt, H) => {
540
- const G = l > 0 ? (u + H) % l : H, Y = this._resolveAttributeContent(t, r, G);
553
+ (bt, k) => {
554
+ const G = l > 0 ? (u + k) % l : k, Y = this._resolveAttributeContent(t, r, G);
541
555
  return this._getGridCellHtml(
542
556
  t,
543
557
  Y,
@@ -551,7 +565,7 @@ class Nt extends Q {
551
565
  return `<tr class="recommendation-attribute-row" ${y}="${e}" ${I}="1">${z}</tr>`;
552
566
  }
553
567
  const O = d.querySelector(
554
- `${S}[${y}="${B}"]`
568
+ `${S}[${y}="${U}"]`
555
569
  );
556
570
  return O && "getOuterHTML" in O ? O.getOuterHTML() : "";
557
571
  }).join("");
@@ -562,7 +576,7 @@ class Nt extends Q {
562
576
  const s = this.currentNode.querySelectorAll(w);
563
577
  if (!(s != null && s.length))
564
578
  return;
565
- const i = o.filter((c) => c !== L && c !== D), n = this.api.getDocumentModifier();
579
+ const i = o.filter((c) => c !== D && c !== L), n = this.api.getDocumentModifier();
566
580
  s.forEach((c, a) => {
567
581
  const l = i.map((u) => {
568
582
  if (u === e) {
@@ -592,7 +606,7 @@ class Nt extends Q {
592
606
  e.modifyHtml(s).setInnerHtml(i);
593
607
  });
594
608
  } else {
595
- const o = t.filter((i) => i !== L && i !== D), s = this.currentNode.querySelectorAll(w);
609
+ const o = t.filter((i) => i !== D && i !== L), s = this.currentNode.querySelectorAll(w);
596
610
  s == null || s.forEach((i) => {
597
611
  const n = this._buildCompositionHtml(i, o);
598
612
  e.modifyHtml(i).setInnerHtml(n);
@@ -611,7 +625,7 @@ class Nt extends Q {
611
625
  * producing a flicker on the custom attribute dropdowns.
612
626
  */
613
627
  _updateBothAttributes(t, r) {
614
- this.currentNode && this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(M, t.join(",")).setAttribute(k, JSON.stringify(r)).apply(new A(this.api.translate("Update card composition")));
628
+ this.currentNode && this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(M, t.join(",")).setAttribute(H, JSON.stringify(r)).apply(new A(this.api.translate("Update card composition")));
615
629
  }
616
630
  /**
617
631
  * Reorders attribute rows within each product card based on composition order.
@@ -673,7 +687,7 @@ class Nt extends Q {
673
687
  return -1;
674
688
  }
675
689
  _getCurrentLayout() {
676
- return this.store.recommendationConfigs.orientation || pt(this.currentNode);
690
+ return this.store.recommendationConfigs.orientation || _t(this.currentNode);
677
691
  }
678
692
  /**
679
693
  * Extracts background color properties from existing card elements.
@@ -789,6 +803,6 @@ class Nt extends Q {
789
803
  }
790
804
  }
791
805
  export {
792
- _t as COMPOSITION_CONTROL_BLOCK_ID,
793
- Nt as RecommendationCardCompositionControl
806
+ ft as COMPOSITION_CONTROL_BLOCK_ID,
807
+ Dt as RecommendationCardCompositionControl
794
808
  };
@@ -6,26 +6,26 @@ import { DEFAULT_NODE_CONFIG as a } from "../../constants/defaultConfig.js";
6
6
  import { RecommendationConfigService as h } from "../../services/configService.js";
7
7
  import { useRecommendationExtensionStore as y } from "../../store/recommendation.js";
8
8
  import { AlgorithmControl as N } from "./algorithm.js";
9
- import { ALGORITHM_CONTROL_ID as Q } from "./algorithm.js";
9
+ import { ALGORITHM_CONTROL_ID as X } from "./algorithm.js";
10
10
  import { CurrencyControl as R } from "./currency.js";
11
- import { CURRENCY_CONTROL_ID as Z } from "./currency.js";
11
+ import { CURRENCY_CONTROL_ID as tt } from "./currency.js";
12
12
  import { FiltersControl as _ } from "./filters.js";
13
- import { FILTERS_CONTROL_ID as et } from "./filters.js";
13
+ import { FILTERS_CONTROL_ID as ot } from "./filters.js";
14
14
  import { LayoutOrientationControl as b } from "./layoutOrientation.js";
15
- import { LAYOUT_ORIENTATION_CONTROL_ID as rt } from "./layoutOrientation.js";
15
+ import { LAYOUT_ORIENTATION_CONTROL_ID as nt } from "./layoutOrientation.js";
16
16
  import { LocaleControl as O } from "./locale.js";
17
- import { LOCALE_CONTROL_ID as it } from "./locale.js";
17
+ import { LOCALE_CONTROL_ID as st } from "./locale.js";
18
18
  import { ProductCountControl as I } from "./productCount.js";
19
- import { PRODUCT_COUNT_CONTROL_ID as at } from "./productCount.js";
19
+ import { PRODUCT_COUNT_CONTROL_ID as ct } from "./productCount.js";
20
20
  import { ProductLayoutControl as T } from "./productLayout.js";
21
- import { PRODUCT_LAYOUT_CONTROL_ID as lt } from "./productLayout.js";
21
+ import { PRODUCT_LAYOUT_CONTROL_ID as ut } from "./productLayout.js";
22
22
  import { ShuffleControl as S } from "./shuffle.js";
23
- import { SHUFFLE_CONTROL_ID as dt } from "./shuffle.js";
24
- import { setCurrencyAttributes as L, getBlockElement as P, updateProductContentInPlace as D, regenerateProductRowsWithStyles as k } from "./utils.js";
25
- import { adjustProductsToSize as mt, formatProductPrice as ft, getCardComposition as Ct, getCurrentLayout as pt, reapplySpacing as gt, regenerateMobileProductRows as yt, regenerateProductRows as Nt, updatePricesInPlace as Rt, updateSingleProductContent as _t } from "./utils.js";
23
+ import { SHUFFLE_CONTROL_ID as ht } from "./shuffle.js";
24
+ import { setCurrencyAttributes as L, getBlockElement as P, isPartnerManagedBlock as D, updateProductContentInPlace as k, regenerateProductRowsWithStyles as E } from "./utils.js";
25
+ import { adjustProductsToSize as ft, formatProductPrice as Ct, getCardComposition as pt, getCurrentLayout as gt, reapplySpacing as yt, regenerateMobileProductRows as Nt, regenerateProductRows as Rt, updatePricesInPlace as _t, updateSingleProductContent as bt } from "./utils.js";
26
26
  import { useDebounceFn as m } from "../../../../../node_modules/@vueuse/shared/index.js";
27
- const E = "recommendation-id", v = "ui-elements-recommendation-block";
28
- class K extends g {
27
+ const v = "recommendation-id", A = "ui-elements-recommendation-block";
28
+ class q extends g {
29
29
  constructor() {
30
30
  super(...arguments);
31
31
  s(this, "store", y());
@@ -59,14 +59,14 @@ class K extends g {
59
59
  */
60
60
  s(this, "_debouncedRegenerateWithProducts", m(() => {
61
61
  const t = this.store.recommendationProducts;
62
- if (!this.currentNode || !this.api)
62
+ if (!this.currentNode || !this.api || D(this.currentNode))
63
63
  return;
64
64
  const e = this.api.getDocumentModifier();
65
- D({
65
+ k({
66
66
  currentNode: this.currentNode,
67
67
  documentModifier: e,
68
68
  products: t
69
- }) || k({
69
+ }) || E({
70
70
  currentNode: this.currentNode,
71
71
  documentModifier: e,
72
72
  products: t
@@ -74,7 +74,7 @@ class K extends g {
74
74
  }, 100));
75
75
  }
76
76
  getId() {
77
- return v;
77
+ return A;
78
78
  }
79
79
  getTemplate() {
80
80
  return this.algorithmControl = new N(), this.localeControl = new O(), this.currencyControl = new R(), this.productCountControl = new I(), this.productLayoutControl = new T(), this.filtersControl = new _(), this.shuffleControl = new S(), this.layoutOrientationControl = new b(), [
@@ -290,7 +290,7 @@ class K extends g {
290
290
  const e = P(t);
291
291
  if (!e || !("getAttribute" in e))
292
292
  return null;
293
- const o = e.getAttribute(E);
293
+ const o = e.getAttribute(v);
294
294
  if (!o)
295
295
  return null;
296
296
  const r = parseInt(o);
@@ -341,35 +341,36 @@ class K extends g {
341
341
  }
342
342
  }
343
343
  export {
344
- Q as ALGORITHM_CONTROL_ID,
344
+ X as ALGORITHM_CONTROL_ID,
345
345
  N as AlgorithmControl,
346
- v as CONTROL_BLOCK_ID,
347
- Z as CURRENCY_CONTROL_ID,
346
+ A as CONTROL_BLOCK_ID,
347
+ tt as CURRENCY_CONTROL_ID,
348
348
  R as CurrencyControl,
349
- et as FILTERS_CONTROL_ID,
349
+ ot as FILTERS_CONTROL_ID,
350
350
  _ as FiltersControl,
351
- rt as LAYOUT_ORIENTATION_CONTROL_ID,
352
- it as LOCALE_CONTROL_ID,
351
+ nt as LAYOUT_ORIENTATION_CONTROL_ID,
352
+ st as LOCALE_CONTROL_ID,
353
353
  b as LayoutOrientationControl,
354
354
  O as LocaleControl,
355
- at as PRODUCT_COUNT_CONTROL_ID,
356
- lt as PRODUCT_LAYOUT_CONTROL_ID,
355
+ ct as PRODUCT_COUNT_CONTROL_ID,
356
+ ut as PRODUCT_LAYOUT_CONTROL_ID,
357
357
  I as ProductCountControl,
358
358
  T as ProductLayoutControl,
359
- K as RecommendationBlockControl,
360
- dt as SHUFFLE_CONTROL_ID,
359
+ q as RecommendationBlockControl,
360
+ ht as SHUFFLE_CONTROL_ID,
361
361
  S as ShuffleControl,
362
- mt as adjustProductsToSize,
363
- ft as formatProductPrice,
362
+ ft as adjustProductsToSize,
363
+ Ct as formatProductPrice,
364
364
  P as getBlockElement,
365
- Ct as getCardComposition,
366
- pt as getCurrentLayout,
367
- gt as reapplySpacing,
368
- yt as regenerateMobileProductRows,
369
- Nt as regenerateProductRows,
370
- k as regenerateProductRowsWithStyles,
365
+ pt as getCardComposition,
366
+ gt as getCurrentLayout,
367
+ D as isPartnerManagedBlock,
368
+ yt as reapplySpacing,
369
+ Nt as regenerateMobileProductRows,
370
+ Rt as regenerateProductRows,
371
+ E as regenerateProductRowsWithStyles,
371
372
  L as setCurrencyAttributes,
372
- Rt as updatePricesInPlace,
373
- D as updateProductContentInPlace,
374
- _t as updateSingleProductContent
373
+ _t as updatePricesInPlace,
374
+ k as updateProductContentInPlace,
375
+ bt as updateSingleProductContent
375
376
  };
@@ -1,31 +1,31 @@
1
- var p = Object.defineProperty;
2
- var A = (o, e, t) => e in o ? p(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
3
- var r = (o, e, t) => A(o, typeof e != "symbol" ? e + "" : e, t);
4
- import { ModificationDescription as h } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
- import { CommonControl as N } from "../../../common-control.js";
1
+ var h = Object.defineProperty;
2
+ var C = (o, e, t) => e in o ? h(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
3
+ var r = (o, e, t) => C(o, typeof e != "symbol" ? e + "" : e, t);
4
+ import { UEAttr as p, ModificationDescription as N } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
+ import { CommonControl as T } from "../../../common-control.js";
6
6
  import { ATTR_DATA_CUSTOM_ATTRIBUTES as L } from "../../constants/selectors.js";
7
- import { LAYOUT_OPTIONS as T, DEFAULT_MOBILE_ROW_SPACING as m, DEFAULT_MOBILE_COLUMN_SPACING as d, DEFAULT_ROW_SPACING as l, DEFAULT_COLUMN_SPACING as g } from "../../constants/layout.js";
8
- import { DEFAULT_COMPOSITION as _ } from "../../constants/defaultConfig.js";
9
- import { RecommendationConfigService as s } from "../../services/configService.js";
10
- import { useRecommendationExtensionStore as f } from "../../store/recommendation.js";
11
- import { getCurrentLayout as C, getBlockElement as I, regenerateProductRowsWithStyles as S } from "./utils.js";
12
- const U = "recommendation-layout-orientation-control", O = "recommendationInfoBannerTest", a = {
7
+ import { LAYOUT_OPTIONS as f, DEFAULT_MOBILE_ROW_SPACING as m, DEFAULT_MOBILE_COLUMN_SPACING as d, DEFAULT_ROW_SPACING as l, DEFAULT_COLUMN_SPACING as _ } from "../../constants/layout.js";
8
+ import { DEFAULT_COMPOSITION as g } from "../../constants/defaultConfig.js";
9
+ import { RecommendationConfigService as a } from "../../services/configService.js";
10
+ import { useRecommendationExtensionStore as S } from "../../store/recommendation.js";
11
+ import { isPartnerManagedBlock as I, getCurrentLayout as A, getBlockElement as U, regenerateProductRowsWithStyles as y } from "./utils.js";
12
+ const M = "recommendation-layout-orientation-control", O = "recommendationInfoBannerTest", s = {
13
13
  LAYOUT: "layout"
14
- }, y = "data-card-composition", n = {
14
+ }, R = "data-card-composition", n = {
15
15
  LAYOUT: "data-layout",
16
16
  COLUMN_SPACING: "data-column-spacing",
17
17
  ROW_SPACING: "data-row-spacing",
18
18
  MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
19
19
  MOBILE_ROW_SPACING: "data-mobile-row-spacing"
20
20
  };
21
- class Y extends N {
21
+ class V extends T {
22
22
  constructor() {
23
23
  super(...arguments);
24
- r(this, "store", f());
24
+ r(this, "store", S());
25
25
  r(this, "isChangingLayout", !1);
26
26
  }
27
27
  getId() {
28
- return U;
28
+ return M;
29
29
  }
30
30
  getTemplate() {
31
31
  return `
@@ -35,8 +35,8 @@ class Y extends N {
35
35
  ${this._GuTwoColumns([
36
36
  this._GuLabel({ text: this.api.translate("Layout Orientation") }),
37
37
  this._GuRadioButton({
38
- name: a.LAYOUT,
39
- buttons: T
38
+ name: s.LAYOUT,
39
+ buttons: f
40
40
  })
41
41
  ])}
42
42
  </div>
@@ -46,19 +46,29 @@ class Y extends N {
46
46
  this._setInfoMessageValue(
47
47
  O,
48
48
  this.api.translate(
49
- `Note that updating the Layout Orientation, Number of Products,
50
- Products in One Row and Mobile Layout Optimization settings
51
- resets the style of your Recommendation block.`
49
+ `Note that updating the Layout Orientation, Number of Products and
50
+ Products in One Row settings resets the style of your Recommendation block.`
52
51
  )
53
- ), this._setFormValues(), this._listenToFormUpdates();
52
+ ), this._setFormValues(), this._syncDisabledState(), this._listenToFormUpdates();
54
53
  }
55
54
  onTemplateNodeUpdated(t) {
56
- super.onTemplateNodeUpdated(t), this._setFormValues();
55
+ super.onTemplateNodeUpdated(t), this._setFormValues(), this._syncDisabledState();
56
+ }
57
+ /**
58
+ * Layout orientation restructures the whole block, which is meaningless for
59
+ * partner-managed (`ins-skip-compile`) blocks — disable the control there.
60
+ */
61
+ _syncDisabledState() {
62
+ this.api.setUIEAttribute(
63
+ s.LAYOUT,
64
+ p.RADIO_BUTTONS.disabled,
65
+ I(this.currentNode)
66
+ );
57
67
  }
58
68
  _setFormValues() {
59
- const u = s.getConfig(this.currentNode).layout || C(this.currentNode);
69
+ const u = a.getConfig(this.currentNode).layout || A(this.currentNode);
60
70
  this.api.updateValues({
61
- [a.LAYOUT]: u
71
+ [s.LAYOUT]: u
62
72
  });
63
73
  }
64
74
  /**
@@ -66,26 +76,26 @@ class Y extends N {
66
76
  * Updates node config, data attribute and regenerates product rows
67
77
  */
68
78
  _onLayoutChange(t) {
69
- if (this.isChangingLayout || !this.currentNode || (s.getConfig(this.currentNode).layout || C(this.currentNode)) === t)
79
+ if (this.isChangingLayout || !this.currentNode || (a.getConfig(this.currentNode).layout || A(this.currentNode)) === t)
70
80
  return;
71
- const c = I(this.currentNode);
81
+ const c = U(this.currentNode);
72
82
  if (c) {
73
83
  this.isChangingLayout = !0;
74
84
  try {
75
- s.updateConfig(
85
+ a.updateConfig(
76
86
  this.api,
77
87
  this.currentNode,
78
88
  {
79
89
  layout: t,
80
- columnSpacing: g,
90
+ columnSpacing: _,
81
91
  rowSpacing: l,
82
92
  mobileColumnSpacing: d,
83
93
  mobileRowSpacing: m
84
94
  },
85
95
  `Changed layout to ${t}`
86
96
  ), this.store.patchCurrentBlockConfig({ orientation: t });
87
- const i = this.api.getDocumentModifier().modifyHtml(c).setAttribute(n.LAYOUT, t).setAttribute(n.COLUMN_SPACING, g.toString()).setAttribute(n.ROW_SPACING, l.toString()).setAttribute(n.MOBILE_COLUMN_SPACING, d.toString()).setAttribute(n.MOBILE_ROW_SPACING, m.toString());
88
- t === "list" ? (i.setClass("es-m-p0"), i.setClass("ins-recommendation-list-layout")) : (i.removeClass("es-m-p0"), i.removeClass("ins-recommendation-list-layout")), i.setAttribute(y, _.join(",")).setAttribute(L, "[]"), i.apply(new h(`Update layout to ${t}`)), this._regenerateProductRows(t);
97
+ const i = this.api.getDocumentModifier().modifyHtml(c).setAttribute(n.LAYOUT, t).setAttribute(n.COLUMN_SPACING, _.toString()).setAttribute(n.ROW_SPACING, l.toString()).setAttribute(n.MOBILE_COLUMN_SPACING, d.toString()).setAttribute(n.MOBILE_ROW_SPACING, m.toString());
98
+ t === "list" ? (i.setClass("es-m-p0"), i.setClass("ins-recommendation-list-layout")) : (i.removeClass("es-m-p0"), i.removeClass("ins-recommendation-list-layout")), i.setAttribute(R, g.join(",")).setAttribute(L, "[]"), i.apply(new N(`Update layout to ${t}`)), this._regenerateProductRows(t);
89
99
  } finally {
90
100
  this.isChangingLayout = !1;
91
101
  }
@@ -97,20 +107,20 @@ class Y extends N {
97
107
  * @param layout - The layout to use for regeneration (passed explicitly to avoid stale DOM reads)
98
108
  */
99
109
  _regenerateProductRows(t) {
100
- this.currentNode && S({
110
+ this.currentNode && y({
101
111
  currentNode: this.currentNode,
102
112
  documentModifier: this.api.getDocumentModifier(),
103
113
  layout: t,
104
- composition: _
114
+ composition: g
105
115
  });
106
116
  }
107
117
  _listenToFormUpdates() {
108
- this.api.onValueChanged(a.LAYOUT, (t) => {
118
+ this.api.onValueChanged(s.LAYOUT, (t) => {
109
119
  this._onLayoutChange(t);
110
120
  });
111
121
  }
112
122
  }
113
123
  export {
114
- U as LAYOUT_ORIENTATION_CONTROL_ID,
115
- Y as LayoutOrientationControl
124
+ M as LAYOUT_ORIENTATION_CONTROL_ID,
125
+ V as LayoutOrientationControl
116
126
  };
@@ -2,13 +2,14 @@ var s = Object.defineProperty;
2
2
  var u = (e, o, t) => o in e ? s(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t;
3
3
  var i = (e, o, t) => u(e, typeof o != "symbol" ? o + "" : o, t);
4
4
  import { CommonControl as a } from "../../../common-control.js";
5
+ import "../../constants/selectors.js";
5
6
  import { MAX_PRODUCT_COUNT as c } from "../../constants/layout.js";
6
7
  import { RecommendationConfigService as n } from "../../services/configService.js";
7
8
  import { useRecommendationExtensionStore as d } from "../../store/recommendation.js";
8
9
  const C = "recommendation-product-count-control", r = {
9
10
  PRODUCT_COUNT: "size"
10
11
  };
11
- class g extends a {
12
+ class U extends a {
12
13
  constructor() {
13
14
  super(...arguments);
14
15
  i(this, "store", d());
@@ -54,5 +55,5 @@ class g extends a {
54
55
  }
55
56
  export {
56
57
  C as PRODUCT_COUNT_CONTROL_ID,
57
- g as ProductCountControl
58
+ U as ProductCountControl
58
59
  };