@useinsider/guido 1.0.0-beta.f7c239e → 1.0.1-beta.0168eae

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

@@ -0,0 +1,38 @@
+const o = `ue-ui-headed-simple-panel,
+ue-ui-simple-panel,
+.modules-panel-small-content {
+    box-shadow: var(--guido-box-shadow);
+    border: 1px solid var(--guido-color-gray-300);
+}
+
+ue-stripe-thumb,
+.ue-stripe-thumb {
+    box-shadow: none;
+    border: 1px solid var(--guido-color-gray-300);
+}
+
+ue-stripe-thumb:hover:not(.disabled),
+.ue-stripe-thumb:hover:not(.disabled) {
+    box-shadow: none;
+    border: 1px solid var(--guido-color-primary-500);
+}
+
+.block-thumb {
+    box-shadow: none;
+    border: 1px solid var(--guido-color-gray-300);
+}
+
+.ue-dragged-node-component>.block-thumb,
+.block-thumb:hover:not(.disabled) {
+    box-shadow: none;
+    border-color: var(--guido-color-primary-500);
+}
+
+.modules-layout-wrapper {
+    padding: 0 16px 16px;
+    grid-row-gap: 16px;
+}
+`;
+export {
+  o as default
+};

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

@@ -0,0 +1,11 @@
+const e = `ue-switcher input {
+    border-radius: 26px;
+} 
+
+ue-switcher input:before {
+    border-radius: 22px;
+}
+`;
+export {
+  e as default
+};

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

@@ -0,0 +1,97 @@
+const n = `
+
+ue-tabs-header .tabs-header {
+    padding: 0;
+    column-gap: 0;
+    background-color: transparent;
+}
+
+.control-panel-tabs .tabs-header {
+    margin: 16px 16px 0;
+}
+
+ue-tabs-header .tabs-header button {
+    background-color: var(--guido-color-gray-0);
+    outline: none;
+    padding: 8px 16px;
+    border: 1px solid var(--guido-color-gray-300);
+    height: 40px;
+    font-size: 15px;
+}
+
+ue-tabs-header .tabs-header button:hover:not(:disabled,.disabled,.checked) {
+    background-color: var(--guido-color-gray-1);
+}
+
+ue-tabs-header .tabs-header button ue-icon-component.icon-button {
+    color: var(--guido-color-gray-800);
+}
+
+ue-tabs-header .tabs-header button:before {
+    content: none;
+}
+
+ue-tabs-header .tabs-header button:not(:last-child),
+ue-tabs-header .tabs-header button:not(:first-child) {
+    border-radius: 0;
+}
+
+ue-tabs-header .tabs-header button:first-child {
+    border-radius: 4px 0 0 4px;
+}
+
+ue-tabs-header .tabs-header button:last-child {
+    border-radius: 0 4px 4px 0;
+}
+
+ue-tabs-header .tabs-header button:first-child:last-child {
+    border-radius: 4px;
+}
+
+ue-tabs-header .tabs-header button.checked {
+    background-color: var(--guido-color-primary-100);
+    color: var(--guido-color-primary-500);
+    border-color: var(--guido-color-primary-500);
+}
+
+ue-tabs-header .tabs-header button.checked ue-icon-component.icon-button {
+    color: var(--guido-color-primary-500);
+}
+
+.ue-radio-tabs .button-group {
+    padding: 0;
+    column-gap: 0;
+    background-color: transparent;
+}
+
+.ue-radio-tabs .button-group .button {
+    background-color: var(--guido-color-gray-0);
+    outline: none;
+    padding: 8px 16px;
+    border: 1px solid var(--guido-color-gray-300);
+    height: 40px;
+    font-size: 15px;
+}
+
+.ue-radio-tabs .button-group input:checked + label {
+    box-shadow: none;
+    background-color: var(--guido-color-primary-100);
+    color: var(--guido-color-primary-500);
+    border-color: var(--guido-color-primary-500);
+}
+
+.ue-radio-tabs .button-group > div:first-of-type .button {
+    border-radius: 4px 0 0 4px !important;
+}
+
+.ue-radio-tabs .button-group > div:last-of-type .button {
+    border-radius: 0 4px 4px 0 !important;
+}
+
+.ue-radio-tabs .button-group > div:first-of-type:last-of-type .button {
+    border-radius: 4px !important;
+}
+`;
+export {
+  n as default
+};

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

@@ -0,0 +1,23 @@
+const o = `ue-emoji .emoji-tabs .active-smile-tab {
+    border-color: var(--guido-color-primary-500);
+}
+
+ue-insert-table .hovered-template-cell {
+    background: var(--guido-color-primary-100);
+}
+
+ue-insert-table .template-row,
+ue-insert-table .template-row:last-child,
+ue-insert-table .template-cell {
+    border-color: var(--guido-color-primary-500);
+}
+
+.ue-popover.light {
+    border-radius: 4px;
+    border: 1px solid var(--guido-color-gray-300);
+    box-shadow: var(--guido-box-shadow);
+}
+`;
+export {
+  o as default
+};

package/dist/static/styles/components/version-history.css.js

@@ -0,0 +1,30 @@
+const o = `.patch-session-container {
+    row-gap: 16px;
+}
+
+ue-vh-group {
+    box-shadow: none;
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+}
+
+ue-vh-group:has(ue-vh-patch.selected) {
+    border-color: var(--guido-color-primary-500);
+}
+
+ue-vh-patch.selected .patch-wrapper {
+    box-shadow: none;
+}
+
+ue-vh-patch:hover .patch-wrapper {
+    background: var(--guido-color-neutral-100);
+}
+
+ue-vh-patch.selected .patch-wrapper {
+    background-color: var(--guido-color-primary-100);
+    box-shadow: 0 0 0 1px var(--guido-color-primary-500);
+}
+`;
+export {
+  o as default
+};

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

@@ -0,0 +1,144 @@
+const n = `ue-wide-panel {
+    width: 425px;
+}
+
+ue-main-tabs-panel-component .fixed-panel-header {
+    display: none;
+}
+
+/* Remove with this writing task DT-28355 */
+ue-description a {
+    display: none;
+}
+
+.label {
+    font-size: 13px;
+    color: var(--guido-color-gray-800);
+}
+
+.stacked-panel {
+    overflow: scroll;
+}
+
+.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/customEditorStyle.css.js

@@ -0,0 +1,18 @@
+const n = `.esd-x,
+.esd-merge-tag {
+    color: #0a2ecc !important;
+    box-shadow: none !important;
+}
+
+.esd-merge-tag {
+    border: 1px solid #b5c1f1;
+    border-radius: 4px !important;
+}
+
+.ue-preview-control-wrapper ue-icon-component:not([disabled=true]):not(.stripo-static-icon):hover {
+    background: none;
+}
+`;
+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,5 +1,8 @@
 export declare const useEditorStore: import("pinia").StoreDefinition<"editor", {
     isCodeEditorOpen: boolean;
+    isSaveAsTemplateDrawerOpen: boolean;
     isVersionHistoryOpen: boolean;
+    isPreviewModeOpen: boolean;
     editorVisualMode: string;
+    hasChanges: boolean;
 }, {}, {}>;

package/dist/stores/editor.js

@@ -1,11 +1,14 @@
 import { defineStore as e } from "pinia";
-const t = e("editor", {
+const o = e("editor", {
   state: () => ({
     isCodeEditorOpen: !1,
+    isSaveAsTemplateDrawerOpen: !1,
     isVersionHistoryOpen: !1,
-    editorVisualMode: "desktop"
+    isPreviewModeOpen: !1,
+    editorVisualMode: "desktop",
+    hasChanges: !1
   })
 });
 export {
-  t as useEditorStore
+  o 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/stores/save-as-template.d.ts

@@ -0,0 +1,73 @@
+import type { MappedCategory } from '@@/Types/save-as-template';
+interface StoreState {
+    templateName: string;
+    categories: MappedCategory[];
+    selectedCategories: MappedCategory[];
+    skeletonStatus: boolean;
+    recommendation: {
+        campaignUrls: Record<string, string>;
+        configs: Record<string, string>;
+    };
+    unsubscribe: {
+        status: boolean;
+        config: Record<string, string>;
+    };
+    type: {
+        editor: number;
+        message: number;
+    };
+}
+export declare const useSaveAsTemplateStore: import("pinia").StoreDefinition<"saveAsTemplate", StoreState, {
+    getTemplateName: (state: {
+        templateName: string;
+        categories: {
+            value: string;
+            text: string;
+        }[];
+        selectedCategories: {
+            value: string;
+            text: string;
+        }[];
+        skeletonStatus: boolean;
+        recommendation: {
+            campaignUrls: Record<string, string>;
+            configs: Record<string, string>;
+        };
+        unsubscribe: {
+            status: boolean;
+            config: Record<string, string>;
+        };
+        type: {
+            editor: number;
+            message: number;
+        };
+    } & import("pinia").PiniaCustomStateProperties<StoreState>) => string;
+    getSelectedCategoryIds: (state: {
+        templateName: string;
+        categories: {
+            value: string;
+            text: string;
+        }[];
+        selectedCategories: {
+            value: string;
+            text: string;
+        }[];
+        skeletonStatus: boolean;
+        recommendation: {
+            campaignUrls: Record<string, string>;
+            configs: Record<string, string>;
+        };
+        unsubscribe: {
+            status: boolean;
+            config: Record<string, string>;
+        };
+        type: {
+            editor: number;
+            message: number;
+        };
+    } & import("pinia").PiniaCustomStateProperties<StoreState>) => number[];
+}, {
+    fetchCategories(): Promise<void>;
+    addCategory(category: string): Promise<void>;
+}>;
+export {};

package/dist/stores/save-as-template.js

@@ -0,0 +1,48 @@
+import { useTemplateLibraryApi as o } from "../services/templateLibraryApi.js";
+import { defineStore as i } from "pinia";
+const r = () => ({
+  templateName: "",
+  categories: [],
+  selectedCategories: [],
+  skeletonStatus: !0,
+  recommendation: {
+    campaignUrls: {},
+    configs: {}
+  },
+  unsubscribe: {
+    status: !1,
+    config: {}
+  },
+  type: {
+    editor: 2,
+    message: 1
+  }
+}), n = i("saveAsTemplate", {
+  state: () => r(),
+  getters: {
+    getTemplateName: (e) => e.templateName.trim(),
+    getSelectedCategoryIds: (e) => e.selectedCategories.map((a) => Number(a.value))
+  },
+  actions: {
+    async fetchCategories() {
+      const { getCategories: e } = o(), a = await e();
+      this.categories = a.map((t) => ({
+        value: t.id.toString(),
+        text: t.name
+      })).sort((t, s) => t.text.localeCompare(s.text));
+    },
+    async addCategory(e) {
+      const { createCategory: a } = o(), t = await a(e);
+      if (t) {
+        const s = {
+          value: t,
+          text: e
+        };
+        this.categories.push(s), this.selectedCategories.push(s);
+      }
+    }
+  }
+});
+export {
+  n as useSaveAsTemplateStore
+};