moorr-react-mui 0.1.13 → 0.1.14

package/cjs/index.js

@@ -1 +1 @@
-"use strict";var e=require("react"),t=require("moorr-common"),l=require("@material-ui/core"),n=require("@material-ui/core/styles"),r=require("@material-ui/styles"),o=require("uuid"),i=require("react-grid-layout"),a=require("@material-ui/core/MenuItem"),s=require("@material-ui/core/TextField"),c=require("react-dom"),u=require("@mui/material");const d={};var g=({stylePrefix:t,children:i})=>{let a;if(t)a=d[t]?d[t]:d[t]=r.createGenerateClassName({seed:t});else{const e=`MoorrStylesProvider-${o.v4()}-`;a=r.createGenerateClassName({seed:e})}return e.createElement(r.StylesProvider,{generateClassName:a,injectFirst:!0},e.createElement(l.StylesProvider,{generateClassName:a,injectFirst:!0},e.createElement(n.StylesProvider,{generateClassName:a},i)))};const p=e.createContext({});function m(){return e.useContext(p)}const h={};function v(e,t){e&&t&&(h[e]=t)}const f=({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=h[t.tile.tileType]||null;return r?e.createElement(r,{graphingTile:t,graphingTileIndex:l}):null},E=[20,20],x={lg:600,sm:0},b={lg:8,sm:2},y=({tilePrefix:t,responsive:l,columns:n,containerPadding:r,referenceMargin:o,referenceWidth:a,graphingTiles:s})=>{const[c,u]=e.useState(null),[d,g]=e.useState(null),[p,m]=e.useState(null),[h,v]=e.useState(null),y=e.useRef(null),T=()=>{const e=(null==y?void 0:y.current)?(null==y?void 0:y.current).getBoundingClientRect().width:null;v(e);const t=M(e);u(t)};let N;const w=e=>{T(),clearTimeout(N),N=setTimeout((()=>{T()}),300)};e.useEffect((()=>{T()}),[y]),e.useEffect((()=>(window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)})),[]),e.useEffect((()=>{if(l){if(!Array.isArray(s)||0===s.length)return void m({lg:[]});m({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 g([]);g(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 C=()=>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(f,{graphingTile:l,graphingTileIndex:n}))})),M=e=>{if(!o||isNaN(o)||o<=0||!a||isNaN(a)||a<=0||null==e)return E;const t=e/a*o;return[t,t]};return e.createElement("div",{ref:y,className:"graphing-tiles-container"},(()=>{if(!h||!c)return null;if(!1!==l){if(!p)return null;const t=[r||0,0];return e.createElement(i.Responsive,{width:h,breakpoints:x,cols:n||b,rowHeight:1,layouts:p,containerPadding:t,margin:c,isDraggable:!1},C())}return d?e.createElement(i,{width:h,cols:9,rowHeight:50,margin:c,isDraggable:!1,layout:d},C()):null})())},T={};function N(e,t){T[e]=t}function w(e){const t=T[null==e?void 0:e.tileType];return t?new t(e):null}class C{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=w(e.tile),this.visible=!1!==e.visible}getBackground(){return this.background||"#FFFFFF"}}class M{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 C(e))}))}}const S={};function P(e){const t=S[null==e?void 0:e.controlType];return t?new t(e):null}class k{constructor(e){this.border=e.border,this.background=e.background||null,this.control=P(e.control)}getBackground(e){return this.background||(null==e?void 0:e.background)||"#FFFFFF"}}class I{constructor(e){this.tileType=e.tileType}}class F extends I{constructor(e){super(e),this.control=new k(e.control)}}class G extends I{constructor(e){super(e),this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new k(e))}))}}class L extends G{constructor(e){super(e),this.controlsPerPage=e.controlsPerPage,(isNaN(this.controlsPerPage)||this.controlsPerPage<=1)&&(this.controlsPerPage=1)}}N("horizontal-tile",L);class _ extends G{constructor(e){super(e),this.states={};for(const t in e.states){const l=e.states[t];l&&(this.states[t]=new M(l))}}}N("selectable-states-tile",_);class B extends F{constructor(e){super(e)}}N("single-tile",B);class q extends G{constructor(e){super(e)}}N("vertical-tile",q);const $={};const z=({graphingTile:t,graphingTileIndex:l,graphingTileControl:n})=>{var r;if(!(null===(r=null==n?void 0:n.control)||void 0===r?void 0:r.controlType))return null;const o=$[n.control.controlType]||null;return o?e.createElement(o,{graphingTile:t,graphingTileIndex:l,graphingTileControl:n}):null},H=({graphingTile:t,graphingTileIndex:l,graphingTileControls:n})=>{var r,o;let i="graphing-tile-controls-container";return(null===(r=null==t?void 0:t.tile)||void 0===r?void 0:r.tileType)&&(i+=" "+(null===(o=null==t?void 0:t.tile)||void 0===o?void 0:o.tileType)),e.createElement("div",{className:i},null==n?void 0:n.map(((n,r)=>{var o,i;if(!n.control)return null;let a="graphing-tile-control-container";(null===(o=n.control)||void 0===o?void 0:o.controlType)&&(a+=" "+(null===(i=n.control)||void 0===i?void 0:i.controlType)),!1!==n.border&&(a+=" bordered");const s=`control_${l}_${r}`;return e.createElement("div",{className:a,key:s},e.createElement(z,{graphingTile:t,graphingTileIndex:l,graphingTileControl:n}))})))},W=({graphingTile:t,graphingTileIndex:l})=>{const n=null==t?void 0:t.tile;if(!n)return null;const[r,o]=e.useState(null),[i,a]=e.useState(0),[s,c]=e.useState(0),[u,d]=e.useState(null),[g,p]=e.useState(null),[m,h]=e.useState(null),[v,f]=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)}a(t),c(0),d(null),p(null),h(null),f(e)}),n.controls);const E=e=>{let t=e-1;t<0&&(t=i-1),p(t)},x=e=>{e.stopPropagation(),E(s),h(null),d(null)},b=e=>{e.stopPropagation()},y=e=>{e.stopPropagation()},T=e=>{if(e.stopPropagation(),null!==r)return;const t=s;let l=s-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)},N=e=>{let t=e+1;t>=i&&(t=0),h(t)},w=e=>{e.stopPropagation(),p(null),N(s),d(null)},C=e=>{e.stopPropagation()},M=e=>{e.stopPropagation()},S=e=>{if(e.stopPropagation(),null!==r)return;const t=s;let l=s+1;l>=i&&(l=0),d(t),c(l),p(t),h(null);const n=setTimeout((()=>{p(null),N(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"},v.map(((n,r)=>{let o="horizontal-tile-page-container";return r===s?o+=" active":r===g?o+=" navigating-from-left":r===m&&(o+=" navigating-from-right"),r===u&&(o+=" previous"),e.createElement("div",{className:o},e.createElement(H,{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:b,onMouseDown:y,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:C,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===s&&(l+=" active"),e.createElement("a",{className:l,onMouseEnter:e=>{e.stopPropagation(),t!==s&&(t<s?(p(t),h(null)):(p(null),h(t)),d(null))},onMouseLeave:e=>{e.stopPropagation()},onMouseDown:e=>{e.stopPropagation()},onClick:e=>{if(e.stopPropagation(),t===s)return;const l=s,n=t;d(l),c(n),l<n?p(l):h(l)}})}))))};v("horizontal-tile",W);const D=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(D);const A=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 R=n.withStyles(D)((({handleChange:t,value:l,disabled:n=!1,name:r,className:o,classes:i,size:c,menuItemLabel:u,options:d,labelPlacement:g="start",label:p,required:m=!1,isMBRequiredField:h,fullWidth:v,selectIconComponent:f})=>{const{root:E,focused:x,error:b,notchedOutline:y,notchedOutlineMBRequired:T}=i,N=A();let w;return f&&(w={IconComponent:f}),e.createElement(s,{fullWidth:!1!==v,id:"outlined-basic",variant:"outlined",value:l,onChange:t,disabled:n,name:r,className:[o].join(" "),InputProps:{classes:{root:E,focused:x,error:b,notchedOutline:!h||l&&0!==(null==l?void 0:l.length)?!m||l&&0!==(null==l?void 0:l.length)?y:N.mandatory:T}},color:"primary",size:c||"small",select:!0,SelectProps:w,defaultValue:""},e.createElement(a,{value:"",disabled:!0},e.createElement("em",null,u)),d&&d.map((t=>"-separator-"===t?e.createElement(a,{value:"",disabled:!0},e.createElement("em",null,"-----------")):e.createElement(a,{value:t.value||t},t.label||t))))}));const O=({graphingTile:t})=>{const l=null==t?void 0:t.tile;if(!l)return null;const[n,r]=e.useState(null),[o,i]=e.useState(null),[a,s]=e.useState([]),c=m();e.useEffect((()=>{const e=Object.keys(l.states);if(s(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(null),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(R,{options:a,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(y,{tilePrefix:n,graphingTiles:o.tiles,responsive:o.responsive,columns:o.columns,containerPadding:o.containerPadding,referenceMargin:o.referenceMargin,referenceWidth:o.referenceWidth}):null))};v("selectable-states-tile",O);const j=({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(H,{graphingTile:t,graphingTileIndex:l,graphingTileControls:r}))};v("single-tile",j);const V=({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(H,{graphingTile:t,graphingTileIndex:l,graphingTileControls:r}))};v("vertical-tile",V);const U=()=>{setTimeout((()=>{const e=K.pop();e&&(c.unmountComponentAtNode(e),e.remove())}),300)};const K=[],Z={},J=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)}}))),Q=t=>{const n=J(),r={};t.fixedWidth&&(r.width=t.fixedWidth),t.fixedHeight&&(r.height=t.fixedHeight);let o=n.paper+" moorr-modal-content-container";t.contentClassName&&(o+=" "+t.contentClassName);let i=n.modal;switch(i+=" moorr-modal-container",t.effect){case"fade":i+=" moorr-fade-modal";break;case"slide":i+=" moorr-slide-modal"}const[a,s]=e.useState(!1),[c,d]=e.useState(!1);e.useEffect((()=>{d(!a&&!1!==t.showModal)}),[a,c]);return e.createElement(l.Modal,{className:i,open:c,onClose:e=>{s(!0),(null==t?void 0:t.onDismiss)&&t.onDismiss(e)},closeAfterTransition:!0,BackdropComponent:l.Backdrop,BackdropProps:{timeout:300}},(()=>{switch(t.effect){case"fade":default:return e.createElement(l.Fade,{in:c},e.createElement("div",{className:o,style:r},t.children));case"slide":return e.createElement(u.Slide,{in:c,direction:"left",timeout:300},e.createElement("div",{className:o},t.children))}})())},X=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||!Z[i])return Promise.reject("invalid-modal");const a=new Z[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)&&a.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)&&a.catch(null===(o=null==e?void 0:e.detail)||void 0===o?void 0:o.catch),a.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=a)};document&&(document.removeEventListener("openModal",X),document.addEventListener("openModal",X)),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.FadeModal=t=>e.createElement(Q,{fixedWidth:t.widthValue,showModal:t.showModal,onClose:t.onClose,onDismiss:t.onDismiss},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),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.GraphingContext=p,exports.GraphingControl=z,exports.GraphingControlModel=class{constructor(e){this.controlType=e.controlType,this.dataKey=e.dataKey}},exports.GraphingControlSettingsModel=k,exports.GraphingGrid=({})=>{const{settings:t}=m(),[l,n]=e.useState(null),[r,o]=e.useState(!1);e.useEffect((()=>{setTimeout((()=>{window.dispatchEvent(new Event("resize")),setTimeout((()=>{o(!0)}),300)}),300)}),[]),e.useEffect((()=>{n(t?new M(t):null)}),[t]);if(!l)return null;let i="graphing-grid-container";return r&&(i+=" in"),e.createElement(e.Fragment,null,e.createElement("div",{className:i},e.createElement("h2",{className:"graphing-grid-title"},null==t?void 0:t.title,(null==t?void 0:t.infoIconUrl)&&t.infoIconHref?e.createElement("a",{className:"information-anchor",href:t.infoIconHref,target:"_blank"},e.createElement("img",{alt:null==t?void 0:t.title,src:null==t?void 0:t.infoIconUrl})):null),e.createElement("hr",{className:"graphing-grid-hr"}),e.createElement(y,{graphingTiles:l.tiles,responsive:l.responsive,columns:l.columns,containerPadding:l.containerPadding,referenceMargin:l.referenceMargin,referenceWidth:l.referenceWidth})))},exports.GraphingSettingsModel=M,exports.GraphingTile=f,exports.GraphingTileControls=H,exports.GraphingTileModel=I,exports.GraphingTileSettingsModel=C,exports.GraphingTiles=y,exports.HorizontalTile=W,exports.HorizontalTileModel=L,exports.Modal=class{constructor(e){this._props=e}open(){return new Promise(((t,l)=>{let n,r;"function"==typeof this._props.onClose&&(n=this._props.onClose),this._props.onClose=e=>{n&&n(e),t({dismissed:!1,result:e}),U()},"function"==typeof this._props.onDismiss&&(r=this._props.onClose),this._props.onDismiss=()=>{r&&r(),t({dismissed:!0}),U()};let o=e.createElement(g,{stylePrefix:"MoorrFieldValidationModal"},e.createElement(this.getComponent(),this._props));K.push(this._container=document.createElement("div")),this._container.className="moorr-modal-container",document.body.appendChild(this._container),c.render(o,this._container)}))}},exports.MoorrModal=Q,exports.MultipleControlsTileModel=G,exports.SelectableStatesTile=O,exports.SelectableStatesTileModel=_,exports.SingleControlTileModel=F,exports.SingleTile=j,exports.SingleTileModel=B,exports.VerticalTile=V,exports.VerticalTileModel=q,exports.createGraphingControl=P,exports.createGraphingControls=function(e){const t=[];return e.forEach((e=>{const l=P(e);l&&t.push(l)})),t},exports.createGraphingTile=w,exports.createGraphingTiles=function(e){const t=[];return e.forEach((e=>{const l=w(e);l&&t.push(l)})),t},exports.modals=Z,exports.modalsStack=K,exports.registerGraphingControl=function(e,t){S[e]=t},exports.registerGraphingControlComponent=function(e,t){e&&t&&($[e]=t)},exports.registerGraphingTile=N,exports.registerGraphingTileComponent=v;
+"use strict";var e=require("react"),t=require("moorr-common"),l=require("@material-ui/core"),n=require("@material-ui/core/styles"),r=require("@material-ui/styles"),o=require("uuid"),i=require("react-grid-layout"),a=require("@material-ui/core/MenuItem"),s=require("@material-ui/core/TextField"),c=require("react-dom"),u=require("@mui/material");const d={};var g=({stylePrefix:t,children:i})=>{let a;if(t)a=d[t]?d[t]:d[t]=r.createGenerateClassName({seed:t});else{const e=`MoorrStylesProvider-${o.v4()}-`;a=r.createGenerateClassName({seed:e})}return e.createElement(r.StylesProvider,{generateClassName:a,injectFirst:!0},e.createElement(l.StylesProvider,{generateClassName:a,injectFirst:!0},e.createElement(n.StylesProvider,{generateClassName:a},i)))};const p=e.createContext({});function m(){return e.useContext(p)}const h={};function v(e,t){e&&t&&(h[e]=t)}const f=({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=h[t.tile.tileType]||null;return r?e.createElement(r,{graphingTile:t,graphingTileIndex:l}):null},x=[20,20],E={lg:600,sm:0},b={lg:8,sm:2},y=({tilePrefix:t,responsive:l,columns:n,containerPadding:r,referenceMargin:o,referenceWidth:a,graphingTiles:s})=>{const[c,u]=e.useState(null),[d,g]=e.useState(null),[p,m]=e.useState(null),[h,v]=e.useState(null),y=e.useRef(null),T=()=>{const e=(null==y?void 0:y.current)?(null==y?void 0:y.current).getBoundingClientRect().width:null;v(e);const t=M(e);u(t)};let N;const w=e=>{T(),clearTimeout(N),N=setTimeout((()=>{T()}),300)};e.useEffect((()=>{T()}),[y]),e.useEffect((()=>(window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)})),[]),e.useEffect((()=>{if(l){if(!Array.isArray(s)||0===s.length)return void m({lg:[]});m({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 g([]);g(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 C=()=>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(f,{graphingTile:l,graphingTileIndex:n}))})),M=e=>{if(!o||isNaN(o)||o<=0||!a||isNaN(a)||a<=0||null==e)return x;const t=e/a*o;return[t,t]};return e.createElement("div",{ref:y,className:"graphing-tiles-container"},(()=>{if(!h||!c)return null;if(!1!==l){if(!p)return null;const t=[r||0,0];return e.createElement(i.Responsive,{width:h,breakpoints:E,cols:n||b,rowHeight:1,layouts:p,containerPadding:t,margin:c,isDraggable:!1},C())}return d?e.createElement(i,{width:h,cols:9,rowHeight:50,margin:c,isDraggable:!1,layout:d},C()):null})())},T={};function N(e,t){T[e]=t}function w(e){const t=T[null==e?void 0:e.tileType];return t?new t(e):null}class C{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=w(e.tile),this.visible=!1!==e.visible}getBackground(){return this.background||"#FFFFFF"}}class M{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 C(e))}))}}const S={};function P(e){const t=S[null==e?void 0:e.controlType];return t?new t(e):null}class k{constructor(e){this.border=e.border,this.background=e.background||null,this.control=P(e.control)}getBackground(e){return this.background||(null==e?void 0:e.background)||"#FFFFFF"}}class I{constructor(e){this.tileType=e.tileType}}class G extends I{constructor(e){super(e),this.control=new k(e.control)}}class F extends I{constructor(e){super(e),this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new k(e))}))}}class L extends F{constructor(e){super(e),this.controlsPerPage=e.controlsPerPage,(isNaN(this.controlsPerPage)||this.controlsPerPage<=1)&&(this.controlsPerPage=1)}}N("horizontal-tile",L);class _ extends F{constructor(e){super(e),this.states={};for(const t in e.states){const l=e.states[t];l&&(this.states[t]=new M(l))}}}N("selectable-states-tile",_);class B extends G{constructor(e){super(e)}}N("single-tile",B);class q extends F{constructor(e){super(e)}}N("vertical-tile",q);const $={};const z=({graphingTile:t,graphingTileIndex:l,graphingTileControl:n})=>{var r;if(!(null===(r=null==n?void 0:n.control)||void 0===r?void 0:r.controlType))return null;const o=$[n.control.controlType]||null;return o?e.createElement(o,{graphingTile:t,graphingTileIndex:l,graphingTileControl:n}):null},H=({graphingTile:t,graphingTileIndex:l,graphingTileControls:n})=>{var r,o;let i="graphing-tile-controls-container";return(null===(r=null==t?void 0:t.tile)||void 0===r?void 0:r.tileType)&&(i+=" "+(null===(o=null==t?void 0:t.tile)||void 0===o?void 0:o.tileType)),e.createElement("div",{className:i},null==n?void 0:n.map(((n,r)=>{var o,i;if(!n.control)return null;let a="graphing-tile-control-container";(null===(o=n.control)||void 0===o?void 0:o.controlType)&&(a+=" "+(null===(i=n.control)||void 0===i?void 0:i.controlType)),!1!==n.border&&(a+=" bordered");const s=`control_${l}_${r}`;return e.createElement("div",{className:a,key:s},e.createElement(z,{graphingTile:t,graphingTileIndex:l,graphingTileControl:n}))})))},W=({graphingTile:t,graphingTileIndex:l})=>{const n=null==t?void 0:t.tile;if(!n)return null;const[r,o]=e.useState(null),[i,a]=e.useState(0),[s,c]=e.useState(0),[u,d]=e.useState(null),[g,p]=e.useState(null),[m,h]=e.useState(null),[v,f]=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)}a(t),c(0),d(null),p(null),h(null),f(e)}),n.controls);const x=e=>{let t=e-1;t<0&&(t=i-1),p(t)},E=e=>{e.stopPropagation(),x(s),h(null),d(null)},b=e=>{e.stopPropagation()},y=e=>{e.stopPropagation()},T=e=>{if(e.stopPropagation(),null!==r)return;const t=s;let l=s-1;l<0&&(l=i-1),d(t),c(l),p(null),h(t);const n=setTimeout((()=>{x(l),h(null),d(null),setTimeout((function(){o(null)}),300)}),300);o(n)},N=e=>{let t=e+1;t>=i&&(t=0),h(t)},w=e=>{e.stopPropagation(),p(null),N(s),d(null)},C=e=>{e.stopPropagation()},M=e=>{e.stopPropagation()},S=e=>{if(e.stopPropagation(),null!==r)return;const t=s;let l=s+1;l>=i&&(l=0),d(t),c(l),p(t),h(null);const n=setTimeout((()=>{p(null),N(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"},v.map(((n,r)=>{let o="horizontal-tile-page-container";return r===s?o+=" active":r===g?o+=" navigating-from-left":r===m&&(o+=" navigating-from-right"),r===u&&(o+=" previous"),e.createElement("div",{className:o},e.createElement(H,{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:E,onMouseLeave:b,onMouseDown:y,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:C,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===s&&(l+=" active"),e.createElement("a",{className:l,onMouseEnter:e=>{e.stopPropagation(),t!==s&&(t<s?(p(t),h(null)):(p(null),h(t)),d(null))},onMouseLeave:e=>{e.stopPropagation()},onMouseDown:e=>{e.stopPropagation()},onClick:e=>{if(e.stopPropagation(),t===s)return;const l=s,n=t;d(l),c(n),l<n?p(l):h(l)}})}))))};v("horizontal-tile",W);const D=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(D);const A=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 R=n.withStyles(D)((({handleChange:t,value:l,disabled:n=!1,name:r,className:o,classes:i,size:c,menuItemLabel:u,options:d,labelPlacement:g="start",label:p,required:m=!1,isMBRequiredField:h,fullWidth:v,selectIconComponent:f})=>{const{root:x,focused:E,error:b,notchedOutline:y,notchedOutlineMBRequired:T}=i,N=A();let w;return f&&(w={IconComponent:f}),e.createElement(s,{fullWidth:!1!==v,id:"outlined-basic",variant:"outlined",value:l,onChange:t,disabled:n,name:r,className:[o].join(" "),InputProps:{classes:{root:x,focused:E,error:b,notchedOutline:!h||l&&0!==(null==l?void 0:l.length)?!m||l&&0!==(null==l?void 0:l.length)?y:N.mandatory:T}},color:"primary",size:c||"small",select:!0,SelectProps:w,defaultValue:""},e.createElement(a,{value:"",disabled:!0},e.createElement("em",null,u)),d&&d.map((t=>"-separator-"===t?e.createElement(a,{value:"",disabled:!0},e.createElement("em",null,"-----------")):e.createElement(a,{value:t.value||t},t.label||t))))}));const O=({graphingTile:t})=>{const l=null==t?void 0:t.tile;if(!l)return null;const[n,r]=e.useState(null),[o,i]=e.useState(null),[a,s]=e.useState([]),c=m();e.useEffect((()=>{const e=Object.keys(l.states);if(s(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(null),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(R,{options:a,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(y,{tilePrefix:n,graphingTiles:o.tiles,responsive:o.responsive,columns:o.columns,containerPadding:o.containerPadding,referenceMargin:o.referenceMargin,referenceWidth:o.referenceWidth}):null))};v("selectable-states-tile",O);const j=({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(H,{graphingTile:t,graphingTileIndex:l,graphingTileControls:r}))};v("single-tile",j);const V=({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(H,{graphingTile:t,graphingTileIndex:l,graphingTileControls:r}))};v("vertical-tile",V);const U=()=>{setTimeout((()=>{const e=K.pop();e&&(c.unmountComponentAtNode(e),e.remove())}),300)};const K=[],Z={},J=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)}}))),Q=t=>{const n=J(),r={};t.fixedWidth&&(r.width=t.fixedWidth),t.fixedHeight&&(r.height=t.fixedHeight);let o=n.paper+" moorr-modal-content-container";t.contentClassName&&(o+=" "+t.contentClassName);let i=n.modal;switch(i+=" moorr-modal-container",t.effect){case"fade":i+=" moorr-fade-modal";break;case"slide":i+=" moorr-slide-modal"}const[a,s]=e.useState(!1),[c,d]=e.useState(!1);e.useEffect((()=>{d(!a&&!1!==t.showModal)}),[a,c]);return e.createElement(l.Modal,{className:i,open:c,onClose:e=>{s(!0),(null==t?void 0:t.onDismiss)&&t.onDismiss(e)},closeAfterTransition:!0,BackdropComponent:l.Backdrop,BackdropProps:{timeout:300}},(()=>{switch(t.effect){case"fade":default:return e.createElement(l.Fade,{in:c},e.createElement("div",{className:o,style:r},t.children));case"slide":return e.createElement(u.Slide,{in:c,direction:"left",timeout:300},e.createElement("div",{className:o},t.children))}})())},X=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||!Z[i])return Promise.reject("invalid-modal");const a=new Z[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)&&a.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)&&a.catch(null===(o=null==e?void 0:e.detail)||void 0===o?void 0:o.catch),a.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=a)};document&&(document.removeEventListener("openModal",X),document.addEventListener("openModal",X)),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.FadeModal=t=>e.createElement(Q,{fixedWidth:t.widthValue,showModal:t.showModal,onClose:t.onClose,onDismiss:t.onDismiss},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),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.GraphingContext=p,exports.GraphingControl=z,exports.GraphingControlModel=class{constructor(e){this.controlType=e.controlType,this.dataKey=e.dataKey}},exports.GraphingControlSettingsModel=k,exports.GraphingGrid=({})=>{const{settings:t}=m(),[l,n]=e.useState(null),[r,o]=e.useState(!1);e.useEffect((()=>{setTimeout((()=>{window.dispatchEvent(new Event("resize")),setTimeout((()=>{o(!0)}),300)}),300)}),[]),e.useEffect((()=>{n(t?new M(t):null)}),[t]);if(!l)return null;let i="graphing-grid-container";return r&&(i+=" in"),e.createElement(e.Fragment,null,e.createElement("div",{className:i},e.createElement("h2",{className:"graphing-grid-title"},null==t?void 0:t.title,(null==t?void 0:t.infoIconUrl)&&t.infoIconHref?e.createElement("a",{className:"information-anchor",href:t.infoIconHref,target:"_blank"},e.createElement("img",{alt:null==t?void 0:t.title,src:null==t?void 0:t.infoIconUrl})):null),e.createElement("hr",{className:"graphing-grid-hr"}),e.createElement(y,{graphingTiles:l.tiles,responsive:l.responsive,columns:l.columns,containerPadding:l.containerPadding,referenceMargin:l.referenceMargin,referenceWidth:l.referenceWidth})))},exports.GraphingSettingsModel=M,exports.GraphingTile=f,exports.GraphingTileControls=H,exports.GraphingTileModel=I,exports.GraphingTileSettingsModel=C,exports.GraphingTiles=y,exports.HorizontalTile=W,exports.HorizontalTileModel=L,exports.Modal=class{constructor(e){this._props=e}open(){return new Promise(((t,l)=>{let n,r;"function"==typeof this._props.onClose&&(n=this._props.onClose),this._props.onClose=e=>{n&&n(e),t({dismissed:!1,result:e}),U()},"function"==typeof this._props.onDismiss&&(r=this._props.onClose),this._props.onDismiss=()=>{r&&r(),t({dismissed:!0}),U()};let o=e.createElement(g,{stylePrefix:"MoorrFieldValidationModal"},e.createElement(this.getComponent(),this._props));K.push(this._container=document.createElement("div")),this._container.className="moorr-modal-container",document.body.appendChild(this._container),c.render(o,this._container)}))}},exports.MoorrModal=Q,exports.MultipleControlsTileModel=F,exports.SelectableStatesTile=O,exports.SelectableStatesTileModel=_,exports.SingleControlTileModel=G,exports.SingleTile=j,exports.SingleTileModel=B,exports.VerticalTile=V,exports.VerticalTileModel=q,exports.createGraphingControl=P,exports.createGraphingControls=function(e){const t=[];return e.forEach((e=>{const l=P(e);l&&t.push(l)})),t},exports.createGraphingTile=w,exports.createGraphingTiles=function(e){const t=[];return e.forEach((e=>{const l=w(e);l&&t.push(l)})),t},exports.modals=Z,exports.modalsStack=K,exports.registerGraphingControl=function(e,t){S[e]=t},exports.registerGraphingControlComponent=function(e,t){e&&t&&($[e]=t)},exports.registerGraphingTile=N,exports.registerGraphingTileComponent=v,exports.useGraphingContext=m;

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

@@ -1,4 +1,4 @@
-export { default as GraphingContext } from "./graphing.context";
+export { default as GraphingContext, GraphingContextResult, useGraphingContext } from "./graphing.context";
 export { GraphingGrid } from "./graphing-grid.component";
 export { GraphingTileControls } from "./graphing-tile-controls.component";
 export { GraphingTiles } from "./graphing-tiles.component";

package/index.d.ts

@@ -171,7 +171,9 @@ type GraphingContextResult = {
  * Context
  * ----------------------------------------------------------------------------
  */
-declare const GraphingContext: React.Context<GraphingContextResult>;
+declare const GraphingContext: React.Context<GraphingContextResult>;
+
+declare function useGraphingContext(): GraphingContextResult;
 
 /** ---------------------------------------------------------------------------
  * Private
@@ -358,4 +360,4 @@ interface FadeModalProps {
 }
 declare const FadeModal: React__default.FC<FadeModalProps>;
 
-export { Button, FadeModal, GraphingContext, GraphingControl, GraphingControlModel, GraphingControlProps, GraphingControlSettingsModel, GraphingGrid, GraphingSettingsModel, GraphingTile, GraphingTileControls, GraphingTileModel, GraphingTileProps, GraphingTileSettingsModel, GraphingTiles, HorizontalTile, HorizontalTileModel, 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 };
+export { Button, FadeModal, GraphingContext, GraphingContextResult, GraphingControl, GraphingControlModel, GraphingControlProps, GraphingControlSettingsModel, GraphingGrid, GraphingSettingsModel, GraphingTile, GraphingTileControls, GraphingTileModel, GraphingTileProps, GraphingTileSettingsModel, GraphingTiles, HorizontalTile, HorizontalTileModel, 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, 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{StylesProvider as a,Modal as s,Backdrop as c,Fade as d}from"@material-ui/core";import{StylesProvider as u,makeStyles as m,createStyles as g,withStyles as h}from"@material-ui/core/styles";import{createGenerateClassName as p,StylesProvider as v}from"@material-ui/styles";import{v4 as f}from"uuid";import b,{Responsive as E}from"react-grid-layout";import y from"@material-ui/core/MenuItem";import T from"@material-ui/core/TextField";import w from"react-dom";import{Slide as N}from"@mui/material";const x=({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))),P={};var M=({stylePrefix:t,children:n})=>{let l;if(t)l=P[t]?P[t]:P[t]=p({seed:t});else{const e=`MoorrStylesProvider-${f()}-`;l=p({seed:e})}return e.createElement(v,{generateClassName:l,injectFirst:!0},e.createElement(a,{generateClassName:l,injectFirst:!0},e.createElement(u,{generateClassName:l},n)))};const C=n({});function k(){return l(C)}const I={};function L(e,t){e&&t&&(I[e]=t)}const _=({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=I[t.tile.tileType]||null;return o?e.createElement(o,{graphingTile:t,graphingTileIndex:n}):null},F=[20,20],S={lg:600,sm:0},$={lg:8,sm:2},B=({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,y]=o(null),T=r(null),w=()=>{const e=(null==T?void 0:T.current)?(null==T?void 0:T.current).getBoundingClientRect().width:null;y(e);const t=M(e);m(t)};let N;const x=e=>{w(),clearTimeout(N),N=setTimeout((()=>{w()}),300)};t((()=>{w()}),[T]),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 P=()=>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(_,{graphingTile:t,graphingTileIndex:l}))})),M=e=>{if(!s||isNaN(s)||s<=0||!c||isNaN(c)||c<=0||null==e)return F;const t=e/c*s;return[t,t]};return e.createElement("div",{ref:T,className:"graphing-tiles-container"},(()=>{if(!f||!u)return null;if(!1!==l){if(!p)return null;const t=[a||0,0];return e.createElement(E,{width:f,breakpoints:S,cols:i||$,rowHeight:1,layouts:p,containerPadding:t,margin:u,isDraggable:!1},P())}return g?e.createElement(b,{width:f,cols:9,rowHeight:50,margin:u,isDraggable:!1,layout:g},P()):null})())},W={};function D(e,t){W[e]=t}function z(e){const t=W[null==e?void 0:e.tileType];return t?new t(e):null}function A(e){const t=[];return e.forEach((e=>{const n=z(e);n&&t.push(n)})),t}class H{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=z(e.tile),this.visible=!1!==e.visible}getBackground(){return this.background||"#FFFFFF"}}class R{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 H(e))}))}}const O={};function j(e,t){O[e]=t}function q(e){const t=O[null==e?void 0:e.controlType];return t?new t(e):null}function U(e){const t=[];return e.forEach((e=>{const n=q(e);n&&t.push(n)})),t}class V{constructor(e){this.controlType=e.controlType,this.dataKey=e.dataKey}}class K{constructor(e){this.border=e.border,this.background=e.background||null,this.control=q(e.control)}getBackground(e){return this.background||(null==e?void 0:e.background)||"#FFFFFF"}}class Z{constructor(e){this.tileType=e.tileType}}class G extends Z{constructor(e){super(e),this.control=new K(e.control)}}class J extends Z{constructor(e){super(e),this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new K(e))}))}}class Q extends J{constructor(e){super(e),this.controlsPerPage=e.controlsPerPage,(isNaN(this.controlsPerPage)||this.controlsPerPage<=1)&&(this.controlsPerPage=1)}}D("horizontal-tile",Q);class X extends J{constructor(e){super(e),this.states={};for(const t in e.states){const n=e.states[t];n&&(this.states[t]=new R(n))}}}D("selectable-states-tile",X);class Y extends G{constructor(e){super(e)}}D("single-tile",Y);class ee extends J{constructor(e){super(e)}}D("vertical-tile",ee);const te=({})=>{const{settings:n}=k(),[l,r]=o(null),[i,a]=o(!1);t((()=>{setTimeout((()=>{window.dispatchEvent(new Event("resize")),setTimeout((()=>{a(!0)}),300)}),300)}),[]),t((()=>{r(n?new R(n):null)}),[n]);if(!l)return null;let s="graphing-grid-container";return i&&(s+=" in"),e.createElement(e.Fragment,null,e.createElement("div",{className:s},e.createElement("h2",{className:"graphing-grid-title"},null==n?void 0:n.title,(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),e.createElement("hr",{className:"graphing-grid-hr"}),e.createElement(B,{graphingTiles:l.tiles,responsive:l.responsive,columns:l.columns,containerPadding:l.containerPadding,referenceMargin:l.referenceMargin,referenceWidth:l.referenceWidth})))},ne={};function le(e,t){e&&t&&(ne[e]=t)}const oe=({graphingTile:t,graphingTileIndex:n,graphingTileControl:l})=>{var o;if(!(null===(o=null==l?void 0:l.control)||void 0===o?void 0:o.controlType))return null;const r=ne[l.control.controlType]||null;return r?e.createElement(r,{graphingTile:t,graphingTileIndex:n,graphingTileControl:l}):null},re=({graphingTile:t,graphingTileIndex:n,graphingTileControls:l})=>{var o,r;let i="graphing-tile-controls-container";return(null===(o=null==t?void 0:t.tile)||void 0===o?void 0:o.tileType)&&(i+=" "+(null===(r=null==t?void 0:t.tile)||void 0===r?void 0:r.tileType)),e.createElement("div",{className:i},null==l?void 0:l.map(((l,o)=>{var r,i;if(!l.control)return null;let a="graphing-tile-control-container";(null===(r=l.control)||void 0===r?void 0:r.controlType)&&(a+=" "+(null===(i=l.control)||void 0===i?void 0:i.controlType)),!1!==l.border&&(a+=" bordered");const s=`control_${n}_${o}`;return e.createElement("div",{className:a,key:s},e.createElement(oe,{graphingTile:t,graphingTileIndex:n,graphingTileControl:l}))})))},ie=({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),[b,E]=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),E(e)}),r.controls);const y=e=>{let t=e-1;t<0&&(t=s-1),p(t)},T=e=>{e.stopPropagation(),y(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((()=>{y(n),f(null),g(null),setTimeout((function(){a(null)}),300)}),300);a(l)},P=e=>{let t=e+1;t>=s&&(t=0),f(t)},M=e=>{e.stopPropagation(),p(null),P(d),g(null)},C=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),P(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"},b.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(re,{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:M,onMouseLeave:C,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)}})}))))};L("horizontal-tile",ie);const ae=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"}});m(ae);const se=m((()=>g({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 ce=h(ae)((({handleChange:t,value:n,disabled:l=!1,name:o,className:r,classes:i,size:a,menuItemLabel:s,options:c,labelPlacement:d="start",label:u,required:m=!1,isMBRequiredField:g,fullWidth:h,selectIconComponent:p})=>{const{root:v,focused:f,error:b,notchedOutline:E,notchedOutlineMBRequired:w}=i,N=se();let x;return p&&(x={IconComponent:p}),e.createElement(T,{fullWidth:!1!==h,id:"outlined-basic",variant:"outlined",value:n,onChange:t,disabled:l,name:o,className:[r].join(" "),InputProps:{classes:{root:v,focused:f,error:b,notchedOutline:!g||n&&0!==(null==n?void 0:n.length)?!m||n&&0!==(null==n?void 0:n.length)?E:N.mandatory:w}},color:"primary",size:a||"small",select:!0,SelectProps:x,defaultValue:""},e.createElement(y,{value:"",disabled:!0},e.createElement("em",null,s)),c&&c.map((t=>"-separator-"===t?e.createElement(y,{value:"",disabled:!0},e.createElement("em",null,"-----------")):e.createElement(y,{value:t.value||t},t.label||t))))}));const de=({graphingTile:n})=>{const l=null==n?void 0:n.tile;if(!l)return null;const[r,i]=o(null),[a,s]=o(null),[c,d]=o([]),u=k();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(null),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(ce,{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(B,{tilePrefix:r,graphingTiles:a.tiles,responsive:a.responsive,columns:a.columns,containerPadding:a.containerPadding,referenceMargin:a.referenceMargin,referenceWidth:a.referenceWidth}):null))};L("selectable-states-tile",de);const ue=({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(re,{graphingTile:t,graphingTileIndex:n,graphingTileControls:o}))};L("single-tile",ue);const me=({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(re,{graphingTile:t,graphingTileIndex:n,graphingTileControls:o}))};L("vertical-tile",me);const ge=()=>{setTimeout((()=>{const e=pe.pop();e&&(w.unmountComponentAtNode(e),e.remove())}),300)};let he=class{constructor(e){this._props=e}open(){return new Promise(((t,n)=>{let l,o;"function"==typeof this._props.onClose&&(l=this._props.onClose),this._props.onClose=e=>{l&&l(e),t({dismissed:!1,result:e}),ge()},"function"==typeof this._props.onDismiss&&(o=this._props.onClose),this._props.onDismiss=()=>{o&&o(),t({dismissed:!0}),ge()};let r=e.createElement(M,{stylePrefix:"MoorrFieldValidationModal"},e.createElement(this.getComponent(),this._props));pe.push(this._container=document.createElement("div")),this._container.className="moorr-modal-container",document.body.appendChild(this._container),w.render(r,this._container)}))}};const pe=[],ve={},fe=m((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)}}))),be=n=>{const l=fe(),r={};n.fixedWidth&&(r.width=n.fixedWidth),n.fixedHeight&&(r.height=n.fixedHeight);let i=l.paper+" moorr-modal-content-container";n.contentClassName&&(i+=" "+n.contentClassName);let a=l.modal;switch(a+=" moorr-modal-container",n.effect){case"fade":a+=" moorr-fade-modal";break;case"slide":a+=" moorr-slide-modal"}const[u,m]=o(!1),[g,h]=o(!1);t((()=>{h(!u&&!1!==n.showModal)}),[u,g]);return e.createElement(s,{className:a,open:g,onClose:e=>{m(!0),(null==n?void 0:n.onDismiss)&&n.onDismiss(e)},closeAfterTransition:!0,BackdropComponent:c,BackdropProps:{timeout:300}},(()=>{switch(n.effect){case"fade":default:return e.createElement(d,{in:g},e.createElement("div",{className:i,style:r},n.children));case"slide":return e.createElement(N,{in:g,direction:"left",timeout:300},e.createElement("div",{className:i},n.children))}})())},Ee=t=>e.createElement(be,{fixedWidth:t.widthValue,showModal:t.showModal,onClose:t.onClose,onDismiss:t.onDismiss},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),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)))),ye=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||!ve[i])return Promise.reject("invalid-modal");const a=new ve[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",ye),document.addEventListener("openModal",ye));export{x as Button,Ee as FadeModal,C as GraphingContext,oe as GraphingControl,V as GraphingControlModel,K as GraphingControlSettingsModel,te as GraphingGrid,R as GraphingSettingsModel,_ as GraphingTile,re as GraphingTileControls,Z as GraphingTileModel,H as GraphingTileSettingsModel,B as GraphingTiles,ie as HorizontalTile,Q as HorizontalTileModel,he as Modal,be as MoorrModal,J as MultipleControlsTileModel,de as SelectableStatesTile,X as SelectableStatesTileModel,G as SingleControlTileModel,ue as SingleTile,Y as SingleTileModel,me as VerticalTile,ee as VerticalTileModel,q as createGraphingControl,U as createGraphingControls,z as createGraphingTile,A as createGraphingTiles,ve as modals,pe as modalsStack,j as registerGraphingControl,le as registerGraphingControlComponent,D as registerGraphingTile,L as registerGraphingTileComponent};
+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{StylesProvider as a,Modal as s,Backdrop as c,Fade as d}from"@material-ui/core";import{StylesProvider as u,makeStyles as m,createStyles as g,withStyles as h}from"@material-ui/core/styles";import{createGenerateClassName as p,StylesProvider as v}from"@material-ui/styles";import{v4 as f}from"uuid";import b,{Responsive as E}from"react-grid-layout";import y from"@material-ui/core/MenuItem";import T from"@material-ui/core/TextField";import w from"react-dom";import{Slide as N}from"@mui/material";const x=({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))),P={};var M=({stylePrefix:t,children:n})=>{let l;if(t)l=P[t]?P[t]:P[t]=p({seed:t});else{const e=`MoorrStylesProvider-${f()}-`;l=p({seed:e})}return e.createElement(v,{generateClassName:l,injectFirst:!0},e.createElement(a,{generateClassName:l,injectFirst:!0},e.createElement(u,{generateClassName:l},n)))};const C=n({});function k(){return l(C)}const I={};function L(e,t){e&&t&&(I[e]=t)}const _=({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=I[t.tile.tileType]||null;return o?e.createElement(o,{graphingTile:t,graphingTileIndex:n}):null},F=[20,20],S={lg:600,sm:0},$={lg:8,sm:2},B=({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,y]=o(null),T=r(null),w=()=>{const e=(null==T?void 0:T.current)?(null==T?void 0:T.current).getBoundingClientRect().width:null;y(e);const t=M(e);m(t)};let N;const x=e=>{w(),clearTimeout(N),N=setTimeout((()=>{w()}),300)};t((()=>{w()}),[T]),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 P=()=>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(_,{graphingTile:t,graphingTileIndex:l}))})),M=e=>{if(!s||isNaN(s)||s<=0||!c||isNaN(c)||c<=0||null==e)return F;const t=e/c*s;return[t,t]};return e.createElement("div",{ref:T,className:"graphing-tiles-container"},(()=>{if(!f||!u)return null;if(!1!==l){if(!p)return null;const t=[a||0,0];return e.createElement(E,{width:f,breakpoints:S,cols:i||$,rowHeight:1,layouts:p,containerPadding:t,margin:u,isDraggable:!1},P())}return g?e.createElement(b,{width:f,cols:9,rowHeight:50,margin:u,isDraggable:!1,layout:g},P()):null})())},W={};function D(e,t){W[e]=t}function z(e){const t=W[null==e?void 0:e.tileType];return t?new t(e):null}function A(e){const t=[];return e.forEach((e=>{const n=z(e);n&&t.push(n)})),t}class H{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=z(e.tile),this.visible=!1!==e.visible}getBackground(){return this.background||"#FFFFFF"}}class R{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 H(e))}))}}const O={};function j(e,t){O[e]=t}function q(e){const t=O[null==e?void 0:e.controlType];return t?new t(e):null}function U(e){const t=[];return e.forEach((e=>{const n=q(e);n&&t.push(n)})),t}class V{constructor(e){this.controlType=e.controlType,this.dataKey=e.dataKey}}class K{constructor(e){this.border=e.border,this.background=e.background||null,this.control=q(e.control)}getBackground(e){return this.background||(null==e?void 0:e.background)||"#FFFFFF"}}class Z{constructor(e){this.tileType=e.tileType}}class G extends Z{constructor(e){super(e),this.control=new K(e.control)}}class J extends Z{constructor(e){super(e),this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new K(e))}))}}class Q extends J{constructor(e){super(e),this.controlsPerPage=e.controlsPerPage,(isNaN(this.controlsPerPage)||this.controlsPerPage<=1)&&(this.controlsPerPage=1)}}D("horizontal-tile",Q);class X extends J{constructor(e){super(e),this.states={};for(const t in e.states){const n=e.states[t];n&&(this.states[t]=new R(n))}}}D("selectable-states-tile",X);class Y extends G{constructor(e){super(e)}}D("single-tile",Y);class ee extends J{constructor(e){super(e)}}D("vertical-tile",ee);const te=({})=>{const{settings:n}=k(),[l,r]=o(null),[i,a]=o(!1);t((()=>{setTimeout((()=>{window.dispatchEvent(new Event("resize")),setTimeout((()=>{a(!0)}),300)}),300)}),[]),t((()=>{r(n?new R(n):null)}),[n]);if(!l)return null;let s="graphing-grid-container";return i&&(s+=" in"),e.createElement(e.Fragment,null,e.createElement("div",{className:s},e.createElement("h2",{className:"graphing-grid-title"},null==n?void 0:n.title,(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),e.createElement("hr",{className:"graphing-grid-hr"}),e.createElement(B,{graphingTiles:l.tiles,responsive:l.responsive,columns:l.columns,containerPadding:l.containerPadding,referenceMargin:l.referenceMargin,referenceWidth:l.referenceWidth})))},ne={};function le(e,t){e&&t&&(ne[e]=t)}const oe=({graphingTile:t,graphingTileIndex:n,graphingTileControl:l})=>{var o;if(!(null===(o=null==l?void 0:l.control)||void 0===o?void 0:o.controlType))return null;const r=ne[l.control.controlType]||null;return r?e.createElement(r,{graphingTile:t,graphingTileIndex:n,graphingTileControl:l}):null},re=({graphingTile:t,graphingTileIndex:n,graphingTileControls:l})=>{var o,r;let i="graphing-tile-controls-container";return(null===(o=null==t?void 0:t.tile)||void 0===o?void 0:o.tileType)&&(i+=" "+(null===(r=null==t?void 0:t.tile)||void 0===r?void 0:r.tileType)),e.createElement("div",{className:i},null==l?void 0:l.map(((l,o)=>{var r,i;if(!l.control)return null;let a="graphing-tile-control-container";(null===(r=l.control)||void 0===r?void 0:r.controlType)&&(a+=" "+(null===(i=l.control)||void 0===i?void 0:i.controlType)),!1!==l.border&&(a+=" bordered");const s=`control_${n}_${o}`;return e.createElement("div",{className:a,key:s},e.createElement(oe,{graphingTile:t,graphingTileIndex:n,graphingTileControl:l}))})))},ie=({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),[b,E]=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),E(e)}),r.controls);const y=e=>{let t=e-1;t<0&&(t=s-1),p(t)},T=e=>{e.stopPropagation(),y(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((()=>{y(n),f(null),g(null),setTimeout((function(){a(null)}),300)}),300);a(l)},P=e=>{let t=e+1;t>=s&&(t=0),f(t)},M=e=>{e.stopPropagation(),p(null),P(d),g(null)},C=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),P(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"},b.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(re,{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:M,onMouseLeave:C,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)}})}))))};L("horizontal-tile",ie);const ae=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"}});m(ae);const se=m((()=>g({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 ce=h(ae)((({handleChange:t,value:n,disabled:l=!1,name:o,className:r,classes:i,size:a,menuItemLabel:s,options:c,labelPlacement:d="start",label:u,required:m=!1,isMBRequiredField:g,fullWidth:h,selectIconComponent:p})=>{const{root:v,focused:f,error:b,notchedOutline:E,notchedOutlineMBRequired:w}=i,N=se();let x;return p&&(x={IconComponent:p}),e.createElement(T,{fullWidth:!1!==h,id:"outlined-basic",variant:"outlined",value:n,onChange:t,disabled:l,name:o,className:[r].join(" "),InputProps:{classes:{root:v,focused:f,error:b,notchedOutline:!g||n&&0!==(null==n?void 0:n.length)?!m||n&&0!==(null==n?void 0:n.length)?E:N.mandatory:w}},color:"primary",size:a||"small",select:!0,SelectProps:x,defaultValue:""},e.createElement(y,{value:"",disabled:!0},e.createElement("em",null,s)),c&&c.map((t=>"-separator-"===t?e.createElement(y,{value:"",disabled:!0},e.createElement("em",null,"-----------")):e.createElement(y,{value:t.value||t},t.label||t))))}));const de=({graphingTile:n})=>{const l=null==n?void 0:n.tile;if(!l)return null;const[r,i]=o(null),[a,s]=o(null),[c,d]=o([]),u=k();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(null),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(ce,{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(B,{tilePrefix:r,graphingTiles:a.tiles,responsive:a.responsive,columns:a.columns,containerPadding:a.containerPadding,referenceMargin:a.referenceMargin,referenceWidth:a.referenceWidth}):null))};L("selectable-states-tile",de);const ue=({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(re,{graphingTile:t,graphingTileIndex:n,graphingTileControls:o}))};L("single-tile",ue);const me=({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(re,{graphingTile:t,graphingTileIndex:n,graphingTileControls:o}))};L("vertical-tile",me);const ge=()=>{setTimeout((()=>{const e=pe.pop();e&&(w.unmountComponentAtNode(e),e.remove())}),300)};let he=class{constructor(e){this._props=e}open(){return new Promise(((t,n)=>{let l,o;"function"==typeof this._props.onClose&&(l=this._props.onClose),this._props.onClose=e=>{l&&l(e),t({dismissed:!1,result:e}),ge()},"function"==typeof this._props.onDismiss&&(o=this._props.onClose),this._props.onDismiss=()=>{o&&o(),t({dismissed:!0}),ge()};let r=e.createElement(M,{stylePrefix:"MoorrFieldValidationModal"},e.createElement(this.getComponent(),this._props));pe.push(this._container=document.createElement("div")),this._container.className="moorr-modal-container",document.body.appendChild(this._container),w.render(r,this._container)}))}};const pe=[],ve={},fe=m((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)}}))),be=n=>{const l=fe(),r={};n.fixedWidth&&(r.width=n.fixedWidth),n.fixedHeight&&(r.height=n.fixedHeight);let i=l.paper+" moorr-modal-content-container";n.contentClassName&&(i+=" "+n.contentClassName);let a=l.modal;switch(a+=" moorr-modal-container",n.effect){case"fade":a+=" moorr-fade-modal";break;case"slide":a+=" moorr-slide-modal"}const[u,m]=o(!1),[g,h]=o(!1);t((()=>{h(!u&&!1!==n.showModal)}),[u,g]);return e.createElement(s,{className:a,open:g,onClose:e=>{m(!0),(null==n?void 0:n.onDismiss)&&n.onDismiss(e)},closeAfterTransition:!0,BackdropComponent:c,BackdropProps:{timeout:300}},(()=>{switch(n.effect){case"fade":default:return e.createElement(d,{in:g},e.createElement("div",{className:i,style:r},n.children));case"slide":return e.createElement(N,{in:g,direction:"left",timeout:300},e.createElement("div",{className:i},n.children))}})())},Ee=t=>e.createElement(be,{fixedWidth:t.widthValue,showModal:t.showModal,onClose:t.onClose,onDismiss:t.onDismiss},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),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)))),ye=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||!ve[i])return Promise.reject("invalid-modal");const a=new ve[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",ye),document.addEventListener("openModal",ye));export{x as Button,Ee as FadeModal,C as GraphingContext,oe as GraphingControl,V as GraphingControlModel,K as GraphingControlSettingsModel,te as GraphingGrid,R as GraphingSettingsModel,_ as GraphingTile,re as GraphingTileControls,Z as GraphingTileModel,H as GraphingTileSettingsModel,B as GraphingTiles,ie as HorizontalTile,Q as HorizontalTileModel,he as Modal,be as MoorrModal,J as MultipleControlsTileModel,de as SelectableStatesTile,X as SelectableStatesTileModel,G as SingleControlTileModel,ue as SingleTile,Y as SingleTileModel,me as VerticalTile,ee as VerticalTileModel,q as createGraphingControl,U as createGraphingControls,z as createGraphingTile,A as createGraphingTiles,ve as modals,pe as modalsStack,j as registerGraphingControl,le as registerGraphingControlComponent,D as registerGraphingTile,L as registerGraphingTileComponent,k as useGraphingContext};

package/package.json

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