npm - @enerex/template-studio - Versions diffs - 1.1.28 → 1.1.30 - Mend

@enerex/template-studio 1.1.28 → 1.1.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/enerex-template-editor.es.js +492 -382
package/dist/enerex-template-editor.umd.js +3 -3
package/dist/types/component/editor/types.d.ts +23 -0
package/dist/types/component/form-input/select.d.ts +3 -3
package/dist/types/context/configuration-provider.d.ts +0 -1
package/dist/types/utils/utility.d.ts +1 -0
package/package.json +1 -1

package/dist/enerex-template-editor.es.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { jsx as a, jsxs as v } from "react/jsx-runtime";
-import I, { useContext as J, useState as E, useEffect as C } from "react";
-import { QueryClient as ce, QueryClientProvider as pe, useQuery as q, useMutation as Z, useQueryClient as me } from "@tanstack/react-query";
-import V from "axios";
-import { Spinner as B, Form as S, Card as K, Row as ue, Col as P, Button as z } from "react-bootstrap";
-import { Controller as ge, useForm as fe } from "react-hook-form";
-import G from "react-select";
-const L = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+import { jsx as i, jsxs as C, Fragment as ve } from "react/jsx-runtime";
+import q, { useContext as oe, useState as S, useRef as xe, useEffect as N } from "react";
+import { QueryClient as Se, QueryClientProvider as Ce, useQuery as H, useMutation as se, useQueryClient as Ee } from "@tanstack/react-query";
+import Y from "axios";
+import { Spinner as Q, Form as P, Card as J, Row as Ie, Col as O, Button as X } from "react-bootstrap";
+import { Controller as _e, useForm as Ne } from "react-hook-form";
+import Z, { components as Pe } from "react-select";
+const M = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
 <html\r
   dir="ltr"\r
   xmlns:o="urn:schemas-microsoft-com:office:office"\r
@@ -361,173 +361,200 @@ const L = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
     </div>\r
   </body>\r
 </html>\r
-`, ee = I.createContext(
+`, ae = q.createContext(
   void 0
-), ye = ({
-  children: n,
+), je = ({
+  children: e,
   configs: r
 }) => {
-  const [s, l] = I.useState(r.clientId), [e, t] = I.useState(r.apiKey), [i, o] = I.useState(
+  const [o, a] = q.useState(r.clientId), [n, t] = q.useState(r.apiKey), [s, d] = q.useState(
     r.enerexIdentifier
-  ), [c, y] = I.useState(r.userName), [f, h] = I.useState(r.projectId), b = (m) => {
-    t(m.apiKey), l(m.clientId), h(m.projectId), o(m.enerexIdentifier), y(m.userName);
+  ), [p, T] = q.useState(r.projectId), v = (y) => {
+    t(y.apiKey), a(y.clientId), T(y.projectId), d(y.enerexIdentifier);
   };
-  return /* @__PURE__ */ a(
-    ee.Provider,
+  return /* @__PURE__ */ i(
+    ae.Provider,
     {
       value: {
-        clientId: s,
-        apiKey: e,
-        setConfiguration: b,
-        enerexIdentifier: i,
-        projectId: f,
-        userName: c
+        clientId: o,
+        apiKey: n,
+        setConfiguration: v,
+        enerexIdentifier: s,
+        projectId: p
       },
-      children: n
+      children: e
     }
   );
-}, T = () => {
-  const n = J(ee);
-  if (!n)
+}, E = () => {
+  const e = oe(ae);
+  if (!e)
     throw new Error("widgetConfig must be used within a ConfigProvider");
-  return n;
-}, te = (n = "", r) => ({ get: async (e, t) => {
+  return e;
+}, le = (e = "", r) => ({ get: async (n, t) => {
   try {
-    const i = await V.get(
-      `${n}${e}`,
+    const s = await Y.get(
+      `${e}${n}`,
       t ?? r
     );
-    if (i.status === 200)
-      return i.data;
-  } catch (i) {
-    throw i;
+    if (s.status === 200)
+      return s.data;
+  } catch (s) {
+    throw s;
   }
-}, post: async (e, t, i) => {
+}, post: async (n, t, s) => {
   try {
-    const o = await V.post(
-      `${n}${e}`,
+    const d = await Y.post(
+      `${e}${n}`,
       t,
-      i ?? r
+      s ?? r
     );
-    if (o.status === 200)
-      return o.data;
-  } catch (o) {
-    throw o;
+    if (d.status === 200)
+      return d.data;
+  } catch (d) {
+    throw d;
   }
-} }), $ = {
+} }), F = {
   EDITOR_SCRIPT_URL: "https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js",
   EDITOR_PLUGIN_ID: "1afdc3161ec7409a8627a1c8561d45f5",
   EDITOR_SECRET_KEY: "54ba748ed7e94f2e929555783acb03da",
   API_BASE_URL: "https://dev-socket.enerex.com/common/api"
   //API_BASE_URL: "https://localhost:44338/api",
   // more env variables...
-}, ne = I.createContext({
+}, de = q.createContext({
   get: () => {
     throw new Error("HttpClientContext.get not implemented");
   },
   post: () => {
     throw new Error("HttpClientContext.post not implemented");
   }
-}), he = ({ children: n }) => {
-  const { clientId: r, apiKey: s } = T(), l = {
+}), Ae = ({ children: e }) => {
+  const { clientId: r, apiKey: o } = E(), a = {
     headers: {
       client_id: r,
-      "x-api-key": s
+      "x-api-key": o
     }
-  }, { get: e, post: t } = te($.API_BASE_URL, l);
-  return /* @__PURE__ */ a(ne.Provider, { value: { get: e, post: t }, children: n });
-}, be = ({ children: n }) => {
-  const r = new ce();
-  return /* @__PURE__ */ a(he, { children: /* @__PURE__ */ a(pe, { client: r, children: n }) });
-}, we = (n) => {
-  const r = Array.from(new Set(n.map((l) => l.category))), s = [];
-  return r.forEach((l) => {
-    const e = n.filter((t) => t.category === l).map((t) => ({
+  }, { get: n, post: t } = le(F.API_BASE_URL, a);
+  return /* @__PURE__ */ i(de.Provider, { value: { get: n, post: t }, children: e });
+}, Re = ({ children: e }) => {
+  const r = new Se();
+  return /* @__PURE__ */ i(Ae, { children: /* @__PURE__ */ i(Ce, { client: r, children: e }) });
+}, Oe = (e) => {
+  const r = Array.from(new Set(e.map((a) => a.category))), o = [];
+  return r.forEach((a) => {
+    const n = e.filter((t) => t.category === a).map((t) => ({
       label: t.label,
       value: t.value,
       hint: t.hint,
       hidden: t.hidden
     }));
-    s.push({ category: l, entries: e });
-  }), s;
-}, N = () => {
-  const n = J(ne);
-  if (n)
-    return n;
+    o.push({ category: a, entries: n });
+  }), o;
+}, D = () => {
+  const e = oe(de);
+  if (e)
+    return e;
   throw new Error("useHttpClient must be used within a HttpClientProvider");
-}, A = {
+}, $ = {
   Template_list: "/Template/list/",
   Template: "/Template/GetTemplate/",
   MergeTags: "/Template/TemplateMergeTags/",
   ExcludeCategory: "/Template/GetExcludeCategories/",
   SaveTemplate: "/Template/save-update/",
   TemplateTypes: "/Template/TemplateTypes/"
-}, ve = () => {
-  const n = N(), { enerexIdentifier: r, projectId: s } = T();
-  return q({
+}, qe = () => {
+  const e = D(), { enerexIdentifier: r, projectId: o } = E();
+  return H({
     queryKey: ["getTemplateTags"],
-    queryFn: async (e) => await n.get(
-      `${A.MergeTags}${s}/${r}`
+    queryFn: async (n) => await e.get(
+      `${$.MergeTags}${o}/${r}`
     )
   });
-}, Te = () => {
-  const n = N(), { enerexIdentifier: r, projectId: s } = T();
-  return q({
+}, De = () => {
+  const e = D(), { enerexIdentifier: r, projectId: o } = E();
+  return H({
     queryKey: ["getExcludeCategory"],
-    queryFn: async (e) => await n.get(
-      `${A.ExcludeCategory}${s}/${r}`
+    queryFn: async (n) => await e.get(
+      `${$.ExcludeCategory}${o}/${r}`
     )
   });
-}, xe = ({
-  templateHTML: n,
+}, $e = ({
+  templateHTML: e,
   className: r = "",
-  loading: s = !1
+  loading: o = !1
 }) => {
-  const { post: l } = te(), { data: e } = ve(), { data: t } = Te(), [i, o] = E(
-    n ?? { html: L, css: "" }
-  ), { enerexIdentifier: c, projectId: y, userName: f } = T(), h = "https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png", b = "https://plugins.stripo.email/api/v1/auth";
-  C(() => {
-    if (e && t && !document.getElementById("UiEditorScript")) {
-      const u = document.createElement("script");
-      u.id = "UiEditorScript", u.type = "module", u.src = $.EDITOR_SCRIPT_URL, u.onload = m, document.body.appendChild(u);
-    }
-  }, [e, t]);
-  const m = async () => {
-    window.UIEditor.initEditor(
-      document.querySelector("#stripoEditorContainer"),
-      {
-        html: i.html,
-        css: i.css,
-        modulesExcludedCategories: t ?? [],
-        forceRecreate: !0,
-        metadata: {
-          emailId: `${y}_${c}`,
-          userId: "1",
-          username: f,
-          avatarUrl: h
-        },
-        locale: "en",
-        onTokenRefreshRequest: async function(u) {
-          const p = {
-            pluginId: $.EDITOR_PLUGIN_ID,
-            secretKey: $.EDITOR_SECRET_KEY,
-            userId: "12",
-            role: "user"
-          }, g = await l(b, p);
-          g && u(g.token);
-        },
-        codeEditorButtonSelector: "#codeEditor",
-        undoButtonSelector: "#undoButton",
-        redoButtonSelector: "#redoButton",
-        mobileViewButtonSelector: "#mobileViewButton",
-        desktopViewButtonSelector: "#desktopViewButton",
-        mergeTags: we(e ?? [])
-      }
+  const { post: a } = le(), { data: n } = qe(), { data: t } = De(), [s, d] = S(
+    e ?? { html: M, css: "" }
+  ), { enerexIdentifier: p, projectId: T } = E(), v = xe(null), y = "https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png", x = "https://plugins.stripo.email/api/v1/auth";
+  N(() => {
+    (async () => (await j(), n && t && await I(F.EDITOR_SCRIPT_URL)))();
+  }, [n, t]);
+  async function j() {
+    window.Zone || await new Promise((g, u) => {
+      const f = document.createElement("script");
+      f.src = "https://unpkg.com/zone.js@0.13.1/bundles/zone.umd.min.js";
+      const b = document.querySelector("script[nonce]")?.nonce;
+      b && f.setAttribute("nonce", b), f.onload = () => g(), f.onerror = () => u(new Error("Failed to load zone.js")), document.head.appendChild(f);
+    });
+  }
+  async function I(g) {
+    let u = document.getElementById(
+      "UiEditorScript"
+    );
+    u || (u = document.createElement("script"), u.id = "UiEditorScript", u.src = g, u.onload = async () => {
+      await m();
+    }, document.body.appendChild(u)), await new Promise(
+      (f) => u.addEventListener("load", () => f(), { once: !0 })
     );
+  }
+  const m = async () => {
+    const g = v.current;
+    if (!g) {
+      console.error("Missing #stripoEditorContainer in DOM");
+      return;
+    }
+    if (!window.UIEditor || typeof window.UIEditor.initEditor != "function") {
+      console.error("UIEditor script not loaded or not exposing initEditor");
+      return;
+    }
+    const u = {
+      html: s.html,
+      css: s.css,
+      modulesExcludedCategories: t ?? [],
+      forceRecreate: !0,
+      metadata: {
+        emailId: `${T}_${p}`,
+        userId: "1",
+        // username: userName,
+        avatarUrl: y
+      },
+      locale: "en",
+      onTokenRefreshRequest: async (f) => {
+        const b = {
+          pluginId: F.EDITOR_PLUGIN_ID,
+          secretKey: F.EDITOR_SECRET_KEY,
+          userId: "12",
+          role: "user"
+        }, A = await a(
+          x,
+          b
+        );
+        A?.token && f(A.token);
+      },
+      mergeTags: Oe(n ?? [])
+    };
+    for (const [f, b] of Object.entries({
+      codeEditorButtonSelector: "#codeEditor",
+      undoButtonSelector: "#undoButton",
+      redoButtonSelector: "#redoButton",
+      mobileViewButtonSelector: "#mobileViewButton",
+      desktopViewButtonSelector: "#desktopViewButton"
+    }))
+      g.ownerDocument && g.getRootNode() instanceof ShadowRoot && g.getRootNode().querySelector(b) && (u[f] = b);
+    await window.UIEditor.initEditor(g, u);
   };
-  return /* @__PURE__ */ a("div", { className: "position-relative", children: /* @__PURE__ */ v("div", { className: `editor-container ${r}`, children: [
-    s && /* @__PURE__ */ a("div", { className: "loading-overlay", children: /* @__PURE__ */ a(
-      B,
+  return /* @__PURE__ */ i("div", { className: "position-relative", children: /* @__PURE__ */ C("div", { className: `editor-container ${r}`, children: [
+    o && /* @__PURE__ */ i("div", { className: "loading-overlay", children: /* @__PURE__ */ i(
+      Q,
       {
         animation: "border",
         style: { width: "11px", height: "11px" },
@@ -536,148 +563,150 @@ const L = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
         className: "me-1"
       }
     ) }),
-    /* @__PURE__ */ a("div", { id: "externalSystemContainer" }),
-    /* @__PURE__ */ a("div", { id: "stripoEditorContainer" })
+    /* @__PURE__ */ i("div", { id: "externalSystemContainer" }),
+    /* @__PURE__ */ i("div", { id: "stripoEditorContainer", ref: v })
   ] }) });
-}, Q = ({
-  label: n,
+}, ee = ({
+  label: e,
   register: r,
-  validation: s,
-  required: l = !1,
-  name: e,
+  validation: o,
+  required: a = !1,
+  name: n,
   error: t,
-  className: i = "",
-  ...o
-}) => /* @__PURE__ */ v(S.Group, { className: i + " mb-1", children: [
-  n ? /* @__PURE__ */ v(S.Label, { className: "mb-3 d-block form-label", children: [
-    n,
-    l && /* @__PURE__ */ a("label", { className: "text-danger", children: "*" })
+  className: s = "",
+  ...d
+}) => /* @__PURE__ */ C(P.Group, { className: s + " mb-1", children: [
+  e ? /* @__PURE__ */ C(P.Label, { className: "mb-3 d-block form-label", children: [
+    e,
+    a && /* @__PURE__ */ i("label", { className: "text-danger", children: "*" })
   ] }) : null,
-  /* @__PURE__ */ a(
-    S.Control,
+  /* @__PURE__ */ i(
+    P.Control,
     {
-      name: e,
+      name: n,
       type: "text",
-      ...o,
-      isInvalid: !!(t && t[e]),
-      ...r ? r(e, {
-        ...s
+      ...d,
+      isInvalid: !!(t && t[n]),
+      ...r ? r(n, {
+        ...o
       }) : {},
-      className: `react-select__control ${t && t[e] && "border border-danger"}`
+      className: `react-select__control ${t && t[n] && "border border-danger"}`
     }
   ),
-  t && t[e] ? /* @__PURE__ */ a(S.Control.Feedback, { type: "invalid", children: t[e].message }) : null
-] }), Ce = () => {
-  const n = N(), { enerexIdentifier: r, projectId: s } = T();
-  return q({
+  t && t[n] ? /* @__PURE__ */ i(P.Control.Feedback, { type: "invalid", children: t[n].message }) : null
+] }), Le = () => {
+  const e = D(), { enerexIdentifier: r, projectId: o } = E();
+  return H({
     queryKey: ["getTemplatesList"],
-    queryFn: async (e) => await n.get(
-      `${A.Template_list}${s}/${r}`
+    queryFn: async (n) => await e.get(
+      `${$.Template_list}${o}/${r}`
     )
   });
 };
-function Ie(n) {
-  let r = [], s = n.filter((e) => e.id != null), l = [];
-  return s.forEach((e) => {
-    e.parent_id !== 0 && !l.includes(e.parent_id) && l.push(e.parent_id);
-  }), l.forEach((e) => {
-    let t = s.filter((o) => o.parent_id === e).map((o) => ({ name: o.name, id: o.id })), i = s.find((o) => o.id === e)?.name;
-    i && r.push({ label: i, options: t });
-  }), s.forEach((e) => {
-    e.parent_id === 0 && !l.includes(e.id) && r.push({ name: e.name, id: e.id });
-  }), r;
+function z(e) {
+  return e.sort((r, o) => r.name.localeCompare(o.name));
 }
-const Ee = () => {
-  const n = N(), { enerexIdentifier: r, projectId: s } = T();
-  return Z({
+const ke = () => {
+  const e = D(), { enerexIdentifier: r, projectId: o } = E();
+  return se({
     mutationKey: ["getTemplate"],
-    mutationFn: async ({ id: e }) => {
-      if (e)
-        return await n.get(
-          `${A.Template}${r}/${e}/${s}`
+    mutationFn: async ({ id: n }) => {
+      if (n)
+        return await e.get(
+          `${$.Template}${r}/${n}/${o}`
         );
     }
   });
-}, Se = () => {
-  const n = N(), { enerexIdentifier: r, projectId: s } = T();
-  return q({
+}, Be = () => {
+  const e = D(), { enerexIdentifier: r, projectId: o } = E();
+  return H({
     queryKey: ["getTemplateTypes"],
-    queryFn: async (e) => await n.get(
-      `${A.TemplateTypes}${r}/${s}`
+    queryFn: async (n) => await e.get(
+      `${$.TemplateTypes}${r}/${o}`
     )
   });
 };
-function _e(n) {
-  return n && n.__esModule && Object.prototype.hasOwnProperty.call(n, "default") ? n.default : n;
+function Ue(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var k = { exports: {} };
+var V = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
 */
-var W;
-function Ne() {
-  return W || (W = 1, function(n) {
+var te;
+function Me() {
+  return te || (te = 1, function(e) {
     (function() {
       var r = {}.hasOwnProperty;
-      function s() {
-        for (var t = "", i = 0; i < arguments.length; i++) {
-          var o = arguments[i];
-          o && (t = e(t, l(o)));
+      function o() {
+        for (var t = "", s = 0; s < arguments.length; s++) {
+          var d = arguments[s];
+          d && (t = n(t, a(d)));
         }
         return t;
       }
-      function l(t) {
+      function a(t) {
         if (typeof t == "string" || typeof t == "number")
           return t;
         if (typeof t != "object")
           return "";
         if (Array.isArray(t))
-          return s.apply(null, t);
+          return o.apply(null, t);
         if (t.toString !== Object.prototype.toString && !t.toString.toString().includes("[native code]"))
           return t.toString();
-        var i = "";
-        for (var o in t)
-          r.call(t, o) && t[o] && (i = e(i, o));
-        return i;
+        var s = "";
+        for (var d in t)
+          r.call(t, d) && t[d] && (s = n(s, d));
+        return s;
       }
-      function e(t, i) {
-        return i ? t ? t + " " + i : t + i : t;
+      function n(t, s) {
+        return s ? t ? t + " " + s : t + s : t;
       }
-      n.exports ? (s.default = s, n.exports = s) : window.classNames = s;
+      e.exports ? (o.default = o, e.exports = o) : window.classNames = o;
     })();
-  }(k)), k.exports;
+  }(V)), V.exports;
 }
-var Ae = Ne();
-const Y = /* @__PURE__ */ _e(Ae), Pe = ({
-  name: n = "",
+var Fe = Me();
+const ne = /* @__PURE__ */ Ue(Fe), re = (e) => e.data.isSeparator ? /* @__PURE__ */ i("div", { style: { padding: 0, margin: "2px 0" }, children: /* @__PURE__ */ i(
+  "hr",
+  {
+    style: {
+      border: 0,
+      borderTop: "1px solid #bdbdbdff",
+      padding: 0,
+      margin: 0
+    }
+  }
+) }) : /* @__PURE__ */ i(Pe.Option, { ...e }), He = ({
+  name: e = "",
   control: r,
-  options: s,
-  multiple: l = !1,
-  placeholder: e,
+  options: o,
+  multiple: a = !1,
+  placeholder: n,
   validation: t,
-  labelKey: i = "name",
-  disabled: o,
-  isInvalid: c,
-  value: y,
-  onChange: f,
-  uncontrolled: h,
-  menuPlacement: b = "auto",
-  closeOnSelect: m = !0
+  labelKey: s = "name",
+  disabled: d,
+  isInvalid: p,
+  value: T,
+  onChange: v,
+  uncontrolled: y,
+  menuPlacement: x = "auto",
+  closeOnSelect: j = !0
 }) => {
-  const u = {
-    control: (p) => ({
-      ...p,
+  const I = {
+    control: (m) => ({
+      ...m,
       minHeight: "33px",
       // state.isFocused can display different borderColor if you need it
-      borderColor: c ? "var(--bs-form-invalid-border-color) !important" : "var(--ct-input-border-color)",
-      backgroundImage: c ? 'url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23fa5c7c%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23fa5c7c%27 stroke=%27none%27/%3e%3c/svg%3e")' : "none",
+      borderColor: p ? "var(--bs-form-invalid-border-color) !important" : "var(--ct-input-border-color)",
+      backgroundImage: p ? 'url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23fa5c7c%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23fa5c7c%27 stroke=%27none%27/%3e%3c/svg%3e")' : "none",
       backgroundRepeat: "no-repeat",
       backgroundPosition: "right calc(0.375em + 0.225rem) center",
       backgroundSize: "calc(0.75em + 0.45rem) calc(0.75em + 0.45rem)",
       "&:hover": {
-        borderColor: c ? "var(--bs-form-invalid-border-color)" : "var(--ct-input-border-color)"
+        borderColor: p ? "var(--bs-form-invalid-border-color)" : "var(--ct-input-border-color)"
       },
       "& .react-select__single-value": {
         color: "var(--ct-input-color) !important"
@@ -689,182 +718,264 @@ const Y = /* @__PURE__ */ _e(Ae), Pe = ({
         display: "none"
       }
     }),
-    menu: (p) => ({
-      ...p,
+    menu: (m) => ({
+      ...m,
       marginTop: 0,
       width: "max-content",
       minWidth: "100%"
     }),
-    menuPortal: (p) => ({
-      ...p,
+    menuPortal: (m) => ({
+      ...m,
       zIndex: 9999
     }),
-    multiValueRemove: (p) => ({
-      ...p,
-      display: o ? "none" : "block"
+    multiValueRemove: (m) => ({
+      ...m,
+      display: d ? "none" : "block"
     })
   };
-  return h ? /* @__PURE__ */ a(
-    G,
+  return y ? /* @__PURE__ */ i(
+    Z,
     {
-      className: Y({
-        "is-invalid": c
+      components: { Option: re },
+      isOptionDisabled: (m) => !!m.isSeparator,
+      className: ne({
+        "is-invalid": p
       }),
-      styles: u,
+      styles: I,
       classNamePrefix: "react-select",
-      isMulti: l,
-      options: s,
-      onChange: f,
-      placeholder: e,
+      isMulti: a,
+      options: o,
+      onChange: v,
+      placeholder: n,
       menuPortalTarget: document.body,
-      value: y,
-      getOptionLabel: typeof i == "string" ? (p) => p[i] : i,
-      getOptionValue: (p) => p.id,
-      isDisabled: o,
-      menuPlacement: b,
-      closeMenuOnSelect: m
+      value: T,
+      getOptionLabel: typeof s == "string" ? (m) => m[s] : s,
+      getOptionValue: (m) => m.id,
+      isDisabled: d,
+      menuPlacement: x,
+      closeMenuOnSelect: j
     }
-  ) : /* @__PURE__ */ a(
-    ge,
+  ) : /* @__PURE__ */ i(
+    _e,
     {
       control: r,
-      name: n,
+      name: e,
       rules: t,
-      render: ({ field: { onChange: p, value: g, onBlur: j } }) => /* @__PURE__ */ a(
-        G,
+      render: ({ field: { onChange: m, value: g, onBlur: u } }) => /* @__PURE__ */ i(
+        Z,
         {
-          className: Y({
-            "is-invalid": c
+          components: { Option: re },
+          isOptionDisabled: (f) => !!f.isSeparator,
+          className: ne({
+            "is-invalid": p
           }),
-          styles: u,
+          styles: I,
           classNamePrefix: "react-select",
-          isMulti: l,
-          options: s,
-          onBlur: j,
-          onChange: p,
-          placeholder: e,
+          isMulti: a,
+          options: o,
+          onBlur: u,
+          onChange: m,
+          placeholder: n,
           menuPortalTarget: document.body,
           value: g,
-          getOptionLabel: typeof i == "string" ? (w) => w[i] : i,
-          getOptionValue: (w) => w.id,
-          isDisabled: o,
-          menuPlacement: b,
-          closeMenuOnSelect: m
+          getOptionLabel: typeof s == "string" ? (f) => f[s] : s,
+          getOptionValue: (f) => f.id,
+          isDisabled: d,
+          menuPlacement: x,
+          closeMenuOnSelect: j
         },
         g ? JSON.stringify(g) : "reset"
       )
     }
   );
-}, X = ({
-  label: n,
+}, K = ({
+  label: e,
   name: r,
-  validation: s,
-  control: l,
-  error: e,
+  validation: o,
+  control: a,
+  error: n,
   ...t
-}) => /* @__PURE__ */ v(S.Group, { className: "mb-1", children: [
-  n && /* @__PURE__ */ v(S.Label, { className: "mb-3 d-block form-label", children: [
-    n,
+}) => /* @__PURE__ */ C(P.Group, { className: "mb-1", children: [
+  e && /* @__PURE__ */ C(P.Label, { className: "mb-3 d-block form-label", children: [
+    e,
     " ",
-    t.required && /* @__PURE__ */ a("span", { className: "text-danger", children: "*" })
+    t.required && /* @__PURE__ */ i("span", { className: "text-danger", children: "*" })
   ] }),
-  /* @__PURE__ */ a(
-    Pe,
+  /* @__PURE__ */ i(
+    He,
     {
-      control: l,
+      control: a,
       options: t.options ?? [],
-      validation: s,
-      isInvalid: e && !!e[r],
+      validation: o,
+      isInvalid: n && !!n[r],
       name: r
     }
   ),
-  e && e[r] ? /* @__PURE__ */ a(S.Control.Feedback, { type: "invalid", children: e[r].message }) : null
-] }), je = () => {
-  const n = N();
-  me();
-  const { enerexIdentifier: r, projectId: s } = T();
-  return Z({
+  n && n[r] ? /* @__PURE__ */ i(P.Control.Feedback, { type: "invalid", children: n[r].message }) : null
+] }), ze = () => {
+  const e = D();
+  Ee();
+  const { enerexIdentifier: r, projectId: o } = E();
+  return se({
     mutationKey: ["saveTemplate"],
-    mutationFn: async (e) => (e.enerexIdentifier = r ?? "", e.projectId = s ?? "", await n.post(
-      `${A.SaveTemplate}`,
-      e
+    mutationFn: async (n) => (n.enerexIdentifier = r ?? "", n.projectId = o ?? "", await e.post(
+      `${$.SaveTemplate}`,
+      n
     ))
   });
-}, O = { id: "", name: "New (Blank)" }, Re = ({
-  onSelectItem: n,
+}, G = {
+  id: "",
+  name: "New (Blank)"
+}, ie = {
+  id: "",
+  name: "Separator",
+  isSeparator: !0
+}, Ve = ({
+  onSelectItem: e,
   templateLoading: r,
-  onReset: s
+  onReset: o
 }) => {
   const {
-    register: l,
-    handleSubmit: e,
+    register: a,
+    handleSubmit: n,
     clearErrors: t,
-    setValue: i,
-    control: o,
-    watch: c,
-    reset: y,
-    formState: { errors: f }
-  } = fe({
+    setValue: s,
+    control: d,
+    watch: p,
+    reset: T,
+    setError: v,
+    formState: { errors: y }
+  } = Ne({
     defaultValues: {
       templateName: "",
+      subTemplateType: void 0,
       subject: "",
       templateType: void 0,
-      template: O
+      template: G
     },
     mode: "onChange"
   }), {
-    data: h,
-    refetch: b,
-    isLoading: m
-  } = Ce(), [u, p] = E([]), [g, j] = E(), [w, M] = E(), { mutateAsync: re, isPending: _ } = Ee(), { mutateAsync: se, isPending: R } = je(), { data: D, isLoading: U } = Se(), [ie, ae] = E([]);
-  C(() => {
-    D && ae(Ie(D));
-  }, [D]), C(() => {
-    r(!!_);
-  }, [_]), C(() => {
-    p(h ?? []);
-  }, [h]);
-  const le = async (d) => {
-    j(d), d ? (i("templateName", d?.name), t()) : (i("templateName", ""), i("subject", ""));
-    const x = await re({ id: d?.id });
-    M(x || void 0);
+    data: x,
+    refetch: j,
+    isLoading: I
+  } = Le(), [m, g] = S([]), [u, f] = S(), [b, A] = S(), { mutateAsync: ce, isPending: R } = ke(), { mutateAsync: pe, isPending: k } = ze(), { data: B, isLoading: W } = Be(), [me, ue] = S([]), [_, U] = S([]);
+  N(() => {
+    if (B) {
+      let l = B.filter((c) => c.id != null).sort((c, w) => c.name.localeCompare(w.name));
+      ue(
+        z(l.filter((c) => c.parent_id === 0))
+      ), U(
+        z(
+          l.filter(
+            (c) => c.parent_id.toString() === `${p("templateType")?.id}`
+          )
+        )
+      );
+    }
+  }, [B]);
+  const fe = (l, c) => {
+    let w = [];
+    return l.forEach((h, L) => {
+      c.includes(L) && L !== 0 && w.push(ie), w.push(h);
+    }), w;
   };
-  C(() => {
-    i("template", O);
-  }, [c("templateType")]), C(() => {
-    let d = u.find((x) => x.id === c("template")?.id);
-    le(d);
-  }, [c("template")]), C(() => {
-    w && g ? (n(w), i("subject", w.subject ?? "")) : n(void 0);
-  }, [w, g, n]);
-  const oe = (d) => {
+  N(() => {
+    r(!!R);
+  }, [R]), N(() => {
+    x?.sort((l, c) => l.readonly !== c.readonly ? (l.readonly ? 0 : 1) - (c.readonly ? 0 : 1) : l.name.localeCompare(c.name)), g(x ?? []);
+  }, [x]);
+  const ge = async (l) => {
+    f(l), l && !l.readonly ? (s("templateName", l?.name), t()) : (s("templateName", ""), s("subject", ""));
+    const c = await ce({ id: l?.id });
+    A(c || void 0);
+  };
+  N(() => {
+    if (s("template", G), p("templateType")) {
+      let l = B?.filter((c) => c.id !== void 0) ?? [];
+      U(
+        z(
+          l.filter(
+            (c) => c.parent_id.toString() === `${p("templateType")?.id}`
+          )
+        )
+      ), s("subTemplateType", void 0);
+    }
+  }, [p("templateType")]), N(() => {
+    let l = m.find((c) => c.id === p("template")?.id);
+    ge(l);
+  }, [p("template")]), N(() => {
+    b && u ? (e(b), s("subject", b.subject ?? "")) : e(void 0);
+  }, [b, u, e]);
+  const ye = () => {
+    let l = [G], c = m.filter(
+      (h) => (h.type?.toString() === p(
+        _.length > 0 ? "subTemplateType" : "templateType"
+      )?.id.toString() || h.type === null) && p(_.length > 0 ? "subTemplateType" : "templateType")?.id != null
+    ), w = fe(c, [c.findIndex((h) => !h.readonly)]);
+    return w.length > 0 && (l.push(ie), l = [
+      ...l,
+      ...w.map((h) => ({
+        id: h.id,
+        name: h.name,
+        isSeparator: h.isSeparator
+      }))
+    ]), l.length ? l : [];
+  }, he = (l) => {
     window.StripoEditorApi.actionsApi.getTemplateData(
-      async (x) => {
-        let H = d.template.id, F = "";
-        g?.readonly && (H = "", F = d.template.id);
-        const de = {
+      async (c) => {
+        let w = l.template.id, h = "";
+        u?.readonly && (w = "", h = l.template.id);
+        let L = m.find(
+          (Te) => Te.name === l.templateName.trim()
+        );
+        if (L && L.id !== w) {
+          v("templateName", {
+            type: "validate",
+            message: "Template name already exists. Please choose a different name."
+          });
+          return;
+        }
+        let be = !!(_ && _.length > 0);
+        const we = {
           enerexIdentifier: "",
           projectId: "",
-          templateId: H,
-          templateType: d.templateType.id,
-          name: d.templateName,
-          html: x.html,
-          css: x.css,
-          subject: d.templateType.id === "2" ? d?.subject ?? "" : "",
-          parent_id: F
+          templateId: w,
+          templateType: be ? l.subTemplateType.id : l.templateType.id,
+          name: l.templateName.trim(),
+          html: c.html,
+          css: c.css,
+          subject: l.templateType.id === "2" ? l?.subject ?? "" : "",
+          parent_id: h
         };
-        await se(de) && (t(), y(), b());
+        await pe(we) && (t(), T(), U([]), j());
       }
     );
   };
-  return /* @__PURE__ */ a(K, { className: "border border-0 text-start", children: /* @__PURE__ */ a(K.Body, { className: "pe-0 ps-2", children: /* @__PURE__ */ a("form", { onSubmit: e(oe), children: /* @__PURE__ */ a("div", { className: "template-list-container gap-3", children: /* @__PURE__ */ v(ue, { children: [
-    /* @__PURE__ */ a(P, { children: /* @__PURE__ */ a(
-      X,
+  return /* @__PURE__ */ i(J, { className: "border border-0 text-start", children: /* @__PURE__ */ i(J.Body, { className: "pe-0 ps-2", children: /* @__PURE__ */ i("form", { onSubmit: n(he), children: /* @__PURE__ */ i("div", { className: "template-list-container gap-3", children: /* @__PURE__ */ C(Ie, { children: [
+    /* @__PURE__ */ i(O, { children: /* @__PURE__ */ i(
+      K,
       {
         label: "Type",
-        control: o,
-        error: f,
-        options: ie,
+        control: d,
+        error: y,
+        options: me,
+        required: !0,
+        validation: {
+          required: {
+            value: !0,
+            message: "Select a type"
+          }
+        },
+        ...a("templateType")
+      }
+    ) }),
+    _ && _.length > 0 && /* @__PURE__ */ i(O, { children: /* @__PURE__ */ i(
+      K,
+      {
+        label: "Sub Type",
+        control: d,
+        error: y,
+        options: _,
         required: !0,
         validation: {
           required: {
@@ -872,34 +983,26 @@ const Y = /* @__PURE__ */ _e(Ae), Pe = ({
             message: "Select a type"
           }
         },
-        ...l("templateType")
+        ...a("subTemplateType")
       }
     ) }),
-    /* @__PURE__ */ a(P, { children: /* @__PURE__ */ a(
-      X,
+    /* @__PURE__ */ i(O, { children: /* @__PURE__ */ i(
+      K,
       {
         label: "Template",
-        control: o,
-        error: f,
-        options: [
-          O,
-          ...u.filter(
-            (d) => (d.type?.toString() === c("templateType")?.id.toString() || d.type === null) && c("templateType")?.id != null
-          ).map((d) => ({
-            id: d.id,
-            name: d.name
-          }))
-        ],
+        control: d,
+        error: y,
+        options: ye(),
         required: !1,
-        ...l("template")
+        ...a("template")
       }
     ) }),
-    /* @__PURE__ */ a(P, { children: /* @__PURE__ */ a(
-      Q,
+    /* @__PURE__ */ i(O, { children: /* @__PURE__ */ i(
+      ee,
       {
         label: "Name",
-        register: l,
-        error: f,
+        register: a,
+        error: y,
         required: !0,
         name: "templateName",
         validation: {
@@ -910,93 +1013,100 @@ const Y = /* @__PURE__ */ _e(Ae), Pe = ({
         }
       }
     ) }),
-    c("templateType")?.id === "2" && /* @__PURE__ */ a(P, { children: /* @__PURE__ */ a(
-      Q,
+    p("templateType")?.id === "2" && /* @__PURE__ */ i(O, { children: /* @__PURE__ */ i(
+      ee,
       {
         label: "Subject",
-        register: l,
-        error: f,
+        register: a,
+        error: y,
         required: !1,
         name: "subject"
       }
     ) }),
-    /* @__PURE__ */ v(P, { className: "d-flex align-items-end justify-content-end gap-2 mb-3", children: [
-      /* @__PURE__ */ a(
-        z,
+    /* @__PURE__ */ C(O, { className: "d-flex align-items-end justify-content-end gap-2 mb-3", children: [
+      /* @__PURE__ */ i(
+        X,
         {
           style: { width: "70px" },
           variant: "primary",
-          disabled: m || _ || R || U,
+          disabled: I || R || k || W,
           onClick: () => {
-            j(void 0), y(), s();
+            f(void 0), T(), U([]), o();
           },
-          children: _ || R ? /* @__PURE__ */ a(
-            B,
+          children: R || k ? /* @__PURE__ */ i(
+            Q,
             {
               animation: "border",
               style: { width: "11px", height: "11px" },
               size: "sm",
               role: "status",
               className: "me-1",
-              children: /* @__PURE__ */ a("span", { className: "visually-hidden", children: "Loading..." })
+              children: /* @__PURE__ */ i("span", { className: "visually-hidden", children: "Loading..." })
             }
           ) : "Clear"
         }
       ),
-      (c("templateType")?.id !== "2" || (g?.id ?? "") !== "") && /* @__PURE__ */ a(
-        z,
+      (p("templateType")?.id.toString() !== "2" || (p("templateType")?.id.toString() === "2" && (u?.id ?? "")) !== "") && /* @__PURE__ */ i(ve, { children: /* @__PURE__ */ i(
+        X,
         {
           type: "submit",
           variant: "primary",
           style: { width: "80px" },
-          disabled: m || _ || R || U,
-          children: _ || R ? /* @__PURE__ */ a(
-            B,
+          disabled: I || R || k || W,
+          children: R || k ? /* @__PURE__ */ i(
+            Q,
             {
               animation: "border",
               style: { width: "11px", height: "11px" },
               size: "sm",
               role: "status",
               className: "me-1",
-              children: /* @__PURE__ */ a("span", { className: "visually-hidden", children: "Loading..." })
+              children: /* @__PURE__ */ i("span", { className: "visually-hidden", children: "Loading..." })
             }
-          ) : g?.readonly ? "Save as" : "Save"
+          ) : u?.readonly ? "Save as" : "Save"
         }
-      )
+      ) })
     ] })
   ] }) }) }) }) });
-}, Ue = ({ config: n }) => {
-  const [r, s] = E(), [l, e] = E(!1);
-  return /* @__PURE__ */ a(ye, { configs: n, children: /* @__PURE__ */ a(be, { children: /* @__PURE__ */ v("div", { className: "root-widget", children: [
-    /* @__PURE__ */ a(
-      Re,
+}, et = ({ config: e }) => {
+  const [r, o] = S(), [a, n] = S(!1);
+  return /* @__PURE__ */ i(je, { configs: e, children: /* @__PURE__ */ i(Re, { children: /* @__PURE__ */ C("div", { className: "root-widget", children: [
+    /* @__PURE__ */ i(
+      Ve,
       {
-        templateLoading: e,
-        onSelectItem: (o) => {
-          s(o), window.StripoEditorApi && window.StripoEditorApi.actionsApi && window.StripoEditorApi.actionsApi.updateHtmlAndCss(
-            o?.html ?? L,
-            o?.css ?? "",
-            ""
-          );
+        templateLoading: n,
+        onSelectItem: (d) => {
+          if (o(d), window.StripoEditorApi && window.StripoEditorApi.actionsApi) {
+            let p = M;
+            window.StripoEditorApi.actionsApi.updateHtmlAndCss(
+              d?.html ?? p,
+              d?.css ?? "",
+              ""
+            );
+          }
         },
         onReset: () => {
-          e(!1), s(void 0), window.StripoEditorApi && window.StripoEditorApi.actionsApi && window.StripoEditorApi.actionsApi.updateHtmlAndCss(L, "", "");
+          n(!1), o(void 0), window.StripoEditorApi && window.StripoEditorApi.actionsApi && window.StripoEditorApi.actionsApi.updateHtmlAndCss(
+            M,
+            "",
+            ""
+          );
         }
       }
     ),
-    /* @__PURE__ */ a(
-      xe,
+    /* @__PURE__ */ i(
+      $e,
       {
         templateHTML: {
           css: r?.css ?? "",
-          html: r?.html ?? L
+          html: r?.html ?? M
         },
-        loading: l,
+        loading: !1,
         className: "col-span-5"
       }
     )
   ] }) }) });
 };
 export {
-  Ue as EditorWidget
+  et as EditorWidget
 };