@useinsider/guido 2.0.0-beta.689d09e → 2.0.0-beta.6b1a3c9

package/dist/components/organisms/email-preview/amp/AmpToggle.vue.js

@@ -3,7 +3,7 @@ import o from "./AmpToggle.vue2.js";
 import n from "../../../../_virtual/_plugin-vue2_normalizer.js";
 var s = function() {
   var r = this, t = r._self._c, e = r._self._setupProxy;
-  return t("div", [t("div", { staticClass: "d-f a-i-c ml-3" }, [t(e.InSegments, { attrs: { id: "guido__amp-toggle", "segment-list": e.segmentList, selected: e.previewStore.emailFormat }, on: { click: e.handleFormatChange } }), e.previewStore.showAMPErrorButton ? t(e.InButtonV2, { staticClass: "ml-2 d-f a-i-c b-c-11 b-c-h-11 t-c-4 t-c-h-4 i-c-4 bor-w-1 bor-s-s bor-c-11 bor-r-2", attrs: { id: "guido__amp-error-button", "left-icon": "line-error-box", type: "danger", "label-text-status": !1 }, on: { click: function(l) {
+  return t("div", [t("div", { staticClass: "d-f a-i-c ml-3" }, [t(e.InSegments, { attrs: { id: "guido__amp-toggle", "segment-list": e.segmentList, selected: e.previewStore.emailFormat }, on: { click: e.handleFormatChange } }), e.previewStore.showAMPErrorButton ? t(e.InButtonV2, { staticClass: "ml-3 d-f a-i-c b-c-11 b-c-h-11 t-c-4 t-c-h-4 i-c-4 bor-w-1 bor-s-s bor-c-11 bor-r-2", attrs: { id: "guido__amp-error-button", "left-icon": "line-error-box", type: "danger", "label-text-status": !1 }, on: { click: function(l) {
     return e.previewStore.openErrorModal();
   } } }) : r._e()], 1)]);
 }, a = [], i = /* @__PURE__ */ n(
@@ -12,7 +12,7 @@ var s = function() {
   a,
   !1,
   null,
-  "b5997368"
+  "5196584c"
 );
 const d = i.exports;
 export {

package/dist/components/organisms/header/LeftSlot.vue.js

@@ -1,18 +1,18 @@
 import o from "./LeftSlot.vue2.js";
 /* empty css              */
-import n from "../../../_virtual/_plugin-vue2_normalizer.js";
-var r = function() {
+import a from "../../../_virtual/_plugin-vue2_normalizer.js";
+var i = function() {
   var e = this, s = e._self._c, t = e._self._setupProxy;
-  return s("div", { staticClass: "d-f a-i-c" }, [s(t.InButtonV2, { staticClass: "p-2", attrs: { id: "guido__back-button", "left-icon": "line-arrow-left", styling: "text", type: "secondary", "label-text": t.backButtonLabel, "skeleton-sizing": { width: 150, height: 26 }, "skeleton-status": t.editorStore.loadingStatus }, on: { click: t.handleBackClick } }), t.editorStore.isVersionHistoryOpen ? s(t.RestoreButton, { staticClass: "ml-3" }) : e._e()], 1);
-}, i = [], a = /* @__PURE__ */ n(
+  return s("div", { staticClass: "d-f a-i-c" }, [s(t.InButtonV2, { staticClass: "p-2", attrs: { id: "guido__back-button", "left-icon": "line-arrow-left", styling: "text", type: "secondary", "disabled-status": t.isBackButtonDisabled, "label-text": t.backButtonLabel, "skeleton-sizing": { width: 150, height: 26 }, "skeleton-status": t.editorStore.loadingStatus }, on: { click: t.handleBackClick } }), t.editorStore.isVersionHistoryOpen ? s(t.RestoreButton, { staticClass: "ml-3" }) : e._e()], 1);
+}, n = [], r = /* @__PURE__ */ a(
   o,
-  r,
   i,
+  n,
   !1,
   null,
-  "3bf5c743"
+  "7f267190"
 );
-const d = a.exports;
+const f = r.exports;
 export {
-  d as default
+  f as default
 };

package/dist/components/organisms/header/LeftSlot.vue2.js

@@ -1,32 +1,37 @@
-import { defineComponent as c, computed as m } from "vue";
-import { useConfig as f } from "../../../composables/useConfig.js";
-import { useBack as p } from "../../../composables/useGuidoActions.js";
-import { usePreviewMode as l } from "../../../composables/usePreviewMode.js";
-import { useTranslations as d } from "../../../composables/useTranslations.js";
-import { useVersionHistoryApi as k } from "../../../composables/useVersionHistoryApi.js";
-import { useEditorStore as B } from "../../../stores/editor.js";
-import { InButtonV2 as b } from "@useinsider/design-system-vue";
-import _ from "./version-history/RestoreButton.vue.js";
-const S = /* @__PURE__ */ c({
+import { defineComponent as l, computed as p, ref as d } from "vue";
+import { useConfig as k } from "../../../composables/useConfig.js";
+import { useBack as B } from "../../../composables/useGuidoActions.js";
+import { usePreviewMode as b } from "../../../composables/usePreviewMode.js";
+import { useTranslations as v } from "../../../composables/useTranslations.js";
+import { useVersionHistoryApi as _ } from "../../../composables/useVersionHistoryApi.js";
+import { useEditorStore as V } from "../../../stores/editor.js";
+import { InButtonV2 as w } from "@useinsider/design-system-vue";
+import y from "./version-history/RestoreButton.vue.js";
+import { useDebounceFn as C } from "../../../node_modules/@vueuse/shared/index.js";
+const F = /* @__PURE__ */ l({
   __name: "LeftSlot",
-  setup(v) {
-    const o = B(), r = p(), { closeVersionHistory: i } = k(), { closePreviewMode: n } = l(), e = d(), { config: t } = f(), u = m(() => {
-      var s, a;
-      return o.isVersionHistoryOpen || o.isPreviewModeOpen ? e("email-editor.back-to-editor") : (a = (s = t.value) == null ? void 0 : s.ui) != null && a.backButtonLabel ? t.value.ui.backButtonLabel : e("email-editor.back-to-design");
-    });
-    return { __sfc: !0, editorStore: o, handleBack: r, closeVersionHistory: i, closePreviewMode: n, trans: e, config: t, backButtonLabel: u, handleBackClick: () => {
-      if (o.isVersionHistoryOpen) {
-        i();
+  setup(H) {
+    const e = V(), i = B(), { closeVersionHistory: n } = _(), { closePreviewMode: s } = b(), o = v(), { config: t } = k(), f = p(() => {
+      var u, m;
+      return e.isVersionHistoryOpen || e.isPreviewModeOpen ? o("email-editor.back-to-editor") : (m = (u = t.value) == null ? void 0 : u.ui) != null && m.backButtonLabel ? t.value.ui.backButtonLabel : o("email-editor.back-to-design");
+    }), r = d(!1), c = () => {
+      if (e.isVersionHistoryOpen) {
+        n();
         return;
       }
-      if (o.isPreviewModeOpen) {
-        n();
+      if (e.isPreviewModeOpen) {
+        s();
         return;
       }
-      o.loadingStatus = !0, r();
-    }, InButtonV2: b, RestoreButton: _ };
+      i();
+    }, a = C(() => {
+      c(), r.value = !1;
+    }, 500);
+    return { __sfc: !0, editorStore: e, handleBack: i, closeVersionHistory: n, closePreviewMode: s, trans: o, config: t, backButtonLabel: f, isBackButtonDisabled: r, executeBackAction: c, debouncedBackAction: a, handleBackClick: () => {
+      r.value = !0, a();
+    }, InButtonV2: w, RestoreButton: y };
   }
 });
 export {
-  S as default
+  F as default
 };

package/dist/extensions/Blocks/Items/controls/price/formattedPrice.js

@@ -1,82 +1,76 @@
-var C = Object.defineProperty;
-var A = (n, r, e) => r in n ? C(n, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[r] = e;
-var _ = (n, r, e) => A(n, typeof r != "symbol" ? r + "" : r, e);
-import { ModificationDescription as L, UIElementType as m, UEAttr as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+var R = Object.defineProperty;
+var _ = (i, t, e) => t in i ? R(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var m = (i, t, e) => _(i, typeof t != "symbol" ? t + "" : t, e);
+import { ModificationDescription as F, UIElementType as P, UEAttr as C } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as h } from "../../../common-control.js";
-import { ItemsBlockControlId as l, ItemsBlockId as D } from "../../enums/controlEnums.js";
-import { productPairs as I } from "../../enums/productEnums.js";
-import { useItemsBlockStore as O } from "../../store/items-block.js";
-import { getItemsBlockConfig as u, setItemsBlockConfig as f } from "../../utils/nodeConfigUtils.js";
-const N = l.PRICE_FORMATTED_PRICE, c = {
+import { ItemsBlockControlId as p, ItemsBlockId as g } from "../../enums/controlEnums.js";
+import { productPairs as T } from "../../enums/productEnums.js";
+import { useItemsBlockStore as A } from "../../store/items-block.js";
+import { getItemsBlockConfig as f, setItemsBlockConfig as u } from "../../utils/nodeConfigUtils.js";
+const D = p.PRICE_FORMATTED_PRICE, n = {
   FORMATTED_PRICE: "formattedPrice"
 };
-class y extends h {
+class k extends h {
   constructor() {
     super(...arguments);
-    _(this, "store", O());
+    m(this, "store", A());
   }
   getId() {
-    return N;
+    return D;
   }
   getTemplate() {
     return `
-            <div class="container ${l.PRICE_FORMATTED_PRICE}">
+            <div class="container ${p.PRICE_FORMATTED_PRICE}">
                 ${this._getFormattedPrice()}
             </div>
         `;
   }
   onRender() {
-    this.api.updateValues({ [c.FORMATTED_PRICE]: this.store.formattedPrice }), this.api.onValueChanged(c.FORMATTED_PRICE, (e) => {
+    this.api.updateValues({ [n.FORMATTED_PRICE]: this.store.formattedPrice }), this.api.onValueChanged(n.FORMATTED_PRICE, (e) => {
       this._onFormattedPriceChange(e);
     });
   }
   onTemplateNodeUpdated(e) {
     super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(
       () => {
-        const o = u(this.currentNode);
-        o && this.store.setFormattedPrice(o.priceFormatted ?? !0);
+        const r = f(this.currentNode);
+        r && this.store.setFormattedPrice(r.priceFormatted ?? !0);
       },
       () => {
-        this.api.updateValues({ [c.FORMATTED_PRICE]: this.store.formattedPrice });
+        this.api.updateValues({ [n.FORMATTED_PRICE]: this.store.formattedPrice });
       }
     );
   }
   _onFormattedPriceChange(e) {
-    if (console.debug("Formatted price changed to: ", e), this.store.setFormattedPrice(e), f(this.currentNode, this.api, { priceFormatted: e }), !this.currentNode)
+    if (console.debug("Formatted price changed to: ", e), this.store.setFormattedPrice(e), u(this.currentNode, this.api, { priceFormatted: e }), !this.currentNode)
       return;
-    const { itemsType: o, singlePrice: i } = this.store, t = I.PAIRS_FOR_EXTENSION.price[o], s = I.PAIRS_FOR_EXTENSION.originalPrice[o], [E, R] = e ? [
-      i ? t.DEFAULT_SINGLE_PRICE : t.DEFAULT_PRICE,
-      i ? t.DEFAULT_SINGLE_PRICE_FORMATTED : t.DEFAULT_PRICE_FORMATTED
-    ] : [
-      i ? t.DEFAULT_SINGLE_PRICE_FORMATTED : t.DEFAULT_PRICE_FORMATTED,
-      i ? t.DEFAULT_SINGLE_PRICE : t.DEFAULT_PRICE
-    ], d = i ? s.DEFAULT_SINGLE_PRICE : s.DEFAULT_PRICE, P = i ? s.DEFAULT_SINGLE_PRICE_FORMATTED : s.DEFAULT_PRICE_FORMATTED, [p, F] = e ? [d, P] : [P, d];
+    const { itemsType: r } = this.store, o = T.PAIRS_FOR_EXTENSION.price[r], s = T.PAIRS_FOR_EXTENSION.originalPrice[r], [c, a] = e ? [o.DEFAULT_PRICE, o.DEFAULT_PRICE_FORMATTED] : [o.DEFAULT_PRICE_FORMATTED, o.DEFAULT_PRICE], [l, I] = e ? [s.DEFAULT_PRICE, s.DEFAULT_PRICE_FORMATTED] : [s.DEFAULT_PRICE_FORMATTED, s.DEFAULT_PRICE];
     this._updatePriceBlock(
       this.currentNode,
-      E,
-      R,
+      c,
+      a,
       "price"
     );
-    const a = this.currentNode.closest(".items-block"), T = a == null ? void 0 : a.querySelector(`[esd-extension-block-id="${D.ORIGINAL_PRICE}"]`);
-    T && this._updatePriceBlock(T, p, F, "original price");
+    const d = this.currentNode.closest(".items-block"), E = d == null ? void 0 : d.querySelector(`[esd-extension-block-id="${g.ORIGINAL_PRICE}"]`);
+    E && this._updatePriceBlock(E, l, I, "original price");
   }
-  _updatePriceBlock(e, o, i, t) {
-    const s = e.getInnerHTML().replace(o, i), E = `Updated ${t} to ${this.store.formattedPrice ? "formatted" : "unformatted"}`;
-    this.api.getDocumentModifier().modifyHtml(e).setInnerHtml(s).apply(new L(E));
+  _updatePriceBlock(e, r, o, s) {
+    const c = e.getInnerHTML().replace(r, o), a = `Updated ${s} to ${this.store.formattedPrice ? "formatted" : "unformatted"}`;
+    this.api.getDocumentModifier().modifyHtml(e).setInnerHtml(c).apply(new F(a));
   }
   _getFormattedPrice() {
     return `
             <div class="display-flex align-items-center justify-content-between">
-                <${m.LABEL}
-                    ${g.LABEL.text}="${this.api.translate("Formatted Price (e.g. $9.90)")}"
+                <${P.LABEL}
+                    ${C.LABEL.text}="${this.api.translate("Formatted Price (e.g. $9.90)")}"
                 >
-                </${m.LABEL}>
-                ${this._GuToggle(c.FORMATTED_PRICE)}
+                </${P.LABEL}>
+                ${this._GuToggle(n.FORMATTED_PRICE)}
             </div>
         `;
   }
 }
 export {
-  N as CONTROL_BLOCK_ID,
-  y as PriceFormattedPriceControl
+  D as CONTROL_BLOCK_ID,
+  k as PriceFormattedPriceControl
 };

package/dist/extensions/Blocks/Items/controls/settingsControl.js

@@ -1,17 +1,17 @@
 var L = Object.defineProperty;
-var M = (h, d, e) => d in h ? L(h, d, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[d] = e;
-var O = (h, d, e) => M(h, typeof d != "symbol" ? d + "" : d, e);
-import { UEAttr as C, ModificationDescription as u } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+var M = (g, p, e) => p in g ? L(g, p, { enumerable: !0, configurable: !0, writable: !0, value: e }) : g[p] = e;
+var C = (g, p, e) => M(g, typeof p != "symbol" ? p + "" : p, e);
+import { UEAttr as O, ModificationDescription as u } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as D } from "../../common-control.js";
 import { ItemsBlockId as m } from "../enums/controlEnums.js";
-import { productPairs as p, templateFirstLine as b } from "../enums/productEnums.js";
+import { productPairs as _, templateFirstLine as b } from "../enums/productEnums.js";
 import { ItemTypeOptions as R, OrientationOptions as x, ItemInCartOptions as N, SETTINGS_ENUMS as S, DefaultConfigValues as A } from "../enums/settingsEnums.js";
 import H from "../layouts/horizontal.html.js";
 import k from "../layouts/vertical.html.js";
 import { useItemsBlockStore as U } from "../store/items-block.js";
-import { getDefaultTemplate as F } from "../template.js";
+import { getDefaultTemplate as $ } from "../template.js";
 import { getItemsBlockConfig as P, setItemsBlockConfig as f } from "../utils/nodeConfigUtils.js";
-const $ = "ui-elements-items-block", a = {
+const F = "ui-elements-items-block", a = {
   ITEMS_TYPE: "itemsType",
   ORIENTATION: "orientation",
   ITEM_IDS: "itemIds"
@@ -19,10 +19,10 @@ const $ = "ui-elements-items-block", a = {
 class K extends D {
   constructor() {
     super(...arguments);
-    O(this, "store", U());
+    C(this, "store", U());
   }
   getId() {
-    return $;
+    return F;
   }
   getTemplate() {
     return `
@@ -124,7 +124,7 @@ class K extends D {
   _initializeSelectItems() {
     this.api.setUIEAttribute(
       a.ITEMS_TYPE,
-      C.SELECTPICKER.items,
+      O.SELECTPICKER.items,
       R
     );
     const { itemsType: e, itemIds: t } = this.store;
@@ -134,7 +134,7 @@ class K extends D {
     const i = N[e];
     this.api.setUIEAttribute(
       a.ITEM_IDS,
-      C.SELECTPICKER.items,
+      O.SELECTPICKER.items,
       i
     ), this.api.updateValues({
       [a.ITEM_IDS]: t
@@ -161,7 +161,7 @@ class K extends D {
       currencyLocation: n,
       formattedPrice: s
     } = this.store;
-    this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml(F({
+    this.api.getDocumentModifier().modifyHtml(this.currentNode).setInnerHtml($({
       orientation: e,
       itemsType: t,
       itemId: i,
@@ -173,12 +173,12 @@ class K extends D {
   _getTemplateData() {
     const { itemsType: e, itemIds: t, formattedPrice: i } = this.store, r = N[e].findIndex((s) => s.value === t), n = r > -1 ? r : 0;
     return {
-      imageSrc: p.PAIRS_FOR_EXTENSION.imageSrc[e].DEFAULT[n],
-      name: p.PAIRS_FOR_EXTENSION.name[e].DEFAULT[n],
-      price: i ? p.PAIRS_FOR_EXTENSION.price[e].DEFAULT_PRICE_FORMATTED : p.PAIRS_FOR_EXTENSION.price[e].DEFAULT_PRICE,
-      originalPrice: i ? p.PAIRS_FOR_EXTENSION.originalPrice[e].DEFAULT_PRICE_FORMATTED : p.PAIRS_FOR_EXTENSION.originalPrice[e].DEFAULT_PRICE,
-      quantity: p.PAIRS_FOR_EXTENSION.quantity[e].DEFAULT,
-      button: p.PAIRS_FOR_EXTENSION.button[e].DEFAULT_LABEL
+      imageSrc: _.PAIRS_FOR_EXTENSION.imageSrc[e].DEFAULT[n],
+      name: _.PAIRS_FOR_EXTENSION.name[e].DEFAULT[n],
+      price: i ? _.PAIRS_FOR_EXTENSION.price[e].DEFAULT_PRICE_FORMATTED : _.PAIRS_FOR_EXTENSION.price[e].DEFAULT_PRICE,
+      originalPrice: i ? _.PAIRS_FOR_EXTENSION.originalPrice[e].DEFAULT_PRICE_FORMATTED : _.PAIRS_FOR_EXTENSION.originalPrice[e].DEFAULT_PRICE,
+      quantity: _.PAIRS_FOR_EXTENSION.quantity[e].DEFAULT,
+      button: _.PAIRS_FOR_EXTENSION.button[e].DEFAULT_LABEL
     };
   }
   _updateImageSrc(e) {
@@ -196,15 +196,15 @@ class K extends D {
     r = r.replace(i, e), this.api.getDocumentModifier().modifyHtml(t).setInnerHtml(r).apply(new u("Updated name"));
   }
   _updatePrice(e) {
-    var g;
-    const t = (g = this.currentNode) == null ? void 0 : g.querySelector(`[esd-extension-block-id="${m.PRICE}"]`);
+    var I;
+    const t = (I = this.currentNode) == null ? void 0 : I.querySelector(`[esd-extension-block-id="${m.PRICE}"]`);
     if (!t)
       return;
     const i = this._getParagraphFromBlock(t);
     if (!i)
       return;
-    const r = i.getInnerHTML() || "", n = i.getInnerText() || "", { currencySymbol: s, currencyLocation: l } = this.store, o = (s == null ? void 0 : s.trim()) || "", c = this._removeCurrencySymbol(n, o), T = this._replacePriceNumber(c, e), I = this._buildPriceContent(T, o, l), _ = r.replace(n, I);
-    this.api.getDocumentModifier().modifyHtml(i).setInnerHtml(_).apply(new u("Updated price"));
+    const r = i.getInnerHTML() || "", n = i.getInnerText() || "", { currencySymbol: s, currencyLocation: l } = this.store, o = (s == null ? void 0 : s.trim()) || "", c = this._removeCurrencySymbol(n, o), d = this._replacePriceNumber(c, e), h = this._buildPriceContent(d, o, l), T = r.replace(n, h);
+    this.api.getDocumentModifier().modifyHtml(i).setInnerHtml(T).apply(new u("Updated price"));
   }
   _updateOriginalPrice(e) {
     var E;
@@ -219,21 +219,27 @@ class K extends D {
     const r = i.querySelector("s");
     if (!r)
       return;
-    const n = r.getInnerHTML() || "", s = r.getInnerText() || "", { currencySymbol: l, currencyLocation: o } = this.store, c = (l == null ? void 0 : l.trim()) || "", T = this._removeCurrencySymbol(s, c), I = this._replacePriceNumber(T, e), _ = this._buildPriceContent(I, c, o), y = `<s>${n.replace(s, _)}</s>`;
+    const n = r.getInnerHTML() || "", s = r.getInnerText() || "", { currencySymbol: l, currencyLocation: o } = this.store, c = (l == null ? void 0 : l.trim()) || "", d = this._removeCurrencySymbol(s, c), h = this._replacePriceNumber(d, e), T = this._buildPriceContent(h, c, o), y = `<s>${n.replace(s, T)}</s>`;
     this.api.getDocumentModifier().modifyHtml(i).setInnerHtml(y).apply(new u("Updated original price"));
   }
   _updateQuantity(e) {
-    var c;
-    const t = this.store.itemsType !== S.ITEMS_TYPE.BROWSED_ITEMS, i = P(this.currentNode), r = (i == null ? void 0 : i.quantityControlEnabled) !== !1, n = t && r, s = (c = this.currentNode) == null ? void 0 : c.querySelector(`[esd-extension-block-id="${m.QUANTITY}"]`);
+    var d;
+    const t = this.store.itemsType !== S.ITEMS_TYPE.BROWSED_ITEMS, i = P(this.currentNode), r = (i == null ? void 0 : i.quantityControlEnabled) !== !1, n = t && r, s = (d = this.currentNode) == null ? void 0 : d.querySelector(`[esd-extension-block-id="${m.QUANTITY}"]`);
     if (!s)
       return;
     const l = s.getInnerText().trim();
     let o = s.getInnerHTML();
-    o = o.replace(l, e), this.api.getDocumentModifier().modifyHtml(s).setInnerHtml(o).setStyle("display", n ? "table-cell" : "none").apply(new u("Updated quantity"));
+    function c(h, T, I) {
+      return h.replace(
+        new RegExp(`(>\\s*)${T}(\\s*<)`, "g"),
+        `$1${I}$2`
+      );
+    }
+    o = c(o, l, e), this.api.getDocumentModifier().modifyHtml(s).setInnerHtml(o).setStyle("display", n ? "table-cell" : "none").apply(new u("Updated quantity"));
   }
   _reOrderTemplate() {
-    var T, I, _, g, y, E;
-    const e = (T = this.currentNode) == null ? void 0 : T.querySelector(`[esd-extension-block-id="${m.IMAGE}"]`), t = (I = this.currentNode) == null ? void 0 : I.querySelector(`[esd-extension-block-id="${m.NAME}"]`), i = (_ = this.currentNode) == null ? void 0 : _.querySelector(`[esd-extension-block-id="${m.PRICE}"]`), r = (g = this.currentNode) == null ? void 0 : g.querySelector(
+    var d, h, T, I, y, E;
+    const e = (d = this.currentNode) == null ? void 0 : d.querySelector(`[esd-extension-block-id="${m.IMAGE}"]`), t = (h = this.currentNode) == null ? void 0 : h.querySelector(`[esd-extension-block-id="${m.NAME}"]`), i = (T = this.currentNode) == null ? void 0 : T.querySelector(`[esd-extension-block-id="${m.PRICE}"]`), r = (I = this.currentNode) == null ? void 0 : I.querySelector(
       `[esd-extension-block-id="${m.ORIGINAL_PRICE}"]`
     ), n = (y = this.currentNode) == null ? void 0 : y.querySelector(`[esd-extension-block-id="${m.QUANTITY}"]`), s = (E = this.currentNode) == null ? void 0 : E.querySelector(`[esd-extension-block-id="${m.BUTTON}"]`);
     if (!e || !t || !i || !r || !n || !s)
@@ -320,6 +326,6 @@ class K extends D {
   }
 }
 export {
-  $ as CONTROL_BLOCK_ID,
+  F as CONTROL_BLOCK_ID,
   K as ItemsBlockControl
 };

package/dist/extensions/Blocks/common-control.js

@@ -51,10 +51,9 @@ class _ extends O {
     const o = E !== this.lastBlockInstanceId;
     return o ? (this.currentNode && e(this.currentNode), n(), this.lastBlockInstanceId = E) : n(), o;
   }
-  _GuLabel({ text: e, name: n = "", position: E = "top" }) {
+  _GuLabel({ text: e, name: n = "" }) {
     return `
             <${t.LABEL} 
-                style="${E === "top" ? "margin-bottom: 8px;" : ""}"
                 ${$.LABEL.text}="${e}" 
                 ${$.LABEL.name}="${n || `${e} Label`}">
             </${t.LABEL}>

package/dist/guido.css

@@ -1 +1 @@
-.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-3bf5c743] .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-890b5336]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-890b5336]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-890b5336]{height:calc(100vh - 75px)}[data-v-293f1c47] .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-bb3bb07c] .guido__verion-history-view-option-selection-desktop svg,[data-v-bb3bb07c] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-bb3bb07c] .in-segments-wrapper__button_selected,[data-v-bb3bb07c] .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-b37f3f6d],[data-v-b37f3f6d] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-4b876c1b]{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}
+.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-7f267190] .in-button-v2__wrapper{line-height:0}[data-v-5196584c] .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-890b5336]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-890b5336]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-890b5336]{height:calc(100vh - 75px)}[data-v-293f1c47] .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-bb3bb07c] .guido__verion-history-view-option-selection-desktop svg,[data-v-bb3bb07c] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-bb3bb07c] .in-segments-wrapper__button_selected,[data-v-bb3bb07c] .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-b37f3f6d],[data-v-b37f3f6d] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-4b876c1b]{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}

package/dist/src/extensions/Blocks/common-control.d.ts

@@ -74,7 +74,7 @@ export declare abstract class CommonControl extends Control {
      * @returns true if block instance changed, false otherwise
      */
     protected handleBlockInstanceChange(syncFunction: (node: ImmutableHtmlNode) => void, updateUI: () => void): boolean;
-    _GuLabel({ text, name, position }: LabelProps): string;
+    _GuLabel({ text, name }: LabelProps): string;
     _GuToggle(name: string): string;
     _GuSelectItem({ text, value }: {
         text: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "2.0.0-beta.689d09e",
+  "version": "2.0.0-beta.6b1a3c9",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",