udp-react-enterprise-component-library 25.14.1-beta.7 → 25.14.1-beta.8

package/dist/CrudBrowserContainer-B8AKH7kQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrudBrowserContainer-B8AKH7kQ.js","names":["uuid"],"sources":["../src/maintenanceEngine/crudBrowser/crudHelper.ts","../src/maintenanceEngine/crudBrowser/CrudTableColumnDefs.js","../src/maintenanceEngine/crudBrowser/CrudBrowserContainer.jsx"],"sourcesContent":["export function mapDotNetTypeToAgGridType(\n  type: string\n): 'text' | 'number' | 'boolean' | 'dateString' | 'dateTimeString' | 'object' {\n  const normalized = type.replace(/\\?$/, '').trim().toLowerCase();\n\n  if (\n    normalized === 'byte' ||\n    normalized === 'short' ||\n    normalized === 'int' ||\n    normalized === 'long' ||\n    normalized === 'float' ||\n    normalized === 'double' ||\n    normalized === 'decimal'\n  ) {\n    return 'number';\n  }\n\n  if (normalized === 'string' || normalized === 'guid') {\n    return 'text';\n  }\n\n  if (normalized === 'bool' || normalized === 'boolean') {\n    return 'boolean';\n  }\n\n  if (normalized === 'date') {\n    return 'dateString';\n  }\n\n  if (normalized === 'datetime') {\n    return 'dateTimeString';\n  }\n\n  if (normalized.startsWith('dictionary') || normalized === 'object') {\n    return 'object';\n  }\n\n  // fallback default\n  return 'text';\n}\n","import { toTitleCase } from '../../utilities/input/StringUtilities';\nimport { mapDotNetTypeToAgGridType } from './crudHelper';\n\nexport const CrudTableColumnDefs = (entityAttributes, actionList) => {\n  let columnDefs =\n    entityAttributes?.reduce((defs, element) => {\n      //skip is hidden through maintenance config\n      if (\n        element?.extendedProperties?.udpFieldProperties?.maintenanceConfig\n          ?.hidden === true\n      ) {\n        return defs;\n      }\n      //skip if business object key\n      if (element?.name === 'businessObjectKey') {\n        return defs;\n      }\n\n      if (!element?.extendedProperties?.childEntity) {\n        const columnHeader =\n          element?.extendedProperties?.udpFieldProperties?.displayName ||\n          element?.name;\n\n        const columnHeaderName = toTitleCase(columnHeader);\n        const lookupId =\n          element?.extendedProperties?.lookup ||\n          element?.extendedProperties?.udpFieldProperties?.maintainenceConfig\n            ?.lookup;\n\n        let def = {\n          headerName: columnHeaderName,\n          field: element?.name.charAt(0).toLowerCase() + element?.name.slice(1),\n          cellDataType: mapDotNetTypeToAgGridType(element?.type),\n          filter: element?.extendedProperties?.searchable,\n          sortable: element?.extendedProperties?.orderable,\n          hide: element?.extendedProperties?.udpFieldProperties?.maintainenceConfig?.hidden,\n          context: {\n            lookupId: lookupId,\n            ...element\n          }\n        };\n\n        defs.push(def);\n      }\n      return defs;\n    }, []) || [];\n\n  columnDefs.push({\n    headerName: 'Actions',\n    field: 'actions',\n    cellRenderer: 'actionsRenderer',\n    cellRendererParams: {\n      actionList: actionList\n    }\n  });\n\n  return columnDefs;\n};\n","import React, { useMemo, useEffect, useCallback } from 'react';\nimport { CrudTableColumnDefs } from './CrudTableColumnDefs';\nimport { LookupEntitiesIcon } from '@fluentui/react-icons';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory } from 'react-router-dom';\nimport { LookupTypeIdEnums, UdpEnums } from '../../enums/unitySystemEnums';\nimport { toTitleCase } from '../../utilities/input/StringUtilities';\nimport { getSanitizedName } from '../../utilities/entities/entityUtilities';\nimport { v4 as uuid } from 'uuid';\nimport { SearchMethodUdpGrid } from '../../UI/templates/newGrid/SearchMethodUdpGrid';\n\nconst GRID_ID = '4be3be45-1930-4ab9-b7b7-0c0fa3e30490';\n\nexport const CrudBrowserContainer = (props) => {\n  const {\n    actionList,\n    onCreate,\n    entityAttributes,\n    foreignKeyData,\n    promotedEntity,\n    apiMethod,\n    filterElements,\n    setAlertWarnings,\n    gridApiCallback,\n    showBackToTableBrowser,\n    ...other\n  } = props;\n\n  const { t } = useTranslation();\n  const history = useHistory();\n\n  const entityName = useMemo(() => {\n    return promotedEntity?.entityName;\n  }, [promotedEntity]);\n\n  const commonEntityName = useMemo(() => {\n    if (!entityName) return '';\n    return toTitleCase(getSanitizedName(entityName));\n  }, [entityName]);\n\n  const handleGoToTableBrowser = useCallback(() => {\n    history.push({\n      pathname: `/tableBrowser`\n    });\n  }, [history]);\n\n  const secondaryActionButtons = useMemo(() => {\n    if (showBackToTableBrowser) {\n      return [\n        {\n          label: t('Table Browser'),\n          iconName: 'arrowLeft16',\n          onClick: handleGoToTableBrowser\n        }\n      ];\n    } else {\n      return [];\n    }\n  }, [handleGoToTableBrowser, showBackToTableBrowser, t]);\n\n  const virtualActions = useMemo(() => {\n    return [\n      // Action for opening Virtual Configuration\n      {\n        id: 3,\n        title: t('Open Virtual Table'),\n        icon: LookupEntitiesIcon,\n        loading: !!!foreignKeyData,\n        onClick: (value) => {\n          history.push({\n            pathname: `/virtual/${value.id}`,\n            search: `?entityName=${entityName}`,\n            state: {\n              value,\n              promotedEntity,\n              label: value.name\n            }\n          });\n        },\n        checkDisabled: (value) => value.typeId !== LookupTypeIdEnums.Lookup\n      }\n    ];\n  }, [entityName, foreignKeyData, history, promotedEntity, t]);\n\n  const jointActionList = useMemo(() => {\n    if (!actionList || actionList?.length === 0) {\n      return null;\n    }\n    // Check if it's a udp lookup entity\n    if (\n      getSanitizedName(entityName?.toLowerCase()) ===\n      UdpEnums.Udp_Lookup.toLowerCase()\n    ) {\n      return [...actionList, ...virtualActions];\n    }\n    return [...actionList];\n  }, [actionList, entityName, virtualActions]);\n\n  const columnDefs = useMemo(() => {\n    if (entityAttributes && jointActionList) {\n      return CrudTableColumnDefs(entityAttributes, jointActionList);\n    }\n  }, [entityAttributes, jointActionList]);\n\n  useEffect(() => {\n    if (promotedEntity) {\n      if (!promotedEntity?.unityBaseSearchMethod?.apiMethodId) {\n        const searchMethodWarning = {\n          id: uuid(),\n          message: `${promotedEntity.entityName}'s Search method needs to be promoted`\n        };\n        setAlertWarnings &&\n          setAlertWarnings((prevState) => [...prevState, searchMethodWarning]);\n      }\n    }\n  }, [promotedEntity, setAlertWarnings]);\n\n  const searchMethodConfig = useMemo(() => {\n    return {\n      apiMethodId: promotedEntity?.unityBaseSearchMethod?.apiMethodId,\n      customSearchObject: filterElements\n    };\n  }, [promotedEntity?.unityBaseSearchMethod?.apiMethodId, filterElements]);\n\n  const gridFunctions = useMemo(() => {\n    return [\n      { name: 'openSavedViews' },\n      { name: 'agGridSizeColumnsToFit' },\n      { name: 'agGridAutoSizeColumns' },\n      { name: 'agGridResetColumns' },\n      { name: 'agGridHideShowColumns' }\n    ];\n  }, []);\n\n  return (\n    <SearchMethodUdpGrid\n      columnDefs={columnDefs}\n      searchMethodConfig={searchMethodConfig}\n      gridHeaderConfig={{\n        title: commonEntityName,\n        primaryActionButton: {\n          label: 'Add',\n          iconName: 'add',\n          onClick: onCreate\n        },\n        secondaryActionButtons: secondaryActionButtons\n      }}\n      gridId={GRID_ID}\n      entityName={commonEntityName}\n      gridOptions={{\n        pagination: true,\n        ...other\n      }}\n      gridApiCallback={gridApiCallback}\n      gridFunctions={gridFunctions}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/{EntityHeader-Buq_r4IE.js → EntityHeader-DOoeCEj3.js}

@@ -1,5 +1,5 @@
 import { FluentIcon } from "./FluentIcon-CB-ANF6C.js";
-import { IconRenderer } from "./IconRenderer-8w6JVRET.js";
+import { IconRenderer } from "./IconRenderer-DiwGfDul.js";
 import { AlertPill } from "./AggregateChip-EN9-abal.js";
 import { AvatarAlphabet } from "./AvatarAlphabet-BFwr2xyn.js";
 import { UdpAlertsContainer } from "./UdpAlertsContainer-COjS21Kf.js";
@@ -876,4 +876,4 @@ EntityHeader.propTypes = {
 
 //#endregion
 export { ChipAlphabet, EntityHeader };
-//# sourceMappingURL=EntityHeader-Buq_r4IE.js.map
+//# sourceMappingURL=EntityHeader-DOoeCEj3.js.map

package/dist/{EntityHeader-Buq_r4IE.js.map → EntityHeader-DOoeCEj3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"EntityHeader-Buq_r4IE.js","names":["useStyles","useStyles","useStyles","useStyles","useStyles","useStyles","useTheme","useStyles"],"sources":["../src/UI/dataDisplay/ChipAlphabet.jsx","../src/UI/dataDisplay/entityHeader/ui/EntityHeaderContainer.jsx","../src/UI/dataDisplay/entityHeader/ui/EntityHeaderList.jsx","../src/UI/dataDisplay/entityHeader/ui/EntityHeaderListItem.jsx","../src/UI/dataDisplay/entityHeader/ui/EntityHeaderStatList.jsx","../src/UI/dataDisplay/entityHeader/ui/EntityHeaderStatListItem.jsx","../src/UI/dataDisplay/entityHeader/ui/EntityHeaderSection.jsx","../src/UI/dataDisplay/entityHeader/functions/useElementWidth.js","../src/UI/dataDisplay/entityHeader/ui/EntityHeaderFlags.jsx","../src/UI/dataDisplay/entityHeader/EntityHeader.jsx"],"sourcesContent":["import React from 'react'\nimport { Chip, lighten } from '@material-ui/core'\nimport { AvatarAlphabet } from './AvatarAlphabet'\n\nexport const ChipAlphabet = ({\n  avatarCharacter,\n  label,\n  handleClick,\n  avatar\n}) => {\n  let letter = ''\n  const highlight = 0.8\n\n  switch (avatarCharacter) {\n    case 'A':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#FFB900', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'B':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#E74856', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'C':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#0078D7', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'D':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#0099BC', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'E':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#7A7574', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'F':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#0078D7', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'G':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#FF8C00', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'H':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#E81123', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'I':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#0063B1', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n        />\n      )\n      break\n    case 'J':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#2D7D9A', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'K':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#5D5A58', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'L':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#4C4A48', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'M':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#F7630C', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'N':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#EA005E', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'O':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#8E8CD8', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'P':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#00B7C3', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'Q':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#68768A', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'R':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#69797E', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'S':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#CA5010', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'T':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#C30052', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'U':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('FF4343', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'V':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#9A0089', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'W':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#10893E', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'X':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#567C73', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'Y':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#018574', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'Z':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#881798', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n\n    default:\n  }\n\n  return letter\n}\n","import React, { Children, cloneElement } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { makeStyles, Divider, darken, alpha } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n  root: props => ({\n    display: 'flex',\n    flexDirection: props.direction === 'column' ? 'column' : 'row',\n  }),\n  rootBgDark: props => ({\n    backgroundColor: darken(\n      props.color === 'primary'\n        ? theme.palette.primary.main\n        : theme.palette.secondary.main,\n      0.2\n    ),\n    color: theme.palette.getContrastText(\n      props.color === 'primary'\n        ? theme.palette.primary.main\n        : theme.palette.secondary.main\n    ),\n  }),\n  rootBgSoft: props => ({\n    backgroundColor: alpha(\n      props.color === 'primary'\n        ? theme.palette.primary.main\n        : theme.palette.secondary.main,\n      0.15\n    ),\n  }),\n  rootBgCustom: props => ({\n    backgroundColor: props.background,\n    color: props.color,\n  }),\n}));\n\nexport const EntityHeaderContainer = props => {\n  const { children, showSeperator, background } = props;\n  const arrayChildren = Children.toArray(children);\n  const classes = useStyles(props);\n\n  return (\n    <div\n      className={clsx({\n        [classes.root]: true, // always applies\n        [classes.rootBg]: background === 'light' || !background, // if background = 'light'\n        [classes.rootBgDark]: background === 'dark', // if background = 'dark'\n        [classes.rootBgSoft]: background === 'soft', // if background = 'soft'\n        [classes.rootBgCustom]:\n          background &&\n          background !== 'light' &&\n          background !== 'dark' &&\n          background !== 'soft',\n      })}\n    >\n      {Children.map(arrayChildren, (child, index) => {\n        const isLast = index === arrayChildren.length - 1;\n        return (\n          <>\n            {cloneElement(child, {\n              isLast,\n            })}\n            {!isLast && showSeperator && (\n              <Divider orientation=\"vertical\" flexItem />\n            )}\n          </>\n        );\n      })}\n    </div>\n  );\n};\n\nEntityHeaderContainer.propTypes = {\n  children: PropTypes.node.isRequired,\n  showSeperator: PropTypes.bool,\n  background: PropTypes.oneOf(['light', 'dark', 'soft']),\n  direction: PropTypes.oneOf(['row', 'column']),\n  color: PropTypes.oneOf(['primary', 'secondary']),\n};\n\nEntityHeaderContainer.defaultProps = {\n  showSeperator: true,\n  background: 'light',\n  direction: 'row',\n  color: 'primary',\n};\n","import React, { Children, cloneElement } from 'react';\nimport clsx from 'clsx';\nimport { makeStyles, Divider } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    // listStyle: 'none',\n  },\n}));\n\nexport const EntityHeaderList = props => {\n  const { children, showSeperator = false } = props;\n  const arrayChildren = Children.toArray(children);\n  const classes = useStyles(props);\n\n  return (\n    <div\n      className={clsx({\n        [classes.root]: true,\n      })}\n    >\n      {Children.map(arrayChildren, (child, index) => {\n        const isLast = index === arrayChildren.length - 1;\n        return (\n          <>\n            {cloneElement(child, {\n              isLast,\n            })}\n            {!isLast && showSeperator && <Divider />}\n          </>\n        );\n      })}\n    </div>\n  );\n};\n","import React, { useState } from 'react';\nimport clsx from 'clsx';\nimport { Link, lighten, makeStyles, Typography } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex'\n  },\n  labelRoot: {\n    color: 'inherit',\n    marginRight: theme.spacing(0.5),\n    opacity: 0.6\n  },\n  valueRoot: {\n    color: 'inherit'\n    // fontWeight: theme.typography.fontWeightMedium,\n  },\n  link: {\n    color: 'inherit',\n    textDecoration: 'none',\n    '&:hover': {\n      textDecoration: 'underline'\n    }\n  }\n}));\n\nexport const EntityHeaderListItem = (props) => {\n  const {\n    label,\n    value,\n    link,\n    hideLabelSeperator = false,\n    disablePadding = false\n  } = props;\n  const classes = useStyles(props);\n\n  return (\n    <div\n      className={clsx({\n        [classes.root]: true,\n        [classes.rootPadding]: !disablePadding\n      })}\n    >\n      {!!label && (\n        <Typography variant={'body1'} className={classes.labelRoot}>\n          {label}\n          {!hideLabelSeperator && ':'}\n        </Typography>\n      )}\n      {!!value && (\n        <Typography\n          variant={'body1'}\n          className={clsx({\n            [classes.valueRoot]: true,\n            [classes.valueFontWeigth]: true\n          })}\n        >\n          {link ? (\n            <Link\n              href={link}\n              className={classes.link}\n              target='_blank'\n            >\n              {value}\n            </Link>\n          ) : (\n            value\n          )}\n        </Typography>\n      )}\n    </div>\n  );\n};\n","import React, { Children, cloneElement, useState } from 'react';\nimport clsx from 'clsx';\nimport { makeStyles, Typography, Divider } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    '& > *': {\n      marginLeft: 1,\n    },\n  },\n  rootFlexGrow: {\n    flexGrow: 1,\n  },\n}));\n\nexport const EntityHeaderStatList = props => {\n  const { children, showSeperator, flexGrow = false } = props;\n  const arrayChildren = Children.toArray(children);\n  const classes = useStyles(props);\n\n  return (\n    <div\n      className={clsx({\n        [classes.root]: true, //always applies\n        [classes.rootFlexGrow]: flexGrow,\n      })}\n    >\n      {Children.map(arrayChildren, (child, index) => {\n        const isLast = index === arrayChildren.length - 1;\n        return (\n          <>\n            {cloneElement(child, {\n              isLast,\n            })}\n            {!isLast && showSeperator && (\n              <Divider orientation=\"vertical\" flexItem />\n            )}\n          </>\n        );\n      })}\n    </div>\n  );\n};\n","import React from 'react';\nimport clsx from 'clsx';\nimport { alpha, Avatar, makeStyles, Typography } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    // padding: theme.spacing(1),\n  },\n  rootFlexGrow: {\n    flexGrow: 1,\n  },\n  rootBlock: props => ({\n    justifyContent: 'center',\n    padding: theme.spacing(1),\n  }),\n  rootBlockDefault: props => ({\n    backgroundColor: alpha(\n      theme.palette.type === 'dark'\n        ? theme.palette.common.black\n        : theme.palette.common.white,\n      0.25\n    ),\n  }),\n  rootBlockError: props => ({\n    backgroundColor: alpha(\n      theme.palette.error.main,\n      theme.palette.type === 'dark' ? 0.7 : 0.1\n    ),\n  }),\n  rootBlockSuccess: props => ({\n    backgroundColor: alpha(\n      theme.palette.success.main,\n      theme.palette.type === 'dark' ? 0.2 : 0.3\n    ),\n  }),\n  labelRoot: {\n    color: 'inherit',\n    opacity: 0.6,\n  },\n  rootLabelError: (props) => ({\n    color: theme.palette.error.main\n  }),\n  rootLabelSuccess: (props) => ({\n    color: theme.palette.success.main\n  }),\n  valueRoot: {\n    color: 'inherit',\n    fontWeight: theme.typography.fontWeightMedium,\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  beforeValue: {\n    marginRight: theme.spacing(0.3),\n  },\n  afterValue: {},\n  icon: {\n    marginRight: theme.spacing(1),\n  },\n  iconAvatar: {\n    backgroundColor: 'transparent',\n  },\n  content: props => ({\n    display: 'flex',\n    flexDirection: 'column',\n    // alignItems: 'center',\n    alignItems: props.icon ? 'left' : 'center',\n  }),\n}));\n\nexport const EntityHeaderStatListItem = props => {\n  const {\n    label = 'Label',\n    value = 'Value',\n    beforeValue,\n    afterValue,\n    flexGrow = false,\n    labelColor,\n    icon,\n  } = props;\n\n  const classes = useStyles(props);\n\n  return (\n    <div\n      className={clsx({\n        [classes.root]: true,\n        [classes.rootFlexGrow]: flexGrow,\n        [classes.rootBlock]: true,\n        // [classes.rootBlockDefault]: !labelColor,\n        // [classes.rootBlockError]: labelColor === 'error',\n        // [classes.rootBlockSuccess]: labelColor === 'success',\n      })}\n    >\n      {icon && (\n        <div className={classes.icon}>\n          <Avatar className={classes.iconAvatar}>{icon}</Avatar>\n        </div>\n      )}\n      <div className={classes.content}>\n        {!!value && (\n          <div\n            className={clsx({\n              [classes.valueRoot]: true,\n            })}\n          >\n            {beforeValue && (\n              <Typography variant={'body1'} className={classes.beforeValue}>\n                {beforeValue}\n              </Typography>\n            )}\n            <Typography\n              variant={'h5'}\n              className={clsx({\n                [classes.rootLabelError]: labelColor === 'error',\n                [classes.rootLabelSuccess]: labelColor === 'success'\n              })}\n            >\n              {value}\n            </Typography>\n            {afterValue && (\n              <Typography variant={'body1'} className={classes.afterValue}>\n                {afterValue}\n              </Typography>\n            )}\n          </div>\n        )}\n        {!!label && (\n          <Typography\n            variant={'subtitle3'}\n            className={classes.labelRoot}\n            component=\"div\"\n          >\n            {label}\n          </Typography>\n        )}\n      </div>\n    </div>\n  );\n};\n","import React from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex'\n  },\n  rootFlexGrow: {\n    flexGrow: 1\n  },\n  rootFlexAlignStart: {\n    alignItems: 'flex-start'\n  },\n  rootFlexAlignCenter: {\n    alignItems: 'center'\n  },\n  rootFlexAlignEnd: {\n    alignItems: 'flex-end'\n  },\n  rootFlexAlignStretch: {\n    alignItems: 'stretch'\n  },\n  rootGutter: {\n    paddingLeft: theme.spacing(2),\n    paddingRight: theme.spacing(2)\n  },\n  rootPadding: {\n    paddingTop: theme.spacing(1),\n    paddingBottom: theme.spacing(1)\n  },\n  rootFlexJustifyStart: {\n    justifyContent: 'flex-start'\n  },\n  rootFlexJustifyEnd: {\n    justifyContent: 'flex-end'\n  }\n}));\n\nexport const EntityHeaderSection = (props) => {\n  const {\n    children,\n    disableGutter,\n    disablePadding,\n    flexGrow,\n    justifyContent,\n    alignItems\n  } = props;\n  const classes = useStyles(props);\n\n  return (\n    <div\n      className={clsx({\n        [classes.root]: true, //always applies\n        [classes.rootGutter]: !disableGutter,\n        [classes.rootPadding]: !disablePadding,\n        [classes.rootFlexGrow]: flexGrow,\n        [classes.rootFlexJustifyStart]: justifyContent === 'start',\n        [classes.rootFlexJustifyEnd]: justifyContent === 'end',\n        [classes.rootFlexAlignStart]: alignItems === 'start',\n        [classes.rootFlexAlignCenter]: alignItems === 'center',\n        [classes.rootFlexAlignEnd]: alignItems === 'end',\n        [classes.rootFlexAlignStretch]: alignItems === 'stretch'\n      })}\n    >\n      {children}\n    </div>\n  );\n};\n\nEntityHeaderSection.propTypes = {\n  children: PropTypes.node.isRequired,\n  disableGutter: PropTypes.bool,\n  disablePadding: PropTypes.bool,\n  flexGrow: PropTypes.bool,\n  justifyContent: PropTypes.oneOf(['start', 'end']),\n  alignItems: PropTypes.oneOf(['start', 'center', 'end', 'stretch'])\n};\n\nEntityHeaderSection.defaultProps = {\n  disableGutter: false,\n  disablePadding: false,\n  flexGrow: false\n};\n","import { useTheme } from '@material-ui/core/styles';\nimport { useLayoutEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\n\n/**\n * Custom hook that returns the current breakpoint of a provided element's width and helpers to compare against breakpoints.\n * @param {any} ref - The ref object whose current element will be observed for width changes.\n * @returns {{\n *   currentBreakpoint: string | null,\n *   isBreakpointUp: (breakpoint: string) => boolean,\n *   isBreakpointDown: (breakpoint: string) => boolean,\n * }}\n */\nfunction useElementWidth(ref) {\n  const theme = useTheme();\n  const [width, setWidth] = useState(null);\n\n  useLayoutEffect(() => {\n    const resizeObserver = new ResizeObserver(entries => {\n      for (let entry of entries) {\n        if (entry.target === ref.current) {\n          setWidth(entry.contentRect.width);\n        }\n      }\n    });\n\n    resizeObserver.observe(ref.current);\n\n    return () => {\n      resizeObserver.unobserve(ref.current);\n    };\n  }, [ref]);\n\n  const currentBreakpoint =\n    width !== null\n      ? Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {\n          if (width >= theme.breakpoints.values[breakpoint]) {\n            return breakpoint;\n          }\n          return acc;\n        }, null)\n      : null;\n\n  const isBreakpointUp = breakpoint => {\n    const breakpoints = Object.keys(theme.breakpoints.values);\n    const index = breakpoints.indexOf(breakpoint);\n    const currentIndex = breakpoints.indexOf(currentBreakpoint);\n    return index <= currentIndex;\n  };\n\n  const isBreakpointDown = breakpoint => {\n    const breakpoints = Object.keys(theme.breakpoints.values);\n    const index = breakpoints.indexOf(breakpoint);\n    const currentIndex = breakpoints.indexOf(currentBreakpoint);\n    return index >= currentIndex;\n  };\n\n  return {\n    currentBreakpoint,\n    isBreakpointUp,\n    isBreakpointDown,\n  };\n}\n\nexport { useElementWidth };\n\nuseElementWidth.propTypes = {\n  ref: PropTypes.shape({\n    current: PropTypes.instanceOf(Element),\n  }),\n};\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { ChipAlphabet } from '../../ChipAlphabet';\nimport { FluentIcon } from '../../../../utilities/iconLibrary/FluentIcon';\nimport { FlagIcon } from '@fluentui/react-icons';\n\nconst useStyles = makeStyles(theme => ({\n  flagIcon: {\n    marginRight: theme.spacing(2),\n  },\n  chipContainer: {\n    marginBottom: theme.spacing(-1),\n    '& > *': {\n      marginRight: theme.spacing(1),\n      marginBottom: theme.spacing(1),\n    },\n  },\n}));\n\nfunction flagLetter(str) {\n  return str.charAt(0).toUpperCase();\n}\n\nexport const EntityHeaderFlags = ({ data = [], color = 'primary' }) => {\n  const classes = useStyles();\n\n  if (!data && data.length === 0) {\n    return;\n  }\n\n  return (\n    <>\n      <FluentIcon\n        size=\"small\"\n        component={FlagIcon}\n        className={classes.flagIcon}\n      />\n      <div className={classes.chipContainer}>\n        {data.map(item => {\n          return (\n            <ChipAlphabet\n              avatar\n              avatarCharacter={flagLetter(item.label)}\n              label={item.label}\n              handleClick={() => item.handleClick}\n            />\n          );\n        })}\n      </div>\n    </>\n  );\n};\n","import React, { useRef, useState, useEffect } from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { EntityHeaderContainer } from './ui/EntityHeaderContainer';\nimport { EntityHeaderList } from './ui/EntityHeaderList';\nimport { EntityHeaderListItem } from './ui/EntityHeaderListItem';\nimport { EntityHeaderStatList } from './ui/EntityHeaderStatList';\nimport { EntityHeaderStatListItem } from './ui/EntityHeaderStatListItem';\nimport { EntityHeaderSection } from './ui/EntityHeaderSection';\nimport { AlertPill } from './ui/AlertPill';\n\nimport { ChartIcon } from '@fluentui/react-icons';\nimport { useElementWidth } from './functions/useElementWidth';\nimport { IconRenderer } from '../../templates/ui/renderers/IconRenderer';\nimport { EntityHeaderFlags } from './ui/EntityHeaderFlags';\nimport PropTypes from 'prop-types';\nimport { UdpAlertsContainer } from '../../utilityDisplay/alerts/UdpAlertsContainer';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {}\n}));\n// https://univerus.atlassian.net/wiki/spaces/UDP/pages/2398257255/Entity+Header\nexport const EntityHeader = (props) => {\n  const {\n    sectionProps,\n    background,\n    color,\n    kpiProps,\n    hiddenSections,\n    chips,\n    alerts,\n    useUdpAlerts\n  } = props;\n\n  const classes = useStyles(props);\n  const { section1, section2, section3, section4 } = sectionProps;\n  const { kpi1, kpi2, kpi3, kpi4 } = kpiProps;\n\n  const componentRef = useRef();\n  const [compactSize, setCompactSize] = useState(true);\n\n  const { isBreakpointUp } = useElementWidth(componentRef);\n\n  useEffect(() => {\n    if (isBreakpointUp('md')) {\n      setCompactSize(false);\n      // setDividedList(false);\n    } else {\n      setCompactSize(true);\n      // setDividedList(true);\n    }\n  }, [isBreakpointUp]);\n\n  return (\n    <div ref={componentRef}>\n      {/* Container used when compactSize is true */}\n      {!!compactSize && (\n        <EntityHeaderContainer\n          direction='row'\n          showSeperator\n          background={background}\n          color={color}\n        >\n          <EntityHeaderSection flexGrow>\n            <EntityHeaderList>\n              {!section1?.hidden &&\n                section1?.values?.length &&\n                section1.values?.map((item) => (\n                  <EntityHeaderListItem\n                    label={item?.label}\n                    value={item?.value}\n                    link={item?.link}\n                  />\n                ))}\n\n              {!section2?.hidden &&\n                section2?.values?.length &&\n                section2.values?.map((item) => (\n                  <EntityHeaderListItem\n                    label={item?.label}\n                    value={item?.value}\n                    link={item?.link}\n                  />\n                ))}\n\n              {!section3?.hidden &&\n                section3?.values?.length &&\n                section3.values?.map((item) => (\n                  <EntityHeaderListItem\n                    label={item?.label}\n                    value={item?.value}\n                    link={item?.link}\n                  />\n                ))}\n\n              {!section4?.hidden &&\n                section4?.values?.length &&\n                section4.values?.map((item) => (\n                  <EntityHeaderListItem\n                    label={item?.label}\n                    value={item?.value}\n                    link={item?.link}\n                  />\n                ))}\n            </EntityHeaderList>\n          </EntityHeaderSection>\n        </EntityHeaderContainer>\n      )}\n      {/*  */}\n      <EntityHeaderContainer\n        direction='row'\n        showSeperator\n        background={background}\n        color={color}\n      >\n        {!compactSize && (\n          <>\n            {!section1?.hidden && (\n              <EntityHeaderSection flexGrow>\n                <EntityHeaderList>\n                  {!!section1?.values?.length &&\n                    section1.values.map((item) => (\n                      <EntityHeaderListItem\n                        label={item?.label}\n                        value={item?.value}\n                        link={item?.link}\n                      />\n                    ))}\n                </EntityHeaderList>\n              </EntityHeaderSection>\n            )}\n            {!section2?.hidden && (\n              <EntityHeaderSection flexGrow>\n                <EntityHeaderList>\n                  {!!section2?.values?.length &&\n                    section2.values.map((item) => (\n                      <EntityHeaderListItem\n                        label={item?.label}\n                        value={item?.value}\n                        link={item?.link}\n                      />\n                    ))}\n                </EntityHeaderList>\n              </EntityHeaderSection>\n            )}\n            {!section3?.hidden && (\n              <EntityHeaderSection flexGrow>\n                <EntityHeaderList>\n                  {!!section3?.values?.length &&\n                    section3.values.map((item) => (\n                      <EntityHeaderListItem\n                        label={item?.label}\n                        value={item?.value}\n                        link={item?.link}\n                      />\n                    ))}\n                </EntityHeaderList>\n              </EntityHeaderSection>\n            )}\n            {!section4?.hidden && (\n              <EntityHeaderSection flexGrow>\n                <EntityHeaderList>\n                  {!!section4?.values?.length &&\n                    section4.values.map((item) => (\n                      <EntityHeaderListItem\n                        label={item?.label}\n                        value={item?.value}\n                        link={item?.link}\n                      />\n                    ))}\n                </EntityHeaderList>\n              </EntityHeaderSection>\n            )}\n          </>\n        )}\n        {!kpiProps.hidden && (\n          <EntityHeaderSection flexGrow>\n            <EntityHeaderStatList flexGrow>\n              {!kpi1?.hidden && (\n                <EntityHeaderStatListItem\n                  value={kpi1?.value}\n                  label={kpi1?.label}\n                  labelColor={kpi1?.labelColor}\n                  flexGrow\n                  icon={\n                    <IconRenderer\n                      noBorder={true}\n                      removeContainer={true}\n                      value={{\n                        color: { hex: '#' + kpi1?.color },\n                        name: kpi1?.icon || 'ChartIcon'\n                      }}\n                    />\n                  }\n                />\n              )}\n              {!kpi2?.hidden && (\n                <EntityHeaderStatListItem\n                  value={kpi2?.value}\n                  label={kpi2?.label}\n                  labelColor={kpi2?.labelColor}\n                  flexGrow\n                  icon={\n                    <IconRenderer\n                      noBorder={true}\n                      removeContainer={true}\n                      value={{\n                        color: { hex: '#' + kpi2?.color },\n                        name: kpi2?.icon || 'ChartIcon'\n                      }}\n                    />\n                  }\n                />\n              )}\n              {!kpi3?.hidden && (\n                <EntityHeaderStatListItem\n                  value={kpi3?.value}\n                  label={kpi3?.label}\n                  labelColor={kpi3?.labelColor}\n                  flexGrow\n                  icon={\n                    <IconRenderer\n                      noBorder={true}\n                      removeContainer={true}\n                      value={{\n                        color: { hex: '#' + kpi3?.color },\n                        name: kpi3?.icon || 'ChartIcon'\n                      }}\n                    />\n                  }\n                />\n              )}\n              {!kpi4?.hidden && (\n                <EntityHeaderStatListItem\n                  value={kpi4?.value}\n                  label={kpi4?.label}\n                  labelColor={kpi4?.labelColor}\n                  flexGrow\n                  icon={\n                    <IconRenderer\n                      noBorder={true}\n                      removeContainer={true}\n                      value={{\n                        color: { hex: '#' + kpi4?.color },\n                        name: kpi4?.icon || 'ChartIcon'\n                      }}\n                    />\n                  }\n                />\n              )}\n            </EntityHeaderStatList>\n          </EntityHeaderSection>\n        )}\n      </EntityHeaderContainer>\n      {(!hiddenSections.chips || !hiddenSections.alert) && (\n        <EntityHeaderContainer\n          className={classes.root}\n          background={background}\n          color={color}\n        >\n          {!hiddenSections.chips && (\n            <EntityHeaderSection flexGrow alignItems={'center'}>\n              <EntityHeaderFlags\n                data={chips?.map((chip) => ({ label: chip }))}\n              />\n            </EntityHeaderSection>\n          )}\n          {/*  */}\n          <EntityHeaderSection flexGrow />\n          {!hiddenSections.alert && (\n            <EntityHeaderSection>\n              {/* <PehAlertPill\n            alertPillProps={{ errorLabel: '5', warningLabel: '2' }}\n          /> */}\n              {useUdpAlerts ? (\n                <UdpAlertsContainer />\n              ) : (\n                <AlertPill\n                  errorCount={alerts?.error}\n                  warningCount={alerts?.warning}\n                />\n              )}\n            </EntityHeaderSection>\n          )}\n        </EntityHeaderContainer>\n      )}\n    </div>\n  );\n};\n\nEntityHeader.propTypes = {\n  sectionProps: PropTypes.shape({\n    section1: PropTypes.shape({\n      hidden: PropTypes.bool,\n      values: PropTypes.arrayOf(\n        PropTypes.shape({\n          label: PropTypes.string,\n          value: PropTypes.string\n        })\n      )\n    }),\n    section2: PropTypes.shape({\n      hidden: PropTypes.bool,\n      values: PropTypes.arrayOf(\n        PropTypes.shape({\n          label: PropTypes.string,\n          value: PropTypes.string\n        })\n      )\n    }),\n    section3: PropTypes.shape({\n      hidden: PropTypes.bool,\n      values: PropTypes.arrayOf(\n        PropTypes.shape({\n          label: PropTypes.string,\n          value: PropTypes.string\n        })\n      )\n    })\n  }).isRequired,\n  background: PropTypes.string,\n  color: PropTypes.string,\n  kpiProps: PropTypes.shape({\n    hidden: PropTypes.bool,\n    kpi1: PropTypes.shape({\n      label: PropTypes.string,\n      value: PropTypes.string,\n      color: PropTypes.string,\n      icon: PropTypes.string,\n      hidden: PropTypes.bool\n    }),\n    kpi2: PropTypes.shape({\n      label: PropTypes.string,\n      value: PropTypes.string,\n      color: PropTypes.string,\n      icon: PropTypes.string,\n      hidden: PropTypes.bool\n    }),\n    kpi3: PropTypes.shape({\n      label: PropTypes.string,\n      value: PropTypes.string,\n      color: PropTypes.string,\n      icon: PropTypes.string,\n      hidden: PropTypes.bool\n    }),\n    kpi4: PropTypes.shape({\n      label: PropTypes.string,\n      value: PropTypes.string,\n      color: PropTypes.string,\n      icon: PropTypes.string,\n      hidden: PropTypes.bool\n    })\n  }).isRequired,\n  hiddenSections: PropTypes.shape({\n    alert: PropTypes.bool,\n    chips: PropTypes.bool\n  }),\n  chips: PropTypes.arrayOf(PropTypes.string),\n  alerts: PropTypes.shape({\n    warning: PropTypes.number,\n    error: PropTypes.number\n  })\n};\n"],"mappings":"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"}
+{"version":3,"file":"EntityHeader-DOoeCEj3.js","names":["useStyles","useStyles","useStyles","useStyles","useStyles","useStyles","useTheme","useStyles"],"sources":["../src/UI/dataDisplay/ChipAlphabet.jsx","../src/UI/dataDisplay/entityHeader/ui/EntityHeaderContainer.jsx","../src/UI/dataDisplay/entityHeader/ui/EntityHeaderList.jsx","../src/UI/dataDisplay/entityHeader/ui/EntityHeaderListItem.jsx","../src/UI/dataDisplay/entityHeader/ui/EntityHeaderStatList.jsx","../src/UI/dataDisplay/entityHeader/ui/EntityHeaderStatListItem.jsx","../src/UI/dataDisplay/entityHeader/ui/EntityHeaderSection.jsx","../src/UI/dataDisplay/entityHeader/functions/useElementWidth.js","../src/UI/dataDisplay/entityHeader/ui/EntityHeaderFlags.jsx","../src/UI/dataDisplay/entityHeader/EntityHeader.jsx"],"sourcesContent":["import React from 'react'\nimport { Chip, lighten } from '@material-ui/core'\nimport { AvatarAlphabet } from './AvatarAlphabet'\n\nexport const ChipAlphabet = ({\n  avatarCharacter,\n  label,\n  handleClick,\n  avatar\n}) => {\n  let letter = ''\n  const highlight = 0.8\n\n  switch (avatarCharacter) {\n    case 'A':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#FFB900', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'B':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#E74856', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'C':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#0078D7', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'D':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#0099BC', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'E':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#7A7574', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'F':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#0078D7', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'G':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#FF8C00', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'H':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#E81123', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'I':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#0063B1', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n        />\n      )\n      break\n    case 'J':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#2D7D9A', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'K':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#5D5A58', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'L':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#4C4A48', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'M':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#F7630C', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'N':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#EA005E', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'O':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#8E8CD8', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'P':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#00B7C3', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'Q':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#68768A', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'R':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#69797E', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'S':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#CA5010', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'T':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#C30052', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'U':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('FF4343', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'V':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#9A0089', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'W':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#10893E', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'X':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#567C73', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'Y':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#018574', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n    case 'Z':\n      letter = (\n        <Chip\n          style={{ backgroundColor: lighten('#881798', highlight) }}\n          label={label}\n          size='small'\n          avatar={\n            <AvatarAlphabet\n              size='small'\n              avatarCharacter={avatar && avatarCharacter}\n            />\n          }\n          onClick={handleClick}\n          clickable\n        />\n      )\n      break\n\n    default:\n  }\n\n  return letter\n}\n","import React, { Children, cloneElement } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { makeStyles, Divider, darken, alpha } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n  root: props => ({\n    display: 'flex',\n    flexDirection: props.direction === 'column' ? 'column' : 'row',\n  }),\n  rootBgDark: props => ({\n    backgroundColor: darken(\n      props.color === 'primary'\n        ? theme.palette.primary.main\n        : theme.palette.secondary.main,\n      0.2\n    ),\n    color: theme.palette.getContrastText(\n      props.color === 'primary'\n        ? theme.palette.primary.main\n        : theme.palette.secondary.main\n    ),\n  }),\n  rootBgSoft: props => ({\n    backgroundColor: alpha(\n      props.color === 'primary'\n        ? theme.palette.primary.main\n        : theme.palette.secondary.main,\n      0.15\n    ),\n  }),\n  rootBgCustom: props => ({\n    backgroundColor: props.background,\n    color: props.color,\n  }),\n}));\n\nexport const EntityHeaderContainer = props => {\n  const { children, showSeperator, background } = props;\n  const arrayChildren = Children.toArray(children);\n  const classes = useStyles(props);\n\n  return (\n    <div\n      className={clsx({\n        [classes.root]: true, // always applies\n        [classes.rootBg]: background === 'light' || !background, // if background = 'light'\n        [classes.rootBgDark]: background === 'dark', // if background = 'dark'\n        [classes.rootBgSoft]: background === 'soft', // if background = 'soft'\n        [classes.rootBgCustom]:\n          background &&\n          background !== 'light' &&\n          background !== 'dark' &&\n          background !== 'soft',\n      })}\n    >\n      {Children.map(arrayChildren, (child, index) => {\n        const isLast = index === arrayChildren.length - 1;\n        return (\n          <>\n            {cloneElement(child, {\n              isLast,\n            })}\n            {!isLast && showSeperator && (\n              <Divider orientation=\"vertical\" flexItem />\n            )}\n          </>\n        );\n      })}\n    </div>\n  );\n};\n\nEntityHeaderContainer.propTypes = {\n  children: PropTypes.node.isRequired,\n  showSeperator: PropTypes.bool,\n  background: PropTypes.oneOf(['light', 'dark', 'soft']),\n  direction: PropTypes.oneOf(['row', 'column']),\n  color: PropTypes.oneOf(['primary', 'secondary']),\n};\n\nEntityHeaderContainer.defaultProps = {\n  showSeperator: true,\n  background: 'light',\n  direction: 'row',\n  color: 'primary',\n};\n","import React, { Children, cloneElement } from 'react';\nimport clsx from 'clsx';\nimport { makeStyles, Divider } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    // listStyle: 'none',\n  },\n}));\n\nexport const EntityHeaderList = props => {\n  const { children, showSeperator = false } = props;\n  const arrayChildren = Children.toArray(children);\n  const classes = useStyles(props);\n\n  return (\n    <div\n      className={clsx({\n        [classes.root]: true,\n      })}\n    >\n      {Children.map(arrayChildren, (child, index) => {\n        const isLast = index === arrayChildren.length - 1;\n        return (\n          <>\n            {cloneElement(child, {\n              isLast,\n            })}\n            {!isLast && showSeperator && <Divider />}\n          </>\n        );\n      })}\n    </div>\n  );\n};\n","import React, { useState } from 'react';\nimport clsx from 'clsx';\nimport { Link, lighten, makeStyles, Typography } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex'\n  },\n  labelRoot: {\n    color: 'inherit',\n    marginRight: theme.spacing(0.5),\n    opacity: 0.6\n  },\n  valueRoot: {\n    color: 'inherit'\n    // fontWeight: theme.typography.fontWeightMedium,\n  },\n  link: {\n    color: 'inherit',\n    textDecoration: 'none',\n    '&:hover': {\n      textDecoration: 'underline'\n    }\n  }\n}));\n\nexport const EntityHeaderListItem = (props) => {\n  const {\n    label,\n    value,\n    link,\n    hideLabelSeperator = false,\n    disablePadding = false\n  } = props;\n  const classes = useStyles(props);\n\n  return (\n    <div\n      className={clsx({\n        [classes.root]: true,\n        [classes.rootPadding]: !disablePadding\n      })}\n    >\n      {!!label && (\n        <Typography variant={'body1'} className={classes.labelRoot}>\n          {label}\n          {!hideLabelSeperator && ':'}\n        </Typography>\n      )}\n      {!!value && (\n        <Typography\n          variant={'body1'}\n          className={clsx({\n            [classes.valueRoot]: true,\n            [classes.valueFontWeigth]: true\n          })}\n        >\n          {link ? (\n            <Link\n              href={link}\n              className={classes.link}\n              target='_blank'\n            >\n              {value}\n            </Link>\n          ) : (\n            value\n          )}\n        </Typography>\n      )}\n    </div>\n  );\n};\n","import React, { Children, cloneElement, useState } from 'react';\nimport clsx from 'clsx';\nimport { makeStyles, Typography, Divider } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    '& > *': {\n      marginLeft: 1,\n    },\n  },\n  rootFlexGrow: {\n    flexGrow: 1,\n  },\n}));\n\nexport const EntityHeaderStatList = props => {\n  const { children, showSeperator, flexGrow = false } = props;\n  const arrayChildren = Children.toArray(children);\n  const classes = useStyles(props);\n\n  return (\n    <div\n      className={clsx({\n        [classes.root]: true, //always applies\n        [classes.rootFlexGrow]: flexGrow,\n      })}\n    >\n      {Children.map(arrayChildren, (child, index) => {\n        const isLast = index === arrayChildren.length - 1;\n        return (\n          <>\n            {cloneElement(child, {\n              isLast,\n            })}\n            {!isLast && showSeperator && (\n              <Divider orientation=\"vertical\" flexItem />\n            )}\n          </>\n        );\n      })}\n    </div>\n  );\n};\n","import React from 'react';\nimport clsx from 'clsx';\nimport { alpha, Avatar, makeStyles, Typography } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    // padding: theme.spacing(1),\n  },\n  rootFlexGrow: {\n    flexGrow: 1,\n  },\n  rootBlock: props => ({\n    justifyContent: 'center',\n    padding: theme.spacing(1),\n  }),\n  rootBlockDefault: props => ({\n    backgroundColor: alpha(\n      theme.palette.type === 'dark'\n        ? theme.palette.common.black\n        : theme.palette.common.white,\n      0.25\n    ),\n  }),\n  rootBlockError: props => ({\n    backgroundColor: alpha(\n      theme.palette.error.main,\n      theme.palette.type === 'dark' ? 0.7 : 0.1\n    ),\n  }),\n  rootBlockSuccess: props => ({\n    backgroundColor: alpha(\n      theme.palette.success.main,\n      theme.palette.type === 'dark' ? 0.2 : 0.3\n    ),\n  }),\n  labelRoot: {\n    color: 'inherit',\n    opacity: 0.6,\n  },\n  rootLabelError: (props) => ({\n    color: theme.palette.error.main\n  }),\n  rootLabelSuccess: (props) => ({\n    color: theme.palette.success.main\n  }),\n  valueRoot: {\n    color: 'inherit',\n    fontWeight: theme.typography.fontWeightMedium,\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  beforeValue: {\n    marginRight: theme.spacing(0.3),\n  },\n  afterValue: {},\n  icon: {\n    marginRight: theme.spacing(1),\n  },\n  iconAvatar: {\n    backgroundColor: 'transparent',\n  },\n  content: props => ({\n    display: 'flex',\n    flexDirection: 'column',\n    // alignItems: 'center',\n    alignItems: props.icon ? 'left' : 'center',\n  }),\n}));\n\nexport const EntityHeaderStatListItem = props => {\n  const {\n    label = 'Label',\n    value = 'Value',\n    beforeValue,\n    afterValue,\n    flexGrow = false,\n    labelColor,\n    icon,\n  } = props;\n\n  const classes = useStyles(props);\n\n  return (\n    <div\n      className={clsx({\n        [classes.root]: true,\n        [classes.rootFlexGrow]: flexGrow,\n        [classes.rootBlock]: true,\n        // [classes.rootBlockDefault]: !labelColor,\n        // [classes.rootBlockError]: labelColor === 'error',\n        // [classes.rootBlockSuccess]: labelColor === 'success',\n      })}\n    >\n      {icon && (\n        <div className={classes.icon}>\n          <Avatar className={classes.iconAvatar}>{icon}</Avatar>\n        </div>\n      )}\n      <div className={classes.content}>\n        {!!value && (\n          <div\n            className={clsx({\n              [classes.valueRoot]: true,\n            })}\n          >\n            {beforeValue && (\n              <Typography variant={'body1'} className={classes.beforeValue}>\n                {beforeValue}\n              </Typography>\n            )}\n            <Typography\n              variant={'h5'}\n              className={clsx({\n                [classes.rootLabelError]: labelColor === 'error',\n                [classes.rootLabelSuccess]: labelColor === 'success'\n              })}\n            >\n              {value}\n            </Typography>\n            {afterValue && (\n              <Typography variant={'body1'} className={classes.afterValue}>\n                {afterValue}\n              </Typography>\n            )}\n          </div>\n        )}\n        {!!label && (\n          <Typography\n            variant={'subtitle3'}\n            className={classes.labelRoot}\n            component=\"div\"\n          >\n            {label}\n          </Typography>\n        )}\n      </div>\n    </div>\n  );\n};\n","import React from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex'\n  },\n  rootFlexGrow: {\n    flexGrow: 1\n  },\n  rootFlexAlignStart: {\n    alignItems: 'flex-start'\n  },\n  rootFlexAlignCenter: {\n    alignItems: 'center'\n  },\n  rootFlexAlignEnd: {\n    alignItems: 'flex-end'\n  },\n  rootFlexAlignStretch: {\n    alignItems: 'stretch'\n  },\n  rootGutter: {\n    paddingLeft: theme.spacing(2),\n    paddingRight: theme.spacing(2)\n  },\n  rootPadding: {\n    paddingTop: theme.spacing(1),\n    paddingBottom: theme.spacing(1)\n  },\n  rootFlexJustifyStart: {\n    justifyContent: 'flex-start'\n  },\n  rootFlexJustifyEnd: {\n    justifyContent: 'flex-end'\n  }\n}));\n\nexport const EntityHeaderSection = (props) => {\n  const {\n    children,\n    disableGutter,\n    disablePadding,\n    flexGrow,\n    justifyContent,\n    alignItems\n  } = props;\n  const classes = useStyles(props);\n\n  return (\n    <div\n      className={clsx({\n        [classes.root]: true, //always applies\n        [classes.rootGutter]: !disableGutter,\n        [classes.rootPadding]: !disablePadding,\n        [classes.rootFlexGrow]: flexGrow,\n        [classes.rootFlexJustifyStart]: justifyContent === 'start',\n        [classes.rootFlexJustifyEnd]: justifyContent === 'end',\n        [classes.rootFlexAlignStart]: alignItems === 'start',\n        [classes.rootFlexAlignCenter]: alignItems === 'center',\n        [classes.rootFlexAlignEnd]: alignItems === 'end',\n        [classes.rootFlexAlignStretch]: alignItems === 'stretch'\n      })}\n    >\n      {children}\n    </div>\n  );\n};\n\nEntityHeaderSection.propTypes = {\n  children: PropTypes.node.isRequired,\n  disableGutter: PropTypes.bool,\n  disablePadding: PropTypes.bool,\n  flexGrow: PropTypes.bool,\n  justifyContent: PropTypes.oneOf(['start', 'end']),\n  alignItems: PropTypes.oneOf(['start', 'center', 'end', 'stretch'])\n};\n\nEntityHeaderSection.defaultProps = {\n  disableGutter: false,\n  disablePadding: false,\n  flexGrow: false\n};\n","import { useTheme } from '@material-ui/core/styles';\nimport { useLayoutEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\n\n/**\n * Custom hook that returns the current breakpoint of a provided element's width and helpers to compare against breakpoints.\n * @param {any} ref - The ref object whose current element will be observed for width changes.\n * @returns {{\n *   currentBreakpoint: string | null,\n *   isBreakpointUp: (breakpoint: string) => boolean,\n *   isBreakpointDown: (breakpoint: string) => boolean,\n * }}\n */\nfunction useElementWidth(ref) {\n  const theme = useTheme();\n  const [width, setWidth] = useState(null);\n\n  useLayoutEffect(() => {\n    const resizeObserver = new ResizeObserver(entries => {\n      for (let entry of entries) {\n        if (entry.target === ref.current) {\n          setWidth(entry.contentRect.width);\n        }\n      }\n    });\n\n    resizeObserver.observe(ref.current);\n\n    return () => {\n      resizeObserver.unobserve(ref.current);\n    };\n  }, [ref]);\n\n  const currentBreakpoint =\n    width !== null\n      ? Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {\n          if (width >= theme.breakpoints.values[breakpoint]) {\n            return breakpoint;\n          }\n          return acc;\n        }, null)\n      : null;\n\n  const isBreakpointUp = breakpoint => {\n    const breakpoints = Object.keys(theme.breakpoints.values);\n    const index = breakpoints.indexOf(breakpoint);\n    const currentIndex = breakpoints.indexOf(currentBreakpoint);\n    return index <= currentIndex;\n  };\n\n  const isBreakpointDown = breakpoint => {\n    const breakpoints = Object.keys(theme.breakpoints.values);\n    const index = breakpoints.indexOf(breakpoint);\n    const currentIndex = breakpoints.indexOf(currentBreakpoint);\n    return index >= currentIndex;\n  };\n\n  return {\n    currentBreakpoint,\n    isBreakpointUp,\n    isBreakpointDown,\n  };\n}\n\nexport { useElementWidth };\n\nuseElementWidth.propTypes = {\n  ref: PropTypes.shape({\n    current: PropTypes.instanceOf(Element),\n  }),\n};\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { ChipAlphabet } from '../../ChipAlphabet';\nimport { FluentIcon } from '../../../../utilities/iconLibrary/FluentIcon';\nimport { FlagIcon } from '@fluentui/react-icons';\n\nconst useStyles = makeStyles(theme => ({\n  flagIcon: {\n    marginRight: theme.spacing(2),\n  },\n  chipContainer: {\n    marginBottom: theme.spacing(-1),\n    '& > *': {\n      marginRight: theme.spacing(1),\n      marginBottom: theme.spacing(1),\n    },\n  },\n}));\n\nfunction flagLetter(str) {\n  return str.charAt(0).toUpperCase();\n}\n\nexport const EntityHeaderFlags = ({ data = [], color = 'primary' }) => {\n  const classes = useStyles();\n\n  if (!data && data.length === 0) {\n    return;\n  }\n\n  return (\n    <>\n      <FluentIcon\n        size=\"small\"\n        component={FlagIcon}\n        className={classes.flagIcon}\n      />\n      <div className={classes.chipContainer}>\n        {data.map(item => {\n          return (\n            <ChipAlphabet\n              avatar\n              avatarCharacter={flagLetter(item.label)}\n              label={item.label}\n              handleClick={() => item.handleClick}\n            />\n          );\n        })}\n      </div>\n    </>\n  );\n};\n","import React, { useRef, useState, useEffect } from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { EntityHeaderContainer } from './ui/EntityHeaderContainer';\nimport { EntityHeaderList } from './ui/EntityHeaderList';\nimport { EntityHeaderListItem } from './ui/EntityHeaderListItem';\nimport { EntityHeaderStatList } from './ui/EntityHeaderStatList';\nimport { EntityHeaderStatListItem } from './ui/EntityHeaderStatListItem';\nimport { EntityHeaderSection } from './ui/EntityHeaderSection';\nimport { AlertPill } from './ui/AlertPill';\n\nimport { ChartIcon } from '@fluentui/react-icons';\nimport { useElementWidth } from './functions/useElementWidth';\nimport { IconRenderer } from '../../templates/ui/renderers/IconRenderer';\nimport { EntityHeaderFlags } from './ui/EntityHeaderFlags';\nimport PropTypes from 'prop-types';\nimport { UdpAlertsContainer } from '../../utilityDisplay/alerts/UdpAlertsContainer';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {}\n}));\n// https://univerus.atlassian.net/wiki/spaces/UDP/pages/2398257255/Entity+Header\nexport const EntityHeader = (props) => {\n  const {\n    sectionProps,\n    background,\n    color,\n    kpiProps,\n    hiddenSections,\n    chips,\n    alerts,\n    useUdpAlerts\n  } = props;\n\n  const classes = useStyles(props);\n  const { section1, section2, section3, section4 } = sectionProps;\n  const { kpi1, kpi2, kpi3, kpi4 } = kpiProps;\n\n  const componentRef = useRef();\n  const [compactSize, setCompactSize] = useState(true);\n\n  const { isBreakpointUp } = useElementWidth(componentRef);\n\n  useEffect(() => {\n    if (isBreakpointUp('md')) {\n      setCompactSize(false);\n      // setDividedList(false);\n    } else {\n      setCompactSize(true);\n      // setDividedList(true);\n    }\n  }, [isBreakpointUp]);\n\n  return (\n    <div ref={componentRef}>\n      {/* Container used when compactSize is true */}\n      {!!compactSize && (\n        <EntityHeaderContainer\n          direction='row'\n          showSeperator\n          background={background}\n          color={color}\n        >\n          <EntityHeaderSection flexGrow>\n            <EntityHeaderList>\n              {!section1?.hidden &&\n                section1?.values?.length &&\n                section1.values?.map((item) => (\n                  <EntityHeaderListItem\n                    label={item?.label}\n                    value={item?.value}\n                    link={item?.link}\n                  />\n                ))}\n\n              {!section2?.hidden &&\n                section2?.values?.length &&\n                section2.values?.map((item) => (\n                  <EntityHeaderListItem\n                    label={item?.label}\n                    value={item?.value}\n                    link={item?.link}\n                  />\n                ))}\n\n              {!section3?.hidden &&\n                section3?.values?.length &&\n                section3.values?.map((item) => (\n                  <EntityHeaderListItem\n                    label={item?.label}\n                    value={item?.value}\n                    link={item?.link}\n                  />\n                ))}\n\n              {!section4?.hidden &&\n                section4?.values?.length &&\n                section4.values?.map((item) => (\n                  <EntityHeaderListItem\n                    label={item?.label}\n                    value={item?.value}\n                    link={item?.link}\n                  />\n                ))}\n            </EntityHeaderList>\n          </EntityHeaderSection>\n        </EntityHeaderContainer>\n      )}\n      {/*  */}\n      <EntityHeaderContainer\n        direction='row'\n        showSeperator\n        background={background}\n        color={color}\n      >\n        {!compactSize && (\n          <>\n            {!section1?.hidden && (\n              <EntityHeaderSection flexGrow>\n                <EntityHeaderList>\n                  {!!section1?.values?.length &&\n                    section1.values.map((item) => (\n                      <EntityHeaderListItem\n                        label={item?.label}\n                        value={item?.value}\n                        link={item?.link}\n                      />\n                    ))}\n                </EntityHeaderList>\n              </EntityHeaderSection>\n            )}\n            {!section2?.hidden && (\n              <EntityHeaderSection flexGrow>\n                <EntityHeaderList>\n                  {!!section2?.values?.length &&\n                    section2.values.map((item) => (\n                      <EntityHeaderListItem\n                        label={item?.label}\n                        value={item?.value}\n                        link={item?.link}\n                      />\n                    ))}\n                </EntityHeaderList>\n              </EntityHeaderSection>\n            )}\n            {!section3?.hidden && (\n              <EntityHeaderSection flexGrow>\n                <EntityHeaderList>\n                  {!!section3?.values?.length &&\n                    section3.values.map((item) => (\n                      <EntityHeaderListItem\n                        label={item?.label}\n                        value={item?.value}\n                        link={item?.link}\n                      />\n                    ))}\n                </EntityHeaderList>\n              </EntityHeaderSection>\n            )}\n            {!section4?.hidden && (\n              <EntityHeaderSection flexGrow>\n                <EntityHeaderList>\n                  {!!section4?.values?.length &&\n                    section4.values.map((item) => (\n                      <EntityHeaderListItem\n                        label={item?.label}\n                        value={item?.value}\n                        link={item?.link}\n                      />\n                    ))}\n                </EntityHeaderList>\n              </EntityHeaderSection>\n            )}\n          </>\n        )}\n        {!kpiProps.hidden && (\n          <EntityHeaderSection flexGrow>\n            <EntityHeaderStatList flexGrow>\n              {!kpi1?.hidden && (\n                <EntityHeaderStatListItem\n                  value={kpi1?.value}\n                  label={kpi1?.label}\n                  labelColor={kpi1?.labelColor}\n                  flexGrow\n                  icon={\n                    <IconRenderer\n                      noBorder={true}\n                      removeContainer={true}\n                      value={{\n                        color: { hex: '#' + kpi1?.color },\n                        name: kpi1?.icon || 'ChartIcon'\n                      }}\n                    />\n                  }\n                />\n              )}\n              {!kpi2?.hidden && (\n                <EntityHeaderStatListItem\n                  value={kpi2?.value}\n                  label={kpi2?.label}\n                  labelColor={kpi2?.labelColor}\n                  flexGrow\n                  icon={\n                    <IconRenderer\n                      noBorder={true}\n                      removeContainer={true}\n                      value={{\n                        color: { hex: '#' + kpi2?.color },\n                        name: kpi2?.icon || 'ChartIcon'\n                      }}\n                    />\n                  }\n                />\n              )}\n              {!kpi3?.hidden && (\n                <EntityHeaderStatListItem\n                  value={kpi3?.value}\n                  label={kpi3?.label}\n                  labelColor={kpi3?.labelColor}\n                  flexGrow\n                  icon={\n                    <IconRenderer\n                      noBorder={true}\n                      removeContainer={true}\n                      value={{\n                        color: { hex: '#' + kpi3?.color },\n                        name: kpi3?.icon || 'ChartIcon'\n                      }}\n                    />\n                  }\n                />\n              )}\n              {!kpi4?.hidden && (\n                <EntityHeaderStatListItem\n                  value={kpi4?.value}\n                  label={kpi4?.label}\n                  labelColor={kpi4?.labelColor}\n                  flexGrow\n                  icon={\n                    <IconRenderer\n                      noBorder={true}\n                      removeContainer={true}\n                      value={{\n                        color: { hex: '#' + kpi4?.color },\n                        name: kpi4?.icon || 'ChartIcon'\n                      }}\n                    />\n                  }\n                />\n              )}\n            </EntityHeaderStatList>\n          </EntityHeaderSection>\n        )}\n      </EntityHeaderContainer>\n      {(!hiddenSections.chips || !hiddenSections.alert) && (\n        <EntityHeaderContainer\n          className={classes.root}\n          background={background}\n          color={color}\n        >\n          {!hiddenSections.chips && (\n            <EntityHeaderSection flexGrow alignItems={'center'}>\n              <EntityHeaderFlags\n                data={chips?.map((chip) => ({ label: chip }))}\n              />\n            </EntityHeaderSection>\n          )}\n          {/*  */}\n          <EntityHeaderSection flexGrow />\n          {!hiddenSections.alert && (\n            <EntityHeaderSection>\n              {/* <PehAlertPill\n            alertPillProps={{ errorLabel: '5', warningLabel: '2' }}\n          /> */}\n              {useUdpAlerts ? (\n                <UdpAlertsContainer />\n              ) : (\n                <AlertPill\n                  errorCount={alerts?.error}\n                  warningCount={alerts?.warning}\n                />\n              )}\n            </EntityHeaderSection>\n          )}\n        </EntityHeaderContainer>\n      )}\n    </div>\n  );\n};\n\nEntityHeader.propTypes = {\n  sectionProps: PropTypes.shape({\n    section1: PropTypes.shape({\n      hidden: PropTypes.bool,\n      values: PropTypes.arrayOf(\n        PropTypes.shape({\n          label: PropTypes.string,\n          value: PropTypes.string\n        })\n      )\n    }),\n    section2: PropTypes.shape({\n      hidden: PropTypes.bool,\n      values: PropTypes.arrayOf(\n        PropTypes.shape({\n          label: PropTypes.string,\n          value: PropTypes.string\n        })\n      )\n    }),\n    section3: PropTypes.shape({\n      hidden: PropTypes.bool,\n      values: PropTypes.arrayOf(\n        PropTypes.shape({\n          label: PropTypes.string,\n          value: PropTypes.string\n        })\n      )\n    })\n  }).isRequired,\n  background: PropTypes.string,\n  color: PropTypes.string,\n  kpiProps: PropTypes.shape({\n    hidden: PropTypes.bool,\n    kpi1: PropTypes.shape({\n      label: PropTypes.string,\n      value: PropTypes.string,\n      color: PropTypes.string,\n      icon: PropTypes.string,\n      hidden: PropTypes.bool\n    }),\n    kpi2: PropTypes.shape({\n      label: PropTypes.string,\n      value: PropTypes.string,\n      color: PropTypes.string,\n      icon: PropTypes.string,\n      hidden: PropTypes.bool\n    }),\n    kpi3: PropTypes.shape({\n      label: PropTypes.string,\n      value: PropTypes.string,\n      color: PropTypes.string,\n      icon: PropTypes.string,\n      hidden: PropTypes.bool\n    }),\n    kpi4: PropTypes.shape({\n      label: PropTypes.string,\n      value: PropTypes.string,\n      color: PropTypes.string,\n      icon: PropTypes.string,\n      hidden: PropTypes.bool\n    })\n  }).isRequired,\n  hiddenSections: PropTypes.shape({\n    alert: PropTypes.bool,\n    chips: PropTypes.bool\n  }),\n  chips: PropTypes.arrayOf(PropTypes.string),\n  alerts: PropTypes.shape({\n    warning: PropTypes.number,\n    error: PropTypes.number\n  })\n};\n"],"mappings":"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"}

package/dist/{FileViewer-C1eQoTDj.js → FileViewer-Bhubf4Uv.js}

@@ -1,5 +1,5 @@
 import { Typography as Typography$1 } from "./Typography-6jelcyoY.js";
-import { getIconFromName } from "./TreeUtilities-DVY-2md6.js";
+import { getIconFromName } from "./TreeUtilities-XLrXtUeL.js";
 import { SideSheet } from "./SideSheet-BhKZOd2G.js";
 import { AmbientCard } from "./AmbientCard-Cp-eNzrW.js";
 import { IconButtonWithTooltip } from "./IconButtonWithToolTip-DQacH9wQ.js";
@@ -543,4 +543,4 @@ const FileViewer = (props) => {
 
 //#endregion
 export { FileViewer, PDFViewer };
-//# sourceMappingURL=FileViewer-C1eQoTDj.js.map
+//# sourceMappingURL=FileViewer-Bhubf4Uv.js.map

package/dist/{FileViewer-C1eQoTDj.js.map → FileViewer-Bhubf4Uv.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FileViewer-C1eQoTDj.js","names":["useStyles","Typography","useStyles","PDFViewer: FC<PDFContainerProps>","numPages","ControlPanel","LinearProgress","useStyles","Typography","useStyles","defaultFieldMapping"],"sources":["../src/UI/fileViewer/pdfViewer/ControlPanel.tsx","../src/UI/fileViewer/pdfViewer/PDFViewer.tsx","../src/UI/fileViewer/utils/fileTypes.js","../src/UI/fileViewer/utils/fileUtils.js","../src/UI/fileViewer/imageSlider/ImageFooter.jsx","../src/UI/fileViewer/imageSlider/Image.jsx","../src/UI/fileViewer/imageSlider/ImageViewerSideSheet.jsx","../src/UI/fileViewer/imageSlider/ImageSlider.jsx","../src/UI/fileViewer/FileViewer.jsx"],"sourcesContent":["import React from 'react';\nimport { IconButton, makeStyles } from '@material-ui/core';\nimport FirstPageIcon from '@material-ui/icons/esm/FirstPage';\nimport NavigateBeforeIcon from '@material-ui/icons/esm/NavigateBefore';\nimport NavigateNextIcon from '@material-ui/icons/esm/NavigateNext';\nimport LastPageIcon from '@material-ui/icons/esm/LastPage';\nimport ZoomInIcon from '@material-ui/icons/esm/ZoomIn';\nimport ZoomOutIcon from '@material-ui/icons/esm/ZoomOut';\nimport CloudDownloadOutlinedIcon from '@material-ui/icons/esm/CloudDownloadOutlined';\nimport HighlightOffOutlinedIcon from '@material-ui/icons/esm/HighlightOffOutlined';\nimport { Typography } from '../../dataDisplay/typography/Typography';\nimport { useTranslation } from 'react-i18next';\n\nconst useStyles = makeStyles((theme) => ({\n  controlPanel: {\n    fontSize: '16px',\n    backgroundColor: theme.palette.background.paper,\n    borderRadius: '5px',\n    width: 'fit-content',\n    padding: theme.spacing(1),\n    margin: '8px auto',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '10px'\n  },\n  pageActions: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '10px'\n  },\n  pageNumber: {\n    display: 'flex',\n    gap: 5,\n    minWidth: '125px'\n  }\n}));\n\nconst ControlPanel = (props: any) => {\n  const {\n    pageNumber,\n    numPages,\n    setPageNumber,\n    scale,\n    setScale,\n    file,\n    closePDF,\n    onClickDownload\n  } = props;\n\n  const isFirstPage = pageNumber === 1;\n  const isLastPage = pageNumber === numPages;\n  const { t } = useTranslation();\n  const classes = useStyles();\n\n  const goToFirstPage = () => {\n    if (!isFirstPage) setPageNumber(1);\n  };\n  const goToPreviousPage = () => {\n    if (!isFirstPage) setPageNumber(pageNumber - 1);\n  };\n  const goToNextPage = () => {\n    if (!isLastPage) setPageNumber(pageNumber + 1);\n  };\n  const goToLastPage = () => {\n    if (!isLastPage) setPageNumber(numPages);\n  };\n\n  const onPageChange = (e: any) => {\n    const { value } = e.target;\n    setPageNumber(Number(value));\n  };\n\n  const isMinZoom = scale < 0.6;\n  const isMaxZoom = scale >= 2.0;\n\n  const zoomOut = () => {\n    if (!isMinZoom) setScale(scale - 0.1);\n  };\n\n  const zoomIn = () => {\n    if (!isMaxZoom) setScale(scale + 0.1);\n  };\n\n  return (\n    <div className={classes.controlPanel}>\n      <div className={classes.pageActions}>\n        <IconButton size='small' onClick={goToFirstPage} disabled={isFirstPage}>\n          <FirstPageIcon />\n        </IconButton>\n\n        <IconButton\n          size='small'\n          onClick={goToPreviousPage}\n          disabled={isFirstPage}\n        >\n          <NavigateBeforeIcon />\n        </IconButton>\n\n        <div>\n          <div className={classes.pageNumber}>\n            <Typography>{t('Page')} </Typography>\n            <input\n              name='pageNumber'\n              type='number'\n              min={1}\n              max={numPages || 1}\n              style={{\n                padding: 0,\n                paddingLeft: 1,\n                margin: 0,\n                textAlign: 'end'\n              }}\n              value={pageNumber}\n              onChange={onPageChange}\n            />{' '}\n            <Typography>of {numPages}</Typography>\n          </div>\n        </div>\n\n        <IconButton size='small' onClick={goToNextPage} disabled={isLastPage}>\n          <NavigateNextIcon />\n        </IconButton>\n\n        <IconButton size='small' onClick={goToLastPage} disabled={isLastPage}>\n          <LastPageIcon />\n        </IconButton>\n      </div>\n      <div className={classes.pageActions}>\n        <IconButton size='small' onClick={zoomOut} disabled={isMinZoom}>\n          <ZoomOutIcon />\n        </IconButton>\n\n        <Typography>{(scale * 100).toFixed()}%</Typography>\n\n        <IconButton size='small' onClick={zoomIn} disabled={isMaxZoom}>\n          <ZoomInIcon />\n        </IconButton>\n      </div>\n\n      <div>\n        <IconButton href={file} size='small' onClick={onClickDownload}>\n          <CloudDownloadOutlinedIcon />\n        </IconButton>\n      </div>\n\n      <div>\n        <IconButton size='small' onClick={closePDF}>\n          <HighlightOffOutlinedIcon />\n        </IconButton>\n      </div>\n    </div>\n  );\n};\n\nexport default ControlPanel;\n","import React, { FC, useEffect, useState } from 'react';\nimport { Document, Page, pdfjs } from 'react-pdf';\nimport ControlPanel from './ControlPanel';\nimport { LinearProgress } from '../../loading/LinearProgress';\nimport { makeStyles } from \"@material-ui/core\";\n\nconst useStyles = makeStyles((theme) => ({\n  pdfSection: (props: PDFContainerProps) => ({\n    minWidth: props?.minWidth,\n  }),\n  documentContainer: {\n    display: 'flex',\n    justifyContent: 'center',\n    width: '100%',\n    height: '100%',\n    overflowX: 'auto',\n    overflowY: 'hidden',\n  },\n  loadingBox: {\n    width: '100%',\n  },\n}));\n\ninterface PDFContainerProps {\n  isPDFOpen?: boolean;\n  fileUrl?: string;\n  blobPDF?: Blob;\n  closePDF?: () => void;\n  onClickDownload?: () => void;\n  minWidth?: number | string;\n}\n\nexport const PDFViewer: FC<PDFContainerProps> = ({\n  isPDFOpen = true,\n  fileUrl,\n  blobPDF,\n  closePDF,\n  onClickDownload,\n  minWidth\n}) => {\n  const [scale, setScale] = useState(1.0);\n  const [numPages, setNumPages] = useState(null);\n  const [pageNumber, setPageNumber] = useState(1);\n  const classes = useStyles({minWidth});\n\n  useEffect(() => {\n    pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;\n  });\n\n  function onDocumentLoadSuccess({ numPages }: any) {\n    setNumPages(numPages);\n  }\n\n  return (\n    <div>\n    {isPDFOpen && (\n      <div id='pdf-section' className={classes.pdfSection}>\n        <ControlPanel\n          scale={scale}\n          setScale={setScale}\n          numPages={numPages}\n          pageNumber={pageNumber}\n          setPageNumber={setPageNumber}\n          file={fileUrl ?? `data:application/pdf;base64,${blobPDF}`}\n          closePDF={closePDF}\n          onClickDownload={onClickDownload}\n        />\n        <div className={classes.documentContainer}>\n          <Document\n            file={fileUrl ?? `data:application/pdf;base64,${blobPDF}`}\n            onLoadSuccess={onDocumentLoadSuccess}\n          >\n            <Page\n              pageNumber={pageNumber}\n              scale={scale}\n              loading={\n                <div className={classes.loadingBox}>\n                  <LinearProgress />\n                </div>\n              }\n            />\n          </Document>\n        </div>\n      </div>\n    )}\n  </div>\n  );\n};\n","export const imageExtension = [\n  'png',\n  'jpeg',\n  'jpg',\n  'jpe',\n  'jif',\n  'jfif',\n  'jfi',\n  'gif',\n  'raw',\n  'svg',\n  'ttif',\n  'tif',\n  'webp',\n  'arw',\n  'sr2',\n  'nrw',\n  'k25',\n  'bmp',\n  'dib',\n  'heif',\n  'heic',\n  'ind',\n  'indd',\n  'indt',\n  'jp2',\n  'j2k',\n  'jpf',\n  'jpm',\n  'mj2',\n  'svgz',\n  'ai',\n  'eps',\n];\n","import { imageExtension } from './fileTypes';\n\nexport const handleDownloadFile = (fileUrl, fileName) => {\n  const a = document.createElement('a');\n  a.style.display = 'none';\n  a.href = fileUrl;\n  a.download = fileName;\n  document.body.appendChild(a);\n  a.click();\n  window.URL.revokeObjectURL(fileUrl);\n};\n\nexport const validateFilesImageType = (files = [], fileExtensionField) => {\n  let type = \"image\";\n  files.forEach(file => {\n    if (!imageExtension.includes(file?.[fileExtensionField])) {\n      type = 'invalid';\n      return;\n    }\n  });\n  return type;\n};\n","/* eslint-disable react/jsx-no-useless-fragment */\nimport { makeStyles } from '@material-ui/core';\nimport React, { useMemo } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Typography } from '../../dataDisplay/typography/Typography';\nimport { IconButtonWithTooltip } from '../../inputs/buttons/IconButtonWithToolTip';\nimport { getIconFromName } from '../../../utilities/tree/TreeUtilities';\n\nconst useStyles = makeStyles(theme => ({\n  secondaryText: {\n    color: theme.palette.text.secondary,\n  },\n  description: {\n    margin: theme.spacing(2),\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(1),\n  },\n  pageAction: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n  },\n}));\n\nexport const ImageFooter = props => {\n  const {\n    images,\n    currentImageObj,\n    hidePrimaryText,\n    hideSecondaryText,\n    handleViewImage,\n    currentImageIndex,\n  } = props;\n  const classes = useStyles();\n  const { t } = useTranslation();\n\n  const showItem = useMemo(() => {\n    const showPrimaryText = !hidePrimaryText && currentImageObj?.primaryText;\n    const showSecondaryText =\n      !hideSecondaryText && currentImageObj?.secondaryText;\n    const showPageAction = images?.length > 1;\n    return {\n      footer: showPageAction || showPrimaryText || showSecondaryText,\n      primaryText: showPrimaryText,\n      secondaryText: showSecondaryText,\n      pageAction: showPageAction,\n    };\n  }, [currentImageObj, hidePrimaryText, hideSecondaryText, images]);\n\n  return (\n    <>\n      {showItem?.footer && (\n        <div className={classes.description}>\n          {showItem?.primaryText && (\n            <Typography variant=\"h6\">{currentImageObj?.primaryText}</Typography>\n          )}\n\n          {showItem?.secondaryText && (\n            <Typography variant=\"subtitle1\" className={classes.secondaryText}>\n              {currentImageObj?.secondaryText}\n            </Typography>\n          )}\n          {showItem?.pageAction && (\n            <div className={classes.pageAction}>\n              <IconButtonWithTooltip\n                icon={getIconFromName('ChevronLeft')}\n                title={t('Previous')}\n                disabled={currentImageIndex == 0}\n                onClick={() => {\n                  handleViewImage(true);\n                }}\n                id=\"udpRecord-ImageSlider-PreviousBtn\"\n                udprecordid=\"udpRecord-ImageSlider-PreviousBtn\"\n              />\n\n              <div>\n                <Typography>\n                  {currentImageIndex + 1} {t('of')} {images?.length ?? 0}\n                </Typography>\n              </div>\n              <IconButtonWithTooltip\n                icon={getIconFromName('ChevronRight')}\n                title={t('Next')}\n                disabled={currentImageIndex === images?.length - 1}\n                onClick={() => {\n                  handleViewImage();\n                }}\n                id=\"udpRecord-ImageSlider-NextBtn\"\n                udprecordid=\"udpRecord-ImageSlider-NextBtn\"\n              />\n            </div>\n          )}\n        </div>\n      )}\n    </>\n  );\n};\n","import { makeStyles } from '@material-ui/core';\nimport React from 'react';\nimport { ImageFooter } from './ImageFooter';\n\nconst useStyles = makeStyles(theme => ({\n  imageWrapper: {\n    flex: '1 1 auto',\n    overflow: 'hidden',\n    position: 'relative',\n    margin: theme.spacing(2)\n  },\n  image: {\n    objectFit: 'contain',\n    width: '100%',\n    height: '100%',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n  },\n  cardContent: {\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'hidden',\n    height: '100%',\n    background: theme.palette.background.paper,\n  },\n}));\n\nexport const Image = props => {\n  const { imageObj, hidePrimaryText, hideSecondaryText } = props;\n  const classes = useStyles();\n\n  return (\n    <div className={classes.cardContent}>\n      <div className={classes.imageWrapper}>\n        <img\n          src={imageObj?.filePath}\n          loading=\"lazy\"\n          alt={`${imageObj?.fileName}`}\n          className={classes.image}\n        />\n      </div>\n      <ImageFooter\n        currentImageObj={imageObj}\n        hidePrimaryText={hidePrimaryText}\n        hideSecondaryText={hideSecondaryText}\n      />\n    </div>\n  );\n};\n","import React, { useCallback } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { handleDownloadFile } from '../utils/fileUtils';\nimport { Image } from './Image';\nimport { SideSheet } from '../../surfaces/SideSheet';\n\nexport const ImageViewerSideSheet = (props) => {\n  const {\n    title,\n    width,\n    imageObj,\n    open,\n    onClose,\n    hideDownload,\n    hidePrimaryText,\n    hideSecondaryText\n  } = props;\n  const { t } = useTranslation();\n\n  const handleDownloadImage = useCallback(() => {\n    handleDownloadFile(imageObj?.filePath, imageObj?.fileName);\n  }, [imageObj]);\n\n  return (\n    <SideSheet\n      title={title ?? t('Image Viewer')}\n      buttonLabel={hideDownload ? null : t('Download')}\n      width={width ?? '90vw'}\n      onSubmit={handleDownloadImage}\n      open={open}\n      onClose={onClose}\n      contentHeight='100%'\n    >\n      <Image\n        imageObj={imageObj}\n        hidePrimaryText={hidePrimaryText}\n        hideSecondaryText={hideSecondaryText}\n      />\n    </SideSheet>\n  );\n};\n","import { Dialog, makeStyles } from '@material-ui/core';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { ImageViewerSideSheet } from './ImageViewerSideSheet';\nimport { Image } from './Image';\nimport { ImageFooter } from './ImageFooter';\nimport { AmbientCard } from '../../surfaces/cards/AmbientCard';\nimport { IconButtonWithTooltip } from '../../inputs/buttons/IconButtonWithToolTip';\nimport { getIconFromName } from '../../../utilities/tree/TreeUtilities';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    backgroundColor: theme.palette.background.paper,\n  },\n  imagesWrapper: {\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    overflow: 'hidden',\n    alignItems: 'center',\n  },\n  imageSection: {\n    width: '100%',\n    height: '100%',\n  },\n  image: {\n    objectFit: 'contain',\n    display: 'block',\n    flexShrink: 0,\n    flexGrow: 0,\n    transition: 'translate 300ms ease-in-out',\n  },\n  openSideSheetIcon: {\n    display: 'block',\n    position: 'absolute',\n    top: props => (props?.title ? 64 : 8),\n    right: 8,\n    zIndex: 3,\n    backgroundColor: theme.palette.background.paper,\n  },\n  dialogContent: {\n    overflow: 'hidden',\n    width: '100vw',\n    height: '100vh',\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  closeDialog: {\n    margin: theme.spacing(1),\n  },\n  dialogImageSection: {\n    flex: 2,\n    height: '100%',\n  },\n}));\n\nconst defaultFieldMapping = {\n  filePath: 'filePath',\n  fileName: 'fileName',\n  primaryText: 'primaryText',\n  secondaryText: 'secondaryText',\n};\n\nexport const ImageSlider = props => {\n  const {\n    title,\n    images,\n    fieldMapping = defaultFieldMapping,\n    sideSheetTitle,\n    sideSheetWidth,\n    hideDownload,\n    hidePrimaryText,\n    hideSecondaryText,\n    hidePrimaryTextInExpandMode,\n    hideSecondaryTextInExpandMode,\n    expandInSideSheet = true,\n  } = props;\n  const classes = useStyles(props);\n  const { t } = useTranslation();\n  const [currentImageIndex, setCurrentImageIndex] = useState(0);\n  const [openSideSheet, setOpenSideSheet] = useState(false);\n\n  const handleViewImage = useCallback((previous = false) => {\n    if (previous) {\n      setCurrentImageIndex(prev => prev - 1);\n    } else {\n      setCurrentImageIndex(prev => prev + 1);\n    }\n  }, []);\n\n  const handleExpandImage = useCallback(() => {\n    setOpenSideSheet(true);\n  }, []);\n\n  const currentImageObj = useMemo(() => {\n    const imgObj = images?.[currentImageIndex];\n    if (!imgObj) return {};\n\n    return {\n      filePath: imgObj[fieldMapping?.filePath],\n      fileName: imgObj[fieldMapping?.fileName],\n      primaryText: imgObj[fieldMapping?.primaryText],\n      secondaryText: imgObj[fieldMapping?.secondaryText],\n    };\n  }, [currentImageIndex, fieldMapping, images]);\n\n  return (\n    <AmbientCard\n      fullWidth\n      title={title}\n      removePadding\n      lastChildBottomPadding=\"0px\"\n      removeTopLayoutUnit\n    >\n      <div className={classes.imagesWrapper}>\n        {images?.map(image => (\n          <img\n            src={image?.[fieldMapping?.filePath]}\n            alt={`${image?.[fieldMapping?.fileName]}`}\n            loading=\"lazy\"\n            width=\"100%\"\n            height=\"auto\"\n            className={classes.image}\n            style={{ translate: `${-100 * currentImageIndex}%` }}\n          />\n        ))}\n      </div>\n      <IconButtonWithTooltip\n        icon={getIconFromName('MiniExpand')}\n        title={t('Expand Image')}\n        onClick={handleExpandImage}\n        id=\"udpRecord-ImageSlider-ExpandBtn\"\n        udprecordid=\"udpRecord-ImageSlider-ExpandBtn\"\n        className={classes.openSideSheetIcon}\n      />\n      <ImageFooter\n        images={images}\n        currentImageObj={currentImageObj}\n        hidePrimaryText={hidePrimaryText}\n        hideSecondaryText={hideSecondaryText}\n        handleViewImage={handleViewImage}\n        currentImageIndex={currentImageIndex}\n      />\n\n      {expandInSideSheet ? (\n        <ImageViewerSideSheet\n          title={sideSheetTitle}\n          open={openSideSheet}\n          onClose={() => {\n            setOpenSideSheet(false);\n          }}\n          imageObj={currentImageObj}\n          width={sideSheetWidth}\n          hideDownload={hideDownload}\n          hidePrimaryText={hidePrimaryTextInExpandMode}\n          hideSecondaryText={hideSecondaryTextInExpandMode}\n        />\n      ) : (\n        <Dialog\n          onClose={() => {\n            setOpenSideSheet(false);\n          }}\n          open={openSideSheet}\n          fullScreen\n        >\n          <div className={classes.dialogContent}>\n            <div className={classes.closeDialog}>\n              <IconButtonWithTooltip\n                icon={getIconFromName('Cancel')}\n                title={t('Close')}\n                onClick={() => {\n                  setOpenSideSheet(false);\n                }}\n                id=\"udpRecord-ImageSlider-PreviousBtn\"\n                udprecordid=\"udpRecord-ImageSlider-PreviousBtn\"\n              />\n            </div>\n            <div className={classes.dialogImageSection}>\n              <Image\n                imageObj={currentImageObj}\n                hidePrimaryText={hidePrimaryTextInExpandMode}\n                hideSecondaryText={hideSecondaryTextInExpandMode}\n              />\n            </div>\n          </div>\n        </Dialog>\n      )}\n    </AmbientCard>\n  );\n};\n","/* eslint-disable react/jsx-no-useless-fragment */\nimport React, { useMemo } from 'react';\nimport { PDFViewer } from './pdfViewer/PDFViewer';\nimport { ImageSlider } from './imageSlider/ImageSlider';\nimport { validateFilesImageType } from './utils/fileUtils';\nimport { useTranslation } from 'react-i18next';\nimport { AmbientAlert } from '../feedback/AmbientAlert';\n\nconst defaultFieldMapping = {\n  filePath: 'filePath',\n  blobFile: 'blobFile',\n  fileName: 'fileName',\n  fileExtension: 'fileExtension',\n  primaryText: 'primaryText',\n  secondaryText: 'secondaryText',\n};\n\nexport const FileViewer = props => {\n  const {\n    data,\n    fieldMapping = defaultFieldMapping,\n    acceptedFileExtensions,\n    ...otherProps\n  } = props;\n  const { t } = useTranslation();\n\n  //filter data\n  const filteredData = useMemo(() => {\n    if (!acceptedFileExtensions || acceptedFileExtensions?.length === 0)\n      return data;\n    if (data instanceof Array && data?.length > 0) {\n      return data?.filter(item =>\n        acceptedFileExtensions?.includes(item?.[fieldMapping?.fileExtension])\n      );\n    } else {\n      return acceptedFileExtensions?.includes(\n        data?.[fieldMapping?.fileExtension]\n      )\n        ? data\n        : null;\n    }\n  }, [acceptedFileExtensions, data, fieldMapping]);\n\n  // check if the data is an array. If yes, currently only image viewer accept this list,\n  // we need to validate if all the file in the list is image\n  const fileType = useMemo(() => {\n    if (filteredData instanceof Array) {\n      const type = validateFilesImageType(\n        filteredData,\n        fieldMapping?.fileExtension\n      );\n      return type;\n    }\n    return filteredData?.[fieldMapping?.fileExtension];\n  }, [fieldMapping, filteredData]);\n\n  const viewer = useMemo(() => {\n    switch (fileType) {\n      case 'pdf':\n        return (\n          <PDFViewer\n            fileUrl={filteredData?.[fieldMapping?.filePath]}\n            blobPDF={filteredData?.[fieldMapping?.blobFile]}\n            {...otherProps}\n          />\n        );\n      case 'image':\n        return (\n          <ImageSlider\n            images={filteredData}\n            fieldMapping={fieldMapping}\n            {...otherProps}\n          />\n        );\n      default:\n        return (\n          <AmbientAlert\n            alertMessage={t('Unable to view file')}\n            showAlert\n            alertSeverity=\"error\"\n          />\n        );\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [fileType, data, fieldMapping, otherProps]);\n\n  return <>{viewer}</>;\n};\n"],"mappings":"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"}
+{"version":3,"file":"FileViewer-Bhubf4Uv.js","names":["useStyles","Typography","useStyles","PDFViewer: FC<PDFContainerProps>","numPages","ControlPanel","LinearProgress","useStyles","Typography","useStyles","defaultFieldMapping"],"sources":["../src/UI/fileViewer/pdfViewer/ControlPanel.tsx","../src/UI/fileViewer/pdfViewer/PDFViewer.tsx","../src/UI/fileViewer/utils/fileTypes.js","../src/UI/fileViewer/utils/fileUtils.js","../src/UI/fileViewer/imageSlider/ImageFooter.jsx","../src/UI/fileViewer/imageSlider/Image.jsx","../src/UI/fileViewer/imageSlider/ImageViewerSideSheet.jsx","../src/UI/fileViewer/imageSlider/ImageSlider.jsx","../src/UI/fileViewer/FileViewer.jsx"],"sourcesContent":["import React from 'react';\nimport { IconButton, makeStyles } from '@material-ui/core';\nimport FirstPageIcon from '@material-ui/icons/esm/FirstPage';\nimport NavigateBeforeIcon from '@material-ui/icons/esm/NavigateBefore';\nimport NavigateNextIcon from '@material-ui/icons/esm/NavigateNext';\nimport LastPageIcon from '@material-ui/icons/esm/LastPage';\nimport ZoomInIcon from '@material-ui/icons/esm/ZoomIn';\nimport ZoomOutIcon from '@material-ui/icons/esm/ZoomOut';\nimport CloudDownloadOutlinedIcon from '@material-ui/icons/esm/CloudDownloadOutlined';\nimport HighlightOffOutlinedIcon from '@material-ui/icons/esm/HighlightOffOutlined';\nimport { Typography } from '../../dataDisplay/typography/Typography';\nimport { useTranslation } from 'react-i18next';\n\nconst useStyles = makeStyles((theme) => ({\n  controlPanel: {\n    fontSize: '16px',\n    backgroundColor: theme.palette.background.paper,\n    borderRadius: '5px',\n    width: 'fit-content',\n    padding: theme.spacing(1),\n    margin: '8px auto',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '10px'\n  },\n  pageActions: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '10px'\n  },\n  pageNumber: {\n    display: 'flex',\n    gap: 5,\n    minWidth: '125px'\n  }\n}));\n\nconst ControlPanel = (props: any) => {\n  const {\n    pageNumber,\n    numPages,\n    setPageNumber,\n    scale,\n    setScale,\n    file,\n    closePDF,\n    onClickDownload\n  } = props;\n\n  const isFirstPage = pageNumber === 1;\n  const isLastPage = pageNumber === numPages;\n  const { t } = useTranslation();\n  const classes = useStyles();\n\n  const goToFirstPage = () => {\n    if (!isFirstPage) setPageNumber(1);\n  };\n  const goToPreviousPage = () => {\n    if (!isFirstPage) setPageNumber(pageNumber - 1);\n  };\n  const goToNextPage = () => {\n    if (!isLastPage) setPageNumber(pageNumber + 1);\n  };\n  const goToLastPage = () => {\n    if (!isLastPage) setPageNumber(numPages);\n  };\n\n  const onPageChange = (e: any) => {\n    const { value } = e.target;\n    setPageNumber(Number(value));\n  };\n\n  const isMinZoom = scale < 0.6;\n  const isMaxZoom = scale >= 2.0;\n\n  const zoomOut = () => {\n    if (!isMinZoom) setScale(scale - 0.1);\n  };\n\n  const zoomIn = () => {\n    if (!isMaxZoom) setScale(scale + 0.1);\n  };\n\n  return (\n    <div className={classes.controlPanel}>\n      <div className={classes.pageActions}>\n        <IconButton size='small' onClick={goToFirstPage} disabled={isFirstPage}>\n          <FirstPageIcon />\n        </IconButton>\n\n        <IconButton\n          size='small'\n          onClick={goToPreviousPage}\n          disabled={isFirstPage}\n        >\n          <NavigateBeforeIcon />\n        </IconButton>\n\n        <div>\n          <div className={classes.pageNumber}>\n            <Typography>{t('Page')} </Typography>\n            <input\n              name='pageNumber'\n              type='number'\n              min={1}\n              max={numPages || 1}\n              style={{\n                padding: 0,\n                paddingLeft: 1,\n                margin: 0,\n                textAlign: 'end'\n              }}\n              value={pageNumber}\n              onChange={onPageChange}\n            />{' '}\n            <Typography>of {numPages}</Typography>\n          </div>\n        </div>\n\n        <IconButton size='small' onClick={goToNextPage} disabled={isLastPage}>\n          <NavigateNextIcon />\n        </IconButton>\n\n        <IconButton size='small' onClick={goToLastPage} disabled={isLastPage}>\n          <LastPageIcon />\n        </IconButton>\n      </div>\n      <div className={classes.pageActions}>\n        <IconButton size='small' onClick={zoomOut} disabled={isMinZoom}>\n          <ZoomOutIcon />\n        </IconButton>\n\n        <Typography>{(scale * 100).toFixed()}%</Typography>\n\n        <IconButton size='small' onClick={zoomIn} disabled={isMaxZoom}>\n          <ZoomInIcon />\n        </IconButton>\n      </div>\n\n      <div>\n        <IconButton href={file} size='small' onClick={onClickDownload}>\n          <CloudDownloadOutlinedIcon />\n        </IconButton>\n      </div>\n\n      <div>\n        <IconButton size='small' onClick={closePDF}>\n          <HighlightOffOutlinedIcon />\n        </IconButton>\n      </div>\n    </div>\n  );\n};\n\nexport default ControlPanel;\n","import React, { FC, useEffect, useState } from 'react';\nimport { Document, Page, pdfjs } from 'react-pdf';\nimport ControlPanel from './ControlPanel';\nimport { LinearProgress } from '../../loading/LinearProgress';\nimport { makeStyles } from \"@material-ui/core\";\n\nconst useStyles = makeStyles((theme) => ({\n  pdfSection: (props: PDFContainerProps) => ({\n    minWidth: props?.minWidth,\n  }),\n  documentContainer: {\n    display: 'flex',\n    justifyContent: 'center',\n    width: '100%',\n    height: '100%',\n    overflowX: 'auto',\n    overflowY: 'hidden',\n  },\n  loadingBox: {\n    width: '100%',\n  },\n}));\n\ninterface PDFContainerProps {\n  isPDFOpen?: boolean;\n  fileUrl?: string;\n  blobPDF?: Blob;\n  closePDF?: () => void;\n  onClickDownload?: () => void;\n  minWidth?: number | string;\n}\n\nexport const PDFViewer: FC<PDFContainerProps> = ({\n  isPDFOpen = true,\n  fileUrl,\n  blobPDF,\n  closePDF,\n  onClickDownload,\n  minWidth\n}) => {\n  const [scale, setScale] = useState(1.0);\n  const [numPages, setNumPages] = useState(null);\n  const [pageNumber, setPageNumber] = useState(1);\n  const classes = useStyles({minWidth});\n\n  useEffect(() => {\n    pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;\n  });\n\n  function onDocumentLoadSuccess({ numPages }: any) {\n    setNumPages(numPages);\n  }\n\n  return (\n    <div>\n    {isPDFOpen && (\n      <div id='pdf-section' className={classes.pdfSection}>\n        <ControlPanel\n          scale={scale}\n          setScale={setScale}\n          numPages={numPages}\n          pageNumber={pageNumber}\n          setPageNumber={setPageNumber}\n          file={fileUrl ?? `data:application/pdf;base64,${blobPDF}`}\n          closePDF={closePDF}\n          onClickDownload={onClickDownload}\n        />\n        <div className={classes.documentContainer}>\n          <Document\n            file={fileUrl ?? `data:application/pdf;base64,${blobPDF}`}\n            onLoadSuccess={onDocumentLoadSuccess}\n          >\n            <Page\n              pageNumber={pageNumber}\n              scale={scale}\n              loading={\n                <div className={classes.loadingBox}>\n                  <LinearProgress />\n                </div>\n              }\n            />\n          </Document>\n        </div>\n      </div>\n    )}\n  </div>\n  );\n};\n","export const imageExtension = [\n  'png',\n  'jpeg',\n  'jpg',\n  'jpe',\n  'jif',\n  'jfif',\n  'jfi',\n  'gif',\n  'raw',\n  'svg',\n  'ttif',\n  'tif',\n  'webp',\n  'arw',\n  'sr2',\n  'nrw',\n  'k25',\n  'bmp',\n  'dib',\n  'heif',\n  'heic',\n  'ind',\n  'indd',\n  'indt',\n  'jp2',\n  'j2k',\n  'jpf',\n  'jpm',\n  'mj2',\n  'svgz',\n  'ai',\n  'eps',\n];\n","import { imageExtension } from './fileTypes';\n\nexport const handleDownloadFile = (fileUrl, fileName) => {\n  const a = document.createElement('a');\n  a.style.display = 'none';\n  a.href = fileUrl;\n  a.download = fileName;\n  document.body.appendChild(a);\n  a.click();\n  window.URL.revokeObjectURL(fileUrl);\n};\n\nexport const validateFilesImageType = (files = [], fileExtensionField) => {\n  let type = \"image\";\n  files.forEach(file => {\n    if (!imageExtension.includes(file?.[fileExtensionField])) {\n      type = 'invalid';\n      return;\n    }\n  });\n  return type;\n};\n","/* eslint-disable react/jsx-no-useless-fragment */\nimport { makeStyles } from '@material-ui/core';\nimport React, { useMemo } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Typography } from '../../dataDisplay/typography/Typography';\nimport { IconButtonWithTooltip } from '../../inputs/buttons/IconButtonWithToolTip';\nimport { getIconFromName } from '../../../utilities/tree/TreeUtilities';\n\nconst useStyles = makeStyles(theme => ({\n  secondaryText: {\n    color: theme.palette.text.secondary,\n  },\n  description: {\n    margin: theme.spacing(2),\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(1),\n  },\n  pageAction: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n  },\n}));\n\nexport const ImageFooter = props => {\n  const {\n    images,\n    currentImageObj,\n    hidePrimaryText,\n    hideSecondaryText,\n    handleViewImage,\n    currentImageIndex,\n  } = props;\n  const classes = useStyles();\n  const { t } = useTranslation();\n\n  const showItem = useMemo(() => {\n    const showPrimaryText = !hidePrimaryText && currentImageObj?.primaryText;\n    const showSecondaryText =\n      !hideSecondaryText && currentImageObj?.secondaryText;\n    const showPageAction = images?.length > 1;\n    return {\n      footer: showPageAction || showPrimaryText || showSecondaryText,\n      primaryText: showPrimaryText,\n      secondaryText: showSecondaryText,\n      pageAction: showPageAction,\n    };\n  }, [currentImageObj, hidePrimaryText, hideSecondaryText, images]);\n\n  return (\n    <>\n      {showItem?.footer && (\n        <div className={classes.description}>\n          {showItem?.primaryText && (\n            <Typography variant=\"h6\">{currentImageObj?.primaryText}</Typography>\n          )}\n\n          {showItem?.secondaryText && (\n            <Typography variant=\"subtitle1\" className={classes.secondaryText}>\n              {currentImageObj?.secondaryText}\n            </Typography>\n          )}\n          {showItem?.pageAction && (\n            <div className={classes.pageAction}>\n              <IconButtonWithTooltip\n                icon={getIconFromName('ChevronLeft')}\n                title={t('Previous')}\n                disabled={currentImageIndex == 0}\n                onClick={() => {\n                  handleViewImage(true);\n                }}\n                id=\"udpRecord-ImageSlider-PreviousBtn\"\n                udprecordid=\"udpRecord-ImageSlider-PreviousBtn\"\n              />\n\n              <div>\n                <Typography>\n                  {currentImageIndex + 1} {t('of')} {images?.length ?? 0}\n                </Typography>\n              </div>\n              <IconButtonWithTooltip\n                icon={getIconFromName('ChevronRight')}\n                title={t('Next')}\n                disabled={currentImageIndex === images?.length - 1}\n                onClick={() => {\n                  handleViewImage();\n                }}\n                id=\"udpRecord-ImageSlider-NextBtn\"\n                udprecordid=\"udpRecord-ImageSlider-NextBtn\"\n              />\n            </div>\n          )}\n        </div>\n      )}\n    </>\n  );\n};\n","import { makeStyles } from '@material-ui/core';\nimport React from 'react';\nimport { ImageFooter } from './ImageFooter';\n\nconst useStyles = makeStyles(theme => ({\n  imageWrapper: {\n    flex: '1 1 auto',\n    overflow: 'hidden',\n    position: 'relative',\n    margin: theme.spacing(2)\n  },\n  image: {\n    objectFit: 'contain',\n    width: '100%',\n    height: '100%',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n  },\n  cardContent: {\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'hidden',\n    height: '100%',\n    background: theme.palette.background.paper,\n  },\n}));\n\nexport const Image = props => {\n  const { imageObj, hidePrimaryText, hideSecondaryText } = props;\n  const classes = useStyles();\n\n  return (\n    <div className={classes.cardContent}>\n      <div className={classes.imageWrapper}>\n        <img\n          src={imageObj?.filePath}\n          loading=\"lazy\"\n          alt={`${imageObj?.fileName}`}\n          className={classes.image}\n        />\n      </div>\n      <ImageFooter\n        currentImageObj={imageObj}\n        hidePrimaryText={hidePrimaryText}\n        hideSecondaryText={hideSecondaryText}\n      />\n    </div>\n  );\n};\n","import React, { useCallback } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { handleDownloadFile } from '../utils/fileUtils';\nimport { Image } from './Image';\nimport { SideSheet } from '../../surfaces/SideSheet';\n\nexport const ImageViewerSideSheet = (props) => {\n  const {\n    title,\n    width,\n    imageObj,\n    open,\n    onClose,\n    hideDownload,\n    hidePrimaryText,\n    hideSecondaryText\n  } = props;\n  const { t } = useTranslation();\n\n  const handleDownloadImage = useCallback(() => {\n    handleDownloadFile(imageObj?.filePath, imageObj?.fileName);\n  }, [imageObj]);\n\n  return (\n    <SideSheet\n      title={title ?? t('Image Viewer')}\n      buttonLabel={hideDownload ? null : t('Download')}\n      width={width ?? '90vw'}\n      onSubmit={handleDownloadImage}\n      open={open}\n      onClose={onClose}\n      contentHeight='100%'\n    >\n      <Image\n        imageObj={imageObj}\n        hidePrimaryText={hidePrimaryText}\n        hideSecondaryText={hideSecondaryText}\n      />\n    </SideSheet>\n  );\n};\n","import { Dialog, makeStyles } from '@material-ui/core';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { ImageViewerSideSheet } from './ImageViewerSideSheet';\nimport { Image } from './Image';\nimport { ImageFooter } from './ImageFooter';\nimport { AmbientCard } from '../../surfaces/cards/AmbientCard';\nimport { IconButtonWithTooltip } from '../../inputs/buttons/IconButtonWithToolTip';\nimport { getIconFromName } from '../../../utilities/tree/TreeUtilities';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    backgroundColor: theme.palette.background.paper,\n  },\n  imagesWrapper: {\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    overflow: 'hidden',\n    alignItems: 'center',\n  },\n  imageSection: {\n    width: '100%',\n    height: '100%',\n  },\n  image: {\n    objectFit: 'contain',\n    display: 'block',\n    flexShrink: 0,\n    flexGrow: 0,\n    transition: 'translate 300ms ease-in-out',\n  },\n  openSideSheetIcon: {\n    display: 'block',\n    position: 'absolute',\n    top: props => (props?.title ? 64 : 8),\n    right: 8,\n    zIndex: 3,\n    backgroundColor: theme.palette.background.paper,\n  },\n  dialogContent: {\n    overflow: 'hidden',\n    width: '100vw',\n    height: '100vh',\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  closeDialog: {\n    margin: theme.spacing(1),\n  },\n  dialogImageSection: {\n    flex: 2,\n    height: '100%',\n  },\n}));\n\nconst defaultFieldMapping = {\n  filePath: 'filePath',\n  fileName: 'fileName',\n  primaryText: 'primaryText',\n  secondaryText: 'secondaryText',\n};\n\nexport const ImageSlider = props => {\n  const {\n    title,\n    images,\n    fieldMapping = defaultFieldMapping,\n    sideSheetTitle,\n    sideSheetWidth,\n    hideDownload,\n    hidePrimaryText,\n    hideSecondaryText,\n    hidePrimaryTextInExpandMode,\n    hideSecondaryTextInExpandMode,\n    expandInSideSheet = true,\n  } = props;\n  const classes = useStyles(props);\n  const { t } = useTranslation();\n  const [currentImageIndex, setCurrentImageIndex] = useState(0);\n  const [openSideSheet, setOpenSideSheet] = useState(false);\n\n  const handleViewImage = useCallback((previous = false) => {\n    if (previous) {\n      setCurrentImageIndex(prev => prev - 1);\n    } else {\n      setCurrentImageIndex(prev => prev + 1);\n    }\n  }, []);\n\n  const handleExpandImage = useCallback(() => {\n    setOpenSideSheet(true);\n  }, []);\n\n  const currentImageObj = useMemo(() => {\n    const imgObj = images?.[currentImageIndex];\n    if (!imgObj) return {};\n\n    return {\n      filePath: imgObj[fieldMapping?.filePath],\n      fileName: imgObj[fieldMapping?.fileName],\n      primaryText: imgObj[fieldMapping?.primaryText],\n      secondaryText: imgObj[fieldMapping?.secondaryText],\n    };\n  }, [currentImageIndex, fieldMapping, images]);\n\n  return (\n    <AmbientCard\n      fullWidth\n      title={title}\n      removePadding\n      lastChildBottomPadding=\"0px\"\n      removeTopLayoutUnit\n    >\n      <div className={classes.imagesWrapper}>\n        {images?.map(image => (\n          <img\n            src={image?.[fieldMapping?.filePath]}\n            alt={`${image?.[fieldMapping?.fileName]}`}\n            loading=\"lazy\"\n            width=\"100%\"\n            height=\"auto\"\n            className={classes.image}\n            style={{ translate: `${-100 * currentImageIndex}%` }}\n          />\n        ))}\n      </div>\n      <IconButtonWithTooltip\n        icon={getIconFromName('MiniExpand')}\n        title={t('Expand Image')}\n        onClick={handleExpandImage}\n        id=\"udpRecord-ImageSlider-ExpandBtn\"\n        udprecordid=\"udpRecord-ImageSlider-ExpandBtn\"\n        className={classes.openSideSheetIcon}\n      />\n      <ImageFooter\n        images={images}\n        currentImageObj={currentImageObj}\n        hidePrimaryText={hidePrimaryText}\n        hideSecondaryText={hideSecondaryText}\n        handleViewImage={handleViewImage}\n        currentImageIndex={currentImageIndex}\n      />\n\n      {expandInSideSheet ? (\n        <ImageViewerSideSheet\n          title={sideSheetTitle}\n          open={openSideSheet}\n          onClose={() => {\n            setOpenSideSheet(false);\n          }}\n          imageObj={currentImageObj}\n          width={sideSheetWidth}\n          hideDownload={hideDownload}\n          hidePrimaryText={hidePrimaryTextInExpandMode}\n          hideSecondaryText={hideSecondaryTextInExpandMode}\n        />\n      ) : (\n        <Dialog\n          onClose={() => {\n            setOpenSideSheet(false);\n          }}\n          open={openSideSheet}\n          fullScreen\n        >\n          <div className={classes.dialogContent}>\n            <div className={classes.closeDialog}>\n              <IconButtonWithTooltip\n                icon={getIconFromName('Cancel')}\n                title={t('Close')}\n                onClick={() => {\n                  setOpenSideSheet(false);\n                }}\n                id=\"udpRecord-ImageSlider-PreviousBtn\"\n                udprecordid=\"udpRecord-ImageSlider-PreviousBtn\"\n              />\n            </div>\n            <div className={classes.dialogImageSection}>\n              <Image\n                imageObj={currentImageObj}\n                hidePrimaryText={hidePrimaryTextInExpandMode}\n                hideSecondaryText={hideSecondaryTextInExpandMode}\n              />\n            </div>\n          </div>\n        </Dialog>\n      )}\n    </AmbientCard>\n  );\n};\n","/* eslint-disable react/jsx-no-useless-fragment */\nimport React, { useMemo } from 'react';\nimport { PDFViewer } from './pdfViewer/PDFViewer';\nimport { ImageSlider } from './imageSlider/ImageSlider';\nimport { validateFilesImageType } from './utils/fileUtils';\nimport { useTranslation } from 'react-i18next';\nimport { AmbientAlert } from '../feedback/AmbientAlert';\n\nconst defaultFieldMapping = {\n  filePath: 'filePath',\n  blobFile: 'blobFile',\n  fileName: 'fileName',\n  fileExtension: 'fileExtension',\n  primaryText: 'primaryText',\n  secondaryText: 'secondaryText',\n};\n\nexport const FileViewer = props => {\n  const {\n    data,\n    fieldMapping = defaultFieldMapping,\n    acceptedFileExtensions,\n    ...otherProps\n  } = props;\n  const { t } = useTranslation();\n\n  //filter data\n  const filteredData = useMemo(() => {\n    if (!acceptedFileExtensions || acceptedFileExtensions?.length === 0)\n      return data;\n    if (data instanceof Array && data?.length > 0) {\n      return data?.filter(item =>\n        acceptedFileExtensions?.includes(item?.[fieldMapping?.fileExtension])\n      );\n    } else {\n      return acceptedFileExtensions?.includes(\n        data?.[fieldMapping?.fileExtension]\n      )\n        ? data\n        : null;\n    }\n  }, [acceptedFileExtensions, data, fieldMapping]);\n\n  // check if the data is an array. If yes, currently only image viewer accept this list,\n  // we need to validate if all the file in the list is image\n  const fileType = useMemo(() => {\n    if (filteredData instanceof Array) {\n      const type = validateFilesImageType(\n        filteredData,\n        fieldMapping?.fileExtension\n      );\n      return type;\n    }\n    return filteredData?.[fieldMapping?.fileExtension];\n  }, [fieldMapping, filteredData]);\n\n  const viewer = useMemo(() => {\n    switch (fileType) {\n      case 'pdf':\n        return (\n          <PDFViewer\n            fileUrl={filteredData?.[fieldMapping?.filePath]}\n            blobPDF={filteredData?.[fieldMapping?.blobFile]}\n            {...otherProps}\n          />\n        );\n      case 'image':\n        return (\n          <ImageSlider\n            images={filteredData}\n            fieldMapping={fieldMapping}\n            {...otherProps}\n          />\n        );\n      default:\n        return (\n          <AmbientAlert\n            alertMessage={t('Unable to view file')}\n            showAlert\n            alertSeverity=\"error\"\n          />\n        );\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [fileType, data, fieldMapping, otherProps]);\n\n  return <>{viewer}</>;\n};\n"],"mappings":"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"}

package/dist/{FluentCell-DZ5pFjdC.js → FluentCell-C7lb2y4Z.js}

@@ -1,5 +1,5 @@
 import { UnityFluentIcon } from "./UnityFluentIcon-fuqAQh0C.js";
-import { getIconFromName } from "./TreeUtilities-DVY-2md6.js";
+import { getIconFromName } from "./TreeUtilities-XLrXtUeL.js";
 import { StatusChip } from "./StatusChip-Bw-0wE_B.js";
 import React from "react";
 import { Box, TableCell, Tooltip, makeStyles, useTheme } from "@material-ui/core";
@@ -78,4 +78,4 @@ var FluentCell_default = FluentCell;
 
 //#endregion
 export { FluentCell_default };
-//# sourceMappingURL=FluentCell-DZ5pFjdC.js.map
+//# sourceMappingURL=FluentCell-C7lb2y4Z.js.map

package/dist/{FluentCell-DZ5pFjdC.js.map → FluentCell-C7lb2y4Z.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FluentCell-DZ5pFjdC.js","names":[],"sources":["../src/UI/dataDisplay/FluentDataTable/FluentCell/index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Box, makeStyles, TableCell, Theme, useTheme, Tooltip } from '@material-ui/core';\nimport { format } from 'date-fns';\nimport { UnityFluentIcon } from '../../../../utilities/iconLibrary/UnityFluentIcon';\nimport { getIconFromName } from '../../../../utilities/tree/TreeUtilities';\nimport { StatusChip } from '../../StatusChip';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles<Theme, FluentCellProps>((theme) => ({\n  labelText: {\n    color: theme.palette.text.primary,\n    fontSize: '12px'\n  },\n  tableCell: {\n    fontSize: '12px',\n    letterSpacing: '0.4px',\n    fontWeight: (props) => (props?.bold ? 500 : 400)\n  },\n  unityIconWrapper: {\n    gap: theme.spacing(1)\n  }\n}));\n\n/* #region  CellUnityIcon */\n\ninterface CellUnityIconProps extends FluentCellProps {\n  icon: string;\n  size: string;\n  color: string;\n  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';\n  className?: string;\n}\n\nconst CellUnityIcon = (props: Partial<CellUnityIconProps>) => {\n  const theme = useTheme();\n  const {\n    icon = '',\n    size = 'large',\n    color = theme.palette.primary.main,\n    children\n  } = props;\n  const classes = useStyles(props as FluentCellProps);\n\n  return (\n    <FluentCell {...props}>\n      { /* @ts-ignore */ }\n      <Box display='flex' alignItems='center' className={classes.unityIconWrapper}>\n        <UnityFluentIcon\n          size={size}\n          color={color}\n          icon={getIconFromName(icon)}\n        />\n        {children && children}\n      </Box>\n    </FluentCell>\n  );\n};\n\n/* #endregion */\n\n/* #region  CellIcon */\n\ninterface CellImageProps extends FluentCellProps {\n  src: string;\n  alt: string;\n  title: string;\n  style?: object;\n  children: any;\n}\n\nconst CellImage = (props: CellImageProps) => (\n  <FluentCell {...props}>\n    <img src={props?.src} alt={props?.alt} style={props?.style} />\n    {props?.title}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellIcon */\n\ninterface CellIconProps extends FluentCellProps {\n  icon: any;\n  label: string;\n  style?: object;\n}\n\nconst CellIcon = (props: Partial<CellIconProps>) => (\n  <FluentCell {...props}>\n    <>\n      {props?.label ? (\n      // @ts-ignore\n        <Box display='flex' alignItems='center' style={{ gap: '8px' }}>\n      { /* @ts-ignore */ }\n          <Box>{props?.icon}</Box>\n          {props?.label}\n        </Box>\n      ) : (\n        props?.icon\n      )}\n      {props?.children}\n    </>\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellNumber */\n\ninterface CellNumberProps extends FluentCellProps {\n  decimals?: number | string;\n  children: any;\n}\n\nconst CellNumber = (props: CellNumberProps) => (\n  <FluentCell {...props}>\n    {Number(props?.children).toFixed(Number(props?.decimals ?? 2))}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellDate */\n\ninterface CellDateProps extends FluentCellProps {\n  format?: string;\n  children: any;\n}\n\nconst CellDate = (props: CellDateProps) => (\n  <FluentCell {...props}>\n    {format(new Date(props?.children), props?.format || 'MM/dd/yyyy')}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellCurrency */\n\ninterface CellCurrencyProps extends FluentCellProps {\n  currencySymbol?: string;\n  children: any;\n}\n\nconst CellCurrency = (props: CellCurrencyProps) => (\n  <FluentCell {...props}>\n    {props?.currencySymbol || '$'}\n    {props?.children}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellText */\n\ninterface CellTextProps extends FluentCellProps {\n  children: any;\n}\n\nconst CellText = (props: CellTextProps) => (\n  <FluentCell {...props}>{props.children}</FluentCell>\n);\n\n/* #endregion */\n\n/* #region  Chip */\n\ninterface CellChipProps extends FluentCellProps {\n  status?: string;\n  size?: string;\n  children: any;\n}\n\nconst CellChip = (props: CellChipProps) => (\n  <FluentCell {...props}>\n    {/* @ts-ignore */}\n    <StatusChip\n      status={props?.status || 'success'}\n      label={props?.children}\n    />\n  </FluentCell>\n);\n/* #endregion */\n\ninterface FluentCellProps {\n  scope?: string;\n  bold?: boolean;\n  style?: object;\n  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';\n  children?: ReactNode;\n  className?: string;\n  colSpan?: number;\n  tooltip?: string;\n}\n\nconst FluentCell = (props: FluentCellProps) => {\n  const classes = useStyles(props);\n  const { scope = 'row', style, align, colSpan, className, tooltip, children } = props;\n\n  const cellContent = children;\n\n  return (\n    <TableCell\n      scope={scope}\n      className={clsx(classes.tableCell, className)}\n      style={style}\n      align={align}\n      colSpan={colSpan}\n    >\n      {tooltip ? (\n        <Tooltip title={tooltip || ''} children={<span>{cellContent || ''}</span>} />\n      ) : (\n        cellContent\n      )}\n    </TableCell>\n  );\n};\n\nFluentCell.UnityIcon = CellUnityIcon;\nFluentCell.Icon = CellIcon;\nFluentCell.Number = CellNumber;\nFluentCell.Text = CellText;\nFluentCell.Currency = CellCurrency;\nFluentCell.Date = CellDate;\nFluentCell.Chip = CellChip;\nFluentCell.Image = CellImage;\n\nexport default FluentCell;\n"],"mappings":";;;;;;;;;AAQA,MAAM,YAAY,YAAoC,WAAW;CAC/D,WAAW;EACT,OAAO,MAAM,QAAQ,KAAK;EAC1B,UAAU;EACX;CACD,WAAW;EACT,UAAU;EACV,eAAe;EACf,aAAa,UAAW,OAAO,OAAO,MAAM;EAC7C;CACD,kBAAkB,EAChB,KAAK,MAAM,QAAQ,EAAE,EACtB;CACF,EAAE;AAYH,MAAM,iBAAiB,UAAuC;CAC5D,MAAM,QAAQ,UAAU;CACxB,MAAM,EACJ,OAAO,IACP,OAAO,SACP,QAAQ,MAAM,QAAQ,QAAQ,MAC9B,aACE;CACJ,MAAM,UAAU,UAAU,MAAyB;AAEnD,QACE,oCAAC,YAAe,OAEd,oCAAC;EAAI,SAAQ;EAAO,YAAW;EAAS,WAAW,QAAQ;IACzD,oCAAC;EACO;EACC;EACP,MAAM,gBAAgB,KAAK;GAC3B,EACD,YAAY,SACT,CACK;;AAgBjB,MAAM,aAAa,UACjB,oCAAC,YAAe,OACd,oCAAC;CAAI,KAAK,OAAO;CAAK,KAAK,OAAO;CAAK,OAAO,OAAO;EAAS,EAC7D,OAAO,MACG;AAaf,MAAM,YAAY,UAChB,oCAAC,YAAe,OACd,0DACG,OAAO,QAEN,oCAAC;CAAI,SAAQ;CAAO,YAAW;CAAS,OAAO,EAAE,KAAK,OAAO;GAE3D,oCAAC,WAAK,OAAO,KAAW,EACvB,OAAO,MACJ,GAEN,OAAO,MAER,OAAO,SACP,CACQ;AAYf,MAAM,cAAc,UAClB,oCAAC,YAAe,OACb,OAAO,OAAO,SAAS,CAAC,QAAQ,OAAO,OAAO,YAAY,EAAE,CAAC,CACnD;AAYf,MAAM,YAAY,UAChB,oCAAC,YAAe,OACb,OAAO,IAAI,KAAK,OAAO,SAAS,EAAE,OAAO,UAAU,aAAa,CACtD;AAYf,MAAM,gBAAgB,UACpB,oCAAC,YAAe,OACb,OAAO,kBAAkB,KACzB,OAAO,SACG;AAWf,MAAM,YAAY,UAChB,oCAAC,YAAe,OAAQ,MAAM,SAAsB;AAatD,MAAM,YAAY,UAChB,oCAAC,YAAe,OAEd,oCAAC;CACC,QAAQ,OAAO,UAAU;CACzB,OAAO,OAAO;EACd,CACS;AAef,MAAM,cAAc,UAA2B;CAC7C,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,QAAQ,OAAO,OAAO,OAAO,SAAS,WAAW,SAAS,aAAa;CAE/E,MAAM,cAAc;AAEpB,QACE,oCAAC;EACQ;EACP,WAAW,KAAK,QAAQ,WAAW,UAAU;EACtC;EACA;EACE;IAER,UACC,oCAAC;EAAQ,OAAO,WAAW;EAAI,UAAU,oCAAC,cAAM,eAAe,GAAU;GAAI,GAE7E,YAEQ;;AAIhB,WAAW,YAAY;AACvB,WAAW,OAAO;AAClB,WAAW,SAAS;AACpB,WAAW,OAAO;AAClB,WAAW,WAAW;AACtB,WAAW,OAAO;AAClB,WAAW,OAAO;AAClB,WAAW,QAAQ;AAEnB,yBAAe"}
+{"version":3,"file":"FluentCell-C7lb2y4Z.js","names":[],"sources":["../src/UI/dataDisplay/FluentDataTable/FluentCell/index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Box, makeStyles, TableCell, Theme, useTheme, Tooltip } from '@material-ui/core';\nimport { format } from 'date-fns';\nimport { UnityFluentIcon } from '../../../../utilities/iconLibrary/UnityFluentIcon';\nimport { getIconFromName } from '../../../../utilities/tree/TreeUtilities';\nimport { StatusChip } from '../../StatusChip';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles<Theme, FluentCellProps>((theme) => ({\n  labelText: {\n    color: theme.palette.text.primary,\n    fontSize: '12px'\n  },\n  tableCell: {\n    fontSize: '12px',\n    letterSpacing: '0.4px',\n    fontWeight: (props) => (props?.bold ? 500 : 400)\n  },\n  unityIconWrapper: {\n    gap: theme.spacing(1)\n  }\n}));\n\n/* #region  CellUnityIcon */\n\ninterface CellUnityIconProps extends FluentCellProps {\n  icon: string;\n  size: string;\n  color: string;\n  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';\n  className?: string;\n}\n\nconst CellUnityIcon = (props: Partial<CellUnityIconProps>) => {\n  const theme = useTheme();\n  const {\n    icon = '',\n    size = 'large',\n    color = theme.palette.primary.main,\n    children\n  } = props;\n  const classes = useStyles(props as FluentCellProps);\n\n  return (\n    <FluentCell {...props}>\n      { /* @ts-ignore */ }\n      <Box display='flex' alignItems='center' className={classes.unityIconWrapper}>\n        <UnityFluentIcon\n          size={size}\n          color={color}\n          icon={getIconFromName(icon)}\n        />\n        {children && children}\n      </Box>\n    </FluentCell>\n  );\n};\n\n/* #endregion */\n\n/* #region  CellIcon */\n\ninterface CellImageProps extends FluentCellProps {\n  src: string;\n  alt: string;\n  title: string;\n  style?: object;\n  children: any;\n}\n\nconst CellImage = (props: CellImageProps) => (\n  <FluentCell {...props}>\n    <img src={props?.src} alt={props?.alt} style={props?.style} />\n    {props?.title}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellIcon */\n\ninterface CellIconProps extends FluentCellProps {\n  icon: any;\n  label: string;\n  style?: object;\n}\n\nconst CellIcon = (props: Partial<CellIconProps>) => (\n  <FluentCell {...props}>\n    <>\n      {props?.label ? (\n      // @ts-ignore\n        <Box display='flex' alignItems='center' style={{ gap: '8px' }}>\n      { /* @ts-ignore */ }\n          <Box>{props?.icon}</Box>\n          {props?.label}\n        </Box>\n      ) : (\n        props?.icon\n      )}\n      {props?.children}\n    </>\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellNumber */\n\ninterface CellNumberProps extends FluentCellProps {\n  decimals?: number | string;\n  children: any;\n}\n\nconst CellNumber = (props: CellNumberProps) => (\n  <FluentCell {...props}>\n    {Number(props?.children).toFixed(Number(props?.decimals ?? 2))}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellDate */\n\ninterface CellDateProps extends FluentCellProps {\n  format?: string;\n  children: any;\n}\n\nconst CellDate = (props: CellDateProps) => (\n  <FluentCell {...props}>\n    {format(new Date(props?.children), props?.format || 'MM/dd/yyyy')}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellCurrency */\n\ninterface CellCurrencyProps extends FluentCellProps {\n  currencySymbol?: string;\n  children: any;\n}\n\nconst CellCurrency = (props: CellCurrencyProps) => (\n  <FluentCell {...props}>\n    {props?.currencySymbol || '$'}\n    {props?.children}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellText */\n\ninterface CellTextProps extends FluentCellProps {\n  children: any;\n}\n\nconst CellText = (props: CellTextProps) => (\n  <FluentCell {...props}>{props.children}</FluentCell>\n);\n\n/* #endregion */\n\n/* #region  Chip */\n\ninterface CellChipProps extends FluentCellProps {\n  status?: string;\n  size?: string;\n  children: any;\n}\n\nconst CellChip = (props: CellChipProps) => (\n  <FluentCell {...props}>\n    {/* @ts-ignore */}\n    <StatusChip\n      status={props?.status || 'success'}\n      label={props?.children}\n    />\n  </FluentCell>\n);\n/* #endregion */\n\ninterface FluentCellProps {\n  scope?: string;\n  bold?: boolean;\n  style?: object;\n  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';\n  children?: ReactNode;\n  className?: string;\n  colSpan?: number;\n  tooltip?: string;\n}\n\nconst FluentCell = (props: FluentCellProps) => {\n  const classes = useStyles(props);\n  const { scope = 'row', style, align, colSpan, className, tooltip, children } = props;\n\n  const cellContent = children;\n\n  return (\n    <TableCell\n      scope={scope}\n      className={clsx(classes.tableCell, className)}\n      style={style}\n      align={align}\n      colSpan={colSpan}\n    >\n      {tooltip ? (\n        <Tooltip title={tooltip || ''} children={<span>{cellContent || ''}</span>} />\n      ) : (\n        cellContent\n      )}\n    </TableCell>\n  );\n};\n\nFluentCell.UnityIcon = CellUnityIcon;\nFluentCell.Icon = CellIcon;\nFluentCell.Number = CellNumber;\nFluentCell.Text = CellText;\nFluentCell.Currency = CellCurrency;\nFluentCell.Date = CellDate;\nFluentCell.Chip = CellChip;\nFluentCell.Image = CellImage;\n\nexport default FluentCell;\n"],"mappings":";;;;;;;;;AAQA,MAAM,YAAY,YAAoC,WAAW;CAC/D,WAAW;EACT,OAAO,MAAM,QAAQ,KAAK;EAC1B,UAAU;EACX;CACD,WAAW;EACT,UAAU;EACV,eAAe;EACf,aAAa,UAAW,OAAO,OAAO,MAAM;EAC7C;CACD,kBAAkB,EAChB,KAAK,MAAM,QAAQ,EAAE,EACtB;CACF,EAAE;AAYH,MAAM,iBAAiB,UAAuC;CAC5D,MAAM,QAAQ,UAAU;CACxB,MAAM,EACJ,OAAO,IACP,OAAO,SACP,QAAQ,MAAM,QAAQ,QAAQ,MAC9B,aACE;CACJ,MAAM,UAAU,UAAU,MAAyB;AAEnD,QACE,oCAAC,YAAe,OAEd,oCAAC;EAAI,SAAQ;EAAO,YAAW;EAAS,WAAW,QAAQ;IACzD,oCAAC;EACO;EACC;EACP,MAAM,gBAAgB,KAAK;GAC3B,EACD,YAAY,SACT,CACK;;AAgBjB,MAAM,aAAa,UACjB,oCAAC,YAAe,OACd,oCAAC;CAAI,KAAK,OAAO;CAAK,KAAK,OAAO;CAAK,OAAO,OAAO;EAAS,EAC7D,OAAO,MACG;AAaf,MAAM,YAAY,UAChB,oCAAC,YAAe,OACd,0DACG,OAAO,QAEN,oCAAC;CAAI,SAAQ;CAAO,YAAW;CAAS,OAAO,EAAE,KAAK,OAAO;GAE3D,oCAAC,WAAK,OAAO,KAAW,EACvB,OAAO,MACJ,GAEN,OAAO,MAER,OAAO,SACP,CACQ;AAYf,MAAM,cAAc,UAClB,oCAAC,YAAe,OACb,OAAO,OAAO,SAAS,CAAC,QAAQ,OAAO,OAAO,YAAY,EAAE,CAAC,CACnD;AAYf,MAAM,YAAY,UAChB,oCAAC,YAAe,OACb,OAAO,IAAI,KAAK,OAAO,SAAS,EAAE,OAAO,UAAU,aAAa,CACtD;AAYf,MAAM,gBAAgB,UACpB,oCAAC,YAAe,OACb,OAAO,kBAAkB,KACzB,OAAO,SACG;AAWf,MAAM,YAAY,UAChB,oCAAC,YAAe,OAAQ,MAAM,SAAsB;AAatD,MAAM,YAAY,UAChB,oCAAC,YAAe,OAEd,oCAAC;CACC,QAAQ,OAAO,UAAU;CACzB,OAAO,OAAO;EACd,CACS;AAef,MAAM,cAAc,UAA2B;CAC7C,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,QAAQ,OAAO,OAAO,OAAO,SAAS,WAAW,SAAS,aAAa;CAE/E,MAAM,cAAc;AAEpB,QACE,oCAAC;EACQ;EACP,WAAW,KAAK,QAAQ,WAAW,UAAU;EACtC;EACA;EACE;IAER,UACC,oCAAC;EAAQ,OAAO,WAAW;EAAI,UAAU,oCAAC,cAAM,eAAe,GAAU;GAAI,GAE7E,YAEQ;;AAIhB,WAAW,YAAY;AACvB,WAAW,OAAO;AAClB,WAAW,SAAS;AACpB,WAAW,OAAO;AAClB,WAAW,WAAW;AACtB,WAAW,OAAO;AAClB,WAAW,OAAO;AAClB,WAAW,QAAQ;AAEnB,yBAAe"}

package/dist/{FluentDataTable-C7Ng6Eh3.js → FluentDataTable-C3A36z2b.js}

@@ -1,5 +1,5 @@
 import { FluentBody_default } from "./FluentBody-PdsySA1c.js";
-import { FluentCell_default } from "./FluentCell-DZ5pFjdC.js";
+import { FluentCell_default } from "./FluentCell-C7lb2y4Z.js";
 import { FluentHead_default } from "./FluentHead-BTV-o45z.js";
 import { FluentRow_default } from "./FluentRow-CVqnk9pB.js";
 import React from "react";
@@ -27,4 +27,4 @@ FluentDataTable.FluentRow = FluentRow_default;
 
 //#endregion
 export { FluentDataTable };
-//# sourceMappingURL=FluentDataTable-C7Ng6Eh3.js.map
+//# sourceMappingURL=FluentDataTable-C3A36z2b.js.map

package/dist/{FluentDataTable-C7Ng6Eh3.js.map → FluentDataTable-C3A36z2b.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FluentDataTable-C7Ng6Eh3.js","names":["FluentHead","FluentBody","FluentCell","FluentRow"],"sources":["../src/UI/dataDisplay/FluentDataTable/FluentDataTable.tsx"],"sourcesContent":["import { Size, Table, TableContainer, makeStyles } from '@material-ui/core';\nimport React, { ReactElement, ReactNode } from 'react';\nimport FluentBody from './FluentBody';\nimport FluentCell from './FluentCell';\nimport FluentHead from './FluentHead';\nimport FluentRow from './FluentRow';\n\ninterface FluentDataTableProps {\n  style?: object;\n  size?: Size | undefined;\n  children: ReactNode;\n  stickyHeader?: boolean;\n  containerMaxHeight?: string | number;\n}\n\ntype FluentDataTableComponent = React.FC<FluentDataTableProps> & {\n  FluentHead: typeof FluentHead;\n  FluentBody: typeof FluentBody;\n  FluentCell: typeof FluentCell;\n  FluentRow: typeof FluentRow;\n};\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    maxHeight: (props: any) => props?.containerMaxHeight\n  }\n}));\n\nexport const FluentDataTable = ((props: FluentDataTableProps): ReactElement => {\n  const { size = 'small', style, stickyHeader = false, containerMaxHeight } = props;\n  const classes = useStyles({ containerMaxHeight });\n  return (\n    <TableContainer\n      style={{ maxHeight: containerMaxHeight, height: '100%'}}\n    >\n      <Table\n        aria-label='simple table'\n        size={size}\n        style={style}\n        stickyHeader={stickyHeader}\n      >\n        {props?.children}\n      </Table>\n    </TableContainer>\n  );\n}) as FluentDataTableComponent;\n\nFluentDataTable.FluentHead = FluentHead;\nFluentDataTable.FluentBody = FluentBody;\nFluentDataTable.FluentCell = FluentCell;\nFluentDataTable.FluentRow = FluentRow;\n"],"mappings":";;;;;;;;AAsBA,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM,EACJ,YAAY,UAAe,OAAO,oBACnC,EACF,EAAE;AAEH,MAAa,oBAAoB,UAA8C;CAC7E,MAAM,EAAE,OAAO,SAAS,OAAO,eAAe,OAAO,uBAAuB;AAC5D,WAAU,EAAE,oBAAoB,CAAC;AACjD,QACE,oCAAC,kBACC,OAAO;EAAE,WAAW;EAAoB,QAAQ;EAAO,IAEvD,oCAAC;EACC,cAAW;EACL;EACC;EACO;IAEb,OAAO,SACF,CACO;;AAIrB,gBAAgB,aAAaA;AAC7B,gBAAgB,aAAaC;AAC7B,gBAAgB,aAAaC;AAC7B,gBAAgB,YAAYC"}
+{"version":3,"file":"FluentDataTable-C3A36z2b.js","names":["FluentHead","FluentBody","FluentCell","FluentRow"],"sources":["../src/UI/dataDisplay/FluentDataTable/FluentDataTable.tsx"],"sourcesContent":["import { Size, Table, TableContainer, makeStyles } from '@material-ui/core';\nimport React, { ReactElement, ReactNode } from 'react';\nimport FluentBody from './FluentBody';\nimport FluentCell from './FluentCell';\nimport FluentHead from './FluentHead';\nimport FluentRow from './FluentRow';\n\ninterface FluentDataTableProps {\n  style?: object;\n  size?: Size | undefined;\n  children: ReactNode;\n  stickyHeader?: boolean;\n  containerMaxHeight?: string | number;\n}\n\ntype FluentDataTableComponent = React.FC<FluentDataTableProps> & {\n  FluentHead: typeof FluentHead;\n  FluentBody: typeof FluentBody;\n  FluentCell: typeof FluentCell;\n  FluentRow: typeof FluentRow;\n};\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    maxHeight: (props: any) => props?.containerMaxHeight\n  }\n}));\n\nexport const FluentDataTable = ((props: FluentDataTableProps): ReactElement => {\n  const { size = 'small', style, stickyHeader = false, containerMaxHeight } = props;\n  const classes = useStyles({ containerMaxHeight });\n  return (\n    <TableContainer\n      style={{ maxHeight: containerMaxHeight, height: '100%'}}\n    >\n      <Table\n        aria-label='simple table'\n        size={size}\n        style={style}\n        stickyHeader={stickyHeader}\n      >\n        {props?.children}\n      </Table>\n    </TableContainer>\n  );\n}) as FluentDataTableComponent;\n\nFluentDataTable.FluentHead = FluentHead;\nFluentDataTable.FluentBody = FluentBody;\nFluentDataTable.FluentCell = FluentCell;\nFluentDataTable.FluentRow = FluentRow;\n"],"mappings":";;;;;;;;AAsBA,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM,EACJ,YAAY,UAAe,OAAO,oBACnC,EACF,EAAE;AAEH,MAAa,oBAAoB,UAA8C;CAC7E,MAAM,EAAE,OAAO,SAAS,OAAO,eAAe,OAAO,uBAAuB;AAC5D,WAAU,EAAE,oBAAoB,CAAC;AACjD,QACE,oCAAC,kBACC,OAAO;EAAE,WAAW;EAAoB,QAAQ;EAAO,IAEvD,oCAAC;EACC,cAAW;EACL;EACC;EACO;IAEb,OAAO,SACF,CACO;;AAIrB,gBAAgB,aAAaA;AAC7B,gBAAgB,aAAaC;AAC7B,gBAAgB,aAAaC;AAC7B,gBAAgB,YAAYC"}

package/dist/{FluentTimeline-ChthjfxZ.js → FluentTimeline-B0VjMqsq.js}

@@ -1,7 +1,7 @@
 import { FluentIcon } from "./FluentIcon-CB-ANF6C.js";
 import { FluentIconButton } from "./FluentIconButton-le92OnEc.js";
 import { UnityFluentIcon } from "./UnityFluentIcon-fuqAQh0C.js";
-import { getIconFromName } from "./TreeUtilities-DVY-2md6.js";
+import { getIconFromName } from "./TreeUtilities-XLrXtUeL.js";
 import React, { useState } from "react";
 import { Avatar, MenuItem, Popover, Typography, alpha, makeStyles } from "@material-ui/core";
 import { MoreVerticalIcon } from "@fluentui/react-icons";
@@ -153,4 +153,4 @@ const FluentTimeline = (props) => {
 
 //#endregion
 export { FluentTimeline, FluentTimelineContent, FluentTimelineHeader };
-//# sourceMappingURL=FluentTimeline-ChthjfxZ.js.map
+//# sourceMappingURL=FluentTimeline-B0VjMqsq.js.map