@opengeoweb/core 15.2.0 → 15.3.0

package/index.esm.js

@@ -48,6 +48,7 @@ var en = {
 	"layermanager-title": "Layer Manager",
 	"layermanager-baselayers-title": "Base layer",
 	"layermanager-baselayers-no-available": "No service available",
+	"layermanager-sourcename-no-available": "No source available",
 	"layermanager-overlayers-title": "Select overlayer",
 	"layermanager-overlayers-overlayer": "Overlayer",
 	"layermanager-acceptance-time": "Acc Time",
@@ -58,6 +59,7 @@ var en = {
 	"layermanager-opacity-tooltip-prefix": "Opacity: ",
 	"layermanager-style-title": "Style",
 	"layermanager-layer-error": "This layer could not be loaded: does not exist on the server.",
+	"layermanager-service": "Source",
 	"layermanager-layer": "Layer",
 	"layermanager-layer-multi": "Layers",
 	"layermanager-layer-toggle": "Toggle visibility",
@@ -313,6 +315,7 @@ var nl = {
 	"layermanager-title": "Lagen Manager",
 	"layermanager-baselayers-title": "Basislaag",
 	"layermanager-baselayers-no-available": "Geen service beschikbaar",
+	"layermanager-sourcename-no-available": "Geen bron beschikbaar",
 	"layermanager-overlayers-title": "Selecteer een overlayer",
 	"layermanager-overlayers-overlayer": "Overlayer",
 	"layermanager-acceptance-time": "Acc Tijd",
@@ -323,6 +326,7 @@ var nl = {
 	"layermanager-opacity-tooltip-prefix": "Dekking: ",
 	"layermanager-style-title": "Stijl",
 	"layermanager-layer-error": "Deze laag kon niet geladen worden: bestaat niet op de server.",
+	"layermanager-service": "Bron",
 	"layermanager-layer": "Laag",
 	"layermanager-layer-toggle": "Zichtbaarheid aan/uit",
 	"layermanager-layer-select": "Open de Layer Select",
@@ -1759,6 +1763,7 @@ var HeaderOptions = function HeaderOptions(_ref) {
 var iconButtonSize = 30;
 var columnClasses = {
   column1: 'column-1',
+  columnService: 'column-service',
   column2: 'column-2',
   column3: 'column-3',
   column4: 'column-4',
@@ -1774,9 +1779,10 @@ var DELETE_MORE_BUTTONS = 3;
 var MISSING = 4;
 var leftButtonsWidth = iconButtonSize * DRAG_VISIBILITY_LEADING_BUTTONS + MISSING;
 var rightButtonsWidth = iconButtonSize * DELETE_MORE_BUTTONS;
+var opacityWidth = 45;
 var acceptanceTimeWidth = 65;
 var loadDurationWidth = 50;
-var nonFlexibleAreaWidth = leftButtonsWidth + rightButtonsWidth + acceptanceTimeWidth + loadDurationWidth;
+var nonFlexibleAreaWidth = leftButtonsWidth + rightButtonsWidth + opacityWidth + acceptanceTimeWidth + loadDurationWidth;
 var flexibleAreaWidth = "(100% - " + nonFlexibleAreaWidth + "px)";
 var leftButtonsStyle = {
   width: leftButtonsWidth,
@@ -1821,18 +1827,24 @@ var layerManagerStyle = {
   '.baseLayer': {
     width: "calc(" + flexibleAreaWidth + " * 0.25)"
   },
+  // layerService
+  '.column-service': Object.assign({
+    width: "calc(" + flexibleAreaWidth + " * 0.20)"
+  }, columnCollapseStyle),
   // layerName
   '.column-2': Object.assign({
     width: "calc(" + flexibleAreaWidth + " * 0.25)"
   }, columnCollapseStyle),
   // style
   '.column-3': Object.assign({
-    width: "calc(" + flexibleAreaWidth + " * 0.25)"
+    width: "calc(" + flexibleAreaWidth + " * 0.20)"
   }, columnCollapseStyle),
   // opacity
   '.column-4': Object.assign({
-    width: "calc(" + flexibleAreaWidth + " * 0.15)"
-  }, columnCollapseStyle),
+    width: opacityWidth
+  }, columnCollapseStyle, {
+    flexGrow: 0
+  }),
   // dimensions
   '.column-5': Object.assign({
     width: "calc(" + flexibleAreaWidth + " * 0.35)"
@@ -1854,7 +1866,7 @@ var layerManagerStyle = {
   },
   // layer missing warning
   '.column-7': {
-    width: "calc(" + flexibleAreaWidth + " * 0.75 + " + acceptanceTimeWidth + "px + " + loadDurationWidth + "px)"
+    width: "calc(" + flexibleAreaWidth + " * 0.65 + " + opacityWidth + "px + " + acceptanceTimeWidth + "px + " + loadDurationWidth + "px)"
   },
   // sizes: mini
   '.enable-btn-mini': {
@@ -1877,7 +1889,7 @@ var layerManagerStyle = {
       '.enable-btn-mini': {
         display: 'inline-flex'
       },
-      '.activateLayer-btn, .enable-btn, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-acceptanceTime, .column-loadDuration': {
+      '.activateLayer-btn, .enable-btn, .column-service, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-acceptanceTime, .column-loadDuration': {
         display: 'none'
       },
       '.addLayer-column, .setProjection-column, .overlayers-column': {
@@ -1911,7 +1923,7 @@ var layerManagerStyle = {
   // sizes: medium
   '@container (max-width: 600px)': {
     '.layermanager': {
-      '.column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-acceptanceTime, .column-loadDuration': {
+      '.column-service, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-acceptanceTime, .column-loadDuration': {
         display: 'none'
       },
       '.columnLayerName, .baseLayer': {
@@ -2107,7 +2119,7 @@ var styles$2 = {
   }
 };
 var DescriptionRow = function DescriptionRow(_ref2) {
-  var _settings$addLayer, _settings$addLayer2, _settings$layerName$t, _settings$layerName, _settings$layerName$t2, _settings$layerName2, _settings$layerStyle$, _settings$layerStyle, _settings$opacity$tit, _settings$opacity, _settings$dimensions$, _settings$dimensions, _settings$acceptanceT, _settings$acceptanceT2;
+  var _settings$addLayer, _settings$addLayer2, _settings$layerName$t, _settings$layerName, _settings$layerServic, _settings$layerServic2, _settings$layerName$t2, _settings$layerName2, _settings$layerStyle$, _settings$layerStyle, _settings$opacity$tit, _settings$opacity, _settings$dimensions$, _settings$dimensions, _settings$acceptanceT, _settings$acceptanceT2;
   var settings = _ref2.settings,
     addLayerComponent = _ref2.addLayerComponent,
     _ref2$onToggleCollaps = _ref2.onToggleCollapsed,
@@ -2138,6 +2150,11 @@ var DescriptionRow = function DescriptionRow(_ref2) {
         sx: styles$2.text,
         children: (_settings$layerName$t = settings == null || (_settings$layerName = settings.layerName) == null ? void 0 : _settings$layerName.title) != null ? _settings$layerName$t : t('layermanager-layer')
       })
+    }), jsx(RowItemCollapse$1, {
+      className: columnClasses.columnService,
+      collapsedColumns: collapsedColumns,
+      onToggleCollapsed: onToggleCollapsed,
+      title: (_settings$layerServic = settings == null || (_settings$layerServic2 = settings.layerService) == null ? void 0 : _settings$layerServic2.title) != null ? _settings$layerServic : t('layermanager-service')
     }), jsx(RowItemCollapse$1, {
       className: columnClasses.column2,
       collapsedColumns: collapsedColumns,
@@ -3189,6 +3206,30 @@ var EnableLayerConnect = function EnableLayerConnect(_ref) {
   });
 };
 
+var LayerService = function LayerService(_ref) {
+  var serviceName = _ref.serviceName,
+    _ref$isEnabled = _ref.isEnabled,
+    isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
+    tooltipPrefix = _ref.tooltipPrefix;
+  var _useCoreTranslation = useCoreTranslation(),
+    t = _useCoreTranslation.t;
+  var nonEmptyTooltipPrefix = tooltipPrefix != null ? tooltipPrefix : t('layermanager-service') + ":";
+  return jsx(Tooltip, {
+    title: nonEmptyTooltipPrefix + " " + (serviceName === '' ? t('layermanager-sourcename-no-available') : serviceName),
+    children: jsx(Typography, {
+      sx: {
+        fontSize: 12,
+        fontWeight: 500,
+        color: isEnabled ? 'geowebColors.layerManager.tableRowDefaultText.color' : 'geowebColors.layerManager.tableRowDisabledText.color',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap'
+      },
+      children: serviceName === '' ? t('layermanager-sourcename-no-available') : serviceName
+    })
+  });
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3990,6 +4031,8 @@ var LayerRowUnstyled = function LayerRowUnstyled(_ref8) {
   var layerId = _ref8.layerId,
     layer = _ref8.layer,
     layerName = _ref8.layerName,
+    _ref8$layerServiceNam = _ref8.layerServiceName,
+    layerServiceName = _ref8$layerServiceNam === void 0 ? '' : _ref8$layerServiceNam,
     services = _ref8.services,
     mapId = _ref8.mapId,
     _ref8$isEDRLayer = _ref8.isEDRLayer,
@@ -4107,7 +4150,9 @@ var LayerRowUnstyled = function LayerRowUnstyled(_ref8) {
             style: layer.style
           }),
           isEDRLayer: isEDRLayer,
-          layerName: layerName
+          isEnabled: isEnabled,
+          layerName: layerName,
+          layerServiceName: layerServiceName
         }), jsx(Grid, {
           alignItems: "center",
           className: columnClasses.column1,
@@ -4122,6 +4167,13 @@ var LayerRowUnstyled = function LayerRowUnstyled(_ref8) {
             onChangeActive: onClickRow,
             onChangeEnable: changeEnable
           })
+        }), jsx(RowItemCollapse, {
+          className: columnClasses.columnService,
+          collapsedColumns: collapsedColumns,
+          children: jsx(LayerService, {
+            isEnabled: isEnabled,
+            serviceName: layerServiceName
+          })
         }), jsx(RowItemCollapse, {
           className: columnClasses.column2,
           collapsedColumns: collapsedColumns,
@@ -4233,7 +4285,9 @@ var Accordion = function Accordion(_ref0) {
     LeftButtons = _ref0.LeftButtons,
     LoadDuration = _ref0.LoadDuration,
     _ref0$isEDRLayer = _ref0.isEDRLayer,
-    isEDRLayer = _ref0$isEDRLayer === void 0 ? false : _ref0$isEDRLayer;
+    isEDRLayer = _ref0$isEDRLayer === void 0 ? false : _ref0$isEDRLayer,
+    layerServiceName = _ref0.layerServiceName,
+    isEnabled = _ref0.isEnabled;
   var _useCoreTranslation3 = useCoreTranslation(),
     t = _useCoreTranslation3.t;
   var displayLayerName = isEDRLayer ? t('layermanager-EDR') + layerName : layerName;
@@ -4264,11 +4318,23 @@ var Accordion = function Accordion(_ref0) {
     }),
     children: jsxs(Grid, {
       container: true,
-      spacing: 3,
+      spacing: 2,
       sx: {
         padding: '16px 32px'
       },
       children: [jsxs(Grid, {
+        container: true,
+        direction: "column",
+        size: 12,
+        children: [jsx(Grid, {
+          children: t('layermanager-service')
+        }), jsx(Grid, {
+          children: jsx(LayerService, {
+            isEnabled: isEnabled,
+            serviceName: layerServiceName
+          })
+        })]
+      }), jsxs(Grid, {
         container: true,
         children: [jsx(Grid, {
           children: t('layermanager-style-title')
@@ -4877,6 +4943,9 @@ var LayerRowConnect = /*#__PURE__*/React.memo(function (_ref) {
   var layerDisplayName = useSelector(function (store) {
     return layerSelectors.getLayerDisplayName(store, layerId);
   });
+  var layerServiceName = useSelector(function (store) {
+    return layerSelectors.getLayerServiceName(store, layerId);
+  });
   var layerType = useSelector(function (store) {
     return layerSelectors.getLayerType(store, layerId);
   });
@@ -4941,6 +5010,7 @@ var LayerRowConnect = /*#__PURE__*/React.memo(function (_ref) {
       mapId: mapId,
       tooltipPrefix: settings == null || (_settings$opacity = settings.opacity) == null ? void 0 : _settings$opacity.tooltipPrefix
     }),
+    layerServiceName: layerServiceName,
     layerServicesLayout: settings != null && (_settings$renderLayer = settings.renderLayer) != null && _settings$renderLayer.Element ? jsx(settings.renderLayer.Element, {
       layerId: layerId,
       mapId: mapId
@@ -5498,6 +5568,10 @@ var styles$1 = {
     display: 'inline-block',
     padding: '0 6px'
   }};
+var minSize = {
+  width: 100,
+  height: 126
+};
 var getLayerManagerSizeValue = function getLayerManagerSizeValue(size) {
   if (!size.width || typeof size.width !== 'number') {
     return 'sizeLarge';
@@ -5532,8 +5606,19 @@ var LayerManager = function LayerManager(_ref) {
     isDockedLayerManager = _ref$isDockedLayerMan === void 0 ? false : _ref$isDockedLayerMan,
     _ref$onToggleDock = _ref.onToggleDock,
     onToggleDock = _ref$onToggleDock === void 0 ? function () {} : _ref$onToggleDock,
+    _ref$onDockedLayerMan = _ref.onDockedLayerManagerDragEnd,
+    onDockedLayerManagerDragEnd = _ref$onDockedLayerMan === void 0 ? function () {} : _ref$onDockedLayerMan,
+    _ref$onDockedLayerMan2 = _ref.onDockedLayerManagerSizeChange,
+    onDockedLayerManagerSizeChange = _ref$onDockedLayerMan2 === void 0 ? function () {} : _ref$onDockedLayerMan2,
+    _ref$onDockedLayerMan3 = _ref.onDockedLayerManagerDimensionsChange,
+    onDockedLayerManagerDimensionsChange = _ref$onDockedLayerMan3 === void 0 ? function () {} : _ref$onDockedLayerMan3,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? sizeLarge : _ref$size,
+    _ref$startDraggablePo = _ref.startDraggablePosition,
+    startDraggablePosition = _ref$startDraggablePo === void 0 ? {
+      x: 0,
+      y: 0
+    } : _ref$startDraggablePo,
     _ref$startPosition = _ref.startPosition,
     startPosition = _ref$startPosition === void 0 ? {
       top: 85,
@@ -5547,10 +5632,6 @@ var LayerManager = function LayerManager(_ref) {
     defaultCollapsedColumns = _ref$defaultCollapsed === void 0 ? {} : _ref$defaultCollapsed;
   var _useCoreTranslation = useCoreTranslation(),
     t = _useCoreTranslation.t;
-  var minSize = {
-    width: 100,
-    height: 126
-  };
   var theme = useTheme();
   renderCounter.count(LayerManager.name);
   var nonEmptyTitle = title != null ? title : t('layermanager-title');
@@ -5559,10 +5640,63 @@ var LayerManager = function LayerManager(_ref) {
     sizeInState = _React$useState[0],
     setSizeInState = _React$useState[1];
   var dataSize = getLayerManagerSizeValue(sizeInState);
+  var wasOpenRef = React.useRef(isOpen);
+  React.useLayoutEffect(function () {
+    var isOpening = isOpen && !wasOpenRef.current;
+    if (isDockedLayerManager && isOpening) {
+      setSizeInState(calculateStartSize(minSize, size, startPosition));
+    }
+    wasOpenRef.current = isOpen;
+  }, [isDockedLayerManager, isOpen, size, startPosition]);
   var _React$useState2 = React.useState(defaultCollapsedColumns),
     collapsedColumns = _React$useState2[0],
     setCollapsedColumns = _React$useState2[1];
   var stopWheelEventPropagationRef = useWheelStopPropagation();
+  var handleDragEnd = React.useCallback(function (_position, dragSize) {
+    if (isDockedLayerManager) {
+      onDockedLayerManagerDragEnd(_position);
+      onDockedLayerManagerSizeChange(getLayerManagerSizeValue(dragSize));
+      onDockedLayerManagerDimensionsChange({
+        width: dragSize.width,
+        height: dragSize.height
+      });
+    }
+    if (dragSize !== sizeInState) {
+      setSizeInState(dragSize);
+    }
+  }, [isDockedLayerManager, onDockedLayerManagerDimensionsChange, onDockedLayerManagerDragEnd, onDockedLayerManagerSizeChange, sizeInState]);
+  var handleResizeStop = React.useCallback(function (_event, _direction, node) {
+    var width = node.offsetWidth,
+      height = node.offsetHeight;
+    setSizeInState({
+      width: width,
+      height: height
+    });
+    if (isDockedLayerManager) {
+      onDockedLayerManagerSizeChange(getLayerManagerSizeValue({
+        width: width}));
+      onDockedLayerManagerDimensionsChange({
+        width: width,
+        height: height
+      });
+    }
+  }, [isDockedLayerManager, onDockedLayerManagerDimensionsChange, onDockedLayerManagerSizeChange]);
+  var handleChangeSize = React.useCallback(function (_ref2) {
+    var width = _ref2.width;
+    setSizeInState(function (prevSizeInState) {
+      var nextSizeInState = Object.assign({}, prevSizeInState, {
+        width: width
+      });
+      if (isDockedLayerManager) {
+        onDockedLayerManagerSizeChange(getLayerManagerSizeValue(Object.assign({}, nextSizeInState)));
+        onDockedLayerManagerDimensionsChange({
+          width: width,
+          height: nextSizeInState.height
+        });
+      }
+      return nextSizeInState;
+    });
+  }, [isDockedLayerManager, onDockedLayerManagerDimensionsChange, onDockedLayerManagerSizeChange]);
   return jsx(ToolContainerDraggable, {
     bounds: bounds,
     className: "layermanager",
@@ -5575,34 +5709,20 @@ var LayerManager = function LayerManager(_ref) {
     minHeight: minSize.height,
     minWidth: minSize.width,
     onClose: onClose,
-    onDragEnd: function onDragEnd(_position, dragSize) {
-      if (dragSize !== sizeInState) {
-        setSizeInState(dragSize);
-      }
-    },
+    onDragEnd: handleDragEnd,
     onMouseDown: onMouseDown,
-    onResizeStop: function onResizeStop(_event, _direction, node) {
-      var width = node.offsetWidth,
-        height = node.offsetHeight;
-      setSizeInState({
-        width: width,
-        height: height
-      });
-    },
+    onResizeStop: handleResizeStop,
     order: order,
+    resetPositionOnOpen: isDockedLayerManager,
     rightHeaderComponent: jsx(HeaderOptionsConnect, {
       buttonSettings: settings == null || (_settings$toolbar3 = settings.toolbar) == null ? void 0 : _settings$toolbar3.controlButtonSettings,
       isDockedLayerManager: isDockedLayerManager,
       mapId: mapId,
-      onChangeSize: function onChangeSize(_ref2) {
-        var width = _ref2.width;
-        setSizeInState(Object.assign({}, sizeInState, {
-          width: width
-        }));
-      },
+      onChangeSize: handleChangeSize,
       onClickDockButton: onToggleDock
     }),
     source: source,
+    startDraggablePosition: startDraggablePosition,
     startPosition: startPosition,
     startSize: sizeInState,
     sx: Object.assign({}, layerManagerStyle, theme.palette.geowebColors.layerManager.root),
@@ -5786,6 +5906,12 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
   var dockedLayerManagerSize = useSelector(function (store) {
     return mapSelectors.getDockedLayerManagerSize(store, mapId);
   });
+  var dockedLayerManagerPosition = useSelector(function (store) {
+    return mapSelectors.getDockedLayerManagerPosition(store, mapId);
+  });
+  var dockedLayerManagerDimensions = useSelector(function (store) {
+    return mapSelectors.getDockedLayerManagerDimensions(store, mapId);
+  });
   var _useSetupDialog = useSetupDialog(dialogType, source),
     dialogOrder = _useSetupDialog.dialogOrder,
     setDialogOrder = _useSetupDialog.setDialogOrder,
@@ -5804,13 +5930,16 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
         type: uiTypes.DialogTypes.LayerManager,
         mapId: mapId,
         setOpen: true,
-        source: source
+        source: source,
+        origin: mapEnums.MapActionOrigin.map
       }));
     } else {
       // Close the floating layer manager and open docked layer manager
       dispatch(uiActions.setToggleOpenDialog({
         type: uiTypes.DialogTypes.DockedLayerManager + "-" + mapId,
-        setOpen: true
+        setOpen: true,
+        mapId: mapId,
+        origin: mapEnums.MapActionOrigin.map
       }));
     }
   }, [dispatch, isDocked, mapId, onCloseDialog, source]);
@@ -5831,13 +5960,50 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
         isOpen: isDialogOpen,
         mapId: mapId || initialMapId,
         onClose: onCloseDialog,
+        onDockedLayerManagerDimensionsChange: function onDockedLayerManagerDimensionsChange(dimensions) {
+          if (!isDocked) {
+            return;
+          }
+          dispatch(mapActions.setDockedLayerManagerDimensions({
+            mapId: mapId,
+            dockedLayerManagerDimensions: dimensions,
+            origin: mapEnums.MapActionOrigin.map
+          }));
+        },
+        onDockedLayerManagerDragEnd: function onDockedLayerManagerDragEnd(position) {
+          if (!isDocked) {
+            return;
+          }
+          dispatch(mapActions.setDockedLayerManagerPosition({
+            mapId: mapId,
+            dockedLayerManagerPosition: {
+              x: position.x,
+              y: position.y
+            },
+            origin: mapEnums.MapActionOrigin.map
+          }));
+        },
+        onDockedLayerManagerSizeChange: function onDockedLayerManagerSizeChange(size) {
+          if (!isDocked) {
+            return;
+          }
+          dispatch(mapActions.setDockedLayerManagerSize({
+            mapId: mapId,
+            dockedLayerManagerSize: size,
+            origin: mapEnums.MapActionOrigin.map
+          }));
+        },
         onMouseDown: setDialogOrder,
         onToggleDock: onToggleDock,
         order: dialogOrder,
         preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
         preloadedBaseServices: preloadedBaseServices,
-        size: isDocked ? returnCorrectSize(dockedLayerManagerSize) : sizeLarge,
+        size: isDocked ? dockedLayerManagerDimensions || returnCorrectSize(dockedLayerManagerSize) : sizeLarge,
         source: uiSource,
+        startDraggablePosition: isDocked ? dockedLayerManagerPosition : {
+          x: 0,
+          y: 0
+        },
         startPosition: isDocked ? {
           top: 60,
           right: 16
@@ -5850,7 +6016,7 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
         source: uiSource
       }), !isDocked && jsx(LayerSelectConnect, {})]
     });
-  }, [bounds, dialogOrder, dockedLayerManagerSize, initialMapId, isDialogOpen, isDocked, isMultiMap, mapId, onCloseDialog, onToggleDock, preloadedAvailableBaseLayers, preloadedBaseServices, setDialogOrder, showMapIdInTitle, nonEmptyTitle, uiError, uiIsLoading, uiSource]);
+  }, [bounds, dialogOrder, dispatch, dockedLayerManagerPosition, dockedLayerManagerDimensions, dockedLayerManagerSize, initialMapId, isDialogOpen, isDocked, isMultiMap, mapId, onCloseDialog, onToggleDock, preloadedAvailableBaseLayers, preloadedBaseServices, setDialogOrder, showMapIdInTitle, nonEmptyTitle, uiError, uiIsLoading, uiSource]);
 };
 
 var LayerManagerMapButtonConnect = function LayerManagerMapButtonConnect(_ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "15.2.0",
+  "version": "15.3.0",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,22 +8,22 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/shared": "15.2.0",
+    "@opengeoweb/shared": "15.3.0",
     "react-redux": "^9.2.0",
-    "@opengeoweb/store": "15.2.0",
-    "@opengeoweb/time-slider": "15.2.0",
+    "@opengeoweb/store": "15.3.0",
+    "@opengeoweb/time-slider": "15.3.0",
     "@reduxjs/toolkit": "^2.6.1",
-    "@opengeoweb/webmap-react": "15.2.0",
-    "@opengeoweb/webmap": "15.2.0",
-    "@opengeoweb/theme": "15.2.0",
+    "@opengeoweb/webmap-react": "15.3.0",
+    "@opengeoweb/webmap": "15.3.0",
+    "@opengeoweb/theme": "15.3.0",
     "axios": "^1.7.7",
-    "@opengeoweb/layer-select": "15.2.0",
+    "@opengeoweb/layer-select": "15.3.0",
     "lodash": "^4.17.21",
     "ol": "^10.4.0",
     "react-sortablejs": "^6.1.4",
     "sortablejs": "^1.15.1",
     "@mui/system": "^7.3.2",
-    "@opengeoweb/snackbar": "15.2.0",
+    "@opengeoweb/snackbar": "15.3.0",
     "react-router-dom": "^6.21.0",
     "react-draggable": "^4.4.6",
     "i18next": "^25.0.1",
@@ -31,7 +31,7 @@
     "dompurify": "^3.0.6",
     "@mui/material": "^7.0.1",
     "@tanstack/react-query": "^5.85.5",
-    "@opengeoweb/api": "15.2.0",
+    "@opengeoweb/api": "15.3.0",
     "@types/geojson": "^7946.0.14",
     "@turf/turf": "^7.2.0",
     "proj4": "^2.15.0"

package/src/lib/components/LayerManager/LayerContainerRow/LayerRow/LayerRow.d.ts

@@ -4,6 +4,7 @@ interface LayerRowUnstyledProps {
     layerId?: string;
     layer?: layerTypes.Layer;
     layerName?: string;
+    layerServiceName?: string;
     mapId: string;
     isEDRLayer?: boolean;
     onLayerRowClick?: (layerId?: string) => void;

package/src/lib/components/LayerManager/LayerContainerRow/LayerRow/LayerService/LayerService.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface LayerServiceProps {
+    serviceName: string;
+    isEnabled?: boolean;
+    tooltipPrefix?: string;
+}
+declare const LayerService: React.FC<LayerServiceProps>;
+export default LayerService;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { Position, DraggableSize, HeaderSize } from '@opengeoweb/shared';
-import type { layerTypes, serviceTypes, uiTypes } from '@opengeoweb/store';
+import type { DraggablePosition, Position, DraggableSize, HeaderSize } from '@opengeoweb/shared';
+import type { layerTypes, mapTypes, serviceTypes, uiTypes } from '@opengeoweb/store';
 import type { LayerManagerCustomSettings } from './LayerManagerUtils';
 interface LayerManagerProps {
     mapId: string;
@@ -17,7 +17,11 @@ interface LayerManagerProps {
     error?: string;
     isDockedLayerManager?: boolean;
     onToggleDock?: () => void;
+    onDockedLayerManagerDragEnd?: (position: DraggablePosition) => void;
+    onDockedLayerManagerSizeChange?: (size: mapTypes.DockedLayerManagerSize) => void;
+    onDockedLayerManagerDimensionsChange?: (dimensions: mapTypes.DockedLayerManagerDimensions) => void;
     size?: DraggableSize;
+    startDraggablePosition?: DraggablePosition;
     startPosition?: Position;
     settings?: LayerManagerCustomSettings;
     headerSize?: HeaderSize;

package/src/lib/components/LayerManager/LayerManagerConnect.persistence.spec.d.ts

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

package/src/lib/components/LayerManager/LayerManagerUtils.d.ts

@@ -3,6 +3,7 @@ import type { DimensionTooltipGenerator, SingleValueComponentProps } from './Lay
 import type { Size, ToolbarButtonSettings } from './LayerManagerHeaderOptions';
 export declare const columnClasses: {
     column1: string;
+    columnService: string;
     column2: string;
     column3: string;
     column4: string;
@@ -45,6 +46,18 @@ export declare const layerManagerStyle: {
     '.baseLayer': {
         width: string;
     };
+    '.column-service': {
+        height: string;
+        alignContent: string;
+        alignItems: string;
+        display: string;
+        justifyContent: string;
+        whiteSpace: string;
+        overflow: string;
+        color: string;
+        flexGrow: number;
+        width: string;
+    };
     '.column-2': {
         height: string;
         alignContent: string;
@@ -70,6 +83,7 @@ export declare const layerManagerStyle: {
         width: string;
     };
     '.column-4': {
+        flexGrow: number;
         height: string;
         alignContent: string;
         alignItems: string;
@@ -78,8 +92,7 @@ export declare const layerManagerStyle: {
         whiteSpace: string;
         overflow: string;
         color: string;
-        flexGrow: number;
-        width: string;
+        width: number;
     };
     '.column-5': {
         height: string;
@@ -138,7 +151,7 @@ export declare const layerManagerStyle: {
             '.enable-btn-mini': {
                 display: string;
             };
-            '.activateLayer-btn, .enable-btn, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-acceptanceTime, .column-loadDuration': {
+            '.activateLayer-btn, .enable-btn, .column-service, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-acceptanceTime, .column-loadDuration': {
                 display: string;
             };
             '.addLayer-column, .setProjection-column, .overlayers-column': {
@@ -171,7 +184,7 @@ export declare const layerManagerStyle: {
     };
     '@container (max-width: 600px)': {
         '.layermanager': {
-            '.column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-acceptanceTime, .column-loadDuration': {
+            '.column-service, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-acceptanceTime, .column-loadDuration': {
                 display: string;
             };
             '.columnLayerName, .baseLayer': {
@@ -229,6 +242,9 @@ export interface LayerManagerCustomSettings {
             tooltipTitle?: string;
             icon?: React.ReactNode;
         };
+        layerService?: {
+            title: string;
+        };
         layerName?: {
             title: string;
         };

package/src/lib/components/MapViewConnect/olMapUtils.d.ts

@@ -1,9 +1,9 @@
 import type { Feature, View } from 'ol';
-import type { TimeSliderStartCenterEndTime } from '@opengeoweb/store';
+import type { TimeSliderStartEndStep } from '@opengeoweb/store';
 import type { Dimension, RefTimeDimensionModes } from '@opengeoweb/webmap';
 import type { MapLocation, OnInitializeLayerProps, TimeContextType, UpdateLayerInfoPayload } from '@opengeoweb/webmap-react';
-export declare const makePrefetchTimeSpan: (timeSliderStartCenterEndTime: TimeSliderStartCenterEndTime, isAnimating: boolean, prefetchList: number[]) => TimeContextType;
-export declare const usePrefetchTimeSpan: (timeSliderStartCenterEndTime: TimeSliderStartCenterEndTime, isAnimating: boolean, animationList: number[], refTimeDimensionModes?: RefTimeDimensionModes) => TimeContextType;
+export declare const makePrefetchTimeSpan: (timeSliderStartCenterEndTime: TimeSliderStartEndStep, isAnimating: boolean, prefetchList: number[]) => TimeContextType;
+export declare const usePrefetchTimeSpan: (timeSliderStartCenterEndTime: TimeSliderStartEndStep, isAnimating: boolean, animationList: number[], refTimeDimensionModes?: RefTimeDimensionModes) => TimeContextType;
 export declare const makeLayerInfoPayload: (payload: OnInitializeLayerProps, mapDimensions: Dimension[], mapId: string) => UpdateLayerInfoPayload;
 export declare const getCenterOfLinkedFeature: (feature: Feature | undefined, srs: string) => MapLocation | null;
 interface UseFitAndHighlightWarningFeatureOptions {