@useinsider/guido 3.6.0-beta.7ac8612 → 3.6.0-beta.dc3a2aa

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 (34) hide show
  1. package/dist/composables/useHtmlValidator.js +102 -131
  2. package/dist/config/compiler/utils/recommendationCompilerUtils.js +27 -28
  3. package/dist/config/migrator/recommendation/extractors.js +22 -44
  4. package/dist/config/migrator/recommendation/htmlBuilder.js +169 -175
  5. package/dist/config/migrator/recommendationMigrator.js +31 -30
  6. package/dist/extensions/Blocks/Recommendation/constants/selectors.js +15 -21
  7. package/dist/extensions/Blocks/Recommendation/controls/cardComposition/index.js +24 -38
  8. package/dist/extensions/Blocks/Recommendation/controls/main/index.js +38 -39
  9. package/dist/extensions/Blocks/Recommendation/controls/main/layoutOrientation.js +35 -45
  10. package/dist/extensions/Blocks/Recommendation/controls/main/productCount.js +2 -3
  11. package/dist/extensions/Blocks/Recommendation/controls/main/productLayout.js +52 -62
  12. package/dist/extensions/Blocks/Recommendation/controls/main/utils.js +67 -74
  13. package/dist/extensions/Blocks/Recommendation/controls/syncInfoMessage.js +6 -7
  14. package/dist/extensions/Blocks/Recommendation/extension.js +5 -6
  15. package/dist/extensions/Blocks/Recommendation/settingsPanel.js +2 -3
  16. package/dist/extensions/Blocks/Recommendation/store/recommendation.js +2 -3
  17. package/dist/extensions/Blocks/Recommendation/templates/grid/elementRenderer.js +6 -4
  18. package/dist/extensions/Blocks/Recommendation/templates/grid/template.js +2 -3
  19. package/dist/extensions/Blocks/Recommendation/templates/index.js +4 -5
  20. package/dist/extensions/Blocks/Recommendation/utils/priceFormatter.js +19 -19
  21. package/dist/src/composables/useHtmlValidator.d.ts +0 -9
  22. package/dist/src/config/migrator/recommendation/extractors.d.ts +0 -15
  23. package/dist/src/config/migrator/recommendation/htmlBuilder.d.ts +0 -8
  24. package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts +1 -1
  25. package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts +0 -21
  26. package/dist/src/extensions/Blocks/Recommendation/controls/cardComposition/index.d.ts +0 -7
  27. package/dist/src/extensions/Blocks/Recommendation/controls/main/layoutOrientation.d.ts +0 -5
  28. package/dist/src/extensions/Blocks/Recommendation/controls/main/productLayout.d.ts +0 -6
  29. package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts +0 -9
  30. package/package.json +1 -1
  31. package/dist/config/compiler/utils/recommendationIgnoreUtils.js +0 -15
  32. package/dist/src/config/compiler/utils/recommendationIgnoreUtils.d.ts +0 -17
  33. package/dist/src/config/compiler/utils/recommendationIgnoreUtils.test.d.ts +0 -1
  34. /package/dist/src/{composables/useHtmlValidator.test.d.ts → extensions/Blocks/Recommendation/utils/priceFormatter.test.d.ts} +0 -0
@@ -1,46 +1,47 @@
1
1
  import { BlockId as f } from "../../enums/block.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 S, isCustomizedBlock as w } from "./recommendation/extractors.js";
5
- import { buildBlockHtml as x } from "./recommendation/htmlBuilder.js";
6
- import { parseRecommendationId as R, parseLegacyConfig as T } from "./recommendation/parseLegacyConfig.js";
7
- import { mapSettings as h } from "./recommendation/settingsMapper.js";
8
- const M = '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 B(i, t, c) {
10
- var d;
11
- const o = R(t);
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";
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);
12
12
  if (o === null)
13
13
  return console.warn(
14
14
  "[RecommendationMigrator] Skipping block — missing/invalid `ins-recommendation-v3-campaign-id`"
15
15
  ), !1;
16
- const r = T(t);
16
+ const r = R(t);
17
17
  if (!r)
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
- currencySettings: v(t)
23
- }, a = h(n, r, o), e = y((d = r.composition) == null ? void 0 : d.variables), l = C(t), g = S(t), p = {
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 = {
24
27
  ...a,
25
28
  composition: e.composition,
26
29
  visibility: e.visibility,
27
30
  textTrimming: e.anyTextTrimming
28
- }, m = w(t), u = `
31
+ }, p = `
29
32
  <table>
30
33
  <tbody>
31
34
  <tr>
32
35
  <td class="esd-structure" align="left">
33
36
  <table width="100%" cellpadding="0" cellspacing="0">
34
37
  <tbody>
35
- <tr>${x({
36
- nodeConfig: p,
38
+ <tr>${v({
39
+ nodeConfig: g,
37
40
  composition: e,
38
- cardBg: g,
39
- titleText: l,
41
+ cardBg: l,
42
+ titleText: d,
40
43
  legacyId: t.getAttribute("id") ?? void 0,
41
- legacyBgColor: t.getAttribute("bgcolor") ?? void 0,
42
- preserveInnerHtml: m ? t.innerHTML : void 0,
43
- skipCompile: m
44
+ legacyBgColor: t.getAttribute("bgcolor") ?? void 0
44
45
  })}</tr>
45
46
  </tbody>
46
47
  </table>
@@ -48,15 +49,15 @@ function B(i, t, c) {
48
49
  </tr>
49
50
  </tbody>
50
51
  </table>
51
- `, s = i.parseFromString(u, "text/html").querySelector("td.esd-structure");
52
- return !s || !t.parentNode ? (console.warn(
52
+ `, m = i.parseFromString(p, "text/html").querySelector("td.esd-structure");
53
+ return !m || !t.parentNode ? (console.warn(
53
54
  `[RecommendationMigrator] Aborting block id=${o} — failed to construct new HTML element`
54
- ), !1) : (t.parentNode.replaceChild(s, t), !0);
55
+ ), !1) : (t.parentNode.replaceChild(m, t), !0);
55
56
  }
56
- function q(i, t = {}) {
57
- const c = new DOMParser(), o = c.parseFromString(i, "text/html"), r = Array.from(o.querySelectorAll(M));
57
+ function I(i, t = {}) {
58
+ const c = new DOMParser(), o = c.parseFromString(i, "text/html"), r = Array.from(o.querySelectorAll(h));
58
59
  try {
59
- b().$patch((e) => {
60
+ u().$patch((e) => {
60
61
  e.migrations = {
61
62
  ...e.migrations,
62
63
  [f.Recommendation]: r.length
@@ -69,12 +70,12 @@ function q(i, t = {}) {
69
70
  let n = 0;
70
71
  return r.forEach((a) => {
71
72
  try {
72
- B(c, a, t) && (n += 1);
73
+ x(c, a, t) && (n += 1);
73
74
  } catch (e) {
74
75
  console.error("[RecommendationMigrator] Unexpected error migrating block:", e);
75
76
  }
76
77
  }), n > 0 && console.info(`[RecommendationMigrator] Migrated ${n} legacy Recommendation block(s)`), o.documentElement.outerHTML;
77
78
  }
78
79
  export {
79
- q as migrateRecommendation
80
+ I as migrateRecommendation
80
81
  };
@@ -1,11 +1,11 @@
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 = {
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", _ = {
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
- }, 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([
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([
9
9
  "name",
10
10
  // productName
11
11
  "price",
@@ -20,30 +20,24 @@ const T = ".recommendation-block-v2", n = ".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"
27
23
  ]);
28
24
  export {
29
- S as ATTR_CUSTOM_PREFIX,
30
- I as ATTR_DATA_CUSTOM_ATTRIBUTES,
25
+ A as ATTR_CUSTOM_PREFIX,
26
+ u as ATTR_DATA_CUSTOM_ATTRIBUTES,
31
27
  m as ATTR_PRODUCT_ATTR,
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,
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,
36
32
  C as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
37
- A as ATTR_PRODUCT_OMNIBUS_PRICE,
38
- E as ATTR_PRODUCT_PRICE,
33
+ i as ATTR_PRODUCT_OMNIBUS_PRICE,
34
+ O as ATTR_PRODUCT_PRICE,
39
35
  T as BLOCK_ROOT_SELECTOR,
40
- c as BUILT_IN_DEFAULT_ATTRIBUTES,
41
- n as CONTAINER_SELECTOR,
36
+ a as BUILT_IN_DEFAULT_ATTRIBUTES,
37
+ c as CONTAINER_SELECTOR,
42
38
  r as CSS_CLASS_RECO_BUTTON,
43
- R as CSS_CLASS_SKIP_COMPILE,
44
- e as CURRENCY_ATTR,
39
+ _ as CURRENCY_ATTR,
45
40
  o as DESKTOP_CONTAINER_SELECTOR,
46
- t as MOBILE_CONTAINER_SELECTOR,
47
- _ as MOBILE_ROW_SELECTOR,
48
- a as RECOMMENDATION_VARIABLE_BUILTIN_ATTRIBUTES
41
+ n as MOBILE_CONTAINER_SELECTOR,
42
+ t as MOBILE_ROW_SELECTOR
49
43
  };
@@ -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 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";
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";
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 { 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 = {
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 = {
16
16
  ADD_ATTRIBUTE: "addAttribute"
17
17
  }, g = 5, v = "reorderIcon_", h = [
18
- { key: D, label: "Product Image" },
18
+ { key: L, 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: L, label: "Product Button" }
25
- ], gt = new Set(h.map((p) => p.key)), T = "customAttr_", E = "deleteAttr_";
26
- class Dt extends Q {
24
+ { key: D, label: "Product Button" }
25
+ ], ft = new Set(h.map((p) => p.key)), T = "customAttr_", E = "deleteAttr_";
26
+ class Nt extends Q {
27
27
  constructor() {
28
28
  super(...arguments);
29
29
  C(this, "store", nt());
@@ -36,7 +36,7 @@ class Dt extends Q {
36
36
  C(this, "reorderInProgress", !1);
37
37
  }
38
38
  getId() {
39
- return ft;
39
+ return _t;
40
40
  }
41
41
  // ========================================================================
42
42
  // Lifecycle
@@ -128,24 +128,10 @@ class Dt extends Q {
128
128
  `;
129
129
  }
130
130
  onRender() {
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" : "";
131
+ this._initializeComposition(), this._registerValueChangeListeners(), this._setupEventListeners(), this._updateOrderableState(), this._subscribeToStoreChanges();
146
132
  }
147
133
  onTemplateNodeUpdated(t) {
148
- super.onTemplateNodeUpdated(t), !this.reorderInProgress && (this._initializeComposition(), this._updateOrderableState(), this._syncDisabledState());
134
+ super.onTemplateNodeUpdated(t), !this.reorderInProgress && (this._initializeComposition(), this._updateOrderableState());
149
135
  }
150
136
  onDestroy() {
151
137
  super.onDestroy(), this.eventController && (this.eventController.abort(), this.eventController = null), this.unsubscribeStore && (this.unsubscribeStore(), this.unsubscribeStore = null);
@@ -182,7 +168,7 @@ class Dt extends Q {
182
168
  _readCustomAttributesFromNode() {
183
169
  if (!this.currentNode || !("getAttribute" in this.currentNode))
184
170
  return [];
185
- const t = this.currentNode.getAttribute(H);
171
+ const t = this.currentNode.getAttribute(k);
186
172
  if (!t)
187
173
  return [];
188
174
  try {
@@ -238,7 +224,7 @@ class Dt extends Q {
238
224
  const s = new Set(r);
239
225
  let i = 0, n = 0;
240
226
  const c = t.map((a) => {
241
- if (gt.has(a)) {
227
+ if (ft.has(a)) {
242
228
  const l = h.find((u) => u.key === a);
243
229
  return this._createBuiltInItemHtml(l, n++);
244
230
  }
@@ -545,13 +531,13 @@ class Dt extends Q {
545
531
  const i = it.getConfig(this.currentNode), c = `0 ${Math.floor(i.columnSpacing / 2)}px`, a = this.api.getDocumentModifier(), l = this.store.recommendationProducts.length;
546
532
  let u = 0;
547
533
  s.forEach((d) => {
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) {
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) {
551
537
  const z = Array.from(
552
538
  { length: R },
553
- (bt, k) => {
554
- const G = l > 0 ? (u + k) % l : k, Y = this._resolveAttributeContent(t, r, G);
539
+ (gt, H) => {
540
+ const G = l > 0 ? (u + H) % l : H, Y = this._resolveAttributeContent(t, r, G);
555
541
  return this._getGridCellHtml(
556
542
  t,
557
543
  Y,
@@ -565,7 +551,7 @@ class Dt extends Q {
565
551
  return `<tr class="recommendation-attribute-row" ${y}="${e}" ${I}="1">${z}</tr>`;
566
552
  }
567
553
  const O = d.querySelector(
568
- `${S}[${y}="${U}"]`
554
+ `${S}[${y}="${B}"]`
569
555
  );
570
556
  return O && "getOuterHTML" in O ? O.getOuterHTML() : "";
571
557
  }).join("");
@@ -576,7 +562,7 @@ class Dt extends Q {
576
562
  const s = this.currentNode.querySelectorAll(w);
577
563
  if (!(s != null && s.length))
578
564
  return;
579
- const i = o.filter((c) => c !== D && c !== L), n = this.api.getDocumentModifier();
565
+ const i = o.filter((c) => c !== L && c !== D), n = this.api.getDocumentModifier();
580
566
  s.forEach((c, a) => {
581
567
  const l = i.map((u) => {
582
568
  if (u === e) {
@@ -606,7 +592,7 @@ class Dt extends Q {
606
592
  e.modifyHtml(s).setInnerHtml(i);
607
593
  });
608
594
  } else {
609
- const o = t.filter((i) => i !== D && i !== L), s = this.currentNode.querySelectorAll(w);
595
+ const o = t.filter((i) => i !== L && i !== D), s = this.currentNode.querySelectorAll(w);
610
596
  s == null || s.forEach((i) => {
611
597
  const n = this._buildCompositionHtml(i, o);
612
598
  e.modifyHtml(i).setInnerHtml(n);
@@ -625,7 +611,7 @@ class Dt extends Q {
625
611
  * producing a flicker on the custom attribute dropdowns.
626
612
  */
627
613
  _updateBothAttributes(t, r) {
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")));
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")));
629
615
  }
630
616
  /**
631
617
  * Reorders attribute rows within each product card based on composition order.
@@ -687,7 +673,7 @@ class Dt extends Q {
687
673
  return -1;
688
674
  }
689
675
  _getCurrentLayout() {
690
- return this.store.recommendationConfigs.orientation || _t(this.currentNode);
676
+ return this.store.recommendationConfigs.orientation || pt(this.currentNode);
691
677
  }
692
678
  /**
693
679
  * Extracts background color properties from existing card elements.
@@ -803,6 +789,6 @@ class Dt extends Q {
803
789
  }
804
790
  }
805
791
  export {
806
- ft as COMPOSITION_CONTROL_BLOCK_ID,
807
- Dt as RecommendationCardCompositionControl
792
+ _t as COMPOSITION_CONTROL_BLOCK_ID,
793
+ Nt as RecommendationCardCompositionControl
808
794
  };
@@ -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 X } from "./algorithm.js";
9
+ import { ALGORITHM_CONTROL_ID as Q } from "./algorithm.js";
10
10
  import { CurrencyControl as R } from "./currency.js";
11
- import { CURRENCY_CONTROL_ID as tt } from "./currency.js";
11
+ import { CURRENCY_CONTROL_ID as Z } from "./currency.js";
12
12
  import { FiltersControl as _ } from "./filters.js";
13
- import { FILTERS_CONTROL_ID as ot } from "./filters.js";
13
+ import { FILTERS_CONTROL_ID as et } from "./filters.js";
14
14
  import { LayoutOrientationControl as b } from "./layoutOrientation.js";
15
- import { LAYOUT_ORIENTATION_CONTROL_ID as nt } from "./layoutOrientation.js";
15
+ import { LAYOUT_ORIENTATION_CONTROL_ID as rt } from "./layoutOrientation.js";
16
16
  import { LocaleControl as O } from "./locale.js";
17
- import { LOCALE_CONTROL_ID as st } from "./locale.js";
17
+ import { LOCALE_CONTROL_ID as it } from "./locale.js";
18
18
  import { ProductCountControl as I } from "./productCount.js";
19
- import { PRODUCT_COUNT_CONTROL_ID as ct } from "./productCount.js";
19
+ import { PRODUCT_COUNT_CONTROL_ID as at } from "./productCount.js";
20
20
  import { ProductLayoutControl as T } from "./productLayout.js";
21
- import { PRODUCT_LAYOUT_CONTROL_ID as ut } from "./productLayout.js";
21
+ import { PRODUCT_LAYOUT_CONTROL_ID as lt } from "./productLayout.js";
22
22
  import { ShuffleControl as S } from "./shuffle.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";
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";
26
26
  import { useDebounceFn as m } from "../../../../../node_modules/@vueuse/shared/index.js";
27
- const v = "recommendation-id", A = "ui-elements-recommendation-block";
28
- class q extends g {
27
+ const E = "recommendation-id", v = "ui-elements-recommendation-block";
28
+ class K extends g {
29
29
  constructor() {
30
30
  super(...arguments);
31
31
  s(this, "store", y());
@@ -59,14 +59,14 @@ class q extends g {
59
59
  */
60
60
  s(this, "_debouncedRegenerateWithProducts", m(() => {
61
61
  const t = this.store.recommendationProducts;
62
- if (!this.currentNode || !this.api || D(this.currentNode))
62
+ if (!this.currentNode || !this.api)
63
63
  return;
64
64
  const e = this.api.getDocumentModifier();
65
- k({
65
+ D({
66
66
  currentNode: this.currentNode,
67
67
  documentModifier: e,
68
68
  products: t
69
- }) || E({
69
+ }) || k({
70
70
  currentNode: this.currentNode,
71
71
  documentModifier: e,
72
72
  products: t
@@ -74,7 +74,7 @@ class q extends g {
74
74
  }, 100));
75
75
  }
76
76
  getId() {
77
- return A;
77
+ return v;
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 q extends g {
290
290
  const e = P(t);
291
291
  if (!e || !("getAttribute" in e))
292
292
  return null;
293
- const o = e.getAttribute(v);
293
+ const o = e.getAttribute(E);
294
294
  if (!o)
295
295
  return null;
296
296
  const r = parseInt(o);
@@ -341,36 +341,35 @@ class q extends g {
341
341
  }
342
342
  }
343
343
  export {
344
- X as ALGORITHM_CONTROL_ID,
344
+ Q as ALGORITHM_CONTROL_ID,
345
345
  N as AlgorithmControl,
346
- A as CONTROL_BLOCK_ID,
347
- tt as CURRENCY_CONTROL_ID,
346
+ v as CONTROL_BLOCK_ID,
347
+ Z as CURRENCY_CONTROL_ID,
348
348
  R as CurrencyControl,
349
- ot as FILTERS_CONTROL_ID,
349
+ et as FILTERS_CONTROL_ID,
350
350
  _ as FiltersControl,
351
- nt as LAYOUT_ORIENTATION_CONTROL_ID,
352
- st as LOCALE_CONTROL_ID,
351
+ rt as LAYOUT_ORIENTATION_CONTROL_ID,
352
+ it as LOCALE_CONTROL_ID,
353
353
  b as LayoutOrientationControl,
354
354
  O as LocaleControl,
355
- ct as PRODUCT_COUNT_CONTROL_ID,
356
- ut as PRODUCT_LAYOUT_CONTROL_ID,
355
+ at as PRODUCT_COUNT_CONTROL_ID,
356
+ lt as PRODUCT_LAYOUT_CONTROL_ID,
357
357
  I as ProductCountControl,
358
358
  T as ProductLayoutControl,
359
- q as RecommendationBlockControl,
360
- ht as SHUFFLE_CONTROL_ID,
359
+ K as RecommendationBlockControl,
360
+ dt as SHUFFLE_CONTROL_ID,
361
361
  S as ShuffleControl,
362
- ft as adjustProductsToSize,
363
- Ct as formatProductPrice,
362
+ mt as adjustProductsToSize,
363
+ ft as formatProductPrice,
364
364
  P as getBlockElement,
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,
365
+ Ct as getCardComposition,
366
+ pt as getCurrentLayout,
367
+ gt as reapplySpacing,
368
+ yt as regenerateMobileProductRows,
369
+ Nt as regenerateProductRows,
370
+ k as regenerateProductRowsWithStyles,
372
371
  L as setCurrencyAttributes,
373
- _t as updatePricesInPlace,
374
- k as updateProductContentInPlace,
375
- bt as updateSingleProductContent
372
+ Rt as updatePricesInPlace,
373
+ D as updateProductContentInPlace,
374
+ _t as updateSingleProductContent
376
375
  };
@@ -1,31 +1,31 @@
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";
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";
6
6
  import { ATTR_DATA_CUSTOM_ATTRIBUTES as L } from "../../constants/selectors.js";
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 = {
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 = {
13
13
  LAYOUT: "layout"
14
- }, R = "data-card-composition", n = {
14
+ }, y = "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 V extends T {
21
+ class Y extends N {
22
22
  constructor() {
23
23
  super(...arguments);
24
- r(this, "store", S());
24
+ r(this, "store", f());
25
25
  r(this, "isChangingLayout", !1);
26
26
  }
27
27
  getId() {
28
- return M;
28
+ return U;
29
29
  }
30
30
  getTemplate() {
31
31
  return `
@@ -35,8 +35,8 @@ class V extends T {
35
35
  ${this._GuTwoColumns([
36
36
  this._GuLabel({ text: this.api.translate("Layout Orientation") }),
37
37
  this._GuRadioButton({
38
- name: s.LAYOUT,
39
- buttons: f
38
+ name: a.LAYOUT,
39
+ buttons: T
40
40
  })
41
41
  ])}
42
42
  </div>
@@ -46,29 +46,19 @@ class V extends T {
46
46
  this._setInfoMessageValue(
47
47
  O,
48
48
  this.api.translate(
49
- `Note that updating the Layout Orientation, Number of Products and
50
- Products in One Row settings resets the style of your Recommendation block.`
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.`
51
52
  )
52
- ), this._setFormValues(), this._syncDisabledState(), this._listenToFormUpdates();
53
+ ), this._setFormValues(), this._listenToFormUpdates();
53
54
  }
54
55
  onTemplateNodeUpdated(t) {
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
- );
56
+ super.onTemplateNodeUpdated(t), this._setFormValues();
67
57
  }
68
58
  _setFormValues() {
69
- const u = a.getConfig(this.currentNode).layout || A(this.currentNode);
59
+ const u = s.getConfig(this.currentNode).layout || C(this.currentNode);
70
60
  this.api.updateValues({
71
- [s.LAYOUT]: u
61
+ [a.LAYOUT]: u
72
62
  });
73
63
  }
74
64
  /**
@@ -76,26 +66,26 @@ class V extends T {
76
66
  * Updates node config, data attribute and regenerates product rows
77
67
  */
78
68
  _onLayoutChange(t) {
79
- if (this.isChangingLayout || !this.currentNode || (a.getConfig(this.currentNode).layout || A(this.currentNode)) === t)
69
+ if (this.isChangingLayout || !this.currentNode || (s.getConfig(this.currentNode).layout || C(this.currentNode)) === t)
80
70
  return;
81
- const c = U(this.currentNode);
71
+ const c = I(this.currentNode);
82
72
  if (c) {
83
73
  this.isChangingLayout = !0;
84
74
  try {
85
- a.updateConfig(
75
+ s.updateConfig(
86
76
  this.api,
87
77
  this.currentNode,
88
78
  {
89
79
  layout: t,
90
- columnSpacing: _,
80
+ columnSpacing: g,
91
81
  rowSpacing: l,
92
82
  mobileColumnSpacing: d,
93
83
  mobileRowSpacing: m
94
84
  },
95
85
  `Changed layout to ${t}`
96
86
  ), this.store.patchCurrentBlockConfig({ orientation: 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);
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);
99
89
  } finally {
100
90
  this.isChangingLayout = !1;
101
91
  }
@@ -107,20 +97,20 @@ class V extends T {
107
97
  * @param layout - The layout to use for regeneration (passed explicitly to avoid stale DOM reads)
108
98
  */
109
99
  _regenerateProductRows(t) {
110
- this.currentNode && y({
100
+ this.currentNode && S({
111
101
  currentNode: this.currentNode,
112
102
  documentModifier: this.api.getDocumentModifier(),
113
103
  layout: t,
114
- composition: g
104
+ composition: _
115
105
  });
116
106
  }
117
107
  _listenToFormUpdates() {
118
- this.api.onValueChanged(s.LAYOUT, (t) => {
108
+ this.api.onValueChanged(a.LAYOUT, (t) => {
119
109
  this._onLayoutChange(t);
120
110
  });
121
111
  }
122
112
  }
123
113
  export {
124
- M as LAYOUT_ORIENTATION_CONTROL_ID,
125
- V as LayoutOrientationControl
114
+ U as LAYOUT_ORIENTATION_CONTROL_ID,
115
+ Y as LayoutOrientationControl
126
116
  };
@@ -2,14 +2,13 @@ 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";
6
5
  import { MAX_PRODUCT_COUNT as c } from "../../constants/layout.js";
7
6
  import { RecommendationConfigService as n } from "../../services/configService.js";
8
7
  import { useRecommendationExtensionStore as d } from "../../store/recommendation.js";
9
8
  const C = "recommendation-product-count-control", r = {
10
9
  PRODUCT_COUNT: "size"
11
10
  };
12
- class U extends a {
11
+ class g extends a {
13
12
  constructor() {
14
13
  super(...arguments);
15
14
  i(this, "store", d());
@@ -55,5 +54,5 @@ class U extends a {
55
54
  }
56
55
  export {
57
56
  C as PRODUCT_COUNT_CONTROL_ID,
58
- U as ProductCountControl
57
+ g as ProductCountControl
59
58
  };