udp-react-enterprise-component-library 25.18.1-beta.9 → 25.18.1

package/dist/dateUtils-DgLgnaVn.js

@@ -0,0 +1,62 @@
+import { DateTime } from "luxon";
+
+//#region src/UI/widgets/utils/dateUtils.js
+function formatDate(value, formatStr = "") {
+	try {
+		let date = new Date(value);
+		const day = date.toLocaleString("default", { day: "2-digit" });
+		const month = date.toLocaleString("default", { month: "short" });
+		const year = date.toLocaleString("default", { year: "numeric" });
+		switch (formatStr.toLowerCase()) {
+			case "mon dd, yyyy": return `${day} ${month}, ${year}`;
+			case "dd/mm/yyyy": return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
+			case "yyyy-mm-dd": return date.toISOString().split("T")[0];
+			default: return "";
+		}
+	} catch (error) {
+		return "";
+	}
+}
+/**
+* Creates a Date object based on an ISO 8601 date string.
+* @param dateString A ISO 8601 date string. EX: yyyy-MM-ddThh:mm:ss[Z|offset]
+* @returns A date object, or null if the format was invalid.
+*/
+const getDateFromString = (dateString) => {
+	if (!dateString || dateString.length === 0) return null;
+	const date = DateTime.fromISO(dateString);
+	return date ? date.toJSDate() : null;
+};
+/**
+* Formats a date string by converting it to a date in the specified time zone,
+* stripping out the time element and returning a localized date string.
+* @param date A Date or ISO 8601 date string. EX: yyyy-MM-ddThh:mm:ss[Z|offset]
+* @param timeZone An IANA time zone id. If supplied, convert the date into the specified time zone,
+* otherwise convert to local browser time.
+* @returns A date string without time based on the supplied time zone and the
+* user's browser locale settings.
+*/
+const getLocalizedDateString = (date, timeZone = "local") => {
+	const convertedDate = date instanceof Date ? date : getDateFromString(date);
+	return convertedDate ? DateTime.fromJSDate(convertedDate, { zone: timeZone }).toLocaleString(DateTime.DATE_SHORT) : "";
+};
+/**
+* Formats a date string by converting it to a date in the specified timezone,
+* and returning a string with the localized date and time.
+* @param date A Date or ISO 8601 date string. EX: yyyy-MM-ddThh:mm:ss[Z|offset]
+* @param delimiter If supplied, split the date and time by this string when returned.
+* @param timeZone If supplied, convert the date into the specified IANA time zone,
+* otherwise convert to local browser time.
+* @returns A date and time string based on the user's browser locale settings.
+*/
+const getLocalizedDateTimeString = (date, delimiter = null, timeZone = "local", includeOffset = false) => {
+	const convertedDate = date instanceof Date ? date : getDateFromString(date);
+	if (convertedDate === null) return "";
+	const convertedDateTime = DateTime.fromJSDate(convertedDate, { zone: timeZone });
+	if (delimiter !== null) return convertedDateTime.toLocaleString(DateTime.DATE_SHORT) + delimiter + convertedDateTime.toLocaleString(DateTime.TIME_WITH_SECONDS) + (includeOffset ? " " + convertedDateTime.offsetNameShort : "");
+	else return convertedDateTime.toLocaleString(DateTime.DATETIME_SHORT_WITH_SECONDS) + (includeOffset ? " " + convertedDateTime.offsetNameShort : "");
+};
+
+//#endregion
+export { getLocalizedDateTimeString as i, getDateFromString as n, getLocalizedDateString as r, formatDate as t };
+//# sourceMappingURL=dateUtils-DgLgnaVn.js.map

package/dist/dateUtils-DgLgnaVn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateUtils-DgLgnaVn.js","names":[],"sources":["../src/UI/widgets/utils/dateUtils.js"],"sourcesContent":["import { DateTime } from 'luxon'\n\nexport function formatDateLong(value) {\n  try {\n    let date = new Date(value);\n    const day = date.toLocaleString('default', { day: '2-digit' });\n    const month = date.toLocaleString('default', { month: 'short' });\n    const year = date.toLocaleString('default', { year: 'numeric' });\n    const dayOfWeek = date.toLocaleString('default', { weekday: 'long' });\n    return `${day} ${month}, ${year} (${dayOfWeek})`;\n  } catch (error) {\n    return '';\n  }\n}\n\nexport function formatDate(value, formatStr = '') {\n  try {\n    let date = new Date(value);\n    const day = date.toLocaleString('default', { day: '2-digit' });\n    const month = date.toLocaleString('default', { month: 'short' });\n    const year = date.toLocaleString('default', { year: 'numeric' });\n\n    switch (formatStr.toLowerCase()) {\n      case 'mon dd, yyyy':\n        return `${day} ${month}, ${year}`;\n      case 'dd/mm/yyyy':\n        return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;\n      case 'yyyy-mm-dd':\n        return date.toISOString().split('T')[0];\n      default:\n        return '';\n    }\n  } catch (error) {\n    return '';\n  }\n}\n\nexport function getDaysDiff(dateOne, dateTwo) {\n  const d1 = new Date(dateOne);\n  const d2 = new Date(dateTwo);\n  const diff = d2.getTime() - d1.getTime();\n\n  return diff / (1000 * 60 * 60 * 24);\n}\n\n/**\n * Creates a Date object based on an ISO 8601 date string.\n * @param dateString A ISO 8601 date string. EX: yyyy-MM-ddThh:mm:ss[Z|offset]\n * @returns A date object, or null if the format was invalid.\n */\nexport const getDateFromString = (dateString) => {\n  if (!dateString || dateString.length === 0) {\n    return null;\n  }\n\n  const date = DateTime.fromISO(dateString);\n\n  return date ? date.toJSDate() : null;\n};\n\n/**\n * Formats a date string by converting it to a date in the specified time zone,\n * stripping out the time element and returning a localized date string.\n * @param date A Date or ISO 8601 date string. EX: yyyy-MM-ddThh:mm:ss[Z|offset]\n * @param timeZone An IANA time zone id. If supplied, convert the date into the specified time zone,\n * otherwise convert to local browser time.\n * @returns A date string without time based on the supplied time zone and the\n * user's browser locale settings.\n */\nexport const getLocalizedDateString = (date, timeZone = 'local') => {\n  const convertedDate = date instanceof Date ? date : getDateFromString(date);\n\n  return convertedDate\n    ? DateTime.fromJSDate(convertedDate, { zone: timeZone }).toLocaleString(DateTime.DATE_SHORT)\n    : '';\n};\n\n/**\n * Converts a date string to a date in the specified timezone,\n * and returning a converted date with the localized date and time.\n * @param date A Date or ISO 8601 date string. EX: yyyy-MM-ddThh:mm:ss[Z|offset]\n * @param timeZone If supplied, convert the date into the specified IANA time zone,\n * otherwise convert to local browser time.\n * @returns A converted date and time based on the user's browser locale settings.\n */\nexport const getLocalizedDateTime = (date, timeZone = 'local') => {\n  const convertedDate = date instanceof Date ? date : getDateFromString(date);\n  if (convertedDate === null) {\n    return '';\n  }\n  const convertedDateTime = DateTime.fromJSDate(convertedDate, { zone: timeZone });\n\n  return convertedDateTime;\n};\n\n/**\n * Formats a date string by converting it to a date in the specified timezone,\n * and returning a string with the localized date and time.\n * @param date A Date or ISO 8601 date string. EX: yyyy-MM-ddThh:mm:ss[Z|offset]\n * @param delimiter If supplied, split the date and time by this string when returned.\n * @param timeZone If supplied, convert the date into the specified IANA time zone,\n * otherwise convert to local browser time.\n * @returns A date and time string based on the user's browser locale settings.\n */\nexport const getLocalizedDateTimeString = (\n  date,\n  delimiter = null,\n  timeZone = 'local',\n  includeOffset = false,\n) => {\n  const convertedDate = date instanceof Date ? date : getDateFromString(date);\n  if (convertedDate === null) {\n    return '';\n  }\n  const convertedDateTime = DateTime.fromJSDate(convertedDate, { zone: timeZone });\n\n  if (delimiter !== null) {\n    return (\n      convertedDateTime.toLocaleString(DateTime.DATE_SHORT) +\n      delimiter +\n      convertedDateTime.toLocaleString(DateTime.TIME_WITH_SECONDS) +\n      (includeOffset ? ' ' + convertedDateTime.offsetNameShort : '')\n    );\n  } else {\n    return (\n      convertedDateTime.toLocaleString(DateTime.DATETIME_SHORT_WITH_SECONDS) +\n      (includeOffset ? ' ' + convertedDateTime.offsetNameShort : '')\n    );\n  }\n};\n\n/**\n * Formats a date string by converting it to a date in the specified time zone,\n * and returning a string as the localized time.\n * @param date A Date or ISO 8601 date string. EX: yyyy-MM-ddThh:mm:ss[Z|offset]\n * @param timeZone An IANA time zone id. If supplied, convert the date into the specified time zone,\n * otherwise convert to local browser time.\n * @returns A time string without the date based on the supplied time zone and user's\n * browser locale settings.\n */\nexport const getLocalizedTimeString = (date, timeZone = 'local') => {\n  const convertedDate = date instanceof Date ? date : getDateFromString(date);\n\n  return convertedDate\n    ? DateTime.fromJSDate(convertedDate, { zone: timeZone }).toLocaleString(\n        DateTime.TIME_WITH_SECONDS,\n      )\n    : '';\n};\n"],"mappings":";;;AAeA,SAAgB,WAAW,OAAO,YAAY,IAAI;AAChD,KAAI;EACF,IAAI,OAAO,IAAI,KAAK,MAAM;EAC1B,MAAM,MAAM,KAAK,eAAe,WAAW,EAAE,KAAK,WAAW,CAAC;EAC9D,MAAM,QAAQ,KAAK,eAAe,WAAW,EAAE,OAAO,SAAS,CAAC;EAChE,MAAM,OAAO,KAAK,eAAe,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhE,UAAQ,UAAU,aAAa,EAA/B;GACE,KAAK,eACH,QAAO,GAAG,IAAI,GAAG,MAAM,IAAI;GAC7B,KAAK,aACH,QAAO,GAAG,KAAK,SAAS,CAAC,GAAG,KAAK,UAAU,GAAG,EAAE,GAAG,KAAK,aAAa;GACvE,KAAK,aACH,QAAO,KAAK,aAAa,CAAC,MAAM,IAAI,CAAC;GACvC,QACE,QAAO;;UAEJ,OAAO;AACd,SAAO;;;;;;;;AAiBX,MAAa,qBAAqB,eAAe;AAC/C,KAAI,CAAC,cAAc,WAAW,WAAW,EACvC,QAAO;CAGT,MAAM,OAAO,SAAS,QAAQ,WAAW;AAEzC,QAAO,OAAO,KAAK,UAAU,GAAG;;;;;;;;;;;AAYlC,MAAa,0BAA0B,MAAM,WAAW,YAAY;CAClE,MAAM,gBAAgB,gBAAgB,OAAO,OAAO,kBAAkB,KAAK;AAE3E,QAAO,gBACH,SAAS,WAAW,eAAe,EAAE,MAAM,UAAU,CAAC,CAAC,eAAe,SAAS,WAAW,GAC1F;;;;;;;;;;;AA8BN,MAAa,8BACX,MACA,YAAY,MACZ,WAAW,SACX,gBAAgB,UACb;CACH,MAAM,gBAAgB,gBAAgB,OAAO,OAAO,kBAAkB,KAAK;AAC3E,KAAI,kBAAkB,KACpB,QAAO;CAET,MAAM,oBAAoB,SAAS,WAAW,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhF,KAAI,cAAc,KAChB,QACE,kBAAkB,eAAe,SAAS,WAAW,GACrD,YACA,kBAAkB,eAAe,SAAS,kBAAkB,IAC3D,gBAAgB,MAAM,kBAAkB,kBAAkB;KAG7D,QACE,kBAAkB,eAAe,SAAS,4BAA4B,IACrE,gBAAgB,MAAM,kBAAkB,kBAAkB"}

package/dist/defaultTabs-DBL-GFKY.js

@@ -0,0 +1,93 @@
+import { n as FluentSimpleTab, t as FluentSimpleTabs } from "./FluentSimpleTabs-BghyAzdO.js";
+import { t as FluentTabPanel } from "./FluentTabPanel-C8kO8Xo-.js";
+import React, { useState } from "react";
+import { Box, Tab, Typography, lighten, makeStyles, styled } from "@material-ui/core";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+
+//#region src/UI/navigation/tabs/defaultTabs/FluentTabUtility.jsx
+function a11yProps$1(index) {
+	return {
+		id: `simple-tab-${index}`,
+		"aria-controls": `simple-tabpanel-${index}`
+	};
+}
+const useStyles = makeStyles((theme) => ({ root: {
+	flexGrow: 1,
+	backgroundColor: theme.palette.background.paper
+} }));
+const FluentTabUtility = (props, ...otherProps) => {
+	const classes = useStyles();
+	const { TabList, block, className, variant, color, FluentSimpleTabsProps } = props;
+	const [value, setValue] = useState(0);
+	const handleChange = (event, newValue) => {
+		setValue(newValue);
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, className) }, /* @__PURE__ */ React.createElement(FluentSimpleTabs, {
+		value,
+		block,
+		onChange: handleChange,
+		...FluentSimpleTabsProps,
+		...otherProps
+	}, TabList.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(FluentSimpleTab, {
+			...otherProps,
+			key: index,
+			label: item.label,
+			icon: item.icon,
+			block,
+			badgeContent: item.badgeContent,
+			variant,
+			color,
+			...a11yProps$1(index)
+		});
+	})), TabList.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(FluentTabPanel, {
+			block,
+			value,
+			index,
+			key: index
+		}, item.child);
+	}));
+};
+
+//#endregion
+//#region src/UI/navigation/tabs/defaultTabs/FluentTabPanels.jsx
+const a11yProps = (index) => {
+	return {
+		id: `simple-tab-${index}`,
+		"aria-controls": `simple-tabpanel-${index}`
+	};
+};
+/**
+* @type {import('@material-ui/core').StyledComponentProps<"root" | "labelIcon" | "textColorInherit" | "textColorPrimary" | "textColorSecondary" | "selected" | "disabled" | "fullWidth" | "wrapped" | "wrapper">}
+*/
+const StyledTab = styled(Tab)(({ theme, style }) => ({
+	textTransform: "none",
+	"&.Mui-selected": {
+		backgroundColor: lighten(theme.palette.secondary.light, .9),
+		color: theme.palette.primary.main
+	},
+	backgroundColor: theme.palette.background.paper,
+	...style
+}));
+const FluentTabPanels = (props) => {
+	const { children, value, index, sx, ...other } = props;
+	return /* @__PURE__ */ React.createElement("div", {
+		role: "tabpanel",
+		hidden: value !== index,
+		id: `simple-tabpanel-${index}`,
+		"aria-labelledby": `simple-tab-${index}`,
+		...other
+	}, value === index && /* @__PURE__ */ React.createElement(Box, { sx: sx ? { ...sx } : { p: 3 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, children)));
+};
+FluentTabPanels.propTypes = {
+	children: PropTypes.node,
+	index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+	value: PropTypes.number.isRequired,
+	sx: PropTypes.object
+};
+
+//#endregion
+export { FluentTabUtility as i, StyledTab as n, a11yProps as r, FluentTabPanels as t };
+//# sourceMappingURL=defaultTabs-DBL-GFKY.js.map

package/dist/defaultTabs-DBL-GFKY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultTabs-DBL-GFKY.js","names":["a11yProps"],"sources":["../src/UI/navigation/tabs/defaultTabs/FluentTabUtility.jsx","../src/UI/navigation/tabs/defaultTabs/FluentTabPanels.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { FluentSimpleTabs } from '../defaultTabs/FluentSimpleTabs';\nimport { FluentSimpleTab } from '../defaultTabs/FluentSimpleTab';\nimport { FluentTabPanel } from '../defaultTabs/FluentTabPanel';\nimport clsx from 'clsx';\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    backgroundColor: theme.palette.background.paper\n  }\n}));\n\nexport const FluentTabUtility = (props, ...otherProps) => {\n  const classes = useStyles();\n  const { TabList, block, className, variant, color, FluentSimpleTabsProps } =\n    props;\n\n  const [value, setValue] = useState(0);\n\n  const handleChange = (event, newValue) => {\n    setValue(newValue);\n  };\n\n  return (\n    <div className={clsx(classes.root, className)}>\n      <FluentSimpleTabs\n        value={value}\n        block={block}\n        onChange={handleChange}\n        {...FluentSimpleTabsProps}\n        {...otherProps}\n      >\n        {TabList.map((item, index) => {\n          return (\n            <FluentSimpleTab\n              {...otherProps}\n              key={index}\n              label={item.label}\n              icon={item.icon}\n              block={block}\n              badgeContent={item.badgeContent}\n              variant={variant}\n              color={color}\n              {...a11yProps(index)}\n            />\n          );\n        })}\n      </FluentSimpleTabs>\n\n      {TabList.map((item, index) => {\n        return (\n          <FluentTabPanel block={block} value={value} index={index} key={index}>\n            {item.child}\n          </FluentTabPanel>\n        );\n      })}\n    </div>\n  );\n};\n","import React from 'react'\nimport { Box, Tab, Typography, styled, lighten } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nexport const a11yProps = (index) => {\n  return {\n    id: `simple-tab-${index}`,\n    'aria-controls': `simple-tabpanel-${index}`,\n  };\n}\n\n/**\n * @type {import('@material-ui/core').StyledComponentProps<\"root\" | \"labelIcon\" | \"textColorInherit\" | \"textColorPrimary\" | \"textColorSecondary\" | \"selected\" | \"disabled\" | \"fullWidth\" | \"wrapped\" | \"wrapper\">}\n */\nexport const StyledTab = styled(Tab)(({ theme, style }) => ({\n  textTransform: \"none\",\n  '&.Mui-selected': {\n    backgroundColor: lighten(theme.palette.secondary.light, 0.9),\n    color: theme.palette.primary.main,\n  },\n  backgroundColor: theme.palette.background.paper,\n  ...style\n}));\n\nexport const FluentTabPanels = (props) => {\n  const { children, value, index, sx, ...other } = props;\n\n  return (\n    <div\n      role=\"tabpanel\"\n      hidden={value !== index}\n      id={`simple-tabpanel-${index}`}\n      aria-labelledby={`simple-tab-${index}`}\n      {...other}\n    >\n      {value === index && (\n        <Box sx={sx ? { ...sx } : { p: 3 }}>\n          <Typography variant=\"subtitle2\">{children}</Typography>\n        </Box>\n      )}\n    </div>\n  );\n}\n\nFluentTabPanels.propTypes = {\n  children: PropTypes.node,\n  index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,\n  value: PropTypes.number.isRequired,\n  sx: PropTypes.object,\n}\n\n"],"mappings":";;;;;;;;AAOA,SAASA,YAAU,OAAO;AACxB,QAAO;EACL,IAAI,cAAc;EAClB,iBAAiB,mBAAmB;EACrC;;AAGH,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM;CACJ,UAAU;CACV,iBAAiB,MAAM,QAAQ,WAAW;CAC3C,EACF,EAAE;AAEH,MAAa,oBAAoB,OAAO,GAAG,eAAe;CACxD,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,SAAS,OAAO,WAAW,SAAS,OAAO,0BACjD;CAEF,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CAErC,MAAM,gBAAgB,OAAO,aAAa;AACxC,WAAS,SAAS;;AAGpB,QACE,oCAAC,SAAI,WAAW,KAAK,QAAQ,MAAM,UAAU,IAC3C,oCAAC;EACQ;EACA;EACP,UAAU;EACV,GAAI;EACJ,GAAI;IAEH,QAAQ,KAAK,MAAM,UAAU;AAC5B,SACE,oCAAC;GACC,GAAI;GACJ,KAAK;GACL,OAAO,KAAK;GACZ,MAAM,KAAK;GACJ;GACP,cAAc,KAAK;GACV;GACF;GACP,GAAIA,YAAU,MAAM;IACpB;GAEJ,CACe,EAElB,QAAQ,KAAK,MAAM,UAAU;AAC5B,SACE,oCAAC;GAAsB;GAAc;GAAc;GAAO,KAAK;KAC5D,KAAK,MACS;GAEnB,CACE;;;;;AC7DV,MAAa,aAAa,UAAU;AAClC,QAAO;EACL,IAAI,cAAc;EAClB,iBAAiB,mBAAmB;EACrC;;;;;AAMH,MAAa,YAAY,OAAO,IAAI,EAAE,EAAE,OAAO,aAAa;CAC1D,eAAe;CACf,kBAAkB;EAChB,iBAAiB,QAAQ,MAAM,QAAQ,UAAU,OAAO,GAAI;EAC5D,OAAO,MAAM,QAAQ,QAAQ;EAC9B;CACD,iBAAiB,MAAM,QAAQ,WAAW;CAC1C,GAAG;CACJ,EAAE;AAEH,MAAa,mBAAmB,UAAU;CACxC,MAAM,EAAE,UAAU,OAAO,OAAO,IAAI,GAAG,UAAU;AAEjD,QACE,oCAAC;EACC,MAAK;EACL,QAAQ,UAAU;EAClB,IAAI,mBAAmB;EACvB,mBAAiB,cAAc;EAC/B,GAAI;IAEH,UAAU,SACT,oCAAC,OAAI,IAAI,KAAK,EAAE,GAAG,IAAI,GAAG,EAAE,GAAG,GAAG,IAChC,oCAAC,cAAW,SAAQ,eAAa,SAAsB,CACnD,CAEJ;;AAIV,gBAAgB,YAAY;CAC1B,UAAU,UAAU;CACpB,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC,CAAC;CACjE,OAAO,UAAU,OAAO;CACxB,IAAI,UAAU;CACf"}

package/dist/diffChecker/index.js

@@ -1,4 +1,3 @@
-import "../verticalStyles-CUPjFvB1.js";
 import { t as DiffChecker } from "../DiffChecker-D4AQHYDS.js";
 
 export { DiffChecker };

package/dist/enums/index.js

@@ -1,10 +1,10 @@
-import { n as UdpPageEnums, t as ClickOpenEnums } from "../pageEnums-CA-HlW3W.js";
+import { n as UdpPageEnums, t as ClickOpenEnums } from "../pageEnums-DHCYa0ey.js";
 import { t as PropertyTypeEnum } from "../propertyTypeEnums-Dys-84NL.js";
 import { t as InputFieldType } from "../InputFieldTypeEnums-Mg684vvi.js";
-import { A as SplitScreenTypeEnums, C as RoleIdEnums, D as SearchSortDirection, E as SearchGroupingType, F as UdpReminderFiledForType, I as VerticalEnums, L as VisibilityTypeEnums, M as TreeViewModeEnums, N as UdpEnums, O as SearchValueType, P as UdpKeywordEnums, S as ProductNameEnums, T as RoleTypeEnums, _ as NodeActionTriggerEnums, a as EntityAttributeEnums, b as PanelPositionEnums, c as GridStateTypeEnums, d as LogicalSearchOperatorEnums, f as LookupTypeEnums, g as NodeActionEnums, h as MenuTypeEnums, i as DeviceTypeEnums, j as TenantTypeEnums, k as SeverityTypeEnums, l as JobStatusIdMapping, m as MenuItemEnums, n as CardinalityTypeEnums, o as GridEnums, p as LookupTypeIdEnums, r as ContainerTypeEnums, s as GridExcelStyleEnums, t as ADUserTypeEnums, u as JobTypeIdMapping, v as NodeGroupOutlierEnums, w as RoleNameEnums, x as ProductEnums, y as NodeGroupTypeEnums } from "../unitySystemEnums-DQSkCr3D.js";
+import { A as SeverityTypeEnums, B as UdpSearchEnums, C as ProductNameEnums, D as SearchGroupingType, E as RoleTypeEnums, F as TransactionUiActionTypeEnums, H as UnityProducts, I as TreeViewModeEnums, L as UdpEnums, M as TenantTypeEnums, N as TransactionActionTypeEnums, O as SearchSortDirection, P as TransactionEventTypeEnums, R as UdpKeywordEnums, S as ProductEnums, T as RoleNameEnums, U as VerticalEnums, V as UdpTransactionActionEnums, W as VisibilityTypeEnums, _ as NodeActionEnums, a as EMPTY_GUID, b as NodeGroupTypeEnums, c as GridExcelStyleEnums, d as JobTypeIdMapping, f as LogicalSearchOperatorEnums, g as MenuTypeEnums, h as MenuItemEnums, i as DeviceTypeEnums, j as SplitScreenTypeEnums, k as SearchValueType, l as GridStateTypeEnums, m as LookupTypeIdEnums, n as CardinalityTypeEnums, o as EntityAttributeEnums, p as LookupTypeEnums, r as ContainerTypeEnums, s as GridEnums, t as ADUserTypeEnums, u as JobStatusIdMapping, v as NodeActionTriggerEnums, w as RoleIdEnums, x as PanelPositionEnums, y as NodeGroupOutlierEnums, z as UdpReminderFiledForType } from "../unitySystemEnums-CZDCsD5t.js";
 import { n as PaymentTenderTypeEnum, r as PaymentMethodTypeEnum, t as PaymentVendorFactoryEnum } from "../paymentVendorFactoryEnum-CwnzkF9A.js";
 import { t as FilterElementParamType } from "../searchEnums-BTFUwf6v.js";
-import { n as UnitTypeEnums, t as UnitStateType } from "../workflowEnums-Ce66RCVc.js";
-import { t as TagEnums } from "../tagEnums-BG8WEzei.js";
+import { n as UnitTypeEnums, t as UnitStateType } from "../workflowEnums-BJmSE_P8.js";
+import { t as TagEnums } from "../tagEnums-Bc9xOKJw.js";
 
-export { ADUserTypeEnums, CardinalityTypeEnums, ClickOpenEnums, ContainerTypeEnums, DeviceTypeEnums, EntityAttributeEnums, FilterElementParamType, GridEnums, GridExcelStyleEnums, GridStateTypeEnums, InputFieldType, JobStatusIdMapping, JobTypeIdMapping, LogicalSearchOperatorEnums, LookupTypeEnums, LookupTypeIdEnums, MenuItemEnums, MenuTypeEnums, NodeActionEnums, NodeActionTriggerEnums, NodeGroupOutlierEnums, NodeGroupTypeEnums, PanelPositionEnums, PaymentMethodTypeEnum, PaymentTenderTypeEnum, PaymentVendorFactoryEnum, ProductEnums, ProductNameEnums, PropertyTypeEnum, RoleIdEnums, RoleNameEnums, RoleTypeEnums, SearchGroupingType, SearchSortDirection, SearchValueType, SeverityTypeEnums, SplitScreenTypeEnums, TagEnums, TenantTypeEnums, TreeViewModeEnums, UdpEnums, UdpKeywordEnums, UdpPageEnums, UdpReminderFiledForType, UnitStateType, UnitTypeEnums, VerticalEnums, VisibilityTypeEnums };
+export { ADUserTypeEnums, CardinalityTypeEnums, ClickOpenEnums, ContainerTypeEnums, DeviceTypeEnums, EMPTY_GUID, EntityAttributeEnums, FilterElementParamType, GridEnums, GridExcelStyleEnums, GridStateTypeEnums, InputFieldType, JobStatusIdMapping, JobTypeIdMapping, LogicalSearchOperatorEnums, LookupTypeEnums, LookupTypeIdEnums, MenuItemEnums, MenuTypeEnums, NodeActionEnums, NodeActionTriggerEnums, NodeGroupOutlierEnums, NodeGroupTypeEnums, PanelPositionEnums, PaymentMethodTypeEnum, PaymentTenderTypeEnum, PaymentVendorFactoryEnum, ProductEnums, ProductNameEnums, PropertyTypeEnum, RoleIdEnums, RoleNameEnums, RoleTypeEnums, SearchGroupingType, SearchSortDirection, SearchValueType, SeverityTypeEnums, SplitScreenTypeEnums, TagEnums, TenantTypeEnums, TransactionActionTypeEnums, TransactionEventTypeEnums, TransactionUiActionTypeEnums, TreeViewModeEnums, UdpEnums, UdpKeywordEnums, UdpPageEnums, UdpReminderFiledForType, UdpSearchEnums, UdpTransactionActionEnums, UnitStateType, UnitTypeEnums, UnityProducts, VerticalEnums, VisibilityTypeEnums };

package/dist/fileViewer-CtY7cOmL.js

@@ -0,0 +1,385 @@
+import { t as Typography$1 } from "./Typography-FuShOop3.js";
+import { S as getIconFromName } from "./TreeUtilities-jEhtZNg5.js";
+import { n as SideSheet } from "./SideSheet-CDXVa_Kr.js";
+import { t as AmbientCard } from "./AmbientCard-DhAiVDYD.js";
+import { t as IconButtonWithTooltip } from "./IconButtonWithToolTip-DswviiJB.js";
+import { t as AmbientAlert } from "./AmbientAlert-Ba_vefUx.js";
+import { t as PDFViewer } from "./PDFViewer-aOheQArE.js";
+import React, { useCallback, useMemo, useState } from "react";
+import { Dialog, makeStyles } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
+
+//#region src/UI/fileViewer/utils/fileTypes.js
+const imageExtension = [
+	"png",
+	"jpeg",
+	"jpg",
+	"jpe",
+	"jif",
+	"jfif",
+	"jfi",
+	"gif",
+	"raw",
+	"svg",
+	"ttif",
+	"tif",
+	"webp",
+	"arw",
+	"sr2",
+	"nrw",
+	"k25",
+	"bmp",
+	"dib",
+	"heif",
+	"heic",
+	"ind",
+	"indd",
+	"indt",
+	"jp2",
+	"j2k",
+	"jpf",
+	"jpm",
+	"mj2",
+	"svgz",
+	"ai",
+	"eps"
+];
+
+//#endregion
+//#region src/UI/fileViewer/utils/fileUtils.js
+const handleDownloadFile = (fileUrl, fileName) => {
+	const a = document.createElement("a");
+	a.style.display = "none";
+	a.href = fileUrl;
+	a.download = fileName;
+	document.body.appendChild(a);
+	a.click();
+	window.URL.revokeObjectURL(fileUrl);
+};
+const validateFilesImageType = (files = [], fileExtensionField) => {
+	let type = "image";
+	files.forEach((file) => {
+		if (!imageExtension.includes(file?.[fileExtensionField])) {
+			type = "invalid";
+			return;
+		}
+	});
+	return type;
+};
+
+//#endregion
+//#region src/UI/fileViewer/imageSlider/ImageFooter.jsx
+const useStyles$2 = makeStyles((theme) => ({
+	secondaryText: { color: theme.palette.text.secondary },
+	description: {
+		margin: theme.spacing(2),
+		display: "flex",
+		flexDirection: "column",
+		gap: theme.spacing(1)
+	},
+	pageAction: {
+		display: "flex",
+		justifyContent: "space-between",
+		gap: theme.spacing(1),
+		alignItems: "center"
+	}
+}));
+const ImageFooter = (props) => {
+	const { images, currentImageObj, hidePrimaryText, hideSecondaryText, handleViewImage, currentImageIndex } = props;
+	const classes = useStyles$2();
+	const { t } = useTranslation();
+	const showItem = useMemo(() => {
+		const showPrimaryText = !hidePrimaryText && currentImageObj?.primaryText;
+		const showSecondaryText = !hideSecondaryText && currentImageObj?.secondaryText;
+		const showPageAction = images?.length > 1;
+		return {
+			footer: showPageAction || showPrimaryText || showSecondaryText,
+			primaryText: showPrimaryText,
+			secondaryText: showSecondaryText,
+			pageAction: showPageAction
+		};
+	}, [
+		currentImageObj,
+		hidePrimaryText,
+		hideSecondaryText,
+		images
+	]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, showItem?.footer && /* @__PURE__ */ React.createElement("div", { className: classes.description }, showItem?.primaryText && /* @__PURE__ */ React.createElement(Typography$1, { variant: "h6" }, currentImageObj?.primaryText), showItem?.secondaryText && /* @__PURE__ */ React.createElement(Typography$1, {
+		variant: "subtitle1",
+		className: classes.secondaryText
+	}, currentImageObj?.secondaryText), showItem?.pageAction && /* @__PURE__ */ React.createElement("div", { className: classes.pageAction }, /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
+		icon: getIconFromName("ChevronLeft"),
+		title: t("Previous"),
+		disabled: currentImageIndex == 0,
+		onClick: () => {
+			handleViewImage(true);
+		},
+		id: "udpRecord-ImageSlider-PreviousBtn",
+		udprecordid: "udpRecord-ImageSlider-PreviousBtn"
+	}), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography$1, null, currentImageIndex + 1, " ", t("of"), " ", images?.length ?? 0)), /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
+		icon: getIconFromName("ChevronRight"),
+		title: t("Next"),
+		disabled: currentImageIndex === images?.length - 1,
+		onClick: () => {
+			handleViewImage();
+		},
+		id: "udpRecord-ImageSlider-NextBtn",
+		udprecordid: "udpRecord-ImageSlider-NextBtn"
+	}))));
+};
+
+//#endregion
+//#region src/UI/fileViewer/imageSlider/Image.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	imageWrapper: {
+		flex: "1 1 auto",
+		overflow: "hidden",
+		position: "relative",
+		margin: theme.spacing(2)
+	},
+	image: {
+		objectFit: "contain",
+		width: "100%",
+		height: "100%",
+		position: "absolute",
+		top: 0,
+		left: 0
+	},
+	cardContent: {
+		display: "flex",
+		flexDirection: "column",
+		overflow: "hidden",
+		height: "100%",
+		background: theme.palette.background.paper
+	}
+}));
+const Image = (props) => {
+	const { imageObj, hidePrimaryText, hideSecondaryText } = props;
+	const classes = useStyles$1();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.cardContent }, /* @__PURE__ */ React.createElement("div", { className: classes.imageWrapper }, /* @__PURE__ */ React.createElement("img", {
+		src: imageObj?.filePath,
+		loading: "lazy",
+		alt: `${imageObj?.fileName}`,
+		className: classes.image
+	})), /* @__PURE__ */ React.createElement(ImageFooter, {
+		currentImageObj: imageObj,
+		hidePrimaryText,
+		hideSecondaryText
+	}));
+};
+
+//#endregion
+//#region src/UI/fileViewer/imageSlider/ImageViewerSideSheet.jsx
+const ImageViewerSideSheet = (props) => {
+	const { title, width, imageObj, open, onClose, hideDownload, hidePrimaryText, hideSecondaryText } = props;
+	const { t } = useTranslation();
+	const handleDownloadImage = useCallback(() => {
+		handleDownloadFile(imageObj?.filePath, imageObj?.fileName);
+	}, [imageObj]);
+	return /* @__PURE__ */ React.createElement(SideSheet, {
+		title: title ?? t("Image Viewer"),
+		buttonLabel: hideDownload ? null : t("Download"),
+		width: width ?? "90vw",
+		onSubmit: handleDownloadImage,
+		open,
+		onClose,
+		contentHeight: "100%"
+	}, /* @__PURE__ */ React.createElement(Image, {
+		imageObj,
+		hidePrimaryText,
+		hideSecondaryText
+	}));
+};
+
+//#endregion
+//#region src/UI/fileViewer/imageSlider/ImageSlider.jsx
+const useStyles = makeStyles((theme) => ({
+	root: { backgroundColor: theme.palette.background.paper },
+	imagesWrapper: {
+		display: "flex",
+		width: "100%",
+		height: "100%",
+		overflow: "hidden",
+		alignItems: "center"
+	},
+	imageSection: {
+		width: "100%",
+		height: "100%"
+	},
+	image: {
+		objectFit: "contain",
+		display: "block",
+		flexShrink: 0,
+		flexGrow: 0,
+		transition: "translate 300ms ease-in-out"
+	},
+	openSideSheetIcon: {
+		display: "block",
+		position: "absolute",
+		top: (props) => props?.title ? 64 : 8,
+		right: 8,
+		zIndex: 3,
+		backgroundColor: theme.palette.background.paper
+	},
+	dialogContent: {
+		overflow: "hidden",
+		width: "100vw",
+		height: "100vh",
+		display: "flex",
+		flexDirection: "column"
+	},
+	closeDialog: { margin: theme.spacing(1) },
+	dialogImageSection: {
+		flex: 2,
+		height: "100%"
+	}
+}));
+const defaultFieldMapping$1 = {
+	filePath: "filePath",
+	fileName: "fileName",
+	primaryText: "primaryText",
+	secondaryText: "secondaryText"
+};
+const ImageSlider = (props) => {
+	const { title, images, fieldMapping = defaultFieldMapping$1, sideSheetTitle, sideSheetWidth, hideDownload, hidePrimaryText, hideSecondaryText, hidePrimaryTextInExpandMode, hideSecondaryTextInExpandMode, expandInSideSheet = true } = props;
+	const classes = useStyles(props);
+	const { t } = useTranslation();
+	const [currentImageIndex, setCurrentImageIndex] = useState(0);
+	const [openSideSheet, setOpenSideSheet] = useState(false);
+	const handleViewImage = useCallback((previous = false) => {
+		if (previous) setCurrentImageIndex((prev) => prev - 1);
+		else setCurrentImageIndex((prev) => prev + 1);
+	}, []);
+	const handleExpandImage = useCallback(() => {
+		setOpenSideSheet(true);
+	}, []);
+	const currentImageObj = useMemo(() => {
+		const imgObj = images?.[currentImageIndex];
+		if (!imgObj) return {};
+		return {
+			filePath: imgObj[fieldMapping?.filePath],
+			fileName: imgObj[fieldMapping?.fileName],
+			primaryText: imgObj[fieldMapping?.primaryText],
+			secondaryText: imgObj[fieldMapping?.secondaryText]
+		};
+	}, [
+		currentImageIndex,
+		fieldMapping,
+		images
+	]);
+	return /* @__PURE__ */ React.createElement(AmbientCard, {
+		fullWidth: true,
+		title,
+		removePadding: true,
+		lastChildBottomPadding: "0px",
+		removeTopLayoutUnit: true
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.imagesWrapper }, images?.map((image) => /* @__PURE__ */ React.createElement("img", {
+		src: image?.[fieldMapping?.filePath],
+		alt: `${image?.[fieldMapping?.fileName]}`,
+		loading: "lazy",
+		width: "100%",
+		height: "auto",
+		className: classes.image,
+		style: { translate: `${-100 * currentImageIndex}%` }
+	}))), /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
+		icon: getIconFromName("MiniExpand"),
+		title: t("Expand Image"),
+		onClick: handleExpandImage,
+		id: "udpRecord-ImageSlider-ExpandBtn",
+		udprecordid: "udpRecord-ImageSlider-ExpandBtn",
+		className: classes.openSideSheetIcon
+	}), /* @__PURE__ */ React.createElement(ImageFooter, {
+		images,
+		currentImageObj,
+		hidePrimaryText,
+		hideSecondaryText,
+		handleViewImage,
+		currentImageIndex
+	}), expandInSideSheet ? /* @__PURE__ */ React.createElement(ImageViewerSideSheet, {
+		title: sideSheetTitle,
+		open: openSideSheet,
+		onClose: () => {
+			setOpenSideSheet(false);
+		},
+		imageObj: currentImageObj,
+		width: sideSheetWidth,
+		hideDownload,
+		hidePrimaryText: hidePrimaryTextInExpandMode,
+		hideSecondaryText: hideSecondaryTextInExpandMode
+	}) : /* @__PURE__ */ React.createElement(Dialog, {
+		onClose: () => {
+			setOpenSideSheet(false);
+		},
+		open: openSideSheet,
+		fullScreen: true
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.dialogContent }, /* @__PURE__ */ React.createElement("div", { className: classes.closeDialog }, /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
+		icon: getIconFromName("Cancel"),
+		title: t("Close"),
+		onClick: () => {
+			setOpenSideSheet(false);
+		},
+		id: "udpRecord-ImageSlider-PreviousBtn",
+		udprecordid: "udpRecord-ImageSlider-PreviousBtn"
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.dialogImageSection }, /* @__PURE__ */ React.createElement(Image, {
+		imageObj: currentImageObj,
+		hidePrimaryText: hidePrimaryTextInExpandMode,
+		hideSecondaryText: hideSecondaryTextInExpandMode
+	})))));
+};
+
+//#endregion
+//#region src/UI/fileViewer/FileViewer.jsx
+const defaultFieldMapping = {
+	filePath: "filePath",
+	blobFile: "blobFile",
+	fileName: "fileName",
+	fileExtension: "fileExtension",
+	primaryText: "primaryText",
+	secondaryText: "secondaryText"
+};
+const FileViewer = (props) => {
+	const { data, fieldMapping = defaultFieldMapping, acceptedFileExtensions, ...otherProps } = props;
+	const { t } = useTranslation();
+	const filteredData = useMemo(() => {
+		if (!acceptedFileExtensions || acceptedFileExtensions?.length === 0) return data;
+		if (data instanceof Array && data?.length > 0) return data?.filter((item) => acceptedFileExtensions?.includes(item?.[fieldMapping?.fileExtension]));
+		else return acceptedFileExtensions?.includes(data?.[fieldMapping?.fileExtension]) ? data : null;
+	}, [
+		acceptedFileExtensions,
+		data,
+		fieldMapping
+	]);
+	const fileType = useMemo(() => {
+		if (filteredData instanceof Array) return validateFilesImageType(filteredData, fieldMapping?.fileExtension);
+		return filteredData?.[fieldMapping?.fileExtension];
+	}, [fieldMapping, filteredData]);
+	const viewer = useMemo(() => {
+		switch (fileType) {
+			case "pdf": return /* @__PURE__ */ React.createElement(PDFViewer, {
+				fileUrl: filteredData?.[fieldMapping?.filePath],
+				blobPDF: filteredData?.[fieldMapping?.blobFile],
+				...otherProps
+			});
+			case "image": return /* @__PURE__ */ React.createElement(ImageSlider, {
+				images: filteredData,
+				fieldMapping,
+				...otherProps
+			});
+			default: return /* @__PURE__ */ React.createElement(AmbientAlert, {
+				alertMessage: t("Unable to view file"),
+				showAlert: true,
+				alertSeverity: "error"
+			});
+		}
+	}, [
+		fileType,
+		data,
+		fieldMapping,
+		otherProps
+	]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, viewer);
+};
+
+//#endregion
+export { FileViewer as t };
+//# sourceMappingURL=fileViewer-CtY7cOmL.js.map

package/dist/fileViewer-CtY7cOmL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileViewer-CtY7cOmL.js","names":["useStyles","Typography","useStyles","defaultFieldMapping"],"sources":["../src/UI/fileViewer/utils/fileTypes.js","../src/UI/fileViewer/utils/fileUtils.js","../src/UI/fileViewer/imageSlider/ImageFooter.jsx","../src/UI/fileViewer/imageSlider/Image.jsx","../src/UI/fileViewer/imageSlider/ImageViewerSideSheet.jsx","../src/UI/fileViewer/imageSlider/ImageSlider.jsx","../src/UI/fileViewer/FileViewer.jsx"],"sourcesContent":["export const imageExtension = [\n  'png',\n  'jpeg',\n  'jpg',\n  'jpe',\n  'jif',\n  'jfif',\n  'jfi',\n  'gif',\n  'raw',\n  'svg',\n  'ttif',\n  'tif',\n  'webp',\n  'arw',\n  'sr2',\n  'nrw',\n  'k25',\n  'bmp',\n  'dib',\n  'heif',\n  'heic',\n  'ind',\n  'indd',\n  'indt',\n  'jp2',\n  'j2k',\n  'jpf',\n  'jpm',\n  'mj2',\n  'svgz',\n  'ai',\n  'eps',\n];\n","import { imageExtension } from './fileTypes';\n\nexport const handleDownloadFile = (fileUrl, fileName) => {\n  const a = document.createElement('a');\n  a.style.display = 'none';\n  a.href = fileUrl;\n  a.download = fileName;\n  document.body.appendChild(a);\n  a.click();\n  window.URL.revokeObjectURL(fileUrl);\n};\n\nexport const validateFilesImageType = (files = [], fileExtensionField) => {\n  let type = \"image\";\n  files.forEach(file => {\n    if (!imageExtension.includes(file?.[fileExtensionField])) {\n      type = 'invalid';\n      return;\n    }\n  });\n  return type;\n};\n","/* eslint-disable react/jsx-no-useless-fragment */\nimport { makeStyles } from '@material-ui/core';\nimport React, { useMemo } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Typography } from '../../dataDisplay/typography/Typography';\nimport { IconButtonWithTooltip } from '../../inputs/buttons/IconButtonWithToolTip';\nimport { getIconFromName } from '../../../utilities/tree/TreeUtilities';\n\nconst useStyles = makeStyles(theme => ({\n  secondaryText: {\n    color: theme.palette.text.secondary,\n  },\n  description: {\n    margin: theme.spacing(2),\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(1),\n  },\n  pageAction: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n  },\n}));\n\nexport const ImageFooter = props => {\n  const {\n    images,\n    currentImageObj,\n    hidePrimaryText,\n    hideSecondaryText,\n    handleViewImage,\n    currentImageIndex,\n  } = props;\n  const classes = useStyles();\n  const { t } = useTranslation();\n\n  const showItem = useMemo(() => {\n    const showPrimaryText = !hidePrimaryText && currentImageObj?.primaryText;\n    const showSecondaryText =\n      !hideSecondaryText && currentImageObj?.secondaryText;\n    const showPageAction = images?.length > 1;\n    return {\n      footer: showPageAction || showPrimaryText || showSecondaryText,\n      primaryText: showPrimaryText,\n      secondaryText: showSecondaryText,\n      pageAction: showPageAction,\n    };\n  }, [currentImageObj, hidePrimaryText, hideSecondaryText, images]);\n\n  return (\n    <>\n      {showItem?.footer && (\n        <div className={classes.description}>\n          {showItem?.primaryText && (\n            <Typography variant=\"h6\">{currentImageObj?.primaryText}</Typography>\n          )}\n\n          {showItem?.secondaryText && (\n            <Typography variant=\"subtitle1\" className={classes.secondaryText}>\n              {currentImageObj?.secondaryText}\n            </Typography>\n          )}\n          {showItem?.pageAction && (\n            <div className={classes.pageAction}>\n              <IconButtonWithTooltip\n                icon={getIconFromName('ChevronLeft')}\n                title={t('Previous')}\n                disabled={currentImageIndex == 0}\n                onClick={() => {\n                  handleViewImage(true);\n                }}\n                id=\"udpRecord-ImageSlider-PreviousBtn\"\n                udprecordid=\"udpRecord-ImageSlider-PreviousBtn\"\n              />\n\n              <div>\n                <Typography>\n                  {currentImageIndex + 1} {t('of')} {images?.length ?? 0}\n                </Typography>\n              </div>\n              <IconButtonWithTooltip\n                icon={getIconFromName('ChevronRight')}\n                title={t('Next')}\n                disabled={currentImageIndex === images?.length - 1}\n                onClick={() => {\n                  handleViewImage();\n                }}\n                id=\"udpRecord-ImageSlider-NextBtn\"\n                udprecordid=\"udpRecord-ImageSlider-NextBtn\"\n              />\n            </div>\n          )}\n        </div>\n      )}\n    </>\n  );\n};\n","import { makeStyles } from '@material-ui/core';\nimport React from 'react';\nimport { ImageFooter } from './ImageFooter';\n\nconst useStyles = makeStyles(theme => ({\n  imageWrapper: {\n    flex: '1 1 auto',\n    overflow: 'hidden',\n    position: 'relative',\n    margin: theme.spacing(2)\n  },\n  image: {\n    objectFit: 'contain',\n    width: '100%',\n    height: '100%',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n  },\n  cardContent: {\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'hidden',\n    height: '100%',\n    background: theme.palette.background.paper,\n  },\n}));\n\nexport const Image = props => {\n  const { imageObj, hidePrimaryText, hideSecondaryText } = props;\n  const classes = useStyles();\n\n  return (\n    <div className={classes.cardContent}>\n      <div className={classes.imageWrapper}>\n        <img\n          src={imageObj?.filePath}\n          loading=\"lazy\"\n          alt={`${imageObj?.fileName}`}\n          className={classes.image}\n        />\n      </div>\n      <ImageFooter\n        currentImageObj={imageObj}\n        hidePrimaryText={hidePrimaryText}\n        hideSecondaryText={hideSecondaryText}\n      />\n    </div>\n  );\n};\n","import React, { useCallback } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { handleDownloadFile } from '../utils/fileUtils';\nimport { Image } from './Image';\nimport { SideSheet } from '../../surfaces/SideSheet';\n\nexport const ImageViewerSideSheet = (props) => {\n  const {\n    title,\n    width,\n    imageObj,\n    open,\n    onClose,\n    hideDownload,\n    hidePrimaryText,\n    hideSecondaryText\n  } = props;\n  const { t } = useTranslation();\n\n  const handleDownloadImage = useCallback(() => {\n    handleDownloadFile(imageObj?.filePath, imageObj?.fileName);\n  }, [imageObj]);\n\n  return (\n    <SideSheet\n      title={title ?? t('Image Viewer')}\n      buttonLabel={hideDownload ? null : t('Download')}\n      width={width ?? '90vw'}\n      onSubmit={handleDownloadImage}\n      open={open}\n      onClose={onClose}\n      contentHeight='100%'\n    >\n      <Image\n        imageObj={imageObj}\n        hidePrimaryText={hidePrimaryText}\n        hideSecondaryText={hideSecondaryText}\n      />\n    </SideSheet>\n  );\n};\n","import { Dialog, makeStyles } from '@material-ui/core';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { ImageViewerSideSheet } from './ImageViewerSideSheet';\nimport { Image } from './Image';\nimport { ImageFooter } from './ImageFooter';\nimport { AmbientCard } from '../../surfaces/cards/AmbientCard';\nimport { IconButtonWithTooltip } from '../../inputs/buttons/IconButtonWithToolTip';\nimport { getIconFromName } from '../../../utilities/tree/TreeUtilities';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    backgroundColor: theme.palette.background.paper,\n  },\n  imagesWrapper: {\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    overflow: 'hidden',\n    alignItems: 'center',\n  },\n  imageSection: {\n    width: '100%',\n    height: '100%',\n  },\n  image: {\n    objectFit: 'contain',\n    display: 'block',\n    flexShrink: 0,\n    flexGrow: 0,\n    transition: 'translate 300ms ease-in-out',\n  },\n  openSideSheetIcon: {\n    display: 'block',\n    position: 'absolute',\n    top: props => (props?.title ? 64 : 8),\n    right: 8,\n    zIndex: 3,\n    backgroundColor: theme.palette.background.paper,\n  },\n  dialogContent: {\n    overflow: 'hidden',\n    width: '100vw',\n    height: '100vh',\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  closeDialog: {\n    margin: theme.spacing(1),\n  },\n  dialogImageSection: {\n    flex: 2,\n    height: '100%',\n  },\n}));\n\nconst defaultFieldMapping = {\n  filePath: 'filePath',\n  fileName: 'fileName',\n  primaryText: 'primaryText',\n  secondaryText: 'secondaryText',\n};\n\nexport const ImageSlider = props => {\n  const {\n    title,\n    images,\n    fieldMapping = defaultFieldMapping,\n    sideSheetTitle,\n    sideSheetWidth,\n    hideDownload,\n    hidePrimaryText,\n    hideSecondaryText,\n    hidePrimaryTextInExpandMode,\n    hideSecondaryTextInExpandMode,\n    expandInSideSheet = true,\n  } = props;\n  const classes = useStyles(props);\n  const { t } = useTranslation();\n  const [currentImageIndex, setCurrentImageIndex] = useState(0);\n  const [openSideSheet, setOpenSideSheet] = useState(false);\n\n  const handleViewImage = useCallback((previous = false) => {\n    if (previous) {\n      setCurrentImageIndex(prev => prev - 1);\n    } else {\n      setCurrentImageIndex(prev => prev + 1);\n    }\n  }, []);\n\n  const handleExpandImage = useCallback(() => {\n    setOpenSideSheet(true);\n  }, []);\n\n  const currentImageObj = useMemo(() => {\n    const imgObj = images?.[currentImageIndex];\n    if (!imgObj) return {};\n\n    return {\n      filePath: imgObj[fieldMapping?.filePath],\n      fileName: imgObj[fieldMapping?.fileName],\n      primaryText: imgObj[fieldMapping?.primaryText],\n      secondaryText: imgObj[fieldMapping?.secondaryText],\n    };\n  }, [currentImageIndex, fieldMapping, images]);\n\n  return (\n    <AmbientCard\n      fullWidth\n      title={title}\n      removePadding\n      lastChildBottomPadding=\"0px\"\n      removeTopLayoutUnit\n    >\n      <div className={classes.imagesWrapper}>\n        {images?.map(image => (\n          <img\n            src={image?.[fieldMapping?.filePath]}\n            alt={`${image?.[fieldMapping?.fileName]}`}\n            loading=\"lazy\"\n            width=\"100%\"\n            height=\"auto\"\n            className={classes.image}\n            style={{ translate: `${-100 * currentImageIndex}%` }}\n          />\n        ))}\n      </div>\n      <IconButtonWithTooltip\n        icon={getIconFromName('MiniExpand')}\n        title={t('Expand Image')}\n        onClick={handleExpandImage}\n        id=\"udpRecord-ImageSlider-ExpandBtn\"\n        udprecordid=\"udpRecord-ImageSlider-ExpandBtn\"\n        className={classes.openSideSheetIcon}\n      />\n      <ImageFooter\n        images={images}\n        currentImageObj={currentImageObj}\n        hidePrimaryText={hidePrimaryText}\n        hideSecondaryText={hideSecondaryText}\n        handleViewImage={handleViewImage}\n        currentImageIndex={currentImageIndex}\n      />\n\n      {expandInSideSheet ? (\n        <ImageViewerSideSheet\n          title={sideSheetTitle}\n          open={openSideSheet}\n          onClose={() => {\n            setOpenSideSheet(false);\n          }}\n          imageObj={currentImageObj}\n          width={sideSheetWidth}\n          hideDownload={hideDownload}\n          hidePrimaryText={hidePrimaryTextInExpandMode}\n          hideSecondaryText={hideSecondaryTextInExpandMode}\n        />\n      ) : (\n        <Dialog\n          onClose={() => {\n            setOpenSideSheet(false);\n          }}\n          open={openSideSheet}\n          fullScreen\n        >\n          <div className={classes.dialogContent}>\n            <div className={classes.closeDialog}>\n              <IconButtonWithTooltip\n                icon={getIconFromName('Cancel')}\n                title={t('Close')}\n                onClick={() => {\n                  setOpenSideSheet(false);\n                }}\n                id=\"udpRecord-ImageSlider-PreviousBtn\"\n                udprecordid=\"udpRecord-ImageSlider-PreviousBtn\"\n              />\n            </div>\n            <div className={classes.dialogImageSection}>\n              <Image\n                imageObj={currentImageObj}\n                hidePrimaryText={hidePrimaryTextInExpandMode}\n                hideSecondaryText={hideSecondaryTextInExpandMode}\n              />\n            </div>\n          </div>\n        </Dialog>\n      )}\n    </AmbientCard>\n  );\n};\n","/* eslint-disable react/jsx-no-useless-fragment */\nimport React, { useMemo } from 'react';\nimport { PDFViewer } from './pdfViewer/PDFViewer';\nimport { ImageSlider } from './imageSlider/ImageSlider';\nimport { validateFilesImageType } from './utils/fileUtils';\nimport { useTranslation } from 'react-i18next';\nimport { AmbientAlert } from '../feedback/AmbientAlert';\n\nconst defaultFieldMapping = {\n  filePath: 'filePath',\n  blobFile: 'blobFile',\n  fileName: 'fileName',\n  fileExtension: 'fileExtension',\n  primaryText: 'primaryText',\n  secondaryText: 'secondaryText',\n};\n\nexport const FileViewer = props => {\n  const {\n    data,\n    fieldMapping = defaultFieldMapping,\n    acceptedFileExtensions,\n    ...otherProps\n  } = props;\n  const { t } = useTranslation();\n\n  //filter data\n  const filteredData = useMemo(() => {\n    if (!acceptedFileExtensions || acceptedFileExtensions?.length === 0)\n      return data;\n    if (data instanceof Array && data?.length > 0) {\n      return data?.filter(item =>\n        acceptedFileExtensions?.includes(item?.[fieldMapping?.fileExtension])\n      );\n    } else {\n      return acceptedFileExtensions?.includes(\n        data?.[fieldMapping?.fileExtension]\n      )\n        ? data\n        : null;\n    }\n  }, [acceptedFileExtensions, data, fieldMapping]);\n\n  // check if the data is an array. If yes, currently only image viewer accept this list,\n  // we need to validate if all the file in the list is image\n  const fileType = useMemo(() => {\n    if (filteredData instanceof Array) {\n      const type = validateFilesImageType(\n        filteredData,\n        fieldMapping?.fileExtension\n      );\n      return type;\n    }\n    return filteredData?.[fieldMapping?.fileExtension];\n  }, [fieldMapping, filteredData]);\n\n  const viewer = useMemo(() => {\n    switch (fileType) {\n      case 'pdf':\n        return (\n          <PDFViewer\n            fileUrl={filteredData?.[fieldMapping?.filePath]}\n            blobPDF={filteredData?.[fieldMapping?.blobFile]}\n            {...otherProps}\n          />\n        );\n      case 'image':\n        return (\n          <ImageSlider\n            images={filteredData}\n            fieldMapping={fieldMapping}\n            {...otherProps}\n          />\n        );\n      default:\n        return (\n          <AmbientAlert\n            alertMessage={t('Unable to view file')}\n            showAlert\n            alertSeverity=\"error\"\n          />\n        );\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [fileType, data, fieldMapping, otherProps]);\n\n  return <>{viewer}</>;\n};\n"],"mappings":"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"}