@useinsider/guido 3.1.1 → 3.2.0-beta.14f0290

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

@@ -1,11 +1,16 @@
-const t = `.amp-input-list,
+const n = `.amp-input-list,
 .button,
 .base-input,
 ue-stripe-thumb,
 .ue-stripe-thumb {
     transition: all .5s ease;
 }
+
+:host {
+    height: 100% !important;
+    min-height: 0 !important;
+}
 `;
 export {
-  t as default
+  n as default
 };

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

@@ -1,4 +1,4 @@
-const o = `.control-shadow-wrapper:has(.button) {
+const n = `.control-shadow-wrapper:has(.button) {
     border-radius: 0;
     box-shadow: none;
     background-color: transparent;
@@ -99,18 +99,12 @@ ue-check-button.checked:not(.flat-white) input:checked + label .icon-button {
     color: var(--guido-color-primary-500);
 }
 
-ue-select.full-width .button {
-    border: none !important;
-    background-color: var(--guido-color-neutral-200) !important;
-    color: var(--guido-color-neutral-800) !important;
-}
-
 ue-select.full-width .button .icon-button {
     color: var(--guido-color-gray-600) !important;
 }
 
 ue-select.full-width .button:hover:not(:disabled,.disabled) {
-    background-color: var(--guido-color-neutral-100) !important;
+    background-color: var(--guido-color-gray-0) !important;
 }
 
 ue-color {
@@ -130,7 +124,20 @@ ue-select-text-input .select-text-input-toggle .button {
     justify-content: center;
     background-color: transparent !important;
 }
+
+
+.control-shadow-wrapper,
+ue-button:not(.no-shadow,.flat-white),
+ue-toggle:not(.no-shadow,.flat-white),
+:is(ue-popover-toggler,ue-toggle-icon-picker,ue-emoji-toggle),
+.button-group,
+ue-counter:not(.no-shadow),
+:is(ue-select,ue-mergetags,ue-font-family-select):not(.no-shadow),
+ue-check-button:not(.no-shadow,.flat-white) {
+    background: none;
+    padding: 0;
+}
 `;
 export {
-  o as default
+  n as default
 };

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

@@ -4,6 +4,10 @@ const n = `ue-loader-component.full-height {
     z-index: 9;
     backdrop-filter: blur(2px);
 }
+
+ue-loader-component .service-element.loader {
+    box-shadow: var(--guido-color-primary-500) 1px 1px 0 0 !important;
+}
 `;
 export {
   n as default

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

@@ -28,6 +28,58 @@ ue-stripe-thumb:hover:not(.disabled),
     border-color: var(--guido-color-primary-500);
 }
 
+/* Module search — initial */
+.module-search-container {
+    background-color: var(--guido-color-gray-0);
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+}
+
+.module-search-container .service-element {
+    background-color: unset;
+}
+
+.module-filter-toggle {
+    top: -1px !important;
+    right: -1px !important;
+}
+
+.module-filter-toggle > .button,
+.module-search-container:hover .module-filter-toggle > .button {
+    border: none;
+    background: transparent;
+}
+
+/* Module search — hover */
+.module-search-container:has(.module-search-chip-input:hover) {
+    border-color: var(--guido-color-primary-500);
+}
+
+.module-search-container .module-search-chip-input .service-element:hover {
+    background-color: var(--guido-color-gray-0);
+    border-radius: 4px;
+}
+
+.module-search-container .module-filter-toggle:hover > .button {
+    background-color: var(--guido-color-gray-1);
+}
+
+/* Module search — selected (.on) */
+.module-search-container:has(.module-search-chip-input.on),
+.module-search-container:has(.module-search-chip-input.on):hover {
+    border-color: var(--guido-color-primary-500);
+    box-shadow: 0 0 0 3px var(--guido-color-primary-200) !important;
+}
+
+.module-search-container .module-search-chip-input.on .input-section {
+    background-color: unset;
+    box-shadow: unset;
+}
+
+.module-categories-list .menu-item {
+    padding: 8px 20px !important;
+}
+
 .modules-layout-wrapper {
     padding: 0 16px 16px;
     grid-row-gap: 16px;

package/dist/stores/preview.js

@@ -1,13 +1,14 @@
 import { defineStore as e } from "pinia";
-const s = () => ({
+const i = () => ({
   emailFormat: "html",
   ampHtml: "",
   ampErrors: [],
   templateHtml: "",
   isLoaded: !1,
-  isAMPErrorModalVisible: !1
+  isAMPErrorModalVisible: !1,
+  emailSizeKB: 0
 }), a = e("guidoPreview", {
-  state: () => s(),
+  state: () => i(),
   getters: {
     isAMPModeEnabled: (t) => t.emailFormat === "AMP",
     previewHtml() {

package/dist/utils/genericUtil.js

@@ -1,25 +1,47 @@
-const f = (t) => {
-  const n = t.value.match(/\{\{([^}]+)\}\}/)[1].split("|").map((l) => l.trim()), [r] = n, e = {
-    text: t.label,
-    value: r || ""
+const s = (e) => {
+  const a = e.value.match(/\{\{([^}]+)\}\}/)[1].split("|").map((l) => l.trim()), [n] = a, c = {
+    text: e.label,
+    value: n || ""
   };
-  if (n.length >= 2) {
-    const [, l, o] = n, c = l.includes("=") ? { key: l.split("=")[0].trim(), value: l.split("=")[1].trim() } : null;
-    c ? e.format = c : o || (e.fallback = l), o && (e.fallback = o);
+  if (a.length >= 2) {
+    const [, l, r] = a;
+    if (l.startsWith("default:")) {
+      let t = l.slice(8).trim();
+      t.startsWith('"') && t.endsWith('"') && (t = t.slice(1, -1)), c.fallback = t;
+    } else {
+      const t = l.includes("=") ? { key: l.split("=")[0].trim(), value: l.split("=")[1].trim() } : null;
+      t ? c.format = t : r || (c.fallback = l), r && (c.fallback = r);
+    }
   }
-  return e;
-}, s = (t) => t.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}}}`
-}), u = () => {
-  var t;
-  return ((t = document.head.querySelector('meta[name="csrf-token"]')) == null ? void 0 : t.getAttribute("content")) ?? "";
+  return c;
+}, u = (e, f = !1) => e.map((a) => {
+  if (a.format)
+    return {
+      label: `${a.text} | ${a.format.key}=${a.format.value}`,
+      value: `{{${a.value}|${a.format.key}=${a.format.value}}}`
+    };
+  if (f) {
+    if (!a.fallback)
+      return {
+        label: a.text,
+        value: `{{ ${a.value} }}`
+      };
+    const c = !Number.isNaN(Number(a.fallback)) && a.fallback.trim() !== "" ? a.fallback : `"${a.fallback}"`;
+    return {
+      label: `${a.text} | ${a.fallback}`,
+      value: `{{ ${a.value} | default: ${c} }}`
+    };
+  }
+  return {
+    label: a.fallback ? `${a.text} | ${a.fallback}` : a.text,
+    value: a.fallback ? `{{${a.value}|${a.fallback}}}` : `{{${a.value}}}`
+  };
+}), o = () => {
+  var e;
+  return ((e = document.head.querySelector('meta[name="csrf-token"]')) == null ? void 0 : e.getAttribute("content")) ?? "";
 };
 export {
-  s as dynamicContentToMergeTags,
-  u as getCsrfToken,
-  f as mergeTagToDynamicContent
+  u as dynamicContentToMergeTags,
+  o as getCsrfToken,
+  s as mergeTagToDynamicContent
 };

package/dist/utils/htmlCompiler.js

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

package/dist/utils/templatePreparation.js

@@ -1,42 +1,53 @@
-import { useActionsApi as f } from "../composables/useActionsApi.js";
-import { useHtmlCompiler as C } from "../composables/useHtmlCompiler.js";
-import { useRecommendationExtensionStore as T } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { useDynamicContentStore as x } from "../stores/dynamic-content.js";
-import { useUnsubscribeStore as y } from "../stores/unsubscribe.js";
-const E = () => {
-  const o = x(), t = y(), { getCompiledEmail: i, getTemplateData: n, editorSave: s } = f(), { compileHtml: m } = C();
+import { useActionsApi as T } from "../composables/useActionsApi.js";
+import { useHtmlCompiler as P } from "../composables/useHtmlCompiler.js";
+import { useRecommendationExtensionStore as A } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import { DATA_ATTRIBUTES as l } from "../extensions/Blocks/Unsubscribe/utils/constants.js";
+import { parsePageList as h } from "../extensions/Blocks/Unsubscribe/utils/utils.js";
+import { useDynamicContentStore as C } from "../stores/dynamic-content.js";
+import { useUnsubscribeStore as D } from "../stores/unsubscribe.js";
+function x(i, e) {
+  const r = new DOMParser().parseFromString(i, "text/html").querySelectorAll(`[${l.PAGE_LIST}]`), n = [];
+  return r.forEach((t) => {
+    const o = t.getAttribute(l.PAGE_LIST);
+    o && n.push(...h(o));
+  }), e.filter((t) => n.includes(t));
+}
+const I = () => {
+  const i = C(), e = D(), { getCompiledEmail: a, getTemplateData: m } = T(), { compileHtml: r } = P();
   return {
     prepareTemplateDetails: async () => {
-      const { html: a, ampHtml: r = "", ampErrors: c = [] } = await i({
+      const { html: t, ampHtml: o = "", ampErrors: p = [] } = await a({
         minimize: !0,
         resetDataSavedFlag: !1
-      }), { html: l, css: p, syncModulesIds: u = [] } = await n(), { compiledHtml: d, stats: e, appliedRules: S } = m(a), g = o.getSelectedDynamicContentList, b = T();
-      return s(), console.debug("HTML Compilation Stats:", {
-        originalSize: e.originalSize,
-        compiledSize: e.compiledSize,
-        reduction: `${e.reductionPercentage.toFixed(2)}%`,
+      }), { html: u, css: d, syncModulesIds: g = [] } = await m();
+      e.selectedUnsubscribePages.length && await e.fetchTemplates();
+      const { compiledHtml: c, stats: s, appliedRules: S } = r(t), b = i.getSelectedDynamicContentList, f = A();
+      return console.debug("HTML Compilation Stats:", {
+        originalSize: s.originalSize,
+        compiledSize: s.compiledSize,
+        reduction: `${s.reductionPercentage.toFixed(2)}%`,
         appliedRules: S,
-        executionTime: `${e.executionTime.toFixed(2)}ms`
+        executionTime: `${s.executionTime.toFixed(2)}ms`
       }), {
-        dynamicContentList: g,
-        compiledHtml: d,
-        rawHtml: l,
-        css: p,
-        ampHtml: r,
-        ampErrors: c,
-        modules: u.map(Number),
+        dynamicContentList: b,
+        compiledHtml: c,
+        rawHtml: u,
+        css: d,
+        ampHtml: o,
+        ampErrors: p,
+        modules: g.map(Number),
         recommendation: {
-          campaignUrls: b.recommendationCampaignUrls,
+          campaignUrls: f.recommendationCampaignUrls,
           configs: {}
         },
         unsubscribe: {
-          status: t.unsubscribePagesStatus,
-          config: t.selectedUnsubscribePages
+          status: e.unsubscribePagesStatus,
+          config: x(c, e.selectedUnsubscribePages)
         }
       };
     }
   };
 };
 export {
-  E as useTemplatePreparation
+  I as useTemplatePreparation
 };

package/dist/utils/tooltipUtils.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.1.1",
+  "version": "3.2.0-beta.14f0290",
   "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",
@@ -32,8 +32,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@stripoinc/ui-editor-extensions": "3.5.0",
-    "@useinsider/design-system-vue": "0.14.28",
+    "@stripoinc/ui-editor-extensions": "3.8.0",
+    "@useinsider/design-system-vue": "1.1.0-beta.73ec2fa",
     "@vueuse/core": "11.3.0",
     "lodash-es": "4.17.21",
     "pinia": "2.3.1",
@@ -86,7 +86,7 @@
   },
   "guido": {
     "stripo": {
-      "version": "2.54.0"
+      "version": "2.62.0"
     }
   }
 }