@enerex/template-studio 1.1.36 → 1.1.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(A,t){typeof exports=="object"&&typeof module<"u"?t(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"],t):(A=typeof globalThis<"u"?globalThis:A||self,t(A.EnerexTemplateEditor={},A.jsxRuntime,A.React,A.reactQuery,A.axios,A.reactBootstrap,A.reactHookForm,A.Select$1))})(this,function(A,t,a,$,ue,h,fe,ne){"use strict";const J=`<!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
|
-
`,
|
|
357
|
+
`,ye=a.createContext(void 0),Ie=({children:n,configs:s})=>{const[d,i]=a.useState(s.clientId),[l,e]=a.useState(s.apiKey),[o,p]=a.useState(s.enerexIdentifier),[w,b]=a.useState(s.projectId),[x,y]=a.useState(s.userEmail),[N,q]=a.useState(s.isAdmin),[j,g]=a.useState(s.meBaseUrl),[T,v]=a.useState(s.defaultSelector),m=f=>{e(f.apiKey),i(f.clientId),b(f.projectId),p(f.enerexIdentifier),y(f.userEmail),q(f.isAdmin),v(f.defaultSelector),g(f.meBaseUrl)};return t.jsx(ye.Provider,{value:{clientId:d,apiKey:l,setConfiguration:m,enerexIdentifier:o,projectId:w,userEmail:x,isAdmin:N,defaultSelector:T,meBaseUrl:j},children:n})},M=()=>{const n=a.useContext(ye);if(!n)throw new Error("widgetConfig must be used within a ConfigProvider");return n},ge=(n="",s)=>({get:async(l,e)=>{try{const o=await ue.get(`${n}${l}`,e??s);if(o.status===200)return o.data}catch(o){throw o}},post:async(l,e,o)=>{try{const p=await ue.post(`${n}${l}`,e,o??s);if(p.status===200)return p.data}catch(p){throw p}}}),he=a.createContext({get:()=>{throw new Error("HttpClientContext.get not implemented")},post:()=>{throw new Error("HttpClientContext.post not implemented")}}),_e=({children:n})=>{const{clientId:s,apiKey:d,isAdmin:i,meBaseUrl:l}=M(),e={headers:{client_id:s,"x-api-key":d,"Security-Context":i?"admin":"viewer"}},{get:o,post:p}=ge(l,e);return t.jsx(he.Provider,{value:{get:o,post:p},children:n})},Ae=({children:n})=>{const s=new $.QueryClient;return t.jsx(_e,{children:t.jsx($.QueryClientProvider,{client:s,children:n})})},re={EDITOR_SCRIPT_URL:"https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js",EDITOR_PLUGIN_ID:"1afdc3161ec7409a8627a1c8561d45f5",EDITOR_SECRET_KEY:"54ba748ed7e94f2e929555783acb03da"},qe=n=>{const s=Array.from(new Set(n.map(i=>i.category))),d=[];return s.forEach(i=>{const l=n.filter(e=>e.category===i).map(e=>({label:e.label,value:e.value,hint:e.hint,hidden:e.hidden}));d.push({category:i,entries:l})}),d},V=()=>{const n=a.useContext(he);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/"},je=()=>{const n=V(),{enerexIdentifier:s,projectId:d}=M();return $.useQuery({queryKey:["getTemplateTags"],queryFn:async l=>await n.get(`${G.MergeTags}${d}/${s}`)})},Pe=()=>{const n=V(),{enerexIdentifier:s,projectId:d}=M();return $.useQuery({queryKey:["getExcludeCategory"],queryFn:async l=>await n.get(`${G.ExcludeCategory}${d}/${s}`)})},Le=({templateHTML:n,className:s="",loading:d=!1,onEditorInitialized:i})=>{const{post:l}=ge(),{data:e}=je(),{data:o}=Pe(),[p,w]=a.useState(n??{html:J,css:""}),{userEmail:b}=M(),x=a.useRef(null),y="https://plugin.stripocdn.email/content/guids/CABINET_eab4e7d5a4603ac03f4120652a3a5a540f0c79c688514939f095f67433ed4a67/images/photo256.png",N="https://plugins.stripo.email/api/v1/auth";a.useEffect(()=>{(async()=>(await q(),e&&o&&await j(re.EDITOR_SCRIPT_URL)))()},[e,o]);async function q(){window.Zone||await new Promise((T,v)=>{const m=document.createElement("script");m.src="https://unpkg.com/zone.js@0.13.1/bundles/zone.umd.min.js";const f=document.querySelector("script[nonce]")?.nonce;f&&m.setAttribute("nonce",f),m.onload=()=>T(),m.onerror=()=>v(new Error("Failed to load zone.js")),document.head.appendChild(m)})}async function j(T){let v=document.getElementById("UiEditorScript");v||(v=document.createElement("script"),v.id="UiEditorScript",v.src=T,v.onload=async()=>{await g()},document.body.appendChild(v)),await new Promise(m=>v.addEventListener("load",()=>m(),{once:!0}))}const g=async()=>{const T=x.current;if(!T){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 v={html:p.html,css:p.css,modulesExcludedCategories:o??[],forceRecreate:!0,metadata:{emailId:b,userId:"1",avatarUrl:y},locale:"en",onTokenRefreshRequest:async m=>{const f={pluginId:re.EDITOR_PLUGIN_ID,secretKey:re.EDITOR_SECRET_KEY,userId:b,role:"user"},F=await l(N,f);F?.token&&m(F.token)},onTemplateLoaded:()=>{i&&i(!0)},mergeTags:qe(e??[])};for(const[m,f]of Object.entries({codeEditorButtonSelector:"#codeEditor",undoButtonSelector:"#undoButton",redoButtonSelector:"#redoButton",mobileViewButtonSelector:"#mobileViewButton",desktopViewButtonSelector:"#desktopViewButton"}))T.ownerDocument&&T.getRootNode()instanceof ShadowRoot&&T.getRootNode().querySelector(f)&&(v[m]=f);await window.UIEditor.initEditor(T,v)};return t.jsx("div",{className:"position-relative",children:t.jsxs("div",{className:`editor-container ${s}`,children:[d&&t.jsx("div",{className:"loading-overlay",children: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..."})})}),t.jsx("div",{id:"externalSystemContainer"}),t.jsx("div",{id:"stripoEditorContainer",ref:x})]})})},be=({label:n,register:s,validation:d,required:i=!1,name:l,error:e,className:o="",...p})=>t.jsxs(h.Form.Group,{className:o+" mb-1",children:[n?t.jsxs(h.Form.Label,{className:"mb-3 d-block form-label ts-label-height",children:[n,i&&t.jsx("label",{className:"text-danger",children:"*"})]}):null,t.jsx(h.Form.Control,{name:l,type:"text",...p,isInvalid:!!(e&&e[l]),...s?s(l,{...d}):{},className:`react-select__control ${e&&e[l]&&"border border-danger"}`}),e&&e[l]?t.jsx(h.Form.Control.Feedback,{type:"invalid",children:e[l].message}):null]}),Oe=({show:n,variant:s,title:d="Are you sure?",message:i,label:l="Name",value:e="",placeholder:o="",requiredMessage:p="This field is required",externalError:w=!1,externalErrorMessage:b="",confirmText:x="Ok",cancelText:y="Cancel",confirmButtonVariant:N="danger",onConfirm:q,onCancel:j,onInputChange:g})=>{const[T,v]=a.useState(e),[m,f]=a.useState(!1);if(a.useEffect(()=>{n&&(v(e),f(!1))},[n,e]),a.useEffect(()=>{w&&f(!0)},[w]),!n)return null;const F=s==="input"&&!T.trim(),U=s==="input"&&(F||w),ae=F?p:w?b:"",k=()=>{if(U){f(!0);return}q(T.trim())};return t.jsx("div",{className:"template-studio-modal-overlay",children:t.jsxs("div",{className:"template-studio-modal",children:[t.jsxs("div",{className:"template-studio-modal-header",children:[t.jsx("h4",{children:d}),t.jsx("button",{className:"template-studio-modal-close",onClick:j,children:"✕"})]}),t.jsxs("div",{className:"template-studio-modal-body",children:[i&&t.jsx("p",{children:i}),s==="input"&&t.jsxs("div",{className:"mb-3",children:[t.jsxs("label",{className:"form-label",children:[l,t.jsx("span",{className:"text-danger",children:"*"})]}),t.jsx("input",{type:"text",className:`form-control ${m&&U?"is-invalid":""}`,placeholder:o,value:T,onChange:K=>{v(K.target.value),m&&f(!1),g?.(K.target.value)},autoFocus:!0}),m&&U&&t.jsx("div",{className:"invalid-feedback d-block",children:ae})]})]}),t.jsxs("div",{className:"template-studio-modal-footer",children:[t.jsx("button",{className:"btn btn-secondary",onClick:j,children:y}),t.jsx("button",{className:`btn btn-${N}`,onClick:k,children:x})]})]})})},ke=()=>{const n=V(),{enerexIdentifier:s,projectId:d}=M();return $.useQuery({queryKey:["getTemplatesList"],queryFn:async l=>await n.get(`${G.Template_list}${d}/${s}`)})};function se(n){return n.sort((s,d)=>s.name.localeCompare(d.name))}function De(n){const s=new Map,d=[];n.forEach(e=>s.set(e.id,e));let i=n.filter(e=>e.parent_id===0),l=0;for(;i.length>0;){d.push({level:l,data:i});const e=i.map(p=>p.id);i=n.filter(p=>e.includes(p.parent_id)),l++}return d}function le(n,s){const i=De(n).find(l=>l.level===s);return i?i.data:[]}const $e=()=>{const n=V(),{enerexIdentifier:s,projectId:d}=M();return $.useMutation({mutationKey:["getTemplate"],mutationFn:async({id:l})=>{if(l)return await n.get(`${G.Template}${s}/${l}/${d}`)}})},Me=()=>{const n=V(),{enerexIdentifier:s,projectId:d}=M();return $.useQuery({queryKey:["getTemplateTypes"],queryFn:async l=>await n.get(`${G.TemplateTypes}${s}/${d}`)})};function Fe(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}var ie={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 pe;function qe(){return pe||(pe=1,function(t){(function(){var l={}.hasOwnProperty;function a(){for(var e="",o=0;o<arguments.length;o++){var p=arguments[o];p&&(e=s(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 a.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)l.call(e,p)&&e[p]&&(o=s(o,p));return o}function s(e,o){return o?e?e+" "+o:e+o:e}t.exports?(a.default=a,t.exports=a):window.classNames=a})()}(Q)),Q.exports}var je=qe();const me=Ae(je),ue=t=>t.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,{...t}),Le=({name:t="",control:l,options:a,multiple:i=!1,placeholder:s,validation:e,labelKey:o="name",disabled:p,isInvalid:v,value:g,onChange:E,uncontrolled:h,menuPlacement:A="auto",closeOnSelect:D=!0})=>{const C={control:b=>({...b,minHeight:"33px",borderColor:v?"var(--bs-form-invalid-border-color) !important":"var(--ct-input-border-color)",backgroundImage:v?'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:v?"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:b=>({...b,marginTop:0,width:"max-content",minWidth:"100%"}),menuPortal:b=>({...b,zIndex:9999}),multiValueRemove:b=>({...b,display:p?"none":"block"})};return h?n.jsx(z,{components:{Option:ue},isOptionDisabled:b=>!!b.isSeparator,className:me({"is-invalid":v}),styles:C,classNamePrefix:"react-select",isMulti:i,options:a,onChange:E,placeholder:s,menuPortalTarget:document.body,value:g,getOptionLabel:typeof o=="string"?b=>b[o]:o,getOptionValue:b=>b.id,isDisabled:p,menuPlacement:A,closeMenuOnSelect:D}):n.jsx(ie.Controller,{control:l,name:t,rules:e,render:({field:{onChange:b,value:T,onBlur:f}})=>n.jsx(z,{components:{Option:ue},isOptionDisabled:u=>!!u.isSeparator,className:me({"is-invalid":v}),styles:C,classNamePrefix:"react-select",isMulti:i,options:a,onBlur:f,onChange:b,placeholder:s,menuPortalTarget:document.body,value:T,getOptionLabel:typeof o=="string"?u=>u[o]:o,getOptionValue:u=>u.id,isDisabled:p,menuPlacement:A,closeMenuOnSelect:D},T?JSON.stringify(T):"reset")})},W=({label:t,name:l,validation:a,control:i,error:s,...e})=>n.jsxs(y.Form.Group,{className:"mb-1",children:[t&&n.jsxs(y.Form.Label,{className:"mb-3 d-block form-label",children:[t," ",e.required&&n.jsx("span",{className:"text-danger",children:"*"})]}),n.jsx(Le,{control:i,disabled:e.disabled,options:e.options??[],validation:a,isInvalid:s&&!!s[l],name:l}),s&&s[l]?n.jsx(y.Form.Control.Feedback,{type:"invalid",children:s[l].message}):null]}),Oe=()=>{const t=H();O.useQueryClient();const{enerexIdentifier:l,projectId:a}=P();return O.useMutation({mutationKey:["saveTemplate"],mutationFn:async s=>(s.enerexIdentifier=l??"",s.projectId=a??"",await t.post(`${G.SaveTemplate}`,s))})},K={id:"",name:"New (Blank)"},fe={id:"",name:"Separator",isSeparator:!0},Pe=({onSelectItem:t,templateLoading:l,onReset:a,editorInitialized:i})=>{const{isAdmin:s,defaultSelector:e}=P(),{register:o,handleSubmit:p,clearErrors:v,setValue:g,control:E,watch:h,reset:A,setError:D,formState:{errors:C}}=ie.useForm({defaultValues:{templateName:"",subTemplateType:void 0,subTemplateType2:void 0,subject:"",templateType:void 0,template:K},mode:"onChange"}),{data:b,refetch:T,isLoading:f}=Ce(),[u,w]=d.useState([]),[M,ke]=d.useState(!1),[U,R]=d.useState(),[Y,V]=d.useState(),{mutateAsync:ee,isPending:I}=Ne(),{mutateAsync:ye,isPending:N}=Oe(),{data:F,isLoading:k}=_e(),[te,$e]=d.useState([]),[j,ne]=d.useState([]),[L,re]=d.useState([]);d.useEffect(()=>{if(F){let r=F.filter(m=>m.id!=null),c=Z(r,0);$e(X(c))}},[F]);const Me=(r,c)=>{let m=[];return r.forEach((_,S)=>{c.includes(S)&&S!==0&&m.push(fe),m.push(_)}),m};d.useEffect(()=>{l(!!(f||I||N||k||!i))},[f,I,N,k,i]),d.useEffect(()=>{b?.sort((r,c)=>r.readonly!==c.readonly?(r.readonly?0:1)-(c.readonly?0:1):r.name.localeCompare(c.name)),w(b??[])},[b]);const Ue=async r=>{R(r),r&&(s||!r.readonly)?(g("templateName",r?.name),v()):(g("templateName",""),g("subject",""));const c=await ee({id:r?.id});V(c||void 0)};d.useEffect(()=>{if((e===void 0||e.templateId===void 0||M)&&g("template",K),h("templateType")){let r=F?.filter(m=>m.id!==void 0)??[],c=Z(r,1);ne(X(c.filter(m=>m.parent_id.toString()===`${h("templateType")?.id}`))),g("subTemplateType",void 0),g("subTemplateType2",void 0)}},[h("templateType")]),d.useEffect(()=>{if((e===void 0||e.templateId===void 0)&&g("template",K),h("subTemplateType")){let r=F?.filter(m=>m.id!==void 0)??[],c=Z(r,2);re(X(c.filter(m=>m.parent_id.toString()===`${h("subTemplateType")?.id}`))),g("subTemplateType2",void 0)}},[h("subTemplateType")]),d.useEffect(()=>{const r=he();r.length>0&&r[0].id!==""?(e===void 0||e.templateId===void 0||M)&&g("template",r[0]):(e===void 0||e.templateId===void 0||M)&&g("template",K)},[h("subTemplateType2")]),d.useEffect(()=>{let r=u.find(c=>c.id===h("template")?.id);Ue(r)},[h("template")]);const[Fe,ge]=d.useState(!1);d.useEffect(()=>{Fe||(Y&&U&&i?(ge(!0),t(Y),g("subject",Y.subject??""),setTimeout(()=>{ge(!1)},1e3)):t(void 0))},[Y,U,t,i]);const he=()=>{let r=[K],c="templateType";L.length>0?c="subTemplateType2":j.length>0&&(c="subTemplateType");let m=u.filter(S=>(S.type?.toString()===h(c)?.id.toString()||S.type===null)&&h(c)?.id!=null),_=Me(m,[m.findIndex(S=>!S.readonly)]);return _.length>0&&(_[0].readonly===!0&&!s?r=[]:r.push(fe),r=[...r,..._.map(q=>({id:q.id,name:He(m,q.id),isSeparator:q.isSeparator}))]),r.length?r:[]};d.useEffect(()=>{if(e&&e.type1){const r=te?.find(c=>`${c.id}`===e.type1);g("templateType",r)}},[F,te]),d.useEffect(()=>{if(e&&e.type2){const r=j?.find(c=>`${c.id}`===e.type2);g("subTemplateType",r)}},[F,j]),d.useEffect(()=>{if(e&&e.type3){const r=L?.find(c=>`${c.id}`===e.type3);g("subTemplateType2",r)}},[F,L]),d.useEffect(()=>{if(e&&e.templateId&&u&&u.length>0&&!M&&i){const r=u?.find(c=>`${c.id}`===e.templateId);ke(!0),r&&(R(r),g("template",r))}},[u,i]);const He=(r,c)=>{let m=r.find(_=>_.id===c);return m?`${m.displayName}`:""},Ge=r=>{window.StripoEditorApi.actionsApi.getTemplateData(async c=>{let m=r.template.id,_="";U?.readonly&&(m="",_=r.template.id);let S=u.find($=>$.name===r.templateName.trim());if(S&&S.id!==m){D("templateName",{type:"validate",message:"Template name already exists. Please choose a different name."});return}let q=r.templateType.id;L&&L.length>0?q=r.subTemplateType2.id:j&&j.length>0&&(q=r.subTemplateType.id);const se={enerexIdentifier:"",projectId:"",templateId:m,templateType:q,name:r.templateName.trim(),html:c.html,css:c.css,subject:r.templateType.id==="2"?r?.subject??"":"",parent_id:_};if(await ye(se)){if(v(),U?.readonly&&!s)A(),ne([]),re([]);else{const $=await ee({id:m});V($||void 0)}T()}})},Ve=r=>{window.StripoEditorApi.actionsApi.getTemplateData(async c=>{let m=r.template.id,_="",S=u.find($=>$.name===r.templateName.trim());if(S&&S.id!==m){D("templateName",{type:"validate",message:"Template name already exists. Please choose a different name."});return}let q=r.templateType.id;L&&L.length>0?q=r.subTemplateType2.id:j&&j.length>0&&(q=r.subTemplateType.id);const se={enerexIdentifier:"",projectId:"",templateId:m,templateType:q,name:r.templateName.trim(),html:c.html,css:c.css,subject:r.templateType.id==="2"?r?.subject??"":"",parent_id:_};if(await ye(se)){v();const $=await ee({id:m});V($||void 0),T()}})};return n.jsx(y.Card,{className:"border border-0 text-start",children:n.jsx(y.Card.Body,{className:"pe-0 ps-2",children:n.jsx("form",{children:n.jsx("div",{className:"template-list-container gap-3",children:n.jsxs(y.Row,{children:[n.jsx(y.Col,{children:n.jsx(W,{label:"Category",control:E,error:C,options:te,required:!0,disabled:f||I||N||k||!i,validation:{required:{value:!0,message:"Select a category"}},...o("templateType")})}),j&&j.length>0&&n.jsx(y.Col,{children:n.jsx(W,{label:"Type",control:E,error:C,options:j,required:!0,disabled:f||I||N||k||!i,validation:{required:{value:!0,message:"Select a type"}},...o("subTemplateType")})}),L&&L.length>0&&n.jsx(y.Col,{children:n.jsx(W,{label:"Sub Type",control:E,error:C,options:L,required:!0,disabled:f||I||N||k||!i,validation:{required:{value:!0,message:"Select a subtype"}},...o("subTemplateType2")})}),n.jsx(y.Col,{children:n.jsx(W,{label:"Template",control:E,error:C,disabled:f||I||N||k||!i,options:he(),required:!1,...o("template")})}),n.jsx(y.Col,{children:n.jsx(ce,{label:"Name",register:o,error:C,required:!0,name:"templateName",validation:{required:{value:!0,message:"Enter a name"}}})}),h("templateType")?.id==="2"&&n.jsx(y.Col,{children:n.jsx(ce,{label:"Subject",register:o,error:C,required:!1,name:"subject"})}),n.jsxs(y.Col,{className:"d-flex align-self-start justify-content-end gap-2 mb-1 btn-padding",children:[n.jsx(y.Button,{style:{width:"70px"},variant:"primary",disabled:f||I||N||k||!i,onClick:()=>{R(void 0),A(),ne([]),re([]),a()},children:I||N?n.jsx(y.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"}),(h("templateType")?.id.toString()!=="2"||(h("templateType")?.id.toString()==="2"&&(U?.id??""))!=="")&&n.jsxs(n.Fragment,{children:[!(U?.readonly&&s)&&n.jsx(y.Button,{type:"button",onClick:p(Ge),variant:"primary",style:{width:"80px"},disabled:f||I||N||k||!i,children:I||N?n.jsx(y.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:n.jsx("span",{className:"visually-hidden",children:"Loading..."})}):U?.readonly?"Save as":"Save"}),U?.readonly&&s&&n.jsx(y.Button,{type:"button",onClick:p(Ve),variant:"primary",style:{width:"80px"},disabled:f||I||N||k||!i,children:I||N?n.jsx(y.Spinner,{animation:"border",style:{width:"11px",height:"11px"},size:"sm",role:"status",className:"me-1",children:n.jsx("span",{className:"visually-hidden",children:"Loading..."})}):"Save"})]})]})]})})})})})},De=({config:t})=>{const[l,a]=d.useState(!1),[i,s]=d.useState(),[e,o]=d.useState(!1);d.useEffect(()=>{t.isAdmin||o(!0)},[]);const[p,v]=d.useState(!1),g=h=>{if(s(h),t.isAdmin&&o(!0),window.StripoEditorApi&&window.StripoEditorApi.actionsApi){let A=B;window.StripoEditorApi.actionsApi.updateHtmlAndCss(h?.html??A,h?.css??"","")}},E=()=>{v(!1),s(void 0),window.StripoEditorApi&&window.StripoEditorApi.actionsApi&&window.StripoEditorApi.actionsApi.updateHtmlAndCss(B,"","")};return n.jsx(be,{configs:t,children:n.jsx(we,{children:n.jsxs("div",{className:"root-widget",children:[n.jsx(Pe,{templateLoading:v,onSelectItem:g,editorInitialized:l,onReset:E}),e&&n.jsx(Ee,{onEditorInitialized:a,templateHTML:{css:i?.css??"",html:i?.html??B},loading:p,className:"col-span-5"})]})})})};x.EditorWidget=De,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})});
|
|
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"})});
|
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}#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}
|
|
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}}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { ModalVariant } from "../../type/application-type";
|
|
3
|
+
import "./modal.css";
|
|
4
|
+
interface AppModalProps {
|
|
5
|
+
show: boolean;
|
|
6
|
+
variant: ModalVariant;
|
|
7
|
+
title?: string;
|
|
8
|
+
message?: string;
|
|
9
|
+
label?: string;
|
|
10
|
+
value?: string;
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
requiredMessage?: string;
|
|
13
|
+
externalError?: boolean;
|
|
14
|
+
externalErrorMessage?: string;
|
|
15
|
+
confirmText?: string;
|
|
16
|
+
cancelText?: string;
|
|
17
|
+
confirmButtonVariant?: string;
|
|
18
|
+
disableConfirm?: boolean;
|
|
19
|
+
onConfirm: (value?: string) => void;
|
|
20
|
+
onCancel: () => void;
|
|
21
|
+
onInputChange?: (value: string) => void;
|
|
22
|
+
}
|
|
23
|
+
declare const AppModal: React.FC<AppModalProps>;
|
|
24
|
+
export default AppModal;
|