udp-react-enterprise-component-library 25.18.0 → 25.18.1-alpha.1

package/dist/AppMenu-B5tf8Zau.js

@@ -0,0 +1,174 @@
+import { t as ConfigService } from "./configService-C4uoG3wj.js";
+import { t as apiMutate } from "./useAxiosMutate-DeqKSi5z.js";
+import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
+import { n as useActions } from "./useActions-B17Go7aQ.js";
+import { t as redirectToLinkOnClick } from "./redirectToLink-CvjUyGaR.js";
+import React, { forwardRef, useContext, useEffect, useState } from "react";
+import { Collapse, List, ListItem, ListItemIcon, ListItemText, createStyles, makeStyles } from "@material-ui/core";
+import { NavLink } from "react-router-dom";
+import clsx from "clsx";
+import { ChevronDownIcon, ChevronUpIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+
+//#region src/UI/navigation/menus/AppMenuItemComponent.jsx
+const ListItemLinkComponent = forwardRef((props, ref) => /* @__PURE__ */ React.createElement(NavLink, {
+	exact: true,
+	...props,
+	innerRef: ref
+}));
+ListItemLinkComponent.displayName = "ListItemLinkComponent";
+const AppMenuItemComponent = (props) => {
+	const { link, params, isChild, ...other } = props;
+	if (!link || typeof link !== "string") return /* @__PURE__ */ React.createElement(ListItem, {
+		button: true,
+		...other,
+		dense: true
+	});
+	return /* @__PURE__ */ React.createElement(ListItem, {
+		id: "udpRecord-AppMenuItemComponent-" + params.label.replace(/\s+/g, ""),
+		udprecordid: "udpRecord-AppMenuItemComponent-" + params.label.replace(/\s+/g, ""),
+		button: true,
+		component: ListItemLinkComponent,
+		to: {
+			pathname: link,
+			state: params
+		},
+		...other,
+		onClick: void 0,
+		dense: true
+	});
+};
+
+//#endregion
+//#region src/UI/navigation/menus/AppMenuItem.jsx
+const AppMenuItemPropTypes = {
+	id: PropTypes.string,
+	label: PropTypes.string.isRequired,
+	link: PropTypes.string,
+	icon: PropTypes.elementType,
+	iconName: PropTypes.string,
+	image: PropTypes.string,
+	items: PropTypes.arrayOf(PropTypes.object),
+	indent: PropTypes.string,
+	redirectInfo: PropTypes.string,
+	params: PropTypes.object,
+	menuItemId: PropTypes.string,
+	menuStructureId: PropTypes.number,
+	parentId: PropTypes.number,
+	productId: PropTypes.number,
+	isActive: PropTypes.bool,
+	roleIds: PropTypes.arrayOf(PropTypes.number),
+	getAccessToken: PropTypes.func,
+	childrenIcons: PropTypes.bool,
+	isChild: PropTypes.bool,
+	childIndex: PropTypes.number,
+	sidebarExpanded: PropTypes.bool,
+	devicesHiddenOn: PropTypes.arrayOf(PropTypes.string),
+	user: PropTypes.object,
+	tenantSsoId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+const useStyles = makeStyles((theme) => createStyles({
+	menuItem: { "&.active": {
+		background: "rgba(0, 0, 0, 0.08)",
+		"& .MuiListItemIcon-root": { marginLeft: theme.spacing(2) }
+	} },
+	menuItemIcon: { minWidth: theme.spacing(5) },
+	item: {
+		width: 254,
+		whiteSpace: "normal",
+		paddingLeft: (props) => props?.isChild && props.sidebarExpanded ? `calc(16px + ${16 * (props.childIndex !== void 0 ? props.childIndex : 0)}px)` : null
+	},
+	indent: {},
+	icon: {
+		width: theme.spacing(3),
+		height: theme.spacing(3),
+		color: theme.palette.secondary.dark
+	},
+	expand: { visibility: (props) => props.sidebarExpanded ? "visible" : "hidden" },
+	images: {
+		width: theme.spacing(3.5),
+		height: theme.spacing(3.5)
+	}
+}));
+const AppMenuItem = (props) => {
+	const { childrenIcons = true, isChild = false, childIndex = 0, label, link, icon, image, getAccessToken, indent, items = [], redirectInfo, sidebarExpanded, user, params, tenantSsoId, ...other } = props;
+	const classes = useStyles(props);
+	const isExpandable = items?.length > 0;
+	const [open, setOpen] = useState(false);
+	const { triggerMultipleActions } = useActions();
+	const { t } = useTranslation();
+	const handleClick = async () => {
+		let url = redirectInfo;
+		if (url && tenantSsoId) {
+			const response = await apiMutate(ConfigService.securityV1ApiUrl, `sso/${tenantSsoId}`, { method: "get" });
+			if (!response) return;
+			url = `${url}${response.data.urlParams}`;
+		}
+		if (url) redirectToLinkOnClick(url, getAccessToken, user);
+		if (params?.Action?.length) triggerMultipleActions(params.Action);
+		setOpen(!open);
+	};
+	const MenuItemRoot = /* @__PURE__ */ React.createElement(AppMenuItemComponent, {
+		className: clsx(indent ? classes.menuItem : classes.indent, classes.item),
+		link: items.length ? "" : link,
+		onClick: handleClick,
+		"aria-expanded": isExpandable ? open : null,
+		params: {
+			...other,
+			label,
+			params
+		},
+		isChild
+	}, (!!icon || !!image) && (isChild && childrenIcons || !isChild) && /* @__PURE__ */ React.createElement(ListItemIcon, { className: classes.menuItemIcon }, icon ? /* @__PURE__ */ React.createElement("div", { className: classes.icon }, /* @__PURE__ */ React.createElement(FluentIcon, { component: icon })) : /* @__PURE__ */ React.createElement("img", {
+		src: image,
+		alt: label,
+		className: classes.images
+	})), /* @__PURE__ */ React.createElement(ListItemText, {
+		primary: t(label),
+		inset: !icon && !image
+	}), isExpandable && (open ? /* @__PURE__ */ React.createElement("div", { className: classes.expand }, /* @__PURE__ */ React.createElement(FluentIcon, {
+		size: "small",
+		component: ChevronUpIcon,
+		id: `udpRecord-AppMenuItem-FluentIcon-Up-${label}`,
+		udprecordid: `udpRecord-AppMenuItem-FluentIcon-Up-${label}`
+	})) : /* @__PURE__ */ React.createElement("div", { className: classes.expand }, /* @__PURE__ */ React.createElement(FluentIcon, {
+		size: "small",
+		component: ChevronDownIcon,
+		id: `udpRecord-AppMenuItem-FluentIcon-Down-${label}`,
+		udprecordid: `udpRecord-AppMenuItem-FluentIcon-Down-${label}`
+	}))));
+	const MenuItemChildren = isExpandable ? /* @__PURE__ */ React.createElement(Collapse, {
+		in: open,
+		timeout: "auto",
+		unmountOnExit: true
+	}, /* @__PURE__ */ React.createElement(List, null, items.map((item, index) => /* @__PURE__ */ React.createElement(AppMenuItem, {
+		...item,
+		childrenIcons,
+		isChild: true,
+		key: index,
+		childIndex: childIndex + 1,
+		sidebarExpanded,
+		user
+	})))) : null;
+	return /* @__PURE__ */ React.createElement("li", null, MenuItemRoot, MenuItemChildren);
+};
+AppMenuItem.propTypes = AppMenuItemPropTypes;
+
+//#endregion
+//#region src/UI/navigation/menus/AppMenu.jsx
+const AppMenu = ({ childrenIcons, menuItems, sidebarExpanded, user }) => {
+	return /* @__PURE__ */ React.createElement("nav", { "aria-label": "Site Navigation" }, /* @__PURE__ */ React.createElement(List, null, menuItems.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(AppMenuItem, {
+			key: index,
+			childrenIcons,
+			sidebarExpanded,
+			user,
+			...item
+		});
+	})));
+};
+
+//#endregion
+export { AppMenuItem as n, AppMenuItemComponent as r, AppMenu as t };
+//# sourceMappingURL=AppMenu-B5tf8Zau.js.map

package/dist/AppMenu-B5tf8Zau.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppMenu-B5tf8Zau.js","names":[],"sources":["../src/UI/navigation/menus/AppMenuItemComponent.jsx","../src/UI/navigation/menus/AppMenuItem.jsx","../src/UI/navigation/menus/AppMenu.jsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { ListItem } from '@material-ui/core'\nimport { NavLink } from 'react-router-dom'\n\nconst ListItemLinkComponent = forwardRef((props, ref) => (\n  <NavLink exact {...props} innerRef={ref} />\n))\nListItemLinkComponent.displayName = 'ListItemLinkComponent'\n\nexport const AppMenuItemComponent = (props) => {\n  const { link, params, isChild, ...other } = props\n\n  // If link is not set return the ordinary ListItem\n  if (!link || typeof link !== 'string') {\n    return <ListItem button {...other} dense />\n  }\n\n  // Return a ListItem with a link component\n  return (\n    <ListItem\n      id={'udpRecord-AppMenuItemComponent-'+params.label.replace(/\\s+/g, '')}\n      udprecordid={'udpRecord-AppMenuItemComponent-'+params.label.replace(/\\s+/g, '')}\n      button\n      component={ListItemLinkComponent}\n      to={{\n        pathname: link,\n        state: params\n      }}\n      {...other}\n      onClick={undefined}\n      dense\n    />\n  )\n}\n","import { ChevronDownIcon, ChevronUpIcon } from '@fluentui/react-icons';\nimport {\n  Collapse,\n  createStyles,\n  List,\n  ListItemIcon,\n  ListItemText,\n  makeStyles\n} from '@material-ui/core';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport React, { useContext, useEffect, useState } from 'react';\nimport { useActions } from '../../../hooks/useActions';\nimport { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';\nimport { redirectToLinkOnClick } from '../../../utilities/menus/redirectToLink';\nimport { AppMenuItemComponent } from './AppMenuItemComponent';\nimport { apiMutate } from '../../../utilities/useAxiosMutate';\nimport { useTranslation } from 'react-i18next';\nimport { ConfigService } from '../../../configService';\n\n// React runtime PropTypes\nconst AppMenuItemPropTypes = {\n  id: PropTypes.string,\n  label: PropTypes.string.isRequired,\n  link: PropTypes.string,\n  icon: PropTypes.elementType,\n  iconName: PropTypes.string,\n  image: PropTypes.string,\n  items: PropTypes.arrayOf(PropTypes.object),\n  indent: PropTypes.string,\n  redirectInfo: PropTypes.string,\n  params: PropTypes.object,\n  menuItemId: PropTypes.string,\n  menuStructureId: PropTypes.number,\n  parentId: PropTypes.number,\n  productId: PropTypes.number,\n  isActive: PropTypes.bool,\n  roleIds: PropTypes.arrayOf(PropTypes.number),\n  getAccessToken: PropTypes.func,\n  childrenIcons: PropTypes.bool,\n  isChild: PropTypes.bool,\n  childIndex: PropTypes.number,\n  sidebarExpanded: PropTypes.bool,\n  devicesHiddenOn: PropTypes.arrayOf(PropTypes.string),\n  user: PropTypes.object,\n  tenantSsoId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n};\n\n\nconst useStyles = makeStyles((theme) =>\n  createStyles({\n    menuItem: {\n      '&.active': {\n        background: 'rgba(0, 0, 0, 0.08)',\n        '& .MuiListItemIcon-root': { marginLeft: theme.spacing(2) }\n      }\n    },\n    menuItemIcon: {\n      minWidth: theme.spacing(5)\n    },\n    item: {\n      width: 254,\n      whiteSpace: 'normal',\n      paddingLeft: (props) =>\n        props?.isChild && props.sidebarExpanded\n          ? `calc(16px + ${\n              16 * (props.childIndex !== undefined ? props.childIndex : 0)\n            }px)`\n          : null\n    },\n    indent: {},\n    icon: {\n      width: theme.spacing(3),\n      height: theme.spacing(3),\n      color: theme.palette.secondary.dark\n    },\n    expand: {\n      // marginRight: theme.spacing(1),\n      visibility: (props) => (props.sidebarExpanded ? 'visible' : 'hidden')\n    },\n    images: {\n      width: theme.spacing(3.5),\n      height: theme.spacing(3.5)\n    }\n  })\n);\n\nexport const AppMenuItem = (props) => {\n  const {\n    childrenIcons = true,\n    isChild = false,\n    childIndex = 0,\n    label,\n    link,\n    icon,\n    image,\n    getAccessToken,\n    indent,\n    items = [],\n    redirectInfo,\n    sidebarExpanded,\n    user,\n    params,\n    tenantSsoId,\n    ...other\n  } = props;\n  const classes = useStyles(props);\n  const isExpandable = items?.length > 0;\n  const [open, setOpen] = useState(false);\n  const { triggerMultipleActions } = useActions();\n  const { t } = useTranslation();\n\n  const handleClick = async () => {\n    let url = redirectInfo;\n    if (url && tenantSsoId) {\n      const response = await apiMutate(\n        ConfigService.securityV1ApiUrl,\n        `sso/${tenantSsoId}`,\n        { method: 'get' }\n      );\n      if (!response) return;\n      url = `${url}${response.data.urlParams}`;\n    }\n    if (url) {\n      redirectToLinkOnClick(url, getAccessToken, user);\n    }\n\n    if (params?.Action?.length) {\n      triggerMultipleActions(params.Action);\n    }\n\n    setOpen(!open);\n  };\n\n  const MenuItemRoot = (\n    <AppMenuItemComponent\n      className={clsx(indent ? classes.menuItem : classes.indent, classes.item)}\n      link={items.length ? '' : link}\n      onClick={handleClick}\n      aria-expanded={isExpandable ? open : null}\n      params={{ ...other, label, params }}\n      isChild={isChild}\n    >\n      {/* Display an icon if any */}\n      {(!!icon || !!image) && ((isChild && childrenIcons) || !isChild) && (\n        <ListItemIcon className={classes.menuItemIcon}>\n          {icon ? (\n            <div className={classes.icon}>\n              <FluentIcon component={icon} />\n            </div>\n          ) : (\n            <img src={image} alt={label} className={classes.images} />\n          )}\n        </ListItemIcon>\n      )}\n      <ListItemText primary={t(label)} inset={!icon && !image} />\n      {/* Display the expand menu if the item has children */}\n      {isExpandable &&\n        (open ? (\n          <div className={classes.expand}>\n            <FluentIcon\n              size={'small'}\n              component={ChevronUpIcon}\n              id={`udpRecord-AppMenuItem-FluentIcon-Up-${label}`}\n              udprecordid={`udpRecord-AppMenuItem-FluentIcon-Up-${label}`}\n            />\n          </div>\n        ) : (\n          <div className={classes.expand}>\n            <FluentIcon\n              size={'small'}\n              component={ChevronDownIcon}\n              id={`udpRecord-AppMenuItem-FluentIcon-Down-${label}`}\n              udprecordid={`udpRecord-AppMenuItem-FluentIcon-Down-${label}`}\n            />\n          </div>\n        ))}\n    </AppMenuItemComponent>\n  );\n\n  const MenuItemChildren = isExpandable ? (\n    <Collapse in={open} timeout='auto' unmountOnExit>\n      {/* <Divider aria-hidden={true} /> */}\n      <List>\n        {items.map((item, index) => (\n          <AppMenuItem\n            {...item}\n            childrenIcons={childrenIcons}\n            isChild\n            key={index}\n            childIndex={childIndex + 1}\n            sidebarExpanded={sidebarExpanded}\n            user={user}\n          />\n        ))}\n      </List>\n    </Collapse>\n  ) : null;\n\n  return (\n    <li>\n      {MenuItemRoot}\n      {MenuItemChildren}\n    </li>\n  );\n};\n\nAppMenuItem.propTypes = AppMenuItemPropTypes;\n","import React from 'react';\nimport { List } from '@material-ui/core';\nimport { AppMenuItem } from './AppMenuItem';\n\nexport const AppMenu = ({\n  childrenIcons,\n  menuItems,\n  sidebarExpanded,\n  user\n}) => {\n  return (\n    <nav aria-label='Site Navigation'>\n      <List>\n        {menuItems.map((item, index) => {\n          return (\n            <AppMenuItem\n              key={index}\n              childrenIcons={childrenIcons}\n              sidebarExpanded={sidebarExpanded}\n              user={user}\n              {...item}\n            />\n          );\n        })}\n      </List>\n    </nav>\n  );\n};\n"],"mappings":"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"}

package/dist/AvatarAlphabet-wbHcpayy.js

@@ -0,0 +1,187 @@
+import React from "react";
+import { Avatar, makeStyles } from "@material-ui/core";
+
+//#region src/UI/dataDisplay/AvatarAlphabet.jsx
+const useStyles = makeStyles((theme) => ({
+	small: {
+		width: 20,
+		height: 20,
+		fontSize: 14,
+		marginLeft: 2
+	},
+	medium: {
+		width: 35,
+		height: 35,
+		fontSize: 16,
+		paddingTop: 2
+	}
+}));
+const AvatarAlphabet = (props) => {
+	let letter = "";
+	const { avatarCharacter, size } = props;
+	const classes = useStyles();
+	switch (avatarCharacter) {
+		case "A":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#FFB900" }
+			}, "A");
+			break;
+		case "B":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#E74856" }
+			}, "B");
+			break;
+		case "C":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#0078D7" }
+			}, "C");
+			break;
+		case "D":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#0099BC" }
+			}, "D");
+			break;
+		case "E":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#7A7574" }
+			}, "E");
+			break;
+		case "F":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#767676" }
+			}, "F");
+			break;
+		case "G":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#FF8C00" }
+			}, "G");
+			break;
+		case "H":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#E81123" }
+			}, "H");
+			break;
+		case "I":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#0063B1" }
+			}, "I");
+			break;
+		case "J":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#2D7D9A" }
+			}, "J");
+			break;
+		case "K":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#5D5A58" }
+			}, "K");
+			break;
+		case "L":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#4C4A48" }
+			}, "L");
+			break;
+		case "M":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#F7630C" }
+			}, "M");
+			break;
+		case "N":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#EA005E" }
+			}, "N");
+			break;
+		case "O":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#8E8CD8" }
+			}, "O");
+			break;
+		case "P":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#00B7C3" }
+			}, "P");
+			break;
+		case "Q":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#68768A" }
+			}, "Q");
+			break;
+		case "R":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#69797E" }
+			}, "R");
+			break;
+		case "S":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#CA5010" }
+			}, "S");
+			break;
+		case "T":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#C30052" }
+			}, "T");
+			break;
+		case "U":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "FF4343" }
+			}, "U");
+			break;
+		case "V":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#9A0089" }
+			}, "V");
+			break;
+		case "W":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#10893E" }
+			}, "W");
+			break;
+		case "X":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#567C73" }
+			}, "X");
+			break;
+		case "Y":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#018574" }
+			}, "Y");
+			break;
+		case "Z":
+			letter = /* @__PURE__ */ React.createElement(Avatar, {
+				className: size === "small" ? classes.small : classes.medium,
+				style: { backgroundColor: "#881798" }
+			}, "Z");
+			break;
+		default:
+	}
+	return letter;
+};
+
+//#endregion
+export { AvatarAlphabet as t };
+//# sourceMappingURL=AvatarAlphabet-wbHcpayy.js.map

package/dist/AvatarAlphabet-wbHcpayy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarAlphabet-wbHcpayy.js","names":[],"sources":["../src/UI/dataDisplay/AvatarAlphabet.jsx"],"sourcesContent":["import React from 'react'\nimport { Avatar, makeStyles } from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n  small: {\n    width: 20,\n    height: 20,\n    fontSize: 14,\n    marginLeft: 2\n  },\n  medium: {\n    width: 35,\n    height: 35,\n    fontSize: 16,\n    paddingTop: 2\n  }\n}))\n\nexport const AvatarAlphabet = (props) => {\n  let letter = ''\n  const { avatarCharacter, size } = props\n  const classes = useStyles()\n\n  switch (avatarCharacter) {\n    case 'A':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#FFB900' }}\n        >\n          A\n        </Avatar>\n      )\n      break\n    case 'B':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#E74856' }}\n        >\n          B\n        </Avatar>\n      )\n      break\n    case 'C':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#0078D7' }}\n        >\n          C\n        </Avatar>\n      )\n      break\n    case 'D':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#0099BC' }}\n        >\n          D\n        </Avatar>\n      )\n      break\n    case 'E':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#7A7574' }}\n        >\n          E\n        </Avatar>\n      )\n      break\n    case 'F':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#767676' }}\n        >\n          F\n        </Avatar>\n      )\n      break\n    case 'G':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#FF8C00' }}\n        >\n          G\n        </Avatar>\n      )\n      break\n    case 'H':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#E81123' }}\n        >\n          H\n        </Avatar>\n      )\n      break\n    case 'I':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#0063B1' }}\n        >\n          I\n        </Avatar>\n      )\n      break\n    case 'J':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#2D7D9A' }}\n        >\n          J\n        </Avatar>\n      )\n      break\n    case 'K':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#5D5A58' }}\n        >\n          K\n        </Avatar>\n      )\n      break\n    case 'L':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#4C4A48' }}\n        >\n          L\n        </Avatar>\n      )\n      break\n    case 'M':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#F7630C' }}\n        >\n          M\n        </Avatar>\n      )\n      break\n    case 'N':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#EA005E' }}\n        >\n          N\n        </Avatar>\n      )\n      break\n    case 'O':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#8E8CD8' }}\n        >\n          O\n        </Avatar>\n      )\n      break\n    case 'P':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#00B7C3' }}\n        >\n          P\n        </Avatar>\n      )\n      break\n    case 'Q':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#68768A' }}\n        >\n          Q\n        </Avatar>\n      )\n      break\n    case 'R':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#69797E' }}\n        >\n          R\n        </Avatar>\n      )\n      break\n    case 'S':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#CA5010' }}\n        >\n          S\n        </Avatar>\n      )\n      break\n    case 'T':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#C30052' }}\n        >\n          T\n        </Avatar>\n      )\n      break\n    case 'U':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: 'FF4343' }}\n        >\n          U\n        </Avatar>\n      )\n      break\n    case 'V':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#9A0089' }}\n        >\n          V\n        </Avatar>\n      )\n      break\n    case 'W':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#10893E' }}\n        >\n          W\n        </Avatar>\n      )\n      break\n    case 'X':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#567C73' }}\n        >\n          X\n        </Avatar>\n      )\n      break\n    case 'Y':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#018574' }}\n        >\n          Y\n        </Avatar>\n      )\n      break\n    case 'Z':\n      letter = (\n        <Avatar\n          className={size === 'small' ? classes.small : classes.medium}\n          style={{ backgroundColor: '#881798' }}\n        >\n          Z\n        </Avatar>\n      )\n      break\n    default:\n  }\n\n  return letter\n}\n"],"mappings":"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"}

package/dist/BarChartWidget-B3cv8kvU.js

@@ -0,0 +1,85 @@
+import { t as __export } from "./chunk-B4enJp2Q.js";
+import { t as WidgetCard_default } from "./WidgetCard-CDqYxK5O.js";
+import { t as FluentStatsSnippet_default } from "./FluentStatsSnippet-BuDlbH0Q.js";
+import { t as convertISODate } from "./ConvertISODate-TfG2U4Iu.js";
+import React, { Fragment, forwardRef } from "react";
+import { Box, Grid, Typography } from "@material-ui/core";
+import { MuiVegaLite } from "@material-vega/material-ui";
+
+//#region src/UI/widgets/library/BarChartWidget/BarChartWidget.jsx
+const layout = {
+	w: {
+		default: 2,
+		min: 0,
+		max: 4
+	},
+	h: {
+		default: 2,
+		min: 0,
+		max: 4
+	}
+};
+const params = { mode: { defaultValue: "chart" } };
+const BarChartWidget = (props, ref) => {
+	const { children, params: params$1, setParam, ...other } = props;
+	const { mockData, apiUrl, theme, dateRange } = params$1;
+	return /* @__PURE__ */ React.createElement(WidgetCard_default, {
+		ref,
+		...other,
+		title: mockData?.title,
+		theme: theme && theme
+	}, mockData ? /* @__PURE__ */ React.createElement(React.Fragment, null, dateRange && /* @__PURE__ */ React.createElement(Typography, {
+		gutterBottom: true,
+		variant: "caption",
+		component: "h3"
+	}, "From: ", convertISODate(dateRange.from), " to:", " ", convertISODate(dateRange.to)), mockData?.stats && /* @__PURE__ */ React.createElement(Grid, { container: true }, mockData?.stats.map((stat) => /* @__PURE__ */ React.createElement(Grid, {
+		item: true,
+		xs: 3,
+		key: stat.label
+	}, /* @__PURE__ */ React.createElement(FluentStatsSnippet_default, {
+		label: stat.label,
+		amount: stat.currentValue,
+		prevAmount: stat.previousValue
+	})))), /* @__PURE__ */ React.createElement(Box, {
+		clone: true,
+		flex: 1,
+		mt: 1,
+		overflow: "hidden"
+	}, /* @__PURE__ */ React.createElement(MuiVegaLite, {
+		width: "container",
+		height: "container",
+		autoResize: "true",
+		variant: "verticalBarChart",
+		spec: {
+			$schema: "https://vega.github.io/schema/vega-lite/v4.json",
+			data: { values: mockData?.data },
+			mark: "bar",
+			encoding: {
+				x: {
+					field: "xAxis",
+					type: mockData?.xAxisType,
+					axis: { ticks: false },
+					band: .5
+				},
+				y: {
+					field: "yAxis",
+					type: mockData?.yAxisType,
+					axis: { format: mockData?.yAxisFormat }
+				}
+			}
+		}
+	})), children) : /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, "Could not retrieve widget data. Please contact support."));
+};
+var BarChartWidget_default = forwardRef(BarChartWidget);
+
+//#endregion
+//#region src/UI/widgets/library/BarChartWidget/index.ts
+var BarChartWidget_exports = /* @__PURE__ */ __export({
+	default: () => BarChartWidget_default,
+	layout: () => layout,
+	params: () => params
+});
+
+//#endregion
+export { params as i, BarChartWidget_default as n, layout as r, BarChartWidget_exports as t };
+//# sourceMappingURL=BarChartWidget-B3cv8kvU.js.map

package/dist/BarChartWidget-B3cv8kvU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChartWidget-B3cv8kvU.js","names":["params","WidgetCard","FluentStatsSnippet"],"sources":["../src/UI/widgets/library/BarChartWidget/BarChartWidget.jsx","../src/UI/widgets/library/BarChartWidget/index.ts"],"sourcesContent":["import React, { forwardRef, Fragment } from 'react'\nimport { Grid, Box, Typography } from '@material-ui/core'\nimport { MuiVegaLite } from '@material-vega/material-ui'\nimport WidgetCard from '../../WidgetCard'\nimport FluentStatsSnippet from '../../FluentComponents/atoms/FluentStatsSnippet'\nimport { convertISODate } from '../../utils/ConvertISODate'\n\nexport const layout = {\n  w: { default: 2, min: 0, max: 4 },\n  h: { default: 2, min: 0, max: 4 }\n}\n\nexport const params = {\n  mode: {\n    defaultValue: 'chart'\n  }\n}\n\nconst BarChartWidget = (props, ref) => {\n  const { children, params, setParam, ...other } = props\n  const { mockData, apiUrl, theme, dateRange } = params\n\n  return (\n    <WidgetCard\n      ref={ref}\n      {...other}\n      title={mockData?.title}\n      theme={theme && theme}\n    >\n      {mockData ? (\n        <>\n          {dateRange && (\n            <Typography gutterBottom variant='caption' component='h3'>\n              From: {convertISODate(dateRange.from)} to:{' '}\n              {convertISODate(dateRange.to)}\n            </Typography>\n          )}\n          {mockData?.stats && (\n            <Grid container>\n              {mockData?.stats.map((stat) => (\n                <Grid item xs={3} key={stat.label}>\n                  <FluentStatsSnippet\n                    label={stat.label}\n                    amount={stat.currentValue}\n                    prevAmount={stat.previousValue}\n                  />\n                </Grid>\n              ))}\n            </Grid>\n          )}\n          <Box clone flex={1} mt={1} overflow='hidden'>\n            <MuiVegaLite\n              width='container'\n              height='container'\n              autoResize='true'\n              variant='verticalBarChart'\n              spec={{\n                $schema: 'https://vega.github.io/schema/vega-lite/v4.json',\n                data: {\n                  values: mockData?.data\n                },\n                mark: 'bar',\n                encoding: {\n                  x: {\n                    field: 'xAxis',\n                    type: mockData?.xAxisType,\n                    axis: {\n                      ticks: false\n                    },\n                    band: 0.5\n                  },\n                  y: {\n                    field: 'yAxis',\n                    type: mockData?.yAxisType,\n                    axis: {\n                      format: mockData?.yAxisFormat\n                    }\n                  }\n                }\n              }}\n            />\n          </Box>\n          {children}\n        </>\n      ) : (\n        <Typography variant='subtitle2'>\n          Could not retrieve widget data. Please contact support.\n        </Typography>\n      )}\n    </WidgetCard>\n  )\n}\n\nexport default forwardRef(BarChartWidget)\n","export * from './BarChartWidget';\nexport {default} from './BarChartWidget';\n"],"mappings":";;;;;;;;;AAOA,MAAa,SAAS;CACpB,GAAG;EAAE,SAAS;EAAG,KAAK;EAAG,KAAK;EAAG;CACjC,GAAG;EAAE,SAAS;EAAG,KAAK;EAAG,KAAK;EAAG;CAClC;AAED,MAAa,SAAS,EACpB,MAAM,EACJ,cAAc,SACf,EACF;AAED,MAAM,kBAAkB,OAAO,QAAQ;CACrC,MAAM,EAAE,UAAU,kBAAQ,UAAU,GAAG,UAAU;CACjD,MAAM,EAAE,UAAU,QAAQ,OAAO,cAAcA;AAE/C,QACE,oCAACC;EACM;EACL,GAAI;EACJ,OAAO,UAAU;EACjB,OAAO,SAAS;IAEf,WACC,0DACG,aACC,oCAAC;EAAW;EAAa,SAAQ;EAAU,WAAU;IAAK,UACjD,eAAe,UAAU,KAAK,EAAC,QAAK,KAC1C,eAAe,UAAU,GAAG,CAClB,EAEd,UAAU,SACT,oCAAC,QAAK,mBACH,UAAU,MAAM,KAAK,SACpB,oCAAC;EAAK;EAAK,IAAI;EAAG,KAAK,KAAK;IAC1B,oCAACC;EACC,OAAO,KAAK;EACZ,QAAQ,KAAK;EACb,YAAY,KAAK;GACjB,CACG,CACP,CACG,EAET,oCAAC;EAAI;EAAM,MAAM;EAAG,IAAI;EAAG,UAAS;IAClC,oCAAC;EACC,OAAM;EACN,QAAO;EACP,YAAW;EACX,SAAQ;EACR,MAAM;GACJ,SAAS;GACT,MAAM,EACJ,QAAQ,UAAU,MACnB;GACD,MAAM;GACN,UAAU;IACR,GAAG;KACD,OAAO;KACP,MAAM,UAAU;KAChB,MAAM,EACJ,OAAO,OACR;KACD,MAAM;KACP;IACD,GAAG;KACD,OAAO;KACP,MAAM,UAAU;KAChB,MAAM,EACJ,QAAQ,UAAU,aACnB;KACF;IACF;GACF;GACD,CACE,EACL,SACA,GAEH,oCAAC,cAAW,SAAQ,eAAY,0DAEnB,CAEJ;;AAIjB,6BAAe,WAAW,eAAe"}