@useinsider/guido 2.0.0-beta.dbde199 → 2.0.0-beta.e66a90a

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 (117) hide show
  1. package/dist/@types/config/schemas.js +53 -39
  2. package/dist/components/organisms/email-preview/amp/AmpToggle.vue.js +2 -2
  3. package/dist/components/organisms/header/RightSlot.vue2.js +10 -10
  4. package/dist/composables/useConfig.js +29 -27
  5. package/dist/composables/useSave.js +13 -11
  6. package/dist/config/migrator/recommendationMigrator.js +2 -2
  7. package/dist/extensions/Blocks/Recommendation/block.js +1 -1
  8. package/dist/extensions/Blocks/Recommendation/constants/blockIds.js +4 -0
  9. package/dist/extensions/Blocks/Recommendation/constants/controlIds.js +4 -0
  10. package/dist/extensions/Blocks/Recommendation/constants/selectors.js +11 -0
  11. package/dist/extensions/Blocks/Recommendation/controls/button/index.js +64 -0
  12. package/dist/extensions/Blocks/Recommendation/controls/cardBackground/index.js +100 -0
  13. package/dist/extensions/Blocks/Recommendation/controls/cardComposition/index.js +243 -0
  14. package/dist/extensions/Blocks/Recommendation/controls/image/index.js +19 -0
  15. package/dist/extensions/Blocks/Recommendation/controls/layout/index.js +104 -0
  16. package/dist/extensions/Blocks/Recommendation/controls/main/algorithm.js +86 -0
  17. package/dist/extensions/Blocks/Recommendation/controls/main/currency.js +134 -0
  18. package/dist/extensions/Blocks/Recommendation/controls/main/filters.js +54 -0
  19. package/dist/extensions/Blocks/Recommendation/controls/main/index.js +106 -0
  20. package/dist/extensions/Blocks/Recommendation/controls/main/locale.js +64 -0
  21. package/dist/extensions/Blocks/Recommendation/controls/main/productLayout.js +123 -0
  22. package/dist/extensions/Blocks/Recommendation/controls/main/shuffle.js +60 -0
  23. package/dist/extensions/Blocks/Recommendation/controls/main/utils.js +112 -0
  24. package/dist/extensions/Blocks/Recommendation/controls/name/index.js +46 -0
  25. package/dist/extensions/Blocks/Recommendation/controls/name/textTrim.js +76 -0
  26. package/dist/extensions/Blocks/Recommendation/controls/oldPrice/index.js +44 -0
  27. package/dist/extensions/Blocks/Recommendation/controls/omnibusDiscount/index.js +48 -0
  28. package/dist/extensions/Blocks/Recommendation/controls/{omnibusDiscountTextAfterControl.js → omnibusDiscount/textAfter.js} +15 -13
  29. package/dist/extensions/Blocks/Recommendation/controls/{omnibusDiscountTextBeforeControl.js → omnibusDiscount/textBefore.js} +15 -13
  30. package/dist/extensions/Blocks/Recommendation/controls/omnibusPrice/index.js +48 -0
  31. package/dist/extensions/Blocks/Recommendation/controls/{omnibusPriceTextAfterControl.js → omnibusPrice/textAfter.js} +16 -14
  32. package/dist/extensions/Blocks/Recommendation/controls/{omnibusPriceTextBeforeControl.js → omnibusPrice/textBefore.js} +14 -12
  33. package/dist/extensions/Blocks/Recommendation/controls/price/index.js +44 -0
  34. package/dist/extensions/Blocks/Recommendation/controls/spacing/index.js +224 -0
  35. package/dist/extensions/Blocks/Recommendation/extension.js +40 -19
  36. package/dist/extensions/Blocks/Recommendation/recommendation.css.js +5 -0
  37. package/dist/extensions/Blocks/Recommendation/settingsPanel.js +46 -43
  38. package/dist/extensions/Blocks/Recommendation/store/recommendation.js +20 -20
  39. package/dist/extensions/Blocks/Recommendation/templates/horizontal/elementRenderer.js +157 -0
  40. package/dist/extensions/Blocks/Recommendation/templates/horizontal/template.js +72 -0
  41. package/dist/extensions/Blocks/Recommendation/templates/index.js +12 -0
  42. package/dist/extensions/Blocks/Recommendation/templates/utils.js +173 -0
  43. package/dist/extensions/Blocks/Recommendation/templates/vertical/elementRenderer.js +186 -0
  44. package/dist/extensions/Blocks/Recommendation/templates/vertical/migration.js +251 -0
  45. package/dist/extensions/Blocks/Recommendation/templates/vertical/template.js +61 -0
  46. package/dist/extensions/Blocks/Unsubscribe/extension.js +9 -9
  47. package/dist/extensions/Blocks/common-control.js +6 -7
  48. package/dist/extensions/Blocks/controlFactories.js +156 -122
  49. package/dist/guido.css +1 -1
  50. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js +110 -113
  51. package/dist/src/@types/config/index.d.ts +2 -2
  52. package/dist/src/@types/config/schemas.d.ts +26 -0
  53. package/dist/src/@types/config/types.d.ts +7 -1
  54. package/dist/src/composables/useConfig.d.ts +6 -0
  55. package/dist/src/extensions/Blocks/Recommendation/constants/blockIds.d.ts +13 -0
  56. package/dist/src/extensions/Blocks/Recommendation/{constants.d.ts → constants/controlIds.d.ts} +1 -33
  57. package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts +11 -0
  58. package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts +19 -0
  59. package/dist/src/extensions/Blocks/Recommendation/controls/button/index.d.ts +143 -0
  60. package/dist/src/extensions/Blocks/Recommendation/controls/{cardBackgroundColorControl.d.ts → cardBackground/index.d.ts} +19 -3
  61. package/dist/src/extensions/Blocks/Recommendation/{cardCompositionControl.d.ts → controls/cardComposition/index.d.ts} +23 -7
  62. package/dist/src/extensions/Blocks/Recommendation/controls/image/index.d.ts +35 -0
  63. package/dist/src/extensions/Blocks/Recommendation/controls/index.d.ts +21 -651
  64. package/dist/src/extensions/Blocks/Recommendation/controls/layout/index.d.ts +34 -0
  65. package/dist/src/extensions/Blocks/Recommendation/controls/main/algorithm.d.ts +17 -0
  66. package/dist/src/extensions/Blocks/Recommendation/controls/main/currency.d.ts +16 -0
  67. package/dist/src/extensions/Blocks/Recommendation/controls/main/filters.d.ts +22 -0
  68. package/dist/src/extensions/Blocks/Recommendation/controls/main/index.d.ts +54 -0
  69. package/dist/src/extensions/Blocks/Recommendation/controls/main/locale.d.ts +15 -0
  70. package/dist/src/extensions/Blocks/Recommendation/controls/main/productLayout.d.ts +40 -0
  71. package/dist/src/extensions/Blocks/Recommendation/controls/main/shuffle.d.ts +15 -0
  72. package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts +81 -0
  73. package/dist/src/extensions/Blocks/Recommendation/controls/name/index.d.ts +97 -0
  74. package/dist/src/extensions/Blocks/Recommendation/controls/{nameTextTrimControl.d.ts → name/textTrim.d.ts} +1 -1
  75. package/dist/src/extensions/Blocks/Recommendation/controls/oldPrice/index.d.ts +95 -0
  76. package/dist/src/extensions/Blocks/Recommendation/controls/omnibusDiscount/index.d.ts +100 -0
  77. package/dist/src/extensions/Blocks/Recommendation/controls/{omnibusDiscountTextAfterControl.d.ts → omnibusDiscount/textAfter.d.ts} +1 -1
  78. package/dist/src/extensions/Blocks/Recommendation/controls/{omnibusDiscountTextBeforeControl.d.ts → omnibusDiscount/textBefore.d.ts} +1 -1
  79. package/dist/src/extensions/Blocks/Recommendation/controls/omnibusPrice/index.d.ts +100 -0
  80. package/dist/src/extensions/Blocks/Recommendation/controls/{omnibusPriceTextAfterControl.d.ts → omnibusPrice/textAfter.d.ts} +1 -1
  81. package/dist/src/extensions/Blocks/Recommendation/controls/{omnibusPriceTextBeforeControl.d.ts → omnibusPrice/textBefore.d.ts} +1 -1
  82. package/dist/src/extensions/Blocks/Recommendation/controls/price/index.d.ts +95 -0
  83. package/dist/src/extensions/Blocks/Recommendation/controls/{spacingControl.d.ts → spacing/index.d.ts} +26 -9
  84. package/dist/src/extensions/Blocks/Recommendation/extension.d.ts +9 -0
  85. package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts +16 -16
  86. package/dist/src/extensions/Blocks/Recommendation/templates/horizontal/elementRenderer.d.ts +8 -0
  87. package/dist/src/extensions/Blocks/Recommendation/templates/horizontal/migration.d.ts +25 -0
  88. package/dist/src/extensions/Blocks/Recommendation/templates/horizontal/template.d.ts +18 -0
  89. package/dist/src/extensions/Blocks/Recommendation/templates/index.d.ts +39 -0
  90. package/dist/src/extensions/Blocks/Recommendation/templates/utils.d.ts +45 -0
  91. package/dist/src/extensions/Blocks/Recommendation/templates/vertical/elementRenderer.d.ts +7 -0
  92. package/dist/src/extensions/Blocks/Recommendation/templates/vertical/migration.d.ts +23 -0
  93. package/dist/src/extensions/Blocks/Recommendation/templates/vertical/template.d.ts +33 -0
  94. package/dist/src/extensions/Blocks/common-control.d.ts +1 -1
  95. package/dist/src/stores/config.d.ts +147 -1
  96. package/dist/static/styles/components/button.css.js +1 -1
  97. package/dist/static/styles/customEditorStyle.css.js +25 -2
  98. package/dist/stores/config.js +7 -0
  99. package/package.json +1 -1
  100. package/dist/extensions/Blocks/Recommendation/cardCompositionControl.js +0 -193
  101. package/dist/extensions/Blocks/Recommendation/constants.js +0 -14
  102. package/dist/extensions/Blocks/Recommendation/control.js +0 -336
  103. package/dist/extensions/Blocks/Recommendation/controls/cardBackgroundColorControl.js +0 -68
  104. package/dist/extensions/Blocks/Recommendation/controls/index.js +0 -272
  105. package/dist/extensions/Blocks/Recommendation/controls/nameTextTrimControl.js +0 -74
  106. package/dist/extensions/Blocks/Recommendation/controls/priceHideControl.js +0 -60
  107. package/dist/extensions/Blocks/Recommendation/controls/priceInlineLayoutControl.js +0 -160
  108. package/dist/extensions/Blocks/Recommendation/controls/spacingControl.js +0 -188
  109. package/dist/extensions/Blocks/Recommendation/templates/blockTemplate.js +0 -184
  110. package/dist/extensions/Blocks/Recommendation/templates/migrationTemplate.js +0 -189
  111. package/dist/extensions/Blocks/Recommendation/templates/templateUtils.js +0 -209
  112. package/dist/src/extensions/Blocks/Recommendation/control.d.ts +0 -38
  113. package/dist/src/extensions/Blocks/Recommendation/controls/priceHideControl.d.ts +0 -16
  114. package/dist/src/extensions/Blocks/Recommendation/controls/priceInlineLayoutControl.d.ts +0 -50
  115. package/dist/src/extensions/Blocks/Recommendation/templates/blockTemplate.d.ts +0 -16
  116. package/dist/src/extensions/Blocks/Recommendation/templates/migrationTemplate.d.ts +0 -16
  117. package/dist/src/extensions/Blocks/Recommendation/templates/templateUtils.d.ts +0 -52
@@ -1,74 +0,0 @@
1
- import { ModificationDescription as m } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
- import { CommonControl as c } from "../../common-control.js";
3
- import { RecommendationControlId as d, RecommendationBlockId as a } from "../constants.js";
4
- const n = {
5
- TEXT_TRIM_ENABLED: "textTrimEnabled"
6
- }, r = "text-trim-enabled", l = ".ins-recommendation-product-container";
7
- class E extends c {
8
- getId() {
9
- return d.NAME_TEXT_TRIM;
10
- }
11
- getTemplate() {
12
- return `
13
- <div class="name-text-trim-control-container">
14
- ${this._GuTwoColumns([
15
- this._GuLabel({ text: "Trim Long Text" }),
16
- this._GuToggle(n.TEXT_TRIM_ENABLED)
17
- ])}
18
- </div>
19
- `;
20
- }
21
- onRender() {
22
- this._setFormValues(), this._listenToFormUpdates();
23
- }
24
- onTemplateNodeUpdated(e) {
25
- super.onTemplateNodeUpdated(e), this._setFormValues();
26
- }
27
- _setFormValues() {
28
- const e = this._getCurrentTrimState();
29
- this.api.updateValues({
30
- [n.TEXT_TRIM_ENABLED]: e
31
- });
32
- }
33
- _getCurrentTrimState() {
34
- if (!this.currentNode || !("hasClass" in this.currentNode))
35
- return !1;
36
- if (this.currentNode.hasClass(r))
37
- return !0;
38
- const e = this.currentNode.closest(l);
39
- if (!e)
40
- return !1;
41
- const t = e.querySelector(
42
- `[esd-extension-block-id="${a.NAME}"]`
43
- );
44
- return t && "hasClass" in t ? t.hasClass(r) : !1;
45
- }
46
- _onTextTrimChange(e) {
47
- if (!this.currentNode || !("closest" in this.currentNode))
48
- return;
49
- const t = this.currentNode.closest(l);
50
- if (!t || !("querySelectorAll" in t))
51
- return;
52
- const s = Array.from(
53
- t.querySelectorAll(`[esd-extension-block-id="${a.NAME}"]`)
54
- );
55
- if (!s.length)
56
- return;
57
- const o = this.api.getDocumentModifier();
58
- s.forEach((i) => {
59
- e ? o.modifyHtml(i).setClass(r) : o.modifyHtml(i).removeClass(r);
60
- }), o.apply(
61
- new m(
62
- e ? "Enable product name text trimming" : "Disable product name text trimming"
63
- )
64
- );
65
- }
66
- _listenToFormUpdates() {
67
- this.api.onValueChanged(n.TEXT_TRIM_ENABLED, (e) => {
68
- this._onTextTrimChange(e);
69
- });
70
- }
71
- }
72
- export {
73
- E as NameTextTrimControl
74
- };
@@ -1,60 +0,0 @@
1
- import { ModificationDescription as n } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
- import { CommonControl as d } from "../../common-control.js";
3
- import { RecommendationControlId as c } from "../constants.js";
4
- const i = {
5
- HIDE_PRICE: "hidePriceIfSame"
6
- }, o = "hide-price", s = ".ins-recommendation-v3-block-v2";
7
- class h extends d {
8
- getId() {
9
- return c.PRICE_HIDE_IF_SAME;
10
- }
11
- getTemplate() {
12
- return `
13
- <div class="price-hide-control-container">
14
- ${this._GuTwoColumns([
15
- this._GuLabel({ text: "Hide if same as discounted" }),
16
- this._GuToggle(i.HIDE_PRICE)
17
- ])}
18
- </div>
19
- `;
20
- }
21
- onRender() {
22
- this._setFormValues(), this._listenToFormUpdates();
23
- }
24
- onTemplateNodeUpdated(e) {
25
- super.onTemplateNodeUpdated(e), this._setFormValues();
26
- }
27
- _setFormValues() {
28
- const e = this._getCurrentHideState();
29
- this.api.updateValues({
30
- [i.HIDE_PRICE]: e
31
- });
32
- }
33
- _getCurrentHideState() {
34
- if (!this.currentNode || !("closest" in this.currentNode))
35
- return !1;
36
- const e = this.currentNode.closest(s);
37
- return !e || !("getAttribute" in e) ? !1 : e.getAttribute(o) === "true";
38
- }
39
- _onHidePriceChange(e) {
40
- if (!this.currentNode || !("closest" in this.currentNode))
41
- return;
42
- const t = this.currentNode.closest(s);
43
- if (!t)
44
- return;
45
- const r = this.api.getDocumentModifier();
46
- r.modifyHtml(t).setAttribute(o, e ? "true" : "false"), r.apply(
47
- new n(
48
- e ? "Enable hide price if same as discounted" : "Disable hide price if same as discounted"
49
- )
50
- );
51
- }
52
- _listenToFormUpdates() {
53
- this.api.onValueChanged(i.HIDE_PRICE, (e) => {
54
- this._onHidePriceChange(e);
55
- });
56
- }
57
- }
58
- export {
59
- h as PriceHideControl
60
- };
@@ -1,160 +0,0 @@
1
- import { ModificationDescription as M } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
- import { CommonControl as w } from "../../common-control.js";
3
- import { RecommendationControlId as N, ATTR_DATA_PRICE_INLINE as E, RecommendationBlockId as g } from "../constants.js";
4
- const k = N.PRICE_INLINE_LAYOUT, b = ".recommendation-attribute-row", B = "tr.recommendation-product-row", m = "data-attribute-type", T = "data-inline-merged", C = "data-visibility";
5
- class V extends w {
6
- getId() {
7
- return k;
8
- }
9
- getTemplate() {
10
- return `
11
- <div class="container">
12
- ${this._GuTwoColumns([
13
- this._GuLabel({ text: "Move to Next Line" }),
14
- this._GuToggle("priceNextLine")
15
- ])}
16
- <div style="color: #666; font-size: 12px; margin-top: 8px; padding-left: 8px;">
17
- When disabled, Price and Old Price will appear side by side
18
- </div>
19
- </div>
20
- `;
21
- }
22
- onRender() {
23
- this._initializePriceInlineState(), this._registerValueChangeListener();
24
- }
25
- onTemplateNodeUpdated(e) {
26
- super.onTemplateNodeUpdated(e), this._initializePriceInlineState();
27
- }
28
- /**
29
- * Reads the current price inline state from the block's data attribute
30
- * and updates the toggle UI
31
- * Note: Toggle ON = separate rows (next line), Toggle OFF = inline (same row)
32
- */
33
- _initializePriceInlineState() {
34
- const r = !this._readPriceInlineState();
35
- this.api.updateValues({
36
- priceNextLine: r
37
- });
38
- }
39
- /**
40
- * Reads the price inline state from the block wrapper's data attribute
41
- */
42
- _readPriceInlineState() {
43
- if (!this.currentNode || !("getAttribute" in this.currentNode))
44
- return !1;
45
- const e = this.currentNode.getAttribute(E);
46
- return console.debug("inline attr", e), e === "1" || e === "true";
47
- }
48
- /**
49
- * Registers listener for toggle changes
50
- */
51
- _registerValueChangeListener() {
52
- this.api.onValueChanged("priceNextLine", (e) => {
53
- const r = !e;
54
- this._applyPriceInlineLayout(r);
55
- });
56
- }
57
- /**
58
- * Applies the price inline layout by restructuring the DOM
59
- * When enabling inline: Merges Old Price content into Price row (side by side)
60
- * When disabling inline: Separates them back into individual rows
61
- */
62
- _applyPriceInlineLayout(e) {
63
- if (!this.currentNode)
64
- return;
65
- this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(E, e ? "1" : "0").apply(new M("Update price inline attribute"));
66
- const r = this.currentNode.querySelectorAll(B);
67
- if (!(r != null && r.length))
68
- return;
69
- const i = this.api.getDocumentModifier();
70
- r.forEach((t) => {
71
- e ? this._mergeOldPriceIntoPrice(t, i) : this._separateOldPriceFromPrice(t, i);
72
- }), i.apply(new M(
73
- e ? "Merge price rows into inline layout" : "Separate price rows"
74
- ));
75
- }
76
- /**
77
- * Merges Old Price content into the same row as Price (inline layout)
78
- * Creates a structure where both prices are side by side in one row
79
- */
80
- _mergeOldPriceIntoPrice(e, r) {
81
- const i = e.querySelector(
82
- `${b}[${m}="productPrice"]`
83
- ), t = e.querySelector(
84
- `${b}[${m}="productOldPrice"]`
85
- );
86
- if (!i || !t || "getAttribute" in t && t.getAttribute(T) === "1" || !("querySelectorAll" in i) || !("querySelectorAll" in t))
87
- return;
88
- const a = Array.from(i.querySelectorAll("table.product-card-wrapper")), u = Array.from(t.querySelectorAll("table.product-card-wrapper"));
89
- a.length !== u.length || a.length === 0 || (a.forEach((o, _) => {
90
- const s = u[_];
91
- if (!o || !s || !("querySelector" in o) || !("querySelector" in s))
92
- return;
93
- const c = `[esd-extension-block-id="${g.PRICE}"]`, f = `[esd-extension-block-id="${g.OLD_PRICE}"]`, n = o.querySelector(c), l = s.querySelector(f);
94
- if (!n || !l || !("getOuterHTML" in n) || !("getOuterHTML" in l))
95
- return;
96
- const h = n.getOuterHTML(), P = `
97
- <tr data-inline-price-wrapper="1">
98
- <td width="50%" style="vertical-align: middle;">
99
- <table width="100%" cellpadding="0" cellspacing="0" border="0">
100
- <tbody>
101
- <tr><td>${l.getOuterHTML()}</td></tr>
102
- </tbody>
103
- </table>
104
- </td>
105
- <td width="50%" style="vertical-align: middle;">
106
- <table width="100%" cellpadding="0" cellspacing="0" border="0">
107
- <tbody>
108
- <tr><td>${h}</td></tr>
109
- </tbody>
110
- </table>
111
- </td>
112
- </tr>
113
- `, y = o.querySelector(".product-attribute-cell");
114
- if (!y)
115
- return;
116
- const d = y.querySelector("tbody");
117
- d && r.modifyHtml(d).setInnerHtml(P);
118
- }), r.modifyHtml(t).setStyle("display", "none").setAttribute(T, "1"));
119
- }
120
- /**
121
- * Separates Old Price from Price row back into individual rows
122
- * Restores the original separate row structure
123
- */
124
- _separateOldPriceFromPrice(e, r) {
125
- const i = e.querySelector(
126
- `${b}[${m}="productPrice"]`
127
- ), t = e.querySelector(
128
- `${b}[${m}="productOldPrice"]`
129
- );
130
- if (!i || !t || !("getAttribute" in t) || !(t.getAttribute(T) === "1") || !("querySelectorAll" in i) || !("querySelectorAll" in t))
131
- return;
132
- const u = Array.from(i.querySelectorAll("table.product-card-wrapper")), o = Array.from(t.querySelectorAll("table.product-card-wrapper"));
133
- u.forEach((c, f) => {
134
- if (!c || !("querySelector" in c))
135
- return;
136
- const n = o[f];
137
- if (!n || !("querySelector" in n))
138
- return;
139
- const l = c.querySelector('[data-inline-price-wrapper="1"]');
140
- if (!l || !("querySelectorAll" in l))
141
- return;
142
- const p = Array.from(l.querySelectorAll("td")).filter((O) => "getAttribute" in O && O.getAttribute("width") === "50%");
143
- if (p.length !== 2)
144
- return;
145
- const P = `[esd-extension-block-id="${g.OLD_PRICE}"]`, y = `[esd-extension-block-id="${g.PRICE}"]`, d = p[0].querySelector(P), A = p[1].querySelector(y);
146
- if (!d || !A || !("getOuterHTML" in d) || !("getOuterHTML" in A))
147
- return;
148
- const H = A.getOuterHTML(), R = d.getOuterHTML(), S = c.querySelector(".product-attribute-cell"), L = S == null ? void 0 : S.querySelector("tbody");
149
- L && r.modifyHtml(L).setInnerHtml(`<tr><td>${H}</td></tr>`);
150
- const I = n.querySelector(".product-attribute-cell"), q = I == null ? void 0 : I.querySelector("tbody");
151
- q && r.modifyHtml(q).setInnerHtml(`<tr><td>${R}</td></tr>`);
152
- });
153
- const s = t.getAttribute(C) === "0" ? "none" : "table-row";
154
- r.modifyHtml(t).setStyle("display", s).removeAttribute(T);
155
- }
156
- }
157
- export {
158
- k as PRICE_INLINE_LAYOUT_CONTROL_ID,
159
- V as PriceInlineLayoutControl
160
- };
@@ -1,188 +0,0 @@
1
- var C = Object.defineProperty;
2
- var g = (i, r, e) => r in i ? C(i, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[r] = e;
3
- var S = (i, r, e) => g(i, typeof r != "symbol" ? r + "" : r, e);
4
- import { ModificationDescription as l } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
- import { CommonControl as m } from "../../common-control.js";
6
- import { useDebounceFn as d } from "../../../../node_modules/@vueuse/shared/index.js";
7
- const _ = "recommendation-spacing-control", c = {
8
- COLUMN_SPACING: "columnSpacing",
9
- ROW_SPACING: "rowSpacing"
10
- }, N = {
11
- COLUMN_SPACING: "data-column-spacing",
12
- ROW_SPACING: "data-row-spacing"
13
- }, n = {
14
- COLUMN_SPACING: 10,
15
- // 5px on each side = 10px total
16
- ROW_SPACING: 20
17
- }, p = {
18
- MIN_SPACING: 0,
19
- MAX_SPACING: 50,
20
- STEP: 5
21
- };
22
- class G extends m {
23
- constructor() {
24
- super(...arguments);
25
- /**
26
- * Debounced version of _onColumnSpacingChange
27
- * Prevents excessive DOM updates when user rapidly adjusts the counter
28
- */
29
- S(this, "_debouncedOnColumnSpacingChange", d((e) => {
30
- this._onColumnSpacingChange(e);
31
- }, 300));
32
- /**
33
- * Debounced version of _onRowSpacingChange
34
- * Prevents excessive DOM updates when user rapidly adjusts the counter
35
- */
36
- S(this, "_debouncedOnRowSpacingChange", d((e) => {
37
- this._onRowSpacingChange(e);
38
- }, 300));
39
- }
40
- getId() {
41
- return _;
42
- }
43
- getTemplate() {
44
- return `
45
- <div class="spacing-control-container">
46
- ${this._GuTwoColumns([
47
- this._GuLabel({ text: "Column Spacing (px)" }),
48
- this._GuCounter({
49
- name: c.COLUMN_SPACING,
50
- minValue: p.MIN_SPACING,
51
- maxValue: p.MAX_SPACING,
52
- step: p.STEP
53
- }),
54
- this._GuLabel({ text: "Row Spacing (px)" }),
55
- this._GuCounter({
56
- name: c.ROW_SPACING,
57
- minValue: p.MIN_SPACING,
58
- maxValue: p.MAX_SPACING,
59
- step: p.STEP
60
- })
61
- ])}
62
- </div>
63
- `;
64
- }
65
- onRender() {
66
- this._setFormValues(), this._listenToFormUpdates();
67
- }
68
- onTemplateNodeUpdated(e) {
69
- super.onTemplateNodeUpdated(e), this._setFormValues();
70
- }
71
- /**
72
- * Reads spacing values from data attributes or returns defaults
73
- */
74
- _setFormValues() {
75
- const e = this._getStoredColumnSpacing(), t = this._getStoredRowSpacing();
76
- this.api.updateValues({
77
- [c.COLUMN_SPACING]: e,
78
- [c.ROW_SPACING]: t
79
- });
80
- }
81
- /**
82
- * Gets stored column spacing from the first product card wrapper's parent element's padding
83
- * Reads the actual padding value instead of relying on data attributes
84
- *
85
- * The padding is applied as "0 {halfSpacing}px" on the parent TD element,
86
- * so we need to extract the horizontal padding value and multiply by 2 to get total spacing.
87
- */
88
- _getStoredColumnSpacing() {
89
- if (!this.currentNode)
90
- return n.COLUMN_SPACING;
91
- const e = this.currentNode.querySelector(".product-card-wrapper");
92
- if (!e || !("parent" in e) || typeof e.parent != "function")
93
- return n.COLUMN_SPACING;
94
- const t = e.parent();
95
- if (!t || !("getStyle" in t))
96
- return n.COLUMN_SPACING;
97
- const o = t.getStyle("padding");
98
- if (!o)
99
- return n.COLUMN_SPACING;
100
- const u = o.trim().split(/\s+/);
101
- if (u.length < 2)
102
- return n.COLUMN_SPACING;
103
- const [, a] = u, s = parseFloat(a);
104
- return Number.isNaN(s) ? n.COLUMN_SPACING : s * 2;
105
- }
106
- /**
107
- * Gets stored row spacing from the first spacer element's height style
108
- * Reads the actual height value instead of relying on data attributes
109
- */
110
- _getStoredRowSpacing() {
111
- if (!this.currentNode)
112
- return n.ROW_SPACING;
113
- const e = this.currentNode.querySelector(".spacer");
114
- if (!e || !("getStyle" in e))
115
- return n.ROW_SPACING;
116
- const t = e.getStyle("height");
117
- if (!t)
118
- return n.ROW_SPACING;
119
- const o = parseFloat(t);
120
- return Number.isNaN(o) ? n.ROW_SPACING : o;
121
- }
122
- /**
123
- * Handles column spacing changes
124
- * Applies horizontal padding to all product card wrappers
125
- */
126
- _onColumnSpacingChange(e) {
127
- if (!this.currentNode)
128
- return;
129
- const t = Array.from(
130
- this.currentNode.querySelectorAll(".product-card-wrapper")
131
- );
132
- if (!t)
133
- return;
134
- const o = this.api.getDocumentModifier(), a = `0 ${e / 2}px`;
135
- console.debug("padding", a), t.forEach((s) => {
136
- "parent" in s && s.parent() && o.modifyHtml(s.parent()).setStyle("padding", a);
137
- }), o.apply(new l(`Update column spacing to ${e}px`));
138
- }
139
- /**
140
- * Handles row spacing changes
141
- * Applies height to all spacer elements between product rows
142
- */
143
- _onRowSpacingChange(e) {
144
- if (!this.currentNode)
145
- return;
146
- this._storeRowSpacing(e);
147
- const t = Array.from(
148
- this.currentNode.querySelectorAll(".spacer")
149
- );
150
- if (console.debug("spacerCells", t), console.debug("spacing", e), !t.length)
151
- return;
152
- const o = this.api.getDocumentModifier(), u = `${e}px`;
153
- t.forEach((a) => {
154
- o.modifyHtml(a).setStyle("height", u);
155
- }), o.apply(new l(`Update row spacing to ${e}px`));
156
- }
157
- /**
158
- * Stores column spacing value in block data attribute
159
- */
160
- _storeColumnSpacing(e) {
161
- if (!this.currentNode)
162
- return;
163
- const t = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
164
- t && this.api.getDocumentModifier().modifyHtml(t).setAttribute(N.COLUMN_SPACING, e.toString()).apply(new l("Store column spacing"));
165
- }
166
- /**
167
- * Stores row spacing value in block data attribute
168
- */
169
- _storeRowSpacing(e) {
170
- if (!this.currentNode)
171
- return;
172
- const t = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
173
- t && this.api.getDocumentModifier().modifyHtml(t).setAttribute(N.ROW_SPACING, e.toString()).apply(new l("Store row spacing"));
174
- }
175
- _listenToFormUpdates() {
176
- this.api.onValueChanged(c.COLUMN_SPACING, (e) => {
177
- const t = parseInt(e);
178
- Number.isNaN(t) || this._debouncedOnColumnSpacingChange(t);
179
- }), this.api.onValueChanged(c.ROW_SPACING, (e) => {
180
- const t = parseInt(e);
181
- Number.isNaN(t) || this._debouncedOnRowSpacingChange(t);
182
- });
183
- }
184
- }
185
- export {
186
- _ as SPACING_CONTROL_ID,
187
- G as SpacingControl
188
- };
@@ -1,184 +0,0 @@
1
- import { BlockType as e, BlockAttr as o } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
- import { RecommendationBlockId as s, ATTR_PRODUCT_BUTTON as r, ATTR_PRODUCT_OMNIBUS_DISCOUNT as c, ATTR_PRODUCT_OMNIBUS_PRICE as p, ATTR_PRODUCT_OLD_PRICE as i, ATTR_PRODUCT_PRICE as d, ATTR_PRODUCT_NAME as T, ATTR_PRODUCT_IMAGE as b, ATTR_DATA_PRICE_INLINE as _ } from "../constants.js";
3
- import { generateTemplate as O, prepareProductRows as u, spacer as C, DEFAULTS as f, getDefaultProducts as R } from "./templateUtils.js";
4
- import { DEFAULT_CARD_COMPOSITION as A, DEFAULT_CARD_VISIBILITY as h } from "./templateUtils.js";
5
- const g = `
6
- <td
7
- align="left"
8
- class="ins-recommendation-v3-block-v2 es-p20"
9
- ${_}="0">
10
- <table width="100%" cellpadding="0" cellspacing="0" border="0">
11
- <tr>
12
- <td align="center">
13
- <table
14
- class="container"
15
- width="100%"
16
- cellpadding="0"
17
- cellspacing="0"
18
- border="0">
19
- <tbody>
20
- <tr>
21
- <td>
22
- <table
23
- width="100%"
24
- cellpadding="0"
25
- cellspacing="0"
26
- border="0">
27
- <tbody>
28
- <${e.BLOCK_TEXT}
29
- class="es-p10t es-p10b es-p20l es-p20r"
30
- align="center">
31
- <p path="1" style="font-size: 28px; color: #333333;">
32
- <strong path="1,0">{-{-TITLE-}-}</strong>
33
- </p>
34
- </${e.BLOCK_TEXT}>
35
- </tbody>
36
- </table>
37
- </td>
38
- </tr>
39
- ${C}
40
- <tr>
41
- <td>
42
- <table
43
- class="ins-recommendation-product-container"
44
- width="100%"
45
- cellpadding="0"
46
- cellspacing="0"
47
- border="0"
48
- >
49
- {-{-PRODUCT_ROWS-}-}
50
- </table>
51
- </td>
52
- </tr>
53
- </tbody>
54
- </table>
55
- </td>
56
- </tr>
57
- </table>
58
- </td>
59
- `, n = {
60
- [b]: (t) => `
61
- <${e.BLOCK_IMAGE}
62
- ${o.BLOCK_IMAGE.src}="${t.image_url}"
63
- ${o.BLOCK_IMAGE.alt}="${t.name}"
64
- ${o.BLOCK_IMAGE.href}="#"
65
- class="product-image"
66
- align="center"
67
- style="max-width: 100%; height: auto; margin: 0 auto;"
68
- esd-extension-block-id="${s.IMAGE}">
69
- </${e.BLOCK_IMAGE}>
70
- `,
71
- [T]: (t) => `
72
- <${e.BLOCK_TEXT}
73
- class="product-name es-p10t es-p10b es-p15l es-p15r"
74
- align="center"
75
- esd-extension-block-id="${s.NAME}">
76
- <p path="1" contenteditable="false" style="font-size: 16px; color: #333333;">
77
- <strong path="1,0">${t.name}</strong>
78
- </p>
79
- </${e.BLOCK_TEXT}>
80
- `,
81
- [d]: () => `
82
- <${e.BLOCK_TEXT}
83
- class="product-price es-p15l es-p15r"
84
- align="center"
85
- esd-extension-block-id="${s.PRICE}">
86
- <p path="1" contenteditable="false" style="font-size: 16px; color: #333333;">
87
- <strong path="1,0">18,00 TRY</strong>
88
- </p>
89
- </${e.BLOCK_TEXT}>
90
- `,
91
- [i]: () => `
92
- <${e.BLOCK_TEXT}
93
- class="product-old-price es-p15l es-p15r"
94
- align="center"
95
- esd-extension-block-id="${s.OLD_PRICE}">
96
- <p path="1" contenteditable="false" style="font-size: 14px; color: #999999;">
97
- <s path="1,0">20,00 TRY</s>
98
- </p>
99
- </${e.BLOCK_TEXT}>
100
- `,
101
- [p]: () => `
102
- <${e.BLOCK_TEXT}
103
- class="product-omnibus-price es-p15l es-p15r"
104
- align="center"
105
- data-text-before="Lowest 30-day price: "
106
- data-text-after=""
107
- esd-extension-block-id="${s.OMNIBUS_PRICE}">
108
- <p path="1" contenteditable="false" style="font-size: 12px; color: #666666;">
109
- <span class="omnibus-text-before">Lowest 30-day price: </span>
110
- <span class="omnibus-price-value">17,00 TRY</span>
111
- <span class="omnibus-text-after"></span>
112
- </p>
113
- </${e.BLOCK_TEXT}>
114
- `,
115
- [c]: () => `
116
- <${e.BLOCK_TEXT}
117
- class="product-omnibus-discount es-p15l es-p15r"
118
- align="center"
119
- data-text-before=""
120
- data-text-after=""
121
- esd-extension-block-id="${s.OMNIBUS_DISCOUNT}">
122
- <p path="1" contenteditable="false" style="font-size: 12px; color: #666666;">
123
- <span class="omnibus-text-before"></span>
124
- <span class="omnibus-discount-value">-6%</span>
125
- <span class="omnibus-text-after"></span>
126
- </p>
127
- </${e.BLOCK_TEXT}>
128
- `,
129
- [r]: () => `
130
- <${e.BLOCK_BUTTON}
131
- ${o.BLOCK_BUTTON.href}="#"
132
- class="product-button es-p10t es-p10b"
133
- align="center"
134
- esd-extension-block-id="${s.BUTTON}">
135
- <span class="es-button-border">
136
- <a
137
- href="#"
138
- class="es-button buy-button"
139
- target="_blank"
140
- style="
141
- display: inline-block;
142
- width: 90%;
143
- max-width: 150px;
144
- padding: 12px 20px;
145
- background-color: #ffffff;
146
- color: #333333;
147
- text-decoration: none;
148
- border: 2px solid #cccccc;
149
- font-size: 16px;
150
- box-sizing: border-box;
151
- ">
152
- Buy
153
- </a>
154
- </span>
155
- </${e.BLOCK_BUTTON}>
156
- `
157
- };
158
- function x() {
159
- const t = R();
160
- return O(
161
- g,
162
- t,
163
- 3,
164
- n,
165
- f.TITLE
166
- );
167
- }
168
- function $(t, a, l) {
169
- return u(
170
- t,
171
- a,
172
- n,
173
- l
174
- );
175
- }
176
- export {
177
- f as DEFAULTS,
178
- A as DEFAULT_CARD_COMPOSITION,
179
- h as DEFAULT_CARD_VISIBILITY,
180
- g as default,
181
- R as getDefaultProducts,
182
- x as getDefaultTemplate,
183
- $ as prepareProductRows
184
- };