@opengeoweb/time-series 19.3.0 → 19.4.0

package/dist/index.esm.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useCallback, useMemo, useState, useEffect, memo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { CustomIconButton, dateUtils, TooltipSelect, referenceTimeUtils, CustomAccordion, CustomTooltip, CustomToggleButton, ToolContainerDraggable, ToggleMenu, CustomDialog, SearchField, SearchHighlight, AlertBanner, useConfirmationDialog, SwitchButton, useResizeObserver } from '@opengeoweb/shared';
+import { CustomIconButton, dateUtils, TooltipSelect, referenceTimeUtils, CustomAccordion, CustomTooltip, CustomToggleButton, ToolContainerDraggable, ToggleMenu, CustomDialog, SearchField, SearchHighlight, AlertBanner, useConfirmationDialog, SwitchButton, LegendToggleButton, useResizeObserver } from '@opengeoweb/shared';
 import { snackbarActions, snackbarTypes, snackbarListener, snackbarReducer } from '@opengeoweb/snackbar';
 import { mapUtils, selectorMemoizationOptions, genericSelectors, uiSelectors, uiTypes, uiActions, useSetupDialog, mapSelectors, mapListener, serviceListener, layersListener, syncGroupsListener, genericListener, openlayersListener, uiReducer, syncGroupsReducer, layerReducer, serviceReducer, mapReducer, loadingIndicatorActions, useRegisterFeatureSyncSource, useUpdateFeatureSyncLayers, useSyncgroupTimeState, mapActions, layerActions } from '@opengeoweb/store';
 import { useTheme, MenuItem, LinearProgress, Grid, Box, Typography, ClickAwayListener, Input, Collapse, Button, List, ListItem, ListItemText, InputAdornment, ListItemButton, styled, Card, Stack, Tooltip, ListItemIcon, Checkbox } from '@mui/material';
 import { isString, trim, trimStart, compact, chain, groupBy, countBy, sortBy, uniqBy, isEqual } from 'lodash';
 import { ReactSortable } from 'react-sortablejs';
-import { Info, ArrowDropDownDown, Copy, Delete, Visibility, VisibilityOff, TimeSeriesSelect as TimeSeriesSelect$1, DragHandle, ChevronUp, ChevronDown, Add, DimensionsTime, DrawRegion, Cached, Edit, Location, useThemeContext, EChartsDarkTheme, EChartsLightTheme, Layers, LockLocked, LockUnlocked, Menu } from '@opengeoweb/theme';
+import { Info, ArrowDropDownDown, Copy, Delete, Visibility, VisibilityOff, TimeSeriesSelect as TimeSeriesSelect$1, DragHandle, ChevronUp, ChevronDown, Add, DimensionsTime, DrawRegion, Cached, Edit, Location, useThemeContext, EChartsDarkTheme, EChartsLightTheme, Layers, LockLocked, LockUnlocked } from '@opengeoweb/theme';
 import i18n from 'i18next';
 import { useTranslation } from 'react-i18next';
 import '@opengeoweb/core';
@@ -6799,6 +6799,27 @@ var createMockStore = function createMockStore(mockState) {
   });
 };
 
+/* *
+ * 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 2026 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2026 - Finnish Meteorological Institute (FMI)
+ * Copyright 2026 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var TIME_SERIES_CONTAINER_BREAKPOINT_PX = '720px';
+var TIME_SERIES_CONTAINER_NAME = 'time-series-container';
+
+var _styled;
 var _excluded$1 = ["icon", "shortText", "longText"];
 var TimeSeriesTopRowButtonUnstyled = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var icon = _ref.icon,
@@ -6817,30 +6838,27 @@ var TimeSeriesTopRowButtonUnstyled = /*#__PURE__*/React.forwardRef(function (_re
     })]
   }));
 });
-var TimeSeriesTopRowButton = styled(TimeSeriesTopRowButtonUnstyled)({
-  height: '10px !important',
-  '@container time-series-container (width < 720px)': {
-    maxWidth: '90px',
-    '& .longText': {
-      display: 'none'
-    },
-    '& svg': {
-      marginRight: '0 !important'
-    }
-  },
-  '@container time-series-container (width >= 720px)': {
-    width: '130px',
-    '& .shortText': {
-      display: 'none'
-    }
+var TimeSeriesTopRowButton = styled(TimeSeriesTopRowButtonUnstyled)((_styled = {
+  height: '10px !important'
+}, _styled["@container " + TIME_SERIES_CONTAINER_NAME + " (width < " + TIME_SERIES_CONTAINER_BREAKPOINT_PX + ")"] = {
+  maxWidth: '90px',
+  '& .longText': {
+    display: 'none'
   },
-  '& span': {
-    fontSize: '9pt',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden'
+  '& svg': {
+    marginRight: '0 !important'
   }
-});
+}, _styled["@container " + TIME_SERIES_CONTAINER_NAME + " (min-width: " + TIME_SERIES_CONTAINER_BREAKPOINT_PX + ")"] = {
+  width: '130px',
+  '& .shortText': {
+    display: 'none'
+  }
+}, _styled['& span'] = {
+  fontSize: '9pt',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden'
+}, _styled));
 
 var LocationInfoButtonConnect = function LocationInfoButtonConnect(_ref) {
   var panelId = _ref.panelId,
@@ -6876,7 +6894,7 @@ var LocationInfoButtonConnect = function LocationInfoButtonConnect(_ref) {
 };
 
 var LocationSelectButtonConnect = function LocationSelectButtonConnect(_ref) {
-  var _timeSeriesLocation$o;
+  var _timeSeriesLocation$o, _sx;
   var panelId = _ref.panelId;
   var dispatch = useDispatch();
   var _useTimeseriesTransla = useTimeseriesTranslation(),
@@ -6926,11 +6944,9 @@ var LocationSelectButtonConnect = function LocationSelectButtonConnect(_ref) {
         "data-testid": "locationSelectButton",
         disabled: isMapPinDisabled,
         icon: jsx(Location, {
-          sx: {
-            '@container time-series-container (width < 720px)': {
-              display: 'none'
-            }
-          }
+          sx: (_sx = {}, _sx["@container " + TIME_SERIES_CONTAINER_NAME + " (width < " + TIME_SERIES_CONTAINER_BREAKPOINT_PX + ")"] = {
+            display: 'none'
+          }, _sx)
         }),
         longText: selectedLocationName || t('timeseries-location'),
         onClick: toggleLocationsDialog,
@@ -6942,12 +6958,13 @@ var LocationSelectButtonConnect = function LocationSelectButtonConnect(_ref) {
 };
 
 var TimeSeriesMarkersSwitch = function TimeSeriesMarkersSwitch(_ref) {
+  var _sx;
   var shouldHideMarkers = _ref.shouldHideMarkers,
     toggleMarkers = _ref.toggleMarkers;
   var _useTimeseriesTransla = useTimeseriesTranslation(),
     t = _useTimeseriesTransla.t;
   return jsxs(Box, {
-    sx: {
+    sx: (_sx = {
       display: 'flex',
       flexWrap: 'wrap',
       alignItems: 'flex-start',
@@ -6963,14 +6980,13 @@ var TimeSeriesMarkersSwitch = function TimeSeriesMarkersSwitch(_ref) {
       },
       '.markers-label': {
         display: 'none'
-      },
-      '@container time-series-container (min-width: 720px)': {
-        minWidth: '146px',
-        '.markers-label, .switch-button label': {
-          display: 'initial'
-        }
       }
-    },
+    }, _sx["@container " + TIME_SERIES_CONTAINER_NAME + " (min-width: " + TIME_SERIES_CONTAINER_BREAKPOINT_PX + ")"] = {
+      minWidth: '146px',
+      '.markers-label, .switch-button label': {
+        display: 'initial'
+      }
+    }, _sx),
     children: [jsx(Typography, {
       className: "markers-label",
       sx: {
@@ -8075,7 +8091,7 @@ var useMapPin = function useMapPin(_ref) {
   };
 };
 var TimeSeriesConnect = function TimeSeriesConnect(_ref2) {
-  var _linkedMapIds$;
+  var _linkedMapIds$, _sx;
   var panelId = _ref2.panelId;
   var dispatch = useDispatch();
   var _useTimeseriesTransla = useTimeseriesTranslation(),
@@ -8214,7 +8230,7 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref2) {
       height: '100%',
       backgroundColor: 'geowebColors.background.surfaceApp',
       containerType: 'inline-size',
-      containerName: 'time-series-container'
+      containerName: TIME_SERIES_CONTAINER_NAME
     },
     children: [jsxs(Stack, {
       direction: "row",
@@ -8247,16 +8263,23 @@ var TimeSeriesConnect = function TimeSeriesConnect(_ref2) {
       }), jsx(TimeSeriesMarkersSwitch, {
         shouldHideMarkers: shouldHideLocationMarkers,
         toggleMarkers: toggleLocationMarkers
-      }), jsx(CustomTooltip, {
-        title: shouldShowLegend ? t('timeseries-legend-tooltip-hide') : t('timeseries-legend-tooltip-show'),
-        children: jsx("span", {
-          children: jsx(TimeSeriesTopRowButton, {
-            icon: jsx(Menu, {}),
-            longText: t('timeseries-legend'),
-            onClick: toggleLegend,
-            selected: shouldShowLegend
-          })
-        })
+      }), jsx(LegendToggleButton, {
+        hideTooltipText: t('timeseries-legend-tooltip-hide'),
+        isLegendVisible: shouldShowLegend,
+        legendLabel: t('timeseries-legend'),
+        onToggle: toggleLegend,
+        showTooltipText: t('timeseries-legend-tooltip-show'),
+        sx: (_sx = {}, _sx["@container " + TIME_SERIES_CONTAINER_NAME + " (width < " + TIME_SERIES_CONTAINER_BREAKPOINT_PX + ")"] = {
+          maxWidth: '90px',
+          '& .longText': {
+            display: 'none'
+          },
+          '& svg': {
+            marginRight: '0 !important'
+          }
+        }, _sx["@container " + TIME_SERIES_CONTAINER_NAME + " (min-width: " + TIME_SERIES_CONTAINER_BREAKPOINT_PX + ")"] = {
+          width: '130px'
+        }, _sx)
       })]
     }), !!timeSeriesLocation && !!plotPresetState && jsx(Box, {
       sx: {

package/dist/src/lib/components/TimeSeries/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const TIME_SERIES_CONTAINER_BREAKPOINT_PX = "720px";
+export declare const TIME_SERIES_CONTAINER_NAME = "time-series-container";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/time-series",
-  "version": "19.3.0",
+  "version": "19.4.0",
   "description": "GeoWeb time-series library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {