@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.
- 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
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(L,e){typeof exports=="object"&&typeof module<"u"?e(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"],e):(L=typeof globalThis<"u"?globalThis:L||self,e(L.EnerexTemplateEditor={},L.jsxRuntime,L.React,L.reactQuery,L.axios,L.reactBootstrap,L.reactHookForm,L.Select$1))})(this,function(L,e,a,F,he,u,be,X){"use strict";const Z=`<!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,18 @@
|
|
|
354
354
|
</div>\r
|
|
355
355
|
</body>\r
|
|
356
356
|
</html>\r
|
|
357
|
-
`,
|
|
357
|
+
`,ve=a.createContext(void 0),qe=({children:n,configs:s})=>{const[o,i]=a.useState(s.clientId),[l,t]=a.useState(s.apiKey),[c,d]=a.useState(s.enerexIdentifier),[T,q]=a.useState(s.projectId),[I,f]=a.useState(s.userEmail),[_,y]=a.useState(s.isAdmin),[j,v]=a.useState(s.meBaseUrl),[w,h]=a.useState(s.defaultSelector),g=b=>{t(b.apiKey),i(b.clientId),q(b.projectId),d(b.enerexIdentifier),f(b.userEmail),y(b.isAdmin),h(b.defaultSelector),v(b.meBaseUrl)};return e.jsx(ve.Provider,{value:{clientId:o,apiKey:l,setConfiguration:g,enerexIdentifier:c,projectId:T,userEmail:I,isAdmin:_,defaultSelector:w,meBaseUrl:j},children:n})},U=()=>{const n=a.useContext(ve);if(!n)throw new Error("widgetConfig must be used within a ConfigProvider");return n},Te=(n="",s)=>({get:async(l,t)=>{try{const c=await he.get(`${n}${l}`,t??s);if(c.status===200)return c.data}catch(c){throw c}},post:async(l,t,c)=>{try{const d=await he.post(`${n}${l}`,t,c??s);if(d.status===200)return d.data}catch(d){throw d}}}),we=a.createContext({get:()=>{throw new Error("HttpClientContext.get not implemented")},post:()=>{throw new Error("HttpClientContext.post not implemented")}}),je=({children:n})=>{const{clientId:s,apiKey:o,isAdmin:i,meBaseUrl:l}=U(),t={headers:{client_id:s,"x-api-key":o,"Security-Context":i?"admin":"viewer"}},{get:c,post:d}=Te(l,t);return e.jsx(we.Provider,{value:{get:c,post:d},children:n})},Pe=({children:n})=>{const s=new F.QueryClient;return e.jsx(je,{children:e.jsx(F.QueryClientProvider,{client:s,children:n})})},ae={EDITOR_SCRIPT_URL:"https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js",EDITOR_PLUGIN_ID:"1afdc3161ec7409a8627a1c8561d45f5",EDITOR_SECRET_KEY:"54ba748ed7e94f2e929555783acb03da"},Oe=n=>{const s=Array.from(new Set(n.map(i=>i.category))),o=[];return s.forEach(i=>{const l=n.filter(t=>t.category===i).map(t=>({label:t.label,value:t.value,hint:t.hint,hidden:t.hidden}));o.push({category:i,entries:l})}),o},V=()=>{const n=a.useContext(we);if(n)return n;throw new Error("useHttpClient must be used within a HttpClientProvider")},G={Template_list:"/Template/list/",Template:"/Template/GetTemplate/",MergeTags:"/Template/TemplateMergeTags/",ExcludeCategory:"/Template/GetExcludeCategories/",SaveTemplate:"/Template/save-update/",TemplateTypes:"/Template/TemplateTypes/",markFavourite:"/Template/MarkFavourite/"},De=()=>{const n=V(),{enerexIdentifier:s,projectId:o}=U();return F.useQuery({queryKey:["getTemplateTags"],queryFn:async l=>await n.get(`${G.MergeTags}${o}/${s}`)})},Me=()=>{const n=V(),{enerexIdentifier:s,projectId:o}=U();return F.useQuery({queryKey:["getExcludeCategory"],queryFn:async l=>await n.get(`${G.ExcludeCategory}${o}/${s}`)})},$e=({templateHTML:n,className:s="",loading:o=!1,onEditorInitialized:i})=>{const{post:l}=Te(),{data:t}=De(),{data:c}=Me(),[d,T]=a.useState(n??{html:Z,css:""}),{userEmail:q}=U(),I=a.useRef(null),f="https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png",_="https://plugins.stripo.email/api/v1/auth";a.useEffect(()=>{(async()=>(await y(),t&&c&&await j(ae.EDITOR_SCRIPT_URL)))()},[t,c]);async function y(){window.Zone||await new Promise((w,h)=>{const g=document.createElement("script");g.src="https://unpkg.com/zone.js@0.13.1/bundles/zone.umd.min.js";const b=document.querySelector("script[nonce]")?.nonce;b&&g.setAttribute("nonce",b),g.onload=()=>w(),g.onerror=()=>h(new Error("Failed to load zone.js")),document.head.appendChild(g)})}async function j(w){let h=document.getElementById("UiEditorScript");h||(h=document.createElement("script"),h.id="UiEditorScript",h.src=w,h.onload=async()=>{await v()},document.body.appendChild(h)),await new Promise(g=>h.addEventListener("load",()=>g(),{once:!0}))}const v=async()=>{const w=I.current;if(!w){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:d.html,css:d.css,modulesExcludedCategories:c??[],forceRecreate:!0,metadata:{emailId:q,userId:"1",avatarUrl:f},locale:"en",onTokenRefreshRequest:async g=>{const b={pluginId:ae.EDITOR_PLUGIN_ID,secretKey:ae.EDITOR_SECRET_KEY,userId:q,role:"user"},x=await l(_,b);x?.token&&g(x.token)},onTemplateLoaded:()=>{i&&i(!0)},mergeTags:Oe(t??[])};for(const[g,b]of Object.entries({codeEditorButtonSelector:"#codeEditor",undoButtonSelector:"#undoButton",redoButtonSelector:"#redoButton",mobileViewButtonSelector:"#mobileViewButton",desktopViewButtonSelector:"#desktopViewButton"}))w.ownerDocument&&w.getRootNode()instanceof ShadowRoot&&w.getRootNode().querySelector(b)&&(h[g]=b);await window.UIEditor.initEditor(w,h)};return e.jsx("div",{className:"position-relative",children:e.jsxs("div",{className:`editor-container ${s}`,children:[o&&e.jsx("div",{className:"loading-overlay",children:e.jsx(u.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:e.jsx("span",{className:"visually-hidden",children:"Loading..."})})}),e.jsx("div",{id:"externalSystemContainer"}),e.jsx("div",{id:"stripoEditorContainer",ref:I})]})})},xe=({label:n,register:s,validation:o,required:i=!1,name:l,error:t,className:c="",...d})=>e.jsxs(u.Form.Group,{className:c+" mb-1",style:{width:"100%"},children:[n?e.jsxs(u.Form.Label,{className:"mb-3 d-block form-label ts-label-height",children:[n,i&&e.jsx("label",{className:"text-danger",children:"*"})]}):null,e.jsx(u.Form.Control,{name:l,type:"text",...d,isInvalid:!!(t&&t[l]),...s?s(l,{...o}):{},className:`react-select__control ${t&&t[l]&&"border border-danger"}`}),t&&t[l]?e.jsx(u.Form.Control.Feedback,{type:"invalid",children:t[l].message}):null]}),Fe=({show:n,variant:s,title:o="Are you sure?",message:i,label:l="Name",value:t="",placeholder:c="",requiredMessage:d="This field is required",externalError:T=!1,externalErrorMessage:q="",confirmText:I="Ok",cancelText:f="Cancel",confirmButtonVariant:_="danger",onConfirm:y,onCancel:j,onInputChange:v})=>{const[w,h]=a.useState(t),[g,b]=a.useState(!1);if(a.useEffect(()=>{n&&(h(t),b(!1))},[n,t]),a.useEffect(()=>{T&&b(!0)},[T]),!n)return null;const x=s==="input"&&!w.trim(),P=s==="input"&&(x||T),pe=x?d:T?q:"",K=()=>{if(P){b(!0);return}y(w.trim())};return e.jsx("div",{className:"template-studio-modal-overlay",children:e.jsxs("div",{className:"template-studio-modal",children:[e.jsxs("div",{className:"template-studio-modal-header",children:[e.jsx("h4",{children:o}),e.jsx("button",{className:"template-studio-modal-close",onClick:j,children:"✕"})]}),e.jsxs("div",{className:"template-studio-modal-body",children:[i&&e.jsx("p",{children:i}),s==="input"&&e.jsxs("div",{className:"mb-3",children:[e.jsxs("label",{className:"form-label",children:[l,e.jsx("span",{className:"text-danger",children:"*"})]}),e.jsx("input",{type:"text",className:`form-control ${g&&P?"is-invalid":""}`,placeholder:c,value:w,onChange:R=>{h(R.target.value),g&&b(!1),v?.(R.target.value)},autoFocus:!0}),g&&P&&e.jsx("div",{className:"invalid-feedback d-block",children:pe})]})]}),e.jsxs("div",{className:"template-studio-modal-footer",children:[e.jsx("button",{className:"btn btn-secondary",onClick:j,children:f}),e.jsx("button",{className:`btn btn-${_}`,onClick:K,children:I})]})]})})},Ue=()=>{const n=V(),{enerexIdentifier:s,projectId:o}=U();return F.useQuery({queryKey:["getTemplatesList"],queryFn:async l=>await n.get(`${G.Template_list}${o}/${s}`)})};function oe(n){return n.sort((s,o)=>s.name.localeCompare(o.name))}function He(n){const s=new Map,o=[];n.forEach(t=>s.set(t.id,t));let i=n.filter(t=>t.parent_id===0),l=0;for(;i.length>0;){o.push({level:l,data:i});const t=i.map(d=>d.id);i=n.filter(d=>t.includes(d.parent_id)),l++}return o}function de(n,s){const i=He(n).find(l=>l.level===s);return i?i.data:[]}const Ve=()=>{const n=V(),{enerexIdentifier:s,projectId:o}=U();return F.useMutation({mutationKey:["markFavourite"],mutationFn:async l=>await n.post(`${G.markFavourite}${o}/${s}`,l)})},Ge=()=>{const n=V(),{enerexIdentifier:s,projectId:o}=U();return F.useMutation({mutationKey:["getTemplate"],mutationFn:async({id:l})=>{if(l)return await n.get(`${G.Template}${s}/${l}/${o}`)}})},Ke=()=>{const n=V(),{enerexIdentifier:s,projectId:o}=U();return F.useQuery({queryKey:["getTemplateTypes"],queryFn:async l=>await n.get(`${G.TemplateTypes}${s}/${o}`)})};function Be(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}var ce={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 Ue(){return Te||(Te=1,function(n){(function(){var s={}.hasOwnProperty;function d(){for(var e="",o=0;o<arguments.length;o++){var p=arguments[o];p&&(e=l(e,i(p)))}return e}function i(e){if(typeof e=="string"||typeof e=="number")return e;if(typeof e!="object")return"";if(Array.isArray(e))return d.apply(null,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var o="";for(var p in e)s.call(e,p)&&e[p]&&(o=l(o,p));return o}function l(e,o){return o?e?e+" "+o:e+o:e}n.exports?(d.default=d,n.exports=d):window.classNames=d})()}(ie)),ie.exports}var He=Ue();const ve=Fe(He),we=n=>n.data.isSeparator?t.jsx("div",{style:{padding:0,margin:"2px 0"},children:t.jsx("hr",{style:{border:0,borderTop:"1px solid #bdbdbdff",padding:0,margin:0}})}):t.jsx(ne.components.Option,{...n}),Ve=({name:n="",control:s,options:d,multiple:i=!1,placeholder:l,validation:e,labelKey:o="name",disabled:p,isInvalid:w,value:b,onChange:x,uncontrolled:y,menuPlacement:N="auto",closeOnSelect:q=!0})=>{const j={control:g=>({...g,minHeight:"33px",borderColor:w?"var(--bs-form-invalid-border-color) !important":"var(--ct-input-border-color)",backgroundImage:w?'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:w?"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:g=>({...g,marginTop:0,width:"max-content",minWidth:"100%"}),menuPortal:g=>({...g,zIndex:9999}),multiValueRemove:g=>({...g,display:p?"none":"block"})};return y?t.jsx(ne,{components:{Option:we},isOptionDisabled:g=>!!g.isSeparator,className:ve({"is-invalid":w}),styles:j,classNamePrefix:"react-select",isMulti:i,options:d,onChange:x,placeholder:l,menuPortalTarget:document.body,value:b,getOptionLabel:typeof o=="string"?g=>g[o]:o,getOptionValue:g=>g.id,isDisabled:p,menuPlacement:N,closeMenuOnSelect:q}):t.jsx(fe.Controller,{control:s,name:n,rules:e,render:({field:{onChange:g,value:T,onBlur:v}})=>t.jsx(ne,{components:{Option:we},isOptionDisabled:m=>!!m.isSeparator,className:ve({"is-invalid":w}),styles:j,classNamePrefix:"react-select",isMulti:i,options:d,onBlur:v,onChange:g,placeholder:l,menuPortalTarget:document.body,value:T,getOptionLabel:typeof o=="string"?m=>m[o]:o,getOptionValue:m=>m.id,isDisabled:p,menuPlacement:N,closeMenuOnSelect:q},T?JSON.stringify(T):"reset")})},X=({label:n,name:s,validation:d,control:i,error:l,...e})=>t.jsxs(h.Form.Group,{className:"mb-1",children:[n&&t.jsxs(h.Form.Label,{className:"mb-3 d-block form-label ts-label-height",children:[n," ",e.required&&t.jsx("span",{className:"text-danger",children:"*"})]}),t.jsx(Ve,{control:i,disabled:e.disabled,options:e.options??[],validation:d,isInvalid:l&&!!l[s],name:s}),l&&l[s]?t.jsx(h.Form.Control.Feedback,{type:"invalid",children:l[s].message}):null]}),Ge=()=>{const n=V();$.useQueryClient();const{enerexIdentifier:s,projectId:d}=M();return $.useMutation({mutationKey:["saveTemplate"],mutationFn:async l=>(l.enerexIdentifier=s??"",l.projectId=d??"",await n.post(`${G.SaveTemplate}`,l))})},W={id:"",name:"New (Blank)"},Se={id:"",name:"Separator",isSeparator:!0},Ke=({onSelectItem:n,templateLoading:s,onReset:d,editorInitialized:i})=>{const{isAdmin:l,defaultSelector:e}=M(),{register:o,handleSubmit:p,clearErrors:w,setValue:b,control:x,watch:y,reset:N,setError:q,getValues:j,formState:{errors:g}}=fe.useForm({defaultValues:{templateName:"",subTemplateType:void 0,subTemplateType2:void 0,subject:"",templateType:void 0,template:W},mode:"onChange"}),{data:T,refetch:v,isLoading:m}=ke(),[f,F]=a.useState([]),[U,ae]=a.useState(!1),[k,K]=a.useState(),[Z,Q]=a.useState(),{mutateAsync:oe,isPending:I}=$e(),{mutateAsync:de,isPending:_}=Ge(),{data:H,isLoading:D}=Me(),[ce,We]=a.useState([]),[P,R]=a.useState([]),[L,ee]=a.useState([]),[Ye,pe]=a.useState(!1),[B,ze]=a.useState("confirm"),[Je,me]=a.useState(!1),[xe,Ce]=a.useState(!1);a.useEffect(()=>{if(H){let r=H.filter(u=>u.id!=null),c=le(r,0);We(se(c))}},[H]);const Xe=(r,c)=>{let u=[];return r.forEach((C,E)=>{c.includes(E)&&E!==0&&u.push(Se),u.push(C)}),u};a.useEffect(()=>{s(!!(m||I||_||D||!i))},[m,I,_,D,i]),a.useEffect(()=>{T?.sort((r,c)=>r.readonly!==c.readonly?(r.readonly?0:1)-(c.readonly?0:1):r.name.localeCompare(c.name)),F(T??[])},[T]);const Ze=async r=>{K(r),r&&(l||!r.readonly)?(b("templateName",r?.name),w()):(b("templateName",""),b("subject",""));const c=await oe({id:r?.id});c?Q(c):te()};a.useEffect(()=>{if((e===void 0||e.templateId===void 0||U)&&b("template",W),y("templateType")){let r=H?.filter(u=>u.id!==void 0)??[],c=le(r,1);R(se(c.filter(u=>u.parent_id.toString()===`${y("templateType")?.id}`))),b("subTemplateType",void 0),b("subTemplateType2",void 0)}},[y("templateType")]),a.useEffect(()=>{if((e===void 0||e.templateId===void 0)&&b("template",W),y("subTemplateType")){let r=H?.filter(u=>u.id!==void 0)??[],c=le(r,2);ee(se(c.filter(u=>u.parent_id.toString()===`${y("subTemplateType")?.id}`))),b("subTemplateType2",void 0)}},[y("subTemplateType")]),a.useEffect(()=>{const r=Ne();r.length>0&&r[0].id!==""?(e===void 0||e.templateId===void 0||U)&&b("template",r[0]):(e===void 0||e.templateId===void 0||U)&&b("template",W)},[y("subTemplateType2")]),a.useEffect(()=>{let r=f.find(c=>c.id===y("template")?.id);Ze(r)},[y("template")]);const[Qe,Ee]=a.useState(!1);a.useEffect(()=>{xe||Qe||Z&&k&&i&&(Ee(!0),n(Z),b("subject",Z.subject??""),setTimeout(()=>{Ee(!1)},1e3))},[Z,k,i,xe]);const Ne=()=>{let r=[W],c="templateType";L.length>0?c="subTemplateType2":P.length>0&&(c="subTemplateType");let u=f.filter(E=>(E.type?.toString()===y(c)?.id.toString()||E.type===null)&&y(c)?.id!=null),C=Xe(u,[u.findIndex(E=>!E.readonly)]);return C.length>0&&(C[0].readonly===!0&&!l?r=[]:r.push(Se),r=[...r,...C.map(S=>({id:S.id,name:Re(u,S.id),isSeparator:S.isSeparator}))]),r.length?r:[]};a.useEffect(()=>{if(e&&e.type1){const r=ce?.find(c=>`${c.id}`===e.type1);b("templateType",r)}},[H,ce]),a.useEffect(()=>{if(e&&e.type2){const r=P?.find(c=>`${c.id}`===e.type2);b("subTemplateType",r)}},[H,P]),a.useEffect(()=>{if(e&&e.type3){const r=L?.find(c=>`${c.id}`===e.type3);b("subTemplateType2",r)}},[H,L]),a.useEffect(()=>{if(e&&e.templateId&&f&&f.length>0&&!U&&i){const r=f?.find(c=>`${c.id}`===e.templateId);ae(!0),r&&(K(r),b("template",r))}},[f,i]);const Re=(r,c)=>{let u=r.find(C=>C.id===c);return u?`${u.displayName}`:""},et=r=>{window.StripoEditorApi.actionsApi.getTemplateData(async c=>{let u=r.template.id,C="";k?.readonly&&(u="",C=r.template.id);let E=f.find(O=>O.name===r.templateName.trim());if(E&&E.id!==u){q("templateName",{type:"validate",message:"Template name already exists. Please choose a different name."});return}let S=r.templateType.id;L&&L.length>0?S=r.subTemplateType2.id:P&&P.length>0&&(S=r.subTemplateType.id);const Y={enerexIdentifier:"",projectId:"",templateId:u,templateType:S,name:r.templateName.trim(),html:c.html,css:c.css,subject:r.templateType.id==="2"?r?.subject??"":"",parent_id:C};if(await de(Y)){if(w(),k?.readonly&&!l)N(),R([]),ee([]);else{const O=await oe({id:u});O?Q(O):te()}v()}})},te=()=>{Ce(!0),s(!1),Q(void 0),n(void 0),setTimeout(()=>{Ce(!1)},0)},tt=(r,c)=>{const u=c.trim(),C="";if(f.find(S=>S.name===u&&S.id!==C)){me(!0);return}pe(!1),window.StripoEditorApi.actionsApi.getTemplateData(async S=>{const Y=r.template.id;let z=r.templateType.id;L?.length?z=r.subTemplateType2.id:P?.length&&(z=r.subTemplateType.id);const O={enerexIdentifier:"",projectId:"",templateId:C,templateType:z,name:u,html:S.html,css:S.css,subject:r.templateType.id==="2"?r?.subject??"":"",parent_id:Y};await de(O)&&(w(),te(),N(),R([]),ee([]),v())})},nt=r=>{window.StripoEditorApi.actionsApi.getTemplateData(async c=>{let u=r.template.id,C="",E=f.find(O=>O.name===r.templateName.trim());if(E&&E.id!==u){q("templateName",{type:"validate",message:"Template name already exists. Please choose a different name."});return}let S=r.templateType.id;L&&L.length>0?S=r.subTemplateType2.id:P&&P.length>0&&(S=r.subTemplateType.id);const Y={enerexIdentifier:"",projectId:"",templateId:u,templateType:S,name:r.templateName.trim(),html:c.html,css:c.css,subject:r.templateType.id==="2"?r?.subject??"":"",parent_id:C};if(await de(Y)){w();const O=await oe({id:u});O?Q(O):te(),v()}})},rt=()=>{ze("input"),pe(!0),me(!1)},st=r=>{if(B==="input"){const c=j();tt(c,r||"");return}};return t.jsxs(t.Fragment,{children:[t.jsx(h.Card,{className:"border border-0 text-start",children:t.jsx(h.Card.Body,{className:"pe-0 ps-2",children:t.jsx("form",{children:t.jsx("div",{className:"template-list-container gap-3",children:t.jsxs(h.Row,{children:[t.jsx(h.Col,{children:t.jsx(X,{label:"Category",control:x,error:g,options:ce,required:!0,disabled:m||I||_||D||!i,validation:{required:{value:!0,message:"Select a category"}},...o("templateType")})}),P&&P.length>0&&t.jsx(h.Col,{children:t.jsx(X,{label:"Type",control:x,error:g,options:P,required:!0,disabled:m||I||_||D||!i,validation:{required:{value:!0,message:"Select a type"}},...o("subTemplateType")})}),L&&L.length>0&&t.jsx(h.Col,{children:t.jsx(X,{label:"Sub Type",control:x,error:g,options:L,required:!0,disabled:m||I||_||D||!i,validation:{required:{value:!0,message:"Select a subtype"}},...o("subTemplateType2")})}),t.jsx(h.Col,{children:t.jsx(X,{label:"Template",control:x,error:g,disabled:m||I||_||D||!i,options:Ne(),required:!1,...o("template")})}),t.jsx(h.Col,{children:t.jsx(be,{label:"Name",register:o,error:g,required:!0,name:"templateName",validation:{required:{value:!0,message:"Enter a name"}}})}),y("templateType")?.id==="2"&&t.jsx(h.Col,{children:t.jsx(be,{label:"Subject",register:o,error:g,required:!1,name:"subject"})}),t.jsxs(h.Col,{className:"d-flex align-self-start justify-content-end gap-2 mb-1 btn-padding",children:[t.jsx(h.Button,{style:{width:"70px"},variant:"primary",disabled:m||I||_||D||!i,onClick:()=>{K(void 0),N(),R([]),ee([]),d()},children:I||_?t.jsx(h.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:t.jsx("span",{className:"visually-hidden",children:"Loading..."})}):"Clear"}),(y("templateType")?.id.toString()!=="2"||(y("templateType")?.id.toString()==="2"&&(k?.id??""))!=="")&&t.jsxs(t.Fragment,{children:[!(k?.readonly&&l)&&t.jsx(h.Button,{type:"button",onClick:p(et),variant:"primary",style:{width:"80px"},disabled:m||I||_||D||!i,children:I||_?t.jsx(h.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:t.jsx("span",{className:"visually-hidden",children:"Loading..."})}):k?.readonly?"Save as":"Save"}),(y("templateType")?.id.toString()==="28"||y("subTemplateType")?.id.toString()==="9"&&y("subTemplateType2")?.id.toString()==="12")&&!!y("templateName")?.trim()&&t.jsx(h.Button,{type:"button",variant:"primary",style:{width:"80px"},onClick:()=>rt(),disabled:m||I||_||D||!i,children:I||_?t.jsx(h.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:t.jsx("span",{className:"visually-hidden",children:"Loading..."})}):"Save as"}),k?.readonly&&l&&t.jsx(h.Button,{type:"button",onClick:p(nt),variant:"primary",style:{width:"80px"},disabled:m||I||_||D||!i,children:I||_?t.jsx(h.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:t.jsx("span",{className:"visually-hidden",children:"Loading..."})}):"Save"})]})]})]})})})})}),t.jsx(Oe,{show:Ye,variant:B,title:B==="confirm"?"Are you sure?":"Save Template As",message:B==="confirm"?'Are you sure you want to remove custom template ""?':"",label:"New Name",requiredMessage:"Enter a new name",externalError:Je,externalErrorMessage:"Template name already exists. Please choose a different name",confirmText:B==="confirm"?"Ok":"Save as",confirmButtonVariant:B==="confirm"?"danger":"primary",onConfirm:st,onCancel:()=>pe(!1),onInputChange:()=>me(!1)})]})},Be=({config:n})=>{const[s,d]=a.useState(!1),[i,l]=a.useState(),[e,o]=a.useState(!1);a.useEffect(()=>{n.isAdmin||o(!0)},[]);const[p,w]=a.useState(!1),b=y=>{if(l(y),n.isAdmin&&o(!0),window.StripoEditorApi&&window.StripoEditorApi.actionsApi){let N=J;console.log("selected template:"),window.StripoEditorApi.actionsApi.updateHtmlAndCss(y?.html??N,y?.css??"","")}},x=()=>{w(!1),l(void 0),window.StripoEditorApi&&window.StripoEditorApi.actionsApi&&window.StripoEditorApi.actionsApi.updateHtmlAndCss(J,"","")};return t.jsx(Ie,{configs:n,children:t.jsx(Ae,{children:t.jsxs("div",{className:"root-widget",children:[t.jsx(Ke,{templateLoading:w,onSelectItem:b,editorInitialized:s,onReset:x}),e&&t.jsx(Le,{onEditorInitialized:d,templateHTML:{css:i?.css??"",html:i?.html??J},loading:p,className:"col-span-5"})]})})})};A.EditorWidget=Be,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})});
|
|
361
|
+
*/var Se;function We(){return Se||(Se=1,function(n){(function(){var s={}.hasOwnProperty;function o(){for(var t="",c=0;c<arguments.length;c++){var d=arguments[c];d&&(t=l(t,i(d)))}return t}function i(t){if(typeof t=="string"||typeof t=="number")return t;if(typeof t!="object")return"";if(Array.isArray(t))return o.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var c="";for(var d in t)s.call(t,d)&&t[d]&&(c=l(c,d));return c}function l(t,c){return c?t?t+" "+c:t+c:t}n.exports?(o.default=o,n.exports=o):window.classNames=o})()}(ce)),ce.exports}var ze=We();const Ce=Be(ze),Ee=n=>n.data.isSeparator?e.jsx("div",{style:{padding:0,margin:"2px 0"},children:e.jsx("hr",{style:{border:0,borderTop:"1px solid #bdbdbdff",padding:0,margin:0}})}):n.data.icon?e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx(X.components.Option,{...n}),e.jsx("span",{className:"px-1 template-studio-dropdown-postfix-icon",children:n.data.icon})]}):e.jsx(X.components.Option,{...n}),Ye=({name:n="",control:s,options:o,multiple:i=!1,placeholder:l,validation:t,labelKey:c="name",disabled:d,isInvalid:T,value:q,onChange:I,uncontrolled:f,menuPlacement:_="auto",closeOnSelect:y=!0})=>{const j={control:v=>({...v,minHeight:"33px",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:T?"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:v=>({...v,marginTop:0,width:"max-content",minWidth:"100%"}),menuPortal:v=>({...v,zIndex:9999}),multiValueRemove:v=>({...v,display:d?"none":"block"})};return f?e.jsx(X,{components:{Option:Ee},isOptionDisabled:v=>!!v.isSeparator,className:Ce({"is-invalid":T}),styles:j,classNamePrefix:"react-select",isMulti:i,options:o,onChange:I,placeholder:l,menuPortalTarget:document.body,value:q,getOptionLabel:typeof c=="string"?v=>v[c]:c,getOptionValue:v=>v.id,isDisabled:d,menuPlacement:_,closeMenuOnSelect:y}):e.jsx(be.Controller,{control:s,name:n,rules:t,render:({field:{onChange:v,value:w,onBlur:h}})=>e.jsx(X,{components:{Option:Ee},isOptionDisabled:g=>!!g.isSeparator,className:Ce({"is-invalid":T}),styles:j,classNamePrefix:"react-select",isMulti:i,options:o,onBlur:h,onChange:v,placeholder:l,menuPortalTarget:document.body,value:w,getOptionLabel:typeof c=="string"?g=>g[c]:c,getOptionValue:g=>g.id,isDisabled:d,menuPlacement:_,closeMenuOnSelect:y},w?w.id||w.value||JSON.stringify(w):"reset")})},Q=({label:n,name:s,validation:o,control:i,error:l,...t})=>e.jsxs(u.Form.Group,{className:"mb-1",children:[n&&e.jsxs(u.Form.Label,{className:"mb-3 d-block form-label ts-label-height",children:[n," ",t.required&&e.jsx("span",{className:"text-danger",children:"*"})]}),e.jsx(Ye,{control:i,disabled:t.disabled,options:t.options??[],validation:o,isInvalid:l&&!!l[s],name:s}),l&&l[s]?e.jsx(u.Form.Control.Feedback,{type:"invalid",children:l[s].message}):null]}),Je=()=>{const n=V();F.useQueryClient();const{enerexIdentifier:s,projectId:o}=U();return F.useMutation({mutationKey:["saveTemplate"],mutationFn:async l=>(l.enerexIdentifier=s??"",l.projectId=o??"",await n.post(`${G.SaveTemplate}`,l))})},W=n=>{let s=e.jsx("span",{style:{width:"20px",height:"20px",display:"inline-block"}});return n.variant==="filled"?s=e.jsx("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:e.jsx("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
|
|
362
|
+
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
|
|
363
|
+
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
|
|
364
|
+
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
|
|
365
|
+
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
|
|
366
|
+
C63.951,25.771,64.131,24.987,63.893,24.277z`})}):n.variant==="outlined"&&(s=e.jsx("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:e.jsx("path",{fill:n.fill||"rgba(247, 216, 40, 0)",stroke:n.stroke||"#000000",strokeWidth:n.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
|
|
367
|
+
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
|
|
368
|
+
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
|
|
369
|
+
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
|
|
370
|
+
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
|
|
371
|
+
C63.951,25.771,64.131,24.987,63.893,24.277z`})})),s},z={id:"",name:"New (Blank)"},Ne={id:"",name:"Separator",isSeparator:!0},Xe=({onSelectItem:n,templateLoading:s,onReset:o,editorInitialized:i})=>{const{isAdmin:l,defaultSelector:t}=U(),{mutateAsync:c,isPending:d}=Ve(),{register:T,handleSubmit:q,clearErrors:I,setValue:f,control:_,watch:y,reset:j,setError:v,getValues:w,formState:{errors:h}}=be.useForm({defaultValues:{templateName:"",subTemplateType:void 0,subTemplateType2:void 0,subject:"",templateType:void 0,template:z},mode:"onChange"}),{data:g,refetch:b,isLoading:x}=Ue(),[P,pe]=a.useState([]),[K,R]=a.useState(!1),[A,ee]=a.useState(),[te,ne]=a.useState(),{mutateAsync:me,isPending:E}=Ge(),{mutateAsync:ue,isPending:N}=Je(),{data:H,isLoading:M}=Ke(),[fe,Qe]=a.useState([]),[O,re]=a.useState([]),[D,se]=a.useState([]),[Re,ye]=a.useState(!1),[B,et]=a.useState("confirm"),[tt,ge]=a.useState(!1),[Ie,_e]=a.useState(!1);a.useEffect(()=>{if(H){let r=H.filter(m=>m.id!=null),p=de(r,0);Qe(oe(p))}},[H]);const nt=(r,p)=>{let m=[];return r.forEach((C,k)=>{p.includes(k)&&k!==0&&m.push(Ne),m.push(C)}),m};a.useEffect(()=>{s(!!(x||E||N||M||!i))},[x,E,N,M,i]),a.useEffect(()=>{g?.sort((r,p)=>r.readonly!==p.readonly?(r.readonly?0:1)-(p.readonly?0:1):r.name.localeCompare(p.name)),pe(g??[])},[g]);const rt=async r=>{ee(r),r&&(l||!r.readonly)?(f("templateName",r?.name),I()):(f("templateName",""),f("subject",""));const p=await me({id:r?.id});p?ne(p):le()};a.useEffect(()=>{if((t===void 0||t.templateId===void 0||K)&&f("template",z),y("templateType")){let r=H?.filter(m=>m.id!==void 0)??[],p=de(r,1);re(oe(p.filter(m=>m.parent_id.toString()===`${y("templateType")?.id}`))),f("subTemplateType",void 0),f("subTemplateType2",void 0)}},[y("templateType")]),a.useEffect(()=>{if((t===void 0||t.templateId===void 0)&&f("template",z),y("subTemplateType")){let r=H?.filter(m=>m.id!==void 0)??[],p=de(r,2);se(oe(p.filter(m=>m.parent_id.toString()===`${y("subTemplateType")?.id}`))),f("subTemplateType2",void 0)}},[y("subTemplateType")]),a.useEffect(()=>{const r=Ae();r.length>0&&r[0].id!==""?(t===void 0||t.templateId===void 0||K)&&f("template",r[0]):(t===void 0||t.templateId===void 0||K)&&f("template",z)},[y("subTemplateType2")]),a.useEffect(()=>{let r=P.find(p=>p.id===y("template")?.id);rt(r)},[y("template")]);const[st,ke]=a.useState(!1);a.useEffect(()=>{Ie||st||te&&A&&i&&(ke(!0),n(te),f("subject",te.subject??""),setTimeout(()=>{ke(!1)},1e3))},[te,A,i,Ie]);const Ae=()=>{let r=[z],p="templateType";D.length>0?p="subTemplateType2":O.length>0&&(p="subTemplateType");let m=P.filter(k=>(k.type?.toString()===y(p)?.id.toString()||k.type===null)&&y(p)?.id!=null),C=nt(m,[m.findIndex(k=>!k.readonly)]);return C.length>0&&(C[0].readonly===!0&&!l?r=[]:r.push(Ne),r=[...r,...C.map(S=>({id:S.id,name:lt(m,S.id),icon:pt(m,S.id)?e.jsx(W,{variant:"filled"}):e.jsx(W,{variant:"empty"}),isSeparator:S.isSeparator}))]),r.length?r:[]};a.useEffect(()=>{if(t&&t.type1){const r=fe?.find(p=>`${p.id}`===t.type1);f("templateType",r)}},[H,fe]),a.useEffect(()=>{if(t&&t.type2){const r=O?.find(p=>`${p.id}`===t.type2);f("subTemplateType",r)}},[H,O]),a.useEffect(()=>{if(t&&t.type3){const r=D?.find(p=>`${p.id}`===t.type3);f("subTemplateType2",r)}},[H,D]),a.useEffect(()=>{if(t&&t.templateId&&P&&P.length>0&&!K&&i){const r=P?.find(p=>`${p.id}`===t.templateId);R(!0),r&&(ee(r),f("template",r))}},[P,i]);const lt=(r,p)=>{let m=r.find(C=>C.id===p);return m?`${m.displayName}`:""},it=r=>{window.StripoEditorApi.actionsApi.getTemplateData(async p=>{let m=r.template.id,C="";A?.readonly&&(m="",C=r.template.id);let k=P.find($=>$.name===r.templateName.trim());if(k&&k.id!==m){v("templateName",{type:"validate",message:"Template name already exists. Please choose a different name."});return}let S=r.templateType.id;D&&D.length>0?S=r.subTemplateType2.id:O&&O.length>0&&(S=r.subTemplateType.id);const Y={enerexIdentifier:"",projectId:"",templateId:m,templateType:S,name:r.templateName.trim(),html:p.html,css:p.css,subject:r.templateType.id==="2"?r?.subject??"":"",parent_id:C};if(await ue(Y)){if(I(),A?.readonly&&!l)j(),re([]),se([]);else{const $=await me({id:m});$?ne($):le()}await b()}})},le=()=>{_e(!0),s(!1),ne(void 0),n(void 0),setTimeout(()=>{_e(!1)},0)},at=(r,p)=>{const m=p.trim(),C="";if(P.find(S=>S.name===m&&S.id!==C)){ge(!0);return}ye(!1),window.StripoEditorApi.actionsApi.getTemplateData(async S=>{const Y=r.template.id;let J=r.templateType.id;D?.length?J=r.subTemplateType2.id:O?.length&&(J=r.subTemplateType.id);const $={enerexIdentifier:"",projectId:"",templateId:C,templateType:J,name:m,html:S.html,css:S.css,subject:r.templateType.id==="2"?r?.subject??"":"",parent_id:Y};await ue($)&&(I(),le(),j(),re([]),se([]),await b(),f("template",void 0))})},ot=r=>{window.StripoEditorApi.actionsApi.getTemplateData(async p=>{let m=r.template.id,C="",k=P.find($=>$.name===r.templateName.trim());if(k&&k.id!==m){v("templateName",{type:"validate",message:"Template name already exists. Please choose a different name."});return}let S=r.templateType.id;D&&D.length>0?S=r.subTemplateType2.id:O&&O.length>0&&(S=r.subTemplateType.id);const Y={enerexIdentifier:"",projectId:"",templateId:m,templateType:S,name:r.templateName.trim(),html:p.html,css:p.css,subject:r.templateType.id==="2"?r?.subject??"":"",parent_id:C};if(await ue(Y)){I();const $=await me({id:m});$?ne($):le(),await b()}})},dt=()=>{et("input"),ye(!0),ge(!1)},ct=r=>{if(B==="input"){const p=w();at(p,r||"");return}},pt=(r,p)=>{let m=r.find(C=>C.id===p);if(m)return m.is_favourite},mt=async()=>{let r=y("templateType")?.id;D&&D.length>0?r=y("subTemplateType2")?.id:O&&O.length>0&&(r=y("subTemplateType")?.id),await c({categoryId:r??"",templateId:y("template")?.id??""}),A&&ee({...A,is_favourite:!0}),await b()},ie=y("templateType"),Le=y("subTemplateType"),ut=y("subTemplateType2"),ft=y("template");return e.jsxs(e.Fragment,{children:[e.jsx(u.Card,{className:"border border-0 text-start",children:e.jsx(u.Card.Body,{className:"pe-0 ps-2",children:e.jsx("form",{children:e.jsx("div",{className:"template-list-container gap-3",children:e.jsxs(u.Row,{children:[e.jsx(u.Col,{children:e.jsx(Q,{label:"Category",control:_,error:h,options:fe,required:!0,disabled:x||E||N||M||d||!i,validation:{required:{value:!0,message:"Select a category"}},...T("templateType")})}),O&&O.length>0&&e.jsx(u.Col,{children:e.jsx(Q,{label:"Type",control:_,error:h,options:O,required:!0,disabled:x||E||N||M||d||!i,validation:{required:{value:!0,message:"Select a type"}},...T("subTemplateType")})}),D&&D.length>0&&e.jsx(u.Col,{children:e.jsx(Q,{label:"Sub Type",control:_,error:h,options:D,required:!0,disabled:x||E||N||M||d||!i,validation:{required:{value:!0,message:"Select a subtype"}},...T("subTemplateType2")})}),e.jsx(u.Col,{children:e.jsx(Q,{label:"Template",control:_,error:h,disabled:x||E||N||M||d||!i,options:Ae(),required:!1,...T("template")})}),e.jsxs(u.Col,{className:"d-flex align-self-start",children:[e.jsx(xe,{label:"Name",register:T,error:h,required:!0,name:"templateName",validation:{required:{value:!0,message:"Enter a name"}}}),Le?.key?.toString()==="9"&&e.jsx(u.Button,{className:"template-favourite-btn",style:{width:"26px",marginTop:"25px"},variant:"light",disabled:x||E||N||M||d||(A?A?.is_favourite:!1),onClick:mt,children:E||N||d?e.jsx(u.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:e.jsx("span",{className:"visually-hidden",children:"Loading..."})}):A?A?.is_favourite?e.jsx(W,{variant:"filled"}):e.jsx(W,{variant:"outlined"}):e.jsx(W,{variant:"outlined"})})]}),ie?.key?.toString()==="12"&&e.jsx(u.Col,{children:e.jsx(xe,{label:"Subject",register:T,error:h,required:!1,name:"subject"})}),e.jsxs(u.Col,{className:"d-flex align-self-start justify-content-end gap-2 mb-1 btn-padding",children:[e.jsx(u.Button,{style:{width:"70px"},variant:"primary",disabled:x||E||N||M||d||!i,onClick:()=>{ee(void 0),j(),re([]),se([]),o()},children:E||N||d?e.jsx(u.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:e.jsx("span",{className:"visually-hidden",children:"Loading..."})}):"Clear"}),(ie?.key?.toString()!=="12"||(ie?.key?.toString()==="12"&&(A?.id??""))!=="")&&e.jsxs(e.Fragment,{children:[!(A?.readonly&&l)&&e.jsx(u.Button,{type:"button",onClick:q(it),variant:"primary",style:{width:"80px"},disabled:x||E||N||M||d||!i,children:E||N||d?e.jsx(u.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:e.jsx("span",{className:"visually-hidden",children:"Loading..."})}):A?.readonly?"Save as":"Save"}),(ie?.key?.toString()==="28"||Le?.key?.toString()==="9"&&ut?.key?.toString()==="3"&&(ft?.id??"")!=="")&&e.jsx(u.Button,{type:"button",variant:"primary",style:{width:"80px"},onClick:()=>dt(),disabled:x||E||N||M||d||!i,children:E||N||d?e.jsx(u.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:e.jsx("span",{className:"visually-hidden",children:"Loading..."})}):"Save as"}),A?.readonly&&l&&e.jsx(u.Button,{type:"button",onClick:q(ot),variant:"primary",style:{width:"80px"},disabled:x||E||N||M||d||!i,children:E||N||d?e.jsx(u.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:e.jsx("span",{className:"visually-hidden",children:"Loading..."})}):"Save"})]})]})]})})})})}),e.jsx(Fe,{show:Re,variant:B,title:B==="confirm"?"Are you sure?":"Save Template As",message:B==="confirm"?'Are you sure you want to remove custom template ""?':"",label:"New Name",requiredMessage:"Enter a new name",externalError:tt,externalErrorMessage:"Template name already exists. Please choose a different name",confirmText:B==="confirm"?"Ok":"Save as",confirmButtonVariant:B==="confirm"?"danger":"primary",onConfirm:ct,onCancel:()=>ye(!1),onInputChange:()=>ge(!1)})]})},Ze=({config:n})=>{const[s,o]=a.useState(!1),[i,l]=a.useState(),[t,c]=a.useState(!1);a.useEffect(()=>{n.isAdmin||c(!0)},[]);const[d,T]=a.useState(!1),q=f=>{if(l(f),n.isAdmin&&c(!0),window.StripoEditorApi&&window.StripoEditorApi.actionsApi){let _=Z;console.log("selected template:"),window.StripoEditorApi.actionsApi.updateHtmlAndCss(f?.html??_,f?.css??"","")}},I=()=>{T(!1),l(void 0),window.StripoEditorApi&&window.StripoEditorApi.actionsApi&&window.StripoEditorApi.actionsApi.updateHtmlAndCss(Z,"","")};return e.jsx(qe,{configs:n,children:e.jsx(Pe,{children:e.jsxs("div",{className:"root-widget",children:[e.jsx(Xe,{templateLoading:T,onSelectItem:q,editorInitialized:s,onReset:I}),t&&e.jsx($e,{onEditorInitialized:o,templateHTML:{css:i?.css??"",html:i?.html??Z},loading:d,className:"col-span-5"})]})})})};L.EditorWidget=Ze,Object.defineProperty(L,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;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}.root-widget .ts-label-height{height:16.5px!important}#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}.template-studio-modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1000}.template-studio-modal{background:#fff;width:420px;border-radius:8px;box-shadow:0 10px 30px #0003;animation:templateStudioFadeIn .2s ease-in-out;width:600px}.template-studio-modal-header{padding:12px 16px 0;border-bottom:1px solid #e5e5e5;display:flex;justify-content:space-between;align-items:center}.template-studio-modal-header button{background:none;border:none;font-size:18px;cursor:pointer;padding:0 0 6px}.template-studio-modal-body{padding:16px}.template-studio-modal-footer{padding:16px;border-top:1px solid #e5e5e5;display:flex;justify-content:flex-end;gap:8px}@keyframes templateStudioFadeIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity: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;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}.root-widget .ts-label-height{height:16.5px!important}.template-favourite-btn{background:transparent!important;border:none!important;box-shadow:none!important;padding:0}.template-favourite-btn:hover,.template-favourite-btn:active,.template-favourite-btn.active{background:transparent!important;box-shadow:none!important}.template-favourite-btn:focus,.template-favourite-btn:focus-visible{background:transparent!important;box-shadow:none!important;outline:none!important}.template-favourite-btn:disabled{background:transparent!important;opacity:.5;cursor:not-allowed}#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}.template-studio-modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1000}.template-studio-modal{background:#fff;width:420px;border-radius:8px;box-shadow:0 10px 30px #0003;animation:templateStudioFadeIn .2s ease-in-out;width:600px}.template-studio-modal-header{padding:12px 16px 0;border-bottom:1px solid #e5e5e5;display:flex;justify-content:space-between;align-items:center}.template-studio-modal-header button{background:none;border:none;font-size:18px;cursor:pointer;padding:0 0 6px}.template-studio-modal-body{padding:16px}.template-studio-modal-footer{padding:16px;border-top:1px solid #e5e5e5;display:flex;justify-content:flex-end;gap:8px}@keyframes templateStudioFadeIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { type SelectHTMLAttributes } from "react";
|
|
1
|
+
import React, { type ReactElement, type SelectHTMLAttributes } from "react";
|
|
2
2
|
import type { FieldErrors } from "react-hook-form";
|
|
3
3
|
export type HasId = {
|
|
4
4
|
id: string;
|
|
@@ -12,7 +12,10 @@ export type HasName = {
|
|
|
12
12
|
export type HasSeparator = {
|
|
13
13
|
isSeparator?: boolean;
|
|
14
14
|
};
|
|
15
|
-
export type
|
|
15
|
+
export type HasIcon = {
|
|
16
|
+
icon?: ReactElement;
|
|
17
|
+
};
|
|
18
|
+
export type BasicEntity = HasId & HasName & HasSeparator & Partial<HasProjectId> & Partial<HasIcon>;
|
|
16
19
|
interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
17
20
|
label?: string;
|
|
18
21
|
name: string;
|
|
@@ -9,6 +9,7 @@ export type ITemplatesList = {
|
|
|
9
9
|
type: number;
|
|
10
10
|
projectId: number;
|
|
11
11
|
readonly: boolean;
|
|
12
|
+
is_favourite: boolean;
|
|
12
13
|
};
|
|
13
14
|
export type ITemplate = {
|
|
14
15
|
templateID: string;
|
|
@@ -25,6 +26,7 @@ export type ITemplateTypes = {
|
|
|
25
26
|
id: number;
|
|
26
27
|
name: string;
|
|
27
28
|
parent_id: number;
|
|
29
|
+
key: number;
|
|
28
30
|
};
|
|
29
31
|
export type ISaveTemplate = {
|
|
30
32
|
enerexIdentifier: string;
|
|
@@ -38,7 +40,7 @@ export type ISaveTemplate = {
|
|
|
38
40
|
parent_id: string;
|
|
39
41
|
};
|
|
40
42
|
export type IMarkTemplate = {
|
|
41
|
-
categoryId:
|
|
43
|
+
categoryId: string;
|
|
42
44
|
templateId: string;
|
|
43
45
|
};
|
|
44
46
|
export type TemplateTag = {
|