@useinsider/guido 3.1.1-beta.f9482a3 → 3.1.1-beta.fd0bd89

package/README.md

@@ -143,6 +143,7 @@ const config: GuidoConfigInput = {
     displayConditions?: boolean,  // Default: true
     unsubscribe?: boolean,        // Default: true
     modulesDisabled?: boolean,    // Default: false - Disable modules panel
+    liquidSyntax?: boolean,      // Default: false - Enable Liquid template syntax
   },
 
   // Optional: Callbacks

package/dist/@types/config/schemas.js

@@ -1,5 +1,5 @@
 import { ModuleFolderDefaults as b } from "../../enums/defaults.js";
-import { object as o, number as p, optional as e, string as t, pipe as u, picklist as n, minLength as d, custom as S, boolean as a, array as c, literal as r, variant as k } from "../../node_modules/valibot/dist/index.js";
+import { object as o, number as p, optional as e, string as t, pipe as u, picklist as n, minLength as d, custom as S, boolean as a, array as c, literal as l, variant as k } from "../../node_modules/valibot/dist/index.js";
 const m = {
   /** Promotional/marketing emails */
   PROMOTIONAL: 1,
@@ -26,6 +26,11 @@ const m = {
   /** Optional variation ID for A/B testing */
   variationId: e(t())
 }), y = o({
+  /** Fallback font name (e.g., "Georgia") */
+  name: t(),
+  /** Fallback font family (e.g., "serif" or "sans-serif") */
+  family: t()
+}), f = o({
   /** Partner/organization name (required) */
   name: u(
     t(),
@@ -46,8 +51,10 @@ const m = {
     m.PROMOTIONAL
   ),
   /** Display name for the current user */
-  username: e(t(), "Guido User")
-}), f = o({
+  username: e(t(), "Guido User"),
+  /** Fallback font settings from partner settings — used to match backend size calculation */
+  fallbackFont: e(y)
+}), A = o({
   /** Display text for the dynamic content */
   text: t(),
   /** Template variable value (e.g., {{username}}) */
@@ -61,14 +68,14 @@ const m = {
       value: t()
     })
   )
-}), A = o({
+}), R = o({
   /** Initial HTML content */
   html: e(t(), ""),
   /** Initial CSS content */
   css: e(t(), ""),
   /** Preselected dynamic content items */
   preselectedDynamicContent: e(
-    c(f),
+    c(A),
     []
   ),
   /** Valid custom field attribute names from the partner's categorized fields */
@@ -77,12 +84,12 @@ const m = {
   selectedUnsubscribePages: e(c(p()), []),
   /** Force recreate template in Stripo storage (use true when updating externally modified templates) */
   forceRecreate: e(a(), !1)
-}), R = o({
+}), C = o({
   /** Sender display name */
   senderName: e(t(), ""),
   /** Email subject line */
   subject: e(t(), "")
-}), C = o({
+}), T = o({
   /** Locale for the editor UI */
   locale: e(t(), "en"),
   /** Path to translations object */
@@ -90,17 +97,17 @@ const m = {
   /** Migration date for template compatibility */
   migrationDate: e(p(), 1759696858),
   /** Email header settings */
-  emailHeader: e(R, { senderName: "", subject: "" }),
+  emailHeader: e(C, { senderName: "", subject: "" }),
   /** Folder name for user-saved modules (used by Stripo plugin panel for path construction) */
   savedModulesFolderName: e(t(), b.SAVED_MODULES),
   /** Folder name for default/prebuilt modules (used by Stripo plugin panel for path construction) */
   defaultModulesFolderName: e(t(), b.DEFAULT_MODULES)
-}), T = o({
+}), I = o({
   /** Whether to show the header bar */
   showHeader: e(a(), !0),
   /** Custom label for back button (if shown) */
   backButtonLabel: e(t())
-}), I = o({
+}), E = o({
   /** Enable dynamic content insertion */
   dynamicContent: e(a(), !0),
   /** Enable save as template functionality */
@@ -114,8 +121,10 @@ const m = {
   /** Enable unsubscribe block */
   unsubscribe: e(a(), !0),
   /** Disable modules panel in the editor */
-  modulesDisabled: e(a(), !1)
-}), E = n([
+  modulesDisabled: e(a(), !1),
+  /** Enable Liquid template syntax */
+  liquidSyntax: e(a(), !1)
+}), g = n([
   "amp-accordion",
   "amp-carousel",
   "amp-form-controls",
@@ -129,7 +138,7 @@ const m = {
   "text-block",
   "timer-block",
   "video-block"
-]), g = n([
+]), O = n([
   "dynamic-content",
   "checkbox-block",
   "radio-button-block",
@@ -137,66 +146,66 @@ const m = {
   "unsubscribe-block",
   "coupon-block",
   "items-block"
-]), O = o({
+]), L = o({
   /** Default blocks to exclude from the editor */
   excludeDefaults: e(
-    c(E),
+    c(g),
     []
   ),
   /** Custom blocks to include in the editor */
   includeCustoms: e(
-    c(g),
+    c(O),
     []
   )
-}), l = o({
+}), r = o({
   /** Unique identifier for the rule */
   id: t(),
   /** Human-readable description */
   description: e(t()),
   /** Priority for rule ordering (lower = earlier) */
   priority: p()
-}), L = o({
-  ...l.entries,
-  type: r("replace"),
+}), M = o({
+  ...r.entries,
+  type: l("replace"),
   /** String to search for */
   search: t(),
   /** Replacement string */
   replacement: t(),
   /** Replace all occurrences (default: false) */
   replaceAll: e(a())
-}), M = o({
-  ...l.entries,
-  type: r("regex"),
+}), N = o({
+  ...r.entries,
+  type: l("regex"),
   /** Regex pattern string */
   pattern: t(),
   /** Replacement string (supports $1, $2, etc.) */
   replacement: t(),
   /** Regex flags (e.g., 'gi') */
   flags: e(t())
-}), N = o({
-  ...l.entries,
-  type: r("remove"),
+}), D = o({
+  ...r.entries,
+  type: l("remove"),
   /** Strings or patterns to remove */
   targets: c(t())
-}), D = o({
-  ...l.entries,
-  type: r("custom"),
+}), v = o({
+  ...r.entries,
+  type: l("custom"),
   /** Custom processor function */
   processor: S(
     (i) => typeof i == "function",
     "processor must be a function"
   )
-}), v = k("type", [
-  L,
+}), x = k("type", [
   M,
   N,
-  D
+  D,
+  v
 ]), U = o({
   /** Custom compiler rules to apply */
-  customRules: e(c(v), []),
+  customRules: e(c(x), []),
   /** Skip default compiler rules */
   ignoreDefaultRules: e(a(), !1)
-}), x = o({
+}), B = o({
   /**
    * External validation handler called before save completes.
    * Return false to cancel the save operation.
@@ -207,48 +216,49 @@ const m = {
       "externalValidation must be a function"
     )
   )
-}), F = o({
+}), H = o({
   // Required sections
   /** Identity configuration (required) */
   identity: h,
   /** Partner configuration (required) */
-  partner: y,
+  partner: f,
   // Optional sections (with defaults)
   /** Template content and presets */
-  template: e(A, {}),
+  template: e(R, {}),
   /** Editor settings */
-  editor: e(C, {}),
+  editor: e(T, {}),
   /** UI configuration */
-  ui: e(T, {}),
+  ui: e(I, {}),
   /** Feature toggles */
-  features: e(I, {}),
+  features: e(E, {}),
   /** Block configuration */
-  blocks: e(O, {}),
+  blocks: e(L, {}),
   /** Compiler configuration */
   compiler: e(U, {}),
   /** Callbacks and event handlers */
-  callbacks: e(x, {})
+  callbacks: e(B, {})
 });
 export {
-  O as BlocksSchema,
-  x as CallbacksSchema,
-  v as CompilerRuleSchema,
+  L as BlocksSchema,
+  B as CallbacksSchema,
+  x as CompilerRuleSchema,
   U as CompilerSchema,
-  g as CustomBlockTypeSchema,
-  D as CustomRuleSchema,
-  E as DefaultBlockTypeSchema,
-  f as DynamicContentSchema,
-  C as EditorSchema,
-  R as EmailHeaderSchema,
-  I as FeaturesSchema,
-  F as GuidoConfigSchema,
+  O as CustomBlockTypeSchema,
+  v as CustomRuleSchema,
+  g as DefaultBlockTypeSchema,
+  A as DynamicContentSchema,
+  T as EditorSchema,
+  C as EmailHeaderSchema,
+  y as FallbackFontSchema,
+  E as FeaturesSchema,
+  H as GuidoConfigSchema,
   h as IdentitySchema,
   m as MessageType,
-  y as PartnerSchema,
+  f as PartnerSchema,
   s as ProductType,
-  M as RegexRuleSchema,
-  N as RemoveRuleSchema,
-  L as ReplaceRuleSchema,
-  A as TemplateSchema,
-  T as UISchema
+  N as RegexRuleSchema,
+  D as RemoveRuleSchema,
+  M as ReplaceRuleSchema,
+  R as TemplateSchema,
+  I as UISchema
 };

package/dist/components/Guido.vue.js

@@ -3,7 +3,7 @@ import i from "./Guido.vue2.js";
 import a from "../_virtual/_plugin-vue2_normalizer.js";
 var t = function() {
   var o = this, r = o._self._c, e = o._self._setupProxy;
-  return r("div", { staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper, { ref: "headerWrapperRef" }), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : o._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.FilterSelectionDrawer), r(e.SaveAsTemplateDrawer), e.isTestPartner() ? o._e() : r(e.OnboardingWrapper, { on: { "onboarding-finished": function(_) {
+  return r("div", { ref: "wrapperRef", staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper, { ref: "headerWrapperRef" }), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : o._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.FilterSelectionDrawer), r(e.SaveAsTemplateDrawer), e.isTestPartner() ? o._e() : r(e.OnboardingWrapper, { on: { "onboarding-finished": function(p) {
     return e.emit("onboarding:finished");
   } } }), r(e.UnsubscribeWrapper), r(e.LoadingWrapper)], 1);
 }, n = [], s = /* @__PURE__ */ a(
@@ -12,9 +12,9 @@ var t = function() {
   n,
   !1,
   null,
-  "a26d7792"
+  "25780af6"
 );
-const v = s.exports;
+const u = s.exports;
 export {
-  v as default
+  u as default
 };

package/dist/components/Guido.vue2.js

@@ -1,121 +1,131 @@
-import { defineComponent as K, defineAsyncComponent as _, ref as V, computed as P, watch as j, onMounted as q, onUnmounted as J } from "vue";
-import { provideGuidoActions as Q } from "../composables/useGuidoActions.js";
-import { usePartner as X } from "../composables/usePartner.js";
-import { useStripo as Y } from "../composables/useStripo.js";
-import { useTimerClone as Z } from "../composables/useTimerClone.js";
-import { migrate as A } from "../config/migrator/index.js";
-import { ModuleFolderDefaults as N } from "../enums/defaults.js";
-import $ from "./organisms/base/Toaster.vue.js";
-import ee from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
-import oe from "./organisms/header/HeaderWrapper.vue.js";
-import te from "./organisms/LoadingWrapper.vue.js";
-import ne from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
-import se from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
-import { useStripoApi as re } from "../services/stripoApi.js";
-import { useConfigStore as ce } from "../stores/config.js";
-import { useDynamicContentStore as ae } from "../stores/dynamic-content.js";
-import { useEditorStore as ie } from "../stores/editor.js";
-import { usePreviewStore as me } from "../stores/preview.js";
-import { useUnsubscribeStore as de } from "../stores/unsubscribe.js";
-const Me = /* @__PURE__ */ K({
+import { defineComponent as j, defineAsyncComponent as R, ref as A, computed as I, watch as J, onMounted as Q, onUnmounted as X } from "vue";
+import { provideGuidoActions as Y } from "../composables/useGuidoActions.js";
+import { usePartner as Z } from "../composables/usePartner.js";
+import { useStripo as ee } from "../composables/useStripo.js";
+import { useTimerClone as te } from "../composables/useTimerClone.js";
+import { migrate as W } from "../config/migrator/index.js";
+import { ModuleFolderDefaults as B } from "../enums/defaults.js";
+import { RIBBON_SELECTOR as oe } from "../enums/onboarding.js";
+import ne from "./organisms/base/Toaster.vue.js";
+import se from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
+import re from "./organisms/header/HeaderWrapper.vue.js";
+import ce from "./organisms/LoadingWrapper.vue.js";
+import ae from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
+import ie from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
+import { useStripoApi as me } from "../services/stripoApi.js";
+import { useConfigStore as de } from "../stores/config.js";
+import { useDynamicContentStore as le } from "../stores/dynamic-content.js";
+import { useEditorStore as ue } from "../stores/editor.js";
+import { usePreviewStore as pe } from "../stores/preview.js";
+import { useUnsubscribeStore as fe } from "../stores/unsubscribe.js";
+const Re = /* @__PURE__ */ j({
   __name: "Guido",
   props: {
     config: null
   },
   emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready", "onboarding:finished", "test-email:click"],
-  setup(W, { expose: I, emit: t }) {
-    const v = W, O = _(
+  setup(H, { expose: x, emit: s }) {
+    const b = H, G = R(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
-    ), G = _(
+    ), z = R(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), h = V(), i = ae(), y = de(), s = ce();
-    s.init(v.config);
-    const m = ie(), H = me(), c = P(() => m.hasChanges), { isTestPartner: x } = X(), f = () => {
+    ), S = A(), d = A(), l = le(), g = fe(), a = de();
+    a.init(b.config);
+    const u = ue(), q = pe(), i = I(() => u.hasChanges), { isTestPartner: K } = Z(), w = () => {
       var e;
-      return (e = h.value) == null ? void 0 : e.handleSave(!0);
+      return (e = S.value) == null ? void 0 : e.handleSave(!0);
     }, {
-      templateId: d,
-      userId: b,
-      partnerName: S,
-      username: g,
-      template: o,
-      editor: n
-    } = s, a = (o == null ? void 0 : o.html) || "", D = (o == null ? void 0 : o.css) || "", l = (o == null ? void 0 : o.preselectedDynamicContent) || [], w = (n == null ? void 0 : n.savedModulesFolderName) || N.SAVED_MODULES, E = (n == null ? void 0 : n.defaultModulesFolderName) || N.DEFAULT_MODULES;
-    m.templateId = d;
-    const u = {
-      emailId: d,
-      userId: b,
-      username: g,
-      partnerName: S,
-      savedModulesFolderName: w,
-      defaultModulesFolderName: E
-    }, C = {
-      preselectedDynamicContentList: l,
+      templateId: p,
+      userId: E,
+      partnerName: D,
+      username: C,
+      template: t,
+      editor: r
+    } = a, m = (t == null ? void 0 : t.html) || "", T = (t == null ? void 0 : t.css) || "", f = (t == null ? void 0 : t.preselectedDynamicContent) || [], k = (r == null ? void 0 : r.savedModulesFolderName) || B.SAVED_MODULES, F = (r == null ? void 0 : r.defaultModulesFolderName) || B.DEFAULT_MODULES;
+    u.templateId = p;
+    const v = {
+      emailId: p,
+      userId: E,
+      username: C,
+      partnerName: D,
+      savedModulesFolderName: k,
+      defaultModulesFolderName: F
+    }, L = {
+      preselectedDynamicContentList: f,
       onReady: () => {
-        console.debug("guido:ready"), t("ready");
+        console.debug("guido:ready"), s("ready");
       }
-    }, { initPlugin: T } = Y(u, C), { getDefaultTemplate: k } = re(), { cloneTimersOnSave: F, hasTimerBlocks: U } = Z(), B = P(() => {
+    }, { initPlugin: U } = ee(v, L), { getDefaultTemplate: _ } = me(), { cloneTimersOnSave: M, hasTimerBlocks: O } = te(), V = I(() => {
       var e;
-      return !((e = s.ui) != null && e.showHeader);
+      return !((e = a.ui) != null && e.showHeader);
     });
-    Q({
+    Y({
       onBack: () => {
-        console.debug("guido:back"), t("back");
+        console.debug("guido:back"), s("back");
       },
       onSaveStart: () => {
-        console.debug("guido:save:start"), t("save:start");
+        console.debug("guido:save:start"), s("save:start");
       },
       onSaveComplete: (e) => {
-        const r = { ...e, metadata: u };
-        console.debug("guido:save:complete", r), t("save:complete", r);
+        const n = { ...e, metadata: v };
+        console.debug("guido:save:complete", n), s("save:complete", n);
       },
       onTestEmailClick: () => {
-        console.debug("guido:test-email:click"), t("test-email:click");
+        console.debug("guido:test-email:click"), s("test-email:click");
       }
     });
-    const L = (e) => {
-      console.debug("dynamic-content:close", e), i.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
-    }, M = () => {
+    const P = (e) => {
+      console.debug("dynamic-content:close", e), l.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
+    }, N = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
-    j(() => c.value, () => {
-      t("on-change", c.value);
+    J(() => i.value, () => {
+      s("on-change", i.value);
     });
-    const p = (e) => {
-      const r = e, { attribute: R, position: z } = r.detail;
-      console.debug("dynamic-content:open", r.detail), t("dynamic-content:open", R, z);
+    const y = (e) => {
+      const n = e, { attribute: o, position: $ } = n.detail;
+      console.debug("dynamic-content:open", n.detail), s("dynamic-content:open", o, $);
     };
-    return q(async () => {
-      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
+    let c = null;
+    const h = () => {
+      var n;
+      const e = document.querySelector(oe);
+      (n = d.value) == null || n.style.setProperty("--ribbon-offset", `${(e == null ? void 0 : e.offsetHeight) ?? 0}px`);
+    };
+    return Q(async () => {
+      var n;
+      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow"), h();
+      const e = (n = d.value) == null ? void 0 : n.parentElement;
+      e && (c = new ResizeObserver(h), c.observe(e));
       try {
-        y.selectedUnsubscribePages = (o == null ? void 0 : o.selectedUnsubscribePages) || [];
-        let e = {
-          html: a && await A(a),
-          css: D
+        g.selectedUnsubscribePages = (t == null ? void 0 : t.selectedUnsubscribePages) || [];
+        let o = {
+          html: m && await W(m),
+          css: T
         };
-        e.html || (e = await k(), e.html = await A(e.html)), U(e.html) && (e.html = await F(e.html)), await T(e), i.selectedDynamicContentList = l;
-      } catch (e) {
-        console.error("Failed to initialize Stripo editor:", e);
+        o.html || (o = await _(), o.html = await W(o.html)), O(o.html) && (o.html = await M(o.html)), await U(o), l.selectedDynamicContentList = f;
+      } catch (o) {
+        console.error("Failed to initialize Stripo editor:", o);
       }
-      document.addEventListener("dynamic-content:open", p);
-    }), J(() => {
-      document.removeEventListener("dynamic-content:open", p);
+      document.addEventListener("dynamic-content:open", y);
+    }), X(() => {
+      c == null || c.disconnect(), document.removeEventListener("dynamic-content:open", y);
       try {
         window.UIEditor.removeEditor();
       } catch {
         console.debug("Failed to remove Stripo editor: No editor found");
       }
-      s.reset();
-    }), I({
+      a.reset();
+    }), x({
       dynamicContent: {
-        insert: L,
-        close: M
+        insert: P,
+        close: N
       },
-      hasChanges: c,
-      saveSilent: f
-    }), { __sfc: !0, PreviewContainer: O, OnboardingWrapper: G, headerWrapperRef: h, dynamicContentStore: i, unsubscribeStore: y, props: v, configStore: s, editorStore: m, previewStore: H, hasChanges: c, isTestPartner: x, saveSilent: f, templateId: d, userId: b, partnerName: S, username: g, templateConfig: o, editorConfig: n, html: a, css: D, preselectedDynamicContentList: l, savedModulesFolderName: w, defaultModulesFolderName: E, emit: t, metadata: u, options: C, initPlugin: T, getDefaultTemplate: k, cloneTimersOnSave: F, hasTimerBlocks: U, noHeader: B, insertDynamicContent: L, closeDynamicContent: M, handleDynamicContentOpen: p, Toaster: $, FilterSelectionDrawer: ee, HeaderWrapper: oe, LoadingWrapper: te, SaveAsTemplateDrawer: ne, UnsubscribeWrapper: se };
+      hasChanges: i,
+      saveSilent: w
+    }), { __sfc: !0, PreviewContainer: G, OnboardingWrapper: z, headerWrapperRef: S, wrapperRef: d, dynamicContentStore: l, unsubscribeStore: g, props: b, configStore: a, editorStore: u, previewStore: q, hasChanges: i, isTestPartner: K, saveSilent: w, templateId: p, userId: E, partnerName: D, username: C, templateConfig: t, editorConfig: r, html: m, css: T, preselectedDynamicContentList: f, savedModulesFolderName: k, defaultModulesFolderName: F, emit: s, metadata: v, options: L, initPlugin: U, getDefaultTemplate: _, cloneTimersOnSave: M, hasTimerBlocks: O, noHeader: V, insertDynamicContent: P, closeDynamicContent: N, handleDynamicContentOpen: y, ribbonObserver: c, updateRibbonOffset: h, Toaster: ne, FilterSelectionDrawer: se, HeaderWrapper: re, LoadingWrapper: ce, SaveAsTemplateDrawer: ae, UnsubscribeWrapper: ie };
   }
 });
 export {
-  Me as default
+  Re as default
 };

package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue.js

@@ -1,16 +1,16 @@
 import s from "./EmailSizeIndicator.vue2.js";
 /* empty css                        */
-import r from "../../../../_virtual/_plugin-vue2_normalizer.js";
-var o = function() {
-  var e = this, i = e._self._c, t = e._self._setupProxy;
-  return t.previewStore.previewHtml ? i("div", { staticClass: "d-f a-i-c j-c-c" }, [i(t.InProgress, { staticClass: "min-w-15-s", attrs: { id: "email-size-progress", "description-status": "", "description-position": "left", description: t.htmlSize, "max-value": t.MAX_EMAIL_SIZE_IN_KB, type: t.progress.type, value: t.progress.value } }), i(t.InTooltipV2, { attrs: { id: "email-size-tooltip", "icon-status": "", "static-position": "bottom center", "dynamic-position": !1, text: t.trans("email-editor.preview-design-size-tooltip") } })], 1) : e._e();
-}, a = [], n = /* @__PURE__ */ r(
+import o from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var r = function() {
+  var i = this, e = i._self._c, t = i._self._setupProxy;
+  return e("div", { staticClass: "d-f a-i-c j-c-c" }, [t.previewStore.isLoaded ? [e(t.InProgress, { staticClass: "min-w-15-s", attrs: { id: "email-size-progress", "description-status": "", "description-position": "left", description: t.htmlSize, "max-value": t.MAX_EMAIL_SIZE_IN_KB, type: t.progress.type, value: t.progress.value } }), e(t.InTooltipV2, { attrs: { id: "email-size-tooltip", "icon-status": "", "static-position": "bottom center", "dynamic-position": !1, text: t.trans("email-editor.preview-design-size-tooltip") } })] : e(t.InSkeleton, { attrs: { sizing: { width: 200, height: 20 } } })], 2);
+}, a = [], n = /* @__PURE__ */ o(
   s,
-  o,
+  r,
   a,
   !1,
   null,
-  "079d2bf7"
+  "2cb418af"
 );
 const m = n.exports;
 export {

package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue2.js

@@ -1,25 +1,17 @@
-import { defineComponent as c, ref as n, computed as l, watch as u } from "vue";
-import { useTranslations as p } from "../../../../composables/useTranslations.js";
-import { usePreviewStore as _ } from "../../../../stores/preview.js";
-import { InTooltipV2 as v, InProgress as f } from "@useinsider/design-system-vue";
-const S = /* @__PURE__ */ c({
+import { defineComponent as i, computed as t } from "vue";
+import { useTranslations as m } from "../../../../composables/useTranslations.js";
+import { usePreviewStore as a } from "../../../../stores/preview.js";
+import { InTooltipV2 as p, InSkeleton as c, InProgress as _ } from "@useinsider/design-system-vue";
+const z = /* @__PURE__ */ i({
   __name: "EmailSizeIndicator",
-  setup(w) {
-    const t = _(), o = 102, e = n(0), s = n({
-      type: "success",
-      value: 0
-    }), a = l(() => `~${e.value} KB`), r = () => {
-      const m = new Blob([t.previewHtml]).size;
-      e.value = Math.round(m / 1024), s.value = {
-        type: e.value < o ? "success" : "warning",
-        value: Math.min(e.value, o)
-      };
-    }, i = p();
-    return u(() => t.previewHtml, () => {
-      r();
-    }, { immediate: !0 }), { __sfc: !0, previewStore: t, MAX_EMAIL_SIZE_IN_KB: o, htmlKB: e, progress: s, htmlSize: a, calculateProgress: r, trans: i, InProgress: f, InTooltipV2: v };
+  setup(l) {
+    const e = a(), o = 102, r = t(() => `~${e.emailSizeKB} KB`), n = t(() => ({
+      type: e.emailSizeKB < o ? "success" : "warning",
+      value: Math.min(e.emailSizeKB, o)
+    })), s = m();
+    return { __sfc: !0, previewStore: e, MAX_EMAIL_SIZE_IN_KB: o, htmlSize: r, progress: n, trans: s, InProgress: _, InSkeleton: c, InTooltipV2: p };
   }
 });
 export {
-  S as default
+  z as default
 };

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

@@ -4,7 +4,7 @@ import d from "../../../_virtual/_plugin-vue2_normalizer.js";
 var u = function() {
   var s, i, n, a;
   var o = this, e = o._self._c, t = o._self._setupProxy;
-  return e("div", { staticClass: "d-f editor-actions" }, [t.isVersionHistoryButtonVisible ? e(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryButtonDisabled, "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen, "tooltip-options": t.getTooltipOptions("guido__history-button"), "tooltip-text": t.versionHistoryTooltipText }, on: { click: t.handleVersionHistory } }) : o._e(), e(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isExportButtonDisabled, "label-text-status": !1, "loading-status": t.isExporting, "tooltip-options": t.getTooltipOptions("guido__export-button"), "tooltip-text": t.trans("newsletter.export") }, on: { click: t.handleExport } }), (i = (s = t.config) == null ? void 0 : s.features) != null && i.saveAsTemplate ? e(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isSaveAsButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__save-as-button"), "tooltip-text": t.trans("newsletter.save-templates") }, on: { click: t.handleSaveAs } }) : o._e(), (a = (n = t.config) == null ? void 0 : n.features) != null && a.testMessage ? e(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isTestButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__test-button", { staticPosition: "bottom right" }), "tooltip-text": t.trans("newsletter.test-email") }, on: { click: t.testEmailClick } }) : o._e(), t.editorStore.isPreviewModeOpen ? o._e() : e(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": !t.isSaving && t.editorStore.isSaveButtonDisabled, "loading-status": t.isSaving }, on: { click: function(r) {
+  return e("div", { staticClass: "d-f editor-actions" }, [t.isVersionHistoryButtonVisible ? e(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryButtonDisabled, "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen, "tooltip-options": t.getTooltipOptions("guido__history-button"), "tooltip-text": t.versionHistoryTooltipText }, on: { click: t.handleVersionHistory } }) : o._e(), e(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isExportButtonDisabled, "label-text-status": !1, "loading-status": t.isExporting, "tooltip-options": t.getTooltipOptions("guido__export-button"), "tooltip-text": t.trans("newsletter.export") }, on: { click: t.handleExport } }), (i = (s = t.config) == null ? void 0 : s.features) != null && i.saveAsTemplate ? e(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isSaveAsButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__save-as-button"), "tooltip-text": t.trans("newsletter.save-templates") }, on: { click: t.handleSaveAs } }) : o._e(), (a = (n = t.config) == null ? void 0 : n.features) != null && a.testMessage ? e(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isTestButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__test-button", { staticPosition: "bottom right" }), "tooltip-text": t.trans("newsletter.test-email") }, on: { click: t.handleTestEmail } }) : o._e(), t.editorStore.isPreviewModeOpen ? o._e() : e(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": !t.isSaving && t.editorStore.isSaveButtonDisabled, "loading-status": t.isSaving }, on: { click: function(r) {
     return t.handleSave(!1);
   } } }), e(t.MigrationConfirmModal, { ref: "migrationModalRef", on: { confirm: function(r) {
     return t.executeSave(!1);
@@ -15,7 +15,7 @@ var u = function() {
   p,
   !1,
   null,
-  "acff76a8"
+  "4e2a4adb"
 );
 const v = c.exports;
 export {