@enerex/template-studio 1.1.33 → 1.1.34
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as i, jsxs as I, Fragment as Ee } from "react/jsx-runtime";
|
|
2
|
-
import j, { useContext as de, useState as
|
|
2
|
+
import j, { useContext as de, useState as C, useRef as Ie, useEffect as S } from "react";
|
|
3
3
|
import { QueryClient as _e, QueryClientProvider as Ne, useQuery as z, useMutation as ce, useQueryClient as Pe } from "@tanstack/react-query";
|
|
4
4
|
import ee from "axios";
|
|
5
5
|
import { Spinner as J, Form as O, Card as te, Row as Ae, Col as A, Button as ne } from "react-bootstrap";
|
|
@@ -483,10 +483,10 @@ const F = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
|
|
|
483
483
|
className: r = "",
|
|
484
484
|
loading: s = !1
|
|
485
485
|
}) => {
|
|
486
|
-
const { post: l } = me(), { data: n } = ke(), { data: t } = Be(), [o, d] =
|
|
486
|
+
const { post: l } = me(), { data: n } = ke(), { data: t } = Be(), [o, d] = C(
|
|
487
487
|
e ?? { html: F, css: "" }
|
|
488
488
|
), { userEmail: p } = _(), v = Ie(null), N = "https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png", b = "https://plugins.stripo.email/api/v1/auth";
|
|
489
|
-
|
|
489
|
+
S(() => {
|
|
490
490
|
(async () => (await T(), n && t && await w(H.EDITOR_SCRIPT_URL)))();
|
|
491
491
|
}, [n, t]);
|
|
492
492
|
async function T() {
|
|
@@ -535,11 +535,11 @@ const F = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
|
|
|
535
535
|
secretKey: H.EDITOR_SECRET_KEY,
|
|
536
536
|
userId: p,
|
|
537
537
|
role: "user"
|
|
538
|
-
},
|
|
538
|
+
}, E = await l(
|
|
539
539
|
b,
|
|
540
540
|
y
|
|
541
541
|
);
|
|
542
|
-
|
|
542
|
+
E?.token && f(E.token);
|
|
543
543
|
},
|
|
544
544
|
mergeTags: $e(n ?? [])
|
|
545
545
|
};
|
|
@@ -806,7 +806,7 @@ const oe = /* @__PURE__ */ Ge(Ke), le = (e) => e.data.isSeparator ? /* @__PURE__
|
|
|
806
806
|
)
|
|
807
807
|
}
|
|
808
808
|
);
|
|
809
|
-
},
|
|
809
|
+
}, U = ({
|
|
810
810
|
label: e,
|
|
811
811
|
name: r,
|
|
812
812
|
validation: s,
|
|
@@ -841,7 +841,7 @@ const oe = /* @__PURE__ */ Ge(Ke), le = (e) => e.data.isSeparator ? /* @__PURE__
|
|
|
841
841
|
n
|
|
842
842
|
))
|
|
843
843
|
});
|
|
844
|
-
},
|
|
844
|
+
}, B = {
|
|
845
845
|
id: "",
|
|
846
846
|
name: "New (Blank)"
|
|
847
847
|
}, ae = {
|
|
@@ -870,15 +870,15 @@ const oe = /* @__PURE__ */ Ge(Ke), le = (e) => e.data.isSeparator ? /* @__PURE__
|
|
|
870
870
|
subTemplateType2: void 0,
|
|
871
871
|
subject: "",
|
|
872
872
|
templateType: void 0,
|
|
873
|
-
template:
|
|
873
|
+
template: B
|
|
874
874
|
},
|
|
875
875
|
mode: "onChange"
|
|
876
876
|
}), {
|
|
877
877
|
data: T,
|
|
878
878
|
refetch: w,
|
|
879
879
|
isLoading: P
|
|
880
|
-
} = Ue(), [c, g] =
|
|
881
|
-
|
|
880
|
+
} = Ue(), [c, g] = C([]), [f, y] = C(), [E, X] = C(), { mutateAsync: fe, isPending: L } = He(), { mutateAsync: ge, isPending: M } = We(), { data: k, isLoading: Z } = ze(), [ye, he] = C([]), [R, G] = C([]), [q, V] = C([]);
|
|
881
|
+
S(() => {
|
|
882
882
|
if (k) {
|
|
883
883
|
let a = k.filter((u) => u.id != null), m = W(a, 0);
|
|
884
884
|
he(Q(m));
|
|
@@ -890,9 +890,9 @@ const oe = /* @__PURE__ */ Ge(Ke), le = (e) => e.data.isSeparator ? /* @__PURE__
|
|
|
890
890
|
m.includes(h) && h !== 0 && u.push(ae), u.push(x);
|
|
891
891
|
}), u;
|
|
892
892
|
};
|
|
893
|
-
|
|
893
|
+
S(() => {
|
|
894
894
|
r(!!L);
|
|
895
|
-
}, [L]),
|
|
895
|
+
}, [L]), S(() => {
|
|
896
896
|
T?.sort((a, m) => a.readonly !== m.readonly ? (a.readonly ? 0 : 1) - (m.readonly ? 0 : 1) : a.name.localeCompare(m.name)), g(T ?? []);
|
|
897
897
|
}, [T]);
|
|
898
898
|
const we = async (a) => {
|
|
@@ -900,8 +900,8 @@ const oe = /* @__PURE__ */ Ge(Ke), le = (e) => e.data.isSeparator ? /* @__PURE__
|
|
|
900
900
|
const m = await fe({ id: a?.id });
|
|
901
901
|
X(m || void 0);
|
|
902
902
|
};
|
|
903
|
-
|
|
904
|
-
if (o("template",
|
|
903
|
+
S(() => {
|
|
904
|
+
if (o("template", B), p("templateType")) {
|
|
905
905
|
let a = k?.filter((u) => u.id !== void 0) ?? [], m = W(a, 1);
|
|
906
906
|
G(
|
|
907
907
|
Q(
|
|
@@ -911,8 +911,8 @@ const oe = /* @__PURE__ */ Ge(Ke), le = (e) => e.data.isSeparator ? /* @__PURE__
|
|
|
911
911
|
)
|
|
912
912
|
), o("subTemplateType", void 0), o("subTemplateType2", void 0);
|
|
913
913
|
}
|
|
914
|
-
}, [p("templateType")]),
|
|
915
|
-
if (o("template",
|
|
914
|
+
}, [p("templateType")]), S(() => {
|
|
915
|
+
if (o("template", B), p("subTemplateType")) {
|
|
916
916
|
let a = k?.filter((u) => u.id !== void 0) ?? [], m = W(a, 2);
|
|
917
917
|
V(
|
|
918
918
|
Q(
|
|
@@ -922,14 +922,16 @@ const oe = /* @__PURE__ */ Ge(Ke), le = (e) => e.data.isSeparator ? /* @__PURE__
|
|
|
922
922
|
)
|
|
923
923
|
), o("subTemplateType2", void 0);
|
|
924
924
|
}
|
|
925
|
-
}, [p("subTemplateType")]),
|
|
925
|
+
}, [p("subTemplateType")]), S(() => {
|
|
926
|
+
o("template", B);
|
|
927
|
+
}, [p("subTemplateType2")]), S(() => {
|
|
926
928
|
let a = c.find((m) => m.id === p("template")?.id);
|
|
927
929
|
we(a);
|
|
928
|
-
}, [p("template")]),
|
|
929
|
-
|
|
930
|
-
}, [
|
|
930
|
+
}, [p("template")]), S(() => {
|
|
931
|
+
E && f ? (e(E), o("subject", E.subject ?? "")) : e(void 0);
|
|
932
|
+
}, [E, f, e]);
|
|
931
933
|
const Te = () => {
|
|
932
|
-
let a = [
|
|
934
|
+
let a = [B], m = "templateType";
|
|
933
935
|
q.length > 0 ? m = "subTemplateType2" : R.length > 0 && (m = "subTemplateType");
|
|
934
936
|
let u = c.filter(
|
|
935
937
|
(h) => (h.type?.toString() === p(m)?.id.toString() || h.type === null) && p(m)?.id != null
|
|
@@ -979,7 +981,7 @@ const oe = /* @__PURE__ */ Ge(Ke), le = (e) => e.data.isSeparator ? /* @__PURE__
|
|
|
979
981
|
};
|
|
980
982
|
return /* @__PURE__ */ i(te, { className: "border border-0 text-start", children: /* @__PURE__ */ i(te.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__ */ I(Ae, { children: [
|
|
981
983
|
/* @__PURE__ */ i(A, { children: /* @__PURE__ */ i(
|
|
982
|
-
|
|
984
|
+
U,
|
|
983
985
|
{
|
|
984
986
|
label: "Category",
|
|
985
987
|
control: d,
|
|
@@ -996,7 +998,7 @@ const oe = /* @__PURE__ */ Ge(Ke), le = (e) => e.data.isSeparator ? /* @__PURE__
|
|
|
996
998
|
}
|
|
997
999
|
) }),
|
|
998
1000
|
R && R.length > 0 && /* @__PURE__ */ i(A, { children: /* @__PURE__ */ i(
|
|
999
|
-
|
|
1001
|
+
U,
|
|
1000
1002
|
{
|
|
1001
1003
|
label: "Type",
|
|
1002
1004
|
control: d,
|
|
@@ -1013,7 +1015,7 @@ const oe = /* @__PURE__ */ Ge(Ke), le = (e) => e.data.isSeparator ? /* @__PURE__
|
|
|
1013
1015
|
}
|
|
1014
1016
|
) }),
|
|
1015
1017
|
q && q.length > 0 && /* @__PURE__ */ i(A, { children: /* @__PURE__ */ i(
|
|
1016
|
-
|
|
1018
|
+
U,
|
|
1017
1019
|
{
|
|
1018
1020
|
label: "Sub Type",
|
|
1019
1021
|
control: d,
|
|
@@ -1030,7 +1032,7 @@ const oe = /* @__PURE__ */ Ge(Ke), le = (e) => e.data.isSeparator ? /* @__PURE__
|
|
|
1030
1032
|
}
|
|
1031
1033
|
) }),
|
|
1032
1034
|
/* @__PURE__ */ i(A, { children: /* @__PURE__ */ i(
|
|
1033
|
-
|
|
1035
|
+
U,
|
|
1034
1036
|
{
|
|
1035
1037
|
label: "Template",
|
|
1036
1038
|
control: d,
|
|
@@ -1066,17 +1068,17 @@ const oe = /* @__PURE__ */ Ge(Ke), le = (e) => e.data.isSeparator ? /* @__PURE__
|
|
|
1066
1068
|
name: "subject"
|
|
1067
1069
|
}
|
|
1068
1070
|
) }),
|
|
1069
|
-
/* @__PURE__ */ I(A, { className: "d-flex align-
|
|
1071
|
+
/* @__PURE__ */ I(A, { className: "d-flex align-self-start justify-content-end gap-2 mb-1 btn-padding", children: [
|
|
1070
1072
|
/* @__PURE__ */ i(
|
|
1071
1073
|
ne,
|
|
1072
1074
|
{
|
|
1073
1075
|
style: { width: "70px" },
|
|
1074
1076
|
variant: "primary",
|
|
1075
|
-
disabled: P || L ||
|
|
1077
|
+
disabled: P || L || M || Z,
|
|
1076
1078
|
onClick: () => {
|
|
1077
1079
|
y(void 0), v(), G([]), V([]), s();
|
|
1078
1080
|
},
|
|
1079
|
-
children: L ||
|
|
1081
|
+
children: L || M ? /* @__PURE__ */ i(
|
|
1080
1082
|
J,
|
|
1081
1083
|
{
|
|
1082
1084
|
animation: "border",
|
|
@@ -1095,8 +1097,8 @@ const oe = /* @__PURE__ */ Ge(Ke), le = (e) => e.data.isSeparator ? /* @__PURE__
|
|
|
1095
1097
|
type: "submit",
|
|
1096
1098
|
variant: "primary",
|
|
1097
1099
|
style: { width: "80px" },
|
|
1098
|
-
disabled: P || L ||
|
|
1099
|
-
children: L ||
|
|
1100
|
+
disabled: P || L || M || Z,
|
|
1101
|
+
children: L || M ? /* @__PURE__ */ i(
|
|
1100
1102
|
J,
|
|
1101
1103
|
{
|
|
1102
1104
|
animation: "border",
|
|
@@ -1112,7 +1114,7 @@ const oe = /* @__PURE__ */ Ge(Ke), le = (e) => e.data.isSeparator ? /* @__PURE__
|
|
|
1112
1114
|
] })
|
|
1113
1115
|
] }) }) }) }) });
|
|
1114
1116
|
}, st = ({ config: e }) => {
|
|
1115
|
-
const [r, s] =
|
|
1117
|
+
const [r, s] = C(), [l, n] = C(!1);
|
|
1116
1118
|
return /* @__PURE__ */ i(Re, { configs: e, children: /* @__PURE__ */ i(De, { children: /* @__PURE__ */ I("div", { className: "root-widget", children: [
|
|
1117
1119
|
/* @__PURE__ */ i(
|
|
1118
1120
|
Ye,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(w,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("@tanstack/react-query"),require("axios"),require("react-bootstrap"),require("react-hook-form"),require("react-select")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@tanstack/react-query","axios","react-bootstrap","react-hook-form","react-select"],n):(w=typeof globalThis<"u"?globalThis:w||self,n(w.EnerexTemplateEditor={},w.jsxRuntime,w.React,w.reactQuery,w.axios,w.reactBootstrap,w.reactHookForm,w.Select$1))})(this,function(w,n,p,E,J,g,X,z){"use strict";const F=`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
|
|
2
2
|
<html\r
|
|
3
3
|
dir="ltr"\r
|
|
4
4
|
xmlns:o="urn:schemas-microsoft-com:office:office"\r
|
|
@@ -354,8 +354,8 @@
|
|
|
354
354
|
</div>\r
|
|
355
355
|
</body>\r
|
|
356
356
|
</html>\r
|
|
357
|
-
`,Z=p.createContext(void 0),oe=({children:e,configs:s})=>{const[
|
|
357
|
+
`,Z=p.createContext(void 0),oe=({children:e,configs:s})=>{const[i,o]=p.useState(s.clientId),[r,t]=p.useState(s.apiKey),[l,d]=p.useState(s.enerexIdentifier),[m,C]=p.useState(s.projectId),[q,v]=p.useState(s.userEmail),S=x=>{t(x.apiKey),o(x.clientId),C(x.projectId),d(x.enerexIdentifier),v(x.userEmail)};return n.jsx(Z.Provider,{value:{clientId:i,apiKey:r,setConfiguration:S,enerexIdentifier:l,projectId:m,userEmail:q},children:e})},_=()=>{const e=p.useContext(Z);if(!e)throw new Error("widgetConfig must be used within a ConfigProvider");return e},Q=(e="",s)=>({get:async(r,t)=>{try{const l=await J.get(`${e}${r}`,t??s);if(l.status===200)return l.data}catch(l){throw l}},post:async(r,t,l)=>{try{const d=await J.post(`${e}${r}`,t,l??s);if(d.status===200)return d.data}catch(d){throw d}}}),M={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"},R=p.createContext({get:()=>{throw new Error("HttpClientContext.get not implemented")},post:()=>{throw new Error("HttpClientContext.post not implemented")}}),ae=({children:e})=>{const{clientId:s,apiKey:i}=_(),o={headers:{client_id:s,"x-api-key":i}},{get:r,post:t}=Q(M.API_BASE_URL,o);return n.jsx(R.Provider,{value:{get:r,post:t},children:e})},de=({children:e})=>{const s=new E.QueryClient;return n.jsx(ae,{children:n.jsx(E.QueryClientProvider,{client:s,children:e})})},ce=e=>{const s=Array.from(new Set(e.map(o=>o.category))),i=[];return s.forEach(o=>{const r=e.filter(t=>t.category===o).map(t=>({label:t.label,value:t.value,hint:t.hint,hidden:t.hidden}));i.push({category:o,entries:r})}),i},j=()=>{const e=p.useContext(R);if(e)return e;throw new Error("useHttpClient must be used within a HttpClientProvider")},A={Template_list:"/Template/list/",Template:"/Template/GetTemplate/",MergeTags:"/Template/TemplateMergeTags/",ExcludeCategory:"/Template/GetExcludeCategories/",SaveTemplate:"/Template/save-update/",TemplateTypes:"/Template/TemplateTypes/"},pe=()=>{const e=j(),{enerexIdentifier:s,projectId:i}=_();return E.useQuery({queryKey:["getTemplateTags"],queryFn:async r=>await e.get(`${A.MergeTags}${i}/${s}`)})},me=()=>{const e=j(),{enerexIdentifier:s,projectId:i}=_();return E.useQuery({queryKey:["getExcludeCategory"],queryFn:async r=>await e.get(`${A.ExcludeCategory}${i}/${s}`)})},ue=({templateHTML:e,className:s="",loading:i=!1})=>{const{post:o}=Q(),{data:r}=pe(),{data:t}=me(),[l,d]=p.useState(e??{html:F,css:""}),{userEmail:m}=_(),C=p.useRef(null),q="https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png",v="https://plugins.stripo.email/api/v1/auth";p.useEffect(()=>{(async()=>(await S(),r&&t&&await x(M.EDITOR_SCRIPT_URL)))()},[r,t]);async function S(){window.Zone||await new Promise((c,h)=>{const y=document.createElement("script");y.src="https://unpkg.com/zone.js@0.13.1/bundles/zone.umd.min.js";const b=document.querySelector("script[nonce]")?.nonce;b&&y.setAttribute("nonce",b),y.onload=()=>c(),y.onerror=()=>h(new Error("Failed to load zone.js")),document.head.appendChild(y)})}async function x(c){let h=document.getElementById("UiEditorScript");h||(h=document.createElement("script"),h.id="UiEditorScript",h.src=c,h.onload=async()=>{await P()},document.body.appendChild(h)),await new Promise(y=>h.addEventListener("load",()=>y(),{once:!0}))}const P=async()=>{const c=C.current;if(!c){console.error("Missing #stripoEditorContainer in DOM");return}if(!window.UIEditor||typeof window.UIEditor.initEditor!="function"){console.error("UIEditor script not loaded or not exposing initEditor");return}const h={html:l.html,css:l.css,modulesExcludedCategories:t??[],forceRecreate:!0,metadata:{emailId:m,userId:"1",avatarUrl:q},locale:"en",onTokenRefreshRequest:async y=>{const b={pluginId:M.EDITOR_PLUGIN_ID,secretKey:M.EDITOR_SECRET_KEY,userId:m,role:"user"},N=await o(v,b);N?.token&&y(N.token)},mergeTags:ce(r??[])};for(const[y,b]of Object.entries({codeEditorButtonSelector:"#codeEditor",undoButtonSelector:"#undoButton",redoButtonSelector:"#redoButton",mobileViewButtonSelector:"#mobileViewButton",desktopViewButtonSelector:"#desktopViewButton"}))c.ownerDocument&&c.getRootNode()instanceof ShadowRoot&&c.getRootNode().querySelector(b)&&(h[y]=b);await window.UIEditor.initEditor(c,h)};return n.jsx("div",{className:"position-relative",children:n.jsxs("div",{className:`editor-container ${s}`,children:[i&&n.jsx("div",{className:"loading-overlay",children:n.jsx(g.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1"})}),n.jsx("div",{id:"externalSystemContainer"}),n.jsx("div",{id:"stripoEditorContainer",ref:C})]})})},ee=({label:e,register:s,validation:i,required:o=!1,name:r,error:t,className:l="",...d})=>n.jsxs(g.Form.Group,{className:l+" mb-1",children:[e?n.jsxs(g.Form.Label,{className:"mb-3 d-block form-label",children:[e,o&&n.jsx("label",{className:"text-danger",children:"*"})]}):null,n.jsx(g.Form.Control,{name:r,type:"text",...d,isInvalid:!!(t&&t[r]),...s?s(r,{...i}):{},className:`react-select__control ${t&&t[r]&&"border border-danger"}`}),t&&t[r]?n.jsx(g.Form.Control.Feedback,{type:"invalid",children:t[r].message}):null]}),fe=()=>{const e=j(),{enerexIdentifier:s,projectId:i}=_();return E.useQuery({queryKey:["getTemplatesList"],queryFn:async r=>await e.get(`${A.Template_list}${i}/${s}`)})};function G(e){return e.sort((s,i)=>s.name.localeCompare(i.name))}function ge(e){const s=new Map,i=[];e.forEach(t=>s.set(t.id,t));let o=e.filter(t=>t.parent_id===0),r=0;for(;o.length>0;){i.push({level:r,data:o});const t=o.map(d=>d.id);o=e.filter(d=>t.includes(d.parent_id)),r++}return i}function V(e,s){const o=ge(e).find(r=>r.level===s);return o?o.data:[]}const ye=()=>{const e=j(),{enerexIdentifier:s,projectId:i}=_();return E.useMutation({mutationKey:["getTemplate"],mutationFn:async({id:r})=>{if(r)return await e.get(`${A.Template}${s}/${r}/${i}`)}})},he=()=>{const e=j(),{enerexIdentifier:s,projectId:i}=_();return E.useQuery({queryKey:["getTemplateTypes"],queryFn:async r=>await e.get(`${A.TemplateTypes}${s}/${i}`)})};function be(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var K={exports:{}};/*!
|
|
358
358
|
Copyright (c) 2018 Jed Watson.
|
|
359
359
|
Licensed under the MIT License (MIT), see
|
|
360
360
|
http://jedwatson.github.io/classnames
|
|
361
|
-
*/var te;function
|
|
361
|
+
*/var te;function Te(){return te||(te=1,function(e){(function(){var s={}.hasOwnProperty;function i(){for(var t="",l=0;l<arguments.length;l++){var d=arguments[l];d&&(t=r(t,o(d)))}return t}function o(t){if(typeof t=="string"||typeof t=="number")return t;if(typeof t!="object")return"";if(Array.isArray(t))return i.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var l="";for(var d in t)s.call(t,d)&&t[d]&&(l=r(l,d));return l}function r(t,l){return l?t?t+" "+l:t+l:t}e.exports?(i.default=i,e.exports=i):window.classNames=i})()}(K)),K.exports}var we=Te();const ne=be(we),re=e=>e.data.isSeparator?n.jsx("div",{style:{padding:0,margin:"2px 0"},children:n.jsx("hr",{style:{border:0,borderTop:"1px solid #bdbdbdff",padding:0,margin:0}})}):n.jsx(z.components.Option,{...e}),ve=({name:e="",control:s,options:i,multiple:o=!1,placeholder:r,validation:t,labelKey:l="name",disabled:d,isInvalid:m,value:C,onChange:q,uncontrolled:v,menuPlacement:S="auto",closeOnSelect:x=!0})=>{const P={control:c=>({...c,minHeight:"33px",borderColor:m?"var(--bs-form-invalid-border-color) !important":"var(--ct-input-border-color)",backgroundImage:m?'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:m?"var(--bs-form-invalid-border-color)":"var(--ct-input-border-color)"},"& .react-select__single-value":{color:"var(--ct-input-color) !important"},"& .react-select__placeholder":{color:"var(--ct-input-placeholder-color) !important"},"& .react-select__indicators":{display:"none"}}),menu:c=>({...c,marginTop:0,width:"max-content",minWidth:"100%"}),menuPortal:c=>({...c,zIndex:9999}),multiValueRemove:c=>({...c,display:d?"none":"block"})};return v?n.jsx(z,{components:{Option:re},isOptionDisabled:c=>!!c.isSeparator,className:ne({"is-invalid":m}),styles:P,classNamePrefix:"react-select",isMulti:o,options:i,onChange:q,placeholder:r,menuPortalTarget:document.body,value:C,getOptionLabel:typeof l=="string"?c=>c[l]:l,getOptionValue:c=>c.id,isDisabled:d,menuPlacement:S,closeMenuOnSelect:x}):n.jsx(X.Controller,{control:s,name:e,rules:t,render:({field:{onChange:c,value:h,onBlur:y}})=>n.jsx(z,{components:{Option:re},isOptionDisabled:b=>!!b.isSeparator,className:ne({"is-invalid":m}),styles:P,classNamePrefix:"react-select",isMulti:o,options:i,onBlur:y,onChange:c,placeholder:r,menuPortalTarget:document.body,value:h,getOptionLabel:typeof l=="string"?b=>b[l]:l,getOptionValue:b=>b.id,isDisabled:d,menuPlacement:S,closeMenuOnSelect:x},h?JSON.stringify(h):"reset")})},U=({label:e,name:s,validation:i,control:o,error:r,...t})=>n.jsxs(g.Form.Group,{className:"mb-1",children:[e&&n.jsxs(g.Form.Label,{className:"mb-3 d-block form-label",children:[e," ",t.required&&n.jsx("span",{className:"text-danger",children:"*"})]}),n.jsx(ve,{control:o,options:t.options??[],validation:i,isInvalid:r&&!!r[s],name:s}),r&&r[s]?n.jsx(g.Form.Control.Feedback,{type:"invalid",children:r[s].message}):null]}),xe=()=>{const e=j();E.useQueryClient();const{enerexIdentifier:s,projectId:i}=_();return E.useMutation({mutationKey:["saveTemplate"],mutationFn:async r=>(r.enerexIdentifier=s??"",r.projectId=i??"",await e.post(`${A.SaveTemplate}`,r))})},k={id:"",name:"New (Blank)"},se={id:"",name:"Separator",isSeparator:!0},Se=({onSelectItem:e,templateLoading:s,onReset:i})=>{const{register:o,handleSubmit:r,clearErrors:t,setValue:l,control:d,watch:m,reset:C,setError:q,formState:{errors:v}}=X.useForm({defaultValues:{templateName:"",subTemplateType:void 0,subTemplateType2:void 0,subject:"",templateType:void 0,template:k},mode:"onChange"}),{data:S,refetch:x,isLoading:P}=fe(),[c,h]=p.useState([]),[y,b]=p.useState(),[N,le]=p.useState(),{mutateAsync:Ce,isPending:O}=ye(),{mutateAsync:Ie,isPending:H}=xe(),{data:$,isLoading:ie}=he(),[_e,Ne]=p.useState([]),[L,W]=p.useState([]),[D,B]=p.useState([]);p.useEffect(()=>{if($){let a=$.filter(f=>f.id!=null),u=V(a,0);Ne(G(u))}},[$]);const qe=(a,u)=>{let f=[];return a.forEach((I,T)=>{u.includes(T)&&T!==0&&f.push(se),f.push(I)}),f};p.useEffect(()=>{s(!!O)},[O]),p.useEffect(()=>{S?.sort((a,u)=>a.readonly!==u.readonly?(a.readonly?0:1)-(u.readonly?0:1):a.name.localeCompare(u.name)),h(S??[])},[S]);const Pe=async a=>{b(a),a&&!a.readonly?(l("templateName",a?.name),t()):(l("templateName",""),l("subject",""));const u=await Ce({id:a?.id});le(u||void 0)};p.useEffect(()=>{if(l("template",k),m("templateType")){let a=$?.filter(f=>f.id!==void 0)??[],u=V(a,1);W(G(u.filter(f=>f.parent_id.toString()===`${m("templateType")?.id}`))),l("subTemplateType",void 0),l("subTemplateType2",void 0)}},[m("templateType")]),p.useEffect(()=>{if(l("template",k),m("subTemplateType")){let a=$?.filter(f=>f.id!==void 0)??[],u=V(a,2);B(G(u.filter(f=>f.parent_id.toString()===`${m("subTemplateType")?.id}`))),l("subTemplateType2",void 0)}},[m("subTemplateType")]),p.useEffect(()=>{l("template",k)},[m("subTemplateType2")]),p.useEffect(()=>{let a=c.find(u=>u.id===m("template")?.id);Pe(a)},[m("template")]),p.useEffect(()=>{N&&y?(e(N),l("subject",N.subject??"")):e(void 0)},[N,y,e]);const je=()=>{let a=[k],u="templateType";D.length>0?u="subTemplateType2":L.length>0&&(u="subTemplateType");let f=c.filter(T=>(T.type?.toString()===m(u)?.id.toString()||T.type===null)&&m(u)?.id!=null),I=qe(f,[f.findIndex(T=>!T.readonly)]);return I.length>0&&(a.push(se),a=[...a,...I.map(T=>({id:T.id,name:Ae(f,T.id),isSeparator:T.isSeparator}))]),a.length?a:[]},Ae=(a,u)=>{let f=a.find(I=>I.id===u);return f?`${f.displayName}`:""},Oe=a=>{window.StripoEditorApi.actionsApi.getTemplateData(async u=>{let f=a.template.id,I="";y?.readonly&&(f="",I=a.template.id);let T=c.find(De=>De.name===a.templateName.trim());if(T&&T.id!==f){q("templateName",{type:"validate",message:"Template name already exists. Please choose a different name."});return}let Y=a.templateType.id;D&&D.length>0?Y=a.subTemplateType2.id:L&&L.length>0&&(Y=a.subTemplateType.id);const Le={enerexIdentifier:"",projectId:"",templateId:f,templateType:Y,name:a.templateName.trim(),html:u.html,css:u.css,subject:a.templateType.id==="2"?a?.subject??"":"",parent_id:I};await Ie(Le)&&(t(),C(),W([]),B([]),x())})};return n.jsx(g.Card,{className:"border border-0 text-start",children:n.jsx(g.Card.Body,{className:"pe-0 ps-2",children:n.jsx("form",{onSubmit:r(Oe),children:n.jsx("div",{className:"template-list-container gap-3",children:n.jsxs(g.Row,{children:[n.jsx(g.Col,{children:n.jsx(U,{label:"Category",control:d,error:v,options:_e,required:!0,validation:{required:{value:!0,message:"Select a category"}},...o("templateType")})}),L&&L.length>0&&n.jsx(g.Col,{children:n.jsx(U,{label:"Type",control:d,error:v,options:L,required:!0,validation:{required:{value:!0,message:"Select a type"}},...o("subTemplateType")})}),D&&D.length>0&&n.jsx(g.Col,{children:n.jsx(U,{label:"Sub Type",control:d,error:v,options:D,required:!0,validation:{required:{value:!0,message:"Select a subtype"}},...o("subTemplateType2")})}),n.jsx(g.Col,{children:n.jsx(U,{label:"Template",control:d,error:v,options:je(),required:!1,...o("template")})}),n.jsx(g.Col,{children:n.jsx(ee,{label:"Name",register:o,error:v,required:!0,name:"templateName",validation:{required:{value:!0,message:"Enter a name"}}})}),m("templateType")?.id==="2"&&n.jsx(g.Col,{children:n.jsx(ee,{label:"Subject",register:o,error:v,required:!1,name:"subject"})}),n.jsxs(g.Col,{className:"d-flex align-self-start justify-content-end gap-2 mb-1 btn-padding",children:[n.jsx(g.Button,{style:{width:"70px"},variant:"primary",disabled:P||O||H||ie,onClick:()=>{b(void 0),C(),W([]),B([]),i()},children:O||H?n.jsx(g.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:n.jsx("span",{className:"visually-hidden",children:"Loading..."})}):"Clear"}),(m("templateType")?.id.toString()!=="2"||(m("templateType")?.id.toString()==="2"&&(y?.id??""))!=="")&&n.jsx(n.Fragment,{children:n.jsx(g.Button,{type:"submit",variant:"primary",style:{width:"80px"},disabled:P||O||H||ie,children:O||H?n.jsx(g.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:n.jsx("span",{className:"visually-hidden",children:"Loading..."})}):y?.readonly?"Save as":"Save"})})]})]})})})})})},Ee=({config:e})=>{const[s,i]=p.useState(),[o,r]=p.useState(!1),t=d=>{if(i(d),window.StripoEditorApi&&window.StripoEditorApi.actionsApi){let m=F;window.StripoEditorApi.actionsApi.updateHtmlAndCss(d?.html??m,d?.css??"","")}},l=()=>{r(!1),i(void 0),window.StripoEditorApi&&window.StripoEditorApi.actionsApi&&window.StripoEditorApi.actionsApi.updateHtmlAndCss(F,"","")};return n.jsx(oe,{configs:e,children:n.jsx(de,{children:n.jsxs("div",{className:"root-widget",children:[n.jsx(Se,{templateLoading:r,onSelectItem:t,onReset:l}),n.jsx(ue,{templateHTML:{css:s?.css??"",html:s?.html??F},loading:!1,className:"col-span-5"})]})})})};w.EditorWidget=Ee,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});
|
package/dist/template-studio.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.root-widget{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;-moz-osx-font-smoothing:grayscale;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased}.root-widget code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.root-widget .ng-star-inserted{display:none}.root-widget .wraped-text{text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.root-widget .required:after{content:" *";color:#fa5c7c}.root-widget button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:border-color .25s}.root-widget button:hover{border-color:#646cff}.root-widget button:focus,.root-widget button:focus-visible{outline:4px auto -webkit-focus-ring-color}.root-widget .loader-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw}.root-widget .info-icon{height:14px}.root-widget .info-icon img{width:100%;height:100%}.dark-popover{left:50%;transform:translate(-50%) translateY(-8px);z-index:9999;width:50px!important;font-size:.85rem!important;padding:.5rem;background-color:#1e1e1e!important;color:#f1f1f1;border:1px solid #444}.dark-popover.bs-popover-top>.popover-arrow:before,.dark-popover.bs-popover-bottom>.popover-arrow:before,.dark-popover.bs-popover-left>.popover-arrow:before,.dark-popover.bs-popover-right>.popover-arrow:before{border-color:transparent!important}.dark-popover.bs-popover-top>.popover-arrow:after{border-top-color:#1e1e1e!important}.dark-popover.bs-popover-bottom>.popover-arrow:after{border-bottom-color:#1e1e1e!important}.dark-popover.bs-popover-left>.popover-arrow:after{border-left-color:#1e1e1e!important}.dark-popover.bs-popover-right>.popover-arrow:after{border-right-color:#1e1e1e!important}.template-list-container{max-height:350px;overflow-y:auto}.react-select__control--is-focused{border-color:var(--ct-input-border-color)!important;box-shadow:none!important}.react-select__option{color:var(--ct-input-color)!important;background-color:#fff!important}.react-select__option:hover,.react-select__option--is-focused,.react-select__option--is-selected{color:var(--ct-input-color)!important;background-color:#deebff!important}.root-widget label{font-weight:600!important}.root-widget input{padding-block:1px!important;padding-inline:2px!important}.root-widget .form-control{display:block!important;outline:none!important;box-shadow:none!important;width:100%!important;
|
|
1
|
+
.root-widget{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;-moz-osx-font-smoothing:grayscale;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased}.root-widget code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.root-widget .ng-star-inserted{display:none}.root-widget .wraped-text{text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.root-widget .required:after{content:" *";color:#fa5c7c}.root-widget button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:border-color .25s}.root-widget button:hover{border-color:#646cff}.root-widget button:focus,.root-widget button:focus-visible{outline:4px auto -webkit-focus-ring-color}.root-widget .loader-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw}.root-widget .info-icon{height:14px}.root-widget .info-icon img{width:100%;height:100%}.dark-popover{left:50%;transform:translate(-50%) translateY(-8px);z-index:9999;width:50px!important;font-size:.85rem!important;padding:.5rem;background-color:#1e1e1e!important;color:#f1f1f1;border:1px solid #444}.dark-popover.bs-popover-top>.popover-arrow:before,.dark-popover.bs-popover-bottom>.popover-arrow:before,.dark-popover.bs-popover-left>.popover-arrow:before,.dark-popover.bs-popover-right>.popover-arrow:before{border-color:transparent!important}.dark-popover.bs-popover-top>.popover-arrow:after{border-top-color:#1e1e1e!important}.dark-popover.bs-popover-bottom>.popover-arrow:after{border-bottom-color:#1e1e1e!important}.dark-popover.bs-popover-left>.popover-arrow:after{border-left-color:#1e1e1e!important}.dark-popover.bs-popover-right>.popover-arrow:after{border-right-color:#1e1e1e!important}.template-list-container{max-height:350px;overflow-y:auto}.react-select__control--is-focused{border-color:var(--ct-input-border-color)!important;box-shadow:none!important}.react-select__option{color:var(--ct-input-color)!important;background-color:#fff!important}.react-select__option:hover,.react-select__option--is-focused,.react-select__option--is-selected{color:var(--ct-input-color)!important;background-color:#deebff!important}.root-widget label{font-weight:600!important}.root-widget input{padding-block:1px!important;padding-inline:2px!important}.root-widget .form-control{display:block!important;min-height:33px;outline:none!important;box-shadow:none!important;width:100%!important;font-weight:400!important;line-height:1.5!important;color:var(--ct-input-color)!important;background-color:var(--ct-input-bg)!important;background-clip:padding-box!important;border:1px solid var(--ct-input-border-color)!important;appearance:none!important;border-radius:.25rem!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out!important}.root-widget .btn{--bs-btn-padding-x: 12px !important;--bs-btn-padding-y: 5px !important;--bs-btn-font-size: .9rem !important;--bs-btn-font-weight: 400 !important;--bs-btn-line-height: 1.5 !important;--bs-btn-color: #6c757d !important;--bs-btn-bg: transparent !important;--bs-btn-border-width: 1px !important;--bs-btn-border-color: transparent !important;--bs-btn-border-radius: .15rem !important;--bs-btn-hover-border-color: transparent !important;--bs-btn-box-shadow: 0px 2px 6px 0px !important;--bs-btn-disabled-opacity: .65 !important;--bs-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--bs-btn-focus-shadow-rgb), .5) !important;display:inline-block!important;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x)!important;font-family:var(--bs-btn-font-family)!important;font-size:var(--bs-btn-font-size)!important;font-weight:var(--bs-btn-font-weight)!important;line-height:var(--bs-btn-line-height)!important;color:var(--bs-btn-color)!important;text-align:center!important;vertical-align:middle!important;cursor:pointer!important;-webkit-user-select:none!important;user-select:none!important;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color)!important;border-radius:var(--bs-btn-border-radius)!important;background-color:var(--bs-btn-bg)!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out!important}.root-widget .btn-primary{--bs-btn-color: #fff !important;--bs-btn-bg: #131c45 !important;--bs-btn-border-color: #131c45 !important;--bs-btn-hover-color: #fff !important;--bs-btn-hover-bg: #10183b !important;--bs-btn-hover-border-color: #0f1637 !important;--bs-btn-focus-shadow-rgb: 54, 62, 97 !important;--bs-btn-active-color: #fff !important;--bs-btn-active-bg: #0f1637 !important;--bs-btn-active-border-color: #0e1534 !important;--bs-btn-active-shadow: var(--ct-btn-active-box-shadow) !important;--bs-btn-disabled-color: #fff !important;--bs-btn-disabled-bg: #131c45 !important;--bs-btn-disabled-border-color: #131c45 !important}.root-widget .logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.root-widget .logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.root-widget .logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}.root-widget .requiredField:after{content:"";font-family:FontAwesome;position:absolute;left:10px;top:10px;color:red}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.root-widget .card{padding:.3em}.root-widget .read-the-docs{color:#888}.root-widget .row{margin:0!important}.root-widget{--ct-input-border-color: #ced4da !important}.root-widget .btn-padding{padding-top:40px}#stripoEditorContainer{height:calc(100% + -0px)}.editor-container{height:100vh;position:absolute;min-width:1200px;width:100%;overflow:auto}.root-widget .loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fffc;display:flex;justify-content:center;align-items:center;z-index:1000}
|