udp-react-enterprise-component-library 25.16.2-beta.1 → 25.16.2-beta.3

package/dist/MttYearTag-DG99yJQY.js

@@ -0,0 +1,178 @@
+import React from "react";
+import { Divider, Typography, lighten, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import { AddToIcon, AwayStatusIcon, CheckMarkIcon, CircleStopSolidIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+
+//#region src/componentSystems/multiThreadTimeline/ui/TimelineDateBar.jsx
+const useStyles$2 = makeStyles((theme) => ({ root: {
+	height: theme.spacing(.5),
+	width: "100%"
+} }));
+const TimelineDateBar = ({ month, months = [], showMonth }) => {
+	const theme = useTheme();
+	const classes = useStyles$2();
+	const Bar = ({ color }) => {
+		return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
+			className: classes.root,
+			style: { background: color }
+		}));
+	};
+	let ellipseColor = theme.palette.primary.main;
+	switch (month) {
+		case 1:
+			ellipseColor = /* @__PURE__ */ React.createElement(Bar, { color: "#A5D7E1" });
+			break;
+		case 2:
+			ellipseColor = /* @__PURE__ */ React.createElement(Bar, { color: "#FD8A8E" });
+			break;
+		case 3:
+			ellipseColor = /* @__PURE__ */ React.createElement(Bar, { color: "#ee5396" });
+			break;
+		case 4:
+			ellipseColor = /* @__PURE__ */ React.createElement(Bar, { color: "#3EA77E" });
+			break;
+		case 5:
+			ellipseColor = /* @__PURE__ */ React.createElement(Bar, { color: "#BDDBBF" });
+			break;
+		case 6:
+			ellipseColor = /* @__PURE__ */ React.createElement(Bar, { color: "#be95ff" });
+			break;
+		case 7:
+			ellipseColor = /* @__PURE__ */ React.createElement(Bar, { color: "#33C9EF" });
+			break;
+		case 8:
+			ellipseColor = /* @__PURE__ */ React.createElement(Bar, { color: "#F25022" });
+			break;
+		case 9:
+			ellipseColor = /* @__PURE__ */ React.createElement(Bar, { color: "#7FBA00" });
+			break;
+		case 10:
+			ellipseColor = /* @__PURE__ */ React.createElement(Bar, { color: "#FFB900" });
+			break;
+		case 11:
+			ellipseColor = /* @__PURE__ */ React.createElement(Bar, { color: "#938F9D" });
+			break;
+		case 12:
+			ellipseColor = /* @__PURE__ */ React.createElement(Bar, { color: "#CA525D" });
+			break;
+		default:
+			ellipseColor = /* @__PURE__ */ React.createElement(Bar, { color: "#6fdc8c" });
+			break;
+	}
+	return ellipseColor;
+};
+TimelineDateBar.propTypes = {
+	month: PropTypes.number.isRequired,
+	months: PropTypes.array,
+	showMonth: PropTypes.bool
+};
+
+//#endregion
+//#region src/componentSystems/multiThreadTimeline/ui/TimelineStatus.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {},
+	wrapper: {
+		borderRadius: 25,
+		display: "flex",
+		paddingRight: theme.spacing(1)
+	},
+	iconWrapper: {
+		background: theme.palette.success.main,
+		color: theme.palette.common.white,
+		paddingLeft: theme.spacing(.5),
+		paddingRight: theme.spacing(.5),
+		paddingBottom: theme.spacing(.25),
+		borderRadius: 25,
+		marginRight: theme.spacing(.5)
+	},
+	active: { background: lighten(theme.palette.info.light, .7) },
+	pending: { background: lighten(theme.palette.warning.light, .7) },
+	posted: { background: lighten(theme.palette.success.light, .7) },
+	complete: { background: lighten(theme.palette.success.light, .4) },
+	pendingAvatar: { background: theme.palette.warning.main },
+	activeAvatar: { background: theme.palette.info.main },
+	postedAvatar: { background: lighten(theme.palette.success.light, .2) },
+	completeAvatar: { background: theme.palette.success.main }
+}), { name: "TimelineStatus" });
+const TimelineStatus = (props) => {
+	let type = "";
+	const { status } = props;
+	const classes = useStyles$1(props);
+	const StatusWrapper = ({ children, className, status: status$1, icon }) => {
+		return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.wrapper, className) }, /* @__PURE__ */ React.createElement("div", { className: clsx(classes.iconWrapper, status$1) }, icon), /* @__PURE__ */ React.createElement("div", { style: { marginTop: -1 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " ", children, " ")));
+	};
+	switch (status) {
+		case 1:
+			type = /* @__PURE__ */ React.createElement(StatusWrapper, {
+				icon: /* @__PURE__ */ React.createElement(AddToIcon, null),
+				className: classes.active,
+				status: classes.activeAvatar
+			}, "Active");
+			break;
+		case 2:
+			type = /* @__PURE__ */ React.createElement(StatusWrapper, {
+				icon: /* @__PURE__ */ React.createElement(CircleStopSolidIcon, null),
+				className: classes.posted,
+				status: classes.postedAvatar
+			}, "Posted");
+			break;
+		case 3:
+			type = /* @__PURE__ */ React.createElement(StatusWrapper, {
+				status: classes.pendingAvatar,
+				className: classes.pending,
+				icon: /* @__PURE__ */ React.createElement(AwayStatusIcon, null)
+			}, "Pending");
+			break;
+		case 4:
+			type = /* @__PURE__ */ React.createElement(StatusWrapper, {
+				icon: /* @__PURE__ */ React.createElement(CheckMarkIcon, null),
+				className: classes.complete,
+				status: classes.completeAvatar
+			}, "Complete");
+			break;
+		default: type = /* @__PURE__ */ React.createElement("div", null, status);
+	}
+	return type;
+};
+TimelineStatus.propTypes = { status: PropTypes.number };
+
+//#endregion
+//#region src/componentSystems/multiThreadTimeline/ui/MttYearTag.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	yearTag: {
+		color: theme.palette.common.white,
+		padding: theme.spacing(1.5),
+		paddingTop: theme.spacing(.5),
+		paddingBottom: theme.spacing(.5),
+		width: 20,
+		height: 68,
+		borderRadius: 24
+	},
+	yearLabel: { transform: "rotate(90deg)" },
+	background: (props) => ({ background: props.year ? "#C1A1B8" : "lightgrey" }),
+	backgroundToday: { background: "#795C76" }
+}));
+const MttYearTag = (props) => {
+	const { children, year = false, today } = props;
+	const classes = useStyles(props);
+	return /* @__PURE__ */ React.createElement("div", null, !today && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: clsx(classes.yearTag, classes.background) }, /* @__PURE__ */ React.createElement("div", { className: classes.yearLabel }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, children))), /* @__PURE__ */ React.createElement("div", { style: {
+		height: year ? 120 : 20,
+		display: "flex",
+		justifyContent: "center"
+	} }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" }))), today && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: clsx(classes.yearTag, classes.backgroundToday) }, /* @__PURE__ */ React.createElement("div", { className: classes.yearLabel }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, children))), /* @__PURE__ */ React.createElement("div", { style: {
+		height: 120,
+		display: "flex",
+		justifyContent: "center"
+	} }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" }))));
+};
+MttYearTag.propTypes = {
+	children: PropTypes.node.isRequired,
+	year: PropTypes.bool,
+	today: PropTypes.bool
+};
+
+//#endregion
+export { TimelineStatus as n, TimelineDateBar as r, MttYearTag as t };
+//# sourceMappingURL=MttYearTag-DG99yJQY.js.map

package/dist/MttYearTag-DG99yJQY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MttYearTag-DG99yJQY.js","names":["useStyles","useStyles","status"],"sources":["../src/componentSystems/multiThreadTimeline/ui/TimelineDateBar.jsx","../src/componentSystems/multiThreadTimeline/ui/TimelineStatus.jsx","../src/componentSystems/multiThreadTimeline/ui/MttYearTag.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, useTheme } from '@material-ui/core';\nimport PropTypes from 'prop-types'; // import PropTypes\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    height: theme.spacing(0.5),\n    width: '100%'\n  }\n}));\n\nexport const TimelineDateBar = ({ month, months = [], showMonth }) => {\n  const theme = useTheme();\n  const classes = useStyles();\n\n  const Bar = ({ color }) => {\n    return (\n      <div>\n        <div className={classes.root} style={{ background: color }} />\n      </div>\n    );\n  };\n\n  let ellipseColor = theme.palette.primary.main;\n  switch (month) {\n    case 1:\n      ellipseColor = <Bar color='#A5D7E1' />;\n      break;\n    case 2:\n      ellipseColor = <Bar color='#FD8A8E' />;\n      break;\n    case 3:\n      ellipseColor = <Bar color='#ee5396' />;\n      break;\n    case 4:\n      ellipseColor = <Bar color='#3EA77E' />;\n      break;\n    case 5:\n      ellipseColor = <Bar color='#BDDBBF' />;\n      break;\n    case 6:\n      ellipseColor = <Bar color='#be95ff' />;\n      break;\n    case 7:\n      ellipseColor = <Bar color='#33C9EF' />;\n      break;\n    case 8:\n      ellipseColor = <Bar color='#F25022' />;\n      break;\n    case 9:\n      ellipseColor = <Bar color='#7FBA00' />;\n      break;\n    case 10:\n      ellipseColor = <Bar color='#FFB900' />;\n      break;\n    case 11:\n      ellipseColor = <Bar color='#938F9D' />;\n      break;\n    case 12:\n      ellipseColor = <Bar color='#CA525D' />;\n      break;\n    default:\n      ellipseColor = <Bar color='#6fdc8c' />;\n      break;\n  }\n  return ellipseColor;\n};\n\n// Define propTypes\nTimelineDateBar.propTypes = {\n  month: PropTypes.number.isRequired,\n  months: PropTypes.array,\n  showMonth: PropTypes.bool\n};\n","import React from 'react';\nimport { makeStyles, Typography, lighten } from '@material-ui/core';\nimport clsx from 'clsx';\nimport {\n  CheckMarkIcon,\n  AwayStatusIcon,\n  AddToIcon,\n  CircleStopSolidIcon\n} from '@fluentui/react-icons';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    root: {},\n    wrapper: {\n      borderRadius: 25,\n      display: 'flex',\n      //paddingLeft: theme.spacing(1),\n      paddingRight: theme.spacing(1)\n    },\n    iconWrapper: {\n      background: theme.palette.success.main,\n      color: theme.palette.common.white,\n      paddingLeft: theme.spacing(0.5),\n      paddingRight: theme.spacing(0.5),\n      paddingBottom: theme.spacing(0.25),\n      borderRadius: 25,\n      marginRight: theme.spacing(0.5)\n    },\n    active: {\n      background: lighten(theme.palette.info.light, 0.7)\n    },\n    pending: {\n      background: lighten(theme.palette.warning.light, 0.7)\n    },\n    posted: {\n      background: lighten(theme.palette.success.light, 0.7)\n    },\n    complete: {\n      background: lighten(theme.palette.success.light, 0.4)\n    },\n    pendingAvatar: {\n      background: theme.palette.warning.main\n    },\n    activeAvatar: {\n      background: theme.palette.info.main\n    },\n    postedAvatar: {\n      background: lighten(theme.palette.success.light, 0.2)\n    },\n    completeAvatar: {\n      background: theme.palette.success.main\n    }\n  }),\n  { name: 'TimelineStatus' }\n);\n\nexport const TimelineStatus = (props) => {\n  let type = '';\n  const { status } = props;\n  const classes = useStyles(props);\n\n  const StatusWrapper = ({ children, className, status, icon }) => {\n    return (\n      <div className={clsx(classes.wrapper, className)}>\n        <div className={clsx(classes.iconWrapper, status)}>{icon}</div>\n        <div style={{ marginTop: -1 }}>\n          <Typography variant='caption'> {children} </Typography>\n        </div>\n      </div>\n    );\n  };\n\n  switch (status) {\n    case 1:\n      type = (\n        <StatusWrapper\n          icon={<AddToIcon />}\n          className={classes.active}\n          status={classes.activeAvatar}\n        >\n          Active\n        </StatusWrapper>\n      );\n      break;\n    case 2:\n      type = (\n        <StatusWrapper\n          icon={<CircleStopSolidIcon />}\n          className={classes.posted}\n          status={classes.postedAvatar}\n        >\n          Posted\n        </StatusWrapper>\n      );\n      break;\n    case 3:\n      type = (\n        <StatusWrapper\n          status={classes.pendingAvatar}\n          className={classes.pending}\n          icon={<AwayStatusIcon />}\n        >\n          Pending\n        </StatusWrapper>\n      );\n      break;\n    case 4:\n      type = (\n        <StatusWrapper\n          icon={<CheckMarkIcon />}\n          className={classes.complete}\n          status={classes.completeAvatar}\n        >\n          Complete\n        </StatusWrapper>\n      );\n      break;\n\n    default:\n      type = <div>{status}</div>;\n  }\n\n  return type;\n};\n\nTimelineStatus.propTypes = {\n  status: PropTypes.number\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles, Typography, Divider } from '@material-ui/core';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  yearTag: {\n    color: theme.palette.common.white,\n    padding: theme.spacing(1.5),\n    paddingTop: theme.spacing(0.5),\n    paddingBottom: theme.spacing(0.5),\n    width: 20,\n    height: 68,\n    borderRadius: 24\n  },\n  yearLabel: {\n    transform: 'rotate(90deg)'\n  },\n  background: (props) => ({\n    background: props.year ? '#C1A1B8' : 'lightgrey'\n  }),\n  backgroundToday: {\n    background: '#795C76'\n  }\n}));\n\nexport const MttYearTag = (props) => {\n  const { children, year = false, today } = props;\n  const classes = useStyles(props);\n\n  return (\n    <div>\n      {!today && (\n        <div>\n          <div className={clsx(classes.yearTag, classes.background)}>\n            <div className={classes.yearLabel}>\n              <Typography variant='subtitle2'>{children}</Typography>\n            </div>\n          </div>\n          <div\n            style={{\n              height: year ? 120 : 20,\n              display: 'flex',\n              justifyContent: 'center'\n            }}\n          >\n            <Divider orientation='vertical' />\n          </div>\n        </div>\n      )}\n\n      {today && (\n        <div>\n          <div className={clsx(classes.yearTag, classes.backgroundToday)}>\n            <div className={classes.yearLabel}>\n              <Typography variant='subtitle2'>{children}</Typography>\n            </div>\n          </div>\n          <div\n            style={{\n              height: 120,\n              display: 'flex',\n              justifyContent: 'center'\n            }}\n          >\n            <Divider orientation='vertical' />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nMttYearTag.propTypes = {\n  children: PropTypes.node.isRequired,\n  year: PropTypes.bool,\n  today: PropTypes.bool\n};\n"],"mappings":";;;;;;;AAIA,MAAMA,cAAY,YAAY,WAAW,EACvC,MAAM;CACJ,QAAQ,MAAM,QAAQ,GAAI;CAC1B,OAAO;CACR,EACF,EAAE;AAEH,MAAa,mBAAmB,EAAE,OAAO,SAAS,EAAE,EAAE,gBAAgB;CACpE,MAAM,QAAQ,UAAU;CACxB,MAAM,UAAUA,aAAW;CAE3B,MAAM,OAAO,EAAE,YAAY;AACzB,SACE,oCAAC,aACC,oCAAC;GAAI,WAAW,QAAQ;GAAM,OAAO,EAAE,YAAY,OAAO;IAAI,CAC1D;;CAIV,IAAI,eAAe,MAAM,QAAQ,QAAQ;AACzC,SAAQ,OAAR;EACE,KAAK;AACH,kBAAe,oCAAC,OAAI,OAAM,YAAY;AACtC;EACF,KAAK;AACH,kBAAe,oCAAC,OAAI,OAAM,YAAY;AACtC;EACF,KAAK;AACH,kBAAe,oCAAC,OAAI,OAAM,YAAY;AACtC;EACF,KAAK;AACH,kBAAe,oCAAC,OAAI,OAAM,YAAY;AACtC;EACF,KAAK;AACH,kBAAe,oCAAC,OAAI,OAAM,YAAY;AACtC;EACF,KAAK;AACH,kBAAe,oCAAC,OAAI,OAAM,YAAY;AACtC;EACF,KAAK;AACH,kBAAe,oCAAC,OAAI,OAAM,YAAY;AACtC;EACF,KAAK;AACH,kBAAe,oCAAC,OAAI,OAAM,YAAY;AACtC;EACF,KAAK;AACH,kBAAe,oCAAC,OAAI,OAAM,YAAY;AACtC;EACF,KAAK;AACH,kBAAe,oCAAC,OAAI,OAAM,YAAY;AACtC;EACF,KAAK;AACH,kBAAe,oCAAC,OAAI,OAAM,YAAY;AACtC;EACF,KAAK;AACH,kBAAe,oCAAC,OAAI,OAAM,YAAY;AACtC;EACF;AACE,kBAAe,oCAAC,OAAI,OAAM,YAAY;AACtC;;AAEJ,QAAO;;AAIT,gBAAgB,YAAY;CAC1B,OAAO,UAAU,OAAO;CACxB,QAAQ,UAAU;CAClB,WAAW,UAAU;CACtB;;;;AC9DD,MAAMC,cAAY,YACf,WAAW;CACV,MAAM,EAAE;CACR,SAAS;EACP,cAAc;EACd,SAAS;EAET,cAAc,MAAM,QAAQ,EAAE;EAC/B;CACD,aAAa;EACX,YAAY,MAAM,QAAQ,QAAQ;EAClC,OAAO,MAAM,QAAQ,OAAO;EAC5B,aAAa,MAAM,QAAQ,GAAI;EAC/B,cAAc,MAAM,QAAQ,GAAI;EAChC,eAAe,MAAM,QAAQ,IAAK;EAClC,cAAc;EACd,aAAa,MAAM,QAAQ,GAAI;EAChC;CACD,QAAQ,EACN,YAAY,QAAQ,MAAM,QAAQ,KAAK,OAAO,GAAI,EACnD;CACD,SAAS,EACP,YAAY,QAAQ,MAAM,QAAQ,QAAQ,OAAO,GAAI,EACtD;CACD,QAAQ,EACN,YAAY,QAAQ,MAAM,QAAQ,QAAQ,OAAO,GAAI,EACtD;CACD,UAAU,EACR,YAAY,QAAQ,MAAM,QAAQ,QAAQ,OAAO,GAAI,EACtD;CACD,eAAe,EACb,YAAY,MAAM,QAAQ,QAAQ,MACnC;CACD,cAAc,EACZ,YAAY,MAAM,QAAQ,KAAK,MAChC;CACD,cAAc,EACZ,YAAY,QAAQ,MAAM,QAAQ,QAAQ,OAAO,GAAI,EACtD;CACD,gBAAgB,EACd,YAAY,MAAM,QAAQ,QAAQ,MACnC;CACF,GACD,EAAE,MAAM,kBAAkB,CAC3B;AAED,MAAa,kBAAkB,UAAU;CACvC,IAAI,OAAO;CACX,MAAM,EAAE,WAAW;CACnB,MAAM,UAAUA,YAAU,MAAM;CAEhC,MAAM,iBAAiB,EAAE,UAAU,WAAW,kBAAQ,WAAW;AAC/D,SACE,oCAAC,SAAI,WAAW,KAAK,QAAQ,SAAS,UAAU,IAC9C,oCAAC,SAAI,WAAW,KAAK,QAAQ,aAAaC,SAAO,IAAG,KAAW,EAC/D,oCAAC,SAAI,OAAO,EAAE,WAAW,IAAI,IAC3B,oCAAC,cAAW,SAAQ,aAAU,KAAE,UAAS,IAAc,CACnD,CACF;;AAIV,SAAQ,QAAR;EACE,KAAK;AACH,UACE,oCAAC;IACC,MAAM,oCAAC,gBAAY;IACnB,WAAW,QAAQ;IACnB,QAAQ,QAAQ;MACjB,SAEe;AAElB;EACF,KAAK;AACH,UACE,oCAAC;IACC,MAAM,oCAAC,0BAAsB;IAC7B,WAAW,QAAQ;IACnB,QAAQ,QAAQ;MACjB,SAEe;AAElB;EACF,KAAK;AACH,UACE,oCAAC;IACC,QAAQ,QAAQ;IAChB,WAAW,QAAQ;IACnB,MAAM,oCAAC,qBAAiB;MACzB,UAEe;AAElB;EACF,KAAK;AACH,UACE,oCAAC;IACC,MAAM,oCAAC,oBAAgB;IACvB,WAAW,QAAQ;IACnB,QAAQ,QAAQ;MACjB,WAEe;AAElB;EAEF,QACE,QAAO,oCAAC,aAAK,OAAa;;AAG9B,QAAO;;AAGT,eAAe,YAAY,EACzB,QAAQ,UAAU,QACnB;;;;AC3HD,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,SAAS;EACP,OAAO,MAAM,QAAQ,OAAO;EAC5B,SAAS,MAAM,QAAQ,IAAI;EAC3B,YAAY,MAAM,QAAQ,GAAI;EAC9B,eAAe,MAAM,QAAQ,GAAI;EACjC,OAAO;EACP,QAAQ;EACR,cAAc;EACf;CACD,WAAW,EACT,WAAW,iBACZ;CACD,aAAa,WAAW,EACtB,YAAY,MAAM,OAAO,YAAY,aACtC;CACD,iBAAiB,EACf,YAAY,WACb;CACF,EAAE;AAEH,MAAa,cAAc,UAAU;CACnC,MAAM,EAAE,UAAU,OAAO,OAAO,UAAU;CAC1C,MAAM,UAAU,UAAU,MAAM;AAEhC,QACE,oCAAC,aACE,CAAC,SACA,oCAAC,aACC,oCAAC,SAAI,WAAW,KAAK,QAAQ,SAAS,QAAQ,WAAW,IACvD,oCAAC,SAAI,WAAW,QAAQ,aACtB,oCAAC,cAAW,SAAQ,eAAa,SAAsB,CACnD,CACF,EACN,oCAAC,SACC,OAAO;EACL,QAAQ,OAAO,MAAM;EACrB,SAAS;EACT,gBAAgB;EACjB,IAED,oCAAC,WAAQ,aAAY,aAAa,CAC9B,CACF,EAGP,SACC,oCAAC,aACC,oCAAC,SAAI,WAAW,KAAK,QAAQ,SAAS,QAAQ,gBAAgB,IAC5D,oCAAC,SAAI,WAAW,QAAQ,aACtB,oCAAC,cAAW,SAAQ,eAAa,SAAsB,CACnD,CACF,EACN,oCAAC,SACC,OAAO;EACL,QAAQ;EACR,SAAS;EACT,gBAAgB;EACjB,IAED,oCAAC,WAAQ,aAAY,aAAa,CAC9B,CACF,CAEJ;;AAIV,WAAW,YAAY;CACrB,UAAU,UAAU,KAAK;CACzB,MAAM,UAAU;CAChB,OAAO,UAAU;CAClB"}

package/dist/MyExportsPage-DoCWrkNv.js

@@ -0,0 +1,65 @@
+import "./AgTable-qA_zuj8l.js";
+import "./FormButtons-3-Do6TqZ.js";
+import "./Field-Cpjv208h.js";
+import "./form-Cenkgcue.js";
+import "./FluentButton-3xMbN_Vs.js";
+import "./CrudBrowserUtilities-BXQ52z0n.js";
+import "./apiHelpers-CaBH4Wqe.js";
+import "./pageEnums-DtccKpw_.js";
+import "./UnitySessionStorage-DFfZhXMh.js";
+import "./axiosInterceptors-KQjcnNLO.js";
+import "./useUser--tP6DN4i.js";
+import "./useAxiosMutate-C_CLzTKW.js";
+import "./StringUtilities-PL6_BoI4.js";
+import "./FluentIcon-iRSVzrph.js";
+import "./FluentIconButton-AN9tZKVl.js";
+import "./entityUtilities-DOZQpeXw.js";
+import "./unitySystemEnums-C3qeqk7V.js";
+import "./UnityFluentIcon-B8B1Sov8.js";
+import "./ActionLoadingDispatchContext-DgevJS7v.js";
+import "./actionUtils-Dyk4rqeA.js";
+import "./inquiryStore-Kq3nlMze.js";
+import "./catalogStore-CxNrmjOl.js";
+import "./shellStore-B_6P0cep.js";
+import "./useActions-V6oRdjcy.js";
+import "./PrimaryActionButton-Dp7s1CMW.js";
+import "./colors-DvKUCcrv.js";
+import "./colorConverter-82j_Nyao.js";
+import "./Typography-CZuoQGNi.js";
+import "./SearchUtilities-COTnyxTJ.js";
+import "./LayoutUnit-DBF2yb1h.js";
+import "./StandardTitle-C0d5197m.js";
+import "./SideSheetHeader-CPq_nmJd.js";
+import "./SideSheet-t6uVFYIJ.js";
+import "./useAxiosGet-5JQU4EkT.js";
+import "./useId-BzmZUUnN.js";
+import "./StatusChip-4NHp2t6B.js";
+import "./methodUtils-DwkBQ6fj.js";
+import "./tenantContext-CMEUzypH.js";
+import "./useTenant-aZVmdg7S.js";
+import "./EnvironmentRibbon-CRhI4qRC.js";
+import "./AmbientTextField-RjyecRyE.js";
+import "./Ellipse-BTNKEUgW.js";
+import "./GridGroupingSidebar-C4Bvi13s.js";
+import "./AmbientTokenButton-DQNVUPwr.js";
+import "./Token-BZVY3HNd.js";
+import "./AmbientToggleButton-DRQxx7qu.js";
+import "./isValueSelected-CZWKLr9c.js";
+import "./AmbientToggleButtonGroupDefault-D7-wAXFU.js";
+import "./AmbientGridTemplate-Cbl9GXcd.js";
+import "./AmbientChipButton-CcCk0Eaj.js";
+import "./FluentDialog-CXnECDfH.js";
+import "./GridFunctions-BpMkkPTk.js";
+import "./useDynamicListCalculation-DRMw8WEp.js";
+import "./DynamicContainerWithMenu-u2hlPBNw.js";
+import "./IconButtonWithToolTip-C8Gr_PHd.js";
+import "./HintPanel-C6R_3C7z.js";
+import "./SearchOperator-D9838PIe.js";
+import "./TableContainer-CJFW0Teg.js";
+import "./SearchServiceDatasource-DofS4I45.js";
+import "./AmbientAutoComplete-J8PArVAs.js";
+import "./AmbientAlert-gju6JVxW.js";
+import "./EmptyStateDisplay-C12rU3yx.js";
+import { n as MyExportsPage_default, t as MyExportsPage } from "./MyExportsPage-lei8IuBA.js";
+
+export { MyExportsPage, MyExportsPage_default as default };

package/dist/MyExportsPage-lei8IuBA.js

@@ -0,0 +1,229 @@
+import { i as useHandleAxiosSnackbar } from "./apiHelpers-CaBH4Wqe.js";
+import { t as useUser } from "./useUser--tP6DN4i.js";
+import { r as getSanitizedName } from "./entityUtilities-DOZQpeXw.js";
+import { t as useAxiosGet } from "./useAxiosGet-5JQU4EkT.js";
+import { t as StatusChip } from "./StatusChip-4NHp2t6B.js";
+import { i as executeQueryWithParameters } from "./methodUtils-DwkBQ6fj.js";
+import { r as ActionsRenderer } from "./AmbientGridTemplate-Cbl9GXcd.js";
+import { t as FluentDialog } from "./FluentDialog-CXnECDfH.js";
+import { t as TableContainer } from "./TableContainer-CJFW0Teg.js";
+import { t as AmbientAutoComplete } from "./AmbientAutoComplete-J8PArVAs.js";
+import { t as AmbientAlert } from "./AmbientAlert-gju6JVxW.js";
+import { t as EmptyStateDisplay } from "./EmptyStateDisplay-C12rU3yx.js";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { ConfigService } from "udp-react-stencil-component-library";
+import { DownloadIcon, ErrorIcon, StatusCircleCheckmarkIcon } from "@fluentui/react-icons";
+
+//#region src/UI/templates/ui/renderers/StatusCellRenderer.jsx
+const StatusCellRenderer = (props) => {
+	const { value, getStatus, getLabel } = props;
+	const formattedLabel = (value$1) => {
+		return value$1?.replace(/([a-z])([A-Z])/g, "$1 $2")?.replace(/\b\w/g, (char) => char.toUpperCase());
+	};
+	return /* @__PURE__ */ React.createElement(StatusChip, {
+		status: getStatus(value),
+		label: getLabel ? formattedLabel(getLabel(value)) : formattedLabel(value)
+	});
+};
+
+//#endregion
+//#region src/udp/export/MyExportsPage.jsx
+const MyExportsPage = (props) => {
+	const { productId } = props;
+	const user = useUser();
+	const [product, setProduct] = useState();
+	const [downloadLinkLoading, setDownloadLinkLoading] = useState(false);
+	const [fileResultData, setFileResultData] = useState();
+	const [downloadOpen, setDownloadOpen] = useState(false);
+	const [noDownloadMethod, setNoDownloadMethod] = useState(false);
+	const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
+	const [{ data: products, loading: productsLoading }] = useAxiosGet(ConfigService.tenantV2ApiUrl, `tenant/products?tenantId=${user?.currentTenantId}&isSubscribable=${!user?.can?.CAN_MANAGE_CATALOGS_FOR_UNSUBSCRIBABLE_PRODUCTS}`, {}, !user);
+	const [{ data: apiCatalog, loading: catalogLoading, error: catalogError }] = useAxiosGet(ConfigService.integrationV1ApiUrl, `tenantProductApiCatalogBase/tenant/${user?.currentTenantId}/product/${productId ? productId : product?.productId}`, {}, !(product || productId), false);
+	const [{ data: udpJobEntity, loading: jobEntityLoading }] = useAxiosGet(ConfigService.integrationV1ApiUrl, `apicatalog/${apiCatalog?.apiCatalogId}/promotedMethodEntities/udpJob/product/${apiCatalog?.productId}?compareSanitizedName=true`, {}, !apiCatalog?.productId || !apiCatalog?.apiCatalogId, false);
+	const refetchfileResultData = useCallback(async (selectedRecord) => {
+		if (udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId) {
+			setDownloadLinkLoading(true);
+			await executeQueryWithParameters({ data: { JobId: selectedRecord?.id } }, udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId).then((res) => {
+				setFileResultData(res.data);
+			}).catch((err) => {});
+			setDownloadLinkLoading(false);
+		} else setNoDownloadMethod(true);
+	}, [udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId]);
+	const handleSelectRecord = useCallback((data) => {
+		refetchfileResultData(data);
+		setDownloadOpen(true);
+	}, [refetchfileResultData]);
+	const getOptionLabel = (val) => {
+		return val?.name;
+	};
+	const handleProductChange = useCallback((val) => {
+		setProduct(val);
+	}, []);
+	const handleFileDownload = useCallback(() => {
+		if (fileResultData?.link) {
+			const link = document.createElement("a");
+			link.href = fileResultData?.link;
+			link.download = "";
+			document.body.appendChild(link);
+			link.click();
+			document.body.removeChild(link);
+			setDownloadOpen(false);
+			handleSuccessSnackbar("File successfully downloaded");
+		}
+	}, [fileResultData?.link, handleSuccessSnackbar]);
+	const getJobStatus = (value) => {
+		if (value === 1) return null;
+		else if (value === 2) return "info";
+		else if (value === 3) return "success";
+		else if (value === 4) return "error";
+	};
+	const getJobLabel = (value) => {
+		if (value === 1) return "Pending";
+		else if (value === 2) return "Running";
+		else if (value === 3) return "Completed";
+		else if (value === 4) return "Failed";
+	};
+	useEffect(() => {
+		if (catalogError) handleErrorSnackbar("", "Error fetching catalog for the selected product");
+	}, [catalogError, handleErrorSnackbar]);
+	const filterElements = useMemo(() => {
+		return [{
+			searchField: "jobTypeId",
+			searchOperator: "=",
+			searchValue: 2
+		}];
+	}, []);
+	const actionList = useMemo(() => {
+		return [{
+			id: 1,
+			title: "Download",
+			icon: DownloadIcon,
+			onClick: handleSelectRecord,
+			disabled: false,
+			checkDisabled: (value) => value?.statusId !== 3
+		}];
+	}, [handleSelectRecord]);
+	const columnDefs = useMemo(() => [
+		{
+			headerName: "Id",
+			sortable: true,
+			field: "id",
+			suppressMenu: true
+		},
+		{
+			headerName: "Name",
+			sortable: false,
+			field: "name",
+			minWidth: 140,
+			suppressMenu: true,
+			valueFormatter: (data) => getSanitizedName(data.data.name)
+		},
+		{
+			headerName: "Date",
+			sortable: false,
+			valueFormatter: (data) => new Date(data.data.startTime).toLocaleString(),
+			minWidth: 130,
+			suppressMenu: true
+		},
+		{
+			headerName: "Status",
+			field: "statusId",
+			wrapText: true,
+			autoHeight: true,
+			sortable: false,
+			cellRenderer: "statusCellRenderer",
+			cellRendererParams: {
+				getStatus: getJobStatus,
+				getLabel: getJobLabel
+			},
+			minWidth: 130,
+			maxWidth: 130,
+			suppressMenu: true
+		},
+		{
+			headerName: "Actions",
+			filter: false,
+			pinned: "right",
+			cellRenderer: "actionsRenderer",
+			width: 120,
+			maxWidth: 120,
+			cellRendererParams: {
+				actionList,
+				value: (data) => data
+			},
+			suppressMenu: true,
+			sortable: false,
+			cellStyle: {
+				display: "flex",
+				alignItems: "center"
+			}
+		}
+	], [actionList]);
+	return /* @__PURE__ */ React.createElement("div", null, udpJobEntity && !udpJobEntity?.unityBaseSearchMethod?.apiMethodId && /* @__PURE__ */ React.createElement(AmbientAlert, {
+		alertMessage: "UdpJob's search method must be promoted",
+		showAlert: true,
+		alertSeverity: "error"
+	}), !productId && /* @__PURE__ */ React.createElement("div", { style: { margin: "0px 5px 5px 5px" } }, /* @__PURE__ */ React.createElement(AmbientAutoComplete, {
+		isMultiple: false,
+		id: "product",
+		name: "product",
+		label: "Product",
+		onChange: handleProductChange,
+		options: products,
+		size: "small",
+		getOptionLabelFunction: getOptionLabel,
+		value: product,
+		required: true
+	})), /* @__PURE__ */ React.createElement(TableContainer, {
+		loading: productsLoading || catalogLoading || jobEntityLoading,
+		title: `Exports`,
+		isServerSide: true,
+		eagerLoad: false,
+		logicalSearchOperator: 2,
+		promotedEntity: udpJobEntity,
+		filterElements,
+		actionList,
+		customColumnDefs: columnDefs,
+		frameworkComponents: {
+			statusCellRenderer: StatusCellRenderer,
+			actionsRenderer: ActionsRenderer
+		},
+		hideSearchBar: true,
+		hiddenActionButtons: [
+			"saveView",
+			"views",
+			"insights",
+			"importExport",
+			"group",
+			"filter",
+			"columns",
+			"clearFilters",
+			"fitGrid",
+			"expandGrid"
+		],
+		height: "calc(100vh - 167px)",
+		dynamicSizing: true
+	}), /* @__PURE__ */ React.createElement(FluentDialog, {
+		actionOne: handleFileDownload,
+		actionTwo: () => setDownloadOpen(false),
+		labelOne: "Download",
+		labelTwo: "Cancel",
+		open: downloadOpen,
+		handleClose: () => setDownloadOpen(false),
+		disableOne: noDownloadMethod || downloadLinkLoading,
+		progress: downloadLinkLoading,
+		fullWidth: true
+	}, noDownloadMethod ? /* @__PURE__ */ React.createElement(AmbientAlert, {
+		alertMessage: "UdpJob's get file result method must be promoted",
+		showAlert: true,
+		alertSeverity: "error"
+	}) : downloadLinkLoading ? /* @__PURE__ */ React.createElement(EmptyStateDisplay, { primaryText: "Fetching download link..." }) : /* @__PURE__ */ React.createElement(EmptyStateDisplay, {
+		icon: noDownloadMethod ? ErrorIcon : StatusCircleCheckmarkIcon,
+		primaryText: !noDownloadMethod && "File is ready to download!"
+	})));
+};
+var MyExportsPage_default = MyExportsPage;
+
+//#endregion
+export { MyExportsPage_default as n, StatusCellRenderer as r, MyExportsPage as t };
+//# sourceMappingURL=MyExportsPage-lei8IuBA.js.map

package/dist/MyExportsPage-lei8IuBA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MyExportsPage-lei8IuBA.js","names":["value"],"sources":["../src/UI/templates/ui/renderers/StatusCellRenderer.jsx","../src/udp/export/MyExportsPage.jsx"],"sourcesContent":["import React from 'react';\nimport { StatusChip } from '../../../dataDisplay/StatusChip';\n\nexport const StatusCellRenderer = props => {\n  const { value, getStatus, getLabel } = props;\n  const formattedLabel = value => {\n    return value\n      ?.replace(/([a-z])([A-Z])/g, '$1 $2')\n      ?.replace(/\\b\\w/g, char => char.toUpperCase());\n  };\n  return (\n    <StatusChip\n      status={getStatus(value)}\n      label={getLabel ? formattedLabel(getLabel(value)) : formattedLabel(value)}\n    />\n  );\n};\n","import React, { useMemo, useState, useCallback, useEffect } from 'react';\nimport {\n  StatusCircleCheckmarkIcon,\n  ErrorIcon,\n  DownloadIcon\n} from '@fluentui/react-icons';\nimport { getSanitizedName } from '../../utilities/entities/entityUtilities';\nimport { FluentDialog } from '../../UI/feedback/FluentDialog';\nimport { EmptyStateDisplay } from '../../UI/dataDisplay/EmptyStateDisplay';\nimport { useAxiosGet } from '../../utilities/useAxiosGet';\nimport { ActionsRenderer } from '../../UI/templates/ui/renderers/ActionsRenderer';\nimport { AmbientAlert } from '../../UI/feedback/AmbientAlert';\nimport { TableContainer } from '../../maintenanceEngine/tableBrowser/TableContainer';\nimport { StatusCellRenderer } from '../../UI/templates/ui/renderers/StatusCellRenderer';\nimport { useUser } from '../../utilities/auth/useUser';\nimport { AmbientAutoComplete } from '../../UI/inputs/textField/AmbientAutoComplete';\nimport { executeQueryWithParameters } from '../utilities/methodUtils';\nimport { useHandleAxiosSnackbar } from '../../utilities/apiHelpers';\nimport { ConfigService } from 'udp-react-stencil-component-library';\n\nexport const MyExportsPage = (props) => {\n  const { productId } = props;\n  const user = useUser();\n  const [product, setProduct] = useState();\n  const [downloadLinkLoading, setDownloadLinkLoading] = useState(false);\n  const [fileResultData, setFileResultData] = useState();\n  const [downloadOpen, setDownloadOpen] = useState(false);\n  const [noDownloadMethod, setNoDownloadMethod] = useState(false);\n\n  const { handleErrorSnackbar, handleSuccessSnackbar } =\n    useHandleAxiosSnackbar();\n\n  const [{ data: products, loading: productsLoading }] = useAxiosGet(\n    ConfigService.tenantV2ApiUrl,\n    `tenant/products?tenantId=${user?.currentTenantId}&isSubscribable=${!user\n      ?.can?.CAN_MANAGE_CATALOGS_FOR_UNSUBSCRIBABLE_PRODUCTS}`,\n    {},\n    !user\n  );\n\n  const [{ data: apiCatalog, loading: catalogLoading, error: catalogError }] =\n    useAxiosGet(\n      ConfigService.integrationV1ApiUrl,\n      `tenantProductApiCatalogBase/tenant/${user?.currentTenantId}/product/${\n        productId ? productId : product?.productId\n      }`,\n      {},\n      !(product || productId),\n      false\n    );\n\n  const [{ data: udpJobEntity, loading: jobEntityLoading }] = useAxiosGet(\n    ConfigService.integrationV1ApiUrl,\n    `apicatalog/${apiCatalog?.apiCatalogId}/promotedMethodEntities/udpJob/product/${apiCatalog?.productId}?compareSanitizedName=true`,\n    {},\n    !apiCatalog?.productId || !apiCatalog?.apiCatalogId,\n    false\n  );\n\n  const refetchfileResultData = useCallback(\n    async (selectedRecord) => {\n      if (udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId) {\n        setDownloadLinkLoading(true);\n        await executeQueryWithParameters(\n          {\n            data: { JobId: selectedRecord?.id }\n          },\n          udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId\n        )\n          .then((res) => {\n            setFileResultData(res.data);\n          })\n          .catch((err) => {});\n        setDownloadLinkLoading(false);\n      } else {\n        setNoDownloadMethod(true);\n      }\n    },\n    [udpJobEntity?.unityBaseGetFileResultMethod?.apiMethodId]\n  );\n\n  const handleSelectRecord = useCallback(\n    (data) => {\n      refetchfileResultData(data);\n      setDownloadOpen(true);\n    },\n    [refetchfileResultData]\n  );\n\n  const getOptionLabel = (val) => {\n    return val?.name;\n  };\n\n  const handleProductChange = useCallback((val) => {\n    setProduct(val);\n  }, []);\n\n  const handleFileDownload = useCallback(() => {\n    if (fileResultData?.link) {\n      const link = document.createElement('a');\n      link.href = fileResultData?.link;\n      link.download = '';\n      document.body.appendChild(link);\n      link.click();\n      document.body.removeChild(link);\n      setDownloadOpen(false);\n      handleSuccessSnackbar('File successfully downloaded');\n    }\n  }, [fileResultData?.link, handleSuccessSnackbar]);\n\n  const getJobStatus = (value) => {\n    if (value === 1) {\n      return null;\n    } else if (value === 2) {\n      return 'info';\n    } else if (value === 3) {\n      return 'success';\n    } else if (value === 4) {\n      return 'error';\n    }\n  };\n\n  const getJobLabel = (value) => {\n    if (value === 1) {\n      return 'Pending';\n    } else if (value === 2) {\n      return 'Running';\n    } else if (value === 3) {\n      return 'Completed';\n    } else if (value === 4) {\n      return 'Failed';\n    }\n  };\n\n  useEffect(() => {\n    if (catalogError) {\n      handleErrorSnackbar(\n        '',\n        'Error fetching catalog for the selected product'\n      );\n    }\n  }, [catalogError, handleErrorSnackbar]);\n\n  const filterElements = useMemo(() => {\n    return [\n      {\n        searchField: 'jobTypeId',\n        searchOperator: '=',\n        searchValue: 2\n      }\n    ];\n  }, []);\n\n  const actionList = useMemo(() => {\n    return [\n      {\n        id: 1,\n        title: 'Download',\n        icon: DownloadIcon,\n        onClick: handleSelectRecord,\n        disabled: false,\n        checkDisabled: (value) => value?.statusId !== 3\n      }\n    ];\n  }, [handleSelectRecord]);\n\n  const columnDefs = useMemo(\n    () => [\n      {\n        headerName: 'Id',\n        sortable: true,\n        field: 'id',\n        suppressMenu: true\n      },\n      {\n        headerName: 'Name',\n        sortable: false,\n        field: 'name',\n        minWidth: 140,\n        suppressMenu: true,\n        valueFormatter: (data) => getSanitizedName(data.data.name)\n      },\n      {\n        headerName: 'Date',\n        sortable: false,\n        valueFormatter: (data) =>\n          new Date(data.data.startTime).toLocaleString(),\n        minWidth: 130,\n        suppressMenu: true\n        //sort: 'desc',\n      },\n      {\n        headerName: 'Status',\n        field: 'statusId',\n        wrapText: true,\n        autoHeight: true,\n        sortable: false,\n        cellRenderer: 'statusCellRenderer',\n        cellRendererParams: { getStatus: getJobStatus, getLabel: getJobLabel },\n        minWidth: 130,\n        maxWidth: 130,\n        suppressMenu: true\n      },\n\n      {\n        headerName: 'Actions',\n        filter: false,\n        pinned: 'right',\n        cellRenderer: 'actionsRenderer',\n        width: 120,\n        maxWidth: 120,\n        cellRendererParams: {\n          actionList: actionList,\n          value: (data) => data\n        },\n        suppressMenu: true,\n        sortable: false,\n        cellStyle: { display: 'flex', alignItems: 'center' }\n      }\n    ],\n    [actionList]\n  );\n\n  return (\n    <div>\n      {udpJobEntity && !udpJobEntity?.unityBaseSearchMethod?.apiMethodId && (\n        <AmbientAlert\n          alertMessage={\"UdpJob's search method must be promoted\"}\n          showAlert={true}\n          alertSeverity={'error'}\n        />\n      )}\n\n      {!productId && (\n        <div style={{ margin: '0px 5px 5px 5px' }}>\n          <AmbientAutoComplete\n            isMultiple={false}\n            id={'product'}\n            name={'product'}\n            label='Product'\n            onChange={handleProductChange}\n            options={products}\n            size='small'\n            getOptionLabelFunction={getOptionLabel}\n            value={product}\n            required\n          />\n        </div>\n      )}\n      <TableContainer\n        loading={productsLoading || catalogLoading || jobEntityLoading}\n        title={`Exports`}\n        isServerSide={true}\n        eagerLoad={false}\n        logicalSearchOperator={2}\n        promotedEntity={udpJobEntity}\n        filterElements={filterElements}\n        actionList={actionList}\n        customColumnDefs={columnDefs}\n        frameworkComponents={{\n          statusCellRenderer: StatusCellRenderer,\n          actionsRenderer: ActionsRenderer\n        }}\n        hideSearchBar\n        hiddenActionButtons={[\n          'saveView',\n          'views',\n          'insights',\n          'importExport',\n          'group',\n          'filter',\n          'columns',\n          'clearFilters',\n          'fitGrid',\n          'expandGrid'\n        ]}\n        height={'calc(100vh - 167px)'}\n        dynamicSizing\n      />\n      <FluentDialog\n        actionOne={handleFileDownload}\n        actionTwo={() => setDownloadOpen(false)}\n        labelOne='Download'\n        labelTwo='Cancel'\n        open={downloadOpen}\n        handleClose={() => setDownloadOpen(false)}\n        disableOne={noDownloadMethod || downloadLinkLoading}\n        progress={downloadLinkLoading}\n        fullWidth\n      >\n        {noDownloadMethod ? (\n          <AmbientAlert\n            alertMessage={\"UdpJob's get file result method must be promoted\"}\n            showAlert={true}\n            alertSeverity={'error'}\n          />\n        ) : downloadLinkLoading ? (\n          <EmptyStateDisplay primaryText={'Fetching download link...'} />\n        ) : (\n          <EmptyStateDisplay\n            icon={noDownloadMethod ? ErrorIcon : StatusCircleCheckmarkIcon}\n            primaryText={!noDownloadMethod && 'File is ready to download!'}\n          />\n        )}\n      </FluentDialog>\n    </div>\n  );\n};\n\nexport default MyExportsPage;\n"],"mappings":"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"}

package/dist/NestedGrid-CwnyzSs5.js

@@ -0,0 +1,84 @@
+import { t as FluentIconButton } from "./FluentIconButton-AN9tZKVl.js";
+import React, { Fragment } from "react";
+import { Typography, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { CalculatorMultiplyIcon, PaddingLeftIcon, PaddingRightIcon, TimerIcon } from "@fluentui/react-icons";
+
+//#region src/UI/surfaces/NestedGrid/NestedGrid.jsx
+const useStyles = makeStyles((theme) => ({
+	root: { marginTop: 32 },
+	nestedWrapper: { display: "grid" },
+	columnAdornment: {
+		borderLeft: `4px solid ${theme.palette.secondary.main}`,
+		borderTop: `4px solid ${theme.palette.secondary.main}`
+	},
+	detailHeader: {
+		padding: theme.spacing(1),
+		color: "white",
+		background: theme.palette.grey.dark
+	},
+	detailHeaderActive: { background: theme.palette.secondary.main },
+	columnHeaderWrapper: { display: "flex" },
+	columnTitle: {
+		flex: 1,
+		display: "flex",
+		paddingTop: theme.spacing(1)
+	},
+	icon: { color: theme.palette.common.white },
+	expandIcon: {
+		marginLeft: theme.spacing(2),
+		marginTop: theme.spacing(-1)
+	}
+}));
+const NestParent = ({ parentTitle, children, showDetail }) => {
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, showDetail && /* @__PURE__ */ React.createElement("div", { className: classes.detailHeader }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, " ", parentTitle, " ")), children);
+};
+const NestWrapper = ({ children, columnFr }) => {
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classes.nestedWrapper,
+		style: { gridTemplateColumns: `1fr ${columnFr}fr` }
+	}, children);
+};
+const toggleHeader = (type, setShowDetail, setColumnFr) => {
+	if (type === "open") {
+		setShowDetail(true);
+		setColumnFr(4);
+	} else {
+		setShowDetail(false);
+		setColumnFr(0);
+	}
+};
+const NestedGrid = ({ children, setShowDetail, setColumnFr, columnFr, childTitle, showDetail }) => {
+	const classes = useStyles();
+	const toggleHeader$1 = (type) => {
+		if (type === "open") {
+			setShowDetail(true);
+			setColumnFr(4);
+		} else {
+			setShowDetail(false);
+			setColumnFr(0);
+		}
+	};
+	const toggleWide = () => {
+		if (columnFr === 4) setColumnFr(1);
+		else setColumnFr(4);
+	};
+	return /* @__PURE__ */ React.createElement(Fragment, null, showDetail && /* @__PURE__ */ React.createElement("div", { className: classes.columnAdornment }, /* @__PURE__ */ React.createElement("div", { className: clsx(classes.detailHeader, classes.detailHeaderActive) }, /* @__PURE__ */ React.createElement("div", { className: classes.columnHeaderWrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.columnTitle }, /* @__PURE__ */ React.createElement(TimerIcon, { style: { marginRight: 8 } }), /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, childTitle), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		className: clsx(classes.icon, classes.expandIcon),
+		icon: columnFr === 4 ? PaddingRightIcon : PaddingLeftIcon,
+		onClick: toggleWide
+	}))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		style: {
+			color: "white",
+			marginRight: 8
+		},
+		icon: CalculatorMultiplyIcon,
+		onClick: () => toggleHeader$1("close")
+	})))), children));
+};
+
+//#endregion
+export { toggleHeader as i, NestWrapper as n, NestedGrid as r, NestParent as t };
+//# sourceMappingURL=NestedGrid-CwnyzSs5.js.map

package/dist/NestedGrid-CwnyzSs5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NestedGrid-CwnyzSs5.js","names":["toggleHeader"],"sources":["../src/UI/surfaces/NestedGrid/NestedGrid.jsx"],"sourcesContent":["import React, { Fragment } from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton'\nimport clsx from 'clsx'\nimport {\n  CalculatorMultiplyIcon,\n  TimerIcon,\n  PaddingRightIcon,\n  PaddingLeftIcon\n} from '@fluentui/react-icons'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    marginTop: 32\n  },\n  nestedWrapper: {\n    display: 'grid'\n  },\n  columnAdornment: {\n    borderLeft: `4px solid ${theme.palette.secondary.main}`,\n    borderTop: `4px solid ${theme.palette.secondary.main}`\n  },\n  detailHeader: {\n    padding: theme.spacing(1),\n    color: 'white',\n    background: theme.palette.grey.dark\n  },\n  detailHeaderActive: {\n    background: theme.palette.secondary.main\n  },\n  columnHeaderWrapper: {\n    display: 'flex'\n  },\n  columnTitle: {\n    flex: 1,\n    display: 'flex',\n    paddingTop: theme.spacing(1)\n  },\n  icon: {\n    color: theme.palette.common.white\n  },\n  expandIcon: {\n    marginLeft: theme.spacing(2),\n    marginTop: theme.spacing(-1)\n  }\n}))\n\nexport const NestParent = ({ parentTitle, children, showDetail }) => {\n  const classes = useStyles()\n  return (\n    <div className={classes.root}>\n      {showDetail && (\n        <div className={classes.detailHeader}>\n          <Typography variant='subtitle2'> {parentTitle} </Typography>\n        </div>\n      )}\n      {children}\n    </div>\n  )\n}\n\nexport const NestWrapper = ({ children, columnFr }) => {\n  const classes = useStyles()\n  return (\n    <div\n      className={classes.nestedWrapper}\n      style={{ gridTemplateColumns: `1fr ${columnFr}fr` }}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport const toggleHeader = (\n  type,\n  setShowDetail,\n  setColumnFr\n  // setSplitGrid\n) => {\n  if (type === 'open') {\n    setShowDetail(true)\n    setColumnFr(4)\n    // setSplitGrid(true)\n  } else {\n    setShowDetail(false)\n    setColumnFr(0)\n  }\n}\n\nexport const NestedGrid = ({\n  children,\n  setShowDetail,\n  setColumnFr,\n  // setSplitGrid,\n  columnFr,\n  childTitle,\n  showDetail\n}) => {\n  const classes = useStyles()\n  const toggleHeader = (type) => {\n    if (type === 'open') {\n      setShowDetail(true)\n      setColumnFr(4)\n      // setSplitGrid(true)\n    } else {\n      setShowDetail(false)\n      setColumnFr(0)\n    }\n  }\n\n  const toggleWide = () => {\n    if (columnFr === 4) {\n      setColumnFr(1)\n    } else {\n      setColumnFr(4)\n    }\n  }\n\n  return (\n    <Fragment>\n      {showDetail && (\n        <div className={classes.columnAdornment}>\n          <div\n            className={clsx(classes.detailHeader, classes.detailHeaderActive)}\n          >\n            <div className={classes.columnHeaderWrapper}>\n              <div className={classes.columnTitle}>\n                <TimerIcon style={{ marginRight: 8 }} />\n                <Typography variant='subtitle2'>{childTitle}</Typography>\n                <div>\n                  <FluentIconButton\n                    className={clsx(classes.icon, classes.expandIcon)}\n                    icon={columnFr === 4 ? PaddingRightIcon : PaddingLeftIcon}\n                    onClick={toggleWide}\n                  />\n                </div>\n              </div>\n              <div>\n                <FluentIconButton\n                  style={{ color: 'white', marginRight: 8 }}\n                  icon={CalculatorMultiplyIcon}\n                  onClick={() => toggleHeader('close')}\n                />\n              </div>\n            </div>\n          </div>\n          {children}\n        </div>\n      )}\n    </Fragment>\n  )\n}\n"],"mappings":";;;;;;;AAWA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EACJ,WAAW,IACZ;CACD,eAAe,EACb,SAAS,QACV;CACD,iBAAiB;EACf,YAAY,aAAa,MAAM,QAAQ,UAAU;EACjD,WAAW,aAAa,MAAM,QAAQ,UAAU;EACjD;CACD,cAAc;EACZ,SAAS,MAAM,QAAQ,EAAE;EACzB,OAAO;EACP,YAAY,MAAM,QAAQ,KAAK;EAChC;CACD,oBAAoB,EAClB,YAAY,MAAM,QAAQ,UAAU,MACrC;CACD,qBAAqB,EACnB,SAAS,QACV;CACD,aAAa;EACX,MAAM;EACN,SAAS;EACT,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACD,MAAM,EACJ,OAAO,MAAM,QAAQ,OAAO,OAC7B;CACD,YAAY;EACV,YAAY,MAAM,QAAQ,EAAE;EAC5B,WAAW,MAAM,QAAQ,GAAG;EAC7B;CACF,EAAE;AAEH,MAAa,cAAc,EAAE,aAAa,UAAU,iBAAiB;CACnE,MAAM,UAAU,WAAW;AAC3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACrB,cACC,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC,cAAW,SAAQ,eAAY,KAAE,aAAY,IAAc,CACxD,EAEP,SACG;;AAIV,MAAa,eAAe,EAAE,UAAU,eAAe;CACrD,MAAM,UAAU,WAAW;AAC3B,QACE,oCAAC;EACC,WAAW,QAAQ;EACnB,OAAO,EAAE,qBAAqB,OAAO,SAAS,KAAK;IAElD,SACG;;AAIV,MAAa,gBACX,MACA,eACA,gBAEG;AACH,KAAI,SAAS,QAAQ;AACnB,gBAAc,KAAK;AACnB,cAAY,EAAE;QAET;AACL,gBAAc,MAAM;AACpB,cAAY,EAAE;;;AAIlB,MAAa,cAAc,EACzB,UACA,eACA,aAEA,UACA,YACA,iBACI;CACJ,MAAM,UAAU,WAAW;CAC3B,MAAMA,kBAAgB,SAAS;AAC7B,MAAI,SAAS,QAAQ;AACnB,iBAAc,KAAK;AACnB,eAAY,EAAE;SAET;AACL,iBAAc,MAAM;AACpB,eAAY,EAAE;;;CAIlB,MAAM,mBAAmB;AACvB,MAAI,aAAa,EACf,aAAY,EAAE;MAEd,aAAY,EAAE;;AAIlB,QACE,oCAAC,gBACE,cACC,oCAAC,SAAI,WAAW,QAAQ,mBACtB,oCAAC,SACC,WAAW,KAAK,QAAQ,cAAc,QAAQ,mBAAmB,IAEjE,oCAAC,SAAI,WAAW,QAAQ,uBACtB,oCAAC,SAAI,WAAW,QAAQ,eACtB,oCAAC,aAAU,OAAO,EAAE,aAAa,GAAG,GAAI,EACxC,oCAAC,cAAW,SAAQ,eAAa,WAAwB,EACzD,oCAAC,aACC,oCAAC;EACC,WAAW,KAAK,QAAQ,MAAM,QAAQ,WAAW;EACjD,MAAM,aAAa,IAAI,mBAAmB;EAC1C,SAAS;GACT,CACE,CACF,EACN,oCAAC,aACC,oCAAC;EACC,OAAO;GAAE,OAAO;GAAS,aAAa;GAAG;EACzC,MAAM;EACN,eAAeA,eAAa,QAAQ;GACpC,CACE,CACF,CACF,EACL,SACG,CAEC"}