moorr-react-mui 0.2.21 → 0.2.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/cjs/index.css +1 -1
  2. package/cjs/index.js +1 -1
  3. package/index.css +1 -1
  4. package/index.js +1 -1
  5. package/package.json +1 -1
package/cjs/index.css CHANGED
@@ -2,7 +2,7 @@
2
2
  .graphing-tiles-container{box-sizing:border-box;margin:0;padding:0;width:100%;position:relative;}.graphing-tiles-container>.react-grid-layout{width:100%;position:relative;}.graphing-tiles-container .react-grid-placeholder{background:#E3E3E3;z-index:0;}.graphing-tiles-container .graphing-tile-container.react-draggable-dragging{z-index:1;}.graphing-tiles-container .graphing-tile-container{margin:0;padding:0;background-color:#FFFFFF;}.graphing-tiles-container .graphing-tile-container.bordered{border:1px solid #E3E3E3;border-radius:0.5rem;box-shadow:0 0 2px 1px #F4F4F4;}.graphing-tiles-container .graphing-tile-container.auto-height{height:100%!important;}
3
3
  .graphing-grid-container{margin-top:1em;padding:0 24px;opacity:0;transition:opacity 1000ms cubic-bezier(0.4,0,0.2,1) 0ms;}.graphing-grid-container.in{opacity:1;}.graphing-grid-container>.graphing-grid-title{font-size:32px!important;margin-bottom:0;margin-top:0;display:flex;}.graphing-grid-container>.graphing-grid-title>a{margin-left:.5rem;margin-top:.5rem;}.graphing-grid-container>.graphing-grid-hr{margin-top:0!important;}
4
4
  .graphing-tile-controls-container{box-sizing:border-box;margin:0;padding:0;}.graphing-tile-controls-container>.graphing-tile-control-container{margin:0;padding:0;background-color:transparent;}.graphing-tile-controls-container>.graphing-tile-control-container.bordered{border:1px solid #E3E3E3;border-radius:0.5rem;box-shadow:0 0 2px 1px #F4F4F4;}
5
- .form-groups-tile-component{display:block;width:100%;height:100%;border-radius:0.5rem;background-color:transparent;}.form-groups-tile-component>.form-group-container{box-shadow:0 3px 3px rgba(0,0,0,0.025);background-color:#FFFFFF;border-radius:10px;user-select:none;cursor:pointer;}.form-groups-tile-component>.form-group-container>.form-group-title{display:block;padding:1.5rem;}.form-groups-tile-component>.form-group-container>.form-group-title>span{display:inline-block;width:calc(100% - 22px);font-family:'Poppins';font-style:normal;font-weight:400;font-size:18px;line-height:25px;color:#333333;}.form-groups-tile-component>.form-group-container>.form-group-title>svg{display:inline-block;width:11px;height:8px;margin-left:11px;transition:transform 300ms cubic-bezier(0.4,0,0.2,1) 0ms;}.form-groups-tile-component>.form-group-container.collapsed>.form-group-title>svg{transform:rorate(180deg);}.form-groups-tile-component>.form-group-container>.form-group-title>hr{margin-top:.75rem;margin-bottom:0;}.form-groups-tile-component>.form-group-container>.form-group-components{display:block;}
5
+ .form-groups-tile-component{display:block;width:100%;height:100%;border-radius:0.5rem;background-color:transparent;}.form-groups-tile-component>.form-group-container{box-shadow:0 3px 3px rgba(0,0,0,0.025);background-color:#FFFFFF;border-radius:10px;user-select:none;cursor:pointer;}.form-groups-tile-component>.form-group-container>.form-group-title{display:block;padding:1.5rem;}.form-groups-tile-component>.form-group-container>.form-group-title>span{display:inline-block;width:calc(100% - 22px);font-family:'Poppins';font-style:normal;font-weight:400;font-size:18px;line-height:25px;color:#333333;}.form-groups-tile-component>.form-group-container>.form-group-title>svg{display:inline-block;width:11px;height:8px;margin-left:11px;transition:transform 300ms cubic-bezier(0.4,0,0.2,1) 0ms;}.form-groups-tile-component>.form-group-container.collapsed>.form-group-title>svg{transform:rotate(180deg);}.form-groups-tile-component>.form-group-container>.form-group-title>hr{margin-top:.75rem;margin-bottom:0;}.form-groups-tile-component>.form-group-container>.form-group-components{display:block;}
6
6
  .horizontal-tile-component{display:flex;width:100%;height:100%;position:relative;flex-direction:column;border-radius:.5rem;}.horizontal-tile-component>.horizontal-tile-pages-container{display:block;width:100%;height:100%;position:relative;overflow:hidden;flex-grow:1;border-radius:0.5rem;}.horizontal-tile-component>.horizontal-tile-pages-container>.horizontal-tile-page-container{display:block;width:100%;height:100%;position:absolute;left:0;top:0;z-index:0;background-color:transparent;transition:left 300ms ease-in-out;}.horizontal-tile-component>.horizontal-tile-pages-container>.horizontal-tile-page-container.active{z-index:3;}.horizontal-tile-component>.horizontal-tile-pages-container>.horizontal-tile-page-container.previous{z-index:2;}.horizontal-tile-component>.horizontal-tile-pages-container>.horizontal-tile-page-container.navigating-from-left{left:-100%;}.horizontal-tile-component>.horizontal-tile-pages-container>.horizontal-tile-page-container.navigating-from-right{left:100%;}.horizontal-tile-component>.horizontal-tile-pages-container>.horizontal-tile-page-container>.graphing-tile-controls-container.horizontal-tile{display:flex;width:100%;height:100%;flex-direction:row;justify-content:space-evenly;align-items:center;padding:.5rem;}.horizontal-tile-component>.horizontal-tile-pages-container>.horizontal-tile-page-container>.graphing-tile-controls-container.horizontal-tile>.graphing-tile-control-container{height:100%;}.horizontal-tile-component>.horizontal-tile-pages-container>.horizontal-tile-page-container.background{z-index:1;}.horizontal-tile-component>.horizontal-tile-pages-container>button.navigate-button{position:absolute;border:none;background-color:transparent;opacity:0;z-index:3;}.horizontal-tile-component:hover>.horizontal-tile-pages-container>button.navigate-button{opacity:1;}.horizontal-tile-component>.horizontal-tile-pages-container>button.navigate-button.navigate-left-button{left:15px;top:50%;margin-top:-11px;transition:left 300ms ease-in-out,opacity 300ms ease-in-out;}.horizontal-tile-component:hover>.horizontal-tile-pages-container>button.navigate-button.navigate-left-button{left:5px;}.horizontal-tile-component>.horizontal-tile-pages-container>button.navigate-button.navigate-right-button{right:15px;top:50%;margin-top:-11px;transition:right 300ms ease-in-out,opacity 300ms ease-in-out;}.horizontal-tile-component:hover>.horizontal-tile-pages-container>button.navigate-button.navigate-right-button{right:5px;}.horizontal-tile-component>.horizontal-tile-paginators-container{display:flex;flex-direction:row;justify-content:center;padding:0.25rem;opacity:0;transition:opacity 300ms ease-in-out;}.horizontal-tile-component:hover>.horizontal-tile-paginators-container{opacity:1;}.horizontal-tile-component>.horizontal-tile-paginators-container>.paginator-anchor{display:block;width:8px;height:8px;border-radius:4px;border:none;background-color:#D4C5D9;cursor:pointer;transition:width 300ms ease-in-out,background-color 300ms ease-in-out;}.horizontal-tile-component>.horizontal-tile-paginators-container>.paginator-anchor+.paginator-anchor{margin-left:4px;}.horizontal-tile-component>.horizontal-tile-paginators-container>.paginator-anchor.active{width:20px;background-color:#541868;}.horizontal-tile-component>.horizontal-tile-paginators-container>.paginator-anchor:hover{background-color:#946EA0;}.horizontal-tile-component>.horizontal-tile-paginators-container>.paginator-anchor.active:hover{background-color:#541868;}
7
7
  .selectable-states-tile-component{display:flex;width:100%;height:100%;flex-direction:column;}.selectable-states-tile-component>.selectable-states-tile-header{display:flex;flex-direction:row;}.selectable-states-tile-component>.selectable-states-tile-header>.selected-state-tile-title{flex-grow:1;padding:0.5rem 1rem;font-size:1.2rem;line-height:1.2rem;}.selectable-states-tile-component>.selectable-states-tile-header>.selected-state-tile-title>h6{text-align:center;}.selectable-states-tile-component>.selectable-states-tile-header>.selectable-states-dropdown-container{padding:0.5rem;}.selectable-states-tile-component>.selected-state-tile-container{display:flex;flex-grow:1;padding:0 1rem 1rem 1rem;}.selectable-states-tile-component>.selected-state-tile-container>.graphing-tiles-container{padding:0;}.selectable-states-tile-component>.selected-state-tile-container>.graphing-tiles-container>.react-grid-layout{height:100%!important;overflow:hidden;}
8
8
  .single-tile-component{display:block;width:100%;height:100%;border-radius:0.5rem;}.single-tile-component>.graphing-tile-controls-container.single-tile{display:block;width:100%;height:100%;}.single-tile-component>.graphing-tile-controls-container.single-tile>.graphing-tile-control-container{display:flex;width:100%;height:100%;flex-wrap:wrap;align-content:center;justify-content:center;}
package/cjs/index.js CHANGED
@@ -1 +1 @@
1
- "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");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 m=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 g=n.withStyles(d)((({handleChange:t,value:n,disabled:o=!1,name:i,className:s,classes:a,size:c,menuItemLabel:u,options:d,labelPlacement:g="start",label:p,required:h=!1,isMBRequiredField:v,fullWidth:f,selectIconComponent:E})=>{const{root:x,focused:y,error:T,notchedOutline:b,notchedOutlineMBRequired:w}=a,C=m();let N;return E&&(N={IconComponent:E}),e.createElement(r,{fullWidth:!1!==f,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:!v||n&&0!==(null==n?void 0:n.length)?!h||n&&0!==(null==n?void 0:n.length)?b:C.mandatory:w}},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 p={};var h=({stylePrefix:t,children:l})=>{let r;if(t)r=p[t]?p[t]:p[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 v=e.createContext({});function f(){return e.useContext(v)}const E={};function x(e,t){e&&t&&(E[e]=t)}const y=({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=E[t.tile.tileType]||null;return r?e.createElement(r,{graphingTile:t,graphingTileIndex:l}):null},T=[20,20],b={lg:600,sm:0},w={lg:8,sm:2},C=({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),[g,p]=e.useState(null),[h,v]=e.useState(null),f=e.useRef(null),E=()=>{const e=(null==f?void 0:f.current)?(null==f?void 0:f.current).getBoundingClientRect().width:null;v(e);const t=M(e);u(t)};let x;const C=e=>{E(),clearTimeout(x),x=setTimeout((()=>{E()}),300)};e.useEffect((()=>{E()}),[f]),e.useEffect((()=>(window.addEventListener("resize",C),()=>{window.removeEventListener("resize",C)})),[]),e.useEffect((()=>{if(l){if(!Array.isArray(s)||0===s.length)return void p({lg:[]});p({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 N=()=>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(y,{graphingTile:l,graphingTileIndex:n}))})),M=e=>{if(!o||isNaN(o)||o<=0||!i||isNaN(i)||i<=0||null==e)return T;const t=e/i*o;return[t,t]};return e.createElement("div",{ref:f,className:"graphing-tiles-container"},(()=>{if(!h||!c)return null;if(!1!==l){if(!g)return null;const t=[r||0,0];return e.createElement(a.Responsive,{width:h,breakpoints:b,cols:n||w,rowHeight:1,layouts:g,containerPadding:t,margin:c,isDraggable:!1},N())}return d?e.createElement(a,{width:h,cols:9,rowHeight:50,margin:c,isDraggable:!1,layout:d},N()):null})())},N={};function M(e,t){N[e]=t}function S(e){const t=N[null==e?void 0:e.tileType];return t?new t(e):null}class P{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=S(e.tile),this.visible=!1!==e.visible}getBackground(){return this.background||"#FFFFFF"}}class k{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 P(e))}))}}const G={};function I(e){const t=G[null==e?void 0:e.controlType];return t?new t(e):null}class L{constructor(e){this.border=e.border,this.background=e.background||null,this.control=I(e.control)}getBackground(e){return this.background||(null==e?void 0:e.background)||"#FFFFFF"}}class F{constructor(e){this.title=e.title||"",this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new L(e))}))}}class ${constructor(e){this.tileType=e.tileType}}class B extends ${constructor(e){super(e),this.control=new L(e.control)}}class q extends ${constructor(e){super(e),this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new L(e))}))}}class A extends ${constructor(e){super(e),t.utils.isArray(e.formGroups)&&e.formGroups.length>0?this.formGroups=e.formGroups.map((e=>new F(e))):this.formGroups=[]}}M("form-groups-tile",A);class H extends q{constructor(e){super(e),this.controlsPerPage=e.controlsPerPage,(isNaN(this.controlsPerPage)||this.controlsPerPage<=1)&&(this.controlsPerPage=1)}}M("horizontal-tile",H);class _ extends q{constructor(e){super(e),this.states={};for(const t in e.states){const l=e.states[t];l&&(this.states[t]=new k(l))}}}M("selectable-states-tile",_);class z extends B{constructor(e){super(e)}}M("single-tile",z);class D extends q{constructor(e){super(e)}}M("vertical-tile",D);const W={};const R=({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=W[n.control.controlType]||null;return i?e.createElement(i,Object.assign({graphingTile:t,graphingTileIndex:l,graphingTileControl:n},r)):null},O=({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 s="graphing-tile-control-container";(null===(o=n.control)||void 0===o?void 0:o.controlType)&&(s+=" "+(null===(i=n.control)||void 0===i?void 0:i.controlType)),!1!==n.border&&(s+=" bordered");const a=`control_${l}_${r}`;return e.createElement("div",{className:s,key:a},e.createElement(R,{graphingTile:t,graphingTileIndex:l,graphingTileControl:n}))})))},j=({graphingTile:l,graphingTileIndex:n})=>{const r=null==l?void 0:l.tile;if(!r)return null;return e.createElement("div",{className:"form-groups-tile-component"},(()=>{if(!t.utils.isArray(r.formGroups)||r.formGroups.length<0)return null;const o=e.useRef(null),[i,s]=e.useState(0),[a,c]=e.useState(!0);e.useEffect((()=>{if(a){const e=o.current;t.utils.isNullOrUndefined(e)?s(0):s(e.scrollHeight)}else s(0)}),[a]);const u=e=>{c(!a)},d=a?"":" collapsed";return r.formGroups.map(((t,r)=>{const s=t.controls,a={height:i};return e.createElement("div",{className:"form-group-container"+d,key:`form-group-${r}`},e.createElement("div",{className:"form-group-title",onClick:u},e.createElement("span",null,t.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:o,style:a},e.createElement(O,{graphingTile:l,graphingTileIndex:n,graphingTileControls:s})))}))})())};x("form-groups-tile",j);const U=({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,g]=e.useState(null),[p,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)}s(t),c(0),d(null),g(null),h(null),f(e)}),n.controls);const E=e=>{let t=e-1;t<0&&(t=i-1),g(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),g(null),h(t);const n=setTimeout((()=>{E(l),h(null),d(null),setTimeout((function(){o(null)}),300)}),300);o(n)},w=e=>{let t=e+1;t>=i&&(t=0),h(t)},C=e=>{e.stopPropagation(),g(null),w(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),g(t),h(null);const n=setTimeout((()=>{g(null),w(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===a?o+=" active":r===m?o+=" navigating-from-left":r===p&&(o+=" navigating-from-right"),r===u&&(o+=" previous"),e.createElement("div",{className:o},e.createElement(O,{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:C,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?(g(t),h(null)):(g(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?g(l):h(l)}})}))))};x("horizontal-tile",U);const V=({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=f();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(g,{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(C,{tilePrefix:n,graphingTiles:o.tiles,responsive:o.responsive,columns:o.columns,containerPadding:o.containerPadding,referenceMargin:o.referenceMargin,referenceWidth:o.referenceWidth}):null))};x("selectable-states-tile",V);const Z=({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(O,{graphingTile:t,graphingTileIndex:l,graphingTileControls:r}))};x("single-tile",Z);const K=({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(O,{graphingTile:t,graphingTileIndex:l,graphingTileControls:r}))};x("vertical-tile",K);const J=()=>{setTimeout((()=>{const e=Q.pop();e&&(c.unmountComponentAtNode(e),e.remove())}),300)};const Q=[],X={},Y=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)}}))),ee=t=>{const l=Y(),n={};t.fixedWidth&&(n.width=t.fixedWidth),t.fixedHeight&&(n.height=t.fixedHeight);let r=l.paper+" moorr-modal-content-container";t.contentClassName&&(r+=" "+t.contentClassName);let i=l.modal;switch(i+=" moorr-modal-container",t.effect){case"fade":i+=" moorr-fade-modal";break;case"slide":i+=" moorr-slide-modal"}const[s,a]=e.useState(!1),[c,d]=e.useState(!1);e.useEffect((()=>{d(!s&&!1!==t.showModal)}),[s,c]);return e.createElement(o.Modal,{className:i,open:c,onClose:e=>{a(!0),(null==t?void 0:t.onDismiss)&&t.onDismiss(e)},closeAfterTransition:!0,BackdropComponent:o.Backdrop,BackdropProps:{timeout:300}},(()=>{switch(t.effect){case"fade":default:return e.createElement(o.Fade,{in:c},e.createElement("div",{className:r,style:n},t.children));case"slide":return e.createElement(u.Slide,{in:c,direction:"left",timeout:300},e.createElement("div",{className:r},t.children))}})())},te=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||!X[i])return Promise.reject("invalid-modal");const s=new X[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",te),document.addEventListener("openModal",te)),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=g,exports.FadeModal=t=>e.createElement(ee,{contentClassName:`${t.className}-content-container`,fixedWidth:t.widthValue,fixedHeight:t.heightValue,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),!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=F,exports.FormGroupsTile=j,exports.FormGroupsTileModel=A,exports.GraphingContext=v,exports.GraphingControl=R,exports.GraphingControlModel=class{constructor(e){this.controlType=e.controlType,this.dataKey=e.dataKey}},exports.GraphingControlSettingsModel=L,exports.GraphingGrid=({})=>{const{settings:l}=f(),[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 k(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(C,{graphingTiles:n.tiles,responsive:n.responsive,columns:n.columns,containerPadding:n.containerPadding,referenceMargin:n.referenceMargin,referenceWidth:n.referenceWidth})))},exports.GraphingSettingsModel=k,exports.GraphingTile=y,exports.GraphingTileControls=O,exports.GraphingTileModel=$,exports.GraphingTileSettingsModel=P,exports.GraphingTiles=C,exports.HorizontalTile=U,exports.HorizontalTileModel=H,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,J()},"function"==typeof t.onDismiss&&(o=t.onClose),t.onDismiss=()=>{o&&o(),l({dismissed:!0}),t.showModal=!1,J()},t.showModal=!0;let i=e.createElement(h,{stylePrefix:"MoorrReactMuiModal"},e.createElement(this.getComponent(),t));Q.push(this._container=document.createElement("div")),this._container.className="moorr-modal-container",document.body.appendChild(this._container),c.render(i,this._container)}))}},exports.MoorrModal=ee,exports.MultipleControlsTileModel=q,exports.SelectableStatesTile=V,exports.SelectableStatesTileModel=_,exports.SingleControlTileModel=B,exports.SingleTile=Z,exports.SingleTileModel=z,exports.VerticalTile=K,exports.VerticalTileModel=D,exports.createGraphingControl=I,exports.createGraphingControls=function(e){const t=[];return e.forEach((e=>{const l=I(e);l&&t.push(l)})),t},exports.createGraphingTile=S,exports.createGraphingTiles=function(e){const t=[];return e.forEach((e=>{const l=S(e);l&&t.push(l)})),t},exports.modals=X,exports.modalsStack=Q,exports.registerGraphingControl=function(e,t){G[e]=t},exports.registerGraphingControlComponent=function(e,t){e&&t&&(W[e]=t)},exports.registerGraphingTile=M,exports.registerGraphingTileComponent=x,exports.useGraphingContext=f;
1
+ "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");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 m=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 g=n.withStyles(d)((({handleChange:t,value:n,disabled:o=!1,name:i,className:s,classes:a,size:c,menuItemLabel:u,options:d,labelPlacement:g="start",label:p,required:h=!1,isMBRequiredField:v,fullWidth:f,selectIconComponent:E})=>{const{root:x,focused:y,error:T,notchedOutline:b,notchedOutlineMBRequired:w}=a,C=m();let N;return E&&(N={IconComponent:E}),e.createElement(r,{fullWidth:!1!==f,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:!v||n&&0!==(null==n?void 0:n.length)?!h||n&&0!==(null==n?void 0:n.length)?b:C.mandatory:w}},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 p={};var h=({stylePrefix:t,children:l})=>{let r;if(t)r=p[t]?p[t]:p[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 v=e.createContext({});function f(){return e.useContext(v)}const E={};function x(e,t){e&&t&&(E[e]=t)}const y=({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=E[t.tile.tileType]||null;return r?e.createElement(r,{graphingTile:t,graphingTileIndex:l}):null},T=[20,20],b={lg:600,sm:0},w={lg:8,sm:2},C=({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),[g,p]=e.useState(null),[h,v]=e.useState(null),f=e.useRef(null),E=()=>{const e=(null==f?void 0:f.current)?(null==f?void 0:f.current).getBoundingClientRect().width:null;v(e);const t=M(e);u(t)};let x;const C=e=>{E(),clearTimeout(x),x=setTimeout((()=>{E()}),300)};e.useEffect((()=>{E()}),[f]),e.useEffect((()=>(window.addEventListener("resize",C),()=>{window.removeEventListener("resize",C)})),[]),e.useEffect((()=>{if(l){if(!Array.isArray(s)||0===s.length)return void p({lg:[]});p({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 N=()=>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(y,{graphingTile:l,graphingTileIndex:n}))})),M=e=>{if(!o||isNaN(o)||o<=0||!i||isNaN(i)||i<=0||null==e)return T;const t=e/i*o;return[t,t]};return e.createElement("div",{ref:f,className:"graphing-tiles-container"},(()=>{if(!h||!c)return null;if(!1!==l){if(!g)return null;const t=[r||0,0];return e.createElement(a.Responsive,{width:h,breakpoints:b,cols:n||w,rowHeight:1,layouts:g,containerPadding:t,margin:c,isDraggable:!1},N())}return d?e.createElement(a,{width:h,cols:9,rowHeight:50,margin:c,isDraggable:!1,layout:d},N()):null})())},N={};function M(e,t){N[e]=t}function S(e){const t=N[null==e?void 0:e.tileType];return t?new t(e):null}class P{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=S(e.tile),this.visible=!1!==e.visible}getBackground(){return this.background||"#FFFFFF"}}class k{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 P(e))}))}}const G={};function I(e){const t=G[null==e?void 0:e.controlType];return t?new t(e):null}class L{constructor(e){this.border=e.border,this.background=e.background||null,this.control=I(e.control)}getBackground(e){return this.background||(null==e?void 0:e.background)||"#FFFFFF"}}class F{constructor(e){this.title=e.title||"",this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new L(e))}))}}class ${constructor(e){this.tileType=e.tileType}}class B extends ${constructor(e){super(e),this.control=new L(e.control)}}class q extends ${constructor(e){super(e),this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new L(e))}))}}class A extends ${constructor(e){super(e),t.utils.isArray(e.formGroups)&&e.formGroups.length>0?this.formGroups=e.formGroups.map((e=>new F(e))):this.formGroups=[]}}M("form-groups-tile",A);class H extends q{constructor(e){super(e),this.controlsPerPage=e.controlsPerPage,(isNaN(this.controlsPerPage)||this.controlsPerPage<=1)&&(this.controlsPerPage=1)}}M("horizontal-tile",H);class _ extends q{constructor(e){super(e),this.states={};for(const t in e.states){const l=e.states[t];l&&(this.states[t]=new k(l))}}}M("selectable-states-tile",_);class z extends B{constructor(e){super(e)}}M("single-tile",z);class D extends q{constructor(e){super(e)}}M("vertical-tile",D);const W={};const R=({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=W[n.control.controlType]||null;return i?e.createElement(i,Object.assign({graphingTile:t,graphingTileIndex:l,graphingTileControl:n},r)):null},O=({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 s="graphing-tile-control-container";(null===(o=n.control)||void 0===o?void 0:o.controlType)&&(s+=" "+(null===(i=n.control)||void 0===i?void 0:i.controlType)),!1!==n.border&&(s+=" bordered");const a=`control_${l}_${r}`;return e.createElement("div",{className:s,key:a},e.createElement(R,{graphingTile:t,graphingTileIndex:l,graphingTileControl:n}))})))},j=({graphingTile:l,graphingTileIndex:n})=>{const r=null==l?void 0:l.tile;if(!r)return null;return e.createElement("div",{className:"form-groups-tile-component"},!t.utils.isArray(r.formGroups)||r.formGroups.length<0?null:r.formGroups.map(((r,o)=>{const i=e.useRef(null),[s,a]=e.useState(0),[c,u]=e.useState(!0);e.useEffect((()=>{if(c){const e=i.current;t.utils.isNullOrUndefined(e)?a(0):a(e.scrollHeight)}else a(0)}),[c]);const d=c?"":" collapsed",m=r.controls,g={height:s};return e.createElement("div",{className:"form-group-container"+d,key:`form-group-${o}`},e.createElement("div",{className:"form-group-title",onClick:e=>{u(!c)}},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:i,style:g},e.createElement(O,{graphingTile:l,graphingTileIndex:n,graphingTileControls:m})))})))};x("form-groups-tile",j);const U=({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,g]=e.useState(null),[p,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)}s(t),c(0),d(null),g(null),h(null),f(e)}),n.controls);const E=e=>{let t=e-1;t<0&&(t=i-1),g(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),g(null),h(t);const n=setTimeout((()=>{E(l),h(null),d(null),setTimeout((function(){o(null)}),300)}),300);o(n)},w=e=>{let t=e+1;t>=i&&(t=0),h(t)},C=e=>{e.stopPropagation(),g(null),w(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),g(t),h(null);const n=setTimeout((()=>{g(null),w(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===a?o+=" active":r===m?o+=" navigating-from-left":r===p&&(o+=" navigating-from-right"),r===u&&(o+=" previous"),e.createElement("div",{className:o},e.createElement(O,{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:C,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?(g(t),h(null)):(g(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?g(l):h(l)}})}))))};x("horizontal-tile",U);const V=({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=f();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(g,{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(C,{tilePrefix:n,graphingTiles:o.tiles,responsive:o.responsive,columns:o.columns,containerPadding:o.containerPadding,referenceMargin:o.referenceMargin,referenceWidth:o.referenceWidth}):null))};x("selectable-states-tile",V);const Z=({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(O,{graphingTile:t,graphingTileIndex:l,graphingTileControls:r}))};x("single-tile",Z);const K=({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(O,{graphingTile:t,graphingTileIndex:l,graphingTileControls:r}))};x("vertical-tile",K);const J=()=>{setTimeout((()=>{const e=Q.pop();e&&(c.unmountComponentAtNode(e),e.remove())}),300)};const Q=[],X={},Y=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)}}))),ee=t=>{const l=Y(),n={};t.fixedWidth&&(n.width=t.fixedWidth),t.fixedHeight&&(n.height=t.fixedHeight);let r=l.paper+" moorr-modal-content-container";t.contentClassName&&(r+=" "+t.contentClassName);let i=l.modal;switch(i+=" moorr-modal-container",t.effect){case"fade":i+=" moorr-fade-modal";break;case"slide":i+=" moorr-slide-modal"}const[s,a]=e.useState(!1),[c,d]=e.useState(!1);e.useEffect((()=>{d(!s&&!1!==t.showModal)}),[s,c]);return e.createElement(o.Modal,{className:i,open:c,onClose:e=>{a(!0),(null==t?void 0:t.onDismiss)&&t.onDismiss(e)},closeAfterTransition:!0,BackdropComponent:o.Backdrop,BackdropProps:{timeout:300}},(()=>{switch(t.effect){case"fade":default:return e.createElement(o.Fade,{in:c},e.createElement("div",{className:r,style:n},t.children));case"slide":return e.createElement(u.Slide,{in:c,direction:"left",timeout:300},e.createElement("div",{className:r},t.children))}})())},te=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||!X[i])return Promise.reject("invalid-modal");const s=new X[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",te),document.addEventListener("openModal",te)),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=g,exports.FadeModal=t=>e.createElement(ee,{contentClassName:`${t.className}-content-container`,fixedWidth:t.widthValue,fixedHeight:t.heightValue,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),!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=F,exports.FormGroupsTile=j,exports.FormGroupsTileModel=A,exports.GraphingContext=v,exports.GraphingControl=R,exports.GraphingControlModel=class{constructor(e){this.controlType=e.controlType,this.dataKey=e.dataKey}},exports.GraphingControlSettingsModel=L,exports.GraphingGrid=({})=>{const{settings:l}=f(),[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 k(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(C,{graphingTiles:n.tiles,responsive:n.responsive,columns:n.columns,containerPadding:n.containerPadding,referenceMargin:n.referenceMargin,referenceWidth:n.referenceWidth})))},exports.GraphingSettingsModel=k,exports.GraphingTile=y,exports.GraphingTileControls=O,exports.GraphingTileModel=$,exports.GraphingTileSettingsModel=P,exports.GraphingTiles=C,exports.HorizontalTile=U,exports.HorizontalTileModel=H,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,J()},"function"==typeof t.onDismiss&&(o=t.onClose),t.onDismiss=()=>{o&&o(),l({dismissed:!0}),t.showModal=!1,J()},t.showModal=!0;let i=e.createElement(h,{stylePrefix:"MoorrReactMuiModal"},e.createElement(this.getComponent(),t));Q.push(this._container=document.createElement("div")),this._container.className="moorr-modal-container",document.body.appendChild(this._container),c.render(i,this._container)}))}},exports.MoorrModal=ee,exports.MultipleControlsTileModel=q,exports.SelectableStatesTile=V,exports.SelectableStatesTileModel=_,exports.SingleControlTileModel=B,exports.SingleTile=Z,exports.SingleTileModel=z,exports.VerticalTile=K,exports.VerticalTileModel=D,exports.createGraphingControl=I,exports.createGraphingControls=function(e){const t=[];return e.forEach((e=>{const l=I(e);l&&t.push(l)})),t},exports.createGraphingTile=S,exports.createGraphingTiles=function(e){const t=[];return e.forEach((e=>{const l=S(e);l&&t.push(l)})),t},exports.modals=X,exports.modalsStack=Q,exports.registerGraphingControl=function(e,t){G[e]=t},exports.registerGraphingControlComponent=function(e,t){e&&t&&(W[e]=t)},exports.registerGraphingTile=M,exports.registerGraphingTileComponent=x,exports.useGraphingContext=f;
package/index.css CHANGED
@@ -2,7 +2,7 @@
2
2
  .graphing-tiles-container{box-sizing:border-box;margin:0;padding:0;width:100%;position:relative;}.graphing-tiles-container>.react-grid-layout{width:100%;position:relative;}.graphing-tiles-container .react-grid-placeholder{background:#E3E3E3;z-index:0;}.graphing-tiles-container .graphing-tile-container.react-draggable-dragging{z-index:1;}.graphing-tiles-container .graphing-tile-container{margin:0;padding:0;background-color:#FFFFFF;}.graphing-tiles-container .graphing-tile-container.bordered{border:1px solid #E3E3E3;border-radius:0.5rem;box-shadow:0 0 2px 1px #F4F4F4;}.graphing-tiles-container .graphing-tile-container.auto-height{height:100%!important;}
3
3
  .graphing-grid-container{margin-top:1em;padding:0 24px;opacity:0;transition:opacity 1000ms cubic-bezier(0.4,0,0.2,1) 0ms;}.graphing-grid-container.in{opacity:1;}.graphing-grid-container>.graphing-grid-title{font-size:32px!important;margin-bottom:0;margin-top:0;display:flex;}.graphing-grid-container>.graphing-grid-title>a{margin-left:.5rem;margin-top:.5rem;}.graphing-grid-container>.graphing-grid-hr{margin-top:0!important;}
4
4
  .graphing-tile-controls-container{box-sizing:border-box;margin:0;padding:0;}.graphing-tile-controls-container>.graphing-tile-control-container{margin:0;padding:0;background-color:transparent;}.graphing-tile-controls-container>.graphing-tile-control-container.bordered{border:1px solid #E3E3E3;border-radius:0.5rem;box-shadow:0 0 2px 1px #F4F4F4;}
5
- .form-groups-tile-component{display:block;width:100%;height:100%;border-radius:0.5rem;background-color:transparent;}.form-groups-tile-component>.form-group-container{box-shadow:0 3px 3px rgba(0,0,0,0.025);background-color:#FFFFFF;border-radius:10px;user-select:none;cursor:pointer;}.form-groups-tile-component>.form-group-container>.form-group-title{display:block;padding:1.5rem;}.form-groups-tile-component>.form-group-container>.form-group-title>span{display:inline-block;width:calc(100% - 22px);font-family:'Poppins';font-style:normal;font-weight:400;font-size:18px;line-height:25px;color:#333333;}.form-groups-tile-component>.form-group-container>.form-group-title>svg{display:inline-block;width:11px;height:8px;margin-left:11px;transition:transform 300ms cubic-bezier(0.4,0,0.2,1) 0ms;}.form-groups-tile-component>.form-group-container.collapsed>.form-group-title>svg{transform:rorate(180deg);}.form-groups-tile-component>.form-group-container>.form-group-title>hr{margin-top:.75rem;margin-bottom:0;}.form-groups-tile-component>.form-group-container>.form-group-components{display:block;}
5
+ .form-groups-tile-component{display:block;width:100%;height:100%;border-radius:0.5rem;background-color:transparent;}.form-groups-tile-component>.form-group-container{box-shadow:0 3px 3px rgba(0,0,0,0.025);background-color:#FFFFFF;border-radius:10px;user-select:none;cursor:pointer;}.form-groups-tile-component>.form-group-container>.form-group-title{display:block;padding:1.5rem;}.form-groups-tile-component>.form-group-container>.form-group-title>span{display:inline-block;width:calc(100% - 22px);font-family:'Poppins';font-style:normal;font-weight:400;font-size:18px;line-height:25px;color:#333333;}.form-groups-tile-component>.form-group-container>.form-group-title>svg{display:inline-block;width:11px;height:8px;margin-left:11px;transition:transform 300ms cubic-bezier(0.4,0,0.2,1) 0ms;}.form-groups-tile-component>.form-group-container.collapsed>.form-group-title>svg{transform:rotate(180deg);}.form-groups-tile-component>.form-group-container>.form-group-title>hr{margin-top:.75rem;margin-bottom:0;}.form-groups-tile-component>.form-group-container>.form-group-components{display:block;}
6
6
  .horizontal-tile-component{display:flex;width:100%;height:100%;position:relative;flex-direction:column;border-radius:.5rem;}.horizontal-tile-component>.horizontal-tile-pages-container{display:block;width:100%;height:100%;position:relative;overflow:hidden;flex-grow:1;border-radius:0.5rem;}.horizontal-tile-component>.horizontal-tile-pages-container>.horizontal-tile-page-container{display:block;width:100%;height:100%;position:absolute;left:0;top:0;z-index:0;background-color:transparent;transition:left 300ms ease-in-out;}.horizontal-tile-component>.horizontal-tile-pages-container>.horizontal-tile-page-container.active{z-index:3;}.horizontal-tile-component>.horizontal-tile-pages-container>.horizontal-tile-page-container.previous{z-index:2;}.horizontal-tile-component>.horizontal-tile-pages-container>.horizontal-tile-page-container.navigating-from-left{left:-100%;}.horizontal-tile-component>.horizontal-tile-pages-container>.horizontal-tile-page-container.navigating-from-right{left:100%;}.horizontal-tile-component>.horizontal-tile-pages-container>.horizontal-tile-page-container>.graphing-tile-controls-container.horizontal-tile{display:flex;width:100%;height:100%;flex-direction:row;justify-content:space-evenly;align-items:center;padding:.5rem;}.horizontal-tile-component>.horizontal-tile-pages-container>.horizontal-tile-page-container>.graphing-tile-controls-container.horizontal-tile>.graphing-tile-control-container{height:100%;}.horizontal-tile-component>.horizontal-tile-pages-container>.horizontal-tile-page-container.background{z-index:1;}.horizontal-tile-component>.horizontal-tile-pages-container>button.navigate-button{position:absolute;border:none;background-color:transparent;opacity:0;z-index:3;}.horizontal-tile-component:hover>.horizontal-tile-pages-container>button.navigate-button{opacity:1;}.horizontal-tile-component>.horizontal-tile-pages-container>button.navigate-button.navigate-left-button{left:15px;top:50%;margin-top:-11px;transition:left 300ms ease-in-out,opacity 300ms ease-in-out;}.horizontal-tile-component:hover>.horizontal-tile-pages-container>button.navigate-button.navigate-left-button{left:5px;}.horizontal-tile-component>.horizontal-tile-pages-container>button.navigate-button.navigate-right-button{right:15px;top:50%;margin-top:-11px;transition:right 300ms ease-in-out,opacity 300ms ease-in-out;}.horizontal-tile-component:hover>.horizontal-tile-pages-container>button.navigate-button.navigate-right-button{right:5px;}.horizontal-tile-component>.horizontal-tile-paginators-container{display:flex;flex-direction:row;justify-content:center;padding:0.25rem;opacity:0;transition:opacity 300ms ease-in-out;}.horizontal-tile-component:hover>.horizontal-tile-paginators-container{opacity:1;}.horizontal-tile-component>.horizontal-tile-paginators-container>.paginator-anchor{display:block;width:8px;height:8px;border-radius:4px;border:none;background-color:#D4C5D9;cursor:pointer;transition:width 300ms ease-in-out,background-color 300ms ease-in-out;}.horizontal-tile-component>.horizontal-tile-paginators-container>.paginator-anchor+.paginator-anchor{margin-left:4px;}.horizontal-tile-component>.horizontal-tile-paginators-container>.paginator-anchor.active{width:20px;background-color:#541868;}.horizontal-tile-component>.horizontal-tile-paginators-container>.paginator-anchor:hover{background-color:#946EA0;}.horizontal-tile-component>.horizontal-tile-paginators-container>.paginator-anchor.active:hover{background-color:#541868;}
7
7
  .selectable-states-tile-component{display:flex;width:100%;height:100%;flex-direction:column;}.selectable-states-tile-component>.selectable-states-tile-header{display:flex;flex-direction:row;}.selectable-states-tile-component>.selectable-states-tile-header>.selected-state-tile-title{flex-grow:1;padding:0.5rem 1rem;font-size:1.2rem;line-height:1.2rem;}.selectable-states-tile-component>.selectable-states-tile-header>.selected-state-tile-title>h6{text-align:center;}.selectable-states-tile-component>.selectable-states-tile-header>.selectable-states-dropdown-container{padding:0.5rem;}.selectable-states-tile-component>.selected-state-tile-container{display:flex;flex-grow:1;padding:0 1rem 1rem 1rem;}.selectable-states-tile-component>.selected-state-tile-container>.graphing-tiles-container{padding:0;}.selectable-states-tile-component>.selected-state-tile-container>.graphing-tiles-container>.react-grid-layout{height:100%!important;overflow:hidden;}
8
8
  .single-tile-component{display:block;width:100%;height:100%;border-radius:0.5rem;}.single-tile-component>.graphing-tile-controls-container.single-tile{display:block;width:100%;height:100%;}.single-tile-component>.graphing-tile-controls-container.single-tile>.graphing-tile-control-container{display:flex;width:100%;height:100%;flex-wrap:wrap;align-content:center;justify-content:center;}
package/index.js CHANGED
@@ -1 +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 u,StylesProvider as d}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 w}from"react-grid-layout";import T 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=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(P);const C=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 M=u(P)((({handleChange:t,value:n,disabled:l=!1,name:o,className:r,classes:i,size:s,menuItemLabel:c,options:u,labelPlacement:d="start",label:g,required:h=!1,isMBRequiredField:p,fullWidth:v,selectIconComponent:f})=>{const{root:E,focused:y,error:b,notchedOutline:w,notchedOutlineMBRequired:T}=i,N=C();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)?w:N.mandatory:T}},color:"primary",size:s||"small",select:!0,SelectProps:x,defaultValue:""},e.createElement(a,{value:"",disabled:!0},e.createElement("em",null,c)),u&&u.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 k={};var I=({stylePrefix:t,children:n})=>{let l;if(t)l=k[t]?k[t]:k[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(d,{generateClassName:l},n)))};const L=n({});function $(){return l(L)}const F={};function B(e,t){e&&t&&(F[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=F[t.tile.tileType]||null;return o?e.createElement(o,{graphingTile:t,graphingTileIndex:n}):null},A=[20,20],_={lg:600,sm:0},D={lg:8,sm:2},H=({tilePrefix:n,responsive:l,columns:i,containerPadding:a,referenceMargin:s,referenceWidth:c,graphingTiles:u})=>{const[d,m]=o(null),[g,h]=o(null),[p,v]=o(null),[f,E]=o(null),y=r(null),T=()=>{const e=(null==y?void 0:y.current)?(null==y?void 0:y.current).getBoundingClientRect().width:null;E(e);const t=C(e);m(t)};let N;const x=e=>{T(),clearTimeout(N),N=setTimeout((()=>{T()}),300)};t((()=>{T()}),[y]),t((()=>(window.addEventListener("resize",x),()=>{window.removeEventListener("resize",x)})),[]),t((()=>{if(l){if(!Array.isArray(u)||0===u.length)return void v({lg:[]});v({lg:u.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(u)||0===u.length)return void h([]);h(u.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}))))}}),[u]);const P=()=>null==u?void 0:u.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}))})),C=e=>{if(!s||isNaN(s)||s<=0||!c||isNaN(c)||c<=0||null==e)return A;const t=e/c*s;return[t,t]};return e.createElement("div",{ref:y,className:"graphing-tiles-container"},(()=>{if(!f||!d)return null;if(!1!==l){if(!p)return null;const t=[a||0,0];return e.createElement(w,{width:f,breakpoints:_,cols:i||D,rowHeight:1,layouts:p,containerPadding:t,margin:d,isDraggable:!1},P())}return g?e.createElement(b,{width:f,cols:9,rowHeight:50,margin:d,isDraggable:!1,layout:g},P()):null})())},W={};function z(e,t){W[e]=t}function O(e){const t=W[null==e?void 0:e.tileType];return t?new t(e):null}function R(e){const t=[];return e.forEach((e=>{const n=O(e);n&&t.push(n)})),t}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=O(e.tile),this.visible=!1!==e.visible}getBackground(){return this.background||"#FFFFFF"}}class j{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 q={};function U(e,t){q[e]=t}function V(e){const t=q[null==e?void 0:e.controlType];return t?new t(e):null}function Z(e){const t=[];return e.forEach((e=>{const n=V(e);n&&t.push(n)})),t}class K{constructor(e){this.controlType=e.controlType,this.dataKey=e.dataKey}}class J{constructor(e){this.border=e.border,this.background=e.background||null,this.control=V(e.control)}getBackground(e){return this.background||(null==e?void 0:e.background)||"#FFFFFF"}}class Q{constructor(e){this.title=e.title||"",this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new J(e))}))}}class X{constructor(e){this.tileType=e.tileType}}class Y extends X{constructor(e){super(e),this.control=new J(e.control)}}class ee extends X{constructor(e){super(e),this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new J(e))}))}}class te extends X{constructor(e){super(e),i.isArray(e.formGroups)&&e.formGroups.length>0?this.formGroups=e.formGroups.map((e=>new Q(e))):this.formGroups=[]}}z("form-groups-tile",te);class ne extends ee{constructor(e){super(e),this.controlsPerPage=e.controlsPerPage,(isNaN(this.controlsPerPage)||this.controlsPerPage<=1)&&(this.controlsPerPage=1)}}z("horizontal-tile",ne);class le extends ee{constructor(e){super(e),this.states={};for(const t in e.states){const n=e.states[t];n&&(this.states[t]=new j(n))}}}z("selectable-states-tile",le);class oe extends Y{constructor(e){super(e)}}z("single-tile",oe);class re extends ee{constructor(e){super(e)}}z("vertical-tile",re);const ie=({})=>{const{settings:n}=$(),[l,r]=o(null),[a,s]=o(!1);t((()=>{setTimeout((()=>{window.dispatchEvent(new Event("resize")),setTimeout((()=>{s(!0)}),300)}),300)}),[]),t((()=>{r(n?new j(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 u="graphing-grid-container";return a&&(u+=" in"),e.createElement(e.Fragment,null,e.createElement("div",{className:u},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(H,{graphingTiles:l.tiles,responsive:l.responsive,columns:l.columns,containerPadding:l.containerPadding,referenceMargin:l.referenceMargin,referenceWidth:l.referenceWidth})))},ae={};function se(e,t){e&&t&&(ae[e]=t)}const ce=({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=ae[l.control.controlType]||null;return i?e.createElement(i,Object.assign({graphingTile:t,graphingTileIndex:n,graphingTileControl:l},o)):null},ue=({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(ce,{graphingTile:t,graphingTileIndex:n,graphingTileControl:l}))})))},de=({graphingTile:n,graphingTileIndex:l})=>{const a=null==n?void 0:n.tile;if(!a)return null;return e.createElement("div",{className:"form-groups-tile-component"},(()=>{if(!i.isArray(a.formGroups)||a.formGroups.length<0)return null;const s=r(null),[c,u]=o(0),[d,m]=o(!0);t((()=>{if(d){const e=s.current;i.isNullOrUndefined(e)?u(0):u(e.scrollHeight)}else u(0)}),[d]);const g=e=>{m(!d)},h=d?"":" collapsed";return a.formGroups.map(((t,o)=>{const r=t.controls,i={height:c};return e.createElement("div",{className:"form-group-container"+h,key:`form-group-${o}`},e.createElement("div",{className:"form-group-title",onClick:g},e.createElement("span",null,t.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:i},e.createElement(ue,{graphingTile:n,graphingTileIndex:l,graphingTileControls:r})))}))})())};B("form-groups-tile",de);const me=({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),[u,d]=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),d(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)},w=e=>{e.stopPropagation(),b(u),f(null),g(null)},T=e=>{e.stopPropagation()},N=e=>{e.stopPropagation()},x=e=>{if(e.stopPropagation(),null!==i)return;const t=u;let n=u-1;n<0&&(n=s-1),g(t),d(n),p(null),f(t);const l=setTimeout((()=>{b(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)},C=e=>{e.stopPropagation(),p(null),P(u),g(null)},M=e=>{e.stopPropagation()},k=e=>{e.stopPropagation()},I=e=>{if(e.stopPropagation(),null!==i)return;const t=u;let n=u+1;n>=s&&(n=0),g(t),d(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"},E.map(((t,o)=>{let r="horizontal-tile-page-container";return o===u?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(ue,{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:w,onMouseLeave:T,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:C,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===u&&(n+=" active"),e.createElement("a",{className:n,onMouseEnter:e=>{e.stopPropagation(),t!==u&&(t<u?(p(t),f(null)):(p(null),f(t)),g(null))},onMouseLeave:e=>{e.stopPropagation()},onMouseDown:e=>{e.stopPropagation()},onClick:e=>{if(e.stopPropagation(),t===u)return;const n=u,l=t;g(n),d(l),n<l?p(n):f(n)}})}))))};B("horizontal-tile",me);const ge=({graphingTile:n})=>{const l=null==n?void 0:n.tile;if(!l)return null;const[r,i]=o(""),[a,s]=o(null),[c,u]=o([]),d=$();t((()=>{const e=Object.keys(l.states);if(u(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(M,{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==d?void 0:d.handleSelectableStatesTileChange)&&(null==d||d.handleSelectableStatesTileChange(e))}}))),e.createElement("div",{className:"selected-state-tile-container"},a?e.createElement(H,{tilePrefix:r,graphingTiles:a.tiles,responsive:a.responsive,columns:a.columns,containerPadding:a.containerPadding,referenceMargin:a.referenceMargin,referenceWidth:a.referenceWidth}):null))};B("selectable-states-tile",ge);const he=({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(ue,{graphingTile:t,graphingTileIndex:n,graphingTileControls:o}))};B("single-tile",he);const pe=({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(ue,{graphingTile:t,graphingTileIndex:n,graphingTileControls:o}))};B("vertical-tile",pe);const ve=()=>{setTimeout((()=>{const e=Ee.pop();e&&(T.unmountComponentAtNode(e),e.remove())}),300)};let fe=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,ve()},"function"==typeof t.onDismiss&&(r=t.onClose),t.onDismiss=()=>{r&&r(),n({dismissed:!0}),t.showModal=!1,ve()},t.showModal=!0;let i=e.createElement(I,{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),T.render(i,this._container)}))}};const Ee=[],ye={},be=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)}}))),we=n=>{const l=be(),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[s,c]=o(!1),[u,d]=o(!1);t((()=>{d(!s&&!1!==n.showModal)}),[s,u]);return e.createElement(h,{className:a,open:u,onClose:e=>{c(!0),(null==n?void 0:n.onDismiss)&&n.onDismiss(e)},closeAfterTransition:!0,BackdropComponent:p,BackdropProps:{timeout:300}},(()=>{switch(n.effect){case"fade":default:return e.createElement(v,{in:u},e.createElement("div",{className:i,style:r},n.children));case"slide":return e.createElement(N,{in:u,direction:"left",timeout:300},e.createElement("div",{className:i},n.children))}})())},Te=t=>e.createElement(we,{contentClassName:`${t.className}-content-container`,fixedWidth:t.widthValue,fixedHeight:t.heightValue,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),!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)))),Ne=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||!ye[i])return Promise.reject("invalid-modal");const a=new ye[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",Ne),document.addEventListener("openModal",Ne));export{x as Button,M as Dropdown,Te as FadeModal,Q as FormGroupModel,de as FormGroupsTile,te as FormGroupsTileModel,L as GraphingContext,ce as GraphingControl,K as GraphingControlModel,J as GraphingControlSettingsModel,ie as GraphingGrid,j as GraphingSettingsModel,S as GraphingTile,ue as GraphingTileControls,X as GraphingTileModel,G as GraphingTileSettingsModel,H as GraphingTiles,me as HorizontalTile,ne as HorizontalTileModel,fe as Modal,we as MoorrModal,ee as MultipleControlsTileModel,ge as SelectableStatesTile,le as SelectableStatesTileModel,Y as SingleControlTileModel,he as SingleTile,oe as SingleTileModel,pe as VerticalTile,re as VerticalTileModel,V as createGraphingControl,Z as createGraphingControls,O as createGraphingTile,R as createGraphingTiles,ye as modals,Ee as modalsStack,U as registerGraphingControl,se as registerGraphingControlComponent,z as registerGraphingTile,B as registerGraphingTileComponent,$ as useGraphingContext};
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 u,StylesProvider as d}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 w}from"react-grid-layout";import T 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=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(P);const C=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 M=u(P)((({handleChange:t,value:n,disabled:l=!1,name:o,className:r,classes:i,size:s,menuItemLabel:c,options:u,labelPlacement:d="start",label:g,required:h=!1,isMBRequiredField:p,fullWidth:v,selectIconComponent:f})=>{const{root:E,focused:y,error:b,notchedOutline:w,notchedOutlineMBRequired:T}=i,N=C();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)?w:N.mandatory:T}},color:"primary",size:s||"small",select:!0,SelectProps:x,defaultValue:""},e.createElement(a,{value:"",disabled:!0},e.createElement("em",null,c)),u&&u.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 k={};var I=({stylePrefix:t,children:n})=>{let l;if(t)l=k[t]?k[t]:k[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(d,{generateClassName:l},n)))};const L=n({});function $(){return l(L)}const F={};function B(e,t){e&&t&&(F[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=F[t.tile.tileType]||null;return o?e.createElement(o,{graphingTile:t,graphingTileIndex:n}):null},A=[20,20],_={lg:600,sm:0},D={lg:8,sm:2},H=({tilePrefix:n,responsive:l,columns:i,containerPadding:a,referenceMargin:s,referenceWidth:c,graphingTiles:u})=>{const[d,m]=o(null),[g,h]=o(null),[p,v]=o(null),[f,E]=o(null),y=r(null),T=()=>{const e=(null==y?void 0:y.current)?(null==y?void 0:y.current).getBoundingClientRect().width:null;E(e);const t=C(e);m(t)};let N;const x=e=>{T(),clearTimeout(N),N=setTimeout((()=>{T()}),300)};t((()=>{T()}),[y]),t((()=>(window.addEventListener("resize",x),()=>{window.removeEventListener("resize",x)})),[]),t((()=>{if(l){if(!Array.isArray(u)||0===u.length)return void v({lg:[]});v({lg:u.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(u)||0===u.length)return void h([]);h(u.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}))))}}),[u]);const P=()=>null==u?void 0:u.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}))})),C=e=>{if(!s||isNaN(s)||s<=0||!c||isNaN(c)||c<=0||null==e)return A;const t=e/c*s;return[t,t]};return e.createElement("div",{ref:y,className:"graphing-tiles-container"},(()=>{if(!f||!d)return null;if(!1!==l){if(!p)return null;const t=[a||0,0];return e.createElement(w,{width:f,breakpoints:_,cols:i||D,rowHeight:1,layouts:p,containerPadding:t,margin:d,isDraggable:!1},P())}return g?e.createElement(b,{width:f,cols:9,rowHeight:50,margin:d,isDraggable:!1,layout:g},P()):null})())},W={};function z(e,t){W[e]=t}function O(e){const t=W[null==e?void 0:e.tileType];return t?new t(e):null}function R(e){const t=[];return e.forEach((e=>{const n=O(e);n&&t.push(n)})),t}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=O(e.tile),this.visible=!1!==e.visible}getBackground(){return this.background||"#FFFFFF"}}class j{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 q={};function U(e,t){q[e]=t}function V(e){const t=q[null==e?void 0:e.controlType];return t?new t(e):null}function Z(e){const t=[];return e.forEach((e=>{const n=V(e);n&&t.push(n)})),t}class K{constructor(e){this.controlType=e.controlType,this.dataKey=e.dataKey}}class J{constructor(e){this.border=e.border,this.background=e.background||null,this.control=V(e.control)}getBackground(e){return this.background||(null==e?void 0:e.background)||"#FFFFFF"}}class Q{constructor(e){this.title=e.title||"",this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new J(e))}))}}class X{constructor(e){this.tileType=e.tileType}}class Y extends X{constructor(e){super(e),this.control=new J(e.control)}}class ee extends X{constructor(e){super(e),this.controls=[],Array.isArray(e.controls)&&e.controls.forEach((e=>{this.controls.push(new J(e))}))}}class te extends X{constructor(e){super(e),i.isArray(e.formGroups)&&e.formGroups.length>0?this.formGroups=e.formGroups.map((e=>new Q(e))):this.formGroups=[]}}z("form-groups-tile",te);class ne extends ee{constructor(e){super(e),this.controlsPerPage=e.controlsPerPage,(isNaN(this.controlsPerPage)||this.controlsPerPage<=1)&&(this.controlsPerPage=1)}}z("horizontal-tile",ne);class le extends ee{constructor(e){super(e),this.states={};for(const t in e.states){const n=e.states[t];n&&(this.states[t]=new j(n))}}}z("selectable-states-tile",le);class oe extends Y{constructor(e){super(e)}}z("single-tile",oe);class re extends ee{constructor(e){super(e)}}z("vertical-tile",re);const ie=({})=>{const{settings:n}=$(),[l,r]=o(null),[a,s]=o(!1);t((()=>{setTimeout((()=>{window.dispatchEvent(new Event("resize")),setTimeout((()=>{s(!0)}),300)}),300)}),[]),t((()=>{r(n?new j(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 u="graphing-grid-container";return a&&(u+=" in"),e.createElement(e.Fragment,null,e.createElement("div",{className:u},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(H,{graphingTiles:l.tiles,responsive:l.responsive,columns:l.columns,containerPadding:l.containerPadding,referenceMargin:l.referenceMargin,referenceWidth:l.referenceWidth})))},ae={};function se(e,t){e&&t&&(ae[e]=t)}const ce=({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=ae[l.control.controlType]||null;return i?e.createElement(i,Object.assign({graphingTile:t,graphingTileIndex:n,graphingTileControl:l},o)):null},ue=({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(ce,{graphingTile:t,graphingTileIndex:n,graphingTileControl:l}))})))},de=({graphingTile:n,graphingTileIndex:l})=>{const a=null==n?void 0:n.tile;if(!a)return null;return e.createElement("div",{className:"form-groups-tile-component"},!i.isArray(a.formGroups)||a.formGroups.length<0?null:a.formGroups.map(((a,s)=>{const c=r(null),[u,d]=o(0),[m,g]=o(!0);t((()=>{if(m){const e=c.current;i.isNullOrUndefined(e)?d(0):d(e.scrollHeight)}else d(0)}),[m]);const h=m?"":" collapsed",p=a.controls,v={height:u};return e.createElement("div",{className:"form-group-container"+h,key:`form-group-${s}`},e.createElement("div",{className:"form-group-title",onClick:e=>{g(!m)}},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:c,style:v},e.createElement(ue,{graphingTile:n,graphingTileIndex:l,graphingTileControls:p})))})))};B("form-groups-tile",de);const me=({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),[u,d]=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),d(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)},w=e=>{e.stopPropagation(),b(u),f(null),g(null)},T=e=>{e.stopPropagation()},N=e=>{e.stopPropagation()},x=e=>{if(e.stopPropagation(),null!==i)return;const t=u;let n=u-1;n<0&&(n=s-1),g(t),d(n),p(null),f(t);const l=setTimeout((()=>{b(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)},C=e=>{e.stopPropagation(),p(null),P(u),g(null)},M=e=>{e.stopPropagation()},k=e=>{e.stopPropagation()},I=e=>{if(e.stopPropagation(),null!==i)return;const t=u;let n=u+1;n>=s&&(n=0),g(t),d(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"},E.map(((t,o)=>{let r="horizontal-tile-page-container";return o===u?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(ue,{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:w,onMouseLeave:T,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:C,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===u&&(n+=" active"),e.createElement("a",{className:n,onMouseEnter:e=>{e.stopPropagation(),t!==u&&(t<u?(p(t),f(null)):(p(null),f(t)),g(null))},onMouseLeave:e=>{e.stopPropagation()},onMouseDown:e=>{e.stopPropagation()},onClick:e=>{if(e.stopPropagation(),t===u)return;const n=u,l=t;g(n),d(l),n<l?p(n):f(n)}})}))))};B("horizontal-tile",me);const ge=({graphingTile:n})=>{const l=null==n?void 0:n.tile;if(!l)return null;const[r,i]=o(""),[a,s]=o(null),[c,u]=o([]),d=$();t((()=>{const e=Object.keys(l.states);if(u(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(M,{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==d?void 0:d.handleSelectableStatesTileChange)&&(null==d||d.handleSelectableStatesTileChange(e))}}))),e.createElement("div",{className:"selected-state-tile-container"},a?e.createElement(H,{tilePrefix:r,graphingTiles:a.tiles,responsive:a.responsive,columns:a.columns,containerPadding:a.containerPadding,referenceMargin:a.referenceMargin,referenceWidth:a.referenceWidth}):null))};B("selectable-states-tile",ge);const he=({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(ue,{graphingTile:t,graphingTileIndex:n,graphingTileControls:o}))};B("single-tile",he);const pe=({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(ue,{graphingTile:t,graphingTileIndex:n,graphingTileControls:o}))};B("vertical-tile",pe);const ve=()=>{setTimeout((()=>{const e=Ee.pop();e&&(T.unmountComponentAtNode(e),e.remove())}),300)};let fe=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,ve()},"function"==typeof t.onDismiss&&(r=t.onClose),t.onDismiss=()=>{r&&r(),n({dismissed:!0}),t.showModal=!1,ve()},t.showModal=!0;let i=e.createElement(I,{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),T.render(i,this._container)}))}};const Ee=[],ye={},be=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)}}))),we=n=>{const l=be(),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[s,c]=o(!1),[u,d]=o(!1);t((()=>{d(!s&&!1!==n.showModal)}),[s,u]);return e.createElement(h,{className:a,open:u,onClose:e=>{c(!0),(null==n?void 0:n.onDismiss)&&n.onDismiss(e)},closeAfterTransition:!0,BackdropComponent:p,BackdropProps:{timeout:300}},(()=>{switch(n.effect){case"fade":default:return e.createElement(v,{in:u},e.createElement("div",{className:i,style:r},n.children));case"slide":return e.createElement(N,{in:u,direction:"left",timeout:300},e.createElement("div",{className:i},n.children))}})())},Te=t=>e.createElement(we,{contentClassName:`${t.className}-content-container`,fixedWidth:t.widthValue,fixedHeight:t.heightValue,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),!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)))),Ne=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||!ye[i])return Promise.reject("invalid-modal");const a=new ye[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",Ne),document.addEventListener("openModal",Ne));export{x as Button,M as Dropdown,Te as FadeModal,Q as FormGroupModel,de as FormGroupsTile,te as FormGroupsTileModel,L as GraphingContext,ce as GraphingControl,K as GraphingControlModel,J as GraphingControlSettingsModel,ie as GraphingGrid,j as GraphingSettingsModel,S as GraphingTile,ue as GraphingTileControls,X as GraphingTileModel,G as GraphingTileSettingsModel,H as GraphingTiles,me as HorizontalTile,ne as HorizontalTileModel,fe as Modal,we as MoorrModal,ee as MultipleControlsTileModel,ge as SelectableStatesTile,le as SelectableStatesTileModel,Y as SingleControlTileModel,he as SingleTile,oe as SingleTileModel,pe as VerticalTile,re as VerticalTileModel,V as createGraphingControl,Z as createGraphingControls,O as createGraphingTile,R as createGraphingTiles,ye as modals,Ee as modalsStack,U as registerGraphingControl,se as registerGraphingControlComponent,z as registerGraphingTile,B as registerGraphingTileComponent,$ as useGraphingContext};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "moorr-react-mui",
3
- "version": "0.2.21",
3
+ "version": "0.2.23",
4
4
  "description": "Moorr React MUI Common Library",
5
5
  "scripts": {
6
6
  "_clear": "rimraf index.* && rimraf typings/* && rimraf cjs/*",