npm - udp-react-enterprise-component-library - Versions diffs - 25.18.1-beta.38 → 25.18.1-beta.39 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (559) hide show

package/dist/{FluentSelectMenu-yQMFZWEg.js.map → FluentSelectMenu-BEREJbe-.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FluentSelectMenu-~~yQMFZWEg.~~js","names":["option"],"sources":["../src/UI/inputs/menus/FluentSelectMenu.jsx"],"sourcesContent":["/* eslint-disable no-use-before-define /\nimport React, { useCallback } from 'react';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { FluentTextField } from '../textField/FluentTextField';\nimport { makeStyles } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n '&[class=\"MuiOutlinedInput-root\"][class*=\"MuiOutlinedInput-marginDense\"]':\n {\n padding: '4px 8px'\n }\n }\n}));\n\nexport const FluentSelectMenu = ({\n data,\n id,\n onChange: onChangeProp,\n width = 300,\n // displayProperty = 'label',\n autoCompleteProps,\n displayProperty,\n ...otherProps\n}) => {\n const classes = useStyles();\n // Modified onChange to work inside final-form Field component\n // Also works with a passed in onChange function if not in Field component\n const onChange = useCallback(\n (e, value) => onChangeProp?.(value),\n [onChangeProp]\n );\n\n // return (\n // <Autocomplete\n // classes={{\n // inputRoot: classes.root\n // }}\n // id={id}\n // onChange={onChange}\n // options={data}\n // getOptionLabel={\n // displayProperty\n // ? option[displayProperty]\n // ? option[displayProperty]\n // : ''\n // : option\n // }\n // style={{ width: width }}\n // {...autoCompleteProps}\n // renderInput={(params) => <FluentTextField {...otherProps} {...params} />}\n // />\n // )\n return (\n <Autocomplete\n classes={{\n inputRoot: classes.root\n }}\n id={id}\n onChange={onChange}\n options={data}\n getOptionLabel={(option) =>\n displayProperty\n ? option[displayProperty]\n ? option[displayProperty]\n : ''\n : (option) => option\n }\n style={{ width: width }}\n {...autoCompleteProps}\n renderInput={(params) => (\n <FluentTextField {...otherProps} {...params} />\n )}\n />\n );\n};\n"],"mappings":";;;;;;AAMA,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM,EACJ,gFACE,EACE,SAAS,WACV,EACJ,EACF,EAAE;AAEH,MAAa,oBAAoB,EAC/B,MACA,IACA,UAAU,cACV,QAAQ,KAER,mBACA,iBACA,GAAG,iBACC;CACJ,MAAM,UAAU,WAAW;CAG3B,MAAM,WAAW,aACd,GAAG,UAAU,eAAe,MAAM,EACnC,CAAC,aAAa,CACf;AAsBD,QACE,oCAAC;EACC,SAAS,EACP,WAAW,QAAQ,MACpB;EACG;EACM;EACV,SAAS;EACT,iBAAiB,WACf,kBACI,OAAO,mBACL,OAAO,mBACP,MACD,aAAWA;EAElB,OAAO,EAAS,OAAO;EACvB,GAAI;EACJ,cAAc,WACZ,oCAAC;GAAgB,GAAI;GAAY,GAAI;IAAU;GAEjD"}
1	+ {"version":3,"file":"FluentSelectMenu-BEREJbe-.js","names":["option"],"sources":["../src/UI/inputs/menus/FluentSelectMenu.jsx"],"sourcesContent":["/* eslint-disable no-use-before-define /\nimport React, { useCallback } from 'react';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { FluentTextField } from '../textField/FluentTextField';\nimport { makeStyles } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n '&[class=\"MuiOutlinedInput-root\"][class*=\"MuiOutlinedInput-marginDense\"]':\n {\n padding: '4px 8px'\n }\n }\n}));\n\nexport const FluentSelectMenu = ({\n data,\n id,\n onChange: onChangeProp,\n width = 300,\n // displayProperty = 'label',\n autoCompleteProps,\n displayProperty,\n ...otherProps\n}) => {\n const classes = useStyles();\n // Modified onChange to work inside final-form Field component\n // Also works with a passed in onChange function if not in Field component\n const onChange = useCallback(\n (e, value) => onChangeProp?.(value),\n [onChangeProp]\n );\n\n // return (\n // <Autocomplete\n // classes={{\n // inputRoot: classes.root\n // }}\n // id={id}\n // onChange={onChange}\n // options={data}\n // getOptionLabel={\n // displayProperty\n // ? option[displayProperty]\n // ? option[displayProperty]\n // : ''\n // : option\n // }\n // style={{ width: width }}\n // {...autoCompleteProps}\n // renderInput={(params) => <FluentTextField {...otherProps} {...params} />}\n // />\n // )\n return (\n <Autocomplete\n classes={{\n inputRoot: classes.root\n }}\n id={id}\n onChange={onChange}\n options={data}\n getOptionLabel={(option) =>\n displayProperty\n ? option[displayProperty]\n ? option[displayProperty]\n : ''\n : (option) => option\n }\n style={{ width: width }}\n {...autoCompleteProps}\n renderInput={(params) => (\n <FluentTextField {...otherProps} {...params} />\n )}\n />\n );\n};\n"],"mappings":";;;;;;AAMA,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM,EACJ,gFACE,EACE,SAAS,WACV,EACJ,EACF,EAAE;AAEH,MAAa,oBAAoB,EAC/B,MACA,IACA,UAAU,cACV,QAAQ,KAER,mBACA,iBACA,GAAG,iBACC;CACJ,MAAM,UAAU,WAAW;CAG3B,MAAM,WAAW,aACd,GAAG,UAAU,eAAe,MAAM,EACnC,CAAC,aAAa,CACf;AAsBD,QACE,oCAAC;EACC,SAAS,EACP,WAAW,QAAQ,MACpB;EACG;EACM;EACV,SAAS;EACT,iBAAiB,WACf,kBACI,OAAO,mBACL,OAAO,mBACP,MACD,aAAWA;EAElB,OAAO,EAAS,OAAO;EACvB,GAAI;EACJ,cAAc,WACZ,oCAAC;GAAgB,GAAI;GAAY,GAAI;IAAU;GAEjD"}

package/dist/{FluentSimpleSelect-DxxbQV37.js → FluentSimpleSelect-Djff-up8.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { t as apiMutate } from "./useAxiosMutate-DeqKSi5z.js";
 import { t as Box$1 } from "./Box-Colr5GEl.js";
-import { t as FluentSelectMenu } from "./FluentSelectMenu-yQMFZWEg.js";
+import { t as FluentSelectMenu } from "./FluentSelectMenu-BEREJbe-.js";
 import React, { Children, forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import { CircularProgress, FormControl, InputBase, NativeSelect, TextField, Typography, makeStyles, withStyles } from "@material-ui/core";
 import Autocomplete from "@material-ui/lab/Autocomplete";
@@ -417,4 +417,4 @@ const FluentSimpleSelect = forwardRef(FluentSimpleSelectComponent);
 //#endregion
 export { FluentSelectGroupMenu as i, FluentScrollLoadAutocompleteMenu as n, SelectGroupMenu as r, FluentSimpleSelect as t };
-//# sourceMappingURL=FluentSimpleSelect-DxxbQV37.js.map
+//# sourceMappingURL=FluentSimpleSelect-Djff-up8.js.map

package/dist/{FluentSimpleSelect-DxxbQV37.js.map → FluentSimpleSelect-Djff-up8.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FluentSimpleSelect-DxxbQV37.js","names":["useStyles","useStyles","useStyles","makeStyles","Box"],"sources":["../src/UI/inputs/menus/FluentSelectDirectoryMenu.jsx","../src/UI/inputs/menus/FluentSelectGroupMenu.jsx","../src/UI/inputs/menus/FluentScrollLoadAutocompleteMenu.jsx","../src/UI/inputs/menus/FluentSimpleSelect.jsx"],"sourcesContent":["/* eslint-disable no-use-before-define /\nimport React from 'react'\n\nimport Autocomplete from '@material-ui/lab/Autocomplete'\nimport { makeStyles, TextField } from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n textField: {\n marginLeft: theme.spacing(1),\n marginRight: theme.spacing(1)\n },\n dense: {\n marginTop: theme.spacing(1)\n },\n input: {\n borderRadius: 2,\n height: 32,\n padding: 0,\n marginTop: 3\n },\n formTextInput: {\n fontSize: 14\n },\n labelRoot: {\n fontSize: 14\n }\n}))\n\nexport const FluentSelectGroupMenu = ({\n data,\n placeholder,\n id,\n handleChange\n}) => {\n const classes = useStyles()\n const options =\n data &&\n data.map((option) => {\n const firstLetter = option.label[0].toUpperCase()\n return {\n firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,\n ...option\n }\n })\n\n return (\n <Autocomplete\n id={id}\n onChange={(event, value) => handleChange(value)}\n options={options.sort(\n (a, b) => -b.firstLetter.localeCompare(a.firstLetter)\n )}\n groupBy={(option) => option.firstLetter}\n getOptionLabel={(option) => option.label}\n style={{ width: 300 }}\n renderInput={(params) => (\n <TextField\n {...params}\n label={!params.inputProps.value && placeholder}\n variant='outlined'\n size='small'\n InputLabelProps={{\n shrink: false,\n classes: {\n root: classes.labelRoot,\n focused: classes.labelFocused\n }\n }}\n SelectProps={{\n MenuProps: {\n className: classes.menu\n }\n }}\n />\n )}\n />\n )\n}\n","/ eslint-disable no-use-before-define /\nimport React from 'react'\n\nimport Autocomplete from '@material-ui/lab/Autocomplete'\nimport { makeStyles, TextField } from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n textField: {\n marginLeft: theme.spacing(1),\n marginRight: theme.spacing(1)\n },\n dense: {\n marginTop: theme.spacing(1)\n },\n input: {\n borderRadius: 2,\n height: 32,\n padding: 0,\n marginTop: 3\n },\n formTextInput: {\n fontSize: 14\n },\n labelRoot: {\n fontSize: 14\n }\n}))\n\nexport const SelectGroupMenu = ({ data, placeholder, id, handleChange, className }) => {\n const classes = useStyles()\n const options =\n data &&\n data.map((option) => {\n const grouping = option.category\n return {\n grouping,\n ...option\n }\n })\n\n return (\n <Autocomplete\n className={className}\n id={id}\n onChange={(event, value) => handleChange(value)}\n options={options.sort((a, b) => -b.grouping.localeCompare(a.grouping))}\n groupBy={(option) => option.grouping}\n getOptionLabel={(option) => option.label}\n style={{ width: 300 }}\n renderInput={(params) => (\n <TextField\n {...params}\n label={!params.inputProps.value && placeholder}\n variant='outlined'\n size='small'\n InputLabelProps={{\n shrink: false,\n classes: {\n root: classes.labelRoot,\n focused: classes.labelFocused\n }\n }}\n SelectProps={{\n MenuProps: {\n className: classes.menu\n }\n }}\n />\n )}\n />\n )\n}\n","import React, {\n useState,\n useCallback,\n useEffect,\n forwardRef,\n useRef,\n Children,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { CircularProgress } from '@material-ui/core';\nimport { apiMutate } from '../../../utilities/useAxiosMutate';\nimport { FluentSelectMenu } from './FluentSelectMenu';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useTranslation } from 'react-i18next';\nimport { Box } from '../../Box';\nimport Alert from '@material-ui/lab/Alert';\n\nconst useStyles = makeStyles((theme) => ({\n listbox: {\n position: 'relative',\n maxHeight: 300,\n overflow: 'auto',\n },\n listboxHidden: {\n overflow: 'hidden',\n },\n loadingItem: {\n textAlign: 'center',\n padding: theme.spacing(1),\n },\n overlay: {\n position: 'absolute',\n inset: 0,\n background: 'rgba(255,255,255,.95)',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n zIndex: 1,\n },\n overlayText: {\n marginTop: theme.spacing(1),\n },\n alert: {\n marginTop: theme.spacing(1),\n },\n}));\n\n/\n FluentScrollLoadAutocompleteMenu\n\n A drop‑in extension for MUI’s `<Autocomplete>` that:\n\n 1. Fetches paginated / sortable data from any REST endpoint \n* 2. Implements infinite scrolling with automatic scroll‑position restore \n* 3. Supports client‑side filtering, grouping \n* 4. Displays a Material UI `<CircularProgress>` while loading and a MUI `<Alert>` on errors\n\n Internally it wraps unity‑fluent‑library’s `<FluentSelectMenu>` so you get the same\n* keyboard navigation and styling as the rest of the Fluent controls.\n\n ---\n\n ### Typical usage\n* ```jsx\n* const endpoint = (q, page, size, sortCol, sortDir) =>\n* `/api/products?search=${q}&page=${page}&pageSize=${size}&sort=${sortCol}&dir=${sortDir}`;\n\n const map = (raw) => ({\n* items: raw.items,\n* total: raw.totalRows,\n* });\n\n <FluentScrollLoadAutocompleteMenu\n* apiBaseUrl=\"https://api.example.com\"\n* apiEndpoint={endpoint}\n* mapResponse={map}\n* onChange={(product) => console.log(product)}\n* />\n* ```\n* ---\n\n @param {Object} props\n* @param {string} props.apiBaseUrl Base URL forwarded to apiMutate\n* @param {Function} props.apiEndpoint `(keyword, page, pageSize, sortCol, sortDir) => string`\n* @param {Function} props.mapResponse Maps raw API payload → `{ items, total }`\n* @param {Function} [props.onChange] Fires when the user selects/clears an option\n* @param {Function} [props.getOptionLabel] Returns the display label for an item (default: `o.name`)\n* @param {Function} [props.groupBy] Returns a group heading string for an item\n* @param {string} [props.placeholder='Search…'] Placeholder text\n* @param {string} [props.displayProperty='name'] Property passed to `<FluentSelectMenu>`\n* @param {number\|string} [props.width=300] Fixed width of the component container\n* @param {boolean} [props.fetchEnabled=true] Disable to work fully offline\n* @param {} [props.initialValue=null] Pre‑selected value shown immediately\n @param {Array} [props.initialOptions=[]] Pre‑loaded options shown immediately\n* @param {boolean} [props.isPaginated=true] Disable if your API returns the full list\n* @param {boolean} [props.isSortable=true] Disable server‑side sorting\n* @param {boolean} [props.isFilterable=true] Disable server‑side filtering\n* @param {number} [props.pageSize=50] Items per page when paginating\n* @param {string} [props.sortColumn='Name'] Default sort column\n* @param {'ASC'\|'DESC'} [props.sortDirection='ASC'] Default sort direction\n\n @returns {JSX.Element}\n/\nexport const FluentScrollLoadAutocompleteMenu = ({\n apiBaseUrl,\n apiEndpoint,\n apiConfig = {},\n apiData = null,\n mapResponse,\n onChange,\n getOptionLabel = (o) => o?.name ?? '',\n groupBy,\n placeholder = 'Search…',\n displayProperty = 'name',\n width = 300,\n fetchEnabled = true,\n initialValue = null,\n initialOptions = [],\n isPaginated = true,\n isSortable = true,\n isFilterable = true,\n pageSize = 50,\n sortColumn = 'Name',\n sortDirection = 'ASC',\n}) => {\n const classes = useStyles();\n const [options, setOptions] = useState(initialOptions);\n const [value, setValue] = useState(initialValue);\n const [inputValue, setInputValue] = useState('');\n const [loading, setLoading] = useState(false);\n const [loadingMore, setLoadingMore] = useState(false);\n const [error, setError] = useState(null);\n const [pageNumber, setPageNumber] = useState(1);\n const [totalRows, setTotalRows] = useState(0);\n\n const configRef = useRef(apiConfig);\n const dataRef = useRef(apiData);\n const listboxRef = useRef(null);\n const prevScrollPositionRef = useRef(0);\n\n const { t } = useTranslation();\n\n /\n Fetches a page of data from the provided API endpoint and updates the component state accordingly.\n \n This function supports:\n * - Filtering (if `isFilterable` is true)\n * - Sorting (if `isSortable` is true)\n * - Pagination (based on the `page` and `pageSize` arguments)\n * - Infinite scroll appending (via the `append` flag)\n \n @function fetchPage\n * @param {string} keyword - The keyword to filter results by (if filtering is enabled)\n * @param {number} page - The page number to fetch\n * @param {boolean} [append=false] - If true, appends results to the current list; otherwise replaces it\n * @returns {Promise<void>} - Resolves once data is fetched and state is updated\n /\n const fetchPage = useCallback(\n async (keyword, page, append = false) => {\n if (!fetchEnabled) return;\n\n setError(null);\n page === 1 ? setLoading(true) : setLoadingMore(true);\n\n try {\n const url = apiEndpoint(\n isFilterable ? keyword : '',\n page,\n pageSize,\n isSortable ? sortColumn : '',\n isSortable ? sortDirection : 'ASC'\n );\n const resp = await apiMutate(apiBaseUrl, url, configRef.current, dataRef.current);\n const { items, total } = mapResponse(resp.data);\n\n setOptions((prev) => (append ? [...prev, ...items] : items));\n setTotalRows(total);\n setPageNumber(page);\n } catch (err) {\n setError(err.response?.data?.message ?? err.message ?? t('Unknown error'));\n } finally {\n page === 1 ? setLoading(false) : setLoadingMore(false);\n }\n },\n [\n apiBaseUrl,\n apiEndpoint,\n mapResponse,\n pageSize,\n sortColumn,\n sortDirection,\n isFilterable,\n isSortable,\n fetchEnabled,\n t,\n ]\n );\n\n / ---------- infinite scroll ---------- /\n const handleListboxScroll = (e) => {\n if (!isPaginated) return;\n\n const node = e.currentTarget;\n prevScrollPositionRef.current = node.scrollTop;\n\n if (\n node.scrollTop + node.clientHeight >= node.scrollHeight - 30 &&\n !loadingMore &&\n options.length < totalRows\n ) {\n fetchPage(inputValue, pageNumber + 1, true);\n }\n };\n\n /\n Listbox\n \n Custom scrollable container used by the Autocomplete dropdown.\n * - Attaches a ref to preserve scroll position between pages.\n * - Displays a loading message if no options are present initially.\n * - Shows a full overlay spinner when `loadingMore` is true.\n \n This component is passed as the `ListboxComponent` to FluentSelectMenu’s\n * Autocomplete integration, enabling infinite scroll with visual feedback.\n \n @param {Object} props\n * @param {React.ReactNode} props.children - Option elements to render\n * @param {boolean} props.initialLoading - Whether to show the “Loading…” message initially\n * @param {React.Ref} ref - Forwarded ref from the Autocomplete dropdown\n * @returns {JSX.Element}\n /\n const Listbox = forwardRef(({ children, initialLoading, ...other }, ref) => (\n <ul\n ref={(inst) => {\n if (inst) listboxRef.current = inst;\n if (typeof ref === 'function') ref(inst);\n else if (ref) ref.current = inst;\n }}\n {...other}\n style={{\n position: 'relative',\n maxHeight: 300,\n overflow: loadingMore ? 'hidden' : 'auto',\n }}\n >\n {Children.count(children) === 0 && initialLoading ? (\n <li style={{ textAlign: 'center', padding: 8 }}>{t('Loading...')}</li>\n ) : (\n children\n )}\n\n {loadingMore && (\n <Box className={classes.overlay}>\n <CircularProgress size={20} />\n <span className={classes.overlayText}>{t('Loading...')}</span>\n </Box>\n )}\n </ul>\n ));\n Listbox.displayName = 'FluentSMAutocompleteListbox';\n\n / [Initial / filtered fetch] /\n useEffect(() => {\n if (!fetchEnabled \|\| !isFilterable) return;\n if (value && inputValue === getOptionLabel(value)) return;\n\n const timer = setTimeout(() => fetchPage(inputValue, 1, false), 400);\n return () => clearTimeout(timer);\n }, [inputValue, fetchPage, value, getOptionLabel, isFilterable, fetchEnabled]);\n\n // [Initial fetch when filtering is disabled]\n useEffect(() => {\n if (!fetchEnabled \|\| isFilterable) return;\n fetchPage('', 1, false);\n }, [isFilterable, fetchEnabled, fetchPage]);\n\n // [Restores scroll position after loading more items]\n useEffect(() => {\n if (!loadingMore && listboxRef.current) {\n listboxRef.current.scrollTop = prevScrollPositionRef.current;\n }\n }, [options, loadingMore]);\n\n useEffect(() => { configRef.current = apiConfig }, [apiConfig]);\n useEffect(() => { dataRef.current = apiData }, [apiData]);\n\n return (\n <Box width={width}>\n <FluentSelectMenu\n placeholder={placeholder}\n data={options}\n displayProperty={displayProperty}\n onChange={(val) => {\n setValue(val);\n onChange?.(val);\n }}\n InputProps={{\n endAdornment:\n loading && pageNumber === 1 ? (\n <CircularProgress color=\"inherit\" size={20} />\n ) : null,\n }}\n autoCompleteProps={{\n value,\n inputValue,\n onInputChange: (_e, v) => setInputValue(v),\n loading: loading && pageNumber === 1,\n getOptionLabel,\n groupBy,\n ListboxComponent: Listbox,\n ListboxProps: {\n onScroll: handleListboxScroll,\n initialLoading: loading && pageNumber === 1,\n },\n }}\n />\n\n {error && (\n <Alert severity=\"error\" style={{ marginTop: 8 }}>\n {error}\n </Alert>\n )}\n </Box>\n );\n};\n\nFluentScrollLoadAutocompleteMenu.propTypes = {\n /* Base URL used by apiMutate /\n apiBaseUrl: PropTypes.string.isRequired,\n\n /* Builds the endpoint URL: (keyword, page, pageSize, sortCol, sortDir) => string /\n apiEndpoint: PropTypes.func.isRequired,\n\n /* Additional config passed to apiMutate /\n apiConfig: PropTypes.object,\n\n /* Raw API data passed to apiMutate /\n apiData: PropTypes.any,\n\n /* Maps raw API payload into { items, total } /\n mapResponse: PropTypes.func.isRequired,\n\n /* Called when the user selects or clears an option /\n onChange: PropTypes.func,\n\n /* Returns the text label for a given option /\n getOptionLabel: PropTypes.func,\n\n /* Returns the group heading for a given option /\n groupBy: PropTypes.func,\n\n placeholder: PropTypes.string,\n displayProperty: PropTypes.string,\n width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n / Behavior flags /\n fetchEnabled: PropTypes.bool,\n initialValue: PropTypes.any,\n initialOptions: PropTypes.array,\n\n isPaginated: PropTypes.bool,\n isSortable: PropTypes.bool,\n isFilterable: PropTypes.bool,\n\n pageSize: PropTypes.number,\n sortColumn: PropTypes.string,\n sortDirection: PropTypes.oneOf(['ASC', 'DESC']),\n};\n","import React, {forwardRef} from 'react'\nimport {\n makeStyles,\n withStyles,\n Typography,\n FormControl,\n NativeSelect,\n InputBase\n} from '@material-ui/core'\nimport PropTypes from 'prop-types'\n\nconst FluentInput = withStyles((theme) => ({\n root: {\n 'label + &': {\n marginTop: theme.spacing(1)\n }\n },\n input: {\n borderRadius: 2,\n position: 'relative',\n border: '1px solid rgba(0, 0, 0, 0.23)',\n fontSize: 14,\n padding: '4px 8px',\n height: 20,\n transition: theme.transitions.create(['border-color', 'box-shadow']),\n '&:focus': {\n borderRadius: 2\n }\n }\n}))(InputBase)\n\nconst useStyles = makeStyles((theme) => ({\n margin: {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1)\n }\n}))\n\nconst FluentSimpleSelectComponent = ({\n label,\n children,\n id,\n value,\n handleChange,\n defaultValue\n}, ref) => {\n const classes = useStyles()\n\n return (\n <div>\n <FormControl className={classes.margin}>\n <Typography\n className={classes.label}\n style={{\n color: 'rgba(0, 0, 0, 0.54)',\n fontWeight: 400,\n letterSpacing: 0\n }}\n >\n {label}\n </Typography>\n <NativeSelect\n id={id}\n inputRef={ref}\n value={value}\n onChange={handleChange}\n defaultValue={defaultValue}\n input={<FluentInput />}\n noShrink='true'\n >\n {children}\n </NativeSelect>\n </FormControl>\n </div>\n )\n}\n\nFluentSimpleSelectComponent.propTypes = {\n /\n Label that appears above the selector\n /\n label: PropTypes.string,\n /\n Contents of the selected options (<option></option>)\n /\n children: PropTypes.node,\n /\n Function to handle option change\n /\n handleChange: PropTypes.func,\n /\n Value: the value of the selected item\n */\n value: PropTypes.string\n}\nexport const FluentSimpleSelect = forwardRef(FluentSimpleSelectComponent)\n"],"mappings":";;;;;;;;;;;;AAMA,MAAMA,cAAY,YAAY,WAAW;CACvC,WAAW;EACT,YAAY,MAAM,QAAQ,EAAE;EAC5B,aAAa,MAAM,QAAQ,EAAE;EAC9B;CACD,OAAO,EACL,WAAW,MAAM,QAAQ,EAAE,EAC5B;CACD,OAAO;EACL,cAAc;EACd,QAAQ;EACR,SAAS;EACT,WAAW;EACZ;CACD,eAAe,EACb,UAAU,IACX;CACD,WAAW,EACT,UAAU,IACX;CACF,EAAE;AAEH,MAAa,yBAAyB,EACpC,MACA,aACA,IACA,mBACI;CACJ,MAAM,UAAUA,aAAW;CAC3B,MAAM,UACJ,QACA,KAAK,KAAK,WAAW;EACnB,MAAM,cAAc,OAAO,MAAM,GAAG,aAAa;AACjD,SAAO;GACL,aAAa,QAAQ,KAAK,YAAY,GAAG,QAAQ;GACjD,GAAG;GACJ;GACD;AAEJ,QACE,oCAAC;EACK;EACJ,WAAW,OAAO,UAAU,aAAa,MAAM;EAC/C,SAAS,QAAQ,MACd,GAAG,MAAM,CAAC,EAAE,YAAY,cAAc,EAAE,YAAY,CACtD;EACD,UAAU,WAAW,OAAO;EAC5B,iBAAiB,WAAW,OAAO;EACnC,OAAO,EAAE,OAAO,KAAK;EACrB,cAAc,WACZ,oCAAC;GACC,GAAI;GACJ,OAAO,CAAC,OAAO,WAAW,SAAS;GACnC,SAAQ;GACR,MAAK;GACL,iBAAiB;IACf,QAAQ;IACR,SAAS;KACP,MAAM,QAAQ;KACd,SAAS,QAAQ;KAClB;IACF;GACD,aAAa,EACX,WAAW,EACT,WAAW,QAAQ,MACpB,EACF;IACD;GAEJ;;;;;ACrEN,MAAMC,cAAY,YAAY,WAAW;CACvC,WAAW;EACT,YAAY,MAAM,QAAQ,EAAE;EAC5B,aAAa,MAAM,QAAQ,EAAE;EAC9B;CACD,OAAO,EACL,WAAW,MAAM,QAAQ,EAAE,EAC5B;CACD,OAAO;EACL,cAAc;EACd,QAAQ;EACR,SAAS;EACT,WAAW;EACZ;CACD,eAAe,EACb,UAAU,IACX;CACD,WAAW,EACT,UAAU,IACX;CACF,EAAE;AAEH,MAAa,mBAAmB,EAAE,MAAM,aAAa,IAAI,cAAc,gBAAgB;CACrF,MAAM,UAAUA,aAAW;CAC3B,MAAM,UACJ,QACA,KAAK,KAAK,WAAW;AAEnB,SAAO;GACL,UAFe,OAAO;GAGtB,GAAG;GACJ;GACD;AAEJ,QACE,oCAAC;EACY;EACP;EACJ,WAAW,OAAO,UAAU,aAAa,MAAM;EAC/C,SAAS,QAAQ,MAAM,GAAG,MAAM,CAAC,EAAE,SAAS,cAAc,EAAE,SAAS,CAAC;EACtE,UAAU,WAAW,OAAO;EAC5B,iBAAiB,WAAW,OAAO;EACnC,OAAO,EAAE,OAAO,KAAK;EACrB,cAAc,WACZ,oCAAC;GACC,GAAI;GACJ,OAAO,CAAC,OAAO,WAAW,SAAS;GACnC,SAAQ;GACR,MAAK;GACL,iBAAiB;IACf,QAAQ;IACR,SAAS;KACP,MAAM,QAAQ;KACd,SAAS,QAAQ;KAClB;IACF;GACD,aAAa,EACX,WAAW,EACT,WAAW,QAAQ,MACpB,EACF;IACD;GAEJ;;;;;ACpDN,MAAMC,cAAYC,cAAY,WAAW;CACvC,SAAS;EACP,UAAU;EACV,WAAW;EACX,UAAU;EACX;CACD,eAAe,EACb,UAAU,UACX;CACD,aAAa;EACX,WAAW;EACX,SAAS,MAAM,QAAQ,EAAE;EAC1B;CACD,SAAS;EACP,UAAU;EACV,OAAO;EACP,YAAY;EACZ,SAAS;EACT,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,QAAQ;EACT;CACD,aAAa,EACX,WAAW,MAAM,QAAQ,EAAE,EAC5B;CACD,OAAO,EACL,WAAW,MAAM,QAAQ,EAAE,EAC5B;CACF,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DH,MAAa,oCAAoC,EAC/C,YACA,aACA,YAAY,EAAE,EACd,UAAU,MACV,aACA,UACA,kBAAkB,MAAM,GAAG,QAAQ,IACnC,SACA,cAAc,WACd,kBAAkB,QAClB,QAAQ,KACR,eAAe,MACf,eAAe,MACf,iBAAiB,EAAE,EACnB,cAAc,MACd,aAAa,MACb,eAAe,MACf,WAAW,IACX,aAAa,QACb,gBAAgB,YACZ;CACJ,MAAM,UAAUD,aAAW;CAC3B,MAAM,CAAC,SAAS,cAAc,SAAS,eAAe;CACtD,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,CAAC,YAAY,iBAAiB,SAAS,GAAG;CAChD,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;CAE7C,MAAM,YAAY,OAAO,UAAU;CACnC,MAAM,UAAU,OAAO,QAAQ;CAC/B,MAAM,aAAa,OAAO,KAAK;CAC/B,MAAM,wBAAwB,OAAO,EAAE;CAEvC,MAAM,EAAE,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAiB9B,MAAM,YAAY,YAChB,OAAO,SAAS,MAAM,SAAS,UAAU;AACvC,MAAI,CAAC,aAAc;AAEnB,WAAS,KAAK;AACd,WAAS,IAAI,WAAW,KAAK,GAAG,eAAe,KAAK;AAEpD,MAAI;GASF,MAAM,EAAE,OAAO,UAAU,aADZ,MAAM,UAAU,YAPjB,YACV,eAAe,UAAU,IACzB,MACA,UACA,aAAa,aAAa,IAC1B,aAAa,gBAAgB,MAC9B,EAC6C,UAAU,SAAS,QAAQ,QAAQ,EACvC,KAAK;AAE/C,eAAY,SAAU,SAAS,CAAC,GAAG,MAAM,GAAG,MAAM,GAAG,MAAO;AAC5D,gBAAa,MAAM;AACnB,iBAAc,KAAK;WACZ,KAAK;AACZ,YAAS,IAAI,UAAU,MAAM,WAAW,IAAI,WAAW,EAAE,gBAAgB,CAAC;YAClE;AACR,YAAS,IAAI,WAAW,MAAM,GAAG,eAAe,MAAM;;IAG1D;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,uBAAuB,MAAM;AACjC,MAAI,CAAC,YAAa;EAElB,MAAM,OAAO,EAAE;AACf,wBAAsB,UAAU,KAAK;AAErC,MACE,KAAK,YAAY,KAAK,gBAAgB,KAAK,eAAe,MAC1D,CAAC,eACD,QAAQ,SAAS,UAEjB,WAAU,YAAY,aAAa,GAAG,KAAK;;;;;;;;;;;;;;;;;;;CAqB/C,MAAM,UAAU,YAAY,EAAE,UAAU,gBAAgB,GAAG,SAAS,QAClE,oCAAC;EACC,MAAM,SAAS;AACb,OAAI,KAAM,YAAW,UAAU;AAC/B,OAAI,OAAO,QAAQ,WAAY,KAAI,KAAK;YAC/B,IAAK,KAAI,UAAU;;EAE9B,GAAI;EACJ,OAAO;GACL,UAAU;GACV,WAAW;GACX,UAAU,cAAc,WAAW;GACpC;IAEA,SAAS,MAAM,SAAS,KAAK,KAAK,iBACjC,oCAAC,QAAG,OAAO;EAAE,WAAW;EAAU,SAAS;EAAG,IAAG,EAAE,aAAa,CAAM,GAEtE,UAGD,eACC,oCAACE,SAAI,WAAW,QAAQ,WACtB,oCAAC,oBAAiB,MAAM,KAAM,EAC9B,oCAAC,UAAK,WAAW,QAAQ,eAAc,EAAE,aAAa,CAAQ,CAC1D,CAEL,CACL;AACF,SAAQ,cAAc;AAGtB,iBAAgB;AACd,MAAI,CAAC,gBAAgB,CAAC,aAAc;AACpC,MAAI,SAAS,eAAe,eAAe,MAAM,CAAE;EAEnD,MAAM,QAAQ,iBAAiB,UAAU,YAAY,GAAG,MAAM,EAAE,IAAI;AACpE,eAAa,aAAa,MAAM;IAC/B;EAAC;EAAY;EAAW;EAAO;EAAgB;EAAc;EAAa,CAAC;AAG9E,iBAAgB;AACd,MAAI,CAAC,gBAAgB,aAAc;AACnC,YAAU,IAAI,GAAG,MAAM;IACtB;EAAC;EAAc;EAAc;EAAU,CAAC;AAG3C,iBAAgB;AACd,MAAI,CAAC,eAAe,WAAW,QAC7B,YAAW,QAAQ,YAAY,sBAAsB;IAEtD,CAAC,SAAS,YAAY,CAAC;AAE1B,iBAAgB;AAAE,YAAU,UAAU;IAAa,CAAC,UAAU,CAAC;AAC/D,iBAAgB;AAAE,UAAQ,UAAU;IAAW,CAAC,QAAQ,CAAC;AAEzD,QACE,oCAACA,SAAW,SACV,oCAAC;EACc;EACb,MAAM;EACW;EACjB,WAAW,QAAQ;AACjB,YAAS,IAAI;AACb,cAAW,IAAI;;EAEjB,YAAY,EACV,cACE,WAAW,eAAe,IACxB,oCAAC;GAAiB,OAAM;GAAU,MAAM;IAAM,GAC5C,MACP;EACD,mBAAmB;GACjB;GACA;GACA,gBAAgB,IAAI,MAAM,cAAc,EAAE;GAC1C,SAAS,WAAW,eAAe;GACnC;GACA;GACA,kBAAkB;GAClB,cAAc;IACZ,UAAU;IACV,gBAAgB,WAAW,eAAe;IAC3C;GACF;GACD,EAED,SACC,oCAAC;EAAM,UAAS;EAAQ,OAAO,EAAE,WAAW,GAAG;IAC5C,MACK,CAEN;;AAIV,iCAAiC,YAAY;CAE3C,YAAY,UAAU,OAAO;CAG7B,aAAa,UAAU,KAAK;CAG5B,WAAW,UAAU;CAGrB,SAAS,UAAU;CAGnB,aAAa,UAAU,KAAK;CAG5B,UAAU,UAAU;CAGpB,gBAAgB,UAAU;CAG1B,SAAS,UAAU;CAEnB,aAAa,UAAU;CACvB,iBAAiB,UAAU;CAC3B,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC;CAGhE,cAAc,UAAU;CACxB,cAAc,UAAU;CACxB,gBAAgB,UAAU;CAE1B,aAAa,UAAU;CACvB,YAAY,UAAU;CACtB,cAAc,UAAU;CAExB,UAAU,UAAU;CACpB,YAAY,UAAU;CACtB,eAAe,UAAU,MAAM,CAAC,OAAO,OAAO,CAAC;CAChD;;;;ACrWD,MAAM,cAAc,YAAY,WAAW;CACzC,MAAM,EACJ,aAAa,EACX,WAAW,MAAM,QAAQ,EAAE,EAC5B,EACF;CACD,OAAO;EACL,cAAc;EACd,UAAU;EACV,QAAQ;EACR,UAAU;EACV,SAAS;EACT,QAAQ;EACR,YAAY,MAAM,YAAY,OAAO,CAAC,gBAAgB,aAAa,CAAC;EACpE,WAAW,EACT,cAAc,GACf;EACF;CACF,EAAE,CAAC,UAAU;AAEd,MAAM,YAAY,YAAY,WAAW,EACvC,QAAQ;CACN,WAAW,MAAM,QAAQ,EAAE;CAC3B,cAAc,MAAM,QAAQ,EAAE;CAC/B,EACF,EAAE;AAEH,MAAM,+BAA+B,EACnC,OACA,UACA,IACA,OACA,cACA,gBACC,QAAQ;CACT,MAAM,UAAU,WAAW;AAE3B,QACE,oCAAC,aACC,oCAAC,eAAY,WAAW,QAAQ,UAC9B,oCAAC;EACC,WAAW,QAAQ;EACnB,OAAO;GACL,OAAO;GACP,YAAY;GACZ,eAAe;GAChB;IAEA,MACU,EACb,oCAAC;EACK;EACJ,UAAU;EACH;EACP,UAAU;EACI;EACd,OAAO,oCAAC,kBAAc;EACtB,UAAS;IAER,SACY,CACH,CACV;;AAIV,4BAA4B,YAAY;CAItC,OAAO,UAAU;CAIjB,UAAU,UAAU;CAIpB,cAAc,UAAU;CAIxB,OAAO,UAAU;CAClB;AACD,MAAa,qBAAqB,WAAW,4BAA4B"}
1	+ {"version":3,"file":"FluentSimpleSelect-Djff-up8.js","names":["useStyles","useStyles","useStyles","makeStyles","Box"],"sources":["../src/UI/inputs/menus/FluentSelectDirectoryMenu.jsx","../src/UI/inputs/menus/FluentSelectGroupMenu.jsx","../src/UI/inputs/menus/FluentScrollLoadAutocompleteMenu.jsx","../src/UI/inputs/menus/FluentSimpleSelect.jsx"],"sourcesContent":["/* eslint-disable no-use-before-define /\nimport React from 'react'\n\nimport Autocomplete from '@material-ui/lab/Autocomplete'\nimport { makeStyles, TextField } from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n textField: {\n marginLeft: theme.spacing(1),\n marginRight: theme.spacing(1)\n },\n dense: {\n marginTop: theme.spacing(1)\n },\n input: {\n borderRadius: 2,\n height: 32,\n padding: 0,\n marginTop: 3\n },\n formTextInput: {\n fontSize: 14\n },\n labelRoot: {\n fontSize: 14\n }\n}))\n\nexport const FluentSelectGroupMenu = ({\n data,\n placeholder,\n id,\n handleChange\n}) => {\n const classes = useStyles()\n const options =\n data &&\n data.map((option) => {\n const firstLetter = option.label[0].toUpperCase()\n return {\n firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,\n ...option\n }\n })\n\n return (\n <Autocomplete\n id={id}\n onChange={(event, value) => handleChange(value)}\n options={options.sort(\n (a, b) => -b.firstLetter.localeCompare(a.firstLetter)\n )}\n groupBy={(option) => option.firstLetter}\n getOptionLabel={(option) => option.label}\n style={{ width: 300 }}\n renderInput={(params) => (\n <TextField\n {...params}\n label={!params.inputProps.value && placeholder}\n variant='outlined'\n size='small'\n InputLabelProps={{\n shrink: false,\n classes: {\n root: classes.labelRoot,\n focused: classes.labelFocused\n }\n }}\n SelectProps={{\n MenuProps: {\n className: classes.menu\n }\n }}\n />\n )}\n />\n )\n}\n","/ eslint-disable no-use-before-define /\nimport React from 'react'\n\nimport Autocomplete from '@material-ui/lab/Autocomplete'\nimport { makeStyles, TextField } from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n textField: {\n marginLeft: theme.spacing(1),\n marginRight: theme.spacing(1)\n },\n dense: {\n marginTop: theme.spacing(1)\n },\n input: {\n borderRadius: 2,\n height: 32,\n padding: 0,\n marginTop: 3\n },\n formTextInput: {\n fontSize: 14\n },\n labelRoot: {\n fontSize: 14\n }\n}))\n\nexport const SelectGroupMenu = ({ data, placeholder, id, handleChange, className }) => {\n const classes = useStyles()\n const options =\n data &&\n data.map((option) => {\n const grouping = option.category\n return {\n grouping,\n ...option\n }\n })\n\n return (\n <Autocomplete\n className={className}\n id={id}\n onChange={(event, value) => handleChange(value)}\n options={options.sort((a, b) => -b.grouping.localeCompare(a.grouping))}\n groupBy={(option) => option.grouping}\n getOptionLabel={(option) => option.label}\n style={{ width: 300 }}\n renderInput={(params) => (\n <TextField\n {...params}\n label={!params.inputProps.value && placeholder}\n variant='outlined'\n size='small'\n InputLabelProps={{\n shrink: false,\n classes: {\n root: classes.labelRoot,\n focused: classes.labelFocused\n }\n }}\n SelectProps={{\n MenuProps: {\n className: classes.menu\n }\n }}\n />\n )}\n />\n )\n}\n","import React, {\n useState,\n useCallback,\n useEffect,\n forwardRef,\n useRef,\n Children,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { CircularProgress } from '@material-ui/core';\nimport { apiMutate } from '../../../utilities/useAxiosMutate';\nimport { FluentSelectMenu } from './FluentSelectMenu';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useTranslation } from 'react-i18next';\nimport { Box } from '../../Box';\nimport Alert from '@material-ui/lab/Alert';\n\nconst useStyles = makeStyles((theme) => ({\n listbox: {\n position: 'relative',\n maxHeight: 300,\n overflow: 'auto',\n },\n listboxHidden: {\n overflow: 'hidden',\n },\n loadingItem: {\n textAlign: 'center',\n padding: theme.spacing(1),\n },\n overlay: {\n position: 'absolute',\n inset: 0,\n background: 'rgba(255,255,255,.95)',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n zIndex: 1,\n },\n overlayText: {\n marginTop: theme.spacing(1),\n },\n alert: {\n marginTop: theme.spacing(1),\n },\n}));\n\n/\n FluentScrollLoadAutocompleteMenu\n\n A drop‑in extension for MUI’s `<Autocomplete>` that:\n\n 1. Fetches paginated / sortable data from any REST endpoint \n* 2. Implements infinite scrolling with automatic scroll‑position restore \n* 3. Supports client‑side filtering, grouping \n* 4. Displays a Material UI `<CircularProgress>` while loading and a MUI `<Alert>` on errors\n\n Internally it wraps unity‑fluent‑library’s `<FluentSelectMenu>` so you get the same\n* keyboard navigation and styling as the rest of the Fluent controls.\n\n ---\n\n ### Typical usage\n* ```jsx\n* const endpoint = (q, page, size, sortCol, sortDir) =>\n* `/api/products?search=${q}&page=${page}&pageSize=${size}&sort=${sortCol}&dir=${sortDir}`;\n\n const map = (raw) => ({\n* items: raw.items,\n* total: raw.totalRows,\n* });\n\n <FluentScrollLoadAutocompleteMenu\n* apiBaseUrl=\"https://api.example.com\"\n* apiEndpoint={endpoint}\n* mapResponse={map}\n* onChange={(product) => console.log(product)}\n* />\n* ```\n* ---\n\n @param {Object} props\n* @param {string} props.apiBaseUrl Base URL forwarded to apiMutate\n* @param {Function} props.apiEndpoint `(keyword, page, pageSize, sortCol, sortDir) => string`\n* @param {Function} props.mapResponse Maps raw API payload → `{ items, total }`\n* @param {Function} [props.onChange] Fires when the user selects/clears an option\n* @param {Function} [props.getOptionLabel] Returns the display label for an item (default: `o.name`)\n* @param {Function} [props.groupBy] Returns a group heading string for an item\n* @param {string} [props.placeholder='Search…'] Placeholder text\n* @param {string} [props.displayProperty='name'] Property passed to `<FluentSelectMenu>`\n* @param {number\|string} [props.width=300] Fixed width of the component container\n* @param {boolean} [props.fetchEnabled=true] Disable to work fully offline\n* @param {} [props.initialValue=null] Pre‑selected value shown immediately\n @param {Array} [props.initialOptions=[]] Pre‑loaded options shown immediately\n* @param {boolean} [props.isPaginated=true] Disable if your API returns the full list\n* @param {boolean} [props.isSortable=true] Disable server‑side sorting\n* @param {boolean} [props.isFilterable=true] Disable server‑side filtering\n* @param {number} [props.pageSize=50] Items per page when paginating\n* @param {string} [props.sortColumn='Name'] Default sort column\n* @param {'ASC'\|'DESC'} [props.sortDirection='ASC'] Default sort direction\n\n @returns {JSX.Element}\n/\nexport const FluentScrollLoadAutocompleteMenu = ({\n apiBaseUrl,\n apiEndpoint,\n apiConfig = {},\n apiData = null,\n mapResponse,\n onChange,\n getOptionLabel = (o) => o?.name ?? '',\n groupBy,\n placeholder = 'Search…',\n displayProperty = 'name',\n width = 300,\n fetchEnabled = true,\n initialValue = null,\n initialOptions = [],\n isPaginated = true,\n isSortable = true,\n isFilterable = true,\n pageSize = 50,\n sortColumn = 'Name',\n sortDirection = 'ASC',\n}) => {\n const classes = useStyles();\n const [options, setOptions] = useState(initialOptions);\n const [value, setValue] = useState(initialValue);\n const [inputValue, setInputValue] = useState('');\n const [loading, setLoading] = useState(false);\n const [loadingMore, setLoadingMore] = useState(false);\n const [error, setError] = useState(null);\n const [pageNumber, setPageNumber] = useState(1);\n const [totalRows, setTotalRows] = useState(0);\n\n const configRef = useRef(apiConfig);\n const dataRef = useRef(apiData);\n const listboxRef = useRef(null);\n const prevScrollPositionRef = useRef(0);\n\n const { t } = useTranslation();\n\n /\n Fetches a page of data from the provided API endpoint and updates the component state accordingly.\n \n This function supports:\n * - Filtering (if `isFilterable` is true)\n * - Sorting (if `isSortable` is true)\n * - Pagination (based on the `page` and `pageSize` arguments)\n * - Infinite scroll appending (via the `append` flag)\n \n @function fetchPage\n * @param {string} keyword - The keyword to filter results by (if filtering is enabled)\n * @param {number} page - The page number to fetch\n * @param {boolean} [append=false] - If true, appends results to the current list; otherwise replaces it\n * @returns {Promise<void>} - Resolves once data is fetched and state is updated\n /\n const fetchPage = useCallback(\n async (keyword, page, append = false) => {\n if (!fetchEnabled) return;\n\n setError(null);\n page === 1 ? setLoading(true) : setLoadingMore(true);\n\n try {\n const url = apiEndpoint(\n isFilterable ? keyword : '',\n page,\n pageSize,\n isSortable ? sortColumn : '',\n isSortable ? sortDirection : 'ASC'\n );\n const resp = await apiMutate(apiBaseUrl, url, configRef.current, dataRef.current);\n const { items, total } = mapResponse(resp.data);\n\n setOptions((prev) => (append ? [...prev, ...items] : items));\n setTotalRows(total);\n setPageNumber(page);\n } catch (err) {\n setError(err.response?.data?.message ?? err.message ?? t('Unknown error'));\n } finally {\n page === 1 ? setLoading(false) : setLoadingMore(false);\n }\n },\n [\n apiBaseUrl,\n apiEndpoint,\n mapResponse,\n pageSize,\n sortColumn,\n sortDirection,\n isFilterable,\n isSortable,\n fetchEnabled,\n t,\n ]\n );\n\n / ---------- infinite scroll ---------- /\n const handleListboxScroll = (e) => {\n if (!isPaginated) return;\n\n const node = e.currentTarget;\n prevScrollPositionRef.current = node.scrollTop;\n\n if (\n node.scrollTop + node.clientHeight >= node.scrollHeight - 30 &&\n !loadingMore &&\n options.length < totalRows\n ) {\n fetchPage(inputValue, pageNumber + 1, true);\n }\n };\n\n /\n Listbox\n \n Custom scrollable container used by the Autocomplete dropdown.\n * - Attaches a ref to preserve scroll position between pages.\n * - Displays a loading message if no options are present initially.\n * - Shows a full overlay spinner when `loadingMore` is true.\n \n This component is passed as the `ListboxComponent` to FluentSelectMenu’s\n * Autocomplete integration, enabling infinite scroll with visual feedback.\n \n @param {Object} props\n * @param {React.ReactNode} props.children - Option elements to render\n * @param {boolean} props.initialLoading - Whether to show the “Loading…” message initially\n * @param {React.Ref} ref - Forwarded ref from the Autocomplete dropdown\n * @returns {JSX.Element}\n /\n const Listbox = forwardRef(({ children, initialLoading, ...other }, ref) => (\n <ul\n ref={(inst) => {\n if (inst) listboxRef.current = inst;\n if (typeof ref === 'function') ref(inst);\n else if (ref) ref.current = inst;\n }}\n {...other}\n style={{\n position: 'relative',\n maxHeight: 300,\n overflow: loadingMore ? 'hidden' : 'auto',\n }}\n >\n {Children.count(children) === 0 && initialLoading ? (\n <li style={{ textAlign: 'center', padding: 8 }}>{t('Loading...')}</li>\n ) : (\n children\n )}\n\n {loadingMore && (\n <Box className={classes.overlay}>\n <CircularProgress size={20} />\n <span className={classes.overlayText}>{t('Loading...')}</span>\n </Box>\n )}\n </ul>\n ));\n Listbox.displayName = 'FluentSMAutocompleteListbox';\n\n / [Initial / filtered fetch] /\n useEffect(() => {\n if (!fetchEnabled \|\| !isFilterable) return;\n if (value && inputValue === getOptionLabel(value)) return;\n\n const timer = setTimeout(() => fetchPage(inputValue, 1, false), 400);\n return () => clearTimeout(timer);\n }, [inputValue, fetchPage, value, getOptionLabel, isFilterable, fetchEnabled]);\n\n // [Initial fetch when filtering is disabled]\n useEffect(() => {\n if (!fetchEnabled \|\| isFilterable) return;\n fetchPage('', 1, false);\n }, [isFilterable, fetchEnabled, fetchPage]);\n\n // [Restores scroll position after loading more items]\n useEffect(() => {\n if (!loadingMore && listboxRef.current) {\n listboxRef.current.scrollTop = prevScrollPositionRef.current;\n }\n }, [options, loadingMore]);\n\n useEffect(() => { configRef.current = apiConfig }, [apiConfig]);\n useEffect(() => { dataRef.current = apiData }, [apiData]);\n\n return (\n <Box width={width}>\n <FluentSelectMenu\n placeholder={placeholder}\n data={options}\n displayProperty={displayProperty}\n onChange={(val) => {\n setValue(val);\n onChange?.(val);\n }}\n InputProps={{\n endAdornment:\n loading && pageNumber === 1 ? (\n <CircularProgress color=\"inherit\" size={20} />\n ) : null,\n }}\n autoCompleteProps={{\n value,\n inputValue,\n onInputChange: (_e, v) => setInputValue(v),\n loading: loading && pageNumber === 1,\n getOptionLabel,\n groupBy,\n ListboxComponent: Listbox,\n ListboxProps: {\n onScroll: handleListboxScroll,\n initialLoading: loading && pageNumber === 1,\n },\n }}\n />\n\n {error && (\n <Alert severity=\"error\" style={{ marginTop: 8 }}>\n {error}\n </Alert>\n )}\n </Box>\n );\n};\n\nFluentScrollLoadAutocompleteMenu.propTypes = {\n /* Base URL used by apiMutate /\n apiBaseUrl: PropTypes.string.isRequired,\n\n /* Builds the endpoint URL: (keyword, page, pageSize, sortCol, sortDir) => string /\n apiEndpoint: PropTypes.func.isRequired,\n\n /* Additional config passed to apiMutate /\n apiConfig: PropTypes.object,\n\n /* Raw API data passed to apiMutate /\n apiData: PropTypes.any,\n\n /* Maps raw API payload into { items, total } /\n mapResponse: PropTypes.func.isRequired,\n\n /* Called when the user selects or clears an option /\n onChange: PropTypes.func,\n\n /* Returns the text label for a given option /\n getOptionLabel: PropTypes.func,\n\n /* Returns the group heading for a given option /\n groupBy: PropTypes.func,\n\n placeholder: PropTypes.string,\n displayProperty: PropTypes.string,\n width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n / Behavior flags /\n fetchEnabled: PropTypes.bool,\n initialValue: PropTypes.any,\n initialOptions: PropTypes.array,\n\n isPaginated: PropTypes.bool,\n isSortable: PropTypes.bool,\n isFilterable: PropTypes.bool,\n\n pageSize: PropTypes.number,\n sortColumn: PropTypes.string,\n sortDirection: PropTypes.oneOf(['ASC', 'DESC']),\n};\n","import React, {forwardRef} from 'react'\nimport {\n makeStyles,\n withStyles,\n Typography,\n FormControl,\n NativeSelect,\n InputBase\n} from '@material-ui/core'\nimport PropTypes from 'prop-types'\n\nconst FluentInput = withStyles((theme) => ({\n root: {\n 'label + &': {\n marginTop: theme.spacing(1)\n }\n },\n input: {\n borderRadius: 2,\n position: 'relative',\n border: '1px solid rgba(0, 0, 0, 0.23)',\n fontSize: 14,\n padding: '4px 8px',\n height: 20,\n transition: theme.transitions.create(['border-color', 'box-shadow']),\n '&:focus': {\n borderRadius: 2\n }\n }\n}))(InputBase)\n\nconst useStyles = makeStyles((theme) => ({\n margin: {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1)\n }\n}))\n\nconst FluentSimpleSelectComponent = ({\n label,\n children,\n id,\n value,\n handleChange,\n defaultValue\n}, ref) => {\n const classes = useStyles()\n\n return (\n <div>\n <FormControl className={classes.margin}>\n <Typography\n className={classes.label}\n style={{\n color: 'rgba(0, 0, 0, 0.54)',\n fontWeight: 400,\n letterSpacing: 0\n }}\n >\n {label}\n </Typography>\n <NativeSelect\n id={id}\n inputRef={ref}\n value={value}\n onChange={handleChange}\n defaultValue={defaultValue}\n input={<FluentInput />}\n noShrink='true'\n >\n {children}\n </NativeSelect>\n </FormControl>\n </div>\n )\n}\n\nFluentSimpleSelectComponent.propTypes = {\n /\n Label that appears above the selector\n /\n label: PropTypes.string,\n /\n Contents of the selected options (<option></option>)\n /\n children: PropTypes.node,\n /\n Function to handle option change\n /\n handleChange: PropTypes.func,\n /\n Value: the value of the selected item\n */\n value: PropTypes.string\n}\nexport const FluentSimpleSelect = forwardRef(FluentSimpleSelectComponent)\n"],"mappings":"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"}

package/dist/{FluentStatNumber-D-5-RvKv.js → FluentStatNumber-BYwIRVrE.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
-import { t as FluentDisplayNumbers_default } from "./FluentDisplayNumbers-B19-ZDmQ.js";
+import { t as FluentDisplayNumbers_default } from "./FluentDisplayNumbers-C-zCWHot.js";
 import React from "react";
 import { Avatar, Typography, makeStyles } from "@material-ui/core";
 import { MarketDownIcon, MarketIcon } from "@fluentui/react-icons";
@@ -38,4 +38,4 @@ var FluentStatNumber_default = FluentStatNumber;
 //#endregion
 export { FluentStatNumber_default as t };
-//# sourceMappingURL=FluentStatNumber-D-5-RvKv.js.map
+//# sourceMappingURL=FluentStatNumber-BYwIRVrE.js.map

package/dist/{FluentStatNumber-D-5-RvKv.js.map → FluentStatNumber-BYwIRVrE.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FluentStatNumber-~~D-5-RvKv~~.js","names":["FluentDisplayNumber"],"sources":["../src/UI/widgets/FluentComponents/molecules/FluentStatNumber.jsx"],"sourcesContent":["import React from 'react'\nimport { Avatar, makeStyles, Typography } from '@material-ui/core'\nimport FluentDisplayNumber from '../atoms/FluentDisplayNumbers'\nimport { MarketIcon, MarketDownIcon } from '@fluentui/react-icons'\nimport { FluentIcon } from '../../../../utilities/iconLibrary/FluentIcon'\n\nconst useStyles = makeStyles(\n (theme) => ({\n root: {\n display: 'flex',\n flexDirection: 'row'\n },\n caption: {\n textAlign: 'left'\n },\n captionSmall: {\n textAlign: 'center'\n },\n trend: {\n marginTop: theme.spacing(2),\n marginLeft: theme.spacing(1)\n },\n upIcon: {\n color: 'green'\n },\n downIcon: {\n color: '#D50000'\n },\n avatar: {\n backgroundColor: 'white'\n }\n }),\n { next: 'FluentStatNumber' }\n)\n\nconst FluentStatNumber = (props) => {\n const classes = useStyles()\n const { small, trend, label, number } = props\n return (\n <div className={classes.root}>\n <div>\n <div>\n <FluentDisplayNumber small={small} number={Math.abs(number)} />\n </div>\n <div className={!small ? classes.caption : classes.captionSmall}>\n <Typography variant='overline'>{label}</Typography>\n </div>\n </div>\n\n <div className={classes.trend}>\n {small && (\n <Avatar className={classes.avatar}>\n {trend === 'down' ? (\n <FluentIcon\n component={MarketDownIcon}\n className={classes.downIcon}\n />\n ) : (\n <FluentIcon component={MarketIcon} className={classes.upIcon} />\n )}\n </Avatar>\n )}\n </div>\n </div>\n )\n}\nexport default FluentStatNumber\n"],"mappings":";;;;;;;AAMA,MAAM,YAAY,YACf,WAAW;CACV,MAAM;EACJ,SAAS;EACT,eAAe;EAChB;CACD,SAAS,EACP,WAAW,QACZ;CACD,cAAc,EACZ,WAAW,UACZ;CACD,OAAO;EACL,WAAW,MAAM,QAAQ,EAAE;EAC3B,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACD,QAAQ,EACN,OAAO,SACR;CACD,UAAU,EACR,OAAO,WACR;CACD,QAAQ,EACN,iBAAiB,SAClB;CACF,GACD,EAAE,MAAM,oBAAoB,CAC7B;AAED,MAAM,oBAAoB,UAAU;CAClC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,OAAO,OAAO,OAAO,WAAW;AACxC,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,aACC,oCAAC,aACC,oCAACA;EAA2B;EAAO,QAAQ,KAAK,IAAI,OAAO;GAAI,CAC3D,EACN,oCAAC,SAAI,WAAW,CAAC,QAAQ,QAAQ,UAAU,QAAQ,gBACjD,oCAAC,cAAW,SAAQ,cAAY,MAAmB,CAC/C,CACF,EAEN,oCAAC,SAAI,WAAW,QAAQ,SACrB,SACC,oCAAC,UAAO,WAAW,QAAQ,UACxB,UAAU,SACT,oCAAC;EACC,WAAW;EACX,WAAW,QAAQ;GACnB,GAEF,oCAAC;EAAW,WAAW;EAAY,WAAW,QAAQ;GAAU,CAE3D,CAEP,CACF;;AAGV,+BAAe"}
1	+ {"version":3,"file":"FluentStatNumber-BYwIRVrE.js","names":["FluentDisplayNumber"],"sources":["../src/UI/widgets/FluentComponents/molecules/FluentStatNumber.jsx"],"sourcesContent":["import React from 'react'\nimport { Avatar, makeStyles, Typography } from '@material-ui/core'\nimport FluentDisplayNumber from '../atoms/FluentDisplayNumbers'\nimport { MarketIcon, MarketDownIcon } from '@fluentui/react-icons'\nimport { FluentIcon } from '../../../../utilities/iconLibrary/FluentIcon'\n\nconst useStyles = makeStyles(\n (theme) => ({\n root: {\n display: 'flex',\n flexDirection: 'row'\n },\n caption: {\n textAlign: 'left'\n },\n captionSmall: {\n textAlign: 'center'\n },\n trend: {\n marginTop: theme.spacing(2),\n marginLeft: theme.spacing(1)\n },\n upIcon: {\n color: 'green'\n },\n downIcon: {\n color: '#D50000'\n },\n avatar: {\n backgroundColor: 'white'\n }\n }),\n { next: 'FluentStatNumber' }\n)\n\nconst FluentStatNumber = (props) => {\n const classes = useStyles()\n const { small, trend, label, number } = props\n return (\n <div className={classes.root}>\n <div>\n <div>\n <FluentDisplayNumber small={small} number={Math.abs(number)} />\n </div>\n <div className={!small ? classes.caption : classes.captionSmall}>\n <Typography variant='overline'>{label}</Typography>\n </div>\n </div>\n\n <div className={classes.trend}>\n {small && (\n <Avatar className={classes.avatar}>\n {trend === 'down' ? (\n <FluentIcon\n component={MarketDownIcon}\n className={classes.downIcon}\n />\n ) : (\n <FluentIcon component={MarketIcon} className={classes.upIcon} />\n )}\n </Avatar>\n )}\n </div>\n </div>\n )\n}\nexport default FluentStatNumber\n"],"mappings":";;;;;;;AAMA,MAAM,YAAY,YACf,WAAW;CACV,MAAM;EACJ,SAAS;EACT,eAAe;EAChB;CACD,SAAS,EACP,WAAW,QACZ;CACD,cAAc,EACZ,WAAW,UACZ;CACD,OAAO;EACL,WAAW,MAAM,QAAQ,EAAE;EAC3B,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACD,QAAQ,EACN,OAAO,SACR;CACD,UAAU,EACR,OAAO,WACR;CACD,QAAQ,EACN,iBAAiB,SAClB;CACF,GACD,EAAE,MAAM,oBAAoB,CAC7B;AAED,MAAM,oBAAoB,UAAU;CAClC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,OAAO,OAAO,OAAO,WAAW;AACxC,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,aACC,oCAAC,aACC,oCAACA;EAA2B;EAAO,QAAQ,KAAK,IAAI,OAAO;GAAI,CAC3D,EACN,oCAAC,SAAI,WAAW,CAAC,QAAQ,QAAQ,UAAU,QAAQ,gBACjD,oCAAC,cAAW,SAAQ,cAAY,MAAmB,CAC/C,CACF,EAEN,oCAAC,SAAI,WAAW,QAAQ,SACrB,SACC,oCAAC,UAAO,WAAW,QAAQ,UACxB,UAAU,SACT,oCAAC;EACC,WAAW;EACX,WAAW,QAAQ;GACnB,GAEF,oCAAC;EAAW,WAAW;EAAY,WAAW,QAAQ;GAAU,CAE3D,CAEP,CACF;;AAGV,+BAAe"}

package/dist/{FluentStatsSnippet-B8EN8poL.js → FluentStatsSnippet-BN9VkqNq.js} RENAMED Viewed

@@ -80,4 +80,4 @@ var FluentStatsSnippet_default = FluentStatsSnippet;
 //#endregion
 export { FluentStatsSnippet_default as t };
-//# sourceMappingURL=FluentStatsSnippet-B8EN8poL.js.map
+//# sourceMappingURL=FluentStatsSnippet-BN9VkqNq.js.map

package/dist/{FluentStatsSnippet-B8EN8poL.js.map → FluentStatsSnippet-BN9VkqNq.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FluentStatsSnippet-~~B8EN8poL~~.js","names":["useStyles","FluentTrendArrow"],"sources":["../src/UI/widgets/FluentComponents/atoms/FluentTrendArrow.jsx","../src/UI/widgets/FluentComponents/atoms/FluentStatsSnippet.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, colors } from '@material-ui/core';\nimport DownArrow from '@material-ui/icons/esm/ArrowDownward';\nimport UpArrow from '@material-ui/icons/esm/ArrowUpward';\n\nconst useStyles = makeStyles(theme => ({\n root: {},\n DownArrow: {\n color: colors.red[500],\n fontSize: 16,\n },\n UpArrow: {\n color: colors.green[500],\n fontSize: 16,\n },\n}));\n\nconst FluentTrendArrow = props => {\n const { type } = props;\n const classes = useStyles();\n\n let trend = '';\n\n switch (type) {\n case 'up':\n trend = <UpArrow className={classes.UpArrow} />;\n break;\n case 'down':\n trend = <DownArrow className={classes.DownArrow} />;\n break;\n default:\n }\n\n return trend;\n};\nexport default FluentTrendArrow;\n","import React from 'react';\nimport { Typography, makeStyles } from '@material-ui/core';\nimport round from '@extra-number/round';\nimport FluentTrendArrow from './FluentTrendArrow';\n\nconst useStyles = makeStyles(theme => ({\n root: {},\n percent: {\n display: 'flex',\n flexDirection: 'row',\n marginTop: theme.spacing(-0.5),\n },\n arrow: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n },\n percentAmount: {},\n}));\n\nconst FluentStatsSnippet = props => {\n const classes = useStyles(props);\n const {\n label,\n amount: rawAmount,\n prevAmount,\n percent: percentProp,\n trend: trendProp,\n } = props;\n\n // @todo Use an Intl formatter\n let amount = rawAmount;\n // TODO: Revisit below after Tampa Demo\n if (Math.abs(rawAmount) > 1_000_000) {\n //amount = Math.floor(rawAmount / 1_000_000) + 'M';\n let newNumber = rawAmount / 1_000_000;\n amount = [Math.round(newNumber * 10) / 10, 'M'];\n } else if (Math.abs(rawAmount) > 1_000) {\n //amount = Math.floor(rawAmount / 1_000) + 'K';\n let newNumber = rawAmount / 1_000;\n amount = [Math.round(newNumber * 10) / 10, 'K'];\n }\n\n let percent = percentProp;\n let trend = trendProp;\n if (typeof prevAmount === 'number') {\n const ratio = (rawAmount - prevAmount) / prevAmount;\n\n percent =\n Math.abs(round(ratio * 100, Math.abs(ratio) < 0.01 ? 0.01 : 1)) + '%';\n trend = ratio < 0 ? 'down' : 'up';\n }\n\n return (\n <div className={classes.root}>\n <Typography variant=\"overline\" component=\"div\">\n {label}\n </Typography>\n <Typography className={classes.stat} variant=\"h5\" component=\"div\">\n {amount}\n </Typography>\n <div className={classes.percent}>\n <div className={classes.arrow}>\n <FluentTrendArrow type={trend} />\n </div>\n <div className={classes.percentAmount}>\n <Typography variant=\"caption\">{percent}</Typography>\n </div>\n </div>\n </div>\n );\n};\nexport default FluentStatsSnippet;\n"],"mappings":";;;;;;;AAKA,MAAMA,cAAY,YAAW,WAAU;CACrC,MAAM,EAAE;CACR,WAAW;EACT,OAAO,OAAO,IAAI;EAClB,UAAU;EACX;CACD,SAAS;EACP,OAAO,OAAO,MAAM;EACpB,UAAU;EACX;CACF,EAAE;AAEH,MAAM,oBAAmB,UAAS;CAChC,MAAM,EAAE,SAAS;CACjB,MAAM,UAAUA,aAAW;CAE3B,IAAI,QAAQ;AAEZ,SAAQ,MAAR;EACE,KAAK;AACH,WAAQ,oCAAC,WAAQ,WAAW,QAAQ,UAAW;AAC/C;EACF,KAAK;AACH,WAAQ,oCAAC,aAAU,WAAW,QAAQ,YAAa;AACnD;EACF;;AAGF,QAAO;;AAET,+BAAe;;;;AC9Bf,MAAM,YAAY,YAAW,WAAU;CACrC,MAAM,EAAE;CACR,SAAS;EACP,SAAS;EACT,eAAe;EACf,WAAW,MAAM,QAAQ,IAAK;EAC/B;CACD,OAAO;EACL,SAAS;EACT,eAAe;EACf,gBAAgB;EACjB;CACD,eAAe,EAAE;CAClB,EAAE;AAEH,MAAM,sBAAqB,UAAS;CAClC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EACJ,OACA,QAAQ,WACR,YACA,SAAS,aACT,OAAO,cACL;CAGJ,IAAI,SAAS;AAEb,KAAI,KAAK,IAAI,UAAU,GAAG,KAAW;EAEnC,IAAI,YAAY,YAAY;AAC5B,WAAS,CAAC,KAAK,MAAM,YAAY,GAAG,GAAG,IAAI,IAAI;YACtC,KAAK,IAAI,UAAU,GAAG,KAAO;EAEtC,IAAI,YAAY,YAAY;AAC5B,WAAS,CAAC,KAAK,MAAM,YAAY,GAAG,GAAG,IAAI,IAAI;;CAGjD,IAAI,UAAU;CACd,IAAI,QAAQ;AACZ,KAAI,OAAO,eAAe,UAAU;EAClC,MAAM,SAAS,YAAY,cAAc;AAEzC,YACE,KAAK,IAAI,MAAM,QAAQ,KAAK,KAAK,IAAI,MAAM,GAAG,MAAO,MAAO,EAAE,CAAC,GAAG;AACpE,UAAQ,QAAQ,IAAI,SAAS;;AAG/B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC;EAAW,SAAQ;EAAW,WAAU;IACtC,MACU,EACb,oCAAC;EAAW,WAAW,QAAQ;EAAM,SAAQ;EAAK,WAAU;IACzD,OACU,EACb,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,SAAI,WAAW,QAAQ,SACtB,oCAACC,4BAAiB,MAAM,QAAS,CAC7B,EACN,oCAAC,SAAI,WAAW,QAAQ,iBACtB,oCAAC,cAAW,SAAQ,aAAW,QAAqB,CAChD,CACF,CACF;;AAGV,iCAAe"}
1	+ {"version":3,"file":"FluentStatsSnippet-BN9VkqNq.js","names":["useStyles","FluentTrendArrow"],"sources":["../src/UI/widgets/FluentComponents/atoms/FluentTrendArrow.jsx","../src/UI/widgets/FluentComponents/atoms/FluentStatsSnippet.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, colors } from '@material-ui/core';\nimport DownArrow from '@material-ui/icons/esm/ArrowDownward';\nimport UpArrow from '@material-ui/icons/esm/ArrowUpward';\n\nconst useStyles = makeStyles(theme => ({\n root: {},\n DownArrow: {\n color: colors.red[500],\n fontSize: 16,\n },\n UpArrow: {\n color: colors.green[500],\n fontSize: 16,\n },\n}));\n\nconst FluentTrendArrow = props => {\n const { type } = props;\n const classes = useStyles();\n\n let trend = '';\n\n switch (type) {\n case 'up':\n trend = <UpArrow className={classes.UpArrow} />;\n break;\n case 'down':\n trend = <DownArrow className={classes.DownArrow} />;\n break;\n default:\n }\n\n return trend;\n};\nexport default FluentTrendArrow;\n","import React from 'react';\nimport { Typography, makeStyles } from '@material-ui/core';\nimport round from '@extra-number/round';\nimport FluentTrendArrow from './FluentTrendArrow';\n\nconst useStyles = makeStyles(theme => ({\n root: {},\n percent: {\n display: 'flex',\n flexDirection: 'row',\n marginTop: theme.spacing(-0.5),\n },\n arrow: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n },\n percentAmount: {},\n}));\n\nconst FluentStatsSnippet = props => {\n const classes = useStyles(props);\n const {\n label,\n amount: rawAmount,\n prevAmount,\n percent: percentProp,\n trend: trendProp,\n } = props;\n\n // @todo Use an Intl formatter\n let amount = rawAmount;\n // TODO: Revisit below after Tampa Demo\n if (Math.abs(rawAmount) > 1_000_000) {\n //amount = Math.floor(rawAmount / 1_000_000) + 'M';\n let newNumber = rawAmount / 1_000_000;\n amount = [Math.round(newNumber * 10) / 10, 'M'];\n } else if (Math.abs(rawAmount) > 1_000) {\n //amount = Math.floor(rawAmount / 1_000) + 'K';\n let newNumber = rawAmount / 1_000;\n amount = [Math.round(newNumber * 10) / 10, 'K'];\n }\n\n let percent = percentProp;\n let trend = trendProp;\n if (typeof prevAmount === 'number') {\n const ratio = (rawAmount - prevAmount) / prevAmount;\n\n percent =\n Math.abs(round(ratio * 100, Math.abs(ratio) < 0.01 ? 0.01 : 1)) + '%';\n trend = ratio < 0 ? 'down' : 'up';\n }\n\n return (\n <div className={classes.root}>\n <Typography variant=\"overline\" component=\"div\">\n {label}\n </Typography>\n <Typography className={classes.stat} variant=\"h5\" component=\"div\">\n {amount}\n </Typography>\n <div className={classes.percent}>\n <div className={classes.arrow}>\n <FluentTrendArrow type={trend} />\n </div>\n <div className={classes.percentAmount}>\n <Typography variant=\"caption\">{percent}</Typography>\n </div>\n </div>\n </div>\n );\n};\nexport default FluentStatsSnippet;\n"],"mappings":";;;;;;;AAKA,MAAMA,cAAY,YAAW,WAAU;CACrC,MAAM,EAAE;CACR,WAAW;EACT,OAAO,OAAO,IAAI;EAClB,UAAU;EACX;CACD,SAAS;EACP,OAAO,OAAO,MAAM;EACpB,UAAU;EACX;CACF,EAAE;AAEH,MAAM,oBAAmB,UAAS;CAChC,MAAM,EAAE,SAAS;CACjB,MAAM,UAAUA,aAAW;CAE3B,IAAI,QAAQ;AAEZ,SAAQ,MAAR;EACE,KAAK;AACH,WAAQ,oCAAC,WAAQ,WAAW,QAAQ,UAAW;AAC/C;EACF,KAAK;AACH,WAAQ,oCAAC,aAAU,WAAW,QAAQ,YAAa;AACnD;EACF;;AAGF,QAAO;;AAET,+BAAe;;;;AC9Bf,MAAM,YAAY,YAAW,WAAU;CACrC,MAAM,EAAE;CACR,SAAS;EACP,SAAS;EACT,eAAe;EACf,WAAW,MAAM,QAAQ,IAAK;EAC/B;CACD,OAAO;EACL,SAAS;EACT,eAAe;EACf,gBAAgB;EACjB;CACD,eAAe,EAAE;CAClB,EAAE;AAEH,MAAM,sBAAqB,UAAS;CAClC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EACJ,OACA,QAAQ,WACR,YACA,SAAS,aACT,OAAO,cACL;CAGJ,IAAI,SAAS;AAEb,KAAI,KAAK,IAAI,UAAU,GAAG,KAAW;EAEnC,IAAI,YAAY,YAAY;AAC5B,WAAS,CAAC,KAAK,MAAM,YAAY,GAAG,GAAG,IAAI,IAAI;YACtC,KAAK,IAAI,UAAU,GAAG,KAAO;EAEtC,IAAI,YAAY,YAAY;AAC5B,WAAS,CAAC,KAAK,MAAM,YAAY,GAAG,GAAG,IAAI,IAAI;;CAGjD,IAAI,UAAU;CACd,IAAI,QAAQ;AACZ,KAAI,OAAO,eAAe,UAAU;EAClC,MAAM,SAAS,YAAY,cAAc;AAEzC,YACE,KAAK,IAAI,MAAM,QAAQ,KAAK,KAAK,IAAI,MAAM,GAAG,MAAO,MAAO,EAAE,CAAC,GAAG;AACpE,UAAQ,QAAQ,IAAI,SAAS;;AAG/B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC;EAAW,SAAQ;EAAW,WAAU;IACtC,MACU,EACb,oCAAC;EAAW,WAAW,QAAQ;EAAM,SAAQ;EAAK,WAAU;IACzD,OACU,EACb,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,SAAI,WAAW,QAAQ,SACtB,oCAACC,4BAAiB,MAAM,QAAS,CAC7B,EACN,oCAAC,SAAI,WAAW,QAAQ,iBACtB,oCAAC,cAAW,SAAQ,aAAW,QAAqB,CAChD,CACF,CACF;;AAGV,iCAAe"}

package/dist/{FluentTabPanel-BzgD6hTJ.js → FluentTabPanel-DZPtDTkV.js} RENAMED Viewed

@@ -21,4 +21,4 @@ FluentTabPanel.propTypes = {
 //#endregion
 export { FluentTabPanel as t };
-//# sourceMappingURL=FluentTabPanel-BzgD6hTJ.js.map
+//# sourceMappingURL=FluentTabPanel-DZPtDTkV.js.map

package/dist/{FluentTabPanel-BzgD6hTJ.js.map → FluentTabPanel-DZPtDTkV.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FluentTabPanel-~~BzgD6hTJ~~.js","names":[],"sources":["../src/UI/navigation/tabs/defaultTabs/FluentTabPanel.jsx"],"sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Typography, Box } from '@material-ui/core'\n\nexport const FluentTabPanel = (props) => {\n const { children, value, persistant, index, p = 0, ...other } = props\n\n return (\n <div\n role='tabpanel'\n hidden={value !== index}\n id={`simple-tabpanel-${index}`}\n aria-labelledby={`simple-tab-${index}`}\n {...other}\n >\n {(value === index \|\| persistant) && (\n <Box p={p}>\n <Typography component='div'>{children}</Typography>\n </Box>\n )}\n </div>\n )\n}\n\nFluentTabPanel.propTypes = {\n children: PropTypes.node,\n index: PropTypes.any.isRequired,\n value: PropTypes.any.isRequired\n}\n"],"mappings":";;;;;AAIA,MAAa,kBAAkB,UAAU;CACvC,MAAM,EAAE,UAAU,OAAO,YAAY,OAAO,IAAI,GAAG,GAAG,UAAU;AAEhE,QACE,oCAAC;EACC,MAAK;EACL,QAAQ,UAAU;EAClB,IAAI,mBAAmB;EACvB,mBAAiB,cAAc;EAC/B,GAAI;KAEF,UAAU,SAAS,eACnB,oCAAC,OAAO,KACN,oCAAC,cAAW,WAAU,SAAO,SAAsB,CAC/C,CAEJ;;AAIV,eAAe,YAAY;CACzB,UAAU,UAAU;CACpB,OAAO,UAAU,IAAI;CACrB,OAAO,UAAU,IAAI;CACtB"}
1	+ {"version":3,"file":"FluentTabPanel-DZPtDTkV.js","names":[],"sources":["../src/UI/navigation/tabs/defaultTabs/FluentTabPanel.jsx"],"sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Typography, Box } from '@material-ui/core'\n\nexport const FluentTabPanel = (props) => {\n const { children, value, persistant, index, p = 0, ...other } = props\n\n return (\n <div\n role='tabpanel'\n hidden={value !== index}\n id={`simple-tabpanel-${index}`}\n aria-labelledby={`simple-tab-${index}`}\n {...other}\n >\n {(value === index \|\| persistant) && (\n <Box p={p}>\n <Typography component='div'>{children}</Typography>\n </Box>\n )}\n </div>\n )\n}\n\nFluentTabPanel.propTypes = {\n children: PropTypes.node,\n index: PropTypes.any.isRequired,\n value: PropTypes.any.isRequired\n}\n"],"mappings":";;;;;AAIA,MAAa,kBAAkB,UAAU;CACvC,MAAM,EAAE,UAAU,OAAO,YAAY,OAAO,IAAI,GAAG,GAAG,UAAU;AAEhE,QACE,oCAAC;EACC,MAAK;EACL,QAAQ,UAAU;EAClB,IAAI,mBAAmB;EACvB,mBAAiB,cAAc;EAC/B,GAAI;KAEF,UAAU,SAAS,eACnB,oCAAC,OAAO,KACN,oCAAC,cAAW,WAAU,SAAO,SAAsB,CAC/C,CAEJ;;AAIV,eAAe,YAAY;CACzB,UAAU,UAAU;CACpB,OAAO,UAAU,IAAI;CACrB,OAAO,UAAU,IAAI;CACtB"}

package/dist/{FluentTimePicker-BgCEB8I2.js → FluentTimePicker-LUfZzJJZ.js} RENAMED Viewed

@@ -64,4 +64,4 @@ FluentTimePicker.propTypes = {
 //#endregion
 export { FluentTimePicker as t };
-//# sourceMappingURL=FluentTimePicker-BgCEB8I2.js.map
+//# sourceMappingURL=FluentTimePicker-LUfZzJJZ.js.map

package/dist/{FluentTimePicker-BgCEB8I2.js.map → FluentTimePicker-LUfZzJJZ.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FluentTimePicker-~~BgCEB8I2~~.js","names":[],"sources":["../src/UI/inputs/pickers/FluentTimePicker.jsx"],"sourcesContent":["import React from 'react'\nimport { KeyboardTimePicker } from '@material-ui/pickers'\nimport { makeStyles, InputAdornment } from '@material-ui/core'\nimport { EventDateIcon } from '@fluentui/react-icons'\nimport { MuiPickersUtilsProvider } from '@material-ui/pickers'\nimport DateFnsUtils from '@date-io/date-fns'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n root: {},\n inputRoot: {\n fontSize: 12\n },\n input: {\n borderRadius: 2,\n height: 32,\n padding: 0,\n paddingLeft: theme.spacing(1)\n },\n formTextInput: {\n fontSize: 14\n },\n labelRoot: {\n fontSize: 14\n },\n FormControl: {\n display: 'none',\n marginTop: 0\n }\n}))\n\nexport const FluentTimePicker = (props) => {\n const classes = useStyles()\n const { id, label, startAdornment, endAdornment, ...otherProps } = props\n\n return (\n <div>\n <MuiPickersUtilsProvider utils={DateFnsUtils}>\n <KeyboardTimePicker\n variant='inline'\n margin='normal'\n {...otherProps}\n id={id}\n inputVariant='outlined'\n KeyboardButtonProps={{\n 'aria-label': 'change date'\n }}\n keyboardIcon={<EventDateIcon style={{ fontSize: 16 }} />}\n InputProps={{\n classes: {\n root: classes.input,\n input: classes.formTextInput,\n ...props.InputProps?.classes\n },\n ...props.InputProps,\n ...startAdornment,\n ...endAdornment,\n startAdornment: (\n <InputAdornment\n classes={{ root: classes.inputRoot }}\n className={classes.inputRoot}\n position='start'\n >\n {label}\n </InputAdornment>\n )\n }}\n InputLabelProps={{\n shrink: false,\n classes: {\n root: classes.labelRoot,\n focused: classes.labelFocused\n }\n }}\n />\n </MuiPickersUtilsProvider>\n </div>\n )\n}\n\nFluentTimePicker.propTypes = {\n /*\n Adornment label (eg, From: )\n /\n label: PropTypes.string,\n /\n Id\n */\n id: PropTypes.string\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,WAAW,EACT,UAAU,IACX;CACD,OAAO;EACL,cAAc;EACd,QAAQ;EACR,SAAS;EACT,aAAa,MAAM,QAAQ,EAAE;EAC9B;CACD,eAAe,EACb,UAAU,IACX;CACD,WAAW,EACT,UAAU,IACX;CACD,aAAa;EACX,SAAS;EACT,WAAW;EACZ;CACF,EAAE;AAEH,MAAa,oBAAoB,UAAU;CACzC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,IAAI,OAAO,gBAAgB,cAAc,GAAG,eAAe;AAEnE,QACE,oCAAC,aACC,oCAAC,2BAAwB,OAAO,gBAC9B,oCAAC;EACC,SAAQ;EACR,QAAO;EACP,GAAI;EACA;EACJ,cAAa;EACb,qBAAqB,EACnB,cAAc,eACf;EACD,cAAc,oCAAC,iBAAc,OAAO,EAAE,UAAU,IAAI,GAAI;EACxD,YAAY;GACV,SAAS;IACP,MAAM,QAAQ;IACd,OAAO,QAAQ;IACf,GAAG,MAAM,YAAY;IACtB;GACD,GAAG,MAAM;GACT,GAAG;GACH,GAAG;GACH,gBACE,oCAAC;IACC,SAAS,EAAE,MAAM,QAAQ,WAAW;IACpC,WAAW,QAAQ;IACnB,UAAS;MAER,MACc;GAEpB;EACD,iBAAiB;GACf,QAAQ;GACR,SAAS;IACP,MAAM,QAAQ;IACd,SAAS,QAAQ;IAClB;GACF;GACD,CACsB,CACtB;;AAIV,iBAAiB,YAAY;CAI3B,OAAO,UAAU;CAIjB,IAAI,UAAU;CACf"}
1	+ {"version":3,"file":"FluentTimePicker-LUfZzJJZ.js","names":[],"sources":["../src/UI/inputs/pickers/FluentTimePicker.jsx"],"sourcesContent":["import React from 'react'\nimport { KeyboardTimePicker } from '@material-ui/pickers'\nimport { makeStyles, InputAdornment } from '@material-ui/core'\nimport { EventDateIcon } from '@fluentui/react-icons'\nimport { MuiPickersUtilsProvider } from '@material-ui/pickers'\nimport DateFnsUtils from '@date-io/date-fns'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n root: {},\n inputRoot: {\n fontSize: 12\n },\n input: {\n borderRadius: 2,\n height: 32,\n padding: 0,\n paddingLeft: theme.spacing(1)\n },\n formTextInput: {\n fontSize: 14\n },\n labelRoot: {\n fontSize: 14\n },\n FormControl: {\n display: 'none',\n marginTop: 0\n }\n}))\n\nexport const FluentTimePicker = (props) => {\n const classes = useStyles()\n const { id, label, startAdornment, endAdornment, ...otherProps } = props\n\n return (\n <div>\n <MuiPickersUtilsProvider utils={DateFnsUtils}>\n <KeyboardTimePicker\n variant='inline'\n margin='normal'\n {...otherProps}\n id={id}\n inputVariant='outlined'\n KeyboardButtonProps={{\n 'aria-label': 'change date'\n }}\n keyboardIcon={<EventDateIcon style={{ fontSize: 16 }} />}\n InputProps={{\n classes: {\n root: classes.input,\n input: classes.formTextInput,\n ...props.InputProps?.classes\n },\n ...props.InputProps,\n ...startAdornment,\n ...endAdornment,\n startAdornment: (\n <InputAdornment\n classes={{ root: classes.inputRoot }}\n className={classes.inputRoot}\n position='start'\n >\n {label}\n </InputAdornment>\n )\n }}\n InputLabelProps={{\n shrink: false,\n classes: {\n root: classes.labelRoot,\n focused: classes.labelFocused\n }\n }}\n />\n </MuiPickersUtilsProvider>\n </div>\n )\n}\n\nFluentTimePicker.propTypes = {\n /*\n Adornment label (eg, From: )\n /\n label: PropTypes.string,\n /\n Id\n */\n id: PropTypes.string\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,WAAW,EACT,UAAU,IACX;CACD,OAAO;EACL,cAAc;EACd,QAAQ;EACR,SAAS;EACT,aAAa,MAAM,QAAQ,EAAE;EAC9B;CACD,eAAe,EACb,UAAU,IACX;CACD,WAAW,EACT,UAAU,IACX;CACD,aAAa;EACX,SAAS;EACT,WAAW;EACZ;CACF,EAAE;AAEH,MAAa,oBAAoB,UAAU;CACzC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,IAAI,OAAO,gBAAgB,cAAc,GAAG,eAAe;AAEnE,QACE,oCAAC,aACC,oCAAC,2BAAwB,OAAO,gBAC9B,oCAAC;EACC,SAAQ;EACR,QAAO;EACP,GAAI;EACA;EACJ,cAAa;EACb,qBAAqB,EACnB,cAAc,eACf;EACD,cAAc,oCAAC,iBAAc,OAAO,EAAE,UAAU,IAAI,GAAI;EACxD,YAAY;GACV,SAAS;IACP,MAAM,QAAQ;IACd,OAAO,QAAQ;IACf,GAAG,MAAM,YAAY;IACtB;GACD,GAAG,MAAM;GACT,GAAG;GACH,GAAG;GACH,gBACE,oCAAC;IACC,SAAS,EAAE,MAAM,QAAQ,WAAW;IACpC,WAAW,QAAQ;IACnB,UAAS;MAER,MACc;GAEpB;EACD,iBAAiB;GACf,QAAQ;GACR,SAAS;IACP,MAAM,QAAQ;IACd,SAAS,QAAQ;IAClB;GACF;GACD,CACsB,CACtB;;AAIV,iBAAiB,YAAY;CAI3B,OAAO,UAAU;CAIjB,IAAI,UAAU;CACf"}

package/dist/{FluentTimeline-BEPJHsgi.js → FluentTimeline-D8sfgLj1.js} RENAMED Viewed

@@ -89,4 +89,4 @@ var FluentTimeline_default = FluentTimeline;
 //#endregion
 export { FluentTimeline_default as t };
-//# sourceMappingURL=FluentTimeline-BEPJHsgi.js.map
+//# sourceMappingURL=FluentTimeline-D8sfgLj1.js.map

package/dist/{FluentTimeline-BEPJHsgi.js.map → FluentTimeline-D8sfgLj1.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FluentTimeline-~~BEPJHsgi~~.js","names":["useStyles","NumberVisualization"],"sources":["../src/UI/widgets/utils/NumberVisualization.jsx","../src/UI/widgets/FluentComponents/molecules/FluentTimeline.jsx"],"sourcesContent":["import React, { Fragment } from 'react'\nimport { Avatar, colors, makeStyles } from '@material-ui/core'\nimport clsx from 'clsx'\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n minWidth: 30,\n minHeight: 30,\n maxWidth: 70,\n maxHeight: 70,\n // color: theme.palette.getContrastText(theme.palette.primary.dark),\n color: theme?.palette?.primary?.dark\n },\n positive: {\n backgroundColor: (props) =>\n colors.teal[Math.ceil((props.number * 5) / 100) * 100]\n },\n negative: {\n backgroundColor: (props) =>\n colors.deepOrange[Math.abs(Math.ceil((props.number * 5) / 100) * 100)]\n }\n}))\n\nconst NumberVisualization = (props) => {\n const classes = useStyles(props)\n const { number } = props\n\n let displayCircle = ''\n\n if (number > 0) {\n displayCircle = (\n <Avatar\n className={clsx(classes.root, classes.positive)}\n style={{\n width: number * 2,\n height: number * 2\n }}\n >\n {number}\n </Avatar>\n )\n } else {\n displayCircle = (\n <Avatar\n className={clsx(classes.root, classes.negative)}\n style={{\n width: number * 2,\n height: number * 2\n }}\n >\n {number}\n </Avatar>\n )\n }\n\n return <Fragment> {displayCircle} </Fragment>\n}\nexport default NumberVisualization\n","import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport NumberVisualization from '../../utils/NumberVisualization'\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n flexDirection: 'row',\n marginTop: theme.spacing(3),\n marginLeft: theme.spacing(2),\n overflow: 'auto'\n },\n dot: {\n width: 10,\n height: 10,\n backgroundColor: 'white',\n borderRadius: theme.shape.borderRadius + 25,\n marginTop: theme.spacing(1)\n },\n timeLabels: {\n color: 'white'\n },\n indicator: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'flex-end',\n marginRight: theme.spacing(2),\n textAlign: 'center',\n alignItems: 'center'\n }\n}))\n\nconst TimeDot = (props) => {\n const classes = useStyles()\n const { dot } = props\n return (\n <div className={classes.indicator}>\n <div className={classes.dot} />\n <div className={classes.timeLabels}>\n <Typography variant='overline'>{dot}</Typography>\n </div>\n </div>\n )\n}\n\nconst Visualization = (props) => {\n const classes = useStyles()\n const { value, label } = props\n return (\n <div className={classes.indicator}>\n <div>\n <NumberVisualization number={value} />\n </div>\n <div>\n <TimeDot dot={label} />\n </div>\n </div>\n )\n}\n\nconst categoriesToDisplay = (categories) =>\n categories.map((item) => {\n return (\n <Visualization key={item.label} value={item.value} label={item.label} />\n )\n })\n\nconst FluentTimeline = (props) => {\n const classes = useStyles()\n const { categories } = props\n\n return <div className={classes.root}>{categoriesToDisplay(categories)}</div>\n}\nexport default FluentTimeline\n"],"mappings":";;;;;AAIA,MAAMA,cAAY,YAAY,WAAW;CACvC,MAAM;EACJ,UAAU;EACV,WAAW;EACX,UAAU;EACV,WAAW;EAEX,OAAO,OAAO,SAAS,SAAS;EACjC;CACD,UAAU,EACR,kBAAkB,UAChB,OAAO,KAAK,KAAK,KAAM,MAAM,SAAS,IAAK,IAAI,GAAG,MACrD;CACD,UAAU,EACR,kBAAkB,UAChB,OAAO,WAAW,KAAK,IAAI,KAAK,KAAM,MAAM,SAAS,IAAK,IAAI,GAAG,IAAI,GACxE;CACF,EAAE;AAEH,MAAM,uBAAuB,UAAU;CACrC,MAAM,UAAUA,YAAU,MAAM;CAChC,MAAM,EAAE,WAAW;CAEnB,IAAI,gBAAgB;AAEpB,KAAI,SAAS,EACX,iBACE,oCAAC;EACC,WAAW,KAAK,QAAQ,MAAM,QAAQ,SAAS;EAC/C,OAAO;GACL,OAAO,SAAS;GAChB,QAAQ,SAAS;GAClB;IAEA,OACM;KAGX,iBACE,oCAAC;EACC,WAAW,KAAK,QAAQ,MAAM,QAAQ,SAAS;EAC/C,OAAO;GACL,OAAO,SAAS;GAChB,QAAQ,SAAS;GAClB;IAEA,OACM;AAIb,QAAO,oCAAC,gBAAS,KAAE,eAAc,IAAY;;AAE/C,kCAAe;;;;ACrDf,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM;EACJ,SAAS;EACT,eAAe;EACf,WAAW,MAAM,QAAQ,EAAE;EAC3B,YAAY,MAAM,QAAQ,EAAE;EAC5B,UAAU;EACX;CACD,KAAK;EACH,OAAO;EACP,QAAQ;EACR,iBAAiB;EACjB,cAAc,MAAM,MAAM,eAAe;EACzC,WAAW,MAAM,QAAQ,EAAE;EAC5B;CACD,YAAY,EACV,OAAO,SACR;CACD,WAAW;EACT,SAAS;EACT,eAAe;EACf,gBAAgB;EAChB,aAAa,MAAM,QAAQ,EAAE;EAC7B,WAAW;EACX,YAAY;EACb;CACF,EAAE;AAEH,MAAM,WAAW,UAAU;CACzB,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,QAAQ;AAChB,QACE,oCAAC,SAAI,WAAW,QAAQ,aACtB,oCAAC,SAAI,WAAW,QAAQ,MAAO,EAC/B,oCAAC,SAAI,WAAW,QAAQ,cACtB,oCAAC,cAAW,SAAQ,cAAY,IAAiB,CAC7C,CACF;;AAIV,MAAM,iBAAiB,UAAU;CAC/B,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,OAAO,UAAU;AACzB,QACE,oCAAC,SAAI,WAAW,QAAQ,aACtB,oCAAC,aACC,oCAACC,+BAAoB,QAAQ,QAAS,CAClC,EACN,oCAAC,aACC,oCAAC,WAAQ,KAAK,QAAS,CACnB,CACF;;AAIV,MAAM,uBAAuB,eAC3B,WAAW,KAAK,SAAS;AACvB,QACE,oCAAC;EAAc,KAAK,KAAK;EAAO,OAAO,KAAK;EAAO,OAAO,KAAK;GAAS;EAE1E;AAEJ,MAAM,kBAAkB,UAAU;CAChC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,eAAe;AAEvB,QAAO,oCAAC,SAAI,WAAW,QAAQ,QAAO,oBAAoB,WAAW,CAAO;;AAE9E,6BAAe"}
1	+ {"version":3,"file":"FluentTimeline-D8sfgLj1.js","names":["useStyles","NumberVisualization"],"sources":["../src/UI/widgets/utils/NumberVisualization.jsx","../src/UI/widgets/FluentComponents/molecules/FluentTimeline.jsx"],"sourcesContent":["import React, { Fragment } from 'react'\nimport { Avatar, colors, makeStyles } from '@material-ui/core'\nimport clsx from 'clsx'\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n minWidth: 30,\n minHeight: 30,\n maxWidth: 70,\n maxHeight: 70,\n // color: theme.palette.getContrastText(theme.palette.primary.dark),\n color: theme?.palette?.primary?.dark\n },\n positive: {\n backgroundColor: (props) =>\n colors.teal[Math.ceil((props.number * 5) / 100) * 100]\n },\n negative: {\n backgroundColor: (props) =>\n colors.deepOrange[Math.abs(Math.ceil((props.number * 5) / 100) * 100)]\n }\n}))\n\nconst NumberVisualization = (props) => {\n const classes = useStyles(props)\n const { number } = props\n\n let displayCircle = ''\n\n if (number > 0) {\n displayCircle = (\n <Avatar\n className={clsx(classes.root, classes.positive)}\n style={{\n width: number * 2,\n height: number * 2\n }}\n >\n {number}\n </Avatar>\n )\n } else {\n displayCircle = (\n <Avatar\n className={clsx(classes.root, classes.negative)}\n style={{\n width: number * 2,\n height: number * 2\n }}\n >\n {number}\n </Avatar>\n )\n }\n\n return <Fragment> {displayCircle} </Fragment>\n}\nexport default NumberVisualization\n","import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport NumberVisualization from '../../utils/NumberVisualization'\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex',\n flexDirection: 'row',\n marginTop: theme.spacing(3),\n marginLeft: theme.spacing(2),\n overflow: 'auto'\n },\n dot: {\n width: 10,\n height: 10,\n backgroundColor: 'white',\n borderRadius: theme.shape.borderRadius + 25,\n marginTop: theme.spacing(1)\n },\n timeLabels: {\n color: 'white'\n },\n indicator: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'flex-end',\n marginRight: theme.spacing(2),\n textAlign: 'center',\n alignItems: 'center'\n }\n}))\n\nconst TimeDot = (props) => {\n const classes = useStyles()\n const { dot } = props\n return (\n <div className={classes.indicator}>\n <div className={classes.dot} />\n <div className={classes.timeLabels}>\n <Typography variant='overline'>{dot}</Typography>\n </div>\n </div>\n )\n}\n\nconst Visualization = (props) => {\n const classes = useStyles()\n const { value, label } = props\n return (\n <div className={classes.indicator}>\n <div>\n <NumberVisualization number={value} />\n </div>\n <div>\n <TimeDot dot={label} />\n </div>\n </div>\n )\n}\n\nconst categoriesToDisplay = (categories) =>\n categories.map((item) => {\n return (\n <Visualization key={item.label} value={item.value} label={item.label} />\n )\n })\n\nconst FluentTimeline = (props) => {\n const classes = useStyles()\n const { categories } = props\n\n return <div className={classes.root}>{categoriesToDisplay(categories)}</div>\n}\nexport default FluentTimeline\n"],"mappings":";;;;;AAIA,MAAMA,cAAY,YAAY,WAAW;CACvC,MAAM;EACJ,UAAU;EACV,WAAW;EACX,UAAU;EACV,WAAW;EAEX,OAAO,OAAO,SAAS,SAAS;EACjC;CACD,UAAU,EACR,kBAAkB,UAChB,OAAO,KAAK,KAAK,KAAM,MAAM,SAAS,IAAK,IAAI,GAAG,MACrD;CACD,UAAU,EACR,kBAAkB,UAChB,OAAO,WAAW,KAAK,IAAI,KAAK,KAAM,MAAM,SAAS,IAAK,IAAI,GAAG,IAAI,GACxE;CACF,EAAE;AAEH,MAAM,uBAAuB,UAAU;CACrC,MAAM,UAAUA,YAAU,MAAM;CAChC,MAAM,EAAE,WAAW;CAEnB,IAAI,gBAAgB;AAEpB,KAAI,SAAS,EACX,iBACE,oCAAC;EACC,WAAW,KAAK,QAAQ,MAAM,QAAQ,SAAS;EAC/C,OAAO;GACL,OAAO,SAAS;GAChB,QAAQ,SAAS;GAClB;IAEA,OACM;KAGX,iBACE,oCAAC;EACC,WAAW,KAAK,QAAQ,MAAM,QAAQ,SAAS;EAC/C,OAAO;GACL,OAAO,SAAS;GAChB,QAAQ,SAAS;GAClB;IAEA,OACM;AAIb,QAAO,oCAAC,gBAAS,KAAE,eAAc,IAAY;;AAE/C,kCAAe;;;;ACrDf,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM;EACJ,SAAS;EACT,eAAe;EACf,WAAW,MAAM,QAAQ,EAAE;EAC3B,YAAY,MAAM,QAAQ,EAAE;EAC5B,UAAU;EACX;CACD,KAAK;EACH,OAAO;EACP,QAAQ;EACR,iBAAiB;EACjB,cAAc,MAAM,MAAM,eAAe;EACzC,WAAW,MAAM,QAAQ,EAAE;EAC5B;CACD,YAAY,EACV,OAAO,SACR;CACD,WAAW;EACT,SAAS;EACT,eAAe;EACf,gBAAgB;EAChB,aAAa,MAAM,QAAQ,EAAE;EAC7B,WAAW;EACX,YAAY;EACb;CACF,EAAE;AAEH,MAAM,WAAW,UAAU;CACzB,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,QAAQ;AAChB,QACE,oCAAC,SAAI,WAAW,QAAQ,aACtB,oCAAC,SAAI,WAAW,QAAQ,MAAO,EAC/B,oCAAC,SAAI,WAAW,QAAQ,cACtB,oCAAC,cAAW,SAAQ,cAAY,IAAiB,CAC7C,CACF;;AAIV,MAAM,iBAAiB,UAAU;CAC/B,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,OAAO,UAAU;AACzB,QACE,oCAAC,SAAI,WAAW,QAAQ,aACtB,oCAAC,aACC,oCAACC,+BAAoB,QAAQ,QAAS,CAClC,EACN,oCAAC,aACC,oCAAC,WAAQ,KAAK,QAAS,CACnB,CACF;;AAIV,MAAM,uBAAuB,eAC3B,WAAW,KAAK,SAAS;AACvB,QACE,oCAAC;EAAc,KAAK,KAAK;EAAO,OAAO,KAAK;EAAO,OAAO,KAAK;GAAS;EAE1E;AAEJ,MAAM,kBAAkB,UAAU;CAChC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,eAAe;AAEvB,QAAO,oCAAC,SAAI,WAAW,QAAQ,QAAO,oBAAoB,WAAW,CAAO;;AAE9E,6BAAe"}

package/dist/{GaugeWidget-DUyeu_8B.js → GaugeWidget-GvHtWlDn.js} RENAMED Viewed

@@ -379,4 +379,4 @@ GaugeWidget.propTypes = {
 //#endregion
 export { GaugeWidget as t };
-//# sourceMappingURL=GaugeWidget-DUyeu_8B.js.map
+//# sourceMappingURL=GaugeWidget-GvHtWlDn.js.map

package/dist/{GaugeWidget-DUyeu_8B.js.map → GaugeWidget-GvHtWlDn.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GaugeWidget-DUyeu_8B.js","names":[],"sources":["../src/UI/widgets/library/GaugeWidget/GaugeWidget.jsx"],"sourcesContent":["import React from 'react';\nimport { Vega } from 'react-vega';\nimport PropTypes from 'prop-types';\n\nexport const GaugeWidget = (props) => {\n const {\n title = '',\n unitLabel = '',\n legend = '',\n showTicks = false,\n ticksNumber = 6,\n backgroundColor = '#cbd1d6',\n fillColor = '#FF9800',\n value = 0,\n minValue = 0,\n maxValue = 100,\n handleHover = () => {}\n } = props;\n\n const specs = {\n $schema: 'https://vega.github.io/schema/vega/v5.json',\n width: 350,\n height: 180,\n padding: { left: 0, right: 0, top: 0, bottom: 0 },\n\n data: [\n {\n name: 'ticks',\n transform: [\n {\n type: 'sequence',\n as: 'data',\n start: {\n signal: '0'\n },\n stop: {\n signal: '(maxValue - minValue) + 0.1'\n },\n step: {\n signal: '(maxValue - minValue)/(ticksNumber-1)'\n }\n },\n {\n type: 'formula',\n expr: 'datum.data + minValue',\n as: 'data_2'\n },\n {\n type: 'formula',\n as: 'radianRef',\n expr: 'PI * (datum.data/(maxValue - minValue))'\n },\n {\n type: 'formula',\n as: 'x',\n expr: 'centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))'\n },\n {\n type: 'formula',\n as: 'y',\n expr: 'centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))'\n }\n ]\n }\n ],\n signals: [\n {\n name: 'centerX',\n update: 'width/2'\n },\n {\n name: 'centerY',\n update: 'height/2 + outerRadius/2'\n },\n {\n name: 'outerRadius',\n update: 'targetValue ? radiusRef * 0.9 : radiusRef * 0.95'\n },\n {\n name: 'radiusRef',\n update: 'max(width/2, height/2)' // TODO: Important max or min functions are allowed\n },\n {\n name: 'innerRadius',\n update: 'outerRadius - outerRadius * 0.25'\n },\n {\n name: 'targetValue',\n value: value\n },\n {\n name: 'backgroundColor',\n value: backgroundColor\n },\n {\n name: 'ticksNumber',\n value: ticksNumber\n },\n {\n name: 'mainValue',\n value: value\n },\n {\n name: 'title',\n value: title\n },\n {\n name: 'unit',\n value: unitLabel\n },\n {\n name: 'usedValue',\n update: 'min(max(minValue, mainValue), maxValue)'\n },\n {\n name: 'minValue',\n value: minValue\n },\n {\n name: 'maxValue',\n value: maxValue\n },\n {\n name: 'fillColor',\n value: fillColor\n },\n {\n name: 'ticksColor',\n value: '#000000'\n },\n {\n name: 'showTicks',\n value: showTicks\n },\n {\n name: 'fontFactor',\n update: '(radiusRef/5)/25'\n },\n {\n name: 'hasTarget',\n update: 'isNumber(targetValue) === true'\n },\n {\n name: 'targetRule',\n update:\n '(showTarget && hasTarget && (minValue <= targetValue) && (targetValue <= maxValue)) ? 1 : 0'\n },\n {\n name: 'showTarget',\n value: true\n },\n {\n name: 'targetStatus',\n update:\n 'mainValue === targetValue ? 0 : mainValue > targetValue ? lowIsGood ? -1 : 1 : lowIsGood ? 1 : -1'\n },\n {\n name: 'lowIsGood',\n value: false\n },\n {\n name: 'legend',\n value: legend\n }\n ],\n scales: [\n {\n name: 'gaugeScale',\n type: 'linear',\n domain: { data: 'ticks', field: 'data_2' },\n zero: false,\n range: { signal: '[-PI/2, PI/2]' }\n },\n {\n name: 'tickScale',\n type: 'linear',\n domain: { data: 'ticks', field: 'data' },\n range: { signal: '[PI/2, -PI/2]' }\n },\n {\n name: 'targetStatusColorScale',\n domain: [-1, 0, 1],\n range: ['red', 'orange', 'green']\n }\n ],\n\n axes: [],\n legends: [],\n\n marks: [\n {\n type: 'arc',\n name: 'gauge',\n encode: {\n enter: {\n x: { signal: 'centerX' },\n y: { signal: 'centerY' },\n startAngle: { signal: '-PI/2' },\n endAngle: { signal: 'PI/2' },\n outerRadius: { signal: 'outerRadius' },\n innerRadius: { signal: 'innerRadius' },\n fill: { signal: 'backgroundColor' }\n }\n }\n },\n {\n type: 'arc',\n encode: {\n enter: {\n startAngle: { signal: '-PI/2' }\n },\n update: {\n x: { signal: 'centerX' },\n y: { signal: 'centerY' },\n innerRadius: { signal: 'innerRadius' },\n outerRadius: { signal: 'outerRadius' },\n endAngle: { scale: 'gaugeScale', signal: 'usedValue' },\n fill: { signal: 'fillColor' }\n }\n }\n },\n {\n type: 'arc',\n description: 'ticks on the arc',\n from: { data: 'ticks' },\n encode: {\n enter: {\n x: { signal: 'centerX' },\n y: { signal: 'centerY' },\n outerRadius: { signal: 'outerRadius' },\n innerRadius: { signal: 'outerRadius - (radiusRef0.05)' },\n startAngle: {\n scale: 'tickScale',\n field: 'data'\n },\n endAngle: {\n scale: 'tickScale',\n field: 'data'\n },\n stroke: { signal: 'ticksColor' },\n opacity: { signal: 'showTicks ? 1 : 0' }\n }\n }\n },\n {\n type: 'text',\n from: { data: 'ticks' },\n encode: {\n enter: {\n align: { value: 'center' },\n baseline: { value: 'alphabetic' }\n },\n update: {\n text: { signal: \"format(datum.data_2, '.0f')\" },\n x: { field: 'x' },\n y: { field: 'y' },\n fontSize: { signal: 'fontFactor 11' },\n fill: { signal: 'ticksColor' },\n opacity: { signal: 'showTicks ? 1 : 0' }\n }\n }\n },\n {\n type: 'text',\n description:\n 'displayed min value at the bottom left of gauge when showTicks is false',\n from: { data: 'gauge' },\n encode: {\n enter: {\n align: { value: 'center' },\n baseline: { value: 'top' }\n },\n update: {\n text: { signal: 'minValue' },\n x: {\n signal: 'centerX - outerRadius + (outerRadius - innerRadius)/2'\n },\n y: { signal: 'centerY', offset: { signal: 'fontFactor5' } },\n fontSize: { signal: 'fontFactor 11' },\n opacity: { signal: 'showTicks ? 0 : 1' }\n }\n }\n },\n {\n type: 'text',\n description:\n 'displayed max value at the bottom right of gauge when showTicks is false',\n from: { data: 'gauge' },\n encode: {\n enter: {\n align: { value: 'center' },\n baseline: { value: 'top' }\n },\n update: {\n text: { signal: 'maxValue' },\n x: {\n signal: 'centerX + innerRadius + (outerRadius - innerRadius)/2'\n },\n y: { signal: 'centerY', offset: { signal: 'fontFactor5' } },\n fontSize: { signal: 'fontFactor 11' },\n opacity: { signal: 'showTicks ? 0 : 1' }\n }\n }\n },\n {\n type: 'text',\n description: 'displayed a title for the chart ',\n name: 'titleLabel',\n encode: {\n enter: {\n x: { signal: 'centerX' },\n baseline: { value: 'top' },\n align: { value: 'center' }\n },\n update: {\n text: { signal: 'title' },\n y: { signal: 'centerY', offset: { signal: 'fontFactor * -50' } },\n fontSize: { signal: 'fontFactor * 14' },\n fill: { signal: 'fillColor' }\n }\n }\n },\n {\n type: 'text',\n description: 'displayed main value at the bottom center of the gauge ',\n name: 'gaugeValue',\n encode: {\n enter: {\n x: { signal: 'centerX' },\n baseline: { value: 'top' },\n align: { value: 'center' }\n },\n update: {\n text: { signal: \"format(mainValue, '.1f') + unit \" },\n y: { signal: 'centerY', offset: { signal: 'fontFactor * -25' } },\n fontSize: { signal: 'fontFactor * 20' }\n }\n }\n },\n {\n type: 'text',\n name: 'targetDiff',\n description: 'add status with symbol and difference and percentage',\n from: { data: 'gaugeValue' },\n encode: {\n enter: {\n x: { signal: 'centerX' },\n align: { value: 'center' },\n baseline: { value: 'top' }\n },\n update: {\n // text: { \"signal\": \"format((mainValue - targetValue), '.2f') + ' (' + format(mainValue/targetValue, '.0%') + ')'\" },\n // fill: { \"signal\": \"targetStatus\", \"scale\": \"targetStatusColorScale\" },\n // x: { \"signal\": \"centerX + (fontFactor * 12)\" },\n text: { signal: 'legend' },\n y: { signal: 'centerY', offset: { signal: 'fontFactor * -4' } },\n fontSize: { signal: 'fontFactor * 10' },\n opacity: { signal: ' targetRule ? 1 : 0' }\n }\n }\n }\n ]\n };\n\n const signalListeners = { hover: handleHover };\n\n return (\n <Vega spec={specs} actions={false} signalListeners={signalListeners} />\n );\n};\n\nGaugeWidget.propTypes = {\n /** @type {?string} label showed in the bottom part of the graph /\n title: PropTypes.string.isRequired,\n\n /* @type {?string} optional symbol to put at the right side of the value /\n legend: PropTypes.string,\n\n /* @type {?bool} optional icon to display ticks in the graph /\n showTicks: PropTypes.bool,\n\n /* @type {?string} optional additional css properties /\n unitLabel: PropTypes.string,\n\n /* @type {?number} number of ticks in the graph /\n ticksNumber: PropTypes.number,\n\n /* @type {?string} render prop if you want to pass a custom react element instead of the predefined label/\n backgroundColor: PropTypes.string,\n\n /* @type {?number} main value for the graph element/\n value: PropTypes.number.isRequired,\n\n /* @type {?number} range min value for the graph element/\n minValue: PropTypes.number,\n\n /* @type {?number} range max value for the graph element*/\n maxValue: PropTypes.number\n};\n"],"mappings":";;;;;AAIA,MAAa,eAAe,UAAU;CACpC,MAAM,EACJ,QAAQ,IACR,YAAY,IACZ,SAAS,IACT,YAAY,OACZ,cAAc,GACd,kBAAkB,WAClB,YAAY,WACZ,QAAQ,GACR,WAAW,GACX,WAAW,KACX,oBAAoB,OAClB;CAEJ,MAAM,QAAQ;EACZ,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;GAAE,MAAM;GAAG,OAAO;GAAG,KAAK;GAAG,QAAQ;GAAG;EAEjD,MAAM,CACJ;GACE,MAAM;GACN,WAAW;IACT;KACE,MAAM;KACN,IAAI;KACJ,OAAO,EACL,QAAQ,KACT;KACD,MAAM,EACJ,QAAQ,+BACT;KACD,MAAM,EACJ,QAAQ,yCACT;KACF;IACD;KACE,MAAM;KACN,MAAM;KACN,IAAI;KACL;IACD;KACE,MAAM;KACN,IAAI;KACJ,MAAM;KACP;IACD;KACE,MAAM;KACN,IAAI;KACJ,MAAM;KACP;IACD;KACE,MAAM;KACN,IAAI;KACJ,MAAM;KACP;IACF;GACF,CACF;EACD,SAAS;GACP;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACC;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACC;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QACE;IACH;GACD;IACE,MAAM;IACN,OAAO;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"}
1	+ {"version":3,"file":"GaugeWidget-GvHtWlDn.js","names":[],"sources":["../src/UI/widgets/library/GaugeWidget/GaugeWidget.jsx"],"sourcesContent":["import React from 'react';\nimport { Vega } from 'react-vega';\nimport PropTypes from 'prop-types';\n\nexport const GaugeWidget = (props) => {\n const {\n title = '',\n unitLabel = '',\n legend = '',\n showTicks = false,\n ticksNumber = 6,\n backgroundColor = '#cbd1d6',\n fillColor = '#FF9800',\n value = 0,\n minValue = 0,\n maxValue = 100,\n handleHover = () => {}\n } = props;\n\n const specs = {\n $schema: 'https://vega.github.io/schema/vega/v5.json',\n width: 350,\n height: 180,\n padding: { left: 0, right: 0, top: 0, bottom: 0 },\n\n data: [\n {\n name: 'ticks',\n transform: [\n {\n type: 'sequence',\n as: 'data',\n start: {\n signal: '0'\n },\n stop: {\n signal: '(maxValue - minValue) + 0.1'\n },\n step: {\n signal: '(maxValue - minValue)/(ticksNumber-1)'\n }\n },\n {\n type: 'formula',\n expr: 'datum.data + minValue',\n as: 'data_2'\n },\n {\n type: 'formula',\n as: 'radianRef',\n expr: 'PI * (datum.data/(maxValue - minValue))'\n },\n {\n type: 'formula',\n as: 'x',\n expr: 'centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))'\n },\n {\n type: 'formula',\n as: 'y',\n expr: 'centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))'\n }\n ]\n }\n ],\n signals: [\n {\n name: 'centerX',\n update: 'width/2'\n },\n {\n name: 'centerY',\n update: 'height/2 + outerRadius/2'\n },\n {\n name: 'outerRadius',\n update: 'targetValue ? radiusRef * 0.9 : radiusRef * 0.95'\n },\n {\n name: 'radiusRef',\n update: 'max(width/2, height/2)' // TODO: Important max or min functions are allowed\n },\n {\n name: 'innerRadius',\n update: 'outerRadius - outerRadius * 0.25'\n },\n {\n name: 'targetValue',\n value: value\n },\n {\n name: 'backgroundColor',\n value: backgroundColor\n },\n {\n name: 'ticksNumber',\n value: ticksNumber\n },\n {\n name: 'mainValue',\n value: value\n },\n {\n name: 'title',\n value: title\n },\n {\n name: 'unit',\n value: unitLabel\n },\n {\n name: 'usedValue',\n update: 'min(max(minValue, mainValue), maxValue)'\n },\n {\n name: 'minValue',\n value: minValue\n },\n {\n name: 'maxValue',\n value: maxValue\n },\n {\n name: 'fillColor',\n value: fillColor\n },\n {\n name: 'ticksColor',\n value: '#000000'\n },\n {\n name: 'showTicks',\n value: showTicks\n },\n {\n name: 'fontFactor',\n update: '(radiusRef/5)/25'\n },\n {\n name: 'hasTarget',\n update: 'isNumber(targetValue) === true'\n },\n {\n name: 'targetRule',\n update:\n '(showTarget && hasTarget && (minValue <= targetValue) && (targetValue <= maxValue)) ? 1 : 0'\n },\n {\n name: 'showTarget',\n value: true\n },\n {\n name: 'targetStatus',\n update:\n 'mainValue === targetValue ? 0 : mainValue > targetValue ? lowIsGood ? -1 : 1 : lowIsGood ? 1 : -1'\n },\n {\n name: 'lowIsGood',\n value: false\n },\n {\n name: 'legend',\n value: legend\n }\n ],\n scales: [\n {\n name: 'gaugeScale',\n type: 'linear',\n domain: { data: 'ticks', field: 'data_2' },\n zero: false,\n range: { signal: '[-PI/2, PI/2]' }\n },\n {\n name: 'tickScale',\n type: 'linear',\n domain: { data: 'ticks', field: 'data' },\n range: { signal: '[PI/2, -PI/2]' }\n },\n {\n name: 'targetStatusColorScale',\n domain: [-1, 0, 1],\n range: ['red', 'orange', 'green']\n }\n ],\n\n axes: [],\n legends: [],\n\n marks: [\n {\n type: 'arc',\n name: 'gauge',\n encode: {\n enter: {\n x: { signal: 'centerX' },\n y: { signal: 'centerY' },\n startAngle: { signal: '-PI/2' },\n endAngle: { signal: 'PI/2' },\n outerRadius: { signal: 'outerRadius' },\n innerRadius: { signal: 'innerRadius' },\n fill: { signal: 'backgroundColor' }\n }\n }\n },\n {\n type: 'arc',\n encode: {\n enter: {\n startAngle: { signal: '-PI/2' }\n },\n update: {\n x: { signal: 'centerX' },\n y: { signal: 'centerY' },\n innerRadius: { signal: 'innerRadius' },\n outerRadius: { signal: 'outerRadius' },\n endAngle: { scale: 'gaugeScale', signal: 'usedValue' },\n fill: { signal: 'fillColor' }\n }\n }\n },\n {\n type: 'arc',\n description: 'ticks on the arc',\n from: { data: 'ticks' },\n encode: {\n enter: {\n x: { signal: 'centerX' },\n y: { signal: 'centerY' },\n outerRadius: { signal: 'outerRadius' },\n innerRadius: { signal: 'outerRadius - (radiusRef0.05)' },\n startAngle: {\n scale: 'tickScale',\n field: 'data'\n },\n endAngle: {\n scale: 'tickScale',\n field: 'data'\n },\n stroke: { signal: 'ticksColor' },\n opacity: { signal: 'showTicks ? 1 : 0' }\n }\n }\n },\n {\n type: 'text',\n from: { data: 'ticks' },\n encode: {\n enter: {\n align: { value: 'center' },\n baseline: { value: 'alphabetic' }\n },\n update: {\n text: { signal: \"format(datum.data_2, '.0f')\" },\n x: { field: 'x' },\n y: { field: 'y' },\n fontSize: { signal: 'fontFactor 11' },\n fill: { signal: 'ticksColor' },\n opacity: { signal: 'showTicks ? 1 : 0' }\n }\n }\n },\n {\n type: 'text',\n description:\n 'displayed min value at the bottom left of gauge when showTicks is false',\n from: { data: 'gauge' },\n encode: {\n enter: {\n align: { value: 'center' },\n baseline: { value: 'top' }\n },\n update: {\n text: { signal: 'minValue' },\n x: {\n signal: 'centerX - outerRadius + (outerRadius - innerRadius)/2'\n },\n y: { signal: 'centerY', offset: { signal: 'fontFactor5' } },\n fontSize: { signal: 'fontFactor 11' },\n opacity: { signal: 'showTicks ? 0 : 1' }\n }\n }\n },\n {\n type: 'text',\n description:\n 'displayed max value at the bottom right of gauge when showTicks is false',\n from: { data: 'gauge' },\n encode: {\n enter: {\n align: { value: 'center' },\n baseline: { value: 'top' }\n },\n update: {\n text: { signal: 'maxValue' },\n x: {\n signal: 'centerX + innerRadius + (outerRadius - innerRadius)/2'\n },\n y: { signal: 'centerY', offset: { signal: 'fontFactor5' } },\n fontSize: { signal: 'fontFactor 11' },\n opacity: { signal: 'showTicks ? 0 : 1' }\n }\n }\n },\n {\n type: 'text',\n description: 'displayed a title for the chart ',\n name: 'titleLabel',\n encode: {\n enter: {\n x: { signal: 'centerX' },\n baseline: { value: 'top' },\n align: { value: 'center' }\n },\n update: {\n text: { signal: 'title' },\n y: { signal: 'centerY', offset: { signal: 'fontFactor * -50' } },\n fontSize: { signal: 'fontFactor * 14' },\n fill: { signal: 'fillColor' }\n }\n }\n },\n {\n type: 'text',\n description: 'displayed main value at the bottom center of the gauge ',\n name: 'gaugeValue',\n encode: {\n enter: {\n x: { signal: 'centerX' },\n baseline: { value: 'top' },\n align: { value: 'center' }\n },\n update: {\n text: { signal: \"format(mainValue, '.1f') + unit \" },\n y: { signal: 'centerY', offset: { signal: 'fontFactor * -25' } },\n fontSize: { signal: 'fontFactor * 20' }\n }\n }\n },\n {\n type: 'text',\n name: 'targetDiff',\n description: 'add status with symbol and difference and percentage',\n from: { data: 'gaugeValue' },\n encode: {\n enter: {\n x: { signal: 'centerX' },\n align: { value: 'center' },\n baseline: { value: 'top' }\n },\n update: {\n // text: { \"signal\": \"format((mainValue - targetValue), '.2f') + ' (' + format(mainValue/targetValue, '.0%') + ')'\" },\n // fill: { \"signal\": \"targetStatus\", \"scale\": \"targetStatusColorScale\" },\n // x: { \"signal\": \"centerX + (fontFactor * 12)\" },\n text: { signal: 'legend' },\n y: { signal: 'centerY', offset: { signal: 'fontFactor * -4' } },\n fontSize: { signal: 'fontFactor * 10' },\n opacity: { signal: ' targetRule ? 1 : 0' }\n }\n }\n }\n ]\n };\n\n const signalListeners = { hover: handleHover };\n\n return (\n <Vega spec={specs} actions={false} signalListeners={signalListeners} />\n );\n};\n\nGaugeWidget.propTypes = {\n /** @type {?string} label showed in the bottom part of the graph /\n title: PropTypes.string.isRequired,\n\n /* @type {?string} optional symbol to put at the right side of the value /\n legend: PropTypes.string,\n\n /* @type {?bool} optional icon to display ticks in the graph /\n showTicks: PropTypes.bool,\n\n /* @type {?string} optional additional css properties /\n unitLabel: PropTypes.string,\n\n /* @type {?number} number of ticks in the graph /\n ticksNumber: PropTypes.number,\n\n /* @type {?string} render prop if you want to pass a custom react element instead of the predefined label/\n backgroundColor: PropTypes.string,\n\n /* @type {?number} main value for the graph element/\n value: PropTypes.number.isRequired,\n\n /* @type {?number} range min value for the graph element/\n minValue: PropTypes.number,\n\n /* @type {?number} range max value for the graph element*/\n maxValue: PropTypes.number\n};\n"],"mappings":";;;;;AAIA,MAAa,eAAe,UAAU;CACpC,MAAM,EACJ,QAAQ,IACR,YAAY,IACZ,SAAS,IACT,YAAY,OACZ,cAAc,GACd,kBAAkB,WAClB,YAAY,WACZ,QAAQ,GACR,WAAW,GACX,WAAW,KACX,oBAAoB,OAClB;CAEJ,MAAM,QAAQ;EACZ,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;GAAE,MAAM;GAAG,OAAO;GAAG,KAAK;GAAG,QAAQ;GAAG;EAEjD,MAAM,CACJ;GACE,MAAM;GACN,WAAW;IACT;KACE,MAAM;KACN,IAAI;KACJ,OAAO,EACL,QAAQ,KACT;KACD,MAAM,EACJ,QAAQ,+BACT;KACD,MAAM,EACJ,QAAQ,yCACT;KACF;IACD;KACE,MAAM;KACN,MAAM;KACN,IAAI;KACL;IACD;KACE,MAAM;KACN,IAAI;KACJ,MAAM;KACP;IACD;KACE,MAAM;KACN,IAAI;KACJ,MAAM;KACP;IACD;KACE,MAAM;KACN,IAAI;KACJ,MAAM;KACP;IACF;GACF,CACF;EACD,SAAS;GACP;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACC;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACC;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QACE;IACH;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,QACE;IACH;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACF;EACD,QAAQ;GACN;IACE,MAAM;IACN,MAAM;IACN,QAAQ;KAAE,MAAM;KAAS,OAAO;KAAU;IAC1C,MAAM;IACN,OAAO,EAAE,QAAQ,iBAAiB;IACnC;GACD;IACE,MAAM;IACN,MAAM;IACN,QAAQ;KAAE,MAAM;KAAS,OAAO;KAAQ;IACxC,OAAO,EAAE,QAAQ,iBAAiB;IACnC;GACD;IACE,MAAM;IACN,QAAQ;KAAC;KAAI;KAAG;KAAE;IAClB,OAAO;KAAC;KAAO;KAAU;KAAQ;IAClC;GACF;EAED,MAAM,EAAE;EACR,SAAS,EAAE;EAEX,OAAO;GACL;IACE,MAAM;IACN,MAAM;IACN,QAAQ,EACN,OAAO;KACL,GAAG,EAAE,QAAQ,WAAW;KACxB,GAAG,EAAE,QAAQ,WAAW;KACxB,YAAY,EAAE,QAAQ,SAAS;KAC/B,UAAU,EAAE,QAAQ,QAAQ;KAC5B,aAAa,EAAE,QAAQ,eAAe;KACtC,aAAa,EAAE,QAAQ,eAAe;KACtC,MAAM,EAAE,QAAQ,mBAAmB;KACpC,EACF;IACF;GACD;IACE,MAAM;IACN,QAAQ;KACN,OAAO,EACL,YAAY,EAAE,QAAQ,SAAS,EAChC;KACD,QAAQ;MACN,GAAG,EAAE,QAAQ,WAAW;MACxB,GAAG,EAAE,QAAQ,WAAW;MACxB,aAAa,EAAE,QAAQ,eAAe;MACtC,aAAa,EAAE,QAAQ,eAAe;MACtC,UAAU;OAAE,OAAO;OAAc,QAAQ;OAAa;MACtD,MAAM,EAAE,QAAQ,aAAa;MAC9B;KACF;IACF;GACD;IACE,MAAM;IACN,aAAa;IACb,MAAM,EAAE,MAAM,SAAS;IACvB,QAAQ,EACN,OAAO;KACL,GAAG,EAAE,QAAQ,WAAW;KACxB,GAAG,EAAE,QAAQ,WAAW;KACxB,aAAa,EAAE,QAAQ,eAAe;KACtC,aAAa,EAAE,QAAQ,kCAAkC;KACzD,YAAY;MACV,OAAO;MACP,OAAO;MACR;KACD,UAAU;MACR,OAAO;MACP,OAAO;MACR;KACD,QAAQ,EAAE,QAAQ,cAAc;KAChC,SAAS,EAAE,QAAQ,qBAAqB;KACzC,EACF;IACF;GACD;IACE,MAAM;IACN,MAAM,EAAE,MAAM,SAAS;IACvB,QAAQ;KACN,OAAO;MACL,OAAO,EAAE,OAAO,UAAU;MAC1B,UAAU,EAAE,OAAO,cAAc;MAClC;KACD,QAAQ;MACN,MAAM,EAAE,QAAQ,+BAA+B;MAC/C,GAAG,EAAE,OAAO,KAAK;MACjB,GAAG,EAAE,OAAO,KAAK;MACjB,UAAU,EAAE,QAAQ,kBAAkB;MACtC,MAAM,EAAE,QAAQ,cAAc;MAC9B,SAAS,EAAE,QAAQ,qBAAqB;MACzC;KACF;IACF;GACD;IACE,MAAM;IACN,aACE;IACF,MAAM,EAAE,MAAM,SAAS;IACvB,QAAQ;KACN,OAAO;MACL,OAAO,EAAE,OAAO,UAAU;MAC1B,UAAU,EAAE,OAAO,OAAO;MAC3B;KACD,QAAQ;MACN,MAAM,EAAE,QAAQ,YAAY;MAC5B,GAAG,EACD,QAAQ,yDACT;MACD,GAAG;OAAE,QAAQ;OAAW,QAAQ,EAAE,QAAQ,gBAAgB;OAAE;MAC5D,UAAU,EAAE,QAAQ,mBAAmB;MACvC,SAAS,EAAE,QAAQ,qBAAqB;MACzC;KACF;IACF;GACD;IACE,MAAM;IACN,aACE;IACF,MAAM,EAAE,MAAM,SAAS;IACvB,QAAQ;KACN,OAAO;MACL,OAAO,EAAE,OAAO,UAAU;MAC1B,UAAU,EAAE,OAAO,OAAO;MAC3B;KACD,QAAQ;MACN,MAAM,EAAE,QAAQ,YAAY;MAC5B,GAAG,EACD,QAAQ,yDACT;MACD,GAAG;OAAE,QAAQ;OAAW,QAAQ,EAAE,QAAQ,gBAAgB;OAAE;MAC5D,UAAU,EAAE,QAAQ,mBAAmB;MACvC,SAAS,EAAE,QAAQ,qBAAqB;MACzC;KACF;IACF;GACD;IACE,MAAM;IACN,aAAa;IACb,MAAM;IACN,QAAQ;KACN,OAAO;MACL,GAAG,EAAE,QAAQ,WAAW;MACxB,UAAU,EAAE,OAAO,OAAO;MAC1B,OAAO,EAAE,OAAO,UAAU;MAC3B;KACD,QAAQ;MACN,MAAM,EAAE,QAAQ,SAAS;MACzB,GAAG;OAAE,QAAQ;OAAW,QAAQ,EAAE,QAAQ,oBAAoB;OAAE;MAChE,UAAU,EAAE,QAAQ,mBAAmB;MACvC,MAAM,EAAE,QAAQ,aAAa;MAC9B;KACF;IACF;GACD;IACE,MAAM;IACN,aAAa;IACb,MAAM;IACN,QAAQ;KACN,OAAO;MACL,GAAG,EAAE,QAAQ,WAAW;MACxB,UAAU,EAAE,OAAO,OAAO;MAC1B,OAAO,EAAE,OAAO,UAAU;MAC3B;KACD,QAAQ;MACN,MAAM,EAAE,QAAQ,oCAAoC;MACpD,GAAG;OAAE,QAAQ;OAAW,QAAQ,EAAE,QAAQ,oBAAoB;OAAE;MAChE,UAAU,EAAE,QAAQ,mBAAmB;MACxC;KACF;IACF;GACD;IACE,MAAM;IACN,MAAM;IACN,aAAa;IACb,MAAM,EAAE,MAAM,cAAc;IAC5B,QAAQ;KACN,OAAO;MACL,GAAG,EAAE,QAAQ,WAAW;MACxB,OAAO,EAAE,OAAO,UAAU;MAC1B,UAAU,EAAE,OAAO,OAAO;MAC3B;KACD,QAAQ;MAIN,MAAM,EAAE,QAAQ,UAAU;MAC1B,GAAG;OAAE,QAAQ;OAAW,QAAQ,EAAE,QAAQ,mBAAmB;OAAE;MAC/D,UAAU,EAAE,QAAQ,mBAAmB;MACvC,SAAS,EAAE,QAAQ,uBAAuB;MAC3C;KACF;IACF;GACF;EACF;CAED,MAAM,kBAAkB,EAAE,OAAO,aAAa;AAE9C,QACE,oCAAC;EAAK,MAAM;EAAO,SAAS;EAAwB;GAAmB;;AAI3E,YAAY,YAAY;CAEtB,OAAO,UAAU,OAAO;CAGxB,QAAQ,UAAU;CAGlB,WAAW,UAAU;CAGrB,WAAW,UAAU;CAGrB,aAAa,UAAU;CAGvB,iBAAiB,UAAU;CAG3B,OAAO,UAAU,OAAO;CAGxB,UAAU,UAAU;CAGpB,UAAU,UAAU;CACrB"}

package/dist/{GraphCard-C2PVx4bq.js → GraphCard-Dv4a99wo.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { t as AmbientCard } from "./AmbientCard-CLW4bPCu.js";
-import { t as EmptyStateDisplay } from "./EmptyStateDisplay-ByAb3Cp-.js";
+import { t as EmptyStateDisplay } from "./EmptyStateDisplay-YOwCw38_.js";
 import React from "react";
 import { makeStyles } from "@material-ui/core";
 import clsx from "clsx";
@@ -72,4 +72,4 @@ GraphCard.propTypes = {
 //#endregion
 export { GraphCard as t };
-//# sourceMappingURL=GraphCard-C2PVx4bq.js.map
+//# sourceMappingURL=GraphCard-Dv4a99wo.js.map

package/dist/{GraphCard-C2PVx4bq.js.map → GraphCard-Dv4a99wo.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GraphCard-~~C2PVx4bq~~.js","names":["PropTypes"],"sources":["../src/UI/dataDisplay/GraphCard/GraphCard.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { MuiVegaLite } from '@material-vega/material-ui';\nimport { PropTypes } from 'prop-types';\nimport { AmbientCard } from '../../surfaces/cards/AmbientCard';\nimport { EmptyStateDisplay } from '../EmptyStateDisplay';\nimport { useTranslation } from 'react-i18next';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles((theme) => ({\n infoPanel: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-around',\n alignItems: 'center',\n alignSelf: 'stretch',\n padding: '10px 32px'\n },\n graphSection: {\n overflow: 'hidden',\n '& svg': {\n width: '100%',\n height: '100%'\n },\n '& .vega-embed': {\n width: '100%',\n height: '100%'\n },\n paddingTop: theme.spacing(1),\n margin: 0,\n height: (props) => props?.graphHeight ?? '255px'\n },\n emptyStateDisplay: {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1),\n }\n}));\n\n/*\n `GraphCard` component\n /\nexport const GraphCard = (props) => {\n const {\n title,\n showInfoPanel = true,\n graphSpecs,\n children,\n headerColor,\n className,\n noData = false,\n emptyStatePrimaryText,\n emptyStateImageSrc,\n emptyStateIconSize,\n emptyStateImageWidth,\n emptyStateClassName,\n emptyStateIcon,\n ...otherProps\n } = props;\n const classes = useStyles(props);\n const { t } = useTranslation();\n\n return (\n <AmbientCard\n fullWidth\n title={title}\n headerColor={headerColor}\n {...otherProps}\n >\n {!noData ? (\n <div>\n {showInfoPanel && <div className={classes.infoPanel}>{children}</div>}\n <div className={classes.graphSection}>\n <MuiVegaLite\n variant='verticalBarChart'\n background='paper'\n autoResize\n actions={false}\n spec={graphSpecs \|\| {}}\n />\n </div>\n </div>\n ) : (\n <div className={clsx(classes.emptyStateDisplay, emptyStateClassName)}>\n <EmptyStateDisplay\n primaryText={emptyStatePrimaryText ?? t('No results found')}\n icon={emptyStateIcon}\n iconSize={emptyStateIconSize}\n imageSrc={emptyStateImageSrc}\n imageWidth={emptyStateImageWidth}\n />\n </div>\n )}\n </AmbientCard>\n );\n};\n\nGraphCard.propTypes = {\n /\n Optional, card title\n /\n title: PropTypes.string,\n\n /\n @type {?object}\n {\n graphSpecs: {} object see an example structure in https://vega.github.io/vega-lite/usage/typescript.html\n }\n /\n graphSpecs: PropTypes.object.isRequired,\n\n /\n Optional, hide or show the top panel\n /\n showInfoPanel: PropTypes.bool,\n\n /\n Optional, content for the info panel behind the graph\n /\n children: PropTypes.node,\n\n /\n Optional, additional properties to apply some styles over the main container\n */\n style: PropTypes.object\n};\n"],"mappings":";;;;;;;;;;AASA,MAAM,YAAY,YAAY,WAAW;CACvC,WAAW;EACT,SAAS;EACT,eAAe;EACf,gBAAgB;EAChB,YAAY;EACZ,WAAW;EACX,SAAS;EACV;CACD,cAAc;EACZ,UAAU;EACV,SAAS;GACP,OAAO;GACP,QAAQ;GACT;EACD,iBAAiB;GACf,OAAO;GACP,QAAQ;GACT;EACD,YAAY,MAAM,QAAQ,EAAE;EAC5B,QAAQ;EACR,SAAS,UAAU,OAAO,eAAe;EAC1C;CACD,mBAAmB;EACjB,WAAW,MAAM,QAAQ,EAAE;EAC3B,cAAc,MAAM,QAAQ,EAAE;EAC/B;CACF,EAAE;;;;AAKH,MAAa,aAAa,UAAU;CAClC,MAAM,EACJ,OACA,gBAAgB,MAChB,YACA,UACA,aACA,WACA,SAAS,OACT,uBACA,oBACA,oBACA,sBACA,qBACA,gBACA,GAAG,eACD;CACJ,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,MAAM,gBAAgB;AAE9B,QACE,oCAAC;EACC;EACO;EACM;EACb,GAAI;IAEH,CAAC,SACA,oCAAC,aACE,iBAAiB,oCAAC,SAAI,WAAW,QAAQ,aAAY,SAAe,EACrE,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC;EACC,SAAQ;EACR,YAAW;EACX;EACA,SAAS;EACT,MAAM,cAAc,EAAE;GACtB,CACE,CACF,GAEN,oCAAC,SAAI,WAAW,KAAK,QAAQ,mBAAmB,oBAAoB,IAClE,oCAAC;EACC,aAAa,yBAAyB,EAAE,mBAAmB;EAC3D,MAAM;EACN,UAAU;EACV,UAAU;EACV,YAAY;GACZ,CACE,CAEI;;AAIlB,UAAU,YAAY;CAIpB,OAAOA,YAAU;CAQjB,YAAYA,YAAU,OAAO;CAK7B,eAAeA,YAAU;CAKzB,UAAUA,YAAU;CAKpB,OAAOA,YAAU;CAClB"}
1	+ {"version":3,"file":"GraphCard-Dv4a99wo.js","names":["PropTypes"],"sources":["../src/UI/dataDisplay/GraphCard/GraphCard.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { MuiVegaLite } from '@material-vega/material-ui';\nimport { PropTypes } from 'prop-types';\nimport { AmbientCard } from '../../surfaces/cards/AmbientCard';\nimport { EmptyStateDisplay } from '../EmptyStateDisplay';\nimport { useTranslation } from 'react-i18next';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles((theme) => ({\n infoPanel: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-around',\n alignItems: 'center',\n alignSelf: 'stretch',\n padding: '10px 32px'\n },\n graphSection: {\n overflow: 'hidden',\n '& svg': {\n width: '100%',\n height: '100%'\n },\n '& .vega-embed': {\n width: '100%',\n height: '100%'\n },\n paddingTop: theme.spacing(1),\n margin: 0,\n height: (props) => props?.graphHeight ?? '255px'\n },\n emptyStateDisplay: {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1),\n }\n}));\n\n/*\n `GraphCard` component\n /\nexport const GraphCard = (props) => {\n const {\n title,\n showInfoPanel = true,\n graphSpecs,\n children,\n headerColor,\n className,\n noData = false,\n emptyStatePrimaryText,\n emptyStateImageSrc,\n emptyStateIconSize,\n emptyStateImageWidth,\n emptyStateClassName,\n emptyStateIcon,\n ...otherProps\n } = props;\n const classes = useStyles(props);\n const { t } = useTranslation();\n\n return (\n <AmbientCard\n fullWidth\n title={title}\n headerColor={headerColor}\n {...otherProps}\n >\n {!noData ? (\n <div>\n {showInfoPanel && <div className={classes.infoPanel}>{children}</div>}\n <div className={classes.graphSection}>\n <MuiVegaLite\n variant='verticalBarChart'\n background='paper'\n autoResize\n actions={false}\n spec={graphSpecs \|\| {}}\n />\n </div>\n </div>\n ) : (\n <div className={clsx(classes.emptyStateDisplay, emptyStateClassName)}>\n <EmptyStateDisplay\n primaryText={emptyStatePrimaryText ?? t('No results found')}\n icon={emptyStateIcon}\n iconSize={emptyStateIconSize}\n imageSrc={emptyStateImageSrc}\n imageWidth={emptyStateImageWidth}\n />\n </div>\n )}\n </AmbientCard>\n );\n};\n\nGraphCard.propTypes = {\n /\n Optional, card title\n /\n title: PropTypes.string,\n\n /\n @type {?object}\n {\n graphSpecs: {} object see an example structure in https://vega.github.io/vega-lite/usage/typescript.html\n }\n /\n graphSpecs: PropTypes.object.isRequired,\n\n /\n Optional, hide or show the top panel\n /\n showInfoPanel: PropTypes.bool,\n\n /\n Optional, content for the info panel behind the graph\n /\n children: PropTypes.node,\n\n /\n Optional, additional properties to apply some styles over the main container\n */\n style: PropTypes.object\n};\n"],"mappings":";;;;;;;;;;AASA,MAAM,YAAY,YAAY,WAAW;CACvC,WAAW;EACT,SAAS;EACT,eAAe;EACf,gBAAgB;EAChB,YAAY;EACZ,WAAW;EACX,SAAS;EACV;CACD,cAAc;EACZ,UAAU;EACV,SAAS;GACP,OAAO;GACP,QAAQ;GACT;EACD,iBAAiB;GACf,OAAO;GACP,QAAQ;GACT;EACD,YAAY,MAAM,QAAQ,EAAE;EAC5B,QAAQ;EACR,SAAS,UAAU,OAAO,eAAe;EAC1C;CACD,mBAAmB;EACjB,WAAW,MAAM,QAAQ,EAAE;EAC3B,cAAc,MAAM,QAAQ,EAAE;EAC/B;CACF,EAAE;;;;AAKH,MAAa,aAAa,UAAU;CAClC,MAAM,EACJ,OACA,gBAAgB,MAChB,YACA,UACA,aACA,WACA,SAAS,OACT,uBACA,oBACA,oBACA,sBACA,qBACA,gBACA,GAAG,eACD;CACJ,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,MAAM,gBAAgB;AAE9B,QACE,oCAAC;EACC;EACO;EACM;EACb,GAAI;IAEH,CAAC,SACA,oCAAC,aACE,iBAAiB,oCAAC,SAAI,WAAW,QAAQ,aAAY,SAAe,EACrE,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC;EACC,SAAQ;EACR,YAAW;EACX;EACA,SAAS;EACT,MAAM,cAAc,EAAE;GACtB,CACE,CACF,GAEN,oCAAC,SAAI,WAAW,KAAK,QAAQ,mBAAmB,oBAAoB,IAClE,oCAAC;EACC,aAAa,yBAAyB,EAAE,mBAAmB;EAC3D,MAAM;EACN,UAAU;EACV,UAAU;EACV,YAAY;GACZ,CACE,CAEI;;AAIlB,UAAU,YAAY;CAIpB,OAAOA,YAAU;CAQjB,YAAYA,YAAU,OAAO;CAK7B,eAAeA,YAAU;CAKzB,UAAUA,YAAU;CAKpB,OAAOA,YAAU;CAClB"}

package/dist/{HeaderExpander-Buo2O0Ub.js → HeaderExpander-Coexy8dm.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { t as ExtenderToggle } from "./ExtenderToggle-Pdpzu9Ep.js";
+import { t as ExtenderToggle } from "./ExtenderToggle-DAaajb90.js";
 import React, { useState } from "react";
 import { Collapse, makeStyles, useTheme } from "@material-ui/core";
 import PropTypes from "prop-types";
@@ -50,4 +50,4 @@ HeaderExpander.propTypes = {
 //#endregion
 export { HeaderExpander as t };
-//# sourceMappingURL=HeaderExpander-Buo2O0Ub.js.map
+//# sourceMappingURL=HeaderExpander-Coexy8dm.js.map

package/dist/{HeaderExpander-Buo2O0Ub.js.map → HeaderExpander-Coexy8dm.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderExpander-~~Buo2O0Ub~~.js","names":[],"sources":["../src/UI/dataDisplay/HeaderExpander.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { makeStyles, Collapse, useTheme } from '@material-ui/core';\nimport { ExtenderToggle } from '../templates/ui/ExtenderToggle';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%'\n },\n container: {\n padding: (props) => (props.open ? theme.spacing(1) : theme.spacing(0.25)),\n parddingRight: theme.spacing(1),\n parddingleft: theme.spacing(1),\n background: (props) =>\n props.color ? props.color : theme.palette.secondary.main\n },\n compactContainer: {\n padding: 1\n },\n lowerShelf: {\n display: 'flex',\n borderTop: (props) =>\n `1px solid ${props.color ? props.color : theme.palette.secondary.main}`\n },\n lowerShelfCompact: {\n display: 'flex'\n },\n shelfOptions: {\n flex: 1,\n width: '100%'\n }\n}));\n\nexport const HeaderExpander = (props) => {\n const classes = useStyles(props);\n const { children, options, toggleLabel, color, compact } = props;\n\n const [extendedHeader, setExtendedHeader] = useState(true);\n\n const toggleExpandedHeader = () => {\n setExtendedHeader(!extendedHeader);\n };\n\n const theme = useTheme();\n\n return (\n <div className={classes.root}>\n <Collapse in={extendedHeader}>\n <div className={compact ? classes.compactContainer : classes.container}>\n {' '}\n {children}{' '}\n </div>\n </Collapse>\n <div className={compact ? classes.lowerShelfCompact : classes.lowerShelf}>\n <div className={classes.shelfOptions}>{options}</div>\n <div>\n <ExtenderToggle\n onClick={toggleExpandedHeader}\n open={extendedHeader}\n toggleLabel={toggleLabel}\n color={color ? color : theme.palette.secondary.main}\n compact={compact}\n />\n </div>\n </div>\n </div>\n );\n};\nHeaderExpander.propTypes = {\n /*\n Contents of container\n /\n children: PropTypes.node,\n /\n Function to trigger panel to open and close\n /\n onClick: PropTypes.func,\n /\n State, if true, will cause panel to open. If false, the panel is closed.\n /\n sectionOpen: PropTypes.bool,\n /\n Shelf below drawer that fills the space left by the toggle button.\n * Can be used to add things like additional toggles, other buttons,\n * stats, etc.\n /\n options: PropTypes.node,\n /\n The label that appears on the toggle tab.\n /\n toggleLabel: PropTypes.node,\n /\n The color of the background section and toggle.\n */\n color: PropTypes.string\n};\n"],"mappings":";;;;;;AAKA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EACJ,OAAO,QACR;CACD,WAAW;EACT,UAAU,UAAW,MAAM,OAAO,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,IAAK;EACxE,eAAe,MAAM,QAAQ,EAAE;EAC/B,cAAc,MAAM,QAAQ,EAAE;EAC9B,aAAa,UACX,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,UAAU;EACvD;CACD,kBAAkB,EAChB,SAAS,GACV;CACD,YAAY;EACV,SAAS;EACT,YAAY,UACV,aAAa,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,UAAU;EACpE;CACD,mBAAmB,EACjB,SAAS,QACV;CACD,cAAc;EACZ,MAAM;EACN,OAAO;EACR;CACF,EAAE;AAEH,MAAa,kBAAkB,UAAU;CACvC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,UAAU,SAAS,aAAa,OAAO,YAAY;CAE3D,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAE1D,MAAM,6BAA6B;AACjC,oBAAkB,CAAC,eAAe;;CAGpC,MAAM,QAAQ,UAAU;AAExB,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,YAAS,IAAI,kBACZ,oCAAC,SAAI,WAAW,UAAU,QAAQ,mBAAmB,QAAQ,aAC1D,KACA,UAAU,IACP,CACG,EACX,oCAAC,SAAI,WAAW,UAAU,QAAQ,oBAAoB,QAAQ,cAC5D,oCAAC,SAAI,WAAW,QAAQ,gBAAe,QAAc,EACrD,oCAAC,aACC,oCAAC;EACC,SAAS;EACT,MAAM;EACO;EACb,OAAO,QAAQ,QAAQ,MAAM,QAAQ,UAAU;EACtC;GACT,CACE,CACF,CACF;;AAGV,eAAe,YAAY;CAIzB,UAAU,UAAU;CAIpB,SAAS,UAAU;CAInB,aAAa,UAAU;CAMvB,SAAS,UAAU;CAInB,aAAa,UAAU;CAIvB,OAAO,UAAU;CAClB"}
1	+ {"version":3,"file":"HeaderExpander-Coexy8dm.js","names":[],"sources":["../src/UI/dataDisplay/HeaderExpander.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { makeStyles, Collapse, useTheme } from '@material-ui/core';\nimport { ExtenderToggle } from '../templates/ui/ExtenderToggle';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%'\n },\n container: {\n padding: (props) => (props.open ? theme.spacing(1) : theme.spacing(0.25)),\n parddingRight: theme.spacing(1),\n parddingleft: theme.spacing(1),\n background: (props) =>\n props.color ? props.color : theme.palette.secondary.main\n },\n compactContainer: {\n padding: 1\n },\n lowerShelf: {\n display: 'flex',\n borderTop: (props) =>\n `1px solid ${props.color ? props.color : theme.palette.secondary.main}`\n },\n lowerShelfCompact: {\n display: 'flex'\n },\n shelfOptions: {\n flex: 1,\n width: '100%'\n }\n}));\n\nexport const HeaderExpander = (props) => {\n const classes = useStyles(props);\n const { children, options, toggleLabel, color, compact } = props;\n\n const [extendedHeader, setExtendedHeader] = useState(true);\n\n const toggleExpandedHeader = () => {\n setExtendedHeader(!extendedHeader);\n };\n\n const theme = useTheme();\n\n return (\n <div className={classes.root}>\n <Collapse in={extendedHeader}>\n <div className={compact ? classes.compactContainer : classes.container}>\n {' '}\n {children}{' '}\n </div>\n </Collapse>\n <div className={compact ? classes.lowerShelfCompact : classes.lowerShelf}>\n <div className={classes.shelfOptions}>{options}</div>\n <div>\n <ExtenderToggle\n onClick={toggleExpandedHeader}\n open={extendedHeader}\n toggleLabel={toggleLabel}\n color={color ? color : theme.palette.secondary.main}\n compact={compact}\n />\n </div>\n </div>\n </div>\n );\n};\nHeaderExpander.propTypes = {\n /*\n Contents of container\n /\n children: PropTypes.node,\n /\n Function to trigger panel to open and close\n /\n onClick: PropTypes.func,\n /\n State, if true, will cause panel to open. If false, the panel is closed.\n /\n sectionOpen: PropTypes.bool,\n /\n Shelf below drawer that fills the space left by the toggle button.\n * Can be used to add things like additional toggles, other buttons,\n * stats, etc.\n /\n options: PropTypes.node,\n /\n The label that appears on the toggle tab.\n /\n toggleLabel: PropTypes.node,\n /\n The color of the background section and toggle.\n */\n color: PropTypes.string\n};\n"],"mappings":";;;;;;AAKA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EACJ,OAAO,QACR;CACD,WAAW;EACT,UAAU,UAAW,MAAM,OAAO,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,IAAK;EACxE,eAAe,MAAM,QAAQ,EAAE;EAC/B,cAAc,MAAM,QAAQ,EAAE;EAC9B,aAAa,UACX,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,UAAU;EACvD;CACD,kBAAkB,EAChB,SAAS,GACV;CACD,YAAY;EACV,SAAS;EACT,YAAY,UACV,aAAa,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,UAAU;EACpE;CACD,mBAAmB,EACjB,SAAS,QACV;CACD,cAAc;EACZ,MAAM;EACN,OAAO;EACR;CACF,EAAE;AAEH,MAAa,kBAAkB,UAAU;CACvC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,UAAU,SAAS,aAAa,OAAO,YAAY;CAE3D,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAE1D,MAAM,6BAA6B;AACjC,oBAAkB,CAAC,eAAe;;CAGpC,MAAM,QAAQ,UAAU;AAExB,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,YAAS,IAAI,kBACZ,oCAAC,SAAI,WAAW,UAAU,QAAQ,mBAAmB,QAAQ,aAC1D,KACA,UAAU,IACP,CACG,EACX,oCAAC,SAAI,WAAW,UAAU,QAAQ,oBAAoB,QAAQ,cAC5D,oCAAC,SAAI,WAAW,QAAQ,gBAAe,QAAc,EACrD,oCAAC,aACC,oCAAC;EACC,SAAS;EACT,MAAM;EACO;EACb,OAAO,QAAQ,QAAQ,MAAM,QAAQ,UAAU;EACtC;GACT,CACE,CACF,CACF;;AAGV,eAAe,YAAY;CAIzB,UAAU,UAAU;CAIpB,SAAS,UAAU;CAInB,aAAa,UAAU;CAMvB,SAAS,UAAU;CAInB,aAAa,UAAU;CAIvB,OAAO,UAAU;CAClB"}

package/dist/{IconKey-CbK8_rol.js → IconKey-D7fZ_U4O.js} RENAMED Viewed

@@ -57,4 +57,4 @@ IconKey.propTypes = {
 //#endregion
 export { ColorKey as n, IconKey as t };
-//# sourceMappingURL=IconKey-CbK8_rol.js.map
+//# sourceMappingURL=IconKey-D7fZ_U4O.js.map

package/dist/{IconKey-CbK8_rol.js.map → IconKey-D7fZ_U4O.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconKey-~~CbK8_rol~~.js","names":["useStyles"],"sources":["../src/UI/dataDisplay/map/ColorKey.jsx","../src/UI/dataDisplay/map/IconKey.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n root: {},\n itemKey: {\n width: theme.spacing(4),\n height: theme.spacing(0.5),\n marginTop: theme.spacing(0.5)\n },\n keyRoot: {\n display: 'flex',\n justifyContent: 'space-between',\n marginRight: theme.spacing(5),\n width: theme.spacing(10)\n }\n}))\n\nexport const ColorKey = ({ label, color }) => {\n const classes = useStyles()\n return (\n <div className={classes.keyRoot}>\n <Typography variant='caption'>{label}</Typography>\n <div className={classes.itemKey} style={{ background: color }} />\n </div>\n )\n}\n\nColorKey.propTypes = {\n /*\n Key label\n /\n label: PropTypes.string.isRequired,\n /\n Color of the key item\n /\n color: PropTypes.string.isRequired\n}\n","import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n root: {},\n keyRoot: {\n display: 'flex',\n justifyContent: 'space-between',\n marginRight: theme.spacing(5)\n },\n label: {\n marginTop: 1,\n marginLeft: theme.spacing(1)\n }\n}))\n\nexport const IconKey = ({ label, icon }) => {\n const classes = useStyles()\n return (\n <div className={classes.keyRoot}>\n {icon}\n <Typography className={classes.label} variant='caption'>\n {label}\n </Typography>\n </div>\n )\n}\n\nIconKey.propTypes = {\n /\n Key label\n /\n label: PropTypes.string.isRequired,\n /\n Icon for the key item\n */\n icon: PropTypes.string.isRequired\n}\n"],"mappings":";;;;;AAIA,MAAMA,cAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,SAAS;EACP,OAAO,MAAM,QAAQ,EAAE;EACvB,QAAQ,MAAM,QAAQ,GAAI;EAC1B,WAAW,MAAM,QAAQ,GAAI;EAC9B;CACD,SAAS;EACP,SAAS;EACT,gBAAgB;EAChB,aAAa,MAAM,QAAQ,EAAE;EAC7B,OAAO,MAAM,QAAQ,GAAG;EACzB;CACF,EAAE;AAEH,MAAa,YAAY,EAAE,OAAO,YAAY;CAC5C,MAAM,UAAUA,aAAW;AAC3B,QACE,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,cAAW,SAAQ,aAAW,MAAmB,EAClD,oCAAC;EAAI,WAAW,QAAQ;EAAS,OAAO,EAAE,YAAY,OAAO;GAAI,CAC7D;;AAIV,SAAS,YAAY;CAInB,OAAO,UAAU,OAAO;CAIxB,OAAO,UAAU,OAAO;CACzB;;;;AClCD,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,SAAS;EACP,SAAS;EACT,gBAAgB;EAChB,aAAa,MAAM,QAAQ,EAAE;EAC9B;CACD,OAAO;EACL,WAAW;EACX,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACF,EAAE;AAEH,MAAa,WAAW,EAAE,OAAO,WAAW;CAC1C,MAAM,UAAU,WAAW;AAC3B,QACE,oCAAC,SAAI,WAAW,QAAQ,WACrB,MACD,oCAAC;EAAW,WAAW,QAAQ;EAAO,SAAQ;IAC3C,MACU,CACT;;AAIV,QAAQ,YAAY;CAIlB,OAAO,UAAU,OAAO;CAIxB,MAAM,UAAU,OAAO;CACxB"}
1	+ {"version":3,"file":"IconKey-D7fZ_U4O.js","names":["useStyles"],"sources":["../src/UI/dataDisplay/map/ColorKey.jsx","../src/UI/dataDisplay/map/IconKey.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n root: {},\n itemKey: {\n width: theme.spacing(4),\n height: theme.spacing(0.5),\n marginTop: theme.spacing(0.5)\n },\n keyRoot: {\n display: 'flex',\n justifyContent: 'space-between',\n marginRight: theme.spacing(5),\n width: theme.spacing(10)\n }\n}))\n\nexport const ColorKey = ({ label, color }) => {\n const classes = useStyles()\n return (\n <div className={classes.keyRoot}>\n <Typography variant='caption'>{label}</Typography>\n <div className={classes.itemKey} style={{ background: color }} />\n </div>\n )\n}\n\nColorKey.propTypes = {\n /*\n Key label\n /\n label: PropTypes.string.isRequired,\n /\n Color of the key item\n /\n color: PropTypes.string.isRequired\n}\n","import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n root: {},\n keyRoot: {\n display: 'flex',\n justifyContent: 'space-between',\n marginRight: theme.spacing(5)\n },\n label: {\n marginTop: 1,\n marginLeft: theme.spacing(1)\n }\n}))\n\nexport const IconKey = ({ label, icon }) => {\n const classes = useStyles()\n return (\n <div className={classes.keyRoot}>\n {icon}\n <Typography className={classes.label} variant='caption'>\n {label}\n </Typography>\n </div>\n )\n}\n\nIconKey.propTypes = {\n /\n Key label\n /\n label: PropTypes.string.isRequired,\n /\n Icon for the key item\n */\n icon: PropTypes.string.isRequired\n}\n"],"mappings":";;;;;AAIA,MAAMA,cAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,SAAS;EACP,OAAO,MAAM,QAAQ,EAAE;EACvB,QAAQ,MAAM,QAAQ,GAAI;EAC1B,WAAW,MAAM,QAAQ,GAAI;EAC9B;CACD,SAAS;EACP,SAAS;EACT,gBAAgB;EAChB,aAAa,MAAM,QAAQ,EAAE;EAC7B,OAAO,MAAM,QAAQ,GAAG;EACzB;CACF,EAAE;AAEH,MAAa,YAAY,EAAE,OAAO,YAAY;CAC5C,MAAM,UAAUA,aAAW;AAC3B,QACE,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,cAAW,SAAQ,aAAW,MAAmB,EAClD,oCAAC;EAAI,WAAW,QAAQ;EAAS,OAAO,EAAE,YAAY,OAAO;GAAI,CAC7D;;AAIV,SAAS,YAAY;CAInB,OAAO,UAAU,OAAO;CAIxB,OAAO,UAAU,OAAO;CACzB;;;;AClCD,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,SAAS;EACP,SAAS;EACT,gBAAgB;EAChB,aAAa,MAAM,QAAQ,EAAE;EAC9B;CACD,OAAO;EACL,WAAW;EACX,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACF,EAAE;AAEH,MAAa,WAAW,EAAE,OAAO,WAAW;CAC1C,MAAM,UAAU,WAAW;AAC3B,QACE,oCAAC,SAAI,WAAW,QAAQ,WACrB,MACD,oCAAC;EAAW,WAAW,QAAQ;EAAO,SAAQ;IAC3C,MACU,CACT;;AAIV,QAAQ,YAAY;CAIlB,OAAO,UAAU,OAAO;CAIxB,MAAM,UAAU,OAAO;CACxB"}

package/dist/{IconLibrary-osCsP8i1.js → IconLibrary-BcnAXrDy.js} RENAMED Viewed

@@ -2,7 +2,7 @@ import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
 import { n as UnityIcon } from "./UnityFluentIcon-DrASIcTF.js";
 import { n as unityIcons } from "./UnityIconLibrary-CjIwzfjv.js";
 import { t as fluentLibraryIcons } from "./LibraryData-D8Uai7Yd.js";
-import { t as FluentIconKey_default } from "./FluentIconKey-BrmI7bK7.js";
+import { t as FluentIconKey_default } from "./FluentIconKey-BWCFV9Qs.js";
 import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { Button, Divider, Fade, InputAdornment, Paper, TextField, Typography, makeStyles } from "@material-ui/core";
 import clsx from "clsx";
@@ -177,4 +177,4 @@ var IconLibrary_default = memo(IconLibrary);
 //#endregion
 export { IconLibrary_default as t };
-//# sourceMappingURL=IconLibrary-osCsP8i1.js.map
+//# sourceMappingURL=IconLibrary-BcnAXrDy.js.map

package/dist/{IconLibrary-osCsP8i1.js.map → IconLibrary-BcnAXrDy.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconLibrary-osCsP8i1.js","names":["useStyles","FluentIconKey","icons","value","SelectedLibraryItem"],"sources":["../src/utilities/iconLibrary/SelectedLibraryItem.jsx","../src/utilities/iconLibrary/IconLibrary.jsx"],"sourcesContent":["import React from 'react';\nimport { Button, makeStyles, Paper, Typography } from '@material-ui/core';\nimport { Header } from '../../stories/Header.jsx';\nimport { FluentIcon } from './FluentIcon.jsx';\nimport clsx from 'clsx';\nimport { UnityIcon } from './UnityIcon';\nimport { Divider } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n width: 320,\n },\n item: {\n width: 180,\n height: 180,\n },\n container: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n },\n button: {\n marginTop: theme.spacing(2),\n },\n images: {\n height: theme.spacing(100),\n width: theme.spacing(100),\n },\n divider: {\n marginBottom: theme.spacing(2),\n },\n}));\n\nconst SelectedLibraryItem = props => {\n const classes = useStyles();\n const { addItem, item, title } = props;\n return (\n <div className={classes.root}>\n <div>\n <Typography variant=\"overline\">{title}</Typography>\n </div>\n <div className={classes.divider}>\n <Divider />\n </div>\n <div className={classes.container}>\n <div>\n <Paper\n variant=\"outlined\"\n className={clsx(classes.item, classes.container)}\n >\n {item.type === 'unity' ? (\n <UnityIcon component={item.icon} size=\"showcase\" />\n ) : (\n <FluentIcon component={item.icon} size=\"showcase\" />\n )}\n </Paper>\n <div className={classes.container}>\n <div>\n <Typography>{item.label}</Typography>\n </div>\n <div className={classes.button}>\n <Button\n variant=\"outlined\"\n onClick={() => addItem(item)}\n style={{ textTransform: 'none' }}\n >\n {title}\n </Button>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default SelectedLibraryItem;\n","import React, { useState, useCallback, useEffect, useMemo, memo } from 'react';\nimport {\n makeStyles,\n Divider,\n Fade,\n TextField,\n InputAdornment,\n} from '@material-ui/core';\nimport { fluentLibraryIcons } from '../../assets/unityIcons/LibraryData';\nimport FluentIconKey from '../../UI/dataDisplay/map/FluentIconKey';\nimport SelectedLibraryItem from './SelectedLibraryItem';\nimport { FluentIcon } from './FluentIcon';\nimport { SearchIcon } from '@fluentui/react-icons';\nimport { unityIcons } from './UnityIconLibrary';\nimport { debounce } from 'lodash';\nimport InfiniteScroll from 'react-infinite-scroll-component';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n display: 'flex',\n flexDirection: 'row',\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n height: 400,\n },\n divider: {\n marginLeft: theme.spacing(2),\n marginRight: theme.spacing(2),\n height: 400,\n },\n selection: {\n display: 'flex',\n flexDirection: 'row',\n },\n search: {\n marginLeft: theme.spacing(2),\n width: 312,\n },\n iconsContainer: {\n minWidth: '76%',\n overflow: 'auto',\n },\n input: {\n height: 34,\n },\n formTextInput: {\n fontSize: 13,\n },\n labelRoot: {\n fontSize: 13,\n },\n}));\n\nconst IconLibrary = props => {\n const { addItem, title, selectedIconName } = props;\n const classes = useStyles();\n const [selectedIcon, setSelectedIcon] = useState(fluentLibraryIcons[0]);\n const [filteredFluentIcons, setFilteredFluentIcons] = useState([]);\n const [icons, setIcons] = useState([]);\n const [hasMoreToScroll, setHasMoreToScroll] = useState(true);\n const [searchValue, setSearchValue] = useState('');\n\n const selectItem = useCallback(item => {\n setSelectedIcon(item);\n }, []);\n\n const combinedLibraryIcons = useMemo(() => {\n return fluentLibraryIcons.concat(unityIcons);\n }, []);\n\n const iconListObj = useMemo(() => {\n return combinedLibraryIcons.reduce((iconList, item) => {\n const iconObj = {\n id: item.id,\n label: item.label,\n icon: (\n <FluentIconKey\n key={item.id}\n icon={item.icon}\n tooltip={item.label}\n select={() => selectItem(item)}\n iconType={item.type}\n />\n ),\n };\n iconList.push(iconObj);\n return iconList;\n }, []);\n }, [combinedLibraryIcons, selectItem]);\n\n const getSearchableIcons = useCallback(\n value => {\n let icons = [];\n if (!value) {\n icons = iconListObj.map(item => item.icon);\n } else {\n icons = iconListObj\n .filter(item => item.label.toLowerCase().includes(value))\n .map(item => item.icon);\n }\n setFilteredFluentIcons(icons);\n },\n [iconListObj]\n );\n\n const handleFluentIconSearch = useCallback(\n event => {\n const value = event.target.value;\n setSearchValue(value);\n const debounceSearch = debounce(value => {\n getSearchableIcons(value);\n }, 200);\n\n debounceSearch(value);\n },\n [getSearchableIcons]\n );\n\n const fetchMoreIcons = useCallback(() => {\n if (filteredFluentIcons.length <= icons.length) {\n setHasMoreToScroll(false);\n return;\n }\n const updatedIcons = [...icons];\n setIcons(\n updatedIcons.concat(\n filteredFluentIcons.slice(icons.length, icons.length + 30)\n )\n );\n }, [icons, filteredFluentIcons]);\n\n useEffect(() => {\n setIcons(filteredFluentIcons.slice(0, 150));\n setHasMoreToScroll(filteredFluentIcons.length > 150);\n }, [filteredFluentIcons]);\n\n useEffect(() => {\n getSearchableIcons();\n }, [getSearchableIcons]);\n\n useEffect(() => {\n const initialIcon = combinedLibraryIcons.find(\n icon => icon.id === selectedIconName\n );\n setSelectedIcon(initialIcon);\n }, [combinedLibraryIcons, selectedIconName]);\n\n return (\n <>\n <TextField\n className={classes.search}\n id=\"search\"\n placeholder=\"Search icons\"\n variant=\"outlined\"\n margin=\"normal\"\n size=\"small\"\n value={searchValue}\n onChange={handleFluentIconSearch}\n InputProps={{\n startAdornment: (\n <InputAdornment position=\"start\">\n <FluentIcon component={SearchIcon} />\n </InputAdornment>\n ),\n classes: {\n root: classes.input,\n input: classes.formTextInput,\n },\n }}\n InputLabelProps={{\n classes: {\n root: classes.labelRoot,\n },\n }}\n />\n <InfiniteScroll\n dataLength={icons.length}\n next={fetchMoreIcons}\n hasMore={hasMoreToScroll}\n scrollableTarget=\"scrollableDiv\"\n >\n <div className={classes.root}>\n <div className={classes.iconsContainer} id=\"scrollableDiv\">\n {icons}\n </div>\n {selectedIcon && (\n <div className={classes.selection}>\n <div className={classes.divider}>\n <Divider orientation=\"vertical\" />\n </div>\n {selectedIcon && (\n <Fade in={selectedIcon}>\n <div>\n <SelectedLibraryItem\n addItem={addItem}\n item={selectedIcon}\n title={title}\n />\n </div>\n </Fade>\n )}\n </div>\n )}\n </div>\n </InfiniteScroll>\n </>\n );\n};\n\nexport default memo(IconLibrary);\n"],"mappings":"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"}
1	+ {"version":3,"file":"IconLibrary-BcnAXrDy.js","names":["useStyles","FluentIconKey","icons","value","SelectedLibraryItem"],"sources":["../src/utilities/iconLibrary/SelectedLibraryItem.jsx","../src/utilities/iconLibrary/IconLibrary.jsx"],"sourcesContent":["import React from 'react';\nimport { Button, makeStyles, Paper, Typography } from '@material-ui/core';\nimport { Header } from '../../stories/Header.jsx';\nimport { FluentIcon } from './FluentIcon.jsx';\nimport clsx from 'clsx';\nimport { UnityIcon } from './UnityIcon';\nimport { Divider } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n width: 320,\n },\n item: {\n width: 180,\n height: 180,\n },\n container: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n },\n button: {\n marginTop: theme.spacing(2),\n },\n images: {\n height: theme.spacing(100),\n width: theme.spacing(100),\n },\n divider: {\n marginBottom: theme.spacing(2),\n },\n}));\n\nconst SelectedLibraryItem = props => {\n const classes = useStyles();\n const { addItem, item, title } = props;\n return (\n <div className={classes.root}>\n <div>\n <Typography variant=\"overline\">{title}</Typography>\n </div>\n <div className={classes.divider}>\n <Divider />\n </div>\n <div className={classes.container}>\n <div>\n <Paper\n variant=\"outlined\"\n className={clsx(classes.item, classes.container)}\n >\n {item.type === 'unity' ? (\n <UnityIcon component={item.icon} size=\"showcase\" />\n ) : (\n <FluentIcon component={item.icon} size=\"showcase\" />\n )}\n </Paper>\n <div className={classes.container}>\n <div>\n <Typography>{item.label}</Typography>\n </div>\n <div className={classes.button}>\n <Button\n variant=\"outlined\"\n onClick={() => addItem(item)}\n style={{ textTransform: 'none' }}\n >\n {title}\n </Button>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default SelectedLibraryItem;\n","import React, { useState, useCallback, useEffect, useMemo, memo } from 'react';\nimport {\n makeStyles,\n Divider,\n Fade,\n TextField,\n InputAdornment,\n} from '@material-ui/core';\nimport { fluentLibraryIcons } from '../../assets/unityIcons/LibraryData';\nimport FluentIconKey from '../../UI/dataDisplay/map/FluentIconKey';\nimport SelectedLibraryItem from './SelectedLibraryItem';\nimport { FluentIcon } from './FluentIcon';\nimport { SearchIcon } from '@fluentui/react-icons';\nimport { unityIcons } from './UnityIconLibrary';\nimport { debounce } from 'lodash';\nimport InfiniteScroll from 'react-infinite-scroll-component';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n display: 'flex',\n flexDirection: 'row',\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n height: 400,\n },\n divider: {\n marginLeft: theme.spacing(2),\n marginRight: theme.spacing(2),\n height: 400,\n },\n selection: {\n display: 'flex',\n flexDirection: 'row',\n },\n search: {\n marginLeft: theme.spacing(2),\n width: 312,\n },\n iconsContainer: {\n minWidth: '76%',\n overflow: 'auto',\n },\n input: {\n height: 34,\n },\n formTextInput: {\n fontSize: 13,\n },\n labelRoot: {\n fontSize: 13,\n },\n}));\n\nconst IconLibrary = props => {\n const { addItem, title, selectedIconName } = props;\n const classes = useStyles();\n const [selectedIcon, setSelectedIcon] = useState(fluentLibraryIcons[0]);\n const [filteredFluentIcons, setFilteredFluentIcons] = useState([]);\n const [icons, setIcons] = useState([]);\n const [hasMoreToScroll, setHasMoreToScroll] = useState(true);\n const [searchValue, setSearchValue] = useState('');\n\n const selectItem = useCallback(item => {\n setSelectedIcon(item);\n }, []);\n\n const combinedLibraryIcons = useMemo(() => {\n return fluentLibraryIcons.concat(unityIcons);\n }, []);\n\n const iconListObj = useMemo(() => {\n return combinedLibraryIcons.reduce((iconList, item) => {\n const iconObj = {\n id: item.id,\n label: item.label,\n icon: (\n <FluentIconKey\n key={item.id}\n icon={item.icon}\n tooltip={item.label}\n select={() => selectItem(item)}\n iconType={item.type}\n />\n ),\n };\n iconList.push(iconObj);\n return iconList;\n }, []);\n }, [combinedLibraryIcons, selectItem]);\n\n const getSearchableIcons = useCallback(\n value => {\n let icons = [];\n if (!value) {\n icons = iconListObj.map(item => item.icon);\n } else {\n icons = iconListObj\n .filter(item => item.label.toLowerCase().includes(value))\n .map(item => item.icon);\n }\n setFilteredFluentIcons(icons);\n },\n [iconListObj]\n );\n\n const handleFluentIconSearch = useCallback(\n event => {\n const value = event.target.value;\n setSearchValue(value);\n const debounceSearch = debounce(value => {\n getSearchableIcons(value);\n }, 200);\n\n debounceSearch(value);\n },\n [getSearchableIcons]\n );\n\n const fetchMoreIcons = useCallback(() => {\n if (filteredFluentIcons.length <= icons.length) {\n setHasMoreToScroll(false);\n return;\n }\n const updatedIcons = [...icons];\n setIcons(\n updatedIcons.concat(\n filteredFluentIcons.slice(icons.length, icons.length + 30)\n )\n );\n }, [icons, filteredFluentIcons]);\n\n useEffect(() => {\n setIcons(filteredFluentIcons.slice(0, 150));\n setHasMoreToScroll(filteredFluentIcons.length > 150);\n }, [filteredFluentIcons]);\n\n useEffect(() => {\n getSearchableIcons();\n }, [getSearchableIcons]);\n\n useEffect(() => {\n const initialIcon = combinedLibraryIcons.find(\n icon => icon.id === selectedIconName\n );\n setSelectedIcon(initialIcon);\n }, [combinedLibraryIcons, selectedIconName]);\n\n return (\n <>\n <TextField\n className={classes.search}\n id=\"search\"\n placeholder=\"Search icons\"\n variant=\"outlined\"\n margin=\"normal\"\n size=\"small\"\n value={searchValue}\n onChange={handleFluentIconSearch}\n InputProps={{\n startAdornment: (\n <InputAdornment position=\"start\">\n <FluentIcon component={SearchIcon} />\n </InputAdornment>\n ),\n classes: {\n root: classes.input,\n input: classes.formTextInput,\n },\n }}\n InputLabelProps={{\n classes: {\n root: classes.labelRoot,\n },\n }}\n />\n <InfiniteScroll\n dataLength={icons.length}\n next={fetchMoreIcons}\n hasMore={hasMoreToScroll}\n scrollableTarget=\"scrollableDiv\"\n >\n <div className={classes.root}>\n <div className={classes.iconsContainer} id=\"scrollableDiv\">\n {icons}\n </div>\n {selectedIcon && (\n <div className={classes.selection}>\n <div className={classes.divider}>\n <Divider orientation=\"vertical\" />\n </div>\n {selectedIcon && (\n <Fade in={selectedIcon}>\n <div>\n <SelectedLibraryItem\n addItem={addItem}\n item={selectedIcon}\n title={title}\n />\n </div>\n </Fade>\n )}\n </div>\n )}\n </div>\n </InfiniteScroll>\n </>\n );\n};\n\nexport default memo(IconLibrary);\n"],"mappings":"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"}