udp-react-enterprise-component-library 25.18.3 → 25.18.4-beta.2

package/dist/DynamicRangeSlider-CZV2yDD3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicRangeSlider-CZV2yDD3.js","names":["useStyles","useStyles","useStyles","colors","useStyles","useStyles","useStyles","useStyles","useStyles"],"sources":["../src/componentSystems/multiThreadTimeline/ui/TimelineHoverCard.jsx","../src/componentSystems/multiThreadTimeline/ui/TimelineDot.jsx","../src/componentSystems/multiThreadTimeline/ui/TimelineTokenSummary.jsx","../src/componentSystems/multiThreadTimeline/ui/TimelineNode.jsx","../src/componentSystems/multiThreadTimeline/ui/TimelineWrapper.jsx","../src/componentSystems/multiThreadTimeline/ui/MultiDot.jsx","../src/componentSystems/multiThreadTimeline/ui/VisualizationDot.jsx","../src/componentSystems/multiThreadTimeline/ui/TimelinePreloaderNode.jsx","../src/componentSystems/multiThreadTimeline/ui/DynamicRangeSlider.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport clsx from 'clsx';\nimport { ChromeCloseIcon } from '@fluentui/react-icons';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  hover: {\n    position: 'absolute',\n    top: 16,\n    left: (props) => (props.offset ? props.offset : 20),\n    padding: theme.spacing(3),\n    paddingTop: (props) =>\n      props.popover ? theme.spacing(1) : theme.spacing(2),\n    paddingRight: theme.spacing(2),\n    background: theme.palette.common.white,\n    boxShadow: `0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%), 0px 11px 15px -7px rgb(0 0 0 / 20%)`,\n    borderRadius: theme.spacing(1),\n    zIndex: 99,\n    minWidth: 190\n  },\n  close: {\n    cursor: 'pointer'\n  },\n  displayHeader: {\n    position: 'absolute',\n    right: theme.spacing(2),\n    top: theme.spacing(1)\n  }\n}));\n\nexport const TimelineHoverCard = (props) => {\n  const { children } = props;\n  const classes = useStyles(props);\n  const { className, popover = true } = props;\n\n  return (\n    <div className={clsx(classes.root, className)}>\n      <div className={classes.hover}>\n        <div className={classes.displayHeader}>\n          {popover && (\n            <div className={classes.close}>\n              <ChromeCloseIcon style={{ width: 10, height: 10 }} />\n            </div>\n          )}\n        </div>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nTimelineHoverCard.propTypes = {\n  children: PropTypes.node,\n  className: PropTypes.string,\n  popover: PropTypes.bool,\n  offset: PropTypes.number\n};\n","import React, { useState } from 'react';\nimport { lighten, makeStyles, Typography } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  dot: {\n    width: theme.spacing(2),\n    height: theme.spacing(2),\n    background: (props) =>\n      props.color ? props.color : theme.palette.secondary.main,\n    borderRadius: 50,\n    margin: theme.spacing(2),\n    color: theme.palette.common.white\n  },\n  hover: {\n    position: 'relative'\n  },\n  title: {\n    transform: 'rotate(90deg)',\n    background: lighten(theme.palette.common.black, 0.8),\n    borderRadius: 4,\n    padding: theme.spacing(1),\n    paddingTop: theme.spacing(0.5),\n    paddingBottom: theme.spacing(0.5),\n    marginTop: theme.spacing(1),\n    textTransform: 'capitalize',\n    position: 'absolute',\n    top: 70,\n    left: -31,\n    width: 115\n  }\n}));\n\nexport const TimelineDot = (props) => {\n  const { hoverContent, title, hideLable = true } = props;\n  const classes = useStyles(props);\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <div>\n      <div className={classes.dot}>\n        <div\n          className={classes.hover}\n          style={{ display: hover ? 'inline' : 'none' }}\n        >\n          {hoverContent}\n        </div>\n      </div>\n      {!hideLable && (\n        <div className={classes.title}>\n          <Typography>\n            <span style={{ fontWeight: 700 }}> {title}</span>\n          </Typography>\n        </div>\n      )}\n    </div>\n  );\n};\n\nTimelineDot.propTypes = {\n  hoverContent: PropTypes.node,\n  title: PropTypes.string,\n  hideLable: PropTypes.bool,\n  color: PropTypes.string\n};\n","import React from 'react';\nimport {\n  makeStyles,\n  lighten,\n  useTheme,\n  Typography,\n  Divider\n} from '@material-ui/core';\nimport { TimelineToken } from './modified/TimelineToken';\nimport {\n  CustomListIcon,\n  AlarmClockIcon,\n  SendIcon,\n  SpeedHighIcon,\n  BankIcon,\n  MoneyIcon,\n  MessageIcon,\n  DietPlanNotebookIcon\n} from '@fluentui/react-icons';\nimport { colors } from '../../../utilities/style/colors';\nimport { TimelineHoverCard } from './TimelineHoverCard';\nimport { TimelineDot } from './TimelineDot';\nimport { TimelineStatus } from './TimelineStatus';\nimport { LayoutUnit } from '../../../layout/LayoutUnit';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    root: {\n      height: 200\n    },\n    timelineWrapper: {\n      background: lighten(theme.palette.secondary.main, 0.7),\n      height: 40,\n      borderRadius: 50,\n      position: (props) => (props.relative ? 'relative' : 'absolute')\n    },\n    token: {\n      position: (props) => (props.relative ? 'relative' : 'absolute'),\n      top: (props) => props.top - 9,\n      left: (props) => props.left - 2,\n      transition: '1s',\n      cursor: 'pointer',\n      '&:hover': {}\n    },\n    // summaryRoot: {\n    //   display: 'flex',\n    //   flexDirection: 'column',\n    //   alignItems: 'center',\n    //   color: 'grey',\n\n    // },\n    summaryRoot: {\n      //marginRight: theme.spacing(4),\n      //width: 100\n    },\n    negativeMargin: {\n      marginTop: -6\n    },\n    titleContainer: {\n      textOverflow: 'ellipsis',\n      //background: lighten(theme.palette.common.black, 0.9),\n      overflow: 'hidden',\n      //color: theme.palette.common.white,\n      borderRadius: 4,\n      paddingLeft: 4,\n      paddingRight: 2\n    }\n  }),\n  { name: 'TimelineTokenSummary' }\n);\n\nexport const TimelineTokenSummary = (props) => {\n  const {\n    timelineItem,\n    onClick,\n    isHover,\n    title,\n    showLabel = true,\n    dot,\n    color,\n    date,\n    message,\n    amount,\n    user,\n    status,\n    summary,\n    iconColor,\n    showToken,\n    details = true,\n    icon\n  } = props;\n  const classes = useStyles(props);\n  let type = '';\n  const theme = useTheme();\n\n  const TimelineSummary = ({ message }) => {\n    return (\n      <div>\n        <div\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'center'\n          }}\n        >\n          {summary && (\n            <div style={{ height: 24 }}>\n              <Divider orientation='vertical' />\n            </div>\n          )}\n\n          <div className={classes.summaryRoot} style={{ display: 'flex' }}>\n            {/* <div className={classes.titleContainer} style={{width: scale}} > */}\n\n            {/* <div className={classes.titleContainer} style={{height: details && 90}} > */}\n            <div\n              className={classes.titleContainer}\n              style={{ height: summary && 90 }}\n            >\n              <Typography\n                variant='caption'\n                style={{\n                  fontWeight: 700,\n                  textOverflow: 'ellipsis',\n                  overflow: 'hidden'\n                }}\n              >\n                {title}\n              </Typography>\n\n              {details && (\n                <div>\n                  <LayoutUnit unit='nudge' />\n                  <Typography>\n                    {/* {amount && '$' }  {amount} */}\n                    {amount}\n                  </Typography>\n                  <TimelineStatus status={status} />\n                  <div>\n                    <Typography variant='caption'>{message}</Typography>\n                    <div>\n                      <Typography variant='caption'>{user}</Typography>\n                    </div>\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  };\n\n  const NodeItem = ({ dot, icon }) => {\n    return (\n      <div className={classes.token} onClick={onClick}>\n        {(dot || showToken) && (\n          <TimelineToken\n            color={colors.unity?.info?.hint}\n            icon={icon}\n            size='small'\n            // iconColorOverride={theme.palette.info.light}\n            iconColorOverride={iconColor}\n            onClick={onClick}\n            action\n            isHover={isHover}\n            hoverContainer={\n              <TimelineHoverCard\n                date={date}\n                categoryColor={theme.palette.info.main}\n                message={message}\n                timelineItem={timelineItem}\n              />\n            }\n          >\n            {' '}\n          </TimelineToken>\n        )}\n        {!dot && !summary && (\n          <TimelineDot\n            title={title}\n            date={date}\n            color={color}\n            hoverContent={\n              <TimelineHoverCard\n                date={date}\n                categoryColor={theme.palette.info.main}\n                message={message}\n                timelineItem={timelineItem}\n              />\n            }\n          />\n        )}\n        {showLabel && !dot && <TimelineSummary message={message} />}\n      </div>\n    );\n  };\n\n  switch (timelineItem) {\n    case 'Email':\n      type = <NodeItem icon={SendIcon} dot={dot} />;\n      break;\n    case 'ServiceOrder':\n      type = <NodeItem icon={CustomListIcon} dot={dot} />;\n      break;\n    case 'SMS':\n      type = <NodeItem icon={MessageIcon} dot={dot} />;\n      break;\n    case 'Web Payment':\n      type = <NodeItem icon={BankIcon} dot={dot} />;\n      break;\n    case 'Deposit - Regular':\n      type = <NodeItem icon={AlarmClockIcon} dot={dot} />;\n      break;\n    case 'Start Read':\n      type = <NodeItem icon={SpeedHighIcon} dot={dot} />;\n      break;\n    case 'Regular Bill':\n      type = <NodeItem icon={DietPlanNotebookIcon} dot={dot} />;\n      break;\n    case 'Email Notify':\n      type = <NodeItem icon={MoneyIcon} dot={dot} />;\n      break;\n    case 'Payment':\n      type = <NodeItem icon={MoneyIcon} dot={dot} />;\n      break;\n    case 'Bill':\n      type = <NodeItem icon={MoneyIcon} dot={dot} />;\n      break;\n    case 'Service Order':\n      type = <NodeItem icon={MoneyIcon} dot={dot} />;\n      break;\n    case 'Late':\n      type = <NodeItem icon={MoneyIcon} dot={dot} />;\n      break;\n    case 'Letter':\n      type = <NodeItem icon={MoneyIcon} dot={dot} />;\n      break;\n    case 'Disc':\n      type = <NodeItem icon={MoneyIcon} dot={dot} />;\n      break;\n    default:\n  }\n\n  return <NodeItem icon={icon ? icon : MoneyIcon} dot={dot} />;\n};\n\nTimelineTokenSummary.propTypes = {\n  timelineItem: PropTypes.string.isRequired,\n  onClick: PropTypes.func,\n  isHover: PropTypes.bool,\n  title: PropTypes.string,\n  showLabel: PropTypes.bool,\n  dot: PropTypes.bool,\n  color: PropTypes.string,\n  date: PropTypes.string,\n  message: PropTypes.string,\n  amount: PropTypes.string,\n  user: PropTypes.string,\n  status: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  summary: PropTypes.bool,\n  iconColor: PropTypes.string,\n  showToken: PropTypes.bool,\n  details: PropTypes.bool,\n  icon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.object])\n};\n","import React, { useState, memo } from 'react';\nimport { makeStyles, Typography } from '@material-ui/core';\nimport { TimelineDateBar } from './TimelineDateBar';\nimport { TimelineTokenSummary } from './TimelineTokenSummary';\nimport { TimelineStatus } from './TimelineStatus';\nimport { TimelineHoverCard } from './TimelineHoverCard';\nimport { LayoutUnit } from '../../../layout/LayoutUnit';\nimport PropTypes from 'prop-types'; // import PropTypes\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  wrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignContent: 'space-between',\n    alignItems: 'center'\n  },\n  label: { width: 46, textAlign: 'center' }\n}));\n// eslint-disable-next-line react/display-name\nexport const TimelineNode = memo((props) => {\n  const [hover, setHover] = useState(false);\n  const {\n    data,\n    height = 187,\n    details = true,\n    show = false,\n    width,\n    dot,\n    iconColor,\n    dotColor,\n    test,\n    icon\n  } = props;\n  const classes = useStyles(props);\n  const maxLineLength = 8;\n  const maxLines = 2;\n  const capitalizeFirstLetter = (str) => {\n    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();\n  };\n  const formatString = (str) => {\n    let formattedStr = '';\n    let lineCount = 0;\n    let words = str.split(' ');\n    for (let i = 0; i < words.length && lineCount < maxLines; i++) {\n      let line = '';\n      while (\n        i < words.length &&\n        line.length + words[i].length <= maxLineLength\n      ) {\n        line += capitalizeFirstLetter(words[i]) + ' ';\n        i++;\n      }\n      if (line.length > maxLineLength) {\n        line = line.slice(0, maxLineLength - 3) + '...';\n      }\n      formattedStr += line.trim() + '\\n';\n      lineCount++;\n      i--;\n    }\n    return formattedStr.trim();\n  };\n  return (\n    <div\n      onMouseDownCapture={() => setHover(!hover)}\n      className={classes.root}\n      style={{ background: details && 'whitesmoke', width: width }}\n    >\n      <div>{test} </div>\n      {data.map((item) => {\n        return (\n          <div>\n            {(hover || show) && (\n              <TimelineHoverCard offset={0}>\n                <div>\n                  <Typography variant='h6'>\n                    {item.details.shortDescription}\n                  </Typography>\n                </div>\n                <div>\n                  {item.details.data1 ? (\n                    <Typography variant='caption'>\n                      {item.details.data1}\n                    </Typography>\n                  ) : (\n                    <TimelineStatus status={item.details.data2} />\n                  )}\n                </div>\n                <div>\n                  <Typography variant='caption'>{item.details.date}</Typography>\n                </div>\n                <div>\n                  <Typography variant='caption'>\n                    {item.details.data3}\n                  </Typography>\n                </div>\n              </TimelineHoverCard>\n            )}\n            <div className={classes.wrapper} style={{ height: height - 4 }}>\n              <div style={{ marginRight: -8 }}>\n                <TimelineTokenSummary\n                  dot={dot}\n                  color={dotColor}\n                  relative\n                  timelineItem={item.details.transactionType}\n                  iconColor={iconColor}\n                  //timelineItem=\"Email\"\n                  icon={icon}\n                  removeHeight\n                />\n              </div>\n              <div\n                className={classes.label}\n                style={{ marginTop: !details && -3 }}\n              >\n                {dot && (\n                  <Typography\n                    variant='subtitle2'\n                    style={{ lineHeight: '0.9rem' }}\n                  >\n                    {formatString(item.details.shortDescription)}\n                  </Typography>\n                )}\n              </div>\n              {details && <LayoutUnit unit='nudge' />}\n              {details && (\n                <div className={classes.wrapper}>\n                  <div>\n                    {item.details.data1 &&\n                    item.details.data1.toString().trim() !== '' ? (\n                      <Typography variant='caption'>\n                        {item.details.data1}\n                      </Typography>\n                    ) : (\n                      <TimelineStatus status={Number(item.details.data2)} />\n                    )}\n                  </div>\n                  <div>\n                    <Typography variant='caption'>\n                      {item.details.date}\n                    </Typography>\n                  </div>\n                  <div>\n                    <Typography variant='caption'>\n                      {item.details.data3}\n                    </Typography>\n                  </div>\n                </div>\n              )}\n            </div>\n            {details && (\n              <div>\n                <TimelineDateBar\n                  month={Number(item.date.toString().charAt(0))}\n                />\n              </div>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n});\n\n// Define propTypes\nTimelineNode.propTypes = {\n  data: PropTypes.array.isRequired,\n  height: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),\n  details: PropTypes.bool,\n  show: PropTypes.bool,\n  width: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.bool\n  ]),\n  dot: PropTypes.bool,\n  iconColor: PropTypes.string,\n  dotColor: PropTypes.string,\n  test: PropTypes.string,\n  icon: PropTypes.element\n};\n","import React from 'react';\nimport { makeStyles, lighten } from '@material-ui/core';\nimport { getCategoryColor } from '../../../utilities/style/colorConverter';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types'; // import PropTypes\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    root: {},\n    timelineWrapper: {\n      background: lighten(theme.palette.secondary.main, 0.7),\n      height: 40,\n      borderRadius: 50\n      //width: 800\n      //position: 'absolute'\n    },\n    dot: {\n      width: 30,\n      height: 30,\n      borderRadius: 50\n    },\n    colorOne: {\n      background: lighten(theme.palette.success.main, 0.8)\n    },\n    colorTwo: {\n      background: lighten(theme.palette.info.main, 0.8)\n    },\n    colorThree: {\n      background: lighten(theme.palette.secondary.main, 0.9)\n    },\n    colorFour: {\n      background: getCategoryColor('four')\n    },\n    colorFive: {\n      background: getCategoryColor('five')\n    },\n    colorSix: {\n      background: getCategoryColor('six')\n    },\n    colorSeven: {\n      background: lighten(theme.palette.warning.main, 0.9)\n    }\n  }),\n  { name: 'Timeline' }\n);\n\nexport const TimelineWrapper = ({ style, timeline }) => {\n  const classes = useStyles();\n  let type = '';\n  switch (timeline) {\n    case 1:\n      type = (\n        <div\n          className={clsx(classes.timelineWrapper, classes.colorOne)}\n          style={style}\n        />\n      );\n      break;\n    case 2:\n      type = (\n        <div\n          className={clsx(classes.timelineWrapper, classes.colorTwo)}\n          style={style}\n        />\n      );\n      break;\n    case 3:\n      type = (\n        <div\n          className={clsx(classes.timelineWrapper, classes.colorThree)}\n          style={style}\n        />\n      );\n      break;\n    case 4:\n      type = (\n        <div\n          className={clsx(classes.timelineWrapper, classes.colorFour)}\n          style={style}\n        />\n      );\n      break;\n    case 5:\n      type = (\n        <div\n          className={clsx(classes.timelineWrapper, classes.colorFive)}\n          style={style}\n        />\n      );\n      break;\n    case 6:\n      type = (\n        <div\n          className={clsx(classes.timelineWrapper, classes.colorSix)}\n          style={style}\n        />\n      );\n      break;\n    case 7:\n      type = (\n        <div\n          className={clsx(classes.timelineWrapper, classes.colorSeven)}\n          style={style}\n        />\n      );\n      break;\n    default:\n  }\n\n  return type;\n};\n\n// Define propTypes\nTimelineWrapper.propTypes = {\n  style: PropTypes.object,\n  timeline: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7]).isRequired\n};\n","import React, { useState } from 'react';\nimport { makeStyles, Typography } from '@material-ui/core';\nimport clsx from 'clsx';\nimport { TimelineHoverCard } from './TimelineHoverCard';\nimport { TimelineStatus } from './TimelineStatus';\nimport PropTypes from 'prop-types'; // import PropTypes\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    cursor: 'pointer'\n  },\n  wrapper: {\n    width: 130,\n    marginBottom: theme.spacing(2)\n  }\n}));\n\nexport const MultiDot = (props) => {\n  const { map, number } = props;\n  const classes = useStyles(props);\n  const { className } = props;\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <div\n      className={clsx(classes.root, className)}\n      onMouseDownCapture={() => setHover(!hover)}\n    >\n      <div\n        style={{\n          paddingLeft: 16,\n          paddingRight: 16,\n          paddingTop: 10,\n          paddingBottom: 10,\n          background: '#918296',\n          borderRadius: 50,\n          color: 'white'\n        }}\n      >\n        <Typography variant='subtitle2'> {number} </Typography>\n      </div>\n      {hover && (\n        <TimelineHoverCard>\n          {map.map((item) => {\n            return (\n              <div className={classes.wrapper}>\n                <Typography variant='subtitle2'>\n                  {item.details.shortDescription}\n                </Typography>\n                <Typography variant='caption'> {item.details.date} </Typography>\n                <TimelineStatus status={item.details.status} />\n              </div>\n            );\n          })}\n        </TimelineHoverCard>\n      )}\n    </div>\n  );\n};\n\n// Define propTypes\nMultiDot.propTypes = {\n  map: PropTypes.arrayOf(\n    PropTypes.shape({\n      details: PropTypes.shape({\n        shortDescription: PropTypes.string.isRequired,\n        date: PropTypes.string.isRequired,\n        status: PropTypes.string.isRequired\n      }).isRequired\n    })\n  ).isRequired,\n  number: PropTypes.number.isRequired,\n  className: PropTypes.string\n};\n","import React, { useState } from 'react';\nimport { makeStyles, useTheme } from '@material-ui/core';\nimport { TimelineHoverCard } from './TimelineHoverCard';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types'; // import PropTypes\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    minHeight: theme.spacing(1.25),\n    minWidth: theme.spacing(1.25),\n    borderRadius: 25,\n    cursor: (props) => props.hover && 'pointer'\n  },\n  multi: {\n    padding: 11,\n    paddingTop: 5,\n    paddingBottom: 5,\n    color: theme.palette.common.white\n  }\n}));\n\nexport const VisualizationDot = (props) => {\n  const theme = useTheme();\n  const classes = useStyles(props);\n  const { type, children, hover, multi, noHover } = props;\n\n  const [showHover, setShowHover] = useState();\n\n  const DotWrapper = ({ color }) => {\n    return (\n      <div\n        onMouseEnter={() => setShowHover(true)}\n        onMouseLeave={() => setShowHover(false)}\n        className={clsx(classes.root, multi && classes.multi)}\n        style={{ background: color }}\n      >\n        {children}\n        {showHover && !noHover && (\n          <TimelineHoverCard popover={false}> {hover} </TimelineHoverCard>\n        )}\n      </div>\n    );\n  };\n\n  let dot = theme.palette.primary.main;\n  switch (type) {\n    case 'Late Bill':\n      dot = <DotWrapper color={theme.palette.warning.light} />;\n      break;\n    case 'Disconnect':\n      dot = <DotWrapper color={theme.palette.error.main} />;\n      break;\n    case 'Letter Sent':\n      dot = <DotWrapper color={theme.palette.warning.dark} />;\n      break;\n    case 'Payment':\n      dot = <DotWrapper color={theme.palette.success.main} />;\n      break;\n    case 'Arrange Pay':\n      dot = <DotWrapper color={theme.palette.warning.main} />;\n      break;\n    default:\n      dot = <DotWrapper color={theme.palette.info.light} />;\n      break;\n  }\n  return dot;\n};\n\n// Define propTypes\nVisualizationDot.propTypes = {\n  type: PropTypes.string,\n  children: PropTypes.node,\n  hover: PropTypes.node,\n  multi: PropTypes.bool,\n  noHover: PropTypes.bool\n};\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport clsx from 'clsx';\nimport Skeleton from '@material-ui/lab/Skeleton';\nimport { LayoutUnit } from '../../../layout/LayoutUnit';\nimport PropTypes from 'prop-types'; // import PropTypes\n\nconst useStyles = makeStyles((theme) => ({\n  root: {}\n}));\n\nexport const TimelinePreloaderNode = (props) => {\n  const { children, shortView } = props;\n  const classes = useStyles(props);\n  const { className, longView } = props;\n\n  return (\n    <div className={clsx(classes.root, className)}>\n      {shortView && (\n        <div style={{ marginRight: 100, marginBottom: 40 }}>\n          <LayoutUnit unit='nudge' />\n          <div style={{ display: 'flex', justifyContent: 'center' }}>\n            <Skeleton variant='circle' width={30} height={30} />\n          </div>\n          <LayoutUnit unit='nudge' />\n          <div style={{ display: 'flex', justifyContent: 'center' }}>\n            <Skeleton variant='rect' width={1} height={25} />\n          </div>\n          <Skeleton variant='text' />\n          <Skeleton variant='text' />\n          <LayoutUnit unit='sm' />\n          <Skeleton variant='rect' width={80} height={6} />\n        </div>\n      )}\n\n      {longView && (\n        <div>\n          <Skeleton variant='rect' width={800} height={45} />\n        </div>\n      )}\n    </div>\n  );\n};\n\n// Define propTypes\nTimelinePreloaderNode.propTypes = {\n  children: PropTypes.node,\n  shortView: PropTypes.bool,\n  longView: PropTypes.bool,\n  className: PropTypes.string\n};\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport RangeSlider from 'react-range-slider-input';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  rangeSlider: {\n    '& .range-slider__thumb': {\n      width: theme.spacing(2.25),\n      height: (props) => `calc(${props.margin}px + ${props.threads}px )`,\n      borderRadius: theme.spacing(0.5),\n      background:\n        \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23333' viewBox='0 0 24 24'%3E%3Cpath d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z' /%3E%3C/svg%3E\\\") #fff\",\n      backgroundRepeat: 'no-repeat',\n      backgroundPosition: 'center'\n    },\n    '& .range-slider__range': {\n      background: 'transparent',\n      border: '4px solid #fff',\n      boxSizing: 'border-box',\n      boxShadow: '0 0 0 9999px rgba(194, 194, 194, 0.75)',\n      zIndex: 0\n    },\n    height: (props) => `calc(${props.margin}px + ${props.threads}px )`,\n    background: 'whitesmoke',\n    overflow: 'hidden'\n  }\n}));\n\nexport const DynamicRangeSlider = (props) => {\n  const { children, ...otherProps } = props;\n  const classes = useStyles(props);\n  return <RangeSlider className={classes.rangeSlider} {...otherProps} />;\n};\n"],"mappings":"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"}

package/dist/Ellipse-DGTaApGj.js

@@ -0,0 +1,113 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core";
+import PropTypes from "prop-types";
+
+//#region src/utilities/style/utils/styleUtils.js
+const getEllipseColor = (theme, color) => {
+	if (!theme) return "";
+	let ellipseColor = theme.palette.primary.main;
+	switch (color) {
+		case "action":
+			ellipseColor = theme.palette.systemIcon?.action?.main;
+			break;
+		case "sequence":
+			ellipseColor = theme.palette.systemIcon?.sequence?.main;
+			break;
+		case "trigger":
+			ellipseColor = theme.palette.systemIcon?.trigger?.main;
+			break;
+		case "condition":
+			ellipseColor = theme.palette.systemIcon?.condition?.main;
+			break;
+		case "primary":
+			ellipseColor = theme.palette.primary.main;
+			break;
+		case "secondary":
+			ellipseColor = theme.palette.secondary.main;
+			break;
+		case "info":
+			ellipseColor = theme.palette.info.main;
+			break;
+		case "warning":
+			ellipseColor = theme.palette.warning.main;
+			break;
+		case "error":
+			ellipseColor = theme.palette.error.main;
+			break;
+		case "success":
+			ellipseColor = theme.palette.success.main;
+			break;
+		default:
+			ellipseColor = theme.palette.secondary.main;
+			break;
+	}
+	return ellipseColor;
+};
+const getEllipseHintColor = (theme, color) => {
+	if (!theme) return "";
+	let ellipseHintColor = theme.palette.primary.main;
+	switch (color) {
+		case "action":
+			ellipseHintColor = theme.palette.systemIcon?.action?.hint;
+			break;
+		case "sequence":
+			ellipseHintColor = theme.palette.systemIcon?.sequence?.hint;
+			break;
+		case "trigger":
+			ellipseHintColor = theme.palette.systemIcon?.trigger?.hint;
+			break;
+		case "condition":
+			ellipseHintColor = theme.palette.systemIcon?.condition?.hint;
+			break;
+		case "primary":
+			ellipseHintColor = theme.palette.primary.hint;
+			break;
+		case "secondary":
+			ellipseHintColor = theme.palette.secondary.hint;
+			break;
+		case "info":
+			ellipseHintColor = theme.palette.unity?.info?.hint;
+			break;
+		case "warning":
+			ellipseHintColor = theme.palette.unity?.warning?.hint;
+			break;
+		case "error":
+			ellipseHintColor = theme.palette.unity?.error?.hint;
+			break;
+		case "success":
+			ellipseHintColor = theme.palette.unity?.success?.hint;
+			break;
+		default:
+			ellipseHintColor = theme.palette.common.white;
+			break;
+	}
+	return ellipseHintColor;
+};
+
+//#endregion
+//#region src/UI/components/dataDisplay/Ellipse.jsx
+const useStyles = makeStyles((theme) => ({ root: {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: (props) => props.size === "small" ? theme.spacing(4) : theme.spacing(5),
+	height: (props) => props.size === "small" ? theme.spacing(4) : theme.spacing(5),
+	borderRadius: 50,
+	border: (props) => props.variant === "filled" ? "none" : `2px solid`,
+	backgroundColor: (props) => props.variant === "filled" && getEllipseHintColor(theme, props.color),
+	borderColor: (props) => getEllipseColor(theme, props.color)
+} }));
+const Ellipse = (props) => {
+	const { children } = props;
+	const classes = useStyles(props);
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, children);
+};
+Ellipse.propTypes = {
+	color: PropTypes.string,
+	size: PropTypes.string,
+	variant: PropTypes.string
+};
+
+//#endregion
+export { getEllipseColor as n, getEllipseHintColor as r, Ellipse as t };
+//# sourceMappingURL=Ellipse-DGTaApGj.js.map

package/dist/Ellipse-DGTaApGj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ellipse-DGTaApGj.js","names":[],"sources":["../src/utilities/style/utils/styleUtils.js","../src/UI/components/dataDisplay/Ellipse.jsx"],"sourcesContent":["export const getEllipseColor = (theme, color) => {\n  if (!theme) {\n    return '';\n  }\n  let ellipseColor = theme.palette.primary.main;\n  switch (color) {\n    case 'action':\n      ellipseColor = theme.palette.systemIcon?.action?.main;\n      break;\n    case 'sequence':\n      ellipseColor = theme.palette.systemIcon?.sequence?.main;\n      break;\n    case 'trigger':\n      ellipseColor = theme.palette.systemIcon?.trigger?.main;\n      break;\n    case 'condition':\n      ellipseColor = theme.palette.systemIcon?.condition?.main;\n      break;\n    case 'primary':\n      ellipseColor = theme.palette.primary.main;\n      break;\n    case 'secondary':\n      ellipseColor = theme.palette.secondary.main;\n      break;\n    case 'info':\n      ellipseColor = theme.palette.info.main;\n      break;\n    case 'warning':\n      ellipseColor = theme.palette.warning.main;\n      break;\n    case 'error':\n      ellipseColor = theme.palette.error.main;\n      break;\n    case 'success':\n      ellipseColor = theme.palette.success.main;\n      break;\n    default:\n      ellipseColor = theme.palette.secondary.main;\n      break;\n  }\n  return ellipseColor;\n};\n\nexport const getEllipseHintColor = (theme, color) => {\n  if (!theme) {\n    return '';\n  }\n  let ellipseHintColor = theme.palette.primary.main;\n  switch (color) {\n    case 'action':\n      ellipseHintColor = theme.palette.systemIcon?.action?.hint;\n      break;\n    case 'sequence':\n      ellipseHintColor = theme.palette.systemIcon?.sequence?.hint;\n      break;\n    case 'trigger':\n      ellipseHintColor = theme.palette.systemIcon?.trigger?.hint;\n      break;\n    case 'condition':\n      ellipseHintColor = theme.palette.systemIcon?.condition?.hint;\n      break;\n    case 'primary':\n      ellipseHintColor = theme.palette.primary.hint;\n      break;\n    case 'secondary':\n      ellipseHintColor = theme.palette.secondary.hint;\n      break;\n    case 'info':\n      ellipseHintColor = theme.palette.unity?.info?.hint;\n      break;\n    case 'warning':\n      ellipseHintColor = theme.palette.unity?.warning?.hint;\n      break;\n    case 'error':\n      ellipseHintColor = theme.palette.unity?.error?.hint;\n      break;\n    case 'success':\n      ellipseHintColor = theme.palette.unity?.success?.hint;\n      break;\n    default:\n      ellipseHintColor = theme.palette.common.white;\n      break;\n  }\n\n  return ellipseHintColor;\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core';\nimport {\n  getEllipseColor,\n  getEllipseHintColor\n} from '../../../utilities/style/utils/styleUtils';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: (props) =>\n      props.size === 'small' ? theme.spacing(4) : theme.spacing(5),\n    height: (props) =>\n      props.size === 'small' ? theme.spacing(4) : theme.spacing(5),\n    borderRadius: 50,\n    border: (props) => (props.variant === 'filled' ? 'none' : `2px solid`),\n    backgroundColor: (props) =>\n      props.variant === 'filled' && getEllipseHintColor(theme, props.color),\n    borderColor: (props) => getEllipseColor(theme, props.color)\n  }\n}));\n\nexport const Ellipse = (props) => {\n  const { children } = props;\n  const classes = useStyles(props);\n\n  return <div className={classes.root}>{children}</div>;\n};\n\nEllipse.propTypes = {\n  color: PropTypes.string,\n  size: PropTypes.string,\n  variant: PropTypes.string\n};\n"],"mappings":";;;;;AAAA,MAAa,mBAAmB,OAAO,UAAU;AAC/C,KAAI,CAAC,MACH,QAAO;CAET,IAAI,eAAe,MAAM,QAAQ,QAAQ;AACzC,SAAQ,OAAR;EACE,KAAK;AACH,kBAAe,MAAM,QAAQ,YAAY,QAAQ;AACjD;EACF,KAAK;AACH,kBAAe,MAAM,QAAQ,YAAY,UAAU;AACnD;EACF,KAAK;AACH,kBAAe,MAAM,QAAQ,YAAY,SAAS;AAClD;EACF,KAAK;AACH,kBAAe,MAAM,QAAQ,YAAY,WAAW;AACpD;EACF,KAAK;AACH,kBAAe,MAAM,QAAQ,QAAQ;AACrC;EACF,KAAK;AACH,kBAAe,MAAM,QAAQ,UAAU;AACvC;EACF,KAAK;AACH,kBAAe,MAAM,QAAQ,KAAK;AAClC;EACF,KAAK;AACH,kBAAe,MAAM,QAAQ,QAAQ;AACrC;EACF,KAAK;AACH,kBAAe,MAAM,QAAQ,MAAM;AACnC;EACF,KAAK;AACH,kBAAe,MAAM,QAAQ,QAAQ;AACrC;EACF;AACE,kBAAe,MAAM,QAAQ,UAAU;AACvC;;AAEJ,QAAO;;AAGT,MAAa,uBAAuB,OAAO,UAAU;AACnD,KAAI,CAAC,MACH,QAAO;CAET,IAAI,mBAAmB,MAAM,QAAQ,QAAQ;AAC7C,SAAQ,OAAR;EACE,KAAK;AACH,sBAAmB,MAAM,QAAQ,YAAY,QAAQ;AACrD;EACF,KAAK;AACH,sBAAmB,MAAM,QAAQ,YAAY,UAAU;AACvD;EACF,KAAK;AACH,sBAAmB,MAAM,QAAQ,YAAY,SAAS;AACtD;EACF,KAAK;AACH,sBAAmB,MAAM,QAAQ,YAAY,WAAW;AACxD;EACF,KAAK;AACH,sBAAmB,MAAM,QAAQ,QAAQ;AACzC;EACF,KAAK;AACH,sBAAmB,MAAM,QAAQ,UAAU;AAC3C;EACF,KAAK;AACH,sBAAmB,MAAM,QAAQ,OAAO,MAAM;AAC9C;EACF,KAAK;AACH,sBAAmB,MAAM,QAAQ,OAAO,SAAS;AACjD;EACF,KAAK;AACH,sBAAmB,MAAM,QAAQ,OAAO,OAAO;AAC/C;EACF,KAAK;AACH,sBAAmB,MAAM,QAAQ,OAAO,SAAS;AACjD;EACF;AACE,sBAAmB,MAAM,QAAQ,OAAO;AACxC;;AAGJ,QAAO;;;;;AC5ET,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,QAAQ,UACN,MAAM,SAAS,UAAU,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,EAAE;CAC9D,SAAS,UACP,MAAM,SAAS,UAAU,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,EAAE;CAC9D,cAAc;CACd,SAAS,UAAW,MAAM,YAAY,WAAW,SAAS;CAC1D,kBAAkB,UAChB,MAAM,YAAY,YAAY,oBAAoB,OAAO,MAAM,MAAM;CACvE,cAAc,UAAU,gBAAgB,OAAO,MAAM,MAAM;CAC5D,EACF,EAAE;AAEH,MAAa,WAAW,UAAU;CAChC,MAAM,EAAE,aAAa;CACrB,MAAM,UAAU,UAAU,MAAM;AAEhC,QAAO,oCAAC,SAAI,WAAW,QAAQ,QAAO,SAAe;;AAGvD,QAAQ,YAAY;CAClB,OAAO,UAAU;CACjB,MAAM,UAAU;CAChB,SAAS,UAAU;CACpB"}

package/dist/EmailDisplay-znWYZ3hx.js

@@ -0,0 +1,116 @@
+import { t as LayoutUnit } from "./LayoutUnit-xKXf06lQ.js";
+import { t as PrimaryActionHeader } from "./PrimaryActionHeader-rDbNJsiU.js";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Box, Card, Grow, makeStyles } from "@material-ui/core";
+import { CancelIcon } from "@fluentui/react-icons";
+import { useTranslation } from "react-i18next";
+import PhoneImage from "./assets/images/phone.png";
+import ReactHtmlParser from "react-html-parser";
+
+//#region src/UI/components/dataDisplay/SmsDisplay.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	messages: {
+		flex: "1",
+		margin: "0 20px",
+		overflow: "hidden"
+	},
+	messagesBox: {
+		paddingRight: "3%",
+		paddingLeft: "3%",
+		width: "23vw",
+		height: "88%",
+		overflowY: "auto",
+		boxSizing: "border-box",
+		display: "flex",
+		justifyContent: "center"
+	},
+	message: {
+		backgroundColor: "#E9E9EB",
+		borderRadius: "10px",
+		padding: "10px",
+		marginBottom: "10px",
+		alignSelf: "flex-start",
+		overflowWrap: "break-word",
+		margin: theme.spacing(1)
+	},
+	messageSection: {
+		flex: "1",
+		overflowY: "auto",
+		padding: "20px",
+		backgroundImage: `url(${PhoneImage})`,
+		backgroundSize: "contain",
+		backgroundRepeat: "no-repeat",
+		backgroundPosition: "center",
+		position: "relative",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		height: "calc(100vh - 140px)"
+	}
+}));
+const SmsDisplay = (props) => {
+	const { messages = [], to, from, title, handleClose } = props;
+	const classes = useStyles$1();
+	const [messagesList, setMessagesList] = useState(messages);
+	const { t } = useTranslation();
+	const messagesBoxRef = useRef(null);
+	const secondaryButtons = useMemo(() => {
+		const buttons = [];
+		if (handleClose) buttons.push({
+			label: t("Close"),
+			component: CancelIcon,
+			click: () => handleClose()
+		});
+		return buttons;
+	}, [t, handleClose]);
+	useEffect(() => {
+		if (messagesBoxRef.current) messagesBoxRef.current.scrollTop = messagesBoxRef.current.scrollHeight;
+	}, [messagesList]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Card, { square: true }, /* @__PURE__ */ React.createElement(PrimaryActionHeader, {
+		hidePAB: true,
+		title,
+		subheader: `To: ${to} . From: ${from}`,
+		secondaryButtons
+	})), /* @__PURE__ */ React.createElement(Box, { className: classes.messages }, /* @__PURE__ */ React.createElement(Box, { className: classes.messageSection }, /* @__PURE__ */ React.createElement(Box, {
+		className: classes.messagesBox,
+		ref: messagesBoxRef
+	}, messagesList.map((message, index) => /* @__PURE__ */ React.createElement(Grow, {
+		key: index,
+		in: true,
+		timeout: 800
+	}, /* @__PURE__ */ React.createElement(Box, {
+		className: classes.message,
+		dangerouslySetInnerHTML: { __html: message }
+	})))))));
+};
+
+//#endregion
+//#region src/UI/components/dataDisplay/EmailDisplay.jsx
+const useStyles = makeStyles((theme) => ({ htmlContainer: {
+	display: "flex",
+	justifyContent: "center"
+} }));
+const EmailDisplay = (props) => {
+	const { html = "", to, from, title, handleClose } = props;
+	const classes = useStyles();
+	const { t } = useTranslation();
+	const secondaryButtons = useMemo(() => {
+		const buttons = [];
+		if (handleClose) buttons.push({
+			label: t("Close"),
+			component: CancelIcon,
+			click: () => handleClose()
+		});
+		return buttons;
+	}, [t, handleClose]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Card, { square: true }, /* @__PURE__ */ React.createElement(PrimaryActionHeader, {
+		hidePAB: true,
+		title,
+		subheader: `To: ${to} . From: ${from}`,
+		secondaryButtons
+	})), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "sm" }), /* @__PURE__ */ React.createElement("div", { className: classes.htmlContainer }, ReactHtmlParser(html)));
+};
+
+//#endregion
+export { SmsDisplay as n, EmailDisplay as t };
+//# sourceMappingURL=EmailDisplay-znWYZ3hx.js.map

package/dist/EmailDisplay-znWYZ3hx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailDisplay-znWYZ3hx.js","names":["useStyles"],"sources":["../src/UI/components/dataDisplay/SmsDisplay.jsx","../src/UI/components/dataDisplay/EmailDisplay.jsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { makeStyles, Box, Grow, Card } from '@material-ui/core';\nimport PhoneImage from '../../../assets/images/phone.png';\nimport { PrimaryActionHeader } from '../../utilityDisplay/utilityHeader/PrimaryActionHeader';\nimport { useTranslation } from 'react-i18next';\nimport { CancelIcon } from '@fluentui/react-icons';\n\nconst useStyles = makeStyles((theme) => ({\n  messages: {\n    flex: '1',\n    // height: '100%',\n    margin: '0 20px',\n    overflow: 'hidden'\n  },\n  messagesBox: {\n    paddingRight: '3%',\n    paddingLeft: '3%',\n    width: '23vw',\n    height: '88%',\n    overflowY: 'auto',\n    boxSizing: 'border-box',\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  message: {\n    backgroundColor: '#E9E9EB',\n    borderRadius: '10px',\n    padding: '10px',\n    marginBottom: '10px',\n    alignSelf: 'flex-start',\n    overflowWrap: 'break-word',\n    margin: theme.spacing(1)\n  },\n  messageSection: {\n    flex: '1',\n    overflowY: 'auto',\n    padding: '20px',\n    backgroundImage: `url(${PhoneImage})`,\n    backgroundSize: 'contain',\n    backgroundRepeat: 'no-repeat',\n    backgroundPosition: 'center',\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: 'calc(100vh - 140px)' // Ensures the container takes full viewport height\n  }\n}));\n\nexport const SmsDisplay = (props) => {\n  const { messages = [], to, from, title, handleClose } = props;\n  const classes = useStyles();\n  const [messagesList, setMessagesList] = useState(messages);\n  const { t } = useTranslation();\n\n  const messagesBoxRef = useRef(null);\n\n  const secondaryButtons = useMemo(() => {\n    const buttons = [];\n    if (handleClose) {\n      buttons.push({\n        label: t('Close'),\n        component: CancelIcon,\n        click: () => handleClose()\n      });\n    }\n    return buttons;\n  }, [t, handleClose]);\n\n  useEffect(() => {\n    if (messagesBoxRef.current) {\n      messagesBoxRef.current.scrollTop = messagesBoxRef.current.scrollHeight;\n    }\n  }, [messagesList]);\n\n  return (\n    <>\n      <Card square>\n        <PrimaryActionHeader\n          //   key={`${selectedNode?.id}-${inSearch}`}\n          //   title={headerTitle}\n          //   buttonLabel={'Load'}\n          //   secondaryButtons={secondaryButtons}\n          //   handleClick={handlePrimaryAction}\n          //   single\n          hidePAB={true}\n          title={title}\n          subheader={`To: ${to} . From: ${from}`}\n          secondaryButtons={secondaryButtons}\n        />\n      </Card>\n      <Box className={classes.messages}>\n        <Box className={classes.messageSection}>\n          <Box className={classes.messagesBox} ref={messagesBoxRef}>\n            {messagesList.map((message, index) => (\n              <Grow key={index} in={true} timeout={800}>\n                <Box\n                  className={classes.message}\n                  dangerouslySetInnerHTML={{ __html: message }}\n                />\n              </Grow>\n            ))}\n          </Box>\n        </Box>\n      </Box>\n    </>\n  );\n};\n","import React, { useMemo } from 'react';\nimport { makeStyles, Card } from '@material-ui/core';\nimport ReactHtmlParser from 'react-html-parser';\nimport { PrimaryActionHeader } from '../../utilityDisplay/utilityHeader/PrimaryActionHeader';\nimport { LayoutUnit } from '../../../layout/LayoutUnit';\nimport { useTranslation } from 'react-i18next';\nimport { CancelIcon } from '@fluentui/react-icons';\n\nconst useStyles = makeStyles((theme) => ({\n  htmlContainer: { display: 'flex', justifyContent: 'center' }\n}));\n\nexport const EmailDisplay = (props) => {\n  const { html = '', to, from, title, handleClose } = props;\n  const classes = useStyles();\n  const { t } = useTranslation();\n\n  const secondaryButtons = useMemo(() => {\n    const buttons = [];\n    if (handleClose) {\n      buttons.push({\n        label: t('Close'),\n        component: CancelIcon,\n        click: () => handleClose()\n      });\n    }\n    return buttons;\n  }, [t, handleClose]);\n\n  return (\n    <>\n      <Card square>\n        <PrimaryActionHeader\n          //   key={`${selectedNode?.id}-${inSearch}`}\n          //   title={headerTitle}\n          //   buttonLabel={'Load'}\n          //   secondaryButtons={secondaryButtons}\n          //   handleClick={handlePrimaryAction}\n          //   single\n          hidePAB={true}\n          title={title}\n          subheader={`To: ${to} . From: ${from}`}\n          secondaryButtons={secondaryButtons}\n        />\n      </Card>\n      <LayoutUnit unit='sm' />\n      <div className={classes.htmlContainer}>{ReactHtmlParser(html)}</div>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;AAOA,MAAMA,cAAY,YAAY,WAAW;CACvC,UAAU;EACR,MAAM;EAEN,QAAQ;EACR,UAAU;EACX;CACD,aAAa;EACX,cAAc;EACd,aAAa;EACb,OAAO;EACP,QAAQ;EACR,WAAW;EACX,WAAW;EACX,SAAS;EACT,gBAAgB;EACjB;CACD,SAAS;EACP,iBAAiB;EACjB,cAAc;EACd,SAAS;EACT,cAAc;EACd,WAAW;EACX,cAAc;EACd,QAAQ,MAAM,QAAQ,EAAE;EACzB;CACD,gBAAgB;EACd,MAAM;EACN,WAAW;EACX,SAAS;EACT,iBAAiB,OAAO,WAAW;EACnC,gBAAgB;EAChB,kBAAkB;EAClB,oBAAoB;EACpB,UAAU;EACV,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,QAAQ;EACT;CACF,EAAE;AAEH,MAAa,cAAc,UAAU;CACnC,MAAM,EAAE,WAAW,EAAE,EAAE,IAAI,MAAM,OAAO,gBAAgB;CACxD,MAAM,UAAUA,aAAW;CAC3B,MAAM,CAAC,cAAc,mBAAmB,SAAS,SAAS;CAC1D,MAAM,EAAE,MAAM,gBAAgB;CAE9B,MAAM,iBAAiB,OAAO,KAAK;CAEnC,MAAM,mBAAmB,cAAc;EACrC,MAAM,UAAU,EAAE;AAClB,MAAI,YACF,SAAQ,KAAK;GACX,OAAO,EAAE,QAAQ;GACjB,WAAW;GACX,aAAa,aAAa;GAC3B,CAAC;AAEJ,SAAO;IACN,CAAC,GAAG,YAAY,CAAC;AAEpB,iBAAgB;AACd,MAAI,eAAe,QACjB,gBAAe,QAAQ,YAAY,eAAe,QAAQ;IAE3D,CAAC,aAAa,CAAC;AAElB,QACE,0DACE,oCAAC,QAAK,gBACJ,oCAAC;EAOC,SAAS;EACF;EACP,WAAW,OAAO,GAAG,WAAW;EACd;GAClB,CACG,EACP,oCAAC,OAAI,WAAW,QAAQ,YACtB,oCAAC,OAAI,WAAW,QAAQ,kBACtB,oCAAC;EAAI,WAAW,QAAQ;EAAa,KAAK;IACvC,aAAa,KAAK,SAAS,UAC1B,oCAAC;EAAK,KAAK;EAAO,IAAI;EAAM,SAAS;IACnC,oCAAC;EACC,WAAW,QAAQ;EACnB,yBAAyB,EAAE,QAAQ,SAAS;GAC5C,CACG,CACP,CACE,CACF,CACF,CACL;;;;;ACjGP,MAAM,YAAY,YAAY,WAAW,EACvC,eAAe;CAAE,SAAS;CAAQ,gBAAgB;CAAU,EAC7D,EAAE;AAEH,MAAa,gBAAgB,UAAU;CACrC,MAAM,EAAE,OAAO,IAAI,IAAI,MAAM,OAAO,gBAAgB;CACpD,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,MAAM,gBAAgB;CAE9B,MAAM,mBAAmB,cAAc;EACrC,MAAM,UAAU,EAAE;AAClB,MAAI,YACF,SAAQ,KAAK;GACX,OAAO,EAAE,QAAQ;GACjB,WAAW;GACX,aAAa,aAAa;GAC3B,CAAC;AAEJ,SAAO;IACN,CAAC,GAAG,YAAY,CAAC;AAEpB,QACE,0DACE,oCAAC,QAAK,gBACJ,oCAAC;EAOC,SAAS;EACF;EACP,WAAW,OAAO,GAAG,WAAW;EACd;GAClB,CACG,EACP,oCAAC,cAAW,MAAK,OAAO,EACxB,oCAAC,SAAI,WAAW,QAAQ,iBAAgB,gBAAgB,KAAK,CAAO,CACnE"}

package/dist/EmptyStateDisplay-CPCd-JUL.js

@@ -0,0 +1,66 @@
+import { t as FluentButton } from "./FluentButton-BexKrnAp.js";
+import { t as FluentIcon } from "./FluentIcon-pwGrBtD8.js";
+import { t as LayoutUnit } from "./LayoutUnit-xKXf06lQ.js";
+import React from "react";
+import { Box, Typography, makeStyles } from "@material-ui/core";
+import { ErrorIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+
+//#region src/UI/dataDisplay/EmptyStateDisplay.jsx
+const useStyles = makeStyles((theme) => ({
+	container: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		height: "100%",
+		width: "100%"
+	},
+	secondaryText: { color: theme.palette.text.secondary },
+	image: { width: (props) => props?.imageWidth }
+}));
+const EmptyStateDisplay = (props) => {
+	const { icon, iconSize = 48, customIconSize = true, imageSrc, imageWidth = "100px", primaryText, secondaryText, actionLabel, action } = props;
+	const classes = useStyles({ imageWidth });
+	return /* @__PURE__ */ React.createElement("div", { className: classes.container }, imageSrc ? /* @__PURE__ */ React.createElement("img", {
+		src: imageSrc,
+		alt: "logo",
+		className: classes.image
+	}) : /* @__PURE__ */ React.createElement(FluentIcon, {
+		component: icon ?? ErrorIcon,
+		size: iconSize,
+		customSize: customIconSize
+	}), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), primaryText && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		align: "center"
+	}, primaryText)), secondaryText && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.secondaryText,
+		align: "center"
+	}, secondaryText)), (primaryText || secondaryText) && /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), action && /* @__PURE__ */ React.createElement("div", { className: primaryText || secondaryText ? classes.buttonWrapper : "" }, /* @__PURE__ */ React.createElement(FluentButton, {
+		onClick: action,
+		variant: "outlined",
+		color: "secondary",
+		id: "udpRecord-EmptyStateDisplay-" + primaryText.replace(/\s+/g, "") + "-" + actionLabel.replace(/\s+/g, ""),
+		udprecordid: "udpRecord-EmptyStateDisplay-" + primaryText.replace(/\s+/g, "") + "-" + actionLabel.replace(/\s+/g, "")
+	}, actionLabel)));
+};
+EmptyStateDisplay.propTypes = {
+	icon: PropTypes.elementType,
+	iconSize: PropTypes.number,
+	customIconSize: PropTypes.bool,
+	imageSrc: PropTypes.string,
+	imageWidth: PropTypes.string,
+	primaryText: PropTypes.string,
+	secondaryText: PropTypes.string,
+	actionLabel: PropTypes.string,
+	action: PropTypes.func
+};
+EmptyStateDisplay.defaultProps = {
+	iconSize: 48,
+	customIconSize: true,
+	imageWidth: "100px"
+};
+
+//#endregion
+export { EmptyStateDisplay as t };
+//# sourceMappingURL=EmptyStateDisplay-CPCd-JUL.js.map

package/dist/EmptyStateDisplay-CPCd-JUL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyStateDisplay-CPCd-JUL.js","names":[],"sources":["../src/UI/dataDisplay/EmptyStateDisplay.jsx"],"sourcesContent":["import { ErrorIcon } from '@fluentui/react-icons';\nimport { Typography, makeStyles, Box } from '@material-ui/core';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { FluentButton } from '../inputs/buttons/FluentButton';\nimport { FluentIcon } from '../../utilities/iconLibrary/FluentIcon';\nimport { LayoutUnit } from '../../layout/LayoutUnit';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: '100%',\n    width: '100%',\n  },\n  secondaryText: {\n    color: theme.palette.text.secondary,\n  },\n  image: {\n    width: props => props?.imageWidth,\n  },\n}));\n\nexport const EmptyStateDisplay = props => {\n  const {\n    icon,\n    iconSize = 48,\n    customIconSize = true,\n    imageSrc,\n    imageWidth = '100px',\n    primaryText,\n    secondaryText,\n    actionLabel,\n    action,\n  } = props;\n  const classes = useStyles({ imageWidth });\n\n  return (\n    <div className={classes.container}>\n      {imageSrc ? (\n        <img src={imageSrc} alt='logo' className={classes.image} />\n      ) : (\n        <FluentIcon\n          component={icon ?? ErrorIcon}\n          size={iconSize}\n          customSize={customIconSize}\n        />\n      )}\n      <LayoutUnit unit=\"xxs\" />\n      {primaryText && (\n        <div>\n          <Typography variant='subtitle2' align='center'>\n            {primaryText}\n          </Typography>\n        </div>\n      )}\n      {secondaryText && (\n        <div>\n          <Typography className={classes.secondaryText} align='center'>\n            {secondaryText}\n          </Typography>\n        </div>\n      )}\n      {(primaryText || secondaryText) && <LayoutUnit unit=\"xxs\" />}\n      {action && (\n        <div\n          className={primaryText || secondaryText ? classes.buttonWrapper : ''}\n        >\n          <FluentButton\n            onClick={action}\n            variant='outlined'\n            color='secondary'\n            id={\n              'udpRecord-EmptyStateDisplay-' +\n              primaryText.replace(/\\s+/g, '') +\n              '-' +\n              actionLabel.replace(/\\s+/g, '')\n            }\n            udprecordid={\n              'udpRecord-EmptyStateDisplay-' +\n              primaryText.replace(/\\s+/g, '') +\n              '-' +\n              actionLabel.replace(/\\s+/g, '')\n            }\n          >\n            {actionLabel}\n          </FluentButton>\n        </div>\n      )}\n    </div>\n  );\n};\n\nEmptyStateDisplay.propTypes = {\n  icon: PropTypes.elementType,\n  iconSize: PropTypes.number,\n  customIconSize: PropTypes.bool,\n  imageSrc: PropTypes.string,\n  imageWidth: PropTypes.string,\n  primaryText: PropTypes.string,\n  secondaryText: PropTypes.string,\n  actionLabel: PropTypes.string,\n  action: PropTypes.func\n};\n\nEmptyStateDisplay.defaultProps = {\n  iconSize: 48,\n  customIconSize: true,\n  imageWidth: '100px'\n};\n"],"mappings":";;;;;;;;;AAQA,MAAM,YAAY,YAAW,WAAU;CACrC,WAAW;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,QAAQ;EACR,OAAO;EACR;CACD,eAAe,EACb,OAAO,MAAM,QAAQ,KAAK,WAC3B;CACD,OAAO,EACL,QAAO,UAAS,OAAO,YACxB;CACF,EAAE;AAEH,MAAa,qBAAoB,UAAS;CACxC,MAAM,EACJ,MACA,WAAW,IACX,iBAAiB,MACjB,UACA,aAAa,SACb,aACA,eACA,aACA,WACE;CACJ,MAAM,UAAU,UAAU,EAAE,YAAY,CAAC;AAEzC,QACE,oCAAC,SAAI,WAAW,QAAQ,aACrB,WACC,oCAAC;EAAI,KAAK;EAAU,KAAI;EAAO,WAAW,QAAQ;GAAS,GAE3D,oCAAC;EACC,WAAW,QAAQ;EACnB,MAAM;EACN,YAAY;GACZ,EAEJ,oCAAC,cAAW,MAAK,QAAQ,EACxB,eACC,oCAAC,aACC,oCAAC;EAAW,SAAQ;EAAY,OAAM;IACnC,YACU,CACT,EAEP,iBACC,oCAAC,aACC,oCAAC;EAAW,WAAW,QAAQ;EAAe,OAAM;IACjD,cACU,CACT,GAEN,eAAe,kBAAkB,oCAAC,cAAW,MAAK,QAAQ,EAC3D,UACC,oCAAC,SACC,WAAW,eAAe,gBAAgB,QAAQ,gBAAgB,MAElE,oCAAC;EACC,SAAS;EACT,SAAQ;EACR,OAAM;EACN,IACE,iCACA,YAAY,QAAQ,QAAQ,GAAG,GAC/B,MACA,YAAY,QAAQ,QAAQ,GAAG;EAEjC,aACE,iCACA,YAAY,QAAQ,QAAQ,GAAG,GAC/B,MACA,YAAY,QAAQ,QAAQ,GAAG;IAGhC,YACY,CACX,CAEJ;;AAIV,kBAAkB,YAAY;CAC5B,MAAM,UAAU;CAChB,UAAU,UAAU;CACpB,gBAAgB,UAAU;CAC1B,UAAU,UAAU;CACpB,YAAY,UAAU;CACtB,aAAa,UAAU;CACvB,eAAe,UAAU;CACzB,aAAa,UAAU;CACvB,QAAQ,UAAU;CACnB;AAED,kBAAkB,eAAe;CAC/B,UAAU;CACV,gBAAgB;CAChB,YAAY;CACb"}