@useinsider/guido 1.0.0-beta.6ecc044 → 1.0.0-beta.71a8dc6

package/dist/static/styles/components/wide-panel.css.js

@@ -0,0 +1,135 @@
+const n = `ue-wide-panel {
+    width: 425px;
+}
+
+ue-main-tabs-panel-component .fixed-panel-header {
+    display: none;
+}
+
+.label {
+    font-size: 13px;
+    color: var(--guido-color-gray-800);
+}
+
+.stacked-panel-title {
+    padding: 16px;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--guido-color-gray-800);
+    text-align: left;
+}
+
+.stacked-panel-item {
+    border-radius: 4px;
+    border: 1px solid var(--guido-color-gray-300);
+    box-shadow: var(--guido-box-shadow);
+}
+
+.container {
+    padding: 16px;
+    grid-column-gap: 8px;
+}
+
+.container.widest-spacing {
+    grid-column-gap: 16px;
+    grid-row-gap: 16px;
+}
+
+.container.parent-container > .container {
+    padding: 0 16px;
+}
+
+.container .container.has-container-separator {
+    padding-top: 16px;
+}
+
+ue-control-panel,
+.common-wrapper {
+    border: 1px solid var(--guido-color-gray-300);
+    box-shadow: var(--guido-box-shadow);
+}
+
+.control-panel-header {
+    grid-template-columns: repeat(12, 1fr);
+    padding: 0;
+}
+
+.control-panel-header > * {
+    display: flex;
+    align-items: center;
+}
+
+.header-control-panel-left {
+    grid-area: 1 / 1 / 2 / 2;
+}
+
+.header-control-panel-label {
+    grid-area: 1 / 2 / 2 / 12;
+    text-align: left;
+    padding: 0;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+}
+
+.header-control-panel-right {
+    grid-area: 1 / 12 / 2 / 13;
+}
+
+.control-panel-header button {
+    padding: 16px !important;
+    border: 0;
+    min-height: auto;
+}
+
+.container.droppable-header-container ue-button:last-child {
+    margin-right: 0;
+}
+
+.secondary-control-group {
+    gap: 16px;
+}
+
+.droppable-container {
+    padding-top: 6px;
+}
+
+.control-plus-rounded-wrapper {
+    border-radius: 4px;
+    border: 1px solid var(--guido-color-gray-300);
+}
+
+.structure-item-container {
+    padding: 8px 16px 8px 10px;
+}
+
+ue-label {
+    align-items: center;
+}
+
+ue-label.accent-dot:before {
+    content: none;
+}
+
+ue-label.accent-dot:after {
+    content: "New";
+    width: auto;
+    height: auto;
+    border-radius: 4px;
+    background: var(--guido-color-primary-500);
+    z-index: 2;
+    color: var(--guido-color-white);
+    padding: 4px 8px;
+    right: 1px;
+    font-size: 13px;
+}
+
+.e2e-size,
+.e2e-timer-size {
+    grid-auto-flow: row;
+    grid-template-columns: 1fr !important;
+}
+`;
+export {
+  n as default
+};

package/dist/static/styles/variables.css.js

@@ -0,0 +1,23 @@
+const o = `:host {
+    --guido-color-white: #FFFFFF;
+    --guido-color-primary-500: #0A2ECC;
+    --guido-color-primary-200: #B5C1F1;
+    --guido-color-primary-100: #DAE1FB;
+    --guido-color-gray-800: #292929;
+    --guido-color-gray-700: #989898;
+    --guido-color-gray-600: #666666;
+    --guido-color-gray-300: #E1E1E1;
+    --guido-color-gray-1: #F0F0F0;
+    --guido-color-gray-0: #F9F9F9;
+    --guido-color-neutral-800: #222938;
+    --guido-color-neutral-200: #DCDFE6;
+    --guido-color-neutral-100: #EFF2F4;
+    --guido-color-danger-500: #DC2A2A; 
+    --guido-box-shadow: 0 4px 12px 0 rgba(44,53,70,0.15);
+    --guido-color-background-onpage-message-info: #D3EEF8;
+    --guido-color-border-onpage-message-info: #258DDE;
+}
+`;
+export {
+  o as default
+};

package/dist/stores/dynamic-content.d.ts

@@ -0,0 +1,27 @@
+import type { DynamicContent } from '@@/Types/generic';
+export declare const useDynamicContentStore: import("pinia").StoreDefinition<"dynamicContent", {
+    selectedDynamicContent: DynamicContent;
+    selectedDynamicContentList: DynamicContent[];
+}, {
+    getSelectedDynamicContentList: (state: {
+        selectedDynamicContent: {
+            value: string;
+            text: string;
+            fallback?: string | undefined;
+        };
+        selectedDynamicContentList: {
+            value: string;
+            text: string;
+            fallback?: string | undefined;
+        }[];
+    } & import("pinia").PiniaCustomStateProperties<{
+        selectedDynamicContent: DynamicContent;
+        selectedDynamicContentList: DynamicContent[];
+    }>) => {
+        text: string;
+        value: string;
+        fallback: string | undefined;
+    }[];
+}, {
+    setSelectedDynamicContent(dynamicContent: DynamicContent): void;
+}>;

package/dist/stores/dynamic-content.js

@@ -0,0 +1,23 @@
+import { removeDuplicatesFromArray as n } from "../utils/arrayUtil.js";
+import { defineStore as a } from "pinia";
+const s = a("dynamicContent", {
+  state: () => ({
+    selectedDynamicContent: { text: "", value: "", fallback: "" },
+    selectedDynamicContentList: []
+  }),
+  actions: {
+    setSelectedDynamicContent(e) {
+      this.selectedDynamicContent = e, this.selectedDynamicContentList.push(e);
+    }
+  },
+  getters: {
+    getSelectedDynamicContentList: (e) => n(e.selectedDynamicContentList).map((t) => ({
+      text: t.text,
+      value: t.value,
+      fallback: t.fallback
+    })) || []
+  }
+});
+export {
+  s as useDynamicContentStore
+};

package/dist/stores/editor.d.ts

@@ -1,6 +1,6 @@
 export declare const useEditorStore: import("pinia").StoreDefinition<"editor", {
     isCodeEditorOpen: boolean;
     isVersionHistoryOpen: boolean;
+    isPreviewModeOpen: boolean;
     editorVisualMode: string;
-    isSaveTemplateModalOpen: boolean;
 }, {}, {}>;

package/dist/stores/editor.js

@@ -1,12 +1,12 @@
 import { defineStore as e } from "pinia";
-const t = e("editor", {
+const i = e("editor", {
   state: () => ({
     isCodeEditorOpen: !1,
     isVersionHistoryOpen: !1,
-    editorVisualMode: "desktop",
-    isSaveTemplateModalOpen: !1
+    isPreviewModeOpen: !1,
+    editorVisualMode: "desktop"
   })
 });
 export {
-  t as useEditorStore
+  i as useEditorStore
 };

package/dist/stores/preview.d.ts

@@ -0,0 +1,46 @@
+import type { PreviewState, EmailFormat } from '@@/Types/preview';
+export declare const usePreviewStore: import("pinia").StoreDefinition<"preview", PreviewState, {
+    isAMPModeEnabled: (state: {
+        emailFormat: EmailFormat;
+        ampHtml: string;
+        ampErrors: string[];
+        templateHtml: string;
+        isLoading: boolean;
+        isLoaded: boolean;
+        isAMPErrorModalVisible: boolean;
+        isPreviewModeOpen: boolean;
+    } & import("pinia").PiniaCustomStateProperties<PreviewState>) => boolean;
+    previewHtml(): string;
+    hasAMP: (state: {
+        emailFormat: EmailFormat;
+        ampHtml: string;
+        ampErrors: string[];
+        templateHtml: string;
+        isLoading: boolean;
+        isLoaded: boolean;
+        isAMPErrorModalVisible: boolean;
+        isPreviewModeOpen: boolean;
+    } & import("pinia").PiniaCustomStateProperties<PreviewState>) => boolean;
+    hasAMPErrors: (state: {
+        emailFormat: EmailFormat;
+        ampHtml: string;
+        ampErrors: string[];
+        templateHtml: string;
+        isLoading: boolean;
+        isLoaded: boolean;
+        isAMPErrorModalVisible: boolean;
+        isPreviewModeOpen: boolean;
+    } & import("pinia").PiniaCustomStateProperties<PreviewState>) => boolean;
+    showAMPErrorButton(): boolean;
+    isAMPResponsive(): boolean;
+}, {
+    updateAMPData(ampData: {
+        ampHtml?: string;
+        ampErrors?: string[];
+    }): void;
+    setEmailFormat(format: EmailFormat): void;
+    closeErrorModal(): void;
+    openErrorModal(): void;
+    openPreviewMode(): void;
+    closePreviewMode(): void;
+}>;

package/dist/stores/preview.js

@@ -0,0 +1,53 @@
+import { defineStore as t } from "pinia";
+const s = () => ({
+  emailFormat: "html",
+  ampHtml: "",
+  ampErrors: [],
+  templateHtml: "",
+  isLoading: !1,
+  isLoaded: !1,
+  isAMPErrorModalVisible: !1,
+  isPreviewModeOpen: !1
+}), o = t("preview", {
+  state: () => s(),
+  getters: {
+    isAMPModeEnabled: (e) => e.emailFormat === "AMP",
+    previewHtml() {
+      return this.isAMPModeEnabled ? this.ampHtml : this.templateHtml;
+    },
+    hasAMP: (e) => {
+      var r;
+      return !!((r = e.ampHtml) != null && r.trim());
+    },
+    hasAMPErrors: (e) => e.ampErrors.length > 0,
+    showAMPErrorButton() {
+      return this.isAMPModeEnabled && this.hasAMPErrors;
+    },
+    isAMPResponsive() {
+      return this.isAMPModeEnabled && this.ampHtml.includes("@media") && this.ampHtml.includes(".adapt-img");
+    }
+  },
+  actions: {
+    updateAMPData(e) {
+      this.ampHtml = e.ampHtml ?? "", this.ampErrors = e.ampErrors ?? [], this.emailFormat = e.ampHtml ? "AMP" : "html";
+    },
+    setEmailFormat(e) {
+      this.emailFormat = e;
+    },
+    closeErrorModal() {
+      this.isAMPErrorModalVisible = !1;
+    },
+    openErrorModal() {
+      this.isAMPErrorModalVisible = !0;
+    },
+    openPreviewMode() {
+      this.isPreviewModeOpen = !0;
+    },
+    closePreviewMode() {
+      this.isPreviewModeOpen = !1;
+    }
+  }
+});
+export {
+  o as usePreviewStore
+};

package/dist/utils/arrayUtil.d.ts

@@ -0,0 +1 @@
+export declare const removeDuplicatesFromArray: <T>(arr?: T[]) => T[];

package/dist/utils/arrayUtil.js

@@ -0,0 +1,10 @@
+const s = (t = []) => {
+  const e = /* @__PURE__ */ new Set();
+  return t.filter((n) => {
+    const r = JSON.stringify(n);
+    return e.has(r) ? !1 : (e.add(r), !0);
+  });
+};
+export {
+  s as removeDuplicatesFromArray
+};

package/dist/utils/genericUtil.d.ts

@@ -0,0 +1,2 @@
+import type { DynamicContent, MergeTag } from '@@/Types/generic';
+export declare const dynamicContentToMergeTags: (dynamicContentList: DynamicContent[]) => MergeTag[];

package/dist/utils/genericUtil.js

@@ -0,0 +1,7 @@
+const c = (l) => l.map((a) => ({
+  label: a.fallback ? `${a.text} | ${a.fallback}` : a.text,
+  value: a.fallback ? `{{${a.value}|${a.fallback}}}` : `{{${a.value}}}`
+}));
+export {
+  c as dynamicContentToMergeTags
+};

package/dist/utils/htmlCompiler.d.ts

@@ -0,0 +1,12 @@
+import type { CompilerRule, CompilationResult, HtmlCompiler } from '@@/Types/html-compiler';
+export declare class HtmlCompilerEngine implements HtmlCompiler {
+    private rules;
+    constructor(rules?: CompilerRule[]);
+    compile(html: string, rules?: CompilerRule[]): CompilationResult;
+    private applyRule;
+    private applyReplaceRule;
+    private applyRegexRule;
+    private applyRemoveRule;
+    private applyCustomRule;
+}
+export declare const createHtmlCompiler: (rules?: CompilerRule[]) => HtmlCompiler;

package/dist/utils/htmlCompiler.js

@@ -0,0 +1,70 @@
+var y = Object.defineProperty;
+var g = (p, e, r) => e in p ? y(p, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : p[e] = r;
+var u = (p, e, r) => g(p, typeof e != "symbol" ? e + "" : e, r);
+import { useToaster as m } from "../composables/useToaster.js";
+class d {
+  constructor(e = []) {
+    u(this, "rules");
+    this.rules = e;
+  }
+  compile(e, r) {
+    const l = performance.now(), t = e, o = e.length;
+    let s = e;
+    const a = [];
+    (r || this.rules).sort((n, c) => n.priority - c.priority).forEach((n) => {
+      const c = s.length;
+      s = this.applyRule(s, n), s.length !== c && a.push(n.id);
+    });
+    const i = s.length, R = o > 0 ? (o - i) / o * 100 : 0;
+    return {
+      originalHtml: t,
+      compiledHtml: s,
+      appliedRules: a,
+      // TODO: We can use stats for monitoring in the future
+      stats: {
+        originalSize: o,
+        compiledSize: i,
+        reductionPercentage: R,
+        executionTime: performance.now() - l
+      }
+    };
+  }
+  applyRule(e, r) {
+    try {
+      switch (r.type) {
+        case "replace":
+          return this.applyReplaceRule(e, r);
+        case "regex":
+          return this.applyRegexRule(e, r);
+        case "remove":
+          return this.applyRemoveRule(e, r);
+        case "custom":
+          return this.applyCustomRule(e, r);
+        default:
+          return e;
+      }
+    } catch (l) {
+      const { handleError: t } = m();
+      return t(l, `Failed to apply rule ${r.id}:`), e;
+    }
+  }
+  applyReplaceRule(e, r) {
+    const { search: l, replacement: t, replaceAll: o = !0 } = r;
+    return o ? e.replaceAll(l, t) : e.replace(l, t);
+  }
+  applyRegexRule(e, r) {
+    const { pattern: l, replacement: t, flags: o = "g" } = r, s = new RegExp(l, o);
+    return e.replace(s, t);
+  }
+  applyRemoveRule(e, r) {
+    return r.targets.reduce((l, t) => t instanceof RegExp ? l.replace(t, "") : l.replaceAll(t, ""), e);
+  }
+  applyCustomRule(e, r) {
+    return r.processor(e);
+  }
+}
+const A = (p = []) => new d(p);
+export {
+  d as HtmlCompilerEngine,
+  A as createHtmlCompiler
+};

package/dist/utils/tooltipUtils.d.ts

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

package/dist/utils/tooltipUtils.js

@@ -0,0 +1,11 @@
+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
+});
+export {
+  e as getTooltipOptions
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.0-beta.6ecc044",
+  "version": "1.0.0-beta.71a8dc6",
   "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",
@@ -10,9 +10,9 @@
   ],
   "exports": {
     ".": {
-        "import": "./dist/library.js",
-        "types": "./dist/components/Guido.vue.d.ts",
-        "require": "./dist/components/Guido.vue.js"
+      "import": "./dist/library.js",
+      "types": "./dist/components/Guido.vue.d.ts",
+      "require": "./dist/components/Guido.vue.js"
     },
     "./style": "./dist/guido.css"
   },
@@ -21,7 +21,6 @@
     "start": "vite",
     "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.app.json",
     "preview": "vite preview",
-    "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "NODE_OPTIONS=--max-old-space-size=2048 eslint ./ && bun run type-check",
     "lint:fix": "NODE_OPTIONS=--max-old-space-size=2048 eslint --fix ./",
     "type-check": "vue-tsc --noEmit --project tsconfig.config.json && vue-tsc --noEmit --project tsconfig.app.json"
@@ -30,6 +29,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@stripoinc/ui-editor-extensions": "1.0.6",
     "@useinsider/design-system-vue": "0.14.8",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
@@ -42,6 +42,7 @@
     "@cspell/eslint-plugin": "8.17.5",
     "@eslint/eslintrc": "3.3.0",
     "@eslint/js": "8.57.1",
+    "@playwright/test": "^1.54.2",
     "@stylistic/eslint-plugin": "3.1.0",
     "@stylistic/eslint-plugin-migrate": "3.1.0",
     "@types/eslint": "8.56.12",

package/dist/components/organisms/base/ModalWrapper.vue.d.ts

@@ -1,72 +0,0 @@
-interface ModalWrapperProps {
-    isOpen: boolean;
-    title: string;
-    description?: string;
-    size?: 'small' | 'medium' | 'large' | 'extra-large';
-    primaryButtonText?: string;
-    primaryButtonDisabled?: boolean;
-    primaryButtonLoading?: boolean;
-    cancelButtonText?: string;
-    showCancelButton?: boolean;
-    className?: string;
-}
-declare var __VLS_12: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_12) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<ModalWrapperProps>, {
-    description: string;
-    size: string;
-    primaryButtonText: string;
-    primaryButtonDisabled: boolean;
-    primaryButtonLoading: boolean;
-    cancelButtonText: string;
-    showCancelButton: boolean;
-    className: string;
-}>, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {
-    close: () => void;
-    save: () => void;
-    cancel: () => void;
-}, string, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<ModalWrapperProps>, {
-    description: string;
-    size: string;
-    primaryButtonText: string;
-    primaryButtonDisabled: boolean;
-    primaryButtonLoading: boolean;
-    cancelButtonText: string;
-    showCancelButton: boolean;
-    className: string;
-}>>>, {
-    className: string;
-    size: "small" | "medium" | "large" | "extra-large";
-    description: string;
-    primaryButtonText: string;
-    primaryButtonDisabled: boolean;
-    primaryButtonLoading: boolean;
-    cancelButtonText: string;
-    showCancelButton: boolean;
-}>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-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;
-    };
-};
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $scopedSlots: S;
-    };
-};
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/components/organisms/base/ModalWrapper.vue.js

@@ -1,19 +0,0 @@
-import r from "./ModalWrapper.vue2.js";
-import o from "../../../_virtual/_plugin-vue2_normalizer.js";
-var s = function() {
-  var t = this, n = t._self._c, e = t._self._setupProxy;
-  return n(e.InDrawer, { attrs: { id: `drawer-${Math.random().toString(36).substr(2, 9)}`, "description-text": t.description, "footer-button-group-options": e.drawerFooterOptions, size: t.size, status: t.isOpen, "title-text": t.title }, on: { cancelOrBackButtonEvent: e.handleCancel, onCloseEvent: e.handleClose, primaryButtonEvent: e.handleSave }, scopedSlots: t._u([{ key: "contentSlot", fn: function() {
-    return [n("div", { staticClass: "modal-content-wrapper", class: t.className }, [t._t("default")], 2)];
-  }, proxy: !0 }], null, !0) });
-}, a = [], l = /* @__PURE__ */ o(
-  r,
-  s,
-  a,
-  !1,
-  null,
-  null
-);
-const u = l.exports;
-export {
-  u as default
-};

package/dist/components/organisms/base/ModalWrapper.vue2.js

@@ -1,43 +0,0 @@
-import { defineComponent as o, computed as l } from "vue";
-import { InDrawer as r } from "@useinsider/design-system-vue";
-const i = /* @__PURE__ */ o({
-  __name: "ModalWrapper",
-  props: {
-    isOpen: { type: Boolean },
-    title: null,
-    description: { default: "" },
-    size: { default: "medium" },
-    primaryButtonText: { default: "Save" },
-    primaryButtonDisabled: { type: Boolean, default: !1 },
-    primaryButtonLoading: { type: Boolean, default: !1 },
-    cancelButtonText: { default: "Cancel" },
-    showCancelButton: { type: Boolean, default: !0 },
-    className: { default: "" }
-  },
-  emits: ["close", "save", "cancel"],
-  setup(a, { emit: t }) {
-    const e = a, n = l(() => ({
-      primaryButton: {
-        styling: "solid",
-        type: "primary",
-        labelText: e.primaryButtonText,
-        disabled: e.primaryButtonDisabled || e.primaryButtonLoading
-      },
-      cancelOrBackButton: e.showCancelButton ? {
-        type: "secondary",
-        styling: "ghost",
-        labelText: e.cancelButtonText
-      } : void 0
-    }));
-    return { __sfc: !0, props: e, emit: t, drawerFooterOptions: n, handleClose: () => {
-      t("close");
-    }, handleSave: () => {
-      t("save");
-    }, handleCancel: () => {
-      t("cancel");
-    }, InDrawer: r };
-  }
-});
-export {
-  i as default
-};

package/dist/components/organisms/save-template/SaveTemplateModal.vue.d.ts

@@ -1,20 +0,0 @@
-interface TemplateModalProps {
-    isOpen: boolean;
-}
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<TemplateModalProps>, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {
-    close: () => void;
-    save: (data: {
-        templateName: string;
-        htmlData: string;
-    }) => void;
-}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<TemplateModalProps>>>, {}>;
-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;
-    };
-};