@useinsider/guido 1.0.3-beta.f2389d0 → 1.0.3-beta.f263f71

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 (26) hide show
  1. package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue.js +8 -8
  2. package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue2.js +2 -2
  3. package/dist/extensions/Blocks/Items/controls/name/trimming.js +25 -25
  4. package/dist/extensions/Blocks/Items/controls/settingsControl.js +90 -94
  5. package/dist/extensions/Blocks/Items/enums/controlEnums.js +2 -2
  6. package/dist/extensions/Blocks/Items/enums/productEnums.js +2 -3
  7. package/dist/extensions/Blocks/Items/enums/settingsEnums.js +2 -3
  8. package/dist/extensions/Blocks/Items/extension.js +6 -7
  9. package/dist/extensions/Blocks/Items/layouts/horizontal.html.js +2 -2
  10. package/dist/extensions/Blocks/Items/layouts/vertical.html.js +5 -17
  11. package/dist/extensions/Blocks/Items/settingsPanel.js +24 -25
  12. package/dist/extensions/Blocks/Items/store/items-block.js +4 -8
  13. package/dist/extensions/Blocks/Items/template.js +59 -65
  14. package/dist/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.js +26 -35
  15. package/dist/extensions/Blocks/Items/utils/updateAttributes.js +27 -29
  16. package/dist/extensions/Blocks/Unsubscribe/block.js +30 -34
  17. package/dist/guido.css +1 -1
  18. package/dist/src/extensions/Blocks/Items/enums/controlEnums.d.ts +0 -1
  19. package/dist/src/extensions/Blocks/Items/enums/productEnums.d.ts +0 -1
  20. package/dist/src/extensions/Blocks/Items/enums/settingsEnums.d.ts +0 -1
  21. package/dist/src/extensions/Blocks/Items/store/items-block.d.ts +0 -2
  22. package/dist/src/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.d.ts +0 -6
  23. package/dist/src/extensions/Blocks/Unsubscribe/block.d.ts +4 -3
  24. package/package.json +1 -3
  25. package/dist/extensions/Blocks/Items/controls/price/priceOrientation.js +0 -92
  26. package/dist/src/extensions/Blocks/Items/controls/price/priceOrientation.d.ts +0 -15
@@ -1,17 +1,17 @@
1
- var d = Object.defineProperty;
2
- var _ = (n, i, e) => i in n ? d(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
3
- var u = (n, i, e) => _(n, typeof i != "symbol" ? i + "" : i, e);
1
+ var _ = Object.defineProperty;
2
+ var S = (n, i, e) => i in n ? _(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
3
+ var u = (n, i, e) => S(n, typeof i != "symbol" ? i + "" : i, e);
4
4
  import { PAGE_TYPES as E } from "../../../enums/unsubscribe.js";
5
5
  import { useUnsubscribeStore as c } from "../../../stores/unsubscribe.js";
6
- import { Block as h, BlockCompositionType as S, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
7
- import { getDefaultTemplate as L } from "./template.js";
6
+ import { Block as d, BlockCompositionType as L, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
7
+ import { getDefaultTemplate as h } from "./template.js";
8
8
  import { UNSUBSCRIBE_EVENTS as a, DATA_ATTRIBUTES as o } from "./utils/constants.js";
9
- import { parsePageList as p } from "./utils/utils.js";
10
- const g = "unsubscribe-block", v = 'a[data-unsubscribe-link="true"]', f = ".unsubscribe-block-v2", B = "{{ins-unsubscribe-link}}", T = {
9
+ import { parsePageList as m } from "./utils/utils.js";
10
+ const v = "unsubscribe-block", g = 'a[data-unsubscribe-link="true"]', T = ".unsubscribe-block-v2", f = "{{ins-unsubscribe-link}}", B = {
11
11
  [E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
12
12
  [E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
13
13
  };
14
- class R extends h {
14
+ class D extends d {
15
15
  constructor() {
16
16
  super();
17
17
  u(this, "selectEventListener", null);
@@ -19,13 +19,13 @@ class R extends h {
19
19
  u(this, "currentNode");
20
20
  }
21
21
  getId() {
22
- return g;
22
+ return v;
23
23
  }
24
24
  getIcon() {
25
25
  return "unsubscribe-icon";
26
26
  }
27
27
  getBlockCompositionType() {
28
- return S.BLOCK;
28
+ return L.BLOCK;
29
29
  }
30
30
  getName() {
31
31
  return this.api.translate("Unsubscribe Block");
@@ -34,10 +34,13 @@ class R extends h {
34
34
  return this.api.translate("Unsubscribe Block Description");
35
35
  }
36
36
  getTemplate() {
37
- return L();
37
+ return h();
38
+ }
39
+ onCreated(e) {
40
+ "getOuterHTML" in e && !e.getOuterHTML() || "getAttribute" in e && e.getAttribute("data-migration") || (this.currentNode = e, this._resetStoreState(), this._setupSelectEventListener(), this._setupCancelEventListener(), this._checkExistingBlocks(), this._openDrawer());
38
41
  }
39
42
  onSelect(e) {
40
- this.currentNode = e, !("getAttribute" in e && e.getAttribute("data-migration")) && (this._resetStoreState(), this._loadBlockState(e), this._setupSelectEventListener(), this._setupCancelEventListener(), this._checkExistingBlocks(), this._openDrawer());
43
+ this.currentNode = e, this._resetStoreState(), this._loadBlockState(e), this._setupSelectEventListener();
41
44
  }
42
45
  onDelete(e) {
43
46
  this._removeEventListeners(), this._removeBlockTemplatesFromStore(e), this._resetStoreState();
@@ -63,13 +66,7 @@ class R extends h {
63
66
  this.cancelEventListener && (document.removeEventListener(a.CANCEL, this.cancelEventListener), this.cancelEventListener = null);
64
67
  }
65
68
  _handleCancel() {
66
- try {
67
- if (!this.currentNode)
68
- return;
69
- this.api.getDocumentModifier().modifyHtml(this.currentNode).delete().apply(new b("Removed unsubscribe block due to cancel"));
70
- } catch (e) {
71
- console.warn("[UnsubscribeBlock] Failed to remove unsubscribe block:", e);
72
- }
69
+ this.currentNode && this.api.getDocumentModifier().modifyHtml(this.currentNode).delete().apply(new b("Removed unsubscribe block due to cancel"));
73
70
  }
74
71
  _removeEventListeners() {
75
72
  this._removeSelectEventListener(), this._removeCancelEventListener();
@@ -77,27 +74,26 @@ class R extends h {
77
74
  _updateBlock(e, s) {
78
75
  if (!this.currentNode || !("querySelector" in this.currentNode))
79
76
  return;
80
- const t = this.currentNode.querySelector(v);
77
+ const t = this.currentNode.querySelector(g);
81
78
  if (!t)
82
79
  return;
83
80
  const r = this._getMergeTag(e);
84
81
  this.api.getDocumentModifier().modifyHtml(t).setAttribute("href", r).apply(new b(`Updated unsubscribe link to ${r}`)), this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(o.PAGE_TYPE, e.toString()).setAttribute(o.PAGE_LIST, s).apply(new b("Updated unsubscribe block metadata"));
85
82
  }
86
83
  _getMergeTag(e) {
87
- return T[e] ?? B;
84
+ return B[e] ?? f;
88
85
  }
89
86
  _openDrawer() {
90
- if (!(this.currentNode && this.currentNode.getAttribute("data-unsubscribe-page-type")))
91
- try {
92
- const e = c();
93
- e.typeSelectionDrawerStatus = !0;
94
- } catch (e) {
95
- console.error("[UnsubscribeBlock] Failed to open drawer:", e);
96
- }
87
+ try {
88
+ const e = c();
89
+ e.typeSelectionDrawerStatus = !0;
90
+ } catch (e) {
91
+ console.error("[UnsubscribeBlock] Failed to open drawer:", e);
92
+ }
97
93
  }
98
94
  _checkExistingBlocks() {
99
95
  const e = c();
100
- e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(f).forEach((t) => {
96
+ e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(T).forEach((t) => {
101
97
  if ("getAttribute" in t) {
102
98
  const r = t.getAttribute(o.PAGE_TYPE);
103
99
  if (r) {
@@ -113,8 +109,8 @@ class R extends h {
113
109
  const s = e.getAttribute(o.PAGE_TYPE), t = e.getAttribute(o.PAGE_LIST);
114
110
  if (!s || !t)
115
111
  return;
116
- const r = c(), l = Number(s), m = p(t);
117
- r.setCollectionWithoutAutoSelection(l), r.loadSelectedTemplates(m);
112
+ const r = c(), l = Number(s), p = m(t);
113
+ r.setCollectionWithoutAutoSelection(l), r.loadSelectedTemplates(p);
118
114
  }
119
115
  _resetStoreState() {
120
116
  c().$reset();
@@ -125,11 +121,11 @@ class R extends h {
125
121
  const s = e.getAttribute(o.PAGE_LIST);
126
122
  if (!s)
127
123
  return;
128
- const t = c(), r = p(s);
124
+ const t = c(), r = m(s);
129
125
  t.removeUnsubscribePages(r);
130
126
  }
131
127
  }
132
128
  export {
133
- g as UNSUBSCRIBE_BLOCK_ID,
134
- R as UnsubscribeBlock
129
+ v as UNSUBSCRIBE_BLOCK_ID,
130
+ D as UnsubscribeBlock
135
131
  };
package/dist/guido.css CHANGED
@@ -1 +1 @@
1
- .gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-0502bceb] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-98181b5a]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-98181b5a]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-98181b5a]{height:calc(100vh - 75px)}[data-v-70835920] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-dd57102d] .guido__verion-history-view-option-selection-desktop svg,[data-v-dd57102d] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-dd57102d] .in-segments-wrapper__button_selected,[data-v-dd57102d] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-7a09985c]{gap:16px}[data-v-c2adc57d] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-2dd60b0c],[data-v-2dd60b0c] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-f20b3a9b]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-v-d3c52b44] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}
1
+ .gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-0502bceb] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-98181b5a]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-98181b5a]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-98181b5a]{height:calc(100vh - 75px)}[data-v-70835920] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-dd57102d] .guido__verion-history-view-option-selection-desktop svg,[data-v-dd57102d] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-dd57102d] .in-segments-wrapper__button_selected,[data-v-dd57102d] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-7a09985c]{gap:16px}[data-v-d562c73b] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-2dd60b0c],[data-v-2dd60b0c] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-f20b3a9b]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-v-d3c52b44] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}
@@ -44,7 +44,6 @@ export declare enum ItemsBlockControlId {
44
44
  PRICE_FORMATTED_PRICE = "items-block-price-formatted-price-control",
45
45
  PRICE_CURRENCY_SYMBOL = "items-block-price-currency-symbol-control",
46
46
  PRICE_CURRENCY_LOCATION = "items-block-price-currency-location-control",
47
- PRICE_ORIENTATION = "items-block-price-orientation-control",
48
47
  NAME_ALIGN = "items-block-name-align-control",
49
48
  NAME_COLOR = "items-block-name-color-control",
50
49
  NAME_SIZE = "items-block-name-size-control",
@@ -8,7 +8,6 @@ export declare const configAttributes: {
8
8
  PRODUCT_PRICE_FORMATTED: string;
9
9
  PRODUCT_PRICE_CURRENCY_SYMBOL: string;
10
10
  PRODUCT_PRICE_CURRENCY_LOCATION: string;
11
- PRODUCT_ORIGINAL_PRICE_CONTROL_ORIENTATION: string;
12
11
  PRODUCT_BUTTON_LINK: string;
13
12
  PRODUCT_IMAGE_LINK: string;
14
13
  PRODUCT_NAME_CONTROL_VALUE: string;
@@ -40,7 +40,6 @@ export declare const DefaultConfigValues: {
40
40
  productPriceVisible: string;
41
41
  productOriginalPriceVisible: string;
42
42
  productButtonVisible: string;
43
- productImageWidth: string;
44
43
  };
45
44
  export declare const ItemInCartOptions: {
46
45
  [x: string]: {
@@ -10,7 +10,6 @@ interface ItemsBlockState {
10
10
  currencySymbol: string;
11
11
  currencyLocation: string;
12
12
  formattedPrice: boolean;
13
- priceOrientation: 'vertical' | 'horizontal';
14
13
  templateData: {
15
14
  imageSrc: string;
16
15
  name: string;
@@ -31,7 +30,6 @@ export declare const useItemsBlockStore: import("pinia").StoreDefinition<"guidoI
31
30
  setCurrencySymbol(currencySymbol: string): void;
32
31
  setCurrencyLocation(currencyLocation: string): void;
33
32
  setFormattedPrice(formattedPrice: boolean): void;
34
- setPriceOrientation(priceOrientation: "vertical" | "horizontal"): void;
35
33
  setTemplateData(templateData: ItemsBlockState["templateData"]): void;
36
34
  updateFromAttributes(attributes: {
37
35
  itemsType?: string;
@@ -42,9 +42,3 @@ export declare function syncButtonLinkFromAttributes(currentNode: ImmutableHtmlN
42
42
  * @param currentNode - The current node from the control (usually this.currentNode)
43
43
  */
44
44
  export declare function syncImageLinkFromAttributes(currentNode: ImmutableHtmlNode | undefined): void;
45
- /**
46
- * Reads price orientation value from esd-config-block attribute and updates the store.
47
- * This makes the price orientation value mutable by syncing it from the DOM.
48
- * @param currentNode - The current node from the control (usually this.currentNode)
49
- */
50
- export declare function syncPriceOrientationFromAttributes(currentNode: ImmutableHtmlNode | undefined): void;
@@ -1,4 +1,4 @@
1
- import type { ImmutableHtmlElementNode } from '@stripoinc/ui-editor-extensions';
1
+ import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
2
2
  import { Block, BlockCompositionType } from '@stripoinc/ui-editor-extensions';
3
3
  export declare const UNSUBSCRIBE_BLOCK_ID = "unsubscribe-block";
4
4
  export declare class UnsubscribeBlock extends Block {
@@ -12,8 +12,9 @@ export declare class UnsubscribeBlock extends Block {
12
12
  getName(): string;
13
13
  getDescription(): string;
14
14
  getTemplate(): string;
15
- onSelect(node: ImmutableHtmlElementNode): void;
16
- onDelete(node: ImmutableHtmlElementNode): void;
15
+ onCreated(node: ImmutableHtmlNode): void;
16
+ onSelect(node: ImmutableHtmlNode): undefined;
17
+ onDelete(node: ImmutableHtmlNode): undefined;
17
18
  onDestroy(): void;
18
19
  private _setupSelectEventListener;
19
20
  private _removeSelectEventListener;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@useinsider/guido",
3
- "version": "1.0.3-beta.f2389d0",
3
+ "version": "1.0.3-beta.f263f71",
4
4
  "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
5
5
  "main": "./dist/guido.umd.cjs",
6
6
  "module": "./dist/library.js",
@@ -41,8 +41,6 @@
41
41
  "vue": "2.7.14"
42
42
  },
43
43
  "devDependencies": {
44
- "@commitlint/cli": "20.2.0",
45
- "@commitlint/config-conventional": "20.2.0",
46
44
  "@cspell/eslint-plugin": "8.17.5",
47
45
  "@eslint/eslintrc": "3.3.0",
48
46
  "@eslint/js": "8.57.1",
@@ -1,92 +0,0 @@
1
- var I = Object.defineProperty;
2
- var y = (n, o, t) => o in n ? I(n, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[o] = t;
3
- var m = (n, o, t) => y(n, typeof o != "symbol" ? o + "" : o, t);
4
- import { ModificationDescription as h } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
5
- import { CommonControl as E } from "../../../common-control.js";
6
- import { ItemsBlockControlId as O } from "../../enums/controlEnums.js";
7
- import { SETTINGS_ENUMS as N } from "../../enums/settingsEnums.js";
8
- import { useItemsBlockStore as f } from "../../store/items-block.js";
9
- import { syncPriceOrientationFromAttributes as T } from "../../utils/syncAttributesFromConfigBlock.js";
10
- import { updateConfigBlockAttributes as P } from "../../utils/updateAttributes.js";
11
- const _ = O.PRICE_ORIENTATION, p = {
12
- PRICE_ORIENTATION: "priceOrientation"
13
- }, C = [
14
- { icon: "vertical-orientation", value: "vertical" },
15
- { icon: "horizontal-orientation", value: "horizontal" }
16
- ];
17
- class v extends E {
18
- constructor() {
19
- super(...arguments);
20
- m(this, "store", f());
21
- }
22
- getId() {
23
- return _;
24
- }
25
- getTemplate() {
26
- return `
27
- <div class="${O.PRICE_ORIENTATION}">
28
- ${this._getPriceOrientation()}
29
- </div>
30
- `;
31
- }
32
- onRender() {
33
- this.api.updateValues({ [p.PRICE_ORIENTATION]: this.store.priceOrientation }), this.api.onValueChanged(p.PRICE_ORIENTATION, (t) => {
34
- this._onPriceOrientationChange(t);
35
- });
36
- }
37
- onTemplateNodeUpdated(t) {
38
- super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(
39
- () => {
40
- T(this.currentNode);
41
- },
42
- () => {
43
- this.api.updateValues({ [p.PRICE_ORIENTATION]: this.store.priceOrientation });
44
- }
45
- );
46
- }
47
- _onPriceOrientationChange(t) {
48
- if (console.debug("Price orientation changed to: ", t), this.store.setPriceOrientation(t), P(this.currentNode, this.api), !this.currentNode)
49
- return;
50
- const { orientation: i } = this.store, r = i === N.ORIENTATION.VERTICAL, e = t === "horizontal";
51
- r ? this._updateVerticalLayout(e) : this._updateHorizontalLayout(e);
52
- }
53
- _updateHorizontalLayout(t) {
54
- var c, l, d, a;
55
- const i = ((l = (c = this.currentNode) == null ? void 0 : c.closest(".ins-product-td")) == null ? void 0 : l.querySelectorAll(".product-price-class")) || [], r = ((a = (d = this.currentNode) == null ? void 0 : d.closest(".ins-product-td")) == null ? void 0 : a.querySelectorAll(".product-original-price-class")) || [];
56
- if (!i || !r)
57
- return;
58
- const e = t ? "50%" : "100%", s = this.api.getDocumentModifier();
59
- i.forEach((u) => {
60
- s.modifyHtml(u).setAttribute("width", e).setStyle("width", e);
61
- }), r.forEach((u) => {
62
- s.modifyHtml(u).setAttribute("width", e).setStyle("width", e);
63
- }), s.apply(new h(`Updated original price element width to ${e}`));
64
- }
65
- _updateVerticalLayout(t) {
66
- var s, c, l, d;
67
- const i = ((c = (s = this.currentNode) == null ? void 0 : s.closest(".ins-product-td")) == null ? void 0 : c.querySelectorAll(".horizontal-price")) || [], r = (d = (l = this.currentNode) == null ? void 0 : l.closest(".ins-product-td")) == null ? void 0 : d.querySelector(".vertical-price");
68
- if (!i || !r || i.length === 0)
69
- return;
70
- const e = this.api.getDocumentModifier();
71
- t ? (i.forEach((a) => {
72
- e.modifyHtml(a).setStyle("display", "table-cell");
73
- }), e.modifyHtml(r).setStyle("display", "none").apply(new h("Hide vertical price element"))) : (i.forEach((a) => {
74
- e.modifyHtml(a).setStyle("display", "none");
75
- }), e.modifyHtml(r).setStyle("display", "table-cell").apply(new h("Show vertical price element")));
76
- }
77
- _getPriceOrientation() {
78
- return `
79
- ${this._GuTwoColumns([
80
- this._GuLabel({ text: "Price Orientation" }),
81
- this._GuRadioButton({
82
- name: p.PRICE_ORIENTATION,
83
- buttons: C
84
- })
85
- ])}
86
- `;
87
- }
88
- }
89
- export {
90
- _ as CONTROL_BLOCK_ID,
91
- v as PriceOrientationControl
92
- };
@@ -1,15 +0,0 @@
1
- import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
2
- import { CommonControl } from '../../../common-control';
3
- import { ItemsBlockControlId } from '../../enums/controlEnums';
4
- export declare const CONTROL_BLOCK_ID = ItemsBlockControlId.PRICE_ORIENTATION;
5
- export declare class PriceOrientationControl extends CommonControl {
6
- private store;
7
- getId(): string;
8
- getTemplate(): string;
9
- onRender(): void;
10
- onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
11
- _onPriceOrientationChange(value: string): void;
12
- private _updateHorizontalLayout;
13
- private _updateVerticalLayout;
14
- _getPriceOrientation(): string;
15
- }