udp-react-enterprise-component-library 25.18.1-beta.24 → 25.18.1-beta.26

package/dist/TicketCard-DQGB9AgD.js

@@ -0,0 +1,143 @@
+import { t as FluentIconButton } from "./FluentIconButton-Dc95mE3v.js";
+import { t as StatusChip } from "./StatusChip-DZAN88VU.js";
+import React from "react";
+import { Card, CardContent, Divider, Typography, makeStyles } from "@material-ui/core";
+import { ArrowUpRightIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+
+//#region src/UI/dataDisplay/ticketCard/NotificationElement.jsx
+const useStyles$2 = makeStyles((theme) => ({
+	root: {
+		width: 0,
+		height: 0,
+		borderTop: "0px solid transparent",
+		borderRight: `45px solid ${theme?.palette?.error?.main}`,
+		borderBottom: "45px solid transparent"
+	},
+	number: {
+		marginLeft: theme.spacing(3.5),
+		paddingTop: theme.spacing(.5),
+		color: theme?.palette?.common?.white
+	}
+}));
+const NotificationElement = ({ alertNumber }) => {
+	const classes = useStyles$2();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.number }, /* @__PURE__ */ React.createElement(Typography, null, " ", alertNumber, " ")));
+};
+NotificationElement.propTypes = { alertNumber: PropTypes.number.isRequired };
+
+//#endregion
+//#region src/UI/dataDisplay/ticketCard/StatusLineItem.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {
+		width: "100%",
+		height: 44
+	},
+	wrapper: { display: "flex" },
+	labelCount: {
+		flex: 1,
+		display: "flex"
+	},
+	status: { marginRight: theme.spacing(1) },
+	icon: { marginRight: theme.spacing(1) }
+}));
+const StatusLineItem = ({ label, amount, status, icon, handleClick }) => {
+	const classes = useStyles$1();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.labelCount }, /* @__PURE__ */ React.createElement("div", { className: classes.icon }, " ", icon, " "), /* @__PURE__ */ React.createElement(Typography, null, " ", label, " ")), /* @__PURE__ */ React.createElement("div", { className: classes.status }, status === "error" && /* @__PURE__ */ React.createElement(StatusChip, {
+		label: amount,
+		status
+	}), status !== "error" && amount), /* @__PURE__ */ React.createElement(FluentIconButton, {
+		onClick: handleClick,
+		className: classes.launch,
+		icon: ArrowUpRightIcon,
+		"aria-label": "launch"
+	})), /* @__PURE__ */ React.createElement(Divider, null));
+};
+StatusLineItem.propTypes = {
+	label: PropTypes.string.isRequired,
+	amount: PropTypes.number,
+	status: PropTypes.string,
+	icon: PropTypes.node,
+	handleClick: PropTypes.func
+};
+
+//#endregion
+//#region src/UI/dataDisplay/ticketCard/TicketCard.jsx
+const useStyles = makeStyles((theme) => ({
+	root: { display: "flex" },
+	overviewContainer: {
+		width: theme.spacing(16),
+		height: theme.spacing(16),
+		background: "#393939",
+		marginRight: theme.spacing(2),
+		position: "relative"
+	},
+	notification: {
+		position: "absolute",
+		right: 0,
+		top: 0
+	},
+	totalNumber: {
+		textAlign: "center",
+		color: "#FFFFFF",
+		fontWeight: 400
+	},
+	label: {
+		display: "flex",
+		justifyContent: "center",
+		marginTop: -8,
+		color: "#FFFFFF"
+	},
+	itemContainer: {
+		width: "100%",
+		display: "flex",
+		flexDirection: "column",
+		alignContent: "space-around",
+		marginTop: theme.spacing(.5)
+	}
+}));
+const TicketCard = ({ totalAmount, label, notification, alertNumber, ticketData, component = "h6" }) => {
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Card, {
+		elevation: 0,
+		square: true,
+		className: classes.overviewContainer
+	}, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "h1",
+		component,
+		className: classes.totalNumber
+	}, totalAmount)), /* @__PURE__ */ React.createElement("div", { className: classes.label }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, label, " ")), notification && /* @__PURE__ */ React.createElement("div", { className: classes.notification }, /* @__PURE__ */ React.createElement(NotificationElement, { alertNumber })))), /* @__PURE__ */ React.createElement("div", { className: classes.itemContainer }, ticketData && ticketData.map((item) => {
+		return /* @__PURE__ */ React.createElement(StatusLineItem, {
+			label: item.label,
+			amount: item.amount,
+			status: item.status === "error" && "error",
+			icon: item.icon,
+			key: item.id
+		});
+	})));
+};
+TicketCard.propTypes = {
+	totalAmount: PropTypes.number,
+	label: PropTypes.string.isRequired,
+	notification: PropTypes.bool,
+	alertNumber: PropTypes.number,
+	ticketData: PropTypes.arrayOf(PropTypes.shape({
+		ticketAmount: PropTypes.string.isRequired,
+		label: PropTypes.number.isRequired,
+		notification: PropTypes.number.isRequired,
+		alertNumber: PropTypes.number,
+		id: PropTypes.number.isRequired,
+		ticketData: PropTypes.arrayOf(PropTypes.shape({
+			label: PropTypes.string.isRequired,
+			amount: PropTypes.number,
+			status: PropTypes.string.isRequired,
+			icon: PropTypes.node
+		}))
+	}).isRequired).isRequired,
+	component: PropTypes.string
+};
+TicketCard.defaultProps = { component: "h2" };
+
+//#endregion
+export { StatusLineItem as n, NotificationElement as r, TicketCard as t };
+//# sourceMappingURL=TicketCard-DQGB9AgD.js.map

package/dist/TicketCard-DQGB9AgD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TicketCard-DQGB9AgD.js","names":["useStyles","useStyles"],"sources":["../src/UI/dataDisplay/ticketCard/NotificationElement.jsx","../src/UI/dataDisplay/ticketCard/StatusLineItem.jsx","../src/UI/dataDisplay/ticketCard/TicketCard.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    width: 0,\n    height: 0,\n    borderTop: '0px solid transparent',\n    borderRight: `45px solid ${theme?.palette?.error?.main}`,\n    borderBottom: '45px solid transparent'\n  },\n  number: {\n    marginLeft: theme.spacing(3.5),\n    paddingTop: theme.spacing(0.5),\n    color: theme?.palette?.common?.white\n  }\n}))\n\nexport const NotificationElement = ({ alertNumber }) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.number}>\n        <Typography> {alertNumber} </Typography>\n      </div>\n    </div>\n  )\n}\nNotificationElement.propTypes = {\n  /**\n   * number of alert items\n   */\n  alertNumber: PropTypes.number.isRequired\n}\n","import React from 'react'\nimport { makeStyles, Divider, Typography } from '@material-ui/core'\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton'\nimport { StatusChip } from '../status/StatusChip'\nimport { ArrowUpRightIcon } from '@fluentui/react-icons'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: '100%',\n    height: 44\n  },\n  wrapper: { display: 'flex' },\n  labelCount: {\n    flex: 1,\n    display: 'flex'\n  },\n  status: {\n    marginRight: theme.spacing(1)\n  },\n  icon: {\n    marginRight: theme.spacing(1)\n  }\n}))\n\nexport const StatusLineItem = ({\n  label,\n  amount,\n  status,\n  icon,\n  handleClick\n}) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.wrapper}>\n        <div className={classes.labelCount}>\n          <div className={classes.icon}> {icon} </div>\n          <Typography> {label} </Typography>\n        </div>\n        <div className={classes.status}>\n          {status === 'error' && <StatusChip label={amount} status={status} />}\n\n          {status !== 'error' && amount}\n        </div>\n        <FluentIconButton\n          onClick={handleClick}\n          className={classes.launch}\n          icon={ArrowUpRightIcon}\n          aria-label='launch'\n        />\n      </div>\n\n      <Divider />\n    </div>\n  )\n}\nStatusLineItem.propTypes = {\n  /**\n   * stat label\n   */\n  label: PropTypes.string.isRequired,\n  /**\n   * Total amount stat\n   */\n  amount: PropTypes.number,\n  /**\n   * Type of status for status chip\n   */\n  status: PropTypes.string,\n  /**\n   * list icon\n   */\n  icon: PropTypes.node,\n  /**\n   * onClick event\n   */\n  handleClick: PropTypes.func\n}\n","import React from 'react'\nimport { makeStyles, Card, CardContent, Typography } from '@material-ui/core'\nimport { StatusLineItem } from './StatusLineItem'\nimport { NotificationElement } from './NotificationElement'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex'\n  },\n  overviewContainer: {\n    width: theme.spacing(16),\n    height: theme.spacing(16),\n    background: '#393939', // Add to theme\n    marginRight: theme.spacing(2),\n    position: 'relative'\n  },\n  notification: {\n    position: 'absolute',\n    right: 0,\n    top: 0\n  },\n  totalNumber: {\n    textAlign: 'center',\n    // color: theme.palette.common.white\n    color: '#FFFFFF', // Hex color added to avoid TypeError\n    fontWeight: 400\n  },\n  label: {\n    display: 'flex',\n    justifyContent: 'center',\n    marginTop: -8,\n    // color: theme.pallette.common.white\n    color: '#FFFFFF'\n  },\n  itemContainer: {\n    width: '100%',\n    display: 'flex',\n    flexDirection: 'column',\n    alignContent: 'space-around',\n    marginTop: theme.spacing(0.5)\n  }\n}))\n\nexport const TicketCard = ({\n  totalAmount,\n  label,\n  notification,\n  alertNumber,\n  ticketData,\n  component = 'h6'\n}) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      <div>\n        <Card elevation={0} square className={classes.overviewContainer}>\n          <CardContent>\n            <Typography\n              variant='h1'\n              component={component}\n              className={classes.totalNumber}\n            >\n              {totalAmount}\n            </Typography>\n          </CardContent>\n          <div className={classes.label}>\n            <Typography variant='caption'>{label} </Typography>\n          </div>\n          {notification && (\n            <div className={classes.notification}>\n              <NotificationElement alertNumber={alertNumber} />\n            </div>\n          )}\n        </Card>\n      </div>\n\n      <div className={classes.itemContainer}>\n        {ticketData &&\n          ticketData.map((item) => {\n            return (\n              <StatusLineItem\n                label={item.label}\n                amount={item.amount}\n                status={item.status === 'error' && 'error'}\n                icon={item.icon}\n                key={item.id}\n              />\n            )\n          })}\n      </div>\n    </div>\n  )\n}\nTicketCard.propTypes = {\n  /**\n   * Total amount stat\n   */\n  totalAmount: PropTypes.number,\n  /**\n   * Stat label\n   */\n  label: PropTypes.string.isRequired,\n  /**\n   * Type of status to toggle notification\n   */\n  notification: PropTypes.bool,\n  /**\n   * amount of alert items\n   */\n  alertNumber: PropTypes.number,\n  /**\n   * prop for mapped data\n   */\n  ticketData: PropTypes.arrayOf(\n    PropTypes.shape({\n      ticketAmount: PropTypes.string.isRequired,\n      label: PropTypes.number.isRequired,\n      notification: PropTypes.number.isRequired,\n      alertNumber: PropTypes.number,\n      id: PropTypes.number.isRequired,\n      ticketData: PropTypes.arrayOf(\n        PropTypes.shape({\n          label: PropTypes.string.isRequired,\n          amount: PropTypes.number,\n          status: PropTypes.string.isRequired,\n          icon: PropTypes.node\n        })\n      )\n    }).isRequired\n  ).isRequired,\n  /**\n   * Header Tag override. Defaults to H2\n   */\n  component: PropTypes.string\n}\n\nTicketCard.defaultProps = {\n  component: 'h2'\n}\n"],"mappings":";;;;;;;;AAIA,MAAMA,cAAY,YAAY,WAAW;CACvC,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,WAAW;EACX,aAAa,cAAc,OAAO,SAAS,OAAO;EAClD,cAAc;EACf;CACD,QAAQ;EACN,YAAY,MAAM,QAAQ,IAAI;EAC9B,YAAY,MAAM,QAAQ,GAAI;EAC9B,OAAO,OAAO,SAAS,QAAQ;EAChC;CACF,EAAE;AAEH,MAAa,uBAAuB,EAAE,kBAAkB;CACtD,MAAM,UAAUA,aAAW;AAE3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,SAAI,WAAW,QAAQ,UACtB,oCAAC,kBAAW,KAAE,aAAY,IAAc,CACpC,CACF;;AAGV,oBAAoB,YAAY,EAI9B,aAAa,UAAU,OAAO,YAC/B;;;;AC5BD,MAAMC,cAAY,YAAY,WAAW;CACvC,MAAM;EACJ,OAAO;EACP,QAAQ;EACT;CACD,SAAS,EAAE,SAAS,QAAQ;CAC5B,YAAY;EACV,MAAM;EACN,SAAS;EACV;CACD,QAAQ,EACN,aAAa,MAAM,QAAQ,EAAE,EAC9B;CACD,MAAM,EACJ,aAAa,MAAM,QAAQ,EAAE,EAC9B;CACF,EAAE;AAEH,MAAa,kBAAkB,EAC7B,OACA,QACA,QACA,MACA,kBACI;CACJ,MAAM,UAAUA,aAAW;AAE3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,SAAI,WAAW,QAAQ,cACtB,oCAAC,SAAI,WAAW,QAAQ,QAAM,KAAE,MAAK,IAAO,EAC5C,oCAAC,kBAAW,KAAE,OAAM,IAAc,CAC9B,EACN,oCAAC,SAAI,WAAW,QAAQ,UACrB,WAAW,WAAW,oCAAC;EAAW,OAAO;EAAgB;GAAU,EAEnE,WAAW,WAAW,OACnB,EACN,oCAAC;EACC,SAAS;EACT,WAAW,QAAQ;EACnB,MAAM;EACN,cAAW;GACX,CACE,EAEN,oCAAC,cAAU,CACP;;AAGV,eAAe,YAAY;CAIzB,OAAO,UAAU,OAAO;CAIxB,QAAQ,UAAU;CAIlB,QAAQ,UAAU;CAIlB,MAAM,UAAU;CAIhB,aAAa,UAAU;CACxB;;;;ACzED,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EACJ,SAAS,QACV;CACD,mBAAmB;EACjB,OAAO,MAAM,QAAQ,GAAG;EACxB,QAAQ,MAAM,QAAQ,GAAG;EACzB,YAAY;EACZ,aAAa,MAAM,QAAQ,EAAE;EAC7B,UAAU;EACX;CACD,cAAc;EACZ,UAAU;EACV,OAAO;EACP,KAAK;EACN;CACD,aAAa;EACX,WAAW;EAEX,OAAO;EACP,YAAY;EACb;CACD,OAAO;EACL,SAAS;EACT,gBAAgB;EAChB,WAAW;EAEX,OAAO;EACR;CACD,eAAe;EACb,OAAO;EACP,SAAS;EACT,eAAe;EACf,cAAc;EACd,WAAW,MAAM,QAAQ,GAAI;EAC9B;CACF,EAAE;AAEH,MAAa,cAAc,EACzB,aACA,OACA,cACA,aACA,YACA,YAAY,WACR;CACJ,MAAM,UAAU,WAAW;AAE3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,aACC,oCAAC;EAAK,WAAW;EAAG;EAAO,WAAW,QAAQ;IAC5C,oCAAC,mBACC,oCAAC;EACC,SAAQ;EACG;EACX,WAAW,QAAQ;IAElB,YACU,CACD,EACd,oCAAC,SAAI,WAAW,QAAQ,SACtB,oCAAC,cAAW,SAAQ,aAAW,OAAM,IAAc,CAC/C,EACL,gBACC,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC,uBAAiC,cAAe,CAC7C,CAEH,CACH,EAEN,oCAAC,SAAI,WAAW,QAAQ,iBACrB,cACC,WAAW,KAAK,SAAS;AACvB,SACE,oCAAC;GACC,OAAO,KAAK;GACZ,QAAQ,KAAK;GACb,QAAQ,KAAK,WAAW,WAAW;GACnC,MAAM,KAAK;GACX,KAAK,KAAK;IACV;GAEJ,CACA,CACF;;AAGV,WAAW,YAAY;CAIrB,aAAa,UAAU;CAIvB,OAAO,UAAU,OAAO;CAIxB,cAAc,UAAU;CAIxB,aAAa,UAAU;CAIvB,YAAY,UAAU,QACpB,UAAU,MAAM;EACd,cAAc,UAAU,OAAO;EAC/B,OAAO,UAAU,OAAO;EACxB,cAAc,UAAU,OAAO;EAC/B,aAAa,UAAU;EACvB,IAAI,UAAU,OAAO;EACrB,YAAY,UAAU,QACpB,UAAU,MAAM;GACd,OAAO,UAAU,OAAO;GACxB,QAAQ,UAAU;GAClB,QAAQ,UAAU,OAAO;GACzB,MAAM,UAAU;GACjB,CAAC,CACH;EACF,CAAC,CAAC,WACJ,CAAC;CAIF,WAAW,UAAU;CACtB;AAED,WAAW,eAAe,EACxB,WAAW,MACZ"}

package/dist/TimelineCalendar-6oAnmcUI.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { ResourceTimelineCalendar } from "udp-react-stencil-component-library";
+
+//#region src/UI/dataDisplay/calendar/TimelineCalendar.jsx
+const TimelineCalendar = (props) => {
+	const { ...other } = props;
+	return /* @__PURE__ */ React.createElement(ResourceTimelineCalendar, other);
+};
+
+//#endregion
+export { TimelineCalendar as t };
+//# sourceMappingURL=TimelineCalendar-6oAnmcUI.js.map

package/dist/TimelineCalendar-6oAnmcUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineCalendar-6oAnmcUI.js","names":[],"sources":["../src/UI/dataDisplay/calendar/TimelineCalendar.jsx"],"sourcesContent":["import React from 'react';\nimport { ResourceTimelineCalendar } from 'udp-react-stencil-component-library';\n\nexport const TimelineCalendar = (props) => {\n  const { ...other } = props;\n\n  return <ResourceTimelineCalendar {...other} />;\n};\n"],"mappings":";;;;AAGA,MAAa,oBAAoB,UAAU;CACzC,MAAM,EAAE,GAAG,UAAU;AAErB,QAAO,oCAAC,0BAA6B,MAAS"}

package/dist/TokenGroupItem-DLU0AK1S.js

@@ -0,0 +1,36 @@
+import { t as Token } from "./Token-rFpVjQT_.js";
+import React, { Fragment } from "react";
+import { Typography, makeStyles } from "@material-ui/core";
+import { DeveloperToolsIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+
+//#region src/UI/templates/ui/TokenGroupItem.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	label: { color: theme.palette.common.black }
+}));
+/**
+* @param {{label: string, icon: React.ElementType, color: string}} props
+*/
+const TokenGroupItem = ({ label, icon = DeveloperToolsIcon, color }) => {
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(Token, {
+		icon,
+		color,
+		size: "small",
+		variant: "filled",
+		type: "icon"
+	}), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "caption",
+		className: classes.label
+	}, " ", label, " "));
+};
+TokenGroupItem.propTypes = {
+	label: PropTypes.string,
+	icon: PropTypes.bool,
+	color: PropTypes.string
+};
+
+//#endregion
+export { TokenGroupItem as t };
+//# sourceMappingURL=TokenGroupItem-DLU0AK1S.js.map

package/dist/TokenGroupItem-DLU0AK1S.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenGroupItem-DLU0AK1S.js","names":[],"sources":["../src/UI/templates/ui/TokenGroupItem.jsx"],"sourcesContent":["import React, {Fragment} from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport { DeveloperToolsIcon } from '@fluentui/react-icons'\nimport {Token} from '../../components/dataDisplay/Token'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  label: {\n    color: theme.palette.common.black\n  }\n}))\n\n/**\n * @param {{label: string, icon: React.ElementType, color: string}} props\n */\n  export const TokenGroupItem = ({label, icon = DeveloperToolsIcon, color}) => {\n    const classes = useStyles()\n    return (\n      <Fragment >\n        <Token icon={icon} color={color} size=\"small\" variant=\"filled\" type=\"icon\"  />\n        <Typography variant='caption' className={classes.label} > {label} </Typography>  \n      </Fragment>\n    )\n  }\n\n  \n  TokenGroupItem.propTypes = {\n    /**\n     * Label to display in list.\n     */\n    label: PropTypes.string,\n    /**\n     * Icon to display in grouping.\n     */\n    icon: PropTypes.bool,\n     /**\n     * sets color of token background\n     */\n    color: PropTypes.string,\n  \n  }"],"mappings":";;;;;;;AAMA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,OAAO,EACL,OAAO,MAAM,QAAQ,OAAO,OAC7B;CACF,EAAE;;;;AAKD,MAAa,kBAAkB,EAAC,OAAO,OAAO,oBAAoB,YAAW;CAC3E,MAAM,UAAU,WAAW;AAC3B,QACE,oCAAC,gBACC,oCAAC;EAAY;EAAa;EAAO,MAAK;EAAQ,SAAQ;EAAS,MAAK;GAAU,EAC9E,oCAAC;EAAW,SAAQ;EAAU,WAAW,QAAQ;IAAQ,KAAE,OAAM,IAAc,CACtE;;AAKf,eAAe,YAAY;CAIzB,OAAO,UAAU;CAIjB,MAAM,UAAU;CAIhB,OAAO,UAAU"}