@opengeoweb/shared 2.3.0 → 2.5.0

package/index.esm.js

@@ -1,17 +1,18 @@
 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 makeStyles from '@mui/styles/makeStyles';
-import { Close, DragIndicator } from '@mui/icons-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 Close from '@mui/icons-material/Close';
 import { useFormContext } from 'react-hook-form';
 import { isEmpty, errorMessages } from '@opengeoweb/form-fields';
+import makeStyles from '@mui/styles/makeStyles';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
 import { useThemeContext } from '@opengeoweb/theme';
+import { DragIndicator, Close as Close$1, Delete } from '@mui/icons-material';
 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");
@@ -103,20 +104,6 @@ function __rest(s, e) {
     return t;
 }
 
-var useStyles$b = makeStyles(function () {
-  return {
-    dialogHeader: {
-      zIndex: 1,
-      padding: '8px 20px',
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center'
-    },
-    dialogContent: {
-      padding: '40px 20px 0px 20px !important'
-    }
-  };
-});
 var ConfirmationDialog = function ConfirmationDialog(_a) {
   var open = _a.open,
       title = _a.title,
@@ -132,8 +119,6 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
       content = _a$content === void 0 ? null : _a$content,
       other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content"]);
 
-  var classes = useStyles$b();
-
   other.catchOnCancel;
       var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
 
@@ -141,14 +126,33 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
   return /*#__PURE__*/React.createElement(Dialog, Object.assign({
     "data-testid": "confirmationDialog",
     open: open,
-    maxWidth: "sm",
-    fullWidth: true,
+    PaperProps: {
+      sx: {
+        width: '560px',
+        margin: 2.5
+      }
+    },
     // fix for briefly showing default options when closing dialog
     transitionDuration: 0
   }, rest), /*#__PURE__*/React.createElement(DialogTitle, {
-    className: classes.dialogHeader
+    sx: {
+      zIndex: 1,
+      padding: 2,
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    }
   }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "h5",
+    sx: {
+      fontSize: {
+        xs: '16px',
+        sm: '34px'
+      },
+      fontWeight: {
+        xs: 500,
+        sm: 400
+      }
+    },
     "data-testid": "confirmationDialog-title",
     component: "span"
   }, title), /*#__PURE__*/React.createElement(IconButton, {
@@ -159,22 +163,50 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
     },
     size: "small"
   }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement(DialogContent, {
-    className: classes.dialogContent
+    sx: {
+      padding: '8px 16px'
+    }
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "body1"
-  }, description), content), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
-    "data-testid": "conformationDialog-cancel",
-    color: "secondary",
-    variant: "outlined",
+  }, description), content), /*#__PURE__*/React.createElement(DialogActions, {
+    sx: {
+      padding: 2,
+      flexDirection: {
+        xs: 'column',
+        sm: 'row'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "confirmationDialog-cancel",
+    variant: "tertiary",
+    sx: {
+      width: {
+        xs: '100%',
+        sm: '150px'
+      }
+    },
     onClick: function onClick() {
       return onClose('CANCELLED');
     },
     autoFocus: true,
     disableRipple: true
   }, cancelLabel), /*#__PURE__*/React.createElement(Button, {
-    "data-testid": "conformationDialog-confirm",
-    color: "secondary",
-    variant: "contained",
+    "data-testid": "confirmationDialog-confirm",
+    variant: "primary",
+    sx: {
+      width: {
+        xs: '100%',
+        sm: '150px'
+      },
+      marginLeft: {
+        xs: '0px!important',
+        sm: '8px!important'
+      },
+      marginTop: {
+        xs: 2,
+        sm: 0
+      }
+    },
     onClick: onSubmit
   }, confirmLabel)));
 };
@@ -656,7 +688,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 +706,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 +716,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 +726,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 +737,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 +749,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 +1384,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, {
@@ -1387,7 +1435,7 @@ var ToolHeader = function ToolHeader(_ref) {
     onClick: onClickClose,
     size: "large",
     sx: iconStyle
-  }, /*#__PURE__*/React__default.createElement(Close, null)))));
+  }, /*#__PURE__*/React__default.createElement(Close$1, null)))));
 };
 
 /* *
@@ -1418,7 +1466,6 @@ var useStyles$5 = makeStyles(function () {
     content: {
       flex: 1,
       overflowY: 'auto',
-      zIndex: 2,
       position: 'relative'
     }
   };
@@ -1462,6 +1509,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 +1655,7 @@ var DraggableComponent = function DraggableComponent(_a) {
   }, /*#__PURE__*/React__default.createElement("div", {
     style: Object.assign({
       position: 'absolute',
+      pointerEvents: 'all',
       zIndex: zIndex
     }, startPosition),
     ref: nodeRef
@@ -1909,11 +1969,11 @@ var shortcuts = [{
   }, /*#__PURE__*/React__default.createElement(ArrowRightIcon, null))),
   descriptionMac: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(OptionIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+  }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "connect"
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(CommandIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+  }, /*#__PURE__*/React__default.createElement(OptionIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "connect"
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
@@ -2325,101 +2385,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.
@@ -2477,10 +2442,12 @@ var ToolButton = function ToolButton(_a) {
       value = _a$value === void 0 ? 0 : _a$value,
       _a$sx = _a.sx,
       sx = _a$sx === void 0 ? {} : _a$sx,
-      props = __rest(_a, ["active", "width", "height", "children", "value", "sx"]);
+      _a$variant = _a.variant,
+      variant = _a$variant === void 0 ? 'tool' : _a$variant,
+      props = __rest(_a, ["active", "width", "height", "children", "value", "sx", "variant"]);
 
   return /*#__PURE__*/React.createElement(CustomToggleButton, Object.assign({
-    variant: "tool",
+    variant: variant,
     disableRipple: true,
     selected: active,
     value: value,
@@ -2591,6 +2558,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: "enableButton",
+    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 +2806,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 };