udp-react-enterprise-component-library 25.18.1-beta.6 → 25.18.1-beta.60

package/dist/AmbientToggleButtonGroupDefault-CngfAplM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmbientToggleButtonGroupDefault-CngfAplM.js","names":[],"sources":["../src/UI/inputs/buttons/AmbientToggleButtonGroupDefault.jsx"],"sourcesContent":["import React, {forwardRef, Children, isValidElement, cloneElement} from 'react';\nimport { isFragment } from 'react-is';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport isValueSelected from '../../../utilities/isValueSelected';\nimport { withStyles } from '@material-ui/core/styles';\nimport { capitalize } from '@material-ui/core/utils';\n\nexport const styles = (theme) => ({\n  /* Styles applied to the root element. */\n  root: {\n    display: 'inline-flex',\n    padding: 0\n  },\n  /* Styles applied to the root element if `orientation=\"vertical\"`. */\n  vertical: {\n    flexDirection: 'column',\n  },\n  /* Styles applied to the children. */\n  grouped: {},\n  /* Styles applied to the children if `orientation=\"horizontal\"`. */\n  groupedHorizontal: {\n    // '&:not(:first-child)': {\n    //   marginLeft: -1,\n    //   borderLeft: '1px solid ',\n    //   borderTopLeftRadius: 25,\n    //   borderBottomLeftRadius: 25,\n    // },\n    // '&:not(:last-child)': {\n    //   borderTopRightRadius: 25,\n    //   borderBottomRightRadius: 25,\n    // },\n    borderRadius: 25,\n    padding: 0,\n    paddingRight: 16,\n  '&:not(:first-child)': {\n    marginTop: 16,\n    borderRadius: 25,\n    paddingRight: 16,\n    padding: 0\n  },\n  '&:not(:last-child)': {\n    padding: 0,\n    borderRadius: 25,\n    paddingRight: 16,\n  },\n    \n  },\n  /* Styles applied to the children if `orientation=\"vertical\"`. */\n  groupedVertical: {\n      borderRadius: 25,\n      padding: 0,\n      paddingRight: 16,\n    '&:not(:first-child)': {\n      marginTop: 16,\n      borderRadius: 25,\n      paddingRight: 16,\n      padding: 0\n    },\n    '&:not(:last-child)': {\n      padding: 0,\n      borderRadius: 25,\n      paddingRight: 16,\n    },\n  },\n});\n\nconst AmbientToggleButtonGroupDefault = forwardRef(function AmbientToggleButton(props, ref) {\n  const {\n    children,\n    classes,\n    className,\n    exclusive = false,\n    onChange,\n    orientation = 'horizontal',\n    size = 'medium',\n    value,\n    ...other\n  } = props;\n\n  const handleChange = (event, buttonValue) => {\n    if (!onChange) {\n      return;\n    }\n\n    const index = value && value.indexOf(buttonValue);\n    let newValue;\n\n    if (value && index >= 0) {\n      newValue = value.slice();\n      newValue.splice(index, 1);\n    } else {\n      newValue = value ? value.concat(buttonValue) : [buttonValue];\n    }\n\n    onChange(event, newValue);\n  };\n\n  const handleExclusiveChange = (event, buttonValue) => {\n    if (!onChange) {\n      return;\n    }\n\n    onChange(event, value === buttonValue ? null : buttonValue);\n  };\n\n  return (\n    <div\n      role=\"group\"\n      className={clsx(\n        classes.root,\n        {\n          [classes.vertical]: orientation === 'vertical',\n        },\n        className,\n      )}\n      ref={ref}\n      {...other}\n    >\n      {Children.map(children, (child) => {\n        if (!isValidElement(child)) {\n          return null;\n        }\n\n        if (process.env.NODE_ENV !== 'production') {\n          if (isFragment(child)) {\n            console.error(\n              [\n                \"Material-UI: The ToggleButtonGroup component doesn't accept a Fragment as a child.\",\n                'Consider providing an array instead.',\n              ].join('\\n'),\n            );\n          }\n        }\n\n        return cloneElement(child, {\n          className: clsx(\n            classes.grouped,\n            classes[`grouped${capitalize(orientation)}`],\n            child.props.className,\n          ),\n          onChange: exclusive ? handleExclusiveChange : handleChange,\n          selected:\n            child.props.selected === undefined\n              ? isValueSelected(child.props.value, value)\n              : child.props.selected,\n          size: child.props.size || size,\n        });\n      })}\n    </div>\n  );\n});\n\nAmbientToggleButtonGroupDefault.propTypes = {\n  // ----------------------------- Warning --------------------------------\n  // | These PropTypes are generated from the TypeScript type definitions |\n  // |     To update them edit the d.ts file and run \"yarn proptypes\"     |\n  // ----------------------------------------------------------------------\n  /**\n   * The content of the button.\n   */\n  children: PropTypes.node,\n  /**\n   * Override or extend the styles applied to the component.\n   * See [CSS API](#css) below for more details.\n   */\n  classes: PropTypes.object,\n  /**\n   * @ignore\n   */\n  className: PropTypes.string,\n  /**\n   * If `true`, only allow one of the child ToggleButton values to be selected.\n   */\n  exclusive: PropTypes.bool,\n  /**\n   * Callback fired when the value changes.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {any} value of the selected buttons. When `exclusive` is true\n   * this is a single value; when false an array of selected values. If no value\n   * is selected and `exclusive` is true the value is null; when false an empty array.\n   */\n  onChange: PropTypes.func,\n  /**\n   * The group orientation (layout flow direction).\n   */\n  orientation: PropTypes.oneOf(['horizontal', 'vertical']),\n  /**\n   * The size of the buttons.\n   */\n  size: PropTypes.oneOf(['large', 'medium', 'small']),\n  /**\n   * The currently selected value within the group or an array of selected\n   * values when `exclusive` is false.\n   *\n   * The value must have reference equality with the option in order to be selected.\n   */\n  value: PropTypes.any,\n};\n\n/**\n * Explicitly cast the HOC to any to avoid non-portable inferred React types in declaration output.\n * @type {any}\n */\nconst AmbientToggleButtonGroupDefaultExport = withStyles(styles, { name: 'MuiToggleButtonGroup' })(AmbientToggleButtonGroupDefault);\n\nexport default AmbientToggleButtonGroupDefaultExport;"],"mappings":";;;;;;;;;AAQA,MAAa,UAAU,WAAW;CAEhC,MAAM;EACJ,SAAS;EACT,SAAS;EACV;CAED,UAAU,EACR,eAAe,UAChB;CAED,SAAS,EAAE;CAEX,mBAAmB;EAWjB,cAAc;EACd,SAAS;EACT,cAAc;EAChB,uBAAuB;GACrB,WAAW;GACX,cAAc;GACd,cAAc;GACd,SAAS;GACV;EACD,sBAAsB;GACpB,SAAS;GACT,cAAc;GACd,cAAc;GACf;EAEA;CAED,iBAAiB;EACb,cAAc;EACd,SAAS;EACT,cAAc;EAChB,uBAAuB;GACrB,WAAW;GACX,cAAc;GACd,cAAc;GACd,SAAS;GACV;EACD,sBAAsB;GACpB,SAAS;GACT,cAAc;GACd,cAAc;GACf;EACF;CACF;AAED,MAAM,kCAAkC,WAAW,SAAS,oBAAoB,OAAO,KAAK;CAC1F,MAAM,EACJ,UACA,SACA,WACA,YAAY,OACZ,UACA,cAAc,cACd,OAAO,UACP,OACA,GAAG,UACD;CAEJ,MAAM,gBAAgB,OAAO,gBAAgB;AAC3C,MAAI,CAAC,SACH;EAGF,MAAM,QAAQ,SAAS,MAAM,QAAQ,YAAY;EACjD,IAAI;AAEJ,MAAI,SAAS,SAAS,GAAG;AACvB,cAAW,MAAM,OAAO;AACxB,YAAS,OAAO,OAAO,EAAE;QAEzB,YAAW,QAAQ,MAAM,OAAO,YAAY,GAAG,CAAC,YAAY;AAG9D,WAAS,OAAO,SAAS;;CAG3B,MAAM,yBAAyB,OAAO,gBAAgB;AACpD,MAAI,CAAC,SACH;AAGF,WAAS,OAAO,UAAU,cAAc,OAAO,YAAY;;AAG7D,QACE,oCAAC;EACC,MAAK;EACL,WAAW,KACT,QAAQ,MACR,GACG,QAAQ,WAAW,gBAAgB,YACrC,EACD,UACD;EACI;EACL,GAAI;IAEH,SAAS,IAAI,WAAW,UAAU;AACjC,MAAI,CAAC,eAAe,MAAM,CACxB,QAAO;AAGT,MAAI,QAAQ,IAAI,aAAa,cAC3B;OAAI,WAAW,MAAM,CACnB,SAAQ,MACN,CACE,sFACA,uCACD,CAAC,KAAK,KAAK,CACb;;AAIL,SAAO,aAAa,OAAO;GACzB,WAAW,KACT,QAAQ,SACR,QAAQ,UAAU,WAAW,YAAY,KACzC,MAAM,MAAM,UACb;GACD,UAAU,YAAY,wBAAwB;GAC9C,UACE,MAAM,MAAM,aAAa,SACrB,gBAAgB,MAAM,MAAM,OAAO,MAAM,GACzC,MAAM,MAAM;GAClB,MAAM,MAAM,MAAM,QAAQ;GAC3B,CAAC;GACF,CACE;EAER;AAEF,gCAAgC,YAAY;CAQ1C,UAAU,UAAU;CAKpB,SAAS,UAAU;CAInB,WAAW,UAAU;CAIrB,WAAW,UAAU;CASrB,UAAU,UAAU;CAIpB,aAAa,UAAU,MAAM,CAAC,cAAc,WAAW,CAAC;CAIxD,MAAM,UAAU,MAAM;EAAC;EAAS;EAAU;EAAQ,CAAC;CAOnD,OAAO,UAAU;CAClB;;;;;AAMD,MAAM,wCAAwC,WAAW,QAAQ,EAAE,MAAM,wBAAwB,CAAC,CAAC,gCAAgC;AAEnI,8CAAe"}

package/dist/AmbientTokenButton-B53E25r2.js

@@ -0,0 +1,46 @@
+import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
+import React, { forwardRef } from "react";
+import { IconButton, Tooltip, makeStyles } from "@material-ui/core";
+import { ChevronDownIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+
+//#region src/UI/inputs/buttons/AmbientTokenButton.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	actionHeader: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	icon: {
+		background: theme.palette.common.white,
+		padding: theme.spacing(1),
+		color: theme.palette.secondary.main
+	}
+}));
+const AmbientTokenButton = forwardRef(function AmbientTokenButton$1(props, ref) {
+	const { tooltip, ariaLabel, onClick, size, icon = ChevronDownIcon, iconClassName, otherProps, id = "token-button", udprecordid } = props;
+	const classes = useStyles(props);
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip }, /* @__PURE__ */ React.createElement(IconButton, {
+		id,
+		udprecordid,
+		ref,
+		"aria-label": ariaLabel,
+		className: iconClassName ?? classes.icon,
+		size: size ?? "small",
+		onClick,
+		...otherProps
+	}, /* @__PURE__ */ React.createElement(FluentIcon, {
+		className: classes.iconButtonStyle,
+		component: icon
+	}))));
+});
+AmbientTokenButton.propTypes = {
+	tooltip: PropTypes.string.isRequired,
+	ariaLabel: PropTypes.string.isRequired,
+	onClick: PropTypes.func,
+	icon: PropTypes.func.isRequired
+};
+
+//#endregion
+export { AmbientTokenButton as t };
+//# sourceMappingURL=AmbientTokenButton-B53E25r2.js.map

package/dist/AmbientTokenButton-B53E25r2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmbientTokenButton-B53E25r2.js","names":["AmbientTokenButton"],"sources":["../src/UI/inputs/buttons/AmbientTokenButton.jsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { makeStyles, Tooltip, IconButton } from '@material-ui/core';\nimport { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';\nimport { ChevronDownIcon } from '@fluentui/react-icons';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  actionHeader: {\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  icon: {\n    background: theme.palette.common.white,\n    padding: theme.spacing(1),\n    color: theme.palette.secondary.main\n  }\n}));\n\nexport const AmbientTokenButton = forwardRef(function AmbientTokenButton(\n  props,\n  ref\n) {\n  const {\n    tooltip,\n    ariaLabel,\n    onClick,\n    size,\n    icon = ChevronDownIcon,\n    iconClassName,\n    otherProps,\n    id = 'token-button',\n    udprecordid\n  } = props;\n  const classes = useStyles(props);\n\n  return (\n    <div className={classes.root}>\n      <Tooltip title={tooltip}>\n        <IconButton\n          id={id}\n          udprecordid={udprecordid}\n          ref={ref}\n          aria-label={ariaLabel}\n          className={iconClassName ?? classes.icon}\n          size={size ?? 'small'}\n          onClick={onClick}\n          {...otherProps}\n        >\n          <FluentIcon className={classes.iconButtonStyle} component={icon} />\n        </IconButton>\n      </Tooltip>\n    </div>\n  );\n});\n\nAmbientTokenButton.propTypes = {\n  /**\n   * Tooltip to display for button\n   */\n  tooltip: PropTypes.string.isRequired,\n  /**\n   * Accessiblity label for icon\n   */\n  ariaLabel: PropTypes.string.isRequired,\n  /**\n   * event for button function\n   */\n  onClick: PropTypes.func,\n  /**\n   * icon to appear in button\n   */\n  icon: PropTypes.func.isRequired\n};\n"],"mappings":";;;;;;;AAMA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,cAAc;EACZ,SAAS;EACT,eAAe;EAChB;CACD,MAAM;EACJ,YAAY,MAAM,QAAQ,OAAO;EACjC,SAAS,MAAM,QAAQ,EAAE;EACzB,OAAO,MAAM,QAAQ,UAAU;EAChC;CACF,EAAE;AAEH,MAAa,qBAAqB,WAAW,SAASA,qBACpD,OACA,KACA;CACA,MAAM,EACJ,SACA,WACA,SACA,MACA,OAAO,iBACP,eACA,YACA,KAAK,gBACL,gBACE;CACJ,MAAM,UAAU,UAAU,MAAM;AAEhC,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,WAAQ,OAAO,WACd,oCAAC;EACK;EACS;EACR;EACL,cAAY;EACZ,WAAW,iBAAiB,QAAQ;EACpC,MAAM,QAAQ;EACL;EACT,GAAI;IAEJ,oCAAC;EAAW,WAAW,QAAQ;EAAiB,WAAW;GAAQ,CACxD,CACL,CACN;EAER;AAEF,mBAAmB,YAAY;CAI7B,SAAS,UAAU,OAAO;CAI1B,WAAW,UAAU,OAAO;CAI5B,SAAS,UAAU;CAInB,MAAM,UAAU,KAAK;CACtB"}

package/dist/AmbientVisualizationCard-BmTQR121.js

@@ -0,0 +1,232 @@
+import { t as LayoutUnit } from "./LayoutUnit-D4jJvonh.js";
+import { t as AmbientCard } from "./AmbientCard-CLW4bPCu.js";
+import { t as AmbientToggleButton } from "./AmbientToggleButton-BjyjXj8S.js";
+import { t as SummaryBlock } from "./SummaryBlock-BjUNDl4q.js";
+import { n as FluentSimpleTab, t as FluentSimpleTabs } from "./FluentSimpleTabs-BghyAzdO.js";
+import { t as FluentTabPanel } from "./FluentTabPanel-DZPtDTkV.js";
+import { t as AmbientToggleButtonGroup } from "./AmbientToggleButtonGroup-Bi9yW5gC.js";
+import { t as AmbientVisualizer } from "./AmbientVisualizer-BABKxgsK.js";
+import { t as TokenGroupItem } from "./TokenGroupItem-BK0dx4cD.js";
+import React, { useState } from "react";
+import { Box, Divider, Typography, makeStyles } from "@material-ui/core";
+import { MuiVegaLite } from "@material-vega/material-ui";
+
+//#region src/UI/surfaces/cards/chartDisplayCards/AmbientSplitStatCard.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	rootContainer: {
+		background: "#FFFFFF",
+		boxShadow: "0px 1px 4px rgba(0, 0, 0, 0.08)",
+		borderRadius: "6px",
+		display: "flex",
+		justifyContent: "center",
+		flexDirection: "column"
+	},
+	infoContainer: {
+		display: "flex",
+		justifyContent: "center",
+		paddingLeft: theme.spacing(3)
+	},
+	divider: {
+		width: "100%",
+		height: "1px"
+	},
+	subContainer: {
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "flex-start",
+		alignItems: "center",
+		width: "100%"
+	},
+	subContainerGraph: {
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "flex-start",
+		alignItems: "start",
+		width: "100%"
+	},
+	graphContainer: {
+		display: "flex",
+		paddingLeft: theme.spacing(3)
+	}
+}));
+const defaultBlockSpecs = {
+	alertType: "default",
+	value: "0",
+	startLabel: "$",
+	label: "",
+	labelVariant: "subtitle2",
+	width: "100%",
+	style: { border: "none" }
+};
+/**
+* `AmbientSplitStatCard` component
+*/
+const AmbientSplitStatCard = (props) => {
+	const { title, subtitle, cardsSpecs, graphTitle, graphVariant, graphSpec, style } = props;
+	const classes = useStyles$1(props);
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classes.rootContainer,
+		style
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.infoContainer }, /* @__PURE__ */ React.createElement("div", { className: classes.subContainerGraph }, /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "h6",
+		style: {
+			fontStyle: "normal",
+			fontWeight: 500,
+			fontSize: "19px"
+		}
+	}, title), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement(SummaryBlock, cardsSpecs?.SummaryBlockOne || defaultBlockSpecs), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		style: { fontWeight: 400 }
+	}, subtitle), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" })), /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" }), /* @__PURE__ */ React.createElement("div", { className: classes.subContainer }, /* @__PURE__ */ React.createElement(SummaryBlock, cardsSpecs?.SummaryBlockTwo || defaultBlockSpecs), /* @__PURE__ */ React.createElement(Divider, {
+		orientation: "horizontal",
+		className: classes.divider
+	}), /* @__PURE__ */ React.createElement(SummaryBlock, cardsSpecs?.SummaryBlockThree || defaultBlockSpecs))), /* @__PURE__ */ React.createElement(Divider, {
+		orientation: "horizontal",
+		className: classes.divider
+	}), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement("div", { className: classes.graphContainer }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1" }, graphTitle), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" })), /* @__PURE__ */ React.createElement(Box, {
+		clone: true,
+		overflow: "hidden",
+		sx: {
+			width: "100%",
+			minWidth: "100%",
+			"& svg": { width: "100%" }
+		}
+	}, /* @__PURE__ */ React.createElement(MuiVegaLite, {
+		variant: graphVariant || "verticalBarChart",
+		background: "paper",
+		autoResize: true,
+		actions: false,
+		spec: graphSpec
+	})), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }));
+};
+
+//#endregion
+//#region src/UI/surfaces/cards/chartDisplayCards/AmbientVisualizationCard.jsx
+const useStyles = makeStyles((theme) => ({
+	root: { position: "relative" },
+	item: { marginRight: theme.spacing(2) },
+	tabPanelContents: { marginLeft: theme.spacing(2) },
+	togglePadding: { padding: theme.spacing(2) }
+}));
+const AmbientVisualizationCard = ({ title, toggleList1, toggleList2, toggleList3, tabList, tabContent1, tabContent2, tabContent3 }) => {
+	const classes = useStyles();
+	const [value, setValue] = useState(0);
+	const [toggleValue, setToggleValue] = useState("month");
+	const handleChange = (event, newValue) => {
+		setValue(newValue);
+	};
+	const selectToggle = (event, nextView) => {
+		setToggleValue(nextView);
+	};
+	return /* @__PURE__ */ React.createElement(AmbientCard, {
+		title,
+		customAdornment: " ",
+		visualization: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentTabPanel, {
+			value,
+			index: 0
+		}, /* @__PURE__ */ React.createElement("div", { className: classes.tabPanelContents }, tabContent1 && tabContent1.map((item) => {
+			return toggleValue === item.value && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AmbientVisualizer, {
+				values: item.values,
+				visualization: item.chartType,
+				verticalBarColor: item.verticalBarColor,
+				verticalBarBand: item.verticalBarBand,
+				verticalBarXfield: item.verticalBarXfield,
+				verticalBarXtype: item.verticalBarXtype,
+				verticalBarYfield: item.verticalBarYfield,
+				verticalBarYtype: item.verticalBarYtype,
+				styleThin: item.styleThin
+			}));
+		}))), /* @__PURE__ */ React.createElement(FluentTabPanel, {
+			value,
+			index: 1
+		}, /* @__PURE__ */ React.createElement("div", { className: classes.tabPanelContents }, tabContent2 && tabContent2.map((item) => {
+			return toggleValue === item.value && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AmbientVisualizer, {
+				values: item.values,
+				visualization: item.chartType,
+				verticalBarColor: item.verticalBarColor,
+				verticalBarBand: item.verticalBarBand,
+				verticalBarXfield: item.verticalBarXfield,
+				verticalBarXtype: item.verticalBarXtype,
+				verticalBarYfield: item.verticalBarYfield,
+				verticalBarYtype: item.verticalBarYtype,
+				styleThin: item.styleThin
+			}));
+		}))), /* @__PURE__ */ React.createElement(FluentTabPanel, {
+			value,
+			index: 2
+		}, /* @__PURE__ */ React.createElement("div", { className: classes.tabPanelContents }, tabContent3 && tabContent3.map((item) => {
+			return toggleValue === item.value && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AmbientVisualizer, {
+				values: item.values,
+				visualization: item.chartType,
+				verticalBarColor: item.verticalBarColor,
+				verticalBarBand: item.verticalBarBand,
+				verticalBarXfield: item.verticalBarXfield,
+				verticalBarXtype: item.verticalBarXtype,
+				verticalBarYfield: item.verticalBarYfield,
+				verticalBarYtype: item.verticalBarYtype,
+				styleThin: item.styleThin
+			}));
+		}))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentSimpleTabs, {
+			value,
+			onChange: handleChange,
+			"aria-label": "simple tabs example"
+		}, tabList && tabList.map((item) => {
+			return /* @__PURE__ */ React.createElement(FluentSimpleTab, { label: item.label });
+		})), /* @__PURE__ */ React.createElement(FluentTabPanel, {
+			value,
+			index: 0
+		}, /* @__PURE__ */ React.createElement("div", { className: classes.togglePadding }, /* @__PURE__ */ React.createElement(AmbientToggleButtonGroup, {
+			orientation: "horizontal",
+			value: toggleValue
+		}, toggleList1 && toggleList1.map((item) => {
+			return /* @__PURE__ */ React.createElement(AmbientToggleButton, {
+				value: item.value,
+				"aria-label": item.ariaLabel,
+				onMouseUp: item.onClick,
+				onClick: selectToggle,
+				className: classes.item
+			}, /* @__PURE__ */ React.createElement(TokenGroupItem, {
+				label: item.label,
+				icon: item.icon
+			}));
+		})))), /* @__PURE__ */ React.createElement(FluentTabPanel, {
+			value,
+			index: 1
+		}, /* @__PURE__ */ React.createElement("div", { className: classes.togglePadding }, /* @__PURE__ */ React.createElement(AmbientToggleButtonGroup, {
+			orientation: "horizontal",
+			value: toggleValue
+		}, toggleList2 && toggleList2.map((item) => {
+			return /* @__PURE__ */ React.createElement(AmbientToggleButton, {
+				value: item.value,
+				"aria-label": item.ariaLabel,
+				onMouseUp: item.onClick,
+				onClick: selectToggle,
+				className: classes.item
+			}, /* @__PURE__ */ React.createElement(TokenGroupItem, {
+				label: item.label,
+				icon: item.icon
+			}));
+		})))), /* @__PURE__ */ React.createElement(FluentTabPanel, {
+			value,
+			index: 2
+		}, /* @__PURE__ */ React.createElement("div", { className: classes.togglePadding }, /* @__PURE__ */ React.createElement(AmbientToggleButtonGroup, {
+			orientation: "horizontal",
+			value: toggleValue
+		}, toggleList3 && toggleList3.map((item) => {
+			return /* @__PURE__ */ React.createElement(AmbientToggleButton, {
+				value: item.value,
+				"aria-label": item.ariaLabel,
+				onMouseUp: item.onClick,
+				onClick: selectToggle,
+				className: classes.item
+			}, /* @__PURE__ */ React.createElement(TokenGroupItem, {
+				label: item.label,
+				icon: item.icon
+			}));
+		}))))))
+	});
+};
+
+//#endregion
+export { AmbientSplitStatCard as n, AmbientVisualizationCard as t };
+//# sourceMappingURL=AmbientVisualizationCard-BmTQR121.js.map

package/dist/AmbientVisualizationCard-BmTQR121.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmbientVisualizationCard-BmTQR121.js","names":["useStyles"],"sources":["../src/UI/surfaces/cards/chartDisplayCards/AmbientSplitStatCard.jsx","../src/UI/surfaces/cards/chartDisplayCards/AmbientVisualizationCard.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, Typography, Divider, Box } from '@material-ui/core';\nimport { SummaryBlock } from '../../../dataDisplay/SummaryBlock';\nimport { MuiVegaLite } from '@material-vega/material-ui';\nimport { LayoutUnit } from '../../../../layout/LayoutUnit';\n\nconst useStyles = makeStyles((theme) => ({\n  rootContainer: {\n    background: '#FFFFFF',\n    boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.08)',\n    borderRadius: '6px',\n    display: 'flex',\n    justifyContent: 'center',\n    flexDirection: 'column'\n  },\n  infoContainer: {\n    display: 'flex',\n    justifyContent: 'center',\n    paddingLeft: theme.spacing(3)\n  },\n  divider: {\n    width: '100%',\n    height: '1px'\n  },\n  subContainer: {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'flex-start',\n    alignItems: 'center',\n    width: '100%'\n  },\n  subContainerGraph: {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'flex-start',\n    alignItems: 'start',\n    width: '100%'\n  },\n  graphContainer: {\n    display: 'flex',\n    paddingLeft: theme.spacing(3)\n  }\n}));\n\nconst defaultBlockSpecs = {\n  alertType: 'default',\n  value: '0',\n  startLabel: '$',\n  label: '',\n  labelVariant: 'subtitle2',\n  width: '100%',\n  style: { border: 'none' }\n};\n\n/**\n * `AmbientSplitStatCard` component\n */\nexport const AmbientSplitStatCard = (props) => {\n  const {\n    title,\n    subtitle,\n    cardsSpecs,\n    graphTitle,\n    graphVariant,\n    graphSpec,\n    style\n  } = props;\n\n  const classes = useStyles(props);\n\n  return (\n    <div className={classes.rootContainer} style={style}>\n      <div className={classes.infoContainer}>\n        <div className={classes.subContainerGraph}>\n          <LayoutUnit unit='xxs' />\n          <Typography\n            variant='h6'\n            style={{\n              fontStyle: 'normal',\n              fontWeight: 500,\n              fontSize: '19px'\n            }}\n          >\n            {title}\n          </Typography>\n          <LayoutUnit unit='nudge' />\n          <SummaryBlock\n            {...(cardsSpecs?.SummaryBlockOne || defaultBlockSpecs)}\n          />\n          <LayoutUnit unit='xxs' />\n          <Typography variant='subtitle2' style={{ fontWeight: 400 }}>\n            {subtitle}\n          </Typography>\n          <LayoutUnit unit='xxs' />\n        </div>\n        <Divider orientation='vertical' />\n        <div className={classes.subContainer}>\n          <SummaryBlock\n            {...(cardsSpecs?.SummaryBlockTwo || defaultBlockSpecs)}\n          />\n          <Divider orientation='horizontal' className={classes.divider} />\n          <SummaryBlock\n            {...(cardsSpecs?.SummaryBlockThree || defaultBlockSpecs)}\n          />\n        </div>\n      </div>\n      <Divider orientation='horizontal' className={classes.divider} />\n      <LayoutUnit unit='nudge' />\n      <div className={classes.graphContainer}>\n        <Typography variant='subtitle1'>{graphTitle}</Typography>\n        <LayoutUnit unit='nudge' />\n      </div>\n      <Box\n        clone\n        overflow='hidden'\n        sx={{\n          width: '100%',\n          minWidth: '100%',\n          '& svg': {\n            width: '100%'\n          }\n        }}\n      >\n        <MuiVegaLite\n          variant={graphVariant || 'verticalBarChart'}\n          background='paper'\n          autoResize\n          actions={false}\n          spec={graphSpec}\n        />\n      </Box>\n      <LayoutUnit unit='xxs' />\n    </div>\n  );\n};\n","import React, { useState } from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { AmbientToggleButton } from '../../../inputs/buttons/AmbientToggleButton';\nimport { AmbientToggleButtonGroup } from '../../../inputs/buttons/AmbientToggleButtonGroup';\nimport { TokenGroupItem } from '../../../templates/ui/TokenGroupItem';\nimport { FluentTabPanel } from '../../../navigation/tabs/defaultTabs/FluentTabPanel';\nimport { FluentSimpleTab } from '../../../navigation/tabs/defaultTabs/FluentSimpleTab';\nimport { FluentSimpleTabs } from '../../../navigation/tabs/defaultTabs/FluentSimpleTabs';\nimport { AmbientVisualizer } from '../../../dataDisplay/visualization/AmbientVisualizer';\nimport { AmbientCard } from '../AmbientCard';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    position: 'relative'\n  },\n  item: {\n    marginRight: theme.spacing(2)\n  },\n  tabPanelContents: {\n    marginLeft: theme.spacing(2)\n  },\n  togglePadding: {\n    padding: theme.spacing(2)\n  }\n}));\n\nexport const AmbientVisualizationCard = ({\n  title,\n  toggleList1,\n  toggleList2,\n  toggleList3,\n  tabList,\n  tabContent1,\n  tabContent2,\n  tabContent3\n}) => {\n  const classes = useStyles();\n\n  const [value, setValue] = useState(0);\n  const [toggleValue, setToggleValue] = useState('month');\n\n  const handleChange = (event, newValue) => {\n    setValue(newValue);\n  };\n\n  const selectToggle = (event, nextView) => {\n    setToggleValue(nextView);\n  };\n\n  return (\n    <AmbientCard\n      title={title}\n      customAdornment=' '\n      visualization={\n        <div>\n          <FluentTabPanel value={value} index={0}>\n            <div className={classes.tabPanelContents}>\n              {tabContent1 &&\n                tabContent1.map((item) => {\n                  return (\n                    toggleValue === item.value && (\n                      <div>\n                        <AmbientVisualizer\n                          values={item.values}\n                          visualization={item.chartType}\n                          verticalBarColor={item.verticalBarColor}\n                          verticalBarBand={item.verticalBarBand}\n                          verticalBarXfield={item.verticalBarXfield}\n                          verticalBarXtype={item.verticalBarXtype}\n                          verticalBarYfield={item.verticalBarYfield}\n                          verticalBarYtype={item.verticalBarYtype}\n                          styleThin={item.styleThin}\n                        />\n                      </div>\n                    )\n                  );\n                })}\n            </div>\n          </FluentTabPanel>\n          <FluentTabPanel value={value} index={1}>\n            <div className={classes.tabPanelContents}>\n              {tabContent2 &&\n                tabContent2.map((item) => {\n                  return (\n                    toggleValue === item.value && (\n                      <div>\n                        <AmbientVisualizer\n                          values={item.values}\n                          visualization={item.chartType}\n                          verticalBarColor={item.verticalBarColor}\n                          verticalBarBand={item.verticalBarBand}\n                          verticalBarXfield={item.verticalBarXfield}\n                          verticalBarXtype={item.verticalBarXtype}\n                          verticalBarYfield={item.verticalBarYfield}\n                          verticalBarYtype={item.verticalBarYtype}\n                          styleThin={item.styleThin}\n                        />\n                      </div>\n                    )\n                  );\n                })}\n            </div>\n          </FluentTabPanel>\n          <FluentTabPanel value={value} index={2}>\n            <div className={classes.tabPanelContents}>\n              {tabContent3 &&\n                tabContent3.map((item) => {\n                  return (\n                    toggleValue === item.value && (\n                      <div>\n                        <AmbientVisualizer\n                          values={item.values}\n                          visualization={item.chartType}\n                          verticalBarColor={item.verticalBarColor}\n                          verticalBarBand={item.verticalBarBand}\n                          verticalBarXfield={item.verticalBarXfield}\n                          verticalBarXtype={item.verticalBarXtype}\n                          verticalBarYfield={item.verticalBarYfield}\n                          verticalBarYtype={item.verticalBarYtype}\n                          styleThin={item.styleThin}\n                        />\n                      </div>\n                    )\n                  );\n                })}\n            </div>\n          </FluentTabPanel>\n          <div>\n            <FluentSimpleTabs\n              value={value}\n              onChange={handleChange}\n              aria-label='simple tabs example'\n            >\n              {tabList &&\n                tabList.map((item) => {\n                  return <FluentSimpleTab label={item.label} />;\n                })}\n            </FluentSimpleTabs>\n\n            <FluentTabPanel value={value} index={0}>\n              <div className={classes.togglePadding}>\n                <AmbientToggleButtonGroup\n                  orientation='horizontal'\n                  value={toggleValue}\n                >\n                  {toggleList1 &&\n                    toggleList1.map((item) => {\n                      return (\n                        <AmbientToggleButton\n                          value={item.value}\n                          aria-label={item.ariaLabel}\n                          onMouseUp={item.onClick}\n                          onClick={selectToggle}\n                          className={classes.item}\n                        >\n                          <TokenGroupItem label={item.label} icon={item.icon} />\n                        </AmbientToggleButton>\n                      );\n                    })}\n                </AmbientToggleButtonGroup>\n              </div>\n            </FluentTabPanel>\n            <FluentTabPanel value={value} index={1}>\n              <div className={classes.togglePadding}>\n                <AmbientToggleButtonGroup\n                  orientation='horizontal'\n                  value={toggleValue}\n                >\n                  {toggleList2 &&\n                    toggleList2.map((item) => {\n                      return (\n                        <AmbientToggleButton\n                          value={item.value}\n                          aria-label={item.ariaLabel}\n                          onMouseUp={item.onClick}\n                          onClick={selectToggle}\n                          className={classes.item}\n                        >\n                          <TokenGroupItem label={item.label} icon={item.icon} />\n                        </AmbientToggleButton>\n                      );\n                    })}\n                </AmbientToggleButtonGroup>\n              </div>\n            </FluentTabPanel>\n            <FluentTabPanel value={value} index={2}>\n              <div className={classes.togglePadding}>\n                <AmbientToggleButtonGroup\n                  orientation='horizontal'\n                  value={toggleValue}\n                >\n                  {toggleList3 &&\n                    toggleList3.map((item) => {\n                      return (\n                        <AmbientToggleButton\n                          value={item.value}\n                          aria-label={item.ariaLabel}\n                          onMouseUp={item.onClick}\n                          onClick={selectToggle}\n                          className={classes.item}\n                        >\n                          <TokenGroupItem label={item.label} icon={item.icon} />\n                        </AmbientToggleButton>\n                      );\n                    })}\n                </AmbientToggleButtonGroup>\n              </div>\n            </FluentTabPanel>\n          </div>\n        </div>\n      }\n    />\n  );\n};\n"],"mappings":"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"}