@useinsider/guido 3.17.0-beta.ec8eabb → 3.17.0-beta.edf4165

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

@@ -1,57 +1,49 @@
-import { defineComponent as F, ref as a, computed as x } from "vue";
-import { useActionsApi as b } from "../../../composables/useActionsApi.js";
-import { useConfig as k } from "../../../composables/useConfig.js";
-import { useExport as B } from "../../../composables/useExport.js";
-import { useTestEmailClick as D } from "../../../composables/useGuidoActions.js";
-import { useHtmlCompiler as L } from "../../../composables/useHtmlCompiler.js";
-import { useSave as R } from "../../../composables/useSave.js";
-import { useToaster as z } from "../../../composables/useToaster.js";
-import { useTranslations as I } from "../../../composables/useTranslations.js";
-import { useVersionHistoryApi as P } from "../../../composables/useVersionHistoryApi.js";
-import { useLiquidValidator as j } from "../../../composables/validators/useLiquidValidator.js";
-import { useEditorStore as G } from "../../../stores/editor.js";
-import { useTemplateStore as J } from "../../../stores/template.js";
-import { getTooltipOptions as K } from "../../../utils/tooltipUtils.js";
-import { InButtonV2 as N } from "@useinsider/design-system-vue";
-import { storeToRefs as Q } from "pinia";
-import U from "./MigrationConfirmModal.vue.js";
-const ft = /* @__PURE__ */ F({
+import { defineComponent as O, ref as n, computed as h } from "vue";
+import { useActionsApi as q } from "../../../composables/useActionsApi.js";
+import { useConfig as b } from "../../../composables/useConfig.js";
+import { useExport as k } from "../../../composables/useExport.js";
+import { useTestEmailClick as B } from "../../../composables/useGuidoActions.js";
+import { useHtmlCompiler as D } from "../../../composables/useHtmlCompiler.js";
+import { useSave as F } from "../../../composables/useSave.js";
+import { useTranslations as L } from "../../../composables/useTranslations.js";
+import { useVersionHistoryApi as R } from "../../../composables/useVersionHistoryApi.js";
+import { useLiquidValidator as z } from "../../../composables/validators/useLiquidValidator.js";
+import { useEditorStore as I } from "../../../stores/editor.js";
+import { useTemplateStore as P } from "../../../stores/template.js";
+import { getTooltipOptions as j } from "../../../utils/tooltipUtils.js";
+import { InButtonV2 as G } from "@useinsider/design-system-vue";
+import { storeToRefs as J } from "pinia";
+import K from "./MigrationConfirmModal.vue.js";
+const ut = /* @__PURE__ */ O({
   __name: "EditorActions",
-  setup(W, { expose: w }) {
-    const { config: n, isFeatureEnabled: l } = k(), { exportHtml: m } = B(), { save: u } = R(), { openVersionHistory: c, closeVersionHistory: p } = P(), { getCompiledEmail: f } = b(), { compileHtml: d } = L(), { validateLiquidSyntax: v } = j(), { handleError: y } = z(), e = G(), g = J(), { hasMigrations: S } = Q(g), r = I(), s = a(!1), i = a(!1), H = a(), V = D(), _ = () => {
+  setup(N, { expose: x }) {
+    const { config: a, isFeatureEnabled: l } = b(), { exportHtml: m } = k(), { save: u } = F(), { openVersionHistory: c, closeVersionHistory: p } = R(), { getCompiledEmail: f } = q(), { compileHtml: d } = D(), { validateLiquidSyntax: v } = z(), e = I(), y = P(), { hasMigrations: g } = J(y), s = L(), i = n(!1), r = n(!1), S = n(), H = B(), T = () => {
       if (e.isVersionHistoryOpen) {
         p();
         return;
       }
       c();
-    }, C = async () => {
-      s.value = !0, await m(), s.value = !1;
-    }, A = () => {
+    }, w = async () => {
+      i.value = !0, await m(), i.value = !1;
+    }, _ = () => {
       e.isSaveAsTemplateDrawerOpen = !0;
-    }, M = x(() => e.isVersionHistoryOpen ? r("newsletter.close-version-history") : r("newsletter.version-history")), O = x(
+    }, C = h(() => e.isVersionHistoryOpen ? s("newsletter.close-version-history") : s("newsletter.version-history")), A = h(
       () => {
         var t, o;
-        return ((o = (t = n.value) == null ? void 0 : t.features) == null ? void 0 : o.versionHistory) && !e.isPreviewModeOpen;
+        return ((o = (t = a.value) == null ? void 0 : t.features) == null ? void 0 : o.versionHistory) && !e.isPreviewModeOpen;
       }
-    ), h = async (t) => {
-      i.value = !0, t || (e.loadingStatus = !0);
-      let o;
-      try {
-        o = await u(t);
-      } catch (T) {
-        y(T, "Failed to save template");
-      } finally {
-        i.value = !1, !t && !o && (e.loadingStatus = !1);
-      }
-      return o;
+    ), V = async (t) => {
+      r.value = !0, t || (e.loadingStatus = !0);
+      const o = await u(t);
+      return r.value = !1, !t && !o && (e.loadingStatus = !1), o;
     }, E = (t) => {
       var o;
-      if (!t && S.value) {
-        (o = H.value) == null || o.open();
+      if (!t && g.value) {
+        (o = S.value) == null || o.open();
         return;
       }
-      return h(t);
-    }, q = async () => {
+      return V(t);
+    }, M = async () => {
       if (l("liquidSyntax")) {
         e.loadingStatus = !0;
         try {
@@ -62,13 +54,13 @@ const ft = /* @__PURE__ */ F({
           e.loadingStatus = !1;
         }
       }
-      V();
+      H();
     };
-    return w({
+    return x({
       handleSave: E
-    }), { __sfc: !0, config: n, isFeatureEnabled: l, exportHtml: m, save: u, openVersionHistory: c, closeVersionHistory: p, getCompiledEmail: f, compileHtml: d, validateLiquidSyntax: v, handleError: y, editorStore: e, templateStore: g, hasMigrations: S, trans: r, isExporting: s, isSaving: i, migrationModalRef: H, testEmailClick: V, handleVersionHistory: _, handleExport: C, handleSaveAs: A, versionHistoryTooltipText: M, isVersionHistoryButtonVisible: O, executeSave: h, handleSave: E, handleTestEmail: q, getTooltipOptions: K, InButtonV2: N, MigrationConfirmModal: U };
+    }), { __sfc: !0, config: a, isFeatureEnabled: l, exportHtml: m, save: u, openVersionHistory: c, closeVersionHistory: p, getCompiledEmail: f, compileHtml: d, validateLiquidSyntax: v, editorStore: e, templateStore: y, hasMigrations: g, trans: s, isExporting: i, isSaving: r, migrationModalRef: S, testEmailClick: H, handleVersionHistory: T, handleExport: w, handleSaveAs: _, versionHistoryTooltipText: C, isVersionHistoryButtonVisible: A, executeSave: V, handleSave: E, handleTestEmail: M, getTooltipOptions: j, InButtonV2: G, MigrationConfirmModal: K };
   }
 });
 export {
-  ft as default
+  ut as default
 };

package/dist/composables/useActionsApi.js

@@ -1,68 +1,52 @@
-import { filterAmpErrors as v } from "../utils/ampErrorFilter.js";
-import { useToaster as y } from "./useToaster.js";
-const D = 1e4, d = 3e4, s = (n, l, u) => new Promise((T, m) => {
-  const w = setTimeout(
-    () => m(new Error(`${n} did not report completion within ${l}ms`)),
-    l
-  ), p = (A) => (t) => {
-    clearTimeout(w), A(t);
-  };
-  u(p(T), p(m));
-}), I = () => {
-  const { handleError: n } = y(), l = (t = {}) => s(
-    "compileEmail",
-    d,
-    (e, a) => {
-      const o = { ...{
-        minimize: !0,
-        utmEntity: {
-          utmSource: "",
-          utmMedium: "",
-          utmCampaign: "",
-          utmContent: "",
-          utmTerm: "",
-          customUtms: [
-            {
-              name1: "val1",
-              name2: "val2"
-            }
-          ]
-        },
-        mergeTags: ["Tag1", "Tag2"],
-        forceAmp: !1,
-        resetDataSavedFlag: !1,
-        disableLineHeightsReplace: !0
-      }, ...t }, c = {
-        callback: (r, C, f, S, g) => {
-          r ? a(r) : e({
-            html: C,
-            ampHtml: f,
-            ampErrors: v(S ?? []),
-            displayConditions: g
-          });
-        },
-        ...o
-      };
-      window.StripoEditorApi.actionsApi.compileEmail(c);
-    }
-  );
+import { filterAmpErrors as T } from "../utils/ampErrorFilter.js";
+import { useToaster as A } from "./useToaster.js";
+const p = 1e4, D = () => {
+  const { handleError: r } = A(), l = (t = {}) => new Promise((e, a) => {
+    const o = { ...{
+      minimize: !0,
+      utmEntity: {
+        utmSource: "",
+        utmMedium: "",
+        utmCampaign: "",
+        utmContent: "",
+        utmTerm: "",
+        customUtms: [
+          {
+            name1: "val1",
+            name2: "val2"
+          }
+        ]
+      },
+      mergeTags: ["Tag1", "Tag2"],
+      forceAmp: !1,
+      resetDataSavedFlag: !1,
+      disableLineHeightsReplace: !0
+    }, ...t }, n = {
+      callback: (m, d, c, u, w) => {
+        m ? a(m) : e({
+          html: d,
+          ampHtml: c,
+          ampErrors: T(u ?? []),
+          displayConditions: w
+        });
+      },
+      ...o
+    };
+    window.StripoEditorApi.actionsApi.compileEmail(n);
+  });
   return {
     getCompiledEmail: l,
-    getTemplateData: () => s(
-      "getTemplateData",
-      d,
-      (t) => {
-        const e = ({ html: a, css: i, width: o, height: E, utmParams: c, syncModulesIds: r }) => t({
-          html: a,
-          css: i,
-          width: o,
-          height: E,
-          utmParams: c,
-          syncModulesIds: r
-        });
-        window.StripoEditorApi.actionsApi.getTemplateData(e);
-      }
-    ),
+    getTemplateData: () => new Promise((t) => {
+      const e = ({ html: a, css: i, width: o, height: s, utmParams: n, syncModulesIds: m }) => t({
+        html: a,
+        css: i,
+        width: o,
+        height: s,
+        utmParams: n,
+        syncModulesIds: m
+      });
+      window.StripoEditorApi.actionsApi.getTemplateData(e);
+    }),
     activateCustomViewStyles: (t = !0) => {
       window.StripoEditorApi.actionsApi.activateCustomViewStyles(t);
     },
@@ -81,7 +65,7 @@ const D = 1e4, d = 3e4, s = (n, l, u) => new Promise((T, m) => {
           displayConditions: a
         };
       } catch (e) {
-        return n(e, "Error loading preview"), {
+        return r(e, "Error loading preview"), {
           html: "",
           ampHtml: "",
           ampErrors: [],
@@ -97,33 +81,34 @@ const D = 1e4, d = 3e4, s = (n, l, u) => new Promise((T, m) => {
       }
       try {
         window.StripoEditorApi.actionsApi.updateTimerInClonedTemplate((i, o) => {
-          i ? (n(i, "Failed to update timer in cloned template"), t(null)) : t(o || null);
+          i ? (r(i, "Failed to update timer in cloned template"), t(null)) : t(o || null);
         });
       } catch (i) {
-        n(i, "Failed to call updateTimerInClonedTemplate"), t(null);
+        r(i, "Failed to call updateTimerInClonedTemplate"), t(null);
       }
     }),
     updateHtmlAndCss: (t, e) => {
       const { actionsApi: a } = window.StripoEditorApi;
-      return s("updateHtmlAndCss", D, (i) => {
-        a.updateHtmlAndCss(t, e, () => i());
+      return new Promise((i, o) => {
+        const s = new Error(
+          `updateHtmlAndCss did not report completion within ${p}ms`
+        ), n = setTimeout(() => o(s), p);
+        a.updateHtmlAndCss(t, e, () => {
+          clearTimeout(n), i();
+        });
       });
     },
-    editorSave: () => s(
-      "save",
-      d,
-      (t) => {
-        window.StripoEditorApi.actionsApi.save((e) => {
-          if (e) {
-            n(e, "Failed to save template"), t(!1);
-            return;
-          }
-          t(!0);
-        });
-      }
-    )
+    editorSave: () => new Promise((t) => {
+      window.StripoEditorApi.actionsApi.save((e) => {
+        if (e) {
+          r(e, "Failed to save template"), t(!1);
+          return;
+        }
+        t(!0);
+      });
+    })
   };
 };
 export {
-  I as useActionsApi
+  D as useActionsApi
 };

package/dist/composables/useAutoSave.js

@@ -1,22 +1,21 @@
-import { useConfig as E } from "./useConfig.js";
-import { useEditorLock as p } from "./useEditorLock.js";
+import { useConfig as m } from "./useConfig.js";
 import { useAutosaveStore as A, AUTOSAVE_STATUS as s } from "../stores/autosave.js";
-import { useEditorStore as f } from "../stores/editor.js";
-import { computed as y, watch as I, onUnmounted as L } from "vue";
-const w = 18e4, v = 6e4, R = (b) => {
-  const { isFeatureEnabled: S } = E(), o = f(), t = A(), { isEditorBusy: g } = p();
+import { useEditorStore as E } from "../stores/editor.js";
+import { computed as f, watch as p, onUnmounted as y } from "vue";
+const I = 18e4, r = 6e4, T = (b) => {
+  const { isFeatureEnabled: S } = m(), a = E(), t = A();
   let i = null, c = 0;
-  const u = y(
+  const u = f(
     () => S("autosave") && t.isOn
-  ), m = () => o.hasChanges && o.isInSaveableState, h = () => ({
-    hasChanges: o.hasChanges,
-    isInSaveableState: o.isInSaveableState
-  }), r = async (e) => {
+  ), g = () => a.hasChanges && a.isInSaveableState, h = () => ({
+    hasChanges: a.hasChanges,
+    isInSaveableState: a.isInSaveableState
+  }), l = async (e) => {
     if (!u.value) {
       console.debug("guido:autosave:skipped", { trigger: e, reason: "not-active" });
       return;
     }
-    if (!m()) {
+    if (!g()) {
       console.debug("guido:autosave:skipped", { trigger: e, reason: "gates-blocked", gates: h() });
       return;
     }
@@ -24,19 +23,15 @@ const w = 18e4, v = 6e4, R = (b) => {
       console.debug("guido:autosave:skipped", { trigger: e, reason: "already-saving" });
       return;
     }
-    if (g()) {
-      console.debug("guido:autosave:skipped", { trigger: e, reason: "editor-busy" });
-      return;
-    }
     console.debug("guido:autosave:save-start", { trigger: e }), t.status = s.SAVING;
     try {
       if (await b() === void 0) {
         console.debug("guido:autosave:blocked", { trigger: e, reason: "save-returned-undefined" }), t.status = s.ERROR;
         return;
       }
-      o.hasChanges = !1, t.status = s.SAVED, t.lastSavedAt = /* @__PURE__ */ new Date(), console.debug("guido:autosave:save-complete", { trigger: e, at: t.lastSavedAt });
-    } catch (a) {
-      console.debug("guido:autosave:error", { trigger: e, error: a }), t.status = s.ERROR;
+      a.hasChanges = !1, t.status = s.SAVED, t.lastSavedAt = /* @__PURE__ */ new Date(), console.debug("guido:autosave:save-complete", { trigger: e, at: t.lastSavedAt });
+    } catch (o) {
+      console.debug("guido:autosave:error", { trigger: e, error: o }), t.status = s.ERROR;
     }
   }, n = () => {
     const { visibilityState: e } = document;
@@ -45,32 +40,32 @@ const w = 18e4, v = 6e4, R = (b) => {
       isActive: u.value
     }), e !== "hidden")
       return;
-    const a = Date.now() - c;
-    if (a < v) {
+    const o = Date.now() - c;
+    if (o < r) {
       console.debug("guido:autosave:visibility-debounced", {
-        sinceLastMs: a,
-        debounceMs: v
+        sinceLastMs: o,
+        debounceMs: r
       });
       return;
     }
-    c = Date.now(), r("visibility");
+    c = Date.now(), l("visibility");
   }, d = () => {
     i && (clearInterval(i), i = null);
-  }, l = () => {
+  }, v = () => {
     document.removeEventListener("visibilitychange", n), window.removeEventListener("pagehide", n);
   };
-  I(
+  p(
     u,
     (e) => {
       console.debug("guido:autosave:active-changed", { active: e }), e ? (d(), i = setInterval(() => {
-        console.debug("guido:autosave:interval-tick"), r("interval");
-      }, w), document.addEventListener("visibilitychange", n), window.addEventListener("pagehide", n)) : (d(), l(), t.status = s.IDLE);
+        console.debug("guido:autosave:interval-tick"), l("interval");
+      }, I), document.addEventListener("visibilitychange", n), window.addEventListener("pagehide", n)) : (d(), v(), t.status = s.IDLE);
     },
     { immediate: !0 }
-  ), L(() => {
-    d(), l(), t.status = s.IDLE, t.lastSavedAt = null;
+  ), y(() => {
+    d(), v(), t.status = s.IDLE, t.lastSavedAt = null;
   });
 };
 export {
-  R as useAutoSave
+  T as useAutoSave
 };

package/dist/composables/useCustomInterfaceAppearance.js

@@ -1,53 +1,67 @@
-import S from "../static/styles/base.css.js";
-import m from "../static/styles/components/alert-message.css.js";
-import e from "../static/styles/components/amp-block.css.js";
-import i from "../static/styles/components/base-input.css.js";
-import p from "../static/styles/components/button-group.css.js";
-import n from "../static/styles/components/button.css.js";
-import s from "../static/styles/components/combobox.css.js";
-import C from "../static/styles/components/counter.css.js";
-import f from "../static/styles/components/dropdown-menu.css.js";
-import a from "../static/styles/components/loader.css.js";
-import u from "../static/styles/components/narrow-panel.css.js";
-import c from "../static/styles/components/popup.css.js";
-import d from "../static/styles/components/switcher.css.js";
-import l from "../static/styles/components/tabs.css.js";
-import h from "../static/styles/components/tools.css.js";
-import w from "../static/styles/components/version-history.css.js";
-import y from "../static/styles/components/wide-panel.css.js";
-import B from "../static/styles/variables.css.js";
-const b = [
-  B,
-  // Must be on top
-  S,
+import S from "../static/assets/icons/line-change.svg.js";
+import i from "../static/assets/icons/line-delete.svg.js";
+import n from "../static/assets/icons/line-plus.svg.js";
+import p from "../static/styles/base.css.js";
+import s from "../static/styles/components/alert-message.css.js";
+import C from "../static/styles/components/amp-block.css.js";
+import a from "../static/styles/components/base-input.css.js";
+import f from "../static/styles/components/button-group.css.js";
+import c from "../static/styles/components/button.css.js";
+import u from "../static/styles/components/combobox.css.js";
+import l from "../static/styles/components/counter.css.js";
+import d from "../static/styles/components/dropdown-menu.css.js";
+import h from "../static/styles/components/loader.css.js";
+import g from "../static/styles/components/narrow-panel.css.js";
+import I from "../static/styles/components/popup.css.js";
+import w from "../static/styles/components/recommendation-strategy.css.js";
+import y from "../static/styles/components/switcher.css.js";
+import b from "../static/styles/components/tabs.css.js";
+import B from "../static/styles/components/tools.css.js";
+import $ from "../static/styles/components/version-history.css.js";
+import P from "../static/styles/components/wide-panel.css.js";
+import x from "../static/styles/variables.css.js";
+function r(t, o) {
+  return `--guido-icon-${t}: url("data:image/svg+xml,${encodeURIComponent(o.trim())}");`;
+}
+const A = `:host {
+    ${r("line-change", S)}
+    ${r("line-delete", i)}
+    ${r("line-plus", n)}
+}`, R = [
+  x,
   // Must be on top
-  m,
-  e,
-  i,
+  A,
   p,
-  n,
+  // Must be on top
   s,
   C,
-  f,
   a,
-  u,
+  f,
   c,
-  d,
+  u,
   l,
+  d,
   h,
-  w,
-  y
+  g,
+  I,
+  y,
+  b,
+  B,
+  $,
+  P,
+  w
+  // Last: overrides button.css / wide-panel.css defaults
 ].join(`
 
-`), v = () => ({ importCss: () => {
+`), Y = () => ({ importCss: () => {
   const o = new CSSStyleSheet();
-  o.replaceSync(b);
-  const r = document.querySelector("ui-editor");
-  if (!r)
+  o.replaceSync(R);
+  const e = document.querySelector("ui-editor");
+  if (!e)
     return;
-  const t = r.shadowRoot;
-  t && (t.adoptedStyleSheets = [o]);
+  const m = e.shadowRoot;
+  m && (m.adoptedStyleSheets = [o]);
 } });
 export {
-  v as useCustomInterfaceAppearance
+  Y as useCustomInterfaceAppearance
 };

package/dist/composables/useGuidoStateBridge.js

@@ -1,49 +1,48 @@
-import { useActionsApi as I } from "./useActionsApi.js";
-import { useEditorLock as b } from "./useEditorLock.js";
-import { useConfigStore as T } from "../stores/config.js";
-import { useEditorStore as v } from "../stores/editor.js";
-import { useGuidoEmailEditorStore as w } from "../stores/guido-email-editor.js";
-import { watch as c, onUnmounted as y } from "vue";
-const B = 500, G = () => {
-  const i = v(), a = w(), u = T(), { getTemplateData: l } = I(), { runExclusive: m, isEditorBusy: d } = b();
-  let o = null, r = !1;
-  const s = () => {
-    o && (clearTimeout(o), o = null);
-  }, n = async () => {
-    var t, e;
-    if (!(r || !i.isStripoInitialized || d()))
+import { useActionsApi as g } from "./useActionsApi.js";
+import { useConfigStore as I } from "../stores/config.js";
+import { useEditorStore as b } from "../stores/editor.js";
+import { useGuidoEmailEditorStore as E } from "../stores/guido-email-editor.js";
+import { watch as c, onUnmounted as T } from "vue";
+const w = 500, z = () => {
+  const i = b(), a = E(), l = I(), { getTemplateData: m } = g();
+  let e = null, n = !1;
+  const r = () => {
+    e && (clearTimeout(e), e = null);
+  }, s = async () => {
+    var t, o;
+    if (!(n || !i.isStripoInitialized))
       try {
-        const { html: S, css: E } = await m(l), g = ((e = (t = u.config) == null ? void 0 : t.identity) == null ? void 0 : e.templateId) ?? "";
-        if (r)
+        const { html: f, css: h } = await m(), S = ((o = (t = l.config) == null ? void 0 : t.identity) == null ? void 0 : o.templateId) ?? "";
+        if (n)
           return;
         a.$patch({
-          html: S ?? "",
-          css: E ?? "",
-          templateId: g,
+          html: f ?? "",
+          css: h ?? "",
+          templateId: S,
           lastUpdatedAt: Date.now()
         });
       } catch {
       }
-  }, p = () => {
-    s(), o = setTimeout(() => {
-      o = null, n();
-    }, B);
-  }, f = c(
+  }, u = () => {
+    r(), e = setTimeout(() => {
+      e = null, s();
+    }, w);
+  }, d = c(
     () => i.isStripoInitialized,
     (t) => {
-      t && n();
+      t && s();
     },
     { immediate: !0 }
-  ), h = c(
+  ), p = c(
     () => i.hasChanges,
-    (t, e) => {
-      i.isStripoInitialized && (t ? p() : e && (s(), n()));
+    (t, o) => {
+      i.isStripoInitialized && (t ? u() : o && (r(), s()));
     }
   );
-  y(() => {
-    r = !0, s(), f(), h();
+  T(() => {
+    n = !0, r(), d(), p();
   });
 };
 export {
-  G as useGuidoStateBridge
+  z as useGuidoStateBridge
 };