udp-react-enterprise-component-library 25.18.1-beta.32 → 25.18.1-beta.33

package/dist/utilities-CRrve33T.js

@@ -0,0 +1,262 @@
+import { i as verticalSecondary, n as useTypeScale, r as verticalPrimary, t as greyScale } from "./verticalStyles-CUPjFvB1.js";
+import React, { useCallback, useMemo, useState } from "react";
+import { CssBaseline, lighten } from "@material-ui/core";
+import { createTheme } from "@material-ui/core/styles";
+import MuiThemeProvider from "@material-ui/styles/esm/ThemeProvider";
+
+//#region src/utilities/systemColors.js
+const useSystemColor = () => {
+	const [color] = useState({
+		info: "rgb(15, 98, 254)",
+		error: "rgb(218, 30, 40)",
+		warning: "rgb(255, 131, 43)",
+		success: "rgb(36, 161, 72)"
+	});
+	return [color];
+};
+
+//#endregion
+//#region src/utilities/theme.jsx
+/**
+* Custom MUI theme provider
+*/
+const ThemeProvider = ({ children }) => {
+	const [h1, h2, h3, h4, h5, h6, body1, body2, subtitle1, subtitle2, subtitle3, button, caption, caption2, overline] = useTypeScale();
+	const [currentTheme, setCurrentTheme] = useState("");
+	const [mode, setMode] = useState("light");
+	const getThemeData = useCallback(() => {
+		return {
+			mode,
+			currentTheme
+		};
+	}, [mode, currentTheme]);
+	const theme = useMemo(() => {
+		const { augmentColor } = createTheme().palette;
+		const primary = verticalPrimary(currentTheme?.toLowerCase());
+		const secondary = verticalSecondary(currentTheme?.toLowerCase());
+		return {
+			...createTheme({
+				...createTheme({
+					palette: {
+						type: mode,
+						primary: {
+							main: primary,
+							light: lighten(primary, .8)
+						},
+						secondary: { main: secondary },
+						appBar: augmentColor({ main: "#021b38" }),
+						background: {
+							default: greyScale(mode),
+							footer: "#021b38"
+						}
+					},
+					dimensions: { drawerWidth: 200 },
+					typography: { fontFamily: [
+						"Segoe UI",
+						"Roboto",
+						"Noto",
+						"Helvetica Neue",
+						"Helvetica",
+						"Ubuntu",
+						"Arial",
+						"sans-serif",
+						"Apple Color Emoji",
+						"Segoe UI Emoji",
+						"Segoe UI Symbol"
+					].map((item) => item.includes(" ") ? `"${item}"` : item).join(", ") },
+					mixins: {},
+					props: { MuiTextField: {
+						margin: "normal",
+						variant: "filled",
+						fullWidth: true
+					} }
+				}),
+				overrides: {
+					MuiCssBaseline: { "@global": {
+						"*::-webkit-scrollbar": {
+							height: 8,
+							width: 8,
+							backgroundColor: "#fff"
+						},
+						"*::-webkit-scrollbar-track": { backgroundColor: "#fff" },
+						"*::-webkit-scrollbar-track:hover": { backgroundColor: "#f4f4f4" },
+						"*::-webkit-scrollbar-thumb": {
+							backgroundColor: "#babac0",
+							borderRadius: 16,
+							border: "2px solid #fff"
+						},
+						"*::-webkit-scrollbar-thumb:hover": {
+							backgroundColor: "#a0a0a5",
+							border: "2px solid #f4f4f4"
+						}
+					} },
+					MuiTypography: {
+						h1: {
+							fontSize: h1.size,
+							fontWeight: h1.weight,
+							lineHeight: h1.lineHeight,
+							letterSpacing: h1.letterSpacing
+						},
+						h2: {
+							fontSize: h2.size,
+							fontWeight: h2.weight,
+							lineHeight: h2.lineHeight,
+							letterSpacing: h2.letterSpacing
+						},
+						h3: {
+							fontSize: h3.size,
+							fontWeight: h3.weight,
+							lineHeight: h3.lineHeight,
+							letterSpacing: h3.letterSpacing
+						},
+						h4: {
+							fontSize: h4.size,
+							fontWeight: h4.weight,
+							lineHeight: h4.lineHeight,
+							letterSpacing: h4.letterSpacing
+						},
+						h5: {
+							fontSize: h5.size,
+							fontWeight: h5.weight,
+							lineHeight: h5.lineHeight,
+							letterSpacing: h5.letterSpacing
+						},
+						h6: {
+							fontSize: h6.size,
+							fontWeight: h6.weight,
+							lineHeight: h6.lineHeight,
+							letterSpacing: h6.letterSpacing
+						},
+						subtitle1: {
+							fontSize: subtitle1.size,
+							fontWeight: subtitle1.weight,
+							lineHeight: subtitle1.lineHeight,
+							letterSpacing: subtitle1.letterSpacing
+						},
+						subtitle2: {
+							fontSize: subtitle2.size,
+							fontWeight: subtitle2.weight,
+							lineHeight: subtitle2.lineHeight,
+							letterSpacing: subtitle2.letterSpacing
+						},
+						subtitle3: {
+							fontSize: subtitle3.size,
+							fontWeight: subtitle3.weight,
+							lineHeight: subtitle3.lineHeight,
+							letterSpacing: subtitle3.letterSpacing
+						},
+						body1: {
+							fontSize: body1.size,
+							fontWeight: body1.weight,
+							lineHeight: body1.lineHeight,
+							letterSpacing: body1.letterSpacing
+						},
+						body2: {
+							fontSize: body2.size,
+							fontWeight: body2.weight,
+							lineHeight: body2.lineHeight,
+							letterSpacing: body2.letterSpacing
+						},
+						button: {
+							fontSize: button.size,
+							fontWeight: button.weight,
+							lineHeight: button.lineHeight,
+							letterSpacing: button.letterSpacing
+						},
+						caption: {
+							fontSize: caption.size,
+							fontWeight: caption.weight,
+							lineHeight: caption.lineHeight,
+							letterSpacing: caption.letterSpacing
+						},
+						caption2: {
+							fontSize: caption2.size,
+							fontWeight: caption2.weight,
+							lineHeight: caption2.lineHeight,
+							letterSpacing: caption2.letterSpacing
+						},
+						overline: {
+							fontSize: overline.size,
+							fontWeight: overline.weight,
+							lineHeight: overline.lineHeight,
+							letterSpacing: overline.letterSpacing
+						}
+					}
+				}
+			}),
+			setCurrentTheme,
+			isInitialized: currentTheme !== "",
+			setMode,
+			getThemeData
+		};
+	}, [
+		body1.letterSpacing,
+		body1.lineHeight,
+		body1.size,
+		body1.weight,
+		body2.letterSpacing,
+		body2.lineHeight,
+		body2.size,
+		body2.weight,
+		button.letterSpacing,
+		button.lineHeight,
+		button.size,
+		button.weight,
+		caption.letterSpacing,
+		caption.lineHeight,
+		caption.size,
+		caption.weight,
+		caption2.letterSpacing,
+		caption2.lineHeight,
+		caption2.size,
+		caption2.weight,
+		h1.letterSpacing,
+		h1.lineHeight,
+		h1.size,
+		h1.weight,
+		h2.letterSpacing,
+		h2.lineHeight,
+		h2.size,
+		h2.weight,
+		h3.letterSpacing,
+		h3.lineHeight,
+		h3.size,
+		h3.weight,
+		h4.letterSpacing,
+		h4.lineHeight,
+		h4.size,
+		h4.weight,
+		h5.letterSpacing,
+		h5.lineHeight,
+		h5.size,
+		h5.weight,
+		h6.letterSpacing,
+		h6.lineHeight,
+		h6.size,
+		h6.weight,
+		overline.letterSpacing,
+		overline.lineHeight,
+		overline.size,
+		overline.weight,
+		subtitle1.letterSpacing,
+		subtitle1.lineHeight,
+		subtitle1.size,
+		subtitle1.weight,
+		subtitle2.letterSpacing,
+		subtitle2.lineHeight,
+		subtitle2.size,
+		subtitle2.weight,
+		subtitle3.letterSpacing,
+		subtitle3.lineHeight,
+		subtitle3.size,
+		subtitle3.weight,
+		currentTheme,
+		mode,
+		getThemeData
+	]);
+	return /* @__PURE__ */ React.createElement(MuiThemeProvider, { theme }, /* @__PURE__ */ React.createElement(CssBaseline, null), children);
+};
+
+//#endregion
+export { useSystemColor as n, ThemeProvider as t };
+//# sourceMappingURL=utilities-CRrve33T.js.map

package/dist/utilities-CRrve33T.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities-CRrve33T.js","names":[],"sources":["../src/utilities/systemColors.js","../src/utilities/theme.jsx"],"sourcesContent":["import { useState } from 'react'\n\nexport const useSystemColor = () => {\n  const [color] = useState({\n    info: 'rgb(15, 98, 254)',\n    error: 'rgb(218, 30, 40)',\n    warning: 'rgb(255, 131, 43)',\n    success: 'rgb(36, 161, 72)'\n  })\n\n  return [color]\n}\n","import React, { useCallback, useMemo, useState } from 'react';\nimport { CssBaseline, lighten } from '@material-ui/core';\nimport {default as MuiThemeProvider } from '@material-ui/styles/esm/ThemeProvider';\nimport { createTheme } from '@material-ui/core/styles';\nimport { verticalPrimary, verticalSecondary } from './style/verticalStyles';\nimport { useTypeScale } from './style/verticalStyles';\nimport { greyScale } from './style/verticalStyles';\n/**\n * Custom MUI theme provider\n */\nexport const ThemeProvider = ({ children }) => {\n  const [\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    body1,\n    body2,\n    subtitle1,\n    subtitle2,\n    subtitle3,\n    button,\n    caption,\n    caption2,\n    overline\n  ] = useTypeScale();\n  const [currentTheme, setCurrentTheme] = useState('');\n  const [mode, setMode] = useState('light');\n\n  const getThemeData = useCallback(() => {\n    return { mode, currentTheme };\n  }, [mode, currentTheme]);\n\n  const theme = useMemo(() => {\n    const { augmentColor } = createTheme().palette;\n\n    const primary = verticalPrimary(currentTheme?.toLowerCase());\n    const secondary = verticalSecondary(currentTheme?.toLowerCase());\n\n    const coreTheme = createTheme({\n      palette: {\n        type: mode,\n        primary: {\n          main: primary,\n          light: lighten(primary, 0.8)\n        },\n        secondary: {\n          main: secondary\n        },\n        appBar: augmentColor({\n          main: '#021b38'\n        }),\n        background: {\n          default: greyScale(mode),\n          footer: '#021b38'\n        }\n      },\n      dimensions: {\n        drawerWidth: 200\n      },\n      typography: {\n        fontFamily: [\n          // Webfont\n          // System font stack\n          // '-apple-system',\n          // 'BlinkMacSystemFont',\n          'Segoe UI',\n          'Roboto',\n          'Noto',\n          'Helvetica Neue',\n          'Helvetica',\n          'Ubuntu',\n          'Arial',\n          'sans-serif',\n          'Apple Color Emoji',\n          'Segoe UI Emoji',\n          'Segoe UI Symbol'\n        ]\n          .map((item) => (item.includes(' ') ? `\"${item}\"` : item))\n          .join(', ')\n      },\n      mixins: {\n        // toolbar: {\n        //   minHeight: 48,\n        //   padding: 0\n        // }\n      },\n      props: {\n        MuiTextField: {\n          margin: 'normal',\n          variant: 'filled',\n          fullWidth: true\n        }\n      }\n    });\n\n    const fullTheme = createTheme({\n      ...coreTheme,\n      overrides: {\n        MuiCssBaseline: {\n          '@global': {\n            '*::-webkit-scrollbar': {\n              height: 8,\n              width: 8,\n              backgroundColor: '#fff'\n            },\n            '*::-webkit-scrollbar-track': {\n              backgroundColor: '#fff'\n            },\n            '*::-webkit-scrollbar-track:hover': {\n              backgroundColor: '#f4f4f4'\n            },\n            '*::-webkit-scrollbar-thumb': {\n              backgroundColor: '#babac0',\n              borderRadius: 16,\n              border: '2px solid #fff'\n            },\n            '*::-webkit-scrollbar-thumb:hover': {\n              backgroundColor: '#a0a0a5',\n              border: '2px solid #f4f4f4'\n            }\n          }\n        },\n        MuiTypography: {\n          h1: {\n            fontSize: h1.size,\n            fontWeight: h1.weight,\n            lineHeight: h1.lineHeight,\n            letterSpacing: h1.letterSpacing\n          },\n          h2: {\n            fontSize: h2.size,\n            fontWeight: h2.weight,\n            lineHeight: h2.lineHeight,\n            letterSpacing: h2.letterSpacing\n          },\n          h3: {\n            fontSize: h3.size,\n            fontWeight: h3.weight,\n            lineHeight: h3.lineHeight,\n            letterSpacing: h3.letterSpacing\n          },\n          h4: {\n            fontSize: h4.size,\n            fontWeight: h4.weight,\n            lineHeight: h4.lineHeight,\n            letterSpacing: h4.letterSpacing\n          },\n\n          h5: {\n            fontSize: h5.size,\n            fontWeight: h5.weight,\n            lineHeight: h5.lineHeight,\n            letterSpacing: h5.letterSpacing\n          },\n          h6: {\n            fontSize: h6.size,\n            fontWeight: h6.weight,\n            lineHeight: h6.lineHeight,\n            letterSpacing: h6.letterSpacing\n          },\n          subtitle1: {\n            fontSize: subtitle1.size,\n            fontWeight: subtitle1.weight,\n            lineHeight: subtitle1.lineHeight,\n            letterSpacing: subtitle1.letterSpacing\n          },\n          subtitle2: {\n            fontSize: subtitle2.size,\n            fontWeight: subtitle2.weight,\n            lineHeight: subtitle2.lineHeight,\n            letterSpacing: subtitle2.letterSpacing\n          },\n          subtitle3: {\n            fontSize: subtitle3.size,\n            fontWeight: subtitle3.weight,\n            lineHeight: subtitle3.lineHeight,\n            letterSpacing: subtitle3.letterSpacing\n          },\n          body1: {\n            fontSize: body1.size,\n            fontWeight: body1.weight,\n            lineHeight: body1.lineHeight,\n            letterSpacing: body1.letterSpacing\n          },\n          body2: {\n            fontSize: body2.size,\n            fontWeight: body2.weight,\n            lineHeight: body2.lineHeight,\n            letterSpacing: body2.letterSpacing\n          },\n          button: {\n            fontSize: button.size,\n            fontWeight: button.weight,\n            lineHeight: button.lineHeight,\n            letterSpacing: button.letterSpacing\n          },\n          caption: {\n            fontSize: caption.size,\n            fontWeight: caption.weight,\n            lineHeight: caption.lineHeight,\n            letterSpacing: caption.letterSpacing\n          },\n          caption2: {\n            fontSize: caption2.size,\n            fontWeight: caption2.weight,\n            lineHeight: caption2.lineHeight,\n            letterSpacing: caption2.letterSpacing\n          },\n          overline: {\n            fontSize: overline.size,\n            fontWeight: overline.weight,\n            lineHeight: overline.lineHeight,\n            letterSpacing: overline.letterSpacing\n          }\n        }\n      }\n    });\n    return {\n      ...fullTheme,\n      setCurrentTheme,\n      isInitialized: currentTheme !== '',\n      setMode,\n      getThemeData\n    };\n  }, [\n    body1.letterSpacing,\n    body1.lineHeight,\n    body1.size,\n    body1.weight,\n    body2.letterSpacing,\n    body2.lineHeight,\n    body2.size,\n    body2.weight,\n    button.letterSpacing,\n    button.lineHeight,\n    button.size,\n    button.weight,\n    caption.letterSpacing,\n    caption.lineHeight,\n    caption.size,\n    caption.weight,\n    caption2.letterSpacing,\n    caption2.lineHeight,\n    caption2.size,\n    caption2.weight,\n    h1.letterSpacing,\n    h1.lineHeight,\n    h1.size,\n    h1.weight,\n    h2.letterSpacing,\n    h2.lineHeight,\n    h2.size,\n    h2.weight,\n    h3.letterSpacing,\n    h3.lineHeight,\n    h3.size,\n    h3.weight,\n    h4.letterSpacing,\n    h4.lineHeight,\n    h4.size,\n    h4.weight,\n    h5.letterSpacing,\n    h5.lineHeight,\n    h5.size,\n    h5.weight,\n    h6.letterSpacing,\n    h6.lineHeight,\n    h6.size,\n    h6.weight,\n    overline.letterSpacing,\n    overline.lineHeight,\n    overline.size,\n    overline.weight,\n    subtitle1.letterSpacing,\n    subtitle1.lineHeight,\n    subtitle1.size,\n    subtitle1.weight,\n    subtitle2.letterSpacing,\n    subtitle2.lineHeight,\n    subtitle2.size,\n    subtitle2.weight,\n    subtitle3.letterSpacing,\n    subtitle3.lineHeight,\n    subtitle3.size,\n    subtitle3.weight,\n    currentTheme,\n    mode,\n    getThemeData\n  ]);\n\n  return (\n    <MuiThemeProvider theme={theme}>\n      <CssBaseline />\n      {children}\n    </MuiThemeProvider>\n  );\n};\n"],"mappings":"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CnB,YAAY,SAAS;OACrB,YAAY,SAAS;OACrB,eAAe,SAAS;OACzB;MACF;KACF;IACF,CAAC;GAGA;GACA,eAAe,iBAAiB;GAChC;GACA;GACD;IACA;EACD,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,SAAS;EACT,SAAS;EACT,SAAS;EACT,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,SAAS;EACT,SAAS;EACT,SAAS;EACT,SAAS;EACT,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV;EACA;EACA;EACD,CAAC;AAEF,QACE,oCAAC,oBAAwB,SACvB,oCAAC,kBAAc,EACd,SACgB"}

package/dist/utilityHeader-DO5LtMam.js

@@ -0,0 +1,47 @@
+import { n as TeleportSource } from "./PAHAdditionalRightComponent-DMOU9Mho.js";
+import { t as StandardTitle } from "./StandardTitle-DJ9zcNBA.js";
+import { n as FluentSimpleTab, t as FluentSimpleTabs } from "./FluentSimpleTabs-Dw2U4b_m.js";
+import React from "react";
+import { makeStyles } from "@material-ui/core";
+
+//#region src/UI/utilityDisplay/utilityHeader/UtilityTabHeader.jsx
+function a11yProps(index) {
+	return {
+		id: `simple-tab-${index}`,
+		"aria-controls": `simple-tabpanel-${index}`
+	};
+}
+const useStyles = makeStyles((theme) => ({
+	root: {
+		flexGrow: 1,
+		marginTop: 12
+	},
+	title: { margin: theme.spacing(2) },
+	titleWrapper: { paddingLeft: theme.spacing(2) }
+}));
+const UtilityTabHeader = ({ handleChange, value, tabList, title = "Page title" }) => {
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.titleWrapper }, /* @__PURE__ */ React.createElement(StandardTitle, null, title)), /* @__PURE__ */ React.createElement(FluentSimpleTabs, {
+		value,
+		onChange: handleChange
+	}, tabList && tabList.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(FluentSimpleTab, {
+			key: item.label,
+			label: item.label,
+			...a11yProps(index)
+		});
+	})));
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/utilityHeader/ui/PAHAdditionalTitleComponent.jsx
+const PAHAdditionalTitleComponent = ({ children, targetId }) => {
+	return /* @__PURE__ */ React.createElement(TeleportSource, {
+		targetId,
+		location: "title"
+	}, children);
+};
+
+//#endregion
+export { UtilityTabHeader as n, PAHAdditionalTitleComponent as t };
+//# sourceMappingURL=utilityHeader-DO5LtMam.js.map

package/dist/utilityHeader-DO5LtMam.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilityHeader-DO5LtMam.js","names":[],"sources":["../src/UI/utilityDisplay/utilityHeader/UtilityTabHeader.jsx","../src/UI/utilityDisplay/utilityHeader/ui/PAHAdditionalTitleComponent.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles } from '@material-ui/core'\nimport { FluentSimpleTab } from '../../navigation/tabs/defaultTabs/FluentSimpleTab'\nimport { FluentSimpleTabs } from '../../navigation/tabs/defaultTabs/FluentSimpleTabs'\nimport { StandardTitle } from '../../dataDisplay/typography/StandardTitle'\n\nfunction a11yProps(index) {\n  return {\n    id: `simple-tab-${index}`,\n    'aria-controls': `simple-tabpanel-${index}`\n  }\n}\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    flexGrow: 1,\n    marginTop: 12\n  },\n  title: {\n    margin: theme.spacing(2)\n  },\n  titleWrapper: {\n    paddingLeft: theme.spacing(2)\n  }\n}))\n\nexport const UtilityTabHeader = ({\n  handleChange,\n  value,\n  tabList,\n  title = 'Page title'\n}) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.titleWrapper}>\n        <StandardTitle>{title}</StandardTitle>\n      </div>\n\n      <FluentSimpleTabs value={value} onChange={handleChange}>\n        {tabList &&\n          tabList.map((item, index) => {\n            return (\n              <FluentSimpleTab\n                key={item.label}\n                label={item.label}\n                {...a11yProps(index)}\n              />\n            )\n          })}\n      </FluentSimpleTabs>\n    </div>\n  )\n}\n","import React from 'react';\n\nimport {TeleportSource} from './TeleporterSource';\n\nexport const PAHAdditionalTitleComponent = ({ children, targetId }) => {\n  return <TeleportSource targetId={targetId} location={\"title\"}>{children}</TeleportSource>;\n};\n"],"mappings":";;;;;;;AAMA,SAAS,UAAU,OAAO;AACxB,QAAO;EACL,IAAI,cAAc;EAClB,iBAAiB,mBAAmB;EACrC;;AAGH,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM;EACJ,UAAU;EACV,WAAW;EACZ;CACD,OAAO,EACL,QAAQ,MAAM,QAAQ,EAAE,EACzB;CACD,cAAc,EACZ,aAAa,MAAM,QAAQ,EAAE,EAC9B;CACF,EAAE;AAEH,MAAa,oBAAoB,EAC/B,cACA,OACA,SACA,QAAQ,mBACJ;CACJ,MAAM,UAAU,WAAW;AAE3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC,qBAAe,MAAsB,CAClC,EAEN,oCAAC;EAAwB;EAAO,UAAU;IACvC,WACC,QAAQ,KAAK,MAAM,UAAU;AAC3B,SACE,oCAAC;GACC,KAAK,KAAK;GACV,OAAO,KAAK;GACZ,GAAI,UAAU,MAAM;IACpB;GAEJ,CACa,CACf;;;;;AChDV,MAAa,+BAA+B,EAAE,UAAU,eAAe;AACrE,QAAO,oCAAC;EAAyB;EAAU,UAAU;IAAU,SAA0B"}

package/dist/virtualActions-DWQEmtEr.js

@@ -0,0 +1,84 @@
+import { t as Field } from "./Field-Cda5rJe2.js";
+import { t as findTermByType } from "./CrudBrowserUtilities-C9nVmUR3.js";
+import { t as DateTimeField } from "./DateTimeField-CUzs3MIq.js";
+import { t as FluentToggle } from "./FluentToggle-B1DqTfua.js";
+import { t as PropertyTypeEnum } from "./propertyTypeEnums-Dys-84NL.js";
+import { a as toTitleCase, i as toLowerFirstChar } from "./StringUtilities-u-cxAW6-.js";
+import React, { useCallback } from "react";
+import { FormControlLabel, TextField } from "@material-ui/core";
+
+//#region src/hooks/virtualActions.jsx
+function useVirtualActions() {
+	return { renderInputByFieldType: useCallback((formField, index, virtualTableFormData, classes) => {
+		const NUMBER_TYPE = [
+			PropertyTypeEnum.Int,
+			PropertyTypeEnum.Long,
+			PropertyTypeEnum.Double
+		];
+		if (formField.type === "boolean" && virtualTableFormData[toLowerFirstChar(formField.name)] === "") virtualTableFormData[toLowerFirstChar(formField.name)] = false;
+		const fieldType = formField.type?.toLowerCase();
+		let fieldIsNumberType = NUMBER_TYPE.includes(fieldType);
+		const DefaultTextField = /* @__PURE__ */ React.createElement(Field, {
+			component: TextField,
+			id: `${formField.name}${index}`,
+			name: toLowerFirstChar(formField.name),
+			label: toTitleCase(formField.name),
+			initialValue: virtualTableFormData[toLowerFirstChar(formField.name)] || "",
+			type: fieldIsNumberType && "number",
+			fullWidth: true,
+			variant: "outlined",
+			size: "small",
+			required: !formField?.nullable,
+			margin: "dense",
+			InputProps: { classes: {
+				root: classes?.input,
+				input: classes?.formTextInput
+			} },
+			InputLabelProps: { classes: { root: classes?.labelRoot } },
+			disabled: formField?.disabled
+		});
+		const DefaultFluentToggle = /* @__PURE__ */ React.createElement(FormControlLabel, {
+			control: /* @__PURE__ */ React.createElement(Field, {
+				component: FluentToggle,
+				type: "checkbox",
+				id: `${formField.name}${index}`,
+				name: toLowerFirstChar(formField.name),
+				label: toTitleCase(formField.name),
+				initialValue: typeof virtualTableFormData[toLowerFirstChar(formField.name)] === "boolean" ? virtualTableFormData[toLowerFirstChar(formField.name)] : virtualTableFormData[toLowerFirstChar(formField.name)] === "true" ? true : false,
+				disabled: formField?.disabled,
+				classes: { root: classes?.switchRoot },
+				color: "secondary",
+				inputProps: { "aria-label": "Active condition" }
+			}),
+			label: toTitleCase(formField.name),
+			labelPlacement: "start",
+			style: { marginLeft: 4 }
+		});
+		switch (fieldType.toLowerCase()) {
+			case findTermByType(fieldType, "int"):
+			case findTermByType(fieldType, "long"):
+			case findTermByType(fieldType, "double"):
+			case findTermByType(fieldType, "string"):
+			case findTermByType(fieldType, "string uuid"): return DefaultTextField;
+			case findTermByType(fieldType, "boolean"): return DefaultFluentToggle;
+			case findTermByType(fieldType, "datetime"): return /* @__PURE__ */ React.createElement(Field, {
+				disabled: formField?.disabled,
+				component: DateTimeField,
+				id: `${formField.name}${index}`,
+				name: toLowerFirstChar(formField.name),
+				label: toTitleCase(formField.name),
+				initialValue: virtualTableFormData[toLowerFirstChar(formField.name)] ? new Date(virtualTableFormData[toLowerFirstChar(formField.name)]) : "",
+				fullWidth: true,
+				variant: "outlined",
+				size: "small",
+				required: !formField?.nullable,
+				style: { marginTop: 8 }
+			});
+			default: return null;
+		}
+	}, []) };
+}
+
+//#endregion
+export { useVirtualActions as t };
+//# sourceMappingURL=virtualActions-DWQEmtEr.js.map

package/dist/virtualActions-DWQEmtEr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtualActions-DWQEmtEr.js","names":[],"sources":["../src/hooks/virtualActions.jsx"],"sourcesContent":["import { FormControlLabel, TextField } from '@material-ui/core';\nimport React, { useCallback } from 'react';\nimport { DateTimeField } from '../UI/inputs/datetimes/DateTimeField';\nimport { Field } from '../utilities/form';\nimport { findTermByType } from '../utilities/maintenanceEngine/CrudBrowserUtilities';\nimport { FluentToggle } from '../UI/inputs/toggle/FluentToggle';\nimport { PropertyTypeEnum } from '../enums/propertyTypeEnums';\nimport { toLowerFirstChar } from '../utilities/input/StringUtilities';\nimport { toTitleCase } from '../utilities/input/StringUtilities';\n\nexport function useVirtualActions() {\n  const renderInputByFieldType = useCallback(\n    (formField, index, virtualTableFormData, classes) => {\n      const NUMBER_TYPE = [\n        PropertyTypeEnum.Int,\n        PropertyTypeEnum.Long,\n        PropertyTypeEnum.Double\n      ];\n\n      if (\n        formField.type === 'boolean' &&\n        virtualTableFormData[toLowerFirstChar(formField.name)] === ''\n      ) {\n        virtualTableFormData[toLowerFirstChar(formField.name)] = false;\n      }\n\n      const fieldType = formField.type?.toLowerCase();\n      let fieldIsNumberType = NUMBER_TYPE.includes(fieldType);\n\n      const DefaultTextField = (\n        <Field\n          component={TextField}\n          id={`${formField.name}${index}`}\n          name={toLowerFirstChar(formField.name)}\n          label={toTitleCase(formField.name)}\n          initialValue={\n            virtualTableFormData[toLowerFirstChar(formField.name)] || ''\n          }\n          type={fieldIsNumberType && 'number'}\n          fullWidth\n          variant='outlined'\n          size='small'\n          required={!formField?.nullable}\n          margin='dense'\n          InputProps={{\n            classes: {\n              root: classes?.input,\n              input: classes?.formTextInput\n            }\n          }}\n          InputLabelProps={{\n            classes: {\n              root: classes?.labelRoot\n            }\n          }}\n          disabled={formField?.disabled}\n        />\n      );\n\n      const DefaultFluentToggle = (\n        <FormControlLabel\n          control={\n            <Field\n              component={FluentToggle}\n              type='checkbox'\n              id={`${formField.name}${index}`}\n              name={toLowerFirstChar(formField.name)}\n              label={toTitleCase(formField.name)}\n              initialValue={\n                typeof virtualTableFormData[\n                  toLowerFirstChar(formField.name)\n                ] === 'boolean'\n                  ? virtualTableFormData[toLowerFirstChar(formField.name)]\n                  : virtualTableFormData[toLowerFirstChar(formField.name)] ===\n                    'true'\n                  ? true\n                  : false\n              }\n              disabled={formField?.disabled}\n              classes={{ root: classes?.switchRoot }}\n              color='secondary'\n              inputProps={{ 'aria-label': 'Active condition' }}\n            />\n          }\n          label={toTitleCase(formField.name)}\n          labelPlacement='start'\n          style={{ marginLeft: 4 }}\n        />\n      );\n\n      switch (fieldType.toLowerCase()) {\n        case findTermByType(fieldType, 'int'):\n        case findTermByType(fieldType, 'long'):\n        case findTermByType(fieldType, 'double'):\n        case findTermByType(fieldType, 'string'):\n        case findTermByType(fieldType, 'string uuid'):\n          return DefaultTextField;\n        case findTermByType(fieldType, 'boolean'):\n          return DefaultFluentToggle;\n        case findTermByType(fieldType, 'datetime'):\n          return (\n            <Field\n              disabled={formField?.disabled}\n              component={DateTimeField}\n              id={`${formField.name}${index}`}\n              name={toLowerFirstChar(formField.name)}\n              label={toTitleCase(formField.name)}\n              initialValue={\n                virtualTableFormData[toLowerFirstChar(formField.name)]\n                  ? new Date(\n                      virtualTableFormData[toLowerFirstChar(formField.name)]\n                    )\n                  : ''\n              }\n              fullWidth\n              variant='outlined'\n              size='small'\n              required={!formField?.nullable}\n              style={{ marginTop: 8 }}\n            />\n          );\n        default:\n          return null;\n      }\n    },\n    []\n  );\n\n  return {\n    renderInputByFieldType\n  };\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,oBAAoB;AAsHlC,QAAO,EACL,wBAtH6B,aAC5B,WAAW,OAAO,sBAAsB,YAAY;EACnD,MAAM,cAAc;GAClB,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB;GAClB;AAED,MACE,UAAU,SAAS,aACnB,qBAAqB,iBAAiB,UAAU,KAAK,MAAM,GAE3D,sBAAqB,iBAAiB,UAAU,KAAK,IAAI;EAG3D,MAAM,YAAY,UAAU,MAAM,aAAa;EAC/C,IAAI,oBAAoB,YAAY,SAAS,UAAU;EAEvD,MAAM,mBACJ,oCAAC;GACC,WAAW;GACX,IAAI,GAAG,UAAU,OAAO;GACxB,MAAM,iBAAiB,UAAU,KAAK;GACtC,OAAO,YAAY,UAAU,KAAK;GAClC,cACE,qBAAqB,iBAAiB,UAAU,KAAK,KAAK;GAE5D,MAAM,qBAAqB;GAC3B;GACA,SAAQ;GACR,MAAK;GACL,UAAU,CAAC,WAAW;GACtB,QAAO;GACP,YAAY,EACV,SAAS;IACP,MAAM,SAAS;IACf,OAAO,SAAS;IACjB,EACF;GACD,iBAAiB,EACf,SAAS,EACP,MAAM,SAAS,WAChB,EACF;GACD,UAAU,WAAW;IACrB;EAGJ,MAAM,sBACJ,oCAAC;GACC,SACE,oCAAC;IACC,WAAW;IACX,MAAK;IACL,IAAI,GAAG,UAAU,OAAO;IACxB,MAAM,iBAAiB,UAAU,KAAK;IACtC,OAAO,YAAY,UAAU,KAAK;IAClC,cACE,OAAO,qBACL,iBAAiB,UAAU,KAAK,MAC5B,YACF,qBAAqB,iBAAiB,UAAU,KAAK,IACrD,qBAAqB,iBAAiB,UAAU,KAAK,MACrD,SACA,OACA;IAEN,UAAU,WAAW;IACrB,SAAS,EAAE,MAAM,SAAS,YAAY;IACtC,OAAM;IACN,YAAY,EAAE,cAAc,oBAAoB;KAChD;GAEJ,OAAO,YAAY,UAAU,KAAK;GAClC,gBAAe;GACf,OAAO,EAAE,YAAY,GAAG;IACxB;AAGJ,UAAQ,UAAU,aAAa,EAA/B;GACE,KAAK,eAAe,WAAW,MAAM;GACrC,KAAK,eAAe,WAAW,OAAO;GACtC,KAAK,eAAe,WAAW,SAAS;GACxC,KAAK,eAAe,WAAW,SAAS;GACxC,KAAK,eAAe,WAAW,cAAc,CAC3C,QAAO;GACT,KAAK,eAAe,WAAW,UAAU,CACvC,QAAO;GACT,KAAK,eAAe,WAAW,WAAW,CACxC,QACE,oCAAC;IACC,UAAU,WAAW;IACrB,WAAW;IACX,IAAI,GAAG,UAAU,OAAO;IACxB,MAAM,iBAAiB,UAAU,KAAK;IACtC,OAAO,YAAY,UAAU,KAAK;IAClC,cACE,qBAAqB,iBAAiB,UAAU,KAAK,IACjD,IAAI,KACF,qBAAqB,iBAAiB,UAAU,KAAK,EACtD,GACD;IAEN;IACA,SAAQ;IACR,MAAK;IACL,UAAU,CAAC,WAAW;IACtB,OAAO,EAAE,WAAW,GAAG;KACvB;GAEN,QACE,QAAO;;IAGb,EAAE,CACH,EAIA"}

package/dist/widgets-DIWoZeqT.js

@@ -0,0 +1,180 @@
+import { r as getEllipseColor } from "./colorConverter-x64WSLsF.js";
+import { t as AmbientCardTitle } from "./AmbientCardTitle-CvXW2qf0.js";
+import { t as useItemSubCard } from "./useItemSubCard-CJ3DL7fz.js";
+import { t as EmptyStateDisplay } from "./EmptyStateDisplay-Dpho9v6S.js";
+import React, { useState } from "react";
+import { Box, Divider, Fade, Grow, IconButton, List, ListItem, ListItemAvatar, ListItemText, Typography, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import { PropTypes as PropTypes$1 } from "prop-types";
+import { useTranslation } from "react-i18next";
+import { grey } from "@material-ui/core/colors";
+import { format, isValid } from "date-fns";
+import KeyboardArrowLeftIcon from "@material-ui/icons/esm/KeyboardArrowLeft";
+
+//#region src/UI/widgets/ItemsWidgetCard.jsx
+const useStyles = makeStyles((theme) => ({
+	mainContainer: {
+		backgroundColor: theme.palette.background.paper,
+		padding: "0px",
+		gap: "0px",
+		order: 3,
+		alignSelf: "stretch"
+	},
+	secondaryContainer: {
+		backgroundColor: theme.palette.background.paper,
+		padding: "0px",
+		gap: "0px",
+		order: 0,
+		alignSelf: "stretch",
+		flexGrow: 0,
+		width: "100%"
+	},
+	listItemPrimary: {
+		fontSize: "14px",
+		fontWeight: 600
+	},
+	listItemSecondary: {
+		fontSize: "12px",
+		fontWeight: 400,
+		color: grey[500]
+	},
+	listContainer: {
+		width: "100%",
+		backgroundColor: theme.palette.background.paper,
+		padding: "0px"
+	},
+	listItem: {
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "flex-start",
+		padding: "8px 16px"
+	},
+	listItemAvatar: { minWidth: "32px" },
+	listItemText: { margin: 0 },
+	itemContainer: { paddingRight: "5px" },
+	emptyStateDisplay: {
+		marginTop: theme.spacing(1),
+		marginBottom: theme.spacing(1)
+	}
+}));
+/**
+* `ItemsWidgetCard` component
+*/
+const ItemsWidgetCard = (props) => {
+	const [checked, setChecked] = useState(false);
+	const [cardItemData, setCardItemData] = useState();
+	const { cardData, subCardsList = {}, style, headerColor, emptyStatePrimaryText, emptyStateImageSrc, emptyStateIconSize, emptyStateImageWidth, emptyStateClassName, emptyStateIcon, title = "Account Items", subCardTypeField = "type" } = props;
+	const { SubCard, setSubCardType, subCardType, getSubCardInfo } = useItemSubCard(subCardsList);
+	const classes = useStyles();
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const handleChange = (accountItem) => {
+		setCardItemData(accountItem);
+		setSubCardType(accountItem?.[subCardTypeField] || "");
+		setChecked((prev) => !prev);
+	};
+	return /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "flex-start",
+		flexGrow: "1",
+		className: classes.mainContainer,
+		style: {
+			...style,
+			height: "100%"
+		}
+	}, /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "center",
+		style: {
+			gap: "8px",
+			width: "100%",
+			padding: "8px",
+			backgroundColor: headerColor && getEllipseColor(theme, headerColor, "light"),
+			color: theme.palette.getContrastText(getEllipseColor(theme, headerColor, "light"))
+		}
+	}, subCardType !== "" && /* @__PURE__ */ React.createElement(IconButton, {
+		"aria-label": "delete",
+		size: "small",
+		onClick: () => handleChange(""),
+		style: { marginLeft: "10px" },
+		id: "udpRecord-ItemsWidgetCard-delete",
+		udprecordid: "udpRecord-ItemsWidgetCard-delete"
+	}, /* @__PURE__ */ React.createElement(KeyboardArrowLeftIcon, { fontSize: "inherit" })), /* @__PURE__ */ React.createElement(AmbientCardTitle, {
+		title: subCardType !== "" ? subCardType : title,
+		style: { backgroundColor: headerColor && getEllipseColor(theme, headerColor, "light") }
+	})), !checked ? /* @__PURE__ */ React.createElement(Grow, {
+		in: !checked,
+		style: {
+			transformOrigin: "0 0 0",
+			width: "100%"
+		},
+		...!checked ? { timeout: 500 } : {},
+		mountOnEnter: true,
+		unmountOnExit: true
+	}, /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "flex-start",
+		className: classes.secondaryContainer
+	}, /* @__PURE__ */ React.createElement(List, { className: classes.listContainer }, cardData?.length > 0 ? cardData?.map((cardItem, index) => {
+		const { defaultColor, textColor, backgroundColor, icon: Icon } = getSubCardInfo(cardItem?.accountItemName);
+		return /* @__PURE__ */ React.createElement(React.Fragment, { key: `${cardItem?.name}-${index}` }, /* @__PURE__ */ React.createElement(ListItem, {
+			button: true,
+			className: classes.listItem,
+			style: { backgroundColor },
+			onClick: () => handleChange(cardItem),
+			id: "udpRecord-ItemsWidgetCard-ListItem-" + cardItem?.name.replace(/\s+/g, "") + "-" + cardItem?.businessObjectKey,
+			udprecordid: "udpRecord-ItemsWidgetCard-ListItem-" + cardItem?.name.replace(/\s+/g, "") + "-" + cardItem?.businessObjectKey
+		}, /* @__PURE__ */ React.createElement(ListItemAvatar, { className: classes.listItemAvatar }, /* @__PURE__ */ React.createElement(Icon, {
+			color: defaultColor,
+			width: "22px",
+			height: "22px"
+		})), /* @__PURE__ */ React.createElement(ListItemText, {
+			className: classes.listItemText,
+			primary: /* @__PURE__ */ React.createElement(Typography, {
+				variant: "subtitle2",
+				className: classes?.listItemPrimary,
+				style: { color: textColor }
+			}, cardItem?.name),
+			secondary: /* @__PURE__ */ React.createElement(Typography, {
+				variant: "caption",
+				className: classes?.listItemSecondary
+			}, cardItem?.date ? isValid(new Date(cardItem?.date)) ? format(new Date(cardItem?.date), "MMM dd, yyyy") : "Invalid date" : "Date field is empty")
+		}), /* @__PURE__ */ React.createElement(Box, {
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "center",
+			alignItems: "flex-end",
+			className: classes.itemContainer
+		}, /* @__PURE__ */ React.createElement(Typography, {
+			variant: "subtitle2",
+			className: classes.listItemPrimary
+		}, `$${cardItem?.amount || 0}`))), /* @__PURE__ */ React.createElement(Divider, null));
+	}) : /* @__PURE__ */ React.createElement("div", { className: clsx(classes.emptyStateDisplay, emptyStateClassName) }, /* @__PURE__ */ React.createElement(EmptyStateDisplay, {
+		primaryText: emptyStatePrimaryText ?? t("No results found"),
+		icon: emptyStateIcon,
+		iconSize: emptyStateIconSize,
+		imageSrc: emptyStateImageSrc,
+		imageWidth: emptyStateImageWidth
+	}))))) : /* @__PURE__ */ React.createElement(Fade, {
+		in: checked,
+		style: {
+			transformOrigin: "0 0 0",
+			width: "100%"
+		},
+		...checked ? { timeout: 1e3 } : {},
+		mountOnEnter: true,
+		unmountOnExit: true
+	}, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(SubCard, { cardInfo: cardItemData }))));
+};
+ItemsWidgetCard.propTypes = {
+	cardData: PropTypes$1.array.isRequired,
+	subCardsList: PropTypes$1.object.isRequired,
+	style: PropTypes$1.object
+};
+
+//#endregion
+export { ItemsWidgetCard as t };
+//# sourceMappingURL=widgets-DIWoZeqT.js.map

package/dist/widgets-DIWoZeqT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widgets-DIWoZeqT.js","names":["PropTypes"],"sources":["../src/UI/widgets/ItemsWidgetCard.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useItemSubCard } from '../../hooks/useItemSubCard';\nimport {\n  Box,\n  Divider,\n  Fade,\n  Grow,\n  IconButton,\n  List,\n  ListItem,\n  ListItemAvatar,\n  ListItemText,\n  makeStyles,\n  Typography,\n  useTheme\n} from '@material-ui/core';\nimport { format, isValid } from 'date-fns';\nimport { grey } from '@material-ui/core/colors';\nimport { AmbientCardTitle } from '../surfaces/cards/AmbientCard/AmbientCardTitle';\nimport { PropTypes } from 'prop-types';\nimport KeyboardArrowLeftIcon from '@material-ui/icons/esm/KeyboardArrowLeft';\nimport { getEllipseColor } from '../../utilities/style/colorConverter';\nimport { useTranslation } from 'react-i18next';\nimport clsx from 'clsx';\nimport { EmptyStateDisplay } from '../dataDisplay/EmptyStateDisplay';\n\nconst useStyles = makeStyles((theme) => ({\n  mainContainer: {\n    backgroundColor: theme.palette.background.paper,\n    padding: '0px',\n    gap: '0px',\n    order: 3,\n    alignSelf: 'stretch'\n  },\n  secondaryContainer: {\n    backgroundColor: theme.palette.background.paper,\n    padding: '0px',\n    gap: '0px',\n    order: 0,\n    alignSelf: 'stretch',\n    flexGrow: 0,\n    width: '100%'\n  },\n  listItemPrimary: {\n    fontSize: '14px',\n    fontWeight: 600\n  },\n  listItemSecondary: {\n    fontSize: '12px',\n    fontWeight: 400,\n    color: grey[500]\n  },\n  listContainer: {\n    width: '100%',\n    backgroundColor: theme.palette.background.paper,\n    padding: '0px'\n  },\n  listItem: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    padding: '8px 16px'\n  },\n  listItemAvatar: {\n    minWidth: '32px'\n  },\n  listItemText: {\n    margin: 0\n  },\n  itemContainer: {\n    paddingRight: '5px'\n  },\n  emptyStateDisplay: {\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  }\n}));\n\n/**\n * `ItemsWidgetCard` component\n */\nexport const ItemsWidgetCard = (props) => {\n  const [checked, setChecked] = useState(false);\n  const [cardItemData, setCardItemData] = useState();\n\n  const {\n    cardData,\n    subCardsList = {},\n    style,\n    headerColor,\n    emptyStatePrimaryText,\n    emptyStateImageSrc,\n    emptyStateIconSize,\n    emptyStateImageWidth,\n    emptyStateClassName,\n    emptyStateIcon,\n    title = 'Account Items',\n    subCardTypeField = 'type'\n  } = props;\n\n  const { SubCard, setSubCardType, subCardType, getSubCardInfo } =\n    useItemSubCard(subCardsList);\n  const classes = useStyles();\n  const theme = useTheme();\n  const { t } = useTranslation();\n\n  const handleChange = (accountItem) => {\n    setCardItemData(accountItem);\n    setSubCardType(accountItem?.[subCardTypeField] || '');\n    setChecked((prev) => !prev);\n  };\n\n  return (\n    <Box\n      display='flex'\n      flexDirection='column'\n      alignItems='flex-start'\n      flexGrow='1'\n      className={classes.mainContainer}\n      style={{\n        ...style,\n        height: '100%'\n      }}\n    >\n      <Box\n        display='flex'\n        flexDirection='row'\n        alignItems='center'\n        style={{\n          gap: '8px',\n          width: '100%',\n          padding: '8px',\n          backgroundColor:\n            headerColor && getEllipseColor(theme, headerColor, 'light'),\n          color: theme.palette.getContrastText(\n            getEllipseColor(theme, headerColor, 'light')\n          )\n        }}\n      >\n        {subCardType !== '' && (\n          <IconButton\n            aria-label='delete'\n            size='small'\n            onClick={() => handleChange('')}\n            style={{ marginLeft: '10px' }}\n            id='udpRecord-ItemsWidgetCard-delete'\n            udprecordid='udpRecord-ItemsWidgetCard-delete'\n          >\n            <KeyboardArrowLeftIcon fontSize='inherit' />\n          </IconButton>\n        )}\n        <AmbientCardTitle\n          title={subCardType !== '' ? subCardType : title}\n          style={{\n            backgroundColor:\n              headerColor && getEllipseColor(theme, headerColor, 'light')\n          }}\n        />\n      </Box>\n\n      {!checked ? (\n        <Grow\n          in={!checked}\n          style={{ transformOrigin: '0 0 0', width: '100%' }}\n          {...(!checked ? { timeout: 500 } : {})}\n          mountOnEnter\n          unmountOnExit\n        >\n          <Box\n            display='flex'\n            flexDirection='column'\n            alignItems='flex-start'\n            className={classes.secondaryContainer}\n          >\n            <List className={classes.listContainer}>\n              {cardData?.length > 0 ? (\n                cardData?.map((cardItem, index) => {\n                  const {\n                    defaultColor,\n                    textColor,\n                    backgroundColor,\n                    icon: Icon\n                  } = getSubCardInfo(cardItem?.accountItemName);\n\n                  return (\n                    <React.Fragment key={`${cardItem?.name}-${index}`}>\n                      <ListItem\n                        button\n                        className={classes.listItem}\n                        style={{\n                          backgroundColor\n                        }}\n                        onClick={() => handleChange(cardItem)}\n                        id={\n                          'udpRecord-ItemsWidgetCard-ListItem-' +\n                          cardItem?.name.replace(/\\s+/g, '') +\n                          '-' +\n                          cardItem?.businessObjectKey\n                        }\n                        udprecordid={\n                          'udpRecord-ItemsWidgetCard-ListItem-' +\n                          cardItem?.name.replace(/\\s+/g, '') +\n                          '-' +\n                          cardItem?.businessObjectKey\n                        }\n                      >\n                        <ListItemAvatar className={classes.listItemAvatar}>\n                          <Icon\n                            color={defaultColor}\n                            width='22px'\n                            height='22px'\n                          />\n                        </ListItemAvatar>\n                        <ListItemText\n                          className={classes.listItemText}\n                          primary={\n                            <Typography\n                              variant='subtitle2'\n                              className={classes?.listItemPrimary}\n                              style={{ color: textColor }}\n                            >\n                              {cardItem?.name}\n                            </Typography>\n                          }\n                          secondary={\n                            <Typography\n                              variant='caption'\n                              className={classes?.listItemSecondary}\n                            >\n                              {cardItem?.date\n                                ? isValid(new Date(cardItem?.date))\n                                  ? format(\n                                      new Date(cardItem?.date),\n                                      'MMM dd, yyyy'\n                                    )\n                                  : 'Invalid date'\n                                : 'Date field is empty'}\n                            </Typography>\n                          }\n                        />\n                        <Box\n                          display='flex'\n                          flexDirection='column'\n                          justifyContent='center'\n                          alignItems='flex-end'\n                          className={classes.itemContainer}\n                        >\n                          <Typography\n                            variant='subtitle2'\n                            className={classes.listItemPrimary}\n                          >\n                            {`$${cardItem?.amount || 0.0}`}\n                          </Typography>\n                        </Box>\n                      </ListItem>\n                      <Divider />\n                    </React.Fragment>\n                  );\n                })\n              ) : (\n                <div\n                  className={clsx(\n                    classes.emptyStateDisplay,\n                    emptyStateClassName\n                  )}\n                >\n                  <EmptyStateDisplay\n                    primaryText={emptyStatePrimaryText ?? t('No results found')}\n                    icon={emptyStateIcon}\n                    iconSize={emptyStateIconSize}\n                    imageSrc={emptyStateImageSrc}\n                    imageWidth={emptyStateImageWidth}\n                  />\n                </div>\n              )}\n            </List>\n          </Box>\n        </Grow>\n      ) : (\n        <Fade\n          in={checked}\n          style={{ transformOrigin: '0 0 0', width: '100%' }}\n          {...(checked ? { timeout: 1000 } : {})}\n          mountOnEnter\n          unmountOnExit\n        >\n          <Box>\n            <SubCard cardInfo={cardItemData} />\n          </Box>\n        </Fade>\n      )}\n    </Box>\n  );\n};\n\nItemsWidgetCard.propTypes = {\n  /**\n   * @type {?array} list of flags to render, required array object structure e.g\n   * [{\n   *  name: string, --> must be correspond with the name of the subCard object name\n   *  date: date | string,\n   *  amount: number | string\n   * }]\n   */\n  cardData: PropTypes.array.isRequired,\n\n  /**\n   * @type {?object} sub-cards detail content object, e.g\n   *\n   * CardNameXX and CardNameYY must be specified and corresponding with the name attribute in the card data\n   *\n     const subCardsList = {\n      CardNameXX: {\n        defaultColor: theme.palette.primary.main,\n        textColor: theme.palette.secondary.main,\n        component: props => {\n              return <PredefinedReactComponent {...props} />;\n        },\n        icon: LoanIcon,\n      },\n      CardNameYY: {\n        defaultColor: '#73368E',\n        textColor: '#FF9800',\n        component: props => {\n              return <PredefinedReactComponentTwo {...props} />;\n        },\n        icon: LoanIcon,\n      },\n   * }]\n  */\n  subCardsList: PropTypes.object.isRequired,\n\n  /**\n   * Optional, additional properties to apply some styles over the main container\n   */\n  style: PropTypes.object\n};\n"],"mappings":"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"}