@opengeoweb/shared 2.3.0 → 2.4.0

package/index.esm.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import React__default from 'react';
-import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, Alert, AlertTitle, SvgIcon, Grid, useTheme, Link, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Tooltip, Menu, ListItemIcon } from '@mui/material';
+import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, Alert, AlertTitle, SvgIcon, Grid, useTheme, Link, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Tooltip, Menu, ListItemIcon, Checkbox } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import { Close, DragIndicator } from '@mui/icons-material';
+import { Close, DragIndicator, Delete } from '@mui/icons-material';
 import { useFormContext } from 'react-hook-form';
 import { isEmpty, errorMessages } from '@opengeoweb/form-fields';
 import Draggable from 'react-draggable';
@@ -10,8 +10,8 @@ import { Resizable } from 're-resizable';
 import { useThemeContext } from '@opengeoweb/theme';
 import { throttle } from 'lodash';
 import withStyles from '@mui/styles/withStyles';
-import createStyles from '@mui/styles/createStyles';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
+import createStyles from '@mui/styles/createStyles';
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -656,7 +656,8 @@ var useStyles$a = makeStyles(function () {
     title: {
       fontSize: '14px',
       fontWeight: 'normal',
-      marginTop: '0px!important'
+      marginTop: '0px!important',
+      paddingTop: '0px!important'
     },
     info: {
       fontSize: '16px'
@@ -673,8 +674,7 @@ var getIcon = function getIcon(severity) {
         fill: "transparent"
       }), /*#__PURE__*/React.createElement("path", {
         d: "M12 4c4.418 0 8 3.581 8 8 0 4.418-3.582 8-8 8s-8-3.582-8-8c0-4.419 3.582-8 8-8zm1.052 6H10v1.613h.949v3.774H10V17h4v-1.613h-.948V10zM11.99 6c-.837 0-1.491.654-1.491 1.49 0 .837.654 1.51 1.49 1.51.837 0 1.51-.673 1.51-1.51 0-.836-.673-1.49-1.51-1.49z",
-        transform: "translate(-946.000000, -368.000000) translate(930.000000, 356.000000) translate(16.000000, 12.000000)",
-        fill: "#0062E6"
+        transform: "translate(-946.000000, -368.000000) translate(930.000000, 356.000000) translate(16.000000, 12.000000)"
       }));
 
     case 'success':
@@ -684,8 +684,7 @@ var getIcon = function getIcon(severity) {
         fill: "transparent"
       }), /*#__PURE__*/React.createElement("path", {
         d: "M16.51 10.034l-5.633 5.633-3.387-3.386c-.369-.37-.369-.973 0-1.343.36-.357.983-.357 1.342 0l2.045 2.046 4.292-4.291c.357-.357.983-.359 1.342 0 .368.369.368.97 0 1.341M12 4C7.582 4 4 7.582 4 12s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8",
-        transform: "translate(-96.000000, -368.000000) translate(80.000000, 356.000000) translate(16.000000, 12.000000)",
-        fill: "#72BB23"
+        transform: "translate(-96.000000, -368.000000) translate(80.000000, 356.000000) translate(16.000000, 12.000000)"
       }));
 
     case 'warning':
@@ -695,8 +694,7 @@ var getIcon = function getIcon(severity) {
         fill: "transparent"
       }), /*#__PURE__*/React.createElement("path", {
         d: "M12.862 16.72c-.22.226-.507.339-.86.339-.364 0-.662-.113-.894-.34-.232-.226-.347-.52-.347-.885 0-.32.118-.59.356-.81.236-.22.531-.331.884-.331.332 0 .613.11.845.33.232.222.347.491.347.811 0 .365-.11.66-.33.886zm.216-9.805l-.134 6.669H11.06l-.15-6.67h2.169zM12 4.5c-4.141 0-7.5 3.359-7.5 7.501s3.359 7.5 7.5 7.5c4.142 0 7.5-3.358 7.5-7.5C19.5 7.86 16.142 4.5 12 4.5z",
-        transform: "translate(-521.000000, -368.000000) translate(505.000000, 356.000000) translate(16.000000, 12.000000)",
-        fill: "#FFA800"
+        transform: "translate(-521.000000, -368.000000) translate(505.000000, 356.000000) translate(16.000000, 12.000000)"
       }));
 
     case 'error':
@@ -707,8 +705,7 @@ var getIcon = function getIcon(severity) {
         fill: "transparent"
       }), /*#__PURE__*/React.createElement("path", {
         d: "M12.862 16.72c-.22.226-.507.339-.86.339-.364 0-.662-.113-.894-.34-.232-.226-.347-.52-.347-.885 0-.32.118-.59.356-.81.236-.22.531-.331.884-.331.332 0 .613.11.845.33.232.222.347.491.347.811 0 .365-.11.66-.33.886zm.216-9.805l-.134 6.669H11.06l-.15-6.67h2.169zM12 4.5c-4.141 0-7.5 3.359-7.5 7.501s3.359 7.5 7.5 7.5c4.142 0 7.5-3.358 7.5-7.5C19.5 7.86 16.142 4.5 12 4.5z",
-        transform: "translate(-1371.000000, -368.000000) translate(1355.000000, 356.000000) translate(16.000000, 12.000000)",
-        fill: "#C00000"
+        transform: "translate(-1371.000000, -368.000000) translate(1355.000000, 356.000000) translate(16.000000, 12.000000)"
       }));
   }
 };
@@ -720,12 +717,31 @@ var AlertBanner = function AlertBanner(_ref) {
       _ref$info = _ref.info,
       info = _ref$info === void 0 ? '' : _ref$info,
       _ref$dataTestId = _ref.dataTestId,
-      dataTestId = _ref$dataTestId === void 0 ? 'alert-banner' : _ref$dataTestId;
+      dataTestId = _ref$dataTestId === void 0 ? 'alert-banner' : _ref$dataTestId,
+      _ref$isCompact = _ref.isCompact,
+      isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact;
   var classes = useStyles$a();
   return /*#__PURE__*/React.createElement(Alert, {
     "data-testid": dataTestId,
     severity: severity,
-    icon: getIcon(severity)
+    icon: getIcon(severity),
+    sx: isCompact ? {
+      height: '32px',
+      boxSizing: 'border-box',
+      '& .MuiAlert-message': {
+        padding: '0px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        '& .MuiTypography-root': {
+          display: 'inline'
+        }
+      },
+      '& .MuiAlert-icon': {
+        margin: '-3px 10px 0px 0px',
+        padding: '0px'
+      }
+    } : {}
   }, /*#__PURE__*/React.createElement(AlertTitle, {
     className: classes.title
   }, title), info && /*#__PURE__*/React.createElement("div", {
@@ -1336,7 +1352,7 @@ var ToolHeader = function ToolHeader(_ref) {
       boxShadow: 1,
       backgroundColor: 'geowebColors.background.surface',
       padding: styles.padding,
-      zIndex: 1,
+      zIndex: 2,
       cursor: isDraggable ? 'move' : null
     }
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -1418,7 +1434,6 @@ var useStyles$5 = makeStyles(function () {
     content: {
       flex: 1,
       overflowY: 'auto',
-      zIndex: 2,
       position: 'relative'
     }
   };
@@ -1462,6 +1477,18 @@ var ToolContainer = function ToolContainer(_a) {
   }, children), isResizable && /*#__PURE__*/React__default.createElement(ToolFooter, null));
 };
 
+var calculateDialogSizeAndPosition = function calculateDialogSizeAndPosition() {
+  var width = window.innerWidth * 0.85;
+  var height = window.innerHeight * 0.85;
+  var top = window.innerHeight * 0.15 / 2;
+  var left = window.innerWidth * 0.15 / 2;
+  return {
+    width: width,
+    height: height,
+    top: top,
+    left: left
+  };
+};
 var BASE_Z_INDEX = 100;
 
 var DraggableComponent = function DraggableComponent(_a) {
@@ -1596,6 +1623,7 @@ var DraggableComponent = function DraggableComponent(_a) {
   }, /*#__PURE__*/React__default.createElement("div", {
     style: Object.assign({
       position: 'absolute',
+      pointerEvents: 'all',
       zIndex: zIndex
     }, startPosition),
     ref: nodeRef
@@ -2325,101 +2353,6 @@ var CustomSlider = function CustomSlider(_a) {
   }, props));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
-var Z_INDEX_TOP = 600;
-var Z_INDEX_BOTTOM = 550;
-var useStyles = makeStyles(function (theme) {
-  return createStyles({
-    draggableDialog: function draggableDialog(props) {
-      return {
-        width: props.dialogWidth ? props.dialogWidth : '90%',
-        position: 'absolute',
-        top: props.dialogTop ? props.dialogTop : '2%',
-        left: '5%',
-        maxWidth: '90%',
-        maxHeight: props.dialogMaxHeight ? props.dialogMaxHeight : '95%',
-        display: 'flex',
-        flexDirection: 'column',
-        overflow: 'hidden',
-        zIndex: props.zIndex
-      };
-    },
-    dialogContent: {
-      marginTop: '40px',
-      overflowY: 'scroll'
-    },
-    dialogHeader: function dialogHeader(props) {
-      return {
-        position: 'absolute',
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
-        width: '100%',
-        backgroundColor: theme.palette.geowebColors.background.surface,
-        zIndex: props.zIndex + 10
-      };
-    },
-    iconClose: {
-      padding: theme.spacing(1)
-    },
-    iconDrag: {
-      padding: theme.spacing(1)
-    }
-  });
-});
-
-var DraggableDialog = function DraggableDialog(_ref) {
-  var handleClose = _ref.handleClose,
-      title = _ref.title,
-      children = _ref.children,
-      _ref$dialogStyling = _ref.dialogStyling,
-      dialogStyling = _ref$dialogStyling === void 0 ? {} : _ref$dialogStyling,
-      _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? Z_INDEX_TOP : _ref$zIndex;
-  var classes = useStyles(Object.assign(Object.assign({}, dialogStyling), {
-    zIndex: zIndex
-  }));
-  return /*#__PURE__*/React.createElement(Draggable, {
-    handle: "strong",
-    bounds: "body"
-  }, /*#__PURE__*/React.createElement(Paper, {
-    "data-testid": title,
-    className: classes.draggableDialog,
-    elevation: 24
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.dialogHeader
-  }, /*#__PURE__*/React.createElement("strong", null, /*#__PURE__*/React.createElement(IconButton, {
-    "data-testid": "dragDialog",
-    size: "small",
-    className: classes.iconDrag
-  }, /*#__PURE__*/React.createElement(DragIndicator, null))), /*#__PURE__*/React.createElement(Typography, {
-    variant: "subtitle1"
-  }, title), /*#__PURE__*/React.createElement(IconButton, {
-    "data-testid": "closeDialog",
-    size: "small",
-    onClick: handleClose,
-    className: classes.iconClose
-  }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement("div", {
-    className: classes.dialogContent
-  }, children)));
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2591,6 +2524,220 @@ var ToggleMenu = function ToggleMenu(_ref) {
   }), children));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var useStyles = makeStyles(function (theme) {
+  return createStyles({
+    button: {
+      height: 28,
+      width: 28,
+      borderRadius: 5,
+      marginTop: 2,
+      color: function color(_ref) {
+        var isActive = _ref.isActive,
+            isAccessible = _ref.isAccessible,
+            isEnabled = _ref.isEnabled;
+
+        if (!isEnabled) {
+          return theme.palette.geowebColors.buttons.flat.disabled.color;
+        }
+
+        if (isAccessible) {
+          return theme.palette.geowebColors.greys.accessible;
+        }
+
+        if (isActive) {
+          return theme.palette.common.white;
+        }
+
+        return theme.palette.geowebColors.buttons.flat["default"].color;
+      },
+      backgroundColor: function backgroundColor(_ref2) {
+        var isActive = _ref2.isActive;
+        return isActive ? theme.palette.geowebColors.buttons.primary.active.fill : 'inherit';
+      },
+      '&:focus': {
+        backgroundColor: function backgroundColor(_ref3) {
+          var isActive = _ref3.isActive;
+          return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.buttons.flat.mouseOver.fill;
+        },
+        outline: theme.palette.geowebColors.buttons.focusDefault.outline,
+        borderRadius: 0
+      },
+      '&:hover': {
+        backgroundColor: function backgroundColor(_ref4) {
+          var isActive = _ref4.isActive;
+          return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.buttons.flat.mouseOver.fill;
+        }
+      }
+    },
+    popper: {
+      pointerEvents: 'none'
+    }
+  });
+});
+var ManagerButton = function ManagerButton(_a) {
+  var _a$tooltipTitle = _a.tooltipTitle,
+      tooltipTitle = _a$tooltipTitle === void 0 ? '' : _a$tooltipTitle,
+      _a$onClick = _a.onClick,
+      onClick = _a$onClick === void 0 ? function () {} : _a$onClick,
+      _a$isActive = _a.isActive,
+      isActive = _a$isActive === void 0 ? false : _a$isActive,
+      _a$isEnabled = _a.isEnabled,
+      isEnabled = _a$isEnabled === void 0 ? true : _a$isEnabled,
+      icon = _a.icon,
+      testId = _a.testId,
+      _a$isAccessible = _a.isAccessible,
+      isAccessible = _a$isAccessible === void 0 ? false : _a$isAccessible,
+      className = _a.className,
+      props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId", "isAccessible", "className"]);
+
+  var classes = useStyles({
+    isActive: isActive,
+    isEnabled: isEnabled,
+    isAccessible: isAccessible
+  });
+
+  var handleClick = function handleClick(event) {
+    onClick(event);
+  };
+
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: tooltipTitle,
+    placement: "top",
+    classes: {
+      popper: classes.popper
+    }
+  }, /*#__PURE__*/React.createElement(IconButton, Object.assign({
+    size: "small",
+    onClick: handleClick,
+    "data-testid": testId,
+    className: "".concat(classes.button, " ").concat(className),
+    disableFocusRipple: true
+  }, props), icon));
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+var ManagerDeleteButton = function ManagerDeleteButton(_ref) {
+  var tooltipTitle = _ref.tooltipTitle,
+      onClickDelete = _ref.onClickDelete,
+      _ref$isEnabled = _ref.isEnabled,
+      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
+  return /*#__PURE__*/React.createElement(ManagerButton, {
+    tooltipTitle: tooltipTitle,
+    onClick: onClickDelete,
+    icon: /*#__PURE__*/React.createElement(Delete, {
+      sx: {
+        width: 20,
+        height: 20
+      }
+    }),
+    testId: "deleteButton",
+    isEnabled: isEnabled
+  });
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+var EnableButton = function EnableButton(_ref) {
+  var isEnabled = _ref.isEnabled,
+      title = _ref.title,
+      onChangeEnableLayer = _ref.onChangeEnableLayer;
+
+  var onClick = function onClick() {
+    onChangeEnableLayer(!isEnabled);
+  };
+
+  var visibilityIcon = /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("rect", {
+    width: 24,
+    height: 24,
+    fill: "transparent"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14.4980749,15.8618431 C15.8661433,15.0851043 16.779689,13.6936347 16.779689,12.1014551 C16.779689,10.5092755 15.8661433,9.11870594 14.4980749,8.34106705 C17.6257313,9.18620931 19.3529176,11.4300215 19.8092405,12.1014551 C19.3529176,12.7719886 17.6266313,15.0167008 14.4980749,15.8618431 L14.4980749,15.8618431 Z M4.18985949,12.1014551 C4.64618231,11.4300215 6.37336867,9.18710936 9.49922496,8.3419671 C8.13295665,9.11870594 7.21851093,10.5101755 7.21851093,12.1014551 C7.21851093,13.6936347 8.13295665,15.0842042 9.49922496,15.8618431 C6.37336867,15.0167008 4.64618231,12.7728886 4.18985949,12.1014551 L4.18985949,12.1014551 Z M11.99955,13.8583429 C10.9950998,13.8583429 10.180559,13.0717036 10.180559,12.1014551 C10.180559,11.1312066 10.9950998,10.3445672 11.99955,10.3445672 C13.0031002,10.3445672 13.8176409,11.1312066 13.8176409,12.1014551 C13.8176409,13.0717036 13.0031002,13.8583429 11.99955,13.8583429 L11.99955,13.8583429 Z M20.7983899,11.7666383 C20.6813841,11.5713286 17.8696435,7 11.99955,7 C6.12945647,7 3.31681584,11.5713286 3.19980999,11.7666383 L3,12.1014551 L3.19980999,12.4362718 C3.31681584,12.6306815 6.12945647,17.2020101 11.99955,17.2020101 C17.8696435,17.2020101 20.6813841,12.6306815 20.7983899,12.4362718 L21,12.1014551 L20.7983899,11.7666383 Z"
+  }));
+  var visibilityOffIcon = /*#__PURE__*/React.createElement(SvgIcon, {
+    style: {
+      marginTop: 2
+    }
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: 24,
+    height: 24,
+    fill: "transparent"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 15.309c-.755 0-1.45-.088-2.092-.236l.798-.797c.41.124.844.192 1.294.192 2.453 0 4.442-1.988 4.442-4.44 0-.495-.085-.907-.234-1.255l.03-.03c1.72.906 2.781 2.167 3.218 2.766-.724.992-3.151 3.8-7.456 3.8zm-7.456-3.8c.442-.607 1.522-1.89 3.276-2.796-.166.36-.261.79-.261 1.315 0 1.228.499 2.34 1.305 3.144l-1.102 1.104c-1.72-.906-2.78-2.169-3.218-2.767zm5.646-3.524c.818 0 1.482.665 1.482 1.483 0 .818-.664 1.481-1.482 1.481s-1.482-.663-1.482-1.481c0-.818.664-1.483 1.482-1.483zm10.608 3.19c-.073-.125-1.245-2.026-3.603-3.388l2.009-2.01c.406-.406.406-1.065 0-1.473-.407-.405-1.066-.405-1.473 0l-2.58 2.582c-.93-.295-1.98-.478-3.151-.478-5.87 0-8.681 4.57-8.798 4.766L3 11.51l.202.335c.073.124 1.244 2.025 3.603 3.387l-2.009 2.01c-.406.406-.406 1.065 0 1.472.204.203.47.305.737.305.266 0 .532-.102.736-.305l2.58-2.58c.93.293 1.98.476 3.151.476 5.87 0 8.681-4.57 8.798-4.765l.202-.335-.202-.335z"
+  }));
+  return /*#__PURE__*/React.createElement(ManagerButton, {
+    tooltipTitle: title,
+    onClick: onClick,
+    icon: /*#__PURE__*/React.createElement(Checkbox, {
+      sx: {
+        color: 'inherit',
+        padding: 0.5,
+        borderRadius: 1.25,
+        '&.Mui-focusVisible': {
+          backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+        },
+        '&:hover': {
+          backgroundColor: 'transparent!important'
+        },
+        '&.Mui-checked': {
+          color: 'inherit'
+        }
+      },
+      icon: visibilityOffIcon,
+      checkedIcon: visibilityIcon,
+      checked: isEnabled,
+      disableFocusRipple: true,
+      tabIndex: -1
+    }),
+    testId: "enableLayer",
+    isEnabled: isEnabled
+  });
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2625,4 +2772,4 @@ var getAxiosErrorMessage = function getAxiosErrorMessage(error) {
   return 'An error has occurred';
 };
 
-export { AlertBanner, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, CustomToggleButton, DraggableComponent$1 as Draggable, DraggableDialog, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, Z_INDEX_BOTTOM, Z_INDEX_TOP, getAxiosErrorMessage, getInitials, isAxiosError, showPrompt, sliderStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };
+export { AlertBanner, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, CustomToggleButton, DraggableComponent$1 as Draggable, EnableButton, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ManagerButton, ManagerDeleteButton, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, calculateDialogSizeAndPosition, getAxiosErrorMessage, getInitials, isAxiosError, showPrompt, sliderStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@mui/styles/makeStyles'), require('@mui/icons-material'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('react-draggable'), require('re-resizable'), require('@opengeoweb/theme'), require('lodash'), require('@mui/styles/withStyles'), require('@mui/styles/createStyles'), require('@mui/icons-material/MoreVert')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@mui/styles/makeStyles', '@mui/icons-material', 'react-hook-form', '@opengeoweb/form-fields', 'react-draggable', 're-resizable', '@opengeoweb/theme', 'lodash', '@mui/styles/withStyles', '@mui/styles/createStyles', '@mui/icons-material/MoreVert'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.makeStyles, global.iconsMaterial, global.reactHookForm, global.formFields, global.Draggable, global.reResizable, global.theme, global.lodash, global.withStyles, global.createStyles, global.MoreVertIcon));
-})(this, (function (exports, React, material, makeStyles, iconsMaterial, reactHookForm, formFields, Draggable, reResizable, theme, lodash, withStyles, createStyles, MoreVertIcon) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@mui/styles/makeStyles'), require('@mui/icons-material'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('react-draggable'), require('re-resizable'), require('@opengeoweb/theme'), require('lodash'), require('@mui/styles/withStyles'), require('@mui/icons-material/MoreVert'), require('@mui/styles/createStyles')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@mui/styles/makeStyles', '@mui/icons-material', 'react-hook-form', '@opengeoweb/form-fields', 'react-draggable', 're-resizable', '@opengeoweb/theme', 'lodash', '@mui/styles/withStyles', '@mui/icons-material/MoreVert', '@mui/styles/createStyles'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.makeStyles, global.iconsMaterial, global.reactHookForm, global.formFields, global.Draggable, global.reResizable, global.theme, global.lodash, global.withStyles, global.MoreVertIcon, global.createStyles));
+})(this, (function (exports, React, material, makeStyles, iconsMaterial, reactHookForm, formFields, Draggable, reResizable, theme, lodash, withStyles, MoreVertIcon, createStyles) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,8 +29,8 @@
     var makeStyles__default = /*#__PURE__*/_interopDefaultLegacy(makeStyles);
     var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
     var withStyles__default = /*#__PURE__*/_interopDefaultLegacy(withStyles);
-    var createStyles__default = /*#__PURE__*/_interopDefaultLegacy(createStyles);
     var MoreVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreVertIcon);
+    var createStyles__default = /*#__PURE__*/_interopDefaultLegacy(createStyles);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -507,7 +507,8 @@
         title: {
           fontSize: '14px',
           fontWeight: 'normal',
-          marginTop: '0px!important'
+          marginTop: '0px!important',
+          paddingTop: '0px!important'
         },
         info: {
           fontSize: '16px'
@@ -524,8 +525,7 @@
             fill: "transparent"
           }), /*#__PURE__*/React__namespace.createElement("path", {
             d: "M12 4c4.418 0 8 3.581 8 8 0 4.418-3.582 8-8 8s-8-3.582-8-8c0-4.419 3.582-8 8-8zm1.052 6H10v1.613h.949v3.774H10V17h4v-1.613h-.948V10zM11.99 6c-.837 0-1.491.654-1.491 1.49 0 .837.654 1.51 1.49 1.51.837 0 1.51-.673 1.51-1.51 0-.836-.673-1.49-1.51-1.49z",
-            transform: "translate(-946.000000, -368.000000) translate(930.000000, 356.000000) translate(16.000000, 12.000000)",
-            fill: "#0062E6"
+            transform: "translate(-946.000000, -368.000000) translate(930.000000, 356.000000) translate(16.000000, 12.000000)"
           }));
 
         case 'success':
@@ -535,8 +535,7 @@
             fill: "transparent"
           }), /*#__PURE__*/React__namespace.createElement("path", {
             d: "M16.51 10.034l-5.633 5.633-3.387-3.386c-.369-.37-.369-.973 0-1.343.36-.357.983-.357 1.342 0l2.045 2.046 4.292-4.291c.357-.357.983-.359 1.342 0 .368.369.368.97 0 1.341M12 4C7.582 4 4 7.582 4 12s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8",
-            transform: "translate(-96.000000, -368.000000) translate(80.000000, 356.000000) translate(16.000000, 12.000000)",
-            fill: "#72BB23"
+            transform: "translate(-96.000000, -368.000000) translate(80.000000, 356.000000) translate(16.000000, 12.000000)"
           }));
 
         case 'warning':
@@ -546,8 +545,7 @@
             fill: "transparent"
           }), /*#__PURE__*/React__namespace.createElement("path", {
             d: "M12.862 16.72c-.22.226-.507.339-.86.339-.364 0-.662-.113-.894-.34-.232-.226-.347-.52-.347-.885 0-.32.118-.59.356-.81.236-.22.531-.331.884-.331.332 0 .613.11.845.33.232.222.347.491.347.811 0 .365-.11.66-.33.886zm.216-9.805l-.134 6.669H11.06l-.15-6.67h2.169zM12 4.5c-4.141 0-7.5 3.359-7.5 7.501s3.359 7.5 7.5 7.5c4.142 0 7.5-3.358 7.5-7.5C19.5 7.86 16.142 4.5 12 4.5z",
-            transform: "translate(-521.000000, -368.000000) translate(505.000000, 356.000000) translate(16.000000, 12.000000)",
-            fill: "#FFA800"
+            transform: "translate(-521.000000, -368.000000) translate(505.000000, 356.000000) translate(16.000000, 12.000000)"
           }));
 
         case 'error':
@@ -558,8 +556,7 @@
             fill: "transparent"
           }), /*#__PURE__*/React__namespace.createElement("path", {
             d: "M12.862 16.72c-.22.226-.507.339-.86.339-.364 0-.662-.113-.894-.34-.232-.226-.347-.52-.347-.885 0-.32.118-.59.356-.81.236-.22.531-.331.884-.331.332 0 .613.11.845.33.232.222.347.491.347.811 0 .365-.11.66-.33.886zm.216-9.805l-.134 6.669H11.06l-.15-6.67h2.169zM12 4.5c-4.141 0-7.5 3.359-7.5 7.501s3.359 7.5 7.5 7.5c4.142 0 7.5-3.358 7.5-7.5C19.5 7.86 16.142 4.5 12 4.5z",
-            transform: "translate(-1371.000000, -368.000000) translate(1355.000000, 356.000000) translate(16.000000, 12.000000)",
-            fill: "#C00000"
+            transform: "translate(-1371.000000, -368.000000) translate(1355.000000, 356.000000) translate(16.000000, 12.000000)"
           }));
       }
     };
@@ -571,12 +568,31 @@
           _c = _a.info,
           info = _c === void 0 ? '' : _c,
           _d = _a.dataTestId,
-          dataTestId = _d === void 0 ? 'alert-banner' : _d;
+          dataTestId = _d === void 0 ? 'alert-banner' : _d,
+          _e = _a.isCompact,
+          isCompact = _e === void 0 ? false : _e;
       var classes = useStyles$a();
       return /*#__PURE__*/React__namespace.createElement(material.Alert, {
         "data-testid": dataTestId,
         severity: severity,
-        icon: getIcon(severity)
+        icon: getIcon(severity),
+        sx: isCompact ? {
+          height: '32px',
+          boxSizing: 'border-box',
+          '& .MuiAlert-message': {
+            padding: '0px',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            '& .MuiTypography-root': {
+              display: 'inline'
+            }
+          },
+          '& .MuiAlert-icon': {
+            margin: '-3px 10px 0px 0px',
+            padding: '0px'
+          }
+        } : {}
       }, /*#__PURE__*/React__namespace.createElement(material.AlertTitle, {
         className: classes.title
       }, title), info && /*#__PURE__*/React__namespace.createElement("div", {
@@ -1195,7 +1211,7 @@
           boxShadow: 1,
           backgroundColor: 'geowebColors.background.surface',
           padding: styles.padding,
-          zIndex: 1,
+          zIndex: 2,
           cursor: isDraggable ? 'move' : null
         }
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -1277,7 +1293,6 @@
         content: {
           flex: 1,
           overflowY: 'auto',
-          zIndex: 2,
           position: 'relative'
         }
       };
@@ -1339,6 +1354,19 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
+
+    var calculateDialogSizeAndPosition = function calculateDialogSizeAndPosition() {
+      var width = window.innerWidth * 0.85;
+      var height = window.innerHeight * 0.85;
+      var top = window.innerHeight * 0.15 / 2;
+      var left = window.innerWidth * 0.15 / 2;
+      return {
+        width: width,
+        height: height,
+        top: top,
+        left: left
+      };
+    };
     var BASE_Z_INDEX = 100;
 
     var DraggableComponent = function DraggableComponent(_a) {
@@ -1470,6 +1498,7 @@
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         style: __assign({
           position: 'absolute',
+          pointerEvents: 'all',
           zIndex: zIndex
         }, startPosition),
         ref: nodeRef
@@ -2216,85 +2245,6 @@
       }, props));
     };
 
-    var Z_INDEX_TOP = 600;
-    var Z_INDEX_BOTTOM = 550;
-    var useStyles = makeStyles__default["default"](function (theme) {
-      return createStyles__default["default"]({
-        draggableDialog: function draggableDialog(props) {
-          return {
-            width: props.dialogWidth ? props.dialogWidth : '90%',
-            position: 'absolute',
-            top: props.dialogTop ? props.dialogTop : '2%',
-            left: '5%',
-            maxWidth: '90%',
-            maxHeight: props.dialogMaxHeight ? props.dialogMaxHeight : '95%',
-            display: 'flex',
-            flexDirection: 'column',
-            overflow: 'hidden',
-            zIndex: props.zIndex
-          };
-        },
-        dialogContent: {
-          marginTop: '40px',
-          overflowY: 'scroll'
-        },
-        dialogHeader: function dialogHeader(props) {
-          return {
-            position: 'absolute',
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
-            width: '100%',
-            backgroundColor: theme.palette.geowebColors.background.surface,
-            zIndex: props.zIndex + 10
-          };
-        },
-        iconClose: {
-          padding: theme.spacing(1)
-        },
-        iconDrag: {
-          padding: theme.spacing(1)
-        }
-      });
-    });
-
-    var DraggableDialog = function DraggableDialog(_a) {
-      var handleClose = _a.handleClose,
-          title = _a.title,
-          children = _a.children,
-          _b = _a.dialogStyling,
-          dialogStyling = _b === void 0 ? {} : _b,
-          _c = _a.zIndex,
-          zIndex = _c === void 0 ? Z_INDEX_TOP : _c;
-      var classes = useStyles(__assign(__assign({}, dialogStyling), {
-        zIndex: zIndex
-      }));
-      return /*#__PURE__*/React__namespace.createElement(Draggable__default["default"], {
-        handle: "strong",
-        bounds: "body"
-      }, /*#__PURE__*/React__namespace.createElement(material.Paper, {
-        "data-testid": title,
-        className: classes.draggableDialog,
-        elevation: 24
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.dialogHeader
-      }, /*#__PURE__*/React__namespace.createElement("strong", null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
-        "data-testid": "dragDialog",
-        size: "small",
-        className: classes.iconDrag
-      }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.DragIndicator, null))), /*#__PURE__*/React__namespace.createElement(material.Typography, {
-        variant: "subtitle1"
-      }, title), /*#__PURE__*/React__namespace.createElement(material.IconButton, {
-        "data-testid": "closeDialog",
-        size: "small",
-        onClick: handleClose,
-        className: classes.iconClose
-      }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Close, null))), /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes.dialogContent
-      }, children)));
-    };
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -2465,6 +2415,220 @@
       }), children));
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var useStyles = makeStyles__default["default"](function (theme) {
+      return createStyles__default["default"]({
+        button: {
+          height: 28,
+          width: 28,
+          borderRadius: 5,
+          marginTop: 2,
+          color: function color(_a) {
+            var isActive = _a.isActive,
+                isAccessible = _a.isAccessible,
+                isEnabled = _a.isEnabled;
+
+            if (!isEnabled) {
+              return theme.palette.geowebColors.buttons.flat.disabled.color;
+            }
+
+            if (isAccessible) {
+              return theme.palette.geowebColors.greys.accessible;
+            }
+
+            if (isActive) {
+              return theme.palette.common.white;
+            }
+
+            return theme.palette.geowebColors.buttons.flat["default"].color;
+          },
+          backgroundColor: function backgroundColor(_a) {
+            var isActive = _a.isActive;
+            return isActive ? theme.palette.geowebColors.buttons.primary.active.fill : 'inherit';
+          },
+          '&:focus': {
+            backgroundColor: function backgroundColor(_a) {
+              var isActive = _a.isActive;
+              return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.buttons.flat.mouseOver.fill;
+            },
+            outline: theme.palette.geowebColors.buttons.focusDefault.outline,
+            borderRadius: 0
+          },
+          '&:hover': {
+            backgroundColor: function backgroundColor(_a) {
+              var isActive = _a.isActive;
+              return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.buttons.flat.mouseOver.fill;
+            }
+          }
+        },
+        popper: {
+          pointerEvents: 'none'
+        }
+      });
+    });
+    var ManagerButton = function ManagerButton(_a) {
+      var _b = _a.tooltipTitle,
+          tooltipTitle = _b === void 0 ? '' : _b,
+          _c = _a.onClick,
+          onClick = _c === void 0 ? function () {} : _c,
+          _d = _a.isActive,
+          isActive = _d === void 0 ? false : _d,
+          _e = _a.isEnabled,
+          isEnabled = _e === void 0 ? true : _e,
+          icon = _a.icon,
+          testId = _a.testId,
+          _f = _a.isAccessible,
+          isAccessible = _f === void 0 ? false : _f,
+          className = _a.className,
+          props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId", "isAccessible", "className"]);
+
+      var classes = useStyles({
+        isActive: isActive,
+        isEnabled: isEnabled,
+        isAccessible: isAccessible
+      });
+
+      var handleClick = function handleClick(event) {
+        onClick(event);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        title: tooltipTitle,
+        placement: "top",
+        classes: {
+          popper: classes.popper
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, __assign({
+        size: "small",
+        onClick: handleClick,
+        "data-testid": testId,
+        className: classes.button + " " + className,
+        disableFocusRipple: true
+      }, props), icon));
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+    var ManagerDeleteButton = function ManagerDeleteButton(_a) {
+      var tooltipTitle = _a.tooltipTitle,
+          onClickDelete = _a.onClickDelete,
+          _b = _a.isEnabled,
+          isEnabled = _b === void 0 ? true : _b;
+      return /*#__PURE__*/React__namespace.createElement(ManagerButton, {
+        tooltipTitle: tooltipTitle,
+        onClick: onClickDelete,
+        icon: /*#__PURE__*/React__namespace.createElement(iconsMaterial.Delete, {
+          sx: {
+            width: 20,
+            height: 20
+          }
+        }),
+        testId: "deleteButton",
+        isEnabled: isEnabled
+      });
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+    var EnableButton = function EnableButton(_a) {
+      var isEnabled = _a.isEnabled,
+          title = _a.title,
+          onChangeEnableLayer = _a.onChangeEnableLayer;
+
+      var onClick = function onClick() {
+        onChangeEnableLayer(!isEnabled);
+      };
+
+      var visibilityIcon = /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("rect", {
+        width: 24,
+        height: 24,
+        fill: "transparent"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M14.4980749,15.8618431 C15.8661433,15.0851043 16.779689,13.6936347 16.779689,12.1014551 C16.779689,10.5092755 15.8661433,9.11870594 14.4980749,8.34106705 C17.6257313,9.18620931 19.3529176,11.4300215 19.8092405,12.1014551 C19.3529176,12.7719886 17.6266313,15.0167008 14.4980749,15.8618431 L14.4980749,15.8618431 Z M4.18985949,12.1014551 C4.64618231,11.4300215 6.37336867,9.18710936 9.49922496,8.3419671 C8.13295665,9.11870594 7.21851093,10.5101755 7.21851093,12.1014551 C7.21851093,13.6936347 8.13295665,15.0842042 9.49922496,15.8618431 C6.37336867,15.0167008 4.64618231,12.7728886 4.18985949,12.1014551 L4.18985949,12.1014551 Z M11.99955,13.8583429 C10.9950998,13.8583429 10.180559,13.0717036 10.180559,12.1014551 C10.180559,11.1312066 10.9950998,10.3445672 11.99955,10.3445672 C13.0031002,10.3445672 13.8176409,11.1312066 13.8176409,12.1014551 C13.8176409,13.0717036 13.0031002,13.8583429 11.99955,13.8583429 L11.99955,13.8583429 Z M20.7983899,11.7666383 C20.6813841,11.5713286 17.8696435,7 11.99955,7 C6.12945647,7 3.31681584,11.5713286 3.19980999,11.7666383 L3,12.1014551 L3.19980999,12.4362718 C3.31681584,12.6306815 6.12945647,17.2020101 11.99955,17.2020101 C17.8696435,17.2020101 20.6813841,12.6306815 20.7983899,12.4362718 L21,12.1014551 L20.7983899,11.7666383 Z"
+      }));
+      var visibilityOffIcon = /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
+        style: {
+          marginTop: 2
+        }
+      }, /*#__PURE__*/React__namespace.createElement("rect", {
+        width: 24,
+        height: 24,
+        fill: "transparent"
+      }), /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M12 15.309c-.755 0-1.45-.088-2.092-.236l.798-.797c.41.124.844.192 1.294.192 2.453 0 4.442-1.988 4.442-4.44 0-.495-.085-.907-.234-1.255l.03-.03c1.72.906 2.781 2.167 3.218 2.766-.724.992-3.151 3.8-7.456 3.8zm-7.456-3.8c.442-.607 1.522-1.89 3.276-2.796-.166.36-.261.79-.261 1.315 0 1.228.499 2.34 1.305 3.144l-1.102 1.104c-1.72-.906-2.78-2.169-3.218-2.767zm5.646-3.524c.818 0 1.482.665 1.482 1.483 0 .818-.664 1.481-1.482 1.481s-1.482-.663-1.482-1.481c0-.818.664-1.483 1.482-1.483zm10.608 3.19c-.073-.125-1.245-2.026-3.603-3.388l2.009-2.01c.406-.406.406-1.065 0-1.473-.407-.405-1.066-.405-1.473 0l-2.58 2.582c-.93-.295-1.98-.478-3.151-.478-5.87 0-8.681 4.57-8.798 4.766L3 11.51l.202.335c.073.124 1.244 2.025 3.603 3.387l-2.009 2.01c-.406.406-.406 1.065 0 1.472.204.203.47.305.737.305.266 0 .532-.102.736-.305l2.58-2.58c.93.293 1.98.476 3.151.476 5.87 0 8.681-4.57 8.798-4.765l.202-.335-.202-.335z"
+      }));
+      return /*#__PURE__*/React__namespace.createElement(ManagerButton, {
+        tooltipTitle: title,
+        onClick: onClick,
+        icon: /*#__PURE__*/React__namespace.createElement(material.Checkbox, {
+          sx: {
+            color: 'inherit',
+            padding: 0.5,
+            borderRadius: 1.25,
+            '&.Mui-focusVisible': {
+              backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+            },
+            '&:hover': {
+              backgroundColor: 'transparent!important'
+            },
+            '&.Mui-checked': {
+              color: 'inherit'
+            }
+          },
+          icon: visibilityOffIcon,
+          checkedIcon: visibilityIcon,
+          checked: isEnabled,
+          disableFocusRipple: true,
+          tabIndex: -1
+        }),
+        testId: "enableLayer",
+        isEnabled: isEnabled
+      });
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -2507,9 +2671,11 @@
     exports.CustomSlider = CustomSlider;
     exports.CustomToggleButton = CustomToggleButton;
     exports.Draggable = DraggableComponent$1;
-    exports.DraggableDialog = DraggableDialog;
+    exports.EnableButton = EnableButton;
     exports.ErrorBoundary = ErrorBoundary;
     exports.HIDDEN_INPUT_HELPER_IS_DRAFT = HIDDEN_INPUT_HELPER_IS_DRAFT;
+    exports.ManagerButton = ManagerButton;
+    exports.ManagerDeleteButton = ManagerDeleteButton;
     exports.Resizable = ResizeComponent;
     exports.StatusTag = StatusTag;
     exports.ToggleMenu = ToggleMenu;
@@ -2521,8 +2687,7 @@
     exports.UserMenu = UserMenu;
     exports.UserMenuItemCheatSheet = UserMenuItemCheatSheet;
     exports.UserMenuItemTheme = MenuItemTheme;
-    exports.Z_INDEX_BOTTOM = Z_INDEX_BOTTOM;
-    exports.Z_INDEX_TOP = Z_INDEX_TOP;
+    exports.calculateDialogSizeAndPosition = calculateDialogSizeAndPosition;
     exports.getAxiosErrorMessage = getAxiosErrorMessage;
     exports.getInitials = getInitials;
     exports.isAxiosError = isAxiosError;

package/lib/components/AlertBanner/AlertBanner.d.ts

@@ -5,6 +5,7 @@ interface AlertBannerProps {
     severity?: AlertColor;
     info?: string | React.ReactElement;
     dataTestId?: string;
+    isCompact?: boolean;
 }
 declare const AlertBanner: React.FC<AlertBannerProps>;
 export default AlertBanner;

package/lib/components/AlertBanner/AlertBanner.stories.d.ts

@@ -3,7 +3,15 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AlertBanners: {
+export declare const AlertBannersGWTheme: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const AlertBannersLight: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const AlertBannersDark: {
     (): React.ReactElement;
     storyName: string;
 };

package/lib/components/Manager/EnableButton/EnableButton.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface EnableLayerProps {
+    isEnabled?: boolean;
+    title: string;
+    onChangeEnableLayer: (enable: boolean) => void;
+}
+export declare const EnableButton: React.FC<EnableLayerProps>;
+export {};

package/lib/components/Manager/EnableButton/EnableButton.stories.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const EnableButtonLight: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const EnableButtonDark: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/Manager/EnableButton/index.d.ts

@@ -0,0 +1 @@
+export * from './EnableButton';

package/lib/components/Manager/ManagerButton/ManagerButton.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { IconButtonProps } from '@mui/material';
+interface ManagerButtonProps extends IconButtonProps {
+    tooltipTitle: string;
+    onClick?: (event: React.MouseEvent) => void;
+    isActive?: boolean;
+    isEnabled?: boolean;
+    icon: React.ReactNode;
+    testId: string;
+    isAccessible?: boolean;
+}
+export declare const ManagerButton: React.FC<ManagerButtonProps>;
+export {};

package/lib/components/Manager/ManagerButton/ManagerButton.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/Manager/ManagerButton/ManagerButton.stories.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const ManagerButtonLight: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const ManagerButtonDark: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/Manager/ManagerButton/index.d.ts

@@ -0,0 +1 @@
+export * from './ManagerButton';

package/lib/components/Manager/ManagerDeleteButton/ManagerDeleteButton.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface DeleteButtonProps {
+    tooltipTitle: string;
+    onClickDelete: () => void;
+    isEnabled?: boolean;
+}
+export declare const ManagerDeleteButton: React.FC<DeleteButtonProps>;
+export {};

package/lib/components/Manager/ManagerDeleteButton/ManagerDeleteButton.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/Manager/ManagerDeleteButton/ManagerDeleteButton.stories.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const ManagerDeleteButtonLight: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const ManagerDeleteButtonDark: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/Manager/ManagerDeleteButton/index.d.ts

@@ -0,0 +1 @@
+export * from './ManagerDeleteButton';

package/lib/components/Manager/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ManagerButton';
+export * from './ManagerDeleteButton';
+export * from './EnableButton';
+export * from './styles';

package/lib/components/Manager/styles.d.ts

@@ -0,0 +1,5 @@
+export interface ManagerButtonStyle {
+    isActive?: boolean;
+    isEnabled?: boolean;
+    isAccessible?: boolean;
+}

package/lib/components/ToolContainer/ToolContainerDraggable.d.ts

@@ -1,6 +1,12 @@
 import React from 'react';
 import { ResizableComponentProps, Size } from '../DraggableResizable/types';
 import { HeaderSize } from './types';
+export declare const calculateDialogSizeAndPosition: () => {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+};
 interface DraggableComponentProps extends Omit<ResizableComponentProps, 'bounds'> {
     onStartResize?: () => void;
     isOpen?: boolean;

package/lib/components/ToolContainer/index.d.ts

@@ -1,5 +1,6 @@
 export { default as ToolContainer } from './ToolContainer';
 export { default as ToolContainerDraggable } from './ToolContainerDraggable';
+export { calculateDialogSizeAndPosition } from './ToolContainerDraggable';
 export { default as ToolHeader } from './ToolHeader';
 export { default as ToolFooter } from './ToolFooter';
 export * from './types';

package/lib/components/index.d.ts

@@ -8,7 +8,7 @@ export * from './ErrorBoundary';
 export * from './UserMenu';
 export * from './ToolContainer';
 export * from './CustomSlider';
-export * from './DraggableDialog';
 export * from './CustomToggleButton';
 export * from './ToolButton';
 export * from './ToggleMenu';
+export * from './Manager';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "@mui/material": "^5.2.8",
-    "@opengeoweb/theme": "2.3.0",
+    "@opengeoweb/theme": "2.4.0",
     "@mui/styles": "^5.2.3",
     "@mui/icons-material": "^5.2.5",
     "react-draggable": "^4.4.3",
     "re-resizable": "^6.9.0",
     "lodash": "^4.17.20",
-    "@opengeoweb/form-fields": "2.3.0",
+    "@opengeoweb/form-fields": "2.4.0",
     "react-hook-form": "^6.12.1",
     "moment": "^2.29.0",
     "moment-timezone": "^0.5.31",

package/lib/components/DraggableDialog/DraggableDialog.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-export declare const Z_INDEX_TOP = 600;
-export declare const Z_INDEX_BOTTOM = 550;
-interface DraggableDialogProps {
-    handleClose: () => void;
-    title: string;
-    children?: React.ReactNode;
-    dialogStyling?: {
-        dialogWidth?: string;
-        dialogMaxHeight?: string;
-        dialogTop?: string;
-    };
-    zIndex?: number;
-}
-declare const DraggableDialog: React.FC<DraggableDialogProps>;
-export default DraggableDialog;

package/lib/components/DraggableDialog/DraggableDialog.stories.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const DraggableDialogOldTheme: () => React.ReactElement;

package/lib/components/DraggableDialog/index.d.ts

@@ -1 +0,0 @@
-export { default as DraggableDialog, Z_INDEX_TOP, Z_INDEX_BOTTOM, } from './DraggableDialog';