@useinsider/guido 3.20.1-beta.da6efd5 → 3.20.1-beta.dfc8426

package/dist/components/organisms/display-conditions/DisplayConditionCreateDrawer.vue.js

@@ -22,7 +22,7 @@ var n = function() {
   s,
   !1,
   null,
-  "23accd91"
+  "a4b2ccb9"
 );
 const f = d.exports;
 export {

package/dist/components/organisms/display-conditions/DisplayConditionCreateDrawer.vue2.js

@@ -10,9 +10,9 @@ import E from "./CodeEditorField.vue.js";
 const J = /* @__PURE__ */ D({
   __name: "DisplayConditionCreateDrawer",
   setup(Y) {
-    const i = "email-editor.display-conditions", n = L(), c = k(), { validate: p, notifyInvalid: l, createInline: f, createAndSave: m, cancel: y } = T(), d = () => ({ name: "", description: "", codeBefore: "", codeAfter: "" }), e = $(d()), o = s({}), a = s(!1), v = s(), _ = s();
-    C(() => c.isCreateOpen, (r) => {
-      if (!r)
+    const r = "email-editor.display-conditions", i = L(), c = k(), { validate: p, notifyInvalid: l, createInline: f, createAndSave: m, cancel: y } = T(), d = () => ({ name: "", description: "", codeBefore: "", codeAfter: "" }), e = $(d()), o = s({}), a = s(!1), v = s(), _ = s();
+    C(() => c.isCreateOpen, (n) => {
+      if (!n)
         return;
       const { editing: t } = c;
       Object.assign(e, t ? {
@@ -22,39 +22,39 @@ const J = /* @__PURE__ */ D({
         codeAfter: t.afterScript
       } : d()), o.value = {}, a.value = !1;
     }, { immediate: !0 });
-    const g = u(() => n(`${i}.create-description`, {
-      academyLink: `<a href="${x.EMAIL_DISPLAY_CONDITIONS}" class="guido-display-condition-academy" target="_blank">${n(`${i}.academy`)}</a>`
+    const g = u(() => i(`${r}.create-description`, {
+      academyLink: `<a href="${x.EMAIL_DISPLAY_CONDITIONS}" class="guido-display-condition-academy" target="_blank">${i(`${r}.academy`)}</a>`
     })), S = u(() => ({
       cancelOrBackButton: {
         styling: "ghost",
         type: "secondary",
-        labelText: n(`${i}.cancel`),
+        labelText: i(`${r}.cancel`),
         disabledStatus: a.value
       },
       secondaryButton: {
         styling: "solid",
         type: "subtle-primary",
-        labelText: n(`${i}.create-and-save`),
+        labelText: i(`${r}.create-and-save`),
         loadingStatus: a.value
       },
       primaryButton: {
         styling: "solid",
         type: "primary",
-        labelText: n(`${i}.create`),
+        labelText: i(`${r}.create`),
         disabledStatus: a.value
       }
-    })), B = (r, t) => {
-      t !== e[r] && (e[r] = t, o.value[r] && (o.value = { ...o.value, [r]: void 0 }));
-    }, A = u(() => `${n(`${i}.condition-description`)} <span class="guido-display-condition-create__optional">(${n(`${i}.optional`)})</span>`);
-    return { __sfc: !0, KEY: i, trans: n, store: c, validate: p, notifyInvalid: l, createInline: f, createAndSave: m, cancel: y, emptyDraft: d, draft: e, errors: o, isSaving: a, codeBeforeRef: v, codeAfterRef: _, descriptionText: g, footerButtonGroupOptions: S, updateField: B, descriptionLabel: A, submit: async (r) => {
+    })), B = (n, t) => {
+      t !== e[n] && (e[n] = t, o.value[n] && (o.value = { ...o.value, [n]: void 0 }));
+    }, A = u(() => `${i(`${r}.condition-description`)} <span class="guido-display-condition-create__optional">(${i(`${r}.optional`)})</span>`);
+    return { __sfc: !0, KEY: r, trans: i, store: c, validate: p, notifyInvalid: l, createInline: f, createAndSave: m, cancel: y, emptyDraft: d, draft: e, errors: o, isSaving: a, codeBeforeRef: v, codeAfterRef: _, descriptionText: g, footerButtonGroupOptions: S, updateField: B, descriptionLabel: A, submit: async (n) => {
       var I, b;
       if (a.value)
         return;
-      if (e.codeBefore = ((I = v.value) == null ? void 0 : I.read()) ?? e.codeBefore, e.codeAfter = ((b = _.value) == null ? void 0 : b.read()) ?? e.codeAfter, o.value = p(e, r), Object.keys(o.value).length) {
+      if (e.codeBefore = ((I = v.value) == null ? void 0 : I.read()) ?? e.codeBefore, e.codeAfter = ((b = _.value) == null ? void 0 : b.read()) ?? e.codeAfter, o.value = p(e), Object.keys(o.value).length) {
         l();
         return;
       }
-      if (r === "inline") {
+      if (n === "inline") {
         f({ ...e });
         return;
       }

package/dist/components/organisms/display-conditions/DisplayConditionSelectDrawer.vue.js

@@ -1,13 +1,13 @@
 import a from "./DisplayConditionSelectDrawer.vue2.js";
 /* empty css                                  */
-import d from "../../../_virtual/_plugin-vue2_normalizer.js";
-var o = function() {
+import o from "../../../_virtual/_plugin-vue2_normalizer.js";
+var d = function() {
   var s = this, i = s._self._c, t = s._self._setupProxy;
-  return i("div", { staticClass: "guido-display-condition-select-root" }, [i(t.WpDrawer, { attrs: { id: "guido__display-condition-select-drawer", "description-status": "", "class-name": "guido-display-condition-select-drawer", size: "large", "description-text": t.descriptionText, "footer-button-group-options": t.footerButtonGroupOptions, status: t.store.isSelectOpen, "title-text": t.trans(`${t.KEY}.select-title`) }, on: { cancelOrBackButtonEvent: t.cancel, onCloseEvent: t.cancel } }, [i("div", { staticClass: "guido-display-condition-select" }, [i(t.InBasicTextInput, { staticClass: "mb-4 w-1", attrs: { id: "guido__display-condition-search-input", name: "displayConditionSearch", "character-counter-status": !1, "disabled-status": t.store.listStatus !== "loaded" || !t.store.list.length, "label-status": !1, "placeholder-text": t.trans(`${t.KEY}.search`), "tooltip-status": !1, value: t.search }, on: { input: function(e) {
+  return i("div", { staticClass: "guido-display-condition-select-root" }, [i(t.WpDrawer, { attrs: { id: "guido__display-condition-select-drawer", "description-status": "", "class-name": "guido-display-condition-select-drawer", size: "large", "description-text": t.descriptionText, "footer-button-group-options": t.footerButtonGroupOptions, status: t.store.isSelectOpen, "title-text": t.trans(`${t.KEY}.select-title`) }, on: { cancelOrBackButtonEvent: t.cancel, onCloseEvent: t.cancel } }, [i("div", { staticClass: "guido-display-condition-select" }, [t.store.listStatus === "loaded" && t.store.list.length ? i(t.InBasicTextInput, { staticClass: "mb-4 w-1", attrs: { id: "guido__display-condition-search-input", name: "displayConditionSearch", "character-counter-status": !1, "label-status": !1, "placeholder-text": t.trans(`${t.KEY}.search`), "tooltip-status": !1, value: t.search }, on: { input: function(e) {
     t.search = e;
-  } } }), t.store.listStatus === "loading" || t.store.listStatus === "idle" ? i("div", { staticClass: "guido-display-condition-select__list", attrs: { "data-testid": "display-condition-loading" } }, s._l(3, function(e) {
-    return i(t.InSkeleton, { key: e, attrs: { sizing: { width: 857, height: 78 } } });
-  }), 1) : t.store.listStatus === "error" ? i(t.InNoData, { attrs: { id: "guido__display-condition-error", "button-status": "", icon: "no-data", "button-text": t.trans(`${t.KEY}.retry`), description: t.trans(`${t.KEY}.error-load`) }, on: { click: t.loadList } }) : t.store.list.length ? t.filteredList.length ? i("ul", { staticClass: "guido-display-condition-select__list" }, s._l(t.filteredList, function(e) {
+  } } }) : s._e(), t.store.listStatus === "loading" || t.store.listStatus === "idle" ? i("div", { staticClass: "guido-display-condition-select__list", attrs: { "data-testid": "display-condition-loading" } }, s._l(t.SKELETON_HEIGHTS, function(e, n) {
+    return i(t.InSkeleton, { key: n, attrs: { sizing: { width: 856, height: e } } });
+  }), 1) : t.store.listStatus === "error" ? i(t.InNoData, { attrs: { id: "guido__display-condition-error", "button-status": "", icon: "no-data", "button-text": t.trans(`${t.KEY}.retry`), description: t.trans(`${t.KEY}.error-load`), title: t.trans(`${t.KEY}.error-load-title`) }, on: { click: t.loadList } }) : t.store.list.length ? t.filteredList.length ? i("ul", { staticClass: "guido-display-condition-select__list" }, s._l(t.filteredList, function(e) {
     return i("li", { key: e.id, staticClass: "guido-display-condition-card", attrs: { "data-condition-id": e.id } }, [i("div", { staticClass: "guido-display-condition-card__header" }, [i("div", { staticClass: "guido-display-condition-card__text" }, [i("p", { staticClass: "guido-display-condition-card__name" }, [s._v(" " + s._s(e.name) + " ")]), e.description ? i("p", { staticClass: "guido-display-condition-card__description" }, [s._v(" " + s._s(e.description) + " ")]) : s._e()]), i("div", { staticClass: "guido-display-condition-card__actions" }, [i("div", { staticClass: "guido-display-condition-card__split" }, [i(t.InButtonV2, { attrs: { id: `guido__display-condition-select-${e.id}`, type: "subtle-primary", "label-text": t.trans(`${t.KEY}.select`) }, on: { click: function(n) {
       return t.select(e);
     } } }), i(t.InButtonV2, { attrs: { id: `guido__display-condition-menu-${e.id}`, "left-icon": "filled-dropdown-down", type: "subtle-primary", "label-text-status": !1 }, on: { click: function(n) {
@@ -17,16 +17,16 @@ var o = function() {
     } } }, [s._v(" " + s._s(t.trans(`${t.KEY}.delete`)) + " ")])]) : s._e()], 1), i("span", { staticClass: "guido-display-condition-card__divider" }), i("button", { staticClass: "guido-display-condition-card__expand", attrs: { id: `guido__display-condition-expand-${e.id}`, type: "button", "aria-expanded": t.expandedId === e.id ? "true" : "false", "aria-label": t.trans(`${t.KEY}.preview`) }, on: { click: function(n) {
       return t.toggleExpanded(e);
     } } }, [i(t.InIcons, { attrs: { name: t.expandedId === e.id ? "filled-dropdown-up" : "filled-dropdown-down" } })], 1)])]), t.expandedId === e.id ? i("pre", { staticClass: "guido-display-condition-card__code" }, [s._v(s._s(t.codeOf(e)))]) : s._e()]);
-  }), 0) : i(t.InNoData, { attrs: { id: "guido__display-condition-no-result", icon: "no-data", title: t.trans(`${t.KEY}.no-result`) } }) : i(t.InNoData, { attrs: { id: "guido__display-condition-empty", "button-status": "", icon: "no-data", "button-text": t.trans(`${t.KEY}.create-new`), description: t.trans(`${t.KEY}.empty-description`), title: t.trans(`${t.KEY}.empty-title`) }, on: { click: function(e) {
+  }), 0) : i(t.InNoData, { attrs: { id: "guido__display-condition-no-result", icon: "no-data", title: t.trans(`${t.KEY}.no-result`) } }) : i(t.InNoData, { attrs: { id: "guido__display-condition-empty", "button-status": "", icon: "no-personalization", "button-text": t.trans(`${t.KEY}.create-new`), description: t.trans(`${t.KEY}.empty-description`), title: t.trans(`${t.KEY}.empty-title`) }, on: { click: function(e) {
     return t.store.openCreate();
   } } })], 1)]), t.store.pendingDelete ? i("div", { staticClass: "guido-display-condition-select__delete-modal" }, [i(t.WpModal, { attrs: { id: "guido__display-condition-delete-modal", size: "X-small", state: "danger", "close-on-outside-click": !1, "footer-button-options": t.deleteModalButtons, title: t.trans(`${t.KEY}.delete-confirm-title`) }, on: { close: t.closeDeleteModal, "primary-action": t.confirmDelete } }, [i("p", { staticClass: "guido-display-condition-select__delete-text" }, [s._v(" " + s._s(t.trans(`${t.KEY}.delete-confirm-description`, { name: t.store.pendingDelete.name })) + " ")])])], 1) : s._e()], 1);
-}, l = [], c = /* @__PURE__ */ d(
+}, l = [], c = /* @__PURE__ */ o(
   a,
-  o,
+  d,
   l,
   !1,
   null,
-  "2561eb6a"
+  "10ac7a13"
 );
 const y = c.exports;
 export {

package/dist/components/organisms/display-conditions/DisplayConditionSelectDrawer.vue2.js

@@ -1,31 +1,31 @@
-import { defineComponent as I, ref as i, watch as _, computed as r } from "vue";
+import { defineComponent as _, ref as i, watch as S, computed as c } from "vue";
 import B from "../../wrappers/WpDrawer.vue.js";
 import L from "../../wrappers/WpModal.vue.js";
-import { useDisplayConditions as S } from "../../../composables/useDisplayConditions.js";
-import { useTranslations as x } from "../../../composables/useTranslations.js";
-import { ACADEMY_LINKS as $ } from "../../../enums/academy.js";
-import { useDisplayConditionStore as C } from "../../../stores/display-condition.js";
-import { InSkeleton as M, InNoData as O, InIcons as T, InButtonV2 as b, InBasicTextInput as k } from "@useinsider/design-system-vue";
-const H = /* @__PURE__ */ I({
+import { useDisplayConditions as x } from "../../../composables/useDisplayConditions.js";
+import { useTranslations as O } from "../../../composables/useTranslations.js";
+import { ACADEMY_LINKS as T } from "../../../enums/academy.js";
+import { useDisplayConditionStore as $ } from "../../../stores/display-condition.js";
+import { InSkeleton as C, InNoData as E, InIcons as M, InButtonV2 as b, InBasicTextInput as k } from "@useinsider/design-system-vue";
+const J = /* @__PURE__ */ _({
   __name: "DisplayConditionSelectDrawer",
   setup(h) {
-    const o = "email-editor.display-conditions", l = x(), t = C(), { loadList: d, select: m, deleteSaved: u, cancel: f } = S(), c = i(""), s = i(null), a = i(null), n = i(!1);
-    _(() => t.isSelectOpen, (e) => {
-      e && (c.value = "", s.value = null, a.value = null, d());
+    const o = "email-editor.display-conditions", m = [40, 76, 76, 76], l = O(), t = $(), { loadList: d, select: f, deleteSaved: u, cancel: g } = x(), r = i(""), s = i(null), a = i(null), n = i(!1);
+    S(() => t.isSelectOpen, (e) => {
+      e && (r.value = "", s.value = null, a.value = null, d());
     }, { immediate: !0 });
-    const g = r(() => {
-      const e = c.value.trim().toLocaleLowerCase();
+    const D = c(() => {
+      const e = r.value.trim().toLocaleLowerCase();
       return e ? t.list.filter((p) => `${p.name} ${p.description}`.toLocaleLowerCase().includes(e)) : t.list;
-    }), D = r(() => l(`${o}.select-description`, {
-      academyLink: `<a href="${$.EMAIL_DISPLAY_CONDITIONS}" class="guido-display-condition-academy" target="_blank">${l(`${o}.academy`)}</a>`
-    })), v = r(() => ({
+    }), v = c(() => l(`${o}.select-description`, {
+      academyLink: `<a href="${T.EMAIL_DISPLAY_CONDITIONS}" class="guido-display-condition-academy" target="_blank">${l(`${o}.academy`)}</a>`
+    })), y = c(() => ({
       cancelOrBackButton: {
         styling: "ghost",
         type: "secondary",
         labelText: l(`${o}.back`),
         leftIcon: "line-arrow-left"
       }
-    })), y = r(() => ({
+    })), I = c(() => ({
       cancelOrBackButton: {
         type: "secondary",
         styling: "ghost",
@@ -38,7 +38,7 @@ const H = /* @__PURE__ */ I({
         loadingStatus: n.value
       }
     }));
-    return { __sfc: !0, KEY: o, trans: l, store: t, loadList: d, select: m, deleteSaved: u, cancel: f, search: c, expandedId: s, menuId: a, isDeleting: n, filteredList: g, descriptionText: D, footerButtonGroupOptions: v, deleteModalButtons: y, toggleExpanded: (e) => {
+    return { __sfc: !0, KEY: o, SKELETON_HEIGHTS: m, trans: l, store: t, loadList: d, select: f, deleteSaved: u, cancel: g, search: r, expandedId: s, menuId: a, isDeleting: n, filteredList: D, descriptionText: v, footerButtonGroupOptions: y, deleteModalButtons: I, toggleExpanded: (e) => {
       s.value = s.value === e.id ? null : e.id;
     }, toggleMenu: (e) => {
       a.value = a.value === e.id ? null : e.id;
@@ -49,9 +49,9 @@ const H = /* @__PURE__ */ I({
     }, closeDeleteModal: () => {
       n.value || (t.pendingDelete = null);
     }, codeOf: (e) => [e.codeBefore, e.codeAfter].filter(Boolean).join(`
-`), WpDrawer: B, WpModal: L, InBasicTextInput: k, InButtonV2: b, InIcons: T, InNoData: O, InSkeleton: M };
+`), WpDrawer: B, WpModal: L, InBasicTextInput: k, InButtonV2: b, InIcons: M, InNoData: E, InSkeleton: C };
   }
 });
 export {
-  H as default
+  J as default
 };

package/dist/composables/useDisplayConditions.js

@@ -1,105 +1,96 @@
-import { useToaster as x } from "./useToaster.js";
-import { useTranslations as M } from "./useTranslations.js";
-import { DISPLAY_CONDITION_LIMITS as r, DisplayConditionEvent as E } from "../enums/display-condition.js";
-import { ToasterTypeOptions as l } from "../enums/toaster.js";
-import { useDisplayConditionApi as N } from "../services/displayConditionApi.js";
-import { useConfigStore as T } from "../stores/config.js";
+import { useToaster as T } from "./useToaster.js";
+import { useTranslations as x } from "./useTranslations.js";
+import { DISPLAY_CONDITION_LIMITS as s, DisplayConditionEvent as S } from "../enums/display-condition.js";
+import { ToasterTypeOptions as d } from "../enums/toaster.js";
+import { useDisplayConditionApi as M } from "../services/displayConditionApi.js";
+import { useConfigStore as N } from "../stores/config.js";
 import { useDisplayConditionStore as _ } from "../stores/display-condition.js";
-import { parseSource as O, findInvalidCodeFields as B } from "../utils/displayCondition.js";
-import { escapeHtml as L } from "../utils/htmlEscape.js";
-import { computed as X } from "vue";
-const i = "email-editor.display-conditions", y = (n, f, a) => ({
-  id: f,
+import { findInvalidCodeFields as O, nextConditionId as L } from "../utils/displayCondition.js";
+import { escapeHtml as B } from "../utils/htmlEscape.js";
+import { computed as P } from "vue";
+const i = "email-editor.display-conditions", X = 409, y = (n, p, r) => ({
+  id: L(),
   name: n.name.trim(),
   description: n.description.trim(),
   beforeScript: n.codeBefore,
   afterScript: n.codeAfter,
-  extraData: JSON.stringify({ source: a })
-}), Q = () => {
-  const n = _(), f = T(), a = N(), o = M(), { showToaster: c } = x(), p = X(() => {
+  extraData: JSON.stringify(r === void 0 ? { source: p } : { source: p, savedId: r })
+}), C = (n) => ({
+  name: n.name,
+  description: n.description,
+  codeBefore: n.codeBefore,
+  codeAfter: n.codeAfter
+}), U = () => {
+  const n = _(), p = N(), r = M(), o = x(), { showToaster: a } = T(), u = P(() => {
     var e;
-    return (e = f.features) != null && e.liquidSyntax ? "liquid" : "pongo";
-  }), v = (e) => {
+    return (e = p.features) != null && e.liquidSyntax ? "liquid" : "pongo";
+  }), f = (e) => {
     const t = { condition: e };
-    document.dispatchEvent(new CustomEvent(E.APPLY, { detail: t })), n.close();
-  }, g = () => {
-    n.view !== "none" && (document.dispatchEvent(new CustomEvent(E.CANCEL)), n.close());
-  }, C = (e) => {
+    document.dispatchEvent(new CustomEvent(S.APPLY, { detail: t })), n.close();
+  }, E = () => {
+    n.view !== "none" && (document.dispatchEvent(new CustomEvent(S.CANCEL)), n.close());
+  }, $ = (e) => {
     if (e.mode === "select") {
       n.openSelect();
       return;
     }
     n.openCreate(e.mode === "edit" ? e.current : null);
-  }, $ = async () => {
+  }, g = async () => {
     n.listStatus = "loading";
     try {
-      const e = await a.list(p.value);
-      n.list = e.data, n.listStatus = "loaded";
+      n.list = await r.list(u.value), n.listStatus = "loaded";
     } catch (e) {
       console.warn("Display conditions could not be loaded.", e), n.listStatus = "error";
     }
-  }, h = (e, t) => {
-    const s = {}, u = e.name.trim();
-    t === "save" && !u ? s.name = o(`${i}.error-name-required`) : u && u.length < r.NAME_MIN ? s.name = o(`${i}.error-name-min`, { min: r.NAME_MIN }) : u.length > r.NAME_MAX && (s.name = o(`${i}.error-name-max`, { max: r.NAME_MAX }));
-    const { DESCRIPTION_MAX: S } = r;
-    e.description.trim().length > S && (s.description = o(`${i}.error-description-max`, { max: S }));
-    const I = B(e.codeBefore, e.codeAfter);
-    return ["codeBefore", "codeAfter"].forEach((d) => {
-      e[d].trim() ? I.includes(d) ? s[d] = o(`${i}.error-code-invalid`) : e[d].length > r.CODE_MAX && (s[d] = o(`${i}.error-code-max`, { max: r.CODE_MAX })) : s[d] = o(`${i}.error-code-required`);
-    }), s;
-  }, D = () => {
-    c({ type: l.Error, message: o(`${i}.validation-failed`) });
-  }, m = (e) => ({ name: L(e) }), A = (e, t) => {
-    e != null && e.authReported || (console.warn(t, e), c({ type: l.Error, message: t }));
+  }, h = (e) => {
+    const t = {}, m = e.name.trim();
+    m ? m.length < s.NAME_MIN ? t.name = o(`${i}.error-name-min`, { min: s.NAME_MIN }) : m.length > s.NAME_MAX && (t.name = o(`${i}.error-name-max`, { max: s.NAME_MAX })) : t.name = o(`${i}.error-name-required`);
+    const { DESCRIPTION_MAX: A } = s;
+    e.description.trim().length > A && (t.description = o(`${i}.error-description-max`, { max: A }));
+    const D = O(e.codeBefore, e.codeAfter);
+    return ["codeBefore", "codeAfter"].forEach((c) => {
+      e[c].trim() ? D.includes(c) ? t[c] = o(`${i}.error-code-invalid`) : e[c].length > s.CODE_MAX && (t[c] = o(`${i}.error-code-max`, { max: s.CODE_MAX })) : t[c] = o(`${i}.error-code-required`);
+    }), t;
+  }, I = () => {
+    a({ type: d.Error, message: o(`${i}.validation-failed`) });
+  }, l = (e) => ({ name: B(e) }), v = (e, t) => {
+    e != null && e.authReported || (console.warn(t, e), a({ type: d.Error, message: t }));
   };
   return {
-    syntax: p,
-    handleOpen: C,
-    cancel: g,
-    loadList: $,
+    syntax: u,
+    handleOpen: $,
+    cancel: E,
+    loadList: g,
     validate: h,
-    notifyInvalid: D,
+    notifyInvalid: I,
     createInline: (e) => {
-      const t = n.editing && O(n.editing) === "inline" ? n.editing.id : Date.now();
-      v(y(e, t, "inline")), c({
-        type: l.Success,
-        message: o(`${i}.created`, m(e.name.trim()))
+      f(y(e, "inline")), a({
+        type: d.Success,
+        message: o(`${i}.created`, l(e.name.trim()))
       });
     },
     createAndSave: async (e) => {
       try {
-        if (await a.nameExists(e.name, p.value))
-          return { name: o(`${i}.error-name-exists`) };
-        const t = await a.create(e, p.value);
-        return n.list = [t, ...n.list.filter((s) => s.id !== t.id)], v(y({
-          name: t.name,
-          description: t.description,
-          codeBefore: t.codeBefore,
-          codeAfter: t.codeAfter
-        }, t.id, "saved")), c({
-          type: l.Success,
-          message: o(`${i}.created-and-saved`, m(t.name))
+        const t = await r.create(e, u.value);
+        return n.list = [t, ...n.list.filter((m) => m.id !== t.id)], f(y(C(t), "saved", t.id)), a({
+          type: d.Success,
+          message: o(`${i}.created-and-saved`, l(t.name))
         }), {};
       } catch (t) {
-        return A(t, o(`${i}.save-failed`, m(e.name.trim()))), null;
+        return (t == null ? void 0 : t.status) === X ? { name: o(`${i}.error-name-exists`) } : (v(t, o(`${i}.save-failed`, l(e.name.trim()))), null);
       }
     },
     select: (e) => {
-      v(y({
-        name: e.name,
-        description: e.description,
-        codeBefore: e.codeBefore,
-        codeAfter: e.codeAfter
-      }, e.id, "saved")), c({ type: l.Success, message: o(`${i}.applied`, m(e.name)) });
+      f(y(C(e), "saved", e.id)), a({ type: d.Success, message: o(`${i}.applied`, l(e.name)) });
     },
     deleteSaved: async (e) => {
       try {
-        await a.remove(e.id), n.list = n.list.filter((t) => t.id !== e.id), c({
-          type: l.Success,
-          message: o(`${i}.deleted`, m(e.name))
+        await r.remove(e.id), n.list = n.list.filter((t) => t.id !== e.id), a({
+          type: d.Success,
+          message: o(`${i}.deleted`, l(e.name))
         });
       } catch (t) {
-        A(t, o(`${i}.delete-failed`));
+        v(t, o(`${i}.delete-failed`));
       } finally {
         n.pendingDelete = null;
       }
@@ -107,5 +98,5 @@ const i = "email-editor.display-conditions", y = (n, f, a) => ({
   };
 };
 export {
-  Q as useDisplayConditions
+  U as useDisplayConditions
 };

package/dist/extensions/DisplayConditions/control.js

@@ -1,19 +1,20 @@
-var $ = Object.defineProperty;
-var S = (d, s, t) => s in d ? $(d, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[s] = t;
-var h = (d, s, t) => S(d, typeof s != "symbol" ? s + "" : s, t);
-import { CommonControl as O } from "../Blocks/common-control.js";
-import { parseSource as N } from "../../utils/displayCondition.js";
-import { escapeHtml as C } from "../../utils/htmlEscape.js";
-import { ModificationDescription as D, UIElementType as b, UEAttr as w } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { requestDisplayCondition as I } from "./bridge.js";
-import { CONDITIONS_CONTROL_ID as x, APPLIED_DESCRIPTION as E, EMPTY_DESCRIPTION as T, MAX_COLLAPSED_LINES as v, CONDITION_ICONS as g } from "./constants.js";
-const p = ".guido-display-conditions", M = { id: 0, name: "", description: "", beforeScript: "", afterScript: "" }, _ = (d) => `<${b.ICON} ${w.ICON.src}="${d}"></${b.ICON}>`, l = (d, s, t, i = !1) => `<button type="button" class="${s}" id="${d}"${i ? " hidden" : ""}>${t}</button>`;
-class B extends O {
+var O = Object.defineProperty;
+var $ = (o, s, i) => s in o ? O(o, s, { enumerable: !0, configurable: !0, writable: !0, value: i }) : o[s] = i;
+var u = (o, s, i) => $(o, typeof s != "symbol" ? s + "" : s, i);
+import { CommonControl as S } from "../Blocks/common-control.js";
+import { toAppliedCondition as w, parseSource as N } from "../../utils/displayCondition.js";
+import { escapeHtml as f } from "../../utils/htmlEscape.js";
+import { ModificationDescription as D, UIElementType as b, UEAttr as I } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { requestDisplayCondition as E } from "./bridge.js";
+import { CONDITIONS_CONTROL_ID as x, APPLIED_DESCRIPTION as M, EMPTY_DESCRIPTION as T, MAX_COLLAPSED_LINES as v, CONDITION_ICONS as g } from "./constants.js";
+const r = ".guido-display-conditions", L = { id: 0, name: "", description: "", beforeScript: "", afterScript: "" }, _ = (o) => `<${b.ICON} ${I.ICON.src}="${o}"></${b.ICON}>`, c = (o, s, i, t = !1) => `<button type="button" class="${s}" id="${o}"${t ? " hidden" : ""}>${i}</button>`;
+class B extends S {
   constructor() {
     super(...arguments);
-    h(this, "expanded", !1);
-    h(this, "listeners", []);
-    h(this, "resizeObserver", null);
+    u(this, "expanded", !1);
+    u(this, "listeners", []);
+    u(this, "resizeObserver", null);
+    u(this, "detachOutsideClick", null);
   }
   getId() {
     return x;
@@ -26,18 +27,18 @@ class B extends O {
                     <p class="guido-display-conditions__description" data-dc-description></p>
                 </div>
                 <div class="guido-display-conditions__empty" data-dc-empty>
-                    ${l(
+                    ${c(
       "guido__btn-add-display-condition",
       "guido-display-conditions__add",
       `${_(g.PLUS)}<span>${this.api.translate("Add Display Condition")}</span>`
     )}
                     <div class="guido-display-conditions__menu" data-dc-menu hidden>
-                        ${l(
+                        ${c(
       "guido__btn-display-condition-create",
       "guido-display-conditions__menu-item",
       this.api.translate("Create New Condition")
     )}
-                        ${l(
+                        ${c(
       "guido__btn-display-condition-select",
       "guido-display-conditions__menu-item",
       this.api.translate("Select Saved Condition")
@@ -57,7 +58,7 @@ class B extends O {
                             </p>
                             <pre class="guido-display-conditions__code" data-dc-after></pre>
                         </div>
-                        ${l(
+                        ${c(
       "guido__btn-display-condition-toggle",
       "guido-display-conditions__toggle",
       `${_(g.CHEVRON)}<span data-dc-toggle-label></span>`,
@@ -65,12 +66,12 @@ class B extends O {
     )}
                     </div>
                     <div class="guido-display-conditions__actions">
-                        ${l(
+                        ${c(
       "guido__btn-edit-display-condition",
       "guido-display-conditions__action guido-display-conditions__action--edit",
       `${_(g.EDIT)}<span>${this.api.translate("Edit")}</span>`
     )}
-                        ${l(
+                        ${c(
       "guido__btn-remove-display-condition",
       "guido-display-conditions__action guido-display-conditions__action--remove",
       `${_(g.TRASH)}<span>${this.api.translate("Remove")}</span>`
@@ -85,82 +86,90 @@ class B extends O {
       this.expanded = !this.expanded, this.paint();
     }), this.observeCodeSize(), this.paint();
   }
-  onTemplateNodeUpdated(t) {
-    const i = t !== this.currentNode;
-    super.onTemplateNodeUpdated(t), i && (this.expanded = !1), this.paint();
+  onTemplateNodeUpdated(i) {
+    const t = i !== this.currentNode;
+    super.onTemplateNodeUpdated(i), t && (this.expanded = !1, this.toggleMenu(!1)), this.paint();
   }
   onDestroy() {
     super.onDestroy(), this.teardown();
   }
   getCondition() {
-    var e;
-    const t = this.currentNode, i = (e = t == null ? void 0 : t.getDisplayCondition) == null ? void 0 : e.call(t);
-    return !i || !(i.name || i.beforeScript || i.afterScript) ? null : { ...i, description: i.description ?? "" };
+    var t;
+    const i = this.currentNode;
+    return w((t = i == null ? void 0 : i.getDisplayCondition) == null ? void 0 : t.call(i));
   }
-  toggleMenu(t) {
-    var n, o;
-    const i = (n = this.getContainer()) == null ? void 0 : n.querySelector(`${p} [data-dc-menu]`);
-    if (!i)
+  toggleMenu(i) {
+    var n, d, a;
+    const t = (n = this.getContainer()) == null ? void 0 : n.querySelector(`${r} [data-dc-menu]`);
+    if (!t)
       return;
-    i.hidden = t === void 0 ? !i.hidden : !t;
-    const e = (o = this.getContainer()) == null ? void 0 : o.querySelector(`${p} #guido__btn-add-display-condition`);
-    i.style.width = !i.hidden && e ? `${e.getBoundingClientRect().width}px` : "";
-  }
-  openDrawer(t) {
-    this.toggleMenu(!1), I(
-      { mode: t, current: t === "edit" ? this.getCondition() : null },
-      { onApply: (i) => this.applyCondition(i) }
+    t.hidden = i === void 0 ? !t.hidden : !i, (d = this.detachOutsideClick) == null || d.call(this), t.hidden || this.listenOutsideClick();
+    const e = (a = this.getContainer()) == null ? void 0 : a.querySelector(`${r} #guido__btn-add-display-condition`);
+    t.style.width = !t.hidden && e ? `${e.getBoundingClientRect().width}px` : "";
+  }
+  listenOutsideClick() {
+    const i = this.getContainer(), t = (e) => {
+      e.composedPath().some((d) => d instanceof HTMLElement && d.matches(`${r} [data-dc-menu], ${r} #guido__btn-add-display-condition`)) || this.toggleMenu(!1);
+    };
+    i == null || i.addEventListener("pointerdown", t, !0), this.detachOutsideClick = () => {
+      i == null || i.removeEventListener("pointerdown", t, !0), this.detachOutsideClick = null;
+    };
+  }
+  openDrawer(i) {
+    this.toggleMenu(!1), E(
+      { mode: i, current: i === "edit" ? this.getCondition() : null },
+      { onApply: (t) => this.applyCondition(t) }
     );
   }
-  applyCondition(t) {
+  applyCondition(i) {
     if (!this.currentNode)
       return;
-    const i = this.api.getDocumentModifier().modifyHtml(this.currentNode);
-    t ? i.setDisplayCondition(t) : i.setDisplayCondition(M), i.apply(new D(
-      t ? `Set display condition ${t.name}` : "Remove display condition"
+    const t = this.api.getDocumentModifier().modifyHtml(this.currentNode);
+    i ? t.setDisplayCondition(i) : t.setDisplayCondition(L), t.apply(new D(
+      i ? `Set display condition ${i.name}` : "Remove display condition"
     ));
   }
-  wire(t, i) {
+  wire(i, t) {
     var n;
-    const e = (n = this.getContainer()) == null ? void 0 : n.querySelector(`${p} ${t}`);
-    e && (e.addEventListener("click", i), this.listeners.push({ element: e, handler: i }));
+    const e = (n = this.getContainer()) == null ? void 0 : n.querySelector(`${r} ${i}`);
+    e && (e.addEventListener("click", t), this.listeners.push({ element: e, handler: t }));
   }
   teardown() {
-    var t;
-    this.listeners.forEach(({ element: i, handler: e }) => i.removeEventListener("click", e)), this.listeners = [], (t = this.resizeObserver) == null || t.disconnect(), this.resizeObserver = null;
+    var i, t;
+    this.listeners.forEach(({ element: e, handler: n }) => e.removeEventListener("click", n)), this.listeners = [], (i = this.resizeObserver) == null || i.disconnect(), this.resizeObserver = null, (t = this.detachOutsideClick) == null || t.call(this);
   }
   // Line counts depend on layout: the panel font loads late and the panel can be resized.
   observeCodeSize() {
-    var i;
-    const t = (i = this.getContainer()) == null ? void 0 : i.querySelectorAll(`${p} .guido-display-conditions__code`);
-    !(t != null && t.length) || typeof ResizeObserver > "u" || (this.resizeObserver = new ResizeObserver(() => this.paint()), t.forEach((e) => {
+    var t;
+    const i = (t = this.getContainer()) == null ? void 0 : t.querySelectorAll(`${r} .guido-display-conditions__code`);
+    !(i != null && i.length) || typeof ResizeObserver > "u" || (this.resizeObserver = new ResizeObserver(() => this.paint()), i.forEach((e) => {
       var n;
       return (n = this.resizeObserver) == null ? void 0 : n.observe(e);
     }));
   }
   paint() {
-    var f;
-    const t = (f = this.getContainer()) == null ? void 0 : f.querySelector(p);
-    if (!t)
+    var C;
+    const i = (C = this.getContainer()) == null ? void 0 : C.querySelector(r);
+    if (!i)
       return;
-    const i = this.getCondition(), e = (u) => t.querySelector(u);
-    if (e("[data-dc-empty]").hidden = !!i, e("[data-dc-applied]").hidden = !i, e("[data-dc-description]").textContent = this.api.translate(i ? E : T), !i)
+    const t = this.getCondition(), e = (h) => i.querySelector(h);
+    if (e("[data-dc-empty]").hidden = !!t, e("[data-dc-applied]").hidden = !t, e("[data-dc-description]").textContent = this.api.translate(t ? M : T), !t)
       return;
-    e("[data-dc-name]").textContent = i.name, e("#guido__btn-edit-display-condition").hidden = N(i) !== "inline";
-    const n = e("[data-dc-sections]"), o = e("[data-dc-before]"), a = e("[data-dc-after]");
-    o.innerHTML = C(i.beforeScript), a.innerHTML = C(i.afterScript), a.hidden = !i.afterScript, e("[data-dc-after-label]").hidden = !i.afterScript, n.style.maxHeight = "";
-    const r = parseFloat(getComputedStyle(o).lineHeight) || 24, c = (u) => u.hidden ? 0 : Math.round(u.scrollHeight / r), y = c(o) + c(a) > v, m = e("#guido__btn-display-condition-toggle");
-    m.hidden = !y, m.classList.toggle("is-expanded", this.expanded), e("[data-dc-toggle-label]").textContent = this.api.translate(this.expanded ? "Show Less" : "Show More"), y && !this.expanded && (n.style.maxHeight = `${this.collapsedHeight(n, [o, a], r)}px`);
+    e("[data-dc-name]").textContent = t.name, e("#guido__btn-edit-display-condition").hidden = N(t) !== "inline";
+    const n = e("[data-dc-sections]"), d = e("[data-dc-before]"), a = e("[data-dc-after]");
+    d.innerHTML = f(t.beforeScript), a.innerHTML = f(t.afterScript), a.hidden = !t.afterScript, e("[data-dc-after-label]").hidden = !t.afterScript, n.style.maxHeight = "";
+    const l = parseFloat(getComputedStyle(d).lineHeight) || 24, p = (h) => h.hidden ? 0 : Math.round(h.scrollHeight / l), y = p(d) + p(a) > v, m = e("#guido__btn-display-condition-toggle");
+    m.hidden = !y, m.classList.toggle("is-expanded", this.expanded), e("[data-dc-toggle-label]").textContent = this.api.translate(this.expanded ? "Show Less" : "Show More"), y && !this.expanded && (n.style.maxHeight = `${this.collapsedHeight(n, [d, a], l)}px`);
   }
   // Labels do not count toward the line limit, so the cut lands after the 10th rendered code line.
-  collapsedHeight(t, i, e) {
-    const { top: n } = t.getBoundingClientRect();
-    let o = v, a = 0;
-    return i.filter((r) => !r.hidden).forEach((r) => {
-      if (o <= 0)
+  collapsedHeight(i, t, e) {
+    const { top: n } = i.getBoundingClientRect();
+    let d = v, a = 0;
+    return t.filter((l) => !l.hidden).forEach((l) => {
+      if (d <= 0)
         return;
-      const c = Math.min(o, Math.round(r.scrollHeight / e));
-      a = r.getBoundingClientRect().top - n + c * e, o -= c;
+      const p = Math.min(d, Math.round(l.scrollHeight / e));
+      a = l.getBoundingClientRect().top - n + p * e, d -= p;
     }), a;
   }
 }

package/dist/extensions/DisplayConditions/library.js

@@ -1,15 +1,17 @@
-import { ExternalDisplayConditionsLibrary as r } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { requestDisplayCondition as o } from "./bridge.js";
-class p extends r {
+import { toAppliedCondition as s, parseSource as a } from "../../utils/displayCondition.js";
+import { ExternalDisplayConditionsLibrary as l } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { requestDisplayCondition as p } from "./bridge.js";
+class m extends l {
   getCategoryName() {
     return this.api.translate("Insider Display Conditions");
   }
-  openExternalDisplayConditionsDialog(t, i, e) {
-    o(
-      { mode: t ? "edit" : "select", current: t ?? null },
+  openExternalDisplayConditionsDialog(o, r, t) {
+    const e = s(o), n = a(e) === "inline";
+    p(
+      { mode: n ? "edit" : "select", current: n ? e : null },
       {
-        onApply: (n) => n ? i(n) : e(),
-        onCancel: e
+        onApply: (i) => i ? r(i) : t(),
+        onCancel: t
       }
     );
   }
@@ -21,5 +23,5 @@ class p extends r {
   }
 }
 export {
-  p as DisplayConditionsLibrary
+  m as DisplayConditionsLibrary
 };

package/dist/guido.css

@@ -1 +1 @@
-@charset "UTF-8";.auth-error-modal[data-v-b4d7ae51]{position:relative;z-index:145}.gap-16[data-v-5553d071],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-b8f24f34] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.view-options-wrapper[data-v-87033101]{position:relative;display:inline-block}.new-tag[data-v-87033101]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-87033101] .guido__view-option-selection-desktop svg,[data-v-87033101] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-87033101] .in-segments-wrapper__button_selected,[data-v-87033101] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-87033101] .in-tooltip-wrapper-v2__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-fad98586]{gap:8px}.version-history__toolbar[data-v-fad98586]{gap:4px}.view-options-wrapper[data-v-6ebabfe4]{position:relative;display:inline-block}.new-tag[data-v-6ebabfe4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-6ebabfe4] .guido__verion-history-view-option-selection-desktop svg,[data-v-6ebabfe4] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6ebabfe4] .in-segments-wrapper__button_selected,[data-v-6ebabfe4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-6ebabfe4] .in-tooltip-wrapper-v2__icon{cursor:pointer}.auto-save-toggle[data-v-2c964af4]{position:relative}.auto-save-toggle__info-box[data-v-2c964af4]{position:absolute;top:100%;left:0;z-index:10;width:280px}.editor-actions[data-v-2cccbd44]{gap:4px}.header-wrapper[data-v-d11dd577]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.validation-error-list[data-v-c5ff3804]{gap:16px}.validation-error-row[data-v-c5ff3804]{gap:8px;padding:24px;border:1px solid #E1E1E1;border-radius:8px}.validation-error-row__icon[data-v-c5ff3804]{flex-shrink:0;font-size:24px;line-height:0}.validation-error-row__text[data-v-c5ff3804]{font-size:13px;line-height:16px;color:#292929;word-break:break-word}.guido-editor__wrapper[data-v-22e84203]{--ribbon-offset: 0px;position:relative;width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__container[data-v-22e84203]{width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__no-header[data-v-22e84203]{height:calc(100vh - 75px - var(--ribbon-offset))}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-91a26acd]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-91a26acd]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-91a26acd]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-91a26acd]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-91a26acd]{object-fit:cover;transform:scale(1)}[data-v-b9a93c6e] .guido__verion-history-view-option-selection-desktop svg,[data-v-b9a93c6e] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-b9a93c6e] .in-segments-wrapper__button_selected,[data-v-b9a93c6e] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-cf946232]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-cf946232]{min-height:504px}.iframe-wrapper[data-v-f255b2bb]{width:258px}.iframe-scaled[data-v-f255b2bb]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-6bcaca8a] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-f16f20f8] .vueperslides__bullets{pointer-events:none!important}[data-v-f16f20f8] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-bb3cca55] .vueperslides__bullets{pointer-events:none!important}[data-v-bb3cca55] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-19d8cb42] .vueperslides__bullets,[data-v-ec2027ff] .vueperslides__bullets,[data-v-b09e80c4] .vueperslides__bullets{pointer-events:none!important}[data-v-b09e80c4] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-9bdef600] .vueperslides__parallax-wrapper{padding-bottom:110px!important}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd]{width:100%;max-width:none}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd] .in-skeleton{width:100%!important}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd] .in-dropdown-box__container{width:413px}.assign-strategy-drawer .spaced-dot-sep{background-image:linear-gradient(90deg,#91949f 20%,#fff0 0);background-position:center bottom;background-repeat:repeat-x;background-size:5px 1px}.assign-strategy-drawer .spaced-dot-sep--top{background-position:center top}.assign-strategy-drawer .spaced-dot-sep--fc-n:first-child{background:none}.guido-code-editor-field__label[data-v-e96c7aa3]{margin:0 0 8px;color:#2c3546;font-size:13px;line-height:16px}[data-v-23accd91] .guido-display-condition-academy{color:#0a2ecc;text-decoration:underline}[data-v-23accd91] .guido-display-condition-create__optional{color:#666}.guido-display-condition-create__separator[data-v-23accd91]{height:1px;margin:0 0 24px;background-image:linear-gradient(to right,#91949F 1px,transparent 1px);background-size:5px 1px}.guido-display-condition-create__method-title[data-v-23accd91]{margin:0 0 24px;color:#292929;font-size:13px;font-weight:600;letter-spacing:1.2px;line-height:20px;text-transform:uppercase}.guido-display-condition-create__methods[data-v-23accd91]{display:flex;gap:16px;margin-bottom:24px}[data-v-2561eb6a] .guido-display-condition-academy{color:#0a2ecc;text-decoration:underline}.guido-display-condition-select-root[data-v-2561eb6a] .in-drawer__footer{justify-content:flex-start}.guido-display-condition-select__delete-modal[data-v-2561eb6a]{position:relative;z-index:145}.guido-display-condition-select__delete-modal[data-v-2561eb6a] .in-modal-v2-wrapper__header-title{margin-bottom:0}.guido-display-condition-select__delete-text[data-v-2561eb6a]{margin:0;color:#292929}.guido-display-condition-select__list[data-v-2561eb6a]{display:flex;flex-direction:column;gap:24px;margin:0;padding:0;list-style:none}.guido-display-condition-card[data-v-2561eb6a]{border:1px solid #E1E1E1;border-radius:4px;background-color:#fff}.guido-display-condition-card__header[data-v-2561eb6a]{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px}.guido-display-condition-card__text[data-v-2561eb6a]{min-width:0}.guido-display-condition-card__name[data-v-2561eb6a]{margin:0;overflow:hidden;color:#292929;font-size:16px;font-weight:600;line-height:24px;text-overflow:ellipsis;white-space:nowrap}.guido-display-condition-card__description[data-v-2561eb6a]{margin:4px 0 0;overflow:hidden;color:#666;font-size:13px;line-height:16px;text-overflow:ellipsis;white-space:nowrap}.guido-display-condition-card__actions[data-v-2561eb6a]{display:flex;flex-shrink:0;align-items:center;gap:16px}.guido-display-condition-card__split[data-v-2561eb6a]{position:relative;display:flex;gap:1px}.guido-display-condition-card__menu[data-v-2561eb6a]{position:absolute;z-index:2;top:calc(100% + 2px);right:0;min-width:115px;padding:4px 0;border-radius:4px;background-color:#fff;box-shadow:0 4px 16px #22293829}.guido-display-condition-card__menu-item[data-v-2561eb6a]{width:100%;padding:8px 16px;border:0;background:none;color:#222938;cursor:pointer;font-size:14px;line-height:24px;text-align:left}.guido-display-condition-card__menu-item[data-v-2561eb6a]:hover,.guido-display-condition-card__menu-item[data-v-2561eb6a]:focus-visible{background-color:#eff2f4}.guido-display-condition-card__divider[data-v-2561eb6a]{width:1px;height:24px;background-color:#dcdee6}.guido-display-condition-card__expand[data-v-2561eb6a]{display:flex;padding:0;border:0;background:none;cursor:pointer}.guido-display-condition-card__code[data-v-2561eb6a]{margin:1px 15px 15px;padding:8px;border:1px solid #E1E1E1;border-radius:4px;background-color:#fff;color:#101727;font-family:inherit;font-size:15px;line-height:24px;white-space:pre-wrap;word-break:break-word}.legacy-strategy-updated-modal[data-v-da2225a1]{position:relative;z-index:145}
+@charset "UTF-8";.auth-error-modal[data-v-b4d7ae51]{position:relative;z-index:145}.gap-16[data-v-5553d071],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-b8f24f34] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.view-options-wrapper[data-v-87033101]{position:relative;display:inline-block}.new-tag[data-v-87033101]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-87033101] .guido__view-option-selection-desktop svg,[data-v-87033101] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-87033101] .in-segments-wrapper__button_selected,[data-v-87033101] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-87033101] .in-tooltip-wrapper-v2__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-fad98586]{gap:8px}.version-history__toolbar[data-v-fad98586]{gap:4px}.view-options-wrapper[data-v-6ebabfe4]{position:relative;display:inline-block}.new-tag[data-v-6ebabfe4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-6ebabfe4] .guido__verion-history-view-option-selection-desktop svg,[data-v-6ebabfe4] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6ebabfe4] .in-segments-wrapper__button_selected,[data-v-6ebabfe4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-6ebabfe4] .in-tooltip-wrapper-v2__icon{cursor:pointer}.auto-save-toggle[data-v-2c964af4]{position:relative}.auto-save-toggle__info-box[data-v-2c964af4]{position:absolute;top:100%;left:0;z-index:10;width:280px}.editor-actions[data-v-2cccbd44]{gap:4px}.header-wrapper[data-v-d11dd577]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.validation-error-list[data-v-c5ff3804]{gap:16px}.validation-error-row[data-v-c5ff3804]{gap:8px;padding:24px;border:1px solid #E1E1E1;border-radius:8px}.validation-error-row__icon[data-v-c5ff3804]{flex-shrink:0;font-size:24px;line-height:0}.validation-error-row__text[data-v-c5ff3804]{font-size:13px;line-height:16px;color:#292929;word-break:break-word}.guido-editor__wrapper[data-v-22e84203]{--ribbon-offset: 0px;position:relative;width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__container[data-v-22e84203]{width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__no-header[data-v-22e84203]{height:calc(100vh - 75px - var(--ribbon-offset))}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-91a26acd]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-91a26acd]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-91a26acd]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-91a26acd]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-91a26acd]{object-fit:cover;transform:scale(1)}[data-v-b9a93c6e] .guido__verion-history-view-option-selection-desktop svg,[data-v-b9a93c6e] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-b9a93c6e] .in-segments-wrapper__button_selected,[data-v-b9a93c6e] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-cf946232]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-cf946232]{min-height:504px}.iframe-wrapper[data-v-f255b2bb]{width:258px}.iframe-scaled[data-v-f255b2bb]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-6bcaca8a] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-f16f20f8] .vueperslides__bullets{pointer-events:none!important}[data-v-f16f20f8] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-bb3cca55] .vueperslides__bullets{pointer-events:none!important}[data-v-bb3cca55] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-19d8cb42] .vueperslides__bullets,[data-v-ec2027ff] .vueperslides__bullets,[data-v-b09e80c4] .vueperslides__bullets{pointer-events:none!important}[data-v-b09e80c4] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-9bdef600] .vueperslides__parallax-wrapper{padding-bottom:110px!important}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd]{width:100%;max-width:none}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd] .in-skeleton{width:100%!important}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd] .in-dropdown-box__container{width:413px}.assign-strategy-drawer .spaced-dot-sep{background-image:linear-gradient(90deg,#91949f 20%,#fff0 0);background-position:center bottom;background-repeat:repeat-x;background-size:5px 1px}.assign-strategy-drawer .spaced-dot-sep--top{background-position:center top}.assign-strategy-drawer .spaced-dot-sep--fc-n:first-child{background:none}.guido-code-editor-field__label[data-v-e96c7aa3]{margin:0 0 8px;color:#2c3546;font-size:13px;line-height:16px}[data-v-a4b2ccb9] .guido-display-condition-academy{color:#0a2ecc;text-decoration:underline}[data-v-a4b2ccb9] .guido-display-condition-create__optional{color:#666}.guido-display-condition-create__separator[data-v-a4b2ccb9]{height:1px;margin:0 0 24px;background-image:linear-gradient(to right,#91949F 1px,transparent 1px);background-size:5px 1px}.guido-display-condition-create__method-title[data-v-a4b2ccb9]{margin:0 0 24px;color:#292929;font-size:13px;font-weight:600;letter-spacing:1.2px;line-height:20px;text-transform:uppercase}.guido-display-condition-create__methods[data-v-a4b2ccb9]{display:flex;gap:16px;margin-bottom:24px}[data-v-10ac7a13] .guido-display-condition-academy{color:#0a2ecc;text-decoration:underline}.guido-display-condition-select-root[data-v-10ac7a13] .in-drawer__footer{justify-content:flex-start}.guido-display-condition-select__delete-modal[data-v-10ac7a13]{position:relative;z-index:145}.guido-display-condition-select__delete-modal[data-v-10ac7a13] .in-modal-v2-wrapper__header-title{margin-bottom:0}.guido-display-condition-select__delete-text[data-v-10ac7a13]{margin:0;color:#292929}.guido-display-condition-select__list[data-v-10ac7a13]{display:flex;flex-direction:column;gap:24px;margin:0;padding:0;list-style:none}.guido-display-condition-card[data-v-10ac7a13]{border:1px solid #E1E1E1;border-radius:4px;background-color:#fff}.guido-display-condition-card__header[data-v-10ac7a13]{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px}.guido-display-condition-card__text[data-v-10ac7a13]{min-width:0}.guido-display-condition-card__name[data-v-10ac7a13]{margin:0;overflow:hidden;color:#292929;font-size:16px;font-weight:600;line-height:24px;text-overflow:ellipsis;white-space:nowrap}.guido-display-condition-card__description[data-v-10ac7a13]{margin:4px 0 0;overflow:hidden;color:#666;font-size:13px;line-height:16px;text-overflow:ellipsis;white-space:nowrap}.guido-display-condition-card__actions[data-v-10ac7a13]{display:flex;flex-shrink:0;align-items:center;gap:16px}.guido-display-condition-card__split[data-v-10ac7a13]{position:relative;display:flex;gap:1px}.guido-display-condition-card__menu[data-v-10ac7a13]{position:absolute;z-index:2;top:calc(100% + 2px);right:0;min-width:115px;padding:4px 0;border-radius:4px;background-color:#fff;box-shadow:0 4px 16px #22293829}.guido-display-condition-card__menu-item[data-v-10ac7a13]{width:100%;padding:8px 16px;border:0;background:none;color:#222938;cursor:pointer;font-size:14px;line-height:24px;text-align:left}.guido-display-condition-card__menu-item[data-v-10ac7a13]:hover,.guido-display-condition-card__menu-item[data-v-10ac7a13]:focus-visible{background-color:#eff2f4}.guido-display-condition-card__divider[data-v-10ac7a13]{width:1px;height:24px;background-color:#dcdee6}.guido-display-condition-card__expand[data-v-10ac7a13]{display:flex;padding:0;border:0;background:none;cursor:pointer}.guido-display-condition-card__code[data-v-10ac7a13]{margin:1px 15px 15px;padding:8px;border:1px solid #E1E1E1;border-radius:4px;background-color:#fff;color:#101727;font-family:inherit;font-size:15px;line-height:24px;white-space:pre-wrap;word-break:break-word}.legacy-strategy-updated-modal[data-v-da2225a1]{position:relative;z-index:145}

package/dist/services/displayConditionApi.js

@@ -1,19 +1,25 @@
-import { useHttp as c } from "../composables/useHttp.js";
-import { SavedDisplayConditionSchema as m, DisplayConditionListResponseSchema as d } from "../@types/display-condition.js";
-import { parse as i } from "../node_modules/valibot/dist/index.js";
-const n = "/email-proxy/v1/display-conditions", p = 100, A = () => {
-  const { get: a, post: s, delete: r } = c();
-  return { list: async (t) => {
-    const e = new URLSearchParams({
-      page: "1",
-      limit: String(p),
+import { useHttp as d } from "../composables/useHttp.js";
+import { SavedDisplayConditionSchema as p, DisplayConditionListResponseSchema as y } from "../@types/display-condition.js";
+import { parse as r } from "../node_modules/valibot/dist/index.js";
+const i = "/email-proxy/v1/display-conditions", S = 100, P = () => {
+  const { get: s, post: c, delete: m } = d(), n = async (t, e) => {
+    const o = new URLSearchParams({
+      page: String(e),
+      limit: String(S),
       sortColumn: "id",
       sortDirection: "desc",
       "filter[syntax]": t
-    }), { data: o } = await a(`${n}?${e.toString()}`);
-    return i(d, o);
+    }), { data: a } = await s(`${i}?${o.toString()}`);
+    return r(y, a);
+  };
+  return { list: async (t) => {
+    const e = await n(t, 1), o = await Promise.all(Array.from(
+      { length: Math.max(e.meta.lastPage - 1, 0) },
+      (a, l) => n(t, l + 2)
+    ));
+    return [e, ...o].flatMap((a) => a.data);
   }, create: async (t, e) => {
-    const { data: o } = await s(n, {
+    const { data: o } = await c(i, {
       name: t.name.trim(),
       description: t.description.trim() || null,
       syntax: e,
@@ -21,19 +27,13 @@ const n = "/email-proxy/v1/display-conditions", p = 100, A = () => {
       codeBefore: t.codeBefore,
       codeAfter: t.codeAfter
     });
-    return i(m, o.data);
-  }, nameExists: async (t, e) => {
-    const { data: o } = await s(`${n}/name-check`, {
-      name: t.trim(),
-      syntax: e
-    });
-    return o.data.exists;
+    return r(p, o.data);
   }, remove: async (t) => {
-    await r(`${n}/${t}`);
+    await m(`${i}/${t}`);
   } };
 };
 export {
-  p as DISPLAY_CONDITIONS_PAGE_LIMIT,
-  n as DISPLAY_CONDITIONS_URL,
-  A as useDisplayConditionApi
+  S as DISPLAY_CONDITIONS_PAGE_LIMIT,
+  i as DISPLAY_CONDITIONS_URL,
+  P as useDisplayConditionApi
 };

package/dist/src/composables/useDisplayConditions.d.ts

@@ -7,7 +7,7 @@ export declare const useDisplayConditions: () => {
     handleOpen: (detail: DisplayConditionOpenDetail) => void;
     cancel: () => void;
     loadList: () => Promise<void>;
-    validate: (draft: DisplayConditionDraft, intent: CreateIntent) => DraftErrors;
+    validate: (draft: DisplayConditionDraft) => DraftErrors;
     notifyInvalid: () => void;
     createInline: (draft: DisplayConditionDraft) => void;
     createAndSave: (draft: DisplayConditionDraft) => Promise<DraftErrors | null>;

package/dist/src/extensions/DisplayConditions/control.d.ts

@@ -4,6 +4,7 @@ export declare class DisplayConditionsControl extends CommonControl {
     private expanded;
     private listeners;
     private resizeObserver;
+    private detachOutsideClick;
     getId(): string;
     getTemplate(): string;
     onRender(): void;
@@ -11,6 +12,7 @@ export declare class DisplayConditionsControl extends CommonControl {
     onDestroy(): void;
     private getCondition;
     private toggleMenu;
+    private listenOutsideClick;
     private openDrawer;
     private applyCondition;
     private wire;

package/dist/src/services/displayConditionApi.d.ts

@@ -1,9 +1,8 @@
-import type { DisplayConditionDraft, DisplayConditionListResponse, DisplayConditionSyntax, SavedDisplayCondition } from '@@/Types/display-condition';
+import type { DisplayConditionDraft, DisplayConditionSyntax, SavedDisplayCondition } from '@@/Types/display-condition';
 export declare const DISPLAY_CONDITIONS_URL = "/email-proxy/v1/display-conditions";
 export declare const DISPLAY_CONDITIONS_PAGE_LIMIT = 100;
 export declare const useDisplayConditionApi: () => {
-    list: (syntax: DisplayConditionSyntax) => Promise<DisplayConditionListResponse>;
+    list: (syntax: DisplayConditionSyntax) => Promise<SavedDisplayCondition[]>;
     create: (draft: DisplayConditionDraft, syntax: DisplayConditionSyntax) => Promise<SavedDisplayCondition>;
-    nameExists: (name: string, syntax: DisplayConditionSyntax) => Promise<boolean>;
     remove: (id: number) => Promise<void>;
 };

package/dist/src/utils/displayCondition.d.ts

@@ -1,4 +1,10 @@
 import type { AppliedDisplayCondition, DisplayConditionSource } from '@@/Types/display-condition';
 export declare const parseSource: (condition: AppliedDisplayCondition | null | undefined) => DisplayConditionSource | null;
+type ConditionLike = Omit<AppliedDisplayCondition, 'description'> & {
+    description?: string | null;
+};
+export declare const toAppliedCondition: (condition: ConditionLike | null | undefined) => AppliedDisplayCondition | null;
+export declare const nextConditionId: () => number;
 export type CodeField = 'codeBefore' | 'codeAfter';
 export declare const findInvalidCodeFields: (codeBefore: string, codeAfter: string) => CodeField[];
+export {};

package/dist/utils/displayCondition.js

@@ -1,21 +1,26 @@
-import { DisplayConditionSourceType as i } from "../enums/display-condition.js";
-const S = (s) => {
-  if (!s)
+import { DisplayConditionSourceType as d } from "../enums/display-condition.js";
+const m = (e) => {
+  if (!e)
     return null;
   try {
-    return JSON.parse(s.extraData ?? "{}").source === i.INLINE ? "inline" : "saved";
+    return JSON.parse(e.extraData ?? "{}").source === d.INLINE ? "inline" : "saved";
   } catch {
     return "saved";
   }
-}, l = /{%-?\s*(\w+)[\s\S]*?-?%}/g, d = /{%[\s\S]*?%}|{{[\s\S]*?}}/g, a = /* @__PURE__ */ new Set(["if", "unless", "for", "case", "capture", "tablerow", "comment"]), f = /* @__PURE__ */ new Set(["else", "elsif", "elif", "when"]), h = (s) => /{%|%}|{{|}}/.test(s.replace(d, "")), A = (s, o) => {
+}, E = (e) => !e || !(e.name || e.beforeScript || e.afterScript) ? null : { ...e, description: e.description ?? "" };
+let o = 0;
+const w = () => (o = Math.max(Date.now(), o + 1), o), f = /{%-?\s*(\w+)[\s\S]*?-?%}/g, p = /{%[\s\S]*?%}|{{[\s\S]*?}}/g, u = /{%-?\s*(comment|raw)\s*-?%}[\s\S]*?{%-?\s*end\1\s*-?%}/g, l = /* @__PURE__ */ new Set(["if", "unless", "for", "case", "capture", "tablerow", "comment"]), h = /* @__PURE__ */ new Set(["else", "elsif", "elif", "when"]), S = (e) => /{%|%}|{{|}}/.test(e.replace(p, "")), C = (e, c) => {
   const t = /* @__PURE__ */ new Set(), r = [];
-  return [["codeBefore", s], ["codeAfter", o]].forEach(([n, c]) => {
-    h(c) && t.add(n), Array.from(c.matchAll(l), (e) => e[1]).forEach((e) => {
-      a.has(e) ? r.push(e) : e.startsWith("end") && a.has(e.slice(3)) ? r.pop() !== e.slice(3) && t.add(n) : f.has(e) && !r.length && t.add(n);
+  return [["codeBefore", e], ["codeAfter", c]].forEach(([n, i]) => {
+    const a = i.replace(u, "");
+    S(a) && t.add(n), Array.from(a.matchAll(f), (s) => s[1]).forEach((s) => {
+      l.has(s) ? r.push(s) : s.startsWith("end") && l.has(s.slice(3)) ? r.pop() !== s.slice(3) && t.add(n) : h.has(s) && !r.length && t.add(n);
     });
   }), r.length && t.add("codeAfter"), [...t];
 };
 export {
-  A as findInvalidCodeFields,
-  S as parseSource
+  C as findInvalidCodeFields,
+  w as nextConditionId,
+  m as parseSource,
+  E as toAppliedCondition
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.20.1-beta.da6efd5",
+  "version": "3.20.1-beta.dfc8426",
   "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",