udp-react-enterprise-component-library 25.18.1-beta.2 → 25.18.1-beta.20

package/dist/Statistic-Bue94-gf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Statistic-Bue94-gf.js","names":["useStyles","useStyles"],"sources":["../src/UI/mapLayout/ui/CheckboxGroup.jsx","../src/UI/mapLayout/ui/CheckboxList.jsx","../src/UI/mapLayout/ui/PopoverCard.jsx","../src/UI/mapLayout/ui/Statistic.jsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport clsx from 'clsx';\nimport { ChevronDownIcon } from '@fluentui/react-icons';\nimport { FormControlLabel, FormGroup, makeStyles } from '@material-ui/core';\nimport { isEmpty } from 'lodash';\nimport { FluentCheckbox } from '../../inputs/checkbox/FluentCheckbox';\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton';\nimport { getChildrenObjectsWithNoChildren } from '../utilities/MapUtilities';\n\nconst useStyles = makeStyles((theme) => ({\n  expand: {\n    transform: 'rotate(0deg)',\n    transition: theme.transitions.create('transform', {\n      duration: theme.transitions.duration.shortest\n    })\n  },\n  expandOpen: {\n    transform: 'rotate(180deg)'\n  },\n  iconButtonWrapper: {\n    borderRadius: 2,\n    margin: 'auto 0px'\n  },\n  expandedList: {\n    marginLeft: theme.spacing(4),\n    display: 'flex',\n    flexDirection: 'column'\n  },\n  checkboxGroup: {\n    display: 'flex',\n    justifyContent: 'space-between'\n  }\n}));\n\nexport const CheckboxGroup = (props) => {\n  const {\n    title,\n    options,\n    onChange,\n    defaultExpandedListState = true,\n    values,\n    valueKey\n  } = props;\n  const [checkedItems, setCheckedItems] = useState({});\n  const [checkedParent, setCheckedParent] = useState(false);\n  const [expanded, setExpanded] = useState(defaultExpandedListState);\n  const [parentIndeterminate, setParentIndeterminate] = useState(false);\n  const classes = useStyles();\n\n  useEffect(() => {\n      let preCheckedItems = {};\n      options?.forEach((option) => {\n        if(!!!option?.options || option?.options?.length === 0) {\n          preCheckedItems[option.value] = values?.includes(option.value);\n        }\n      });\n      setCheckedItems(preCheckedItems);\n  }, [options, values]);\n\n  //get a list of child values\n  const childrenValues = useMemo(() => {\n    return getChildrenObjectsWithNoChildren(options ?? [], 'value');\n  }, [options]);\n\n  useEffect(() => {\n    const checkedAll = isEmpty(checkedItems)\n      ? (childrenValues?.length > 0 &&\n          childrenValues?.every((val) => values.includes(val))) ??\n        false\n      : Object.values(checkedItems)?.every((checked) => checked);\n\n    setCheckedParent(checkedAll);\n\n    setParentIndeterminate(\n      !checkedAll &&\n        (isEmpty(checkedItems)\n          ? childrenValues?.some((val) => values.includes(val))\n          : Object.values(checkedItems)?.some((checked) => checked))\n    );\n  }, [checkedItems, childrenValues, title, values]);\n\n  const handleOnClickChildCheckboxOnChange = useCallback(\n    (event) => {\n      setCheckedItems((preVal) => ({\n        ...preVal,\n        [event?.target?.name]: event?.target?.checked\n      }));\n\n      if (!event?.target?.checked) {\n        onChange(values?.filter((val) => val !== event?.target?.name));\n      } else {\n        onChange([...values, event?.target?.name]);\n      }\n    },\n    [onChange, values]\n  );\n\n  const handleParentCheckboxOnChange = useCallback(\n    (event) => {\n      setCheckedParent(event?.target?.checked);\n      if (!event?.target?.checked) {\n        setCheckedItems({});\n\n        onChange(\n          values?.filter((val) => {\n            return !childrenValues?.includes(val);\n          })\n        );\n      }\n\n      let newItemToAdd = [];\n      childrenValues.forEach((option) => {\n        if (event?.target?.checked && option && !values?.includes(option)) {\n          newItemToAdd.push(option);\n        }\n      });\n\n      if (newItemToAdd.length > 0) {\n        onChange([...values, ...newItemToAdd]);\n      }\n      setExpanded(true);\n      setParentIndeterminate(false);\n    },\n    [childrenValues, onChange, values]\n  );\n\n  const childrenList = useMemo(() => {\n    if (options?.length > 0) {\n      return options?.map((option) => {\n        if (option?.options?.length > 0) {\n          return (\n            <CheckboxGroup\n              key={option?.value}\n              title={option?.title}\n              options={option?.options}\n              values={values}\n              valueKey={option?.value}\n              onChange={onChange}\n            />\n          );\n        }\n\n        return (\n          <FormControlLabel\n            label={option?.title}\n            control={\n              <FluentCheckbox\n                checked={checkedItems[option?.value] || false}\n                onChange={handleOnClickChildCheckboxOnChange}\n              />\n            }\n            name={option?.value}\n          />\n        );\n      });\n    }\n    return [];\n  }, [\n    checkedItems,\n    handleOnClickChildCheckboxOnChange,\n    onChange,\n    options,\n    values\n  ]);\n\n  return (\n    <FormGroup>\n      {options?.length > 0 ? (\n        <div className={classes.checkboxGroup}>\n          <FormControlLabel\n            label={title}\n            control={\n              <FluentCheckbox\n                checked={checkedParent}\n                indeterminate={parentIndeterminate}\n                onChange={handleParentCheckboxOnChange}\n              />\n            }\n          />\n\n          <FluentIconButton\n            className={clsx(\n              classes.expand,\n              {\n                [classes.expandOpen]: expanded\n              },\n              classes.iconButtonWrapper\n            )}\n            onClick={() => setExpanded(!expanded)}\n            icon={ChevronDownIcon}\n          />\n        </div>\n      ) : (\n        <div>\n          <FormControlLabel\n            label={title}\n            control={\n              <FluentCheckbox\n                checked={checkedItems[valueKey] || false}\n                onChange={handleOnClickChildCheckboxOnChange}\n                name={valueKey}\n              />\n            }\n          />\n        </div>\n      )}\n      {expanded && options?.length > 0 && (\n        <div className={classes.expandedList}>{childrenList}</div>\n      )}\n    </FormGroup>\n  );\n};\n","import React from 'react';\nimport { CheckboxGroup } from './CheckboxGroup';\n\nexport const CheckboxList = (props) => {\n  const { itemGroups, values, onChange } = props;\n\n  return (\n    <div>\n      {itemGroups?.length > 0 &&\n        itemGroups?.map((item) => (\n          <CheckboxGroup\n            title={item?.title}\n            options={item?.options}\n            values={values}\n            onChange={onChange}\n          />\n        ))}\n    </div>\n  );\n};\n","import React, { useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport {\n  CaretDownSolid8Icon,\n  ChromeCloseIcon,\n  CompletedIcon,\n  ErrorIcon,\n  InfoIcon,\n  MoreVerticalIcon,\n  ViewIcon,\n  WarningIcon\n} from '@fluentui/react-icons';\nimport {\n  Card,\n  CardContent,\n  darken,\n  IconButton,\n  lighten,\n  ListItemIcon,\n  makeStyles,\n  Menu,\n  MenuItem,\n  Tooltip,\n  Typography,\n  useTheme\n} from '@material-ui/core';\nimport { Adornment } from '../../components/feedback/Adornment';\nimport { FluentButton } from '../../inputs/buttons/FluentButton';\nimport { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton';\nimport { CompactDataList } from '../../dataDisplay/CompactDataList';\nimport { CompactDataListItem } from '../../dataDisplay/CompactDataListItem';\n\nconst useStyles = makeStyles((theme) => ({\n  contentWrapper: {\n    display: 'flex',\n    height: '100%',\n    width: (props) => props?.width ?? '100%'\n  },\n  titleWrapper: {\n    display: 'flex',\n    gap: theme.spacing(1),\n    alignItems: 'center'\n  },\n  iconButtonWrapper: {\n    borderRadius: 2\n  },\n  avatar: {\n    width: '80px',\n    height: '80px'\n  },\n  iconButtonsWrapper: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center'\n  },\n  primaryButtonContainer: {\n    display: 'flex',\n    justifyContent: 'flex-end',\n    gap: theme.spacing(1)\n  },\n  actionButton: {\n    color: '#FFFFFF'\n  },\n  fullHeight: {\n    height: '100%'\n  },\n  fullWidth: {\n    width: '100%'\n  },\n  messageWrapper: {\n    display: 'flex',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n    padding: theme.spacing(1),\n    backgroundColor: (props) =>\n      props?.status\n        ? lighten(theme.palette[props.status]?.main, 0.9)\n        : lighten(theme.palette.info.main, 0.9)\n  },\n  iconMessage: {\n    color: (props) => (props?.status ? theme.palette[props.status]?.main : null)\n  },\n  message: {\n    color: (props) =>\n      props?.status ? darken(theme.palette[props.status]?.main, 0.6) : null\n  },\n}));\n\nexport const PopoverCard = (props) => {\n  const {\n    data,\n    title,\n    listData,\n    showAdornment = true,\n    status = 'info',\n    detailsEvent,\n    primaryActions,\n    moreIconActions,\n    message,\n    messageIcon,\n    hideMessageIcon = false,\n    onClose,\n    width\n  } = props;\n  const [moreIconAnchor, setMoreIconAnchor] = useState(null);\n  const [primaryActionAnchor, setPrimaryActionAnchor] = useState(null);\n  const { t } = useTranslation();\n  const classes = useStyles({ width, status });\n  const theme = useTheme();\n\n  const handleOnClickMoreIcon = (event) => {\n    setMoreIconAnchor(event?.currentTarget);\n  };\n\n  const handleOnClickPrimaryAction = (event) => {\n    setPrimaryActionAnchor(event?.currentTarget);\n  };\n\n  const headerBackgroundColor = useMemo(() => {\n    switch (status) {\n      case 'success':\n        return lighten(theme.palette.success.main, 0.7);\n      case 'error':\n        return lighten(theme.palette.error.main, 0.7);\n      case 'warning':\n        return lighten(theme.palette.warning.main, 0.7);\n      default:\n        return lighten(theme.palette.info.main, 0.7);\n    }\n  }, [status, theme]);\n\n  const defaultMessageIcon = useMemo(() => {\n    switch (status) {\n      case 'success':\n        return CompletedIcon;\n      case 'error':\n        return ErrorIcon;\n      case 'warning':\n        return WarningIcon;\n      default:\n        return InfoIcon;\n    }\n  }, [status]);\n\n  return (\n    <div>\n      <div className={classes.contentWrapper}>\n        {showAdornment && status && (\n          <div>\n            <Adornment color={status} />\n          </div>\n        )}\n        <Card className={classes.fullWidth}>\n          <CardContent style={{ backgroundColor: headerBackgroundColor }}>\n            <div className={classes.iconButtonsWrapper}>\n              <div className={classes.titleWrapper}>\n                <FluentIconButton onClick={onClose} icon={ChromeCloseIcon} />\n                <Typography variant='h6'>{title}</Typography>\n              </div>\n              <div>\n                {moreIconActions?.length > 0 && (\n                  <>\n                    <Tooltip title={t('More') ?? ''}>\n                      <IconButton\n                        className={classes.iconButtonWrapper}\n                        onClick={handleOnClickMoreIcon}\n                        size='small'\n                      >\n                        <MoreVerticalIcon />\n                      </IconButton>\n                    </Tooltip>\n                    <Menu\n                      open={moreIconAnchor ? true : false}\n                      onClose={() => {\n                        setMoreIconAnchor(null);\n                      }}\n                      anchorEl={moreIconAnchor}\n                      anchorOrigin={{\n                        vertical: 'top',\n                        horizontal: 'right'\n                      }}\n                      transformOrigin={{\n                        vertical: 'top',\n                        horizontal: 'left'\n                      }}\n                    >\n                      {moreIconActions?.map((action) => (\n                        <MenuItem onClick={() => {action.onClick(data)}}>\n                          {action?.icon && (\n                            <ListItemIcon>{action.icon}</ListItemIcon>\n                          )}\n                          {action?.name}\n                        </MenuItem>\n                      ))}\n                    </Menu>\n                  </>\n                )}\n              </div>\n            </div>\n          </CardContent>\n          {message && (\n            <div className={classes.messageWrapper}>\n              {!hideMessageIcon && (\n                <div className={classes.iconMessage}>\n                  <FluentIcon component={messageIcon ?? defaultMessageIcon} />\n                </div>\n              )}\n              <div className={classes.message}>{message}</div>\n            </div>\n          )}\n          <CardContent style={{ flex: 1 }}>\n            <CompactDataList disableSeparator={false}>\n              {listData?.map(({ subject, value }) => {\n                return <CompactDataListItem label={subject} value={value} />;\n              })}\n            </CompactDataList>\n          </CardContent>\n          <CardContent style={{ flex: 1, paddingTop: 0, paddingBottom: 16 }}>\n            <div className={classes.primaryButtonContainer}>\n              {detailsEvent && (\n                <FluentButton\n                  variant='outlined'\n                  endIcon={<ViewIcon />}\n                  onClick={detailsEvent}\n                >\n                  {t('Details')}\n                </FluentButton>\n              )}\n\n              <div>\n                {primaryActions?.length > 0 && (\n                  <FluentButton\n                    variant='contained'\n                    color='secondary'\n                    endIcon={<CaretDownSolid8Icon />}\n                    onClick={handleOnClickPrimaryAction}\n                    className={classes.actionButton}\n                  >\n                    {t('Actions')}\n                  </FluentButton>\n                )}\n                <Menu\n                  open={primaryActionAnchor ? true : false}\n                  onClose={() => {\n                    setPrimaryActionAnchor(null);\n                  }}\n                  anchorEl={primaryActionAnchor}\n                  anchorOrigin={{\n                    vertical: 'bottom',\n                    horizontal: 'left'\n                  }}\n                  transformOrigin={{\n                    vertical: 'top',\n                    horizontal: 'left'\n                  }}\n                >\n                  {primaryActions?.map((action) => (\n                    <MenuItem onClick={() => {action.onClick(data)}}>\n                      {action?.icon && (\n                        <ListItemIcon>{action.icon}</ListItemIcon>\n                      )}\n                      {action?.name}\n                    </MenuItem>\n                  ))}\n                </Menu>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  );\n};\n","import React from 'react';\nimport {\n  Divider,\n  Grid,\n  lighten,\n  makeStyles,\n  Typography,\n} from '@material-ui/core';\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton';\nimport { getIconFromName } from '../../../utilities/tree/TreeUtilities';\n\nconst useStyles = makeStyles(theme => ({\n  icon: {\n    margin: 'auto 5px auto 0',\n    padding: theme.spacing(1),\n    backgroundColor: (props) =>\n      lighten(props?.color ? props.color : theme.palette.info.main, 0.9),\n    borderRadius: theme.spacing(3),\n  },\n  valueContainer: {\n    marginRight: theme.spacing(1),\n  },\n  iconColor: {\n    color: (props) => props?.color,\n    borderRadius: theme.spacing(3),\n  },\n}));\n\nexport const Statistic = (props) => {\n  const { icon, value, title, color, onClick, hideDivider = false } = props;\n  const classes = useStyles({ color: color });\n\n  return (\n    <div>\n      <Grid container>\n        {!hideDivider && (\n          <Grid item>\n            <Divider orientation=\"vertical\" variant=\"middle\" />\n          </Grid>\n        )}\n        {icon && (\n          <Grid item className={classes.icon}>\n            <FluentIconButton\n              icon={getIconFromName(icon)}\n              className={classes.iconColor}\n              onClick={onClick}\n            />\n          </Grid>\n        )}\n        <Grid item className={classes.valueContainer}>\n          <Typography variant=\"h5\">{value}</Typography>\n          <Typography variant=\"caption\">{title}</Typography>\n        </Grid>\n      </Grid>\n    </div>\n  );\n};"],"mappings":";;;;;;;;;;;;;;;;;AASA,MAAMA,cAAY,YAAY,WAAW;CACvC,QAAQ;EACN,WAAW;EACX,YAAY,MAAM,YAAY,OAAO,aAAa,EAChD,UAAU,MAAM,YAAY,SAAS,UACtC,CAAC;EACH;CACD,YAAY,EACV,WAAW,kBACZ;CACD,mBAAmB;EACjB,cAAc;EACd,QAAQ;EACT;CACD,cAAc;EACZ,YAAY,MAAM,QAAQ,EAAE;EAC5B,SAAS;EACT,eAAe;EAChB;CACD,eAAe;EACb,SAAS;EACT,gBAAgB;EACjB;CACF,EAAE;AAEH,MAAa,iBAAiB,UAAU;CACtC,MAAM,EACJ,OACA,SACA,UACA,2BAA2B,MAC3B,QACA,aACE;CACJ,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE,CAAC;CACpD,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM;CACzD,MAAM,CAAC,UAAU,eAAe,SAAS,yBAAyB;CAClE,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,MAAM;CACrE,MAAM,UAAUA,aAAW;AAE3B,iBAAgB;EACZ,IAAI,kBAAkB,EAAE;AACxB,WAAS,SAAS,WAAW;AAC3B,OAAG,CAAC,CAAC,CAAC,QAAQ,WAAW,QAAQ,SAAS,WAAW,EACnD,iBAAgB,OAAO,SAAS,QAAQ,SAAS,OAAO,MAAM;IAEhE;AACF,kBAAgB,gBAAgB;IACjC,CAAC,SAAS,OAAO,CAAC;CAGrB,MAAM,iBAAiB,cAAc;AACnC,SAAO,iCAAiC,WAAW,EAAE,EAAE,QAAQ;IAC9D,CAAC,QAAQ,CAAC;AAEb,iBAAgB;EACd,MAAM,aAAa,QAAQ,aAAa,IACnC,gBAAgB,SAAS,KACxB,gBAAgB,OAAO,QAAQ,OAAO,SAAS,IAAI,CAAC,KACtD,QACA,OAAO,OAAO,aAAa,EAAE,OAAO,YAAY,QAAQ;AAE5D,mBAAiB,WAAW;AAE5B,yBACE,CAAC,eACE,QAAQ,aAAa,GAClB,gBAAgB,MAAM,QAAQ,OAAO,SAAS,IAAI,CAAC,GACnD,OAAO,OAAO,aAAa,EAAE,MAAM,YAAY,QAAQ,EAC9D;IACA;EAAC;EAAc;EAAgB;EAAO;EAAO,CAAC;CAEjD,MAAM,qCAAqC,aACxC,UAAU;AACT,mBAAiB,YAAY;GAC3B,GAAG;IACF,OAAO,QAAQ,OAAO,OAAO,QAAQ;GACvC,EAAE;AAEH,MAAI,CAAC,OAAO,QAAQ,QAClB,UAAS,QAAQ,QAAQ,QAAQ,QAAQ,OAAO,QAAQ,KAAK,CAAC;MAE9D,UAAS,CAAC,GAAG,QAAQ,OAAO,QAAQ,KAAK,CAAC;IAG9C,CAAC,UAAU,OAAO,CACnB;CAED,MAAM,+BAA+B,aAClC,UAAU;AACT,mBAAiB,OAAO,QAAQ,QAAQ;AACxC,MAAI,CAAC,OAAO,QAAQ,SAAS;AAC3B,mBAAgB,EAAE,CAAC;AAEnB,YACE,QAAQ,QAAQ,QAAQ;AACtB,WAAO,CAAC,gBAAgB,SAAS,IAAI;KACrC,CACH;;EAGH,IAAI,eAAe,EAAE;AACrB,iBAAe,SAAS,WAAW;AACjC,OAAI,OAAO,QAAQ,WAAW,UAAU,CAAC,QAAQ,SAAS,OAAO,CAC/D,cAAa,KAAK,OAAO;IAE3B;AAEF,MAAI,aAAa,SAAS,EACxB,UAAS,CAAC,GAAG,QAAQ,GAAG,aAAa,CAAC;AAExC,cAAY,KAAK;AACjB,yBAAuB,MAAM;IAE/B;EAAC;EAAgB;EAAU;EAAO,CACnC;CAED,MAAM,eAAe,cAAc;AACjC,MAAI,SAAS,SAAS,EACpB,QAAO,SAAS,KAAK,WAAW;AAC9B,OAAI,QAAQ,SAAS,SAAS,EAC5B,QACE,oCAAC;IACC,KAAK,QAAQ;IACb,OAAO,QAAQ;IACf,SAAS,QAAQ;IACT;IACR,UAAU,QAAQ;IACR;KACV;AAIN,UACE,oCAAC;IACC,OAAO,QAAQ;IACf,SACE,oCAAC;KACC,SAAS,aAAa,QAAQ,UAAU;KACxC,UAAU;MACV;IAEJ,MAAM,QAAQ;KACd;IAEJ;AAEJ,SAAO,EAAE;IACR;EACD;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oCAAC,iBACE,SAAS,SAAS,IACjB,oCAAC,SAAI,WAAW,QAAQ,iBACtB,oCAAC;EACC,OAAO;EACP,SACE,oCAAC;GACC,SAAS;GACT,eAAe;GACf,UAAU;IACV;GAEJ,EAEF,oCAAC;EACC,WAAW,KACT,QAAQ,QACR,GACG,QAAQ,aAAa,UACvB,EACD,QAAQ,kBACT;EACD,eAAe,YAAY,CAAC,SAAS;EACrC,MAAM;GACN,CACE,GAEN,oCAAC,aACC,oCAAC;EACC,OAAO;EACP,SACE,oCAAC;GACC,SAAS,aAAa,aAAa;GACnC,UAAU;GACV,MAAM;IACN;GAEJ,CACE,EAEP,YAAY,SAAS,SAAS,KAC7B,oCAAC,SAAI,WAAW,QAAQ,gBAAe,aAAmB,CAElD;;;;;AC9MhB,MAAa,gBAAgB,UAAU;CACrC,MAAM,EAAE,YAAY,QAAQ,aAAa;AAEzC,QACE,oCAAC,aACE,YAAY,SAAS,KACpB,YAAY,KAAK,SACf,oCAAC;EACC,OAAO,MAAM;EACb,SAAS,MAAM;EACP;EACE;GACV,CACF,CACA;;;;;ACgBV,MAAMC,cAAY,YAAY,WAAW;CACvC,gBAAgB;EACd,SAAS;EACT,QAAQ;EACR,QAAQ,UAAU,OAAO,SAAS;EACnC;CACD,cAAc;EACZ,SAAS;EACT,KAAK,MAAM,QAAQ,EAAE;EACrB,YAAY;EACb;CACD,mBAAmB,EACjB,cAAc,GACf;CACD,QAAQ;EACN,OAAO;EACP,QAAQ;EACT;CACD,oBAAoB;EAClB,SAAS;EACT,gBAAgB;EAChB,YAAY;EACb;CACD,wBAAwB;EACtB,SAAS;EACT,gBAAgB;EAChB,KAAK,MAAM,QAAQ,EAAE;EACtB;CACD,cAAc,EACZ,OAAO,WACR;CACD,YAAY,EACV,QAAQ,QACT;CACD,WAAW,EACT,OAAO,QACR;CACD,gBAAgB;EACd,SAAS;EACT,KAAK,MAAM,QAAQ,EAAE;EACrB,YAAY;EACZ,SAAS,MAAM,QAAQ,EAAE;EACzB,kBAAkB,UAChB,OAAO,SACH,QAAQ,MAAM,QAAQ,MAAM,SAAS,MAAM,GAAI,GAC/C,QAAQ,MAAM,QAAQ,KAAK,MAAM,GAAI;EAC5C;CACD,aAAa,EACX,QAAQ,UAAW,OAAO,SAAS,MAAM,QAAQ,MAAM,SAAS,OAAO,MACxE;CACD,SAAS,EACP,QAAQ,UACN,OAAO,SAAS,OAAO,MAAM,QAAQ,MAAM,SAAS,MAAM,GAAI,GAAG,MACpE;CACF,EAAE;AAEH,MAAa,eAAe,UAAU;CACpC,MAAM,EACJ,MACA,OACA,UACA,gBAAgB,MAChB,SAAS,QACT,cACA,gBACA,iBACA,SACA,aACA,kBAAkB,OAClB,SACA,UACE;CACJ,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAC1D,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,KAAK;CACpE,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,UAAUA,YAAU;EAAE;EAAO;EAAQ,CAAC;CAC5C,MAAM,QAAQ,UAAU;CAExB,MAAM,yBAAyB,UAAU;AACvC,oBAAkB,OAAO,cAAc;;CAGzC,MAAM,8BAA8B,UAAU;AAC5C,yBAAuB,OAAO,cAAc;;CAG9C,MAAM,wBAAwB,cAAc;AAC1C,UAAQ,QAAR;GACE,KAAK,UACH,QAAO,QAAQ,MAAM,QAAQ,QAAQ,MAAM,GAAI;GACjD,KAAK,QACH,QAAO,QAAQ,MAAM,QAAQ,MAAM,MAAM,GAAI;GAC/C,KAAK,UACH,QAAO,QAAQ,MAAM,QAAQ,QAAQ,MAAM,GAAI;GACjD,QACE,QAAO,QAAQ,MAAM,QAAQ,KAAK,MAAM,GAAI;;IAE/C,CAAC,QAAQ,MAAM,CAAC;CAEnB,MAAM,qBAAqB,cAAc;AACvC,UAAQ,QAAR;GACE,KAAK,UACH,QAAO;GACT,KAAK,QACH,QAAO;GACT,KAAK,UACH,QAAO;GACT,QACE,QAAO;;IAEV,CAAC,OAAO,CAAC;AAEZ,QACE,oCAAC,aACC,oCAAC,SAAI,WAAW,QAAQ,kBACrB,iBAAiB,UAChB,oCAAC,aACC,oCAAC,aAAU,OAAO,SAAU,CACxB,EAER,oCAAC,QAAK,WAAW,QAAQ,aACvB,oCAAC,eAAY,OAAO,EAAE,iBAAiB,uBAAuB,IAC5D,oCAAC,SAAI,WAAW,QAAQ,sBACtB,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC;EAAiB,SAAS;EAAS,MAAM;GAAmB,EAC7D,oCAAC,cAAW,SAAQ,QAAM,MAAmB,CACzC,EACN,oCAAC,aACE,iBAAiB,SAAS,KACzB,0DACE,oCAAC,WAAQ,OAAO,EAAE,OAAO,IAAI,MAC3B,oCAAC;EACC,WAAW,QAAQ;EACnB,SAAS;EACT,MAAK;IAEL,oCAAC,uBAAmB,CACT,CACL,EACV,oCAAC;EACC,MAAM,iBAAiB,OAAO;EAC9B,eAAe;AACb,qBAAkB,KAAK;;EAEzB,UAAU;EACV,cAAc;GACZ,UAAU;GACV,YAAY;GACb;EACD,iBAAiB;GACf,UAAU;GACV,YAAY;GACb;IAEA,iBAAiB,KAAK,WACrB,oCAAC,YAAS,eAAe;AAAC,SAAO,QAAQ,KAAK;MAC3C,QAAQ,QACP,oCAAC,oBAAc,OAAO,KAAoB,EAE3C,QAAQ,KACA,CACX,CACG,CACN,CAED,CACF,CACM,EACb,WACC,oCAAC,SAAI,WAAW,QAAQ,kBACrB,CAAC,mBACA,oCAAC,SAAI,WAAW,QAAQ,eACtB,oCAAC,cAAW,WAAW,eAAe,qBAAsB,CACxD,EAER,oCAAC,SAAI,WAAW,QAAQ,WAAU,QAAc,CAC5C,EAER,oCAAC,eAAY,OAAO,EAAE,MAAM,GAAG,IAC7B,oCAAC,mBAAgB,kBAAkB,SAChC,UAAU,KAAK,EAAE,SAAS,YAAY;AACrC,SAAO,oCAAC;GAAoB,OAAO;GAAgB;IAAS;GAC5D,CACc,CACN,EACd,oCAAC,eAAY,OAAO;EAAE,MAAM;EAAG,YAAY;EAAG,eAAe;EAAI,IAC/D,oCAAC,SAAI,WAAW,QAAQ,0BACrB,gBACC,oCAAC;EACC,SAAQ;EACR,SAAS,oCAAC,eAAW;EACrB,SAAS;IAER,EAAE,UAAU,CACA,EAGjB,oCAAC,aACE,gBAAgB,SAAS,KACxB,oCAAC;EACC,SAAQ;EACR,OAAM;EACN,SAAS,oCAAC,0BAAsB;EAChC,SAAS;EACT,WAAW,QAAQ;IAElB,EAAE,UAAU,CACA,EAEjB,oCAAC;EACC,MAAM,sBAAsB,OAAO;EACnC,eAAe;AACb,0BAAuB,KAAK;;EAE9B,UAAU;EACV,cAAc;GACZ,UAAU;GACV,YAAY;GACb;EACD,iBAAiB;GACf,UAAU;GACV,YAAY;GACb;IAEA,gBAAgB,KAAK,WACpB,oCAAC,YAAS,eAAe;AAAC,SAAO,QAAQ,KAAK;MAC3C,QAAQ,QACP,oCAAC,oBAAc,OAAO,KAAoB,EAE3C,QAAQ,KACA,CACX,CACG,CACH,CACF,CACM,CACT,CACH,CACF;;;;;ACpQV,MAAM,YAAY,YAAW,WAAU;CACrC,MAAM;EACJ,QAAQ;EACR,SAAS,MAAM,QAAQ,EAAE;EACzB,kBAAkB,UAChB,QAAQ,OAAO,QAAQ,MAAM,QAAQ,MAAM,QAAQ,KAAK,MAAM,GAAI;EACpE,cAAc,MAAM,QAAQ,EAAE;EAC/B;CACD,gBAAgB,EACd,aAAa,MAAM,QAAQ,EAAE,EAC9B;CACD,WAAW;EACT,QAAQ,UAAU,OAAO;EACzB,cAAc,MAAM,QAAQ,EAAE;EAC/B;CACF,EAAE;AAEH,MAAa,aAAa,UAAU;CAClC,MAAM,EAAE,MAAM,OAAO,OAAO,OAAO,SAAS,cAAc,UAAU;CACpE,MAAM,UAAU,UAAU,EAAS,OAAO,CAAC;AAE3C,QACE,oCAAC,aACC,oCAAC,QAAK,mBACH,CAAC,eACA,oCAAC,QAAK,cACJ,oCAAC;EAAQ,aAAY;EAAW,SAAQ;GAAW,CAC9C,EAER,QACC,oCAAC;EAAK;EAAK,WAAW,QAAQ;IAC5B,oCAAC;EACC,MAAM,gBAAgB,KAAK;EAC3B,WAAW,QAAQ;EACV;GACT,CACG,EAET,oCAAC;EAAK;EAAK,WAAW,QAAQ;IAC5B,oCAAC,cAAW,SAAQ,QAAM,MAAmB,EAC7C,oCAAC,cAAW,SAAQ,aAAW,MAAmB,CAC7C,CACF,CACH"}

package/dist/Sticky-CIJot-6K.js

@@ -0,0 +1,50 @@
+import { t as colors$1 } from "./colors-BONxjrOE.js";
+import { t as Token } from "./Token-rFpVjQT_.js";
+import React from "react";
+import { Divider, Typography, makeStyles } from "@material-ui/core";
+import { CalendarIcon, OpenInNewTabIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+
+//#region src/UI/components/dataDisplay/Sticky.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		display: "inline-flex",
+		alignItems: "center",
+		background: (props) => {
+			if (colors$1.unity.hasOwnProperty(props.color)) return colors$1.unity[props.color].hint;
+			else return colors$1.unity.info.hint;
+		},
+		borderRadius: (props) => props.size === "large" ? 56 / 2 : 48 / 2,
+		margin: theme.spacing(1)
+	},
+	stickyChild: { display: "inline-table" }
+}), { name: "FluentListItem" });
+const Sticky = (props) => {
+	const classes = useStyles(props);
+	const { text, size, color } = props;
+	const typographyVariant = size === "large" ? "body2" : "body1";
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Token, {
+		className: classes.stickyChild,
+		icon: CalendarIcon,
+		size,
+		color
+	}), /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.stickyChild,
+		variant: typographyVariant
+	}, text ?? ""), /* @__PURE__ */ React.createElement(Token, {
+		className: classes.stickyChild,
+		icon: OpenInNewTabIcon,
+		variant: "filled",
+		size,
+		color
+	}));
+};
+Sticky.propTypes = {
+	text: PropTypes.string,
+	size: PropTypes.string,
+	color: PropTypes.string
+};
+
+//#endregion
+export { Sticky as t };
+//# sourceMappingURL=Sticky-CIJot-6K.js.map

package/dist/Sticky-CIJot-6K.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sticky-CIJot-6K.js","names":["colors"],"sources":["../src/UI/components/dataDisplay/Sticky.jsx"],"sourcesContent":["import React from 'react'\nimport { Typography, makeStyles, Divider } from '@material-ui/core'\nimport { Token } from './Token'\nimport { OpenInNewTabIcon, CalendarIcon } from '@fluentui/react-icons'\nimport { colors } from '../../../utilities/style/colors';\nimport PropTypes from 'prop-types';\n\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    root: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      background: (props) => {\n        if (colors.unity.hasOwnProperty(props.color)) {\n          return colors.unity[props.color].hint;\n        } else {\n          return colors.unity.info.hint;\n        }\n      },\n      borderRadius: props => props.size === \"large\" ? 56 / 2.0 : 48 / 2.0,\n      margin: theme.spacing(1)\n    },\n    stickyChild: {\n      display: 'inline-table'\n    },\n  }),\n  { name: 'FluentListItem' }\n)\n\nexport const Sticky = (props) => {\n  const classes = useStyles(props)\n  const {\n    text,\n    size,\n    color\n  } = props\n\n  const typographyVariant = (size === \"large\") ? \"body2\" : \"body1\"\n\n  return (\n    <div className={classes.root}>\n      <Token className={classes.stickyChild} icon={CalendarIcon} size={size} color={color} />\n      <Typography className={classes.stickyChild} variant={typographyVariant}>\n        { text ?? \"\" }\n      </Typography>\n      <Token className={classes.stickyChild} icon={OpenInNewTabIcon} variant=\"filled\" size={size} color={color} />\n    </div>\n  )\n}\n\nSticky.propTypes = {\n  text: PropTypes.string,\n  size: PropTypes.string,\n  color: PropTypes.string\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,YAAY,YACf,WAAW;CACV,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,aAAa,UAAU;AACrB,OAAIA,SAAO,MAAM,eAAe,MAAM,MAAM,CAC1C,QAAOA,SAAO,MAAM,MAAM,OAAO;OAEjC,QAAOA,SAAO,MAAM,KAAK;;EAG7B,eAAc,UAAS,MAAM,SAAS,UAAU,KAAK,IAAM,KAAK;EAChE,QAAQ,MAAM,QAAQ,EAAE;EACzB;CACD,aAAa,EACX,SAAS,gBACV;CACF,GACD,EAAE,MAAM,kBAAkB,CAC3B;AAED,MAAa,UAAU,UAAU;CAC/B,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EACJ,MACA,MACA,UACE;CAEJ,MAAM,oBAAqB,SAAS,UAAW,UAAU;AAEzD,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC;EAAM,WAAW,QAAQ;EAAa,MAAM;EAAoB;EAAa;GAAS,EACvF,oCAAC;EAAW,WAAW,QAAQ;EAAa,SAAS;IACjD,QAAQ,GACC,EACb,oCAAC;EAAM,WAAW,QAAQ;EAAa,MAAM;EAAkB,SAAQ;EAAe;EAAa;GAAS,CACxG;;AAIV,OAAO,YAAY;CACjB,MAAM,UAAU;CAChB,MAAM,UAAU;CAChB,OAAO,UAAU;CAClB"}

package/dist/SubHeaderAction-B9e4Fnrd.js

@@ -0,0 +1,27 @@
+import { n as useShellStore } from "./shellStore-C8zfPsZ-.js";
+import React, { Children, useEffect } from "react";
+import { createTeleporter } from "react-teleporter";
+
+//#region src/utilities/utilityBar/SubHeaderAction.jsx
+const SubHeaderActions = createTeleporter({ multiSources: true });
+/**
+* @param {any} props
+*/
+function SubHeaderActionsTarget(props) {
+	return /* @__PURE__ */ React.createElement(SubHeaderActions.Target, props);
+}
+/**
+* Places a button in the App SubHeader
+*/
+const SubHeaderAction = (props) => {
+	const { children, className, ...buttonProps } = props;
+	const setSubHeaderActionHasChildren = useShellStore((state) => state.setSubHeaderActionHasChildren);
+	useEffect(() => {
+		setSubHeaderActionHasChildren(Children.count(children) > 0);
+	}, [children, setSubHeaderActionHasChildren]);
+	return /* @__PURE__ */ React.createElement(SubHeaderActions.Source, null, children);
+};
+
+//#endregion
+export { SubHeaderActionsTarget as n, SubHeaderAction as t };
+//# sourceMappingURL=SubHeaderAction-B9e4Fnrd.js.map

package/dist/SubHeaderAction-B9e4Fnrd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubHeaderAction-B9e4Fnrd.js","names":[],"sources":["../src/utilities/utilityBar/SubHeaderAction.jsx"],"sourcesContent":["import React, { Children, useEffect } from 'react';\nimport { createTeleporter } from 'react-teleporter';\nimport { useShellStore } from '../../stores/shellStore';\n\nconst SubHeaderActions = createTeleporter({\n  multiSources: true\n});\n\n/**\n * @param {any} props\n */\nexport function SubHeaderActionsTarget(props) {\n  return <SubHeaderActions.Target {...props} />;\n}\n\n/**\n * Places a button in the App SubHeader\n */\nexport const SubHeaderAction = (props) => {\n  const { children, className, ...buttonProps } = props;\n\n  const setSubHeaderActionHasChildren = useShellStore(\n    (state) => state.setSubHeaderActionHasChildren\n  );\n\n  useEffect(() => {\n    const hasChildren = Children.count(children) > 0;\n    setSubHeaderActionHasChildren(hasChildren);\n  }, [children, setSubHeaderActionHasChildren]);\n\n  return <SubHeaderActions.Source>{children}</SubHeaderActions.Source>;\n};\n"],"mappings":";;;;;AAIA,MAAM,mBAAmB,iBAAiB,EACxC,cAAc,MACf,CAAC;;;;AAKF,SAAgB,uBAAuB,OAAO;AAC5C,QAAO,oCAAC,iBAAiB,QAAW,MAAS;;;;;AAM/C,MAAa,mBAAmB,UAAU;CACxC,MAAM,EAAE,UAAU,WAAW,GAAG,gBAAgB;CAEhD,MAAM,gCAAgC,eACnC,UAAU,MAAM,8BAClB;AAED,iBAAgB;AAEd,gCADoB,SAAS,MAAM,SAAS,GAAG,EACL;IACzC,CAAC,UAAU,8BAA8B,CAAC;AAE7C,QAAO,oCAAC,iBAAiB,cAAQ,SAAmC"}

package/dist/SummaryBlock-BjUNDl4q.js

@@ -0,0 +1,98 @@
+import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
+import { r as getEllipseColor } from "./colorConverter-x64WSLsF.js";
+import { t as useSplitDecimal } from "./useSplitDecimal-CsxaeRaU.js";
+import React from "react";
+import { Box, Typography, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import { PropTypes as PropTypes$1 } from "prop-types";
+import { grey } from "@material-ui/core/colors";
+
+//#region src/UI/dataDisplay/SummaryBlock.jsx
+const useStyles = makeStyles((theme) => ({
+	rootContainer: {
+		backgroundColor: (props) => props?.backgroundColor || theme.palette.background.paper,
+		borderLeft: (props) => props?.noLeftBorder ? "0px" : "solid 1px",
+		borderRight: (props) => props?.noRightBorder ? "0px" : "solid 1px",
+		height: (props) => props?.height,
+		width: (props) => props?.width
+	},
+	labelOverflow: {
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		fontWeight: "400"
+	},
+	labelValue: {
+		fontWeight: "400",
+		fontSize: "16px"
+	},
+	labelText: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "flex-start",
+		padding: "0px 10px",
+		color: grey[500],
+		fontSize: (props) => props?.labelVariant === "caption" && "12px",
+		fontWeight: (props) => props?.labelVariant === "caption" ? "400" : "500"
+	},
+	iconWrapper: { marginLeft: theme.spacing(1) }
+}));
+/**
+* `SummaryBlock` component
+*/
+const SummaryBlock = (props) => {
+	const { value, startLabel, label, icon, style, primary, secondary, textVariant, labelVariant = "caption", children, valueIsDecimal = true, iconColor } = props;
+	const { textValue } = useSplitDecimal(value);
+	const theme = useTheme();
+	const classes = useStyles(props);
+	return /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		alignItems: "center",
+		className: classes.rootContainer,
+		style: {
+			gap: "2px",
+			...style
+		}
+	}, /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		alignSelf: "stretch"
+	}, primary ? primary : /* @__PURE__ */ React.createElement(React.Fragment, null, startLabel && /* @__PURE__ */ React.createElement(Typography, {
+		variant: "caption",
+		className: clsx(classes.labelOverflow)
+	}, startLabel), /* @__PURE__ */ React.createElement(Typography, {
+		variant: textVariant,
+		className: clsx(textVariant ? {} : classes.labelValue, classes.labelOverflow),
+		style: style?.mainLabel
+	}, textValue.mainLabel), valueIsDecimal && textValue.decimalLabel && /* @__PURE__ */ React.createElement(Typography, {
+		variant: "caption",
+		className: clsx(classes.labelOverflow)
+	}, ".", textValue.decimalLabel), icon && /* @__PURE__ */ React.createElement("div", { className: classes.iconWrapper }, /* @__PURE__ */ React.createElement(FluentIcon, {
+		component: icon,
+		color: iconColor ? getEllipseColor(theme, iconColor) : null
+	})))), secondary ? secondary : /* @__PURE__ */ React.createElement(Typography, {
+		variant: labelVariant,
+		className: clsx(classes.labelText, classes.labelOverflow),
+		style: style?.label
+	}, label), children);
+};
+SummaryBlock.propTypes = {
+	value: PropTypes$1.string.isRequired,
+	label: PropTypes$1.string,
+	startLabel: PropTypes$1.string,
+	icon: PropTypes$1.elementType,
+	style: PropTypes$1.object,
+	primary: PropTypes$1.elementType,
+	secondary: PropTypes$1.elementType,
+	textVariant: PropTypes$1.string,
+	labelVariant: PropTypes$1.string,
+	backgroundColor: PropTypes$1.string,
+	children: PropTypes$1.elementType
+};
+
+//#endregion
+export { SummaryBlock as t };
+//# sourceMappingURL=SummaryBlock-BjUNDl4q.js.map

package/dist/SummaryBlock-BjUNDl4q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryBlock-BjUNDl4q.js","names":["PropTypes"],"sources":["../src/UI/dataDisplay/SummaryBlock.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, Typography, Box, useTheme } from '@material-ui/core';\nimport { PropTypes } from 'prop-types';\nimport { useSplitDecimal } from '../../hooks/useSplitDecimal';\nimport { grey } from '@material-ui/core/colors';\nimport clsx from 'clsx';\nimport { FluentIcon } from '../../utilities/iconLibrary/FluentIcon';\nimport { getEllipseColor } from '../../utilities/style/colorConverter';\n\nconst useStyles = makeStyles(theme => ({\n  rootContainer: {\n    backgroundColor: props =>\n      props?.backgroundColor || theme.palette.background.paper,\n    borderLeft: props => (props?.noLeftBorder ? '0px' : 'solid 1px'),\n    borderRight: props => (props?.noRightBorder ? '0px' : 'solid 1px'),\n    height: props => props?.height,\n    width: props => props?.width\n  },\n  labelOverflow: {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    fontWeight: '400',\n  },\n  labelValue: {\n    fontWeight: '400',\n    fontSize: '16px',\n  },\n  labelText: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    padding: '0px 10px',\n    color: grey[500],\n    fontSize: props => props?.labelVariant === 'caption' && '12px',\n    fontWeight: props => (props?.labelVariant === 'caption' ? '400' : '500'),\n  },\n  iconWrapper: {\n    marginLeft: theme.spacing(1),\n  },\n}));\n\n/**\n * `SummaryBlock` component\n */\nexport const SummaryBlock = props => {\n  const {\n    value,\n    startLabel,\n    label,\n    icon,\n    style,\n    primary,\n    secondary,\n    textVariant,\n    labelVariant = 'caption',\n    children,\n    valueIsDecimal = true,\n    iconColor,\n  } = props;\n\n  const { textValue } = useSplitDecimal(value);\n  const theme = useTheme();\n  const classes = useStyles(props);\n\n  return (\n    <Box\n      display=\"flex\"\n      flexDirection=\"column\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      className={classes.rootContainer}\n      style={{ gap: '2px', ...style }}\n    >\n      <Box\n        display=\"flex\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        alignSelf=\"stretch\"\n      >\n        {primary ? (\n          primary\n        ) : (\n          <>\n            {startLabel && (\n              <Typography\n                variant=\"caption\"\n                className={clsx(classes.labelOverflow)}\n              >\n                {startLabel}\n              </Typography>\n            )}\n            <Typography\n              variant={textVariant}\n              className={clsx(\n                textVariant ? {} : classes.labelValue,\n                classes.labelOverflow\n              )}\n              style={style?.mainLabel}\n            >\n              {textValue.mainLabel}\n            </Typography>\n            {valueIsDecimal && textValue.decimalLabel && (\n              <Typography\n                variant=\"caption\"\n                className={clsx(classes.labelOverflow)}\n              >\n                .{textValue.decimalLabel}\n              </Typography>\n            )}\n            {icon && (\n              <div className={classes.iconWrapper}>\n                <FluentIcon\n                  component={icon}\n                  color={iconColor ? getEllipseColor(theme, iconColor) : null}\n                />\n              </div>\n            )}\n          </>\n        )}\n      </Box>\n      {secondary ? (\n        secondary\n      ) : (\n        <Typography\n          variant={labelVariant}\n          className={clsx(classes.labelText, classes.labelOverflow)}\n          style={style?.label}\n        >\n          {label}\n        </Typography>\n      )}\n      {children}\n    </Box>\n  );\n};\n\nSummaryBlock.propTypes = {\n  /** @type {?string} main label, if you pass a number with decimals the card will show the decimals in the left side */\n  value: PropTypes.string.isRequired,\n\n  /** @type {?string} label showed in the bottom part of the block summary */\n  label: PropTypes.string,\n\n  /** @type {?string} optional symbol to put at the right side of the value */\n  startLabel: PropTypes.string,\n\n  /** @type {?elementType} optional icon to display in the left side of the value */\n  icon: PropTypes.elementType,\n\n  /** @type {?object} optional additional css properties */\n  style: PropTypes.object,\n\n  /** @type {?object}  render prop if you want to pass a custom react element instead of the predefined value */\n  primary: PropTypes.elementType,\n\n  /** @type {?object} render prop if you want to pass a custom react element instead of the predefined label*/\n  secondary: PropTypes.elementType,\n\n  /** @type {?string} optional variant for the main text e.g ['caption', 'subtitle'] */\n  textVariant: PropTypes.string,\n\n  /** @type {?string} optional variant for the label e.g ['caption', 'subtitle'] */\n  labelVariant: PropTypes.string,\n\n  /** @type {?string} optional background color for the full content */\n  backgroundColor: PropTypes.string,\n\n  /** @type {?elementType} optional children element */\n  children: PropTypes.elementType,\n};\n"],"mappings":";;;;;;;;;;AASA,MAAM,YAAY,YAAW,WAAU;CACrC,eAAe;EACb,kBAAiB,UACf,OAAO,mBAAmB,MAAM,QAAQ,WAAW;EACrD,aAAY,UAAU,OAAO,eAAe,QAAQ;EACpD,cAAa,UAAU,OAAO,gBAAgB,QAAQ;EACtD,SAAQ,UAAS,OAAO;EACxB,QAAO,UAAS,OAAO;EACxB;CACD,eAAe;EACb,YAAY;EACZ,UAAU;EACV,cAAc;EACd,YAAY;EACb;CACD,YAAY;EACV,YAAY;EACZ,UAAU;EACX;CACD,WAAW;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,SAAS;EACT,OAAO,KAAK;EACZ,WAAU,UAAS,OAAO,iBAAiB,aAAa;EACxD,aAAY,UAAU,OAAO,iBAAiB,YAAY,QAAQ;EACnE;CACD,aAAa,EACX,YAAY,MAAM,QAAQ,EAAE,EAC7B;CACF,EAAE;;;;AAKH,MAAa,gBAAe,UAAS;CACnC,MAAM,EACJ,OACA,YACA,OACA,MACA,OACA,SACA,WACA,aACA,eAAe,WACf,UACA,iBAAiB,MACjB,cACE;CAEJ,MAAM,EAAE,cAAc,gBAAgB,MAAM;CAC5C,MAAM,QAAQ,UAAU;CACxB,MAAM,UAAU,UAAU,MAAM;AAEhC,QACE,oCAAC;EACC,SAAQ;EACR,eAAc;EACd,gBAAe;EACf,YAAW;EACX,WAAW,QAAQ;EACnB,OAAO;GAAE,KAAK;GAAO,GAAG;GAAO;IAE/B,oCAAC;EACC,SAAQ;EACR,gBAAe;EACf,YAAW;EACX,WAAU;IAET,UACC,UAEA,0DACG,cACC,oCAAC;EACC,SAAQ;EACR,WAAW,KAAK,QAAQ,cAAc;IAErC,WACU,EAEf,oCAAC;EACC,SAAS;EACT,WAAW,KACT,cAAc,EAAE,GAAG,QAAQ,YAC3B,QAAQ,cACT;EACD,OAAO,OAAO;IAEb,UAAU,UACA,EACZ,kBAAkB,UAAU,gBAC3B,oCAAC;EACC,SAAQ;EACR,WAAW,KAAK,QAAQ,cAAc;IACvC,KACG,UAAU,aACD,EAEd,QACC,oCAAC,SAAI,WAAW,QAAQ,eACtB,oCAAC;EACC,WAAW;EACX,OAAO,YAAY,gBAAgB,OAAO,UAAU,GAAG;GACvD,CACE,CAEP,CAED,EACL,YACC,YAEA,oCAAC;EACC,SAAS;EACT,WAAW,KAAK,QAAQ,WAAW,QAAQ,cAAc;EACzD,OAAO,OAAO;IAEb,MACU,EAEd,SACG;;AAIV,aAAa,YAAY;CAEvB,OAAOA,YAAU,OAAO;CAGxB,OAAOA,YAAU;CAGjB,YAAYA,YAAU;CAGtB,MAAMA,YAAU;CAGhB,OAAOA,YAAU;CAGjB,SAASA,YAAU;CAGnB,WAAWA,YAAU;CAGrB,aAAaA,YAAU;CAGvB,cAAcA,YAAU;CAGxB,iBAAiBA,YAAU;CAG3B,UAAUA,YAAU;CACrB"}

package/dist/SupportCaseSideSheet-BTCZjI26.js

@@ -0,0 +1,376 @@
+import { t as Form } from "./Form-DbOA5j38.js";
+import { t as Field } from "./Field-Cda5rJe2.js";
+import { n as SubmitButton, t as FormButtons } from "./FormButtons-BTCO-pzW.js";
+import { t as ConfigService } from "./configService-C4uoG3wj.js";
+import { t as useUser } from "./useUser-wpHGo6jU.js";
+import { t as apiMutate } from "./useAxiosMutate-DcLxzykX.js";
+import { t as FluentTextFieldAutoComplete } from "./FluentTextFieldAutoComplete-5Hp3qpk6.js";
+import { t as LayoutUnit } from "./LayoutUnit-D4jJvonh.js";
+import { n as SideSheet } from "./SideSheet-C-rILQqR.js";
+import { t as AmbientCard } from "./AmbientCard-DK9abODq.js";
+import { t as LinearProgress$1 } from "./LinearProgress-DM2DNWCe.js";
+import { t as FluentTextField } from "./FluentTextField-CXvZawOG.js";
+import { t as DragDropFileUpload } from "./DragDropFileUpload-TFHchivz.js";
+import React, { useCallback, useEffect, useState } from "react";
+import { Button } from "@material-ui/core";
+import { useSnackbar } from "notistack";
+import { useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+//#region src/UI/support/SupportCaseForm.jsx
+const SupportCaseForm = ({ onSubmit, initialValues = {}, handleCloseSupportCaseSideSheet }) => {
+	const { t } = useTranslation();
+	const user = useUser();
+	const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+	const [severityOptions, setSeverityOptions] = useState([]);
+	const [environmentOptions, setEnvironmentOptions] = useState([]);
+	const [brandOptions, setBrandOptions] = useState([]);
+	const [uploadedFiles, setUploadedFiles] = useState([]);
+	const [unityState, setUnityState] = useState();
+	const [loadingState, setLoadingState] = useState(false);
+	const baseUrl = ConfigService.productV1ApiUrl;
+	const unityUrl = ConfigService.supportV1ApiUrl;
+	const unityEnv = ConfigService.config.UNITY_ENVIRONMENT;
+	const [uploadKey, setUploadKey] = useState(0);
+	const [restrictedFiles, setRestrictedFiles] = useState({});
+	const history = useHistory();
+	const getFileRestrictions = useCallback(async () => apiMutate(baseUrl, `udpunitysupport/supportFileUploadRestrictions`, {
+		method: "get",
+		headers: { currentTenantId: user?.currentTenantId }
+	}), [baseUrl, user?.currentTenantId]);
+	const getFileRestrictionsUnity = useCallback(async () => apiMutate(unityUrl, `evergrncaseattachment/get-attachment-restrictions`, {
+		method: "get",
+		headers: { currentTenantId: user?.currentTenantId }
+	}), [unityUrl, user?.currentTenantId]);
+	const getSeverityUnity = useCallback(async () => apiMutate(unityUrl, `caseseverity/get-case-severity`, {
+		method: "get",
+		headers: { currentTenantId: user?.currentTenantId }
+	}), [unityUrl, user?.currentTenantId]);
+	const getEnvironmentUnity = useCallback(async () => apiMutate(unityUrl, `evergrncaseenvironment/get-case-environments`, {
+		method: "get",
+		headers: { currentTenantId: user?.currentTenantId }
+	}), [unityUrl, user?.currentTenantId]);
+	const getSeverity = useCallback(async () => apiMutate(baseUrl, `udpunitysupport/severities`, {
+		method: "get",
+		headers: { currentTenantId: user?.currentTenantId }
+	}), [baseUrl, user?.currentTenantId]);
+	const getEnvironment = useCallback(async () => apiMutate(baseUrl, `udpunitysupport/environments`, {
+		method: "get",
+		headers: { currentTenantId: user?.currentTenantId }
+	}), [baseUrl, user?.currentTenantId]);
+	useCallback(async () => apiMutate(baseUrl, `udpunitysupport/tenantCaseAccount/` + user?.currentTenantId, {
+		method: "get",
+		headers: { currentTenantId: user?.currentTenantId }
+	}), [baseUrl, user?.currentTenantId]);
+	const getTenantCaseBrand = useCallback(async () => apiMutate(ConfigService.tenantV2ApiUrl, `tenant/products`, {
+		method: "get",
+		headers: { currentTenantId: user?.currentTenantId }
+	}), [user?.currentTenantId]);
+	const getTenantSubscribedProducts = useCallback(async () => apiMutate(ConfigService.tenantV1ApiUrl, `tenantProducts?tenantId=${user?.currentTenantId}`, {
+		method: "get",
+		headers: { currentTenantId: user?.currentTenantId }
+	}), [user?.currentTenantId]);
+	const getCasesEnv = {
+		Development: "100000003",
+		Build: "100000003",
+		Staging: "100000001",
+		Production: "100000000"
+	};
+	function getCaseEnvironment() {
+		return getCasesEnv[unityEnv] || "100000003";
+	}
+	let brandId = "416b0ca8-e679-ef11-ac20-6045bdcd3d86";
+	const postCaseAttachment = useCallback((values) => {
+		const data = new FormData();
+		uploadedFiles.forEach((file) => {
+			data.append("files", file);
+		});
+		data.append("EvergrnCaseName", values.title);
+		data.append("EvergrnDescription", values.description);
+		data.append("EvergrnCaseEnvironment", getCaseEnvironment());
+		data.append("EvergrnSeverity", values.severity.value);
+		const matchingProduct = brandOptions.find((product) => product.productId == ConfigService.config.UNITY_PRODUCT_ID);
+		if (matchingProduct && matchingProduct.value) brandId = matchingProduct.value;
+		data.append("EvergrnBrandId", brandId);
+		data.append("UDPDriveUnityProductId", ConfigService.config.UNITY_PRODUCT_ID);
+		return apiMutate(baseUrl, `udpunitysupport/case`, {
+			method: "post",
+			headers: { "Content-Type": "multipart/form-data" }
+		}, { data });
+	}, [
+		baseUrl,
+		uploadedFiles,
+		getCaseEnvironment,
+		brandOptions,
+		brandId
+	]);
+	const postCaseAttachmentUnity = useCallback((values) => {
+		const data = new FormData();
+		uploadedFiles.forEach((file) => {
+			data.append("files", file);
+		});
+		data.append("EvergrnCaseName", values.title);
+		data.append("EvergrnDescription", values.description);
+		data.append("EvergrnCaseEnvironment", getCaseEnvironment());
+		data.append("EvergrnSeverity", values.severity.value);
+		data.append("EvergrnBrandId", values.product?.value || brandId);
+		data.append("UDPDriveUnityProductId", ConfigService.config.UNITY_PRODUCT_ID);
+		return apiMutate(unityUrl, `evergrncase/post-case`, {
+			method: "post",
+			headers: { "Content-Type": "multipart/form-data" }
+		}, { data });
+	}, [
+		unityUrl,
+		uploadedFiles,
+		getCaseEnvironment,
+		brandId
+	]);
+	useEffect(() => {
+		const fetchData = async () => {
+			try {
+				if (ConfigService.config.UNITY_PRODUCT_ID === "1") setUnityState(true);
+				else setUnityState(false);
+				let getFileRestrictionsResponse = unityState ? await getFileRestrictionsUnity() : await getFileRestrictions();
+				let severityResponse = unityState ? await getSeverityUnity() : await getSeverity();
+				let environmentResponse = unityState ? await getEnvironmentUnity() : await getEnvironment();
+				if (getFileRestrictionsResponse) {
+					const fileRestrictionsData = getFileRestrictionsResponse.data;
+					setRestrictedFiles(fileRestrictionsData);
+				}
+				if (severityResponse) setSeverityOptions(severityResponse.data.map((item) => ({
+					value: item.externalUUID.toString(),
+					label: item.name
+				})));
+				if (environmentResponse) setEnvironmentOptions(environmentResponse.data.map((item) => ({
+					value: item.evergrnCaseEnvironmentValue.toString(),
+					label: item.evergrnCaseEnvironmentLabel
+				})));
+				const brandResponse = await getTenantCaseBrand();
+				const tenantSubscribedProductsResponse = await getTenantSubscribedProducts();
+				if (brandResponse && tenantSubscribedProductsResponse) {
+					const brandArray = brandResponse.data.filter((brandItem) => brandItem.externalUuid != null);
+					setBrandOptions(tenantSubscribedProductsResponse.data.map((subscribedProduct) => {
+						const foundProduct = brandArray.find((brandItem) => brandItem.productId === subscribedProduct.productId);
+						if (!foundProduct) return null;
+						return {
+							...subscribedProduct,
+							value: foundProduct.externalUuid?.toString(),
+							label: foundProduct.name.toString()
+						};
+					}).filter(Boolean));
+				}
+			} catch (error) {
+				console.error("Error fetching data:", error);
+			}
+		};
+		fetchData();
+	}, [
+		unityState,
+		getSeverityUnity,
+		getEnvironmentUnity,
+		getFileRestrictionsUnity,
+		getFileRestrictions,
+		getSeverity,
+		getEnvironment,
+		getTenantCaseBrand,
+		getTenantSubscribedProducts
+	]);
+	const handleUploadFile = (files) => {
+		const identifiedRestrictedExtensions = [];
+		const identifiedRestrictedFileSizes = [];
+		files.forEach((file) => {
+			const fileExtension = file.name.includes(".") ? "." + file.name.split(".").pop().toLowerCase() : "";
+			if (restrictedFiles.restrictedExtensions.includes(fileExtension)) identifiedRestrictedExtensions.push(fileExtension);
+			if (file.size > restrictedFiles.maxFileSize) identifiedRestrictedFileSizes.push(file.name);
+		});
+		const isAcceptableExtensions = identifiedRestrictedExtensions.length === 0;
+		const isAcceptableSizes = identifiedRestrictedFileSizes.length === 0;
+		if (!(isAcceptableExtensions && isAcceptableSizes)) {
+			if (!isAcceptableExtensions) enqueueSnackbar(t(`Restricted file type(s). ${[...new Set(identifiedRestrictedExtensions)].join(", ")}`), {
+				variant: "error",
+				anchorOrigin: {
+					vertical: "top",
+					horizontal: "center"
+				}
+			});
+			if (!isAcceptableSizes) enqueueSnackbar(t(`File(s) are too large (5MB limit). ${identifiedRestrictedFileSizes.join(", ")}`), {
+				variant: "error",
+				anchorOrigin: {
+					vertical: "top",
+					horizontal: "center"
+				}
+			});
+			setUploadKey((prevKey) => prevKey + 1);
+			return;
+		}
+		setUploadedFiles(files);
+	};
+	const handleSubmit = async (values) => {
+		setLoadingState(true);
+		let response;
+		try {
+			response = unityState ? await postCaseAttachmentUnity(values) : await postCaseAttachment(values);
+		} catch (apiError) {
+			console.error("post Case API call failed:", apiError);
+			enqueueSnackbar(t("Submission failed"), {
+				variant: "error",
+				anchorOrigin: {
+					vertical: "top",
+					horizontal: "center"
+				},
+				action: (key) => /* @__PURE__ */ React.createElement(Button, {
+					color: "primary",
+					size: "small",
+					id: "udpRecord-SupportCaseForm-close",
+					onClick: () => {
+						closeSnackbar(key);
+					}
+				}, "close")
+			});
+			setLoadingState(false);
+			return { submitError: apiError.message };
+		}
+		if (!response?.data?.evergrnCaseId) {
+			console.error("API call succeeded but no case ID returned");
+			enqueueSnackbar(t("Submission failed - No case ID returned"), {
+				variant: "error",
+				anchorOrigin: {
+					vertical: "top",
+					horizontal: "center"
+				},
+				action: (key) => /* @__PURE__ */ React.createElement(Button, {
+					color: "primary",
+					size: "small",
+					id: "udpRecord-SupportCaseForm-close",
+					onClick: () => {
+						closeSnackbar(key);
+					}
+				}, "close")
+			});
+			setLoadingState(false);
+			return { submitError: "No case ID was returned from the server" };
+		}
+		window.dispatchEvent(new CustomEvent("support-case-created"));
+		try {
+			handleCloseSupportCaseSideSheet();
+		} catch (closeError) {
+			console.error("Error closing sheet:", closeError);
+		}
+		enqueueSnackbar(t(`Support Case Created. View your cases`), {
+			variant: "success",
+			anchorOrigin: {
+				vertical: "top",
+				horizontal: "center"
+			},
+			action: (key) => /* @__PURE__ */ React.createElement(Button, {
+				color: "primary",
+				size: "small",
+				id: "udpRecord-SupportCaseForm-here",
+				onClick: () => {
+					try {
+						const caseId = response.data.evergrnCaseId;
+						let url;
+						if (unityState) {
+							url = `/support/cases/${caseId}`;
+							history.push(url);
+						} else {
+							url = `${ConfigService.config.UNITY_URL}/support/cases/${caseId}`;
+							window.location.href = url;
+						}
+						closeSnackbar(key);
+					} catch (navError) {
+						console.error("Navigation error:", navError);
+						closeSnackbar(key);
+					}
+				}
+			}, "here")
+		});
+		try {
+			await onSubmit(values);
+		} catch (onSubmitError) {
+			console.error("Error in onSubmit:", onSubmitError);
+		}
+		setLoadingState(false);
+	};
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, loadingState && /* @__PURE__ */ React.createElement(LinearProgress$1, null), /* @__PURE__ */ React.createElement(Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React.createElement(AmbientCard, { fullWidth: true }, /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextField,
+		name: "title",
+		label: t("Title"),
+		placeholder: t("Enter a brief title for your issue"),
+		variant: "outlined",
+		fullWidth: true,
+		autoFocus: true,
+		required: true
+	}), unityState && /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextFieldAutoComplete,
+		name: "product",
+		label: t("Product"),
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		options: brandOptions,
+		optionKey: "label",
+		style: { width: "100%" },
+		disableClearable: true,
+		id: "udpRecord-CreateSupportCaseForm-product",
+		udprecordid: "udpRecord-CreateSupportCaseForm-product"
+	}), /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextFieldAutoComplete,
+		name: "severity",
+		label: t("Severity"),
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		options: severityOptions,
+		optionKey: "label",
+		style: { width: "100%" },
+		disableClearable: true,
+		id: "udpRecord-CreateSupportCaseForm-severity",
+		udprecordid: "udpRecord-CreateSupportCaseForm-severity",
+		required: true
+	})), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), /* @__PURE__ */ React.createElement(AmbientCard, { fullWidth: true }, /* @__PURE__ */ React.createElement(Field, {
+		name: "description",
+		component: FluentTextField,
+		multiline: true,
+		rows: 10,
+		minRows: 3,
+		maxRows: 20,
+		required: true,
+		label: "Description",
+		placeholder: "Please describe your issue in detail"
+	})), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), /* @__PURE__ */ React.createElement(AmbientCard, { fullWidth: true }, /* @__PURE__ */ React.createElement(DragDropFileUpload, {
+		key: uploadKey,
+		title: "Attachments",
+		multiple: true,
+		minHeight: "100px",
+		maxHeight: "400px",
+		acceptedFiles: ".pdf,.doc,.docx,.png,.jpg,.jpeg",
+		handleUploadFile
+	})), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), /* @__PURE__ */ React.createElement(FormButtons, null, /* @__PURE__ */ React.createElement(SubmitButton, {
+		color: "primary",
+		variant: "contained",
+		disablePristine: false
+	}, "Submit Ticket"))));
+};
+var SupportCaseForm_default = SupportCaseForm;
+
+//#endregion
+//#region src/UI/support/SupportCaseSideSheet.jsx
+const SupportCaseSideSheet = ({ open, onClose, onSubmit, initialValues, handleCloseSupportCaseSideSheet, loading }) => {
+	return /* @__PURE__ */ React.createElement(SideSheet, {
+		open,
+		onClose,
+		title: "Submit Support Ticket",
+		width: 600
+	}, /* @__PURE__ */ React.createElement(SupportCaseForm_default, {
+		onSubmit,
+		initialValues,
+		handleCloseSupportCaseSideSheet,
+		loading
+	}));
+};
+var SupportCaseSideSheet_default = SupportCaseSideSheet;
+
+//#endregion
+export { SupportCaseSideSheet_default as n, SupportCaseSideSheet as t };
+//# sourceMappingURL=SupportCaseSideSheet-BTCZjI26.js.map