@useinsider/guido 3.8.0-beta.bf9ea20 → 3.8.0-beta.eb4074b

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 (56) 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/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/Items/block.js +29 -48
  8. package/dist/extensions/Blocks/Items/utils/nodeConfigUtils.js +45 -62
  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/block.d.ts +0 -8
  38. package/dist/src/extensions/Blocks/Items/controls/index.d.ts +1 -1
  39. package/dist/src/extensions/Blocks/Items/utils/nodeConfigUtils.d.ts +1 -1
  40. package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts +1 -1
  41. package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts +23 -0
  42. package/dist/src/extensions/Blocks/Recommendation/controls/button/index.d.ts +1 -1
  43. package/dist/src/extensions/Blocks/Recommendation/controls/cardComposition/index.d.ts +7 -0
  44. package/dist/src/extensions/Blocks/Recommendation/controls/main/layoutOrientation.d.ts +7 -1
  45. package/dist/src/extensions/Blocks/Recommendation/controls/main/productLayout.d.ts +6 -0
  46. package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts +29 -47
  47. package/dist/src/extensions/Blocks/Recommendation/templates/grid/template.d.ts +4 -4
  48. package/dist/src/extensions/Blocks/Recommendation/templates/index.d.ts +1 -1
  49. package/dist/src/extensions/Blocks/Recommendation/templates/list/template.d.ts +3 -2
  50. package/dist/src/extensions/Blocks/Recommendation/templates/utils.d.ts +165 -11
  51. package/dist/src/extensions/Blocks/Recommendation/utils/captureStyleTemplates.d.ts +78 -0
  52. package/dist/src/extensions/Blocks/Recommendation/utils/preserveTextStyles.d.ts +15 -0
  53. package/dist/src/extensions/Blocks/Recommendation/utils/tagName.d.ts +29 -9
  54. package/dist/src/extensions/Blocks/controlFactories.d.ts +11 -1
  55. package/package.json +1 -1
  56. package/dist/src/extensions/Blocks/Recommendation/utils/stylePreserver.d.ts +0 -113
@@ -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
  };
@@ -1,31 +1,31 @@
1
1
  var C = Object.defineProperty;
2
- var p = (d, c, t) => c in d ? C(d, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[c] = t;
3
- var s = (d, c, t) => p(d, typeof c != "symbol" ? c + "" : c, t);
4
- import { CommonControl as g } from "../../../common-control.js";
2
+ var g = (d, c, t) => c in d ? C(d, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[c] = t;
3
+ var s = (d, c, t) => g(d, typeof c != "symbol" ? c + "" : c, t);
4
+ import { CommonControl as p } from "../../../common-control.js";
5
5
  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 R } from "./algorithm.js";
9
- import { ALGORITHM_CONTROL_ID as Q } from "./algorithm.js";
10
- import { CurrencyControl as b } from "./currency.js";
11
- import { CURRENCY_CONTROL_ID as Z } from "./currency.js";
12
- import { FiltersControl as N } from "./filters.js";
13
- import { FILTERS_CONTROL_ID as et } from "./filters.js";
9
+ import { ALGORITHM_CONTROL_ID as X } from "./algorithm.js";
10
+ import { CurrencyControl as N } from "./currency.js";
11
+ import { CURRENCY_CONTROL_ID as tt } from "./currency.js";
12
+ import { FiltersControl as b } from "./filters.js";
13
+ import { FILTERS_CONTROL_ID as ot } from "./filters.js";
14
14
  import { LayoutOrientationControl as I } 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 _ } 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 O } 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 k, regenerateProductRowsWithStyles as D } 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 Rt, updatePricesInPlace as bt, updateSingleProductContent as Nt } from "./utils.js";
23
+ import { SHUFFLE_CONTROL_ID as ht } from "./shuffle.js";
24
+ import { setCurrencyAttributes as L, getBlockElement as P, isPartnerManagedBlock as k, updateProductContentInPlace as D, regenerateProductRowsWithStyles as E } from "./utils.js";
25
+ import { adjustProductsToSize as ft, formatProductPrice as Ct, getCardComposition as gt, getCurrentLayout as pt, regenerateMobileProductRows as yt, updatePricesInPlace as Rt, updateSingleProductContent as Nt } from "./utils.js";
26
26
  import { useDebounceFn as m } from "../../../../../node_modules/@vueuse/shared/index.js";
27
- const E = "recommendation-id", w = "ui-elements-recommendation-block";
28
- class K extends g {
27
+ const w = "recommendation-id", B = "ui-elements-recommendation-block";
28
+ class q extends p {
29
29
  constructor() {
30
30
  super(...arguments);
31
31
  s(this, "store", y());
@@ -60,14 +60,14 @@ class K extends g {
60
60
  */
61
61
  s(this, "_debouncedRegenerateWithProducts", m(() => {
62
62
  const t = this.store.recommendationProducts;
63
- if (!this.currentNode || !this.api)
63
+ if (!this.currentNode || !this.api || k(this.currentNode))
64
64
  return;
65
65
  const e = this.api.getDocumentModifier();
66
- k({
66
+ D({
67
67
  currentNode: this.currentNode,
68
68
  documentModifier: e,
69
69
  products: t
70
- }) || D({
70
+ }) || E({
71
71
  currentNode: this.currentNode,
72
72
  documentModifier: e,
73
73
  products: t
@@ -75,10 +75,10 @@ class K extends g {
75
75
  }, 100));
76
76
  }
77
77
  getId() {
78
- return w;
78
+ return B;
79
79
  }
80
80
  getTemplate() {
81
- return this.algorithmControl = new R(), this.localeControl = new _(), this.currencyControl = new b(), this.productCountControl = new O(), this.productLayoutControl = new T(), this.filtersControl = new N(), this.shuffleControl = new S(), this.layoutOrientationControl = new I(), [
81
+ return this.algorithmControl = new R(), this.localeControl = new _(), this.currencyControl = new N(), this.productCountControl = new O(), this.productLayoutControl = new T(), this.filtersControl = new b(), this.shuffleControl = new S(), this.layoutOrientationControl = new I(), [
82
82
  this.algorithmControl,
83
83
  this.localeControl,
84
84
  this.currencyControl,
@@ -295,7 +295,7 @@ class K extends g {
295
295
  const e = P(t);
296
296
  if (!e || !("getAttribute" in e))
297
297
  return null;
298
- const o = e.getAttribute(E);
298
+ const o = e.getAttribute(w);
299
299
  if (!o)
300
300
  return null;
301
301
  const r = parseInt(o);
@@ -346,35 +346,34 @@ class K extends g {
346
346
  }
347
347
  }
348
348
  export {
349
- Q as ALGORITHM_CONTROL_ID,
349
+ X as ALGORITHM_CONTROL_ID,
350
350
  R as AlgorithmControl,
351
- w as CONTROL_BLOCK_ID,
352
- Z as CURRENCY_CONTROL_ID,
353
- b as CurrencyControl,
354
- et as FILTERS_CONTROL_ID,
355
- N as FiltersControl,
356
- rt as LAYOUT_ORIENTATION_CONTROL_ID,
357
- it as LOCALE_CONTROL_ID,
351
+ B as CONTROL_BLOCK_ID,
352
+ tt as CURRENCY_CONTROL_ID,
353
+ N as CurrencyControl,
354
+ ot as FILTERS_CONTROL_ID,
355
+ b as FiltersControl,
356
+ nt as LAYOUT_ORIENTATION_CONTROL_ID,
357
+ st as LOCALE_CONTROL_ID,
358
358
  I as LayoutOrientationControl,
359
359
  _ as LocaleControl,
360
- at as PRODUCT_COUNT_CONTROL_ID,
361
- lt as PRODUCT_LAYOUT_CONTROL_ID,
360
+ ct as PRODUCT_COUNT_CONTROL_ID,
361
+ ut as PRODUCT_LAYOUT_CONTROL_ID,
362
362
  O as ProductCountControl,
363
363
  T as ProductLayoutControl,
364
- K as RecommendationBlockControl,
365
- dt as SHUFFLE_CONTROL_ID,
364
+ q as RecommendationBlockControl,
365
+ ht as SHUFFLE_CONTROL_ID,
366
366
  S as ShuffleControl,
367
- mt as adjustProductsToSize,
368
- ft as formatProductPrice,
367
+ ft as adjustProductsToSize,
368
+ Ct as formatProductPrice,
369
369
  P as getBlockElement,
370
- Ct as getCardComposition,
370
+ gt as getCardComposition,
371
371
  pt as getCurrentLayout,
372
- gt as reapplySpacing,
372
+ k as isPartnerManagedBlock,
373
373
  yt as regenerateMobileProductRows,
374
- Rt as regenerateProductRows,
375
- D as regenerateProductRowsWithStyles,
374
+ E as regenerateProductRowsWithStyles,
376
375
  L as setCurrencyAttributes,
377
- bt as updatePricesInPlace,
378
- k as updateProductContentInPlace,
376
+ Rt as updatePricesInPlace,
377
+ D as updateProductContentInPlace,
379
378
  Nt as updateSingleProductContent
380
379
  };
@@ -1,64 +1,65 @@
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
- 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 = {
1
+ var h = Object.defineProperty;
2
+ var p = (o, e, t) => e in o ? h(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
3
+ var a = (o, e, t) => p(o, typeof e != "symbol" ? e + "" : e, t);
4
+ import { UEAttr as L, ModificationDescription as N } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
+ import { CommonControl as A } from "../../../common-control.js";
6
+ import "../../constants/selectors.js";
7
+ import { LAYOUT_OPTIONS as O, DEFAULT_MOBILE_ROW_SPACING as d, DEFAULT_MOBILE_COLUMN_SPACING as m, DEFAULT_ROW_SPACING as l, DEFAULT_COLUMN_SPACING as g } from "../../constants/layout.js";
8
+ import { RecommendationConfigService as u } from "../../services/configService.js";
9
+ import { useRecommendationExtensionStore as S } from "../../store/recommendation.js";
10
+ import { isPartnerManagedBlock as f, getCurrentLayout as C, getBlockElement as T, getCardComposition as U, regenerateProductRowsWithStyles as I } from "./utils.js";
11
+ const y = "recommendation-layout-orientation-control", s = {
13
12
  LAYOUT: "layout"
14
- }, y = "data-card-composition", n = {
13
+ }, n = {
15
14
  LAYOUT: "data-layout",
16
15
  COLUMN_SPACING: "data-column-spacing",
17
16
  ROW_SPACING: "data-row-spacing",
18
17
  MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
19
18
  MOBILE_ROW_SPACING: "data-mobile-row-spacing"
20
19
  };
21
- class Y extends N {
20
+ class F extends A {
22
21
  constructor() {
23
22
  super(...arguments);
24
- r(this, "store", f());
25
- r(this, "isChangingLayout", !1);
23
+ a(this, "store", S());
24
+ a(this, "isChangingLayout", !1);
26
25
  }
27
26
  getId() {
28
- return U;
27
+ return y;
29
28
  }
30
29
  getTemplate() {
31
30
  return `
32
31
  <div class="layout-control-container">
33
- ${this._GuOnPageMessage({ name: O })}
34
-
35
32
  ${this._GuTwoColumns([
36
33
  this._GuLabel({ text: this.api.translate("Layout Orientation") }),
37
34
  this._GuRadioButton({
38
- name: a.LAYOUT,
39
- buttons: T
35
+ name: s.LAYOUT,
36
+ buttons: O
40
37
  })
41
38
  ])}
42
39
  </div>
43
40
  `;
44
41
  }
45
42
  onRender() {
46
- this._setInfoMessageValue(
47
- O,
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.`
52
- )
53
- ), this._setFormValues(), this._listenToFormUpdates();
43
+ this._setFormValues(), this._syncDisabledState(), this._listenToFormUpdates();
54
44
  }
55
45
  onTemplateNodeUpdated(t) {
56
- super.onTemplateNodeUpdated(t), this._setFormValues();
46
+ super.onTemplateNodeUpdated(t), this._setFormValues(), this._syncDisabledState();
47
+ }
48
+ /**
49
+ * Layout orientation restructures the whole block, which is meaningless for
50
+ * partner-managed (`ins-skip-compile`) blocks — disable the control there.
51
+ */
52
+ _syncDisabledState() {
53
+ this.api.setUIEAttribute(
54
+ s.LAYOUT,
55
+ L.RADIO_BUTTONS.disabled,
56
+ f(this.currentNode)
57
+ );
57
58
  }
58
59
  _setFormValues() {
59
- const u = s.getConfig(this.currentNode).layout || C(this.currentNode);
60
+ const r = u.getConfig(this.currentNode).layout || C(this.currentNode);
60
61
  this.api.updateValues({
61
- [a.LAYOUT]: u
62
+ [s.LAYOUT]: r
62
63
  });
63
64
  }
64
65
  /**
@@ -66,26 +67,27 @@ class Y extends N {
66
67
  * Updates node config, data attribute and regenerates product rows
67
68
  */
68
69
  _onLayoutChange(t) {
69
- if (this.isChangingLayout || !this.currentNode || (s.getConfig(this.currentNode).layout || C(this.currentNode)) === t)
70
+ if (this.isChangingLayout || !this.currentNode || (u.getConfig(this.currentNode).layout || C(this.currentNode)) === t)
70
71
  return;
71
- const c = I(this.currentNode);
72
+ const c = T(this.currentNode);
72
73
  if (c) {
73
74
  this.isChangingLayout = !0;
74
75
  try {
75
- s.updateConfig(
76
+ const _ = U(this.currentNode);
77
+ u.updateConfig(
76
78
  this.api,
77
79
  this.currentNode,
78
80
  {
79
81
  layout: t,
80
82
  columnSpacing: g,
81
83
  rowSpacing: l,
82
- mobileColumnSpacing: d,
83
- mobileRowSpacing: m
84
+ mobileColumnSpacing: m,
85
+ mobileRowSpacing: d
84
86
  },
85
87
  `Changed layout to ${t}`
86
88
  ), 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);
89
+ 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, m.toString()).setAttribute(n.MOBILE_ROW_SPACING, d.toString());
90
+ 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.apply(new N(`Update layout to ${t}`)), this._regenerateProductRows(t, _);
89
91
  } finally {
90
92
  this.isChangingLayout = !1;
91
93
  }
@@ -95,22 +97,23 @@ class Y extends N {
95
97
  * Regenerates product rows based on the selected layout
96
98
  * Uses unified style-preserving regeneration to maintain user customizations
97
99
  * @param layout - The layout to use for regeneration (passed explicitly to avoid stale DOM reads)
100
+ * @param composition - The preserved card composition, incl. customAttr:* entries
98
101
  */
99
- _regenerateProductRows(t) {
100
- this.currentNode && S({
102
+ _regenerateProductRows(t, r) {
103
+ this.currentNode && I({
101
104
  currentNode: this.currentNode,
102
105
  documentModifier: this.api.getDocumentModifier(),
103
106
  layout: t,
104
- composition: _
107
+ composition: r
105
108
  });
106
109
  }
107
110
  _listenToFormUpdates() {
108
- this.api.onValueChanged(a.LAYOUT, (t) => {
111
+ this.api.onValueChanged(s.LAYOUT, (t) => {
109
112
  this._onLayoutChange(t);
110
113
  });
111
114
  }
112
115
  }
113
116
  export {
114
- U as LAYOUT_ORIENTATION_CONTROL_ID,
115
- Y as LayoutOrientationControl
117
+ y as LAYOUT_ORIENTATION_CONTROL_ID,
118
+ F as LayoutOrientationControl
116
119
  };
@@ -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
  };