@opengeoweb/shared 10.2.1-spike-ol.3 → 11.1.0

package/index.esm.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Box, Typography, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Drawer, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid2, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Switch, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, ListItemButton, Checkbox } from '@mui/material';
-import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Resize, Admin, useThemeContext, ThemeTypes, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
+import { Box, Typography, Tooltip, IconButton, useTheme, Dialog, DialogTitle, DialogContent, DialogActions, Paper, Button, CircularProgress, Alert, AlertTitle, Drawer, Link, Avatar as Avatar$1, ClickAwayListener, MenuList, MenuItem, Grid2, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Switch, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, ListItemButton, Checkbox } from '@mui/material';
 import * as React from 'react';
 import React__default, { useRef, Component, useState } from 'react';
+import { Resize, Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Admin, useThemeContext, ThemeTypes, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
+import Draggable from 'react-draggable';
+import { Resizable } from 're-resizable';
 import 'i18next';
 import { useTranslation } from 'react-i18next';
 import { throttle, escapeRegExp, debounce } from 'lodash';
-import Draggable from 'react-draggable';
-import { Resizable } from 're-resizable';
 import * as Sentry from '@sentry/react';
 import { parseISO, parse, format, isEqual, add as add$1, sub as sub$1, differenceInYears as differenceInYears$1, differenceInMonths as differenceInMonths$1, differenceInDays as differenceInDays$1, differenceInMinutes as differenceInMinutes$1, differenceInHours as differenceInHours$1, differenceInSeconds as differenceInSeconds$1, roundToNearestMinutes as roundToNearestMinutes$1, isBefore as isBefore$1, isAfter as isAfter$1, isValid as isValid$1, getUnixTime, fromUnixTime, set as set$1, getHours as getHours$1, startOfDay, addMinutes, addHours, setSeconds as setSeconds$1, getDay, getDayOfYear, getMonth, getWeek, getYear, isWithinInterval } from 'date-fns';
 import { configureStore } from '@reduxjs/toolkit';
@@ -35,7 +35,6 @@ var en = {
 	"shared-toggle-timeslider": "Toggle hide/show time slider",
 	"shared-timeslider-scale": "Change time slider scale (visible timespan)",
 	"shared-expand-timeslider-scale": "Expand/shrink time slider scale (visible timespan)",
-	"shared-toggle-layerinformation": "Toggle hide/show layer information",
 	"shared-mouseover-selected-time": "Mouseover to change selected time",
 	"shared-mouseover-on-off": "Mouseover switch on/off",
 	"shared-change-timestep-or-speed": "Change time step or animation speed",
@@ -96,7 +95,6 @@ var fi = {
 	"shared-toggle-timeslider": "Kytke TimeSlider näkyville/pois näkyvistä",
 	"shared-timeslider-scale": "Muuta TimeSliderin näkyvää aikaväliä",
 	"shared-expand-timeslider-scale": "Laajenna/kutista TimeSliderin mittakaavaa (näkyvää aikaväliä)",
-	"shared-toggle-layerinformation": "Kytke karttatasojen pikanäyttö näkyville/pois näkyvistä",
 	"shared-mouseover-selected-time": "Osoita ja liikuta hiirtä muuttaaksesi valittua aikaa",
 	"shared-mouseover-on-off": "Kytke hiiren vaikutus TimeSlideriin päälle/pois päältä",
 	"shared-change-timestep-or-speed": "Muuta aika-askelta tai animaation nopeutta",
@@ -157,7 +155,6 @@ var no = {
 	"shared-toggle-timeslider": "Vis/skjul tidslinje",
 	"shared-timeslider-scale": "Endre tidsseriens skala (synlig tidsperiode)",
 	"shared-expand-timeslider-scale": "Utvid/krymp tidsseriens skala (synlig tidsperiode)",
-	"shared-toggle-layerinformation": "Vis/skjul laginformasjon",
 	"shared-mouseover-selected-time": "Mouseover for å endre valgt tid",
 	"shared-mouseover-on-off": "Mouseover av/på",
 	"shared-change-timestep-or-speed": "Endre tidssteg eller animasjonsfart",
@@ -218,7 +215,6 @@ var nl = {
 	"shared-toggle-timeslider": "Timeslider verbergen/tonen",
 	"shared-timeslider-scale": "Timeslider zichtbare periode wijzigen",
 	"shared-expand-timeslider-scale": "Timeslider zichtbare periode vergroten/verkleinen",
-	"shared-toggle-layerinformation": "Laag informatie verbergen/tonen",
 	"shared-mouseover-selected-time": "Mouseover om de geselecteerde tijd te wijzigen",
 	"shared-mouseover-on-off": "Mouseover aan / uit zetten",
 	"shared-change-timestep-or-speed": "Wijzig tijdsinterval of animatiesnelheid",
@@ -752,18 +748,222 @@ var CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef(function (_ref, ref)
 });
 var CustomIconButton = /*#__PURE__*/React.memo(CustomIconButtonNoMemo);
 
-var _excluded$c = ["title", "onClose", "description", "actions", "children", "sx"];
-var CustomDialog = function CustomDialog(_ref) {
-  var title = _ref.title,
-    _onClose = _ref.onClose,
-    _ref$description = _ref.description,
-    description = _ref$description === void 0 ? '' : _ref$description,
-    _ref$actions = _ref.actions,
-    actions = _ref$actions === void 0 ? null : _ref$actions,
+var _excluded$c = ["bounds", "setIsDragging", "children", "onStop"];
+var DraggableComponent$1 = function DraggableComponent(_ref) {
+  var _ref$bounds = _ref.bounds,
+    bounds = _ref$bounds === void 0 ? 'body' : _ref$bounds,
+    setIsDragging = _ref.setIsDragging,
     children = _ref.children,
-    sx = _ref.sx,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$c);
-  return jsxs(Dialog, Object.assign({
+    onStop = _ref.onStop,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+  var onDragStart = function onDragStart(e) {
+    // This makes sure that nothing is selected during drag
+    setIsDragging && setIsDragging(true);
+    e.preventDefault();
+  };
+  var onDragStop = function onDragStop(event, pos) {
+    setIsDragging && setIsDragging(false);
+    onStop && onStop(event, pos);
+  };
+  return jsx(Draggable, Object.assign({
+    bounds: bounds
+  }, props, {
+    onStop: function onStop(event, pos) {
+      return onDragStop(event, pos);
+    },
+    enableUserSelectHack: false,
+    onStart: onDragStart,
+    children: children
+  }));
+};
+
+var _excluded$b = ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth", "enable", "nodeRef"];
+var isDraggingClassName = 'is-dragging';
+var useBoundsProps = function useBoundsProps(nodeRef) {
+  var _React$useState = React__default.useState({}),
+    boundsProps = _React$useState[0],
+    setBoundsProps = _React$useState[1];
+  React__default.useEffect(function () {
+    if (nodeRef) {
+      var _nodeRef$current;
+      setBoundsProps({
+        bounds: nodeRef == null || (_nodeRef$current = nodeRef.current) == null ? void 0 : _nodeRef$current.parentNode,
+        boundsByDirection: true
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return boundsProps;
+};
+var ResizeComponent = function ResizeComponent(_ref) {
+  var children = _ref.children,
+    _ref$onResizeStart = _ref.onResizeStart,
+    onResizeStart = _ref$onResizeStart === void 0 ? function () {} : _ref$onResizeStart,
+    _ref$onResizeStop = _ref.onResizeStop,
+    onResizeStop = _ref$onResizeStop === void 0 ? function () {} : _ref$onResizeStop,
+    size = _ref.size,
+    _ref$setSize = _ref.setSize,
+    setSize = _ref$setSize === void 0 ? function () {} : _ref$setSize,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? 50 : _ref$minHeight,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 50 : _ref$minWidth,
+    _ref$enable = _ref.enable,
+    enable = _ref$enable === void 0 ? {
+      top: false,
+      right: false,
+      bottom: false,
+      left: false,
+      topRight: true,
+      bottomRight: true,
+      bottomLeft: true,
+      topLeft: true
+    } : _ref$enable,
+    nodeRef = _ref.nodeRef,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+  var theme = useTheme();
+  var onStartResize = React__default.useCallback(function (event, _direction, node) {
+    event.stopPropagation();
+    node.classList.add(isDraggingClassName);
+    var _node$getBoundingClie = node.getBoundingClientRect(),
+      width = _node$getBoundingClie.width,
+      height = _node$getBoundingClie.height;
+    setSize({
+      width: width,
+      height: height
+    });
+    // fix for when initial maxHeight gets cleared
+    // eslint-disable-next-line no-param-reassign
+    node.style.height = height + "px";
+    onResizeStart();
+  }, [onResizeStart, setSize]);
+  var onStopResize = React__default.useCallback(function (event, direction, node, delta) {
+    node.classList.remove(isDraggingClassName);
+    if (!size) {
+      return;
+    }
+    var width = parseInt(size.width, 10) + delta.width;
+    var height = parseInt(size.height, 10) + delta.height;
+    setSize({
+      width: width,
+      height: height
+    });
+    onResizeStop(event, direction, node, delta);
+  }, [setSize, onResizeStop, size]);
+  var boundsProps = useBoundsProps(nodeRef);
+  return jsx(Resizable, Object.assign({
+    minHeight: minHeight,
+    minWidth: minWidth,
+    size: size,
+    onResizeStop: onStopResize
+  }, boundsProps, {
+    handleComponent: {
+      bottomRight: jsx(Resize, {
+        style: {
+          fill: "" + theme.palette.geowebColors.buttons.flat["default"].color
+        },
+        sx: {
+          display: 'none'
+        },
+        className: "resizableHandle"
+      }),
+      bottomLeft: jsx(Resize, {
+        isRightAligned: true,
+        style: {
+          fill: "" + theme.palette.geowebColors.buttons.flat["default"].color
+        },
+        sx: {
+          display: 'none'
+        },
+        className: "resizableHandle"
+      })
+    },
+    enable: enable,
+    onResizeStart: onStartResize
+  }, props, {
+    children: children
+  }));
+};
+
+var _excluded$a = ["defaultSize", "onResizeStop", "hasLayout"],
+  _excluded2$2 = ["title", "onClose", "description", "actions", "children", "sx", "resizableDefaultSize", "isResizable", "hasLayout", "shouldRenderInline", "slotProps"];
+var PaperComponent = function PaperComponent(_ref) {
+  var _ref$defaultSize = _ref.defaultSize,
+    defaultSize = _ref$defaultSize === void 0 ? {
+      width: 'auto',
+      height: undefined
+    } : _ref$defaultSize,
+    onResize = _ref.onResizeStop,
+    _ref$hasLayout = _ref.hasLayout,
+    hasLayout = _ref$hasLayout === void 0 ? true : _ref$hasLayout,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+  var maxWidth = '98%';
+  var maxHeight = '98%';
+  return jsx(ResizeComponent, Object.assign({
+    size: defaultSize,
+    maxWidth: maxWidth,
+    maxHeight: maxHeight,
+    minHeight: 120,
+    minWidth: 280,
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, onResize && {
+    onResizeStop: function onResizeStop(_event, _direction, elementRef) {
+      var _elementRef$getBoundi = elementRef.getBoundingClientRect(),
+        width = _elementRef$getBoundi.width,
+        height = _elementRef$getBoundi.height;
+      onResize({
+        width: width,
+        height: height
+      });
+    }
+  }, {
+    enable: {
+      top: true,
+      right: true,
+      bottom: true,
+      left: true,
+      topRight: true,
+      bottomRight: true,
+      bottomLeft: true,
+      topLeft: true
+    },
+    children: hasLayout ? jsx(Paper, Object.assign({}, props, {
+      sx: {
+        margin: '0px!important',
+        width: '100%!important',
+        height: '100%!important',
+        maxHeight: '100%!important',
+        maxWidth: '100%!important'
+      }
+    })) : props.children
+  }));
+};
+var CustomDialog = function CustomDialog(_ref2) {
+  var title = _ref2.title,
+    _onClose = _ref2.onClose,
+    _ref2$description = _ref2.description,
+    description = _ref2$description === void 0 ? '' : _ref2$description,
+    _ref2$actions = _ref2.actions,
+    actions = _ref2$actions === void 0 ? null : _ref2$actions,
+    children = _ref2.children,
+    sx = _ref2.sx,
+    resizableDefaultSize = _ref2.resizableDefaultSize,
+    _ref2$isResizable = _ref2.isResizable,
+    isResizable = _ref2$isResizable === void 0 ? false : _ref2$isResizable,
+    _ref2$hasLayout = _ref2.hasLayout,
+    hasLayout = _ref2$hasLayout === void 0 ? true : _ref2$hasLayout,
+    _ref2$shouldRenderInl = _ref2.shouldRenderInline,
+    shouldRenderInline = _ref2$shouldRenderInl === void 0 ? false : _ref2$shouldRenderInl,
+    slotProps = _ref2.slotProps,
+    other = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+  var _React$useState = React.useState(resizableDefaultSize),
+    size = _React$useState[0],
+    setSize = _React$useState[1];
+  return jsx(Dialog, Object.assign({
     "data-testid": "customDialog",
     PaperProps: {
       sx: Object.assign({
@@ -776,58 +976,82 @@ var CustomDialog = function CustomDialog(_ref) {
     onClose: function onClose() {
       _onClose('CLOSED');
     },
-    "aria-labelledby": "dialog-title"
-  }, other, {
-    children: [jsxs(DialogTitle, {
-      id: "dialog-title",
-      sx: {
-        zIndex: 1,
-        padding: 2,
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center'
+    "aria-labelledby": "dialog-title",
+    slotProps: Object.assign({}, slotProps, isResizable && {
+      paper: {
+        defaultSize: size,
+        onResizeStop: setSize,
+        hasLayout: hasLayout
+      }
+    }, shouldRenderInline && {
+      root: {
+        style: {
+          position: 'absolute'
+        }
       },
-      children: [jsx(Typography, {
+      backdrop: {
+        style: {
+          position: 'absolute'
+        }
+      }
+    })
+  }, isResizable && {
+    PaperComponent: PaperComponent
+  }, shouldRenderInline && {
+    disablePortal: true
+  }, other, {
+    children: hasLayout ? jsxs(Fragment, {
+      children: [jsxs(DialogTitle, {
+        id: "dialog-title",
         sx: {
-          fontSize: '16px',
-          fontWeight: 500
+          zIndex: 1,
+          padding: 2,
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
         },
-        "data-testid": "customDialog-title",
-        component: "span",
-        children: title
-      }), jsx(CustomIconButton, {
-        "data-testid": "customDialog-close",
-        "aria-label": "close",
-        onClick: function onClick() {
-          return _onClose('CLOSED');
+        children: [jsx(Typography, {
+          sx: {
+            fontSize: '16px',
+            fontWeight: 500
+          },
+          "data-testid": "customDialog-title",
+          component: "span",
+          children: title
+        }), jsx(CustomIconButton, {
+          "data-testid": "customDialog-close",
+          "aria-label": "close",
+          onClick: function onClick() {
+            return _onClose('CLOSED');
+          },
+          sx: {
+            '&.MuiIconButton-root': {
+              color: 'geowebColors.greys.accessible'
+            }
+          },
+          children: jsx(Close, {
+            "data-testid": "CloseIcon"
+          })
+        })]
+      }), jsxs(DialogContent, {
+        sx: {
+          padding: '8px 16px'
         },
+        children: [description && jsx(Typography, {
+          variant: "body1",
+          children: description
+        }), children]
+      }), jsx(DialogActions, {
         sx: {
-          '&.MuiIconButton-root': {
-            color: 'geowebColors.greys.accessible'
+          padding: 2,
+          flexDirection: {
+            xs: 'column',
+            sm: 'row'
           }
         },
-        children: jsx(Close, {
-          "data-testid": "CloseIcon"
-        })
+        children: actions
       })]
-    }), jsxs(DialogContent, {
-      sx: {
-        padding: '8px 16px'
-      },
-      children: [description && jsx(Typography, {
-        variant: "body1",
-        children: description
-      }), children]
-    }), jsx(DialogActions, {
-      sx: {
-        padding: 2,
-        flexDirection: {
-          xs: 'column',
-          sm: 'row'
-        }
-      },
-      children: actions
-    })]
+    }) : children
   }));
 };
 
@@ -853,8 +1077,6 @@ var useSharedTranslation = function useSharedTranslation() {
   return useTranslation([SHARED_NAMESPACE]);
 };
 
-var _excluded$b = ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"],
-  _excluded2$1 = ["catchOnCancel"];
 var confirmStyle = {
   width: {
     xs: '100%',
@@ -873,6 +1095,67 @@ var confirmStyle = {
     sm: 0
   }
 };
+var ConfirmationButtons = function ConfirmationButtons(_ref) {
+  var onClose = _ref.onClose,
+    cancelLabel = _ref.cancelLabel,
+    isLoading = _ref.isLoading,
+    onSubmit = _ref.onSubmit,
+    disableAutoFocus = _ref.disableAutoFocus,
+    confirmLabel = _ref.confirmLabel;
+  var _useSharedTranslation = useSharedTranslation(),
+    t = _useSharedTranslation.t;
+  return jsxs(Fragment, {
+    children: [jsx(Button, {
+      "data-testid": "confirmationDialog-cancel",
+      variant: "tertiary",
+      sx: function sx(theme) {
+        return {
+          width: {
+            xs: '100%',
+            sm: '150px'
+          },
+          '&:focus': {
+            outline: theme.palette.geowebColors.buttons.primary.focus.outline,
+            borderColor: 'transparent'
+          }
+        };
+      },
+      onClick: function onClick() {
+        return onClose('CANCELLED');
+      },
+      children: cancelLabel != null ? cancelLabel : t('shared-confirmation-cancel')
+    }), isLoading ? jsx(Box, {
+      "data-testid": "confirm-dialog-spinner",
+      sx: Object.assign({}, confirmStyle, {
+        height: '40px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }),
+      children: jsx(CircularProgress, {
+        size: 40,
+        color: "secondary"
+      })
+    }) : jsx(Button, {
+      "data-testid": "confirmationDialog-confirm",
+      variant: "primary",
+      sx: function sx(theme) {
+        return Object.assign({}, confirmStyle, {
+          '&:focus': {
+            outline: theme.palette.geowebColors.buttons.primary.focus.outline,
+            borderColor: 'transparent'
+          }
+        });
+      },
+      onClick: onSubmit,
+      autoFocus: !disableAutoFocus,
+      children: confirmLabel != null ? confirmLabel : t('shared-confirmation-submit')
+    })]
+  });
+};
+
+var _excluded$9 = ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"],
+  _excluded2$1 = ["catchOnCancel"];
 var ConfirmationDialog = function ConfirmationDialog(_ref) {
   var open = _ref.open,
     title = _ref.title,
@@ -887,7 +1170,7 @@ var ConfirmationDialog = function ConfirmationDialog(_ref) {
     disableAutoFocus = _ref$disableAutoFocus === void 0 ? false : _ref$disableAutoFocus,
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   other.catchOnCancel;
     var rest = _objectWithoutPropertiesLoose(other, _excluded2$1); // remove unwanted props
   var _useSharedTranslation = useSharedTranslation(),
@@ -898,55 +1181,13 @@ var ConfirmationDialog = function ConfirmationDialog(_ref) {
     title: title,
     description: description != null ? description : t('shared-confirmation-description'),
     onClose: onClose,
-    actions: jsxs(Fragment, {
-      children: [jsx(Button, {
-        "data-testid": "confirmationDialog-cancel",
-        variant: "tertiary",
-        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-        sx: function sx(theme) {
-          return {
-            width: {
-              xs: '100%',
-              sm: '150px'
-            },
-            '&:focus': {
-              outline: theme.palette.geowebColors.buttons.primary.focus.outline,
-              borderColor: 'transparent'
-            }
-          };
-        },
-        onClick: function onClick() {
-          return onClose('CANCELLED');
-        },
-        children: cancelLabel != null ? cancelLabel : t('shared-confirmation-cancel')
-      }), isLoading ? jsx(Box, {
-        "data-testid": "confirm-dialog-spinner",
-        sx: Object.assign({}, confirmStyle, {
-          height: '40px',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center'
-        }),
-        children: jsx(CircularProgress, {
-          size: 40,
-          color: "secondary"
-        })
-      }) : jsx(Button, {
-        "data-testid": "confirmationDialog-confirm",
-        variant: "primary",
-        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-        sx: function sx(theme) {
-          return Object.assign({}, confirmStyle, {
-            '&:focus': {
-              outline: theme.palette.geowebColors.buttons.primary.focus.outline,
-              borderColor: 'transparent'
-            }
-          });
-        },
-        onClick: onSubmit,
-        autoFocus: !disableAutoFocus,
-        children: confirmLabel != null ? confirmLabel : t('shared-confirmation-submit')
-      })]
+    actions: jsx(ConfirmationButtons, {
+      onClose: onClose,
+      cancelLabel: cancelLabel,
+      isLoading: isLoading,
+      onSubmit: onSubmit,
+      disableAutoFocus: disableAutoFocus,
+      confirmLabel: confirmLabel
     })
   }, rest, {
     children: content
@@ -1629,143 +1870,6 @@ var AppHeader = function AppHeader(_ref) {
   });
 };
 
-var _excluded$a = ["bounds", "setIsDragging", "children", "onStop"];
-var DraggableComponent$1 = function DraggableComponent(_ref) {
-  var _ref$bounds = _ref.bounds,
-    bounds = _ref$bounds === void 0 ? 'body' : _ref$bounds,
-    setIsDragging = _ref.setIsDragging,
-    children = _ref.children,
-    onStop = _ref.onStop,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-  var onDragStart = function onDragStart(e) {
-    // This makes sure that nothing is selected during drag
-    setIsDragging && setIsDragging(true);
-    e.preventDefault();
-  };
-  var onDragStop = function onDragStop(event, pos) {
-    setIsDragging && setIsDragging(false);
-    onStop && onStop(event, pos);
-  };
-  return jsx(Draggable, Object.assign({
-    bounds: bounds
-  }, props, {
-    onStop: function onStop(event, pos) {
-      return onDragStop(event, pos);
-    },
-    enableUserSelectHack: false,
-    onStart: onDragStart,
-    children: children
-  }));
-};
-
-var _excluded$9 = ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth", "enable", "nodeRef"];
-var isDraggingClassName = 'is-dragging';
-var useBoundsProps = function useBoundsProps(nodeRef) {
-  var _React$useState = React__default.useState({}),
-    boundsProps = _React$useState[0],
-    setBoundsProps = _React$useState[1];
-  React__default.useEffect(function () {
-    if (nodeRef) {
-      var _nodeRef$current;
-      setBoundsProps({
-        bounds: nodeRef == null || (_nodeRef$current = nodeRef.current) == null ? void 0 : _nodeRef$current.parentNode,
-        boundsByDirection: true
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return boundsProps;
-};
-var ResizeComponent = function ResizeComponent(_ref) {
-  var children = _ref.children,
-    _ref$onResizeStart = _ref.onResizeStart,
-    onResizeStart = _ref$onResizeStart === void 0 ? function () {} : _ref$onResizeStart,
-    _ref$onResizeStop = _ref.onResizeStop,
-    onResizeStop = _ref$onResizeStop === void 0 ? function () {} : _ref$onResizeStop,
-    size = _ref.size,
-    _ref$setSize = _ref.setSize,
-    setSize = _ref$setSize === void 0 ? function () {} : _ref$setSize,
-    _ref$minHeight = _ref.minHeight,
-    minHeight = _ref$minHeight === void 0 ? 50 : _ref$minHeight,
-    _ref$minWidth = _ref.minWidth,
-    minWidth = _ref$minWidth === void 0 ? 50 : _ref$minWidth,
-    _ref$enable = _ref.enable,
-    enable = _ref$enable === void 0 ? {
-      top: false,
-      right: false,
-      bottom: false,
-      left: false,
-      topRight: true,
-      bottomRight: true,
-      bottomLeft: true,
-      topLeft: true
-    } : _ref$enable,
-    nodeRef = _ref.nodeRef,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-  var theme = useTheme();
-  var onStartResize = React__default.useCallback(function (event, _direction, node) {
-    event.stopPropagation();
-    node.classList.add(isDraggingClassName);
-    var _node$getBoundingClie = node.getBoundingClientRect(),
-      width = _node$getBoundingClie.width,
-      height = _node$getBoundingClie.height;
-    setSize({
-      width: width,
-      height: height
-    });
-    // fix for when initial maxHeight gets cleared
-    // eslint-disable-next-line no-param-reassign
-    node.style.height = height + "px";
-    onResizeStart();
-  }, [onResizeStart, setSize]);
-  var onStopResize = React__default.useCallback(function (event, direction, node, delta) {
-    node.classList.remove(isDraggingClassName);
-    if (!size) {
-      return;
-    }
-    var width = parseInt(size.width, 10) + delta.width;
-    var height = parseInt(size.height, 10) + delta.height;
-    setSize({
-      width: width,
-      height: height
-    });
-    onResizeStop(event, direction, node, delta);
-  }, [setSize, onResizeStop, size]);
-  var boundsProps = useBoundsProps(nodeRef);
-  return jsx(Resizable, Object.assign({
-    minHeight: minHeight,
-    minWidth: minWidth,
-    size: size,
-    onResizeStop: onStopResize
-  }, boundsProps, {
-    handleComponent: {
-      bottomRight: jsx(Resize, {
-        style: {
-          fill: "" + theme.palette.geowebColors.buttons.flat["default"].color
-        },
-        sx: {
-          display: 'none'
-        },
-        className: "resizableHandle"
-      }),
-      bottomLeft: jsx(Resize, {
-        isRightAligned: true,
-        style: {
-          fill: "" + theme.palette.geowebColors.buttons.flat["default"].color
-        },
-        sx: {
-          display: 'none'
-        },
-        className: "resizableHandle"
-      })
-    },
-    enable: enable,
-    onResizeStart: onStartResize
-  }, props, {
-    children: children
-  }));
-};
-
 // TODO: (Sander de Snaijer 2020-07-13) this error wrappper should get more (non-breaking?) logic when we have decided how to handle errors.
 /**
  * ErrorBoundary
@@ -1974,7 +2078,8 @@ var UserMenu = function UserMenu(_ref) {
   });
 };
 
-var MenuItemTheme = function MenuItemTheme() {
+var MenuItemTheme = function MenuItemTheme(_ref) {
+  var enableSpecialThemes = _ref.enableSpecialThemes;
   var _useThemeContext = useThemeContext(),
     namedTheme = _useThemeContext.namedTheme,
     setThemeName = _useThemeContext.setThemeName;
@@ -2005,12 +2110,20 @@ var MenuItemTheme = function MenuItemTheme() {
               checked: (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.DARK_THEME
             }),
             label: t('shared-dark')
-          }), jsx(FormControlLabel, {
-            value: ThemeTypes.XMAS2024_THEME,
-            control: jsx(Radio, {
-              checked: (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.XMAS2024_THEME
-            }),
-            label: t('shared-xmas') + " 2024"
+          }), enableSpecialThemes && jsxs(Fragment, {
+            children: [jsx(FormControlLabel, {
+              value: ThemeTypes.DEMO_THEME,
+              control: jsx(Radio, {
+                checked: (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.DEMO_THEME
+              }),
+              label: "Demo"
+            }), jsx(FormControlLabel, {
+              value: ThemeTypes.XMAS2024_THEME,
+              control: jsx(Radio, {
+                checked: (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.XMAS2024_THEME
+              }),
+              label: t('shared-xmas') + " 2024"
+            })]
           })]
         })
       })]
@@ -2861,12 +2974,6 @@ var ShortcutList = function ShortcutList(_ref) {
         children: jsx(ArrowLeft, {})
       })]
     })
-  }, {
-    titleKey: 'shared-toggle-layerinformation',
-    description: jsx(ShortCutSegment, {
-      type: "icon",
-      children: "D"
-    })
   }, {
     titleKey: 'shared-change-layer-values-scrolling',
     description: jsxs(Fragment, {
@@ -5864,4 +5971,31 @@ var RenderCounter = /*#__PURE__*/function () {
 }();
 var renderCounter = new RenderCounter();
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterOption, LastUpdateTime, PROJECTION, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, StatusTag, StorybookDocsWrapper, SwitchButton, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createToolkitMockStore, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosAuthError, isAxiosError, pollingIntervalTimeout, renderCounter, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, useWheelStopPropagation };
+/* *
+ * 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)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+// eslint-disable-next-line no-redeclare
+var SystemScope = {
+  user: 'user',
+  system: 'system'
+};
+// eslint-disable-next-line no-redeclare
+var PresetScope = Object.assign({}, SystemScope, {
+  shared: 'shared'
+});
+
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationButtons, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterOption, LastUpdateTime, PROJECTION, PresetScope, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, StatusTag, StorybookDocsWrapper, SwitchButton, SystemScope, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createToolkitMockStore, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosAuthError, isAxiosError, pollingIntervalTimeout, renderCounter, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, useWheelStopPropagation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "10.2.1-spike-ol.3",
+  "version": "11.1.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,26 +8,22 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.0",
-    "@mui/material": "^6.1.1",
-    "@mui/system": "6.4.3",
-    "@mui/x-date-pickers": "7.26.0",
-    "@reduxjs/toolkit": "^1.9.7",
-    "@sentry/react": "^8.34.0",
-    "@storybook/react": "8.4.2",
-    "@testing-library/react": "16.0.1",
-    "@testing-library/user-event": "14.5.2",
+    "@opengeoweb/theme": "*",
+    "react-draggable": "^4.4.6",
+    "re-resizable": "^6.9.11",
+    "lodash": "^4.17.21",
     "axios": "^1.7.7",
     "date-fns": "^4.1.0",
+    "@reduxjs/toolkit": "^1.9.7",
+    "react-i18next": "^15.1.1",
     "i18next": "^23.11.5",
-    "jest-date-mock": "1.0.10",
-    "lodash": "^4.17.21",
-    "msw": "1.3.3",
-    "re-resizable": "^6.9.11",
-    "react": "18.3.1",
-    "react-draggable": "^4.4.6",
-    "react-i18next": "^15.1.1"
+    "@sentry/react": "^8.34.0",
+    "@mui/material": "^6.1.1"
+  },
+  "peerDependencies": {
+    "react": "18",
+    "@emotion/react": "*",
+    "@emotion/styled": "*"
   },
   "module": "./index.esm.js",
   "type": "module",

package/src/lib/components/ConfirmationDialog/ConfirmationButtons.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { DialogAction } from '../CustomDialog';
+export type ConfirmationAction = 'CANCELLED' | DialogAction;
+export interface ConfirmationButtonsProps {
+    confirmLabel?: string;
+    cancelLabel?: string;
+    disableAutoFocus?: boolean;
+    onSubmit: () => void;
+    onClose: (reason: ConfirmationAction) => void;
+    isLoading?: boolean;
+}
+export declare const ConfirmationButtons: React.FC<ConfirmationButtonsProps>;

package/src/lib/components/ConfirmationDialog/ConfirmationButtons.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/src/lib/components/ConfirmationDialog/ConfirmationButtons.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ConfirmationButtons } from './ConfirmationButtons';
+declare const meta: Meta<typeof ConfirmationButtons>;
+export default meta;
+type Story = StoryObj<typeof ConfirmationButtons>;
+export declare const Component: Story;
+export declare const ComponentDark: Story;
+export declare const Loading: Story;
+export declare const CustomLabels: Story;

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

@@ -1,2 +1,3 @@
 export * from './ConfirmationDialog';
 export * from './ConfirmationService';
+export { ConfirmationButtons } from './ConfirmationButtons';

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

@@ -1,10 +1,15 @@
 import * as React from 'react';
 import { DialogProps } from '@mui/material';
+import { Size } from '../DraggableResizable';
 export type DialogAction = 'CLOSED';
 export interface CustomDialogProps extends DialogProps {
     description?: string;
     actions?: React.ReactNode;
     onClose: (reason: DialogAction) => void;
+    isResizable?: boolean;
+    resizableDefaultSize?: Size;
+    hasLayout?: boolean;
+    shouldRenderInline?: boolean;
 }
 export declare const CustomDialog: React.FC<CustomDialogProps>;
 export default CustomDialog;

package/src/lib/components/CustomDialog/CustomDialog.stories.d.ts

@@ -1,13 +1,16 @@
 import * as React from 'react';
+import type { StoryObj } from '@storybook/react';
+import { CustomDialog } from './CustomDialog';
 declare const _default: {
     title: string;
-};
-export default _default;
-export declare const CustomDialogLight: {
-    (): React.ReactElement;
-    tags: string[];
-};
-export declare const CustomDialogDark: {
-    (): React.ReactElement;
+    component: React.FC<import("./CustomDialog").CustomDialogProps>;
     tags: string[];
 };
+export default _default;
+type Story = StoryObj<typeof CustomDialog>;
+export declare const CustomDialogLight: Story;
+export declare const CustomDialogDark: Story;
+export declare const CustomDialogResizable: Story;
+export declare const CustomDialogResizableWithInitialSize: Story;
+export declare const CustomDialogRenderInline: Story;
+export declare const CustomDialogResizableNoLayout: Story;

package/src/lib/components/UserMenu/UserMenuItemTheme.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-declare const MenuItemTheme: React.FC;
+interface MenuItemThemeProps {
+    enableSpecialThemes?: boolean;
+}
+declare const MenuItemTheme: React.FC<MenuItemThemeProps>;
 export default MenuItemTheme;

package/src/lib/types/types.d.ts

@@ -32,6 +32,8 @@ export interface ConfigType {
     GW_FEATURE_MENU_FE_VERSION?: boolean;
     GW_FEATURE_DISPLAY_SEARCH_ON_MAP?: boolean;
     GW_FEATURE_INITIALIZE_SENTRY?: boolean;
+    GW_FEATURE_ENABLE_SPECIAL_THEMES?: boolean;
+    GW_FEATURE_TAF_AUTOTAF_ENABLED?: boolean;
     GW_LANGUAGE?: string;
 }
 export interface TimeSeriesService {
@@ -40,10 +42,20 @@ export interface TimeSeriesService {
     url: string;
     type: ServiceInterface;
     name: string;
-    scope?: TimeseriesServiceScope;
+    scope?: SystemScope;
 }
 export type ServiceInterface = 'EDR' | 'OGC';
-export type TimeseriesServiceScope = 'user' | 'system';
+export type SystemScope = 'user' | 'system';
+export declare const SystemScope: {
+    readonly user: SystemScope;
+    readonly system: SystemScope;
+};
+export type PresetScope = SystemScope | 'shared';
+export declare const PresetScope: {
+    readonly shared: PresetScope;
+    readonly user: SystemScope;
+    readonly system: SystemScope;
+};
 export interface PlotPreset {
     connectedMap?: string;
     mapId: string;
@@ -69,6 +81,10 @@ export interface PlotParameter {
     collectionId: string;
     instanceId?: string;
     instances?: EDRInstance[];
+    dimension?: {
+        id: string;
+        value: string;
+    };
 }
 export type PlotType = 'bar' | 'line' | 'scatter';
 export interface EDRInstance {
@@ -104,3 +120,8 @@ export interface EDRInstance {
         };
     };
 }
+export interface TimeSeriesPresetLocation {
+    lat: number;
+    lon: number;
+    name: string;
+}