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

@enerex/template-studio 1.1.28 → 1.1.29

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 (6) hide show

package/dist/enerex-template-editor.es.js +506 -395
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/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 s, jsxs as C, Fragment as ve } from "react/jsx-runtime";
+import A, { useContext as oe, useState as S, useRef as xe, useEffect as j } from "react";
+import { QueryClient as Se, QueryClientProvider as Ce, useQuery as z, useMutation as ae, useQueryClient as Ee } from "@tanstack/react-query";
+import J from "axios";
+import { Spinner as W, Form as R, Card as X, Row as Ie, Col as q, Button as Z } from "react-bootstrap";
+import { Controller as Ne, useForm as _e } from "react-hook-form";
+import ee, { components as Pe } from "react-select";
+const F = `<!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,201 @@ const L = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
     </div>\r
   </body>\r
 </html>\r
-`, ee = I.createContext(
+`, le = A.createContext(
   void 0
-), ye = ({
-  children: n,
-  configs: r
+), je = ({
+  children: e,
+  configs: n
 }) => {
-  const [s, l] = I.useState(r.clientId), [e, t] = I.useState(r.apiKey), [i, o] = I.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);
+  const [i, a] = A.useState(n.clientId), [r, t] = A.useState(n.apiKey), [o, d] = A.useState(
+    n.enerexIdentifier
+  ), [p, x] = A.useState(n.userName), [I, h] = A.useState(n.projectId), T = (b) => {
+    t(b.apiKey), a(b.clientId), h(b.projectId), d(b.enerexIdentifier), x(b.userName);
   };
-  return /* @__PURE__ */ a(
-    ee.Provider,
+  return /* @__PURE__ */ s(
+    le.Provider,
     {
       value: {
-        clientId: s,
-        apiKey: e,
-        setConfiguration: b,
-        enerexIdentifier: i,
-        projectId: f,
-        userName: c
+        clientId: i,
+        apiKey: r,
+        setConfiguration: T,
+        enerexIdentifier: o,
+        projectId: I,
+        userName: p
       },
-      children: n
+      children: e
     }
   );
-}, T = () => {
-  const n = J(ee);
-  if (!n)
+}, E = () => {
+  const e = oe(le);
+  if (!e)
     throw new Error("widgetConfig must be used within a ConfigProvider");
-  return n;
-}, te = (n = "", r) => ({ get: async (e, t) => {
+  return e;
+}, de = (e = "", n) => ({ get: async (r, t) => {
   try {
-    const i = await V.get(
-      `${n}${e}`,
-      t ?? r
-    );
-    if (i.status === 200)
-      return i.data;
-  } catch (i) {
-    throw i;
-  }
-}, post: async (e, t, i) => {
-  try {
-    const o = await V.post(
-      `${n}${e}`,
-      t,
-      i ?? r
+    const o = await J.get(
+      `${e}${r}`,
+      t ?? n
     );
     if (o.status === 200)
       return o.data;
   } catch (o) {
     throw o;
   }
-} }), $ = {
+}, post: async (r, t, o) => {
+  try {
+    const d = await J.post(
+      `${e}${r}`,
+      t,
+      o ?? n
+    );
+    if (d.status === 200)
+      return d.data;
+  } catch (d) {
+    throw d;
+  }
+} }), H = {
   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({
+}, ce = A.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: n, apiKey: i } = E(), a = {
     headers: {
-      client_id: r,
-      "x-api-key": s
+      client_id: n,
+      "x-api-key": i
     }
-  }, { 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: r, post: t } = de(H.API_BASE_URL, a);
+  return /* @__PURE__ */ s(ce.Provider, { value: { get: r, post: t }, children: e });
+}, Re = ({ children: e }) => {
+  const n = new Se();
+  return /* @__PURE__ */ s(Ae, { children: /* @__PURE__ */ s(Ce, { client: n, children: e }) });
+}, Oe = (e) => {
+  const n = Array.from(new Set(e.map((a) => a.category))), i = [];
+  return n.forEach((a) => {
+    const r = 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;
+    i.push({ category: a, entries: r });
+  }), i;
+}, D = () => {
+  const e = oe(ce);
+  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: n, projectId: i } = E();
+  return z({
     queryKey: ["getTemplateTags"],
-    queryFn: async (e) => await n.get(
-      `${A.MergeTags}${s}/${r}`
+    queryFn: async (r) => await e.get(
+      `${$.MergeTags}${i}/${n}`
     )
   });
-}, Te = () => {
-  const n = N(), { enerexIdentifier: r, projectId: s } = T();
-  return q({
+}, De = () => {
+  const e = D(), { enerexIdentifier: n, projectId: i } = E();
+  return z({
     queryKey: ["getExcludeCategory"],
-    queryFn: async (e) => await n.get(
-      `${A.ExcludeCategory}${s}/${r}`
+    queryFn: async (r) => await e.get(
+      `${$.ExcludeCategory}${i}/${n}`
     )
   });
-}, xe = ({
-  templateHTML: n,
-  className: r = "",
-  loading: s = !1
+}, $e = ({
+  templateHTML: e,
+  className: n = "",
+  loading: i = !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 } = de(), { data: r } = qe(), { data: t } = De(), [o, d] = S(
+    e ?? { html: F, css: "" }
+  ), { enerexIdentifier: p, projectId: x, userName: I } = E(), h = xe(null), T = "https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png", b = "https://plugins.stripo.email/api/v1/auth";
+  j(() => {
+    (async () => (await N(), r && t && await m(H.EDITOR_SCRIPT_URL)))();
+  }, [r, t]);
+  async function N() {
+    window.Zone || await new Promise((f, u) => {
+      const g = document.createElement("script");
+      g.src = "https://unpkg.com/zone.js@0.13.1/bundles/zone.umd.min.js";
+      const v = document.querySelector("script[nonce]")?.nonce;
+      v && g.setAttribute("nonce", v), g.onload = () => f(), g.onerror = () => u(new Error("Failed to load zone.js")), document.head.appendChild(g);
+    });
+  }
+  async function m(f) {
+    let u = document.getElementById(
+      "UiEditorScript"
+    );
+    u || (u = document.createElement("script"), u.id = "UiEditorScript", u.src = f, u.onload = async () => {
+      await _();
+    }, document.body.appendChild(u)), await new Promise(
+      (g) => u.addEventListener("load", () => g(), { once: !0 })
     );
+  }
+  const _ = async () => {
+    const f = h.current;
+    if (!f) {
+      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: o.html,
+      css: o.css,
+      modulesExcludedCategories: t ?? [],
+      forceRecreate: !0,
+      metadata: {
+        emailId: `${x}_${p}`,
+        userId: "1",
+        username: I,
+        avatarUrl: T
+      },
+      locale: "en",
+      onTokenRefreshRequest: async (g) => {
+        const v = {
+          pluginId: H.EDITOR_PLUGIN_ID,
+          secretKey: H.EDITOR_SECRET_KEY,
+          userId: "12",
+          role: "user"
+        }, L = await a(
+          b,
+          v
+        );
+        L?.token && g(L.token);
+      },
+      mergeTags: Oe(r ?? [])
+    };
+    for (const [g, v] of Object.entries({
+      codeEditorButtonSelector: "#codeEditor",
+      undoButtonSelector: "#undoButton",
+      redoButtonSelector: "#redoButton",
+      mobileViewButtonSelector: "#mobileViewButton",
+      desktopViewButtonSelector: "#desktopViewButton"
+    }))
+      f.ownerDocument && f.getRootNode() instanceof ShadowRoot && f.getRootNode().querySelector(v) && (u[g] = v);
+    await window.UIEditor.initEditor(f, 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__ */ s("div", { className: "position-relative", children: /* @__PURE__ */ C("div", { className: `editor-container ${n}`, children: [
+    i && /* @__PURE__ */ s("div", { className: "loading-overlay", children: /* @__PURE__ */ s(
+      W,
       {
         animation: "border",
         style: { width: "11px", height: "11px" },
@@ -536,148 +564,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__ */ s("div", { id: "externalSystemContainer" }),
+    /* @__PURE__ */ s("div", { id: "stripoEditorContainer", ref: h })
   ] }) });
-}, Q = ({
-  label: n,
-  register: r,
-  validation: s,
-  required: l = !1,
-  name: e,
+}, te = ({
+  label: e,
+  register: n,
+  validation: i,
+  required: a = !1,
+  name: r,
   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: o = "",
+  ...d
+}) => /* @__PURE__ */ C(R.Group, { className: o + " mb-1", children: [
+  e ? /* @__PURE__ */ C(R.Label, { className: "mb-3 d-block form-label", children: [
+    e,
+    a && /* @__PURE__ */ s("label", { className: "text-danger", children: "*" })
   ] }) : null,
-  /* @__PURE__ */ a(
-    S.Control,
+  /* @__PURE__ */ s(
+    R.Control,
     {
-      name: e,
+      name: r,
       type: "text",
-      ...o,
-      isInvalid: !!(t && t[e]),
-      ...r ? r(e, {
-        ...s
+      ...d,
+      isInvalid: !!(t && t[r]),
+      ...n ? n(r, {
+        ...i
       }) : {},
-      className: `react-select__control ${t && t[e] && "border border-danger"}`
+      className: `react-select__control ${t && t[r] && "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[r] ? /* @__PURE__ */ s(R.Control.Feedback, { type: "invalid", children: t[r].message }) : null
+] }), Le = () => {
+  const e = D(), { enerexIdentifier: n, projectId: i } = E();
+  return z({
     queryKey: ["getTemplatesList"],
-    queryFn: async (e) => await n.get(
-      `${A.Template_list}${s}/${r}`
+    queryFn: async (r) => await e.get(
+      `${$.Template_list}${i}/${n}`
     )
   });
 };
-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 V(e) {
+  return e.sort((n, i) => n.name.localeCompare(i.name));
 }
-const Ee = () => {
-  const n = N(), { enerexIdentifier: r, projectId: s } = T();
-  return Z({
+const ke = () => {
+  const e = D(), { enerexIdentifier: n, projectId: i } = E();
+  return ae({
     mutationKey: ["getTemplate"],
-    mutationFn: async ({ id: e }) => {
-      if (e)
-        return await n.get(
-          `${A.Template}${r}/${e}/${s}`
+    mutationFn: async ({ id: r }) => {
+      if (r)
+        return await e.get(
+          `${$.Template}${n}/${r}/${i}`
         );
     }
   });
-}, Se = () => {
-  const n = N(), { enerexIdentifier: r, projectId: s } = T();
-  return q({
+}, Be = () => {
+  const e = D(), { enerexIdentifier: n, projectId: i } = E();
+  return z({
     queryKey: ["getTemplateTypes"],
-    queryFn: async (e) => await n.get(
-      `${A.TemplateTypes}${r}/${s}`
+    queryFn: async (r) => await e.get(
+      `${$.TemplateTypes}${n}/${i}`
     )
   });
 };
-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 K = { 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 ne;
+function Me() {
+  return ne || (ne = 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)));
+      var n = {}.hasOwnProperty;
+      function i() {
+        for (var t = "", o = 0; o < arguments.length; o++) {
+          var d = arguments[o];
+          d && (t = r(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 i.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 o = "";
+        for (var d in t)
+          n.call(t, d) && t[d] && (o = r(o, d));
+        return o;
       }
-      function e(t, i) {
-        return i ? t ? t + " " + i : t + i : t;
+      function r(t, o) {
+        return o ? t ? t + " " + o : t + o : t;
       }
-      n.exports ? (s.default = s, n.exports = s) : window.classNames = s;
+      e.exports ? (i.default = i, e.exports = i) : window.classNames = i;
     })();
-  }(k)), k.exports;
+  }(K)), K.exports;
 }
-var Ae = Ne();
-const Y = /* @__PURE__ */ _e(Ae), Pe = ({
-  name: n = "",
-  control: r,
-  options: s,
-  multiple: l = !1,
-  placeholder: e,
+var Fe = Me();
+const re = /* @__PURE__ */ Ue(Fe), se = (e) => e.data.isSeparator ? /* @__PURE__ */ s("div", { style: { padding: 0, margin: "2px 0" }, children: /* @__PURE__ */ s(
+  "hr",
+  {
+    style: {
+      border: 0,
+      borderTop: "1px solid #bdbdbdff",
+      padding: 0,
+      margin: 0
+    }
+  }
+) }) : /* @__PURE__ */ s(Pe.Option, { ...e }), He = ({
+  name: e = "",
+  control: n,
+  options: i,
+  multiple: a = !1,
+  placeholder: r,
   validation: t,
-  labelKey: i = "name",
-  disabled: o,
-  isInvalid: c,
-  value: y,
-  onChange: f,
+  labelKey: o = "name",
+  disabled: d,
+  isInvalid: p,
+  value: x,
+  onChange: I,
   uncontrolled: h,
-  menuPlacement: b = "auto",
-  closeOnSelect: m = !0
+  menuPlacement: T = "auto",
+  closeOnSelect: b = !0
 }) => {
-  const u = {
-    control: (p) => ({
-      ...p,
+  const N = {
+    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 +719,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 h ? /* @__PURE__ */ s(
+    ee,
     {
-      className: Y({
-        "is-invalid": c
+      components: { Option: se },
+      isOptionDisabled: (m) => !!m.isSeparator,
+      className: re({
+        "is-invalid": p
       }),
-      styles: u,
+      styles: N,
       classNamePrefix: "react-select",
-      isMulti: l,
-      options: s,
-      onChange: f,
-      placeholder: e,
+      isMulti: a,
+      options: i,
+      onChange: I,
+      placeholder: r,
       menuPortalTarget: document.body,
-      value: y,
-      getOptionLabel: typeof i == "string" ? (p) => p[i] : i,
-      getOptionValue: (p) => p.id,
-      isDisabled: o,
-      menuPlacement: b,
-      closeMenuOnSelect: m
+      value: x,
+      getOptionLabel: typeof o == "string" ? (m) => m[o] : o,
+      getOptionValue: (m) => m.id,
+      isDisabled: d,
+      menuPlacement: T,
+      closeMenuOnSelect: b
     }
-  ) : /* @__PURE__ */ a(
-    ge,
+  ) : /* @__PURE__ */ s(
+    Ne,
     {
-      control: r,
-      name: n,
+      control: n,
+      name: e,
       rules: t,
-      render: ({ field: { onChange: p, value: g, onBlur: j } }) => /* @__PURE__ */ a(
-        G,
+      render: ({ field: { onChange: m, value: _, onBlur: f } }) => /* @__PURE__ */ s(
+        ee,
         {
-          className: Y({
-            "is-invalid": c
+          components: { Option: se },
+          isOptionDisabled: (u) => !!u.isSeparator,
+          className: re({
+            "is-invalid": p
           }),
-          styles: u,
+          styles: N,
           classNamePrefix: "react-select",
-          isMulti: l,
-          options: s,
-          onBlur: j,
-          onChange: p,
-          placeholder: e,
+          isMulti: a,
+          options: i,
+          onBlur: f,
+          onChange: m,
+          placeholder: r,
           menuPortalTarget: document.body,
-          value: g,
-          getOptionLabel: typeof i == "string" ? (w) => w[i] : i,
-          getOptionValue: (w) => w.id,
-          isDisabled: o,
-          menuPlacement: b,
-          closeMenuOnSelect: m
+          value: _,
+          getOptionLabel: typeof o == "string" ? (u) => u[o] : o,
+          getOptionValue: (u) => u.id,
+          isDisabled: d,
+          menuPlacement: T,
+          closeMenuOnSelect: b
         },
-        g ? JSON.stringify(g) : "reset"
+        _ ? JSON.stringify(_) : "reset"
       )
     }
   );
-}, X = ({
-  label: n,
-  name: r,
-  validation: s,
-  control: l,
-  error: e,
+}, G = ({
+  label: e,
+  name: n,
+  validation: i,
+  control: a,
+  error: r,
   ...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(R.Group, { className: "mb-1", children: [
+  e && /* @__PURE__ */ C(R.Label, { className: "mb-3 d-block form-label", children: [
+    e,
     " ",
-    t.required && /* @__PURE__ */ a("span", { className: "text-danger", children: "*" })
+    t.required && /* @__PURE__ */ s("span", { className: "text-danger", children: "*" })
   ] }),
-  /* @__PURE__ */ a(
-    Pe,
+  /* @__PURE__ */ s(
+    He,
     {
-      control: l,
+      control: a,
       options: t.options ?? [],
-      validation: s,
-      isInvalid: e && !!e[r],
-      name: r
+      validation: i,
+      isInvalid: r && !!r[n],
+      name: n
     }
   ),
-  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({
+  r && r[n] ? /* @__PURE__ */ s(R.Control.Feedback, { type: "invalid", children: r[n].message }) : null
+] }), ze = () => {
+  const e = D();
+  Ee();
+  const { enerexIdentifier: n, projectId: i } = E();
+  return ae({
     mutationKey: ["saveTemplate"],
-    mutationFn: async (e) => (e.enerexIdentifier = r ?? "", e.projectId = s ?? "", await n.post(
-      `${A.SaveTemplate}`,
-      e
+    mutationFn: async (r) => (r.enerexIdentifier = n ?? "", r.projectId = i ?? "", await e.post(
+      `${$.SaveTemplate}`,
+      r
     ))
   });
-}, O = { id: "", name: "New (Blank)" }, Re = ({
-  onSelectItem: n,
-  templateLoading: r,
-  onReset: s
+}, Q = {
+  id: "",
+  name: "New (Blank)"
+}, ie = {
+  id: "",
+  name: "Separator",
+  isSeparator: !0
+}, Ve = ({
+  onSelectItem: e,
+  templateLoading: n,
+  onReset: i
 }) => {
   const {
-    register: l,
-    handleSubmit: e,
+    register: a,
+    handleSubmit: r,
     clearErrors: t,
-    setValue: i,
-    control: o,
-    watch: c,
-    reset: y,
-    formState: { errors: f }
-  } = fe({
+    setValue: o,
+    control: d,
+    watch: p,
+    reset: x,
+    setError: I,
+    formState: { errors: h }
+  } = _e({
     defaultValues: {
       templateName: "",
+      subTemplateType: void 0,
       subject: "",
       templateType: void 0,
-      template: O
+      template: Q
     },
     mode: "onChange"
   }), {
-    data: h,
+    data: T,
     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);
+    isLoading: N
+  } = Le(), [m, _] = S([]), [f, u] = S(), [g, v] = S(), { mutateAsync: L, isPending: O } = ke(), { mutateAsync: pe, isPending: B } = ze(), { data: U, isLoading: Y } = Be(), [me, ue] = S([]), [P, M] = S([]);
+  j(() => {
+    if (U) {
+      let l = U.filter((c) => c.id != null).sort((c, w) => c.name.localeCompare(w.name));
+      ue(
+        V(l.filter((c) => c.parent_id === 0))
+      ), M(
+        V(
+          l.filter(
+            (c) => c.parent_id.toString() === `${p("templateType")?.id}`
+          )
+        )
+      );
+    }
+  }, [U]);
+  const fe = (l, c) => {
+    let w = [];
+    return l.forEach((y, k) => {
+      c.includes(k) && k !== 0 && w.push(ie), w.push(y);
+    }), w;
+  };
+  j(() => {
+    n(!!O);
+  }, [O]), j(() => {
+    T?.sort((l, c) => l.readonly !== c.readonly ? (l.readonly ? 0 : 1) - (c.readonly ? 0 : 1) : l.name.localeCompare(c.name)), _(T ?? []);
+  }, [T]);
+  const ge = async (l) => {
+    u(l), l && !l.readonly ? (o("templateName", l?.name), t()) : (o("templateName", ""), o("subject", ""));
+    const c = await L({ id: l?.id });
+    v(c || void 0);
   };
-  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) => {
+  j(() => {
+    if (o("template", Q), p("templateType")) {
+      let l = U?.filter((c) => c.id !== void 0) ?? [];
+      M(
+        V(
+          l.filter(
+            (c) => c.parent_id.toString() === `${p("templateType")?.id}`
+          )
+        )
+      ), o("subTemplateType", void 0);
+    }
+  }, [p("templateType")]), j(() => {
+    let l = m.find((c) => c.id === p("template")?.id);
+    ge(l);
+  }, [p("template")]), j(() => {
+    g && f ? (e(g), o("subject", g.subject ?? "")) : e(void 0);
+  }, [g, f, e]);
+  const ye = () => {
+    let l = [Q], c = m.filter(
+      (y) => (y.type?.toString() === p(
+        P.length > 0 ? "subTemplateType" : "templateType"
+      )?.id.toString() || y.type === null) && p(P.length > 0 ? "subTemplateType" : "templateType")?.id != null
+    ), w = fe(c, [c.findIndex((y) => !y.readonly)]);
+    return w.length > 0 && (l.push(ie), l = [
+      ...l,
+      ...w.map((y) => ({
+        id: y.id,
+        name: y.name,
+        isSeparator: y.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, y = "";
+        f?.readonly && (w = "", y = l.template.id);
+        let k = m.find(
+          (Te) => Te.name === l.templateName.trim()
+        );
+        if (k && k.id !== w) {
+          I("templateName", {
+            type: "validate",
+            message: "Template name already exists. Please choose a different name."
+          });
+          return;
+        }
+        let be = !!(P && P.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: y
         };
-        await se(de) && (t(), y(), b());
+        await pe(we) && (t(), x(), M([]), b());
       }
     );
   };
-  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__ */ s(X, { className: "border border-0 text-start", children: /* @__PURE__ */ s(X.Body, { className: "pe-0 ps-2", children: /* @__PURE__ */ s("form", { onSubmit: r(he), children: /* @__PURE__ */ s("div", { className: "template-list-container gap-3", children: /* @__PURE__ */ C(Ie, { children: [
+    /* @__PURE__ */ s(q, { children: /* @__PURE__ */ s(
+      G,
       {
         label: "Type",
-        control: o,
-        error: f,
-        options: ie,
+        control: d,
+        error: h,
+        options: me,
+        required: !0,
+        validation: {
+          required: {
+            value: !0,
+            message: "Select a type"
+          }
+        },
+        ...a("templateType")
+      }
+    ) }),
+    P && P.length > 0 && /* @__PURE__ */ s(q, { children: /* @__PURE__ */ s(
+      G,
+      {
+        label: "Sub Type",
+        control: d,
+        error: h,
+        options: P,
         required: !0,
         validation: {
           required: {
@@ -872,34 +984,26 @@ const Y = /* @__PURE__ */ _e(Ae), Pe = ({
             message: "Select a type"
           }
         },
-        ...l("templateType")
+        ...a("subTemplateType")
       }
     ) }),
-    /* @__PURE__ */ a(P, { children: /* @__PURE__ */ a(
-      X,
+    /* @__PURE__ */ s(q, { children: /* @__PURE__ */ s(
+      G,
       {
         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: h,
+        options: ye(),
         required: !1,
-        ...l("template")
+        ...a("template")
       }
     ) }),
-    /* @__PURE__ */ a(P, { children: /* @__PURE__ */ a(
-      Q,
+    /* @__PURE__ */ s(q, { children: /* @__PURE__ */ s(
+      te,
       {
         label: "Name",
-        register: l,
-        error: f,
+        register: a,
+        error: h,
         required: !0,
         name: "templateName",
         validation: {
@@ -910,93 +1014,100 @@ const Y = /* @__PURE__ */ _e(Ae), Pe = ({
         }
       }
     ) }),
-    c("templateType")?.id === "2" && /* @__PURE__ */ a(P, { children: /* @__PURE__ */ a(
-      Q,
+    p("templateType")?.id === "2" && /* @__PURE__ */ s(q, { children: /* @__PURE__ */ s(
+      te,
       {
         label: "Subject",
-        register: l,
-        error: f,
+        register: a,
+        error: h,
         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(q, { className: "d-flex align-items-end justify-content-end gap-2 mb-3", children: [
+      /* @__PURE__ */ s(
+        Z,
         {
           style: { width: "70px" },
           variant: "primary",
-          disabled: m || _ || R || U,
+          disabled: N || O || B || Y,
           onClick: () => {
-            j(void 0), y(), s();
+            u(void 0), x(), M([]), i();
           },
-          children: _ || R ? /* @__PURE__ */ a(
-            B,
+          children: O || B ? /* @__PURE__ */ s(
+            W,
             {
               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__ */ s("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" && (f?.id ?? "")) !== "") && /* @__PURE__ */ s(ve, { children: /* @__PURE__ */ s(
+        Z,
         {
           type: "submit",
           variant: "primary",
           style: { width: "80px" },
-          disabled: m || _ || R || U,
-          children: _ || R ? /* @__PURE__ */ a(
-            B,
+          disabled: N || O || B || Y,
+          children: O || B ? /* @__PURE__ */ s(
+            W,
             {
               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__ */ s("span", { className: "visually-hidden", children: "Loading..." })
             }
-          ) : g?.readonly ? "Save as" : "Save"
+          ) : f?.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 [n, i] = S(), [a, r] = S(!1);
+  return /* @__PURE__ */ s(je, { configs: e, children: /* @__PURE__ */ s(Re, { children: /* @__PURE__ */ C("div", { className: "root-widget", children: [
+    /* @__PURE__ */ s(
+      Ve,
       {
-        templateLoading: e,
-        onSelectItem: (o) => {
-          s(o), window.StripoEditorApi && window.StripoEditorApi.actionsApi && window.StripoEditorApi.actionsApi.updateHtmlAndCss(
-            o?.html ?? L,
-            o?.css ?? "",
-            ""
-          );
+        templateLoading: r,
+        onSelectItem: (d) => {
+          if (i(d), window.StripoEditorApi && window.StripoEditorApi.actionsApi) {
+            let p = F;
+            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, "", "");
+          r(!1), i(void 0), window.StripoEditorApi && window.StripoEditorApi.actionsApi && window.StripoEditorApi.actionsApi.updateHtmlAndCss(
+            F,
+            "",
+            ""
+          );
         }
       }
     ),
-    /* @__PURE__ */ a(
-      xe,
+    /* @__PURE__ */ s(
+      $e,
       {
         templateHTML: {
-          css: r?.css ?? "",
-          html: r?.html ?? L
+          css: n?.css ?? "",
+          html: n?.html ?? F
         },
-        loading: l,
+        loading: !1,
         className: "col-span-5"
       }
     )
   ] }) }) });
 };
 export {
-  Ue as EditorWidget
+  et as EditorWidget
 };