@opengeoweb/webmap-react 15.3.0 → 16.0.0

package/index.esm.js

@@ -11,14 +11,14 @@ import ImageWrapper, { load } from 'ol/Image';
 import { getImageSrc, getRequestParams, createLoader } from 'ol/source/wms';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { CustomTooltip, CanvasComponent, useWheelStopPropagation, ToolContainerDraggable, CustomIconButton, dateUtils, useMakeSureContainerStaysInsideWindow, Draggable, Resizable } from '@opengeoweb/shared';
-import { Paper, Box, Typography, useTheme, Grid, styled, Slider, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$2, FormLabel, Switch, ThemeProvider } from '@mui/material';
+import { useTheme, Card, Box, Typography, Grid, styled, Slider, FormGroup, FormControlLabel, Checkbox, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$2, FormLabel, Switch, Paper, ThemeProvider } from '@mui/material';
+import { Visibility, VisibilityOff, arrowUpPath, Home, Add, Minus, List, Equalizer, DimensionsElevation, Link, LinkOff, Info, DimensionsOther, DimensionsRefTime, DimensionsTime, locationPath, rotatePath, Location, DrawToolSmoothLine, DrawToolFreehand, DrawToolOval, DrawToolCircle, DrawToolSquare, Delete, DrawToolLineString, DrawToolRectangle, DrawToolPolygon, DrawToolPoint, DrawFIRLand, ArrowUp, darkTheme, ChevronRight, Options, Clock as Clock$1 } from '@opengeoweb/theme';
+import 'i18next';
+import { useTranslation } from 'react-i18next';
 import { queryOptions, useQuery } from '@tanstack/react-query';
 import { Point, MultiPoint, LineString, Polygon } from 'ol/geom';
 import { Style, Icon as Icon$1, Circle, Stroke, Fill, Text } from 'ol/style';
-import { arrowUpPath, Home, Add, Minus, List, Equalizer, DimensionsElevation, Link, LinkOff, Info, DimensionsOther, DimensionsRefTime, DimensionsTime, locationPath, rotatePath, Location, DrawToolSmoothLine, DrawToolFreehand, DrawToolOval, DrawToolCircle, DrawToolSquare, Delete, DrawToolLineString, DrawToolRectangle, DrawToolPolygon, DrawToolPoint, DrawFIRLand, ArrowUp, darkTheme, ChevronRight, Clock as Clock$1, Resize } from '@opengeoweb/theme';
 import { http, HttpResponse } from 'msw';
-import 'i18next';
-import { useTranslation } from 'react-i18next';
 import Box$1 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
 import { View, Map, Feature, Collection, Overlay } from 'ol';
@@ -103,7 +103,11 @@ var en = {
 	"webmap-react-legend-no-image": "No legend graphic available",
 	"webmap-react-map-measure-help-tooltip": "Click to measure",
 	"clock-show": "Show clock",
-	"clock-hide": "Hide clock"
+	"clock-hide": "Hide clock",
+	"clock-animation-options": "Animation options",
+	"webmap-react-show-layer-legend": "Show layer legend",
+	"webmap-react-show-layer": "Show layer in legend",
+	"webmap-react-hide-layer": "Hide layer in legend"
 };
 var fi = {
 	"webmap-react-event": "tapahtuma:",
@@ -152,7 +156,11 @@ var fi = {
 	"webmap-react-linestring": "Viivajono",
 	"webmap-react-delete": "Poista",
 	"clock-show": "Näytä kello",
-	"clock-hide": "Piilota kello"
+	"clock-hide": "Piilota kello",
+	"clock-animation-options": "Animoinnin asetukset",
+	"webmap-react-show-layer-legend": "Näytä karttatason selite",
+	"webmap-react-show-layer": "Näytä karttataso selitteessä",
+	"webmap-react-hide-layer": "Piilota karttataso selitteestä"
 };
 var no = {
 	"webmap-react-event": "hendelse:",
@@ -201,7 +209,11 @@ var no = {
 	"webmap-react-linestring": "Linje",
 	"webmap-react-delete": "Fjerne",
 	"clock-show": "Vis klokke",
-	"clock-hide": "Skjul klokke"
+	"clock-hide": "Skjul klokke",
+	"clock-animation-options": "Animasjonsinnstillinger",
+	"webmap-react-show-layer-legend": "Vis",
+	"webmap-react-show-layer": "Vis laget i tegnforklaringen",
+	"webmap-react-hide-layer": "Skjul laget i tegnforklaringen"
 };
 var nl = {
 	"webmap-react-event": "event:",
@@ -258,7 +270,11 @@ var nl = {
 	"webmap-react-legend-no-image": "Geen legenda beschikbaar",
 	"webmap-react-map-measure-help-tooltip": "Klik om te meten",
 	"clock-show": "Klok tonen",
-	"clock-hide": "Klok verbergen"
+	"clock-hide": "Klok verbergen",
+	"clock-animation-options": "Animatie opties",
+	"webmap-react-show-layer-legend": "Toon laag in legenda",
+	"webmap-react-show-layer": "Toon laag in legenda",
+	"webmap-react-hide-layer": "Verberg laag in legenda"
 };
 var webmapReactTranslations = {
 	en: en,
@@ -1549,25 +1565,92 @@ var TimeawareImageSource = /*#__PURE__*/function (_ImageSource) {
   }]);
 }(ImageSource);
 
+var WEBMAP_REACT_NAMESPACE = 'webmapreact';
+var useWebmapReactTranslation = function useWebmapReactTranslation() {
+  var ns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : WEBMAP_REACT_NAMESPACE;
+  return useTranslation(ns);
+};
+
 var LegendLayout = function LegendLayout(_ref) {
   var title = _ref.title,
-    name = _ref.name,
-    dimensions = _ref.dimensions,
     children = _ref.children,
     height = _ref.height,
     width = _ref.width,
-    minWidth = _ref.minWidth;
-  return jsxs(Paper, {
+    _ref$showLayerLegend = _ref.showLayerLegend,
+    showLayerLegend = _ref$showLayerLegend === void 0 ? true : _ref$showLayerLegend,
+    toggleLayerLegendVisibility = _ref.toggleLayerLegendVisibility;
+  var _useWebmapReactTransl = useWebmapReactTranslation(),
+    t = _useWebmapReactTransl.t;
+  var theme = useTheme();
+  return jsxs(Card, {
     "data-testid": "legend",
     sx: {
-      padding: '10px',
-      border: '1px solid grey',
-      backgroundColor: '#FFF',
+      border: 'none',
+      // eslint-disable-next-line no-nested-ternary
+      backgroundColor: toggleLayerLegendVisibility ? showLayerLegend ? 'geowebColors.cards.cardContainer' : 'geowebColors.cards.cardContainerDisabled' : '#FFF',
       overflow: 'hidden',
-      marginBottom: 0.5
+      marginBottom: 0.5,
+      boxShadow: 0,
+      borderRadius: '3px',
+      padding: toggleLayerLegendVisibility ? 'none' : '10px'
     },
-    children: [jsx(Box, {
+    children: [toggleLayerLegendVisibility ? jsx(Box, {
       "data-testid": "legend-title",
+      children: jsx(CustomTooltip, {
+        title: showLayerLegend ? t('webmap-react-hide-layer') : t('webmap-react-show-layer'),
+        children: jsxs(Typography, {
+          alignItems: "center",
+          component: "button",
+          display: "flex",
+          gap: 1,
+          onClick: function onClick(event) {
+            event.stopPropagation();
+            toggleLayerLegendVisibility(!showLayerLegend);
+          },
+          sx: {
+            fontFamily: 'Roboto, Helvetica, Arial',
+            fontSize: '12px',
+            width: "".concat(width, "px"),
+            minWidth: '100%',
+            padding: '4px',
+            margin: '0 0 1px',
+            wordWrap: 'break-word',
+            color: showLayerLegend ? 'geowebColors.typographyAndIcons.text' : 'geowebColors.typographyAndIcons.inactiveText',
+            whiteSpace: 'nowrap',
+            border: showLayerLegend ? 'none' : "1px solid ".concat(theme.palette.geowebColors.cards.cardContainerDisabledBorder),
+            backgroundColor: showLayerLegend ? 'geowebColors.cards.cardContainer' : 'geowebColors.cards.cardContainerDisabled',
+            textAlign: 'left',
+            cursor: 'pointer',
+            '&:hover': {
+              backgroundColor: 'geowebColors.cards.cardContainerMouseOver',
+              border: showLayerLegend ? 'none' : "1px solid ".concat(theme.palette.geowebColors.cards.cardContainerBorder)
+            }
+          },
+          variant: "subtitle2",
+          children: [showLayerLegend ? jsx(Visibility, {
+            fontSize: "medium",
+            sx: {
+              margin: 'auto 0px'
+            }
+          }) : jsx(VisibilityOff, {
+            fontSize: "medium",
+            sx: {
+              margin: 'auto 0px'
+            }
+          }), jsx("span", {
+            style: {
+              overflow: 'hidden',
+              textOverflow: 'ellipsis'
+            },
+            children: title
+          })]
+        })
+      })
+    }) : jsx(Box, {
+      "data-testid": "legend-title",
+      sx: {
+        backgroundColor: '#FFF'
+      },
       children: jsx(Typography, {
         sx: {
           fontFamily: 'Roboto, Helvetica, Arial',
@@ -1580,41 +1663,19 @@ var LegendLayout = function LegendLayout(_ref) {
         variant: "h3",
         children: title
       })
-    }), jsx(CustomTooltip, {
+    }), !!showLayerLegend && jsx(CustomTooltip, {
       placement: "top",
       title: title || 'loading',
       children: jsx(Box, {
         sx: {
-          margin: '10px 0px 10px 0px',
+          margin: toggleLayerLegendVisibility ? '2px 0 8px 12px' : '10px 0px 10px 0px',
           height: "".concat(height, "px"),
-          width: "".concat(width, "px")
+          width: "".concat(width, "px"),
+          minWidth: '100%',
+          backgroundColor: '#FFF'
         },
         children: children
       })
-    }), jsx(Box, {
-      "data-testid": "legend-info",
-      sx: _objectSpread2({
-        fontFamily: 'Roboto, Helvetica, Arial',
-        fontSize: 10,
-        color: 'common.black',
-        overflowX: 'hidden',
-        wordWrap: 'break-word',
-        whiteSpace: 'nowrap'
-      }, minWidth && {
-        minWidth: "".concat(minWidth, "px")
-      }),
-      children: dimensions === null || dimensions === void 0 ? void 0 : dimensions.map(function (dim) {
-        return jsx(Box, {
-          children: dim.name === 'time' ? "".concat(dim.currentValue) : jsxs(Fragment, {
-            children: [jsxs(Box, {
-              style: {
-                fontWeight: 500
-              },
-              children: [dim.name, ":"]
-            }), dim.currentValue, " ", dim.units]
-          })
-        }, name + dim.name);
-      })
     })]
   });
 };
@@ -1697,6 +1758,12 @@ var joinUrlParams = function joinUrlParams(params) {
     return x !== undefined && x.length > 0;
   }).join('/');
 };
+// This is a copy from libs/api/src/utils.ts due to circular dependency
+var withJsonFormat = function withJsonFormat(url) {
+  var urlObj = new URL(url);
+  urlObj.searchParams.set('f', 'json');
+  return urlObj.toString();
+};
 var fetchEDRCollectionDetails = /*#__PURE__*/function () {
   var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(edrBaseUrlWithCollection) {
     var instanceId,
@@ -1705,7 +1772,7 @@ var fetchEDRCollectionDetails = /*#__PURE__*/function () {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
           instanceId = _args3.length > 1 && _args3[1] !== undefined ? _args3[1] : '';
-          return _context3.abrupt("return", fetch(joinUrlParams([edrBaseUrlWithCollection, instanceId])).then(handleResponse));
+          return _context3.abrupt("return", fetch(withJsonFormat(joinUrlParams([edrBaseUrlWithCollection, instanceId]))).then(handleResponse));
         case 2:
         case "end":
           return _context3.stop();
@@ -10527,12 +10594,6 @@ var fakeEdrLayerApiHandlers = [http.get('https://gw-edr.pub.knmi.cloud/edr/colle
   });
 })];
 
-var WEBMAP_REACT_NAMESPACE = 'webmapreact';
-var useWebmapReactTranslation = function useWebmapReactTranslation() {
-  var ns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : WEBMAP_REACT_NAMESPACE;
-  return useTranslation(ns);
-};
-
 var defaultCanvasWidth = 150;
 var defaultCanvasHeight = 30;
 /**
@@ -10565,7 +10626,8 @@ var renderLegendGraphic = function renderLegendGraphic(wmImage, ctx, width, heig
 };
 var Legend = function Legend(_ref) {
   var _layer$options;
-  var layer = _ref.layer;
+  var layer = _ref.layer,
+    onToggleLayerLegendVisibility = _ref.onToggleLayerLegendVisibility;
   /* Variable to remember the previous image */
   var previousLegendImage = useRef(null);
   /* Function to force rerender of this component when legend image loads */
@@ -10614,12 +10676,15 @@ var Legend = function Legend(_ref) {
   var wmLayer = webmapUtils.getWMLayerById(layer.id);
   var isEdrLayer = layer.layerType === LayerType.edrFeatureLayer;
   var title = isEdrLayer ? (_layer$options = layer.options) === null || _layer$options === void 0 ? void 0 : _layer$options.collectionId : wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title;
+  /* Custom legend toggle for layer */
+  var toggleLayerLegendVisibility = function toggleLayerLegendVisibility(showLegend) {
+    return onToggleLayerLegendVisibility(layerId, showLegend);
+  };
   return jsx(LegendLayout, {
-    dimensions: layer === null || layer === void 0 ? void 0 : layer.dimensions,
     height: canvasContainerHeight,
-    minWidth: defaultCanvasWidth,
-    name: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.name,
+    showLayerLegend: layer === null || layer === void 0 ? void 0 : layer.showLayerLegend,
     title: title,
+    toggleLayerLegendVisibility: toggleLayerLegendVisibility,
     width: canvasContainerWidth,
     children: jsx(CanvasComponent, {
       onRenderCanvas: function onRenderCanvas(ctx, width, height) {
@@ -10694,7 +10759,8 @@ var LegendDialog = function LegendDialog(_ref) {
     _ref$order = _ref.order,
     order = _ref$order === void 0 ? 0 : _ref$order,
     _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source;
+    source = _ref$source === void 0 ? 'app' : _ref$source,
+    onToggleLayerLegendVisibility = _ref.onToggleLayerLegendVisibility;
   var _useWebmapReactTransl = useWebmapReactTranslation(),
     t = _useWebmapReactTransl.t;
   var stopWheelEventPropagationRef = useWheelStopPropagation();
@@ -10723,13 +10789,18 @@ var LegendDialog = function LegendDialog(_ref) {
         sx: {
           display: 'flex',
           flexDirection: 'column',
+          padding: '0 16px',
           '&>div:last-child': {
             marginBottom: 0
+          },
+          '&>div:first-child': {
+            marginTop: '8px'
           }
         },
         children: layers.map(function (layer) {
           return jsx(Legend, {
-            layer: layer
+            layer: layer,
+            onToggleLayerLegendVisibility: onToggleLayerLegendVisibility
           }, layer.id);
         })
       }) : jsx(Typography, {
@@ -11292,19 +11363,36 @@ var LayerInfoText = function LayerInfoText(_ref) {
 
 var LayerInfoLegend = function LayerInfoLegend(_ref) {
   var title = _ref.title,
-    name = _ref.name,
-    dimensions = _ref.dimensions,
-    legendURL = _ref.legendURL;
+    legendURL = _ref.legendURL,
+    showLayerLegend = _ref.showLayerLegend,
+    onToggleLayerLegendVisibility = _ref.onToggleLayerLegendVisibility;
   var _useWebmapReactTransl = useWebmapReactTranslation(),
     t = _useWebmapReactTransl.t;
   return jsxs(Fragment, {
-    children: [jsx(Typography$1, {
-      sx: textStyleWithMargin,
-      variant: "subtitle2",
-      children: t('webmap-react-legend')
+    children: [jsxs(Box, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '100%'
+      },
+      children: [jsx(Typography$1, {
+        sx: textStyleWithMargin,
+        variant: "subtitle2",
+        children: t('webmap-react-legend')
+      }), jsx(FormGroup, {
+        children: jsx(FormControlLabel, {
+          control: jsx(Checkbox, {
+            checked: showLayerLegend,
+            onChange: function onChange() {
+              onToggleLayerLegendVisibility(!showLayerLegend);
+            }
+          }),
+          label: t('webmap-react-show-layer-legend'),
+          sx: textStyleWithMargin
+        })
+      })]
     }), jsx(LegendLayout, {
-      dimensions: dimensions,
-      name: name,
       title: title,
       children: legendURL ? jsx("img", {
         alt: title,
@@ -11468,7 +11556,9 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
       top: 150,
       left: 900
     } : _ref$startPosition,
-    selectedStyle = _ref.selectedStyle;
+    selectedStyle = _ref.selectedStyle,
+    showLayerLegend = _ref.showLayerLegend,
+    onToggleLayerLegendVisibility = _ref.onToggleLayerLegendVisibility;
   var styles = getLayerStyles(layer);
   var dimensions = getDimensionsList(layer.dimensions);
   var _useWebmapReactTransl = useWebmapReactTranslation(),
@@ -11476,7 +11566,7 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
   var bbox = getLayerBbox(t, layer);
   var legendURL = ((_layer$styles = layer.styles) === null || _layer$styles === void 0 || (_layer$styles = _layer$styles.find(function (styleItem) {
     return styleItem.name === selectedStyle;
-  })) === null || _layer$styles === void 0 ? void 0 : _layer$styles.legendURL) || ((_layer$styles2 = layer.styles) === null || _layer$styles2 === void 0 ? void 0 : _layer$styles2[0].legendURL) ||
+  })) === null || _layer$styles === void 0 ? void 0 : _layer$styles.legendURL) || ((_layer$styles2 = layer.styles) === null || _layer$styles2 === void 0 || (_layer$styles2 = _layer$styles2[0]) === null || _layer$styles2 === void 0 ? void 0 : _layer$styles2.legendURL) ||
   // show first style if none selected
   undefined;
   return jsx(ToolContainerDraggable, {
@@ -11526,9 +11616,9 @@ var LayerInfoDialog = function LayerInfoDialog(_ref) {
         label: t('webmap-react-keywords'),
         value: ((_layer$keywords = layer.keywords) === null || _layer$keywords === void 0 ? void 0 : _layer$keywords.join(', ')) || '-'
       }), jsx(LayerInfoLegend, {
-        dimensions: layer.dimensions,
         legendURL: legendURL,
-        name: layer.name,
+        onToggleLayerLegendVisibility: onToggleLayerLegendVisibility,
+        showLayerLegend: showLayerLegend,
         title: layer.title
       })]
     })
@@ -11660,7 +11750,7 @@ var MapMousePosition = function MapMousePosition() {
       sx: {
         zIndex: 10,
         justifySelf: 'center',
-        bottom: '36px',
+        bottom: '26px',
         left: '6px',
         position: 'absolute'
       },
@@ -19099,84 +19189,124 @@ var dateToManualFormatString = function dateToManualFormatString(inDate) {
   return "".concat(EEE, " ").concat(dd, " ").concat(MMM, " ").concat(HH, ":").concat(mm, " UTC");
 };
 
-/**
- * Format a date to a string
- *
- * Expects the following props:
- * @param {Date} inDate - date to be formatted
- *
- */
+var getButtonSizes = function getButtonSizes(fontSize) {
+  if (fontSize > 40) {
+    return {
+      buttonSize: 'large',
+      iconSize: 40
+    };
+  }
+  if (fontSize > 24) {
+    return {
+      buttonSize: 'medium',
+      iconSize: 32
+    };
+  }
+  return {
+    buttonSize: 'small',
+    iconSize: 24
+  };
+};
 var ClockContainer = function ClockContainer(_ref) {
-  var fontSize = _ref.fontSize,
-    onButtonClick = _ref.onButtonClick,
-    time = _ref.time;
+  var _ref$isOptionsMenuVis = _ref.isOptionsMenuVisible,
+    isOptionsMenuVisible = _ref$isOptionsMenuVis === void 0 ? false : _ref$isOptionsMenuVis,
+    fontSize = _ref.fontSize,
+    onToggleClock = _ref.onToggleClock,
+    time = _ref.time,
+    onToggleOptions = _ref.onToggleOptions,
+    optionsElement = _ref.optionsElement;
   var _useWebmapReactTransl = useWebmapReactTranslation(),
     t = _useWebmapReactTransl.t;
   var title = t('clock-hide');
+  var optionsTitle = t('clock-animation-options');
   var currentDateString = dateToManualFormatString(dateUtils.fromUnix(time));
-  return jsxs(Grid, {
-    container: true,
-    sx: {
-      justifyContent: 'space-evenly',
-      alignItems: 'center',
-      cursor: 'move',
-      height: '100%',
-      width: '100%',
-      backgroundColor: 'geowebColors.timeSlider.playerTimeMarkers.fill',
-      borderRadius: '5px'
-    },
-    wrap: "nowrap",
-    children: [jsx(Grid, {
+  var _getButtonSizes = getButtonSizes(fontSize),
+    buttonSize = _getButtonSizes.buttonSize,
+    iconSize = _getButtonSizes.iconSize;
+  return jsx(ThemeProvider, {
+    theme: darkTheme,
+    children: jsxs(Grid, {
+      container: true,
       sx: {
-        width: '4px'
-      }
-    }), jsx(CustomTooltip, {
-      title: title,
-      children: jsx(Grid, {
+        justifyContent: 'space-evenly',
+        alignItems: 'center',
+        cursor: 'move',
+        height: '100%',
+        width: '100%',
+        backgroundColor: 'geowebColors.timeSlider.playerTimeMarkers.fill',
+        borderRadius: '5px'
+      },
+      wrap: "nowrap",
+      children: [jsx(Grid, {
         sx: {
-          zIndex: 2
+          marginLeft: '12px',
+          marginRight: '12px'
         },
-        children: jsx(ThemeProvider, {
-          theme: darkTheme,
-          children: jsx(CustomIconButton, {
-            "aria-label": title,
-            onClick: onButtonClick,
-            variant: "boxed",
-            children: jsx(ChevronRight, {})
+        children: jsx(CustomIconButton, {
+          "aria-label": title,
+          onClick: onToggleClock,
+          size: buttonSize,
+          tooltipTitle: title,
+          variant: "boxed",
+          children: jsx(ChevronRight, {
+            sx: {
+              width: iconSize,
+              height: iconSize
+            }
           })
         })
-      })
-    }), jsx(Grid, {
-      children: jsx(Typography, {
+      }), jsx(Grid, {
+        children: jsx(Typography, {
+          sx: {
+            whiteSpace: 'nowrap',
+            fontSize: fontSize,
+            color: 'geowebColors.timeSlider.playerTimeText.color'
+          },
+          variant: "subtitle2",
+          children: currentDateString
+        })
+      }), jsx(Grid, {
         sx: {
-          whiteSpace: 'nowrap',
-          fontSize: fontSize,
-          color: '#fff'
+          marginLeft: '12px',
+          marginRight: '12px'
         },
-        variant: "subtitle2",
-        children: currentDateString
-      })
-    })]
+        children: jsx(CustomIconButton, {
+          "aria-label": optionsTitle,
+          isSelected: isOptionsMenuVisible,
+          onClick: onToggleOptions,
+          ref: optionsElement,
+          size: buttonSize,
+          tooltipTitle: optionsTitle,
+          variant: "boxed",
+          children: jsx(Options, {
+            sx: {
+              width: iconSize,
+              height: iconSize
+            }
+          })
+        })
+      })]
+    })
   });
 };
 
-var MIN_WIDTH = 170;
+var MIN_WIDTH = 240;
 var MIN_HEIGHT = 32;
 var MIN_FONT_SIZE = 14; // bigger font size will cause render delay in LCP
 var FONT_SIZE_WIDTH_RATIO = MIN_FONT_SIZE / MIN_WIDTH;
-var BUTTON_WIDTH = 40;
 var resizeHandlePlacement = {
   top: false,
   right: false,
   bottom: false,
   left: false,
-  topRight: false,
-  bottomRight: false,
+  topRight: true,
+  bottomRight: true,
   bottomLeft: true,
-  topLeft: false
+  topLeft: true
 };
 var Clock = function Clock(_ref2) {
-  var time = _ref2.time,
+  var optionsElement = _ref2.optionsElement,
+    time = _ref2.time,
     _ref2$isVisible = _ref2.isVisible,
     isClockVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
     onToggleClock = _ref2.onToggleClock,
@@ -19191,7 +19321,10 @@ var Clock = function Clock(_ref2) {
       width: MIN_WIDTH,
       height: MIN_HEIGHT
     } : _ref2$size,
-    onSetSize = _ref2.onSetSize;
+    onSetSize = _ref2.onSetSize,
+    onToggleOptions = _ref2.onToggleOptions,
+    _ref2$isOptionsMenuVi = _ref2.isOptionsMenuVisible,
+    isOptionsMenuVisible = _ref2$isOptionsMenuVi === void 0 ? false : _ref2$isOptionsMenuVi;
   var _useWebmapReactTransl = useWebmapReactTranslation(),
     t = _useWebmapReactTransl.t;
   var clockElement = useRef(null);
@@ -19215,6 +19348,9 @@ var Clock = function Clock(_ref2) {
   var setSize = function setSize(size) {
     onSetSize === null || onSetSize === void 0 || onSetSize(size);
   };
+  var toggleOptions = function toggleOptions() {
+    onToggleOptions === null || onToggleOptions === void 0 || onToggleOptions();
+  };
   return jsx(Fragment, {
     children: !isClockVisible ? jsx(CustomIconButton, {
       "aria-label": t('clock-show'),
@@ -19242,9 +19378,7 @@ var Clock = function Clock(_ref2) {
       },
       position: position,
       children: jsx("div", {
-        ref: function ref(_ref3) {
-          clockElement.current = _ref3;
-        },
+        ref: clockElement,
         style: {
           position: 'absolute',
           zIndex: 1001,
@@ -19253,17 +19387,9 @@ var Clock = function Clock(_ref2) {
         },
         children: jsx(Resizable, {
           enable: resizeHandlePlacement,
-          handleComponent: {
-            bottomLeft: jsx(Resize, {
-              isRightAligned: true,
-              style: {
-                fill: '#FFFFFF'
-              }
-            })
-          },
           lockAspectRatio: true,
           minHeight: MIN_HEIGHT,
-          minWidth: MIN_WIDTH + BUTTON_WIDTH,
+          minWidth: MIN_WIDTH,
           nodeRef: clockElement,
           onResize: function onResize(_event, _direction, _ref, delta) {
             var width = size.width + delta.width;
@@ -19287,9 +19413,12 @@ var Clock = function Clock(_ref2) {
           size: size,
           children: jsx(ClockContainer, {
             fontSize: fontSize,
-            onButtonClick: function onButtonClick() {
+            isOptionsMenuVisible: isOptionsMenuVisible,
+            onToggleClock: function onToggleClock() {
               toggleClock(false);
             },
+            onToggleOptions: toggleOptions,
+            optionsElement: optionsElement,
             time: time
           })
         })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "15.3.0",
+  "version": "16.0.0",
   "description": "GeoWeb react wrapper for webmap",
   "license": "Apache-2.0",
   "repository": {
@@ -8,9 +8,9 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/webmap": "15.3.0",
-    "@opengeoweb/theme": "15.3.0",
-    "@opengeoweb/shared": "15.3.0",
+    "@opengeoweb/webmap": "16.0.0",
+    "@opengeoweb/theme": "16.0.0",
+    "@opengeoweb/shared": "16.0.0",
     "lodash": "^4.17.21",
     "ol": "^10.4.0",
     "proj4": "^2.9.2",

package/src/lib/components/Clock/Clock.d.ts

@@ -1,5 +1,5 @@
-import type { FC } from 'react';
-export declare const MIN_WIDTH = 170;
+import type { FC, Ref } from 'react';
+export declare const MIN_WIDTH = 240;
 export declare const MIN_HEIGHT = 32;
 export interface Position {
     x: number;
@@ -10,6 +10,7 @@ export interface Size {
     height: number;
 }
 export declare const Clock: FC<{
+    optionsElement: Ref<HTMLButtonElement>;
     time: number;
     isVisible?: boolean;
     onToggleClock?: (isVisible: boolean) => void;
@@ -17,4 +18,6 @@ export declare const Clock: FC<{
     onSetPosition: (position: Position) => void;
     size?: Size | undefined;
     onSetSize: (size: Size) => void;
+    onToggleOptions?: () => void;
+    isOptionsMenuVisible?: boolean;
 }>;

package/src/lib/components/Clock/ClockContainer.d.ts

@@ -1,13 +1,9 @@
-import type { FC } from 'react';
-/**
- * Format a date to a string
- *
- * Expects the following props:
- * @param {Date} inDate - date to be formatted
- *
- */
+import type { FC, Ref } from 'react';
 export declare const ClockContainer: FC<{
-    onButtonClick: () => void;
+    isOptionsMenuVisible?: boolean;
+    onToggleClock: () => void;
+    onToggleOptions: () => void;
+    optionsElement: Ref<HTMLButtonElement>;
     fontSize: number;
     time: number;
 }>;

package/src/lib/components/LayerInfo/LayerInfoDialog.d.ts

@@ -12,5 +12,7 @@ export interface LayerInfoDialogProps {
     dialogHeight?: number;
     startPosition?: Position;
     selectedStyle?: string;
+    showLayerLegend: boolean;
+    onToggleLayerLegendVisibility: (showLegend: boolean) => void;
 }
 export declare const LayerInfoDialog: React.FC<LayerInfoDialogProps>;

package/src/lib/components/LayerInfo/LayerInfoLegend.d.ts

@@ -1,8 +1,7 @@
-import type { Dimension } from '@opengeoweb/webmap';
 export interface LayerInfoLegendProps {
     title: string;
-    name: string;
-    dimensions: Dimension[];
     legendURL?: string;
+    showLayerLegend: boolean;
+    onToggleLayerLegendVisibility: (showLegend: boolean) => void;
 }
 export declare const LayerInfoLegend: React.FC<LayerInfoLegendProps>;

package/src/lib/components/Legend/Legend.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { LayerFoundation } from '@opengeoweb/webmap';
 interface LegendProps {
     layer: LayerFoundation;
+    onToggleLayerLegendVisibility: (layerId: string, showLegend: boolean) => void;
 }
 export declare const Legend: React.FC<LegendProps>;
 export {};

package/src/lib/components/Legend/LegendDialog.d.ts

@@ -10,6 +10,7 @@ interface LegendDialogProps {
     showMapId?: boolean;
     order?: number;
     source?: Source;
+    onToggleLayerLegendVisibility: (layerId: string, showLegend: boolean) => void;
 }
 export declare const LegendDialog: React.FC<LegendDialogProps>;
 export {};

package/src/lib/components/Legend/LegendLayout.d.ts

@@ -1,12 +1,10 @@
-import type { Dimension } from '@opengeoweb/webmap';
 interface LegendLayoutProps {
     title: string;
-    name: string;
-    dimensions: Dimension[];
     children: React.ReactNode;
     height?: number;
     width?: number;
-    minWidth?: number;
+    showLayerLegend?: boolean;
+    toggleLayerLegendVisibility?: (showLegend: boolean) => void;
 }
 export declare const LegendLayout: React.FC<LegendLayoutProps>;
 export {};