@useinsider/guido 3.6.0-beta.3555230 → 3.6.0-beta.3c5ea31

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 (41) hide show
  1. package/dist/composables/useHtmlCompiler.js +22 -40
  2. package/dist/composables/useRecommendation.js +34 -33
  3. package/dist/extensions/Blocks/Recommendation/controls/main/index.js +10 -12
  4. package/dist/extensions/Blocks/Recommendation/controls/main/layoutOrientation.js +24 -32
  5. package/dist/extensions/Blocks/Recommendation/controls/main/productLayout.js +34 -40
  6. package/dist/extensions/Blocks/Recommendation/controls/main/utils.js +286 -329
  7. package/dist/extensions/Blocks/Recommendation/extension.js +6 -5
  8. package/dist/extensions/Blocks/Recommendation/settingsPanel.js +3 -2
  9. package/dist/extensions/Blocks/Recommendation/store/recommendation.js +13 -9
  10. package/dist/extensions/Blocks/Recommendation/templates/grid/elementRenderer.js +139 -168
  11. package/dist/extensions/Blocks/Recommendation/templates/grid/template.js +56 -30
  12. package/dist/extensions/Blocks/Recommendation/templates/index.js +29 -8
  13. package/dist/extensions/Blocks/Recommendation/templates/list/elementRenderer.js +132 -105
  14. package/dist/extensions/Blocks/Recommendation/templates/list/template.js +44 -23
  15. package/dist/extensions/Blocks/Recommendation/templates/utils.js +98 -55
  16. package/dist/extensions/Blocks/Recommendation/utils/captureStyleTemplates.js +207 -0
  17. package/dist/extensions/Blocks/Recommendation/utils/partnerCustomizations.js +21 -0
  18. package/dist/extensions/Blocks/Recommendation/utils/preserveTextStyles.js +24 -19
  19. package/dist/extensions/Blocks/Recommendation/utils/tagName.js +20 -16
  20. package/dist/extensions/Blocks/controlFactories.js +159 -133
  21. package/dist/src/composables/useHtmlCompiler.d.ts +0 -1
  22. package/dist/src/extensions/Blocks/Items/controls/index.d.ts +1 -1
  23. package/dist/src/extensions/Blocks/Recommendation/controls/button/index.d.ts +1 -1
  24. package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts +20 -47
  25. package/dist/src/extensions/Blocks/Recommendation/templates/grid/elementRenderer.test.d.ts +1 -0
  26. package/dist/src/extensions/Blocks/Recommendation/templates/grid/template.d.ts +4 -4
  27. package/dist/src/extensions/Blocks/Recommendation/templates/index.d.ts +1 -1
  28. package/dist/src/extensions/Blocks/Recommendation/templates/list/elementRenderer.test.d.ts +1 -0
  29. package/dist/src/extensions/Blocks/Recommendation/templates/list/template.d.ts +3 -2
  30. package/dist/src/extensions/Blocks/Recommendation/templates/utils.d.ts +158 -11
  31. package/dist/src/extensions/Blocks/Recommendation/templates/utils.test.d.ts +1 -0
  32. package/dist/src/extensions/Blocks/Recommendation/utils/captureStyleTemplates.d.ts +85 -0
  33. package/dist/src/extensions/Blocks/Recommendation/utils/captureStyleTemplates.test.d.ts +1 -0
  34. package/dist/src/extensions/Blocks/Recommendation/utils/partnerCustomizations.d.ts +7 -0
  35. package/dist/src/extensions/Blocks/Recommendation/utils/preserveTextStyles.d.ts +15 -0
  36. package/dist/src/extensions/Blocks/Recommendation/utils/preserveTextStyles.test.d.ts +1 -0
  37. package/dist/src/extensions/Blocks/Recommendation/utils/tagName.d.ts +20 -9
  38. package/dist/src/extensions/Blocks/controlFactories.d.ts +11 -1
  39. package/dist/utils/templatePreparation.js +53 -53
  40. package/package.json +1 -1
  41. package/dist/src/extensions/Blocks/Recommendation/utils/stylePreserver.d.ts +0 -113
@@ -1,48 +1,30 @@
1
- import { defaultHtmlCompilerRules as R } from "../config/compiler/htmlCompilerRules.js";
2
- import { itemsCompilerRules as g } from "../config/compiler/itemsCompilerRules.js";
3
- import { liquidCompilerRules as C } from "../config/compiler/liquidCompilerRules.js";
4
- import { outlookCompilerRules as b } from "../config/compiler/outlookCompilerRules.js";
5
- import { recommendationCompilerRules as v } from "../config/compiler/recommendationCompilerRules.js";
6
- import { socialCompilerRules as H } from "../config/compiler/socialCompilerRules.js";
7
- import { unsubscribeCompilerRules as x } from "../config/compiler/unsubscribeCompilerRules.js";
8
- import { createHtmlCompiler as s } from "../utils/htmlCompiler.js";
9
- import { useConfig as k } from "./useConfig.js";
10
- const y = /* @__PURE__ */ new Set([
11
- // URL/tag encoding fixes — keep merge-tag and placeholder integrity intact.
12
- "fix-url-encoding-start",
13
- "fix-url-encoding-end",
14
- "fix-tags-start",
15
- "fix-tags-end",
16
- // Image domain corrections — plain string replacement.
17
- "replace-old-image-domain",
18
- "replace-old-v2-image-domain",
19
- // Unsubscribe domain — the actual fix: injects the real unsubscribe href in
20
- // place of the `{{ins-*-unsubscribe-link}}` placeholders, plus related
21
- // unsubscribe-only cleanups. All pure regex/text, no AMP-forbidden output.
22
- "add-unsubscribe-link-values",
23
- "remove-data-ogsb-button-styles",
24
- "format-comment-braces",
25
- "add-universal-link-flags",
26
- // Coupon placeholder replacement (only present when liquidSyntax is enabled).
27
- "liquid-coupon-code"
28
- ]), M = () => {
29
- var m, t, r;
30
- const { compiler: e, isFeatureEnabled: a, partner: n } = k(), u = ((m = e.value) == null ? void 0 : m.customRules) || [], l = [
31
- ...!!((t = e.value) != null && t.ignoreDefaultRules) ? [] : R,
32
- ...v,
33
- ...x,
1
+ import { defaultHtmlCompilerRules as c } from "../config/compiler/htmlCompilerRules.js";
2
+ import { itemsCompilerRules as f } from "../config/compiler/itemsCompilerRules.js";
3
+ import { liquidCompilerRules as R } from "../config/compiler/liquidCompilerRules.js";
4
+ import { outlookCompilerRules as C } from "../config/compiler/outlookCompilerRules.js";
5
+ import { recommendationCompilerRules as d } from "../config/compiler/recommendationCompilerRules.js";
6
+ import { socialCompilerRules as b } from "../config/compiler/socialCompilerRules.js";
7
+ import { unsubscribeCompilerRules as g } from "../config/compiler/unsubscribeCompilerRules.js";
8
+ import { createHtmlCompiler as H } from "../utils/htmlCompiler.js";
9
+ import { useConfig as v } from "./useConfig.js";
10
+ const w = () => {
11
+ var l, m, r;
12
+ const { compiler: e, isFeatureEnabled: t, partner: i } = v(), s = ((l = e.value) == null ? void 0 : l.customRules) || [], u = [
13
+ ...!!((m = e.value) != null && m.ignoreDefaultRules) ? [] : c,
14
+ ...d,
34
15
  ...g,
16
+ ...f,
17
+ ...C,
35
18
  ...b,
36
- ...H,
37
- ...a("liquidSyntax") ? C : [],
38
- ...u.map((o, f) => ({
19
+ ...t("liquidSyntax") ? R : [],
20
+ ...s.map((o, a) => ({
39
21
  ...o,
40
- priority: o.priority + 1e3 + f
22
+ priority: o.priority + 1e3 + a
41
23
  // Ensure additional rules run after default rules
42
24
  }))
43
- ], p = s(l), c = l.filter((o) => y.has(o.id)), d = s(c), i = (r = n.value) == null ? void 0 : r.fallbackFont;
44
- return { compileHtml: (o) => p.compile(o, void 0, i), compileAmpHtml: (o) => d.compile(o, void 0, i) };
25
+ ], p = H(u), n = (r = i.value) == null ? void 0 : r.fallbackFont;
26
+ return { compileHtml: (o) => p.compile(o, void 0, n) };
45
27
  };
46
28
  export {
47
- M as useHtmlCompiler
29
+ w as useHtmlCompiler
48
30
  };
@@ -1,21 +1,22 @@
1
- import { getRecommendationFeedSourceMaps as I, URLS as C } from "../enums/extensions/recommendationBlock.js";
2
- import { MinDeviceViewport as R, DefaultPadding as b } from "../enums/recommendation.js";
3
- import { useRecommendationExtensionStore as m } from "../extensions/Blocks/Recommendation/store/recommendation.js";
1
+ import { getRecommendationFeedSourceMaps as I, URLS as R } from "../enums/extensions/recommendationBlock.js";
2
+ import { MinDeviceViewport as C, DefaultPadding as b } from "../enums/recommendation.js";
3
+ import { useRecommendationExtensionStore as l } from "../extensions/Blocks/Recommendation/store/recommendation.js";
4
4
  import { generateCompleteFilterQuery as h } from "../extensions/Blocks/Recommendation/utils/filterUtil.js";
5
+ import { getPartnerRecommendationParams as y } from "../extensions/Blocks/Recommendation/utils/partnerCustomizations.js";
5
6
  import { useConfigStore as x } from "../stores/config.js";
6
- const w = () => ({
7
+ const k = () => ({
7
8
  calculateCardWidth: ({
8
- mobileLeftPadding: o,
9
+ mobileLeftPadding: a,
9
10
  mobileRightPadding: s,
10
- cardsInRow: a,
11
- unresponsive: n
11
+ cardsInRow: c,
12
+ unresponsive: o
12
13
  }) => {
13
- const r = n ? a : 1, e = o + s + (r - 1) * b;
14
- return (R - e) / r;
14
+ const r = o ? c : 1, e = a + s + (r - 1) * b;
15
+ return (C - e) / r;
15
16
  },
16
- getRecommendationCampaignData: (o) => {
17
- const s = m(), a = Number(o), n = s.blockStates[a];
18
- if (!n)
17
+ getRecommendationCampaignData: (a) => {
18
+ const s = l(), c = Number(a), o = s.blockStates[c];
19
+ if (!o)
19
20
  return {
20
21
  textTrimming: !1,
21
22
  orientation: "vertical",
@@ -28,7 +29,7 @@ const w = () => ({
28
29
  discountBeforeTextValue: "",
29
30
  discountAfterTextValue: ""
30
31
  };
31
- const { recommendationConfigs: r } = n, e = r.orientation === "grid" ? "vertical" : "horizontal";
32
+ const { recommendationConfigs: r } = o, e = r.orientation === "grid" ? "vertical" : "horizontal";
32
33
  return {
33
34
  textTrimming: r.textTrimming,
34
35
  orientation: e,
@@ -42,35 +43,35 @@ const w = () => ({
42
43
  discountAfterTextValue: ""
43
44
  };
44
45
  },
45
- buildCampaignUrl: (o, s) => {
46
- var l;
47
- const a = m(), n = x(), r = Number(o);
46
+ buildCampaignUrl: (a, s) => {
47
+ var m;
48
+ const c = l(), o = x(), r = Number(a);
48
49
  let e;
49
50
  if (s)
50
51
  e = s;
51
52
  else {
52
- const c = a.blockStates[r];
53
- if (!c)
53
+ const i = c.blockStates[r];
54
+ if (!i)
54
55
  return "";
55
- const { recommendationConfigs: i } = c;
56
+ const { recommendationConfigs: n } = i;
56
57
  e = {
57
- strategy: i.strategy,
58
- language: i.language,
59
- currencyCode: i.currencySettings.value,
60
- size: i.size,
61
- productIds: i.productIds,
62
- filters: i.filters,
63
- shuffleProducts: i.shuffleProducts
58
+ strategy: n.strategy,
59
+ language: n.language,
60
+ currencyCode: n.currencySettings.value,
61
+ size: n.size,
62
+ productIds: n.productIds,
63
+ filters: n.filters,
64
+ shuffleProducts: n.shuffleProducts
64
65
  };
65
66
  }
66
- const f = ((l = I().find((c) => c.key === e.strategy)) == null ? void 0 : l.path) || "", t = new URLSearchParams();
67
- t.set("locale", e.language), t.set("currency", e.currencyCode), t.set("partnerName", n.partnerName), t.set("size", e.size), t.set("details", "true"), t.set("campaignId", n.variationId), e.strategy === "manualMerchandising" ? t.set("productId", e.productIds.join(",")) : e.strategy === "similarViewed" && t.set("productId", "{itemId}"), e.strategy === "userBased" && t.set("userId", "{user_id}");
68
- const g = e.filters.filter((c) => c.isValid), d = h(g);
69
- d && t.set("filter", d), e.shuffleProducts && t.set("shuffle", "true");
70
- const p = decodeURIComponent(t.toString()), u = `${C.RECOMMENDATION_API_URL}/v2/${f}?${p}`;
71
- return a.recommendationCampaignUrls[o] = u, u;
67
+ const f = ((m = I().find((i) => i.key === e.strategy)) == null ? void 0 : m.path) || "", t = new URLSearchParams();
68
+ t.set("locale", e.language), t.set("currency", e.currencyCode), t.set("partnerName", o.partnerName), t.set("size", e.size), t.set("details", "true"), t.set("campaignId", o.variationId), e.strategy === "manualMerchandising" ? t.set("productId", e.productIds.join(",")) : e.strategy === "similarViewed" && t.set("productId", "{itemId}"), e.strategy === "userBased" && t.set("userId", "{user_id}");
69
+ const g = e.filters.filter((i) => i.isValid), d = h(g);
70
+ d && t.set("filter", d), e.shuffleProducts && t.set("shuffle", "true"), Object.entries(y(o.partnerName, e.strategy)).forEach(([i, n]) => t.set(i, n));
71
+ const p = decodeURIComponent(t.toString()), u = `${R.RECOMMENDATION_API_URL}/v2/${f}?${p}`;
72
+ return c.recommendationCampaignUrls[a] = u, u;
72
73
  }
73
74
  });
74
75
  export {
75
- w as useRecommendation
76
+ k as useRecommendation
76
77
  };
@@ -1,6 +1,6 @@
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);
2
+ var p = (d, l, t) => l in d ? C(d, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[l] = t;
3
+ var s = (d, l, t) => p(d, typeof l != "symbol" ? l + "" : l, t);
4
4
  import { CommonControl as g } 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";
@@ -18,11 +18,11 @@ import { LOCALE_CONTROL_ID as it } from "./locale.js";
18
18
  import { ProductCountControl as I } from "./productCount.js";
19
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 lt } from "./productLayout.js";
21
+ import { PRODUCT_LAYOUT_CONTROL_ID as ct } from "./productLayout.js";
22
22
  import { ShuffleControl as S } from "./shuffle.js";
23
23
  import { SHUFFLE_CONTROL_ID as dt } from "./shuffle.js";
24
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";
25
+ import { adjustProductsToSize as mt, formatProductPrice as ft, getCardComposition as Ct, getCurrentLayout as pt, regenerateMobileProductRows as gt, updatePricesInPlace as yt, updateSingleProductContent as Nt } from "./utils.js";
26
26
  import { useDebounceFn as m } from "../../../../../node_modules/@vueuse/shared/index.js";
27
27
  const E = "recommendation-id", v = "ui-elements-recommendation-block";
28
28
  class K extends g {
@@ -320,8 +320,8 @@ class K extends g {
320
320
  }
321
321
  const i = t.$state.configVersion;
322
322
  i !== o && (o = i, this._persistFiltersToNodeConfig(), this._debouncedFetchProducts());
323
- const l = t.recommendationProducts, u = l !== e, f = Array.isArray(l) && l.length > 0;
324
- u && f && (e = l, this._debouncedRegenerateWithProducts());
323
+ const c = t.recommendationProducts, u = c !== e, f = Array.isArray(c) && c.length > 0;
324
+ u && f && (e = c, this._debouncedRegenerateWithProducts());
325
325
  });
326
326
  }
327
327
  /**
@@ -353,7 +353,7 @@ export {
353
353
  b as LayoutOrientationControl,
354
354
  O as LocaleControl,
355
355
  at as PRODUCT_COUNT_CONTROL_ID,
356
- lt as PRODUCT_LAYOUT_CONTROL_ID,
356
+ ct as PRODUCT_LAYOUT_CONTROL_ID,
357
357
  I as ProductCountControl,
358
358
  T as ProductLayoutControl,
359
359
  K as RecommendationBlockControl,
@@ -364,12 +364,10 @@ export {
364
364
  P as getBlockElement,
365
365
  Ct as getCardComposition,
366
366
  pt as getCurrentLayout,
367
- gt as reapplySpacing,
368
- yt as regenerateMobileProductRows,
369
- Nt as regenerateProductRows,
367
+ gt as regenerateMobileProductRows,
370
368
  k as regenerateProductRowsWithStyles,
371
369
  L as setCurrencyAttributes,
372
- Rt as updatePricesInPlace,
370
+ yt as updatePricesInPlace,
373
371
  D as updateProductContentInPlace,
374
- _t as updateSingleProductContent
372
+ Nt as updateSingleProductContent
375
373
  };
@@ -1,61 +1,53 @@
1
- var O = Object.defineProperty;
2
- var p = (o, e, t) => e in o ? O(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
3
- var r = (o, e, t) => p(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";
1
+ var A = Object.defineProperty;
2
+ var p = (e, o, t) => o in e ? A(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t;
3
+ var r = (e, o, t) => p(e, typeof o != "symbol" ? o + "" : o, t);
4
+ import { ModificationDescription as O } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
+ import { CommonControl as L } from "../../../common-control.js";
6
+ import { ATTR_DATA_CUSTOM_ATTRIBUTES as T } from "../../constants/selectors.js";
7
+ import { LAYOUT_OPTIONS as h, DEFAULT_MOBILE_ROW_SPACING as m, DEFAULT_MOBILE_COLUMN_SPACING as d, DEFAULT_ROW_SPACING as l, DEFAULT_COLUMN_SPACING as C } from "../../constants/layout.js";
8
8
  import { DEFAULT_COMPOSITION as _ } from "../../constants/defaultConfig.js";
9
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", A = "recommendationInfoBannerTest", a = {
10
+ import { useRecommendationExtensionStore as N } from "../../store/recommendation.js";
11
+ import { getCurrentLayout as g, getBlockElement as f, regenerateProductRowsWithStyles as S } from "./utils.js";
12
+ const I = "recommendation-layout-orientation-control", a = {
13
13
  LAYOUT: "layout"
14
- }, y = "data-card-composition", i = {
14
+ }, U = "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 w extends L {
22
22
  constructor() {
23
23
  super(...arguments);
24
- r(this, "store", f());
24
+ r(this, "store", N());
25
25
  r(this, "isChangingLayout", !1);
26
26
  }
27
27
  getId() {
28
- return U;
28
+ return I;
29
29
  }
30
30
  getTemplate() {
31
31
  return `
32
32
  <div class="layout-control-container">
33
- ${this._GuOnPageMessage({ name: A })}
34
-
35
33
  ${this._GuTwoColumns([
36
34
  this._GuLabel({ text: this.api.translate("Layout Orientation") }),
37
35
  this._GuRadioButton({
38
36
  name: a.LAYOUT,
39
- buttons: T
37
+ buttons: h
40
38
  })
41
39
  ])}
42
40
  </div>
43
41
  `;
44
42
  }
45
43
  onRender() {
46
- this._setInfoMessageValue(
47
- A,
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.`
51
- )
52
- ), this._setFormValues(), this._listenToFormUpdates();
44
+ this._setFormValues(), this._listenToFormUpdates();
53
45
  }
54
46
  onTemplateNodeUpdated(t) {
55
47
  super.onTemplateNodeUpdated(t), this._setFormValues();
56
48
  }
57
49
  _setFormValues() {
58
- const u = s.getConfig(this.currentNode).layout || C(this.currentNode);
50
+ const u = s.getConfig(this.currentNode).layout || g(this.currentNode);
59
51
  this.api.updateValues({
60
52
  [a.LAYOUT]: u
61
53
  });
@@ -65,9 +57,9 @@ class Y extends N {
65
57
  * Updates node config, data attribute and regenerates product rows
66
58
  */
67
59
  _onLayoutChange(t) {
68
- if (this.isChangingLayout || !this.currentNode || (s.getConfig(this.currentNode).layout || C(this.currentNode)) === t)
60
+ if (this.isChangingLayout || !this.currentNode || (s.getConfig(this.currentNode).layout || g(this.currentNode)) === t)
69
61
  return;
70
- const c = I(this.currentNode);
62
+ const c = f(this.currentNode);
71
63
  if (c) {
72
64
  this.isChangingLayout = !0;
73
65
  try {
@@ -76,15 +68,15 @@ class Y extends N {
76
68
  this.currentNode,
77
69
  {
78
70
  layout: t,
79
- columnSpacing: g,
71
+ columnSpacing: C,
80
72
  rowSpacing: l,
81
73
  mobileColumnSpacing: d,
82
74
  mobileRowSpacing: m
83
75
  },
84
76
  `Changed layout to ${t}`
85
77
  ), this.store.patchCurrentBlockConfig({ orientation: t });
86
- const n = this.api.getDocumentModifier().modifyHtml(c).setAttribute(i.LAYOUT, t).setAttribute(i.COLUMN_SPACING, g.toString()).setAttribute(i.ROW_SPACING, l.toString()).setAttribute(i.MOBILE_COLUMN_SPACING, d.toString()).setAttribute(i.MOBILE_ROW_SPACING, m.toString());
87
- t === "list" ? (n.setClass("es-m-p0"), n.setClass("ins-recommendation-list-layout")) : (n.removeClass("es-m-p0"), n.removeClass("ins-recommendation-list-layout")), n.setAttribute(y, _.join(",")).setAttribute(L, "[]"), n.apply(new h(`Update layout to ${t}`)), this._regenerateProductRows(t);
78
+ const i = this.api.getDocumentModifier().modifyHtml(c).setAttribute(n.LAYOUT, t).setAttribute(n.COLUMN_SPACING, C.toString()).setAttribute(n.ROW_SPACING, l.toString()).setAttribute(n.MOBILE_COLUMN_SPACING, d.toString()).setAttribute(n.MOBILE_ROW_SPACING, m.toString());
79
+ 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(U, _.join(",")).setAttribute(T, "[]"), i.apply(new O(`Update layout to ${t}`)), this._regenerateProductRows(t);
88
80
  } finally {
89
81
  this.isChangingLayout = !1;
90
82
  }
@@ -110,6 +102,6 @@ class Y extends N {
110
102
  }
111
103
  }
112
104
  export {
113
- U as LAYOUT_ORIENTATION_CONTROL_ID,
114
- Y as LayoutOrientationControl
105
+ I as LAYOUT_ORIENTATION_CONTROL_ID,
106
+ w as LayoutOrientationControl
115
107
  };
@@ -1,15 +1,15 @@
1
1
  var I = Object.defineProperty;
2
2
  var E = (a, n, t) => n in a ? I(a, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[n] = t;
3
3
  var u = (a, n, t) => E(a, typeof n != "symbol" ? n + "" : n, t);
4
- import { EditorStatePropertyType as O, PreviewDeviceMode as f, UEAttr as N } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
- import { CommonControl as T } from "../../../common-control.js";
6
- import { MAX_PRODUCTS_PER_ROW as p, MAX_MOBILE_PRODUCTS_PER_ROW as M, DEFAULT_MOBILE_CARDS_IN_ROW as L, DEFAULT_COLUMN_SPACING as P, DEFAULT_MOBILE_COLUMN_SPACING as y } from "../../constants/layout.js";
4
+ import { EditorStatePropertyType as p, PreviewDeviceMode as f, UEAttr as T } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
+ import { CommonControl as N } from "../../../common-control.js";
6
+ import { MAX_PRODUCTS_PER_ROW as O, MAX_MOBILE_PRODUCTS_PER_ROW as M, DEFAULT_MOBILE_CARDS_IN_ROW as m } from "../../constants/layout.js";
7
7
  import { RecommendationConfigService as i } from "../../services/configService.js";
8
- import { useRecommendationExtensionStore as D } from "../../store/recommendation.js";
9
- import { setMobileLayoutOptOut as m, ensureMobileCssRulesExist as C } from "../mobileLayout/cssRules.js";
10
- import { getCurrentLayout as w, getBlockElement as U, regenerateProductRowsWithStyles as b, regenerateMobileProductRows as g, adjustProductsToSize as A } from "./utils.js";
11
- import { useDebounceFn as B } from "../../../../../node_modules/@vueuse/shared/index.js";
12
- const S = "recommendation-product-layout-control", e = {
8
+ import { useRecommendationExtensionStore as P } from "../../store/recommendation.js";
9
+ import { setMobileLayoutOptOut as L, ensureMobileCssRulesExist as C } from "../mobileLayout/cssRules.js";
10
+ import { getCurrentLayout as y, getBlockElement as D, regenerateProductRowsWithStyles as b, regenerateMobileProductRows as g, adjustProductsToSize as w } from "./utils.js";
11
+ import { useDebounceFn as U } from "../../../../../node_modules/@vueuse/shared/index.js";
12
+ const B = "recommendation-product-layout-control", e = {
13
13
  // "Products in One Row" — shown when toggle is OFF
14
14
  PRODUCT_IN_ROW: "cardsInRow",
15
15
  PRODUCT_IN_ROW_LABEL: "cardsInRowLabel",
@@ -23,19 +23,19 @@ const S = "recommendation-product-layout-control", e = {
23
23
  MOBILE_LAYOUT_TOGGLE: "mobileLayoutEnabled",
24
24
  MOBILE_LAYOUT_LABEL: "mobileLayoutLabel"
25
25
  };
26
- class v extends T {
26
+ class Y extends N {
27
27
  constructor() {
28
28
  super(...arguments);
29
29
  // Store is used for backward compatibility with product fetching and regeneration
30
- u(this, "store", D());
30
+ u(this, "store", P());
31
31
  u(this, "storeUnsubscription", () => {
32
32
  });
33
- u(this, "_debouncedRegenerateProductRows", B(() => {
33
+ u(this, "_debouncedRegenerateProductRows", U(() => {
34
34
  this._regenerateProductRows();
35
35
  }, 500));
36
36
  }
37
37
  getId() {
38
- return S;
38
+ return B;
39
39
  }
40
40
  getTemplate() {
41
41
  return `
@@ -45,12 +45,12 @@ class v extends T {
45
45
  text: this.api.translate("Products in One Row"),
46
46
  name: e.PRODUCT_IN_ROW_LABEL
47
47
  }),
48
- this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue: p }),
48
+ this._GuCounter({ name: e.PRODUCT_IN_ROW, maxValue: O }),
49
49
  this._GuLabel({
50
50
  text: this.api.translate("Products in One Row on Desktop"),
51
51
  name: e.PRODUCT_IN_ROW_DESKTOP_LABEL
52
52
  }),
53
- this._GuCounter({ name: e.PRODUCT_IN_ROW_DESKTOP, maxValue: p }),
53
+ this._GuCounter({ name: e.PRODUCT_IN_ROW_DESKTOP, maxValue: O }),
54
54
  this._GuLabel({
55
55
  text: this.api.translate("Products in One Row on Mobile"),
56
56
  name: e.MOBILE_CARDS_IN_ROW_LABEL
@@ -95,7 +95,7 @@ class v extends T {
95
95
  * Returns true when the editor preview is in mobile mode.
96
96
  */
97
97
  _isMobilePreview() {
98
- return this.api.getEditorState()[O.previewDeviceMode] === f.MOBILE;
98
+ return this.api.getEditorState()[p.previewDeviceMode] === f.MOBILE;
99
99
  }
100
100
  /**
101
101
  * Updates counter visibility based on layout, mobileLayoutEnabled, and editor preview mode.
@@ -110,10 +110,10 @@ class v extends T {
110
110
  */
111
111
  _updateProductsInRowVisibility() {
112
112
  var R;
113
- const t = i.getConfig(this.currentNode), o = (t.layout || w(this.currentNode)) === "grid", { mobileLayoutEnabled: r } = t, d = this._isMobilePreview();
113
+ const t = i.getConfig(this.currentNode), o = (t.layout || y(this.currentNode)) === "grid", { mobileLayoutEnabled: r } = t, d = this._isMobilePreview();
114
114
  this.api.setVisibility(e.MOBILE_LAYOUT_TOGGLE, o), this.api.setVisibility(e.MOBILE_LAYOUT_LABEL, o);
115
- const c = o && !r, _ = o && r && !d, l = o && r && d;
116
- this.api.setVisibility(e.PRODUCT_IN_ROW, c), this.api.setVisibility(e.PRODUCT_IN_ROW_LABEL, c), this.api.setVisibility(e.PRODUCT_IN_ROW_DESKTOP, _), this.api.setVisibility(e.PRODUCT_IN_ROW_DESKTOP_LABEL, _), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW, l), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW_LABEL, l);
115
+ const c = o && !r, l = o && r && !d, _ = o && r && d;
116
+ this.api.setVisibility(e.PRODUCT_IN_ROW, c), this.api.setVisibility(e.PRODUCT_IN_ROW_LABEL, c), this.api.setVisibility(e.PRODUCT_IN_ROW_DESKTOP, l), this.api.setVisibility(e.PRODUCT_IN_ROW_DESKTOP_LABEL, l), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW, _), this.api.setVisibility(e.MOBILE_CARDS_IN_ROW_LABEL, _);
117
117
  const h = (R = this.getContainer()) == null ? void 0 : R.querySelector("[data-product-layout-control]");
118
118
  h && (h.style.display = o ? "" : "none");
119
119
  }
@@ -125,7 +125,7 @@ class v extends T {
125
125
  const t = i.getConfig(this.currentNode);
126
126
  this.api.setUIEAttribute(
127
127
  e.MOBILE_LAYOUT_TOGGLE,
128
- N.SELECTPICKER.items,
128
+ T.SELECTPICKER.items,
129
129
  t.mobileLayoutEnabled
130
130
  );
131
131
  }
@@ -140,9 +140,9 @@ class v extends T {
140
140
  const s = i.getConfig(this.currentNode);
141
141
  if (s.mobileLayoutEnabled === t)
142
142
  return;
143
- const o = U(this.currentNode);
143
+ const o = D(this.currentNode);
144
144
  if (t) {
145
- const r = s.previousMobileCardsInRow || L;
145
+ const r = s.previousMobileCardsInRow || m;
146
146
  i.updateConfig(
147
147
  this.api,
148
148
  this.currentNode,
@@ -154,7 +154,7 @@ class v extends T {
154
154
  ), this.store.patchCurrentBlockConfig(
155
155
  { mobileLayoutEnabled: !0 },
156
156
  { triggerRefetch: !1 }
157
- ), o && m(this.api, o, !1), C(this.api), b({
157
+ ), o && L(this.api, o, !1), C(this.api), b({
158
158
  currentNode: this.currentNode,
159
159
  documentModifier: this.api.getDocumentModifier()
160
160
  });
@@ -166,13 +166,13 @@ class v extends T {
166
166
  {
167
167
  mobileLayoutEnabled: !1,
168
168
  previousMobileCardsInRow: r,
169
- mobileCardsInRow: L
169
+ mobileCardsInRow: m
170
170
  },
171
171
  "Disabled mobile layout optimization"
172
172
  ), this.store.patchCurrentBlockConfig(
173
173
  { mobileLayoutEnabled: !1 },
174
174
  { triggerRefetch: !1 }
175
- ), o && m(this.api, o, !0), g({
175
+ ), o && L(this.api, o, !0), g({
176
176
  currentNode: this.currentNode,
177
177
  documentModifier: this.api.getDocumentModifier()
178
178
  });
@@ -180,32 +180,26 @@ class v extends T {
180
180
  this._setFormValues(), this._updateProductsInRowVisibility();
181
181
  }
182
182
  _onProductsInRowChange(t) {
183
- if (!this.currentNode || i.getConfig(this.currentNode).cardsInRow === t)
184
- return;
185
- const o = t === 1 ? 0 : P;
186
- i.updateConfig(
183
+ !this.currentNode || i.getConfig(this.currentNode).cardsInRow === t || (i.updateConfig(
187
184
  this.api,
188
185
  this.currentNode,
189
- { cardsInRow: t, columnSpacing: o },
186
+ { cardsInRow: t },
190
187
  `Changed products per row to ${t}`
191
- ), this.store.patchCurrentBlockConfig({ cardsInRow: t }, { triggerRefetch: !1 }), this._debouncedRegenerateProductRows();
188
+ ), this.store.patchCurrentBlockConfig({ cardsInRow: t }, { triggerRefetch: !1 }), this._debouncedRegenerateProductRows());
192
189
  }
193
190
  _onMobileCardsInRowChange(t) {
194
- if (!this.currentNode || i.getConfig(this.currentNode).mobileCardsInRow === t)
195
- return;
196
- const o = t === 1 ? 0 : y;
197
- i.updateConfig(
191
+ !this.currentNode || i.getConfig(this.currentNode).mobileCardsInRow === t || (i.updateConfig(
198
192
  this.api,
199
193
  this.currentNode,
200
- { mobileCardsInRow: t, mobileColumnSpacing: o },
194
+ { mobileCardsInRow: t },
201
195
  `Changed mobile products per row to ${t}`
202
196
  ), C(this.api), g({
203
197
  currentNode: this.currentNode,
204
198
  documentModifier: this.api.getDocumentModifier()
205
- });
199
+ }));
206
200
  }
207
201
  _regenerateProductRows() {
208
- const t = i.getConfig(this.currentNode), s = parseInt(t.size) || 6, o = A(this.store.recommendationProducts, s);
202
+ const t = i.getConfig(this.currentNode), s = parseInt(t.size) || 6, o = w(this.store.recommendationProducts, s);
209
203
  b({
210
204
  currentNode: this.currentNode,
211
205
  documentModifier: this.api.getDocumentModifier(),
@@ -241,7 +235,7 @@ class v extends T {
241
235
  */
242
236
  _listenEditorModeChanges() {
243
237
  this.api.onEditorStatePropUpdated(
244
- O.previewDeviceMode,
238
+ p.previewDeviceMode,
245
239
  () => {
246
240
  i.getConfig(this.currentNode).mobileLayoutEnabled && this._updateProductsInRowVisibility();
247
241
  }
@@ -249,6 +243,6 @@ class v extends T {
249
243
  }
250
244
  }
251
245
  export {
252
- S as PRODUCT_LAYOUT_CONTROL_ID,
253
- v as ProductLayoutControl
246
+ B as PRODUCT_LAYOUT_CONTROL_ID,
247
+ Y as ProductLayoutControl
254
248
  };