@useinsider/guido 3.1.1-beta.f3b45b9 → 3.1.1-beta.face0c7

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 (43) hide show
  1. package/README.md +1 -0
  2. package/dist/@types/config/schemas.js +9 -7
  3. package/dist/components/Guido.vue.js +4 -4
  4. package/dist/components/Guido.vue2.js +91 -81
  5. package/dist/components/organisms/header/EditorActions.vue.js +2 -2
  6. package/dist/components/organisms/header/EditorActions.vue2.js +51 -36
  7. package/dist/components/organisms/header/RightSlot.vue.js +10 -10
  8. package/dist/components/organisms/header/RightSlot.vue2.js +16 -13
  9. package/dist/components/organisms/save-as-template/SaveAsTemplateDrawer.vue2.js +18 -17
  10. package/dist/composables/useHtmlCompiler.js +18 -16
  11. package/dist/composables/useSave.js +23 -17
  12. package/dist/composables/useStripo.js +44 -41
  13. package/dist/composables/validators/useLiquidValidator.js +42 -0
  14. package/dist/config/compiler/liquidCompilerRules.js +15 -0
  15. package/dist/config/compiler/recommendationCompilerRules.js +158 -44
  16. package/dist/config/compiler/utils/recommendationCompilerUtils.js +49 -46
  17. package/dist/enums/extensions/recommendationBlock.js +14 -11
  18. package/dist/enums/recommendation.js +2 -2
  19. package/dist/extensions/Blocks/CouponBlock/template.js +24 -13
  20. package/dist/extensions/DynamicContent/dynamic-content.js +17 -12
  21. package/dist/guido.css +1 -1
  22. package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js +218 -324
  23. package/dist/package.json.js +1 -1
  24. package/dist/services/recommendationApi.js +15 -15
  25. package/dist/services/stripoApi.js +9 -9
  26. package/dist/services/templateLibraryApi.js +48 -46
  27. package/dist/src/@types/config/schemas.d.ts +4 -0
  28. package/dist/src/@types/generic.d.ts +0 -1
  29. package/dist/src/@types/save-as-template.d.ts +1 -0
  30. package/dist/src/composables/useConfig.d.ts +2 -0
  31. package/dist/src/composables/validators/useLiquidValidator.d.ts +3 -0
  32. package/dist/src/config/compiler/liquidCompilerRules.d.ts +2 -0
  33. package/dist/src/config/compiler/utils/recommendationCompilerUtils.d.ts +1 -1
  34. package/dist/src/enums/extensions/recommendationBlock.d.ts +3 -0
  35. package/dist/src/extensions/Blocks/CouponBlock/template.d.ts +2 -0
  36. package/dist/src/services/templateLibraryApi.d.ts +1 -1
  37. package/dist/src/stores/config.d.ts +18 -0
  38. package/dist/src/utils/genericUtil.d.ts +1 -1
  39. package/dist/static/styles/base.css.js +7 -2
  40. package/dist/utils/genericUtil.js +42 -20
  41. package/dist/utils/templatePreparation.js +34 -25
  42. package/dist/utils/tooltipUtils.js +4 -5
  43. package/package.json +4 -4
@@ -1,22 +1,23 @@
1
- import { useRecommendation as $ } from "../../../composables/useRecommendation.js";
2
- function b(e, u, r, o) {
3
- const n = `{{${e}_${u}_${r}}}`, t = `{{${e}_${u}_currency}}`;
1
+ import { useConfig as S } from "../../../composables/useConfig.js";
2
+ import { useRecommendation as _ } from "../../../composables/useRecommendation.js";
3
+ function y(e, u, r, o, s = "") {
4
+ const n = `{{${s}${e}_${u}_${r}}}`, t = `{{${s}${e}_${u}_currency}}`;
4
5
  return o === "before" ? `${t} ${n}` : `${n} ${t}`;
5
6
  }
6
- function p(e, u, r, o, n) {
7
+ function p(e, u, r, o, s, n) {
7
8
  switch (u) {
8
9
  case "productImage": {
9
10
  const t = e.querySelector("img");
10
- t && (t.setAttribute("src", `{{${r}_${o}_image_url}}`), t.setAttribute("alt", `{{${r}_${o}_name}}`));
11
+ t && (t.setAttribute("src", `{{${n}${r}_${o}_image_url}}`), t.setAttribute("alt", `{{${n}${r}_${o}_name}}`));
11
12
  const c = e.querySelector("a");
12
- c && c.setAttribute("href", `{{${r}_${o}_url}}`);
13
+ c && c.setAttribute("href", `{{${n}${r}_${o}_url}}`);
13
14
  break;
14
15
  }
15
16
  case "productName": {
16
17
  const t = e.querySelector("p");
17
18
  if (t) {
18
19
  const c = t.querySelector("strong") || t;
19
- c.textContent = `{{${r}_${o}_name}}`;
20
+ c.textContent = `{{${n}${r}_${o}_name}}`;
20
21
  }
21
22
  break;
22
23
  }
@@ -24,7 +25,7 @@ function p(e, u, r, o, n) {
24
25
  const t = e.querySelector("p");
25
26
  if (t) {
26
27
  const c = t.querySelector("strong") || t;
27
- c.textContent = b(r, o, "price", n);
28
+ c.textContent = y(r, o, "price", s, n);
28
29
  }
29
30
  break;
30
31
  }
@@ -32,10 +33,11 @@ function p(e, u, r, o, n) {
32
33
  const t = e.querySelector("p");
33
34
  if (t) {
34
35
  const c = t.querySelector("strong") || t;
35
- c.textContent = b(
36
+ c.textContent = y(
36
37
  r,
37
38
  o,
38
39
  "original_price",
40
+ s,
39
41
  n
40
42
  ), t.setAttribute("product-attr", "discount");
41
43
  }
@@ -43,13 +45,13 @@ function p(e, u, r, o, n) {
43
45
  }
44
46
  case "productButton": {
45
47
  const t = e.querySelector("a");
46
- t && t.setAttribute("href", `{{${r}_${o}_url}}`);
48
+ t && t.setAttribute("href", `{{${n}${r}_${o}_url}}`);
47
49
  break;
48
50
  }
49
51
  case "productOmnibusPrice": {
50
52
  const t = e.querySelector(".omnibus-price-value");
51
53
  if (t) {
52
- t.textContent = `{{${r}_${o}_omnibus_price}}`;
54
+ t.textContent = `{{${n}${r}_${o}_omnibus_price}}`;
53
55
  const c = t.closest("p");
54
56
  c && (c.setAttribute("product-attr", "omnibus_price"), c.setAttribute("composition", "true"));
55
57
  }
@@ -58,7 +60,7 @@ function p(e, u, r, o, n) {
58
60
  case "productOmnibusDiscount": {
59
61
  const t = e.querySelector(".omnibus-discount-value");
60
62
  if (t) {
61
- t.textContent = `{{${r}_${o}_omnibus_discount}}`;
63
+ t.textContent = `{{${n}${r}_${o}_omnibus_discount}}`;
62
64
  const c = t.closest("p");
63
65
  c && (c.setAttribute("product-attr", "omnibus_discount"), c.setAttribute("composition", "true"));
64
66
  }
@@ -67,66 +69,67 @@ function p(e, u, r, o, n) {
67
69
  default: {
68
70
  const t = e.getAttribute("product-attr") ? e : e.querySelector("[product-attr]");
69
71
  if (t) {
70
- const c = t.getAttribute("product-attr"), s = t.querySelector("p");
71
- if (s) {
72
- const i = s.querySelector("strong") || s;
73
- i.textContent = `{{${r}_${o}_${c}}}`;
72
+ const c = t.getAttribute("product-attr"), i = t.querySelector("p");
73
+ if (i) {
74
+ const a = i.querySelector("strong") || i;
75
+ a.textContent = `{{${n}${r}_${o}_${c}}}`;
74
76
  }
75
77
  }
76
78
  break;
77
79
  }
78
80
  }
79
81
  }
80
- function S(e, u, r) {
82
+ function d(e, u, r, o) {
81
83
  e.querySelectorAll(".recommendation-product-row").forEach((n, t) => {
82
- n.querySelectorAll("[data-attribute-type]").forEach((s) => {
83
- const i = s.getAttribute("data-attribute-type") || "", l = s.querySelectorAll(".attribute-cell");
84
- l.length > 0 ? l.forEach((a) => {
85
- p(a, i, u, t, r);
86
- }) : p(s, i, u, t, r);
84
+ n.querySelectorAll("[data-attribute-type]").forEach((i) => {
85
+ const a = i.getAttribute("data-attribute-type") || "", b = i.querySelectorAll(".attribute-cell");
86
+ b.length > 0 ? b.forEach((l) => {
87
+ p(l, a, u, t, r, o);
88
+ }) : p(i, a, u, t, r, o);
87
89
  });
88
90
  });
89
91
  }
90
- function _(e, u, r) {
91
- const o = e.querySelectorAll(".recommendation-product-row");
92
- if (!o.length)
92
+ function q(e, u, r, o) {
93
+ const s = e.querySelectorAll(".recommendation-product-row");
94
+ if (!s.length)
93
95
  return;
94
- const [n] = o, t = n.querySelector("[data-attribute-type]"), c = t ? t.querySelectorAll(".attribute-cell").length : 1;
95
- o.forEach((s, i) => {
96
- s.querySelectorAll("[data-attribute-type]").forEach((a) => {
97
- const f = a.getAttribute("data-attribute-type") || "";
98
- a.querySelectorAll(".attribute-cell").forEach((y, A) => {
99
- const m = i * c + A;
100
- p(y, f, u, m, r);
96
+ const [n] = s, t = n.querySelector("[data-attribute-type]"), c = t ? t.querySelectorAll(".attribute-cell").length : 1;
97
+ s.forEach((i, a) => {
98
+ i.querySelectorAll("[data-attribute-type]").forEach((l) => {
99
+ const m = l.getAttribute("data-attribute-type") || "";
100
+ l.querySelectorAll(".attribute-cell").forEach(($, f) => {
101
+ const A = a * c + f;
102
+ p($, m, u, A, r, o);
101
103
  });
102
104
  });
103
105
  });
104
106
  }
105
- function q(e, u, r) {
107
+ function g(e, u, r, o) {
106
108
  e.querySelectorAll(".ins-recommendation-product-container").forEach((n) => {
107
- _(n, u, r);
109
+ q(n, u, r, o);
108
110
  });
109
111
  }
110
- function d(e, u) {
111
- const r = e.getAttribute("data-layout") || "grid", o = e.getAttribute("currency-alignment") || "after";
112
- r === "list" ? S(e, u, o) : q(e, u, o);
112
+ function h(e, u, r) {
113
+ const o = e.getAttribute("data-layout") || "grid", s = e.getAttribute("currency-alignment") || "after";
114
+ o === "list" ? d(e, u, s, r) : g(e, u, s, r);
113
115
  }
114
- function g(e, u) {
116
+ function C(e, u) {
115
117
  const r = e.match(/<!DOCTYPE[^>]*>/i);
116
118
  return (r ? `${r[0]}
117
119
  ` : "") + u.documentElement.outerHTML;
118
120
  }
119
- function E(e) {
121
+ function P(e) {
120
122
  const u = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), r = new DOMParser().parseFromString(u, "text/html"), o = r.querySelectorAll(".recommendation-block-v2");
121
123
  if (!o.length)
122
124
  return e;
123
- const { buildCampaignUrl: n } = $();
124
- return o.forEach((c) => {
125
- const s = c.getAttribute("recommendation-id");
126
- s && (n(s), d(c, s));
127
- }), g(u, r).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
125
+ const { buildCampaignUrl: s } = _(), { isFeatureEnabled: n } = S(), t = n("liquidSyntax") ? "reco_" : "";
126
+ return o.forEach((i) => {
127
+ var b, l;
128
+ const a = i.getAttribute("recommendation-id");
129
+ a && ((b = i.parentNode) == null || b.insertBefore(r.createComment("REC_START"), i), (l = i.parentNode) == null || l.insertBefore(r.createComment("REC_END"), i.nextSibling), s(a), h(i, a, t));
130
+ }), C(u, r).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
128
131
  }
129
132
  export {
130
- b as formatPriceVariable,
131
- E as prepareRecommendationBlocks
133
+ y as formatPriceVariable,
134
+ P as prepareRecommendationBlocks
132
135
  };
@@ -1,6 +1,8 @@
1
1
  const s = {
2
2
  RECOMMENDATION_API_URL: "https://recommendationv2.api.useinsider.com"
3
- }, i = [
3
+ }, i = {
4
+ CLIENT_ID: "clientId"
5
+ }, u = [
4
6
  { id: 11, key: "similarViewed", name: "Viewed Together", path: "viewed-together" },
5
7
  { id: 12, key: "similarBought", name: "Purchased Together", path: "purchased-together" },
6
8
  { id: 13, key: "userBased", name: "User Based", path: "user-based" },
@@ -11,13 +13,13 @@ const s = {
11
13
  { id: 46, key: "mostValuableOfPartner", name: "Most Valuable Products", path: "most-valuable" },
12
14
  { id: 61, key: "mostPopular", name: "Most Popular Items", path: "most-popular" },
13
15
  { id: 62, key: "mostPurchased", name: "Top Sellers", path: "top-sellers" }
14
- ], u = ["discount", "omnibus_price", "omnibus_discount", "price", "original_price"], l = [
16
+ ], l = ["discount", "omnibus_price", "omnibus_discount", "price", "original_price"], c = [
15
17
  { text: "before the amount", value: "0" },
16
18
  { text: "after the amount", value: "1" }
17
- ], c = [
19
+ ], d = [
18
20
  { text: "dot(.)", value: "." },
19
21
  { text: "comma(,)", value: "," }
20
- ], d = [
22
+ ], p = [
21
23
  { text: "0", value: "0" },
22
24
  { text: "1", value: "1" },
23
25
  { text: "2", value: "2" },
@@ -46,7 +48,7 @@ const s = {
46
48
  ], n = [
47
49
  { text: "true", value: "==" },
48
50
  { text: "false", value: "!=" }
49
- ], p = (t) => {
51
+ ], m = (t) => {
50
52
  if (!t)
51
53
  return e;
52
54
  switch (t) {
@@ -65,13 +67,14 @@ const s = {
65
67
  }
66
68
  };
67
69
  export {
68
- u as PriceAttributes,
69
- i as RecommendationFeedSourceMaps,
70
+ l as PriceAttributes,
71
+ i as QUERY_PARAMS,
72
+ u as RecommendationFeedSourceMaps,
70
73
  s as URLS,
71
- d as currencyDecimalCounts,
72
- l as currencyLocationMaps,
73
- c as currencyOperators,
74
- p as getOperatorOptions,
74
+ p as currencyDecimalCounts,
75
+ c as currencyLocationMaps,
76
+ d as currencyOperators,
77
+ m as getOperatorOptions,
75
78
  a as operatorOptionsForArrayOfStrings,
76
79
  n as operatorOptionsForBooleans,
77
80
  o as operatorOptionsForDates,
@@ -28,8 +28,8 @@ const e = 20, s = 320, t = "vertical", m = {
28
28
  ATTRIBUTE_PARAGRAPH: /<p[^>]*?product-attr="(discount|omnibus_discount|omnibus_price)"[^>]*>[\S\s]*?<\/p>/gm,
29
29
  ATTRIBUTE_PARAGRAPH_START_TAG: /<p[^>]*?product-attr="(discount|omnibus_discount|omnibus_price)"[^>]*>/gm,
30
30
  COMPOSITION: /composition="true"/gm,
31
- CUSTOM_FIELD: /{{[0-9]+_[0-8]_(discount|omnibus_discount|omnibus_price)}}/gm,
32
- CUSTOM_FIELD_INDEXES_PART: /{{[0-9]+_[0-8]_/gm,
31
+ CUSTOM_FIELD: /{{(?:reco_)?[0-9]+_[0-8]_(discount|omnibus_discount|omnibus_price)}}/gm,
32
+ CUSTOM_FIELD_INDEXES_PART: /{{(?:reco_)?[0-9]+_[0-8]_/gm,
33
33
  CUSTOM_FIELD_NAME_PART: /_(discount|omnibus_discount|omnibus_price)}}/gm
34
34
  }, n = {
35
35
  PARAGRAPH_END_TAG: "</p>"
@@ -1,29 +1,40 @@
1
- import { BlockType as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
2
- import { COUPON_BLOCK_ID as e } from "./block.js";
3
- const t = `
4
- <${o.BLOCK_TEXT}
1
+ import { useConfig as n } from "../../../composables/useConfig.js";
2
+ import { BlockType as e } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
3
+ import { COUPON_BLOCK_ID as t } from "./block.js";
4
+ const c = "{@COUPON_CODE}", s = "{{ins_coupon_code}}";
5
+ function l() {
6
+ const { isFeatureEnabled: o } = n();
7
+ return o("liquidSyntax") ? s : c;
8
+ }
9
+ function i(o) {
10
+ return `
11
+ <${e.BLOCK_TEXT}
5
12
  class="coupon-block ins-coupon-code coupon-block-v2 es-p10"
6
13
  align="center"
7
- esd-extension-block-id="${e}">
14
+ esd-extension-block-id="${t}">
8
15
  <p
9
16
  path="1"
10
17
  contenteditable="false"
11
18
  style="font-size: 16px; color: #333333;">
12
- <strong path="1,0">{@COUPON_CODE}</strong>
19
+ <strong path="1,0">${o}</strong>
13
20
  </p>
14
- </${o.BLOCK_TEXT}>
15
- `, l = `
21
+ </${e.BLOCK_TEXT}>
22
+ `;
23
+ }
24
+ const u = `
16
25
  <td
17
26
  class="coupon-block coupon-block-v2 ins-coupon-code esd-block-text esd-extension-block"
18
- esd-extension-block-id="${e}"
27
+ esd-extension-block-id="${t}"
19
28
  >
20
29
  <p class="ins-title" contenteditable="false">{@COUPON_CODE}</p>
21
30
  </td>
22
31
  `;
23
- function s() {
24
- return t;
32
+ function d() {
33
+ return i(l());
25
34
  }
26
35
  export {
27
- l as default,
28
- s as getDefaultTemplate
36
+ c as COUPON_PLACEHOLDER_DEFAULT,
37
+ s as COUPON_PLACEHOLDER_LIQUID,
38
+ u as default,
39
+ d as getDefaultTemplate
29
40
  };
@@ -1,16 +1,17 @@
1
1
  var c = Object.defineProperty;
2
2
  var g = (o, s, t) => s in o ? c(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
3
3
  var r = (o, s, t) => g(o, typeof s != "symbol" ? s + "" : s, t);
4
- import { mergeTagToDynamicContent as d, dynamicContentToMergeTags as m } from "../../utils/genericUtil.js";
5
- import { UIElement as u, UIElementType as a, UEAttr as h, UIElementTagRegistry as T } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
6
- import { ExternalMergeTagsLibrary as y } from "./dynamic-content-modal.js";
7
- const l = "external-dynamic-content-ui-element", C = "button-add-dynamic-content";
8
- class p extends T {
4
+ import { useConfig as d } from "../../composables/useConfig.js";
5
+ import { mergeTagToDynamicContent as m, dynamicContentToMergeTags as u } from "../../utils/genericUtil.js";
6
+ import { UIElement as h, UIElementType as a, UEAttr as T, UIElementTagRegistry as y } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
7
+ import { ExternalMergeTagsLibrary as C } from "./dynamic-content-modal.js";
8
+ const l = "external-dynamic-content-ui-element", L = "button-add-dynamic-content";
9
+ class w extends y {
9
10
  registerUiElements(s) {
10
11
  s[a.MERGETAGS] = l;
11
12
  }
12
13
  }
13
- class b extends u {
14
+ class f extends h {
14
15
  constructor() {
15
16
  super(...arguments);
16
17
  r(this, "mergeTagsButton", null);
@@ -43,7 +44,7 @@ class b extends u {
43
44
  onAttributeUpdated(t, e) {
44
45
  if (t !== "mergeTag" || !(e != null && e.value))
45
46
  return;
46
- const n = d(e), i = this._getLastClickedPosition();
47
+ const n = m(e), i = this._getLastClickedPosition();
47
48
  this.lastClickedElement = null, this.lastClickedFrame = null, this._openDynamicContentLibrary(n, i);
48
49
  }
49
50
  openMergeTagLibrary() {
@@ -55,10 +56,14 @@ class b extends u {
55
56
  * Dispatches event with dynamic content data and position
56
57
  */
57
58
  _openDynamicContentLibrary(t, e) {
58
- this.mergeTagsLibrary || (this.mergeTagsLibrary = new y()), this.mergeTagsLibrary.openMergeTagsLibrary(
59
+ this.mergeTagsLibrary || (this.mergeTagsLibrary = new C()), this.mergeTagsLibrary.openMergeTagsLibrary(
59
60
  t,
60
61
  (n) => {
61
- n.text && n.value ? this.api.triggerValueChange(m([n])[0]) : this.api.triggerValueChange(null);
62
+ if (n.text && n.value) {
63
+ const { isFeatureEnabled: i } = d();
64
+ this.api.triggerValueChange(u([n], i("liquidSyntax"))[0]);
65
+ } else
66
+ this.api.triggerValueChange(null);
62
67
  },
63
68
  e
64
69
  );
@@ -142,7 +147,7 @@ class b extends u {
142
147
  <${a.BUTTON}
143
148
  id="guido__btn-add-dynamic-content"
144
149
  class="btn btn-primary"
145
- ${h.BUTTON.name}="${C}">
150
+ ${T.BUTTON.name}="${L}">
146
151
  <${a.ICON} src="plus" class="icon icon-button color-primary">
147
152
  </${a.ICON}>
148
153
  ${this.api.translate("Add Dynamic Content")}
@@ -151,6 +156,6 @@ class b extends u {
151
156
  }
152
157
  }
153
158
  export {
154
- p as DynamicContentTagRegistry,
155
- b as DynamicContentUiElementExtension
159
+ w as DynamicContentTagRegistry,
160
+ f as DynamicContentUiElementExtension
156
161
  };
package/dist/guido.css CHANGED
@@ -1 +1 @@
1
- .gap-16[data-v-3b53a736],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.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}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.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}.editor-actions[data-v-acff76a8]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-a26d7792]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-a26d7792]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-a26d7792]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-df672485]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-df672485]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-df672485]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-df672485]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-df672485]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-29b9af29] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-d073b1dc] .vueperslides__bullets{pointer-events:none!important}[data-v-d073b1dc] .vueperslides__parallax-wrapper{height:110px!important}
1
+ .gap-16[data-v-3b53a736],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.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}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.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}.editor-actions[data-v-4e2a4adb]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-25780af6]{--ribbon-offset: 0px;position:relative;width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__container[data-v-25780af6]{width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__no-header[data-v-25780af6]{height:calc(100vh - 75px - var(--ribbon-offset))}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-df672485]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-df672485]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-df672485]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-df672485]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-df672485]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-29b9af29] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-d073b1dc] .vueperslides__bullets{pointer-events:none!important}[data-v-d073b1dc] .vueperslides__parallax-wrapper{height:110px!important}