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

@enerex/template-studio 1.1.38 → 1.1.39

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

Files changed (7) hide show

package/dist/enerex-template-editor.es.js +682 -576
package/dist/enerex-template-editor.umd.js +13 -3
package/dist/template-studio.css +1 -1
package/dist/types/component/form-input/select.d.ts +5 -2
package/dist/types/component/icons/star-icon.d.ts +8 -0
package/dist/types/queries/types.d.ts +3 -1
package/package.json +1 -1

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

@@ -1,11 +1,11 @@
-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
+import { jsx as n, jsxs as S, Fragment as Ee } from "react/jsx-runtime";
+import M, { useContext as qe, useState as w, useRef as st, useEffect as E } from "react";
+import { QueryClient as it, QueryClientProvider as at, useQuery as ce, useMutation as Te, useQueryClient as lt } from "@tanstack/react-query";
+import _e from "axios";
+import { Spinner as z, Form as H, Card as ke, Row as ot, Col as U, Button as J } from "react-bootstrap";
+import { Controller as dt, useForm as ct } from "react-hook-form";
+import Ae, { components as Le } from "react-select";
+const de = `<!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,159 +361,160 @@ const ie = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http
     </div>\r
   </body>\r
 </html>\r
-`, Pe = k.createContext(
+`, Re = M.createContext(
   void 0
-), nt = ({
+), pt = ({
   children: t,
   configs: s
 }) => {
-  const [o, l] = k.useState(s.clientId), [i, e] = k.useState(s.apiKey), [a, c] = k.useState(
+  const [l, a] = M.useState(s.clientId), [i, e] = M.useState(s.apiKey), [d, o] = M.useState(
     s.enerexIdentifier
-  ), [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(
+  ), [b, D] = M.useState(s.projectId), [A, m] = M.useState(s.userEmail), [_, u] = M.useState(s.isAdmin), [j, h] = M.useState(s.meBaseUrl), [v, y] = M.useState(
     s.defaultSelector
-  ), 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);
+  ), f = (g) => {
+    e(g.apiKey), a(g.clientId), D(g.projectId), o(g.enerexIdentifier), m(g.userEmail), u(g.isAdmin), y(g.defaultSelector), h(g.meBaseUrl);
   };
-  return /* @__PURE__ */ r(
-    Pe.Provider,
+  return /* @__PURE__ */ n(
+    Re.Provider,
     {
       value: {
-        clientId: o,
+        clientId: l,
         apiKey: i,
-        setConfiguration: p,
-        enerexIdentifier: a,
-        projectId: T,
-        userEmail: N,
-        isAdmin: I,
-        defaultSelector: h,
-        meBaseUrl: L
+        setConfiguration: f,
+        enerexIdentifier: d,
+        projectId: b,
+        userEmail: A,
+        isAdmin: _,
+        defaultSelector: v,
+        meBaseUrl: j
       },
       children: t
     }
   );
-}, R = () => {
-  const t = je(Pe);
+}, B = () => {
+  const t = qe(Re);
   if (!t)
     throw new Error("widgetConfig must be used within a ConfigProvider");
   return t;
-}, Oe = (t = "", s) => ({ get: async (i, e) => {
+}, Me = (t = "", s) => ({ get: async (i, e) => {
   try {
-    const a = await xe.get(
+    const d = await _e.get(
       `${t}${i}`,
       e ?? s
     );
-    if (a.status === 200)
-      return a.data;
-  } catch (a) {
-    throw a;
+    if (d.status === 200)
+      return d.data;
+  } catch (d) {
+    throw d;
   }
-}, post: async (i, e, a) => {
+}, post: async (i, e, d) => {
   try {
-    const c = await xe.post(
+    const o = await _e.post(
       `${t}${i}`,
       e,
-      a ?? s
+      d ?? s
     );
-    if (c.status === 200)
-      return c.data;
-  } catch (c) {
-    throw c;
+    if (o.status === 200)
+      return o.data;
+  } catch (o) {
+    throw o;
   }
-} }), De = k.createContext({
+} }), Be = M.createContext({
   get: () => {
     throw new Error("HttpClientContext.get not implemented");
   },
   post: () => {
     throw new Error("HttpClientContext.post not implemented");
   }
-}), rt = ({ children: t }) => {
-  const { clientId: s, apiKey: o, isAdmin: l, meBaseUrl: i } = R(), e = {
+}), mt = ({ children: t }) => {
+  const { clientId: s, apiKey: l, isAdmin: a, meBaseUrl: i } = B(), e = {
     headers: {
       client_id: s,
-      "x-api-key": o,
-      "Security-Context": l ? "admin" : "viewer"
+      "x-api-key": l,
+      "Security-Context": a ? "admin" : "viewer"
     }
-  }, { 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 = {
+  }, { get: d, post: o } = Me(i, e);
+  return /* @__PURE__ */ n(Be.Provider, { value: { get: d, post: o }, children: t });
+}, ut = ({ children: t }) => {
+  const s = new it();
+  return /* @__PURE__ */ n(mt, { children: /* @__PURE__ */ n(at, { client: s, children: t }) });
+}, he = {
   EDITOR_SCRIPT_URL: "https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js",
   EDITOR_PLUGIN_ID: "1afdc3161ec7409a8627a1c8561d45f5",
   EDITOR_SECRET_KEY: "54ba748ed7e94f2e929555783acb03da"
-}, 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) => ({
+}, ft = (t) => {
+  const s = Array.from(new Set(t.map((a) => a.category))), l = [];
+  return s.forEach((a) => {
+    const i = t.filter((e) => e.category === a).map((e) => ({
       label: e.label,
       value: e.value,
       hint: e.hint,
       hidden: e.hidden
     }));
-    o.push({ category: l, entries: i });
-  }), o;
-}, K = () => {
-  const t = je(De);
+    l.push({ category: a, entries: i });
+  }), l;
+}, V = () => {
+  const t = qe(Be);
   if (t)
     return t;
   throw new Error("useHttpClient must be used within a HttpClientProvider");
-}, Q = {
+}, G = {
   Template_list: "/Template/list/",
   Template: "/Template/GetTemplate/",
   MergeTags: "/Template/TemplateMergeTags/",
   ExcludeCategory: "/Template/GetExcludeCategories/",
   SaveTemplate: "/Template/save-update/",
-  TemplateTypes: "/Template/TemplateTypes/"
-}, lt = () => {
-  const t = K(), { enerexIdentifier: s, projectId: o } = R();
-  return le({
+  TemplateTypes: "/Template/TemplateTypes/",
+  markFavourite: "/Template/MarkFavourite/"
+}, yt = () => {
+  const t = V(), { enerexIdentifier: s, projectId: l } = B();
+  return ce({
     queryKey: ["getTemplateTags"],
     queryFn: async (i) => await t.get(
-      `${Q.MergeTags}${o}/${s}`
+      `${G.MergeTags}${l}/${s}`
     )
   });
-}, at = () => {
-  const t = K(), { enerexIdentifier: s, projectId: o } = R();
-  return le({
+}, gt = () => {
+  const t = V(), { enerexIdentifier: s, projectId: l } = B();
+  return ce({
     queryKey: ["getExcludeCategory"],
     queryFn: async (i) => await t.get(
-      `${Q.ExcludeCategory}${o}/${s}`
+      `${G.ExcludeCategory}${l}/${s}`
     )
   });
-}, ot = ({
+}, ht = ({
   templateHTML: t,
   className: s = "",
-  loading: o = !1,
-  onEditorInitialized: l
+  loading: l = !1,
+  onEditorInitialized: a
 }) => {
-  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 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);
+  const { post: i } = Me(), { data: e } = yt(), { data: d } = gt(), [o, b] = w(
+    t ?? { html: de, css: "" }
+  ), { userEmail: D } = B(), A = st(null), m = "https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png", _ = "https://plugins.stripo.email/api/v1/auth";
+  E(() => {
+    (async () => (await u(), e && d && await j(he.EDITOR_SCRIPT_URL)))();
+  }, [e, d]);
+  async function u() {
+    window.Zone || await new Promise((v, y) => {
+      const f = document.createElement("script");
+      f.src = "https://unpkg.com/zone.js@0.13.1/bundles/zone.umd.min.js";
+      const g = document.querySelector("script[nonce]")?.nonce;
+      g && f.setAttribute("nonce", g), f.onload = () => v(), f.onerror = () => y(new Error("Failed to load zone.js")), document.head.appendChild(f);
     });
   }
-  async function L(h) {
-    let b = document.getElementById(
+  async function j(v) {
+    let y = document.getElementById(
       "UiEditorScript"
     );
-    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 })
+    y || (y = document.createElement("script"), y.id = "UiEditorScript", y.src = v, y.onload = async () => {
+      await h();
+    }, document.body.appendChild(y)), await new Promise(
+      (f) => y.addEventListener("load", () => f(), { once: !0 })
     );
   }
-  const y = async () => {
-    const h = N.current;
-    if (!h) {
+  const h = async () => {
+    const v = A.current;
+    if (!v) {
       console.error("Missing #stripoEditorContainer in DOM");
       return;
     }
@@ -521,252 +522,261 @@ const ie = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http
       console.error("UIEditor script not loaded or not exposing initEditor");
       return;
     }
-    const b = {
-      html: c.html,
-      css: c.css,
-      modulesExcludedCategories: a ?? [],
+    const y = {
+      html: o.html,
+      css: o.css,
+      modulesExcludedCategories: d ?? [],
       forceRecreate: !0,
       metadata: {
-        emailId: g,
+        emailId: D,
         userId: "1",
         // username: userName,
-        avatarUrl: f
+        avatarUrl: m
       },
       locale: "en",
-      onTokenRefreshRequest: async (p) => {
-        const u = {
-          pluginId: ue.EDITOR_PLUGIN_ID,
-          secretKey: ue.EDITOR_SECRET_KEY,
-          userId: g,
+      onTokenRefreshRequest: async (f) => {
+        const g = {
+          pluginId: he.EDITOR_PLUGIN_ID,
+          secretKey: he.EDITOR_SECRET_KEY,
+          userId: D,
           role: "user"
-        }, B = await i(
-          I,
-          u
+        }, T = await i(
+          _,
+          g
         );
-        B?.token && p(B.token);
+        T?.token && f(T.token);
       },
       onTemplateLoaded: () => {
-        l && l(!0);
+        a && a(!0);
       },
-      mergeTags: it(e ?? [])
+      mergeTags: ft(e ?? [])
     };
-    for (const [p, u] of Object.entries({
+    for (const [f, g] of Object.entries({
       codeEditorButtonSelector: "#codeEditor",
       undoButtonSelector: "#undoButton",
       redoButtonSelector: "#redoButton",
       mobileViewButtonSelector: "#mobileViewButton",
       desktopViewButtonSelector: "#desktopViewButton"
     }))
-      h.ownerDocument && h.getRootNode() instanceof ShadowRoot && h.getRootNode().querySelector(u) && (b[p] = u);
-    await window.UIEditor.initEditor(h, b);
+      v.ownerDocument && v.getRootNode() instanceof ShadowRoot && v.getRootNode().querySelector(g) && (y[f] = g);
+    await window.UIEditor.initEditor(v, 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,
+  return /* @__PURE__ */ n("div", { className: "position-relative", children: /* @__PURE__ */ S("div", { className: `editor-container ${s}`, children: [
+    l && /* @__PURE__ */ n("div", { className: "loading-overlay", children: /* @__PURE__ */ n(
+      z,
       {
         animation: "border",
         style: { width: "11px", height: "11px" },
         size: "sm",
         role: "status",
         className: "me-1",
-        children: /* @__PURE__ */ r("span", { className: "visually-hidden", children: "Loading..." })
+        children: /* @__PURE__ */ n("span", { className: "visually-hidden", children: "Loading..." })
       }
     ) }),
-    /* @__PURE__ */ r("div", { id: "externalSystemContainer" }),
-    /* @__PURE__ */ r("div", { id: "stripoEditorContainer", ref: N })
+    /* @__PURE__ */ n("div", { id: "externalSystemContainer" }),
+    /* @__PURE__ */ n("div", { id: "stripoEditorContainer", ref: A })
   ] }) });
-}, Ee = ({
+}, je = ({
   label: t,
   register: s,
-  validation: o,
-  required: l = !1,
+  validation: l,
+  required: a = !1,
   name: i,
   error: e,
-  className: a = "",
-  ...c
-}) => /* @__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: [
+  className: d = "",
+  ...o
+}) => /* @__PURE__ */ S(H.Group, { className: d + " mb-1", style: { width: "100%" }, children: [
+  t ? /* @__PURE__ */ S(H.Label, { className: "mb-3 d-block form-label ts-label-height", children: [
     t,
-    l && /* @__PURE__ */ r("label", { className: "text-danger", children: "*" })
+    a && /* @__PURE__ */ n("label", { className: "text-danger", children: "*" })
   ] }) : null,
-  /* @__PURE__ */ r(
-    F.Control,
+  /* @__PURE__ */ n(
+    H.Control,
     {
       name: i,
       type: "text",
-      ...c,
+      ...o,
       isInvalid: !!(e && e[i]),
       ...s ? s(i, {
-        ...o
+        ...l
       }) : {},
       className: `react-select__control ${e && e[i] && "border border-danger"}`
     }
   ),
-  e && e[i] ? /* @__PURE__ */ r(F.Control.Feedback, { type: "invalid", children: e[i].message }) : null
-] }), dt = ({
+  e && e[i] ? /* @__PURE__ */ n(H.Control.Feedback, { type: "invalid", children: e[i].message }) : null
+] }), bt = ({
   show: t,
   variant: s,
-  title: o = "Are you sure?",
-  message: l,
+  title: l = "Are you sure?",
+  message: a,
   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
+  placeholder: d = "",
+  requiredMessage: o = "This field is required",
+  externalError: b = !1,
+  externalErrorMessage: D = "",
+  confirmText: A = "Ok",
+  cancelText: m = "Cancel",
+  confirmButtonVariant: _ = "danger",
+  onConfirm: u,
+  onCancel: j,
+  onInputChange: h
 }) => {
-  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);
+  const [v, y] = w(e), [f, g] = w(!1);
+  if (E(() => {
+    t && (y(e), g(!1));
+  }, [t, e]), E(() => {
+    b && g(!0);
+  }, [b]), !t) return null;
+  const T = s === "input" && !v.trim(), P = s === "input" && (T || b), pe = T ? o : b ? D : "", K = () => {
+    if (P) {
+      g(!0);
       return;
     }
-    j(h.trim());
+    u(v.trim());
   };
-  return /* @__PURE__ */ r("div", { className: "template-studio-modal-overlay", children: /* @__PURE__ */ S("div", { className: "template-studio-modal", children: [
+  return /* @__PURE__ */ n("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__ */ n("h4", { children: l }),
+      /* @__PURE__ */ n("button", { className: "template-studio-modal-close", onClick: j, children: "✕" })
     ] }),
     /* @__PURE__ */ S("div", { className: "template-studio-modal-body", children: [
-      l && /* @__PURE__ */ r("p", { children: l }),
+      a && /* @__PURE__ */ n("p", { children: a }),
       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__ */ n("span", { className: "text-danger", children: "*" })
         ] }),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ n(
           "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);
+            className: `form-control ${f && P ? "is-invalid" : ""}`,
+            placeholder: d,
+            value: v,
+            onChange: (ee) => {
+              y(ee.target.value), f && g(!1), h?.(ee.target.value);
             },
             autoFocus: !0
           }
         ),
-        p && M && /* @__PURE__ */ r("div", { className: "invalid-feedback d-block", children: ae })
+        f && P && /* @__PURE__ */ n("div", { className: "invalid-feedback d-block", children: pe })
       ] })
     ] }),
     /* @__PURE__ */ S("div", { className: "template-studio-modal-footer", children: [
-      /* @__PURE__ */ r("button", { className: "btn btn-secondary", onClick: L, children: f }),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ n("button", { className: "btn btn-secondary", onClick: j, children: m }),
+      /* @__PURE__ */ n(
         "button",
         {
-          className: `btn btn-${I}`,
-          onClick: q,
-          children: N
+          className: `btn btn-${_}`,
+          onClick: K,
+          children: A
         }
       )
     ] })
   ] }) });
-}, ct = () => {
-  const t = K(), { enerexIdentifier: s, projectId: o } = R();
-  return le({
+}, vt = () => {
+  const t = V(), { enerexIdentifier: s, projectId: l } = B();
+  return ce({
     queryKey: ["getTemplatesList"],
     queryFn: async (i) => await t.get(
-      `${Q.Template_list}${o}/${s}`
+      `${G.Template_list}${l}/${s}`
     )
   });
 };
-function fe(t) {
-  return t.sort((s, o) => s.name.localeCompare(o.name));
+function be(t) {
+  return t.sort((s, l) => s.name.localeCompare(l.name));
 }
-function pt(t) {
-  const s = /* @__PURE__ */ new Map(), o = [];
+function wt(t) {
+  const s = /* @__PURE__ */ new Map(), l = [];
   t.forEach((e) => s.set(e.id, e));
-  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)
+  let a = t.filter((e) => e.parent_id === 0), i = 0;
+  for (; a.length > 0; ) {
+    l.push({ level: i, data: a });
+    const e = a.map((o) => o.id);
+    a = t.filter(
+      (o) => e.includes(o.parent_id)
     ), i++;
   }
-  return o;
+  return l;
 }
-function ye(t, s) {
-  const l = pt(t).find((i) => i.level === s);
-  return l ? l.data : [];
+function ve(t, s) {
+  const a = wt(t).find((i) => i.level === s);
+  return a ? a.data : [];
 }
-const mt = () => {
-  const t = K(), { enerexIdentifier: s, projectId: o } = R();
-  return Le({
+const Tt = () => {
+  const t = V(), { enerexIdentifier: s, projectId: l } = B();
+  return Te({
+    mutationKey: ["markFavourite"],
+    mutationFn: async (i) => await t.post(
+      `${G.markFavourite}${l}/${s}`,
+      i
+    )
+  });
+}, xt = () => {
+  const t = V(), { enerexIdentifier: s, projectId: l } = B();
+  return Te({
     mutationKey: ["getTemplate"],
     mutationFn: async ({ id: i }) => {
       if (i)
         return await t.get(
-          `${Q.Template}${s}/${i}/${o}`
+          `${G.Template}${s}/${i}/${l}`
         );
     }
   });
-}, ut = () => {
-  const t = K(), { enerexIdentifier: s, projectId: o } = R();
-  return le({
+}, St = () => {
+  const t = V(), { enerexIdentifier: s, projectId: l } = B();
+  return ce({
     queryKey: ["getTemplateTypes"],
     queryFn: async (i) => await t.get(
-      `${Q.TemplateTypes}${s}/${o}`
+      `${G.TemplateTypes}${s}/${l}`
     )
   });
 };
-function ft(t) {
+function Ct(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
-var ge = { exports: {} };
+var we = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
 */
-var Ne;
-function yt() {
-  return Ne || (Ne = 1, function(t) {
+var Pe;
+function Nt() {
+  return Pe || (Pe = 1, function(t) {
     (function() {
       var s = {}.hasOwnProperty;
-      function o() {
-        for (var e = "", a = 0; a < arguments.length; a++) {
-          var c = arguments[a];
-          c && (e = i(e, l(c)));
+      function l() {
+        for (var e = "", d = 0; d < arguments.length; d++) {
+          var o = arguments[d];
+          o && (e = i(e, a(o)));
         }
         return e;
       }
-      function l(e) {
+      function a(e) {
         if (typeof e == "string" || typeof e == "number")
           return e;
         if (typeof e != "object")
           return "";
         if (Array.isArray(e))
-          return o.apply(null, e);
+          return l.apply(null, e);
         if (e.toString !== Object.prototype.toString && !e.toString.toString().includes("[native code]"))
           return e.toString();
-        var a = "";
-        for (var c in e)
-          s.call(e, c) && e[c] && (a = i(a, c));
-        return a;
+        var d = "";
+        for (var o in e)
+          s.call(e, o) && e[o] && (d = i(d, o));
+        return d;
       }
-      function i(e, a) {
-        return a ? e ? e + " " + a : e + a : e;
+      function i(e, d) {
+        return d ? e ? e + " " + d : e + d : e;
       }
-      t.exports ? (o.default = o, t.exports = o) : window.classNames = o;
+      t.exports ? (l.default = l, t.exports = l) : window.classNames = l;
     })();
-  }(ge)), ge.exports;
+  }(we)), we.exports;
 }
-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(
+var It = Nt();
+const Oe = /* @__PURE__ */ Ct(It), $e = (t) => t.data.isSeparator ? /* @__PURE__ */ n("div", { style: { padding: 0, margin: "2px 0" }, children: /* @__PURE__ */ n(
   "hr",
   {
     style: {
@@ -776,34 +786,37 @@ const Ie = /* @__PURE__ */ ft(gt), _e = (t) => t.data.isSeparator ? /* @__PURE__
       margin: 0
     }
   }
-) }) : /* @__PURE__ */ r(tt.Option, { ...t }), ht = ({
+) }) : t.data.icon ? /* @__PURE__ */ S("div", { className: "d-flex align-items-center", children: [
+  /* @__PURE__ */ n(Le.Option, { ...t }),
+  /* @__PURE__ */ n("span", { className: "px-1 template-studio-dropdown-postfix-icon", children: t.data.icon })
+] }) : /* @__PURE__ */ n(Le.Option, { ...t }), Et = ({
   name: t = "",
   control: s,
-  options: o,
-  multiple: l = !1,
+  options: l,
+  multiple: a = !1,
   placeholder: i,
   validation: e,
-  labelKey: a = "name",
-  disabled: c,
-  isInvalid: T,
-  value: g,
-  onChange: N,
-  uncontrolled: f,
-  menuPlacement: I = "auto",
-  closeOnSelect: j = !0
+  labelKey: d = "name",
+  disabled: o,
+  isInvalid: b,
+  value: D,
+  onChange: A,
+  uncontrolled: m,
+  menuPlacement: _ = "auto",
+  closeOnSelect: u = !0
 }) => {
-  const L = {
-    control: (y) => ({
-      ...y,
+  const j = {
+    control: (h) => ({
+      ...h,
       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)",
-      backgroundImage: T ? '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: b ? "var(--bs-form-invalid-border-color) !important" : "var(--ct-input-border-color)",
+      backgroundImage: b ? '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: T ? "var(--bs-form-invalid-border-color)" : "var(--ct-input-border-color)"
+        borderColor: b ? "var(--bs-form-invalid-border-color)" : "var(--ct-input-border-color)"
       },
       "& .react-select__single-value": {
         color: "var(--ct-input-color) !important"
@@ -815,544 +828,637 @@ const Ie = /* @__PURE__ */ ft(gt), _e = (t) => t.data.isSeparator ? /* @__PURE__
         display: "none"
       }
     }),
-    menu: (y) => ({
-      ...y,
+    menu: (h) => ({
+      ...h,
       marginTop: 0,
       width: "max-content",
       minWidth: "100%"
     }),
-    menuPortal: (y) => ({
-      ...y,
+    menuPortal: (h) => ({
+      ...h,
       zIndex: 9999
     }),
-    multiValueRemove: (y) => ({
-      ...y,
-      display: c ? "none" : "block"
+    multiValueRemove: (h) => ({
+      ...h,
+      display: o ? "none" : "block"
     })
   };
-  return f ? /* @__PURE__ */ r(
-    Ce,
+  return m ? /* @__PURE__ */ n(
+    Ae,
     {
-      components: { Option: _e },
-      isOptionDisabled: (y) => !!y.isSeparator,
-      className: Ie({
-        "is-invalid": T
+      components: { Option: $e },
+      isOptionDisabled: (h) => !!h.isSeparator,
+      className: Oe({
+        "is-invalid": b
       }),
-      styles: L,
+      styles: j,
       classNamePrefix: "react-select",
-      isMulti: l,
-      options: o,
-      onChange: N,
+      isMulti: a,
+      options: l,
+      onChange: A,
       placeholder: i,
       menuPortalTarget: document.body,
-      value: g,
-      getOptionLabel: typeof a == "string" ? (y) => y[a] : a,
-      getOptionValue: (y) => y.id,
-      isDisabled: c,
-      menuPlacement: I,
-      closeMenuOnSelect: j
+      value: D,
+      getOptionLabel: typeof d == "string" ? (h) => h[d] : d,
+      getOptionValue: (h) => h.id,
+      isDisabled: o,
+      menuPlacement: _,
+      closeMenuOnSelect: u
     }
-  ) : /* @__PURE__ */ r(
-    Ze,
+  ) : /* @__PURE__ */ n(
+    dt,
     {
       control: s,
       name: t,
       rules: e,
-      render: ({ field: { onChange: y, value: h, onBlur: b } }) => /* @__PURE__ */ r(
-        Ce,
+      render: ({ field: { onChange: h, value: v, onBlur: y } }) => /* @__PURE__ */ n(
+        Ae,
         {
-          components: { Option: _e },
-          isOptionDisabled: (p) => !!p.isSeparator,
-          className: Ie({
-            "is-invalid": T
+          components: { Option: $e },
+          isOptionDisabled: (f) => !!f.isSeparator,
+          className: Oe({
+            "is-invalid": b
           }),
-          styles: L,
+          styles: j,
           classNamePrefix: "react-select",
-          isMulti: l,
-          options: o,
-          onBlur: b,
-          onChange: y,
+          isMulti: a,
+          options: l,
+          onBlur: y,
+          onChange: h,
           placeholder: i,
           menuPortalTarget: document.body,
-          value: h,
-          getOptionLabel: typeof a == "string" ? (p) => p[a] : a,
-          getOptionValue: (p) => p.id,
-          isDisabled: c,
-          menuPlacement: I,
-          closeMenuOnSelect: j
+          value: v,
+          getOptionLabel: typeof d == "string" ? (f) => f[d] : d,
+          getOptionValue: (f) => f.id,
+          isDisabled: o,
+          menuPlacement: _,
+          closeMenuOnSelect: u
         },
-        h ? JSON.stringify(h) : "reset"
+        v ? v.id || v.value || JSON.stringify(v) : "reset"
       )
     }
   );
-}, se = ({
+}, oe = ({
   label: t,
   name: s,
-  validation: o,
-  control: l,
+  validation: l,
+  control: a,
   error: i,
   ...e
-}) => /* @__PURE__ */ S(F.Group, { className: "mb-1", children: [
-  t && /* @__PURE__ */ S(F.Label, { className: "mb-3 d-block form-label ts-label-height", children: [
+}) => /* @__PURE__ */ S(H.Group, { className: "mb-1", children: [
+  t && /* @__PURE__ */ S(H.Label, { className: "mb-3 d-block form-label ts-label-height", children: [
     t,
     " ",
-    e.required && /* @__PURE__ */ r("span", { className: "text-danger", children: "*" })
+    e.required && /* @__PURE__ */ n("span", { className: "text-danger", children: "*" })
   ] }),
-  /* @__PURE__ */ r(
-    ht,
+  /* @__PURE__ */ n(
+    Et,
     {
-      control: l,
+      control: a,
       disabled: e.disabled,
       options: e.options ?? [],
-      validation: o,
+      validation: l,
       isInvalid: i && !!i[s],
       name: s
     }
   ),
-  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 Le({
+  i && i[s] ? /* @__PURE__ */ n(H.Control.Feedback, { type: "invalid", children: i[s].message }) : null
+] }), _t = () => {
+  const t = V();
+  lt();
+  const { enerexIdentifier: s, projectId: l } = B();
+  return Te({
     mutationKey: ["saveTemplate"],
-    mutationFn: async (i) => (i.enerexIdentifier = s ?? "", i.projectId = o ?? "", await t.post(
-      `${Q.SaveTemplate}`,
+    mutationFn: async (i) => (i.enerexIdentifier = s ?? "", i.projectId = l ?? "", await t.post(
+      `${G.SaveTemplate}`,
       i
     ))
   });
-}, z = {
+}, X = (t) => {
+  let s = /* @__PURE__ */ n(
+    "span",
+    {
+      style: { width: "20px", height: "20px", display: "inline-block" }
+    }
+  );
+  return t.variant === "filled" ? s = /* @__PURE__ */ n(
+    "svg",
+    {
+      version: "1.0",
+      id: "Layer_1",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "20px",
+      height: "20px",
+      viewBox: "0 0 64 64",
+      "enable-background": "new 0 0 64 64",
+      children: /* @__PURE__ */ n(
+        "path",
+        {
+          fill: "#2196F3",
+          d: `M63.893,24.277c-0.238-0.711-0.854-1.229-1.595-1.343l-19.674-3.006L33.809,1.15\r
+	C33.479,0.448,32.773,0,31.998,0s-1.48,0.448-1.811,1.15l-8.815,18.778L1.698,22.935c-0.741,0.113-1.356,0.632-1.595,1.343\r
+	c-0.238,0.71-0.059,1.494,0.465,2.031l14.294,14.657L11.484,61.67c-0.124,0.756,0.195,1.517,0.822,1.957\r
+	c0.344,0.243,0.747,0.366,1.151,0.366c0.332,0,0.666-0.084,0.968-0.25l17.572-9.719l17.572,9.719c0.302,0.166,0.636,0.25,0.968,0.25\r
+	c0.404,0,0.808-0.123,1.151-0.366c0.627-0.44,0.946-1.201,0.822-1.957l-3.378-20.704l14.294-14.657\r
+	C63.951,25.771,64.131,24.987,63.893,24.277z`
+        }
+      )
+    }
+  ) : t.variant === "outlined" && (s = /* @__PURE__ */ n(
+    "svg",
+    {
+      version: "1.0",
+      id: "Layer_1",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "20px",
+      height: "20px",
+      viewBox: "0 0 64 64",
+      enableBackground: "new 0 0 64 64",
+      children: /* @__PURE__ */ n(
+        "path",
+        {
+          fill: t.fill || "rgba(247, 216, 40, 0)",
+          stroke: t.stroke || "#000000",
+          strokeWidth: t.strokeWidth || "2",
+          d: `M63.893,24.277c-0.238-0.711-0.854-1.229-1.595-1.343l-19.674-3.006L33.809,1.15\r
+	C33.479,0.448,32.773,0,31.998,0s-1.48,0.448-1.811,1.15l-8.815,18.778L1.698,22.935c-0.741,0.113-1.356,0.632-1.595,1.343\r
+	c-0.238,0.71-0.059,1.494,0.465,2.031l14.294,14.657L11.484,61.67c-0.124,0.756,0.195,1.517,0.822,1.957\r
+	c0.344,0.243,0.747,0.366,1.151,0.366c0.332,0,0.666-0.084,0.968-0.25l17.572-9.719l17.572,9.719c0.302,0.166,0.636,0.25,0.968,0.25\r
+	c0.404,0,0.808-0.123,1.151-0.366c0.627-0.44,0.946-1.201,0.822-1.957l-3.378-20.704l14.294-14.657\r
+	C63.951,25.771,64.131,24.987,63.893,24.277z`
+        }
+      )
+    }
+  )), s;
+}, Z = {
   id: "",
   name: "New (Blank)"
-}, Ae = {
+}, De = {
   id: "",
   name: "Separator",
   isSeparator: !0
-}, Tt = ({
+}, kt = ({
   onSelectItem: t,
   templateLoading: s,
-  onReset: o,
-  editorInitialized: l
+  onReset: l,
+  editorInitialized: a
 }) => {
-  const { isAdmin: i, defaultSelector: e } = R(), {
-    register: a,
-    handleSubmit: c,
-    clearErrors: T,
-    setValue: g,
-    control: N,
-    watch: f,
-    reset: I,
-    setError: j,
-    getValues: L,
+  const { isAdmin: i, defaultSelector: e } = B(), { mutateAsync: d, isPending: o } = Tt(), {
+    register: b,
+    handleSubmit: D,
+    clearErrors: A,
+    setValue: m,
+    control: _,
+    watch: u,
+    reset: j,
+    setError: h,
+    getValues: v,
     formState: { errors: y }
-  } = et({
+  } = ct({
     defaultValues: {
       templateName: "",
       subTemplateType: void 0,
       subTemplateType2: void 0,
       subject: "",
       templateType: void 0,
-      template: z
+      template: Z
     },
     mode: "onChange"
   }), {
-    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((m) => m.id != null), d = ye(n, 0);
-      qe(fe(d));
+    data: f,
+    refetch: g,
+    isLoading: T
+  } = vt(), [P, pe] = w([]), [K, ee] = w(!1), [L, te] = w(), [ne, re] = w(), { mutateAsync: me, isPending: N } = xt(), { mutateAsync: ue, isPending: I } = _t(), { data: F, isLoading: q } = St(), [fe, Fe] = w([]), [O, se] = w([]), [$, ie] = w([]), [Ue, ye] = w(!1), [W, He] = w("confirm"), [Ve, ge] = w(!1), [xe, Se] = w(!1);
+  E(() => {
+    if (F) {
+      let r = F.filter((p) => p.id != null), c = ve(r, 0);
+      Fe(be(c));
     }
-  }, [U]);
-  const Be = (n, d) => {
-    let m = [];
-    return n.forEach((C, E) => {
-      d.includes(E) && E !== 0 && m.push(Ae), m.push(C);
-    }), m;
+  }, [F]);
+  const Ge = (r, c) => {
+    let p = [];
+    return r.forEach((C, k) => {
+      c.includes(k) && k !== 0 && p.push(De), p.push(C);
+    }), p;
   };
-  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();
+  E(() => {
+    s(!!(T || N || I || q || !a));
+  }, [T, N, I, q, a]), E(() => {
+    f?.sort((r, c) => r.readonly !== c.readonly ? (r.readonly ? 0 : 1) - (c.readonly ? 0 : 1) : r.name.localeCompare(c.name)), pe(f ?? []);
+  }, [f]);
+  const Ke = async (r) => {
+    te(r), r && (i || !r.readonly) ? (m("templateName", r?.name), A()) : (m("templateName", ""), m("subject", ""));
+    const c = await me({ id: r?.id });
+    c ? re(c) : ae();
   };
-  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(
-            (m) => m.parent_id.toString() === `${f("templateType")?.id}`
+  E(() => {
+    if ((e === void 0 || e.templateId === void 0 || K) && m("template", Z), u("templateType")) {
+      let r = F?.filter((p) => p.id !== void 0) ?? [], c = ve(r, 1);
+      se(
+        be(
+          c.filter(
+            (p) => p.parent_id.toString() === `${u("templateType")?.id}`
           )
         )
-      ), g("subTemplateType", void 0), g("subTemplateType2", void 0);
+      ), m("subTemplateType", void 0), m("subTemplateType2", void 0);
     }
-  }, [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(
-            (m) => m.parent_id.toString() === `${f("subTemplateType")?.id}`
+  }, [u("templateType")]), E(() => {
+    if ((e === void 0 || e.templateId === void 0) && m("template", Z), u("subTemplateType")) {
+      let r = F?.filter((p) => p.id !== void 0) ?? [], c = ve(r, 2);
+      ie(
+        be(
+          c.filter(
+            (p) => p.parent_id.toString() === `${u("subTemplateType")?.id}`
           )
         )
-      ), g("subTemplateType2", void 0);
+      ), m("subTemplateType2", void 0);
     }
-  }, [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 [Ue, Te] = v(!1);
-  x(() => {
-    he || Ue || X && q && l && (Te(!0), t(X), g("subject", X.subject ?? ""), setTimeout(() => {
-      Te(!1);
+  }, [u("subTemplateType")]), E(() => {
+    const r = Ne();
+    r.length > 0 && r[0].id !== "" ? (e === void 0 || e.templateId === void 0 || K) && m("template", r[0]) : (e === void 0 || e.templateId === void 0 || K) && m("template", Z);
+  }, [u("subTemplateType2")]), E(() => {
+    let r = P.find((c) => c.id === u("template")?.id);
+    Ke(r);
+  }, [u("template")]);
+  const [We, Ce] = w(!1);
+  E(() => {
+    xe || We || ne && L && a && (Ce(!0), t(ne), m("subject", ne.subject ?? ""), setTimeout(() => {
+      Ce(!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,
-      ...C.map((w) => ({
-        id: w.id,
-        name: He(m, w.id),
-        isSeparator: w.isSeparator
+  }, [ne, L, a, xe]);
+  const Ne = () => {
+    let r = [Z], c = "templateType";
+    $.length > 0 ? c = "subTemplateType2" : O.length > 0 && (c = "subTemplateType");
+    let p = P.filter(
+      (k) => (k.type?.toString() === u(c)?.id.toString() || k.type === null) && u(c)?.id != null
+    ), C = Ge(p, [p.findIndex((k) => !k.readonly)]);
+    return C.length > 0 && (C[0].readonly === !0 && !i ? r = [] : r.push(De), r = [
+      ...r,
+      ...C.map((x) => ({
+        id: x.id,
+        name: ze(p, x.id),
+        icon: et(p, x.id) ? /* @__PURE__ */ n(X, { variant: "filled" }) : /* @__PURE__ */ n(X, { variant: "empty" }),
+        isSeparator: x.isSeparator
       }))
-    ]), n.length ? n : [];
+    ]), r.length ? r : [];
   };
-  x(() => {
+  E(() => {
     if (e && e.type1) {
-      const n = ce?.find(
-        (d) => `${d.id}` === e.type1
+      const r = fe?.find(
+        (c) => `${c.id}` === e.type1
       );
-      g("templateType", n);
+      m("templateType", r);
     }
-  }, [U, ce]), x(() => {
+  }, [F, fe]), E(() => {
     if (e && e.type2) {
-      const n = P?.find(
-        (d) => `${d.id}` === e.type2
+      const r = O?.find(
+        (c) => `${c.id}` === e.type2
       );
-      g("subTemplateType", n);
+      m("subTemplateType", r);
     }
-  }, [U, P]), x(() => {
+  }, [F, O]), E(() => {
     if (e && e.type3) {
-      const n = O?.find(
-        (d) => `${d.id}` === e.type3
+      const r = $?.find(
+        (c) => `${c.id}` === e.type3
       );
-      g("subTemplateType2", n);
+      m("subTemplateType2", r);
     }
-  }, [U, O]), x(() => {
-    if (e && e.templateId && u && u.length > 0 && !M && l) {
-      const n = u?.find(
-        (d) => `${d.id}` === e.templateId
+  }, [F, $]), E(() => {
+    if (e && e.templateId && P && P.length > 0 && !K && a) {
+      const r = P?.find(
+        (c) => `${c.id}` === e.templateId
       );
-      ae(!0), n && (V(n), g("template", n));
+      ee(!0), r && (te(r), m("template", r));
     }
-  }, [u, l]);
-  const He = (n, d) => {
-    let m = n.find((C) => C.id === d);
-    return m ? `${m.displayName}` : "";
-  }, Fe = (n) => {
+  }, [P, a]);
+  const ze = (r, c) => {
+    let p = r.find((C) => C.id === c);
+    return p ? `${p.displayName}` : "";
+  }, Qe = (r) => {
     window.StripoEditorApi.actionsApi.getTemplateData(
-      async (d) => {
-        let m = n.template.id, C = "";
-        q?.readonly && (m = "", C = n.template.id);
-        let E = u.find(
-          (D) => D.name === n.templateName.trim()
+      async (c) => {
+        let p = r.template.id, C = "";
+        L?.readonly && (p = "", C = r.template.id);
+        let k = P.find(
+          (R) => R.name === r.templateName.trim()
         );
-        if (E && E.id !== m) {
-          j("templateName", {
+        if (k && k.id !== p) {
+          h("templateName", {
             type: "validate",
             message: "Template name already exists. Please choose a different name."
           });
           return;
         }
-        let w = n.templateType.id;
-        O && O.length > 0 ? w = n.subTemplateType2.id : P && P.length > 0 && (w = n.subTemplateType.id);
-        const W = {
+        let x = r.templateType.id;
+        $ && $.length > 0 ? x = r.subTemplateType2.id : O && O.length > 0 && (x = r.subTemplateType.id);
+        const Q = {
           enerexIdentifier: "",
           projectId: "",
-          templateId: m,
-          templateType: w,
-          name: n.templateName.trim(),
-          html: d.html,
-          css: d.css,
-          subject: n.templateType.id === "2" ? n?.subject ?? "" : "",
+          templateId: p,
+          templateType: x,
+          name: r.templateName.trim(),
+          html: c.html,
+          css: c.css,
+          subject: r.templateType.id === "2" ? r?.subject ?? "" : "",
           parent_id: C
         };
-        if (await de(W)) {
-          if (T(), q?.readonly && !i)
-            I(), ee([]), te([]);
+        if (await ue(Q)) {
+          if (A(), L?.readonly && !i)
+            j(), se([]), ie([]);
           else {
-            const D = await oe({ id: m });
-            D ? Z(D) : ne();
+            const R = await me({ id: p });
+            R ? re(R) : ae();
           }
-          b();
+          await g();
         }
       }
     );
-  }, ne = () => {
-    be(!0), s(!1), Z(void 0), t(void 0), setTimeout(() => {
-      be(!1);
+  }, ae = () => {
+    Se(!0), s(!1), re(void 0), t(void 0), setTimeout(() => {
+      Se(!1);
     }, 0);
-  }, Ve = (n, d) => {
-    const m = d.trim(), C = "";
-    if (u.find(
-      (w) => w.name === m && w.id !== C
+  }, Ye = (r, c) => {
+    const p = c.trim(), C = "";
+    if (P.find(
+      (x) => x.name === p && x.id !== C
     )) {
-      me(!0);
+      ge(!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 = {
+    ye(!1), window.StripoEditorApi.actionsApi.getTemplateData(
+      async (x) => {
+        const Q = r.template.id;
+        let Y = r.templateType.id;
+        $?.length ? Y = r.subTemplateType2.id : O?.length && (Y = r.subTemplateType.id);
+        const R = {
           enerexIdentifier: "",
           projectId: "",
           templateId: C,
           templateType: Y,
-          name: m,
-          html: w.html,
-          css: w.css,
-          subject: n.templateType.id === "2" ? n?.subject ?? "" : "",
-          parent_id: W
+          name: p,
+          html: x.html,
+          css: x.css,
+          subject: r.templateType.id === "2" ? r?.subject ?? "" : "",
+          parent_id: Q
         };
-        await de(D) && (T(), ne(), I(), ee([]), te([]), b());
+        await ue(R) && (A(), ae(), j(), se([]), ie([]), await g(), m("template", void 0));
       }
     );
-  }, Ge = (n) => {
+  }, Je = (r) => {
     window.StripoEditorApi.actionsApi.getTemplateData(
-      async (d) => {
-        let m = n.template.id, C = "", E = u.find(
-          (D) => D.name === n.templateName.trim()
+      async (c) => {
+        let p = r.template.id, C = "", k = P.find(
+          (R) => R.name === r.templateName.trim()
         );
-        if (E && E.id !== m) {
-          j("templateName", {
+        if (k && k.id !== p) {
+          h("templateName", {
             type: "validate",
             message: "Template name already exists. Please choose a different name."
           });
           return;
         }
-        let w = n.templateType.id;
-        O && O.length > 0 ? w = n.subTemplateType2.id : P && P.length > 0 && (w = n.subTemplateType.id);
-        const W = {
+        let x = r.templateType.id;
+        $ && $.length > 0 ? x = r.subTemplateType2.id : O && O.length > 0 && (x = r.subTemplateType.id);
+        const Q = {
           enerexIdentifier: "",
           projectId: "",
-          templateId: m,
-          templateType: w,
-          name: n.templateName.trim(),
-          html: d.html,
-          css: d.css,
-          subject: n.templateType.id === "2" ? n?.subject ?? "" : "",
+          templateId: p,
+          templateType: x,
+          name: r.templateName.trim(),
+          html: c.html,
+          css: c.css,
+          subject: r.templateType.id === "2" ? r?.subject ?? "" : "",
           parent_id: C
         };
-        if (await de(W)) {
-          T();
-          const D = await oe({ id: m });
-          D ? Z(D) : ne(), b();
+        if (await ue(Q)) {
+          A();
+          const R = await me({ id: p });
+          R ? re(R) : ae(), await g();
         }
       }
     );
-  }, Ke = () => {
-    ke("input"), pe(!0), me(!1);
-  }, Qe = (n) => {
-    if (G === "input") {
-      const d = L();
-      Ve(d, n || "");
+  }, Xe = () => {
+    He("input"), ye(!0), ge(!1);
+  }, Ze = (r) => {
+    if (W === "input") {
+      const c = v();
+      Ye(c, r || "");
       return;
     }
-  };
-  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,
+  }, et = (r, c) => {
+    let p = r.find((C) => C.id === c);
+    if (p)
+      return p.is_favourite;
+  }, tt = async () => {
+    let r = u("templateType")?.id;
+    $ && $.length > 0 ? r = u("subTemplateType2")?.id : O && O.length > 0 && (r = u("subTemplateType")?.id), await d({
+      categoryId: r ?? "",
+      templateId: u("template")?.id ?? ""
+    }), L && te({
+      ...L,
+      is_favourite: !0
+    }), await g();
+  }, le = u("templateType"), Ie = u("subTemplateType"), nt = u("subTemplateType2"), rt = u("template");
+  return /* @__PURE__ */ S(Ee, { children: [
+    /* @__PURE__ */ n(ke, { className: "border border-0 text-start", children: /* @__PURE__ */ n(ke.Body, { className: "pe-0 ps-2", children: /* @__PURE__ */ n("form", { children: /* @__PURE__ */ n("div", { className: "template-list-container gap-3", children: /* @__PURE__ */ S(ot, { children: [
+      /* @__PURE__ */ n(U, { children: /* @__PURE__ */ n(
+        oe,
         {
           label: "Category",
-          control: N,
+          control: _,
           error: y,
-          options: ce,
+          options: fe,
           required: !0,
-          disabled: p || _ || A || $ || !l,
+          disabled: T || N || I || q || o || !a,
           validation: {
             required: {
               value: !0,
               message: "Select a category"
             }
           },
-          ...a("templateType")
+          ...b("templateType")
         }
       ) }),
-      P && P.length > 0 && /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(
-        se,
+      O && O.length > 0 && /* @__PURE__ */ n(U, { children: /* @__PURE__ */ n(
+        oe,
         {
           label: "Type",
-          control: N,
+          control: _,
           error: y,
-          options: P,
+          options: O,
           required: !0,
-          disabled: p || _ || A || $ || !l,
+          disabled: T || N || I || q || o || !a,
           validation: {
             required: {
               value: !0,
               message: "Select a type"
             }
           },
-          ...a("subTemplateType")
+          ...b("subTemplateType")
         }
       ) }),
-      O && O.length > 0 && /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(
-        se,
+      $ && $.length > 0 && /* @__PURE__ */ n(U, { children: /* @__PURE__ */ n(
+        oe,
         {
           label: "Sub Type",
-          control: N,
+          control: _,
           error: y,
-          options: O,
+          options: $,
           required: !0,
-          disabled: p || _ || A || $ || !l,
+          disabled: T || N || I || q || o || !a,
           validation: {
             required: {
               value: !0,
               message: "Select a subtype"
             }
           },
-          ...a("subTemplateType2")
+          ...b("subTemplateType2")
         }
       ) }),
-      /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(
-        se,
+      /* @__PURE__ */ n(U, { children: /* @__PURE__ */ n(
+        oe,
         {
           label: "Template",
-          control: N,
+          control: _,
           error: y,
-          disabled: p || _ || A || $ || !l,
-          options: ve(),
+          disabled: T || N || I || q || o || !a,
+          options: Ne(),
           required: !1,
-          ...a("template")
+          ...b("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"
+      /* @__PURE__ */ S(U, { className: "d-flex align-self-start", children: [
+        /* @__PURE__ */ n(
+          je,
+          {
+            label: "Name",
+            register: b,
+            error: y,
+            required: !0,
+            name: "templateName",
+            validation: {
+              required: {
+                value: !0,
+                message: "Enter a name"
+              }
             }
           }
-        }
-      ) }),
-      f("templateType")?.id === "2" && /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(
-        Ee,
+        ),
+        Ie?.key?.toString() === "9" && /* @__PURE__ */ n(
+          J,
+          {
+            className: "template-favourite-btn",
+            style: { width: "26px", marginTop: "25px" },
+            variant: "light",
+            disabled: T || N || I || q || o || (L ? L?.is_favourite : !1),
+            onClick: tt,
+            children: N || I || o ? /* @__PURE__ */ n(
+              z,
+              {
+                animation: "border",
+                style: { width: "11px", height: "11px" },
+                size: "sm",
+                role: "status",
+                className: "me-1",
+                children: /* @__PURE__ */ n("span", { className: "visually-hidden", children: "Loading..." })
+              }
+            ) : L ? L?.is_favourite ? /* @__PURE__ */ n(X, { variant: "filled" }) : /* @__PURE__ */ n(X, { variant: "outlined" }) : /* @__PURE__ */ n(X, { variant: "outlined" })
+          }
+        )
+      ] }),
+      le?.key?.toString() === "12" && /* @__PURE__ */ n(U, { children: /* @__PURE__ */ n(
+        je,
         {
           label: "Subject",
-          register: a,
+          register: b,
           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,
+      /* @__PURE__ */ S(U, { className: "d-flex align-self-start justify-content-end gap-2 mb-1 btn-padding", children: [
+        /* @__PURE__ */ n(
+          J,
           {
             style: { width: "70px" },
             variant: "primary",
-            disabled: p || _ || A || $ || !l,
+            disabled: T || N || I || q || o || !a,
             onClick: () => {
-              V(void 0), I(), ee([]), te([]), o();
+              te(void 0), j(), se([]), ie([]), l();
             },
-            children: _ || A ? /* @__PURE__ */ r(
-              J,
+            children: N || I || o ? /* @__PURE__ */ n(
+              z,
               {
                 animation: "border",
                 style: { width: "11px", height: "11px" },
                 size: "sm",
                 role: "status",
                 className: "me-1",
-                children: /* @__PURE__ */ r("span", { className: "visually-hidden", children: "Loading..." })
+                children: /* @__PURE__ */ n("span", { className: "visually-hidden", children: "Loading..." })
               }
             ) : "Clear"
           }
         ),
-        (f("templateType")?.id.toString() !== "2" || (f("templateType")?.id.toString() === "2" && (q?.id ?? "")) !== "") && /* @__PURE__ */ S(we, { children: [
-          !(q?.readonly && i) && /* @__PURE__ */ r(
-            re,
+        (le?.key?.toString() !== "12" || (le?.key?.toString() === "12" && (L?.id ?? "")) !== "") && /* @__PURE__ */ S(Ee, { children: [
+          !(L?.readonly && i) && /* @__PURE__ */ n(
+            J,
             {
               type: "button",
-              onClick: c(Fe),
+              onClick: D(Qe),
               variant: "primary",
               style: { width: "80px" },
-              disabled: p || _ || A || $ || !l,
-              children: _ || A ? /* @__PURE__ */ r(
-                J,
+              disabled: T || N || I || q || o || !a,
+              children: N || I || o ? /* @__PURE__ */ n(
+                z,
                 {
                   animation: "border",
                   style: { width: "11px", height: "11px" },
                   size: "sm",
                   role: "status",
                   className: "me-1",
-                  children: /* @__PURE__ */ r("span", { className: "visually-hidden", children: "Loading..." })
+                  children: /* @__PURE__ */ n("span", { className: "visually-hidden", children: "Loading..." })
                 }
-              ) : q?.readonly ? "Save as" : "Save"
+              ) : L?.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,
+          (le?.key?.toString() === "28" || Ie?.key?.toString() === "9" && nt?.key?.toString() === "3" && (rt?.id ?? "") !== "") && /* @__PURE__ */ n(
+            J,
             {
               type: "button",
               variant: "primary",
               style: { width: "80px" },
-              onClick: () => Ke(),
-              disabled: p || _ || A || $ || !l,
-              children: _ || A ? /* @__PURE__ */ r(
-                J,
+              onClick: () => Xe(),
+              disabled: T || N || I || q || o || !a,
+              children: N || I || o ? /* @__PURE__ */ n(
+                z,
                 {
                   animation: "border",
                   style: { width: "11px", height: "11px" },
                   size: "sm",
                   role: "status",
                   className: "me-1",
-                  children: /* @__PURE__ */ r("span", { className: "visually-hidden", children: "Loading..." })
+                  children: /* @__PURE__ */ n("span", { className: "visually-hidden", children: "Loading..." })
                 }
               ) : "Save as"
             }
           ),
-          q?.readonly && i && /* @__PURE__ */ r(
-            re,
+          L?.readonly && i && /* @__PURE__ */ n(
+            J,
             {
               type: "button",
-              onClick: c(Ge),
+              onClick: D(Je),
               variant: "primary",
               style: { width: "80px" },
-              disabled: p || _ || A || $ || !l,
-              children: _ || A ? /* @__PURE__ */ r(
-                J,
+              disabled: T || N || I || q || o || !a,
+              children: N || I || o ? /* @__PURE__ */ n(
+                z,
                 {
                   animation: "border",
                   style: { width: "11px", height: "11px" },
                   size: "sm",
                   role: "status",
                   className: "me-1",
-                  children: /* @__PURE__ */ r("span", { className: "visually-hidden", children: "Loading..." })
+                  children: /* @__PURE__ */ n("span", { className: "visually-hidden", children: "Loading..." })
                 }
               ) : "Save"
             }
@@ -1360,70 +1466,70 @@ const Ie = /* @__PURE__ */ ft(gt), _e = (t) => t.data.isSeparator ? /* @__PURE__
         ] })
       ] })
     ] }) }) }) }) }),
-    /* @__PURE__ */ r(
-      dt,
+    /* @__PURE__ */ n(
+      bt,
       {
-        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 ""?' : "",
+        show: Ue,
+        variant: W,
+        title: W === "confirm" ? "Are you sure?" : "Save Template As",
+        message: W === "confirm" ? 'Are you sure you want to remove custom template ""?' : "",
         label: "New Name",
         requiredMessage: "Enter a new name",
-        externalError: Re,
+        externalError: Ve,
         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)
+        confirmText: W === "confirm" ? "Ok" : "Save as",
+        confirmButtonVariant: W === "confirm" ? "danger" : "primary",
+        onConfirm: Ze,
+        onCancel: () => ye(!1),
+        onInputChange: () => ge(!1)
       }
     )
   ] });
-}, _t = ({ config: t }) => {
-  const [s, o] = v(!1), [l, i] = v(), [e, a] = v(!1);
-  x(() => {
-    t.isAdmin || a(!0);
+}, Rt = ({ config: t }) => {
+  const [s, l] = w(!1), [a, i] = w(), [e, d] = w(!1);
+  E(() => {
+    t.isAdmin || d(!0);
   }, []);
-  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,
+  const [o, b] = w(!1);
+  return /* @__PURE__ */ n(pt, { configs: t, children: /* @__PURE__ */ n(ut, { children: /* @__PURE__ */ S("div", { className: "root-widget", children: [
+    /* @__PURE__ */ n(
+      kt,
       {
-        templateLoading: T,
-        onSelectItem: (f) => {
-          if (i(f), t.isAdmin && a(!0), window.StripoEditorApi && window.StripoEditorApi.actionsApi) {
-            let I = ie;
+        templateLoading: b,
+        onSelectItem: (m) => {
+          if (i(m), t.isAdmin && d(!0), window.StripoEditorApi && window.StripoEditorApi.actionsApi) {
+            let _ = de;
             console.log("selected template:"), window.StripoEditorApi.actionsApi.updateHtmlAndCss(
-              f?.html ?? I,
-              f?.css ?? "",
+              m?.html ?? _,
+              m?.css ?? "",
               ""
             );
           }
         },
         editorInitialized: s,
         onReset: () => {
-          T(!1), i(void 0), window.StripoEditorApi && window.StripoEditorApi.actionsApi && window.StripoEditorApi.actionsApi.updateHtmlAndCss(
-            ie,
+          b(!1), i(void 0), window.StripoEditorApi && window.StripoEditorApi.actionsApi && window.StripoEditorApi.actionsApi.updateHtmlAndCss(
+            de,
             "",
             ""
           );
         }
       }
     ),
-    e && /* @__PURE__ */ r(
-      ot,
+    e && /* @__PURE__ */ n(
+      ht,
       {
-        onEditorInitialized: o,
+        onEditorInitialized: l,
         templateHTML: {
-          css: l?.css ?? "",
-          html: l?.html ?? ie
+          css: a?.css ?? "",
+          html: a?.html ?? de
         },
-        loading: c,
+        loading: o,
         className: "col-span-5"
       }
     )
   ] }) }) });
 };
 export {
-  _t as EditorWidget
+  Rt as EditorWidget
 };