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

package/dist/AmbientGridTemplate-Cbl9GXcd.js

@@ -0,0 +1,1664 @@
+import { r as useAgGridApi, t as AgTable } from "./AgTable-qA_zuj8l.js";
+import { r as Form } from "./FormButtons-3-Do6TqZ.js";
+import { t as Field } from "./Field-Cpjv208h.js";
+import { t as FluentButton } from "./FluentButton-3xMbN_Vs.js";
+import { i as useHandleAxiosSnackbar } from "./apiHelpers-CaBH4Wqe.js";
+import { t as ClickOpenEnums } from "./pageEnums-DtccKpw_.js";
+import { t as apiMutate$1 } from "./useAxiosMutate-C_CLzTKW.js";
+import { t as FluentIcon } from "./FluentIcon-iRSVzrph.js";
+import { L as VisibilityTypeEnums } from "./unitySystemEnums-C3qeqk7V.js";
+import { n as useActions } from "./useActions-V6oRdjcy.js";
+import { n as PrimaryActionButton_default } from "./PrimaryActionButton-Dp7s1CMW.js";
+import { n as SideSheet } from "./SideSheet-t6uVFYIJ.js";
+import { t as useAxiosGet } from "./useAxiosGet-5JQU4EkT.js";
+import { t as AmbientTextField } from "./AmbientTextField-RjyecRyE.js";
+import { t as GridGroupingSidebar } from "./GridGroupingSidebar-C4Bvi13s.js";
+import { t as AmbientTokenButton } from "./AmbientTokenButton-DQNVUPwr.js";
+import { t as AmbientChipButton } from "./AmbientChipButton-CcCk0Eaj.js";
+import { t as FluentDialog } from "./FluentDialog-CXnECDfH.js";
+import { i as onFirstDataRendered, r as getGridState } from "./GridFunctions-BpMkkPTk.js";
+import { t as DynamicContainerWithMenu } from "./DynamicContainerWithMenu-u2hlPBNw.js";
+import { t as IconButtonWithTooltip } from "./IconButtonWithToolTip-C8Gr_PHd.js";
+import { t as HintPanel } from "./HintPanel-C6R_3C7z.js";
+import { t as FilterOperators } from "./SearchOperator-D9838PIe.js";
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Badge, Box, Divider, FormControlLabel, Grow, InputAdornment, LinearProgress, MenuItem, Popover, Switch, Tab, Tabs, Tooltip, Typography, lighten, makeStyles } from "@material-ui/core";
+import { ConfigService } from "udp-react-stencil-component-library";
+import { AppIconDefaultIcon, BlockedIcon, BulletedTreeListIcon, ChevronDownIcon, ClearIcon, CombineIcon, DeleteIcon, DownloadIcon, ErrorIcon, ExportIcon, FavoriteStarIcon, FilterIcon, LightbulbIcon, MoreVerticalIcon, OpenInNewTabIcon, SaveIcon, SearchIcon, TableHeaderRowIcon, TripleColumnIcon, UploadIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { makeStyles as makeStyles$1 } from "@material-ui/core/styles";
+import { Skeleton } from "@material-ui/lab";
+import "./style.css";
+import { ServerSideRowModelModule } from "@ag-grid-enterprise/server-side-row-model";
+import invariant from "invariant";
+import Chip$1 from "@material-ui/core/Chip";
+import Divider$1 from "@material-ui/core/Divider";
+import Tooltip$1 from "@material-ui/core/Tooltip";
+import Typography$1 from "@material-ui/core/Typography";
+import StarIcon from "@material-ui/icons/esm/Star";
+
+//#region src/UI/utilityDisplay/GridActionBar.jsx
+const useStyles$6 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row",
+		padding: theme.spacing(.5),
+		background: (props) => props.background ? props.background : lighten(theme.palette.secondary.light, .9)
+	},
+	label: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "flex-end"
+	},
+	title: {
+		flex: 1,
+		display: "flex",
+		alignItems: "center",
+		marginLeft: (props) => props.title ? theme.spacing(2) : 0
+	},
+	tabRoot: {
+		minWidth: 0,
+		textTransform: "none"
+	},
+	controls: {
+		display: "flex",
+		alignItems: "center",
+		gridGap: theme.spacing(2),
+		gap: theme.spacing(2),
+		marginRight: theme.spacing(2)
+	},
+	icon: {
+		background: theme.palette.common.white,
+		padding: theme.spacing(1),
+		color: theme.palette.secondary.main
+	}
+}));
+const GridActionBar = (props) => {
+	const classes = useStyles$6(props);
+	const { children, onChange, handleChange, value, exportCSV, exportExcel, exportPDF, fitClick, expandClick, clearClick, exportClick, saveGridConfig, deleteGridConfig, clearGridConfig, title, hideFitGrid = false, hideExpandGrid = false, hideExportGrid = false, hideRemoveFilters = false, hideFilterTab = false, hideGroupTab = false, hideColumnTab = false, hideSearchBar = false } = props;
+	const gridControlsExport = /* @__PURE__ */ React.createElement("div", null);
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.title }, title && /* @__PURE__ */ React.createElement(Typography, {
+		variant: "h6",
+		style: {
+			overflow: "hidden",
+			whiteSpace: "nowrap",
+			textOverflow: "ellipsis"
+		}
+	}, " ", title, " "), !hideSearchBar && /* @__PURE__ */ React.createElement("div", { style: {
+		flex: 1,
+		marginLeft: 16,
+		marginRight: 16,
+		marginTop: -16
+	} }, /* @__PURE__ */ React.createElement(AmbientTextField, {
+		title,
+		onChange,
+		InputProps: {
+			type: "search",
+			startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, null))
+		}
+	}))), /* @__PURE__ */ React.createElement("div", null, " ", gridControlsExport), /* @__PURE__ */ React.createElement("div", { className: classes.controls }, saveGridConfig && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: SaveIcon,
+		tooltip: "Save Grid Configuration",
+		ariaLabel: "Save Grid Configuration",
+		onClick: saveGridConfig
+	}), deleteGridConfig && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: DeleteIcon,
+		tooltip: "Delete Grid Configuration",
+		ariaLabel: "Delete Grid Configuration",
+		onClick: deleteGridConfig
+	}), clearGridConfig && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: ClearIcon,
+		tooltip: "Clear Grid Configuration",
+		ariaLabel: "Clear Grid Configuration",
+		onClick: clearGridConfig
+	}), !hideFitGrid && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: CombineIcon,
+		tooltip: "Fit Grid",
+		ariaLabel: "Fit Grid",
+		onClick: fitClick
+	}), !hideExpandGrid && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: ExportIcon,
+		tooltip: "Expand Grid",
+		ariaLabel: "Expand Grid",
+		onClick: expandClick
+	}), !hideExportGrid && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: DownloadIcon,
+		tooltip: "Export Grid",
+		ariaLabel: "Export Grid",
+		onClick: exportClick
+	}), !hideRemoveFilters && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: BlockedIcon,
+		tooltip: "Remove Filters",
+		ariaLabel: "Remove Filters",
+		onClick: clearClick
+	})), /* @__PURE__ */ React.createElement(Tabs, {
+		value,
+		onChange: handleChange,
+		"aria-label": "basic tabs example"
+	}, !hideFilterTab && /* @__PURE__ */ React.createElement(Tab, {
+		label: "Filter",
+		classes: { root: classes.tabRoot }
+	}), !hideGroupTab && /* @__PURE__ */ React.createElement(Tab, {
+		label: "Group",
+		classes: { root: classes.tabRoot }
+	}), !hideColumnTab && /* @__PURE__ */ React.createElement(Tab, {
+		label: "Column",
+		classes: { root: classes.tabRoot }
+	})), children);
+};
+GridActionBar.propTypes = {
+	title: PropTypes.string,
+	children: PropTypes.node,
+	handleChange: PropTypes.func,
+	value: PropTypes.number,
+	fitClick: PropTypes.func,
+	expandClick: PropTypes.func,
+	clearClick: PropTypes.func,
+	exportClick: PropTypes.func
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/GridPrimaryBar.jsx
+const useStyles$5 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row",
+		padding: theme.spacing(.5)
+	},
+	label: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "flex-end"
+	},
+	title: {
+		flex: 1,
+		display: "flex",
+		alignItems: "center",
+		marginLeft: (props) => props.title ? theme.spacing(2) : 0
+	},
+	tabRoot: {
+		minWidth: 0,
+		textTransform: "none"
+	},
+	controls: {
+		display: "flex",
+		alignItems: "center",
+		gridGap: theme.spacing(2),
+		gap: theme.spacing(2),
+		marginRight: theme.spacing(2)
+	},
+	icon: {
+		background: theme.palette.common.white,
+		padding: theme.spacing(1),
+		color: theme.palette.primary.main
+	}
+}));
+const GridPrimaryBar = (props) => {
+	const classes = useStyles$5(props);
+	const { children, onChange, fitClick, expandClick, clearClick, exportClick, filterClick, columnsClick, groupClick, title, hiddenActionButtons, hiddenLabels, hideSearchBar = false, secondaryActionButtons, saveViewClick, viewsClick, insightsClick, onPrimaryActionClick, primaryActionDisabled, primaryActionLabel, primaryActionIcon, onSearchKeyDown } = props;
+	const [actionButtonMedianPx, setActionButtonMedianPx] = useState(0);
+	const [actionButtons, setActionButtons] = useState([]);
+	const [menuActionButtons, setMenuActionButtons] = useState([]);
+	const [anchorEl, setAnchorEl] = useState(null);
+	const [windowWidthBreakpoint, setWindowWidthBreakpoint] = useState(1400);
+	const chipButtonSizePx = 100;
+	const tokenButtonSizePx = 40;
+	const open = Boolean(anchorEl);
+	const id = open ? "simple-popover" : void 0;
+	const defaultActionButtons = useMemo(() => [
+		{
+			icon: SaveIcon,
+			tooltip: "Save Grid Configuration",
+			label: "Save View",
+			visible: !hiddenActionButtons.includes("saveView"),
+			hideLabel: hiddenLabels.includes("saveView"),
+			onClick: saveViewClick,
+			background: "transparent"
+		},
+		{
+			icon: FavoriteStarIcon,
+			tooltip: "Browse Views",
+			label: "Views",
+			visible: !hiddenActionButtons.includes("views"),
+			onClick: viewsClick,
+			hideLabel: hiddenLabels.includes("views"),
+			iconClassName: classes.icon
+		},
+		{
+			icon: LightbulbIcon,
+			tooltip: "Insights",
+			label: "Insights",
+			visible: !hiddenActionButtons.includes("insights"),
+			hideLabel: hiddenLabels.includes("insights"),
+			onClick: insightsClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: UploadIcon,
+			tooltip: "Import/Export",
+			label: "Import/Export",
+			visible: !!exportClick && !hiddenActionButtons.includes("importExport"),
+			hideLabel: hiddenLabels.includes("importExport"),
+			onClick: exportClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: BulletedTreeListIcon,
+			tooltip: "Group",
+			label: "Group",
+			visible: !!groupClick && !hiddenActionButtons.includes("group"),
+			hideLabel: hiddenLabels.includes("group"),
+			onClick: groupClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: FilterIcon,
+			tooltip: "Filter",
+			label: "Filter",
+			visible: !!filterClick && !hiddenActionButtons.includes("filter"),
+			hideLabel: hiddenLabels.includes("filter"),
+			onClick: filterClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: TripleColumnIcon,
+			tooltip: "Columns",
+			label: "Columns",
+			visible: !!columnsClick && !hiddenActionButtons.includes("columns"),
+			hideLabel: hiddenLabels.includes("columns"),
+			onClick: columnsClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: CombineIcon,
+			tooltip: "Fit Grid",
+			label: "Fit Grid",
+			visible: !!fitClick && !hiddenActionButtons.includes("fitGrid"),
+			hideLabel: hiddenLabels.includes("fitGrid"),
+			onClick: fitClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: ExportIcon,
+			tooltip: "Expand Grid",
+			label: "Expand Grid",
+			visible: !!expandClick && !hiddenActionButtons.includes("expandGrid"),
+			hideLabel: hiddenLabels.includes("expandGrid"),
+			onClick: expandClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: BlockedIcon,
+			tooltip: "Clear Filters",
+			label: "Clear Filters",
+			visible: !!clearClick && !hiddenActionButtons.includes("clearFilters"),
+			hideLabel: hiddenLabels.includes("clearFilters"),
+			onClick: clearClick,
+			iconClassName: classes.icon
+		}
+	], [
+		classes.icon,
+		clearClick,
+		columnsClick,
+		expandClick,
+		exportClick,
+		filterClick,
+		fitClick,
+		groupClick,
+		hiddenActionButtons,
+		hiddenLabels,
+		insightsClick,
+		saveViewClick,
+		viewsClick
+	]);
+	const handlePopoverClick = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handlePopoverClose = () => {
+		setAnchorEl(null);
+	};
+	const formatActionButtons = useCallback((buttons) => {
+		return buttons.map((button) => {
+			if (button.visible === void 0) button.visible = true;
+			if (button.hideLabel === void 0) button.hideLabel = false;
+			if (button.label === void 0) {
+				button.label = button.tooltip ?? "Button";
+				button.hideLabel = true;
+			}
+			if (button.iconClassName === void 0 && button.background === void 0) button.iconClassName = classes.icon;
+			return button;
+		});
+	}, [classes?.icon]);
+	useEffect(() => {
+		const allActionButtons = formatActionButtons([...defaultActionButtons, ...secondaryActionButtons]);
+		const menuButtons = [];
+		const numActionButtons = allActionButtons.length - hiddenActionButtons.length;
+		const buttonTotalWidth = numActionButtons * chipButtonSizePx - (chipButtonSizePx - tokenButtonSizePx) * hiddenLabels.length;
+		const calculatedMedian = Math.floor(buttonTotalWidth / numActionButtons);
+		let breakPoint = (calculatedMedian > 70 ? 950 : 900) + buttonTotalWidth;
+		const currentWindowWidth = window.innerWidth;
+		while (currentWindowWidth < breakPoint && allActionButtons.length > 0) {
+			const movedAction = allActionButtons.pop();
+			menuButtons.push(movedAction);
+			breakPoint -= calculatedMedian;
+		}
+		setActionButtonMedianPx(calculatedMedian);
+		setActionButtons(allActionButtons);
+		setMenuActionButtons(menuButtons);
+		setWindowWidthBreakpoint(breakPoint);
+	}, [
+		formatActionButtons,
+		defaultActionButtons,
+		secondaryActionButtons,
+		hiddenActionButtons?.length,
+		hiddenLabels?.length
+	]);
+	useEffect(() => {
+		const handleResize = () => {
+			let breakPoint = windowWidthBreakpoint;
+			let visibleButtons = [...actionButtons];
+			let menuButtons = [...menuActionButtons];
+			while (window.innerWidth < breakPoint && visibleButtons.length > 0) {
+				const movedAction = visibleButtons.pop();
+				menuButtons.push(movedAction);
+				breakPoint -= actionButtonMedianPx;
+			}
+			while (window.innerWidth > breakPoint + actionButtonMedianPx && menuButtons.length > 0) {
+				const movedAction = menuButtons.pop(0);
+				visibleButtons.push(movedAction);
+				breakPoint += actionButtonMedianPx;
+			}
+			setActionButtons(visibleButtons);
+			setMenuActionButtons(menuButtons);
+			setWindowWidthBreakpoint(breakPoint);
+		};
+		window.addEventListener("resize", handleResize);
+		return () => {
+			window.removeEventListener("resize", handleResize);
+		};
+	}, [
+		windowWidthBreakpoint,
+		actionButtons,
+		menuActionButtons,
+		actionButtonMedianPx
+	]);
+	const handleCustomKeyDown = (event) => {
+		if (onSearchKeyDown) {
+			if (event.key === "Enter") onSearchKeyDown();
+		}
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.title }, title && /* @__PURE__ */ React.createElement(Typography, {
+		variant: "h6",
+		style: {
+			overflow: "hidden",
+			whiteSpace: "nowrap",
+			textOverflow: "ellipsis"
+		}
+	}, " ", title, " "), !hideSearchBar && /* @__PURE__ */ React.createElement("div", { style: {
+		flex: 1,
+		marginLeft: 16,
+		marginRight: 16,
+		marginTop: -16,
+		maxWidth: 300
+	} }, /* @__PURE__ */ React.createElement(AmbientTextField, {
+		title,
+		onChange,
+		onKeyDown: handleCustomKeyDown,
+		InputProps: {
+			type: "search",
+			startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, null))
+		}
+	}))), /* @__PURE__ */ React.createElement("div", { className: classes.controls }, actionButtons.map((button) => button.visible && (button.hideLabel ? /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		id: "udpRecord-GridPrimaryBar-Token-" + button.label.replace(/ /g, "-"),
+		udprecordid: "udpRecord-GridPrimaryBar-Token-" + button.label.replace(/ /g, "-"),
+		icon: button.icon ?? AppIconDefaultIcon,
+		tooltip: button.tooltip,
+		onClick: button.onClick,
+		ariaLabel: button.label,
+		iconClassName: button.iconClassName
+	}) : /* @__PURE__ */ React.createElement(AmbientChipButton, {
+		id: "udpRecord-GridPrimaryBar-Chip-" + button.label.replace(/ /g, "-"),
+		udprecordid: "udpRecord-GridPrimaryBar-Chip-" + button.label.replace(/ /g, "-"),
+		icon: button.icon ?? AppIconDefaultIcon,
+		tooltip: button.tooltip,
+		label: button.label,
+		onClick: button.onClick,
+		background: button.background
+	}))), !!menuActionButtons.length && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		id,
+		icon: MoreVerticalIcon,
+		tooltip: "More Actions",
+		ariaLabel: "More Actions",
+		onClick: handlePopoverClick,
+		iconClassName: classes.icon
+	}), /* @__PURE__ */ React.createElement(Popover, {
+		id,
+		open,
+		anchorEl,
+		onClose: handlePopoverClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		}
+	}, menuActionButtons.slice(0).reverse().map((button) => {
+		if (!button.visible) return null;
+		return /* @__PURE__ */ React.createElement(MenuItem, {
+			id: "udpRecord-GridPrimaryBar-MenuItem-" + button.label.replace(/ /g, "-"),
+			udprecordid: "udpRecord-GridPrimaryBar-MenuItem-" + button.label.replace(/ /g, "-"),
+			onClick: button.onClick,
+			style: {
+				display: "flex",
+				justifyContent: "space-between"
+			}
+		}, /* @__PURE__ */ React.createElement(Typography, null, button.label), /* @__PURE__ */ React.createElement(FluentIcon, {
+			component: button.icon ?? AppIconDefaultIcon,
+			style: { marginLeft: 7 }
+		}));
+	})))), onPrimaryActionClick && /* @__PURE__ */ React.createElement(PrimaryActionButton_default, {
+		onClick: onPrimaryActionClick,
+		id: "udpRecord-GridPrimaryBar-Add",
+		udprecordid: "udpRecord-GridPrimaryBar-Add",
+		disabled: primaryActionDisabled
+	}, /* @__PURE__ */ React.createElement(Typography, { style: { marginLeft: 4 } }, primaryActionLabel ?? "Button"), /* @__PURE__ */ React.createElement(FluentIcon, {
+		style: { marginLeft: 7 },
+		component: primaryActionIcon ?? AppIconDefaultIcon
+	})));
+};
+GridPrimaryBar.propTypes = {
+	title: PropTypes.string,
+	children: PropTypes.node,
+	onChange: PropTypes.func,
+	fitClick: PropTypes.func,
+	expandClick: PropTypes.func,
+	clearClick: PropTypes.func,
+	exportClick: PropTypes.func,
+	insightsClick: PropTypes.func,
+	filterClick: PropTypes.func,
+	columnsClick: PropTypes.func,
+	groupClick: PropTypes.func,
+	hideSearchBar: PropTypes.bool,
+	secondaryActionButtons: PropTypes.arrayOf(PropTypes.object),
+	hiddenActionButtons: PropTypes.arrayOf(PropTypes.oneOf([
+		"saveView",
+		"views",
+		"insights",
+		"importExport",
+		"group",
+		"filter",
+		"columns",
+		"fitGrid",
+		"expandGrid",
+		"clearFilters"
+	])),
+	hiddenLabels: PropTypes.arrayOf(PropTypes.oneOf([
+		"saveView",
+		"views",
+		"insights",
+		"importExport",
+		"group",
+		"filter",
+		"columns",
+		"fitGrid",
+		"expandGrid",
+		"clearFilters"
+	])),
+	onPrimaryActionClick: PropTypes.func,
+	primaryActionLabel: PropTypes.string,
+	primaryActionIcon: PropTypes.elementType
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/SaveViewFormDialog.jsx
+const useStyles$4 = makeStyles((theme) => ({
+	root: {},
+	saveForm: {
+		minWidth: 450,
+		paddingLeft: theme.spacing(2),
+		paddingRight: theme.spacing(2)
+	},
+	column: {
+		flex: 1,
+		paddingLeft: theme.spacing(2),
+		paddingRight: theme.spacing(2)
+	},
+	divider: {
+		backgroundColor: "grey",
+		color: "grey",
+		width: 2,
+		height: "100%"
+	},
+	infoHeader: { color: "grey" }
+}));
+/**
+* @param {PropTypes.InferProps<typeof SaveViewFormDialog.propTypes>} props
+*/
+const SaveViewFormDialog = (props) => {
+	const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
+	const { open, handleClose, tenant, application, user, refetchViews, gApi, gcApi, gridId, domain, apiCatalogId } = props;
+	const { t } = useTranslation();
+	const classes = useStyles$4(props);
+	const saveViewFormRef = useRef(null);
+	const triggerSaveView = useCallback(() => {
+		saveViewFormRef.current.handleSubmit();
+	}, [saveViewFormRef]);
+	const saveView = async (values) => {
+		const data = {
+			data: {
+				gridView: {
+					Name: values.name,
+					GridViewVisibilityTypeId: values.private ? VisibilityTypeEnums.Private : VisibilityTypeEnums.Public,
+					isDefault: 0,
+					tenantId: user?.currentTenantId,
+					userId: user?.id,
+					gridId,
+					domain,
+					apiCatalogId
+				},
+				gridConfigurations: getGridState(gApi, gcApi, gridId)
+			},
+			method: "POST"
+		};
+		handleClose();
+		await apiMutate$1(ConfigService.tenantV2ApiUrl, `GridView/createGridView`, data).then((response) => {
+			handleSuccessSnackbar(t("View Saved"));
+			refetchViews();
+		}).catch((error) => {
+			console.log(error);
+			handleErrorSnackbar(error, t("Failed to Save View"));
+		});
+	};
+	return /* @__PURE__ */ React.createElement(FluentDialog, {
+		title: t("Save New View"),
+		open,
+		handleClose,
+		labelOne: t("Save View"),
+		labelTwo: t("Cancel"),
+		actionOne: triggerSaveView,
+		actionTwo: handleClose
+	}, /* @__PURE__ */ React.createElement(Box, { display: "flex" }, /* @__PURE__ */ React.createElement("div", { className: classes.column }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.infoHeader,
+		align: "left"
+	}, t("Tenant")), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		align: "left"
+	}, tenant ?? "--")), /* @__PURE__ */ React.createElement(Divider, {
+		flexItem: true,
+		orientation: "vertical"
+	}), /* @__PURE__ */ React.createElement("div", { className: classes.column }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.infoHeader,
+		align: "left"
+	}, t("Application")), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		align: "left"
+	}, application ?? "--")), /* @__PURE__ */ React.createElement(Divider, {
+		flexItem: true,
+		orientation: "vertical"
+	}), /* @__PURE__ */ React.createElement("div", { className: classes.column }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.infoHeader,
+		align: "left"
+	}, t("Entity")), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		align: "left"
+	}, domain ?? "--"))), /* @__PURE__ */ React.createElement("div", { className: classes.saveForm }, /* @__PURE__ */ React.createElement(Form, {
+		onSubmit: saveView,
+		ref: saveViewFormRef
+	}, /* @__PURE__ */ React.createElement(Field, {
+		type: "text",
+		component: AmbientTextField,
+		name: "name",
+		id: "name",
+		label: t("Name"),
+		fullWidth: true,
+		required: true,
+		style: {
+			marginBottom: 20,
+			marginTop: 10
+		}
+	}), /* @__PURE__ */ React.createElement(FormControlLabel, {
+		control: /* @__PURE__ */ React.createElement(Field, {
+			component: Switch,
+			name: "private",
+			id: "private",
+			defaultValue: false,
+			type: "checkbox"
+		}),
+		label: t("Private"),
+		labelPlacement: "end"
+	}))));
+};
+SaveViewFormDialog.propTypes = {
+	open: PropTypes.bool.isRequired,
+	handleClose: PropTypes.func.isRequired,
+	tenant: PropTypes.string,
+	application: PropTypes.string,
+	entity: PropTypes.string,
+	user: PropTypes.object,
+	columnDefsValues: PropTypes.array,
+	refetchViews: PropTypes.func,
+	gApi: PropTypes.object,
+	gcApi: PropTypes.object,
+	setSelectedView: PropTypes.func
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/ChipSection.jsx
+const useStyles$3 = makeStyles$1((theme) => ({
+	wrapper: {
+		display: "flex",
+		gap: theme.spacing(1),
+		flexWrap: "noWrap",
+		backgroundColor: `${theme.palette.secondary.light}80`,
+		alignItems: "center",
+		flexGrow: 1,
+		width: "100%"
+	},
+	chipHolder: {
+		display: "flex",
+		gap: theme.spacing(1),
+		flexWrap: "noWrap",
+		backgroundColor: `${theme.palette.secondary.light}80`,
+		alignItems: "center",
+		overflow: "scroll",
+		"&::-webkit-scrollbar": { display: "none" },
+		flexGrow: 1
+	},
+	viewChip: {
+		backgroundColor: theme.palette.secondary.main,
+		color: "white",
+		maxWidth: "150px",
+		transition: "opacity 0.3s ease",
+		marginLeft: theme.spacing(1)
+	},
+	menuItem: { backgroundColor: "white" },
+	filterChipMenuIcon: {
+		background: theme.palette.common.grey,
+		padding: theme.spacing(1),
+		color: theme.palette.primary.main
+	},
+	additionalFilterChip: {},
+	KPI: {
+		marginLeft: "auto",
+		display: "flex",
+		gap: theme.spacing(1),
+		color: "grey",
+		width: "auto"
+	},
+	kpiValue: {
+		color: "black",
+		fontSize: "1.1em"
+	},
+	kpiItem: {
+		display: "flex",
+		justifyContent: "center",
+		width: "max-content"
+	},
+	kpiLabel: {
+		width: "max-content",
+		marginRight: theme.spacing(1)
+	},
+	clickedChip: {
+		backgroundColor: theme.palette.primary.main,
+		color: "white",
+		maxWidth: "150px"
+	},
+	filterChipLabel: {
+		color: theme.palette.text.primary,
+		whiteSpace: "nowrap",
+		marginRight: theme.spacing(1)
+	},
+	filterChipValue: {
+		color: theme.palette.text.secondary,
+		whiteSpace: "nowrap"
+	}
+}));
+const ChipSection = (props) => {
+	const { filterChips = [], viewChips = [], additionalFilterChips = [], hideKpiSection = false, kpiValues = [], maxKPIsDisplayed = 4, handleDelete } = props;
+	const classes = useStyles$3();
+	const chipRefs = useRef([]);
+	const chipSectionContainerRef = useRef(null);
+	const viewChipsContainerRef = useRef(null);
+	const filterChipsContainerRef = useRef(null);
+	const additionalFilterChipsContainerRef = useRef(null);
+	const kpiContainerRef = useRef(null);
+	const [selectedFilterChip, setSelectedFilterChip] = useState(null);
+	const abbrNum = (number, decPlaces) => {
+		if (typeof number === "string" && !isNaN(Number(number))) number = Number(number);
+		else if (typeof number !== "number") throw new Error("The input must be a number or a string that can be converted to a number.");
+		if (typeof decPlaces !== "number") return null;
+		decPlaces = Math.pow(10, decPlaces);
+		let abbrev = [
+			"k",
+			"m",
+			"b",
+			"t"
+		];
+		for (let i = abbrev.length - 1; i >= 0; i--) {
+			let size = Math.pow(10, (i + 1) * 3);
+			if (size <= number) {
+				number = Math.round(number * decPlaces / size) / decPlaces;
+				if (number === 1e3 && i < abbrev.length - 1) {
+					number = 1;
+					i++;
+				}
+				number += abbrev[i];
+				break;
+			}
+		}
+		return number;
+	};
+	const isEmpty = (array) => Array.isArray(array) && array.length === 0;
+	const abbreviateLabel = (label) => {
+		const maxLength = 10;
+		if (label.length > maxLength) return label.slice(0, maxLength - 3) + "...";
+		else return null;
+	};
+	const handleFilterChipToggle = (chip) => {
+		setSelectedFilterChip(chip);
+		if (typeof chip.onToggle === "function") chip.onToggle();
+	};
+	const handleFilterChipUntoggle = () => {
+		if (selectedFilterChip) {
+			if (typeof selectedFilterChip.onUntoggle === "function") selectedFilterChip.onUntoggle();
+			setSelectedFilterChip(null);
+		}
+	};
+	return /* @__PURE__ */ React.createElement("div", {
+		ref: chipSectionContainerRef,
+		className: classes.wrapper,
+		style: { display: [
+			kpiValues,
+			additionalFilterChips,
+			viewChips,
+			filterChips
+		].every((arr) => arr.length === 0) ? "none" : "flex" }
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.chipHolder }, /* @__PURE__ */ React.createElement("div", { ref: viewChipsContainerRef }, viewChips.map((chip, index) => /* @__PURE__ */ React.createElement(Chip$1, {
+		onDelete: () => handleDelete("view", index),
+		key: index,
+		label: chip.label,
+		className: classes.viewChip,
+		icon: /* @__PURE__ */ React.createElement(StarIcon, null),
+		size: "small"
+	}))), !isEmpty(viewChips) && !isEmpty(filterChips) && /* @__PURE__ */ React.createElement(Divider$1, {
+		orientation: "vertical",
+		flexItem: true
+	}), !isEmpty(filterChips) && /* @__PURE__ */ React.createElement(DynamicContainerWithMenu, {
+		className: classes.chipHolder,
+		ref: filterChipsContainerRef
+	}, selectedFilterChip && /* @__PURE__ */ React.createElement(Chip$1, {
+		onDelete: handleFilterChipUntoggle,
+		label: selectedFilterChip.label,
+		className: classes.viewChip,
+		size: "small"
+	}), filterChips.map((chip, index) => {
+		if (selectedFilterChip && chip.id === selectedFilterChip.id) return null;
+		return /* @__PURE__ */ React.createElement(Tooltip$1, { title: chip.label }, /* @__PURE__ */ React.createElement(Chip$1, {
+			key: index,
+			label: /* @__PURE__ */ React.createElement("div", { style: {
+				display: "flex",
+				flexWrap: "noWrap"
+			} }, /* @__PURE__ */ React.createElement(Typography$1, {
+				noWrap: true,
+				className: chip.value ? classes.filterChipLabel : ""
+			}, chip.label), /* @__PURE__ */ React.createElement(Typography$1, {
+				noWrap: true,
+				className: classes.filterChipValue
+			}, chip.value)),
+			className: classes.filterChip,
+			size: "small",
+			onClick: () => handleFilterChipToggle(chip),
+			ref: (el) => chipRefs.current[index] = el
+		}));
+	})), !isEmpty(additionalFilterChips) && !isEmpty(filterChips) && /* @__PURE__ */ React.createElement(Divider$1, {
+		orientation: "vertical",
+		flexItem: true
+	}), /* @__PURE__ */ React.createElement("div", {
+		ref: additionalFilterChipsContainerRef,
+		style: { display: "flex" }
+	}, additionalFilterChips.map((chip, index) => /* @__PURE__ */ React.createElement(Chip$1, {
+		variant: "outlined",
+		onDelete: () => handleDelete("additionalFilter", index),
+		key: index,
+		label: chip.label,
+		className: classes.additionalFilterChip,
+		size: "small"
+	})))), !hideKpiSection && /* @__PURE__ */ React.createElement("div", {
+		className: classes.KPI,
+		ref: kpiContainerRef
+	}, kpiValues.slice(0, 4).map((kpi, index) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+		className: classes.kpiItem,
+		id: index
+	}, /* @__PURE__ */ React.createElement("span", { className: classes.kpiLabel }, abbreviateLabel(kpi.label) && /* @__PURE__ */ React.createElement(Tooltip$1, {
+		title: kpi.label,
+		arrow: true
+	}, /* @__PURE__ */ React.createElement(Typography$1, { noWrap: true }, /* @__PURE__ */ React.createElement("span", null, kpi.label, ":"))) || /* @__PURE__ */ React.createElement(React.Fragment, null, kpi.label)), /* @__PURE__ */ React.createElement("span", { className: classes.kpiValue }, /* @__PURE__ */ React.createElement(Tooltip$1, {
+		title: kpi.value,
+		arrow: true
+	}, /* @__PURE__ */ React.createElement("span", null, abbrNum(kpi.value, 1))))), index !== maxKPIsDisplayed - 1 && /* @__PURE__ */ React.createElement(Divider$1, {
+		orientation: "vertical",
+		flexItem: true
+	})))));
+};
+ChipSection.propTypes = {
+	filterChips: PropTypes.arrayOf(PropTypes.shape({
+		label: PropTypes.string.isRequired,
+		value: PropTypes.string.isRequired
+	})),
+	viewChips: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string.isRequired })),
+	additionalFilterChips: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string.isRequired })),
+	hideKpiSection: PropTypes.bool,
+	kpiValues: PropTypes.arrayOf(PropTypes.shape({
+		label: PropTypes.string.isRequired,
+		value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+	})),
+	maxKPIsDisplayed: PropTypes.number,
+	handleDelete: PropTypes.func,
+	selectedFilterChipsIndex: PropTypes.number,
+	setSelectedFilterChipsIndex: PropTypes.func
+};
+
+//#endregion
+//#region src/UI/templates/ui/renderers/ActionsRenderer.jsx
+const useStyles$2 = makeStyles((theme) => ({
+	icon: { margin: theme.spacing(.5) },
+	iconButtonStyle: {
+		width: `${theme.spacing(3)}px !important`,
+		height: `${theme.spacing(3)}px !important`,
+		background: "#fff",
+		borderRadius: 25,
+		padding: 6
+	},
+	circularSkeleton: { borderRadius: "50%" }
+}));
+const ActionItem = memo((props) => {
+	const { icon, title, onClick, disabled, businessObjectKey = "" } = props;
+	const classes = useStyles$2();
+	return /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
+		title,
+		className: classes.icon,
+		size: "small",
+		onClick,
+		disabled,
+		icon,
+		fluentIconClassName: classes.iconButtonStyle,
+		id: "udpRecord-ActionsRenderer-" + title,
+		udprecordid: "udpRecord-ActionsRenderer-" + title
+	});
+});
+const ActionsRenderer = memo((props) => {
+	const { data: value, actionList, onClick } = props;
+	const classes = useStyles$2();
+	const [sheetOpen, setSheetOpen] = useState(false);
+	const [sheetItem, setSheetItem] = useState(null);
+	const [dialogItem, setDialogItem] = useState(null);
+	const [dialogOpen, setDialogOpen] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
+	const [sideSheetWidth, setSideSheetWidth] = useState(600);
+	const [sideSheetButtonLabel, setSideSheetButtonLabel] = useState("");
+	const [sideSheetOnSubmit, setSideSheetOnSubmit] = useState(() => () => console.warn("onSubmit not set"));
+	const openSheet = useCallback((sheetView) => {
+		setSheetItem(sheetView);
+		setSheetOpen(true);
+	}, []);
+	const openDialog = useCallback((dialogView) => {
+		setDialogItem(dialogView);
+		setDialogOpen(true);
+	}, []);
+	const closeSheet = useCallback(() => {
+		setSheetOpen(false);
+	}, []);
+	const closeDialog = useCallback(() => {
+		setDialogOpen(false);
+	}, []);
+	const getSheetView = (actionItem) => {
+		if (actionItem.opens === ClickOpenEnums.SideSheet) {
+			const valuePropName = actionItem?.view?.properties?.valuePropName;
+			if (valuePropName) actionItem.view.properties[valuePropName] = value;
+			const closeSideSheetPropName = actionItem?.view?.properties?.closeSideSheetPropName;
+			if (closeSideSheetPropName) actionItem.view.properties[closeSideSheetPropName] = closeSheet;
+		}
+		const properties = actionItem?.view?.properties || {};
+		return {
+			id: actionItem.id,
+			title: actionItem.title || "",
+			width: actionItem?.view?.width,
+			children: actionItem?.view?.component({
+				...properties,
+				setSideSheetWidth,
+				setSideSheetButtonLabel,
+				setSideSheetOnSubmit
+			})
+		};
+	};
+	const getDialogView = (actionItem) => {
+		if (actionItem.opens === ClickOpenEnums.Dialog) {
+			const handleActionTwo = async () => {
+				if (actionItem?.view?.properties?.actionTwo) {
+					setIsLoading(true);
+					await actionItem?.view?.properties?.actionTwo(value);
+					setIsLoading(false);
+				}
+				closeDialog();
+			};
+			return {
+				id: actionItem.id,
+				title: actionItem?.title || "",
+				closeDialog,
+				message: actionItem?.view?.properties?.message,
+				labelOne: actionItem?.view?.properties?.labelOne,
+				actionTwo: handleActionTwo,
+				labelTwo: actionItem?.view?.properties?.labelTwo
+			};
+		}
+	};
+	const displayActions = actionList.map((item, index) => {
+		let onClick$1 = () => item.onClick(value);
+		let title = item.title;
+		let disabled = item.disabled;
+		if (item.opens === ClickOpenEnums.SideSheet) {
+			const sheetView = getSheetView(item);
+			onClick$1 = () => openSheet(sheetView);
+		}
+		if (item.opens === ClickOpenEnums.Dialog) {
+			const dialogView = getDialogView(item);
+			onClick$1 = () => openDialog(dialogView);
+		}
+		if (item.getTitle) title = item.getTitle(value);
+		if (item.checkDisabled) disabled = item.checkDisabled(value);
+		return /* @__PURE__ */ React.createElement(React.Fragment, null, item.loading && /* @__PURE__ */ React.createElement("div", { style: {
+			display: "inline-flex",
+			marginRight: 10
+		} }, /* @__PURE__ */ React.createElement(Skeleton, {
+			className: classes.circularSkeleton,
+			width: 24,
+			height: 40
+		})), !item.loading && /* @__PURE__ */ React.createElement(ActionItem, {
+			key: `${item.id}-${index}`,
+			title,
+			icon: item.icon,
+			onClick: onClick$1,
+			disabled,
+			businessObjectKey: value?.businessObjectKey
+		}));
+	});
+	return /* @__PURE__ */ React.createElement("div", null, displayActions, /* @__PURE__ */ React.createElement(SideSheet, {
+		open: sheetOpen,
+		onClose: closeSheet,
+		title: sheetItem?.title,
+		width: sheetItem?.width || 600,
+		buttonLabel: sideSheetButtonLabel,
+		onSubmit: sideSheetOnSubmit
+	}, /* @__PURE__ */ React.createElement("div", null, sheetItem?.children)), /* @__PURE__ */ React.createElement(FluentDialog, {
+		open: dialogOpen,
+		handleClose: closeDialog,
+		title: dialogItem?.title,
+		message: dialogItem?.message,
+		actionOne: dialogItem?.closeDialog,
+		labelOne: dialogItem?.labelOne,
+		actionTwo: dialogItem?.actionTwo,
+		labelTwo: dialogItem?.labelTwo,
+		progress: dialogItem?.isLoading
+	}));
+});
+ActionItem.displayName = "ActionItem";
+ActionsRenderer.displayName = "ActionsRenderer";
+
+//#endregion
+//#region src/UI/utilityDisplay/GridViewsSideSheet.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	publicChip: {
+		backgroundColor: "#96d2ff",
+		color: "black",
+		width: "60%"
+	},
+	privateChip: {
+		backgroundColor: "#fce597",
+		color: "black",
+		width: "60%"
+	}
+}));
+const GridViewsSideSheet = (props) => {
+	const { onClose, open, openSaveView, rowData, setSelectedView } = props;
+	const classes = useStyles$1();
+	const { t } = useTranslation();
+	const { gridApi, onGridReady } = useAgGridApi();
+	const gApi = gridApi;
+	const ChipRenderer = ({ onChange, value, id }) => {
+		const handleChipClick = () => {
+			onChange(id);
+		};
+		return /* @__PURE__ */ React.createElement(Chip$1, {
+			label: value === VisibilityTypeEnums.Public ? t("Public") : t("Private"),
+			onClick: handleChipClick,
+			className: value === VisibilityTypeEnums.Public ? classes.publicChip : classes.privateChip,
+			size: "small"
+		});
+	};
+	const setView = useCallback((value) => {
+		setSelectedView(value);
+		onClose();
+	}, [setSelectedView, onClose]);
+	const actionList = useMemo(() => [{
+		id: 1,
+		title: t("Load View"),
+		icon: OpenInNewTabIcon,
+		onClick: setView,
+		disabled: false
+	}, {
+		id: 2,
+		title: t("Workflows"),
+		icon: TableHeaderRowIcon,
+		disabled: false
+	}], [setView, t]);
+	const gridOptions = {
+		headerHeight: 0,
+		frameworkComponents: {
+			actionsRenderer: ActionsRenderer,
+			chipRenderer: ChipRenderer
+		},
+		columnDefs: [
+			{
+				headerName: t("Name"),
+				field: "name"
+			},
+			{
+				field: "visibility",
+				cellRenderer: "chipRenderer",
+				cellRendererParams: (params) => ({
+					onChange: (id) => {},
+					value: params.data.gridViewVisibilityTypeId
+				})
+			},
+			{
+				headerName: t("Actions"),
+				cellRenderer: "actionsRenderer",
+				cellRendererParams: { actionList },
+				width: "100px",
+				pinned: "right",
+				suppressMenu: true,
+				sortable: false
+			}
+		]
+	};
+	return /* @__PURE__ */ React.createElement(SideSheet, {
+		id: "udpRecord-GridViewsSideSheet",
+		udprecordid: "udpRecord-GridViewsSideSheet",
+		open,
+		onClose,
+		width: "40%",
+		title: "Select a View",
+		buttonLabel: "Create View",
+		onSubmit: openSaveView
+	}, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: 10 } }, /* @__PURE__ */ React.createElement(HintPanel, {
+		hint: "Quickly access and manage your pre-configured table/grid views. These views are designed to help you focus on specific sets of data and streamline your workflow.",
+		hideHintText: "Hide Help"
+	})), /* @__PURE__ */ React.createElement(AmbientGridTemplate, {
+		gridOptions,
+		title: "Saved Views",
+		rowData: rowData || [],
+		onGridReady,
+		suppressCellSelection: true,
+		suppressRowClickSelection: true,
+		sideBar: false,
+		pivotMode: false,
+		pivotPanelShow: "never",
+		animateRows: true,
+		pagination: false,
+		api: gApi,
+		useNewHeader: true,
+		hiddenActionButtons: [
+			"saveView",
+			"views",
+			"insights",
+			"importExport",
+			"group",
+			"filter",
+			"columns",
+			"fitGrid",
+			"expandGrid",
+			"clearFilters"
+		]
+	}));
+};
+var GridViewsSideSheet_default = GridViewsSideSheet;
+GridViewsSideSheet.propTypes = {
+	onClose: PropTypes.func.isRequired,
+	open: PropTypes.bool.isRequired,
+	selectedMethod: PropTypes.string,
+	catalog: PropTypes.array,
+	openSaveView: PropTypes.func,
+	setViewChips: PropTypes.func,
+	setFilter: PropTypes.func,
+	rowData: PropTypes.array,
+	setSelectedView: PropTypes.func,
+	frameworkComponents: PropTypes.object,
+	scrollToTopOnStateChange: PropTypes.bool
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/BulkActionsGridButton.jsx
+const BulkActionsGridButton = (props) => {
+	const { numSelectedRows, bulkActions, triggerAction, domain } = props;
+	const [actionsAnchorEl, setActionsAnchorEl] = useState(null);
+	const handleBulkActionsClick = (event) => {
+		setActionsAnchorEl(event.currentTarget);
+	};
+	const triggerBulkAction = (actionId) => {
+		triggerAction(actionId);
+	};
+	const filterAction = (action) => {
+		return !!domain ? JSON.parse(action?.parameters)?.entityName === domain : true;
+	};
+	return /* @__PURE__ */ React.createElement("div", { style: {
+		marginTop: 5,
+		marginLeft: 20
+	} }, /* @__PURE__ */ React.createElement(Badge, {
+		badgeContent: numSelectedRows,
+		color: "secondary"
+	}, /* @__PURE__ */ React.createElement(FluentButton, {
+		type: "button",
+		onClick: handleBulkActionsClick,
+		variant: "outlined",
+		color: "primary",
+		endIcon: /* @__PURE__ */ React.createElement(FluentIcon, {
+			component: ChevronDownIcon,
+			size: "small"
+		})
+	}, "With Selected")), /* @__PURE__ */ React.createElement(Popover, {
+		id: "actions",
+		open: Boolean(actionsAnchorEl),
+		anchorEl: actionsAnchorEl,
+		onClose: () => setActionsAnchorEl(null),
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		}
+	}, bulkActions && bulkActions.map((action) => {
+		const valid = filterAction(action);
+		return /* @__PURE__ */ React.createElement(Tooltip, {
+			placement: "right",
+			title: !valid ? "Action entity does not match data grid entity" : ""
+		}, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(MenuItem, {
+			onClick: () => triggerBulkAction(action.actionId),
+			style: {
+				display: "flex",
+				justifyContent: "space-between"
+			},
+			disabled: !valid
+		}, /* @__PURE__ */ React.createElement(Typography, null, action.name), /* @__PURE__ */ React.createElement(FluentIcon, {
+			component: valid ? action.icon ?? AppIconDefaultIcon : ErrorIcon,
+			style: { marginLeft: 7 },
+			color: !valid && "red"
+		}))));
+	})));
+};
+
+//#endregion
+//#region src/UI/templates/AmbientGridTemplate.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	pab: {
+		display: "flex",
+		[theme.breakpoints.between("xs", "sm")]: {
+			position: "fixed",
+			bottom: theme.spacing(2),
+			right: theme.spacing(2),
+			zIndex: theme.zIndex.appBar
+		}
+	},
+	groupSideBar: { width: 225 },
+	gridApi: { display: "flex" }
+}));
+const AmbientGridTemplate = (props) => {
+	const { additionalFilters, api, apiMethod, applicationName, bulkActionFunctions, clearGridConfig, columnApi, columnDefs, data, defaultAutoSize, deleteGridConfig, disablePagination, disableDynamicSizing, disableRowSelection, entityName, filterChips = [], filters, frameworkComponents, gridReady, gridId, groupingData, height, hideFitGrid, hideExpandGrid, hideExportGrid, hideRemoveFilters, hideFilterTab, hideGroupTab, hideColumnTab, hideSearchBar, hiddenLabels, hiddenActionButtons = [], kpiValues = [], loading = false, onRowSelected, onSearch, onPrimaryActionClick, paginationPageSize = 20, primaryActionButton, primaryActionDisabled, primaryActionLabel, primaryActionIcon, rowModelType = "clientSide", rowNodeIdName, saveGridConfig, scrollToTopOnStateChange, secondaryActionButtons, title, tenantName, hideHeader, useNewHeader, insightsClick, user, id, udprecordid, additionalGridOptions = {}, headerBackgroundColor, onSearchKeyDown,...otherGridProps } = props;
+	const classes = useStyles();
+	const { gridApi, gridColumnApi, onGridReady } = useAgGridApi();
+	const [isVisible, setIsVisible] = useState();
+	const [sidebarIsVisible, setSidebarIsVisible] = useState(false);
+	const [showGroupOptions, setShowGroupOptions] = useState(false);
+	const [selectedRow, setSelectedRow] = useState(null);
+	const [value, setValue] = useState(0);
+	const [saveViewOpen, setSaveViewOpen] = useState(false);
+	const [defaultViews, setDefaultViews] = useState([]);
+	const [viewsOpen, setViewsOpen] = useState(false);
+	const [agGridOptions, setAgGridOptions] = useState({
+		frameworkComponents,
+		suppressScrollOnNewData: !scrollToTopOnStateChange,
+		...additionalGridOptions
+	});
+	const gApi = api || gridApi;
+	const gcApi = columnApi || gridColumnApi;
+	const [viewChips, setViewChips] = useState([]);
+	const [additionalFilterChips, setAdditionalFilterChips] = useState(additionalFilters);
+	const [columnDefsValues, setColumnDefsValues] = useState(null);
+	const [selectedView, setSelectedView] = useState(null);
+	const [viewsRowData, setViewsRowData] = useState(null);
+	const [nonDefaultViewsRowData, setNonDefaultViewsRowData] = useState();
+	const [numSelectedRows, setNumSelectedRows] = useState(0);
+	const [domain, setDomain] = useState(null);
+	const [apiCatalogId, setApiCatalogId] = useState(null);
+	const { triggerAction } = useActions();
+	useEffect(() => {
+		if (apiMethod) {
+			setDomain(apiMethod.entityName);
+			setApiCatalogId(apiMethod.apiCatalogId);
+		}
+	}, [
+		apiMethod,
+		setDomain,
+		setApiCatalogId
+	]);
+	const defaultColActionsDef = {
+		resizable: true,
+		editable: false,
+		sortable: true,
+		filter: true,
+		floatingFilter: false,
+		enableRowGroup: true,
+		filterParams: { filterOptions: rowModelType === "serverSide" ? Object.keys(FilterOperators) : void 0 }
+	};
+	const handleChange = (event, newValue) => {
+		event.preventDefault();
+		setValue((preValue) => {
+			if (newValue === preValue && newValue !== 1) gApi.setSideBarVisible(!gApi.isSideBarVisible());
+			else if (newValue === 0) {
+				gApi.setSideBarVisible(true);
+				gApi.openToolPanel("filters");
+				setShowGroupOptions(false);
+			} else if (newValue === 1) {
+				showGrouping();
+				gApi.setSideBarVisible(false);
+			} else {
+				gApi.setSideBarVisible(true);
+				gApi.openToolPanel("columns");
+				setShowGroupOptions(false);
+			}
+			return newValue;
+		});
+	};
+	const onFilterClick = (event) => {
+		event.preventDefault();
+		gApi.setSideBarVisible(!gApi.isSideBarVisible());
+		gApi.openToolPanel("filters");
+		setShowGroupOptions(false);
+		setValue(0);
+		setSidebarIsVisible(!sidebarIsVisible);
+	};
+	const onColumnsClick = (event) => {
+		event.preventDefault();
+		gApi.setSideBarVisible(!gApi.isSideBarVisible());
+		gApi.openToolPanel("columns");
+		setShowGroupOptions(false);
+		setValue(2);
+		setSidebarIsVisible(!sidebarIsVisible);
+	};
+	const emptyArr = [];
+	const handleRowSelected = useCallback((event) => {
+		if (!gApi) return;
+		const selectedRows = gApi.getSelectedRows();
+		setNumSelectedRows(selectedRows.length);
+		const row = selectedRows.length && selectedRows[0];
+		setSelectedRow(row);
+		if (onRowSelected) onRowSelected(event, row);
+	}, [gApi, onRowSelected]);
+	const setSideBarInvisible = () => {
+		if (gApi.isSideBarVisible()) {
+			gApi.setSideBarVisible(false);
+			setIsVisible(false);
+		} else {
+			gApi.setSideBarVisible(true);
+			gApi.openToolPanel("filters");
+			setShowGroupOptions(false);
+			setIsVisible(true);
+		}
+	};
+	const handleFilterChange = (event) => {
+		gApi.setQuickFilter(event.target.value);
+	};
+	const groupGridItems = (groupItem) => {
+		gcApi.setRowGroupColumns([groupItem]);
+		gApi.expandAll();
+	};
+	const restoreGridDefault = () => {
+		gApi.setQuickFilter("");
+		gcApi.setRowGroupColumns([]);
+		gApi.setFilterModel(null);
+		gApi.setQuickFilter("");
+		gcApi.resetColumnState();
+	};
+	const showGrouping = () => {
+		setShowGroupOptions(!showGroupOptions);
+		gApi.setSideBarVisible(false);
+	};
+	const expandGroupedGrid = () => {
+		gApi.expandAll();
+	};
+	const collapseGroupedGrid = () => {
+		gApi.collapseAll();
+	};
+	const fitToSpace = () => {
+		gApi.sizeColumnsToFit();
+	};
+	const exportGrid = () => {
+		gApi.exportDataAsCsv({
+			allColumns: true,
+			fileName: "export"
+		});
+	};
+	const openSaveView = () => {
+		setColumnDefsValues(JSON.stringify(gcApi.getColumnState()));
+		setSaveViewOpen(true);
+	};
+	const closeSaveView = () => {
+		setSaveViewOpen(false);
+	};
+	const openViews = useCallback(() => {
+		setViewsOpen(true);
+	}, []);
+	const closeViews = () => {
+		setViewsOpen(false);
+	};
+	const handleTriggerAction = useCallback((actionId) => {
+		if (triggerAction && gApi) triggerAction(actionId, gApi.getSelectedRows());
+	}, [triggerAction, gApi]);
+	const autoSizeAll = useCallback((skipHeader) => {
+		invariant(gcApi, `gridColumnApi not ready`);
+		const allColumnIds = [];
+		gcApi.getAllColumns().forEach((column) => {
+			allColumnIds.push(column.getColId());
+		});
+		gcApi.autoSizeColumns(allColumnIds, skipHeader);
+	}, [gcApi]);
+	const autoSizeAllWithoutHeader = useCallback(() => autoSizeAll(false), [autoSizeAll]);
+	const firstDataRendered = useCallback((params) => {
+		!defaultAutoSize && params?.api.sizeColumnsToFit();
+		defaultAutoSize && autoSizeAllWithoutHeader();
+	}, [defaultAutoSize, autoSizeAllWithoutHeader]);
+	useEffect(() => {
+		if (!gApi) return;
+		setSelectedRow(gApi.getSelectedRows()?.length && gApi.getSelectedRows()[0]);
+		selectedRow && gApi.ensureNodeVisible(selectedRow);
+	}, [gApi, selectedRow]);
+	const handleChipDelete = (chipType, chipIndex) => {
+		switch (chipType) {
+			case "view":
+				setViewChips((prevChips) => prevChips.filter((_, index) => index !== chipIndex));
+				setSelectedView(null);
+				gcApi.resetColumnState();
+				gApi.sizeColumnsToFit();
+				break;
+			case "additionalFilter":
+				setAdditionalFilterChips((prevChips) => {
+					if (prevChips[chipIndex]?.onUntoggle) prevChips[chipIndex]?.onUntoggle();
+					return prevChips.filter((_, index) => index !== chipIndex);
+				});
+				break;
+			default: break;
+		}
+	};
+	useEffect(() => {
+		if (viewsRowData?.length > 0) {
+			const DefaultViews = viewsRowData.reduce((acc, row) => {
+				if (row.isDefault) return [...acc, row];
+				return acc;
+			}, []);
+			const nonDefaultViews = viewsRowData.reduce((acc, row) => {
+				if (!row.isDefault) return [...acc, row];
+				return acc;
+			}, []);
+			setDefaultViews(DefaultViews);
+			setNonDefaultViewsRowData(nonDefaultViews);
+		}
+	}, [viewsRowData]);
+	const setView = useCallback((value$1) => {
+		const columnState = value$1?.gridViewGridViewGridConfiguration.map((ele) => ele.gridViewGridConfigurationGridConfiguration);
+		setViewChips((prevChips) => [{ label: value$1?.name }]);
+		onFirstDataRendered(gApi, gcApi, columnState);
+	}, [
+		setViewChips,
+		gApi,
+		gcApi
+	]);
+	const setFilter = (value$1) => {};
+	const [{ data: views }, refetch] = useAxiosGet(ConfigService.tenantV2ApiUrl, `GridView/getFromUser/${user?.id}/${gridId}`, { params: {
+		domainName: domain,
+		apiCatalogId
+	} }, !!!ConfigService.tenantV2ApiUrl || !!!gridId || !!!user);
+	const [{ data: bulkActions }] = useAxiosGet(ConfigService.integrationV2ApiUrl, `action/grid/${gridId}`, {}, !!!ConfigService.integrationV2ApiUrl || !!!gridId);
+	useEffect(() => {
+		setViewsRowData(views);
+	}, [openViews, views]);
+	const getView = useCallback(async () => {
+		await apiMutate$1(ConfigService.tenantV2ApiUrl, `GridView/${selectedView.gridViewId}/PartiallyFull`, { method: "get" }).then((response) => {
+			setView(response.data);
+		}).catch((error) => {
+			console.log(error);
+		});
+	}, [selectedView, setView]);
+	useEffect(() => {
+		if (!selectedView?.gridViewId) {
+			gcApi?.resetColumnState();
+			gApi?.sizeColumnsToFit();
+			return;
+		}
+		getView();
+	}, [
+		setSelectedView,
+		selectedView,
+		gcApi,
+		gApi,
+		getView
+	]);
+	useEffect(() => {
+		if (additionalFilters) setAdditionalFilterChips(additionalFilters);
+	}, [additionalFilters]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, !hideHeader && useNewHeader && gApi && /* @__PURE__ */ React.createElement(GridPrimaryBar, {
+		title,
+		showFilter: setSideBarInvisible,
+		selected: isVisible,
+		onChange: onSearch || handleFilterChange,
+		showGroup: showGrouping,
+		value,
+		saveViewClick: openSaveView,
+		viewsClick: openViews,
+		handleChange,
+		fitClick: fitToSpace,
+		expandClick: autoSizeAllWithoutHeader,
+		exportClick: exportGrid,
+		insightsClick,
+		clearClick: restoreGridDefault,
+		filterClick: onFilterClick,
+		columnsClick: onColumnsClick,
+		hideSearchBar,
+		secondaryActionButtons: secondaryActionButtons || [],
+		onPrimaryActionClick,
+		primaryActionDisabled,
+		primaryActionLabel,
+		primaryActionIcon,
+		hiddenActionButtons: hiddenActionButtons || [],
+		hiddenLabels: hiddenLabels || [],
+		background: headerBackgroundColor,
+		onSearchKeyDown
+	}), useNewHeader && (kpiValues?.length > 0 || filterChips?.length > 0 || filters?.length > 0 || viewChips?.length > 0 || additionalFilterChips?.length > 0) && /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		flexDirection: "row",
+		height: 40
+	} }, /* @__PURE__ */ React.createElement(Grow, {
+		in: bulkActions && numSelectedRows > 0,
+		unmountOnExit: true
+	}, /* @__PURE__ */ React.createElement(BulkActionsGridButton, {
+		bulkActions,
+		numSelectedRows,
+		triggerAction: handleTriggerAction,
+		domain
+	})), /* @__PURE__ */ React.createElement(ChipSection, {
+		filterChips,
+		viewChips,
+		additionalFilterChips,
+		kpiValues,
+		handleDelete: handleChipDelete,
+		setAdditionalFilterChips,
+		setViewChips,
+		setFilter
+	})), useNewHeader && gApi && gcApi && /* @__PURE__ */ React.createElement(GridViewsSideSheet_default, {
+		open: viewsOpen,
+		onClose: closeViews,
+		openSaveView,
+		setViewChips,
+		setFilter: setView,
+		rowData: views,
+		setSelectedView
+	}), !hideHeader && !useNewHeader && /* @__PURE__ */ React.createElement(GridActionBar, {
+		title,
+		showFilter: setSideBarInvisible,
+		selected: isVisible,
+		onChange: onSearch || handleFilterChange,
+		showGroup: showGrouping,
+		value,
+		handleChange,
+		fitClick: fitToSpace,
+		expandClick: autoSizeAllWithoutHeader,
+		exportClick: exportGrid,
+		clearClick: restoreGridDefault,
+		saveGridConfig,
+		deleteGridConfig,
+		clearGridConfig,
+		hideFitGrid,
+		hideExpandGrid,
+		hideExportGrid,
+		hideRemoveFilters,
+		hideFilterTab,
+		hideGroupTab,
+		hideColumnTab,
+		hideSearchBar
+	}, primaryActionButton && /* @__PURE__ */ React.createElement("div", { className: classes.pab }, primaryActionButton)), loading && /* @__PURE__ */ React.createElement(LinearProgress, null), /* @__PURE__ */ React.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ React.createElement(AgTable, {
+		...agGridOptions,
+		columnDefs,
+		dynamicSizing: !disableDynamicSizing,
+		rowData: data || emptyArr,
+		onGridReady: gridReady || onGridReady,
+		onRowSelected: handleRowSelected,
+		suppressCellSelection: true,
+		suppressRowClickSelection: false,
+		defaultColDef: defaultColActionsDef,
+		enableRangeSelection: true,
+		enableColResize: true,
+		sideBar: sidebarIsVisible,
+		pivotMode: false,
+		pivotPanelShow: "never",
+		groupSelectsChildren: true,
+		animateRows: false,
+		pagination: !disablePagination,
+		showOpenedGroup: true,
+		paginateChildRows: true,
+		paginationPageSize,
+		modules: rowModelType === "serverSide" ? [ServerSideRowModelModule] : [],
+		onFirstDataRendered: firstDataRendered,
+		rowModelType,
+		rowClassRules: { "first-row-in-group": (params) => params.node.rowIndex !== 0 && params.node.firstChild },
+		height,
+		api: gApi,
+		rowSelection: !disableRowSelection && (bulkActions ? "multiple" : "single"),
+		hideHeader,
+		...otherGridProps
+	})), showGroupOptions && /* @__PURE__ */ React.createElement("div", { className: classes.groupSideBar }, /* @__PURE__ */ React.createElement(GridGroupingSidebar, {
+		groupItem: (item) => groupGridItems(item),
+		closeClick: () => groupGridItems(""),
+		expandClick: expandGroupedGrid,
+		collapseClick: collapseGroupedGrid,
+		groupingData,
+		height
+	})), !hiddenActionButtons?.includes("saveView") && /* @__PURE__ */ React.createElement(SaveViewFormDialog, {
+		open: saveViewOpen,
+		handleClose: closeSaveView,
+		application: applicationName,
+		tenant: tenantName,
+		user,
+		columnDefsValues,
+		refetchViews: refetch,
+		gApi,
+		gcApi,
+		setSelectedView: setView,
+		gridId,
+		domain,
+		apiCatalogId
+	})));
+};
+AmbientGridTemplate.propTypes = {
+	columnDefs: PropTypes.array,
+	handleRowSelected: PropTypes.func,
+	data: PropTypes.array,
+	title: PropTypes.string,
+	groupingData: PropTypes.array,
+	frameworkComponents: PropTypes.object,
+	loading: PropTypes.bool,
+	primaryActionButton: PropTypes.object,
+	rowNodeIdName: PropTypes.string,
+	defaultAutoSize: PropTypes.bool,
+	scrollToTopOnStateChange: PropTypes.bool,
+	disableDynamicSizing: PropTypes.bool,
+	filters: PropTypes.arrayOf(PropTypes.shape({
+		label: PropTypes.string.isRequired,
+		value: PropTypes.string.isRequired
+	})),
+	views: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string.isRequired })),
+	additionalFilters: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string.isRequired })),
+	kpis: PropTypes.arrayOf(PropTypes.shape({
+		label: PropTypes.string.isRequired,
+		value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+	})),
+	useNewHeader: PropTypes.bool,
+	insightsClick: PropTypes.func,
+	hiddenActionButtons: PropTypes.arrayOf(PropTypes.oneOf([
+		"saveView",
+		"views",
+		"insights",
+		"importExport",
+		"group",
+		"filter",
+		"columns",
+		"fitGrid",
+		"expandGrid",
+		"clearFilters"
+	])),
+	hiddenLabels: PropTypes.arrayOf(PropTypes.oneOf([
+		"saveView",
+		"views",
+		"insights",
+		"importExport",
+		"group",
+		"filter",
+		"columns",
+		"fitGrid",
+		"expandGrid",
+		"clearFilters"
+	])),
+	onPrimaryActionClick: PropTypes.func,
+	primaryActionLabel: PropTypes.string,
+	primaryActionIcon: PropTypes.elementType,
+	secondaryActionButtons: PropTypes.array,
+	applicationName: PropTypes.string,
+	entityName: PropTypes.string,
+	tenantName: PropTypes.string,
+	user: PropTypes.object,
+	kpiValues: PropTypes.array
+};
+
+//#endregion
+export { SaveViewFormDialog as a, ChipSection as i, BulkActionsGridButton as n, GridPrimaryBar as o, ActionsRenderer as r, GridActionBar as s, AmbientGridTemplate as t };
+//# sourceMappingURL=AmbientGridTemplate-Cbl9GXcd.js.map