@useinsider/guido 1.0.2-beta.86f7e79 → 1.0.2-beta.91efff4

package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/modifications/ModificationDescription.js

@@ -1,26 +1,22 @@
-import { __exports as i } from "../../../../../_virtual/ModificationDescription.js";
-var r;
-function a() {
-  if (r) return i;
-  r = 1, Object.defineProperty(i, "__esModule", { value: !0 }), i.ModificationDescription = void 0;
-  var e = (
-    /** @class */
-    (function() {
-      function t(o) {
-        this.key = o;
-      }
-      return t.prototype.withParams = function(o) {
-        return this.params = o, this;
-      }, t.prototype.getValue = function() {
-        return {
-          key: this.key,
-          params: this.params
-        };
-      }, t;
-    })()
-  );
-  return i.ModificationDescription = e, i;
+var i = Object.defineProperty;
+var e = (t, s, a) => s in t ? i(t, s, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[s] = a;
+var r = (t, s, a) => e(t, typeof s != "symbol" ? s + "" : s, a);
+class o {
+  constructor(s) {
+    r(this, "key");
+    r(this, "params");
+    this.key = s;
+  }
+  withParams(s) {
+    return this.params = s, this;
+  }
+  getValue() {
+    return {
+      key: this.key,
+      params: this.params
+    };
+  }
 }
 export {
-  a as __require
+  o as ModificationDescription
 };

package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/ui-elements/UIElement.js

@@ -1,22 +1,40 @@
-import { __exports as t } from "../../../../../_virtual/UIElement.js";
-var n;
-function l() {
-  if (n) return t;
-  n = 1, Object.defineProperty(t, "__esModule", { value: !0 }), t.UIElement = void 0;
-  var r = (
-    /** @class */
-    (function() {
-      function e() {
-      }
-      return e.prototype.onDestroy = function() {
-      }, e.prototype.getValue = function() {
-      }, e.prototype.setValue = function(o) {
-      }, e.prototype.onAttributeUpdated = function(o, u) {
-      }, e;
-    })()
-  );
-  return t.UIElement = r, t;
+var u = Object.defineProperty;
+var n = (t, e, a) => e in t ? u(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a;
+var l = (t, e, a) => n(t, typeof e != "symbol" ? e + "" : e, a);
+class s {
+  constructor() {
+    /** Provides access to editor functionalities specific to this UI element instance. */
+    l(this, "api");
+  }
+  /**
+   * Optional cleanup hook called when the UI element is being destroyed.
+   * Use this to remove event listeners or perform other cleanup tasks.
+   */
+  onDestroy() {
+  }
+  /**
+   * Optional method to get the current value of the UI element.
+   * Implement this if the element manages a state or value (e.g., input fields).
+   * @returns The current value of the element.
+   */
+  getValue() {
+  }
+  /**
+   * Optional method to set the value of the UI element.
+   * Implement this if the element manages a state or value and needs to be updated externally.
+   * @param value - The new value to set.
+   */
+  setValue(e) {
+  }
+  /**
+   * @description Optional hook called when one of the element's supported attributes ({@link UEAttr}) gets updated externally.
+   * Implement this to react to attribute changes (e.g., visibility, disabled state).
+   * @param name - The name of the attribute that was updated.
+   * @param value - The new value of the attribute.
+   */
+  onAttributeUpdated(e, a) {
+  }
 }
 export {
-  l as __require
+  s as UIElement
 };

package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/ui-elements/UIElementTagRegistry.js

@@ -1,18 +1,5 @@
-import { __exports as e } from "../../../../../_virtual/UIElementTagRegistry.js";
-var r;
-function g() {
-  if (r) return e;
-  r = 1, Object.defineProperty(e, "__esModule", { value: !0 }), e.UIElementTagRegistry = void 0;
-  var t = (
-    /** @class */
-    /* @__PURE__ */ (function() {
-      function i() {
-      }
-      return i;
-    })()
-  );
-  return e.UIElementTagRegistry = t, e;
+class s {
 }
 export {
-  g as __require
+  s as UIElementTagRegistry
 };

package/dist/static/styles/components/alert-message.css.js

@@ -1,4 +1,4 @@
-const n = `.alert-message-wrapper {
+const r = `.alert-message-wrapper {
     box-shadow: none;
     border: 1px solid var(--guido-color-gray-300);
     color: var(--guido-color-gray-600);
@@ -16,6 +16,36 @@ const n = `.alert-message-wrapper {
     color: var(--guido-color-border-onpage-message-info);
 }
 
+.alert-message-wrapper.warn {
+    background: var(--guido-color-background-onpage-message-warn);
+    border-color: var(--guido-color-border-onpage-message-warn);
+    color: inherit;
+}
+
+.alert-message-wrapper.warn ue-icon-component.icon {
+    color: var(--guido-color-border-onpage-message-warn);
+}
+
+.alert-message-wrapper.success {
+    background: var(--guido-color-background-onpage-message-success);
+    border-color: var(--guido-color-border-onpage-message-success);
+    color: inherit;
+}
+
+.alert-message-wrapper.success ue-icon-component.icon {
+    color: var(--guido-color-border-onpage-message-success);
+}
+
+.alert-message-wrapper.error {
+    background: var(--guido-color-background-onpage-message-error);
+    border-color: var(--guido-color-border-onpage-message-error);
+    color: inherit;
+}
+
+.alert-message-wrapper.error ue-icon-component.icon {
+    color: var(--guido-color-border-onpage-message-error);
+}
+
 .alert-message-wrapper ue-button {
     padding: 0;
 }
@@ -35,5 +65,5 @@ const n = `.alert-message-wrapper {
 }
 `;
 export {
-  n as default
+  r as default
 };

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

@@ -60,8 +60,28 @@ const o = `.control-shadow-wrapper:has(.button) {
     color: var(--guido-color-primary-500);
 }
 
-.flat-white > .button:hover:not(:disabled,.disabled) {
-    color: var(--guido-color-primary-500);
+.primary > .button {
+    border: none;
+    background-color: var(--guido-color-neutral-200);
+    color: var(--guido-color-neutral-800);
+}
+
+.primary > .button .icon-button {
+    color: var(--guido-color-neutral-800);
+}
+
+.primary > .button:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-neutral-100);
+}
+
+.danger > .button {
+    background-color: var(--guido-color-danger-500);
+    color: var(--guido-color-white);
+    border: none;
+}
+
+.danger > .button:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-danger-300);
 }
 
 ue-check-button.checked:not(.flat-white) input:checked + label {
@@ -100,6 +120,16 @@ ue-color {
 ue-color .base-input {
     width: 100%;
 }
+
+ue-select-text-input .select-text-input-toggle {
+    top: 0;
+    right: 0;
+}
+
+ue-select-text-input .select-text-input-toggle .button {
+    justify-content: center;
+    background-color: transparent !important;
+}
 `;
 export {
   o as default

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

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

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

@@ -0,0 +1,68 @@
+const n = `ue-popup {
+    -webkit-backdrop-filter: unset;
+    backdrop-filter: unset;
+    background-color: rgba(44, 53, 70, 0.5);
+}
+
+ue-popup .popup-wrapper {
+    max-width: 400px;
+    border: 1px solid var(--guido-color-neutral-200);
+    box-shadow: none;
+    background: var(--guido-color-white);
+    font-size: 15px;
+    line-height: 24px;
+}
+
+ue-popup .popup-title {
+    padding: 32px 56px 0 32px;
+    line-height: 24px;
+    font-size: 20px;
+    font-weight: 400;
+    border-bottom: none;
+}
+
+ue-popup .confirmation .confirmation-wrapper {
+    padding: 32px;
+    gap: 16px;
+}
+
+ue-popup .confirmation .confirmation-actions {
+    flex-direction: row-reverse;
+    justify-content: space-between;
+}
+
+ue-popup .danger > .button {
+    font-size: 15px;
+    padding: 8px 16px;
+}
+
+ue-popup .e2e-cancel {
+    margin-left: unset;
+}
+
+ue-popup .e2e-cancel .button {
+    background-color: transparent;
+    border: none;
+    padding: 8px 0;
+    font-size: 15px;
+}
+
+ue-popup .e2e-cancel .button:hover:not(:disabled,.disabled) {
+    text-decoration: underline;
+    background-color: transparent;
+}
+
+ue-popup .popup-close {
+    top: 32px;
+    right: 32px;
+}
+
+ue-popup .popup-close .button {
+    padding: 0;
+    min-width: unset;
+    min-height: unset;
+}
+`;
+export {
+  n as default
+};

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

@@ -2,6 +2,10 @@ const n = `ue-wide-panel {
     width: 425px;
 }
 
+ue-main-editor-container[panel-position=SETTINGS_BLOCKS] ue-wide-panel {
+    right: calc(100% - calc(var(--ue-spacing-step, 5px) * 3) - 425px);
+}
+
 ue-main-tabs-panel-component .fixed-panel-header {
     display: none;
 }
@@ -17,7 +21,7 @@ ue-description a {
 }
 
 .stacked-panel {
-    overflow: scroll;
+    overflow: auto;
 }
 
 .stacked-panel-title {

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

@@ -12,6 +12,12 @@ const n = `.esd-x,
 .ue-preview-control-wrapper ue-icon-component:not([disabled=true]):not(.stripo-static-icon):hover {
     background: none;
 }
+
+.ue-email-wrapper-rounded,
+.ue-email-wrapper-rounded-top {
+    border-radius: 0;
+    box-shadow: none;
+}
 `;
 export {
   n as default

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

@@ -12,10 +12,20 @@ const o = `:host {
     --guido-color-neutral-800: #222938;
     --guido-color-neutral-200: #DCDFE6;
     --guido-color-neutral-100: #EFF2F4;
+    --guido-color-danger-300: #e84342;
     --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;
+    --guido-color-background-onpage-message-warn: #FCEFE5;
+    --guido-color-border-onpage-message-warn: #D37400;
+    --guido-color-background-onpage-message-success: #E9F9EB;
+    --guido-color-border-onpage-message-success: #128745;
+    --guido-color-background-onpage-message-error: #FCECEC;
+    --guido-color-border-onpage-message-error: var(--guido-color-danger-500);
+    --guido-color-background-toaster-success: #128745;
+    --guido-color-background-toaster-error: var(--guido-color-danger-500);
+    --guido-color-background-toaster-warn: #D37400;
 }
 `;
 export {

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

@@ -8,11 +8,19 @@ export declare const useDynamicContentStore: import("pinia").StoreDefinition<"dy
             value: string;
             text: string;
             fallback?: string | undefined;
+            format?: {
+                key: string;
+                value: string;
+            } | undefined;
         };
         selectedDynamicContentList: {
             value: string;
             text: string;
             fallback?: string | undefined;
+            format?: {
+                key: string;
+                value: string;
+            } | undefined;
         }[];
     } & import("pinia").PiniaCustomStateProperties<{
         selectedDynamicContent: DynamicContent;
@@ -21,6 +29,10 @@ export declare const useDynamicContentStore: import("pinia").StoreDefinition<"dy
         text: string;
         value: string;
         fallback: string | undefined;
+        format: {
+            key: string;
+            value: string;
+        } | undefined;
     }[];
 }, {
     setSelectedDynamicContent(dynamicContent: DynamicContent): void;

package/dist/stores/dynamic-content.js

@@ -6,15 +6,16 @@ const s = a("dynamicContent", {
     selectedDynamicContentList: []
   }),
   actions: {
-    setSelectedDynamicContent(e) {
-      this.selectedDynamicContent = e, this.selectedDynamicContentList.push(e);
+    setSelectedDynamicContent(t) {
+      this.selectedDynamicContent = t, this.selectedDynamicContentList.push(t);
     }
   },
   getters: {
-    getSelectedDynamicContentList: (e) => n(e.selectedDynamicContentList).map((t) => ({
-      text: t.text,
-      value: t.value,
-      fallback: t.fallback
+    getSelectedDynamicContentList: (t) => n(t.selectedDynamicContentList).map((e) => ({
+      text: e.text,
+      value: e.value,
+      fallback: e.fallback,
+      format: e.format
     })) || []
   }
 });

package/dist/stores/recommendation.d.ts

@@ -0,0 +1,10 @@
+type RecommendationConfig = {
+    filters: {
+        value: string;
+    }[];
+};
+interface StoreState {
+    recommendationConfigs: RecommendationConfig[];
+}
+export declare const useRecommendationStore: import("pinia").StoreDefinition<"recommendation", StoreState, {}, {}>;
+export {};

package/dist/stores/recommendation.js

@@ -0,0 +1,9 @@
+import { defineStore as e } from "pinia";
+const t = () => ({
+  recommendationConfigs: []
+}), n = e("recommendation", {
+  state: () => t()
+});
+export {
+  n as useRecommendationStore
+};

package/dist/stores/unsubscribe.d.ts

@@ -0,0 +1,8 @@
+type UnsubscribePage = {
+    type: number;
+};
+interface StoreState {
+    selectedUnsubscribePages: UnsubscribePage[];
+}
+export declare const useUnsubscribeStore: import("pinia").StoreDefinition<"unsubscribe", StoreState, {}, {}>;
+export {};

package/dist/stores/unsubscribe.js

@@ -0,0 +1,9 @@
+import { defineStore as e } from "pinia";
+const t = () => ({
+  selectedUnsubscribePages: []
+}), r = e("unsubscribe", {
+  state: () => t()
+});
+export {
+  r as useUnsubscribeStore
+};

package/dist/utils/genericUtil.d.ts

@@ -1,3 +1,8 @@
 import type { DynamicContent, MergeTag } from '@@/Types/generic';
 export declare const dynamicContentToMergeTags: (dynamicContentList: DynamicContent[]) => MergeTag[];
 export declare const getCsrfToken: () => string;
+/**
+ * URL Parameter utilities
+ */
+export declare const getUrlParams: () => URLSearchParams;
+export declare const getUrlParam: (paramName: string, defaultValue?: string) => string;

package/dist/utils/genericUtil.js

@@ -1,11 +1,14 @@
-const l = (e) => e.map((a) => ({
+const e = (l) => l.map((a) => a.format ? {
+  label: `${a.text} | ${a.format.key}=${a.format.value}`,
+  value: `{{${a.value}|${a.format.key}=${a.format.value}}}`
+} : {
   label: a.fallback ? `${a.text} | ${a.fallback}` : a.text,
   value: a.fallback ? `{{${a.value}|${a.fallback}}}` : `{{${a.value}}}`
-})), t = () => {
-  var e;
-  return ((e = document.head.querySelector('meta[name="csrf-token"]')) == null ? void 0 : e.getAttribute("content")) ?? "";
+}), r = () => {
+  var l;
+  return ((l = document.head.querySelector('meta[name="csrf-token"]')) == null ? void 0 : l.getAttribute("content")) ?? "";
 };
 export {
-  l as dynamicContentToMergeTags,
-  t as getCsrfToken
+  e as dynamicContentToMergeTags,
+  r as getCsrfToken
 };

package/dist/utils/templatePreparation.js

@@ -1,21 +1,28 @@
-import { useActionsApi as c } from "../composables/useActionsApi.js";
-import { useDynamicContentStore as l } from "../stores/dynamic-content.js";
-const y = () => {
-  const t = l(), { getCompiledEmail: e, getTemplateData: a } = c();
+import { useActionsApi as g } from "../composables/useActionsApi.js";
+import { useHtmlCompiler as S } from "../composables/useHtmlCompiler.js";
+import { useDynamicContentStore as f } from "../stores/dynamic-content.js";
+const H = () => {
+  const t = f(), { getCompiledEmail: i, getTemplateData: o } = g(), { compileHtml: n } = S();
   return {
     prepareTemplateDetails: async () => {
-      const { html: n, ampHtml: s = "", ampErrors: o = [] } = await e({
+      const { html: a, ampHtml: s = "", ampErrors: m = [] } = await i({
         minimize: !0,
         resetDataSavedFlag: !1
-      }), { html: m, css: i, syncModulesIds: r = [] } = await a();
-      return {
-        dynamicContentList: t.getSelectedDynamicContentList,
-        compiledHtml: n,
-        rawHtml: m,
-        css: i,
+      }), { html: r, css: c, syncModulesIds: l = [] } = await o(), { compiledHtml: p, stats: e, appliedRules: d } = n(a), u = t.getSelectedDynamicContentList;
+      return console.debug("HTML Compilation Stats:", {
+        originalSize: e.originalSize,
+        compiledSize: e.compiledSize,
+        reduction: `${e.reductionPercentage.toFixed(2)}%`,
+        appliedRules: d,
+        executionTime: `${e.executionTime.toFixed(2)}ms`
+      }), {
+        dynamicContentList: u,
+        compiledHtml: p,
+        rawHtml: r,
+        css: c,
         ampHtml: s,
-        ampErrors: o,
-        modules: r,
+        ampErrors: m,
+        modules: l,
         recommendation: {
           campaignUrls: {},
           configs: {}
@@ -29,5 +36,5 @@ const y = () => {
   };
 };
 export {
-  y as useTemplatePreparation
+  H as useTemplatePreparation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.2-beta.86f7e79",
+  "version": "1.0.2-beta.91efff4",
   "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",
@@ -31,7 +31,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@stripoinc/ui-editor-extensions": "1.0.6",
+    "@stripoinc/ui-editor-extensions": "2.0.2",
     "@useinsider/design-system-vue": "0.14.8",
     "@vueuse/core": "11.3.0",
     "lodash-es": "4.17.21",

package/dist/_virtual/AddCustomFont.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/AiAssistantValueType.js

@@ -1,4 +0,0 @@
-var s = {};
-export {
-  s as __exports
-};

package/dist/_virtual/BackgroundColorBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/BackgroundImageBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/Block.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/BlockAttributes.js

@@ -1,4 +0,0 @@
-var t = {};
-export {
-  t as __exports
-};

package/dist/_virtual/BlockCompositionType.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/BlockPaddingsBuiltInControl.js

@@ -1,4 +0,0 @@
-var o = {};
-export {
-  o as __exports
-};

package/dist/_virtual/BlockRenderer.js

@@ -1,4 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};

package/dist/_virtual/BlockType.js

@@ -1,4 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};

package/dist/_virtual/BlocksPanel.js

@@ -1,4 +0,0 @@
-var a = {};
-export {
-  a as __exports
-};