npm - @enerex/template-studio - Versions diffs - 1.1.37 → 1.1.38 - Mend

@enerex/template-studio 1.1.37 → 1.1.38

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 +649 -497
package/dist/enerex-template-editor.umd.js +3 -3
package/dist/template-studio.css +1 -1
package/dist/types/component/modal/index.d.ts +24 -0
package/dist/types/type/application-type.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 l, jsxs as $, Fragment as De } from "react/jsx-runtime";
-import O, { useContext as we, useState as S, useRef as qe, useEffect as v } from "react";
-import { QueryClient as $e, QueryClientProvider as Re, useQuery as J, useMutation as ve, useQueryClient as Be } from "@tanstack/react-query";
-import me from "axios";
-import { Spinner as Y, Form as H, Card as ue, Row as ke, Col as M, Button as se } from "react-bootstrap";
-import { Controller as Ue, useForm as Me } from "react-hook-form";
-import fe, { components as He } from "react-select";
-const z = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+import { jsx as r, jsxs as S, Fragment as we } from "react/jsx-runtime";
+import k, { useContext as je, useState as v, useRef as We, useEffect as x } from "react";
+import { QueryClient as Ye, QueryClientProvider as ze, useQuery as le, useMutation as Le, useQueryClient as Je } from "@tanstack/react-query";
+import xe from "axios";
+import { Spinner as J, Form as F, Card as Se, Row as Xe, Col as H, Button as re } from "react-bootstrap";
+import { Controller as Ze, useForm as et } from "react-hook-form";
+import Ce, { components as tt } from "react-select";
+const ie = `<!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,45 +361,45 @@ const z = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
     </div>\r
   </body>\r
 </html>\r
-`, xe = O.createContext(
+`, Pe = k.createContext(
   void 0
-), Fe = ({
+), nt = ({
   children: t,
   configs: s
 }) => {
-  const [o, i] = O.useState(s.clientId), [r, e] = O.useState(s.apiKey), [a, c] = O.useState(
+  const [o, l] = k.useState(s.clientId), [i, e] = k.useState(s.apiKey), [a, c] = k.useState(
     s.enerexIdentifier
-  ), [T, y] = O.useState(s.projectId), [C, f] = O.useState(s.userEmail), [_, P] = O.useState(s.isAdmin), [x, g] = O.useState(s.meBaseUrl), [h, u] = O.useState(
+  ), [T, g] = k.useState(s.projectId), [N, f] = k.useState(s.userEmail), [I, j] = k.useState(s.isAdmin), [L, y] = k.useState(s.meBaseUrl), [h, b] = k.useState(
     s.defaultSelector
-  ), m = (b) => {
-    e(b.apiKey), i(b.clientId), y(b.projectId), c(b.enerexIdentifier), f(b.userEmail), P(b.isAdmin), u(b.defaultSelector), g(b.meBaseUrl);
+  ), p = (u) => {
+    e(u.apiKey), l(u.clientId), g(u.projectId), c(u.enerexIdentifier), f(u.userEmail), j(u.isAdmin), b(u.defaultSelector), y(u.meBaseUrl);
   };
-  return /* @__PURE__ */ l(
-    xe.Provider,
+  return /* @__PURE__ */ r(
+    Pe.Provider,
     {
       value: {
         clientId: o,
-        apiKey: r,
-        setConfiguration: m,
+        apiKey: i,
+        setConfiguration: p,
         enerexIdentifier: a,
         projectId: T,
-        userEmail: C,
-        isAdmin: _,
+        userEmail: N,
+        isAdmin: I,
         defaultSelector: h,
-        meBaseUrl: x
+        meBaseUrl: L
       },
       children: t
     }
   );
 }, R = () => {
-  const t = we(xe);
+  const t = je(Pe);
   if (!t)
     throw new Error("widgetConfig must be used within a ConfigProvider");
   return t;
-}, Se = (t = "", s) => ({ get: async (r, e) => {
+}, Oe = (t = "", s) => ({ get: async (i, e) => {
   try {
-    const a = await me.get(
-      `${t}${r}`,
+    const a = await xe.get(
+      `${t}${i}`,
       e ?? s
     );
     if (a.status === 200)
@@ -407,10 +407,10 @@ const z = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
   } catch (a) {
     throw a;
   }
-}, post: async (r, e, a) => {
+}, post: async (i, e, a) => {
   try {
-    const c = await me.post(
-      `${t}${r}`,
+    const c = await xe.post(
+      `${t}${i}`,
       e,
       a ?? s
     );
@@ -419,100 +419,100 @@ const z = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
   } catch (c) {
     throw c;
   }
-} }), Ce = O.createContext({
+} }), De = k.createContext({
   get: () => {
     throw new Error("HttpClientContext.get not implemented");
   },
   post: () => {
     throw new Error("HttpClientContext.post not implemented");
   }
-}), Ge = ({ children: t }) => {
-  const { clientId: s, apiKey: o, isAdmin: i, meBaseUrl: r } = R(), e = {
+}), rt = ({ children: t }) => {
+  const { clientId: s, apiKey: o, isAdmin: l, meBaseUrl: i } = R(), e = {
     headers: {
       client_id: s,
       "x-api-key": o,
-      "Security-Context": i ? "admin" : "viewer"
+      "Security-Context": l ? "admin" : "viewer"
     }
-  }, { get: a, post: c } = Se(r, e);
-  return /* @__PURE__ */ l(Ce.Provider, { value: { get: a, post: c }, children: t });
-}, Ve = ({ children: t }) => {
-  const s = new $e();
-  return /* @__PURE__ */ l(Ge, { children: /* @__PURE__ */ l(Re, { client: s, children: t }) });
-}, ie = {
+  }, { get: a, post: c } = Oe(i, e);
+  return /* @__PURE__ */ r(De.Provider, { value: { get: a, post: c }, children: t });
+}, st = ({ children: t }) => {
+  const s = new Ye();
+  return /* @__PURE__ */ r(rt, { children: /* @__PURE__ */ r(ze, { client: s, children: t }) });
+}, ue = {
   EDITOR_SCRIPT_URL: "https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js",
   EDITOR_PLUGIN_ID: "1afdc3161ec7409a8627a1c8561d45f5",
   EDITOR_SECRET_KEY: "54ba748ed7e94f2e929555783acb03da"
-}, Ke = (t) => {
-  const s = Array.from(new Set(t.map((i) => i.category))), o = [];
-  return s.forEach((i) => {
-    const r = t.filter((e) => e.category === i).map((e) => ({
+}, it = (t) => {
+  const s = Array.from(new Set(t.map((l) => l.category))), o = [];
+  return s.forEach((l) => {
+    const i = t.filter((e) => e.category === l).map((e) => ({
       label: e.label,
       value: e.value,
       hint: e.hint,
       hidden: e.hidden
     }));
-    o.push({ category: i, entries: r });
+    o.push({ category: l, entries: i });
   }), o;
-}, G = () => {
-  const t = we(Ce);
+}, K = () => {
+  const t = je(De);
   if (t)
     return t;
   throw new Error("useHttpClient must be used within a HttpClientProvider");
-}, V = {
+}, Q = {
   Template_list: "/Template/list/",
   Template: "/Template/GetTemplate/",
   MergeTags: "/Template/TemplateMergeTags/",
   ExcludeCategory: "/Template/GetExcludeCategories/",
   SaveTemplate: "/Template/save-update/",
   TemplateTypes: "/Template/TemplateTypes/"
-}, Qe = () => {
-  const t = G(), { enerexIdentifier: s, projectId: o } = R();
-  return J({
+}, lt = () => {
+  const t = K(), { enerexIdentifier: s, projectId: o } = R();
+  return le({
     queryKey: ["getTemplateTags"],
-    queryFn: async (r) => await t.get(
-      `${V.MergeTags}${o}/${s}`
+    queryFn: async (i) => await t.get(
+      `${Q.MergeTags}${o}/${s}`
     )
   });
-}, We = () => {
-  const t = G(), { enerexIdentifier: s, projectId: o } = R();
-  return J({
+}, at = () => {
+  const t = K(), { enerexIdentifier: s, projectId: o } = R();
+  return le({
     queryKey: ["getExcludeCategory"],
-    queryFn: async (r) => await t.get(
-      `${V.ExcludeCategory}${o}/${s}`
+    queryFn: async (i) => await t.get(
+      `${Q.ExcludeCategory}${o}/${s}`
     )
   });
-}, Ye = ({
+}, ot = ({
   templateHTML: t,
   className: s = "",
   loading: o = !1,
-  onEditorInitialized: i
+  onEditorInitialized: l
 }) => {
-  const { post: r } = Se(), { data: e } = Qe(), { data: a } = We(), [c, T] = S(
-    t ?? { html: z, css: "" }
-  ), { userEmail: y } = R(), C = qe(null), f = "https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png", _ = "https://plugins.stripo.email/api/v1/auth";
-  v(() => {
-    (async () => (await P(), e && a && await x(ie.EDITOR_SCRIPT_URL)))();
+  const { post: i } = Oe(), { data: e } = lt(), { data: a } = at(), [c, T] = v(
+    t ?? { html: ie, css: "" }
+  ), { userEmail: g } = R(), N = We(null), f = "https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png", I = "https://plugins.stripo.email/api/v1/auth";
+  x(() => {
+    (async () => (await j(), e && a && await L(ue.EDITOR_SCRIPT_URL)))();
   }, [e, a]);
-  async function P() {
-    window.Zone || await new Promise((h, u) => {
-      const m = document.createElement("script");
-      m.src = "https://unpkg.com/zone.js@0.13.1/bundles/zone.umd.min.js";
-      const b = document.querySelector("script[nonce]")?.nonce;
-      b && m.setAttribute("nonce", b), m.onload = () => h(), m.onerror = () => u(new Error("Failed to load zone.js")), document.head.appendChild(m);
+  async function j() {
+    window.Zone || await new Promise((h, b) => {
+      const p = document.createElement("script");
+      p.src = "https://unpkg.com/zone.js@0.13.1/bundles/zone.umd.min.js";
+      const u = document.querySelector("script[nonce]")?.nonce;
+      u && p.setAttribute("nonce", u), p.onload = () => h(), p.onerror = () => b(new Error("Failed to load zone.js")), document.head.appendChild(p);
     });
   }
-  async function x(h) {
-    let u = document.getElementById(
+  async function L(h) {
+    let b = document.getElementById(
       "UiEditorScript"
     );
-    u || (u = document.createElement("script"), u.id = "UiEditorScript", u.src = h, u.onload = async () => {
-      await g();
-    }, document.body.appendChild(u)), await new Promise(
-      (m) => u.addEventListener("load", () => m(), { once: !0 })
+    b || (b = document.createElement("script"), b.id = "UiEditorScript", b.src = h, b.onload = async () => {
+      await y();
+    }, document.body.appendChild(b)), await new Promise(
+      (p) => b.addEventListener("load", () => p(), { once: !0 })
     );
   }
-  const g = async () => {
-    const h = C.current;
+  const y = async () => {
+    const h = N.current;
     if (!h) {
       console.error("Missing #stripoEditorContainer in DOM");
       return;
@@ -521,159 +521,230 @@ const z = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
       console.error("UIEditor script not loaded or not exposing initEditor");
       return;
     }
-    const u = {
+    const b = {
       html: c.html,
       css: c.css,
       modulesExcludedCategories: a ?? [],
       forceRecreate: !0,
       metadata: {
-        emailId: y,
+        emailId: g,
         userId: "1",
         // username: userName,
         avatarUrl: f
       },
       locale: "en",
-      onTokenRefreshRequest: async (m) => {
-        const b = {
-          pluginId: ie.EDITOR_PLUGIN_ID,
-          secretKey: ie.EDITOR_SECRET_KEY,
-          userId: y,
+      onTokenRefreshRequest: async (p) => {
+        const u = {
+          pluginId: ue.EDITOR_PLUGIN_ID,
+          secretKey: ue.EDITOR_SECRET_KEY,
+          userId: g,
           role: "user"
-        }, B = await r(
-          _,
-          b
+        }, B = await i(
+          I,
+          u
         );
-        B?.token && m(B.token);
+        B?.token && p(B.token);
       },
       onTemplateLoaded: () => {
-        i && i(!0);
+        l && l(!0);
       },
-      mergeTags: Ke(e ?? [])
+      mergeTags: it(e ?? [])
     };
-    for (const [m, b] of Object.entries({
+    for (const [p, u] of Object.entries({
       codeEditorButtonSelector: "#codeEditor",
       undoButtonSelector: "#undoButton",
       redoButtonSelector: "#redoButton",
       mobileViewButtonSelector: "#mobileViewButton",
       desktopViewButtonSelector: "#desktopViewButton"
     }))
-      h.ownerDocument && h.getRootNode() instanceof ShadowRoot && h.getRootNode().querySelector(b) && (u[m] = b);
-    await window.UIEditor.initEditor(h, u);
+      h.ownerDocument && h.getRootNode() instanceof ShadowRoot && h.getRootNode().querySelector(u) && (b[p] = u);
+    await window.UIEditor.initEditor(h, b);
   };
-  return /* @__PURE__ */ l("div", { className: "position-relative", children: /* @__PURE__ */ $("div", { className: `editor-container ${s}`, children: [
-    o && /* @__PURE__ */ l("div", { className: "loading-overlay", children: /* @__PURE__ */ l(
-      Y,
+  return /* @__PURE__ */ r("div", { className: "position-relative", children: /* @__PURE__ */ S("div", { className: `editor-container ${s}`, children: [
+    o && /* @__PURE__ */ r("div", { className: "loading-overlay", children: /* @__PURE__ */ r(
+      J,
       {
         animation: "border",
         style: { width: "11px", height: "11px" },
         size: "sm",
         role: "status",
         className: "me-1",
-        children: /* @__PURE__ */ l("span", { className: "visually-hidden", children: "Loading..." })
+        children: /* @__PURE__ */ r("span", { className: "visually-hidden", children: "Loading..." })
       }
     ) }),
-    /* @__PURE__ */ l("div", { id: "externalSystemContainer" }),
-    /* @__PURE__ */ l("div", { id: "stripoEditorContainer", ref: C })
+    /* @__PURE__ */ r("div", { id: "externalSystemContainer" }),
+    /* @__PURE__ */ r("div", { id: "stripoEditorContainer", ref: N })
   ] }) });
-}, ye = ({
+}, Ee = ({
   label: t,
   register: s,
   validation: o,
-  required: i = !1,
-  name: r,
+  required: l = !1,
+  name: i,
   error: e,
   className: a = "",
   ...c
-}) => /* @__PURE__ */ $(H.Group, { className: a + " mb-1", children: [
-  t ? /* @__PURE__ */ $(H.Label, { className: "mb-3 d-block form-label ts-label-height", children: [
+}) => /* @__PURE__ */ S(F.Group, { className: a + " mb-1", children: [
+  t ? /* @__PURE__ */ S(F.Label, { className: "mb-3 d-block form-label ts-label-height", children: [
     t,
-    i && /* @__PURE__ */ l("label", { className: "text-danger", children: "*" })
+    l && /* @__PURE__ */ r("label", { className: "text-danger", children: "*" })
   ] }) : null,
-  /* @__PURE__ */ l(
-    H.Control,
+  /* @__PURE__ */ r(
+    F.Control,
     {
-      name: r,
+      name: i,
       type: "text",
       ...c,
-      isInvalid: !!(e && e[r]),
-      ...s ? s(r, {
+      isInvalid: !!(e && e[i]),
+      ...s ? s(i, {
         ...o
       }) : {},
-      className: `react-select__control ${e && e[r] && "border border-danger"}`
+      className: `react-select__control ${e && e[i] && "border border-danger"}`
     }
   ),
-  e && e[r] ? /* @__PURE__ */ l(H.Control.Feedback, { type: "invalid", children: e[r].message }) : null
-] }), ze = () => {
-  const t = G(), { enerexIdentifier: s, projectId: o } = R();
-  return J({
+  e && e[i] ? /* @__PURE__ */ r(F.Control.Feedback, { type: "invalid", children: e[i].message }) : null
+] }), dt = ({
+  show: t,
+  variant: s,
+  title: o = "Are you sure?",
+  message: l,
+  label: i = "Name",
+  value: e = "",
+  placeholder: a = "",
+  requiredMessage: c = "This field is required",
+  externalError: T = !1,
+  externalErrorMessage: g = "",
+  confirmText: N = "Ok",
+  cancelText: f = "Cancel",
+  confirmButtonVariant: I = "danger",
+  onConfirm: j,
+  onCancel: L,
+  onInputChange: y
+}) => {
+  const [h, b] = v(e), [p, u] = v(!1);
+  if (x(() => {
+    t && (b(e), u(!1));
+  }, [t, e]), x(() => {
+    T && u(!0);
+  }, [T]), !t) return null;
+  const B = s === "input" && !h.trim(), M = s === "input" && (B || T), ae = B ? c : T ? g : "", q = () => {
+    if (M) {
+      u(!0);
+      return;
+    }
+    j(h.trim());
+  };
+  return /* @__PURE__ */ r("div", { className: "template-studio-modal-overlay", children: /* @__PURE__ */ S("div", { className: "template-studio-modal", children: [
+    /* @__PURE__ */ S("div", { className: "template-studio-modal-header", children: [
+      /* @__PURE__ */ r("h4", { children: o }),
+      /* @__PURE__ */ r("button", { className: "template-studio-modal-close", onClick: L, children: "✕" })
+    ] }),
+    /* @__PURE__ */ S("div", { className: "template-studio-modal-body", children: [
+      l && /* @__PURE__ */ r("p", { children: l }),
+      s === "input" && /* @__PURE__ */ S("div", { className: "mb-3", children: [
+        /* @__PURE__ */ S("label", { className: "form-label", children: [
+          i,
+          /* @__PURE__ */ r("span", { className: "text-danger", children: "*" })
+        ] }),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            type: "text",
+            className: `form-control ${p && M ? "is-invalid" : ""}`,
+            placeholder: a,
+            value: h,
+            onChange: (V) => {
+              b(V.target.value), p && u(!1), y?.(V.target.value);
+            },
+            autoFocus: !0
+          }
+        ),
+        p && M && /* @__PURE__ */ r("div", { className: "invalid-feedback d-block", children: ae })
+      ] })
+    ] }),
+    /* @__PURE__ */ S("div", { className: "template-studio-modal-footer", children: [
+      /* @__PURE__ */ r("button", { className: "btn btn-secondary", onClick: L, children: f }),
+      /* @__PURE__ */ r(
+        "button",
+        {
+          className: `btn btn-${I}`,
+          onClick: q,
+          children: N
+        }
+      )
+    ] })
+  ] }) });
+}, ct = () => {
+  const t = K(), { enerexIdentifier: s, projectId: o } = R();
+  return le({
     queryKey: ["getTemplatesList"],
-    queryFn: async (r) => await t.get(
-      `${V.Template_list}${o}/${s}`
+    queryFn: async (i) => await t.get(
+      `${Q.Template_list}${o}/${s}`
     )
   });
 };
-function le(t) {
+function fe(t) {
   return t.sort((s, o) => s.name.localeCompare(o.name));
 }
-function Je(t) {
+function pt(t) {
   const s = /* @__PURE__ */ new Map(), o = [];
   t.forEach((e) => s.set(e.id, e));
-  let i = t.filter((e) => e.parent_id === 0), r = 0;
-  for (; i.length > 0; ) {
-    o.push({ level: r, data: i });
-    const e = i.map((c) => c.id);
-    i = t.filter(
+  let l = t.filter((e) => e.parent_id === 0), i = 0;
+  for (; l.length > 0; ) {
+    o.push({ level: i, data: l });
+    const e = l.map((c) => c.id);
+    l = t.filter(
       (c) => e.includes(c.parent_id)
-    ), r++;
+    ), i++;
   }
   return o;
 }
-function ae(t, s) {
-  const i = Je(t).find((r) => r.level === s);
-  return i ? i.data : [];
+function ye(t, s) {
+  const l = pt(t).find((i) => i.level === s);
+  return l ? l.data : [];
 }
-const Xe = () => {
-  const t = G(), { enerexIdentifier: s, projectId: o } = R();
-  return ve({
+const mt = () => {
+  const t = K(), { enerexIdentifier: s, projectId: o } = R();
+  return Le({
     mutationKey: ["getTemplate"],
-    mutationFn: async ({ id: r }) => {
-      if (r)
+    mutationFn: async ({ id: i }) => {
+      if (i)
         return await t.get(
-          `${V.Template}${s}/${r}/${o}`
+          `${Q.Template}${s}/${i}/${o}`
         );
     }
   });
-}, Ze = () => {
-  const t = G(), { enerexIdentifier: s, projectId: o } = R();
-  return J({
+}, ut = () => {
+  const t = K(), { enerexIdentifier: s, projectId: o } = R();
+  return le({
     queryKey: ["getTemplateTypes"],
-    queryFn: async (r) => await t.get(
-      `${V.TemplateTypes}${s}/${o}`
+    queryFn: async (i) => await t.get(
+      `${Q.TemplateTypes}${s}/${o}`
     )
   });
 };
-function et(t) {
+function ft(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
-var oe = { exports: {} };
+var ge = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
 */
-var ge;
-function tt() {
-  return ge || (ge = 1, function(t) {
+var Ne;
+function yt() {
+  return Ne || (Ne = 1, function(t) {
     (function() {
       var s = {}.hasOwnProperty;
       function o() {
         for (var e = "", a = 0; a < arguments.length; a++) {
           var c = arguments[a];
-          c && (e = r(e, i(c)));
+          c && (e = i(e, l(c)));
         }
         return e;
       }
-      function i(e) {
+      function l(e) {
         if (typeof e == "string" || typeof e == "number")
           return e;
         if (typeof e != "object")
@@ -684,18 +755,18 @@ function tt() {
           return e.toString();
         var a = "";
         for (var c in e)
-          s.call(e, c) && e[c] && (a = r(a, c));
+          s.call(e, c) && e[c] && (a = i(a, c));
         return a;
       }
-      function r(e, a) {
+      function i(e, a) {
         return a ? e ? e + " " + a : e + a : e;
       }
       t.exports ? (o.default = o, t.exports = o) : window.classNames = o;
     })();
-  }(oe)), oe.exports;
+  }(ge)), ge.exports;
 }
-var nt = tt();
-const he = /* @__PURE__ */ et(nt), be = (t) => t.data.isSeparator ? /* @__PURE__ */ l("div", { style: { padding: 0, margin: "2px 0" }, children: /* @__PURE__ */ l(
+var gt = yt();
+const Ie = /* @__PURE__ */ ft(gt), _e = (t) => t.data.isSeparator ? /* @__PURE__ */ r("div", { style: { padding: 0, margin: "2px 0" }, children: /* @__PURE__ */ r(
   "hr",
   {
     style: {
@@ -705,25 +776,25 @@ const he = /* @__PURE__ */ et(nt), be = (t) => t.data.isSeparator ? /* @__PURE__
       margin: 0
     }
   }
-) }) : /* @__PURE__ */ l(He.Option, { ...t }), rt = ({
+) }) : /* @__PURE__ */ r(tt.Option, { ...t }), ht = ({
   name: t = "",
   control: s,
   options: o,
-  multiple: i = !1,
-  placeholder: r,
+  multiple: l = !1,
+  placeholder: i,
   validation: e,
   labelKey: a = "name",
   disabled: c,
   isInvalid: T,
-  value: y,
-  onChange: C,
+  value: g,
+  onChange: N,
   uncontrolled: f,
-  menuPlacement: _ = "auto",
-  closeOnSelect: P = !0
+  menuPlacement: I = "auto",
+  closeOnSelect: j = !0
 }) => {
-  const x = {
-    control: (g) => ({
-      ...g,
+  const L = {
+    control: (y) => ({
+      ...y,
       minHeight: "33px",
       // state.isFocused can display different borderColor if you need it
       borderColor: T ? "var(--bs-form-invalid-border-color) !important" : "var(--ct-input-border-color)",
@@ -744,505 +815,586 @@ const he = /* @__PURE__ */ et(nt), be = (t) => t.data.isSeparator ? /* @__PURE__
         display: "none"
       }
     }),
-    menu: (g) => ({
-      ...g,
+    menu: (y) => ({
+      ...y,
       marginTop: 0,
       width: "max-content",
       minWidth: "100%"
     }),
-    menuPortal: (g) => ({
-      ...g,
+    menuPortal: (y) => ({
+      ...y,
       zIndex: 9999
     }),
-    multiValueRemove: (g) => ({
-      ...g,
+    multiValueRemove: (y) => ({
+      ...y,
       display: c ? "none" : "block"
     })
   };
-  return f ? /* @__PURE__ */ l(
-    fe,
+  return f ? /* @__PURE__ */ r(
+    Ce,
     {
-      components: { Option: be },
-      isOptionDisabled: (g) => !!g.isSeparator,
-      className: he({
+      components: { Option: _e },
+      isOptionDisabled: (y) => !!y.isSeparator,
+      className: Ie({
         "is-invalid": T
       }),
-      styles: x,
+      styles: L,
       classNamePrefix: "react-select",
-      isMulti: i,
+      isMulti: l,
       options: o,
-      onChange: C,
-      placeholder: r,
+      onChange: N,
+      placeholder: i,
       menuPortalTarget: document.body,
-      value: y,
-      getOptionLabel: typeof a == "string" ? (g) => g[a] : a,
-      getOptionValue: (g) => g.id,
+      value: g,
+      getOptionLabel: typeof a == "string" ? (y) => y[a] : a,
+      getOptionValue: (y) => y.id,
       isDisabled: c,
-      menuPlacement: _,
-      closeMenuOnSelect: P
+      menuPlacement: I,
+      closeMenuOnSelect: j
     }
-  ) : /* @__PURE__ */ l(
-    Ue,
+  ) : /* @__PURE__ */ r(
+    Ze,
     {
       control: s,
       name: t,
       rules: e,
-      render: ({ field: { onChange: g, value: h, onBlur: u } }) => /* @__PURE__ */ l(
-        fe,
+      render: ({ field: { onChange: y, value: h, onBlur: b } }) => /* @__PURE__ */ r(
+        Ce,
         {
-          components: { Option: be },
-          isOptionDisabled: (m) => !!m.isSeparator,
-          className: he({
+          components: { Option: _e },
+          isOptionDisabled: (p) => !!p.isSeparator,
+          className: Ie({
             "is-invalid": T
           }),
-          styles: x,
+          styles: L,
           classNamePrefix: "react-select",
-          isMulti: i,
+          isMulti: l,
           options: o,
-          onBlur: u,
-          onChange: g,
-          placeholder: r,
+          onBlur: b,
+          onChange: y,
+          placeholder: i,
           menuPortalTarget: document.body,
           value: h,
-          getOptionLabel: typeof a == "string" ? (m) => m[a] : a,
-          getOptionValue: (m) => m.id,
+          getOptionLabel: typeof a == "string" ? (p) => p[a] : a,
+          getOptionValue: (p) => p.id,
           isDisabled: c,
-          menuPlacement: _,
-          closeMenuOnSelect: P
+          menuPlacement: I,
+          closeMenuOnSelect: j
         },
         h ? JSON.stringify(h) : "reset"
       )
     }
   );
-}, W = ({
+}, se = ({
   label: t,
   name: s,
   validation: o,
-  control: i,
-  error: r,
+  control: l,
+  error: i,
   ...e
-}) => /* @__PURE__ */ $(H.Group, { className: "mb-1", children: [
-  t && /* @__PURE__ */ $(H.Label, { className: "mb-3 d-block form-label ts-label-height", children: [
+}) => /* @__PURE__ */ S(F.Group, { className: "mb-1", children: [
+  t && /* @__PURE__ */ S(F.Label, { className: "mb-3 d-block form-label ts-label-height", children: [
     t,
     " ",
-    e.required && /* @__PURE__ */ l("span", { className: "text-danger", children: "*" })
+    e.required && /* @__PURE__ */ r("span", { className: "text-danger", children: "*" })
   ] }),
-  /* @__PURE__ */ l(
-    rt,
+  /* @__PURE__ */ r(
+    ht,
     {
-      control: i,
+      control: l,
       disabled: e.disabled,
       options: e.options ?? [],
       validation: o,
-      isInvalid: r && !!r[s],
+      isInvalid: i && !!i[s],
       name: s
     }
   ),
-  r && r[s] ? /* @__PURE__ */ l(H.Control.Feedback, { type: "invalid", children: r[s].message }) : null
-] }), st = () => {
-  const t = G();
-  Be();
+  i && i[s] ? /* @__PURE__ */ r(F.Control.Feedback, { type: "invalid", children: i[s].message }) : null
+] }), bt = () => {
+  const t = K();
+  Je();
   const { enerexIdentifier: s, projectId: o } = R();
-  return ve({
+  return Le({
     mutationKey: ["saveTemplate"],
-    mutationFn: async (r) => (r.enerexIdentifier = s ?? "", r.projectId = o ?? "", await t.post(
-      `${V.SaveTemplate}`,
-      r
+    mutationFn: async (i) => (i.enerexIdentifier = s ?? "", i.projectId = o ?? "", await t.post(
+      `${Q.SaveTemplate}`,
+      i
     ))
   });
-}, K = {
+}, z = {
   id: "",
   name: "New (Blank)"
-}, Te = {
+}, Ae = {
   id: "",
   name: "Separator",
   isSeparator: !0
-}, it = ({
+}, Tt = ({
   onSelectItem: t,
   templateLoading: s,
   onReset: o,
-  editorInitialized: i
+  editorInitialized: l
 }) => {
-  const { isAdmin: r, defaultSelector: e } = R(), {
+  const { isAdmin: i, defaultSelector: e } = R(), {
     register: a,
     handleSubmit: c,
     clearErrors: T,
-    setValue: y,
-    control: C,
+    setValue: g,
+    control: N,
     watch: f,
-    reset: _,
-    setError: P,
-    formState: { errors: x }
-  } = Me({
+    reset: I,
+    setError: j,
+    getValues: L,
+    formState: { errors: y }
+  } = et({
     defaultValues: {
       templateName: "",
       subTemplateType: void 0,
       subTemplateType2: void 0,
       subject: "",
       templateType: void 0,
-      template: K
+      template: z
     },
     mode: "onChange"
   }), {
-    data: g,
-    refetch: h,
-    isLoading: u
-  } = ze(), [m, b] = S([]), [B, Ee] = S(!1), [k, X] = S(), [Q, F] = S(), { mutateAsync: Z, isPending: E } = Xe(), { mutateAsync: de, isPending: I } = st(), { data: U, isLoading: D } = Ze(), [ee, Ie] = S([]), [L, te] = S([]), [j, ne] = S([]);
-  v(() => {
+    data: h,
+    refetch: b,
+    isLoading: p
+  } = ct(), [u, B] = v([]), [M, ae] = v(!1), [q, V] = v(), [X, Z] = v(), { mutateAsync: oe, isPending: _ } = mt(), { mutateAsync: de, isPending: A } = bt(), { data: U, isLoading: $ } = ut(), [ce, qe] = v([]), [P, ee] = v([]), [O, te] = v([]), [$e, pe] = v(!1), [G, ke] = v("confirm"), [Re, me] = v(!1), [he, be] = v(!1);
+  x(() => {
     if (U) {
-      let n = U.filter((p) => p.id != null), d = ae(n, 0);
-      Ie(le(d));
+      let n = U.filter((m) => m.id != null), d = ye(n, 0);
+      qe(fe(d));
     }
   }, [U]);
-  const Ne = (n, d) => {
-    let p = [];
-    return n.forEach((N, w) => {
-      d.includes(w) && w !== 0 && p.push(Te), p.push(N);
-    }), p;
+  const Be = (n, d) => {
+    let m = [];
+    return n.forEach((C, E) => {
+      d.includes(E) && E !== 0 && m.push(Ae), m.push(C);
+    }), m;
   };
-  v(() => {
-    s(!!(u || E || I || D || !i));
-  }, [u, E, I, D, i]), v(() => {
-    g?.sort((n, d) => n.readonly !== d.readonly ? (n.readonly ? 0 : 1) - (d.readonly ? 0 : 1) : n.name.localeCompare(d.name)), b(g ?? []);
-  }, [g]);
-  const _e = async (n) => {
-    X(n), n && (r || !n.readonly) ? (y("templateName", n?.name), T()) : (y("templateName", ""), y("subject", ""));
-    const d = await Z({ id: n?.id });
-    F(d || void 0);
+  x(() => {
+    s(!!(p || _ || A || $ || !l));
+  }, [p, _, A, $, l]), x(() => {
+    h?.sort((n, d) => n.readonly !== d.readonly ? (n.readonly ? 0 : 1) - (d.readonly ? 0 : 1) : n.name.localeCompare(d.name)), B(h ?? []);
+  }, [h]);
+  const Me = async (n) => {
+    V(n), n && (i || !n.readonly) ? (g("templateName", n?.name), T()) : (g("templateName", ""), g("subject", ""));
+    const d = await oe({ id: n?.id });
+    d ? Z(d) : ne();
   };
-  v(() => {
-    if ((e === void 0 || e.templateId === void 0 || B) && y("template", K), f("templateType")) {
-      let n = U?.filter((p) => p.id !== void 0) ?? [], d = ae(n, 1);
-      te(
-        le(
+  x(() => {
+    if ((e === void 0 || e.templateId === void 0 || M) && g("template", z), f("templateType")) {
+      let n = U?.filter((m) => m.id !== void 0) ?? [], d = ye(n, 1);
+      ee(
+        fe(
           d.filter(
-            (p) => p.parent_id.toString() === `${f("templateType")?.id}`
+            (m) => m.parent_id.toString() === `${f("templateType")?.id}`
           )
         )
-      ), y("subTemplateType", void 0), y("subTemplateType2", void 0);
+      ), g("subTemplateType", void 0), g("subTemplateType2", void 0);
     }
-  }, [f("templateType")]), v(() => {
-    if ((e === void 0 || e.templateId === void 0) && y("template", K), f("subTemplateType")) {
-      let n = U?.filter((p) => p.id !== void 0) ?? [], d = ae(n, 2);
-      ne(
-        le(
+  }, [f("templateType")]), x(() => {
+    if ((e === void 0 || e.templateId === void 0) && g("template", z), f("subTemplateType")) {
+      let n = U?.filter((m) => m.id !== void 0) ?? [], d = ye(n, 2);
+      te(
+        fe(
           d.filter(
-            (p) => p.parent_id.toString() === `${f("subTemplateType")?.id}`
+            (m) => m.parent_id.toString() === `${f("subTemplateType")?.id}`
           )
         )
-      ), y("subTemplateType2", void 0);
+      ), g("subTemplateType2", void 0);
     }
-  }, [f("subTemplateType")]), v(() => {
-    const n = pe();
-    n.length > 0 && n[0].id !== "" ? (e === void 0 || e.templateId === void 0 || B) && y("template", n[0]) : (e === void 0 || e.templateId === void 0 || B) && y("template", K);
-  }, [f("subTemplateType2")]), v(() => {
-    let n = m.find((d) => d.id === f("template")?.id);
-    _e(n);
+  }, [f("subTemplateType")]), x(() => {
+    const n = ve();
+    n.length > 0 && n[0].id !== "" ? (e === void 0 || e.templateId === void 0 || M) && g("template", n[0]) : (e === void 0 || e.templateId === void 0 || M) && g("template", z);
+  }, [f("subTemplateType2")]), x(() => {
+    let n = u.find((d) => d.id === f("template")?.id);
+    Me(n);
   }, [f("template")]);
-  const [Ae, ce] = S(!1);
-  v(() => {
-    Ae || (Q && k && i ? (ce(!0), t(Q), y("subject", Q.subject ?? ""), setTimeout(() => {
-      ce(!1);
-    }, 1e3)) : t(void 0));
-  }, [Q, k, t, i]);
-  const pe = () => {
-    let n = [K], d = "templateType";
-    j.length > 0 ? d = "subTemplateType2" : L.length > 0 && (d = "subTemplateType");
-    let p = m.filter(
-      (w) => (w.type?.toString() === f(d)?.id.toString() || w.type === null) && f(d)?.id != null
-    ), N = Ne(p, [p.findIndex((w) => !w.readonly)]);
-    return N.length > 0 && (N[0].readonly === !0 && !r ? n = [] : n.push(Te), n = [
+  const [Ue, Te] = v(!1);
+  x(() => {
+    he || Ue || X && q && l && (Te(!0), t(X), g("subject", X.subject ?? ""), setTimeout(() => {
+      Te(!1);
+    }, 1e3));
+  }, [X, q, l, he]);
+  const ve = () => {
+    let n = [z], d = "templateType";
+    O.length > 0 ? d = "subTemplateType2" : P.length > 0 && (d = "subTemplateType");
+    let m = u.filter(
+      (E) => (E.type?.toString() === f(d)?.id.toString() || E.type === null) && f(d)?.id != null
+    ), C = Be(m, [m.findIndex((E) => !E.readonly)]);
+    return C.length > 0 && (C[0].readonly === !0 && !i ? n = [] : n.push(Ae), n = [
       ...n,
-      ...N.map((A) => ({
-        id: A.id,
-        name: Le(p, A.id),
-        isSeparator: A.isSeparator
+      ...C.map((w) => ({
+        id: w.id,
+        name: He(m, w.id),
+        isSeparator: w.isSeparator
       }))
     ]), n.length ? n : [];
   };
-  v(() => {
+  x(() => {
     if (e && e.type1) {
-      const n = ee?.find(
+      const n = ce?.find(
         (d) => `${d.id}` === e.type1
       );
-      y("templateType", n);
+      g("templateType", n);
     }
-  }, [U, ee]), v(() => {
+  }, [U, ce]), x(() => {
     if (e && e.type2) {
-      const n = L?.find(
+      const n = P?.find(
         (d) => `${d.id}` === e.type2
       );
-      y("subTemplateType", n);
+      g("subTemplateType", n);
     }
-  }, [U, L]), v(() => {
+  }, [U, P]), x(() => {
     if (e && e.type3) {
-      const n = j?.find(
+      const n = O?.find(
         (d) => `${d.id}` === e.type3
       );
-      y("subTemplateType2", n);
+      g("subTemplateType2", n);
     }
-  }, [U, j]), v(() => {
-    if (e && e.templateId && m && m.length > 0 && !B && i) {
-      const n = m?.find(
+  }, [U, O]), x(() => {
+    if (e && e.templateId && u && u.length > 0 && !M && l) {
+      const n = u?.find(
         (d) => `${d.id}` === e.templateId
       );
-      Ee(!0), n && (X(n), y("template", n));
+      ae(!0), n && (V(n), g("template", n));
     }
-  }, [m, i]);
-  const Le = (n, d) => {
-    let p = n.find((N) => N.id === d);
-    return p ? `${p.displayName}` : "";
-  }, je = (n) => {
+  }, [u, l]);
+  const He = (n, d) => {
+    let m = n.find((C) => C.id === d);
+    return m ? `${m.displayName}` : "";
+  }, Fe = (n) => {
     window.StripoEditorApi.actionsApi.getTemplateData(
       async (d) => {
-        let p = n.template.id, N = "";
-        k?.readonly && (p = "", N = n.template.id);
-        let w = m.find(
-          (q) => q.name === n.templateName.trim()
+        let m = n.template.id, C = "";
+        q?.readonly && (m = "", C = n.template.id);
+        let E = u.find(
+          (D) => D.name === n.templateName.trim()
         );
-        if (w && w.id !== p) {
-          P("templateName", {
+        if (E && E.id !== m) {
+          j("templateName", {
             type: "validate",
             message: "Template name already exists. Please choose a different name."
           });
           return;
         }
-        let A = n.templateType.id;
-        j && j.length > 0 ? A = n.subTemplateType2.id : L && L.length > 0 && (A = n.subTemplateType.id);
-        const re = {
+        let w = n.templateType.id;
+        O && O.length > 0 ? w = n.subTemplateType2.id : P && P.length > 0 && (w = n.subTemplateType.id);
+        const W = {
           enerexIdentifier: "",
           projectId: "",
-          templateId: p,
-          templateType: A,
+          templateId: m,
+          templateType: w,
           name: n.templateName.trim(),
           html: d.html,
           css: d.css,
           subject: n.templateType.id === "2" ? n?.subject ?? "" : "",
-          parent_id: N
+          parent_id: C
         };
-        if (await de(re)) {
-          if (T(), k?.readonly && !r)
-            _(), te([]), ne([]);
+        if (await de(W)) {
+          if (T(), q?.readonly && !i)
+            I(), ee([]), te([]);
           else {
-            const q = await Z({ id: p });
-            F(q || void 0);
+            const D = await oe({ id: m });
+            D ? Z(D) : ne();
           }
-          h();
+          b();
         }
       }
     );
-  }, Oe = (n) => {
+  }, ne = () => {
+    be(!0), s(!1), Z(void 0), t(void 0), setTimeout(() => {
+      be(!1);
+    }, 0);
+  }, Ve = (n, d) => {
+    const m = d.trim(), C = "";
+    if (u.find(
+      (w) => w.name === m && w.id !== C
+    )) {
+      me(!0);
+      return;
+    }
+    pe(!1), window.StripoEditorApi.actionsApi.getTemplateData(
+      async (w) => {
+        const W = n.template.id;
+        let Y = n.templateType.id;
+        O?.length ? Y = n.subTemplateType2.id : P?.length && (Y = n.subTemplateType.id);
+        const D = {
+          enerexIdentifier: "",
+          projectId: "",
+          templateId: C,
+          templateType: Y,
+          name: m,
+          html: w.html,
+          css: w.css,
+          subject: n.templateType.id === "2" ? n?.subject ?? "" : "",
+          parent_id: W
+        };
+        await de(D) && (T(), ne(), I(), ee([]), te([]), b());
+      }
+    );
+  }, Ge = (n) => {
     window.StripoEditorApi.actionsApi.getTemplateData(
       async (d) => {
-        let p = n.template.id, N = "", w = m.find(
-          (q) => q.name === n.templateName.trim()
+        let m = n.template.id, C = "", E = u.find(
+          (D) => D.name === n.templateName.trim()
         );
-        if (w && w.id !== p) {
-          P("templateName", {
+        if (E && E.id !== m) {
+          j("templateName", {
             type: "validate",
             message: "Template name already exists. Please choose a different name."
           });
           return;
         }
-        let A = n.templateType.id;
-        j && j.length > 0 ? A = n.subTemplateType2.id : L && L.length > 0 && (A = n.subTemplateType.id);
-        const re = {
+        let w = n.templateType.id;
+        O && O.length > 0 ? w = n.subTemplateType2.id : P && P.length > 0 && (w = n.subTemplateType.id);
+        const W = {
           enerexIdentifier: "",
           projectId: "",
-          templateId: p,
-          templateType: A,
+          templateId: m,
+          templateType: w,
           name: n.templateName.trim(),
           html: d.html,
           css: d.css,
           subject: n.templateType.id === "2" ? n?.subject ?? "" : "",
-          parent_id: N
+          parent_id: C
         };
-        if (await de(re)) {
+        if (await de(W)) {
           T();
-          const q = await Z({ id: p });
-          F(q || void 0), h();
+          const D = await oe({ id: m });
+          D ? Z(D) : ne(), b();
         }
       }
     );
+  }, Ke = () => {
+    ke("input"), pe(!0), me(!1);
+  }, Qe = (n) => {
+    if (G === "input") {
+      const d = L();
+      Ve(d, n || "");
+      return;
+    }
   };
-  return /* @__PURE__ */ l(ue, { className: "border border-0 text-start", children: /* @__PURE__ */ l(ue.Body, { className: "pe-0 ps-2", children: /* @__PURE__ */ l("form", { children: /* @__PURE__ */ l("div", { className: "template-list-container gap-3", children: /* @__PURE__ */ $(ke, { children: [
-    /* @__PURE__ */ l(M, { children: /* @__PURE__ */ l(
-      W,
-      {
-        label: "Category",
-        control: C,
-        error: x,
-        options: ee,
-        required: !0,
-        disabled: u || E || I || D || !i,
-        validation: {
-          required: {
-            value: !0,
-            message: "Select a category"
-          }
-        },
-        ...a("templateType")
-      }
-    ) }),
-    L && L.length > 0 && /* @__PURE__ */ l(M, { children: /* @__PURE__ */ l(
-      W,
-      {
-        label: "Type",
-        control: C,
-        error: x,
-        options: L,
-        required: !0,
-        disabled: u || E || I || D || !i,
-        validation: {
-          required: {
-            value: !0,
-            message: "Select a type"
-          }
-        },
-        ...a("subTemplateType")
-      }
-    ) }),
-    j && j.length > 0 && /* @__PURE__ */ l(M, { children: /* @__PURE__ */ l(
-      W,
-      {
-        label: "Sub Type",
-        control: C,
-        error: x,
-        options: j,
-        required: !0,
-        disabled: u || E || I || D || !i,
-        validation: {
-          required: {
-            value: !0,
-            message: "Select a subtype"
-          }
-        },
-        ...a("subTemplateType2")
-      }
-    ) }),
-    /* @__PURE__ */ l(M, { children: /* @__PURE__ */ l(
-      W,
-      {
-        label: "Template",
-        control: C,
-        error: x,
-        disabled: u || E || I || D || !i,
-        options: pe(),
-        required: !1,
-        ...a("template")
-      }
-    ) }),
-    /* @__PURE__ */ l(M, { children: /* @__PURE__ */ l(
-      ye,
-      {
-        label: "Name",
-        register: a,
-        error: x,
-        required: !0,
-        name: "templateName",
-        validation: {
-          required: {
-            value: !0,
-            message: "Enter a name"
-          }
+  return /* @__PURE__ */ S(we, { children: [
+    /* @__PURE__ */ r(Se, { className: "border border-0 text-start", children: /* @__PURE__ */ r(Se.Body, { className: "pe-0 ps-2", children: /* @__PURE__ */ r("form", { children: /* @__PURE__ */ r("div", { className: "template-list-container gap-3", children: /* @__PURE__ */ S(Xe, { children: [
+      /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(
+        se,
+        {
+          label: "Category",
+          control: N,
+          error: y,
+          options: ce,
+          required: !0,
+          disabled: p || _ || A || $ || !l,
+          validation: {
+            required: {
+              value: !0,
+              message: "Select a category"
+            }
+          },
+          ...a("templateType")
         }
-      }
-    ) }),
-    f("templateType")?.id === "2" && /* @__PURE__ */ l(M, { children: /* @__PURE__ */ l(
-      ye,
-      {
-        label: "Subject",
-        register: a,
-        error: x,
-        required: !1,
-        name: "subject"
-      }
-    ) }),
-    /* @__PURE__ */ $(M, { className: "d-flex align-self-start justify-content-end gap-2 mb-1 btn-padding", children: [
-      /* @__PURE__ */ l(
+      ) }),
+      P && P.length > 0 && /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(
         se,
         {
-          style: { width: "70px" },
-          variant: "primary",
-          disabled: u || E || I || D || !i,
-          onClick: () => {
-            X(void 0), _(), te([]), ne([]), o();
+          label: "Type",
+          control: N,
+          error: y,
+          options: P,
+          required: !0,
+          disabled: p || _ || A || $ || !l,
+          validation: {
+            required: {
+              value: !0,
+              message: "Select a type"
+            }
           },
-          children: E || I ? /* @__PURE__ */ l(
-            Y,
-            {
-              animation: "border",
-              style: { width: "11px", height: "11px" },
-              size: "sm",
-              role: "status",
-              className: "me-1",
-              children: /* @__PURE__ */ l("span", { className: "visually-hidden", children: "Loading..." })
+          ...a("subTemplateType")
+        }
+      ) }),
+      O && O.length > 0 && /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(
+        se,
+        {
+          label: "Sub Type",
+          control: N,
+          error: y,
+          options: O,
+          required: !0,
+          disabled: p || _ || A || $ || !l,
+          validation: {
+            required: {
+              value: !0,
+              message: "Select a subtype"
             }
-          ) : "Clear"
+          },
+          ...a("subTemplateType2")
         }
-      ),
-      (f("templateType")?.id.toString() !== "2" || (f("templateType")?.id.toString() === "2" && (k?.id ?? "")) !== "") && /* @__PURE__ */ $(De, { children: [
-        !(k?.readonly && r) && /* @__PURE__ */ l(
-          se,
-          {
-            type: "button",
-            onClick: c(je),
-            variant: "primary",
-            style: { width: "80px" },
-            disabled: u || E || I || D || !i,
-            children: E || I ? /* @__PURE__ */ l(
-              Y,
-              {
-                animation: "border",
-                style: { width: "11px", height: "11px" },
-                size: "sm",
-                role: "status",
-                className: "me-1",
-                children: /* @__PURE__ */ l("span", { className: "visually-hidden", children: "Loading..." })
-              }
-            ) : k?.readonly ? "Save as" : "Save"
+      ) }),
+      /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(
+        se,
+        {
+          label: "Template",
+          control: N,
+          error: y,
+          disabled: p || _ || A || $ || !l,
+          options: ve(),
+          required: !1,
+          ...a("template")
+        }
+      ) }),
+      /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(
+        Ee,
+        {
+          label: "Name",
+          register: a,
+          error: y,
+          required: !0,
+          name: "templateName",
+          validation: {
+            required: {
+              value: !0,
+              message: "Enter a name"
+            }
           }
-        ),
-        k?.readonly && r && /* @__PURE__ */ l(
-          se,
+        }
+      ) }),
+      f("templateType")?.id === "2" && /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(
+        Ee,
+        {
+          label: "Subject",
+          register: a,
+          error: y,
+          required: !1,
+          name: "subject"
+        }
+      ) }),
+      /* @__PURE__ */ S(H, { className: "d-flex align-self-start justify-content-end gap-2 mb-1 btn-padding", children: [
+        /* @__PURE__ */ r(
+          re,
           {
-            type: "button",
-            onClick: c(Oe),
+            style: { width: "70px" },
             variant: "primary",
-            style: { width: "80px" },
-            disabled: u || E || I || D || !i,
-            children: E || I ? /* @__PURE__ */ l(
-              Y,
+            disabled: p || _ || A || $ || !l,
+            onClick: () => {
+              V(void 0), I(), ee([]), te([]), o();
+            },
+            children: _ || A ? /* @__PURE__ */ r(
+              J,
               {
                 animation: "border",
                 style: { width: "11px", height: "11px" },
                 size: "sm",
                 role: "status",
                 className: "me-1",
-                children: /* @__PURE__ */ l("span", { className: "visually-hidden", children: "Loading..." })
+                children: /* @__PURE__ */ r("span", { className: "visually-hidden", children: "Loading..." })
               }
-            ) : "Save"
+            ) : "Clear"
           }
-        )
+        ),
+        (f("templateType")?.id.toString() !== "2" || (f("templateType")?.id.toString() === "2" && (q?.id ?? "")) !== "") && /* @__PURE__ */ S(we, { children: [
+          !(q?.readonly && i) && /* @__PURE__ */ r(
+            re,
+            {
+              type: "button",
+              onClick: c(Fe),
+              variant: "primary",
+              style: { width: "80px" },
+              disabled: p || _ || A || $ || !l,
+              children: _ || A ? /* @__PURE__ */ r(
+                J,
+                {
+                  animation: "border",
+                  style: { width: "11px", height: "11px" },
+                  size: "sm",
+                  role: "status",
+                  className: "me-1",
+                  children: /* @__PURE__ */ r("span", { className: "visually-hidden", children: "Loading..." })
+                }
+              ) : q?.readonly ? "Save as" : "Save"
+            }
+          ),
+          (f("templateType")?.id.toString() === "28" || f("subTemplateType")?.id.toString() === "9" && f("subTemplateType2")?.id.toString() === "12") && !!f("templateName")?.trim() && /* @__PURE__ */ r(
+            re,
+            {
+              type: "button",
+              variant: "primary",
+              style: { width: "80px" },
+              onClick: () => Ke(),
+              disabled: p || _ || A || $ || !l,
+              children: _ || A ? /* @__PURE__ */ r(
+                J,
+                {
+                  animation: "border",
+                  style: { width: "11px", height: "11px" },
+                  size: "sm",
+                  role: "status",
+                  className: "me-1",
+                  children: /* @__PURE__ */ r("span", { className: "visually-hidden", children: "Loading..." })
+                }
+              ) : "Save as"
+            }
+          ),
+          q?.readonly && i && /* @__PURE__ */ r(
+            re,
+            {
+              type: "button",
+              onClick: c(Ge),
+              variant: "primary",
+              style: { width: "80px" },
+              disabled: p || _ || A || $ || !l,
+              children: _ || A ? /* @__PURE__ */ r(
+                J,
+                {
+                  animation: "border",
+                  style: { width: "11px", height: "11px" },
+                  size: "sm",
+                  role: "status",
+                  className: "me-1",
+                  children: /* @__PURE__ */ r("span", { className: "visually-hidden", children: "Loading..." })
+                }
+              ) : "Save"
+            }
+          )
+        ] })
       ] })
-    ] })
-  ] }) }) }) }) });
-}, ut = ({ config: t }) => {
-  const [s, o] = S(!1), [i, r] = S(), [e, a] = S(!1);
-  v(() => {
+    ] }) }) }) }) }),
+    /* @__PURE__ */ r(
+      dt,
+      {
+        show: $e,
+        variant: G,
+        title: G === "confirm" ? "Are you sure?" : "Save Template As",
+        message: G === "confirm" ? 'Are you sure you want to remove custom template ""?' : "",
+        label: "New Name",
+        requiredMessage: "Enter a new name",
+        externalError: Re,
+        externalErrorMessage: "Template name already exists. Please choose a different name",
+        confirmText: G === "confirm" ? "Ok" : "Save as",
+        confirmButtonVariant: G === "confirm" ? "danger" : "primary",
+        onConfirm: Qe,
+        onCancel: () => pe(!1),
+        onInputChange: () => me(!1)
+      }
+    )
+  ] });
+}, _t = ({ config: t }) => {
+  const [s, o] = v(!1), [l, i] = v(), [e, a] = v(!1);
+  x(() => {
     t.isAdmin || a(!0);
   }, []);
-  const [c, T] = S(!1);
-  return /* @__PURE__ */ l(Fe, { configs: t, children: /* @__PURE__ */ l(Ve, { children: /* @__PURE__ */ $("div", { className: "root-widget", children: [
-    /* @__PURE__ */ l(
-      it,
+  const [c, T] = v(!1);
+  return /* @__PURE__ */ r(nt, { configs: t, children: /* @__PURE__ */ r(st, { children: /* @__PURE__ */ S("div", { className: "root-widget", children: [
+    /* @__PURE__ */ r(
+      Tt,
       {
         templateLoading: T,
         onSelectItem: (f) => {
-          if (r(f), t.isAdmin && a(!0), window.StripoEditorApi && window.StripoEditorApi.actionsApi) {
-            let _ = z;
-            window.StripoEditorApi.actionsApi.updateHtmlAndCss(
-              f?.html ?? _,
+          if (i(f), t.isAdmin && a(!0), window.StripoEditorApi && window.StripoEditorApi.actionsApi) {
+            let I = ie;
+            console.log("selected template:"), window.StripoEditorApi.actionsApi.updateHtmlAndCss(
+              f?.html ?? I,
               f?.css ?? "",
               ""
             );
@@ -1250,21 +1402,21 @@ const he = /* @__PURE__ */ et(nt), be = (t) => t.data.isSeparator ? /* @__PURE__
         },
         editorInitialized: s,
         onReset: () => {
-          T(!1), r(void 0), window.StripoEditorApi && window.StripoEditorApi.actionsApi && window.StripoEditorApi.actionsApi.updateHtmlAndCss(
-            z,
+          T(!1), i(void 0), window.StripoEditorApi && window.StripoEditorApi.actionsApi && window.StripoEditorApi.actionsApi.updateHtmlAndCss(
+            ie,
             "",
             ""
           );
         }
       }
     ),
-    e && /* @__PURE__ */ l(
-      Ye,
+    e && /* @__PURE__ */ r(
+      ot,
       {
         onEditorInitialized: o,
         templateHTML: {
-          css: i?.css ?? "",
-          html: i?.html ?? z
+          css: l?.css ?? "",
+          html: l?.html ?? ie
         },
         loading: c,
         className: "col-span-5"
@@ -1273,5 +1425,5 @@ const he = /* @__PURE__ */ et(nt), be = (t) => t.data.isSeparator ? /* @__PURE__
   ] }) }) });
 };
 export {
-  ut as EditorWidget
+  _t as EditorWidget
 };