@useinsider/guido 1.0.0-beta.eb2a99e → 1.0.0-beta.ef5e504

package/README.md

@@ -27,15 +27,10 @@ npm install @useinsider/guido
   <div>
     <Guido
       ref="guidoEditor"
-      :template-id="templateId"
+      :email-id="emailId"
       :user-id="userId"
       :guido-config="guidoConfig"
-      :html="initialHtml"
-      :css="initialCss"
       @dynamic-content:open="handleDynamicContentOpen"
-      @back="handleBack"
-      @save:start="handleSaveStart"
-      @save:complete="handleSaveComplete"
     />
   </div>
 </template>
@@ -49,55 +44,36 @@ export default {
   },
   data() {
     return {
-      templateId: 'template-123',
-      userId: 'user-456',
-      initialHtml: '<p>Initial HTML content</p>',
-      initialCss: 'p { color: #333; }',
+      emailId: 'abc123',
+      userId: '12345',
       guidoConfig: {
         translationsPath: 'window.trans.en',
         htmlCompilerRules: [],
         ignoreDefaultHtmlCompilerRules: false,
-      },
+      }
       dynamicContentModalVisible: false
     };
   },
 
   methods: {
-    handleDynamicContentOpen(detail) {
-      console.log('Dynamic content requested:', detail);
+    handleDynamicContentOpen() {
       this.dynamicContentModalVisible = true;
-    },
-    
-    handleBack() {
-      console.log('User clicked back button');
-      // Handle navigation back
-    },
-    
-    handleSaveStart() {
-      console.log('Save process started');
-      // Show loading indicator
-    },
-    
-    handleSaveComplete(template) {
-      console.log('Save completed:', template);
-      // Handle saved template data
-    },
-    
+    }
     // ⚠️ Your own Dynamic Content Modal should have this id: #guido-dynamic-content-modal
     handleDynamicContentInsert() {
-      this.$refs.guidoEditor?.dynamicContent.insert({
-        text: 'Display Text', 
-        value: 'actual-value', 
-        fallback: 'Fallback Text'
+      this.$ref.guidoEditor?.dynamicContent.insert({
+        text: 'Text', 
+        value: 'Value', 
+        fallback: 'Fallback'
       });
 
       this.dynamicContentModalVisible = false;
     },
-    
     // ⚠️ It's mandatory. There is no way to understand if user closes the modal without selection.
     handleDynamicContentClose() {
-      this.$refs.guidoEditor?.dynamicContent.close();
+      this.$ref.guidoEditor?.dynamicContent.close();
     }
+
   }
 };
 </script>
@@ -109,23 +85,12 @@ export default {
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `templateId` | `string` | ✅ | - | Unique identifier for the email template |
-| `userId` | `string` | ✅ | - | Unique identifier for the user |
+| `emailId` | `string` | ✅ | - | Unique identifier for the email draft |
+| `userId` | `string` | ✅ | - | Unique identifier for the user draft |
+| `username` | `string` | ⚪ | Guido User | User name |
+| `partnerName` | `string` | ⚪ | Getting from URL host | Unique identifier for the partner draft |
+| `productType` | `string` | ⚪ | Getting from URL path | Unique identifier for the product draft |
 | `guidoConfig` | `GuidoConfig` | ✅ | - | Configuration object for the editor |
-| `partnerName` | `string` | ⚪ | From URL host | Partner identifier |
-| `productType` | `string` | ⚪ | From URL path | Product type identifier |
-| `username` | `string` | ⚪ | `'Guido User'` | Display name for the user |
-| `html` | `string` | ⚪ | `''` | Initial HTML content for the template |
-| `css` | `string` | ⚪ | `''` | Initial CSS styles for the template |
-
-### Guido Component Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `dynamic-content:open` | `DynamicContent \| null` | Fired when user requests to insert dynamic content |
-| `back` | - | Fired when user clicks the back button |
-| `save:start` | - | Fired when the save process begins |
-| `save:complete` | `Omit<Template, 'forceRecreate'>` | Fired when template is successfully saved |
 
 ### Guido Exposed Methods
 ```typescript
@@ -412,87 +377,6 @@ src/
 └── library.ts          # Main export
 ```
 
-## 🔌 Provide/Inject Utilities
-
-Guido includes type-safe utilities for Vue's provide/inject system to facilitate dependency injection between components.
-
-### useProvideInject
-
-The `useProvideInject` composable provides two helper functions for type-safe dependency injection:
-
-#### Basic Usage
-
-```typescript
-// Parent component
-import { provideValue } from '@useinsider/guido';
-import { InjectionKey } from 'vue';
-
-// Define a typed injection key
-const MyServiceKey: InjectionKey<MyService> = Symbol('MyService');
-
-// Provide the value
-const myService = new MyService();
-provideValue(MyServiceKey, myService);
-
-// Child component
-import { useInjectedValue } from '@useinsider/guido';
-
-// Inject the value with type safety
-const myService = useInjectedValue(MyServiceKey);
-```
-
-#### With Default Value
-
-```typescript
-// Inject with a fallback value
-const myService = useInjectedValue(MyServiceKey, new DefaultService());
-```
-
-#### Error Handling
-
-The `useInjectedValue` function will throw a descriptive error if no provider is found and no default value is provided:
-
-```typescript
-// This will throw an error if no provider exists
-try {
-  const myService = useInjectedValue(MyServiceKey);
-} catch (error) {
-  console.error('No provider found for MyService');
-}
-```
-
-### API Reference
-
-#### `provideValue`
-
-```typescript
-provideValue<T>(key: InjectionKey<T>, value: T): void
-```
-
-Provides a value using Vue's provide system with type safety.
-
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `key` | `InjectionKey<T>` | The typed injection key |
-| `value` | `T` | The value to provide |
-
-#### `useInjectedValue`
-
-```typescript
-useInjectedValue<T>(key: InjectionKey<T>, defaultValue?: T): T
-```
-
-Injects a value using Vue's inject system with type safety and error handling.
-
-| Parameter | Type | Required | Description |
-|-----------|------|----------|-------------|
-| `key` | `InjectionKey<T>` | ✅ | The typed injection key |
-| `defaultValue` | `T` | ⚪ | Optional fallback value |
-
-**Returns:** `T` - The injected value
-
-**Throws:** `Error` - When no provider is found and no default value is provided
-
 ## 🌐 i18n
 Before running the project, it sends to request to inone.useinsider.com/translations and writes the JSON file into - [trans.json](src/mock/responses/trans.json). 
 It allows to use production or local translations on your code. 🚀
@@ -579,4 +463,8 @@ ISC License
 - Master Version Generator should be fixed.
 - Playwright integration
 - Commitlint & Precommit Hooks integration
+- We need to emit save event and we should return template config to it
+- Default template should be same with production
+- Open Guido with saved template
+- Get User ID, Email and Unique Template ID as dynamic from props
 - Get Pre-built display conditions from API

package/dist/@types/generic.d.ts

@@ -9,3 +9,7 @@ export type DynamicContent = {
     text: string;
     fallback?: string;
 };
+export interface EmailData {
+    senderName: string;
+    subject: string;
+}

package/dist/components/Guido.vue.d.ts

@@ -1,5 +1,4 @@
-import type { DynamicContent, GuidoConfig } from '@@/Types/generic';
-import type { Template } from '@@/Types/stripo';
+import type { DynamicContent, GuidoConfig, EmailData } from '@@/Types/generic';
 type __VLS_Props = {
     templateId: string;
     userId: string;
@@ -9,6 +8,7 @@ type __VLS_Props = {
     html?: string;
     css?: string;
     guidoConfig: GuidoConfig;
+    emailData?: EmailData;
 };
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {
     dynamicContent: {
@@ -17,9 +17,6 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__
     };
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
     "dynamic-content:open": (detail: DynamicContent | null) => void;
-    back: () => void;
-    "save:start": () => void;
-    "save:complete": (template: Omit<Template, "forceRecreate">) => void;
 }, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/components/Guido.vue.js

@@ -1,18 +1,18 @@
 import o from "./Guido.vue2.js";
 /* empty css           */
-import i from "../_virtual/_plugin-vue2_normalizer.js";
+import t from "../_virtual/_plugin-vue2_normalizer.js";
 var s = function() {
-  var e = this, r = e._self._c, t = e._self._setupProxy;
-  return r("div", { staticClass: "guido-editor__wrapper" }, [r(t.HeaderWrapper), r("div", { staticClass: "guido-editor__container", attrs: { id: "guido-editor" } })], 1);
-}, _ = [], a = /* @__PURE__ */ i(
+  var i = this, r = i._self._c, e = i._self._setupProxy;
+  return r("div", { staticClass: "guido-editor__wrapper" }, [r(e.HeaderWrapper), r(e.EmailPreview, { directives: [{ name: "show", rawName: "v-show", value: e.editorStore.isPreviewModeOpen, expression: "editorStore.isPreviewModeOpen" }], attrs: { "email-data": i.emailData, "is-visible": e.editorStore.isPreviewModeOpen } }), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.editorStore.isPreviewModeOpen, expression: "!editorStore.isPreviewModeOpen" }], staticClass: "guido-editor__container", attrs: { id: "guido-editor" } })], 1);
+}, a = [], d = /* @__PURE__ */ t(
   o,
   s,
-  _,
+  a,
   !1,
   null,
-  "89bedf08"
+  "f09e89b0"
 );
-const f = a.exports;
+const m = d.exports;
 export {
-  f as default
+  m as default
 };

package/dist/components/Guido.vue2.js

@@ -1,11 +1,12 @@
-import { defineComponent as h, onMounted as w } from "vue";
-import { provideGuidoActions as D } from "../composables/useGuidoActions.js";
-import { usePartner as E } from "../composables/usePartner.js";
-import { useStripo as S } from "../composables/useStripo.js";
-import { DefaultUsername as _, DefaultGuidoConfig as G } from "../enums/defaults.js";
-import I from "./organisms/header/HeaderWrapper.vue.js";
-import { useStripoApi as k } from "../services/stripoApi.js";
-const B = /* @__PURE__ */ h({
+import { defineComponent as E, onMounted as D } from "vue";
+import { usePartner as _ } from "../composables/usePartner.js";
+import { useStripo as b } from "../composables/useStripo.js";
+import { DefaultUsername as I, DefaultGuidoConfig as P } from "../enums/defaults.js";
+import S from "./organisms/design-preview/EmailPreview.vue.js";
+import G from "./organisms/header/HeaderWrapper.vue.js";
+import { useStripoApi as T } from "../services/stripoApi.js";
+import { useEditorStore as N } from "../stores/editor.js";
+const M = /* @__PURE__ */ E({
   __name: "Guido",
   props: {
     templateId: null,
@@ -15,66 +16,53 @@ const B = /* @__PURE__ */ h({
     username: null,
     html: null,
     css: null,
-    guidoConfig: null
+    guidoConfig: null,
+    emailData: null
   },
-  emits: ["dynamic-content:open", "back", "save:start", "save:complete"],
-  setup(C, { expose: b, emit: t }) {
-    const o = C, { getPartnerName: n, getProductType: a } = E(), {
-      templateId: c,
-      userId: s,
-      guidoConfig: i,
-      html: r = "",
-      css: l = "",
-      partnerName: d = n(),
-      productType: u = a(),
-      username: m = _
-    } = o;
+  emits: ["dynamic-content:open"],
+  setup(h, { expose: v, emit: t }) {
+    const n = h, { getPartnerName: o, getProductType: i } = _(), {
+      templateId: r,
+      userId: a,
+      guidoConfig: c,
+      html: l = "",
+      css: s = "",
+      partnerName: m = o(),
+      productType: d = i(),
+      username: u = I
+    } = n;
     window.GuidoConfig = {
-      ...G,
-      ...i
+      ...P,
+      ...c
     };
-    const { initPlugin: p } = S({ emailId: c, userId: s, username: m, partnerName: d, productType: u }), { getDefaultTemplate: g } = k();
-    D({
-      onBack: () => {
-        console.debug("guido:back"), t("back");
-      },
-      onSaveStart: () => {
-        console.debug("guido:save:start"), t("save:start");
-      },
-      onSaveComplete: (e) => {
-        console.debug("guido:save:complete", e), t("save:complete", e);
-      }
-    });
-    const f = (e) => {
+    const { initPlugin: p } = b({ emailId: r, userId: a, username: u, partnerName: m, productType: d }), { getDefaultTemplate: f } = T(), w = N(), y = (e) => {
       console.debug("dynamic-content:close", e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
-    }, y = () => {
+    }, g = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
-    return w(async () => {
+    return D(async () => {
       console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
       try {
         let e = {
-          html: r,
-          css: l,
-          forceRecreate: !0
-          // TODO: It should be false for old templates. We will communicate with Stripo
+          html: l,
+          css: s
         };
-        e.html || (e = await g()), await p(e);
+        e.html || (e = await f()), await p(e);
       } catch (e) {
         console.error("Failed to initialize Stripo editor:", e);
       }
       document.addEventListener("dynamic-content:open", (e) => {
-        const v = e;
-        console.debug("dynamic-content:open", v.detail), t("dynamic-content:open", v.detail);
+        const C = e;
+        console.debug("dynamic-content:open", C.detail), t("dynamic-content:open", C.detail);
       });
-    }), b({
+    }), v({
       dynamicContent: {
-        insert: f,
-        close: y
+        insert: y,
+        close: g
       }
-    }), { __sfc: !0, props: o, getPartnerName: n, getProductType: a, templateId: c, userId: s, guidoConfig: i, html: r, css: l, partnerName: d, productType: u, username: m, emit: t, initPlugin: p, getDefaultTemplate: g, insertDynamicContent: f, closeDynamicContent: y, HeaderWrapper: I };
+    }), { __sfc: !0, props: n, getPartnerName: o, getProductType: i, templateId: r, userId: a, guidoConfig: c, html: l, css: s, partnerName: m, productType: d, username: u, emit: t, initPlugin: p, getDefaultTemplate: f, editorStore: w, insertDynamicContent: y, closeDynamicContent: g, EmailPreview: S, HeaderWrapper: G };
   }
 });
 export {
-  B as default
+  M as default
 };

package/dist/components/organisms/design-preview/DesktopPreview.vue.d.ts

@@ -0,0 +1,16 @@
+import type { EmailData } from '@@/Types/generic';
+interface Props {
+    emailHtml: string;
+    emailData?: EmailData;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/organisms/design-preview/DesktopPreview.vue.js

@@ -0,0 +1,22 @@
+import a from "./DesktopPreview.vue2.js";
+/* empty css                    */
+import i from "../../../_virtual/_plugin-vue2_normalizer.js";
+var r = function() {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s(t.InContainer, { staticClass: "s-2 m-b-5", attrs: { "full-width-content-status": "", "header-status": "", "border-radius": "bor-r-1", "container-type": "default", "footer-status": !1 }, scopedSlots: e._u([{ key: "headerLeftSlot", fn: function() {
+    return [s("div", { staticClass: "d-f a-i-c j-c-s-b w-1" }, [s("div", { staticClass: "d-f a-i-c" }, [s("div", { staticClass: "b-c-49 bor-r-100 w-5-s h-5-s d-f a-i-c j-c-c" }, [s(t.InIcons, { attrs: { name: "line-menu-profile" } })], 1), s("div", { staticClass: "d-f f-d-c ml-2" }, [s("p", { staticClass: "t-c-53 f-w-600 f-s-1 l-h-1" }, [e._v(" " + e._s(t.senderName) + " ")]), s("p", { staticClass: "t-c-55 f-w-400 f-s-12 l-h-1" }, [e._v(" " + e._s(t.subject) + " ")])])])])];
+  }, proxy: !0 }, { key: "headerRightSlot", fn: function() {
+    return [s("div", { staticClass: "d-f a-i-c j-c-c" }, [s(t.InProgress, { staticClass: "min-w-15-s", attrs: { id: "email-size-progress", "description-status": "", "description-position": "left", description: t.emailSize, "max-value": t.MAX_EMAIL_SIZE, type: t.progressType, value: t.progressValue } }), s(t.InTooltip, { staticClass: "d-f ml-1", attrs: { id: "email-size-tooltip", align: "center", position: "bottom", text: t.trans("email.guido-preview.design-size-warning") } })], 1)];
+  }, proxy: !0 }]) }, [s("iframe", { staticClass: "email-iframe w-1 h-1 bor-w-0", attrs: { sandbox: "allow-same-origin allow-popups allow-forms allow-scripts", srcdoc: e.emailHtml } })]);
+}, o = [], l = /* @__PURE__ */ i(
+  a,
+  r,
+  o,
+  !1,
+  null,
+  "b07fa463"
+);
+const p = l.exports;
+export {
+  p as default
+};

package/dist/components/organisms/design-preview/DesktopPreview.vue2.js

@@ -0,0 +1,28 @@
+import { defineComponent as d, computed as c, ref as a, watch as _ } from "vue";
+import { useTranslations as I } from "../../../composables/useTranslations.js";
+import { InTooltip as S, InProgress as b, InIcons as h, InContainer as v } from "@useinsider/design-system-vue";
+const w = /* @__PURE__ */ d({
+  __name: "DesktopPreview",
+  props: {
+    emailHtml: null,
+    emailData: null
+  },
+  setup(i) {
+    const t = i, u = c(() => {
+      var e;
+      return ((e = t.emailData) == null ? void 0 : e.senderName) || "{Sender Name}";
+    }), p = c(() => {
+      var e;
+      return ((e = t.emailData) == null ? void 0 : e.subject) || "{Subject | Your Subject}";
+    }), o = 102, r = a("~-- KB"), l = a(0), s = a("success"), f = I(), m = () => {
+      if (!t.emailHtml)
+        return;
+      const e = new Blob([t.emailHtml]).size, n = Math.round(e / 1024);
+      r.value = `~${n} KB`, l.value = Math.min(n, o), n < 102 ? s.value = "success" : s.value = "warning";
+    };
+    return _(() => t.emailHtml, m, { immediate: !0 }), { __sfc: !0, props: t, senderName: u, subject: p, MAX_EMAIL_SIZE: o, emailSize: r, progressValue: l, progressType: s, trans: f, calculateEmailSize: m, InContainer: v, InIcons: h, InProgress: b, InTooltip: S };
+  }
+});
+export {
+  w as default
+};

package/dist/components/organisms/design-preview/EmailPreview.vue.d.ts

@@ -0,0 +1,16 @@
+import type { EmailData } from '@@/Types/generic';
+interface Props {
+    isVisible: boolean;
+    emailData?: EmailData;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/organisms/design-preview/EmailPreview.vue.js

@@ -0,0 +1,17 @@
+import s from "./EmailPreview.vue2.js";
+import i from "../../../_virtual/_plugin-vue2_normalizer.js";
+var r = function() {
+  var a = this, e = a._self._c, t = a._self._setupProxy;
+  return a.isVisible ? e("div", { staticClass: "d-f f-d-c h-1 b-c-5 bor-r-2" }, [e("div", { staticClass: "f-g-1 d-f p-5 o-a g-4 min-h-600" }, [e(t.DesktopPreview, { staticClass: "f-g-1 min-w-0", attrs: { "email-data": a.emailData, "email-html": t.currentHtml } }), e(t.MobilePreview, { staticClass: "f-0 min-w-a", attrs: { "email-data": a.emailData, "email-html": t.currentHtml, "is-amp": t.isAmp } })], 1)]) : a._e();
+}, l = [], m = /* @__PURE__ */ i(
+  s,
+  r,
+  l,
+  !1,
+  null,
+  null
+);
+const c = m.exports;
+export {
+  c as default
+};

package/dist/components/organisms/design-preview/EmailPreview.vue2.js

@@ -0,0 +1,37 @@
+import { defineComponent as w, ref as c, computed as p, watch as u, onMounted as b } from "vue";
+import { useDebounce as P } from "../../../composables/useDebounce.js";
+import { usePreviewMode as _ } from "../../../composables/usePreviewMode.js";
+import { useToaster as h } from "../../../composables/useToaster.js";
+import { useEditorStore as V } from "../../../stores/editor.js";
+import y from "./DesktopPreview.vue.js";
+import F from "./MobilePreview.vue.js";
+const x = /* @__PURE__ */ w({
+  __name: "EmailPreview",
+  props: {
+    isVisible: { type: Boolean },
+    emailData: null
+  },
+  setup(d) {
+    const o = d, { compile: a } = _(), { debounce: l } = P(), { handleError: m } = h(), e = V(), i = c(""), r = c(!1), f = p(() => e.emailFormat === "amp" && e.ampHtml ? e.ampHtml : i.value), v = p(() => e.emailFormat === "amp"), t = async () => {
+      r.value = !0;
+      try {
+        const s = await a();
+        i.value = s.html;
+      } catch {
+        console.error("Failed to load preview"), m("Failed to load preview", "Preview compilation");
+      } finally {
+        r.value = !1;
+      }
+    }, n = () => {
+      l(t, 350);
+    };
+    return u(() => o.isVisible, (s) => s && t()), u(() => e.editorVisualMode, () => {
+      o.isVisible && n();
+    }), b(() => {
+      o.isVisible && t();
+    }), { __sfc: !0, props: o, compile: a, debounce: l, handleError: m, editorStore: e, html: i, isLoading: r, currentHtml: f, isAmp: v, loadPreview: t, debouncedReload: n, DesktopPreview: y, MobilePreview: F };
+  }
+});
+export {
+  x as default
+};

package/dist/components/organisms/design-preview/EmailView.vue.d.ts

@@ -0,0 +1,18 @@
+interface Props {
+    emailHtml: string;
+    isAmp?: boolean;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
+    "back-to-inbox": () => void;
+    load: () => void;
+}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/organisms/design-preview/EmailView.vue.js

@@ -0,0 +1,19 @@
+import n from "./EmailView.vue2.js";
+import c from "../../../_virtual/_plugin-vue2_normalizer.js";
+var e = function() {
+  var a = this, s = a._self._c, t = a._self._setupProxy;
+  return s("div", { staticClass: "w-1 h-1 b-c-4 d-f f-d-c" }, [s("div", { staticClass: "d-f j-c-s-b a-i-c p-2 h-6-s" }, [s("div", { staticClass: "d-f a-i-c cur-p", on: { click: function(r) {
+    return a.$emit("back-to-inbox");
+  } } }, [s(t.InIcons, { staticClass: "f-s-3 i-c-7", attrs: { name: "line-chevron-left" } }), s("span", { staticClass: "ml-2 f-s-1 f-w-400 l-h-1 t-c-7" }, [a._v(a._s(t.trans("newsletter.inbox")))])], 1), s("div", { staticClass: "d-f a-i-c" }, [s(t.InIcons, { staticClass: "i-c-52", attrs: { name: "line-chevron-down" } }), s(t.InIcons, { staticClass: "ml-1 i-c-52", attrs: { name: "line-chevron-up" } })], 1)]), s("iframe", { ref: "iframeRef", staticClass: "f-g-1 w-1 d-b b-c-4 bor-s-n", attrs: { sandbox: "allow-same-origin allow-popups allow-forms allow-scripts", srcdoc: a.emailHtml }, on: { load: t.onLoad } })]);
+}, i = [], o = /* @__PURE__ */ c(
+  n,
+  e,
+  i,
+  !1,
+  null,
+  null
+);
+const d = o.exports;
+export {
+  d as default
+};

package/dist/components/organisms/design-preview/EmailView.vue2.js

@@ -0,0 +1,24 @@
+import { defineComponent as p, ref as c } from "vue";
+import { useMobileGmailFit as u } from "../../../composables/useMobileGmailFit.js";
+import { useTranslations as f } from "../../../composables/useTranslations.js";
+import { InIcons as d } from "@useinsider/design-system-vue";
+const E = /* @__PURE__ */ p({
+  __name: "EmailView",
+  props: {
+    emailHtml: null,
+    isAmp: { type: Boolean }
+  },
+  emits: ["back-to-inbox", "load"],
+  setup(l, { emit: t }) {
+    const o = l, a = f(), n = c(), { setupMobileGmailFit: m } = u(), s = () => !!o.isAmp && o.emailHtml.includes("@media") && o.emailHtml.includes(".adapt-img"), r = (e) => {
+      e.documentElement.style.removeProperty("transform"), e.documentElement.style.removeProperty("transform-origin"), e.documentElement.style.removeProperty("height");
+    };
+    return { __sfc: !0, props: o, emit: t, trans: a, iframeRef: n, setupMobileGmailFit: m, isAmpResponsive: s, clearAmpTransforms: r, onLoad: () => {
+      const e = n.value, i = e == null ? void 0 : e.contentDocument;
+      !e || !i || (m(e), s() && setTimeout(() => r(i), 50), t("load"));
+    }, InIcons: d };
+  }
+});
+export {
+  E as default
+};

package/dist/components/organisms/design-preview/InboxView.vue.d.ts

@@ -0,0 +1,17 @@
+import type { EmailData } from '@@/Types/generic';
+interface Props {
+    emailData?: EmailData;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
+    "open-email": () => void;
+}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/organisms/design-preview/InboxView.vue.js

@@ -0,0 +1,19 @@
+import a from "./InboxView.vue2.js";
+import e from "../../../_virtual/_plugin-vue2_normalizer.js";
+var n = function() {
+  var s = this, t = s._self._c, c = s._self._setupProxy;
+  return t("div", { staticClass: "p-y-13 p-x-3 bor-b-w-1 bor-b-s-s bor-b-c-50 cur-p b-c-4 b-c-h-5 p-3", on: { click: function(l) {
+    return s.$emit("open-email");
+  } } }, [t("div", { staticClass: "d-f j-c-s-b a-i-c w-1" }, [t("div", { staticClass: "f-g-1 min-w-0-s" }, [t("div", { staticClass: "f-s-1 f-w-600 t-c-53 l-h-1 mb-12" }, [s._v(" " + s._s(c.senderName) + " ")]), t("div", { staticClass: "f-s-12 f-w-400 t-c-55 l-h-1" }, [s._v(" " + s._s(c.subject) + " ")])]), t("div", { staticClass: "f-sh-0 ml-2 f-s-12 f-w-400 t-c-55 l-h-1" }, [s._v(" " + s._s(c.trans("product-catalog.today")) + " ")]), t(c.InIcons, { staticClass: "i-c-52", attrs: { name: "line-chevron-right" } })], 1)]);
+}, r = [], i = /* @__PURE__ */ e(
+  a,
+  n,
+  r,
+  !1,
+  null,
+  null
+);
+const m = i.exports;
+export {
+  m as default
+};