@useinsider/guido 1.0.0-beta.a0d6eee → 1.0.0-beta.a19efaa

package/dist/components/organisms/header/version-history/ViewOptions.vue2.js

@@ -1,41 +1,23 @@
-import { defineComponent as p } from "vue";
-import { useTranslations as m } from "../../../../composables/useTranslations.js";
-import { useVersionHistoryApi as l } from "../../../../composables/useVersionHistoryApi.js";
-import { useVersionHistoryStore as a } from "../../../../stores/version-history.js";
-import { getTooltipOptions as n } from "../../../../utils/tooltipUtils.js";
-import { InSegments as c } from "@useinsider/design-system-vue";
-const h = /* @__PURE__ */ p({
+import { defineComponent as s } from "vue";
+import { useVersionHistoryApi as n } from "../../../../composables/useVersionHistoryApi.js";
+import { useVersionHistoryStore as r } from "../../../../stores/version-history.js";
+import { InSegments as m } from "@useinsider/design-system-vue";
+const d = /* @__PURE__ */ s({
   __name: "ViewOptions",
-  setup(u) {
-    const t = a(), { switchToDesktopPreview: e, switchToMobilePreview: i } = l(), o = m(), r = [
-      {
-        text: "",
-        icon: "line-desktop",
-        value: "desktop",
-        position: "bottom",
-        align: "center",
-        tooltipText: o("newsletter.desktop"),
-        tooltipOptions: n("guido__version-history-view-option-desktop")
-      },
-      {
-        text: "",
-        icon: "line-menu-mobileapp",
-        value: "mobile",
-        position: "bottom",
-        align: "center",
-        tooltipText: o("newsletter.mobile"),
-        tooltipOptions: n("guido__version-history-view-option-mobile")
-      }
-    ];
-    return { __sfc: !0, versionHistoryStore: t, switchToDesktopPreview: e, switchToMobilePreview: i, trans: o, segmentList: r, changeVisualMode: (s) => {
-      if (t.editorVisualMode = s, s === "mobile") {
-        i();
+  setup(p) {
+    const e = r(), { switchToDesktopPreview: o, switchToMobilePreview: t } = n();
+    return { __sfc: !0, versionHistoryStore: e, switchToDesktopPreview: o, switchToMobilePreview: t, segmentList: [
+      { text: "", icon: "line-desktop", value: "desktop" },
+      { text: "", icon: "line-menu-mobileapp", value: "mobile" }
+    ], changeVisualMode: (i) => {
+      if (e.editorVisualMode = i, i === "mobile") {
+        t();
         return;
       }
-      e();
-    }, InSegments: c };
+      o();
+    }, InSegments: m };
   }
 });
 export {
-  h as default
+  d as default
 };

package/dist/composables/useStripo.js

@@ -1,21 +1,19 @@
-import { useActionsApi as g } from "./useActionsApi.js";
-import { useCustomInterfaceAppearance as f } from "./useCustomInterfaceAppearance.js";
-import { useToaster as y } from "./useToaster.js";
-import { displayConditions as C } from "../enums/displayConditions.js";
-import E from "../extensions/DynamicContent/extension.js";
-import { useStripoApi as S } from "../services/stripoApi.js";
-import { useEditorStore as w } from "../stores/editor.js";
-import { dynamicContentToMergeTags as b } from "../utils/genericUtil.js";
-const M = (d) => {
-  const { handleError: c } = y(), { getToken: a, getCustomFonts: u } = S(), l = (e, r = []) => {
-    const i = w(), { html: t, css: s, forceRecreate: p } = e;
+import { useActionsApi as m } from "./useActionsApi.js";
+import { useCustomInterfaceAppearance as g } from "./useCustomInterfaceAppearance.js";
+import { useToaster as f } from "./useToaster.js";
+import { displayConditions as E } from "../enums/displayConditions.js";
+import S from "../extensions/DynamicContent/extension.js";
+import { useStripoApi as y } from "../services/stripoApi.js";
+import { useEditorStore as C } from "../stores/editor.js";
+const x = (a) => {
+  const { handleError: d } = f(), { getToken: c, getCustomFonts: u } = y(), l = (e, r = []) => {
+    const i = C(), { html: t, css: s } = e;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
-        metadata: d,
+        metadata: a,
         html: t,
         css: s,
-        forceRecreate: p,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
@@ -31,32 +29,27 @@ const M = (d) => {
                 `,
         conditionsEnabled: !0,
         customConditionsEnabled: !0,
-        conditionCategories: C,
+        conditionCategories: E,
         messageSettingsEnabled: !1,
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
           customFonts: r
         },
-        mergeTags: [
-          {
-            entries: b(d.preselectedDynamicContentList)
-          }
-        ],
         async onTokenRefreshRequest(o) {
           try {
-            const n = await a();
+            const n = await c();
             o(n);
           } catch (n) {
-            c(n, "Failed to refresh token");
+            d(n, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: o } = f(), { activateCustomViewStyles: n } = g();
+            const { importCss: o } = g(), { activateCustomViewStyles: n } = m();
             o(), n();
           } catch (o) {
-            c(o, "Failed to load custom interface appearance");
+            d(o, "Failed to load custom interface appearance");
           }
         },
         onCodeEditorVisibilityChanged(o) {
@@ -69,10 +62,10 @@ const M = (d) => {
           i.isVersionHistoryOpen = o;
         },
         ignoreClickOutsideSelectors: ["#guido-dynamic-content-modal"],
-        extensions: [E]
+        extensions: [S]
       }
     );
-  }, m = (e) => new Promise((r, i) => {
+  }, p = (e) => new Promise((r, i) => {
     if (document.getElementById("UiEditorScript")) {
       e(), r();
       return;
@@ -86,12 +79,12 @@ const M = (d) => {
     }, document.body.appendChild(t);
   });
   return { initPlugin: async (e) => {
-    await m(async () => {
+    await p(async () => {
       const r = await u();
       l(e, r);
     });
   } };
 };
 export {
-  M as useStripo
+  x as useStripo
 };

package/dist/composables/useTemplates.d.ts

@@ -0,0 +1,5 @@
+import type { Template } from '@@/Types/stripo';
+export declare const useTemplates: () => {
+    getDefaultTemplate: () => Promise<Template>;
+    getTemplate: (templateName: string) => Promise<Template>;
+};

package/dist/composables/useTemplates.js

@@ -0,0 +1,27 @@
+const s = () => {
+  const t = async () => {
+    const [e, a] = await Promise.all([
+      // eslint-disable-next-line import/extensions
+      import("../static/templates/default/index.html.js"),
+      import("../static/templates/default/style.css.js")
+    ]);
+    return {
+      html: e.default,
+      css: a.default
+    };
+  };
+  return {
+    getDefaultTemplate: t,
+    getTemplate: async (e) => {
+      switch (e) {
+        case "default":
+          return t();
+        default:
+          return t();
+      }
+    }
+  };
+};
+export {
+  s as useTemplates
+};

package/dist/extensions/DynamicContent/dynamic-content.js

@@ -1,16 +1,15 @@
-var o = Object.defineProperty;
-var m = (i, t, e) => t in i ? o(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var r = (i, t, e) => m(i, typeof t != "symbol" ? t + "" : t, e);
-import { dynamicContentToMergeTags as l } from "../../utils/genericUtil.js";
+var l = Object.defineProperty;
+var o = (i, t, e) => t in i ? l(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var r = (i, t, e) => o(i, typeof t != "symbol" ? t + "" : t, e);
 import { d as n } from "../../_virtual/index.js";
-import { ExternalMergeTagsLibrary as g } from "./dynamic-content-modal.js";
-const a = "external-dynamic-content-ui-element", c = "button-add-dynamic-content";
-class p extends n.UIElementTagRegistry {
+import { ExternalMergeTagsLibrary as c } from "./dynamic-content-modal.js";
+const a = "external-dynamic-content-ui-element", m = "button-add-dynamic-content";
+class d extends n.UIElementTagRegistry {
   registerUiElements(t) {
     t[n.UIElementType.MERGETAGS] = a;
   }
 }
-class u extends n.UIElement {
+class b extends n.UIElement {
   constructor() {
     super(...arguments);
     r(this, "mergeTagsButton", null);
@@ -34,10 +33,13 @@ class u extends n.UIElement {
     this.openMergeTagLibrary();
   }
   openMergeTagLibrary() {
-    this.mergeTagsLibrary || (this.mergeTagsLibrary = new g()), this.mergeTagsLibrary.openMergeTagsLibrary(
+    this.mergeTagsLibrary || (this.mergeTagsLibrary = new c()), this.mergeTagsLibrary.openMergeTagsLibrary(
       this.selectedDynamicContent,
       (e) => {
-        this.api.onValueChanged(l([e])[0]);
+        this.api.onValueChanged({
+          label: e.fallback ? `${e.text} | ${e.fallback}` : e.text,
+          value: e.fallback ? `{{${e.value}|${e.fallback}}}` : `{{${e.value}}}`
+        });
       }
     );
   }
@@ -47,7 +49,7 @@ class u extends n.UIElement {
                 <${n.UIElementType.BUTTON} 
                     id="guido__btn-add-dynamic-content" 
                     class="btn btn-primary"
-                    ${n.UEAttr.BUTTON.name}="${c}">
+                    ${n.UEAttr.BUTTON.name}="${m}">
                         <${n.UIElementType.ICON} src="plus" class="icon icon-button color-primary">
                         </${n.UIElementType.ICON}>
                         ${this.api.translate("Add Dynamic Content")}
@@ -56,6 +58,6 @@ class u extends n.UIElement {
   }
 }
 export {
-  p as DynamicContentTagRegistry,
-  u as DynamicContentUiElementExtension
+  d as DynamicContentTagRegistry,
+  b as DynamicContentUiElementExtension
 };

package/dist/guido.css

@@ -1 +1 @@
-.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}[data-v-421ffc13] .guido__verion-history-view-option-selection-desktop svg,[data-v-421ffc13] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-421ffc13] .in-segments-wrapper__button_selected,[data-v-421ffc13] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-421ffc13] .in-tooltip-wrapper__icon{cursor:pointer}[data-v-93dadc5a] .guido__view-option-selection-desktop svg,[data-v-93dadc5a] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-93dadc5a] .in-segments-wrapper__button_selected,[data-v-93dadc5a] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-93dadc5a] .in-tooltip-wrapper__icon{cursor:pointer}.guido-editor__wrapper[data-v-f9fbdc93],.guido-editor__container[data-v-f9fbdc93]{width:100%;height:calc(100vh - 75px)}
+.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}[data-v-6a2bde67] .guido__verion-history-view-option-selection-desktop svg,[data-v-6a2bde67] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6a2bde67] .in-segments-wrapper__button_selected,[data-v-6a2bde67] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-0fff376c] .guido__view-option-selection-desktop svg,[data-v-0fff376c] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-0fff376c] .in-segments-wrapper__button_selected,[data-v-0fff376c] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.guido-editor__wrapper[data-v-89423288],.guido-editor__container[data-v-89423288]{width:100%;height:calc(100vh - 75px)}

package/dist/services/stripoApi.d.ts

@@ -1,8 +1,7 @@
-import type { CustomFont, Template } from '@@/Types/stripo';
+import type { CustomFont } from '@@/Types/stripo';
 export declare const useStripoApi: () => {
     getToken: () => Promise<string>;
     getCustomFonts: () => Promise<(CustomFont & {
         active: boolean;
     })[]>;
-    getDefaultTemplate: () => Promise<Template>;
 };

package/dist/services/stripoApi.js

@@ -1,45 +1,25 @@
-import { useHttp as a } from "../composables/useHttp.js";
-import { useToaster as s } from "../composables/useToaster.js";
+import { useHttp as s } from "../composables/useHttp.js";
+import { useToaster as n } from "../composables/useToaster.js";
 const m = () => {
-  const { get: r } = a(), { handleError: o } = s();
+  const { get: o } = s(), { handleError: r } = n();
   return {
     getToken: async () => {
       try {
-        const t = Number(localStorage.getItem("ins-guido-test-instance")), { data: e } = await r(`/stripo/get-user-token?test=${t}`);
+        const t = Number(localStorage.getItem("ins-guido-test-instance")), { data: e } = await o(`/stripo/get-user-token?test=${t}`);
         return e.body.token;
       } catch (t) {
-        return o(t, "Failed to fetch token"), "";
+        return r(t, "Failed to fetch token"), "";
       }
     },
     getCustomFonts: async () => {
       try {
-        const { data: t = [] } = await r("/stripo/get-partner-custom-fonts");
+        const { data: t = [] } = await o("/stripo/get-partner-custom-fonts");
         return t.map((e) => ({
           ...e,
           active: !0
         }));
       } catch (t) {
-        return o(t, "Failed to fetch custom fonts"), [];
-      }
-    },
-    getDefaultTemplate: async () => {
-      const t = {
-        html: "",
-        css: "",
-        forceRecreate: !0
-      };
-      try {
-        const { data: e } = await r("/stripo/default-template");
-        try {
-          return {
-            ...JSON.parse(e),
-            forceRecreate: !0
-          };
-        } catch {
-          return t;
-        }
-      } catch (e) {
-        return o(e, "Failed to fetch default template"), t;
+        return r(t, "Failed to fetch custom fonts"), [];
       }
     }
   };

package/dist/static/templates/default/index.html.js

@@ -0,0 +1,5 @@
+const t = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1" name="viewport"><meta name="x-apple-disable-message-reformatting"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta content="telephone=no" name="format-detection"><title></title><!--[if (mso 16)]><style type="text/css">a{text-decoration:none;}</style><![endif]--><!--[if gte mso 9]><style>sup{font-size:100% !important;}</style><![endif]--><!--[if gte mso 9]><noscript><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript><![endif]--><!--[if mso]><xml><w:WordDocument xmlns:w="urn:schemas-microsoft-com:office:word"><w:DontUseAdvancedTypographyReadingMail></w:DontUseAdvancedTypographyReadingMail></w:WordDocument></xml><![endif]--></head><body><div class="es-wrapper-color"> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" color="#f6f6f6"></v:fill> </v:background> <![endif]--><table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td class="esd-email-paddings" valign="top"><table class="es-content esd-header-popover" cellspacing="0" cellpadding="0" align="center"><tbody><tr><td class="esd-stripe" align="center"><table class="es-content-body" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center"><tbody><tr><td class="esd-structure es-p20" align="left" bgcolor="#91949F" style="background-color: #91949f;"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td class="esd-container-frame" width="560" valign="top" align="center"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td align="center" class="esd-block-image es-p15" style="font-size: 0px;"><a target="_blank"><img class="adapt-img" src="https://web-image.useinsider.com/email-template/logo.png" alt style="display: block;" height="30"></a></td></tr><tr><td class="esd-block-text" align="center"><h2 style="color: #ffffff; font-size: 30px;"><strong>Time for great email design</strong></h2></td></tr><tr><td class="esd-block-text es-m-txt-c es-p10t" align="center"><p style="color: #ffffff;">I'm a new text block ready for your message content.</p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><table class="es-content" cellspacing="0" cellpadding="0" align="center"><tbody><tr><td class="esd-stripe" align="center"><table class="es-content-body" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center"><tbody><tr><td class="esd-structure es-p30t es-p20b es-p20r es-p20l" align="left" bgcolor="#F9F9F9" style="background-color: #f9f9f9;"><table cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td width="560" class="esd-container-frame" align="center" valign="top"><table cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td align="center" class="esd-block-image es-p30t es-p20r" style="font-size: 0px;"><a target="_blank"><img class="adapt-img" src="https://web-image.useinsider.com/email-template/image-placeholder.png" alt style="display: block;" width="138"></a></td></tr><tr><td align="center" class="esd-block-text es-p10t es-p40b"><p style="color: #c5c6cc;">Image Placeholder</p></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td class="esd-structure es-p20t es-p20r es-p20l" align="left"><table cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td width="560" class="esd-container-frame" align="center" valign="top"><table cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td align="center" class="esd-block-text"><p style="font-size: 24px; color: #2c3546;"><strong>This is a sample heading</strong><br></p></td></tr><tr><td align="center" class="esd-block-text"><p style="color: #2c3546;">I'm a new text block ready for your message content.</p></td></tr><tr><td align="center" class="esd-block-text"><p style="color: #959aa3; font-size: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor<br> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud<br>&nbsp;exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><table class="es-content esd-footer-popover" cellspacing="0" cellpadding="0" align="center"><tbody><tr></tr><tr><td class="esd-stripe" esd-custom-block-id="8631" align="center"><table class="es-footer-body" style="background-color: #ffffff;" width="600" cellspacing="0" cellpadding="0" align="center" bgcolor="#fff"><tbody><tr><td class="esd-structure es-p20t es-p15b es-p20r es-p20l" align="left"> <!--[if mso]><table width="560" cellpadding="0" cellspacing="0"><tr><td width="270" valign="top"><![endif]--><table cellpadding="0" cellspacing="0" class="es-left" align="left"><tbody><tr><td width="270" class="es-m-p20b esd-container-frame" align="left"><table cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td align="right" class="esd-block-button"><span class="es-button-border" style="border-radius: 4px; border-color: #5d6980; background: #5d6980; border-width: 1px;"><a href class="es-button" target="_blank" style="color: #ffffff; background: #5d6980; border-color: #5d6980; border-radius: 4px; border-width: 10px 15px;"> Button </a></span></td></tr></tbody></table></td></tr></tbody></table> <!--[if mso]></td><td width="20"></td><td width="270" valign="top"><![endif]--><table cellpadding="0" cellspacing="0" class="es-right" align="right"><tbody><tr><td width="270" align="left" class="esd-container-frame"><table cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td align="left" class="esd-block-button"><span class="es-button-border" style="border-radius: 4px; border-color: #5d6980; background: #ffffff; border-width: 1px;"><a href class="es-button" target="_blank" style="background: #ffffff; border-color: #ffffff; color: #5d6980; border-radius: 4px; border-width: 10px 15px;"> Button </a></span></td></tr></tbody></table></td></tr></tbody></table> <!--[if mso]></td></tr></table><![endif]--></td></tr><tr><td class="esd-structure es-p30t es-p35b es-p40r es-p40l" align="left" bgcolor="#F9F9F9" style="background-color: #f9f9f9;"> <!--[if mso]><table width="520" cellpadding="0" cellspacing="0"><tr><td width="257" valign="top"><![endif]--><table cellpadding="0" cellspacing="0" class="es-left" align="left"><tbody><tr><td width="257" class="es-m-p20b esd-container-frame" align="left"><table cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td align="center" class="esd-block-image" style="font-size: 0px;"><a target="_blank"><img class="adapt-img" src="https://web-image.useinsider.com/email-template/image-placeholder.png" alt style="display: block;" width="96"></a></td></tr><tr><td align="center" class="esd-block-text"><p style="color: #c5c6cc;">Image Placeholder</p></td></tr></tbody></table></td></tr></tbody></table> <!--[if mso]></td><td width="0"></td><td width="263" valign="top"><![endif]--><table cellpadding="0" cellspacing="0" class="es-right" align="right"><tbody><tr><td width="263" align="left" class="esd-container-frame"><table cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td align="center" class="esd-block-image" style="font-size: 0px;"><a target="_blank"><img class="adapt-img" src="https://web-image.useinsider.com/email-template/image-placeholder.png" alt style="display: block;" width="96"></a></td></tr><tr><td align="center" class="esd-block-text"><p style="color: #c5c6cc;">Image Placeholder</p></td></tr></tbody></table></td></tr></tbody></table> <!--[if mso]></td></tr></table><![endif]--></td></tr><tr><td class="esd-structure es-p20t es-p15b es-p20r es-p20l" align="left"><table cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td width="560" class="esd-container-frame" align="center" valign="top"><table cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td align="left" class="esd-block-text"><p>Text</p></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td class="esd-structure es-p20t es-p20b es-p20r es-p20l" align="left" bgcolor="#2C3546" style="background-color: #2c3546;"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td class="esd-container-frame" width="560" valign="top" align="center"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td align="center" class="esd-block-social" style="font-size:0"><table cellpadding="0" cellspacing="0" class="es-table-not-adapt es-social"><tbody><tr><td align="center" valign="top" class="es-p20r" esd-tmp-icon-type="facebook"><a target="_blank" href="https://facebook.com"><img title="Facebook" src="https://web-image.useinsider.com/email-template/facebook.png" alt="Facebook" width="24" height="24"></a></td><td align="center" valign="top" class="es-p20r" esd-tmp-icon-type="twitter"><a target="_blank" href="https://instagram.com"><img title="Instagram" src="https://web-image.useinsider.com/email-template/instagram.png" alt="Instagram" width="24" height="24"></a></td><td align="center" valign="top" esd-tmp-icon-type="instagram"><a target="_blank" href="https://twitter.com"><img title="Twitter" src="https://web-image.useinsider.com/email-template/twitter.png" alt="Twitter" width="24" height="24"></a></td></tr></tbody></table></td></tr><tr><td align="center" class="esd-block-text es-p20"><p style="font-size: 10px;">ADDRESS LINE, PROVINCE, CITY, COUNTRY - 999999</p></td></tr><tr><td align="center" class="esd-block-text"><p style="color: #959aa2; font-size: 10px;">You can <u>unsubscribe</u> from our emails, if you need to.</p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></div></body></html>
+`;
+export {
+  t as default
+};

package/dist/static/templates/default/style.css.js

@@ -0,0 +1,119 @@
+const t = `/* CONFIG STYLES Please do not delete and edit CSS styles below */ /* IMPORTANT THIS STYLES MUST BE ON FINAL EMAIL */ #outlook a { padding: 0; }.ExternalClass { width: 100%; }.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }.es-button { mso-style-priority: 100 !important; text-decoration: none !important; }a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }.es-desk-hidden { display: none; float: left; overflow: hidden; width: 0; max-height: 0; line-height: 0; mso-hide: all; }/* END OF IMPORTANT */ html, body { width: 100%; font-family: arial, 'helvetica neue', helvetica, sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }table { mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; border-spacing: 0px; }table td, html, body, .es-wrapper { padding: 0; Margin: 0; }.es-content, .es-header, .es-footer { table-layout: fixed !important; width: 100%; }img { display: block; border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }table tr { border-collapse: collapse; }p, hr { Margin: 0; }h1, h2, h3, h4, h5 { Margin: 0; line-height: 120%; mso-line-height-rule: exactly; font-family: arial, 'helvetica neue', helvetica, sans-serif; }p, ul li, ol li, a { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; mso-line-height-rule: exactly; }.es-left { float: left; }.es-right { float: right; }.es-p5 { padding: 5px; }.es-p5t { padding-top: 5px; }.es-p5b { padding-bottom: 5px; }.es-p5l { padding-left: 5px; }.es-p5r { padding-right: 5px; }.es-p10 { padding: 10px; }.es-p10t { padding-top: 10px; }.es-p10b { padding-bottom: 10px; }.es-p10l { padding-left: 10px; }.es-p10r { padding-right: 10px; }.es-p15 { padding: 15px; }.es-p15t { padding-top: 15px; }.es-p15b { padding-bottom: 15px; }.es-p15l { padding-left: 15px; }.es-p15r { padding-right: 15px; }.es-p20 { padding: 20px; }.es-p20t { padding-top: 20px; }.es-p20b { padding-bottom: 20px; }.es-p20l { padding-left: 20px; }.es-p20r { padding-right: 20px; }.es-p25 { padding: 25px; }.es-p25t { padding-top: 25px; }.es-p25b { padding-bottom: 25px; }.es-p25l { padding-left: 25px; }.es-p25r { padding-right: 25px; }.es-p30 { padding: 30px; }.es-p30t { padding-top: 30px; }.es-p30b { padding-bottom: 30px; }.es-p30l { padding-left: 30px; }.es-p30r { padding-right: 30px; }.es-p35 { padding: 35px; }.es-p35t { padding-top: 35px; }.es-p35b { padding-bottom: 35px; }.es-p35l { padding-left: 35px; }.es-p35r { padding-right: 35px; }.es-p40 { padding: 40px; }.es-p40t { padding-top: 40px; }.es-p40b { padding-bottom: 40px; }.es-p40l { padding-left: 40px; }.es-p40r { padding-right: 40px; }.es-menu td { border: 0; }.es-menu td a img { display: inline !important; }/* END CONFIG STYLES */ a { text-decoration: underline; }p, ul li, ol li { font-family: arial, 'helvetica neue', helvetica, sans-serif; line-height: 150%; }ul li, ol li { Margin-bottom: 15px; }.es-menu td a { text-decoration: none; display: block; }.es-wrapper { width: 100%; height: 100%; background-image: ; background-repeat: repeat; background-position: center top; }.es-wrapper-color { background-color: #f6f6f6; }.es-header { background-color: transparent; background-image: ; background-repeat: repeat; background-position: center top; }.es-header-body { background-color: transparent; }.es-header-body p, .es-header-body ul li, .es-header-body ol li { color: #333333; font-size: 14px; }.es-header-body a { color: #333333; font-size: 14px; }.es-content-body { background-color: #ffffff; }.es-content-body p, .es-content-body ul li, .es-content-body ol li { color: #333333; font-size: 14px; }.es-content-body a { color: #333333; font-size: 14px; }.es-footer { background-color: transparent; background-image: ; background-repeat: repeat; background-position: center top; }.es-footer-body { background-color: #333333; }.es-footer-body p, .es-footer-body ul li, .es-footer-body ol li { color: #ffffff; font-size: 14px; }.es-footer-body a { color: #ffffff; font-size: 14px; }.es-infoblock, .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li { line-height: 120%; font-size: 12px; color: #cccccc; }.es-infoblock a { font-size: 12px; color: #cccccc; }h1 { font-size: 30px; font-style: normal; font-weight: normal; color: #333333; }h2 { font-size: 24px; font-style: normal; font-weight: normal; color: #333333; }h3 { font-size: 20px; font-style: normal; font-weight: normal; color: #333333; }.es-header-body h1 a, .es-content-body h1 a, .es-footer-body h1 a { font-size: 30px; }.es-header-body h2 a, .es-content-body h2 a, .es-footer-body h2 a { font-size: 24px; }.es-header-body h3 a, .es-content-body h3 a, .es-footer-body h3 a { font-size: 20px; }a.es-button, button.es-button { border-style: solid; border-color: #f0f0f0; border-width: 5px 30px 5px 30px; display: inline-block; background: #f0f0f0; border-radius: 0px; font-size: 16px; font-family: arial, 'helvetica neue', helvetica, sans-serif; font-weight: normal; font-style: normal; line-height: 120%; color: #333333; text-decoration: none; width: auto; text-align: center; }.es-button-border { border-style: solid solid solid solid; border-color: #808080 #808080 #808080 #808080; background: #f0f0f0; border-width: 2px 2px 2px 2px; display: inline-block; border-radius: 0px; width: auto; }.ins-trim-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}/* RESPONSIVE STYLES Please do not delete and edit CSS styles below. If you don't need responsive layout, please delete this section. */ @media only screen and (max-width: 600px) {p, ul li, ol li, a { line-height: 150% !important; }h1 { font-size: 30px !important; text-align: center; line-height: 120% !important; }h2 { font-size: 26px !important; text-align: center; line-height: 120% !important; }h3 { font-size: 20px !important; text-align: center; line-height: 120% !important; }.es-header-body h1 a, .es-content-body h1 a, .es-footer-body h1 a { font-size: 30px !important; }.es-header-body h2 a, .es-content-body h2 a, .es-footer-body h2 a { font-size: 26px !important; }.es-header-body h3 a, .es-content-body h3 a, .es-footer-body h3 a { font-size: 20px !important; }.es-menu td a { font-size: 13px !important; }.es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size: 16px !important; }.es-content-body p, .es-content-body ul li, .es-content-body ol li, .es-content-body a { font-size: 16px !important; }.es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size: 16px !important; }.es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size: 12px !important; }*[class="gmail-fix"] { display: none !important; }.es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align: center !important; }.es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align: right !important; }.es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align: left !important; }.es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display: inline !important; }.es-button-border { display: block !important; }a.es-button, button.es-button { font-size: 16px !important; display: block !important; border-width: 10px 0px 10px 0px !important; }.es-btn-fw { border-width: 10px 0px !important; text-align: center !important; }.es-adaptive table, .es-btn-fw, .es-btn-fw-brdr, .es-left, .es-right { width: 100% !important; }.ext-product-button,
+.ext-product-price p,
+.ext-product-original-price p,
+.ext-product-omnibus-price p,
+.ext-product-omnibus-discount p {
+    width: 100% !important;
+}
+
+.ext-product-button a {
+    max-width: 100% !important;
+}
+
+.ext-product-name.ins-vertical p {
+    height: 90px !important;
+    overflow: hidden !important;
+    word-break: break-all !important;
+    font-size: 12px !important;
+    line-height: 150% !important;
+}
+
+.ext-product-name.ins-vertical {
+    height: 100px !important;
+}
+
+.ext-product-omnibus-price.ins-vertical p {
+    height: 30px !important;
+    overflow: hidden !important;
+    word-break: break-all !important;
+    font-size: 10px !important;
+    line-height: 150% !important;
+}
+
+.ext-product-omnibus-price.ins-vertical {
+    height: 50px !important;
+}
+
+.ext-product-omnibus-discount.ins-vertical p {
+    height: 30px !important;
+    overflow: hidden !important;
+    word-break: break-all !important;
+    font-size: 10px !important;
+    line-height: 150% !important;
+}
+
+.ext-product-omnibus-discount.ins-vertical {
+    height: 50px !important;
+}
+
+.ext-product-name p {
+    height: unset !important;
+    width: 100% !important;
+    overflow: hidden !important;
+    font-size: 16px !important;
+    line-height: 150% !important;
+}
+
+.ext-product-name {
+    height: unset !important;
+}
+
+.ext-product-price.ins-vertical p {
+    overflow: hidden !important;
+    word-break: break-all !important;
+    height: 36px !important;
+    font-size: 12px !important;
+    line-height: 150% !important;
+}
+
+.ext-product-price.ins-vertical {
+    height: 56px !important;
+}
+
+.ext-product-original-price.ins-vertical p {
+    overflow: hidden !important;
+    word-break: break-all !important;
+    height: 36px !important;
+    font-size: 12px !important;
+    line-height: 150% !important;
+}
+
+.ext-product-original-price.ins-vertical {
+    height: 56px !important;
+}
+
+.ext-ins-attr.ins-vertical p {
+    overflow: hidden !important;
+    word-break: break-all !important;
+    height: 54px !important;
+    font-size: 12px !important;
+    line-height: 150% !important;
+    width: 100% !important;
+}
+
+.ext-ins-attr.ins-vertical {
+    height: 74px !important;
+}
+
+.ext-product-button a.ins-vertical {
+    word-break: break-all !important;
+    font-size: 12px !important;
+}
+
+.ext-product-image.ins-vertical {
+    height: unset !important;
+}
+
+td.esdev-mso-td.ins-vertical {
+    vertical-align: bottom !important;
+}.es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width: 100% !important; max-width: 600px !important; }.es-adapt-td { display: block !important; width: 100% !important; }.adapt-img { width: 100% !important; height: auto !important; }.es-m-p0 { padding: 0px !important; }.es-m-p0r { padding-right: 0px !important; }.es-m-p0l { padding-left: 0px !important; }.es-m-p0t { padding-top: 0px !important; }.es-m-p0b { padding-bottom: 0 !important; }.es-m-p20b { padding-bottom: 20px !important; }.es-mobile-hidden, .es-hidden { display: none !important; }.es-desk-hidden { display: table-row !important; width: auto !important; overflow: visible !important; float: none !important; max-height: inherit !important; line-height: inherit !important; }.es-desk-menu-hidden { display: table-cell !important; }table.es-table-not-adapt, .esd-block-html table { width: auto !important; }table.es-social { display: inline-block !important; }table.es-social td { display: inline-block !important; } }/* END RESPONSIVE STYLES */.ext-product-name p { -webkit-line-clamp:3 !important;-webkit-box-orient:vertical !important;overflow:hidden !important; }.ext-product-price p { height:26px !important; }
+`;
+export {
+  t as default
+};

package/dist/utils/tooltipUtils.d.ts

@@ -1,2 +1,2 @@
 import type { TooltipOptions } from '../@types/generic';
-export declare const getTooltipOptions: (id: string, options?: Partial<Omit<TooltipOptions, "id">>) => TooltipOptions;
+export declare const getTooltipOptions: (id: string) => TooltipOptions;

package/dist/utils/tooltipUtils.js

@@ -1,11 +1,9 @@
-const e = (s, t = {}) => ({
-  id: s,
-  dynamicPosition: t.dynamicPosition ?? !1,
-  staticPosition: t.staticPosition ?? "bottom center",
-  iconStatus: t.iconStatus ?? !1,
-  offset: t.offset,
-  preventXss: t.preventXss
+const o = (t) => ({
+  id: t,
+  dynamicPosition: !0,
+  staticPosition: "top",
+  iconStatus: !1
 });
 export {
-  e as getTooltipOptions
+  o as getTooltipOptions
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.0-beta.a0d6eee",
+  "version": "1.0.0-beta.a19efaa",
   "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/composables/useGuidoActions.d.ts

@@ -1,46 +0,0 @@
-import type { Template } from '@@/Types/stripo';
-import type { InjectionKey } from 'vue';
-export type BackHandler = () => void;
-export type SaveStartHandler = () => void;
-export type SaveCompleteHandler = (template: Omit<Template, 'forceRecreate'>) => void;
-export declare const BACK_KEY: InjectionKey<BackHandler>;
-export declare const SAVE_START_KEY: InjectionKey<SaveStartHandler>;
-export declare const SAVE_COMPLETE_KEY: InjectionKey<SaveCompleteHandler>;
-/**
- * Provides Guido action handlers to child components
- */
-export declare const provideGuidoActions: (actions: {
-    onBack: BackHandler;
-    onSaveStart: SaveStartHandler;
-    onSaveComplete: SaveCompleteHandler;
-}) => void;
-/**
- * Provides individual Guido action handlers
- */
-export declare const provideBackHandler: (handler: BackHandler) => void;
-export declare const provideSaveStartHandler: (handler: SaveStartHandler) => void;
-export declare const provideSaveCompleteHandler: (handler: SaveCompleteHandler) => void;
-/**
- * Hook to use the back navigation handler
- * @returns Back navigation function
- */
-export declare const useBack: () => BackHandler;
-/**
- * Hook to use the save start handler
- * @returns Save start function
- */
-export declare const useSaveStart: () => SaveStartHandler;
-/**
- * Hook to use the save complete handler
- * @returns Save complete function
- */
-export declare const useSaveComplete: () => SaveCompleteHandler;
-/**
- * Convenience hook to get all Guido actions
- * @returns Object containing all action handlers
- */
-export declare const useGuidoActions: () => {
-    back: BackHandler;
-    saveStart: SaveStartHandler;
-    saveComplete: SaveCompleteHandler;
-};

package/dist/composables/useGuidoActions.js

@@ -1,37 +0,0 @@
-import { provideValue as o, useInjectedValue as t } from "./useProvideInject.js";
-const r = Symbol.for("guido.back"), n = Symbol.for("guido.save.start"), a = Symbol.for("guido.save.complete"), s = (e) => {
-  o(r, e.onBack), o(n, e.onSaveStart), o(a, e.onSaveComplete);
-}, u = () => {
-  try {
-    return t(r);
-  } catch {
-    throw new Error(
-      "useBack: No back handler provided. Make sure Guido component is in the component tree."
-    );
-  }
-}, d = () => {
-  try {
-    return t(n);
-  } catch {
-    throw new Error(
-      "useSaveStart: No save start handler provided. Make sure Guido component is in the component tree."
-    );
-  }
-}, i = () => {
-  try {
-    return t(a);
-  } catch {
-    throw new Error(
-      "useSaveComplete: No save complete handler provided. Make sure Guido component is in the component tree."
-    );
-  }
-};
-export {
-  r as BACK_KEY,
-  a as SAVE_COMPLETE_KEY,
-  n as SAVE_START_KEY,
-  s as provideGuidoActions,
-  u as useBack,
-  i as useSaveComplete,
-  d as useSaveStart
-};

package/dist/composables/useProvideInject.d.ts

@@ -1,14 +0,0 @@
-import { type InjectionKey } from 'vue';
-/**
- * Provides a value using Vue's provide/inject system
- * @param key - The injection key
- * @param value - The value to provide
- */
-export declare const provideValue: <T>(key: InjectionKey<T>, value: T) => void;
-/**
- * Injects a value using Vue's provide/inject system
- * @param key - The injection key
- * @param defaultValue - Optional default value if injection fails
- * @returns The injected value
- */
-export declare const useInjectedValue: <T>(key: InjectionKey<T>, defaultValue?: T) => T;

package/dist/composables/useProvideInject.js

@@ -1,17 +0,0 @@
-import { provide as t, inject as i } from "vue";
-const d = (e, o) => {
-  t(e, o);
-}, s = (e, o) => {
-  const r = i(e, o);
-  if (r === void 0 && o === void 0) {
-    const n = e.description || String(e);
-    throw new Error(
-      `useInjectedValue: No provider found for key "${n}". Make sure a parent component provides this value.`
-    );
-  }
-  return r;
-};
-export {
-  d as provideValue,
-  s as useInjectedValue
-};

package/dist/mock/api/default-template.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("msw").HttpHandler[];
-export default _default;