npm - @enerex/template-studio - Versions diffs - 1.1.35 → 1.1.36 - Mend

@enerex/template-studio 1.1.35 → 1.1.36

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

package/README.md +63 -63
package/dist/enerex-template-editor.es.js +615 -501
package/dist/enerex-template-editor.umd.js +3 -3
package/dist/types/component/editor/index.d.ts +1 -0
package/dist/types/component/template-form/index.d.ts +1 -0
package/dist/types/context/configuration-provider.d.ts +9 -0
package/dist/types/queries/mark_favourite.mutation.d.ts +2 -0
package/package.json +1 -1

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

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