moorr-react-mui 0.2.72 → 0.2.73

package/cjs/index.js

@@ -1 +1 @@
-"use strict";var e=require("react"),t=require("moorr-common"),l=require("@material-ui/core/MenuItem"),r=require("@material-ui/core/styles"),n=require("@material-ui/core/TextField"),o=require("@material-ui/core"),i=require("@material-ui/styles"),s=require("uuid"),a=require("react-grid-layout"),c=require("react-dom"),u=require("@mui/material"),d=require("react-toastify"),m=require("@mui/icons-material/Cancel");const p=e=>({root:{"&:hover:not($disabled):not($focused):not($error) $notchedOutline":{},"&$checked":{color:"var(--primary-color)"},"& .vldt-MuiSelect-select.vldt-MuiSelect-select":{color:"var(--grey-color-2)"}},disabled:{},focused:{},error:{},notchedOutline:{},checked:{},notchedOutlineMBRequired:{flex:3,borderColor:"blue",borderWidth:2},fieldSetMBRequired:{"& fieldset":{flex:3,borderColor:"blue",borderWidth:2}},fieldSetErrorField:{"& fieldset":{borderColor:"var(--error-color)"}},blue:{color:"blue"}});r.makeStyles(p);const g=r.makeStyles((()=>r.createStyles({root:{overflow:"hidden",display:"flex",alignItems:"center","&.start":{flexDirection:"row"},"&.top":{flexDirection:"column"},"& .Mui-disabled":{backgroundColor:"var(--grey-color-3)",cursor:"not-allowed",borderRadius:"4px"}},label:{flex:2},field:{flex:3},required:{color:"red"},menuItem:{color:"var(--grey-color-2)","&:hover":{backgroundColor:"var(--primary-color-scale-25)",color:"var(--grey-color-2)"}},menuItemSelected:{color:"var(--grey-color-2)"},mandatory:{border:"red 2px solid",borderRadius:"4px"}})));var h=r.withStyles(p)((({handleChange:t,value:r,disabled:o=!1,name:i,className:s,classes:a,size:c,menuItemLabel:u,options:d,labelPlacement:m="start",label:p,required:h=!1,isMBRequiredField:f,fullWidth:v,selectIconComponent:E})=>{const{root:x,focused:y,error:b,notchedOutline:T,notchedOutlineMBRequired:C}=a,w=g();let N;return E&&(N={IconComponent:E}),e.createElement(n,{fullWidth:!1!==v,id:"outlined-basic",variant:"outlined",value:r,onChange:t,disabled:o,name:i,className:[s].join(" "),InputProps:{classes:{root:x,focused:y,error:b,notchedOutline:!f||r&&0!==(null==r?void 0:r.length)?!h||r&&0!==(null==r?void 0:r.length)?T:w.mandatory:C}},color:"primary",size:c||"small",select:!0,SelectProps:N,defaultValue:""},e.createElement(l,{value:"",disabled:!0},e.createElement("em",null,u)),d&&d.map(((t,r)=>"-separator-"===t?e.createElement(l,{key:`separator-${r}`,value:"",disabled:!0},e.createElement("em",null,"-----------")):e.createElement(l,{key:`menu-item-${r}-${t.value||t}`,value:t.value||t},t.label||t))))}));const f={};var v=({stylePrefix:t,children:l})=>{let n;if(t)n=f[t]?f[t]:f[t]=i.createGenerateClassName({seed:t});else{const e=`MoorrStylesProvider-${s.v4()}-`;n=i.createGenerateClassName({seed:e})}return e.createElement(i.StylesProvider,{generateClassName:n,injectFirst:!0},e.createElement(o.StylesProvider,{generateClassName:n,injectFirst:!0},e.createElement(r.StylesProvider,{generateClassName:n},l)))};const E=e.createContext({});function x(){return e.useContext(E)}const y={};function b(e,t){e&&t&&(y[e]=t)}const T=({graphingTile:t,graphingTileIndex:l})=>{var r;if(!(null===(r=null==t?void 0:t.tile)||void 0===r?void 0:r.tileType))return null;const n=y[t.tile.tileType]||null;return n?e.createElement(n,{graphingTile:t,graphingTileIndex:l}):null},C=[20,20],w={lg:600,sm:0},N={lg:8,sm:2},M=({tilePrefix:t,responsive:l,columns:r,containerPadding:n,referenceMargin:o,referenceWidth:i,graphingTiles:s})=>{const[c,u]=e.useState(null),[d,m]=e.useState(null),[p,g]=e.useState(null),[h,f]=e.useState(null),v=e.useRef(null),E=()=>{const e=(null==v?void 0:v.current)?(null==v?void 0:v.current).getBoundingClientRect().width:null;f(e);const t=M(e);u(t)};let x;const y=e=>{E(),clearTimeout(x),x=setTimeout((()=>{E()}),300)};e.useEffect((()=>{E()}),[v]),e.useEffect((()=>(window.addEventListener("resize",y),()=>{window.removeEventListener("resize",y)})),[]),e.useEffect((()=>{if(l){if(!Array.isArray(s)||0===s.length)return void g({lg:[]});g({lg:s.map(((e,l)=>({x:e.x,y:e.y,w:isNaN(e.w)?1:e.w,h:isNaN(e.h)?1:e.h,i:`${t?t+"_":""}tile_${l}`})))})}else{if(!Array.isArray(s)||0===s.length)return void m([]);m(s.map(((e,l)=>({x:e.x,y:e.y,w:isNaN(e.w)?1:e.w,h:isNaN(e.h)?1:e.h,i:`${t?t+"_":""}tile_${l}`,static:!0}))))}}),[s]);const b=()=>null==s?void 0:s.map(((l,r)=>{if(!l.tile||!l.visible)return null;let n="graphing-tile-container";!1!==l.border&&(n+=" bordered"),l.autoHeight&&(n+=" auto-height");const o=`${t?t+"_":""}tile_${r}`;return e.createElement("div",{className:n,key:o},e.createElement(T,{graphingTile:l,graphingTileIndex:r}))})),M=e=>{if(!o||isNaN(o)||o<=0||!i||isNaN(i)||i<=0||null==e)return C;const t=e/i*o;return[t,t]};return e.createElement("div",{ref:v,className:"graphing-tiles-container"},(()=>{if(!h||!c)return null;if(!1!==l){if(!p)return null;const t=[n||0,0];return e.createElement(a.Responsive,{width:h,breakpoints:w,cols:r||N,rowHeight:1,layouts:p,containerPadding:t,margin:c,isDraggable:!1},b())}return d?e.createElement(a,{width:h,cols:9,rowHeight:50,margin:c,isDraggable:!1,layout:d},b()):null})())},P={};function S(e,t){P[e]=t}function k(e){const t=P[null==e?void 0:e.tileType];return t?new t(e):null}class G{constructor(e){this.x=e.x,this.y=e.y,this.w=e.w,this.h=e.h,this.border=!0===e.border,this.background=e.background||null,this.autoHeight=!0===e.autoHeight,this.tile=k(e.tile),this.visible=!1!==e.visible}getBackground(){return this.background||"#FFFFFF"}}class F{constructor(e){this.title=e.title||"",this.infoIconUrl=e.infoUrl,this.infoIconHref=e.infoHref,this.responsive=!1!==e.responsive,this.columns=e.columns||{lg:8,sm:2},this.containerPadding=e.containerPadding||0,this.referenceMargin=e.referenceMargin||null,this.referenceWidth=e.referenceWidth||null,this.tiles=[],Array.isArray(e.tiles)&&e.tiles.forEach((e=>{this.tiles.push(new G(e))}))}}const I={};function L(e){const t=I[null==e?void 0:e.controlType];return t?new t(e):null}class A{constructor(e){this.controlType=e.controlType,this.dataKey=e.dataKey}}class B{constructor(e){this.border=e.border,this.background=e.background||null,this.control=L(e.control)}getBackground(e){return this.background||(null==e?void 0:e.background)||"#FFFFFF"}}class ${constructor(e){this.id=e.id||"",this.title=e.title||"",this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new B(e))}))}}class D{constructor(e){this.tileType=e.tileType}}class q extends D{constructor(e){super(e),this.control=new B(e.control)}}class H extends D{constructor(e){super(e),this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new B(e))}))}}class O extends D{constructor(e){super(e),t.utils.isArray(e.formGroups)&&e.formGroups.length>0?this.formGroups=e.formGroups.map((e=>new $(e))):this.formGroups=[]}}S("form-groups-tile",O);class _ extends H{constructor(e){super(e),this.controlsPerPage=e.controlsPerPage,(isNaN(this.controlsPerPage)||this.controlsPerPage<=1)&&(this.controlsPerPage=1)}}S("horizontal-tile",_);class z extends H{constructor(e){super(e),this.states={};for(const t in e.states){const l=e.states[t];l&&(this.states[t]=new F(l))}}}S("selectable-states-tile",z);class R extends q{constructor(e){super(e)}}S("single-tile",R);class W extends H{constructor(e){super(e)}}S("vertical-tile",W);const U={};const j=({graphingTile:t,graphingTileIndex:l,graphingTileControl:r,ControlProps:n})=>{var o;if(!(null===(o=null==r?void 0:r.control)||void 0===o?void 0:o.controlType))return null;const i=U[r.control.controlType]||null;return i?e.createElement(i,Object.assign({graphingTile:t,graphingTileIndex:l,graphingTileControl:r},n)):null},V=({graphingTile:t,graphingTileIndex:l,graphingTileControls:r,ControlProps:n})=>{var o,i;let s="graphing-tile-controls-container";return(null===(o=null==t?void 0:t.tile)||void 0===o?void 0:o.tileType)&&(s+=" "+(null===(i=null==t?void 0:t.tile)||void 0===i?void 0:i.tileType)),e.createElement("div",{className:s},null==r?void 0:r.map(((r,o)=>{var i,s;if(!r.control)return null;let a="graphing-tile-control-container";(null===(i=r.control)||void 0===i?void 0:i.controlType)&&(a+=" "+(null===(s=r.control)||void 0===s?void 0:s.controlType)),!1!==r.border&&(a+=" bordered");const c=`control_${l}_${o}`;return e.createElement("div",{className:a,key:c},e.createElement(j,{graphingTile:t,graphingTileIndex:l,graphingTileControl:r,ControlProps:n}))})))},Z=({graphingTile:l,graphingTileIndex:r})=>{const n=null==l?void 0:l.tile;if(!n)return null;const o=x();return e.createElement("div",{className:"form-groups-tile-component"},!t.utils.isArray(n.formGroups)||n.formGroups.length<0?null:n.formGroups.map(((n,i)=>{const s=e.useRef(null),[a,c]=e.useState("form-group-container");e.useEffect((()=>{g()}),[a]);const[u,d]=e.useState(0),[m,p]=e.useState(!0);e.useEffect((()=>{if(m){const e=s.current;t.utils.isNullOrUndefined(e)?d(0):setTimeout((()=>{d(e.scrollHeight)}),10)}else d(0)}),[m]);const g=e=>{if(m){const e=s.current;t.utils.isNullOrUndefined(e)?d(0):setTimeout((()=>{d(Math.max(e.clientHeight,e.scrollHeight))}),10)}else d(0)};let h="form-group-container";!1===m&&(h+=" collapsed"),t.utils.isFunction(o.isFormGroupVisible)&&(o.isFormGroupVisible(n.id)||(h+=" hidden")),h!==a&&c(h);const f=n.controls,v={maxHeight:u};return e.createElement("div",{className:a,key:`form-group-${i}`},e.createElement("div",{className:"form-group-title",onClick:e=>{p(!m)}},e.createElement("span",null,n.title),e.createElement("svg",{viewBox:"0 0 11 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M5.89844 1.1626L10.4688 5.70947C10.6797 5.94385 10.6797 6.29541 10.4688 6.50635L9.92969 7.04541C9.71875 7.25635 9.36719 7.25635 9.13281 7.04541L5.5 3.43603L1.89063 7.04541C1.65625 7.25635 1.30469 7.25635 1.09375 7.04541L0.554688 6.50635C0.34375 6.29541 0.34375 5.94385 0.554688 5.70947L5.125 1.1626C5.33594 0.95166 5.6875 0.95166 5.89844 1.1626Z",fill:"#333333"})),e.createElement("hr",null)),e.createElement("div",{className:"form-group-components",ref:s,style:v},e.createElement(V,{graphingTile:l,graphingTileIndex:r,graphingTileControls:f,ControlProps:{onUIChange:g}})))})))};b("form-groups-tile",Z);const K=({graphingTile:t,graphingTileIndex:l})=>{const r=null==t?void 0:t.tile;if(!r)return null;const[n,o]=e.useState(null),[i,s]=e.useState(0),[a,c]=e.useState(0),[u,d]=e.useState(null),[m,p]=e.useState(null),[g,h]=e.useState(null),[f,v]=e.useState([]);e.useEffect((()=>{let e=[];const t=Math.ceil(r.controls.length/r.controlsPerPage);if(t>0)for(let l=0;l<t;l++){const t={pageIndex:l,controls:[]};for(let e=0;e<r.controlsPerPage;e++){const n=l*r.controlsPerPage+e;if(n>=r.controls.length)break;t.controls.push(r.controls[n])}e.push(t)}s(t),c(0),d(null),p(null),h(null),v(e)}),r.controls);const E=e=>{let t=e-1;t<0&&(t=i-1),p(t)},x=e=>{e.stopPropagation(),E(a),h(null),d(null)},y=e=>{e.stopPropagation()},b=e=>{e.stopPropagation()},T=e=>{if(e.stopPropagation(),null!==n)return;const t=a;let l=a-1;l<0&&(l=i-1),d(t),c(l),p(null),h(t);const r=setTimeout((()=>{E(l),h(null),d(null),setTimeout((function(){o(null)}),300)}),300);o(r)},C=e=>{let t=e+1;t>=i&&(t=0),h(t)},w=e=>{e.stopPropagation(),p(null),C(a),d(null)},N=e=>{e.stopPropagation()},M=e=>{e.stopPropagation()},P=e=>{if(e.stopPropagation(),null!==n)return;const t=a;let l=a+1;l>=i&&(l=0),d(t),c(l),p(t),h(null);const r=setTimeout((()=>{p(null),C(l),d(null),setTimeout((function(){o(null)}),300)}),300);o(r)},S={background:t.getBackground()};return e.createElement("div",{className:"horizontal-tile-component",style:S},e.createElement("div",{className:"horizontal-tile-pages-container"},f.map(((r,n)=>{let o="horizontal-tile-page-container";return n===a?o+=" active":n===m?o+=" navigating-from-left":n===g&&(o+=" navigating-from-right"),n===u&&(o+=" previous"),e.createElement("div",{className:o},e.createElement(V,{graphingTile:t,graphingTileIndex:l,graphingTileControls:r.controls}))})),e.createElement("div",{className:"horizontal-tile-page-container background",style:S}),i<=1?null:e.createElement(e.Fragment,null,e.createElement("button",{type:"button",className:"navigate-button navigate-left-button",onMouseEnter:x,onMouseLeave:y,onMouseDown:b,onClick:T},e.createElement("svg",{width:"8",height:"13",viewBox:"0 0 8 13",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M7.40991 10.643L2.82991 6.05298L7.40991 1.46298L5.99991 0.0529785L-8.80003e-05 6.05298L5.99991 12.053L7.40991 10.643Z",fill:"#828282"}))),e.createElement("button",{type:"button",className:"navigate-button navigate-right-button",onMouseEnter:w,onMouseLeave:N,onMouseDown:M,onClick:P},e.createElement("svg",{width:"8",height:"13",viewBox:"0 0 8 13",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M0.589843 1.46298L5.16984 6.05298L0.589844 10.643L1.99984 12.053L7.99984 6.05298L1.99984 0.0529785L0.589843 1.46298Z",fill:"#828282"}))))),i<=1?null:e.createElement("div",{className:"horizontal-tile-paginators-container"},Array.from(Array(i).keys()).map((t=>{let l="paginator-anchor";return t===a&&(l+=" active"),e.createElement("a",{className:l,onMouseEnter:e=>{e.stopPropagation(),t!==a&&(t<a?(p(t),h(null)):(p(null),h(t)),d(null))},onMouseLeave:e=>{e.stopPropagation()},onMouseDown:e=>{e.stopPropagation()},onClick:e=>{if(e.stopPropagation(),t===a)return;const l=a,r=t;d(l),c(r),l<r?p(l):h(l)}})}))))};b("horizontal-tile",K);const J=({graphingTile:t})=>{const l=null==t?void 0:t.tile;if(!l)return null;const[r,n]=e.useState(""),[o,i]=e.useState(null),[s,a]=e.useState([]),c=x();e.useEffect((()=>{const e=Object.keys(l.states);if(a(e.map((e=>{var t;return{label:null===(t=l.states[e])||void 0===t?void 0:t.title,value:e}}))),e&&e.length>0){const t=e[0];u(t)}else n(""),i(null)}),[l.states]);const u=e=>{n(e),i(l.states[e])};return e.createElement("div",{className:"selectable-states-tile-component"},e.createElement("div",{className:"selectable-states-tile-header"},e.createElement("div",{className:"selected-state-tile-title"},e.createElement("h6",null,null==o?void 0:o.title)),e.createElement("div",{className:"selectable-states-dropdown-container"},e.createElement(h,{options:s,label:"Select",value:r,handleChange:e=>{var t;u(null===(t=null==e?void 0:e.target)||void 0===t?void 0:t.value),(null==c?void 0:c.handleSelectableStatesTileChange)&&(null==c||c.handleSelectableStatesTileChange(e))}}))),e.createElement("div",{className:"selected-state-tile-container"},o?e.createElement(M,{tilePrefix:r,graphingTiles:o.tiles,responsive:o.responsive,columns:o.columns,containerPadding:o.containerPadding,referenceMargin:o.referenceMargin,referenceWidth:o.referenceWidth}):null))};b("selectable-states-tile",J);const Q=({graphingTile:t,graphingTileIndex:l})=>{const r=null==t?void 0:t.tile;if(!r)return null;const n=[r.control],o={background:t.getBackground()};return e.createElement("div",{className:"single-tile-component",style:o},e.createElement(V,{graphingTile:t,graphingTileIndex:l,graphingTileControls:n}))};b("single-tile",Q);const X=({graphingTile:t,graphingTileIndex:l})=>{const r=null==t?void 0:t.tile;if(!r)return null;const n=r.controls;return e.createElement("div",{className:"vertical-tile-component"},e.createElement(V,{graphingTile:t,graphingTileIndex:l,graphingTileControls:n}))};b("vertical-tile",X);const Y=()=>{const e=ee.pop();e&&(e.classList.add("moorr-modal-container-closing"),setTimeout((()=>{e&&(c.unmountComponentAtNode(e),e.remove())}),300))};const ee=[],te={},le=r.makeStyles((e=>({modal:{display:"flex",alignItems:"center",justifyContent:"center"},paper:{width:825,backgroundColor:e.palette.background.paper,borderRadius:"5px",boxShadow:e.shadows[5],padding:e.spacing(2,4,3)}}))),re=l=>{const r=le(),n={};l.fixedWidth&&(n.width=l.fixedWidth),l.fixedHeight&&(n.height=l.fixedHeight);let i=r.paper+" moorr-modal-content-container";l.contentClassName&&(i+=" "+l.contentClassName);const[s,a]=e.useState(!1),[c,d]=e.useState(!1);e.useEffect((()=>{d(!s&&!1!==l.showModal)}),[s,c,l.showModal]);const m=e=>{a(!0),(null==l?void 0:l.onDismiss)&&l.onDismiss(e)};let p=r.modal;switch(p+=" moorr-modal-container",l.effect){case"fade":p+=" moorr-fade-modal";break;case"slide":p+=" moorr-slide-modal"}return s&&(p+=" moorr-modal-closing"),e.createElement(o.Modal,{disableEnforceFocus:!0,className:p,open:c,onClose:m,closeAfterTransition:!0,BackdropComponent:o.Backdrop,BackdropProps:{timeout:300,onClick:e=>{e.preventDefault(),e.stopPropagation(),t.utils.isFunction(l.onBackdropClick)?l.onBackdropClick(e):m("backdrop")}}},(()=>{switch(l.effect){case"fade":default:return e.createElement(o.Fade,{in:c},e.createElement("div",{className:i,style:n},l.children));case"slide":return e.createElement(u.Slide,{in:c,direction:"left",timeout:300},e.createElement("div",{className:i},l.children))}})())},ne=e=>{var t,l,r,n,o;const i=null===(t=null==e?void 0:e.detail)||void 0===t?void 0:t.modal;if(!i||!te[i])return Promise.reject("invalid-modal");const s=new te[i]((null===(l=null==e?void 0:e.detail)||void 0===l?void 0:l.props)||{}).open();(null===(r=null==e?void 0:e.detail)||void 0===r?void 0:r.then)&&s.then((t=>{var l,r;if(!(null==t?void 0:t.dismissed)&&(null===(l=null==e?void 0:e.detail)||void 0===l?void 0:l.finally))try{null===(r=null==e?void 0:e.detail)||void 0===r||r.then(null==t?void 0:t.result)}catch(e){console.error(e)}})),(null===(n=null==e?void 0:e.detail)||void 0===n?void 0:n.catch)&&s.catch(null===(o=null==e?void 0:e.detail)||void 0===o?void 0:o.catch),s.finally((()=>{var t,l;if(null===(t=null==e?void 0:e.detail)||void 0===t?void 0:t.finally)try{null===(l=null==e?void 0:e.detail)||void 0===l||l.finally()}catch(e){console.error(e)}})),(null==e?void 0:e.detail)&&((null==e?void 0:e.detail).promise=s)};document&&(document.removeEventListener("openModal",ne),document.addEventListener("openModal",ne)),exports.Button=({type:l,label:r})=>(e.useEffect((()=>(console.log(`Message from moorr-react-mui: ${t.utils.hello()}`),()=>{console.log(`Message from moorr-react-mui: ${t.utils.bye()}`)})),[]),l||(l="button"),e.createElement("button",{type:l,className:"moorr-button"},e.createElement("span",null,r))),exports.Dropdown=h,exports.FadeModal=t=>e.createElement(re,{effect:"fade",contentClassName:`${t.className}-content-container`,fixedWidth:t.widthValue,fixedHeight:t.heightValue,showModal:t.showModal,onClose:t.onClose,onDismiss:t.onDismiss,onBackdropClick:t.onBackdropClick},e.createElement("div",{className:`${t.className} moorr-modal-container`},e.createElement("div",{className:"moorr-modal-header"},t.renderHeader),e.createElement("div",{className:"moorr-modal-body"},t.renderBody),!1===t.hasFooter?null:e.createElement("div",{className:"moorr-modal-footer"},e.createElement("div",{className:"left-buttons"},t.renderLeftButtons),e.createElement("div",{className:"status-message"},t.renderStatusMessage),e.createElement("div",{className:"right-buttons"},t.renderRightButtons)))),exports.FormGroupModel=$,exports.FormGroupsTile=Z,exports.FormGroupsTileModel=O,exports.FormInputModel=class extends A{constructor(e){super(e),this.inputLabel=e.inputLabel||"",this.readOnly=!0===e.readOnly,this.readOnlyBorderless=!0===e.readOnlyBorderless,this.hasAsAtDate=!1===e.hasAsAtDate||!0===e.hasAsAtDate?e.hasAsAtDate:null,this.staticAsAtDate=!0===e.staticAsAtDate,this.validationSchemaPath=(t.utils.isArray(e.validationSchemaPath)?e.validationSchemaPath:[]).filter((e=>t.utils.isString(e))),this.validationErrorMessages=e.validationErrorMessages||{}}},exports.GraphingContext=E,exports.GraphingControl=j,exports.GraphingControlModel=A,exports.GraphingControlSettingsModel=B,exports.GraphingGrid=({})=>{const{settings:l}=x(),[r,n]=e.useState(null),[o,i]=e.useState(!1);e.useEffect((()=>{setTimeout((()=>{window.dispatchEvent(new Event("resize")),setTimeout((()=>{i(!0)}),300)}),300)}),[]),e.useEffect((()=>{n(l?new F(l):null)}),[l]);const s=()=>(null==l?void 0:l.infoIconUrl)&&l.infoIconHref?e.createElement("a",{className:"information-anchor",href:l.infoIconHref,target:"_blank"},e.createElement("img",{alt:null==l?void 0:l.title,src:null==l?void 0:l.infoIconUrl})):null;if(!r)return null;let a="graphing-grid-container";return o&&(a+=" in"),e.createElement(e.Fragment,null,e.createElement("div",{className:a},t.utils.isNullOrUndefined(null==l?void 0:l.title)?null:e.createElement(e.Fragment,null,e.createElement("h2",{className:"graphing-grid-title"},null==l?void 0:l.title,s()),e.createElement("hr",{className:"graphing-grid-hr"})),e.createElement(M,{graphingTiles:r.tiles,responsive:r.responsive,columns:r.columns,containerPadding:r.containerPadding,referenceMargin:r.referenceMargin,referenceWidth:r.referenceWidth})))},exports.GraphingSettingsModel=F,exports.GraphingTile=T,exports.GraphingTileControls=V,exports.GraphingTileModel=D,exports.GraphingTileSettingsModel=G,exports.GraphingTiles=M,exports.HorizontalTile=K,exports.HorizontalTileModel=_,exports.Modal=class{constructor(e){this._props=e}open(){const t=this._props;return new Promise(((l,r)=>{let n,o;"function"==typeof t.onClose&&(n=t.onClose),t.onClose=e=>{n&&n(e),l({dismissed:!1,result:e}),t.showModal=!1,Y()},"function"==typeof t.onDismiss&&(o=t.onClose),t.onDismiss=()=>{o&&o(),l({dismissed:!0}),t.showModal=!1,Y()},t.showModal=!0;let i=e.createElement(v,{stylePrefix:"MoorrReactMuiModal"},e.createElement(this.getComponent(),t));ee.push(this._container=document.createElement("div")),this._container.className="moorr-modal-container",document.body.appendChild(this._container),c.render(i,this._container)}))}},exports.MoorrModal=re,exports.MultipleControlsTileModel=H,exports.SelectableStatesTile=J,exports.SelectableStatesTileModel=z,exports.SingleControlTileModel=q,exports.SingleTile=Q,exports.SingleTileModel=R,exports.VerticalTile=X,exports.VerticalTileModel=W,exports.createGraphingControl=L,exports.createGraphingControls=function(e){const t=[];return e.forEach((e=>{const l=L(e);l&&t.push(l)})),t},exports.createGraphingTile=k,exports.createGraphingTiles=function(e){const t=[];return e.forEach((e=>{const l=k(e);l&&t.push(l)})),t},exports.modals=te,exports.modalsStack=ee,exports.registerGraphingControl=function(e,t){I[e]=t},exports.registerGraphingControlComponent=function(e,t){e&&t&&(U[e]=t)},exports.registerGraphingTile=S,exports.registerGraphingTileComponent=b,exports.toastMessage=(t,l)=>{(t=>{d.toast(t,{icon:e.createElement(m,{sx:{color:"#EB5757"}}),style:{color:"#EB5757",backgroundColor:"#FCECEC",border:"2px solid #EB5757",fontFamily:'"Poppins", sans-serif',borderRadius:"0.7em",marginLeft:"-100px"}})})(l)},exports.useGraphingContext=x;
+"use strict";var e=require("react"),t=require("moorr-common"),l=require("@material-ui/core/MenuItem"),n=require("@material-ui/core/styles"),r=require("@material-ui/core/TextField"),o=require("@material-ui/core"),i=require("@material-ui/styles"),s=require("uuid"),a=require("react-grid-layout"),c=require("react-dom"),u=require("@mui/material"),d=require("react-toastify"),m=require("@mui/icons-material/Cancel");const p=e=>({root:{"&:hover:not($disabled):not($focused):not($error) $notchedOutline":{},"&$checked":{color:"var(--primary-color)"},"& .vldt-MuiSelect-select.vldt-MuiSelect-select":{color:"var(--grey-color-2)"}},disabled:{},focused:{},error:{},notchedOutline:{},checked:{},notchedOutlineMBRequired:{flex:3,borderColor:"blue",borderWidth:2},fieldSetMBRequired:{"& fieldset":{flex:3,borderColor:"blue",borderWidth:2}},fieldSetErrorField:{"& fieldset":{borderColor:"var(--error-color)"}},blue:{color:"blue"}});n.makeStyles(p);const g=n.makeStyles((()=>n.createStyles({root:{overflow:"hidden",display:"flex",alignItems:"center","&.start":{flexDirection:"row"},"&.top":{flexDirection:"column"},"& .Mui-disabled":{backgroundColor:"var(--grey-color-3)",cursor:"not-allowed",borderRadius:"4px"}},label:{flex:2},field:{flex:3},required:{color:"red"},menuItem:{color:"var(--grey-color-2)","&:hover":{backgroundColor:"var(--primary-color-scale-25)",color:"var(--grey-color-2)"}},menuItemSelected:{color:"var(--grey-color-2)"},mandatory:{border:"red 2px solid",borderRadius:"4px"}})));var h=n.withStyles(p)((({handleChange:t,value:n,disabled:o=!1,name:i,className:s,classes:a,size:c,menuItemLabel:u,options:d,labelPlacement:m="start",label:p,required:h=!1,isMBRequiredField:f,fullWidth:v,selectIconComponent:E})=>{const{root:x,focused:y,error:T,notchedOutline:b,notchedOutlineMBRequired:C}=a,w=g();let N;return E&&(N={IconComponent:E}),e.createElement(r,{fullWidth:!1!==v,id:"outlined-basic",variant:"outlined",value:n,onChange:t,disabled:o,name:i,className:[s].join(" "),InputProps:{classes:{root:x,focused:y,error:T,notchedOutline:!f||n&&0!==(null==n?void 0:n.length)?!h||n&&0!==(null==n?void 0:n.length)?b:w.mandatory:C}},color:"primary",size:c||"small",select:!0,SelectProps:N,defaultValue:""},e.createElement(l,{value:"",disabled:!0},e.createElement("em",null,u)),d&&d.map(((t,n)=>"-separator-"===t?e.createElement(l,{key:`separator-${n}`,value:"",disabled:!0},e.createElement("em",null,"-----------")):e.createElement(l,{key:`menu-item-${n}-${t.value||t}`,value:t.value||t},t.label||t))))}));const f={};var v=({stylePrefix:t,children:l})=>{let r;if(t)r=f[t]?f[t]:f[t]=i.createGenerateClassName({seed:t});else{const e=`MoorrStylesProvider-${s.v4()}-`;r=i.createGenerateClassName({seed:e})}return e.createElement(i.StylesProvider,{generateClassName:r,injectFirst:!0},e.createElement(o.StylesProvider,{generateClassName:r,injectFirst:!0},e.createElement(n.StylesProvider,{generateClassName:r},l)))};const E=e.createContext({});function x(){return e.useContext(E)}const y={};function T(e,t){e&&t&&(y[e]=t)}const b=({graphingTile:t,graphingTileIndex:l})=>{var n;if(!(null===(n=null==t?void 0:t.tile)||void 0===n?void 0:n.tileType))return null;const r=y[t.tile.tileType]||null;return r?e.createElement(r,{graphingTile:t,graphingTileIndex:l}):null},C=[20,20],w={lg:600,sm:0},N={lg:8,sm:2},M=({tilePrefix:t,responsive:l,columns:n,containerPadding:r,referenceMargin:o,referenceWidth:i,graphingTiles:s})=>{const[c,u]=e.useState(null),[d,m]=e.useState(null),[p,g]=e.useState(null),[h,f]=e.useState(null),v=e.useRef(null),E=()=>{const e=(null==v?void 0:v.current)?(null==v?void 0:v.current).getBoundingClientRect().width:null;f(e);const t=M(e);u(t)};let x;const y=e=>{E(),clearTimeout(x),x=setTimeout((()=>{E()}),300)};e.useEffect((()=>{E()}),[v]),e.useEffect((()=>(window.addEventListener("resize",y),()=>{window.removeEventListener("resize",y)})),[]),e.useEffect((()=>{if(l){if(!Array.isArray(s)||0===s.length)return void g({lg:[]});g({lg:s.map(((e,l)=>({x:e.x,y:e.y,w:isNaN(e.w)?1:e.w,h:isNaN(e.h)?1:e.h,i:`${t?t+"_":""}tile_${l}`})))})}else{if(!Array.isArray(s)||0===s.length)return void m([]);m(s.map(((e,l)=>({x:e.x,y:e.y,w:isNaN(e.w)?1:e.w,h:isNaN(e.h)?1:e.h,i:`${t?t+"_":""}tile_${l}`,static:!0}))))}}),[s]);const T=()=>null==s?void 0:s.map(((l,n)=>{if(!l.tile||!l.visible)return null;let r="graphing-tile-container";!1!==l.border&&(r+=" bordered"),l.autoHeight&&(r+=" auto-height");const o=`${t?t+"_":""}tile_${n}`;return e.createElement("div",{className:r,key:o},e.createElement(b,{graphingTile:l,graphingTileIndex:n}))})),M=e=>{if(!o||isNaN(o)||o<=0||!i||isNaN(i)||i<=0||null==e)return C;const t=e/i*o;return[t,t]};return e.createElement("div",{ref:v,className:"graphing-tiles-container"},(()=>{if(!h||!c)return null;if(!1!==l){if(!p)return null;const t=[r||0,0];return e.createElement(a.Responsive,{width:h,breakpoints:w,cols:n||N,rowHeight:1,layouts:p,containerPadding:t,margin:c,isDraggable:!1},T())}return d?e.createElement(a,{width:h,cols:9,rowHeight:50,margin:c,isDraggable:!1,layout:d},T()):null})())},S={};function P(e,t){S[e]=t}function k(e){const t=S[null==e?void 0:e.tileType];return t?new t(e):null}class I{constructor(e){this.x=e.x,this.y=e.y,this.w=e.w,this.h=e.h,this.border=!0===e.border,this.background=e.background||null,this.autoHeight=!0===e.autoHeight,this.tile=k(e.tile),this.visible=!1!==e.visible}getBackground(){return this.background||"#FFFFFF"}}class F{constructor(e){this.title=e.title||"",this.infoIconUrl=e.infoUrl,this.infoIconHref=e.infoHref,this.responsive=!1!==e.responsive,this.columns=e.columns||{lg:8,sm:2},this.containerPadding=e.containerPadding||0,this.referenceMargin=e.referenceMargin||null,this.referenceWidth=e.referenceWidth||null,this.tiles=[],Array.isArray(e.tiles)&&e.tiles.forEach((e=>{this.tiles.push(new I(e))}))}}const G={};function A(e){const t=G[null==e?void 0:e.controlType];return t?new t(e):null}class L{constructor(e){this.controlType=e.controlType,this.dataKey=e.dataKey}}class B{constructor(e){this.border=e.border,this.background=e.background||null,this.control=A(e.control)}getBackground(e){return this.background||(null==e?void 0:e.background)||"#FFFFFF"}}class ${constructor(e){this.id=e.id||"",this.title=e.title||"",this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new B(e))}))}}class D{constructor(e){this.tileType=e.tileType}}class q extends D{constructor(e){super(e),this.control=new B(e.control)}}class H extends D{constructor(e){super(e),this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new B(e))}))}}class O extends D{constructor(e){super(e),t.utils.isArray(e.formGroups)&&e.formGroups.length>0?this.formGroups=e.formGroups.map((e=>new $(e))):this.formGroups=[]}}P("form-groups-tile",O);class _ extends H{constructor(e){super(e),this.controlsPerPage=e.controlsPerPage,(isNaN(this.controlsPerPage)||this.controlsPerPage<=1)&&(this.controlsPerPage=1)}}P("horizontal-tile",_);class z extends H{constructor(e){super(e),this.states={};for(const t in e.states){const l=e.states[t];l&&(this.states[t]=new F(l))}}}P("selectable-states-tile",z);class R extends D{constructor(e){super(e),this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new B(e))}))}}P("simple-form-tile",R);class W extends q{constructor(e){super(e)}}P("single-tile",W);class U extends H{constructor(e){super(e)}}P("vertical-tile",U);const j={};const V=({graphingTile:t,graphingTileIndex:l,graphingTileControl:n,ControlProps:r})=>{var o;if(!(null===(o=null==n?void 0:n.control)||void 0===o?void 0:o.controlType))return null;const i=j[n.control.controlType]||null;return i?e.createElement(i,Object.assign({graphingTile:t,graphingTileIndex:l,graphingTileControl:n},r)):null},Z=({graphingTile:t,graphingTileIndex:l,graphingTileControls:n,ControlProps:r})=>{var o,i;let s="graphing-tile-controls-container";return(null===(o=null==t?void 0:t.tile)||void 0===o?void 0:o.tileType)&&(s+=" "+(null===(i=null==t?void 0:t.tile)||void 0===i?void 0:i.tileType)),e.createElement("div",{className:s},null==n?void 0:n.map(((n,o)=>{var i,s;if(!n.control)return null;let a="graphing-tile-control-container";(null===(i=n.control)||void 0===i?void 0:i.controlType)&&(a+=" "+(null===(s=n.control)||void 0===s?void 0:s.controlType)),!1!==n.border&&(a+=" bordered");const c=`control_${l}_${o}`;return e.createElement("div",{className:a,key:c},e.createElement(V,{graphingTile:t,graphingTileIndex:l,graphingTileControl:n,ControlProps:r}))})))},K=({graphingTile:l,graphingTileIndex:n})=>{const r=null==l?void 0:l.tile;if(!r)return null;const o=x();return e.createElement("div",{className:"form-groups-tile-component"},!t.utils.isArray(r.formGroups)||r.formGroups.length<0?null:r.formGroups.map(((r,i)=>{const s=e.useRef(null),[a,c]=e.useState("form-group-container");e.useEffect((()=>{g()}),[a]);const[u,d]=e.useState(0),[m,p]=e.useState(!0);e.useEffect((()=>{if(m){const e=s.current;t.utils.isNullOrUndefined(e)?d(0):setTimeout((()=>{d(e.scrollHeight)}),10)}else d(0)}),[m]);const g=e=>{if(m){const e=s.current;t.utils.isNullOrUndefined(e)?d(0):setTimeout((()=>{d(Math.max(e.clientHeight,e.scrollHeight))}),10)}else d(0)};let h="form-group-container";!1===m&&(h+=" collapsed"),t.utils.isFunction(o.isFormGroupVisible)&&(o.isFormGroupVisible(r.id)||(h+=" hidden")),h!==a&&c(h);const f=r.controls,v={maxHeight:u};return e.createElement("div",{className:a,key:`form-group-${i}`},e.createElement("div",{className:"form-group-title",onClick:e=>{p(!m)}},e.createElement("span",null,r.title),e.createElement("svg",{viewBox:"0 0 11 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M5.89844 1.1626L10.4688 5.70947C10.6797 5.94385 10.6797 6.29541 10.4688 6.50635L9.92969 7.04541C9.71875 7.25635 9.36719 7.25635 9.13281 7.04541L5.5 3.43603L1.89063 7.04541C1.65625 7.25635 1.30469 7.25635 1.09375 7.04541L0.554688 6.50635C0.34375 6.29541 0.34375 5.94385 0.554688 5.70947L5.125 1.1626C5.33594 0.95166 5.6875 0.95166 5.89844 1.1626Z",fill:"#333333"})),e.createElement("hr",null)),e.createElement("div",{className:"form-group-components",ref:s,style:v},e.createElement(Z,{graphingTile:l,graphingTileIndex:n,graphingTileControls:f,ControlProps:{onUIChange:g}})))})))};T("form-groups-tile",K);const J=({graphingTile:t,graphingTileIndex:l})=>{const n=null==t?void 0:t.tile;if(!n)return null;const[r,o]=e.useState(null),[i,s]=e.useState(0),[a,c]=e.useState(0),[u,d]=e.useState(null),[m,p]=e.useState(null),[g,h]=e.useState(null),[f,v]=e.useState([]);e.useEffect((()=>{let e=[];const t=Math.ceil(n.controls.length/n.controlsPerPage);if(t>0)for(let l=0;l<t;l++){const t={pageIndex:l,controls:[]};for(let e=0;e<n.controlsPerPage;e++){const r=l*n.controlsPerPage+e;if(r>=n.controls.length)break;t.controls.push(n.controls[r])}e.push(t)}s(t),c(0),d(null),p(null),h(null),v(e)}),n.controls);const E=e=>{let t=e-1;t<0&&(t=i-1),p(t)},x=e=>{e.stopPropagation(),E(a),h(null),d(null)},y=e=>{e.stopPropagation()},T=e=>{e.stopPropagation()},b=e=>{if(e.stopPropagation(),null!==r)return;const t=a;let l=a-1;l<0&&(l=i-1),d(t),c(l),p(null),h(t);const n=setTimeout((()=>{E(l),h(null),d(null),setTimeout((function(){o(null)}),300)}),300);o(n)},C=e=>{let t=e+1;t>=i&&(t=0),h(t)},w=e=>{e.stopPropagation(),p(null),C(a),d(null)},N=e=>{e.stopPropagation()},M=e=>{e.stopPropagation()},S=e=>{if(e.stopPropagation(),null!==r)return;const t=a;let l=a+1;l>=i&&(l=0),d(t),c(l),p(t),h(null);const n=setTimeout((()=>{p(null),C(l),d(null),setTimeout((function(){o(null)}),300)}),300);o(n)},P={background:t.getBackground()};return e.createElement("div",{className:"horizontal-tile-component",style:P},e.createElement("div",{className:"horizontal-tile-pages-container"},f.map(((n,r)=>{let o="horizontal-tile-page-container";return r===a?o+=" active":r===m?o+=" navigating-from-left":r===g&&(o+=" navigating-from-right"),r===u&&(o+=" previous"),e.createElement("div",{className:o},e.createElement(Z,{graphingTile:t,graphingTileIndex:l,graphingTileControls:n.controls}))})),e.createElement("div",{className:"horizontal-tile-page-container background",style:P}),i<=1?null:e.createElement(e.Fragment,null,e.createElement("button",{type:"button",className:"navigate-button navigate-left-button",onMouseEnter:x,onMouseLeave:y,onMouseDown:T,onClick:b},e.createElement("svg",{width:"8",height:"13",viewBox:"0 0 8 13",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M7.40991 10.643L2.82991 6.05298L7.40991 1.46298L5.99991 0.0529785L-8.80003e-05 6.05298L5.99991 12.053L7.40991 10.643Z",fill:"#828282"}))),e.createElement("button",{type:"button",className:"navigate-button navigate-right-button",onMouseEnter:w,onMouseLeave:N,onMouseDown:M,onClick:S},e.createElement("svg",{width:"8",height:"13",viewBox:"0 0 8 13",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M0.589843 1.46298L5.16984 6.05298L0.589844 10.643L1.99984 12.053L7.99984 6.05298L1.99984 0.0529785L0.589843 1.46298Z",fill:"#828282"}))))),i<=1?null:e.createElement("div",{className:"horizontal-tile-paginators-container"},Array.from(Array(i).keys()).map((t=>{let l="paginator-anchor";return t===a&&(l+=" active"),e.createElement("a",{className:l,onMouseEnter:e=>{e.stopPropagation(),t!==a&&(t<a?(p(t),h(null)):(p(null),h(t)),d(null))},onMouseLeave:e=>{e.stopPropagation()},onMouseDown:e=>{e.stopPropagation()},onClick:e=>{if(e.stopPropagation(),t===a)return;const l=a,n=t;d(l),c(n),l<n?p(l):h(l)}})}))))};T("horizontal-tile",J);const Q=({graphingTile:t})=>{const l=null==t?void 0:t.tile;if(!l)return null;const[n,r]=e.useState(""),[o,i]=e.useState(null),[s,a]=e.useState([]),c=x();e.useEffect((()=>{const e=Object.keys(l.states);if(a(e.map((e=>{var t;return{label:null===(t=l.states[e])||void 0===t?void 0:t.title,value:e}}))),e&&e.length>0){const t=e[0];u(t)}else r(""),i(null)}),[l.states]);const u=e=>{r(e),i(l.states[e])};return e.createElement("div",{className:"selectable-states-tile-component"},e.createElement("div",{className:"selectable-states-tile-header"},e.createElement("div",{className:"selected-state-tile-title"},e.createElement("h6",null,null==o?void 0:o.title)),e.createElement("div",{className:"selectable-states-dropdown-container"},e.createElement(h,{options:s,label:"Select",value:n,handleChange:e=>{var t;u(null===(t=null==e?void 0:e.target)||void 0===t?void 0:t.value),(null==c?void 0:c.handleSelectableStatesTileChange)&&(null==c||c.handleSelectableStatesTileChange(e))}}))),e.createElement("div",{className:"selected-state-tile-container"},o?e.createElement(M,{tilePrefix:n,graphingTiles:o.tiles,responsive:o.responsive,columns:o.columns,containerPadding:o.containerPadding,referenceMargin:o.referenceMargin,referenceWidth:o.referenceWidth}):null))};T("selectable-states-tile",Q);const X=({graphingTile:l,graphingTileIndex:n})=>{const r=null==l?void 0:l.tile;if(!r)return null;const o=x(),i=e=>{t.utils.isFunction(o.handleUIChange)&&o.handleUIChange(e)};return e.createElement("div",{className:"simple-tile-component"},(()=>{if(!t.utils.isArray(r.controls)||r.controls.length<0)return null;const o=r.controls;e.createElement(Z,{graphingTile:l,graphingTileIndex:n,graphingTileControls:o,ControlProps:{onUIChange:i}})})())};T("simple-form-tile",X);const Y=({graphingTile:t,graphingTileIndex:l})=>{const n=null==t?void 0:t.tile;if(!n)return null;const r=[n.control],o={background:t.getBackground()};return e.createElement("div",{className:"single-tile-component",style:o},e.createElement(Z,{graphingTile:t,graphingTileIndex:l,graphingTileControls:r}))};T("single-tile",Y);const ee=({graphingTile:t,graphingTileIndex:l})=>{const n=null==t?void 0:t.tile;if(!n)return null;const r=n.controls;return e.createElement("div",{className:"vertical-tile-component"},e.createElement(Z,{graphingTile:t,graphingTileIndex:l,graphingTileControls:r}))};T("vertical-tile",ee);const te=()=>{const e=le.pop();e&&(e.classList.add("moorr-modal-container-closing"),setTimeout((()=>{e&&(c.unmountComponentAtNode(e),e.remove())}),300))};const le=[],ne={},re=n.makeStyles((e=>({modal:{display:"flex",alignItems:"center",justifyContent:"center"},paper:{width:825,backgroundColor:e.palette.background.paper,borderRadius:"5px",boxShadow:e.shadows[5],padding:e.spacing(2,4,3)}}))),oe=l=>{const n=re(),r={};l.fixedWidth&&(r.width=l.fixedWidth),l.fixedHeight&&(r.height=l.fixedHeight);let i=n.paper+" moorr-modal-content-container";l.contentClassName&&(i+=" "+l.contentClassName);const[s,a]=e.useState(!1),[c,d]=e.useState(!1);e.useEffect((()=>{d(!s&&!1!==l.showModal)}),[s,c,l.showModal]);const m=e=>{a(!0),(null==l?void 0:l.onDismiss)&&l.onDismiss(e)};let p=n.modal;switch(p+=" moorr-modal-container",l.effect){case"fade":p+=" moorr-fade-modal";break;case"slide":p+=" moorr-slide-modal"}return s&&(p+=" moorr-modal-closing"),e.createElement(o.Modal,{disableEnforceFocus:!0,className:p,open:c,onClose:m,closeAfterTransition:!0,BackdropComponent:o.Backdrop,BackdropProps:{timeout:300,onClick:e=>{e.preventDefault(),e.stopPropagation(),t.utils.isFunction(l.onBackdropClick)?l.onBackdropClick(e):m("backdrop")}}},(()=>{switch(l.effect){case"fade":default:return e.createElement(o.Fade,{in:c},e.createElement("div",{className:i,style:r},l.children));case"slide":return e.createElement(u.Slide,{in:c,direction:"left",timeout:300},e.createElement("div",{className:i},l.children))}})())},ie=e=>{var t,l,n,r,o;const i=null===(t=null==e?void 0:e.detail)||void 0===t?void 0:t.modal;if(!i||!ne[i])return Promise.reject("invalid-modal");const s=new ne[i]((null===(l=null==e?void 0:e.detail)||void 0===l?void 0:l.props)||{}).open();(null===(n=null==e?void 0:e.detail)||void 0===n?void 0:n.then)&&s.then((t=>{var l,n;if(!(null==t?void 0:t.dismissed)&&(null===(l=null==e?void 0:e.detail)||void 0===l?void 0:l.finally))try{null===(n=null==e?void 0:e.detail)||void 0===n||n.then(null==t?void 0:t.result)}catch(e){console.error(e)}})),(null===(r=null==e?void 0:e.detail)||void 0===r?void 0:r.catch)&&s.catch(null===(o=null==e?void 0:e.detail)||void 0===o?void 0:o.catch),s.finally((()=>{var t,l;if(null===(t=null==e?void 0:e.detail)||void 0===t?void 0:t.finally)try{null===(l=null==e?void 0:e.detail)||void 0===l||l.finally()}catch(e){console.error(e)}})),(null==e?void 0:e.detail)&&((null==e?void 0:e.detail).promise=s)};document&&(document.removeEventListener("openModal",ie),document.addEventListener("openModal",ie)),exports.Button=({type:l,label:n})=>(e.useEffect((()=>(console.log(`Message from moorr-react-mui: ${t.utils.hello()}`),()=>{console.log(`Message from moorr-react-mui: ${t.utils.bye()}`)})),[]),l||(l="button"),e.createElement("button",{type:l,className:"moorr-button"},e.createElement("span",null,n))),exports.Dropdown=h,exports.FadeModal=t=>e.createElement(oe,{effect:"fade",contentClassName:`${t.className}-content-container`,fixedWidth:t.widthValue,fixedHeight:t.heightValue,showModal:t.showModal,onClose:t.onClose,onDismiss:t.onDismiss,onBackdropClick:t.onBackdropClick},e.createElement("div",{className:`${t.className} moorr-modal-container`},e.createElement("div",{className:"moorr-modal-header"},t.renderHeader),e.createElement("div",{className:"moorr-modal-body"},t.renderBody),!1===t.hasFooter?null:e.createElement("div",{className:"moorr-modal-footer"},e.createElement("div",{className:"left-buttons"},t.renderLeftButtons),e.createElement("div",{className:"status-message"},t.renderStatusMessage),e.createElement("div",{className:"right-buttons"},t.renderRightButtons)))),exports.FormGroupModel=$,exports.FormGroupsTile=K,exports.FormGroupsTileModel=O,exports.FormInputModel=class extends L{constructor(e){super(e),this.inputLabel=e.inputLabel||"",this.readOnly=!0===e.readOnly,this.readOnlyBorderless=!0===e.readOnlyBorderless,this.hasAsAtDate=!1===e.hasAsAtDate||!0===e.hasAsAtDate?e.hasAsAtDate:null,this.staticAsAtDate=!0===e.staticAsAtDate,this.validationSchemaPath=(t.utils.isArray(e.validationSchemaPath)?e.validationSchemaPath:[]).filter((e=>t.utils.isString(e))),this.validationErrorMessages=e.validationErrorMessages||{}}},exports.GraphingContext=E,exports.GraphingControl=V,exports.GraphingControlModel=L,exports.GraphingControlSettingsModel=B,exports.GraphingGrid=({})=>{const{settings:l}=x(),[n,r]=e.useState(null),[o,i]=e.useState(!1);e.useEffect((()=>{setTimeout((()=>{window.dispatchEvent(new Event("resize")),setTimeout((()=>{i(!0)}),300)}),300)}),[]),e.useEffect((()=>{r(l?new F(l):null)}),[l]);const s=()=>(null==l?void 0:l.infoIconUrl)&&l.infoIconHref?e.createElement("a",{className:"information-anchor",href:l.infoIconHref,target:"_blank"},e.createElement("img",{alt:null==l?void 0:l.title,src:null==l?void 0:l.infoIconUrl})):null;if(!n)return null;let a="graphing-grid-container";return o&&(a+=" in"),e.createElement(e.Fragment,null,e.createElement("div",{className:a},t.utils.isNullOrUndefined(null==l?void 0:l.title)?null:e.createElement(e.Fragment,null,e.createElement("h2",{className:"graphing-grid-title"},null==l?void 0:l.title,s()),e.createElement("hr",{className:"graphing-grid-hr"})),e.createElement(M,{graphingTiles:n.tiles,responsive:n.responsive,columns:n.columns,containerPadding:n.containerPadding,referenceMargin:n.referenceMargin,referenceWidth:n.referenceWidth})))},exports.GraphingSettingsModel=F,exports.GraphingTile=b,exports.GraphingTileControls=Z,exports.GraphingTileModel=D,exports.GraphingTileSettingsModel=I,exports.GraphingTiles=M,exports.HorizontalTile=J,exports.HorizontalTileModel=_,exports.Modal=class{constructor(e){this._props=e}open(){const t=this._props;return new Promise(((l,n)=>{let r,o;"function"==typeof t.onClose&&(r=t.onClose),t.onClose=e=>{r&&r(e),l({dismissed:!1,result:e}),t.showModal=!1,te()},"function"==typeof t.onDismiss&&(o=t.onClose),t.onDismiss=()=>{o&&o(),l({dismissed:!0}),t.showModal=!1,te()},t.showModal=!0;let i=e.createElement(v,{stylePrefix:"MoorrReactMuiModal"},e.createElement(this.getComponent(),t));le.push(this._container=document.createElement("div")),this._container.className="moorr-modal-container",document.body.appendChild(this._container),c.render(i,this._container)}))}},exports.MoorrModal=oe,exports.MultipleControlsTileModel=H,exports.SelectableStatesTile=Q,exports.SelectableStatesTileModel=z,exports.SimpleFormTile=X,exports.SimpleFormTileModel=R,exports.SingleControlTileModel=q,exports.SingleTile=Y,exports.SingleTileModel=W,exports.VerticalTile=ee,exports.VerticalTileModel=U,exports.createGraphingControl=A,exports.createGraphingControls=function(e){const t=[];return e.forEach((e=>{const l=A(e);l&&t.push(l)})),t},exports.createGraphingTile=k,exports.createGraphingTiles=function(e){const t=[];return e.forEach((e=>{const l=k(e);l&&t.push(l)})),t},exports.modals=ne,exports.modalsStack=le,exports.registerGraphingControl=function(e,t){G[e]=t},exports.registerGraphingControlComponent=function(e,t){e&&t&&(j[e]=t)},exports.registerGraphingTile=P,exports.registerGraphingTileComponent=T,exports.toastMessage=(t,l)=>{(t=>{d.toast(t,{icon:e.createElement(m,{sx:{color:"#EB5757"}}),style:{color:"#EB5757",backgroundColor:"#FCECEC",border:"2px solid #EB5757",fontFamily:'"Poppins", sans-serif',borderRadius:"0.7em",marginLeft:"-100px"}})})(l)},exports.useGraphingContext=x;

package/cjs/typings/graphings/components/graphing.context.d.ts

@@ -45,6 +45,7 @@ export type GraphingContextResult = {
     handleInputChange?: (e: InputChangeEventArgs) => Promise<void>;
     handleInputDataRequired?: (e: InputDataRequiredEventArgs) => Promise<void>;
     handleLinkClick?: (e: LinkClickEventArgs) => Promise<void>;
+    handleUIChange: (e?: any) => void;
     navigate?: (path: any) => void;
 };
 /** ---------------------------------------------------------------------------

package/cjs/typings/graphings/components/tiles/index.d.ts

@@ -2,5 +2,6 @@ export * from "./form-groups-tile.component";
 export * from "./graphing-tile.component";
 export * from "./horizontal-tile.component";
 export * from "./selectable-states-tile.component";
+export * from "./simple-form-tile.component";
 export * from "./single-tile.component";
 export * from "./vertical-tile.component";

package/cjs/typings/graphings/components/tiles/simple-form-tile.component.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { GraphingTileProps } from "./graphing-tile.component";
+import "./form-groups-tile.styles.css";
+/** ---------------------------------------------------------------------------
+ * Private
+ * ----------------------------------------------------------------------------
+ */
+interface Props extends GraphingTileProps {
+}
+/** ---------------------------------------------------------------------------
+ * Component
+ * ----------------------------------------------------------------------------
+ */
+export declare const SimpleFormTile: ({ graphingTile, graphingTileIndex }: Props) => JSX.Element | null;
+export {};

package/cjs/typings/graphings/models/tiles/index.d.ts

@@ -4,5 +4,6 @@ export * from "./graphing-tile.factory";
 export * from "./graphing-tile.model";
 export * from "./horizontal-tile.model";
 export * from "./selectable-states-tile.model";
+export * from "./simple-form-tile.model";
 export * from "./single-tile.model";
 export * from "./vertical-tile.model";

package/cjs/typings/graphings/models/tiles/simple-form-tile.model.d.ts

@@ -0,0 +1,10 @@
+import { GraphingTileModel } from "./graphing-tile.model";
+import { GraphingControlSettingsModel } from "../graphing-control-settings.model";
+/** ---------------------------------------------------------------------------
+ * Model
+ * ----------------------------------------------------------------------------
+ */
+export declare class SimpleFormTileModel extends GraphingTileModel {
+    controls: GraphingControlSettingsModel[];
+    constructor(json: any);
+}

package/index.d.ts

@@ -7,7 +7,7 @@ import React__default from 'react';
  * Private
  * ----------------------------------------------------------------------------
  */
-interface Props$8 {
+interface Props$9 {
     type?: "button" | "submit" | "reset" | undefined;
     label: string;
 }
@@ -15,7 +15,7 @@ interface Props$8 {
  * Component
  * ----------------------------------------------------------------------------
  */
-declare const Button: ({ type, label }: Props$8) => JSX.Element;
+declare const Button: ({ type, label }: Props$9) => JSX.Element;
 
 /**
  * * Interface for Reusable Components
@@ -202,6 +202,15 @@ declare class SelectableStatesTileModel extends MultipleControlsTileModel {
     constructor(json: any);
 }
 
+/** ---------------------------------------------------------------------------
+ * Model
+ * ----------------------------------------------------------------------------
+ */
+declare class SimpleFormTileModel extends GraphingTileModel {
+    controls: GraphingControlSettingsModel[];
+    constructor(json: any);
+}
+
 /** ---------------------------------------------------------------------------
  * Model
  * ----------------------------------------------------------------------------
@@ -263,6 +272,7 @@ type GraphingContextResult = {
     handleInputChange?: (e: InputChangeEventArgs) => Promise<void>;
     handleInputDataRequired?: (e: InputDataRequiredEventArgs) => Promise<void>;
     handleLinkClick?: (e: LinkClickEventArgs) => Promise<void>;
+    handleUIChange: (e?: any) => void;
     navigate?: (path: any) => void;
 };
 /** ---------------------------------------------------------------------------
@@ -277,19 +287,19 @@ declare function useGraphingContext(): GraphingContextResult;
  * Private
  * ----------------------------------------------------------------------------
  */
-interface Props$7 {
+interface Props$8 {
 }
 /** ---------------------------------------------------------------------------
  * Component
  * ----------------------------------------------------------------------------
  */
-declare const GraphingGrid: ({}: Props$7) => JSX.Element | null;
+declare const GraphingGrid: ({}: Props$8) => JSX.Element | null;
 
 /** ---------------------------------------------------------------------------
  * Private
  * ----------------------------------------------------------------------------
  */
-interface Props$6 {
+interface Props$7 {
     graphingTile: GraphingTileSettingsModel;
     graphingTileIndex: number;
     graphingTileControls: GraphingControlSettingsModel[];
@@ -299,13 +309,13 @@ interface Props$6 {
  * Component
  * ----------------------------------------------------------------------------
  */
-declare const GraphingTileControls: ({ graphingTile, graphingTileIndex, graphingTileControls, ControlProps }: Props$6) => JSX.Element;
+declare const GraphingTileControls: ({ graphingTile, graphingTileIndex, graphingTileControls, ControlProps }: Props$7) => JSX.Element;
 
 /** ---------------------------------------------------------------------------
  * Private
  * ----------------------------------------------------------------------------
  */
-interface Props$5 {
+interface Props$6 {
     tilePrefix?: string | null;
     graphingTiles: GraphingTileSettingsModel[];
     responsive?: boolean;
@@ -320,7 +330,7 @@ interface Props$5 {
  * Component
  * ----------------------------------------------------------------------------
  */
-declare const GraphingTiles: ({ tilePrefix, responsive, columns, containerPadding, referenceMargin, referenceWidth, graphingTiles }: Props$5) => JSX.Element;
+declare const GraphingTiles: ({ tilePrefix, responsive, columns, containerPadding, referenceMargin, referenceWidth, graphingTiles }: Props$6) => JSX.Element;
 
 /** ---------------------------------------------------------------------------
  * Private
@@ -358,6 +368,18 @@ declare function registerGraphingTileComponent(key: string, component: GraphingT
  */
 declare const GraphingTile: ({ graphingTile, graphingTileIndex, }: GraphingTileProps) => JSX.Element | null;
 
+/** ---------------------------------------------------------------------------
+ * Private
+ * ----------------------------------------------------------------------------
+ */
+interface Props$5 extends GraphingTileProps {
+}
+/** ---------------------------------------------------------------------------
+ * Component
+ * ----------------------------------------------------------------------------
+ */
+declare const FormGroupsTile: ({ graphingTile, graphingTileIndex }: Props$5) => JSX.Element | null;
+
 /** ---------------------------------------------------------------------------
  * Private
  * ----------------------------------------------------------------------------
@@ -368,7 +390,7 @@ interface Props$4 extends GraphingTileProps {
  * Component
  * ----------------------------------------------------------------------------
  */
-declare const FormGroupsTile: ({ graphingTile, graphingTileIndex }: Props$4) => JSX.Element | null;
+declare const HorizontalTile: ({ graphingTile, graphingTileIndex }: Props$4) => JSX.Element | null;
 
 /** ---------------------------------------------------------------------------
  * Private
@@ -380,7 +402,7 @@ interface Props$3 extends GraphingTileProps {
  * Component
  * ----------------------------------------------------------------------------
  */
-declare const HorizontalTile: ({ graphingTile, graphingTileIndex }: Props$3) => JSX.Element | null;
+declare const SelectableStatesTile: ({ graphingTile }: Props$3) => JSX.Element | null;
 
 /** ---------------------------------------------------------------------------
  * Private
@@ -392,7 +414,7 @@ interface Props$2 extends GraphingTileProps {
  * Component
  * ----------------------------------------------------------------------------
  */
-declare const SelectableStatesTile: ({ graphingTile }: Props$2) => JSX.Element | null;
+declare const SimpleFormTile: ({ graphingTile, graphingTileIndex }: Props$2) => JSX.Element | null;
 
 /** ---------------------------------------------------------------------------
  * Private
@@ -484,4 +506,4 @@ interface FadeModalProps {
 }
 declare const FadeModal: React__default.FC<FadeModalProps>;
 
-export { Button, _default as Dropdown, FadeModal, FormGroupModel, FormGroupsTile, FormGroupsTileModel, FormInputModel, GraphingContext, GraphingContextResult, GraphingControl, GraphingControlModel, GraphingControlProps, GraphingControlSettingsModel, GraphingGrid, GraphingSettingsModel, GraphingTile, GraphingTileControls, GraphingTileModel, GraphingTileProps, GraphingTileSettingsModel, GraphingTiles, HorizontalTile, HorizontalTileModel, InputChangeEventArgs, InputDataRequiredEventArgs, InputEventArgs, LinkClickEventArgs, Modal, ModalContructor, ModalProps, Modal$1 as MoorrModal, MultipleControlsTileModel, SelectableStatesTile, SelectableStatesTileModel, SingleControlTileModel, SingleTile, SingleTileModel, VerticalTile, VerticalTileModel, createGraphingControl, createGraphingControls, createGraphingTile, createGraphingTiles, modals, modalsStack, registerGraphingControl, registerGraphingControlComponent, registerGraphingTile, registerGraphingTileComponent, toastMessage, useGraphingContext };
+export { Button, _default as Dropdown, FadeModal, FormGroupModel, FormGroupsTile, FormGroupsTileModel, FormInputModel, GraphingContext, GraphingContextResult, GraphingControl, GraphingControlModel, GraphingControlProps, GraphingControlSettingsModel, GraphingGrid, GraphingSettingsModel, GraphingTile, GraphingTileControls, GraphingTileModel, GraphingTileProps, GraphingTileSettingsModel, GraphingTiles, HorizontalTile, HorizontalTileModel, InputChangeEventArgs, InputDataRequiredEventArgs, InputEventArgs, LinkClickEventArgs, Modal, ModalContructor, ModalProps, Modal$1 as MoorrModal, MultipleControlsTileModel, SelectableStatesTile, SelectableStatesTileModel, SimpleFormTile, SimpleFormTileModel, SingleControlTileModel, SingleTile, SingleTileModel, VerticalTile, VerticalTileModel, createGraphingControl, createGraphingControls, createGraphingTile, createGraphingTiles, modals, modalsStack, registerGraphingControl, registerGraphingControlComponent, registerGraphingTile, registerGraphingTileComponent, toastMessage, useGraphingContext };

package/index.js

@@ -1 +1 @@
-import e,{useEffect as t,createContext as n,useContext as l,useState as o,useRef as r}from"react";import{utils as i}from"moorr-common";import a from"@material-ui/core/MenuItem";import{makeStyles as s,createStyles as c,withStyles as d,StylesProvider as u}from"@material-ui/core/styles";import m from"@material-ui/core/TextField";import{StylesProvider as g,Modal as h,Backdrop as p,Fade as v}from"@material-ui/core";import{createGenerateClassName as f,StylesProvider as E}from"@material-ui/styles";import{v4 as y}from"uuid";import b,{Responsive as T}from"react-grid-layout";import w from"react-dom";import{Slide as N}from"@mui/material";import{toast as x}from"react-toastify";import C from"@mui/icons-material/Cancel";const P=({type:n,label:l})=>(t((()=>(console.log(`Message from moorr-react-mui: ${i.hello()}`),()=>{console.log(`Message from moorr-react-mui: ${i.bye()}`)})),[]),n||(n="button"),e.createElement("button",{type:n,className:"moorr-button"},e.createElement("span",null,l))),M=e=>({root:{"&:hover:not($disabled):not($focused):not($error) $notchedOutline":{},"&$checked":{color:"var(--primary-color)"},"& .vldt-MuiSelect-select.vldt-MuiSelect-select":{color:"var(--grey-color-2)"}},disabled:{},focused:{},error:{},notchedOutline:{},checked:{},notchedOutlineMBRequired:{flex:3,borderColor:"blue",borderWidth:2},fieldSetMBRequired:{"& fieldset":{flex:3,borderColor:"blue",borderWidth:2}},fieldSetErrorField:{"& fieldset":{borderColor:"var(--error-color)"}},blue:{color:"blue"}});s(M);const k=s((()=>c({root:{overflow:"hidden",display:"flex",alignItems:"center","&.start":{flexDirection:"row"},"&.top":{flexDirection:"column"},"& .Mui-disabled":{backgroundColor:"var(--grey-color-3)",cursor:"not-allowed",borderRadius:"4px"}},label:{flex:2},field:{flex:3},required:{color:"red"},menuItem:{color:"var(--grey-color-2)","&:hover":{backgroundColor:"var(--primary-color-scale-25)",color:"var(--grey-color-2)"}},menuItemSelected:{color:"var(--grey-color-2)"},mandatory:{border:"red 2px solid",borderRadius:"4px"}})));var I=d(M)((({handleChange:t,value:n,disabled:l=!1,name:o,className:r,classes:i,size:s,menuItemLabel:c,options:d,labelPlacement:u="start",label:g,required:h=!1,isMBRequiredField:p,fullWidth:v,selectIconComponent:f})=>{const{root:E,focused:y,error:b,notchedOutline:T,notchedOutlineMBRequired:w}=i,N=k();let x;return f&&(x={IconComponent:f}),e.createElement(m,{fullWidth:!1!==v,id:"outlined-basic",variant:"outlined",value:n,onChange:t,disabled:l,name:o,className:[r].join(" "),InputProps:{classes:{root:E,focused:y,error:b,notchedOutline:!p||n&&0!==(null==n?void 0:n.length)?!h||n&&0!==(null==n?void 0:n.length)?T:N.mandatory:w}},color:"primary",size:s||"small",select:!0,SelectProps:x,defaultValue:""},e.createElement(a,{value:"",disabled:!0},e.createElement("em",null,c)),d&&d.map(((t,n)=>"-separator-"===t?e.createElement(a,{key:`separator-${n}`,value:"",disabled:!0},e.createElement("em",null,"-----------")):e.createElement(a,{key:`menu-item-${n}-${t.value||t}`,value:t.value||t},t.label||t))))}));const L={};var A=({stylePrefix:t,children:n})=>{let l;if(t)l=L[t]?L[t]:L[t]=f({seed:t});else{const e=`MoorrStylesProvider-${y()}-`;l=f({seed:e})}return e.createElement(E,{generateClassName:l,injectFirst:!0},e.createElement(g,{generateClassName:l,injectFirst:!0},e.createElement(u,{generateClassName:l},n)))};const F=n({});function B(){return l(F)}const $={};function D(e,t){e&&t&&($[e]=t)}const S=({graphingTile:t,graphingTileIndex:n})=>{var l;if(!(null===(l=null==t?void 0:t.tile)||void 0===l?void 0:l.tileType))return null;const o=$[t.tile.tileType]||null;return o?e.createElement(o,{graphingTile:t,graphingTileIndex:n}):null},H=[20,20],O={lg:600,sm:0},_={lg:8,sm:2},W=({tilePrefix:n,responsive:l,columns:i,containerPadding:a,referenceMargin:s,referenceWidth:c,graphingTiles:d})=>{const[u,m]=o(null),[g,h]=o(null),[p,v]=o(null),[f,E]=o(null),y=r(null),w=()=>{const e=(null==y?void 0:y.current)?(null==y?void 0:y.current).getBoundingClientRect().width:null;E(e);const t=P(e);m(t)};let N;const x=e=>{w(),clearTimeout(N),N=setTimeout((()=>{w()}),300)};t((()=>{w()}),[y]),t((()=>(window.addEventListener("resize",x),()=>{window.removeEventListener("resize",x)})),[]),t((()=>{if(l){if(!Array.isArray(d)||0===d.length)return void v({lg:[]});v({lg:d.map(((e,t)=>({x:e.x,y:e.y,w:isNaN(e.w)?1:e.w,h:isNaN(e.h)?1:e.h,i:`${n?n+"_":""}tile_${t}`})))})}else{if(!Array.isArray(d)||0===d.length)return void h([]);h(d.map(((e,t)=>({x:e.x,y:e.y,w:isNaN(e.w)?1:e.w,h:isNaN(e.h)?1:e.h,i:`${n?n+"_":""}tile_${t}`,static:!0}))))}}),[d]);const C=()=>null==d?void 0:d.map(((t,l)=>{if(!t.tile||!t.visible)return null;let o="graphing-tile-container";!1!==t.border&&(o+=" bordered"),t.autoHeight&&(o+=" auto-height");const r=`${n?n+"_":""}tile_${l}`;return e.createElement("div",{className:o,key:r},e.createElement(S,{graphingTile:t,graphingTileIndex:l}))})),P=e=>{if(!s||isNaN(s)||s<=0||!c||isNaN(c)||c<=0||null==e)return H;const t=e/c*s;return[t,t]};return e.createElement("div",{ref:y,className:"graphing-tiles-container"},(()=>{if(!f||!u)return null;if(!1!==l){if(!p)return null;const t=[a||0,0];return e.createElement(T,{width:f,breakpoints:O,cols:i||_,rowHeight:1,layouts:p,containerPadding:t,margin:u,isDraggable:!1},C())}return g?e.createElement(b,{width:f,cols:9,rowHeight:50,margin:u,isDraggable:!1,layout:g},C()):null})())},z={};function R(e,t){z[e]=t}function G(e){const t=z[null==e?void 0:e.tileType];return t?new t(e):null}function U(e){const t=[];return e.forEach((e=>{const n=G(e);n&&t.push(n)})),t}class j{constructor(e){this.x=e.x,this.y=e.y,this.w=e.w,this.h=e.h,this.border=!0===e.border,this.background=e.background||null,this.autoHeight=!0===e.autoHeight,this.tile=G(e.tile),this.visible=!1!==e.visible}getBackground(){return this.background||"#FFFFFF"}}class q{constructor(e){this.title=e.title||"",this.infoIconUrl=e.infoUrl,this.infoIconHref=e.infoHref,this.responsive=!1!==e.responsive,this.columns=e.columns||{lg:8,sm:2},this.containerPadding=e.containerPadding||0,this.referenceMargin=e.referenceMargin||null,this.referenceWidth=e.referenceWidth||null,this.tiles=[],Array.isArray(e.tiles)&&e.tiles.forEach((e=>{this.tiles.push(new j(e))}))}}const V={};function Z(e,t){V[e]=t}function K(e){const t=V[null==e?void 0:e.controlType];return t?new t(e):null}function J(e){const t=[];return e.forEach((e=>{const n=K(e);n&&t.push(n)})),t}class Q{constructor(e){this.controlType=e.controlType,this.dataKey=e.dataKey}}class X extends Q{constructor(e){super(e),this.inputLabel=e.inputLabel||"",this.readOnly=!0===e.readOnly,this.readOnlyBorderless=!0===e.readOnlyBorderless,this.hasAsAtDate=!1===e.hasAsAtDate||!0===e.hasAsAtDate?e.hasAsAtDate:null,this.staticAsAtDate=!0===e.staticAsAtDate,this.validationSchemaPath=(i.isArray(e.validationSchemaPath)?e.validationSchemaPath:[]).filter((e=>i.isString(e))),this.validationErrorMessages=e.validationErrorMessages||{}}}class Y{constructor(e){this.border=e.border,this.background=e.background||null,this.control=K(e.control)}getBackground(e){return this.background||(null==e?void 0:e.background)||"#FFFFFF"}}class ee{constructor(e){this.id=e.id||"",this.title=e.title||"",this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new Y(e))}))}}class te{constructor(e){this.tileType=e.tileType}}class ne extends te{constructor(e){super(e),this.control=new Y(e.control)}}class le extends te{constructor(e){super(e),this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new Y(e))}))}}class oe extends te{constructor(e){super(e),i.isArray(e.formGroups)&&e.formGroups.length>0?this.formGroups=e.formGroups.map((e=>new ee(e))):this.formGroups=[]}}R("form-groups-tile",oe);class re extends le{constructor(e){super(e),this.controlsPerPage=e.controlsPerPage,(isNaN(this.controlsPerPage)||this.controlsPerPage<=1)&&(this.controlsPerPage=1)}}R("horizontal-tile",re);class ie extends le{constructor(e){super(e),this.states={};for(const t in e.states){const n=e.states[t];n&&(this.states[t]=new q(n))}}}R("selectable-states-tile",ie);class ae extends ne{constructor(e){super(e)}}R("single-tile",ae);class se extends le{constructor(e){super(e)}}R("vertical-tile",se);const ce=({})=>{const{settings:n}=B(),[l,r]=o(null),[a,s]=o(!1);t((()=>{setTimeout((()=>{window.dispatchEvent(new Event("resize")),setTimeout((()=>{s(!0)}),300)}),300)}),[]),t((()=>{r(n?new q(n):null)}),[n]);const c=()=>(null==n?void 0:n.infoIconUrl)&&n.infoIconHref?e.createElement("a",{className:"information-anchor",href:n.infoIconHref,target:"_blank"},e.createElement("img",{alt:null==n?void 0:n.title,src:null==n?void 0:n.infoIconUrl})):null;if(!l)return null;let d="graphing-grid-container";return a&&(d+=" in"),e.createElement(e.Fragment,null,e.createElement("div",{className:d},i.isNullOrUndefined(null==n?void 0:n.title)?null:e.createElement(e.Fragment,null,e.createElement("h2",{className:"graphing-grid-title"},null==n?void 0:n.title,c()),e.createElement("hr",{className:"graphing-grid-hr"})),e.createElement(W,{graphingTiles:l.tiles,responsive:l.responsive,columns:l.columns,containerPadding:l.containerPadding,referenceMargin:l.referenceMargin,referenceWidth:l.referenceWidth})))},de={};function ue(e,t){e&&t&&(de[e]=t)}const me=({graphingTile:t,graphingTileIndex:n,graphingTileControl:l,ControlProps:o})=>{var r;if(!(null===(r=null==l?void 0:l.control)||void 0===r?void 0:r.controlType))return null;const i=de[l.control.controlType]||null;return i?e.createElement(i,Object.assign({graphingTile:t,graphingTileIndex:n,graphingTileControl:l},o)):null},ge=({graphingTile:t,graphingTileIndex:n,graphingTileControls:l,ControlProps:o})=>{var r,i;let a="graphing-tile-controls-container";return(null===(r=null==t?void 0:t.tile)||void 0===r?void 0:r.tileType)&&(a+=" "+(null===(i=null==t?void 0:t.tile)||void 0===i?void 0:i.tileType)),e.createElement("div",{className:a},null==l?void 0:l.map(((l,r)=>{var i,a;if(!l.control)return null;let s="graphing-tile-control-container";(null===(i=l.control)||void 0===i?void 0:i.controlType)&&(s+=" "+(null===(a=l.control)||void 0===a?void 0:a.controlType)),!1!==l.border&&(s+=" bordered");const c=`control_${n}_${r}`;return e.createElement("div",{className:s,key:c},e.createElement(me,{graphingTile:t,graphingTileIndex:n,graphingTileControl:l,ControlProps:o}))})))},he=({graphingTile:n,graphingTileIndex:l})=>{const a=null==n?void 0:n.tile;if(!a)return null;const s=B();return e.createElement("div",{className:"form-groups-tile-component"},!i.isArray(a.formGroups)||a.formGroups.length<0?null:a.formGroups.map(((a,c)=>{const d=r(null),[u,m]=o("form-group-container");t((()=>{f()}),[u]);const[g,h]=o(0),[p,v]=o(!0);t((()=>{if(p){const e=d.current;i.isNullOrUndefined(e)?h(0):setTimeout((()=>{h(e.scrollHeight)}),10)}else h(0)}),[p]);const f=e=>{if(p){const e=d.current;i.isNullOrUndefined(e)?h(0):setTimeout((()=>{h(Math.max(e.clientHeight,e.scrollHeight))}),10)}else h(0)};let E="form-group-container";!1===p&&(E+=" collapsed"),i.isFunction(s.isFormGroupVisible)&&(s.isFormGroupVisible(a.id)||(E+=" hidden")),E!==u&&m(E);const y=a.controls,b={maxHeight:g};return e.createElement("div",{className:u,key:`form-group-${c}`},e.createElement("div",{className:"form-group-title",onClick:e=>{v(!p)}},e.createElement("span",null,a.title),e.createElement("svg",{viewBox:"0 0 11 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M5.89844 1.1626L10.4688 5.70947C10.6797 5.94385 10.6797 6.29541 10.4688 6.50635L9.92969 7.04541C9.71875 7.25635 9.36719 7.25635 9.13281 7.04541L5.5 3.43603L1.89063 7.04541C1.65625 7.25635 1.30469 7.25635 1.09375 7.04541L0.554688 6.50635C0.34375 6.29541 0.34375 5.94385 0.554688 5.70947L5.125 1.1626C5.33594 0.95166 5.6875 0.95166 5.89844 1.1626Z",fill:"#333333"})),e.createElement("hr",null)),e.createElement("div",{className:"form-group-components",ref:d,style:b},e.createElement(ge,{graphingTile:n,graphingTileIndex:l,graphingTileControls:y,ControlProps:{onUIChange:f}})))})))};D("form-groups-tile",he);const pe=({graphingTile:n,graphingTileIndex:l})=>{const r=null==n?void 0:n.tile;if(!r)return null;const[i,a]=o(null),[s,c]=o(0),[d,u]=o(0),[m,g]=o(null),[h,p]=o(null),[v,f]=o(null),[E,y]=o([]);t((()=>{let e=[];const t=Math.ceil(r.controls.length/r.controlsPerPage);if(t>0)for(let n=0;n<t;n++){const t={pageIndex:n,controls:[]};for(let e=0;e<r.controlsPerPage;e++){const l=n*r.controlsPerPage+e;if(l>=r.controls.length)break;t.controls.push(r.controls[l])}e.push(t)}c(t),u(0),g(null),p(null),f(null),y(e)}),r.controls);const b=e=>{let t=e-1;t<0&&(t=s-1),p(t)},T=e=>{e.stopPropagation(),b(d),f(null),g(null)},w=e=>{e.stopPropagation()},N=e=>{e.stopPropagation()},x=e=>{if(e.stopPropagation(),null!==i)return;const t=d;let n=d-1;n<0&&(n=s-1),g(t),u(n),p(null),f(t);const l=setTimeout((()=>{b(n),f(null),g(null),setTimeout((function(){a(null)}),300)}),300);a(l)},C=e=>{let t=e+1;t>=s&&(t=0),f(t)},P=e=>{e.stopPropagation(),p(null),C(d),g(null)},M=e=>{e.stopPropagation()},k=e=>{e.stopPropagation()},I=e=>{if(e.stopPropagation(),null!==i)return;const t=d;let n=d+1;n>=s&&(n=0),g(t),u(n),p(t),f(null);const l=setTimeout((()=>{p(null),C(n),g(null),setTimeout((function(){a(null)}),300)}),300);a(l)},L={background:n.getBackground()};return e.createElement("div",{className:"horizontal-tile-component",style:L},e.createElement("div",{className:"horizontal-tile-pages-container"},E.map(((t,o)=>{let r="horizontal-tile-page-container";return o===d?r+=" active":o===h?r+=" navigating-from-left":o===v&&(r+=" navigating-from-right"),o===m&&(r+=" previous"),e.createElement("div",{className:r},e.createElement(ge,{graphingTile:n,graphingTileIndex:l,graphingTileControls:t.controls}))})),e.createElement("div",{className:"horizontal-tile-page-container background",style:L}),s<=1?null:e.createElement(e.Fragment,null,e.createElement("button",{type:"button",className:"navigate-button navigate-left-button",onMouseEnter:T,onMouseLeave:w,onMouseDown:N,onClick:x},e.createElement("svg",{width:"8",height:"13",viewBox:"0 0 8 13",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M7.40991 10.643L2.82991 6.05298L7.40991 1.46298L5.99991 0.0529785L-8.80003e-05 6.05298L5.99991 12.053L7.40991 10.643Z",fill:"#828282"}))),e.createElement("button",{type:"button",className:"navigate-button navigate-right-button",onMouseEnter:P,onMouseLeave:M,onMouseDown:k,onClick:I},e.createElement("svg",{width:"8",height:"13",viewBox:"0 0 8 13",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M0.589843 1.46298L5.16984 6.05298L0.589844 10.643L1.99984 12.053L7.99984 6.05298L1.99984 0.0529785L0.589843 1.46298Z",fill:"#828282"}))))),s<=1?null:e.createElement("div",{className:"horizontal-tile-paginators-container"},Array.from(Array(s).keys()).map((t=>{let n="paginator-anchor";return t===d&&(n+=" active"),e.createElement("a",{className:n,onMouseEnter:e=>{e.stopPropagation(),t!==d&&(t<d?(p(t),f(null)):(p(null),f(t)),g(null))},onMouseLeave:e=>{e.stopPropagation()},onMouseDown:e=>{e.stopPropagation()},onClick:e=>{if(e.stopPropagation(),t===d)return;const n=d,l=t;g(n),u(l),n<l?p(n):f(n)}})}))))};D("horizontal-tile",pe);const ve=({graphingTile:n})=>{const l=null==n?void 0:n.tile;if(!l)return null;const[r,i]=o(""),[a,s]=o(null),[c,d]=o([]),u=B();t((()=>{const e=Object.keys(l.states);if(d(e.map((e=>{var t;return{label:null===(t=l.states[e])||void 0===t?void 0:t.title,value:e}}))),e&&e.length>0){const t=e[0];m(t)}else i(""),s(null)}),[l.states]);const m=e=>{i(e),s(l.states[e])};return e.createElement("div",{className:"selectable-states-tile-component"},e.createElement("div",{className:"selectable-states-tile-header"},e.createElement("div",{className:"selected-state-tile-title"},e.createElement("h6",null,null==a?void 0:a.title)),e.createElement("div",{className:"selectable-states-dropdown-container"},e.createElement(I,{options:c,label:"Select",value:r,handleChange:e=>{var t;m(null===(t=null==e?void 0:e.target)||void 0===t?void 0:t.value),(null==u?void 0:u.handleSelectableStatesTileChange)&&(null==u||u.handleSelectableStatesTileChange(e))}}))),e.createElement("div",{className:"selected-state-tile-container"},a?e.createElement(W,{tilePrefix:r,graphingTiles:a.tiles,responsive:a.responsive,columns:a.columns,containerPadding:a.containerPadding,referenceMargin:a.referenceMargin,referenceWidth:a.referenceWidth}):null))};D("selectable-states-tile",ve);const fe=({graphingTile:t,graphingTileIndex:n})=>{const l=null==t?void 0:t.tile;if(!l)return null;const o=[l.control],r={background:t.getBackground()};return e.createElement("div",{className:"single-tile-component",style:r},e.createElement(ge,{graphingTile:t,graphingTileIndex:n,graphingTileControls:o}))};D("single-tile",fe);const Ee=({graphingTile:t,graphingTileIndex:n})=>{const l=null==t?void 0:t.tile;if(!l)return null;const o=l.controls;return e.createElement("div",{className:"vertical-tile-component"},e.createElement(ge,{graphingTile:t,graphingTileIndex:n,graphingTileControls:o}))};D("vertical-tile",Ee);const ye=()=>{const e=Te.pop();e&&(e.classList.add("moorr-modal-container-closing"),setTimeout((()=>{e&&(w.unmountComponentAtNode(e),e.remove())}),300))};let be=class{constructor(e){this._props=e}open(){const t=this._props;return new Promise(((n,l)=>{let o,r;"function"==typeof t.onClose&&(o=t.onClose),t.onClose=e=>{o&&o(e),n({dismissed:!1,result:e}),t.showModal=!1,ye()},"function"==typeof t.onDismiss&&(r=t.onClose),t.onDismiss=()=>{r&&r(),n({dismissed:!0}),t.showModal=!1,ye()},t.showModal=!0;let i=e.createElement(A,{stylePrefix:"MoorrReactMuiModal"},e.createElement(this.getComponent(),t));Te.push(this._container=document.createElement("div")),this._container.className="moorr-modal-container",document.body.appendChild(this._container),w.render(i,this._container)}))}};const Te=[],we={},Ne=s((e=>({modal:{display:"flex",alignItems:"center",justifyContent:"center"},paper:{width:825,backgroundColor:e.palette.background.paper,borderRadius:"5px",boxShadow:e.shadows[5],padding:e.spacing(2,4,3)}}))),xe=n=>{const l=Ne(),r={};n.fixedWidth&&(r.width=n.fixedWidth),n.fixedHeight&&(r.height=n.fixedHeight);let a=l.paper+" moorr-modal-content-container";n.contentClassName&&(a+=" "+n.contentClassName);const[s,c]=o(!1),[d,u]=o(!1);t((()=>{u(!s&&!1!==n.showModal)}),[s,d,n.showModal]);const m=e=>{c(!0),(null==n?void 0:n.onDismiss)&&n.onDismiss(e)};let g=l.modal;switch(g+=" moorr-modal-container",n.effect){case"fade":g+=" moorr-fade-modal";break;case"slide":g+=" moorr-slide-modal"}return s&&(g+=" moorr-modal-closing"),e.createElement(h,{disableEnforceFocus:!0,className:g,open:d,onClose:m,closeAfterTransition:!0,BackdropComponent:p,BackdropProps:{timeout:300,onClick:e=>{e.preventDefault(),e.stopPropagation(),i.isFunction(n.onBackdropClick)?n.onBackdropClick(e):m("backdrop")}}},(()=>{switch(n.effect){case"fade":default:return e.createElement(v,{in:d},e.createElement("div",{className:a,style:r},n.children));case"slide":return e.createElement(N,{in:d,direction:"left",timeout:300},e.createElement("div",{className:a},n.children))}})())},Ce=(t,n)=>{(t=>{x(t,{icon:e.createElement(C,{sx:{color:"#EB5757"}}),style:{color:"#EB5757",backgroundColor:"#FCECEC",border:"2px solid #EB5757",fontFamily:'"Poppins", sans-serif',borderRadius:"0.7em",marginLeft:"-100px"}})})(n)},Pe=t=>e.createElement(xe,{effect:"fade",contentClassName:`${t.className}-content-container`,fixedWidth:t.widthValue,fixedHeight:t.heightValue,showModal:t.showModal,onClose:t.onClose,onDismiss:t.onDismiss,onBackdropClick:t.onBackdropClick},e.createElement("div",{className:`${t.className} moorr-modal-container`},e.createElement("div",{className:"moorr-modal-header"},t.renderHeader),e.createElement("div",{className:"moorr-modal-body"},t.renderBody),!1===t.hasFooter?null:e.createElement("div",{className:"moorr-modal-footer"},e.createElement("div",{className:"left-buttons"},t.renderLeftButtons),e.createElement("div",{className:"status-message"},t.renderStatusMessage),e.createElement("div",{className:"right-buttons"},t.renderRightButtons)))),Me=e=>{var t,n,l,o,r;const i=null===(t=null==e?void 0:e.detail)||void 0===t?void 0:t.modal;if(!i||!we[i])return Promise.reject("invalid-modal");const a=new we[i]((null===(n=null==e?void 0:e.detail)||void 0===n?void 0:n.props)||{}).open();(null===(l=null==e?void 0:e.detail)||void 0===l?void 0:l.then)&&a.then((t=>{var n,l;if(!(null==t?void 0:t.dismissed)&&(null===(n=null==e?void 0:e.detail)||void 0===n?void 0:n.finally))try{null===(l=null==e?void 0:e.detail)||void 0===l||l.then(null==t?void 0:t.result)}catch(e){console.error(e)}})),(null===(o=null==e?void 0:e.detail)||void 0===o?void 0:o.catch)&&a.catch(null===(r=null==e?void 0:e.detail)||void 0===r?void 0:r.catch),a.finally((()=>{var t,n;if(null===(t=null==e?void 0:e.detail)||void 0===t?void 0:t.finally)try{null===(n=null==e?void 0:e.detail)||void 0===n||n.finally()}catch(e){console.error(e)}})),(null==e?void 0:e.detail)&&((null==e?void 0:e.detail).promise=a)};document&&(document.removeEventListener("openModal",Me),document.addEventListener("openModal",Me));export{P as Button,I as Dropdown,Pe as FadeModal,ee as FormGroupModel,he as FormGroupsTile,oe as FormGroupsTileModel,X as FormInputModel,F as GraphingContext,me as GraphingControl,Q as GraphingControlModel,Y as GraphingControlSettingsModel,ce as GraphingGrid,q as GraphingSettingsModel,S as GraphingTile,ge as GraphingTileControls,te as GraphingTileModel,j as GraphingTileSettingsModel,W as GraphingTiles,pe as HorizontalTile,re as HorizontalTileModel,be as Modal,xe as MoorrModal,le as MultipleControlsTileModel,ve as SelectableStatesTile,ie as SelectableStatesTileModel,ne as SingleControlTileModel,fe as SingleTile,ae as SingleTileModel,Ee as VerticalTile,se as VerticalTileModel,K as createGraphingControl,J as createGraphingControls,G as createGraphingTile,U as createGraphingTiles,we as modals,Te as modalsStack,Z as registerGraphingControl,ue as registerGraphingControlComponent,R as registerGraphingTile,D as registerGraphingTileComponent,Ce as toastMessage,B as useGraphingContext};
+import e,{useEffect as t,createContext as n,useContext as l,useState as o,useRef as r}from"react";import{utils as i}from"moorr-common";import a from"@material-ui/core/MenuItem";import{makeStyles as s,createStyles as c,withStyles as d,StylesProvider as u}from"@material-ui/core/styles";import m from"@material-ui/core/TextField";import{StylesProvider as g,Modal as h,Backdrop as p,Fade as v}from"@material-ui/core";import{createGenerateClassName as f,StylesProvider as E}from"@material-ui/styles";import{v4 as y}from"uuid";import b,{Responsive as T}from"react-grid-layout";import w from"react-dom";import{Slide as x}from"@mui/material";import{toast as C}from"react-toastify";import N from"@mui/icons-material/Cancel";const P=({type:n,label:l})=>(t((()=>(console.log(`Message from moorr-react-mui: ${i.hello()}`),()=>{console.log(`Message from moorr-react-mui: ${i.bye()}`)})),[]),n||(n="button"),e.createElement("button",{type:n,className:"moorr-button"},e.createElement("span",null,l))),M=e=>({root:{"&:hover:not($disabled):not($focused):not($error) $notchedOutline":{},"&$checked":{color:"var(--primary-color)"},"& .vldt-MuiSelect-select.vldt-MuiSelect-select":{color:"var(--grey-color-2)"}},disabled:{},focused:{},error:{},notchedOutline:{},checked:{},notchedOutlineMBRequired:{flex:3,borderColor:"blue",borderWidth:2},fieldSetMBRequired:{"& fieldset":{flex:3,borderColor:"blue",borderWidth:2}},fieldSetErrorField:{"& fieldset":{borderColor:"var(--error-color)"}},blue:{color:"blue"}});s(M);const k=s((()=>c({root:{overflow:"hidden",display:"flex",alignItems:"center","&.start":{flexDirection:"row"},"&.top":{flexDirection:"column"},"& .Mui-disabled":{backgroundColor:"var(--grey-color-3)",cursor:"not-allowed",borderRadius:"4px"}},label:{flex:2},field:{flex:3},required:{color:"red"},menuItem:{color:"var(--grey-color-2)","&:hover":{backgroundColor:"var(--primary-color-scale-25)",color:"var(--grey-color-2)"}},menuItemSelected:{color:"var(--grey-color-2)"},mandatory:{border:"red 2px solid",borderRadius:"4px"}})));var I=d(M)((({handleChange:t,value:n,disabled:l=!1,name:o,className:r,classes:i,size:s,menuItemLabel:c,options:d,labelPlacement:u="start",label:g,required:h=!1,isMBRequiredField:p,fullWidth:v,selectIconComponent:f})=>{const{root:E,focused:y,error:b,notchedOutline:T,notchedOutlineMBRequired:w}=i,x=k();let C;return f&&(C={IconComponent:f}),e.createElement(m,{fullWidth:!1!==v,id:"outlined-basic",variant:"outlined",value:n,onChange:t,disabled:l,name:o,className:[r].join(" "),InputProps:{classes:{root:E,focused:y,error:b,notchedOutline:!p||n&&0!==(null==n?void 0:n.length)?!h||n&&0!==(null==n?void 0:n.length)?T:x.mandatory:w}},color:"primary",size:s||"small",select:!0,SelectProps:C,defaultValue:""},e.createElement(a,{value:"",disabled:!0},e.createElement("em",null,c)),d&&d.map(((t,n)=>"-separator-"===t?e.createElement(a,{key:`separator-${n}`,value:"",disabled:!0},e.createElement("em",null,"-----------")):e.createElement(a,{key:`menu-item-${n}-${t.value||t}`,value:t.value||t},t.label||t))))}));const A={};var L=({stylePrefix:t,children:n})=>{let l;if(t)l=A[t]?A[t]:A[t]=f({seed:t});else{const e=`MoorrStylesProvider-${y()}-`;l=f({seed:e})}return e.createElement(E,{generateClassName:l,injectFirst:!0},e.createElement(g,{generateClassName:l,injectFirst:!0},e.createElement(u,{generateClassName:l},n)))};const F=n({});function B(){return l(F)}const $={};function D(e,t){e&&t&&($[e]=t)}const S=({graphingTile:t,graphingTileIndex:n})=>{var l;if(!(null===(l=null==t?void 0:t.tile)||void 0===l?void 0:l.tileType))return null;const o=$[t.tile.tileType]||null;return o?e.createElement(o,{graphingTile:t,graphingTileIndex:n}):null},H=[20,20],O={lg:600,sm:0},_={lg:8,sm:2},W=({tilePrefix:n,responsive:l,columns:i,containerPadding:a,referenceMargin:s,referenceWidth:c,graphingTiles:d})=>{const[u,m]=o(null),[g,h]=o(null),[p,v]=o(null),[f,E]=o(null),y=r(null),w=()=>{const e=(null==y?void 0:y.current)?(null==y?void 0:y.current).getBoundingClientRect().width:null;E(e);const t=P(e);m(t)};let x;const C=e=>{w(),clearTimeout(x),x=setTimeout((()=>{w()}),300)};t((()=>{w()}),[y]),t((()=>(window.addEventListener("resize",C),()=>{window.removeEventListener("resize",C)})),[]),t((()=>{if(l){if(!Array.isArray(d)||0===d.length)return void v({lg:[]});v({lg:d.map(((e,t)=>({x:e.x,y:e.y,w:isNaN(e.w)?1:e.w,h:isNaN(e.h)?1:e.h,i:`${n?n+"_":""}tile_${t}`})))})}else{if(!Array.isArray(d)||0===d.length)return void h([]);h(d.map(((e,t)=>({x:e.x,y:e.y,w:isNaN(e.w)?1:e.w,h:isNaN(e.h)?1:e.h,i:`${n?n+"_":""}tile_${t}`,static:!0}))))}}),[d]);const N=()=>null==d?void 0:d.map(((t,l)=>{if(!t.tile||!t.visible)return null;let o="graphing-tile-container";!1!==t.border&&(o+=" bordered"),t.autoHeight&&(o+=" auto-height");const r=`${n?n+"_":""}tile_${l}`;return e.createElement("div",{className:o,key:r},e.createElement(S,{graphingTile:t,graphingTileIndex:l}))})),P=e=>{if(!s||isNaN(s)||s<=0||!c||isNaN(c)||c<=0||null==e)return H;const t=e/c*s;return[t,t]};return e.createElement("div",{ref:y,className:"graphing-tiles-container"},(()=>{if(!f||!u)return null;if(!1!==l){if(!p)return null;const t=[a||0,0];return e.createElement(T,{width:f,breakpoints:O,cols:i||_,rowHeight:1,layouts:p,containerPadding:t,margin:u,isDraggable:!1},N())}return g?e.createElement(b,{width:f,cols:9,rowHeight:50,margin:u,isDraggable:!1,layout:g},N()):null})())},z={};function R(e,t){z[e]=t}function U(e){const t=z[null==e?void 0:e.tileType];return t?new t(e):null}function G(e){const t=[];return e.forEach((e=>{const n=U(e);n&&t.push(n)})),t}class j{constructor(e){this.x=e.x,this.y=e.y,this.w=e.w,this.h=e.h,this.border=!0===e.border,this.background=e.background||null,this.autoHeight=!0===e.autoHeight,this.tile=U(e.tile),this.visible=!1!==e.visible}getBackground(){return this.background||"#FFFFFF"}}class q{constructor(e){this.title=e.title||"",this.infoIconUrl=e.infoUrl,this.infoIconHref=e.infoHref,this.responsive=!1!==e.responsive,this.columns=e.columns||{lg:8,sm:2},this.containerPadding=e.containerPadding||0,this.referenceMargin=e.referenceMargin||null,this.referenceWidth=e.referenceWidth||null,this.tiles=[],Array.isArray(e.tiles)&&e.tiles.forEach((e=>{this.tiles.push(new j(e))}))}}const V={};function Z(e,t){V[e]=t}function K(e){const t=V[null==e?void 0:e.controlType];return t?new t(e):null}function J(e){const t=[];return e.forEach((e=>{const n=K(e);n&&t.push(n)})),t}class Q{constructor(e){this.controlType=e.controlType,this.dataKey=e.dataKey}}class X extends Q{constructor(e){super(e),this.inputLabel=e.inputLabel||"",this.readOnly=!0===e.readOnly,this.readOnlyBorderless=!0===e.readOnlyBorderless,this.hasAsAtDate=!1===e.hasAsAtDate||!0===e.hasAsAtDate?e.hasAsAtDate:null,this.staticAsAtDate=!0===e.staticAsAtDate,this.validationSchemaPath=(i.isArray(e.validationSchemaPath)?e.validationSchemaPath:[]).filter((e=>i.isString(e))),this.validationErrorMessages=e.validationErrorMessages||{}}}class Y{constructor(e){this.border=e.border,this.background=e.background||null,this.control=K(e.control)}getBackground(e){return this.background||(null==e?void 0:e.background)||"#FFFFFF"}}class ee{constructor(e){this.id=e.id||"",this.title=e.title||"",this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new Y(e))}))}}class te{constructor(e){this.tileType=e.tileType}}class ne extends te{constructor(e){super(e),this.control=new Y(e.control)}}class le extends te{constructor(e){super(e),this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new Y(e))}))}}class oe extends te{constructor(e){super(e),i.isArray(e.formGroups)&&e.formGroups.length>0?this.formGroups=e.formGroups.map((e=>new ee(e))):this.formGroups=[]}}R("form-groups-tile",oe);class re extends le{constructor(e){super(e),this.controlsPerPage=e.controlsPerPage,(isNaN(this.controlsPerPage)||this.controlsPerPage<=1)&&(this.controlsPerPage=1)}}R("horizontal-tile",re);class ie extends le{constructor(e){super(e),this.states={};for(const t in e.states){const n=e.states[t];n&&(this.states[t]=new q(n))}}}R("selectable-states-tile",ie);class ae extends te{constructor(e){super(e),this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new Y(e))}))}}R("simple-form-tile",ae);class se extends ne{constructor(e){super(e)}}R("single-tile",se);class ce extends le{constructor(e){super(e)}}R("vertical-tile",ce);const de=({})=>{const{settings:n}=B(),[l,r]=o(null),[a,s]=o(!1);t((()=>{setTimeout((()=>{window.dispatchEvent(new Event("resize")),setTimeout((()=>{s(!0)}),300)}),300)}),[]),t((()=>{r(n?new q(n):null)}),[n]);const c=()=>(null==n?void 0:n.infoIconUrl)&&n.infoIconHref?e.createElement("a",{className:"information-anchor",href:n.infoIconHref,target:"_blank"},e.createElement("img",{alt:null==n?void 0:n.title,src:null==n?void 0:n.infoIconUrl})):null;if(!l)return null;let d="graphing-grid-container";return a&&(d+=" in"),e.createElement(e.Fragment,null,e.createElement("div",{className:d},i.isNullOrUndefined(null==n?void 0:n.title)?null:e.createElement(e.Fragment,null,e.createElement("h2",{className:"graphing-grid-title"},null==n?void 0:n.title,c()),e.createElement("hr",{className:"graphing-grid-hr"})),e.createElement(W,{graphingTiles:l.tiles,responsive:l.responsive,columns:l.columns,containerPadding:l.containerPadding,referenceMargin:l.referenceMargin,referenceWidth:l.referenceWidth})))},ue={};function me(e,t){e&&t&&(ue[e]=t)}const ge=({graphingTile:t,graphingTileIndex:n,graphingTileControl:l,ControlProps:o})=>{var r;if(!(null===(r=null==l?void 0:l.control)||void 0===r?void 0:r.controlType))return null;const i=ue[l.control.controlType]||null;return i?e.createElement(i,Object.assign({graphingTile:t,graphingTileIndex:n,graphingTileControl:l},o)):null},he=({graphingTile:t,graphingTileIndex:n,graphingTileControls:l,ControlProps:o})=>{var r,i;let a="graphing-tile-controls-container";return(null===(r=null==t?void 0:t.tile)||void 0===r?void 0:r.tileType)&&(a+=" "+(null===(i=null==t?void 0:t.tile)||void 0===i?void 0:i.tileType)),e.createElement("div",{className:a},null==l?void 0:l.map(((l,r)=>{var i,a;if(!l.control)return null;let s="graphing-tile-control-container";(null===(i=l.control)||void 0===i?void 0:i.controlType)&&(s+=" "+(null===(a=l.control)||void 0===a?void 0:a.controlType)),!1!==l.border&&(s+=" bordered");const c=`control_${n}_${r}`;return e.createElement("div",{className:s,key:c},e.createElement(ge,{graphingTile:t,graphingTileIndex:n,graphingTileControl:l,ControlProps:o}))})))},pe=({graphingTile:n,graphingTileIndex:l})=>{const a=null==n?void 0:n.tile;if(!a)return null;const s=B();return e.createElement("div",{className:"form-groups-tile-component"},!i.isArray(a.formGroups)||a.formGroups.length<0?null:a.formGroups.map(((a,c)=>{const d=r(null),[u,m]=o("form-group-container");t((()=>{f()}),[u]);const[g,h]=o(0),[p,v]=o(!0);t((()=>{if(p){const e=d.current;i.isNullOrUndefined(e)?h(0):setTimeout((()=>{h(e.scrollHeight)}),10)}else h(0)}),[p]);const f=e=>{if(p){const e=d.current;i.isNullOrUndefined(e)?h(0):setTimeout((()=>{h(Math.max(e.clientHeight,e.scrollHeight))}),10)}else h(0)};let E="form-group-container";!1===p&&(E+=" collapsed"),i.isFunction(s.isFormGroupVisible)&&(s.isFormGroupVisible(a.id)||(E+=" hidden")),E!==u&&m(E);const y=a.controls,b={maxHeight:g};return e.createElement("div",{className:u,key:`form-group-${c}`},e.createElement("div",{className:"form-group-title",onClick:e=>{v(!p)}},e.createElement("span",null,a.title),e.createElement("svg",{viewBox:"0 0 11 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M5.89844 1.1626L10.4688 5.70947C10.6797 5.94385 10.6797 6.29541 10.4688 6.50635L9.92969 7.04541C9.71875 7.25635 9.36719 7.25635 9.13281 7.04541L5.5 3.43603L1.89063 7.04541C1.65625 7.25635 1.30469 7.25635 1.09375 7.04541L0.554688 6.50635C0.34375 6.29541 0.34375 5.94385 0.554688 5.70947L5.125 1.1626C5.33594 0.95166 5.6875 0.95166 5.89844 1.1626Z",fill:"#333333"})),e.createElement("hr",null)),e.createElement("div",{className:"form-group-components",ref:d,style:b},e.createElement(he,{graphingTile:n,graphingTileIndex:l,graphingTileControls:y,ControlProps:{onUIChange:f}})))})))};D("form-groups-tile",pe);const ve=({graphingTile:n,graphingTileIndex:l})=>{const r=null==n?void 0:n.tile;if(!r)return null;const[i,a]=o(null),[s,c]=o(0),[d,u]=o(0),[m,g]=o(null),[h,p]=o(null),[v,f]=o(null),[E,y]=o([]);t((()=>{let e=[];const t=Math.ceil(r.controls.length/r.controlsPerPage);if(t>0)for(let n=0;n<t;n++){const t={pageIndex:n,controls:[]};for(let e=0;e<r.controlsPerPage;e++){const l=n*r.controlsPerPage+e;if(l>=r.controls.length)break;t.controls.push(r.controls[l])}e.push(t)}c(t),u(0),g(null),p(null),f(null),y(e)}),r.controls);const b=e=>{let t=e-1;t<0&&(t=s-1),p(t)},T=e=>{e.stopPropagation(),b(d),f(null),g(null)},w=e=>{e.stopPropagation()},x=e=>{e.stopPropagation()},C=e=>{if(e.stopPropagation(),null!==i)return;const t=d;let n=d-1;n<0&&(n=s-1),g(t),u(n),p(null),f(t);const l=setTimeout((()=>{b(n),f(null),g(null),setTimeout((function(){a(null)}),300)}),300);a(l)},N=e=>{let t=e+1;t>=s&&(t=0),f(t)},P=e=>{e.stopPropagation(),p(null),N(d),g(null)},M=e=>{e.stopPropagation()},k=e=>{e.stopPropagation()},I=e=>{if(e.stopPropagation(),null!==i)return;const t=d;let n=d+1;n>=s&&(n=0),g(t),u(n),p(t),f(null);const l=setTimeout((()=>{p(null),N(n),g(null),setTimeout((function(){a(null)}),300)}),300);a(l)},A={background:n.getBackground()};return e.createElement("div",{className:"horizontal-tile-component",style:A},e.createElement("div",{className:"horizontal-tile-pages-container"},E.map(((t,o)=>{let r="horizontal-tile-page-container";return o===d?r+=" active":o===h?r+=" navigating-from-left":o===v&&(r+=" navigating-from-right"),o===m&&(r+=" previous"),e.createElement("div",{className:r},e.createElement(he,{graphingTile:n,graphingTileIndex:l,graphingTileControls:t.controls}))})),e.createElement("div",{className:"horizontal-tile-page-container background",style:A}),s<=1?null:e.createElement(e.Fragment,null,e.createElement("button",{type:"button",className:"navigate-button navigate-left-button",onMouseEnter:T,onMouseLeave:w,onMouseDown:x,onClick:C},e.createElement("svg",{width:"8",height:"13",viewBox:"0 0 8 13",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M7.40991 10.643L2.82991 6.05298L7.40991 1.46298L5.99991 0.0529785L-8.80003e-05 6.05298L5.99991 12.053L7.40991 10.643Z",fill:"#828282"}))),e.createElement("button",{type:"button",className:"navigate-button navigate-right-button",onMouseEnter:P,onMouseLeave:M,onMouseDown:k,onClick:I},e.createElement("svg",{width:"8",height:"13",viewBox:"0 0 8 13",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M0.589843 1.46298L5.16984 6.05298L0.589844 10.643L1.99984 12.053L7.99984 6.05298L1.99984 0.0529785L0.589843 1.46298Z",fill:"#828282"}))))),s<=1?null:e.createElement("div",{className:"horizontal-tile-paginators-container"},Array.from(Array(s).keys()).map((t=>{let n="paginator-anchor";return t===d&&(n+=" active"),e.createElement("a",{className:n,onMouseEnter:e=>{e.stopPropagation(),t!==d&&(t<d?(p(t),f(null)):(p(null),f(t)),g(null))},onMouseLeave:e=>{e.stopPropagation()},onMouseDown:e=>{e.stopPropagation()},onClick:e=>{if(e.stopPropagation(),t===d)return;const n=d,l=t;g(n),u(l),n<l?p(n):f(n)}})}))))};D("horizontal-tile",ve);const fe=({graphingTile:n})=>{const l=null==n?void 0:n.tile;if(!l)return null;const[r,i]=o(""),[a,s]=o(null),[c,d]=o([]),u=B();t((()=>{const e=Object.keys(l.states);if(d(e.map((e=>{var t;return{label:null===(t=l.states[e])||void 0===t?void 0:t.title,value:e}}))),e&&e.length>0){const t=e[0];m(t)}else i(""),s(null)}),[l.states]);const m=e=>{i(e),s(l.states[e])};return e.createElement("div",{className:"selectable-states-tile-component"},e.createElement("div",{className:"selectable-states-tile-header"},e.createElement("div",{className:"selected-state-tile-title"},e.createElement("h6",null,null==a?void 0:a.title)),e.createElement("div",{className:"selectable-states-dropdown-container"},e.createElement(I,{options:c,label:"Select",value:r,handleChange:e=>{var t;m(null===(t=null==e?void 0:e.target)||void 0===t?void 0:t.value),(null==u?void 0:u.handleSelectableStatesTileChange)&&(null==u||u.handleSelectableStatesTileChange(e))}}))),e.createElement("div",{className:"selected-state-tile-container"},a?e.createElement(W,{tilePrefix:r,graphingTiles:a.tiles,responsive:a.responsive,columns:a.columns,containerPadding:a.containerPadding,referenceMargin:a.referenceMargin,referenceWidth:a.referenceWidth}):null))};D("selectable-states-tile",fe);const Ee=({graphingTile:t,graphingTileIndex:n})=>{const l=null==t?void 0:t.tile;if(!l)return null;const o=B(),r=e=>{i.isFunction(o.handleUIChange)&&o.handleUIChange(e)};return e.createElement("div",{className:"simple-tile-component"},(()=>{if(!i.isArray(l.controls)||l.controls.length<0)return null;const o=l.controls;e.createElement(he,{graphingTile:t,graphingTileIndex:n,graphingTileControls:o,ControlProps:{onUIChange:r}})})())};D("simple-form-tile",Ee);const ye=({graphingTile:t,graphingTileIndex:n})=>{const l=null==t?void 0:t.tile;if(!l)return null;const o=[l.control],r={background:t.getBackground()};return e.createElement("div",{className:"single-tile-component",style:r},e.createElement(he,{graphingTile:t,graphingTileIndex:n,graphingTileControls:o}))};D("single-tile",ye);const be=({graphingTile:t,graphingTileIndex:n})=>{const l=null==t?void 0:t.tile;if(!l)return null;const o=l.controls;return e.createElement("div",{className:"vertical-tile-component"},e.createElement(he,{graphingTile:t,graphingTileIndex:n,graphingTileControls:o}))};D("vertical-tile",be);const Te=()=>{const e=xe.pop();e&&(e.classList.add("moorr-modal-container-closing"),setTimeout((()=>{e&&(w.unmountComponentAtNode(e),e.remove())}),300))};let we=class{constructor(e){this._props=e}open(){const t=this._props;return new Promise(((n,l)=>{let o,r;"function"==typeof t.onClose&&(o=t.onClose),t.onClose=e=>{o&&o(e),n({dismissed:!1,result:e}),t.showModal=!1,Te()},"function"==typeof t.onDismiss&&(r=t.onClose),t.onDismiss=()=>{r&&r(),n({dismissed:!0}),t.showModal=!1,Te()},t.showModal=!0;let i=e.createElement(L,{stylePrefix:"MoorrReactMuiModal"},e.createElement(this.getComponent(),t));xe.push(this._container=document.createElement("div")),this._container.className="moorr-modal-container",document.body.appendChild(this._container),w.render(i,this._container)}))}};const xe=[],Ce={},Ne=s((e=>({modal:{display:"flex",alignItems:"center",justifyContent:"center"},paper:{width:825,backgroundColor:e.palette.background.paper,borderRadius:"5px",boxShadow:e.shadows[5],padding:e.spacing(2,4,3)}}))),Pe=n=>{const l=Ne(),r={};n.fixedWidth&&(r.width=n.fixedWidth),n.fixedHeight&&(r.height=n.fixedHeight);let a=l.paper+" moorr-modal-content-container";n.contentClassName&&(a+=" "+n.contentClassName);const[s,c]=o(!1),[d,u]=o(!1);t((()=>{u(!s&&!1!==n.showModal)}),[s,d,n.showModal]);const m=e=>{c(!0),(null==n?void 0:n.onDismiss)&&n.onDismiss(e)};let g=l.modal;switch(g+=" moorr-modal-container",n.effect){case"fade":g+=" moorr-fade-modal";break;case"slide":g+=" moorr-slide-modal"}return s&&(g+=" moorr-modal-closing"),e.createElement(h,{disableEnforceFocus:!0,className:g,open:d,onClose:m,closeAfterTransition:!0,BackdropComponent:p,BackdropProps:{timeout:300,onClick:e=>{e.preventDefault(),e.stopPropagation(),i.isFunction(n.onBackdropClick)?n.onBackdropClick(e):m("backdrop")}}},(()=>{switch(n.effect){case"fade":default:return e.createElement(v,{in:d},e.createElement("div",{className:a,style:r},n.children));case"slide":return e.createElement(x,{in:d,direction:"left",timeout:300},e.createElement("div",{className:a},n.children))}})())},Me=(t,n)=>{(t=>{C(t,{icon:e.createElement(N,{sx:{color:"#EB5757"}}),style:{color:"#EB5757",backgroundColor:"#FCECEC",border:"2px solid #EB5757",fontFamily:'"Poppins", sans-serif',borderRadius:"0.7em",marginLeft:"-100px"}})})(n)},ke=t=>e.createElement(Pe,{effect:"fade",contentClassName:`${t.className}-content-container`,fixedWidth:t.widthValue,fixedHeight:t.heightValue,showModal:t.showModal,onClose:t.onClose,onDismiss:t.onDismiss,onBackdropClick:t.onBackdropClick},e.createElement("div",{className:`${t.className} moorr-modal-container`},e.createElement("div",{className:"moorr-modal-header"},t.renderHeader),e.createElement("div",{className:"moorr-modal-body"},t.renderBody),!1===t.hasFooter?null:e.createElement("div",{className:"moorr-modal-footer"},e.createElement("div",{className:"left-buttons"},t.renderLeftButtons),e.createElement("div",{className:"status-message"},t.renderStatusMessage),e.createElement("div",{className:"right-buttons"},t.renderRightButtons)))),Ie=e=>{var t,n,l,o,r;const i=null===(t=null==e?void 0:e.detail)||void 0===t?void 0:t.modal;if(!i||!Ce[i])return Promise.reject("invalid-modal");const a=new Ce[i]((null===(n=null==e?void 0:e.detail)||void 0===n?void 0:n.props)||{}).open();(null===(l=null==e?void 0:e.detail)||void 0===l?void 0:l.then)&&a.then((t=>{var n,l;if(!(null==t?void 0:t.dismissed)&&(null===(n=null==e?void 0:e.detail)||void 0===n?void 0:n.finally))try{null===(l=null==e?void 0:e.detail)||void 0===l||l.then(null==t?void 0:t.result)}catch(e){console.error(e)}})),(null===(o=null==e?void 0:e.detail)||void 0===o?void 0:o.catch)&&a.catch(null===(r=null==e?void 0:e.detail)||void 0===r?void 0:r.catch),a.finally((()=>{var t,n;if(null===(t=null==e?void 0:e.detail)||void 0===t?void 0:t.finally)try{null===(n=null==e?void 0:e.detail)||void 0===n||n.finally()}catch(e){console.error(e)}})),(null==e?void 0:e.detail)&&((null==e?void 0:e.detail).promise=a)};document&&(document.removeEventListener("openModal",Ie),document.addEventListener("openModal",Ie));export{P as Button,I as Dropdown,ke as FadeModal,ee as FormGroupModel,pe as FormGroupsTile,oe as FormGroupsTileModel,X as FormInputModel,F as GraphingContext,ge as GraphingControl,Q as GraphingControlModel,Y as GraphingControlSettingsModel,de as GraphingGrid,q as GraphingSettingsModel,S as GraphingTile,he as GraphingTileControls,te as GraphingTileModel,j as GraphingTileSettingsModel,W as GraphingTiles,ve as HorizontalTile,re as HorizontalTileModel,we as Modal,Pe as MoorrModal,le as MultipleControlsTileModel,fe as SelectableStatesTile,ie as SelectableStatesTileModel,Ee as SimpleFormTile,ae as SimpleFormTileModel,ne as SingleControlTileModel,ye as SingleTile,se as SingleTileModel,be as VerticalTile,ce as VerticalTileModel,K as createGraphingControl,J as createGraphingControls,U as createGraphingTile,G as createGraphingTiles,Ce as modals,xe as modalsStack,Z as registerGraphingControl,me as registerGraphingControlComponent,R as registerGraphingTile,D as registerGraphingTileComponent,Me as toastMessage,B as useGraphingContext};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "moorr-react-mui",
-  "version": "0.2.72",
+  "version": "0.2.73",
   "description": "Moorr React MUI Common Library",
   "scripts": {
     "_clear": "rimraf index.* && rimraf typings/* && rimraf cjs/*",