@useinsider/guido 3.3.0-beta.878c1c2 → 3.3.0-beta.c1e1d7e

package/dist/composables/useCustomInterfaceAppearance.js

@@ -4,21 +4,20 @@ 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 C from "../static/styles/components/combobox.css.js";
-import s from "../static/styles/components/counter.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/notification.css.js";
-import d from "../static/styles/components/popup.css.js";
-import l from "../static/styles/components/switcher.css.js";
-import h from "../static/styles/components/tabs.css.js";
-import w from "../static/styles/components/tools.css.js";
-import y from "../static/styles/components/version-history.css.js";
-import B from "../static/styles/components/wide-panel.css.js";
-import b from "../static/styles/variables.css.js";
-const A = [
-  b,
+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,
   // Must be on top
@@ -27,8 +26,8 @@ const A = [
   i,
   p,
   n,
-  C,
   s,
+  C,
   f,
   a,
   u,
@@ -37,13 +36,12 @@ const A = [
   l,
   h,
   w,
-  y,
-  B
+  y
 ].join(`
 
-`), F = () => ({ importCss: () => {
+`), v = () => ({ importCss: () => {
   const o = new CSSStyleSheet();
-  o.replaceSync(A);
+  o.replaceSync(b);
   const r = document.querySelector("ui-editor");
   if (!r)
     return;
@@ -51,5 +49,5 @@ const A = [
   t && (t.adoptedStyleSheets = [o]);
 } });
 export {
-  F as useCustomInterfaceAppearance
+  v as useCustomInterfaceAppearance
 };

package/dist/composables/useStripo.js

@@ -1,27 +1,28 @@
-import { useActionsApi as D } from "./useActionsApi.js";
-import { useBlocksConfig as I } from "./useBlocksConfig.js";
-import { useConfig as P } from "./useConfig.js";
-import { useCustomInterfaceAppearance as U } from "./useCustomInterfaceAppearance.js";
-import { useFullStoryBridge as R } from "./useFullStoryBridge.js";
-import { useStripoEventHandler as q } from "./useStripoEventHandler.js";
-import { useToaster as x } from "./useToaster.js";
-import { localePatch as H } from "../config/i18n/index.js";
-import { useStripoApi as O } from "../services/stripoApi.js";
-import j from "../static/styles/customEditorStyle.css.js";
+import { useActionsApi as I } from "./useActionsApi.js";
+import { useBlocksConfig as P } from "./useBlocksConfig.js";
+import { useConfig as U } from "./useConfig.js";
+import { useCustomInterfaceAppearance as R } from "./useCustomInterfaceAppearance.js";
+import { useFullStoryBridge as q } from "./useFullStoryBridge.js";
+import { useStripoEventHandler as x } from "./useStripoEventHandler.js";
+import { useStripoNotifications as H } from "./useStripoNotifications.js";
+import { useToaster as N } from "./useToaster.js";
+import { localePatch as O } from "../config/i18n/index.js";
+import { useStripoApi as j } from "../services/stripoApi.js";
+import L from "../static/styles/customEditorStyle.css.js";
 import { useEditorStore as E } from "../stores/editor.js";
-import { dynamicContentToMergeTags as L } from "../utils/genericUtil.js";
-import $ from "../package.json.js";
-const se = (C, l) => {
-  const { features: c, template: h, isFeatureEnabled: u } = P(), { handleError: m } = x(), { getToken: w, getCustomFonts: b, getSyncModulesStatus: k } = O(), { handleEvent: B } = q(), { getStripoBlocksConfig: T } = I(), V = async (i, r = [], s = !1) => {
+import { dynamicContentToMergeTags as $ } from "../utils/genericUtil.js";
+import z from "../package.json.js";
+const dt = (C, c) => {
+  const { features: l, template: h, isFeatureEnabled: u } = U(), { handleError: m } = N(), { getToken: w, getCustomFonts: b, getSyncModulesStatus: k } = j(), { handleEvent: B } = x(), { getStripoNotifications: T } = H(), { getStripoBlocksConfig: V } = P(), _ = async (i, r = [], s = !1) => {
     var g, S, y;
-    const e = E(), { html: p, css: a } = i, { baseBlocks: o, extensions: d } = await T(), f = ((g = c.value) == null ? void 0 : g.displayConditions) ?? !0, F = ((S = c.value) == null ? void 0 : S.modulesDisabled) ?? !1, v = ((y = h.value) == null ? void 0 : y.forceRecreate) ?? !1;
+    const t = E(), { html: p, css: a } = i, { baseBlocks: o, extensions: d } = await V(), f = ((g = l.value) == null ? void 0 : g.displayConditions) ?? !0, v = ((S = l.value) == null ? void 0 : S.modulesDisabled) ?? !1, M = ((y = h.value) == null ? void 0 : y.forceRecreate) ?? !1;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
         metadata: C,
         html: p,
         css: a,
-        forceRecreate: v,
+        forceRecreate: M,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
@@ -31,11 +32,11 @@ const se = (C, l) => {
         customAppearanceMergetags: !u("liquidSyntax"),
         customAppearanceMergetagsBorderColor: "#f1f3fe",
         customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: j,
+        customViewStyles: L,
         conditionsEnabled: f,
         customConditionsEnabled: f,
         enableXSSSecurity: !0,
-        modulesDisabled: F,
+        modulesDisabled: v,
         syncModulesEnabled: s,
         messageSettingsEnabled: !0,
         displayGmailAnnotations: !0,
@@ -52,59 +53,60 @@ const se = (C, l) => {
         },
         mergeTags: [
           {
-            entries: L(
-              l.preselectedDynamicContentList,
+            entries: $(
+              c.preselectedDynamicContentList,
               u("liquidSyntax")
             )
           }
         ],
-        async onTokenRefreshRequest(t) {
+        async onTokenRefreshRequest(e) {
           try {
             const n = await w();
-            t(n);
+            e(n);
           } catch (n) {
             m(n, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: t } = U(), { activateCustomViewStyles: n, updateTimerInClonedTemplate: M } = D(), { injectFullStory: A } = R();
-            t(), n(), A(), M(), l.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
-              e.hasChanges = !1;
+            const { importCss: e } = R(), { activateCustomViewStyles: n, updateTimerInClonedTemplate: A } = I(), { injectFullStory: D } = q();
+            e(), n(), D(), A(), c.onReady(), t.isStripoInitialized = !0, t.loadingStatus = !1, setTimeout(() => {
+              t.hasChanges = !1;
             }, 1e3);
-          } catch (t) {
-            m(t, "Failed to load custom interface appearance");
+          } catch (e) {
+            m(e, "Failed to load custom interface appearance");
           }
         },
-        onCodeEditorVisibilityChanged(t) {
-          e.isCodeEditorOpen = t;
+        onCodeEditorVisibilityChanged(e) {
+          t.isCodeEditorOpen = e;
         },
-        onEditorVisualModeChanged(t) {
-          e.editorVisualMode = t.toLowerCase();
+        onEditorVisualModeChanged(e) {
+          t.editorVisualMode = e.toLowerCase();
         },
-        onVersionHistoryVisibilityChanged(t) {
-          e.isVersionHistoryOpen = t;
+        onVersionHistoryVisibilityChanged(e) {
+          t.isVersionHistoryOpen = e;
         },
         onDataChanged() {
-          e.hasChanges = !0;
+          t.hasChanges = !0;
         },
         onEvent: B,
+        notifications: T(),
         ignoreClickOutsideSelectors: [
           "#guido-dynamic-content-modal",
           ".in-on-board-wrapper",
           ".in-drawer__container"
         ],
         extensions: d,
-        localePatch: H
+        localePatch: O
       }
     );
-  }, _ = (i) => new Promise((r, s) => {
+  }, F = (i) => new Promise((r, s) => {
     var d;
     if (document.getElementById("UiEditorScript")) {
       i(), r();
       return;
     }
-    const e = $.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, o = document.createElement("script");
+    const t = z.guido, a = `https://email-static.useinsider.com/guido/${(d = t == null ? void 0 : t.stripo) == null ? void 0 : d.version}/UIEditor.js`, o = document.createElement("script");
     o.id = "UiEditorScript", o.type = "module", o.src = a, o.onload = () => {
       i(), r();
     }, o.onerror = () => {
@@ -112,15 +114,15 @@ const se = (C, l) => {
     }, document.body.appendChild(o);
   });
   return { initPlugin: async (i) => {
-    await _(async () => {
-      const r = E(), [s, e] = await Promise.all([
+    await F(async () => {
+      const r = E(), [s, t] = await Promise.all([
         b(),
         k()
       ]);
-      r.syncModulesEnabled = e, await V(i, s, e);
+      r.syncModulesEnabled = t, await _(i, s, t);
     });
   } };
 };
 export {
-  se as useStripo
+  dt as useStripo
 };

package/dist/composables/useStripoNotifications.js

@@ -0,0 +1,30 @@
+import { useToaster as a } from "./useToaster.js";
+import { ToasterTypeOptions as r } from "../enums/toaster.js";
+const h = () => {
+  const { showToaster: l, hideToaster: u } = a();
+  let e = null, s = null;
+  const c = (t, o, i, n) => {
+    if (e === i && s === o)
+      return;
+    e = i, s = o;
+    const f = n != null && n.action ? { text: n.action.label, onClick: n.action.func } : void 0;
+    l({ type: t, message: o, actionButton: f });
+  };
+  return { getStripoNotifications: () => ({
+    info: (t, o, i) => c(r.Success, t, o, i),
+    success: (t, o, i) => c(r.Success, t, o, i),
+    warn: (t, o, i) => c(r.Warning, t, o, i),
+    error: (t, o, i) => c(r.Alert, t, o, i),
+    // Stripo emits `loader` for in-progress operations expected to persist until
+    // explicit hide(id). Available toaster types auto-dismiss at 6s, so showing
+    // anything here would lie about completion. Skip until a persistent type exists.
+    loader: () => {
+    },
+    hide: (t) => {
+      e === t && (u(), e = null, s = null);
+    }
+  }) };
+};
+export {
+  h as useStripoNotifications
+};

package/dist/src/composables/useStripoNotifications.d.ts

@@ -0,0 +1,4 @@
+import type { StripoNotifications } from '@@/Types/stripo';
+export declare const useStripoNotifications: () => {
+    getStripoNotifications: () => StripoNotifications;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.3.0-beta.878c1c2",
+  "version": "3.3.0-beta.c1e1d7e",
   "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",

package/dist/static/styles/components/notification.css.js

@@ -1,74 +0,0 @@
-const n = `ue-notifications-container {
-    left: 96px;
-    margin: 0;
-    bottom: 32px;
-    top: unset;
-    width: unset;
-    position: fixed;
-}
-
-ue-notifications-container ue-message + ue-message {
-    margin-bottom: 24px;
-}
-
-ue-notifications-container .alert-message-wrapper {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
-    border: none;
-    padding: 16px 24px;
-}
-
-ue-notifications-container .alert-message-wrapper.info,
-ue-notifications-container .alert-message-wrapper.loader {
-    background-color: var(--guido-color-background-toaster-info) !important;
-    color: inherit;
-}
-
-.alert-message-wrapper .alert-message-main {
-    align-items: center;
-}
-
-ue-notifications-container ue-caption .caption {
-    color: var(--guido-color-white) !important;
-}
-
-ue-block-thumb-hint {
-    text-align: left;
-}
-
-ue-notifications-container .alert-message-wrapper .alert-message-main .alert-message-content {
-    width: calc(100% - 64px);
-}
-
-ue-notifications-container .alert-message-wrapper .alert-message-main .alert-message-text {
-    font-size: 15px;
-    font-weight: 600;
-}
-
-ue-notifications-container .alert-message-text,
-ue-notifications-container .alert-message-wrapper ue-icon-component.icon,
-ue-notifications-container .alert-message-wrapper ue-icon-component.icon-button {
-    color: var(--guido-color-white);
-}
-
-ue-notifications-container ue-message ue-button.close {
-    margin: 0 0 0 16px;
-}
-
-ue-notifications-container .alert-message-wrapper.success {
-    background: var(--guido-color-background-toaster-success);
-    color: inherit;
-}
-
-ue-notifications-container .alert-message-wrapper.error {
-    background: var(--guido-color-background-toaster-error);
-    color: inherit;
-}
-
-ue-notifications-container .alert-message-wrapper.warn {
-    background: var(--guido-color-background-toaster-warn);
-    color: inherit;
-}
-`;
-export {
-  n as default
-};