@opengeoweb/webmap-react 9.16.0 → 9.18.0

package/index.esm.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { legendImageStore, WMImageEventType, webmapUtils, getLegendGraphicURLForLayer, LayerType, getWMJSMapById, debugLogger, DebugType, WMLayer, registerWMLayer, WMBBOX, getWMLayerById, WMJSMap, tilesettings } from '@opengeoweb/webmap';
-import { CustomTooltip, CanvasComponent, ToolContainerDraggable, dateUtils, CustomIconButton } from '@opengeoweb/shared';
-import { useTranslation } from 'react-i18next';
-import 'i18next';
+import { CustomTooltip, CanvasComponent, ToolContainerDraggable, CustomIconButton, dateUtils } from '@opengeoweb/shared';
+import i18n from 'i18next';
+import { initReactI18next, useTranslation } from 'react-i18next';
 import { Paper, Box, Typography, Grid, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$1, FormLabel, Switch, styled, Slider } from '@mui/material';
+import { Home, Add, Minus, List, Delete, Edit, DrawRegion, DrawPolygon, Location, DrawFIRLand, ArrowUp, Equalizer, DimensionsElevation, Link, LinkOff, Info, DimensionsOther, DimensionsRefTime, DimensionsTime } from '@opengeoweb/theme';
 import _, { cloneDeep } from 'lodash';
 import proj4 from 'proj4';
 import * as turf from '@turf/turf';
 import { polygonToLineString, booleanClockwise, rewind } from '@turf/turf';
-import { Delete, Edit, DrawRegion, DrawPolygon, Location, DrawFIRLand, ArrowUp, Home, Add, Minus, Equalizer, DimensionsElevation, Link, LinkOff, Info, DimensionsOther, DimensionsRefTime, DimensionsTime } from '@opengeoweb/theme';
 import { produce } from 'immer';
 import { debounce } from 'throttle-debounce';
 import { useResizeDetector } from 'react-resize-detector';
@@ -24,19 +24,6 @@ var en = {
 	"webmap-react-expires": "Expires:",
 	"webmap-react-sender": "Sender:",
 	"webmap-react-identifier": "Identifier:",
-	"webmap-react-h5": "Query features along buffered line using WFS and CQL",
-	"webmap-react-wfs": "WFS JSON URL:",
-	"webmap-react-cql": "CQL expression:",
-	"webmap-react-delete": "Delete",
-	"webmap-react-feature-type": "Feature type",
-	"webmap-react-feature-number": "Feature number",
-	"webmap-react-intersection-shapes": "Intersection shapes",
-	"webmap-react-features": "Features",
-	"webmap-react-url": "URL:",
-	"webmap-react-get-feature-info-result": "GetFeatureInfo result:",
-	"webmap-react-view": "View",
-	"webmap-react-edit": "Edit",
-	"webmap-react-esc": "press ESC to exit draw mode",
 	"webmap-react-no-layers": "No layers",
 	"webmap-react-legend": "Legend",
 	"webmap-react-title": "Title",
@@ -52,7 +39,7 @@ var en = {
 	"webmap-react-zoom-in": "Zoom in",
 	"webmap-react-zoom-out": "Zoom out",
 	"webmap-react-show": "Show",
-	"webmap-react-click-diconnect": "Click to disconnect layer",
+	"webmap-react-click-disconnect": "Click to disconnect layer",
 	"webmap-react-click-connect": "Click to connect layer",
 	"webmap-react-layer-info": "Layer Info"
 };
@@ -63,17 +50,6 @@ var fi = {
 	"webmap-react-expires": "ei käännetty",
 	"webmap-react-sender": "ei käännetty",
 	"webmap-react-identifier": "ei käännetty",
-	"webmap-react-h5": "ei käännetty",
-	"webmap-react-wfs": "ei käännetty",
-	"webmap-react-cql": "ei käännetty",
-	"webmap-react-delete": "ei käännetty",
-	"webmap-react-feature-type": "ei käännetty",
-	"webmap-react-feature-number": "ei käännetty",
-	"webmap-react-intersection-shapes": "ei käännetty",
-	"webmap-react-get-feature-info-result": "ei käännetty",
-	"webmap-react-view": "ei käännetty",
-	"webmap-react-edit": "ei käännetty",
-	"webmap-react-esc": "ei käännetty",
 	"webmap-react-no-layers": "ei käännetty",
 	"webmap-react-legend": "ei käännetty",
 	"webmap-react-title": "ei käännetty",
@@ -89,83 +65,61 @@ var fi = {
 	"webmap-react-zoom-in": "ei käännetty",
 	"webmap-react-zoom-out": "ei käännetty",
 	"webmap-react-show": "ei käännetty",
-	"webmap-react-click-diconnect": "ei käännetty",
+	"webmap-react-click-disconnect": "ei käännetty",
 	"webmap-react-click-connect": "ei käännetty",
 	"webmap-react-layer-info": "ei käännetty"
 };
 var no = {
-	"webmap-react-event": "event:",
+	"webmap-react-event": "hendelse:",
 	"webmap-react-sent": "Sendt:",
 	"webmap-react-utc": "UTC",
 	"webmap-react-expires": "Utgår:",
 	"webmap-react-sender": "Avsender:",
-	"webmap-react-identifier": "ikke oversatt",
-	"webmap-react-h5": "ikke oversatt",
-	"webmap-react-wfs": "ikke oversatt",
-	"webmap-react-cql": "ikke oversatt",
-	"webmap-react-delete": "Slett",
-	"webmap-react-feature-type": "Feature type",
-	"webmap-react-feature-number": "Feature nummer",
-	"webmap-react-intersection-shapes": "ikke oversatt",
-	"webmap-react-get-feature-info-result": "GetFeatureInfo resultat:",
-	"webmap-react-view": "View",
-	"webmap-react-edit": "Endre",
-	"webmap-react-esc": "trykk ESC for å avslutte tegnemodus",
+	"webmap-react-identifier": "Identifikator:",
 	"webmap-react-no-layers": "Ingen lag",
 	"webmap-react-legend": "Legende",
 	"webmap-react-title": "Tittel",
 	"webmap-react-name": "Navn",
 	"webmap-react-service": "Service",
-	"webmap-react-abstract": "Abstract",
+	"webmap-react-abstract": "Abstrakt",
 	"webmap-react-dimensions": "Dimensjoner",
-	"webmap-react-styles": "Styles",
-	"webmap-react-bounding-box": "Bounding Box",
+	"webmap-react-styles": "Stiler",
+	"webmap-react-bounding-box": "Avgrensningsboks",
 	"webmap-react-groups": "Grupper",
 	"webmap-react-keywords": "Stikkord",
-	"webmap-react-zoom-reset": "Reset zoom",
+	"webmap-react-zoom-reset": "Tilbakestill zoom",
 	"webmap-react-zoom-in": "Zoom inn",
 	"webmap-react-zoom-out": "Zoom ut",
 	"webmap-react-show": "Vis",
-	"webmap-react-click-diconnect": "Trykk for å avkoble lag",
+	"webmap-react-click-disconnect": "Trykk for å avkoble lag",
 	"webmap-react-click-connect": "Trykk for å koble lag",
 	"webmap-react-layer-info": "Laginformasjon"
 };
 var nl = {
-	"webmap-react-event": "niet vertaald",
-	"webmap-react-sent": "niet vertaald",
-	"webmap-react-utc": "niet vertaald",
-	"webmap-react-expires": "niet vertaald",
-	"webmap-react-sender": "niet vertaald",
-	"workspce-search": "niet vertaald",
-	"webmap-react-h5": "niet vertaald",
-	"webmap-react-wfs": "niet vertaald",
-	"webmap-react-cql": "niet vertaald",
-	"webmap-react-delete": "niet vertaald",
-	"webmap-react-feature-type": "niet vertaald",
-	"webmap-react-feature-number": "niet vertaald",
-	"webmap-react-intersection-shapes": "niet vertaald",
-	"webmap-react-get-feature-info-result": "niet vertaald",
-	"webmap-react-view": "niet vertaald",
-	"webmap-react-edit": "niet vertaald",
-	"webmap-react-esc": "niet vertaald",
-	"webmap-react-no-layers": "niet vertaald",
-	"webmap-react-legend": "niet vertaald",
-	"webmap-react-title": "niet vertaald",
-	"webmap-react-name": "niet vertaald",
-	"webmap-react-service": "niet vertaald",
-	"webmap-react-abstract": "niet vertaald",
-	"webmap-react-dimensions": "niet vertaald",
-	"webmap-react-styles": "niet vertaald",
-	"webmap-react-bounding-box": "niet vertaald",
-	"webmap-react-groups": "niet vertaald",
-	"webmap-react-keywords": "niet vertaald",
-	"webmap-react-zoom-reset": "niet vertaald",
-	"webmap-react-zoom-in": "niet vertaald",
-	"webmap-react-zoom-out": "niet vertaald",
-	"webmap-react-show": "niet vertaald",
-	"webmap-react-click-diconnect": "niet vertaald",
-	"webmap-react-click-connect": "niet vertaald",
-	"webmap-react-layer-info": "niet vertaald"
+	"webmap-react-event": "event:",
+	"webmap-react-sent": "Verzonden:",
+	"webmap-react-utc": "UTC",
+	"webmap-react-expires": "Verloopt:",
+	"webmap-react-sender": "Afzender:",
+	"webmap-react-identifier": "Id:",
+	"webmap-react-no-layers": "Geen lagen",
+	"webmap-react-legend": "Legenda",
+	"webmap-react-title": "Titel",
+	"webmap-react-name": "Naam",
+	"webmap-react-service": "Service",
+	"webmap-react-abstract": "Abstract",
+	"webmap-react-dimensions": "Dimensies",
+	"webmap-react-styles": "Stijlen",
+	"webmap-react-bounding-box": "Begrenzend kader",
+	"webmap-react-groups": "Groepen",
+	"webmap-react-keywords": "Trefwoorden",
+	"webmap-react-zoom-reset": "Reset zoom",
+	"webmap-react-zoom-in": "Zoom in",
+	"webmap-react-zoom-out": "Zoom uit",
+	"webmap-react-show": "Open",
+	"webmap-react-click-disconnect": "Klik om laag los te koppelen",
+	"webmap-react-click-connect": "Klik om laag te koppelen",
+	"webmap-react-layer-info": "Laag Informatie"
 };
 var webmapReactTranslations = {
 	en: en,
@@ -1721,24 +1675,6 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-/* *
- * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * */
-const WEBMAP_REACT_NAMESPACE = 'webmapreact';
-
 var DESCRIPTORS$4 = descriptors;
 var uncurryThis$f = functionUncurryThis;
 var call$d = functionCall;
@@ -1806,6 +1742,30 @@ $$h({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }
   assign: assign
 });
 
+const WEBMAP_REACT_NAMESPACE = 'webmapreact';
+i18n.use(initReactI18next).init({
+  lng: 'en',
+  ns: WEBMAP_REACT_NAMESPACE,
+  interpolation: {
+    escapeValue: false
+  },
+  resources: {
+    en: {
+      [WEBMAP_REACT_NAMESPACE]: webmapReactTranslations.en
+    },
+    fi: {
+      [WEBMAP_REACT_NAMESPACE]: webmapReactTranslations.fi
+    },
+    no: {
+      [WEBMAP_REACT_NAMESPACE]: webmapReactTranslations.no
+    },
+    nl: {
+      [WEBMAP_REACT_NAMESPACE]: webmapReactTranslations.nl
+    }
+  }
+});
+const useWebmapReactTranslation = () => useTranslation(WEBMAP_REACT_NAMESPACE);
+
 const LegendLayout = ({
   title,
   name,
@@ -1911,7 +1871,7 @@ const Legend = ({
   let imageHeight;
   const {
     t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
+  } = useWebmapReactTranslation();
   const legendPrefix = t('webmap-react-legend');
   /* Register callback to legendImagestore to trigger rerender when image is loaded. */
   useEffect(() => {
@@ -2020,7 +1980,7 @@ const LegendDialog = ({
 }) => {
   const {
     t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
+  } = useWebmapReactTranslation();
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     startPosition: {
       right: 20,
@@ -2062,6 +2022,166 @@ const LegendDialog = ({
   }, t('webmap-react-no-layers')))));
 };
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const MapControlButton = _a => {
+  var {
+      onClick,
+      children,
+      title,
+      placement = 'right',
+      isActive = false
+    } = _a,
+    props = __rest(_a, ["onClick", "children", "title", "placement", "isActive"]);
+  return /*#__PURE__*/React.createElement(CustomIconButton, Object.assign({
+    variant: "tool",
+    tooltipProps: {
+      placement,
+      title
+    },
+    onClick: onClick,
+    isSelected: isActive
+  }, props), 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * */
+const ZoomControls = ({
+  onZoomIn,
+  onZoomOut,
+  onZoomReset
+}) => {
+  const {
+    t
+  } = useWebmapReactTranslation();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MapControlButton, {
+    title: t('webmap-react-zoom-reset'),
+    "data-testid": "zoom-reset",
+    onClick: onZoomReset
+  }, /*#__PURE__*/React.createElement(Home, null)), /*#__PURE__*/React.createElement(MapControlButton, {
+    title: t('webmap-react-zoom-in'),
+    "data-testid": "zoom-in",
+    onClick: onZoomIn
+  }, /*#__PURE__*/React.createElement(Add, null)), /*#__PURE__*/React.createElement(MapControlButton, {
+    title: t('webmap-react-zoom-out'),
+    "data-testid": "zoom-out",
+    onClick: onZoomOut
+  }, /*#__PURE__*/React.createElement(Minus, null)));
+};
+
+const MapControls = _a => {
+  var {
+      children
+    } = _a,
+    props = __rest(_a, ["children"]);
+  return /*#__PURE__*/React.createElement(Box, Object.assign({
+    sx: {
+      position: 'absolute',
+      overflow: 'visible',
+      display: 'block',
+      left: 0,
+      margin: 1,
+      zIndex: 50,
+      top: '96px',
+      userSelect: 'none'
+    }
+  }, props), /*#__PURE__*/React.createElement(Grid, {
+    sx: {
+      '& > button': {
+        marginBottom: 1
+      }
+    },
+    container: true,
+    direction: "column"
+  }, 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * */
+const LegendButton = ({
+  openLegendDialog,
+  isOpen
+}) => {
+  const {
+    t
+  } = useWebmapReactTranslation();
+  const onClickButton = () => openLegendDialog();
+  return /*#__PURE__*/React.createElement(MapControlButton, {
+    title: t('webmap-react-legend'),
+    "data-testid": "open-Legend",
+    onClick: onClickButton,
+    isActive: isOpen
+  }, /*#__PURE__*/React.createElement(List, null));
+};
+
 var wellKnownSymbol$a = wellKnownSymbol$h;
 
 var TO_STRING_TAG$1 = wellKnownSymbol$a('toStringTag');
@@ -4866,9 +4986,6 @@ const FeatureLayers = ({
   activeFeatureLayerIndex,
   getToolIcon
 }) => {
-  const {
-    t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
   const featureLayerList = geojson ? Array.from(Array(geojson.features.length).keys()).map(index => {
     var _a;
     return {
@@ -4888,7 +5005,7 @@ const FeatureLayers = ({
     }
   }, /*#__PURE__*/React__default.createElement(InputLabel, {
     id: "demo-feature-number"
-  }, t('webmap-react-features')), /*#__PURE__*/React__default.createElement(Select, {
+  }, "Features"), /*#__PURE__*/React__default.createElement(Select, {
     labelId: "demo-feature-type",
     value: (featureLayerList.length ? activeFeatureLayerIndex : '').toString(),
     onChange: event => {
@@ -4933,19 +5050,16 @@ const EditModeButton = ({
   drawMode,
   onToggleEditMode
 }) => {
-  const {
-    t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12
   }, /*#__PURE__*/React__default.createElement(CustomTooltip, {
     title: "Switch mode"
-  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(FormLabel, null, t('webmap-react-view')), /*#__PURE__*/React__default.createElement(Switch, {
+  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(FormLabel, null, "View"), /*#__PURE__*/React__default.createElement(Switch, {
     "data-testid": "switchMode",
     checked: isInEditMode,
     onClick: () => onToggleEditMode(!isInEditMode)
-  }), /*#__PURE__*/React__default.createElement(FormLabel, null, t('webmap-react-edit')), drawMode && ( /*#__PURE__*/React__default.createElement(Typography, {
+  }), /*#__PURE__*/React__default.createElement(FormLabel, null, "Edit"), drawMode && ( /*#__PURE__*/React__default.createElement(Typography, {
     component: "span",
     sx: {
       display: 'inline-block',
@@ -4954,7 +5068,7 @@ const EditModeButton = ({
       position: 'relative',
       fontSize: 14
     }
-  }, t('webmap-react-esc'))))));
+  }, "press ESC to exit draw mode")))));
 };
 
 /* *
@@ -5460,9 +5574,6 @@ const IntersectionSelect = ({
   isDisabled: _isDisabled = false
 }) => {
   const [activeIntersection, setActiveIntersection] = React__default.useState(0);
-  const {
-    t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     sm: 12
@@ -5473,7 +5584,7 @@ const IntersectionSelect = ({
     }
   }, /*#__PURE__*/React__default.createElement(InputLabel, {
     id: "demo-intersection"
-  }, t('webmap-react-intersection-shapes')), /*#__PURE__*/React__default.createElement(Select, {
+  }, "Intersection shapes"), /*#__PURE__*/React__default.createElement(Select, {
     labelId: "demo-intersection",
     value: activeIntersection.toString(),
     onChange: event => {
@@ -6558,48 +6669,6 @@ const ReactMapViewLayer = props => {
   }, /*#__PURE__*/React.createElement("div", null, id));
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 var defineProperty$1 = objectDefineProperty.f;
 
 var proxyAccessor$1 = function (Target, Source, key) {
@@ -8927,92 +8996,6 @@ ReactMapView.defaultProps = {
   }
 };
 
-const MapControlButton = _a => {
-  var {
-      onClick,
-      children,
-      title,
-      placement = 'right',
-      isActive = false
-    } = _a,
-    props = __rest(_a, ["onClick", "children", "title", "placement", "isActive"]);
-  return /*#__PURE__*/React.createElement(CustomIconButton, Object.assign({
-    variant: "tool",
-    tooltipProps: {
-      placement,
-      title
-    },
-    onClick: onClick,
-    isSelected: isActive
-  }, props), 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2020 - Finnish Meteorological Institute (FMI)
- * */
-const ZoomControls = ({
-  onZoomIn,
-  onZoomOut,
-  onZoomReset
-}) => {
-  const {
-    t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MapControlButton, {
-    title: t('webmap-react-zoom-reset'),
-    "data-testid": "zoom-reset",
-    onClick: onZoomReset
-  }, /*#__PURE__*/React.createElement(Home, null)), /*#__PURE__*/React.createElement(MapControlButton, {
-    title: t('webmap-react-zoom-in'),
-    "data-testid": "zoom-in",
-    onClick: onZoomIn
-  }, /*#__PURE__*/React.createElement(Add, null)), /*#__PURE__*/React.createElement(MapControlButton, {
-    title: t('webmap-react-zoom-out'),
-    "data-testid": "zoom-out",
-    onClick: onZoomOut
-  }, /*#__PURE__*/React.createElement(Minus, null)));
-};
-
-const MapControls = _a => {
-  var {
-      children
-    } = _a,
-    props = __rest(_a, ["children"]);
-  return /*#__PURE__*/React.createElement(Box, Object.assign({
-    sx: {
-      position: 'absolute',
-      overflow: 'visible',
-      display: 'block',
-      left: 0,
-      margin: 1,
-      zIndex: 50,
-      top: '96px',
-      userSelect: 'none'
-    }
-  }, props), /*#__PURE__*/React.createElement(Grid, {
-    sx: {
-      '& > button': {
-        marginBottom: 1
-      }
-    },
-    container: true,
-    direction: "column"
-  }, children));
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -9418,7 +9401,7 @@ const MapWarningProperties = ({
   const newWidth = parentSize ? parentSize - 100 : 350;
   const {
     t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
+  } = useWebmapReactTranslation();
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'fixed',
@@ -9445,9 +9428,9 @@ const MapWarningProperties = ({
     "data-testid": "map-warning-properties-row"
   }, t('webmap-react-event'), ' ', selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].event)), selectedFeatureProperties.onset && ( /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, t('webmap-react-sent'), ' ', dateUtils.dateToString(dateUtils.utc(selectedFeatureProperties.onset), 'dd MMM yyyy, HH:mm'), ' ', t('webmap-react-utc'))), selectedFeatureProperties.expires && ( /*#__PURE__*/React__default.createElement("pre", {
+  }, t('webmap-react-sent'), ' ', dateUtils.dateToString(dateUtils.utc(selectedFeatureProperties.onset), dateUtils.DATE_FORMAT_NAME_OF_MONTH), ' ', t('webmap-react-utc'))), selectedFeatureProperties.expires && ( /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
-  }, t('webmap-react-expires'), ' ', dateUtils.dateToString(dateUtils.utc(selectedFeatureProperties.expires), 'dd MMM yyyy, HH:mm'), ' ', t('webmap-react-utc'))), selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].senderName && ( /*#__PURE__*/React__default.createElement("pre", {
+  }, t('webmap-react-expires'), ' ', dateUtils.dateToString(dateUtils.utc(selectedFeatureProperties.expires), dateUtils.DATE_FORMAT_NAME_OF_MONTH), ' ', t('webmap-react-utc'))), selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].senderName && ( /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
   }, t('webmap-react-sender'), ' ', selectedFeatureProperties.languages && selectedFeatureProperties.languages[language].senderName)), selectedFeatureProperties.identifier && ( /*#__PURE__*/React__default.createElement("pre", {
     "data-testid": "map-warning-properties-row"
@@ -9526,7 +9509,7 @@ const DimensionSelectButton = ({
 }) => {
   const {
     t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
+  } = useWebmapReactTranslation();
   const showPrefix = t('webmap-react-show');
   const dimConfig = dimensionConfig.find(cnf => cnf.name === dimension);
   const Icon = getDimensionIcon$1(dimConfig && dimConfig.iconType || 'IconLevels');
@@ -9717,7 +9700,7 @@ const MapDimensionSelect = ({
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const {
     t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
+  } = useWebmapReactTranslation();
   const tooltipTitle = isLayerDimensionSynced ? t('webmap-react-click-disconnect') : t('webmap-react-click-connect');
   return /*#__PURE__*/React.createElement(Grid, {
     key: layerId,
@@ -9850,7 +9833,7 @@ const LayerInfoLegend = ({
 }) => {
   const {
     t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
+  } = useWebmapReactTranslation();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography$1, {
     variant: "subtitle2",
     sx: textStyleWithMargin
@@ -10403,7 +10386,7 @@ const LayerInfoDialog = ({
   const dimensions = getDimensionsList(layer.dimensions);
   const {
     t
-  } = useTranslation(WEBMAP_REACT_NAMESPACE);
+  } = useWebmapReactTranslation();
   return /*#__PURE__*/React__default.createElement(ToolContainerDraggable, {
     onClose: onClose,
     startSize: {
@@ -10442,9 +10425,7 @@ const LayerInfoDialog = ({
     label: t('webmap-react-styles'),
     value: styles
   }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
-    label: t('webmap-react-bounding-box', {
-      ns: WEBMAP_REACT_NAMESPACE
-    }),
+    label: t('webmap-react-bounding-box'),
     value: bbox
   }), /*#__PURE__*/React__default.createElement(LayerInfoText, {
     label: t('webmap-react-groups'),
@@ -11020,4 +11001,4 @@ var publicLayers = /*#__PURE__*/Object.freeze({
   msgNaturalEUMETSAT: msgNaturalEUMETSAT
 });
 
-export { DRAWMODE, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EDITMODE, EditModeButton as EditModeButtonField, FeatureLayers, GeoJSONTextField, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendDialog, LegendLayout, MINUTE_TO_MILLISECOND, MapControlButton, MapControls, MapDimensionSelect, MapDrawContainer, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, ReactMapView, ReactMapViewLayer, SelectField, StoryLayoutGrid, WEBMAP_REACT_NAMESPACE, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, addWMLayerPropsBasedOnChildProps, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, checkHoverFeatures, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, distance, drawPolyStoryStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, firSelectionType, formatTime, getCurrentDimensionValue, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getFeatureExtent, getFeatureLayers, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getTimeDimension, getToolIcon, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isAGeoJSONLayer, isAMapLayer, isGeoJSONFeatureCreatedByTool, isPointFeatureCollection, lineString, makeLayerPropListFromChildren, marksByDimension, moveFeature, opacityOptions, orderLayers, parseWMJSLayer, publicLayers, publicServices, registerDrawFunction, removeWMLayerFromMap, rewindGeometry, setWMLayerPropsBasedOnChildProps, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useGeoJSON, useMapDrawTool, webmapReactTranslations };
+export { DRAWMODE, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EDITMODE, EditModeButton as EditModeButtonField, FeatureLayers, GeoJSONTextField, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MINUTE_TO_MILLISECOND, MapControlButton, MapControls, MapDimensionSelect, MapDrawContainer, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, ReactMapView, ReactMapViewLayer, SelectField, StoryLayoutGrid, WEBMAP_REACT_NAMESPACE, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, addWMLayerPropsBasedOnChildProps, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, checkHoverFeatures, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, distance, drawPolyStoryStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, firSelectionType, formatTime, getCurrentDimensionValue, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getFeatureExtent, getFeatureLayers, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getTimeDimension, getToolIcon, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isAGeoJSONLayer, isAMapLayer, isGeoJSONFeatureCreatedByTool, isPointFeatureCollection, lineString, makeLayerPropListFromChildren, marksByDimension, moveFeature, opacityOptions, orderLayers, parseWMJSLayer, publicLayers, publicServices, registerDrawFunction, removeWMLayerFromMap, rewindGeometry, setWMLayerPropsBasedOnChildProps, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useGeoJSON, useMapDrawTool, webmapReactTranslations };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "9.16.0",
+  "version": "9.18.0",
   "description": "GeoWeb react wrapper for webmap",
   "license": "Apache-2.0",
   "repository": {

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

@@ -5,7 +5,7 @@ declare const _default: {
 export default _default;
 export declare const LayerInfoDialogLight: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;
@@ -15,7 +15,7 @@ export declare const LayerInfoDialogLight: {
 };
 export declare const LayerInfoDialogDark: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export declare const LegendButton: React.FC<{
+    openLegendDialog: () => void;
+    isOpen: boolean;
+}>;

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

@@ -1,3 +1,4 @@
 export * from './Legend';
 export * from './LegendLayout';
 export * from './LegendDialog';
+export * from './LegendButton';

package/src/lib/components/MapDimensionSelect/DimensionSelectDialog.stories.d.ts

@@ -5,25 +5,25 @@ declare const _default: {
 export default _default;
 export declare const DimensionSelectElevationLight: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const DimensionSelectElevationDark: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const DimensionSelectEnsembleMemberLight: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const DimensionSelectEnsembleMemberDark: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const DimensionSelectInvalidSyncLight: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };
 export declare const DimensionSelectInvalidSyncDark: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
 };

package/src/lib/utils/i18n.d.ts

@@ -1,2 +1,6 @@
+import i18n from 'i18next';
+import { UseTranslationResponse } from 'react-i18next';
 export declare const WEBMAP_REACT_NAMESPACE = "webmapreact";
-export declare const initWebmapReactTestI18n: () => void;
+export declare const translateKeyOutsideComponents: (key: string, params?: Record<string, string | number> | undefined) => string;
+export declare const useWebmapReactTranslation: () => UseTranslationResponse<typeof WEBMAP_REACT_NAMESPACE, typeof i18n>;
+export { i18n };