@opengeoweb/shared 2.2.1 → 2.4.1

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')) :
-    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'], 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));
-})(this, (function (exports, React, material, makeStyles, iconsMaterial, reactHookForm, formFields, Draggable, reResizable, theme, lodash, withStyles, createStyles) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@mui/icons-material/Close'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('@mui/styles/makeStyles'), require('react-draggable'), require('re-resizable'), require('@opengeoweb/theme'), require('@mui/icons-material'), 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/icons-material/Close', 'react-hook-form', '@opengeoweb/form-fields', '@mui/styles/makeStyles', 'react-draggable', 're-resizable', '@opengeoweb/theme', '@mui/icons-material', '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.Close, global.reactHookForm, global.formFields, global.makeStyles, global.Draggable, global.reResizable, global.theme, global.iconsMaterial, global.lodash, global.withStyles, global.MoreVertIcon, global.createStyles));
+})(this, (function (exports, React, material, Close, reactHookForm, formFields, makeStyles, Draggable, reResizable, theme, iconsMaterial, lodash, withStyles, MoreVertIcon, createStyles) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,9 +26,11 @@
 
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+    var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
     var makeStyles__default = /*#__PURE__*/_interopDefaultLegacy(makeStyles);
     var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
     var withStyles__default = /*#__PURE__*/_interopDefaultLegacy(withStyles);
+    var MoreVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreVertIcon);
     var createStyles__default = /*#__PURE__*/_interopDefaultLegacy(createStyles);
 
     /*! *****************************************************************************
@@ -159,20 +161,6 @@
       }, content));
     };
 
-    var useStyles$d = makeStyles__default["default"](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,
@@ -188,8 +176,6 @@
           content = _e === void 0 ? null : _e,
           other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content"]);
 
-      var classes = useStyles$d();
-
       other.catchOnCancel;
           var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
 
@@ -197,14 +183,33 @@
       return /*#__PURE__*/React__namespace.createElement(material.Dialog, __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__namespace.createElement(material.DialogTitle, {
-        className: classes.dialogHeader
+        sx: {
+          zIndex: 1,
+          padding: 2,
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
-        variant: "h5",
+        sx: {
+          fontSize: {
+            xs: '16px',
+            sm: '34px'
+          },
+          fontWeight: {
+            xs: 500,
+            sm: 400
+          }
+        },
         "data-testid": "confirmationDialog-title",
         component: "span"
       }, title), /*#__PURE__*/React__namespace.createElement(material.IconButton, {
@@ -214,23 +219,51 @@
           return onClose('CLOSED');
         },
         size: "small"
-      }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Close, null))), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
-        className: classes.dialogContent
+      }, /*#__PURE__*/React__namespace.createElement(Close__default["default"], null))), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
+        sx: {
+          padding: '8px 16px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "body1"
-      }, description), content), /*#__PURE__*/React__namespace.createElement(material.DialogActions, null, /*#__PURE__*/React__namespace.createElement(material.Button, {
-        "data-testid": "conformationDialog-cancel",
-        color: "secondary",
-        variant: "outlined",
+      }, description), content), /*#__PURE__*/React__namespace.createElement(material.DialogActions, {
+        sx: {
+          padding: 2,
+          flexDirection: {
+            xs: 'column',
+            sm: 'row'
+          }
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.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__namespace.createElement(material.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)));
     };
@@ -501,12 +534,13 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$c = makeStyles__default["default"](function () {
+    var useStyles$a = makeStyles__default["default"](function () {
       return {
         title: {
           fontSize: '14px',
           fontWeight: 'normal',
-          marginTop: '0px!important'
+          marginTop: '0px!important',
+          paddingTop: '0px!important'
         },
         info: {
           fontSize: '16px'
@@ -523,8 +557,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':
@@ -534,8 +567,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':
@@ -545,8 +577,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':
@@ -557,8 +588,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)"
           }));
       }
     };
@@ -570,12 +600,31 @@
           _c = _a.info,
           info = _c === void 0 ? '' : _c,
           _d = _a.dataTestId,
-          dataTestId = _d === void 0 ? 'alert-banner' : _d;
-      var classes = useStyles$c();
+          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", {
@@ -599,7 +648,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$b = makeStyles__default["default"](function () {
+    var useStyles$9 = makeStyles__default["default"](function () {
       return {
         wrapper: {
           height: '100vh',
@@ -616,7 +665,7 @@
     var AppLayout = function AppLayout(_a) {
       var header = _a.header,
           children = _a.children;
-      var classes = useStyles$b();
+      var classes = useStyles$9();
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: classes.wrapper
       }, header, /*#__PURE__*/React__default["default"].createElement("main", {
@@ -642,7 +691,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$a = makeStyles__default["default"](function (theme) {
+    var useStyles$8 = makeStyles__default["default"](function (theme) {
       var _a;
 
       return {
@@ -679,7 +728,7 @@
           userMenu = _a.userMenu,
           _b = _a.title,
           title = _b === void 0 ? 'GeoWeb' : _b;
-      var classes = useStyles$a();
+      var classes = useStyles$8();
       return /*#__PURE__*/React__default["default"].createElement("header", {
         className: classes.header
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -763,38 +812,29 @@
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
 
-    var useStyles$9 = function useStyles(isRightAligned) {
-      return makeStyles__default["default"](function () {
-        return {
-          icon: __assign(__assign({
-            width: 20,
-            height: 20,
-            top: -10,
-            position: 'relative'
-          }, isRightAligned ? {
-            left: -10
-          } : {
-            left: 10,
-            transform: 'rotate(90deg)'
-          }), {
-            zIndex: 1
-          })
-        };
-      });
-    };
-
     var ResizeHandle = function ResizeHandle(_a) {
       var isRightAligned = _a.isRightAligned;
       var theme = material.useTheme();
-      var styles = useStyles$9(isRightAligned)();
       return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
-        className: styles.icon,
+        sx: __assign(__assign({
+          width: 20,
+          height: 20,
+          top: -10,
+          position: 'relative'
+        }, isRightAligned ? {
+          left: -10
+        } : {
+          left: 10,
+          transform: 'rotate(90deg)'
+        }), {
+          zIndex: 1
+        }),
         "data-testid": "resizeHandle"
       }, /*#__PURE__*/React__default["default"].createElement("rect", {
         fill: "#ffffff"
       }), /*#__PURE__*/React__default["default"].createElement("path", {
         d: "M19.687 18.037v1h-6v-1h6zm3.5-3.5v1h-13v-1h13z",
-        fill: "" + theme.palette.geowebColors.greys.accessible,
+        fill: "" + theme.palette.geowebColors.buttons.flat["default"].color,
         transform: "rotate(-45 16.687 16.787)"
       }));
     };
@@ -962,7 +1002,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$8 = makeStyles__default["default"](function (theme) {
+    var useStyles$7 = makeStyles__default["default"](function (theme) {
       return {
         container: {
           position: 'absolute',
@@ -1010,7 +1050,7 @@
       } : _d,
           children = _a.children,
           initials = _a.initials;
-      var classes = useStyles$8();
+      var classes = useStyles$7();
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "userButton",
         onClick: onToggle,
@@ -1052,7 +1092,9 @@
           isDark = _a.isDark,
           toggleTheme = _a.toggleTheme;
 
-      return /*#__PURE__*/React__default["default"].createElement(material.MenuItem, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      return /*#__PURE__*/React__default["default"].createElement(material.MenuItem, {
+        divider: true
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
@@ -1091,7 +1133,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$7 = makeStyles__default["default"](function (theme) {
+    var useStyles$6 = makeStyles__default["default"](function (theme) {
       return {
         footer: {
           boxShadow: theme.shadows[1],
@@ -1104,7 +1146,7 @@
     }); // drag handles will be handled by DraggableResizable/Resizable
 
     var ToolFooter = function ToolFooter() {
-      var classes = useStyles$7();
+      var classes = useStyles$6();
       return /*#__PURE__*/React__default["default"].createElement("footer", {
         className: classes.footer
       });
@@ -1142,7 +1184,7 @@
             return {
               fontSize: 16,
               fontWeight: 500,
-              padding: 4
+              padding: '4px'
             };
           }
 
@@ -1151,7 +1193,7 @@
             return {
               fontSize: 20,
               fontWeight: 400,
-              padding: 8
+              padding: '8px'
             };
           }
 
@@ -1160,7 +1202,7 @@
             return {
               fontSize: 16,
               fontWeight: 500,
-              padding: 12
+              padding: '12px'
             };
           }
 
@@ -1171,45 +1213,13 @@
       }
     };
 
-    var useStyles$6 = makeStyles__default["default"](function (theme) {
-      return {
-        header: {
-          boxShadow: theme.shadows[1],
-          background: theme.palette.geowebColors.background.surface,
-          padding: function padding(props) {
-            return props.styles.padding;
-          },
-          zIndex: 1,
-          cursor: function cursor(props) {
-            return props.isDraggable ? 'move' : null;
-          }
-        },
-        title: {
-          fontSize: function fontSize(props) {
-            return props.styles.fontSize;
-          },
-          fontWeight: function fontWeight(props) {
-            return props.styles.fontWeight;
-          }
-        },
-        iconClose: {
-          color: theme.palette.geowebColors.greys.accessible,
-          padding: 0
-        },
-        iconDrag: {
-          color: theme.palette.geowebColors.greys.accessible,
-          padding: 0,
-          pointerEvents: 'none'
-        },
-        iconDragHorizontal: {
-          color: theme.palette.geowebColors.greys.accessible,
-          padding: 0,
-          pointerEvents: 'none',
-          transform: 'rotate(90deg)',
-          height: 12
-        }
-      };
-    });
+    var iconStyle = {
+      color: 'geowebColors.greys.accessible',
+      padding: 0,
+      '&:hover': {
+        background: 'action.hover'
+      }
+    };
 
     var ToolHeader = function ToolHeader(_a) {
       var size = _a.size,
@@ -1221,17 +1231,21 @@
           _d = _a.className,
           className = _d === void 0 ? '' : _d;
       var styles = getStyle(size);
-      var classes = useStyles$6({
-        styles: styles,
-        isDraggable: isDraggable
-      });
 
       var onClickClose = function onClickClose() {
         return onClose();
       };
 
-      return /*#__PURE__*/React__default["default"].createElement("header", {
-        className: classes.header + " " + className
+      return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        component: "header",
+        className: className,
+        sx: {
+          boxShadow: 1,
+          backgroundColor: 'geowebColors.background.surface',
+          padding: styles.padding,
+          zIndex: 2,
+          cursor: isDraggable ? 'move' : null
+        }
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         alignItems: "center"
@@ -1243,9 +1257,11 @@
         justifyContent: "flex-start"
       }, isDraggable && size !== 'xxs' && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "dragBtn",
-        className: classes.iconDrag,
         disableRipple: true,
-        size: "large"
+        size: "large",
+        sx: __assign(__assign({}, iconStyle), {
+          pointerEvents: 'none'
+        })
       }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 10
@@ -1255,12 +1271,19 @@
         alignItems: "center"
       }, title && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "h2",
-        className: classes.title
+        sx: {
+          fontSize: styles.fontSize,
+          fontWeight: styles.fontWeight
+        }
       }, title), size === 'xxs' && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "dragBtn-xxs",
-        className: classes.iconDragHorizontal,
         disableRipple: true,
-        size: "small"
+        size: "small",
+        sx: __assign(__assign({}, iconStyle), {
+          pointerEvents: 'none',
+          transform: 'rotate(90deg)',
+          height: 12
+        })
       }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 1,
@@ -1268,9 +1291,9 @@
         justifyContent: "flex-end"
       }, onClose && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "closeBtn",
-        className: classes.iconClose,
         onClick: onClickClose,
-        size: "large"
+        size: "large",
+        sx: iconStyle
       }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Close, null)))));
     };
 
@@ -1302,7 +1325,6 @@
         content: {
           flex: 1,
           overflowY: 'auto',
-          zIndex: 2,
           position: 'relative'
         }
       };
@@ -1364,6 +1386,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) {
@@ -1495,6 +1530,7 @@
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         style: __assign({
           position: 'absolute',
+          pointerEvents: 'all',
           zIndex: zIndex
         }, startPosition),
         ref: nodeRef
@@ -1881,6 +1917,14 @@
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
       }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon, null)))
+    }, {
+      title: 'Change layer manager values by scrolling',
+      description: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, "Ctrl"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, " + Mouse scroll")),
+      descriptionMac: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, /*#__PURE__*/React__default["default"].createElement(CommandIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, " + Mouse scroll"))
     }];
     var getShortcutList = function getShortcutList(shortcutList, platform) {
       if (platform === void 0) {
@@ -2024,7 +2068,8 @@
 
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.MenuItem, {
         "data-testid": "cheatsheet-btn",
-        onClick: onOpen
+        onClick: onOpen,
+        divider: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -2232,83 +2277,388 @@
       }, 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) {
+    /* *
+     * 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 CustomToggleButton = function CustomToggleButton(_a) {
+      var _b = _a.variant,
+          variant = _b === void 0 ? 'primary' : _b,
+          _c = _a.value,
+          value = _c === void 0 ? 0 : _c,
+          props = __rest(_a, ["variant", "value"]);
+
+      return /*#__PURE__*/React__namespace.createElement(material.ToggleButton, __assign({
+        className: variant,
+        value: value
+      }, 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 ToolButton = function ToolButton(_a) {
+      var active = _a.active,
+          _b = _a.width,
+          width = _b === void 0 ? '24px' : _b,
+          _c = _a.height,
+          height = _c === void 0 ? '24px' : _c,
+          children = _a.children,
+          _d = _a.value,
+          value = _d === void 0 ? 0 : _d,
+          _e = _a.sx,
+          sx = _e === void 0 ? {} : _e,
+          props = __rest(_a, ["active", "width", "height", "children", "value", "sx"]);
+
+      return /*#__PURE__*/React__namespace.createElement(CustomToggleButton, __assign({
+        variant: "tool",
+        disableRipple: true,
+        selected: active,
+        value: value,
+        sx: __assign({
+          width: width + "!important",
+          height: height + "!important",
+          textTransform: 'none!important',
+          padding: '11px!important'
+        }, sx)
+      }, props), children);
+    };
+
+    var getPosition = function getPosition(menuPosition) {
+      switch (menuPosition) {
+        case 'bottom':
           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
+            anchorOrigin: {
+              vertical: 'bottom',
+              horizontal: 'center'
+            },
+            transformOrigin: {
+              vertical: 'top',
+              horizontal: 'center'
+            }
           };
-        },
-        dialogContent: {
-          marginTop: '40px',
-          overflowY: 'scroll'
-        },
-        dialogHeader: function dialogHeader(props) {
+
+        default:
+        case 'left':
           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: '#ffffff',
-            zIndex: props.zIndex + 10
+            anchorOrigin: {
+              vertical: 'center',
+              horizontal: 'left'
+            },
+            transformOrigin: {
+              vertical: 'center',
+              horizontal: 'right'
+            }
           };
+      }
+    };
+
+    var ToggleMenu = function ToggleMenu(_a) {
+      var _b = _a.buttonTestId,
+          buttonTestId = _b === void 0 ? 'toggleMenuButton' : _b,
+          _c = _a.menuPosition,
+          menuPosition = _c === void 0 ? 'left' : _c,
+          menuItems = _a.menuItems,
+          children = _a.children,
+          buttonSx = _a.buttonSx,
+          _d = _a.tooltipTitle,
+          tooltipTitle = _d === void 0 ? '' : _d;
+
+      var _e = __read(React__namespace.useState(null), 2),
+          anchorEl = _e[0],
+          setAnchorEl = _e[1];
+
+      var isOpen = Boolean(anchorEl);
+
+      var _f = getPosition(menuPosition),
+          anchorOrigin = _f.anchorOrigin,
+          transformOrigin = _f.transformOrigin;
+
+      var handleClick = function handleClick(event) {
+        setAnchorEl(event.currentTarget);
+      };
+
+      var handleClose = function handleClose() {
+        setAnchorEl(null);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
+        active: isOpen,
+        sx: buttonSx,
+        onClick: handleClick,
+        "data-testid": buttonTestId
+      }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        placement: "top",
+        title: tooltipTitle
+      }, /*#__PURE__*/React__namespace.createElement(MoreVertIcon__default["default"], null))), /*#__PURE__*/React__namespace.createElement(material.Menu, {
+        anchorEl: anchorEl,
+        open: isOpen,
+        onClose: handleClose,
+        anchorOrigin: anchorOrigin,
+        transformOrigin: transformOrigin,
+        BackdropProps: {
+          style: {
+            opacity: 0,
+            transition: 'none'
+          }
         },
-        iconClose: {
-          padding: theme.spacing(1)
+        MenuListProps: children && {
+          style: {
+            padding: '0px'
+          }
+        }
+      }, menuItems && menuItems.map(function (menuItem) {
+        var text = menuItem.text,
+            icon = menuItem.icon,
+            action = menuItem.action;
+        return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+          key: text,
+          onClick: function onClick() {
+            action();
+            handleClose();
+          }
+        }, icon && /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, null, icon), /*#__PURE__*/React__namespace.createElement(material.Typography, null, text));
+      }), 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;
+            }
+          }
         },
-        iconDrag: {
-          padding: theme.spacing(1)
+        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
+      });
+    };
 
-    var DraggableDialog = function DraggableDialog(_a) {
-      var handleClose = _a.handleClose,
+    /* *
+     * 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,
-          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
+          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"
       }));
-      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)));
+      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: "enableButton",
+        isEnabled: isEnabled
+      });
     };
 
     /* *
@@ -2351,12 +2701,17 @@
     exports.ConfirmationDialog = ConfirmationDialog;
     exports.ConfirmationServiceProvider = ConfirmationServiceProvider;
     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;
+    exports.ToolButton = ToolButton;
     exports.ToolContainer = ToolContainer;
     exports.ToolContainerDraggable = DraggableComponent;
     exports.ToolFooter = ToolFooter;
@@ -2364,8 +2719,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;