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

package/dist/TableContainer-CJFW0Teg.js

@@ -0,0 +1,109 @@
+import { r as useAgGridApi } from "./AgTable-qA_zuj8l.js";
+import { r as getSanitizedName } from "./entityUtilities-DOZQpeXw.js";
+import { t as executeQueryAdHoc } from "./methodUtils-DwkBQ6fj.js";
+import { r as useBuildEnvironment } from "./EnvironmentRibbon-CRhI4qRC.js";
+import { r as ActionsRenderer, t as AmbientGridTemplate } from "./AmbientGridTemplate-Cbl9GXcd.js";
+import { t as SearchServiceDatasource } from "./SearchServiceDatasource-DofS4I45.js";
+import React, { useCallback, useEffect, useMemo } from "react";
+
+//#region src/maintenanceEngine/tableBrowser/TableColumnDefs.js
+const TableColumnDefs = (actionList) => {
+	const getterRowData = useCallback((params) => {
+		return params.data;
+	}, []);
+	return [{
+		headerName: "Name",
+		field: "entityName",
+		valueGetter: (params) => params.data?.properties?.displayName || params.data?.sanitizedName || getSanitizedName(params.data?.entityName),
+		wrapText: true,
+		autoHeight: false,
+		sortable: false
+	}, {
+		headerName: "Actions",
+		filter: false,
+		pinned: "right",
+		cellRenderer: "actionsRenderer",
+		width: 150,
+		cellRendererParams: { actionList },
+		valueGetter: getterRowData,
+		maxWidth: 180,
+		suppressMenu: true,
+		sortable: false,
+		cellStyle: {
+			display: "flex",
+			alignItems: "center"
+		}
+	}];
+};
+const defaultColumnActionsDef = {
+	resizable: true,
+	editable: false,
+	sortable: true,
+	filter: true,
+	floatingFilter: false,
+	enableRowGroup: true
+};
+
+//#endregion
+//#region src/maintenanceEngine/tableBrowser/TableContainer.jsx
+const TableContainer = (props) => {
+	const { actionList, loading, rowData, catalog, isServerSide = false, promotedEntity, filterElements, customColumnDefs, eagerLoad = false, logicalSearchOperator = 1, frameworkComponents = { actionsRenderer: ActionsRenderer }, additionalGridOptions, headerBackgroundColor, api, columnApi, gridReady, dynamicSizing,...other } = props;
+	const { gridApi, gridColumnApi, onGridReady } = useAgGridApi();
+	const gApi = api || gridApi;
+	const cApi = columnApi || gridColumnApi;
+	const gReady = gridReady || onGridReady;
+	const buildEnv = useBuildEnvironment();
+	const columnDefs = customColumnDefs || TableColumnDefs(actionList);
+	const groupData = useMemo(() => {
+		return columnDefs?.map((item) => {
+			return {
+				groupItem: item.field,
+				label: item.headerName,
+				value: item.field
+			};
+		});
+	}, [columnDefs]);
+	useEffect(() => {
+		if (!gApi) return;
+		if (promotedEntity && isServerSide) {
+			let datasource = SearchServiceDatasource(null, promotedEntity?.unityBaseSearchMethod?.apiMethodId, filterElements, logicalSearchOperator, executeQueryAdHoc, null, null, eagerLoad);
+			gApi?.setServerSideDatasource(datasource);
+		}
+	}, [
+		gApi,
+		promotedEntity,
+		isServerSide,
+		filterElements,
+		eagerLoad,
+		logicalSearchOperator
+	]);
+	return /* @__PURE__ */ React.createElement(AmbientGridTemplate, {
+		useNewHeader: true,
+		api: gApi,
+		onGridReady: gReady,
+		columnApi: cApi,
+		title: catalog?.name,
+		data: !isServerSide && rowData,
+		columnDefs,
+		groupingData: groupData,
+		height: `calc(100vh - ${buildEnv ? "139px" : "114px"})`,
+		frameworkComponents,
+		hideSearchBar: isServerSide,
+		loading,
+		suppressScrollOnNewData: true,
+		dynamicSizing: dynamicSizing ?? false,
+		disableRowSelection: true,
+		rowModelType: isServerSide ? "serverSide" : null,
+		serverSideStoreType: isServerSide ? "partial" : null,
+		cacheOverflowSize: isServerSide ? 2 : null,
+		cacheBlockSize: isServerSide ? 20 : null,
+		maxConcurrentDatasourceRequests: isServerSide ? 1 : null,
+		additionalGridOptions,
+		headerBackgroundColor,
+		...other
+	});
+};
+
+//#endregion
+export { TableColumnDefs as n, defaultColumnActionsDef as r, TableContainer as t };
+//# sourceMappingURL=TableContainer-CJFW0Teg.js.map

package/dist/TableContainer-CJFW0Teg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableContainer-CJFW0Teg.js","names":[],"sources":["../src/maintenanceEngine/tableBrowser/TableColumnDefs.js","../src/maintenanceEngine/tableBrowser/TableContainer.jsx"],"sourcesContent":["import { useCallback } from 'react';\nimport { getSanitizedName } from '../../utilities/entities/entityUtilities';\n\nexport const TableColumnDefs = (actionList) => {\n  const getterRowData = useCallback((params) => {\n    return params.data;\n  }, []);\n\n  const columnDefs = [\n    {\n      headerName: 'Name',\n      field: 'entityName',\n      valueGetter: (params) =>\n        params.data?.properties?.displayName ||\n        params.data?.sanitizedName ||\n        getSanitizedName(params.data?.entityName),\n      wrapText: true,\n      autoHeight: false,\n      sortable: false\n    },\n    {\n      headerName: 'Actions',\n      filter: false,\n      pinned: 'right',\n      cellRenderer: 'actionsRenderer',\n      // minWidth: 50,\n      width: 150,\n      cellRendererParams: {\n        actionList: actionList\n      },\n      valueGetter: getterRowData,\n      maxWidth: 180,\n      suppressMenu: true,\n      sortable: false,\n      cellStyle: { display: 'flex', alignItems: 'center' }\n    }\n  ];\n  return columnDefs;\n};\n\nexport const defaultColumnActionsDef = {\n  resizable: true,\n  editable: false,\n  sortable: true,\n  filter: true,\n  floatingFilter: false,\n  enableRowGroup: true\n};\n","import React, { useEffect, useMemo } from 'react';\nimport { TableColumnDefs } from './TableColumnDefs';\nimport { AmbientGridTemplate } from '../../UI/templates/AmbientGridTemplate';\nimport { ActionsRenderer } from '../../UI/templates/ui/renderers/ActionsRenderer';\nimport { useAgGridApi } from '../../utilities/aggrid/AgTable';\nimport { executeQueryAdHoc } from '../../udp/utilities/methodUtils';\nimport { SearchServiceDatasource } from '../../utilities/aggrid/datasources/SearchServiceDatasource';\nimport { useBuildEnvironment } from '../../shell/ui/EnvironmentRibbon';\n\nexport const TableContainer = (props) => {\n  const {\n    actionList,\n    loading,\n    rowData,\n    catalog,\n    isServerSide = false,\n    promotedEntity,\n    filterElements,\n    customColumnDefs,\n    eagerLoad = false,\n    logicalSearchOperator = 1,\n    frameworkComponents={ actionsRenderer: ActionsRenderer },\n    additionalGridOptions,\n    headerBackgroundColor,\n    api,\n    columnApi,\n    gridReady,\n    dynamicSizing,\n    ...other\n  } = props;\n  const { gridApi, gridColumnApi, onGridReady } = useAgGridApi();\n  const gApi = api || gridApi;\n  const cApi = columnApi || gridColumnApi;\n  const gReady = gridReady || onGridReady\n  const buildEnv = useBuildEnvironment()\n  const columnDefs = customColumnDefs || TableColumnDefs(actionList);\n\n  const groupData = useMemo(() => {\n    return columnDefs?.map((item) => {\n      return {\n        groupItem: item.field,\n        label: item.headerName,\n        value: item.field\n      };\n    });\n  }, [columnDefs]);\n\n  useEffect(() => {\n    if (!gApi) return;\n    if (promotedEntity && isServerSide) {\n      let datasource = SearchServiceDatasource(\n        null,\n        promotedEntity?.unityBaseSearchMethod?.apiMethodId,\n        filterElements,\n        logicalSearchOperator,\n        executeQueryAdHoc,\n        null,\n        null,\n        eagerLoad\n      );\n      // eslint-disable-next-line no-unused-expressions\n      gApi?.setServerSideDatasource(datasource);\n    }\n  }, [gApi, promotedEntity, isServerSide, filterElements, eagerLoad, logicalSearchOperator]);\n\n  return (\n    <AmbientGridTemplate\n      useNewHeader\n      api={gApi}\n      onGridReady={gReady}\n      columnApi={cApi}\n      title={catalog?.name}\n      data={!isServerSide && rowData}\n      columnDefs={columnDefs}\n      groupingData={groupData}\n      height={`calc(100vh - ${buildEnv ? '139px' : '114px'})`}\n      frameworkComponents={frameworkComponents}\n      hideSearchBar={isServerSide}\n      loading={loading}\n      suppressScrollOnNewData\n      dynamicSizing={dynamicSizing ?? false}\n      disableRowSelection={true}\n      rowModelType={isServerSide ? 'serverSide' : null}\n      serverSideStoreType={isServerSide ? 'partial' : null}\n      cacheOverflowSize={isServerSide ? 2 : null}\n      cacheBlockSize={isServerSide ? 20 : null}\n      maxConcurrentDatasourceRequests={isServerSide ? 1 : null}\n      additionalGridOptions={additionalGridOptions}\n      headerBackgroundColor={headerBackgroundColor}\n      {...other}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;AAGA,MAAa,mBAAmB,eAAe;CAC7C,MAAM,gBAAgB,aAAa,WAAW;AAC5C,SAAO,OAAO;IACb,EAAE,CAAC;AA+BN,QA7BmB,CACjB;EACE,YAAY;EACZ,OAAO;EACP,cAAc,WACZ,OAAO,MAAM,YAAY,eACzB,OAAO,MAAM,iBACb,iBAAiB,OAAO,MAAM,WAAW;EAC3C,UAAU;EACV,YAAY;EACZ,UAAU;EACX,EACD;EACE,YAAY;EACZ,QAAQ;EACR,QAAQ;EACR,cAAc;EAEd,OAAO;EACP,oBAAoB,EACN,YACb;EACD,aAAa;EACb,UAAU;EACV,cAAc;EACd,UAAU;EACV,WAAW;GAAE,SAAS;GAAQ,YAAY;GAAU;EACrD,CACF;;AAIH,MAAa,0BAA0B;CACrC,WAAW;CACX,UAAU;CACV,UAAU;CACV,QAAQ;CACR,gBAAgB;CAChB,gBAAgB;CACjB;;;;ACtCD,MAAa,kBAAkB,UAAU;CACvC,MAAM,EACJ,YACA,SACA,SACA,SACA,eAAe,OACf,gBACA,gBACA,kBACA,YAAY,OACZ,wBAAwB,GACxB,sBAAoB,EAAE,iBAAiB,iBAAiB,EACxD,uBACA,uBACA,KACA,WACA,WACA,cACA,GAAG,UACD;CACJ,MAAM,EAAE,SAAS,eAAe,gBAAgB,cAAc;CAC9D,MAAM,OAAO,OAAO;CACpB,MAAM,OAAO,aAAa;CAC1B,MAAM,SAAS,aAAa;CAC5B,MAAM,WAAW,qBAAqB;CACtC,MAAM,aAAa,oBAAoB,gBAAgB,WAAW;CAElE,MAAM,YAAY,cAAc;AAC9B,SAAO,YAAY,KAAK,SAAS;AAC/B,UAAO;IACL,WAAW,KAAK;IAChB,OAAO,KAAK;IACZ,OAAO,KAAK;IACb;IACD;IACD,CAAC,WAAW,CAAC;AAEhB,iBAAgB;AACd,MAAI,CAAC,KAAM;AACX,MAAI,kBAAkB,cAAc;GAClC,IAAI,aAAa,wBACf,MACA,gBAAgB,uBAAuB,aACvC,gBACA,uBACA,mBACA,MACA,MACA,UACD;AAED,SAAM,wBAAwB,WAAW;;IAE1C;EAAC;EAAM;EAAgB;EAAc;EAAgB;EAAW;EAAsB,CAAC;AAE1F,QACE,oCAAC;EACC;EACA,KAAK;EACL,aAAa;EACb,WAAW;EACX,OAAO,SAAS;EAChB,MAAM,CAAC,gBAAgB;EACX;EACZ,cAAc;EACd,QAAQ,gBAAgB,WAAW,UAAU,QAAQ;EAChC;EACrB,eAAe;EACN;EACT;EACA,eAAe,iBAAiB;EAChC,qBAAqB;EACrB,cAAc,eAAe,eAAe;EAC5C,qBAAqB,eAAe,YAAY;EAChD,mBAAmB,eAAe,IAAI;EACtC,gBAAgB,eAAe,KAAK;EACpC,iCAAiC,eAAe,IAAI;EAC7B;EACA;EACvB,GAAI;GACJ"}

package/dist/TenantProvider-DE-r9uqS.js

@@ -0,0 +1,37 @@
+import { t as useUser } from "./useUser--tP6DN4i.js";
+import { t as useAxiosGet } from "./useAxiosGet-5JQU4EkT.js";
+import { t as useTenantStore } from "./tenantStore-BCdG8bEr.js";
+import { t as TenantContext } from "./tenantContext-CMEUzypH.js";
+import React, { useMemo } from "react";
+import { ConfigService } from "udp-react-stencil-component-library";
+
+//#region src/utilities/tenant/TenantProvider.jsx
+const TenantProvider = ({ children }) => {
+	const user = useUser();
+	const setCurrentTenant = useTenantStore((state) => state.setCurrentTenant);
+	const [{ data: tenants }, refetchTenantsList] = useAxiosGet(ConfigService.securityV1ApiUrl, `users/${user ? user?.id : ""}/unitytenants`, {}, !user?.id);
+	const tenantContext = useMemo(() => {
+		if (!user?.currentTenantId || !tenants) return null;
+		const activeTenant = tenants.find((tenant) => tenant.tenantId === user.currentTenantId);
+		setCurrentTenant({
+			tenantId: activeTenant?.tenantId,
+			name: activeTenant?.tenantName,
+			tenantType: activeTenant?.tenantType
+		});
+		return {
+			tenantsList: tenants,
+			activeTenant,
+			refresh: refetchTenantsList
+		};
+	}, [
+		tenants,
+		setCurrentTenant,
+		refetchTenantsList,
+		user?.currentTenantId
+	]);
+	return /* @__PURE__ */ React.createElement(TenantContext.Provider, { value: tenantContext }, children);
+};
+
+//#endregion
+export { TenantProvider as t };
+//# sourceMappingURL=TenantProvider-DE-r9uqS.js.map

package/dist/TenantProvider-DE-r9uqS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TenantProvider-DE-r9uqS.js","names":[],"sources":["../src/utilities/tenant/TenantProvider.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useUser } from '../auth/useUser';\nimport { useAxiosGet } from '../useAxiosGet';\nimport { TenantContext } from './tenantContext';\nimport { useTenantStore } from '../../stores/tenantStore';\nimport { ConfigService } from 'udp-react-stencil-component-library';\n\n\nexport const TenantProvider = ({ children }) => {\n  const user = useUser();\n  const setCurrentTenant = useTenantStore((state) => state.setCurrentTenant);\n  //Get tenants that the user belongs to\n  const [{ data: tenants }, refetchTenantsList] = useAxiosGet(\n    ConfigService.securityV1ApiUrl,\n    `users/${user ? user?.id : ''}/unitytenants`,\n    {},\n    !user?.id\n  );\n\n  const tenantContext = useMemo(() => {\n    if (!user?.currentTenantId || !tenants) return null;\n\n    //matches users currentTenantId with the fetched tenant objects\n    const activeTenant = tenants.find(\n      (tenant) => tenant.tenantId === user.currentTenantId\n    );\n\n    setCurrentTenant({\n      tenantId: activeTenant?.tenantId,\n      name: activeTenant?.tenantName,\n      tenantType: activeTenant?.tenantType\n    });\n\n    return {\n      tenantsList: tenants,\n      activeTenant: activeTenant,\n      refresh: refetchTenantsList\n    };\n  }, [tenants, setCurrentTenant, refetchTenantsList, user?.currentTenantId]);\n\n  return (\n    <TenantContext.Provider value={tenantContext}>\n      {children}\n    </TenantContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;;AAQA,MAAa,kBAAkB,EAAE,eAAe;CAC9C,MAAM,OAAO,SAAS;CACtB,MAAM,mBAAmB,gBAAgB,UAAU,MAAM,iBAAiB;CAE1E,MAAM,CAAC,EAAE,MAAM,WAAW,sBAAsB,YAC9C,cAAc,kBACd,SAAS,OAAO,MAAM,KAAK,GAAG,gBAC9B,EAAE,EACF,CAAC,MAAM,GACR;CAED,MAAM,gBAAgB,cAAc;AAClC,MAAI,CAAC,MAAM,mBAAmB,CAAC,QAAS,QAAO;EAG/C,MAAM,eAAe,QAAQ,MAC1B,WAAW,OAAO,aAAa,KAAK,gBACtC;AAED,mBAAiB;GACf,UAAU,cAAc;GACxB,MAAM,cAAc;GACpB,YAAY,cAAc;GAC3B,CAAC;AAEF,SAAO;GACL,aAAa;GACC;GACd,SAAS;GACV;IACA;EAAC;EAAS;EAAkB;EAAoB,MAAM;EAAgB,CAAC;AAE1E,QACE,oCAAC,cAAc,YAAS,OAAO,iBAC5B,SACsB"}

package/dist/TileDisplay-DvHKTjpO.js

@@ -0,0 +1,224 @@
+import { t as FluentIconButton } from "./FluentIconButton-AN9tZKVl.js";
+import { t as FluentInputSlider_default } from "./FluentInputSlider-BqI2PdVF.js";
+import React from "react";
+import { Card, CardContent, Chip, Divider, Paper, Typography, lighten, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import { AlertSolidIcon, BoxMultiplySolidIcon, ChevronLeftIcon, ChevronRightIcon, HomeIcon, MapPinIcon, ZoomIcon, ZoomInIcon, ZoomOutIcon, ZoomToFitIcon } from "@fluentui/react-icons";
+
+//#region src/map-library/ui/ControlZoom.jsx
+const useStyles$4 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	divider: {
+		marginRight: theme.spacing(2),
+		marginLeft: theme.spacing(2)
+	}
+}));
+const ControlZoom = (props) => {
+	const { zoomIn, zoomOut, value, handleSliderChange, handleInputChange, handleBlur, reset } = props;
+	const classes = useStyles$4();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		onClick: zoomIn,
+		color: "primary",
+		icon: ZoomInIcon
+	}), /* @__PURE__ */ React.createElement(FluentIconButton, {
+		onClick: zoomOut,
+		color: "primary",
+		icon: ZoomOutIcon
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentInputSlider_default, {
+		value,
+		handleSliderChange,
+		handleInputChange,
+		handleBlur,
+		input: true,
+		icon: ZoomIcon
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		onClick: reset,
+		color: "primary",
+		icon: ZoomToFitIcon
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" })));
+};
+var ControlZoom_default = ControlZoom;
+
+//#endregion
+//#region src/map-library/ui/FilterOptions.jsx
+const useStyles$3 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	divider: {
+		marginRight: theme.spacing(2),
+		marginLeft: theme.spacing(2)
+	}
+}));
+const FilterOptions = (props) => {
+	const classes = useStyles$3();
+	const { showAlert, showHome, showMarker, toggleDisplayMarkers } = props;
+	const theme = useTheme();
+	const inactive = lighten(theme.palette.common.black, .8);
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		color: "primary",
+		icon: AlertSolidIcon,
+		onClick: () => toggleDisplayMarkers("alert"),
+		style: { color: showAlert ? theme.palette.error.main : inactive }
+	}), /* @__PURE__ */ React.createElement(FluentIconButton, {
+		color: "primary",
+		icon: HomeIcon,
+		onClick: () => toggleDisplayMarkers("home"),
+		style: { color: showHome ? theme.palette.success.main : inactive }
+	}), /* @__PURE__ */ React.createElement(FluentIconButton, {
+		color: "primary",
+		icon: BoxMultiplySolidIcon,
+		onClick: () => toggleDisplayMarkers("mark"),
+		style: { color: showMarker ? theme.palette.success.main : inactive }
+	}));
+};
+var FilterOptions_default = FilterOptions;
+
+//#endregion
+//#region src/map-library/ui/MapFilterBar.jsx
+const useStyles$2 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	filter: {
+		display: "flex",
+		flex: 1
+	},
+	divider: {
+		marginRight: theme.spacing(2),
+		marginLeft: theme.spacing(2)
+	}
+}));
+const MapFilterBar = (props) => {
+	const classes = useStyles$2();
+	const { showAlert, toggleDisplayMarkers, value, setZoom, handleSliderChange, handleInputChange, handleBlur, zoomIn, zoomOut, reset, showHome } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.filter }, /* @__PURE__ */ React.createElement(FilterOptions_default, {
+		showAlert,
+		showHome,
+		toggleDisplayMarkers
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" })), /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(ControlZoom_default, {
+		zoomIn,
+		zoomOut,
+		value,
+		setValue: setZoom,
+		handleSliderChange,
+		handleInputChange,
+		handleBlur,
+		reset
+	})));
+};
+
+//#endregion
+//#region src/map-library/ui/MapSheet.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {
+		position: "absolute",
+		zIndex: 9999,
+		top: 50,
+		right: 0
+	},
+	mapPage: { overflow: "hidden" },
+	collapsed: {
+		width: 0,
+		transition: theme.transitions.create("width", {
+			easing: theme.transitions.easing.easeOut,
+			duration: theme.transitions.duration.leavingScreen
+		})
+	},
+	expanded: {
+		width: 300,
+		transition: theme.transitions.create("width", {
+			easing: theme.transitions.easing.easeIn,
+			duration: theme.transitions.duration.enteringScreen
+		})
+	},
+	wrapper: { padding: theme.spacing(2) },
+	sheetWrapper: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	toggle: {
+		padding: theme.spacing(1),
+		background: theme.palette.common.white,
+		height: theme.spacing(6)
+	}
+}));
+const MapSheet = (props) => {
+	const classes = useStyles$1();
+	const { children, collapsed, toggle } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, collapsed ? classes.collapsed : classes.expanded) }, /* @__PURE__ */ React.createElement("div", { className: classes.sheetWrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.toggle }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		className: classes.extendedButton,
+		onClick: toggle,
+		color: "primary",
+		icon: collapsed ? ChevronLeftIcon : ChevronRightIcon
+	})), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Paper, { square: true }, /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, children)))));
+};
+
+//#endregion
+//#region src/map-library/ui/TileDisplay.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	title: { fontWeight: 700 },
+	titleWrapper: { marginBottom: theme.spacing(1) },
+	divider: {},
+	body: { color: lighten(theme.palette.common.black, .5) },
+	actions: {
+		marginTop: theme.spacing(1),
+		display: "flex",
+		flexDirection: "row"
+	},
+	qty: { marginLeft: theme.spacing(1) }
+}));
+const TileDisplay = (props) => {
+	const { title, body, selected } = props;
+	const classes = useStyles();
+	const qty = Math.floor(Math.random() * 10) + 1;
+	const theme = useTheme();
+	const Indicator = () => {
+		return /* @__PURE__ */ React.createElement("svg", {
+			width: "15",
+			height: "10"
+		}, /* @__PURE__ */ React.createElement("circle", {
+			cx: "70%",
+			cy: "50%",
+			r: "4",
+			fill: theme.palette.success.main
+		}));
+	};
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Card, {
+		square: true,
+		elevation: 0,
+		className: classes.root,
+		style: { background: selected && lighten(theme.palette.secondary.main, .9) }
+	}, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: classes.titleWrapper }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.title,
+		variant: "subtitle"
+	}, title)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.body,
+		variant: "caption"
+	}, body))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		color: "primary",
+		icon: MapPinIcon
+	}))), /* @__PURE__ */ React.createElement("div", { className: classes.actions }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Chip, {
+		variant: "outlined",
+		size: "small",
+		label: "Active",
+		icon: /* @__PURE__ */ React.createElement(Indicator, null)
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.qty }, /* @__PURE__ */ React.createElement(Chip, {
+		variant: "outlined",
+		size: "small",
+		label: `Qty:${qty}`
+	}))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Divider, null)));
+};
+
+//#endregion
+export { MapSheet as n, MapFilterBar as r, TileDisplay as t };
+//# sourceMappingURL=TileDisplay-DvHKTjpO.js.map

package/dist/TileDisplay-DvHKTjpO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileDisplay-DvHKTjpO.js","names":["useStyles","FluentInputSlider","useStyles","useStyles","FilterOptions","ControlZoom","useStyles"],"sources":["../src/map-library/ui/ControlZoom.jsx","../src/map-library/ui/FilterOptions.jsx","../src/map-library/ui/MapFilterBar.jsx","../src/map-library/ui/MapSheet.jsx","../src/map-library/ui/TileDisplay.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, Divider } from '@material-ui/core'\nimport { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton'\nimport {\n  ZoomInIcon,\n  ZoomOutIcon,\n  ZoomToFitIcon,\n  ZoomIcon\n} from '@fluentui/react-icons'\nimport FluentInputSlider from '../../UI/inputs/sliders/FluentInputSlider'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  divider: {\n    marginRight: theme.spacing(2),\n    marginLeft: theme.spacing(2)\n  }\n}))\n\nconst ControlZoom = (props) => {\n  const {\n    zoomIn,\n    zoomOut,\n    value,\n    handleSliderChange,\n    handleInputChange,\n    handleBlur,\n    reset\n  } = props\n  const classes = useStyles()\n  return (\n    <div className={classes.root}>\n      <div>\n        <FluentIconButton onClick={zoomIn} color='primary' icon={ZoomInIcon} />\n        <FluentIconButton\n          onClick={zoomOut}\n          color='primary'\n          icon={ZoomOutIcon}\n        />\n      </div>\n      <div className={classes.divider}>\n        <Divider orientation='vertical' />\n      </div>\n      <div>\n        <FluentInputSlider\n          value={value}\n          handleSliderChange={handleSliderChange}\n          handleInputChange={handleInputChange}\n          handleBlur={handleBlur}\n          input\n          icon={ZoomIcon}\n        />\n      </div>\n      <div className={classes.divider}>\n        <Divider orientation='vertical' />\n      </div>\n      <div>\n        <FluentIconButton\n          onClick={reset}\n          color='primary'\n          icon={ZoomToFitIcon}\n        />\n      </div>\n      <div className={classes.divider}>\n        <Divider orientation='vertical' />\n      </div>\n    </div>\n  )\n}\nexport default ControlZoom\n","import React from 'react'\nimport { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton'\nimport {\n  AlertSolidIcon,\n  HomeIcon,\n  BoxMultiplySolidIcon\n} from '@fluentui/react-icons'\nimport { makeStyles, useTheme, lighten } from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  divider: {\n    marginRight: theme.spacing(2),\n    marginLeft: theme.spacing(2)\n  }\n}))\n\nconst FilterOptions = (props) => {\n  const classes = useStyles()\n  const { showAlert, showHome, showMarker, toggleDisplayMarkers } = props\n  const theme = useTheme()\n\n  const inactive = lighten(theme.palette.common.black, 0.8)\n\n  return (\n    <div className={classes.root}>\n      <FluentIconButton\n        color='primary'\n        icon={AlertSolidIcon}\n        onClick={() => toggleDisplayMarkers('alert')}\n        style={{\n          color: showAlert ? theme.palette.error.main : inactive\n        }}\n      />\n      <FluentIconButton\n        color='primary'\n        icon={HomeIcon}\n        onClick={() => toggleDisplayMarkers('home')}\n        style={{ color: showHome ? theme.palette.success.main : inactive }}\n      />\n      <FluentIconButton\n        color='primary'\n        icon={BoxMultiplySolidIcon}\n        onClick={() => toggleDisplayMarkers('mark')}\n        style={{ color: showMarker ? theme.palette.success.main : inactive }}\n      />\n    </div>\n  )\n}\nexport default FilterOptions\n","import React from 'react'\nimport ControlZoom from './ControlZoom'\nimport { makeStyles, Divider } from '@material-ui/core'\nimport FilterOptions from './FilterOptions'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  filter: {\n    display: 'flex',\n    flex: 1\n  },\n  divider: {\n    marginRight: theme.spacing(2),\n    marginLeft: theme.spacing(2)\n  }\n}))\n\nexport const MapFilterBar = (props) => {\n  const classes = useStyles()\n\n  const {\n    showAlert,\n    toggleDisplayMarkers,\n    value,\n    setZoom,\n    handleSliderChange,\n    handleInputChange,\n    handleBlur,\n    zoomIn,\n    zoomOut,\n    reset,\n    showHome\n  } = props\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.filter}>\n        <FilterOptions\n          showAlert={showAlert}\n          showHome={showHome}\n          toggleDisplayMarkers={toggleDisplayMarkers}\n        />\n      </div>\n      <div className={classes.divider}>\n        <Divider orientation='vertical' />\n      </div>\n\n      <div className={classes.divider}>\n        <Divider orientation='vertical' />\n      </div>\n      <div>\n        <ControlZoom\n          zoomIn={zoomIn}\n          zoomOut={zoomOut}\n          value={value}\n          setValue={setZoom}\n          handleSliderChange={handleSliderChange}\n          handleInputChange={handleInputChange}\n          handleBlur={handleBlur}\n          reset={reset}\n        />\n      </div>\n    </div>\n  )\n}\n","import React from 'react'\nimport { Paper, makeStyles } from '@material-ui/core'\nimport clsx from 'clsx'\nimport { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton'\nimport { ChevronRightIcon, ChevronLeftIcon } from '@fluentui/react-icons'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    position: 'absolute',\n    zIndex: 9999,\n    top: 50,\n    right: 0\n  },\n  mapPage: {\n    overflow: 'hidden'\n  },\n  collapsed: {\n    width: 0,\n    transition: theme.transitions.create('width', {\n      easing: theme.transitions.easing.easeOut,\n      duration: theme.transitions.duration.leavingScreen\n    })\n  },\n  expanded: {\n    width: 300,\n    transition: theme.transitions.create('width', {\n      easing: theme.transitions.easing.easeIn,\n      duration: theme.transitions.duration.enteringScreen\n    })\n  },\n  wrapper: {\n    padding: theme.spacing(2)\n  },\n  sheetWrapper: {\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  toggle: {\n    padding: theme.spacing(1),\n    background: theme.palette.common.white,\n    height: theme.spacing(6)\n  }\n}))\n\nexport const MapSheet = (props) => {\n  const classes = useStyles()\n  const { children, collapsed, toggle } = props\n\n  return (\n    <div\n      className={clsx(\n        classes.root,\n        collapsed ? classes.collapsed : classes.expanded\n      )}\n    >\n      <div className={classes.sheetWrapper}>\n        <div className={classes.toggle}>\n          <FluentIconButton\n            className={classes.extendedButton}\n            onClick={toggle}\n            color='primary'\n            icon={collapsed ? ChevronLeftIcon : ChevronRightIcon}\n          />\n        </div>\n        <div>\n          <Paper square>\n            <div className={classes.wrapper}>{children}</div>\n          </Paper>\n        </div>\n      </div>\n    </div>\n  )\n}\n","import React from 'react'\nimport {\n  Card,\n  Chip,\n  CardContent,\n  makeStyles,\n  useTheme,\n  lighten,\n  Typography,\n  Divider\n} from '@material-ui/core'\nimport { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton'\nimport { MapPinIcon } from '@fluentui/react-icons'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  title: {\n    fontWeight: 700\n  },\n  titleWrapper: {\n    marginBottom: theme.spacing(1)\n  },\n  divider: {\n    // marginBottom: theme.spacing(2),\n  },\n  body: {\n    color: lighten(theme.palette.common.black, 0.5)\n  },\n  actions: {\n    marginTop: theme.spacing(1),\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  qty: {\n    marginLeft: theme.spacing(1)\n  }\n}))\n\nexport const TileDisplay = (props) => {\n  const { title, body, selected } = props\n  const classes = useStyles()\n  const qty = Math.floor(Math.random() * 10) + 1\n  const theme = useTheme()\n\n  const Indicator = () => {\n    return (\n      <svg width='15' height='10'>\n        <circle cx='70%' cy='50%' r='4' fill={theme.palette.success.main} />\n      </svg>\n    )\n  }\n\n  return (\n    <div>\n      <Card\n        square\n        elevation={0}\n        className={classes.root}\n        style={{\n          background: selected && lighten(theme.palette.secondary.main, 0.9)\n        }}\n      >\n        <CardContent>\n          <div className={classes.root}>\n            <div>\n              <div className={classes.titleWrapper}>\n                <Typography className={classes.title} variant='subtitle'>\n                  {title}\n                </Typography>\n              </div>\n              <div>\n                <Typography className={classes.body} variant='caption'>\n                  {body}\n                </Typography>\n              </div>\n            </div>\n            <div>\n              <FluentIconButton color='primary' icon={MapPinIcon} />\n            </div>\n          </div>\n\n          <div className={classes.actions}>\n            <div>\n              <Chip\n                variant='outlined'\n                size='small'\n                label='Active'\n                icon={<Indicator />}\n              />\n            </div>\n            <div className={classes.qty}>\n              <Chip variant='outlined' size='small' label={`Qty:${qty}`} />\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n      <div>\n        <Divider />\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAWA,MAAMA,cAAY,YAAY,WAAW;CACvC,MAAM;EACJ,SAAS;EACT,eAAe;EAChB;CACD,SAAS;EACP,aAAa,MAAM,QAAQ,EAAE;EAC7B,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACF,EAAE;AAEH,MAAM,eAAe,UAAU;CAC7B,MAAM,EACJ,QACA,SACA,OACA,oBACA,mBACA,YACA,UACE;CACJ,MAAM,UAAUA,aAAW;AAC3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,aACC,oCAAC;EAAiB,SAAS;EAAQ,OAAM;EAAU,MAAM;GAAc,EACvE,oCAAC;EACC,SAAS;EACT,OAAM;EACN,MAAM;GACN,CACE,EACN,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,WAAQ,aAAY,aAAa,CAC9B,EACN,oCAAC,aACC,oCAACC;EACQ;EACa;EACD;EACP;EACZ;EACA,MAAM;GACN,CACE,EACN,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,WAAQ,aAAY,aAAa,CAC9B,EACN,oCAAC,aACC,oCAAC;EACC,SAAS;EACT,OAAM;EACN,MAAM;GACN,CACE,EACN,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,WAAQ,aAAY,aAAa,CAC9B,CACF;;AAGV,0BAAe;;;;AC/Df,MAAMC,cAAY,YAAY,WAAW;CACvC,MAAM;EACJ,SAAS;EACT,eAAe;EAChB;CACD,SAAS;EACP,aAAa,MAAM,QAAQ,EAAE;EAC7B,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACF,EAAE;AAEH,MAAM,iBAAiB,UAAU;CAC/B,MAAM,UAAUA,aAAW;CAC3B,MAAM,EAAE,WAAW,UAAU,YAAY,yBAAyB;CAClE,MAAM,QAAQ,UAAU;CAExB,MAAM,WAAW,QAAQ,MAAM,QAAQ,OAAO,OAAO,GAAI;AAEzD,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC;EACC,OAAM;EACN,MAAM;EACN,eAAe,qBAAqB,QAAQ;EAC5C,OAAO,EACL,OAAO,YAAY,MAAM,QAAQ,MAAM,OAAO,UAC/C;GACD,EACF,oCAAC;EACC,OAAM;EACN,MAAM;EACN,eAAe,qBAAqB,OAAO;EAC3C,OAAO,EAAE,OAAO,WAAW,MAAM,QAAQ,QAAQ,OAAO,UAAU;GAClE,EACF,oCAAC;EACC,OAAM;EACN,MAAM;EACN,eAAe,qBAAqB,OAAO;EAC3C,OAAO,EAAE,OAAO,aAAa,MAAM,QAAQ,QAAQ,OAAO,UAAU;GACpE,CACE;;AAGV,4BAAe;;;;AC/Cf,MAAMC,cAAY,YAAY,WAAW;CACvC,MAAM;EACJ,SAAS;EACT,eAAe;EAChB;CACD,QAAQ;EACN,SAAS;EACT,MAAM;EACP;CACD,SAAS;EACP,aAAa,MAAM,QAAQ,EAAE;EAC7B,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACF,EAAE;AAEH,MAAa,gBAAgB,UAAU;CACrC,MAAM,UAAUA,aAAW;CAE3B,MAAM,EACJ,WACA,sBACA,OACA,SACA,oBACA,mBACA,YACA,QACA,SACA,OACA,aACE;AAEJ,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,SAAI,WAAW,QAAQ,UACtB,oCAACC;EACY;EACD;EACY;GACtB,CACE,EACN,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,WAAQ,aAAY,aAAa,CAC9B,EAEN,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,WAAQ,aAAY,aAAa,CAC9B,EACN,oCAAC,aACC,oCAACC;EACS;EACC;EACF;EACP,UAAU;EACU;EACD;EACP;EACL;GACP,CACE,CACF;;;;;AC3DV,MAAMC,cAAY,YAAY,WAAW;CACvC,MAAM;EACJ,UAAU;EACV,QAAQ;EACR,KAAK;EACL,OAAO;EACR;CACD,SAAS,EACP,UAAU,UACX;CACD,WAAW;EACT,OAAO;EACP,YAAY,MAAM,YAAY,OAAO,SAAS;GAC5C,QAAQ,MAAM,YAAY,OAAO;GACjC,UAAU,MAAM,YAAY,SAAS;GACtC,CAAC;EACH;CACD,UAAU;EACR,OAAO;EACP,YAAY,MAAM,YAAY,OAAO,SAAS;GAC5C,QAAQ,MAAM,YAAY,OAAO;GACjC,UAAU,MAAM,YAAY,SAAS;GACtC,CAAC;EACH;CACD,SAAS,EACP,SAAS,MAAM,QAAQ,EAAE,EAC1B;CACD,cAAc;EACZ,SAAS;EACT,eAAe;EAChB;CACD,QAAQ;EACN,SAAS,MAAM,QAAQ,EAAE;EACzB,YAAY,MAAM,QAAQ,OAAO;EACjC,QAAQ,MAAM,QAAQ,EAAE;EACzB;CACF,EAAE;AAEH,MAAa,YAAY,UAAU;CACjC,MAAM,UAAUA,aAAW;CAC3B,MAAM,EAAE,UAAU,WAAW,WAAW;AAExC,QACE,oCAAC,SACC,WAAW,KACT,QAAQ,MACR,YAAY,QAAQ,YAAY,QAAQ,SACzC,IAED,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC,SAAI,WAAW,QAAQ,UACtB,oCAAC;EACC,WAAW,QAAQ;EACnB,SAAS;EACT,OAAM;EACN,MAAM,YAAY,kBAAkB;GACpC,CACE,EACN,oCAAC,aACC,oCAAC,SAAM,gBACL,oCAAC,SAAI,WAAW,QAAQ,WAAU,SAAe,CAC3C,CACJ,CACF,CACF;;;;;ACxDV,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM;EACJ,SAAS;EACT,eAAe;EAChB;CACD,OAAO,EACL,YAAY,KACb;CACD,cAAc,EACZ,cAAc,MAAM,QAAQ,EAAE,EAC/B;CACD,SAAS,EAER;CACD,MAAM,EACJ,OAAO,QAAQ,MAAM,QAAQ,OAAO,OAAO,GAAI,EAChD;CACD,SAAS;EACP,WAAW,MAAM,QAAQ,EAAE;EAC3B,SAAS;EACT,eAAe;EAChB;CACD,KAAK,EACH,YAAY,MAAM,QAAQ,EAAE,EAC7B;CACF,EAAE;AAEH,MAAa,eAAe,UAAU;CACpC,MAAM,EAAE,OAAO,MAAM,aAAa;CAClC,MAAM,UAAU,WAAW;CAC3B,MAAM,MAAM,KAAK,MAAM,KAAK,QAAQ,GAAG,GAAG,GAAG;CAC7C,MAAM,QAAQ,UAAU;CAExB,MAAM,kBAAkB;AACtB,SACE,oCAAC;GAAI,OAAM;GAAK,QAAO;KACrB,oCAAC;GAAO,IAAG;GAAM,IAAG;GAAM,GAAE;GAAI,MAAM,MAAM,QAAQ,QAAQ;IAAQ,CAChE;;AAIV,QACE,oCAAC,aACC,oCAAC;EACC;EACA,WAAW;EACX,WAAW,QAAQ;EACnB,OAAO,EACL,YAAY,YAAY,QAAQ,MAAM,QAAQ,UAAU,MAAM,GAAI,EACnE;IAED,oCAAC,mBACC,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,aACC,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC;EAAW,WAAW,QAAQ;EAAO,SAAQ;IAC3C,MACU,CACT,EACN,oCAAC,aACC,oCAAC;EAAW,WAAW,QAAQ;EAAM,SAAQ;IAC1C,KACU,CACT,CACF,EACN,oCAAC,aACC,oCAAC;EAAiB,OAAM;EAAU,MAAM;GAAc,CAClD,CACF,EAEN,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,aACC,oCAAC;EACC,SAAQ;EACR,MAAK;EACL,OAAM;EACN,MAAM,oCAAC,gBAAY;GACnB,CACE,EACN,oCAAC,SAAI,WAAW,QAAQ,OACtB,oCAAC;EAAK,SAAQ;EAAW,MAAK;EAAQ,OAAO,OAAO;GAAS,CACzD,CACF,CACM,CACT,EACP,oCAAC,aACC,oCAAC,cAAU,CACP,CACF"}

package/dist/TileLayer-D3RksO00.js

@@ -0,0 +1,31 @@
+import { t as MapContext_default } from "./MapContext-BmClJmMl.js";
+import React, { useContext, useEffect } from "react";
+import OLTileLayer from "ol/layer/Tile";
+
+//#region src/maps/openLayerMaps/Layers/Layers.jsx
+const Layers = ({ children }) => {
+	return /* @__PURE__ */ React.createElement("div", null, children);
+};
+
+//#endregion
+//#region src/maps/openLayerMaps/Layers/TileLayer.js
+const TileLayer = ({ source, zIndex = 0 }) => {
+	const { map } = useContext(MapContext_default);
+	useEffect(() => {
+		if (!map) return;
+		const tileLayer = new OLTileLayer({
+			source,
+			zIndex
+		});
+		map.addLayer(tileLayer);
+		tileLayer.setZIndex(zIndex);
+		return () => {
+			if (map) map.removeLayer(tileLayer);
+		};
+	}, [map, source]);
+	return null;
+};
+
+//#endregion
+export { Layers as n, TileLayer as t };
+//# sourceMappingURL=TileLayer-D3RksO00.js.map

package/dist/TileLayer-D3RksO00.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileLayer-D3RksO00.js","names":["MapContext"],"sources":["../src/maps/openLayerMaps/Layers/Layers.jsx","../src/maps/openLayerMaps/Layers/TileLayer.js"],"sourcesContent":["import React from 'react'\n\nexport const Layers = ({ children }) => {\n  return <div>{children}</div>\n}\n","import { useContext, useEffect } from 'react'\nimport MapContext from '../Map/MapContext'\nimport OLTileLayer from 'ol/layer/Tile'\n\nexport const TileLayer = ({ source, zIndex = 0 }) => {\n  const { map } = useContext(MapContext)\n\n  useEffect(() => {\n    if (!map) return\n\n    const tileLayer = new OLTileLayer({\n      source,\n      zIndex\n    })\n\n    map.addLayer(tileLayer)\n    tileLayer.setZIndex(zIndex)\n\n    return () => {\n      if (map) {\n        map.removeLayer(tileLayer)\n      }\n    }\n  }, [map, source])\n\n  return null\n}\n"],"mappings":";;;;;AAEA,MAAa,UAAU,EAAE,eAAe;AACtC,QAAO,oCAAC,aAAK,SAAe;;;;;ACC9B,MAAa,aAAa,EAAE,QAAQ,SAAS,QAAQ;CACnD,MAAM,EAAE,QAAQ,WAAWA,mBAAW;AAEtC,iBAAgB;AACd,MAAI,CAAC,IAAK;EAEV,MAAM,YAAY,IAAI,YAAY;GAChC;GACA;GACD,CAAC;AAEF,MAAI,SAAS,UAAU;AACvB,YAAU,UAAU,OAAO;AAE3B,eAAa;AACX,OAAI,IACF,KAAI,YAAY,UAAU;;IAG7B,CAAC,KAAK,OAAO,CAAC;AAEjB,QAAO"}

package/dist/TimeField-CcV1O5Gd.js

@@ -0,0 +1,62 @@
+import React, { useCallback, useMemo } from "react";
+import { DateTime } from "luxon";
+import { KeyboardDatePicker, KeyboardTimePicker } from "@material-ui/pickers";
+
+//#region src/UI/inputs/datetimes/DateField.jsx
+/**
+* TextField for date input
+*/
+const DateField = (props) => {
+	const { onChange: onChangeProp, value: valueProp,...other } = props;
+	const dateFormat = "yyyy-MM-dd";
+	const isValidDate = (date) => {
+		return date instanceof Date && !isNaN(date);
+	};
+	const onChange = useCallback((value$1) => onChangeProp && onChangeProp(isValidDate(value$1) ? value$1 : void 0), [onChangeProp]);
+	const value = useMemo(() => {
+		console.log(valueProp);
+		return isValidDate(valueProp) ? DateTime.fromISO(valueProp.toISOString()) : null;
+	}, [valueProp]);
+	return /* @__PURE__ */ React.createElement(KeyboardDatePicker, {
+		format: dateFormat,
+		variant: "inline",
+		autoOk: true,
+		onChange,
+		value,
+		...other
+	});
+};
+
+//#endregion
+//#region src/UI/inputs/datetimes/TimeField.jsx
+/**
+* TextField for time input
+*/
+const TimeField = (props) => {
+	const { onChange: onChangeProp, value: valueProp,...other } = props;
+	const timeFormatString = "HH:mm";
+	const is12hTime = true;
+	const maskChar = "_";
+	timeFormatString.split(/'([^']*)'/).map((m, i) => i % 2 === 0 ? m.replace(/[a-z]/gi, maskChar) : m).join("") + "";
+	const isValidDate = (date) => {
+		return date instanceof Date && !isNaN(date);
+	};
+	const onChange = useCallback((value$1) => onChangeProp && onChangeProp(isValidDate(value$1) ? value$1 : void 0), [onChangeProp]);
+	const value = useMemo(() => {
+		console.log(valueProp);
+		return isValidDate(valueProp) ? DateTime.fromISO(valueProp.toISOString()) : null;
+	}, [valueProp]);
+	return /* @__PURE__ */ React.createElement(KeyboardTimePicker, {
+		ampm: is12hTime,
+		mask: "__:__ _M",
+		variant: "inline",
+		autoOk: true,
+		onChange,
+		value,
+		...other
+	});
+};
+
+//#endregion
+export { DateField as n, TimeField as t };
+//# sourceMappingURL=TimeField-CcV1O5Gd.js.map

package/dist/TimeField-CcV1O5Gd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeField-CcV1O5Gd.js","names":["value","value"],"sources":["../src/UI/inputs/datetimes/DateField.jsx","../src/UI/inputs/datetimes/TimeField.jsx"],"sourcesContent":["import { DateTime } from 'luxon';\nimport React, { useCallback, useMemo } from 'react';\nimport { KeyboardDatePicker } from '@material-ui/pickers';\n// import { useIntl } from '../../../intl';\n// import { useDateFormat } from '../../utils/CompanyPreferencesProvider';\n\n/**\n * TextField for date input\n */\nexport const DateField = props => {\n  const { onChange: onChangeProp, value: valueProp, ...other } = props;\n  // TODO: implement intl, use CPS as reference\n  // const { shortDateFormatString } = useIntl();\n  const dateFormat = 'yyyy-MM-dd';\n\n  const isValidDate = date => {\n    return date instanceof Date && !isNaN(date);\n  };\n\n  const onChange = useCallback(\n    value =>\n      onChangeProp && onChangeProp(isValidDate(value) ? value : undefined),\n    [onChangeProp]\n  );\n\n  const value = useMemo(() => {\n    console.log(valueProp);\n    return isValidDate(valueProp)\n      ? DateTime.fromISO(valueProp.toISOString())\n      : null;\n  }, [valueProp]);\n\n  return (\n    <KeyboardDatePicker\n      format={dateFormat}\n      variant=\"inline\"\n      autoOk\n      onChange={onChange}\n      value={value}\n      {...other}\n    />\n  );\n};\n","import { DateTime } from 'luxon';\nimport React, { useCallback, useMemo } from 'react';\nimport { KeyboardTimePicker } from '@material-ui/pickers';\n// import { useIntl } from '../../../intl';\n\n/**\n * TextField for time input\n */\nexport const TimeField = props => {\n  const { onChange: onChangeProp, value: valueProp, ...other } = props;\n  // TODO: implement intl, use CPS as reference\n  // const { timeFormatString, is12hTime } = useIntl();\n  const timeFormatString = 'HH:mm';\n  const is12hTime = true;\n  // @note @material-ui/picker's built-in mask generation does not work with formats like French (Canada)'s \"HH 'h' mm\"\n  //       so for now compute the mask ourself. This may need revisiting when they release their next major version.\n  const maskChar = '_';\n  const mask =\n    timeFormatString\n      .split(/'([^']*)'/)\n      .map((m, i) => (i % 2 === 0 ? m.replace(/[a-z]/gi, maskChar) : m))\n      .join('') + 'M';\n\n  const isValidDate = date => {\n    return date instanceof Date && !isNaN(date);\n  };\n\n  const onChange = useCallback(\n    value =>\n      onChangeProp && onChangeProp(isValidDate(value) ? value : undefined),\n    [onChangeProp]\n  );\n\n  const value = useMemo(() => {\n    console.log(valueProp);\n    return isValidDate(valueProp)\n      ? DateTime.fromISO(valueProp.toISOString())\n      : null;\n  }, [valueProp]);\n\n  return (\n    <KeyboardTimePicker\n      // format={timeFormatString}\n      ampm={is12hTime}\n      mask=\"__:__ _M\"\n      // maskChar={maskChar}\n      variant=\"inline\"\n      autoOk\n      onChange={onChange}\n      value={value}\n      {...other}\n    />\n  );\n};\n"],"mappings":";;;;;;;;AASA,MAAa,aAAY,UAAS;CAChC,MAAM,EAAE,UAAU,cAAc,OAAO,UAAW,GAAG,UAAU;CAG/D,MAAM,aAAa;CAEnB,MAAM,eAAc,SAAQ;AAC1B,SAAO,gBAAgB,QAAQ,CAAC,MAAM,KAAK;;CAG7C,MAAM,WAAW,aACf,YACE,gBAAgB,aAAa,YAAYA,QAAM,GAAGA,UAAQ,OAAU,EACtE,CAAC,aAAa,CACf;CAED,MAAM,QAAQ,cAAc;AAC1B,UAAQ,IAAI,UAAU;AACtB,SAAO,YAAY,UAAU,GACzB,SAAS,QAAQ,UAAU,aAAa,CAAC,GACzC;IACH,CAAC,UAAU,CAAC;AAEf,QACE,oCAAC;EACC,QAAQ;EACR,SAAQ;EACR;EACU;EACH;EACP,GAAI;GACJ;;;;;;;;AChCN,MAAa,aAAY,UAAS;CAChC,MAAM,EAAE,UAAU,cAAc,OAAO,UAAW,GAAG,UAAU;CAG/D,MAAM,mBAAmB;CACzB,MAAM,YAAY;CAGlB,MAAM,WAAW;AAEf,kBACG,MAAM,YAAY,CAClB,KAAK,GAAG,MAAO,IAAI,MAAM,IAAI,EAAE,QAAQ,WAAW,SAAS,GAAG,EAAG,CACjE,KAAK,GAAG,GAAG;CAEhB,MAAM,eAAc,SAAQ;AAC1B,SAAO,gBAAgB,QAAQ,CAAC,MAAM,KAAK;;CAG7C,MAAM,WAAW,aACf,YACE,gBAAgB,aAAa,YAAYC,QAAM,GAAGA,UAAQ,OAAU,EACtE,CAAC,aAAa,CACf;CAED,MAAM,QAAQ,cAAc;AAC1B,UAAQ,IAAI,UAAU;AACtB,SAAO,YAAY,UAAU,GACzB,SAAS,QAAQ,UAAU,aAAa,CAAC,GACzC;IACH,CAAC,UAAU,CAAC;AAEf,QACE,oCAAC;EAEC,MAAM;EACN,MAAK;EAEL,SAAQ;EACR;EACU;EACH;EACP,GAAI;GACJ"}

package/dist/TimelineToken-DlZl6XNx.js

@@ -0,0 +1,72 @@
+import { n as getEllipseColor, t as Ellipse } from "./Ellipse-BTNKEUgW.js";
+import React, { useState } from "react";
+import { Typography, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+
+//#region src/componentSystems/multiThreadTimeline/ui/modified/TimelineToken.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		margin: (props) => props.compact ? theme.spacing(.5) : theme.spacing(1),
+		display: "flex",
+		justifyContent: "center"
+	},
+	letter: {
+		fontSize: (props) => props.size === "small" ? theme.spacing(2.25) : theme.spacing(2.5),
+		color: (props) => getEllipseColor(theme, props.color)
+	},
+	buttonRoot: {
+		margin: theme.spacing(1),
+		width: (props) => props.size === "small" ? theme.spacing(4) : theme.spacing(5),
+		height: (props) => props.size === "small" ? theme.spacing(4) : theme.spacing(5)
+	},
+	hover: {
+		zIndex: 9,
+		position: "absolute",
+		top: 0,
+		left: 0
+	}
+}));
+const TimelineToken = (props) => {
+	const { type = "default", variant = "outlined", color = "default", size = "large", icon, letter = "A", IconEllipseProps, className, hoverContainer, isHover } = props;
+	const classes = useStyles(props);
+	const [hover, setHover] = useState(false);
+	const hoverFunction = () => {
+		setHover(true);
+	};
+	return /* @__PURE__ */ React.createElement("div", {
+		className: clsx(classes.root, className),
+		onMouseEnter: hoverFunction,
+		onMouseLeave: () => setHover(false)
+	}, /* @__PURE__ */ React.createElement(Ellipse, {
+		variant: "filled",
+		size,
+		color,
+		...IconEllipseProps
+	}, type === "letter" ? /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body1",
+		className: classes.letter
+	}, letter.toUpperCase()) : /* @__PURE__ */ React.createElement("div", null, " ", icon, " ")), isHover && /* @__PURE__ */ React.createElement("div", {
+		className: classes.hover,
+		style: { display: hover ? "inline" : "none" }
+	}, hoverContainer));
+};
+TimelineToken.propTypes = {
+	type: PropTypes.string,
+	variant: PropTypes.string,
+	color: PropTypes.string,
+	size: PropTypes.string,
+	iconType: PropTypes.string,
+	icon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.object]),
+	letter: PropTypes.string,
+	IconEllipseProps: PropTypes.object,
+	iconColorOverride: PropTypes.string,
+	onClick: PropTypes.func,
+	className: PropTypes.string,
+	hoverContainer: PropTypes.element,
+	isHover: PropTypes.bool
+};
+
+//#endregion
+export { TimelineToken as t };
+//# sourceMappingURL=TimelineToken-DlZl6XNx.js.map

package/dist/TimelineToken-DlZl6XNx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineToken-DlZl6XNx.js","names":[],"sources":["../src/componentSystems/multiThreadTimeline/ui/modified/TimelineToken.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { makeStyles, Typography } from '@material-ui/core';\nimport PropTypes from 'prop-types';\nimport { Ellipse } from '../../../../UI/components/dataDisplay/Ellipse';\nimport { getEllipseColor } from '../../../../utilities/style/utils/styleUtils';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    margin: (props) => (props.compact ? theme.spacing(0.5) : theme.spacing(1)),\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  letter: {\n    fontSize: (props) =>\n      props.size === 'small' ? theme.spacing(2.25) : theme.spacing(2.5),\n    color: (props) => getEllipseColor(theme, props.color)\n  },\n  buttonRoot: {\n    margin: theme.spacing(1),\n    width: (props) =>\n      props.size === 'small' ? theme.spacing(4) : theme.spacing(5),\n    height: (props) =>\n      props.size === 'small' ? theme.spacing(4) : theme.spacing(5)\n  },\n  hover: {\n    zIndex: 9,\n    position: 'absolute',\n    top: 0,\n    left: 0\n  }\n}));\n\nexport const TimelineToken = (props) => {\n  const {\n    type = 'default',\n    variant = 'outlined',\n    color = 'default',\n    size = 'large',\n    icon,\n    letter = 'A',\n    IconEllipseProps,\n    className,\n    hoverContainer,\n    isHover\n  } = props;\n  const classes = useStyles(props);\n\n  const [hover, setHover] = useState(false);\n\n  const hoverFunction = () => {\n    setHover(true);\n  };\n\n  const tokenComponent = (\n    <div\n      className={clsx(classes.root, className)}\n      onMouseEnter={hoverFunction}\n      onMouseLeave={() => setHover(false)}\n    >\n      {/* <Badge color=\"primary\" variant=\"dot\"  > */}\n      <Ellipse variant='filled' size={size} color={color} {...IconEllipseProps}>\n        {type === 'letter' ? (\n          <Typography variant='body1' className={classes.letter}>\n            {letter.toUpperCase()}\n          </Typography>\n        ) : (\n          <div> {icon} </div>\n        )}\n      </Ellipse>\n      {/* </Badge> */}\n      {isHover && (\n        <div\n          className={classes.hover}\n          style={{ display: hover ? 'inline' : 'none' }}\n        >\n          {hoverContainer}\n        </div>\n      )}\n    </div>\n  );\n\n  return tokenComponent;\n};\n\nTimelineToken.propTypes = {\n  type: PropTypes.string,\n  variant: PropTypes.string,\n  color: PropTypes.string,\n  size: PropTypes.string,\n  iconType: PropTypes.string,\n  icon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.object]),\n  letter: PropTypes.string,\n  IconEllipseProps: PropTypes.object,\n  iconColorOverride: PropTypes.string,\n  onClick: PropTypes.func,\n  className: PropTypes.string,\n  hoverContainer: PropTypes.element,\n  isHover: PropTypes.bool\n};\n"],"mappings":";;;;;;;AAOA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM;EACJ,SAAS,UAAW,MAAM,UAAU,MAAM,QAAQ,GAAI,GAAG,MAAM,QAAQ,EAAE;EACzE,SAAS;EACT,gBAAgB;EACjB;CACD,QAAQ;EACN,WAAW,UACT,MAAM,SAAS,UAAU,MAAM,QAAQ,KAAK,GAAG,MAAM,QAAQ,IAAI;EACnE,QAAQ,UAAU,gBAAgB,OAAO,MAAM,MAAM;EACtD;CACD,YAAY;EACV,QAAQ,MAAM,QAAQ,EAAE;EACxB,QAAQ,UACN,MAAM,SAAS,UAAU,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,EAAE;EAC9D,SAAS,UACP,MAAM,SAAS,UAAU,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,EAAE;EAC/D;CACD,OAAO;EACL,QAAQ;EACR,UAAU;EACV,KAAK;EACL,MAAM;EACP;CACF,EAAE;AAEH,MAAa,iBAAiB,UAAU;CACtC,MAAM,EACJ,OAAO,WACP,UAAU,YACV,QAAQ,WACR,OAAO,SACP,MACA,SAAS,KACT,kBACA,WACA,gBACA,YACE;CACJ,MAAM,UAAU,UAAU,MAAM;CAEhC,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CAEzC,MAAM,sBAAsB;AAC1B,WAAS,KAAK;;AA+BhB,QA3BE,oCAAC;EACC,WAAW,KAAK,QAAQ,MAAM,UAAU;EACxC,cAAc;EACd,oBAAoB,SAAS,MAAM;IAGnC,oCAAC;EAAQ,SAAQ;EAAe;EAAa;EAAO,GAAI;IACrD,SAAS,WACR,oCAAC;EAAW,SAAQ;EAAQ,WAAW,QAAQ;IAC5C,OAAO,aAAa,CACV,GAEb,oCAAC,aAAI,KAAE,MAAK,IAAO,CAEb,EAET,WACC,oCAAC;EACC,WAAW,QAAQ;EACnB,OAAO,EAAE,SAAS,QAAQ,WAAW,QAAQ;IAE5C,eACG,CAEJ;;AAMV,cAAc,YAAY;CACxB,MAAM,UAAU;CAChB,SAAS,UAAU;CACnB,OAAO,UAAU;CACjB,MAAM,UAAU;CAChB,UAAU,UAAU;CACpB,MAAM,UAAU,UAAU,CAAC,UAAU,aAAa,UAAU,OAAO,CAAC;CACpE,QAAQ,UAAU;CAClB,kBAAkB,UAAU;CAC5B,mBAAmB,UAAU;CAC7B,SAAS,UAAU;CACnB,WAAW,UAAU;CACrB,gBAAgB,UAAU;CAC1B,SAAS,UAAU;CACpB"}