@useinsider/guido 3.18.2-beta.ec25841 → 3.18.2-beta.eedafd2

package/dist/components/organisms/save-as-template/SaveAsTemplateDrawer.vue2.js

@@ -1,64 +1,64 @@
-import { defineComponent as A, ref as c, computed as b, toRef as h, nextTick as C } from "vue";
-import N from "../../wrappers/WpDrawer.vue.js";
-import { useTranslations as O } from "../../../composables/useTranslations.js";
+import { defineComponent as _, ref as c, computed as h, watch as C, toRef as N, nextTick as O } from "vue";
+import b from "../../wrappers/WpDrawer.vue.js";
+import { useTranslations as D } from "../../../composables/useTranslations.js";
 import { useTemplateNameValidator as x } from "../../../composables/validators/saveAsTemplate.js";
 import { useTemplateLibraryApi as B } from "../../../services/templateLibraryApi.js";
-import { useEditorStore as D } from "../../../stores/editor.js";
-import { useSaveAsTemplateStore as k } from "../../../stores/save-as-template.js";
-import { InMultiSelect as I, InBasicTextInput as M } from "@useinsider/design-system-vue";
-import { useDebounceFn as V } from "../../../node_modules/@vueuse/shared/index.js";
-const H = /* @__PURE__ */ A({
+import { useEditorStore as k } from "../../../stores/editor.js";
+import { useSaveAsTemplateStore as I } from "../../../stores/save-as-template.js";
+import { InMultiSelect as M, InBasicTextInput as V } from "@useinsider/design-system-vue";
+import { useDebounceFn as E } from "../../../node_modules/@vueuse/shared/index.js";
+const J = /* @__PURE__ */ _({
   __name: "SaveAsTemplateDrawer",
-  setup(E) {
-    const o = O(), n = D(), t = k(), { createTemplate: m } = B(), a = c(!1), r = c(!1), l = c(""), f = b(() => ({
+  setup(R) {
+    const s = D(), o = k(), t = I(), { createTemplate: m } = B(), a = c(!1), n = c(!1), r = c(""), f = h(() => ({
       primaryButton: {
         styling: "solid",
         type: "primary",
-        labelText: o(a.value ? "newsletter.saving" : "products.save"),
+        labelText: s(a.value ? "newsletter.saving" : "products.save"),
         loadingStatus: a.value,
         disabledStatus: t.skeletonStatus
       },
       cancelOrBackButton: {
         styling: "ghost",
         type: "secondary",
-        labelText: o("products.cancel"),
+        labelText: s("products.cancel"),
         disabledStatus: a.value
       }
-    })), u = () => {
-      l.value = "", n.isSaveAsTemplateDrawerOpen = !1;
-    }, i = async () => {
-      const e = h(t, "templateName"), { success: s, errorMessage: _ } = await x(e).validate();
-      return l.value = _, s;
-    }, v = V(async (e) => {
-      t.templateName = e, await i();
-    }, 500), g = async (e) => {
-      r.value = !0, await t.addCategory(e), r.value = !1;
-    }, y = (e) => {
+    })), p = () => {
+      r.value = "", o.isSaveAsTemplateDrawerOpen = !1;
+    }, l = async () => {
+      const e = N(t, "templateName"), { success: i, errorMessage: A } = await x(e).validate();
+      return r.value = A, i;
+    }, v = E(async (e) => {
+      t.templateName = e, await l();
+    }, 500), S = async (e) => {
+      n.value = !0, await t.addCategory(e), n.value = !1;
+    }, T = (e) => {
       t.selectedCategories = e;
-    }, S = (e) => {
+    }, g = (e) => {
       e && (t.selectedCategories = e);
-    }, T = () => {
+    }, y = () => {
       t.selectedCategories = [];
     }, w = async () => {
-      if (a.value = !0, !await i()) {
+      if (a.value = !0, !await l()) {
         a.value = !1;
         return;
       }
-      const s = await m();
-      a.value = !1, s && u();
-    }, p = () => {
-      C(() => {
+      const i = await m();
+      a.value = !1, i && p();
+    }, u = () => {
+      O(() => {
         const e = document.querySelector("input#guido__template-name-input");
         e == null || e.focus();
       });
     }, d = async () => {
-      t.$reset(), await t.fetchCategories(), t.skeletonStatus = !1, p();
+      t.$reset(), await t.fetchCategories(), t.skeletonStatus = !1, u();
     };
-    return n.$subscribe((e, { isSaveAsTemplateDrawerOpen: s }) => {
-      s && d();
-    }), { __sfc: !0, trans: o, editorStore: n, saveAsTemplateStore: t, createTemplate: m, isSaving: a, isAddingOption: r, templateNameError: l, footerButtonGroupOptions: f, closeModal: u, validateTemplateName: i, handleTemplateName: v, handleAddOption: g, handleCategoryChange: y, handleSelectAllOptions: S, handleResetAllOptions: T, saveTemplate: w, focusToInput: p, initializeDrawer: d, WpDrawer: N, InBasicTextInput: M, InMultiSelect: I };
+    return C(() => o.isSaveAsTemplateDrawerOpen, (e) => {
+      e && d();
+    }), { __sfc: !0, trans: s, editorStore: o, saveAsTemplateStore: t, createTemplate: m, isSaving: a, isAddingOption: n, templateNameError: r, footerButtonGroupOptions: f, closeModal: p, validateTemplateName: l, handleTemplateName: v, handleAddOption: S, handleCategoryChange: T, handleSelectAllOptions: g, handleResetAllOptions: y, saveTemplate: w, focusToInput: u, initializeDrawer: d, WpDrawer: b, InBasicTextInput: V, InMultiSelect: M };
   }
 });
 export {
-  H as default
+  J as default
 };

package/dist/components/organisms/validation/ValidationErrorDrawer.vue.js

@@ -0,0 +1,20 @@
+import a from "./ValidationErrorDrawer.vue2.js";
+/* empty css                           */
+import s from "../../../_virtual/_plugin-vue2_normalizer.js";
+var i = function() {
+  var r = this, o = r._self._c, t = r._self._setupProxy;
+  return o(t.WpDrawer, { attrs: { id: "guido__validation-error-drawer", size: "small", "footer-button-group-options": t.footerButtonGroupOptions, status: t.store.isDrawerOpen, "title-text": t.titleText }, on: { onCloseEvent: t.handleClose, primaryButtonEvent: t.handleClose, secondaryButtonEvent: t.handleSaveAndContinue } }, [o("div", { staticClass: "d-f f-d-c validation-error-list" }, r._l(t.rows, function(e, n) {
+    return o("div", { key: n, staticClass: "d-f a-i-c validation-error-row" }, [o(t.InIcons, { staticClass: "validation-error-row__icon i-c-12", attrs: { name: "filled-caution-triangle" } }), o("span", { staticClass: "validation-error-row__text" }, [r._v(r._s(e))])], 1);
+  }), 0)]);
+}, l = [], _ = /* @__PURE__ */ s(
+  a,
+  i,
+  l,
+  !1,
+  null,
+  "30d2e1f9"
+);
+const p = _.exports;
+export {
+  p as default
+};

package/dist/components/organisms/validation/ValidationErrorDrawer.vue2.js

@@ -0,0 +1,48 @@
+import { defineComponent as m, ref as p, computed as a } from "vue";
+import f from "../../wrappers/WpDrawer.vue.js";
+import { useSave as S } from "../../../composables/useSave.js";
+import { useTranslations as v } from "../../../composables/useTranslations.js";
+import { useConfigStore as g } from "../../../stores/config.js";
+import { useEditorStore as y } from "../../../stores/editor.js";
+import { useSaveValidationStore as h } from "../../../stores/save-validation.js";
+import { InIcons as w } from "@useinsider/design-system-vue";
+const I = /* @__PURE__ */ m({
+  __name: "ValidationErrorDrawer",
+  setup(_) {
+    const r = v(), e = h(), n = y(), s = g(), { saveWithErrors: i } = S(), o = p(!1), l = a(() => `${r("email-editor.validation-errors")} (${e.errorCount})`), u = a(() => {
+      const t = {
+        primaryButton: {
+          styling: "solid",
+          type: "primary",
+          labelText: r("email-editor.update-design")
+        }
+      };
+      return s.allowSaveWithErrors && e.intent !== "test" && (t.secondaryButton = {
+        styling: "solid",
+        type: "subtle-primary",
+        labelText: r("email-editor.save-and-continue"),
+        loadingStatus: o.value
+      }), t;
+    }), d = a(() => e.errors.map((t) => {
+      const c = t.detail ? ` (${t.detail})` : "";
+      return `${t.message}${c}`;
+    }));
+    return { __sfc: !0, trans: r, store: e, editorStore: n, configStore: s, saveWithErrors: i, isSaving: o, titleText: l, footerButtonGroupOptions: u, rows: d, handleClose: () => {
+      e.isDrawerOpen && e.close();
+    }, handleSaveAndContinue: async () => {
+      if (!o.value) {
+        o.value = !0, n.loadingStatus = !0;
+        try {
+          await i() ? e.close() : n.loadingStatus = !1;
+        } catch (t) {
+          console.warn("Soft-save failed; keeping the drawer open.", t), n.loadingStatus = !1;
+        } finally {
+          o.value = !1;
+        }
+      }
+    }, WpDrawer: f, InIcons: w };
+  }
+});
+export {
+  I as default
+};

package/dist/components/wrappers/WpDrawer.vue.js

@@ -1,17 +1,19 @@
 import r from "./WpDrawer.vue2.js";
 import s from "../../_virtual/_plugin-vue2_normalizer.js";
 var u = function() {
-  var t = this, n = t._self._c, e = t._self._setupProxy;
-  return n(e.InDrawer, { class: t.className, attrs: { id: t.id, "footer-status": "", "close-on-outside-click": t.closeOnOutsideClick, "description-status": t.descriptionStatus, "description-text": t.descriptionText, "footer-button-group-options": t.footerButtonGroupOptions, size: t.size, status: t.status, "title-text": t.titleText }, on: { cancelOrBackButtonEvent: function(o) {
+  var t = this, o = t._self._c, e = t._self._setupProxy;
+  return o(e.InDrawer, { class: t.className, attrs: { id: t.id, "footer-status": "", "close-on-outside-click": t.closeOnOutsideClick, "description-status": t.descriptionStatus, "description-text": t.descriptionText, "footer-button-group-options": t.footerButtonGroupOptions, size: t.size, status: t.status, "title-text": t.titleText }, on: { cancelOrBackButtonEvent: function(n) {
     return e.emit("cancelOrBackButtonEvent");
-  }, onCloseEvent: function(o) {
+  }, onCloseEvent: function(n) {
     return e.emit("onCloseEvent");
-  }, primaryButtonEvent: function(o) {
+  }, primaryButtonEvent: function(n) {
     return e.emit("primaryButtonEvent");
+  }, secondaryButtonEvent: function(n) {
+    return e.emit("secondaryButtonEvent");
   } }, scopedSlots: t._u([t.$slots.headerBottomSlot ? { key: "headerBottomSlot", fn: function() {
     return [t._t("headerBottomSlot")];
   }, proxy: !0 } : null, { key: "contentSlot", fn: function() {
-    return [n("div", [t._t("default")], 2)];
+    return [o("div", [t._t("default")], 2)];
   }, proxy: !0 }], null, !0) });
 }, i = [], c = /* @__PURE__ */ s(
   r,
@@ -21,7 +23,7 @@ var u = function() {
   null,
   null
 );
-const f = c.exports;
+const p = c.exports;
 export {
-  f as default
+  p as default
 };

package/dist/components/wrappers/WpDrawer.vue2.js

@@ -13,7 +13,7 @@ const r = /* @__PURE__ */ e({
     status: { type: Boolean },
     titleText: null
   },
-  emits: ["cancelOrBackButtonEvent", "onCloseEvent", "primaryButtonEvent"],
+  emits: ["cancelOrBackButtonEvent", "onCloseEvent", "primaryButtonEvent", "secondaryButtonEvent"],
   setup(n, { emit: t }) {
     return { __sfc: !0, emit: t, InDrawer: o };
   }

package/dist/composables/useCustomInterfaceAppearance.js

@@ -1,77 +1,67 @@
-import p from "../static/assets/icons/line-change.svg.js";
-import s from "../static/assets/icons/line-delete.svg.js";
-import a from "../static/assets/icons/line-plus.svg.js";
-import f from "../static/styles/base.css.js";
-import C from "../static/styles/components/alert-message.css.js";
-import c from "../static/styles/components/amp-block.css.js";
-import l from "../static/styles/components/base-input.css.js";
-import d from "../static/styles/components/button-group.css.js";
-import u from "../static/styles/components/button.css.js";
-import h from "../static/styles/components/combobox.css.js";
-import g from "../static/styles/components/counter.css.js";
-import w from "../static/styles/components/dropdown-menu.css.js";
-import y from "../static/styles/components/loader.css.js";
-import I from "../static/styles/components/narrow-panel.css.js";
-import A from "../static/styles/components/popup.css.js";
-import b from "../static/styles/components/recommendation-strategy.css.js";
-import B from "../static/styles/components/skeleton.css.js";
-import D from "../static/styles/components/switcher.css.js";
-import $ from "../static/styles/components/tabs.css.js";
-import P from "../static/styles/components/tools.css.js";
-import R from "../static/styles/components/version-history.css.js";
-import T from "../static/styles/components/wide-panel.css.js";
+import S from "../static/assets/icons/line-change.svg.js";
+import i from "../static/assets/icons/line-delete.svg.js";
+import n from "../static/assets/icons/line-plus.svg.js";
+import p from "../static/styles/base.css.js";
+import s from "../static/styles/components/alert-message.css.js";
+import C from "../static/styles/components/amp-block.css.js";
+import a from "../static/styles/components/base-input.css.js";
+import f from "../static/styles/components/button-group.css.js";
+import c from "../static/styles/components/button.css.js";
+import u from "../static/styles/components/combobox.css.js";
+import l from "../static/styles/components/counter.css.js";
+import d from "../static/styles/components/dropdown-menu.css.js";
+import h from "../static/styles/components/loader.css.js";
+import g from "../static/styles/components/narrow-panel.css.js";
+import I from "../static/styles/components/popup.css.js";
+import w from "../static/styles/components/recommendation-strategy.css.js";
+import y from "../static/styles/components/switcher.css.js";
+import b from "../static/styles/components/tabs.css.js";
+import B from "../static/styles/components/tools.css.js";
+import $ from "../static/styles/components/version-history.css.js";
+import P from "../static/styles/components/wide-panel.css.js";
 import x from "../static/styles/variables.css.js";
-function r(S, o) {
-  return `--guido-icon-${S}: url("data:image/svg+xml,${encodeURIComponent(o.trim())}");`;
+function r(t, o) {
+  return `--guido-icon-${t}: url("data:image/svg+xml,${encodeURIComponent(o.trim())}");`;
 }
-const M = `:host {
-    ${r("line-change", p)}
-    ${r("line-delete", s)}
-    ${r("line-plus", a)}
-}`, O = [
+const A = `:host {
+    ${r("line-change", S)}
+    ${r("line-delete", i)}
+    ${r("line-plus", n)}
+}`, R = [
   x,
   // Must be on top
-  M,
-  f,
+  A,
+  p,
   // Must be on top
+  s,
   C,
+  a,
+  f,
   c,
+  u,
   l,
   d,
-  u,
   h,
   g,
-  w,
-  y,
   I,
-  A,
+  y,
+  b,
   B,
-  D,
   $,
   P,
-  R,
-  T,
-  b
+  w
   // Last: overrides button.css / wide-panel.css defaults
 ].join(`
 
-`), V = 3e4;
-let e = null;
-function W() {
-  return e || (e = new CSSStyleSheet(), e.replaceSync(O)), e;
-}
-const So = () => ({ importCss: () => {
-  const o = W(), i = Date.now() + V, m = () => {
-    var n;
-    const t = (n = document.querySelector("ui-editor")) == null ? void 0 : n.shadowRoot;
-    if (t) {
-      t.adoptedStyleSheets.includes(o) || (t.adoptedStyleSheets = [...t.adoptedStyleSheets, o]);
-      return;
-    }
-    Date.now() < i && requestAnimationFrame(m);
-  };
-  m();
+`), Y = () => ({ importCss: () => {
+  const o = new CSSStyleSheet();
+  o.replaceSync(R);
+  const e = document.querySelector("ui-editor");
+  if (!e)
+    return;
+  const m = e.shadowRoot;
+  m && (m.adoptedStyleSheets = [o]);
 } });
 export {
-  So as useCustomInterfaceAppearance
+  Y as useCustomInterfaceAppearance
 };

package/dist/composables/useHtmlCompiler.js

@@ -1,13 +1,14 @@
-import { defaultHtmlCompilerRules as R } from "../config/compiler/htmlCompilerRules.js";
-import { itemsCompilerRules as g } from "../config/compiler/itemsCompilerRules.js";
-import { liquidCompilerRules as C } from "../config/compiler/liquidCompilerRules.js";
-import { outlookCompilerRules as b } from "../config/compiler/outlookCompilerRules.js";
+import { defaultHtmlCompilerRules as d } from "../config/compiler/htmlCompilerRules.js";
+import { itemsCompilerRules as f } from "../config/compiler/itemsCompilerRules.js";
+import { liquidCompilerRules as g } from "../config/compiler/liquidCompilerRules.js";
+import { outlookCompilerRules as R } from "../config/compiler/outlookCompilerRules.js";
 import { recommendationCompilerRules as v } from "../config/compiler/recommendationCompilerRules.js";
 import { socialCompilerRules as H } from "../config/compiler/socialCompilerRules.js";
-import { unsubscribeCompilerRules as x } from "../config/compiler/unsubscribeCompilerRules.js";
-import { createHtmlCompiler as s } from "../utils/htmlCompiler.js";
-import { useConfig as k } from "./useConfig.js";
-const y = /* @__PURE__ */ new Set([
+import { unsubscribeCompilerRules as b } from "../config/compiler/unsubscribeCompilerRules.js";
+import { createHtmlCompiler as n } from "../utils/htmlCompiler.js";
+import { computed as p } from "vue";
+import { useConfig as C } from "./useConfig.js";
+const x = /* @__PURE__ */ new Set([
   // URL/tag encoding fixes — keep merge-tag and placeholder integrity intact.
   "fix-url-encoding-start",
   "fix-url-encoding-end",
@@ -30,24 +31,34 @@ const y = /* @__PURE__ */ new Set([
   // Editor-only attribute strip — AMP4EMAIL has no `contenteditable`, so leaving
   // it in narrows/breaks rendering. Pure attribute removal, emits nothing.
   "remove-contenteditable"
-]), M = () => {
-  var i, m, r;
-  const { compiler: o, isFeatureEnabled: n, partner: a } = k(), p = ((i = o.value) == null ? void 0 : i.customRules) || [], l = [
-    ...!!((m = o.value) != null && m.ignoreDefaultRules) ? [] : R,
-    ...v,
-    ...x,
-    ...g,
-    ...b,
-    ...H,
-    ...n("liquidSyntax") ? C : [],
-    ...p.map((e, f) => ({
-      ...e,
-      priority: e.priority + 1e3 + f
-      // Ensure additional rules run after default rules
-    }))
-  ], u = s(l), c = l.filter((e) => y.has(e.id)), d = s(c), t = (r = a.value) == null ? void 0 : r.fallbackFont;
-  return { compileHtml: (e) => u.compile(e, void 0, t), compileAmpHtml: (e) => d.compile(e, void 0, t) };
+]), I = () => {
+  const { compiler: i, isFeatureEnabled: u, partner: a } = C(), c = p(() => {
+    var m, l;
+    const e = ((m = i.value) == null ? void 0 : m.customRules) || [];
+    return [
+      ...!!((l = i.value) != null && l.ignoreDefaultRules) ? [] : d,
+      ...v,
+      ...b,
+      ...f,
+      ...R,
+      ...H,
+      ...u("liquidSyntax") ? g : [],
+      ...e.map((t, o) => ({
+        ...t,
+        priority: t.priority + 1e3 + o
+        // Ensure additional rules run after default rules
+      }))
+    ];
+  }), r = p(() => {
+    var t;
+    const e = c.value, s = n(e), m = n(e.filter((o) => x.has(o.id))), l = (t = a.value) == null ? void 0 : t.fallbackFont;
+    return {
+      compileHtml: (o) => s.compile(o, void 0, l),
+      compileAmpHtml: (o) => m.compile(o, void 0, l)
+    };
+  });
+  return { compileHtml: (e) => r.value.compileHtml(e), compileAmpHtml: (e) => r.value.compileAmpHtml(e) };
 };
 export {
-  M as useHtmlCompiler
+  I as useHtmlCompiler
 };