udp-react-enterprise-component-library 25.18.1-beta.38 → 25.18.1-beta.39

package/dist/{DonutChartWidget-pOQ_gwzJ.js.map → DonutChartWidget-vOeXhdOe.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DonutChartWidget-pOQ_gwzJ.js","names":["FluentStatsSnippet","WidgetCard","ChartSummaryToggle"],"sources":["../src/UI/widgets/library/DonutChartWidget/DonutChartWidget.jsx","../src/UI/widgets/library/DonutChartWidget/index.ts"],"sourcesContent":["import React, { forwardRef, Fragment } from 'react'\nimport { Grid, Box, Typography } from '@material-ui/core'\nimport { MuiVegaLite } from '@material-vega/material-ui'\nimport WidgetCard from '../../WidgetCard'\nimport FluentStatsSnippet from '../../FluentComponents/atoms/FluentStatsSnippet'\nimport ChartSummaryToggle from '../../FluentComponents/ChartSummaryToggle'\nimport { convertISODate } from '../../utils/ConvertISODate'\n\nexport const layout = {\n  w: { default: 2, min: 0, max: 4 },\n  h: { default: 2, min: 0, max: 4 }\n}\n\nconst DonutChartWidget = (props, ref) => {\n  const { children, params, setParam, ...other } = props\n  const { mockData, apiUrl, theme, dateRange } = params\n\n  let body = (\n    <Fragment>\n      {dateRange && (\n        <Typography gutterBottom variant='caption' component='h3'>\n          From: {convertISODate(dateRange.from)} to:{' '}\n          {convertISODate(dateRange.to)}\n        </Typography>\n      )}\n      <Grid container>\n        {mockData?.stats?.map((stat) => (\n          <Grid item xs={3} key={stat.label}>\n            <FluentStatsSnippet\n              label={stat.label}\n              amount={stat.currentValue}\n              prevAmount={stat.previousValue}\n            />\n          </Grid>\n        ))}\n      </Grid>\n      <Box clone flex={1} mt={1} overflow='hidden'>\n        <MuiVegaLite\n          variant='donutChart'\n          style={{\n            overflow: 'auto',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            padding: 0\n          }}\n          spec={{\n            $schema: 'https://vega.github.io/schema/vega/v5.json',\n            width: 200,\n            height: 200,\n            data: [\n              {\n                name: 'table',\n                values: mockData?.data,\n                transform: [\n                  {\n                    type: 'pie',\n                    field: 'value'\n                  }\n                ]\n              },\n              {\n                name: 'used',\n                source: 'table',\n                transform: [\n                  {\n                    type: 'formula',\n                    expr: \"datum.id === 'Other' ? 'Other' : 'Main'\",\n                    as: 'id'\n                  },\n                  {\n                    type: 'aggregate',\n                    fields: ['field'],\n                    groupby: ['id'],\n                    ops: ['sum'],\n                    as: ['sum']\n                  },\n                  {\n                    type: 'pivot',\n                    field: 'label',\n                    value: 'sum'\n                  }\n                ]\n              }\n            ],\n            scales: [\n              {\n                name: 'color',\n                type: 'ordinal',\n                domain: { data: 'table', field: 'label' },\n                range: { scheme: 'greys' }\n              }\n            ],\n            marks: [\n              {\n                type: 'arc',\n                from: { data: 'table' },\n                encode: {\n                  enter: {\n                    fill: { scale: 'color', field: 'label' },\n                    x: { signal: 'width / 2' },\n                    y: { signal: 'height / 2' },\n                    padAngle: { value: 0.01 }\n                  },\n                  update: {\n                    startAngle: { field: 'startAngle' },\n                    endAngle: { field: 'endAngle' },\n                    innerRadius: { signal: 'width / 2 - 10' },\n                    outerRadius: { signal: 'width / 2' }\n                  }\n                }\n              },\n              {\n                type: 'text',\n                from: { data: 'used' },\n                style: ['percent'],\n                encode: {\n                  enter: {\n                    x: { signal: 'width / 2' },\n                    y: { signal: 'height / 2' },\n                    align: { value: 'center' },\n                    baseline: { value: 'middle' },\n                    fontSize: { value: 24 }\n                  }\n                }\n              }\n            ],\n            legends: [\n              {\n                fill: 'color',\n                direction: 'vertical',\n                encode: {\n                  labels: {\n                    name: 'legendLabel',\n                    enter: { text: { field: 'label' } }\n                  }\n                },\n                orient: 'right',\n                labelColor: theme === 'dark' ? 'white' : 'rgba(0, 0, 0, 0.87)'\n              }\n            ]\n          }}\n        />\n      </Box>\n      {children}\n    </Fragment>\n  )\n\n  return (\n    <WidgetCard\n      theme={theme}\n      ref={ref}\n      headerActions={\n        <ChartSummaryToggle\n          value={params.mode}\n          onChange={(value) => setParam('mode', value)}\n        />\n      }\n      {...other}\n      title={mockData?.title}\n    >\n      {mockData ? (\n        body\n      ) : (\n        <Typography variant='subtitle2'>\n          Could not retrieve widget data. Please contact support.\n        </Typography>\n      )}\n    </WidgetCard>\n  )\n}\n\nexport default forwardRef(DonutChartWidget)\n","export * from './DonutChartWidget';\nexport {default} from './DonutChartWidget';\n"],"mappings":"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"}
+{"version":3,"file":"DonutChartWidget-vOeXhdOe.js","names":["FluentStatsSnippet","WidgetCard","ChartSummaryToggle"],"sources":["../src/UI/widgets/library/DonutChartWidget/DonutChartWidget.jsx","../src/UI/widgets/library/DonutChartWidget/index.ts"],"sourcesContent":["import React, { forwardRef, Fragment } from 'react'\nimport { Grid, Box, Typography } from '@material-ui/core'\nimport { MuiVegaLite } from '@material-vega/material-ui'\nimport WidgetCard from '../../WidgetCard'\nimport FluentStatsSnippet from '../../FluentComponents/atoms/FluentStatsSnippet'\nimport ChartSummaryToggle from '../../FluentComponents/ChartSummaryToggle'\nimport { convertISODate } from '../../utils/ConvertISODate'\n\nexport const layout = {\n  w: { default: 2, min: 0, max: 4 },\n  h: { default: 2, min: 0, max: 4 }\n}\n\nconst DonutChartWidget = (props, ref) => {\n  const { children, params, setParam, ...other } = props\n  const { mockData, apiUrl, theme, dateRange } = params\n\n  let body = (\n    <Fragment>\n      {dateRange && (\n        <Typography gutterBottom variant='caption' component='h3'>\n          From: {convertISODate(dateRange.from)} to:{' '}\n          {convertISODate(dateRange.to)}\n        </Typography>\n      )}\n      <Grid container>\n        {mockData?.stats?.map((stat) => (\n          <Grid item xs={3} key={stat.label}>\n            <FluentStatsSnippet\n              label={stat.label}\n              amount={stat.currentValue}\n              prevAmount={stat.previousValue}\n            />\n          </Grid>\n        ))}\n      </Grid>\n      <Box clone flex={1} mt={1} overflow='hidden'>\n        <MuiVegaLite\n          variant='donutChart'\n          style={{\n            overflow: 'auto',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            padding: 0\n          }}\n          spec={{\n            $schema: 'https://vega.github.io/schema/vega/v5.json',\n            width: 200,\n            height: 200,\n            data: [\n              {\n                name: 'table',\n                values: mockData?.data,\n                transform: [\n                  {\n                    type: 'pie',\n                    field: 'value'\n                  }\n                ]\n              },\n              {\n                name: 'used',\n                source: 'table',\n                transform: [\n                  {\n                    type: 'formula',\n                    expr: \"datum.id === 'Other' ? 'Other' : 'Main'\",\n                    as: 'id'\n                  },\n                  {\n                    type: 'aggregate',\n                    fields: ['field'],\n                    groupby: ['id'],\n                    ops: ['sum'],\n                    as: ['sum']\n                  },\n                  {\n                    type: 'pivot',\n                    field: 'label',\n                    value: 'sum'\n                  }\n                ]\n              }\n            ],\n            scales: [\n              {\n                name: 'color',\n                type: 'ordinal',\n                domain: { data: 'table', field: 'label' },\n                range: { scheme: 'greys' }\n              }\n            ],\n            marks: [\n              {\n                type: 'arc',\n                from: { data: 'table' },\n                encode: {\n                  enter: {\n                    fill: { scale: 'color', field: 'label' },\n                    x: { signal: 'width / 2' },\n                    y: { signal: 'height / 2' },\n                    padAngle: { value: 0.01 }\n                  },\n                  update: {\n                    startAngle: { field: 'startAngle' },\n                    endAngle: { field: 'endAngle' },\n                    innerRadius: { signal: 'width / 2 - 10' },\n                    outerRadius: { signal: 'width / 2' }\n                  }\n                }\n              },\n              {\n                type: 'text',\n                from: { data: 'used' },\n                style: ['percent'],\n                encode: {\n                  enter: {\n                    x: { signal: 'width / 2' },\n                    y: { signal: 'height / 2' },\n                    align: { value: 'center' },\n                    baseline: { value: 'middle' },\n                    fontSize: { value: 24 }\n                  }\n                }\n              }\n            ],\n            legends: [\n              {\n                fill: 'color',\n                direction: 'vertical',\n                encode: {\n                  labels: {\n                    name: 'legendLabel',\n                    enter: { text: { field: 'label' } }\n                  }\n                },\n                orient: 'right',\n                labelColor: theme === 'dark' ? 'white' : 'rgba(0, 0, 0, 0.87)'\n              }\n            ]\n          }}\n        />\n      </Box>\n      {children}\n    </Fragment>\n  )\n\n  return (\n    <WidgetCard\n      theme={theme}\n      ref={ref}\n      headerActions={\n        <ChartSummaryToggle\n          value={params.mode}\n          onChange={(value) => setParam('mode', value)}\n        />\n      }\n      {...other}\n      title={mockData?.title}\n    >\n      {mockData ? (\n        body\n      ) : (\n        <Typography variant='subtitle2'>\n          Could not retrieve widget data. Please contact support.\n        </Typography>\n      )}\n    </WidgetCard>\n  )\n}\n\nexport default forwardRef(DonutChartWidget)\n","export * from './DonutChartWidget';\nexport {default} from './DonutChartWidget';\n"],"mappings":";;;;;;;;;;AAQA,MAAa,SAAS;CACpB,GAAG;EAAE,SAAS;EAAG,KAAK;EAAG,KAAK;EAAG;CACjC,GAAG;EAAE,SAAS;EAAG,KAAK;EAAG,KAAK;EAAG;CAClC;AAED,MAAM,oBAAoB,OAAO,QAAQ;CACvC,MAAM,EAAE,UAAU,QAAQ,UAAU,GAAG,UAAU;CACjD,MAAM,EAAE,UAAU,QAAQ,OAAO,cAAc;CAE/C,IAAI,OACF,oCAAC,gBACE,aACC,oCAAC;EAAW;EAAa,SAAQ;EAAU,WAAU;IAAK,UACjD,eAAe,UAAU,KAAK,EAAC,QAAK,KAC1C,eAAe,UAAU,GAAG,CAClB,EAEf,oCAAC,QAAK,mBACH,UAAU,OAAO,KAAK,SACrB,oCAAC;EAAK;EAAK,IAAI;EAAG,KAAK,KAAK;IAC1B,oCAACA;EACC,OAAO,KAAK;EACZ,QAAQ,KAAK;EACb,YAAY,KAAK;GACjB,CACG,CACP,CACG,EACP,oCAAC;EAAI;EAAM,MAAM;EAAG,IAAI;EAAG,UAAS;IAClC,oCAAC;EACC,SAAQ;EACR,OAAO;GACL,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,SAAS;GACV;EACD,MAAM;GACJ,SAAS;GACT,OAAO;GACP,QAAQ;GACR,MAAM,CACJ;IACE,MAAM;IACN,QAAQ,UAAU;IAClB,WAAW,CACT;KACE,MAAM;KACN,OAAO;KACR,CACF;IACF,EACD;IACE,MAAM;IACN,QAAQ;IACR,WAAW;KACT;MACE,MAAM;MACN,MAAM;MACN,IAAI;MACL;KACD;MACE,MAAM;MACN,QAAQ,CAAC,QAAQ;MACjB,SAAS,CAAC,KAAK;MACf,KAAK,CAAC,MAAM;MACZ,IAAI,CAAC,MAAM;MACZ;KACD;MACE,MAAM;MACN,OAAO;MACP,OAAO;MACR;KACF;IACF,CACF;GACD,QAAQ,CACN;IACE,MAAM;IACN,MAAM;IACN,QAAQ;KAAE,MAAM;KAAS,OAAO;KAAS;IACzC,OAAO,EAAE,QAAQ,SAAS;IAC3B,CACF;GACD,OAAO,CACL;IACE,MAAM;IACN,MAAM,EAAE,MAAM,SAAS;IACvB,QAAQ;KACN,OAAO;MACL,MAAM;OAAE,OAAO;OAAS,OAAO;OAAS;MACxC,GAAG,EAAE,QAAQ,aAAa;MAC1B,GAAG,EAAE,QAAQ,cAAc;MAC3B,UAAU,EAAE,OAAO,KAAM;MAC1B;KACD,QAAQ;MACN,YAAY,EAAE,OAAO,cAAc;MACnC,UAAU,EAAE,OAAO,YAAY;MAC/B,aAAa,EAAE,QAAQ,kBAAkB;MACzC,aAAa,EAAE,QAAQ,aAAa;MACrC;KACF;IACF,EACD;IACE,MAAM;IACN,MAAM,EAAE,MAAM,QAAQ;IACtB,OAAO,CAAC,UAAU;IAClB,QAAQ,EACN,OAAO;KACL,GAAG,EAAE,QAAQ,aAAa;KAC1B,GAAG,EAAE,QAAQ,cAAc;KAC3B,OAAO,EAAE,OAAO,UAAU;KAC1B,UAAU,EAAE,OAAO,UAAU;KAC7B,UAAU,EAAE,OAAO,IAAI;KACxB,EACF;IACF,CACF;GACD,SAAS,CACP;IACE,MAAM;IACN,WAAW;IACX,QAAQ,EACN,QAAQ;KACN,MAAM;KACN,OAAO,EAAE,MAAM,EAAE,OAAO,SAAS,EAAE;KACpC,EACF;IACD,QAAQ;IACR,YAAY,UAAU,SAAS,UAAU;IAC1C,CACF;GACF;GACD,CACE,EACL,SACQ;AAGb,QACE,oCAACC;EACQ;EACF;EACL,eACE,oCAACC;GACC,OAAO,OAAO;GACd,WAAW,UAAU,SAAS,QAAQ,MAAM;IAC5C;EAEJ,GAAI;EACJ,OAAO,UAAU;IAEhB,WACC,OAEA,oCAAC,cAAW,SAAQ,eAAY,0DAEnB,CAEJ;;AAIjB,+BAAe,WAAW,iBAAiB"}

package/dist/{DragDropFileUpload-t3cnq495.js → DragDropFileUpload-CVnUu-6f.js}

@@ -1,6 +1,6 @@
 import { t as FluentButton } from "./FluentButton-BexKrnAp.js";
 import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
-import { t as formatBytes } from "./formatBytes-DDrhQ8O6.js";
+import { t as formatBytes } from "./formatBytes-Bt-B_Lo8.js";
 import React, { useMemo } from "react";
 import { Typography, lighten, makeStyles } from "@material-ui/core";
 import { PageIcon } from "@fluentui/react-icons";
@@ -86,4 +86,4 @@ DragDropFileUpload.propTypes = {
 
 //#endregion
 export { DragDropFileUpload as t };
-//# sourceMappingURL=DragDropFileUpload-t3cnq495.js.map
+//# sourceMappingURL=DragDropFileUpload-CVnUu-6f.js.map

package/dist/{DragDropFileUpload-t3cnq495.js.map → DragDropFileUpload-CVnUu-6f.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DragDropFileUpload-t3cnq495.js","names":[],"sources":["../src/uploader/DragDropFileUpload.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport { useTranslation } from 'react-i18next';\nimport { FluentButton } from '../UI/inputs/buttons/FluentButton';\nimport { FluentIcon } from '../utilities/iconLibrary/FluentIcon';\nimport { formatBytes } from '../utilities/uploader/formatBytes';\nimport { PageIcon } from '@fluentui/react-icons';\nimport { Typography, lighten, makeStyles } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  btnWrapper: {\n    display: 'flex',\n    justifyContent: 'center',\n    gap: theme.spacing(2),\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  dndWrapper: {\n    backgroundColor: lighten(theme.palette.secondary.light, 0.8),\n    height: '100%',\n    minHeight: (props) => props?.minHeight,\n    maxHeight: (props) => props?.maxHeight,\n    display: 'flex',\n    alignItems: 'center',\n    textAlign: 'center',\n    border: `dashed 2px ${lighten(theme.palette.secondary.light, 0.4)}`,\n    overflow: 'hidden'\n  },\n  fileNameWrapper: {\n    display: 'flex',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n    textAlign: 'center',\n    justifyContent: 'center'\n  },\n  dndContent: {\n    flexGrow: 1,\n    textAlign: 'center'\n  },\n  textWrapper: {\n    overflow: 'hidden',\n    marginRight: theme.spacing(2),\n    marginLeft: theme.spacing(2)\n  }\n}));\n\nexport const DragDropFileUpload = (props) => {\n  const {\n    title,\n    handleUploadFile,\n    hideSelectFileButton = false,\n    hideFilePreview = false,\n    minHeight,\n    maxHeight,\n    multiple = false,\n    ...otherDropZoneProps\n  } = props;\n  const { t } = useTranslation();\n  const classes = useStyles({ minHeight, maxHeight });\n\n  const { open, acceptedFiles, getRootProps, getInputProps } = useDropzone({\n    noClick: true,\n    noKeyboard: true,\n    multiple: multiple,\n    onDrop: handleUploadFile,\n    ...otherDropZoneProps\n  });\n\n  const files = useMemo(() => {\n    return acceptedFiles.map((file) => (\n      <div className={classes.fileNameWrapper}>\n        <FluentIcon size='small' component={PageIcon} />\n        <Typography>{` ${file?.path} (${formatBytes(file?.size)})`}</Typography>\n      </div>\n    ));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [acceptedFiles]);\n\n  return (\n    <div>\n      <div\n        {...getRootProps({ className: 'dropzone' })}\n        className={classes.dndWrapper}\n      >\n        <div className={classes.dndContent}>\n          <input {...getInputProps()} />\n          <Typography className={classes.textWrapper}>\n            {title\n              ? title\n              : multiple\n              ? t('Drag and drop files here or select files')\n              : t('Drag and drop a file here or select a file')}\n          </Typography>\n          {!hideSelectFileButton && (\n            <div className={classes.btnWrapper}>\n              <FluentButton\n                onClick={open}\n                color='secondary'\n                variant='contained'\n              >\n                <Typography noWrap>\n                  {multiple ? t('Select Files') : t('Select a File')}\n                </Typography>\n              </FluentButton>\n            </div>\n          )}\n          {!hideFilePreview && <div>{files}</div>}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nDragDropFileUpload.propTypes = {\n  /**\n   * Optional, title\n   */\n  title: PropTypes.string,\n\n  /**\n   * Optional, event handler that accept a param (an array of files) when drop or select files.\n   * can use other props to handle this event such as onDropAccepted, onDropRejected.\n   * https://react-dropzone.js.org/#section-components\n   */\n  handleUploadFile: PropTypes.func,\n\n  /**\n   * Optional, hide or show the select file button (default is false)\n   */\n  hideSelectFileButton: PropTypes.bool,\n\n  /**\n   * Optional, hide or show the file sneak preview (default is false)\n   */\n  hideFilePreview: PropTypes.bool,\n\n  /**\n   * Optional, minimum height\n   */\n  minHeight: PropTypes.string | PropTypes.number,\n\n  /**\n   * Optional, maximum height\n   */\n  maxHeight: PropTypes.string | PropTypes.number,\n\n  /**\n   * Optional, allow to add multiple files at a time (default is false)\n   */\n  multiple: PropTypes.bool\n};\n"],"mappings":";;;;;;;;;;;AAUA,MAAM,YAAY,YAAY,WAAW;CACvC,YAAY;EACV,SAAS;EACT,gBAAgB;EAChB,KAAK,MAAM,QAAQ,EAAE;EACrB,WAAW,MAAM,QAAQ,EAAE;EAC3B,cAAc,MAAM,QAAQ,EAAE;EAC/B;CACD,YAAY;EACV,iBAAiB,QAAQ,MAAM,QAAQ,UAAU,OAAO,GAAI;EAC5D,QAAQ;EACR,YAAY,UAAU,OAAO;EAC7B,YAAY,UAAU,OAAO;EAC7B,SAAS;EACT,YAAY;EACZ,WAAW;EACX,QAAQ,cAAc,QAAQ,MAAM,QAAQ,UAAU,OAAO,GAAI;EACjE,UAAU;EACX;CACD,iBAAiB;EACf,SAAS;EACT,KAAK,MAAM,QAAQ,EAAE;EACrB,YAAY;EACZ,WAAW;EACX,gBAAgB;EACjB;CACD,YAAY;EACV,UAAU;EACV,WAAW;EACZ;CACD,aAAa;EACX,UAAU;EACV,aAAa,MAAM,QAAQ,EAAE;EAC7B,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACF,EAAE;AAEH,MAAa,sBAAsB,UAAU;CAC3C,MAAM,EACJ,OACA,kBACA,uBAAuB,OACvB,kBAAkB,OAClB,WACA,WACA,WAAW,OACX,GAAG,uBACD;CACJ,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,UAAU,UAAU;EAAE;EAAW;EAAW,CAAC;CAEnD,MAAM,EAAE,MAAM,eAAe,cAAc,kBAAkB,YAAY;EACvE,SAAS;EACT,YAAY;EACF;EACV,QAAQ;EACR,GAAG;EACJ,CAAC;CAEF,MAAM,QAAQ,cAAc;AAC1B,SAAO,cAAc,KAAK,SACxB,oCAAC,SAAI,WAAW,QAAQ,mBACtB,oCAAC;GAAW,MAAK;GAAQ,WAAW;IAAY,EAChD,oCAAC,kBAAY,IAAI,MAAM,KAAK,IAAI,YAAY,MAAM,KAAK,CAAC,GAAgB,CACpE,CACN;IAED,CAAC,cAAc,CAAC;AAEnB,QACE,oCAAC,aACC,oCAAC;EACC,GAAI,aAAa,EAAE,WAAW,YAAY,CAAC;EAC3C,WAAW,QAAQ;IAEnB,oCAAC,SAAI,WAAW,QAAQ,cACtB,oCAAC,SAAU,eAAe,CAAI,EAC9B,oCAAC,cAAW,WAAW,QAAQ,eAC5B,QACG,QACA,WACA,EAAE,2CAA2C,GAC7C,EAAE,6CAA6C,CACxC,EACZ,CAAC,wBACA,oCAAC,SAAI,WAAW,QAAQ,cACtB,oCAAC;EACC,SAAS;EACT,OAAM;EACN,SAAQ;IAER,oCAAC,cAAW,gBACT,WAAW,EAAE,eAAe,GAAG,EAAE,gBAAgB,CACvC,CACA,CACX,EAEP,CAAC,mBAAmB,oCAAC,aAAK,MAAY,CACnC,CACF,CACF;;AAIV,mBAAmB,YAAY;CAI7B,OAAO,UAAU;CAOjB,kBAAkB,UAAU;CAK5B,sBAAsB,UAAU;CAKhC,iBAAiB,UAAU;CAK3B,WAAW,UAAU,SAAS,UAAU;CAKxC,WAAW,UAAU,SAAS,UAAU;CAKxC,UAAU,UAAU;CACrB"}
+{"version":3,"file":"DragDropFileUpload-CVnUu-6f.js","names":[],"sources":["../src/uploader/DragDropFileUpload.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport { useTranslation } from 'react-i18next';\nimport { FluentButton } from '../UI/inputs/buttons/FluentButton';\nimport { FluentIcon } from '../utilities/iconLibrary/FluentIcon';\nimport { formatBytes } from '../utilities/uploader/formatBytes';\nimport { PageIcon } from '@fluentui/react-icons';\nimport { Typography, lighten, makeStyles } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  btnWrapper: {\n    display: 'flex',\n    justifyContent: 'center',\n    gap: theme.spacing(2),\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  dndWrapper: {\n    backgroundColor: lighten(theme.palette.secondary.light, 0.8),\n    height: '100%',\n    minHeight: (props) => props?.minHeight,\n    maxHeight: (props) => props?.maxHeight,\n    display: 'flex',\n    alignItems: 'center',\n    textAlign: 'center',\n    border: `dashed 2px ${lighten(theme.palette.secondary.light, 0.4)}`,\n    overflow: 'hidden'\n  },\n  fileNameWrapper: {\n    display: 'flex',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n    textAlign: 'center',\n    justifyContent: 'center'\n  },\n  dndContent: {\n    flexGrow: 1,\n    textAlign: 'center'\n  },\n  textWrapper: {\n    overflow: 'hidden',\n    marginRight: theme.spacing(2),\n    marginLeft: theme.spacing(2)\n  }\n}));\n\nexport const DragDropFileUpload = (props) => {\n  const {\n    title,\n    handleUploadFile,\n    hideSelectFileButton = false,\n    hideFilePreview = false,\n    minHeight,\n    maxHeight,\n    multiple = false,\n    ...otherDropZoneProps\n  } = props;\n  const { t } = useTranslation();\n  const classes = useStyles({ minHeight, maxHeight });\n\n  const { open, acceptedFiles, getRootProps, getInputProps } = useDropzone({\n    noClick: true,\n    noKeyboard: true,\n    multiple: multiple,\n    onDrop: handleUploadFile,\n    ...otherDropZoneProps\n  });\n\n  const files = useMemo(() => {\n    return acceptedFiles.map((file) => (\n      <div className={classes.fileNameWrapper}>\n        <FluentIcon size='small' component={PageIcon} />\n        <Typography>{` ${file?.path} (${formatBytes(file?.size)})`}</Typography>\n      </div>\n    ));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [acceptedFiles]);\n\n  return (\n    <div>\n      <div\n        {...getRootProps({ className: 'dropzone' })}\n        className={classes.dndWrapper}\n      >\n        <div className={classes.dndContent}>\n          <input {...getInputProps()} />\n          <Typography className={classes.textWrapper}>\n            {title\n              ? title\n              : multiple\n              ? t('Drag and drop files here or select files')\n              : t('Drag and drop a file here or select a file')}\n          </Typography>\n          {!hideSelectFileButton && (\n            <div className={classes.btnWrapper}>\n              <FluentButton\n                onClick={open}\n                color='secondary'\n                variant='contained'\n              >\n                <Typography noWrap>\n                  {multiple ? t('Select Files') : t('Select a File')}\n                </Typography>\n              </FluentButton>\n            </div>\n          )}\n          {!hideFilePreview && <div>{files}</div>}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nDragDropFileUpload.propTypes = {\n  /**\n   * Optional, title\n   */\n  title: PropTypes.string,\n\n  /**\n   * Optional, event handler that accept a param (an array of files) when drop or select files.\n   * can use other props to handle this event such as onDropAccepted, onDropRejected.\n   * https://react-dropzone.js.org/#section-components\n   */\n  handleUploadFile: PropTypes.func,\n\n  /**\n   * Optional, hide or show the select file button (default is false)\n   */\n  hideSelectFileButton: PropTypes.bool,\n\n  /**\n   * Optional, hide or show the file sneak preview (default is false)\n   */\n  hideFilePreview: PropTypes.bool,\n\n  /**\n   * Optional, minimum height\n   */\n  minHeight: PropTypes.string | PropTypes.number,\n\n  /**\n   * Optional, maximum height\n   */\n  maxHeight: PropTypes.string | PropTypes.number,\n\n  /**\n   * Optional, allow to add multiple files at a time (default is false)\n   */\n  multiple: PropTypes.bool\n};\n"],"mappings":";;;;;;;;;;;AAUA,MAAM,YAAY,YAAY,WAAW;CACvC,YAAY;EACV,SAAS;EACT,gBAAgB;EAChB,KAAK,MAAM,QAAQ,EAAE;EACrB,WAAW,MAAM,QAAQ,EAAE;EAC3B,cAAc,MAAM,QAAQ,EAAE;EAC/B;CACD,YAAY;EACV,iBAAiB,QAAQ,MAAM,QAAQ,UAAU,OAAO,GAAI;EAC5D,QAAQ;EACR,YAAY,UAAU,OAAO;EAC7B,YAAY,UAAU,OAAO;EAC7B,SAAS;EACT,YAAY;EACZ,WAAW;EACX,QAAQ,cAAc,QAAQ,MAAM,QAAQ,UAAU,OAAO,GAAI;EACjE,UAAU;EACX;CACD,iBAAiB;EACf,SAAS;EACT,KAAK,MAAM,QAAQ,EAAE;EACrB,YAAY;EACZ,WAAW;EACX,gBAAgB;EACjB;CACD,YAAY;EACV,UAAU;EACV,WAAW;EACZ;CACD,aAAa;EACX,UAAU;EACV,aAAa,MAAM,QAAQ,EAAE;EAC7B,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACF,EAAE;AAEH,MAAa,sBAAsB,UAAU;CAC3C,MAAM,EACJ,OACA,kBACA,uBAAuB,OACvB,kBAAkB,OAClB,WACA,WACA,WAAW,OACX,GAAG,uBACD;CACJ,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,UAAU,UAAU;EAAE;EAAW;EAAW,CAAC;CAEnD,MAAM,EAAE,MAAM,eAAe,cAAc,kBAAkB,YAAY;EACvE,SAAS;EACT,YAAY;EACF;EACV,QAAQ;EACR,GAAG;EACJ,CAAC;CAEF,MAAM,QAAQ,cAAc;AAC1B,SAAO,cAAc,KAAK,SACxB,oCAAC,SAAI,WAAW,QAAQ,mBACtB,oCAAC;GAAW,MAAK;GAAQ,WAAW;IAAY,EAChD,oCAAC,kBAAY,IAAI,MAAM,KAAK,IAAI,YAAY,MAAM,KAAK,CAAC,GAAgB,CACpE,CACN;IAED,CAAC,cAAc,CAAC;AAEnB,QACE,oCAAC,aACC,oCAAC;EACC,GAAI,aAAa,EAAE,WAAW,YAAY,CAAC;EAC3C,WAAW,QAAQ;IAEnB,oCAAC,SAAI,WAAW,QAAQ,cACtB,oCAAC,SAAU,eAAe,CAAI,EAC9B,oCAAC,cAAW,WAAW,QAAQ,eAC5B,QACG,QACA,WACA,EAAE,2CAA2C,GAC7C,EAAE,6CAA6C,CACxC,EACZ,CAAC,wBACA,oCAAC,SAAI,WAAW,QAAQ,cACtB,oCAAC;EACC,SAAS;EACT,OAAM;EACN,SAAQ;IAER,oCAAC,cAAW,gBACT,WAAW,EAAE,eAAe,GAAG,EAAE,gBAAgB,CACvC,CACA,CACX,EAEP,CAAC,mBAAmB,oCAAC,aAAK,MAAY,CACnC,CACF,CACF;;AAIV,mBAAmB,YAAY;CAI7B,OAAO,UAAU;CAOjB,kBAAkB,UAAU;CAK5B,sBAAsB,UAAU;CAKhC,iBAAiB,UAAU;CAK3B,WAAW,UAAU,SAAS,UAAU;CAKxC,WAAW,UAAU,SAAS,UAAU;CAKxC,UAAU,UAAU;CACrB"}

package/dist/{EmptyStateDisplay-ByAb3Cp-.js → EmptyStateDisplay-YOwCw38_.js}

@@ -63,4 +63,4 @@ EmptyStateDisplay.defaultProps = {
 
 //#endregion
 export { EmptyStateDisplay as t };
-//# sourceMappingURL=EmptyStateDisplay-ByAb3Cp-.js.map
+//# sourceMappingURL=EmptyStateDisplay-YOwCw38_.js.map

package/dist/{EmptyStateDisplay-ByAb3Cp-.js.map → EmptyStateDisplay-YOwCw38_.js.map}

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

package/dist/{EntityHeader-C67RYWfk.js → EntityHeader-CuiVOsA7.js}

@@ -2,7 +2,7 @@ import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
 import { t as IconRenderer } from "./IconRenderer-B6ZoqrTX.js";
 import { n as AlertPill } from "./AggregateChip-6GSEsL_A.js";
 import { t as UdpAlertsContainer } from "./UdpAlertsContainer-Dz76Kg2v.js";
-import { t as ChipAlphabet } from "./ChipAlphabet-DHYk3H34.js";
+import { t as ChipAlphabet } from "./ChipAlphabet-DCU1DsB-.js";
 import React, { Children, cloneElement, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Avatar, Divider, Link, Typography, alpha, darken, lighten, makeStyles } from "@material-ui/core";
 import clsx from "clsx";
@@ -525,4 +525,4 @@ EntityHeader.propTypes = {
 
 //#endregion
 export { EntityHeader as t };
-//# sourceMappingURL=EntityHeader-C67RYWfk.js.map
+//# sourceMappingURL=EntityHeader-CuiVOsA7.js.map

package/dist/{EntityHeader-C67RYWfk.js.map → EntityHeader-CuiVOsA7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"EntityHeader-C67RYWfk.js","names":["useStyles","useStyles","useStyles","useStyles","useStyles","useStyles","useTheme","useStyles"],"sources":["../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, { 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-CuiVOsA7.js","names":["useStyles","useStyles","useStyles","useStyles","useStyles","useStyles","useTheme","useStyles"],"sources":["../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, { 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/{ExportSidesheet-CuvPx8QK.js → ExportSidesheet-DWkoiwxC.js}

@@ -6,9 +6,9 @@ import { i as executeQueryWithParameters, t as executeQueryAdHoc } from "./metho
 import { t as AmbientCard } from "./AmbientCard-CLW4bPCu.js";
 import { t as usePromotedMethodEntity } from "./usePromotedMethodEntity-B4rk75tH.js";
 import { t as LinearProgress$1 } from "./LinearProgress-CpJeIaEP.js";
-import { t as AmbientAlert } from "./AmbientAlert-DBGoaurU.js";
-import { t as EmptyStateDisplay } from "./EmptyStateDisplay-ByAb3Cp-.js";
-import { t as FluentListItem } from "./FluentListItem-C1jkO1cj.js";
+import { t as AmbientAlert } from "./AmbientAlert-DcYkGCUm.js";
+import { t as EmptyStateDisplay } from "./EmptyStateDisplay-YOwCw38_.js";
+import { t as FluentListItem } from "./FluentListItem-_Nq3fhEY.js";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Box, Chip, Slide } from "@material-ui/core";
 import { useHistory } from "react-router-dom";
@@ -331,4 +331,4 @@ const ExportSidesheet = (props) => {
 
 //#endregion
 export { VisualSearchObject as n, useUdpExport as r, ExportSidesheet as t };
-//# sourceMappingURL=ExportSidesheet-CuvPx8QK.js.map
+//# sourceMappingURL=ExportSidesheet-DWkoiwxC.js.map

package/dist/{ExportSidesheet-CuvPx8QK.js.map → ExportSidesheet-DWkoiwxC.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ExportSidesheet-CuvPx8QK.js","names":["entity","searchObject","Typography","LinearProgress"],"sources":["../src/udp/export/useUdpExport.js","../src/udp/export/VisualSearchObject.jsx","../src/udp/export/ExportSidesheet.jsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { executeQueryAdHoc } from '../utilities/methodUtils';\nimport { executeQueryWithParameters } from '../utilities/methodUtils';\nimport { usePromotedMethodEntity } from '../../hooks/usePromotedMethodEntity';\nimport { getSanitizedName } from '../../utilities/entities/entityUtilities';\n\nexport const useUdpExport = (apiCatalogId, productId) => {\n  const [entity, setEntity] = useState();\n  const [searchObject, setSearchObject] = useState();\n  const [fileFormat, setFileFormat] = useState('.XLSX');\n  const [numRowsToExport, setNumRowsToExport] = useState(null);\n  const [validSearch, setValidSearch] = useState(false);\n  const [errorList, setErrorList] = useState([]);\n  const [activeExportJob, setActiveExportJob] = useState();\n  const [exportLoading, setExportLoading] = useState(false);\n  const [fileResultData, setFileResultData] = useState();\n\n  const { data: selectedEntity, loading: entityLoading } =\n    usePromotedMethodEntity(entity, true, apiCatalogId, productId);\n  const { data: udpJobEntity } = usePromotedMethodEntity(\n    'udpJob',\n    true,\n    apiCatalogId,\n    productId\n  );\n\n  const refetchActiveJobData = useCallback(async () => {\n    if (udpJobEntity?.unityBaseGetMethod?.apiMethodId) {\n      await executeQueryWithParameters(\n        {\n          data: { id: activeExportJob?.id }\n        },\n        udpJobEntity?.unityBaseGetMethod?.apiMethodId\n      )\n        .then((res) => {\n          setActiveExportJob(res.data);\n        })\n        .catch((err) => {\n          addErrorIfNotExists(\n            'jobstatus',\n            'Error getting job status ',\n            'error'\n          );\n        });\n    }\n  }, [activeExportJob?.id, udpJobEntity?.unityBaseGetMethod?.apiMethodId]);\n\n  const refetchfileResultData = useCallback(async () => {\n    if (udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId) {\n      await executeQueryWithParameters(\n        {\n          data: { JobId: activeExportJob?.id }\n        },\n        udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId\n      )\n        .then((res) => {\n          setFileResultData(res.data);\n        })\n        .catch((err) => {\n          addErrorIfNotExists('fileError', 'Error getting file ', 'error');\n        });\n    }\n  }, [\n    activeExportJob?.id,\n    udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId\n  ]);\n\n  const clearParameters = useCallback(() => {\n    setEntity(null);\n    setSearchObject(null);\n    setNumRowsToExport(null);\n    setActiveExportJob(null);\n    setErrorList([]);\n  }, []);\n\n  const updateExportParameters = useCallback((entity, searchObject) => {\n    setEntity(entity);\n    setSearchObject(searchObject);\n  }, []);\n\n  const addErrorIfNotExists = (id, message, severity = 'error') => {\n    setErrorList((prev) => {\n      const exists = prev.some((error) => error.id === id);\n      if (!exists) {\n        return [...prev, { id, message, severity }];\n      }\n      return prev;\n    });\n  };\n\n  const initialSearchWithParams = useCallback(async () => {\n    await executeQueryAdHoc(\n      {\n        data: {\n          ...searchObject,\n          pageSize: 1\n        }\n      },\n      selectedEntity?.unityBaseSearchMethod?.apiMethodId\n    )\n      .then((res) => {\n        setNumRowsToExport(res?.data?.total);\n      })\n      .catch((err) => {\n        addErrorIfNotExists(\n          'searchObject',\n          'Error fetching row count',\n          'error'\n        );\n      });\n  }, [searchObject, selectedEntity]);\n\n  const createExport = useCallback(async () => {\n    if (selectedEntity?.unityBaseExportMethod?.apiMethodId) {\n      setExportLoading(true);\n      await executeQueryWithParameters(\n        {\n          data: {\n            requestBody: {\n              debug: true,\n              exportAcrossAssociations: false,\n              exportOnAllAssociations: false,\n              exportSiblings: false,\n              search: searchObject\n            }\n          }\n        },\n        selectedEntity?.unityBaseExportMethod?.apiMethodId\n      )\n        .then((res) => {\n          setActiveExportJob(res?.data);\n          setExportLoading(false);\n        })\n        .catch((err) => {\n          addErrorIfNotExists(\n            'exportRequest',\n            'Error creating the export job',\n            'error'\n          );\n          setExportLoading(false);\n        });\n    }\n  }, [searchObject, selectedEntity?.unityBaseExportMethod?.apiMethodId]);\n\n  useEffect(() => {\n    if (!entityLoading) {\n      if (selectedEntity?.unityBaseSearchMethod === null) {\n        addErrorIfNotExists(\n          'search',\n          `${getSanitizedName(entity)}'s search method must be promoted`,\n          'error'\n        );\n      } else {\n        initialSearchWithParams();\n      }\n      if (selectedEntity?.unityBaseExportMethod === null) {\n        addErrorIfNotExists(\n          'export',\n          `${getSanitizedName(entity)}'s export method must be promoted`,\n          'error'\n        );\n      }\n    }\n  }, [initialSearchWithParams, selectedEntity, entity, entityLoading]);\n\n  useEffect(() => {\n    if (entity) {\n      if (\n        udpJobEntity &&\n        !udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId\n      ) {\n        addErrorIfNotExists(\n          'fileResultGet',\n          `UdpJob's GetFileResult must be promoted to download the file`,\n          'warning'\n        );\n      }\n\n      if (udpJobEntity && !udpJobEntity?.unityBaseGetMethod?.apiMethodId) {\n        addErrorIfNotExists(\n          'fileBaseGet',\n          `UdpJob's Get method must be promoted to view job status`,\n          'warning'\n        );\n      }\n    }\n  }, [entity, udpJobEntity]);\n\n  useEffect(() => {\n    let isValid = true;\n    errorList?.forEach((item) => {\n      if (item.severity === 'error') {\n        isValid = false;\n      }\n    });\n    setValidSearch(isValid);\n  }, [errorList]);\n\n  useEffect(() => {\n    if (\n      !activeExportJob ||\n      activeExportJob?.statusId === 3 ||\n      activeExportJob?.statusId === 4\n    )\n      return;\n\n    const intervalId = setInterval(() => {\n      refetchActiveJobData();\n    }, 5000);\n\n    return () => clearInterval(intervalId);\n  }, [activeExportJob, refetchActiveJobData]);\n\n  useEffect(() => {\n    if (activeExportJob?.statusId === 3) {\n      refetchfileResultData();\n    }\n  }, [activeExportJob?.statusId, refetchfileResultData]);\n\n  const handleFileDownload = useCallback(() => {\n    if (fileResultData?.link) {\n      const link = document.createElement('a');\n      link.href = fileResultData?.link;\n      link.download = '';\n      document.body.appendChild(link);\n      link.click();\n      document.body.removeChild(link);\n    }\n  }, [fileResultData?.link]);\n\n  return {\n    updateExportParameters,\n    createExport,\n    entity,\n    searchObject,\n    fileFormat,\n    numRowsToExport,\n    validSearch,\n    errorList,\n    activeExportJob,\n    exportLoading,\n    handleFileDownload,\n    clearParameters\n  };\n};\n","import React, { useMemo } from 'react';\nimport { Box, Chip } from '@material-ui/core';\nimport { StatusChip } from '../../UI/dataDisplay/status/StatusChip';\n\nexport const VisualSearchObject = ({ searchObject }) => {\n  // 1️⃣ Safely default to an empty object if searchObject is null/undefined:\n  const safeSO = searchObject || {};\n\n  // 2️⃣ Destructure with defaults for each property:\n  const {\n    filterElements = [],\n    filterGroups = [],\n    logicalSearchOperator = 1,\n  } = safeSO;\n\n  const filtersByGroup = useMemo(() => {\n    return filterElements.reduce((acc, fe) => {\n      const gid = fe.groupId ?? 0;\n      (acc[gid] = acc[gid] || []).push(fe);\n      return acc;\n    }, {});\n  }, [filterElements]);\n\n  const groupLookup = useMemo(() => {\n    const lookup = {};\n    filterGroups.forEach(g => {\n      lookup[g.groupId] = { ...g, children: [] };\n    });\n    filterGroups.forEach(g => {\n      if (g.parentGroupId && lookup[g.parentGroupId]) {\n        lookup[g.parentGroupId].children.push(lookup[g.groupId]);\n      }\n    });\n    return lookup;\n  }, [filterGroups]);\n\n  const topLevelGroups = useMemo(() => {\n    return filterGroups\n      .filter(g => !g.parentGroupId)\n      .map(g => groupLookup[g.groupId]);\n  }, [filterGroups, groupLookup]);\n\n  // virtual root\n  const rootGroup = {\n    groupId: 0,\n    logicalSearchOperator,\n    children: topLevelGroups,\n  };\n\n  // 4️⃣ Recursive render\n  const OpLabel = { 1: 'AND', 2: 'OR' };\n  const renderGroup = (group, level = 0) => (\n    <Box\n      key={group.groupId}\n      border={1}\n      borderColor=\"grey.300\"\n      borderRadius={4}\n      p={1}\n      ml={level * 2}\n      mb={1}\n      bgcolor={level === 0 ? 'grey.100' : 'transparent'}\n    >\n      <Box mb={1}>\n        <StatusChip\n          label={OpLabel[group.logicalSearchOperator] || 'AND'}\n          status=\"info\"\n          size=\"small\"\n        />\n      </Box>\n      <Box display=\"flex\" flexWrap=\"wrap\" mb={group.children.length ? 1 : 0}>\n        {(filtersByGroup[group.groupId] || []).map((fe, i) => (\n          <Chip\n            key={`g${group.groupId}-f${i}`}\n            size=\"small\"\n            label={`${fe.searchField} ${fe.searchOperator} ${fe.searchValue}`}\n            style={{ marginRight: 4, marginBottom: 4 }}\n          />\n        ))}\n      </Box>\n      {group.children.map(c => renderGroup(c, level + 1))}\n    </Box>\n  );\n\n  // 5️⃣ Finally, render nothing if truly empty:\n  const hasAnything =\n    filterElements.length > 0 || filterGroups.length > 0;\n\n  if (!hasAnything) return null;\n\n  return (\n    <Box>\n      {renderGroup(rootGroup)}\n    </Box>\n  );\n};\n","import React, { useEffect, useState } from 'react';\nimport { AmbientCard } from '../../UI/surfaces/cards/AmbientCard';\nimport { Typography } from '../../UI/dataDisplay/typography/Typography';\nimport { getSanitizedName } from '../../utilities/entities/entityUtilities';\nimport { FluentListItem } from '../../UI/dataDisplay/FluentListItem';\nimport { VisualSearchObject } from './VisualSearchObject';\nimport { AmbientAlert } from '../../UI/feedback/AmbientAlert';\nimport { Skeleton } from '@material-ui/lab';\nimport { StatusChip } from '../../UI/dataDisplay/status/StatusChip';\nimport { Slide } from '@material-ui/core';\nimport { LinearProgress } from '../../UI/loading/LinearProgress';\nimport { EmptyStateDisplay } from '../../UI/dataDisplay/EmptyStateDisplay';\nimport { StatusCircleCheckmarkIcon } from '@fluentui/react-icons';\nimport { SideSheet } from '../../UI/surfaces/SideSheet';\nimport { useHistory } from 'react-router-dom';\n\nexport const ExportSidesheet = (props) => {\n  const {\n    entity,\n    numRowsToExport,\n    fileFormat,\n    searchObject,\n    errorList,\n    activeExportJob,\n    handleFileDownload,\n    exportSidesheetOpen,\n    handleCloseExportSidesheet,\n    createExport,\n    exportLoading,\n    validSearch\n  } = props;\n\n  const history = useHistory();\n  const [page, setPage] = useState('exportSummary');\n\n  useEffect(() => {\n    if (activeExportJob?.id) {\n      setPage('transition');\n    }\n  }, [activeExportJob?.id]);\n\n  const handleSummaryExited = () => {\n    setPage('exportProgress');\n  };\n\n  const getJobStatus = (value) => {\n    if (value === 1) {\n      return { status: null, label: 'Pending' };\n    } else if (value === 2) {\n      return { status: 'info', label: 'Running' };\n    } else if (value === 3) {\n      return { status: 'success', label: 'Completed' };\n    } else if (value === 4) {\n      return { status: 'error', label: 'Failed' };\n    }\n  };\n\n  const onCloseSidesheet = () => {\n    setPage('exportSummary');\n    handleCloseExportSidesheet();\n  };\n\n  return (\n    <SideSheet\n      open={exportSidesheetOpen}\n      onClose={onCloseSidesheet}\n      width={'50%'}\n      onSubmit={createExport}\n      buttonLabel={'Create Export'}\n      buttonTwoLabel='My Exports'\n      buttonTwoAction={() => history.push('/myexports')}\n      progress={exportLoading}\n      buttonOneDisabled={!validSearch || activeExportJob}\n    >\n      <div>\n        {errorList?.map((error) => (\n          <AmbientAlert\n            alertMessage={error.message}\n            showAlert={true}\n            alertSeverity={error.severity}\n          />\n        ))}\n        <Slide\n          in={page === 'exportSummary'}\n          onExited={handleSummaryExited}\n          direction='right'\n          unmountOnExit\n          appear={false}\n        >\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>\n            <AmbientCard title='Export Summary' fullWidth removeTopLayoutUnit>\n              <Typography>\n                You are about to export all records from this table using your\n                search criteria.\n              </Typography>\n              <div style={{ marginTop: 16 }}>\n                <FluentListItem\n                  subject='Table'\n                  value={getSanitizedName(entity)}\n                />\n                <FluentListItem\n                  subject='Number of Rows'\n                  value={numRowsToExport ?? <Skeleton width={40} height={26} />}\n                />\n              </div>\n            </AmbientCard>\n            <AmbientCard title='Applied Filters' fullWidth>\n              <VisualSearchObject searchObject={searchObject} />\n            </AmbientCard>\n            <AmbientCard title='Export Options' fullWidth>\n              <FluentListItem subject='File Format' value={fileFormat} />\n            </AmbientCard>\n          </div>\n        </Slide>\n        <Slide in={page === 'exportProgress'} direction='left' mountOnEnter>\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>\n            <AmbientCard title={`Job Details`} fullWidth removeTopLayoutUnit>\n              <div style={{ marginBottom: 25 }}>\n                <Typography>\n                  Exports are handled in the background. You can safely close\n                  this window.\n                </Typography>\n              </div>\n              <FluentListItem subject='Job Id' value={activeExportJob?.id} />\n              <FluentListItem\n                subject='Status'\n                value={\n                  <StatusChip\n                    status={getJobStatus(activeExportJob?.statusId)?.status}\n                    label={getJobStatus(activeExportJob?.statusId)?.label}\n                  />\n                }\n              />\n            </AmbientCard>\n            <AmbientCard\n              title={`Export ${getJobStatus(activeExportJob?.statusId)?.label}`}\n              fullWidth\n              removeTopLayoutUnit\n            >\n              {(activeExportJob?.statusId === 1 ||\n                activeExportJob?.statusId === 2) && <LinearProgress />}\n              {activeExportJob?.statusId === 3 &&\n                (!errorList.some((err) => err?.id === 'fileResultGet') ? (\n                  <EmptyStateDisplay\n                    icon={StatusCircleCheckmarkIcon}\n                    primaryText={'File is ready!'}\n                    actionLabel='Download'\n                    action={handleFileDownload && (() => handleFileDownload())}\n                  />\n                ) : (\n                  <Typography>\n                    To download the file, please go to the My Exports page.\n                  </Typography>\n                ))}\n            </AmbientCard>\n          </div>\n        </Slide>\n      </div>\n    </SideSheet>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ExportSidesheet-DWkoiwxC.js","names":["entity","searchObject","Typography","LinearProgress"],"sources":["../src/udp/export/useUdpExport.js","../src/udp/export/VisualSearchObject.jsx","../src/udp/export/ExportSidesheet.jsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { executeQueryAdHoc } from '../utilities/methodUtils';\nimport { executeQueryWithParameters } from '../utilities/methodUtils';\nimport { usePromotedMethodEntity } from '../../hooks/usePromotedMethodEntity';\nimport { getSanitizedName } from '../../utilities/entities/entityUtilities';\n\nexport const useUdpExport = (apiCatalogId, productId) => {\n  const [entity, setEntity] = useState();\n  const [searchObject, setSearchObject] = useState();\n  const [fileFormat, setFileFormat] = useState('.XLSX');\n  const [numRowsToExport, setNumRowsToExport] = useState(null);\n  const [validSearch, setValidSearch] = useState(false);\n  const [errorList, setErrorList] = useState([]);\n  const [activeExportJob, setActiveExportJob] = useState();\n  const [exportLoading, setExportLoading] = useState(false);\n  const [fileResultData, setFileResultData] = useState();\n\n  const { data: selectedEntity, loading: entityLoading } =\n    usePromotedMethodEntity(entity, true, apiCatalogId, productId);\n  const { data: udpJobEntity } = usePromotedMethodEntity(\n    'udpJob',\n    true,\n    apiCatalogId,\n    productId\n  );\n\n  const refetchActiveJobData = useCallback(async () => {\n    if (udpJobEntity?.unityBaseGetMethod?.apiMethodId) {\n      await executeQueryWithParameters(\n        {\n          data: { id: activeExportJob?.id }\n        },\n        udpJobEntity?.unityBaseGetMethod?.apiMethodId\n      )\n        .then((res) => {\n          setActiveExportJob(res.data);\n        })\n        .catch((err) => {\n          addErrorIfNotExists(\n            'jobstatus',\n            'Error getting job status ',\n            'error'\n          );\n        });\n    }\n  }, [activeExportJob?.id, udpJobEntity?.unityBaseGetMethod?.apiMethodId]);\n\n  const refetchfileResultData = useCallback(async () => {\n    if (udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId) {\n      await executeQueryWithParameters(\n        {\n          data: { JobId: activeExportJob?.id }\n        },\n        udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId\n      )\n        .then((res) => {\n          setFileResultData(res.data);\n        })\n        .catch((err) => {\n          addErrorIfNotExists('fileError', 'Error getting file ', 'error');\n        });\n    }\n  }, [\n    activeExportJob?.id,\n    udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId\n  ]);\n\n  const clearParameters = useCallback(() => {\n    setEntity(null);\n    setSearchObject(null);\n    setNumRowsToExport(null);\n    setActiveExportJob(null);\n    setErrorList([]);\n  }, []);\n\n  const updateExportParameters = useCallback((entity, searchObject) => {\n    setEntity(entity);\n    setSearchObject(searchObject);\n  }, []);\n\n  const addErrorIfNotExists = (id, message, severity = 'error') => {\n    setErrorList((prev) => {\n      const exists = prev.some((error) => error.id === id);\n      if (!exists) {\n        return [...prev, { id, message, severity }];\n      }\n      return prev;\n    });\n  };\n\n  const initialSearchWithParams = useCallback(async () => {\n    await executeQueryAdHoc(\n      {\n        data: {\n          ...searchObject,\n          pageSize: 1\n        }\n      },\n      selectedEntity?.unityBaseSearchMethod?.apiMethodId\n    )\n      .then((res) => {\n        setNumRowsToExport(res?.data?.total);\n      })\n      .catch((err) => {\n        addErrorIfNotExists(\n          'searchObject',\n          'Error fetching row count',\n          'error'\n        );\n      });\n  }, [searchObject, selectedEntity]);\n\n  const createExport = useCallback(async () => {\n    if (selectedEntity?.unityBaseExportMethod?.apiMethodId) {\n      setExportLoading(true);\n      await executeQueryWithParameters(\n        {\n          data: {\n            requestBody: {\n              debug: true,\n              exportAcrossAssociations: false,\n              exportOnAllAssociations: false,\n              exportSiblings: false,\n              search: searchObject\n            }\n          }\n        },\n        selectedEntity?.unityBaseExportMethod?.apiMethodId\n      )\n        .then((res) => {\n          setActiveExportJob(res?.data);\n          setExportLoading(false);\n        })\n        .catch((err) => {\n          addErrorIfNotExists(\n            'exportRequest',\n            'Error creating the export job',\n            'error'\n          );\n          setExportLoading(false);\n        });\n    }\n  }, [searchObject, selectedEntity?.unityBaseExportMethod?.apiMethodId]);\n\n  useEffect(() => {\n    if (!entityLoading) {\n      if (selectedEntity?.unityBaseSearchMethod === null) {\n        addErrorIfNotExists(\n          'search',\n          `${getSanitizedName(entity)}'s search method must be promoted`,\n          'error'\n        );\n      } else {\n        initialSearchWithParams();\n      }\n      if (selectedEntity?.unityBaseExportMethod === null) {\n        addErrorIfNotExists(\n          'export',\n          `${getSanitizedName(entity)}'s export method must be promoted`,\n          'error'\n        );\n      }\n    }\n  }, [initialSearchWithParams, selectedEntity, entity, entityLoading]);\n\n  useEffect(() => {\n    if (entity) {\n      if (\n        udpJobEntity &&\n        !udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId\n      ) {\n        addErrorIfNotExists(\n          'fileResultGet',\n          `UdpJob's GetFileResult must be promoted to download the file`,\n          'warning'\n        );\n      }\n\n      if (udpJobEntity && !udpJobEntity?.unityBaseGetMethod?.apiMethodId) {\n        addErrorIfNotExists(\n          'fileBaseGet',\n          `UdpJob's Get method must be promoted to view job status`,\n          'warning'\n        );\n      }\n    }\n  }, [entity, udpJobEntity]);\n\n  useEffect(() => {\n    let isValid = true;\n    errorList?.forEach((item) => {\n      if (item.severity === 'error') {\n        isValid = false;\n      }\n    });\n    setValidSearch(isValid);\n  }, [errorList]);\n\n  useEffect(() => {\n    if (\n      !activeExportJob ||\n      activeExportJob?.statusId === 3 ||\n      activeExportJob?.statusId === 4\n    )\n      return;\n\n    const intervalId = setInterval(() => {\n      refetchActiveJobData();\n    }, 5000);\n\n    return () => clearInterval(intervalId);\n  }, [activeExportJob, refetchActiveJobData]);\n\n  useEffect(() => {\n    if (activeExportJob?.statusId === 3) {\n      refetchfileResultData();\n    }\n  }, [activeExportJob?.statusId, refetchfileResultData]);\n\n  const handleFileDownload = useCallback(() => {\n    if (fileResultData?.link) {\n      const link = document.createElement('a');\n      link.href = fileResultData?.link;\n      link.download = '';\n      document.body.appendChild(link);\n      link.click();\n      document.body.removeChild(link);\n    }\n  }, [fileResultData?.link]);\n\n  return {\n    updateExportParameters,\n    createExport,\n    entity,\n    searchObject,\n    fileFormat,\n    numRowsToExport,\n    validSearch,\n    errorList,\n    activeExportJob,\n    exportLoading,\n    handleFileDownload,\n    clearParameters\n  };\n};\n","import React, { useMemo } from 'react';\nimport { Box, Chip } from '@material-ui/core';\nimport { StatusChip } from '../../UI/dataDisplay/status/StatusChip';\n\nexport const VisualSearchObject = ({ searchObject }) => {\n  // 1️⃣ Safely default to an empty object if searchObject is null/undefined:\n  const safeSO = searchObject || {};\n\n  // 2️⃣ Destructure with defaults for each property:\n  const {\n    filterElements = [],\n    filterGroups = [],\n    logicalSearchOperator = 1,\n  } = safeSO;\n\n  const filtersByGroup = useMemo(() => {\n    return filterElements.reduce((acc, fe) => {\n      const gid = fe.groupId ?? 0;\n      (acc[gid] = acc[gid] || []).push(fe);\n      return acc;\n    }, {});\n  }, [filterElements]);\n\n  const groupLookup = useMemo(() => {\n    const lookup = {};\n    filterGroups.forEach(g => {\n      lookup[g.groupId] = { ...g, children: [] };\n    });\n    filterGroups.forEach(g => {\n      if (g.parentGroupId && lookup[g.parentGroupId]) {\n        lookup[g.parentGroupId].children.push(lookup[g.groupId]);\n      }\n    });\n    return lookup;\n  }, [filterGroups]);\n\n  const topLevelGroups = useMemo(() => {\n    return filterGroups\n      .filter(g => !g.parentGroupId)\n      .map(g => groupLookup[g.groupId]);\n  }, [filterGroups, groupLookup]);\n\n  // virtual root\n  const rootGroup = {\n    groupId: 0,\n    logicalSearchOperator,\n    children: topLevelGroups,\n  };\n\n  // 4️⃣ Recursive render\n  const OpLabel = { 1: 'AND', 2: 'OR' };\n  const renderGroup = (group, level = 0) => (\n    <Box\n      key={group.groupId}\n      border={1}\n      borderColor=\"grey.300\"\n      borderRadius={4}\n      p={1}\n      ml={level * 2}\n      mb={1}\n      bgcolor={level === 0 ? 'grey.100' : 'transparent'}\n    >\n      <Box mb={1}>\n        <StatusChip\n          label={OpLabel[group.logicalSearchOperator] || 'AND'}\n          status=\"info\"\n          size=\"small\"\n        />\n      </Box>\n      <Box display=\"flex\" flexWrap=\"wrap\" mb={group.children.length ? 1 : 0}>\n        {(filtersByGroup[group.groupId] || []).map((fe, i) => (\n          <Chip\n            key={`g${group.groupId}-f${i}`}\n            size=\"small\"\n            label={`${fe.searchField} ${fe.searchOperator} ${fe.searchValue}`}\n            style={{ marginRight: 4, marginBottom: 4 }}\n          />\n        ))}\n      </Box>\n      {group.children.map(c => renderGroup(c, level + 1))}\n    </Box>\n  );\n\n  // 5️⃣ Finally, render nothing if truly empty:\n  const hasAnything =\n    filterElements.length > 0 || filterGroups.length > 0;\n\n  if (!hasAnything) return null;\n\n  return (\n    <Box>\n      {renderGroup(rootGroup)}\n    </Box>\n  );\n};\n","import React, { useEffect, useState } from 'react';\nimport { AmbientCard } from '../../UI/surfaces/cards/AmbientCard';\nimport { Typography } from '../../UI/dataDisplay/typography/Typography';\nimport { getSanitizedName } from '../../utilities/entities/entityUtilities';\nimport { FluentListItem } from '../../UI/dataDisplay/FluentListItem';\nimport { VisualSearchObject } from './VisualSearchObject';\nimport { AmbientAlert } from '../../UI/feedback/AmbientAlert';\nimport { Skeleton } from '@material-ui/lab';\nimport { StatusChip } from '../../UI/dataDisplay/status/StatusChip';\nimport { Slide } from '@material-ui/core';\nimport { LinearProgress } from '../../UI/loading/LinearProgress';\nimport { EmptyStateDisplay } from '../../UI/dataDisplay/EmptyStateDisplay';\nimport { StatusCircleCheckmarkIcon } from '@fluentui/react-icons';\nimport { SideSheet } from '../../UI/surfaces/SideSheet';\nimport { useHistory } from 'react-router-dom';\n\nexport const ExportSidesheet = (props) => {\n  const {\n    entity,\n    numRowsToExport,\n    fileFormat,\n    searchObject,\n    errorList,\n    activeExportJob,\n    handleFileDownload,\n    exportSidesheetOpen,\n    handleCloseExportSidesheet,\n    createExport,\n    exportLoading,\n    validSearch\n  } = props;\n\n  const history = useHistory();\n  const [page, setPage] = useState('exportSummary');\n\n  useEffect(() => {\n    if (activeExportJob?.id) {\n      setPage('transition');\n    }\n  }, [activeExportJob?.id]);\n\n  const handleSummaryExited = () => {\n    setPage('exportProgress');\n  };\n\n  const getJobStatus = (value) => {\n    if (value === 1) {\n      return { status: null, label: 'Pending' };\n    } else if (value === 2) {\n      return { status: 'info', label: 'Running' };\n    } else if (value === 3) {\n      return { status: 'success', label: 'Completed' };\n    } else if (value === 4) {\n      return { status: 'error', label: 'Failed' };\n    }\n  };\n\n  const onCloseSidesheet = () => {\n    setPage('exportSummary');\n    handleCloseExportSidesheet();\n  };\n\n  return (\n    <SideSheet\n      open={exportSidesheetOpen}\n      onClose={onCloseSidesheet}\n      width={'50%'}\n      onSubmit={createExport}\n      buttonLabel={'Create Export'}\n      buttonTwoLabel='My Exports'\n      buttonTwoAction={() => history.push('/myexports')}\n      progress={exportLoading}\n      buttonOneDisabled={!validSearch || activeExportJob}\n    >\n      <div>\n        {errorList?.map((error) => (\n          <AmbientAlert\n            alertMessage={error.message}\n            showAlert={true}\n            alertSeverity={error.severity}\n          />\n        ))}\n        <Slide\n          in={page === 'exportSummary'}\n          onExited={handleSummaryExited}\n          direction='right'\n          unmountOnExit\n          appear={false}\n        >\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>\n            <AmbientCard title='Export Summary' fullWidth removeTopLayoutUnit>\n              <Typography>\n                You are about to export all records from this table using your\n                search criteria.\n              </Typography>\n              <div style={{ marginTop: 16 }}>\n                <FluentListItem\n                  subject='Table'\n                  value={getSanitizedName(entity)}\n                />\n                <FluentListItem\n                  subject='Number of Rows'\n                  value={numRowsToExport ?? <Skeleton width={40} height={26} />}\n                />\n              </div>\n            </AmbientCard>\n            <AmbientCard title='Applied Filters' fullWidth>\n              <VisualSearchObject searchObject={searchObject} />\n            </AmbientCard>\n            <AmbientCard title='Export Options' fullWidth>\n              <FluentListItem subject='File Format' value={fileFormat} />\n            </AmbientCard>\n          </div>\n        </Slide>\n        <Slide in={page === 'exportProgress'} direction='left' mountOnEnter>\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>\n            <AmbientCard title={`Job Details`} fullWidth removeTopLayoutUnit>\n              <div style={{ marginBottom: 25 }}>\n                <Typography>\n                  Exports are handled in the background. You can safely close\n                  this window.\n                </Typography>\n              </div>\n              <FluentListItem subject='Job Id' value={activeExportJob?.id} />\n              <FluentListItem\n                subject='Status'\n                value={\n                  <StatusChip\n                    status={getJobStatus(activeExportJob?.statusId)?.status}\n                    label={getJobStatus(activeExportJob?.statusId)?.label}\n                  />\n                }\n              />\n            </AmbientCard>\n            <AmbientCard\n              title={`Export ${getJobStatus(activeExportJob?.statusId)?.label}`}\n              fullWidth\n              removeTopLayoutUnit\n            >\n              {(activeExportJob?.statusId === 1 ||\n                activeExportJob?.statusId === 2) && <LinearProgress />}\n              {activeExportJob?.statusId === 3 &&\n                (!errorList.some((err) => err?.id === 'fileResultGet') ? (\n                  <EmptyStateDisplay\n                    icon={StatusCircleCheckmarkIcon}\n                    primaryText={'File is ready!'}\n                    actionLabel='Download'\n                    action={handleFileDownload && (() => handleFileDownload())}\n                  />\n                ) : (\n                  <Typography>\n                    To download the file, please go to the My Exports page.\n                  </Typography>\n                ))}\n            </AmbientCard>\n          </div>\n        </Slide>\n      </div>\n    </SideSheet>\n  );\n};\n"],"mappings":"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"}

package/dist/{ExtenderToggle-Pdpzu9Ep.js → ExtenderToggle-DAaajb90.js}

@@ -45,4 +45,4 @@ ExtenderToggle.propTypes = {
 
 //#endregion
 export { ExtenderToggle as t };
-//# sourceMappingURL=ExtenderToggle-Pdpzu9Ep.js.map
+//# sourceMappingURL=ExtenderToggle-DAaajb90.js.map

package/dist/{ExtenderToggle-Pdpzu9Ep.js.map → ExtenderToggle-DAaajb90.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ExtenderToggle-Pdpzu9Ep.js","names":[],"sources":["../src/UI/templates/ui/ExtenderToggle.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, Typography } from '@material-ui/core';\nimport { Token } from '../../components/dataDisplay/Token';\nimport { ChevronDownIcon } from '@fluentui/react-icons';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    borderRadius: '0px 0px 25px 25px ',\n    paddingRight: (props) => props.toggleLabel && theme.spacing(2),\n    background: (props) => props.color,\n    cursor: 'pointer'\n  },\n  label: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    color: (props) =>\n      theme?.palette?.getContrastText(\n        props.color ? theme.palette?.secondary?.main : props.color\n      )\n  },\n  token: {\n    transform: (props) => (props.open ? 'rotateZ(-180deg)' : 'rotateZ(0deg)')\n  }\n}));\n\nexport const ExtenderToggle = (props) => {\n  const classes = useStyles(props);\n  const { onClick, toggleLabel, compact } = props;\n\n  return (\n    <div className={!compact && classes.root} onClick={onClick}>\n      <div className={classes.token}>\n        <Token\n          icon={ChevronDownIcon}\n          color='default'\n          size='small'\n          variant='filled'\n          type='icon'\n          compact={compact}\n        />\n      </div>\n      <div className={classes.label}>\n        <Typography variant='caption'> {toggleLabel} </Typography>\n      </div>\n    </div>\n  );\n};\nExtenderToggle.propTypes = {\n  /**\n   * onClick - click event for toggle\n   */\n  onClick: PropTypes.func,\n  /**\n   * toggleLabel - lable that appears on toggle\n   */\n  toggleLabel: PropTypes.string,\n  /**\n   * color - background color for the toggle button\n   */\n  color: PropTypes.string\n};\n"],"mappings":";;;;;;;AAMA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM;EACJ,SAAS;EACT,eAAe;EACf,cAAc;EACd,eAAe,UAAU,MAAM,eAAe,MAAM,QAAQ,EAAE;EAC9D,aAAa,UAAU,MAAM;EAC7B,QAAQ;EACT;CACD,OAAO;EACL,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,QAAQ,UACN,OAAO,SAAS,gBACd,MAAM,QAAQ,MAAM,SAAS,WAAW,OAAO,MAAM,MACtD;EACJ;CACD,OAAO,EACL,YAAY,UAAW,MAAM,OAAO,qBAAqB,iBAC1D;CACF,EAAE;AAEH,MAAa,kBAAkB,UAAU;CACvC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,SAAS,aAAa,YAAY;AAE1C,QACE,oCAAC;EAAI,WAAW,CAAC,WAAW,QAAQ;EAAe;IACjD,oCAAC,SAAI,WAAW,QAAQ,SACtB,oCAAC;EACC,MAAM;EACN,OAAM;EACN,MAAK;EACL,SAAQ;EACR,MAAK;EACI;GACT,CACE,EACN,oCAAC,SAAI,WAAW,QAAQ,SACtB,oCAAC,cAAW,SAAQ,aAAU,KAAE,aAAY,IAAc,CACtD,CACF;;AAGV,eAAe,YAAY;CAIzB,SAAS,UAAU;CAInB,aAAa,UAAU;CAIvB,OAAO,UAAU;CAClB"}
+{"version":3,"file":"ExtenderToggle-DAaajb90.js","names":[],"sources":["../src/UI/templates/ui/ExtenderToggle.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, Typography } from '@material-ui/core';\nimport { Token } from '../../components/dataDisplay/Token';\nimport { ChevronDownIcon } from '@fluentui/react-icons';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    borderRadius: '0px 0px 25px 25px ',\n    paddingRight: (props) => props.toggleLabel && theme.spacing(2),\n    background: (props) => props.color,\n    cursor: 'pointer'\n  },\n  label: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    color: (props) =>\n      theme?.palette?.getContrastText(\n        props.color ? theme.palette?.secondary?.main : props.color\n      )\n  },\n  token: {\n    transform: (props) => (props.open ? 'rotateZ(-180deg)' : 'rotateZ(0deg)')\n  }\n}));\n\nexport const ExtenderToggle = (props) => {\n  const classes = useStyles(props);\n  const { onClick, toggleLabel, compact } = props;\n\n  return (\n    <div className={!compact && classes.root} onClick={onClick}>\n      <div className={classes.token}>\n        <Token\n          icon={ChevronDownIcon}\n          color='default'\n          size='small'\n          variant='filled'\n          type='icon'\n          compact={compact}\n        />\n      </div>\n      <div className={classes.label}>\n        <Typography variant='caption'> {toggleLabel} </Typography>\n      </div>\n    </div>\n  );\n};\nExtenderToggle.propTypes = {\n  /**\n   * onClick - click event for toggle\n   */\n  onClick: PropTypes.func,\n  /**\n   * toggleLabel - lable that appears on toggle\n   */\n  toggleLabel: PropTypes.string,\n  /**\n   * color - background color for the toggle button\n   */\n  color: PropTypes.string\n};\n"],"mappings":";;;;;;;AAMA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM;EACJ,SAAS;EACT,eAAe;EACf,cAAc;EACd,eAAe,UAAU,MAAM,eAAe,MAAM,QAAQ,EAAE;EAC9D,aAAa,UAAU,MAAM;EAC7B,QAAQ;EACT;CACD,OAAO;EACL,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,QAAQ,UACN,OAAO,SAAS,gBACd,MAAM,QAAQ,MAAM,SAAS,WAAW,OAAO,MAAM,MACtD;EACJ;CACD,OAAO,EACL,YAAY,UAAW,MAAM,OAAO,qBAAqB,iBAC1D;CACF,EAAE;AAEH,MAAa,kBAAkB,UAAU;CACvC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,SAAS,aAAa,YAAY;AAE1C,QACE,oCAAC;EAAI,WAAW,CAAC,WAAW,QAAQ;EAAe;IACjD,oCAAC,SAAI,WAAW,QAAQ,SACtB,oCAAC;EACC,MAAM;EACN,OAAM;EACN,MAAK;EACL,SAAQ;EACR,MAAK;EACI;GACT,CACE,EACN,oCAAC,SAAI,WAAW,QAAQ,SACtB,oCAAC,cAAW,SAAQ,aAAU,KAAE,aAAY,IAAc,CACtD,CACF;;AAGV,eAAe,YAAY;CAIzB,SAAS,UAAU;CAInB,aAAa,UAAU;CAIvB,OAAO,UAAU;CAClB"}

package/dist/{FieldArrayCard-BpvC5_RA.js → FieldArrayCard-CgM6q87c.js}

@@ -16,8 +16,8 @@ import { t as FluentTextField } from "./FluentTextField-WfFk-koa.js";
 import { t as FormControlLabel$1 } from "./FormControlLabel-C_X37EhG.js";
 import { t as Grid$1 } from "./Grid-D1-yWIw5.js";
 import { t as FluentCheckbox } from "./FluentCheckbox-CX7XgoFz.js";
-import { t as EmptyStateDisplay } from "./EmptyStateDisplay-ByAb3Cp-.js";
-import { t as FluentTimePicker } from "./FluentTimePicker-BgCEB8I2.js";
+import { t as EmptyStateDisplay } from "./EmptyStateDisplay-YOwCw38_.js";
+import { t as FluentTimePicker } from "./FluentTimePicker-LUfZzJJZ.js";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { makeStyles } from "@material-ui/core";
 import { AddIcon, DeleteIcon } from "@fluentui/react-icons";
@@ -401,4 +401,4 @@ const FieldArrayCard = (props) => {
 
 //#endregion
 export { FieldType as n, FieldArrayCard as t };
-//# sourceMappingURL=FieldArrayCard-BpvC5_RA.js.map
+//# sourceMappingURL=FieldArrayCard-CgM6q87c.js.map