@dative-gpi/foundation-shared-components 1.0.154 → 1.0.156-fix-alert-tools

package/components/map/FSMap.vue

@@ -28,7 +28,8 @@
 
     <FSMapLayerButton
       v-if="$props.allowedLayers?.length && $props.allowedLayers.length > 1"
-      :layers="mapLayers.filter((layer) => $props.allowedLayers?.includes(layer.name) ?? true)"
+      :disabled="$props.disabled"
+      :layers="layers.filter((layer) => $props.allowedLayers?.includes(layer.name) ?? true)"
       :modelValue="$props.currentLayer"
       @update:model-value="$emit('update:currentLayer', $event)"
     />
@@ -39,6 +40,7 @@
     >
       <FSButton
         v-if="$props.showMyLocation"
+        :disabled="$props.disabled"
         icon="mdi-crosshairs-gps"
         color="primary"
         variant="full"
@@ -53,12 +55,14 @@
           gap="0"
         >
           <FSButton
+            :disabled="$props.disabled"
             class="fs-map-zoom-plus-button"
             icon="mdi-plus"
             @click="() => map!.zoomIn()"
             :border="false"
           />
           <FSButton
+            :disabled="$props.disabled"
             class="fs-map-zoom-minus-button"
             icon="mdi-minus"
             @click="() => map!.zoomOut()"
@@ -92,12 +96,10 @@
 import { computed, defineComponent, onMounted, type Ref, provide, type PropType, ref, type StyleValue, watch, onUnmounted, markRaw } from "vue";
 
 import type {} from "leaflet.markercluster";
-import { map as createMap, control, tileLayer, latLngBounds, latLng, type LatLng, type FitBoundsOptions, type ZoomPanOptions, type LatLngBounds } from "leaflet";
+import { map as createMap, control, latLngBounds, latLng, type LatLng, type FitBoundsOptions, type ZoomPanOptions, type LatLngBounds } from "leaflet";
 
-import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-
-import { useBreakpoints, useColors, useSlots } from "../../composables";
-import { ColorEnum, MapLayers, MapOverlayPositions, type MapLayer } from "../../models";
+import { useBreakpoints, useColors, useMapLayers, useSlots } from "../../composables";
+import { ColorEnum, MapLayers, MapOverlayPositions } from "../../models";
 
 import FSMapLayerButton from "./FSMapLayerButton.vue";
 import FSMapOverlay from "./FSMapOverlay.vue";
@@ -130,6 +132,11 @@ export default defineComponent({
       required: false,
       default: '100%'
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     grayscale: {
       type: Boolean,
       required: false,
@@ -175,22 +182,20 @@ export default defineComponent({
       required: false,
       default: () => [MapLayers.Map, MapLayers.Imagery]
     },
-    dirtyZoom: {
+    zoom: {
       type: Number,
       required: false,
       default: 16
     }
   },
-  emits: ["update:modelValue", "update:selectedLocationId", "update:selectedAreaId", 'update:overlayMode', 'update:currentLayer', "click:latlng"],
+  emits: ['update:overlayMode', 'update:currentLayer', "click:latlng", "update:zoom", "update:center"],
   setup(props, { emit }) {
-    const { $tr } = useTranslationsProvider();
+    const { layers } = useMapLayers();
     const { isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
     const leafletContainer = ref<HTMLElement>();
-    const locationGroupBounds = ref<LatLngBounds>();
-    const areaGroupBounds = ref<LatLngBounds>();
     const gpsPosition : Ref<LatLng | null> = ref(null);
     const map: Ref<L.Map | null> = ref(null);
     const overlayHeight = ref<number>();
@@ -198,7 +203,6 @@ export default defineComponent({
 
     provide('map', map);
 
-    const defaultZoom = ref(props.dirtyZoom);
     const mapResizeObserver = new ResizeObserver(() => {
       if(!map.value) {
         return;
@@ -206,53 +210,6 @@ export default defineComponent({
       map.value.invalidateSize();
     });
 
-    const mapLayers: MapLayer[] = [
-      {
-        name: MapLayers.Map,
-        label: $tr("ui.map-layer.map", "Map"),
-        image: new URL("../../assets/images/map/map.png", import.meta.url).href,
-        layers: [
-          tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
-            maxZoom: 22,
-            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-            attribution: '© Google Map Data',
-            className: 'fs-map-tile-base-layer'
-          })
-        ]
-      },
-      {
-        name: MapLayers.Imagery,
-        label: $tr("ui.map-layer.imagery", "Imagery"),
-        image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
-        layers: [
-          tileLayer(`https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
-            maxZoom: 22,
-            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-            attribution: '© Google Map Data',
-            className: 'fs-map-tile-base-layer'
-          })
-        ]
-      },
-      {
-        name: MapLayers.Snow,
-        label: $tr("ui.map-layer.snow", "Snow ski map"),
-        image: new URL("../../assets/images/map/snow.png", import.meta.url).href,
-        layers: [
-          tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
-            maxZoom: 22,
-            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-            attribution: '© Google Map Data',
-            className: 'fs-map-tile-base-layer fs-map-tile-grayscale-layer'
-          }),
-          tileLayer(`https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png`, {
-            maxZoom: 18,
-            attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors & ODbL, &copy; <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
-            className: 'fs-map-tile-base-layer'
-          })
-        ]
-      }
-    ];
-
     const bottomOffset = computed(() => {
       if (props.overlayMode !== MapOverlayPositions.Expand && overlayHeight.value && isExtraSmall.value) {
         return overlayHeight.value;
@@ -276,7 +233,7 @@ export default defineComponent({
     }));
 
     const actualLayer = computed(() => {
-      return mapLayers.find((mapLayer) => mapLayer.name === props.currentLayer)?.layers ?? mapLayers[0].layers;
+      return layers.find((mapLayer) => mapLayer.name === props.currentLayer)?.layers ?? layers[0].layers;
     });
 
     const overlaySlots = computed(() => {
@@ -295,7 +252,7 @@ export default defineComponent({
       return map.value.unproject(targetPoint, zoom);
     }
 
-    const flyTo = (lat: number, lng: number, zoom: number = defaultZoom.value, options?: ZoomPanOptions) => {
+    const flyTo = (lat: number, lng: number, zoom: number, options?: ZoomPanOptions) => {
       if(!map.value) {
         return;
       }
@@ -316,7 +273,6 @@ export default defineComponent({
       } else {
         map.value.flyTo(calculateTargetPosition(latLng(lat, lng), zoom), zoom, options);
       }
-      
     }
 
     const setView = (lat: number, lng: number, zoom: number) => {
@@ -329,13 +285,13 @@ export default defineComponent({
     const fitBounds = (bounds: LatLngBounds, options?: FitBoundsOptions) => {
       if (!map.value) {return;}
       const paddingTopLeft: [number, number] = [
-        leftOffset.value,
-        0
+        leftOffset.value + 24,
+        24
       ];
 
       const paddingBottomRight: [number, number] = [
-        0,
-        bottomOffset.value
+        24,
+        bottomOffset.value + 24
       ];
       const paddingOptions = {
         paddingTopLeft,
@@ -353,14 +309,16 @@ export default defineComponent({
 
       const mapOptions = {
         zoomControl: false,
-        scrollWheelZoom: props.enableScrollWheelZoom,
+        scrollWheelZoom: props.enableScrollWheelZoom && !props.disabled,
+        dragging: !props.disabled,
+        doubleClickZoom: false,
         minZoom: 2,
         maxZoom: 22,
         maxBounds: latLngBounds(latLng(-90, -180), latLng(90, 180)),
         maxBoundsViscosity: 1.0,
-        zoom: defaultZoom.value,
+        zoom: props.zoom,
         center: props.center ? latLng(props.center[0], props.center[1]) : latLng(48.85782, 2.29521)
-      };
+      } satisfies L.MapOptions;
 
       map.value = markRaw(createMap(leafletContainer.value, mapOptions));
       
@@ -368,6 +326,21 @@ export default defineComponent({
         emit('click:latlng', e.latlng);
       });
 
+      map.value.on('zoomend', () => {
+        if(!map.value) {
+          return;
+        }
+        emit('update:zoom', map.value.getZoom());
+      });
+
+      map.value.on('moveend', () => {
+        if(!map.value) {
+          return;
+        }
+        const center = map.value.getCenter();
+        emit('update:center', [center.lat, center.lng]);
+      });
+
       map.value.attributionControl.remove();
       control.attribution({ position: 'bottomleft' }).addTo(map.value);
 
@@ -382,7 +355,7 @@ export default defineComponent({
           return;
         }
 
-        flyTo(e.latlng.lat, e.latlng.lng);
+        flyTo(e.latlng.lat, e.latlng.lng, 14);
       });
       
       mapResizeObserver.observe(leafletContainer.value);
@@ -392,38 +365,69 @@ export default defineComponent({
       mapResizeObserver.disconnect();
     });
 
-    watch ([() => props.center, () => map.value], () => {
-      if(!map.value || !props.center) {
+    watch ([() => props.center, () => props.zoom], ([newCenter, newZoom], [oldCenter, oldZoom]) => {
+      if(!map.value || !props.center || !newCenter) {
         return;
       }
-      setView(props.center[0], props.center[1], defaultZoom.value);
+
+      if(map.value.getZoom() === newZoom && map.value.getCenter().equals(latLng(newCenter[0], newCenter[1]))) {
+        return;
+      }
+
+      if((newCenter[0] !== oldCenter?.[0] || newCenter[1] !== oldCenter?.[1]) && newZoom !== oldZoom) {
+        setView(newCenter[0], newCenter[1], newZoom);
+      }
+      else if ((newCenter[0] !== oldCenter?.[0] || newCenter[1] !== oldCenter?.[1])) {
+        setView(newCenter[0], newCenter[1], map.value.getZoom());
+      }
+      else if(newZoom !== oldZoom) {
+        map.value.setZoom(newZoom);
+      }
     }, { immediate: true });
 
     watch([() => props.bounds, () => map.value], () => {
       if(!map.value || !props.bounds) {
         return;
       }
-      fitBounds(props.bounds, { maxZoom: defaultZoom.value });
+
+      //console.log("Bounds changed", props.bounds);
+      fitBounds(props.bounds, { maxZoom: 14 });
     });
 
-    watch(() => props.dirtyZoom, (newZoom) => {
-      defaultZoom.value = newZoom;
-      if(map.value) {
-        map.value.setZoom(newZoom);
+    watch(() => props.enableScrollWheelZoom, (newValue) => {
+      if(!map.value) {
+        return;
+      }
+      if(newValue) {
+        map.value.scrollWheelZoom.enable();
+      } else {
+        map.value.scrollWheelZoom.disable();
+      }
+    }, { immediate: true });
+
+    watch(() => props.disabled, (newValue) => {
+      if(!map.value) {
+        return;
+      }
+      if(newValue) {
+        map.value.dragging.disable();
+        map.value.scrollWheelZoom.disable();
+      } else {
+        map.value.dragging.enable();
+        if(props.enableScrollWheelZoom) {
+          map.value.scrollWheelZoom.enable();
+        }
       }
     }, { immediate: true });
 
     return {
       ColorEnum,
-      defaultZoom,
       leafletContainer,
-      locationGroupBounds,
       overlayHeight,
       overlayWidth,
-      areaGroupBounds,
       map,
       actualLayer,
-      mapLayers,
+      layers,
       gpsPosition,
       style,
       overlaySlots

package/components/map/FSMapFeatureGroup.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { inject, provide, ref, type Ref } from 'vue';
+import { inject, provide, ref, type Ref, onUnmounted } from 'vue';
 
 import { type Map, FeatureGroup } from 'leaflet';
 import { MAP } from './keys';
@@ -46,6 +46,12 @@ export default {
         emit("update:bounds", featureGroup.value.getBounds());
       }
     });
+
+    onUnmounted(() => {
+      if (map.value && map.value.hasLayer(featureGroup.value as unknown as FeatureGroup)) {
+        map.value.removeLayer(featureGroup.value as unknown as FeatureGroup);
+      }
+    });
   }
 };
 </script>

package/components/map/FSMapLayerButton.vue

@@ -4,6 +4,7 @@
     icon="mdi-layers-outline"
     :elevation="true"
     @click="dialog = true"
+    v-bind="$attrs"
   />
   <FSDialog
     v-model="dialog"

package/components/map/FSMapMarker.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script lang="ts">
-import { inject, type PropType, onMounted, type Ref, watch, ref } from 'vue';
+import { inject, type PropType, type Ref, watch, ref, onUnmounted, onMounted } from 'vue';
 
-import { type Map, type DivIcon, divIcon, type LatLng, marker, type Marker, type MarkerClusterGroup } from 'leaflet';
+import { type Map, divIcon, type LatLng, marker, type Marker, type MarkerClusterGroup, type LeafletMouseEvent } from 'leaflet';
 
 import { useColors } from "../../composables";
 
@@ -49,72 +49,90 @@ export default {
     const markerClusterGroup = inject<Ref<MarkerClusterGroup | null>>(MARKERCLUSTERGROUP, ref(null));
 
     const { getColors } = useColors();
-
-    const lastMarker = ref<Marker | null>(null); 
-
-    if(!map) {
-      throw new Error('FSMapTileLayer must be used inside a FSMap component');
-    }
-
-    if(!map.value) {
-      throw new Error('FSMapTileLayer must be used inside a FSMap component with a map');
-    }
-
-    const updateMarker = () => {
-      if(!map.value || !props.latlng) {
-        return;
-      }
-
-      if(lastMarker.value) {
-        if(markerClusterGroup && markerClusterGroup.value) {
-          markerClusterGroup.value.removeLayer(lastMarker.value as Marker);
-        } else {
-          map.value.removeLayer(lastMarker.value as Marker);
-        }
-      }
-
-      let icon: DivIcon | null = null;
+    const getMarkerIcon = () => {
       if(props.variant === 'gps') {
         const size = 16;
-        icon = divIcon({
+        return divIcon({
           html: gpsMarkerHtml(),
           className: 'fs-map-mylocation',
           iconSize: [size, size],
           iconAnchor: [size / 2, size / 2],
         });
-      } else if(props.variant === 'location') {
+      }
+
+      if(props.variant === 'location') {
         const size = 36;
-        icon = divIcon({
+        return divIcon({
           html: locationMarkerHtml(props.icon ?? "mdi-map-marker", getColors(props.color).base, props.label),
           iconSize: [size, size],
           className: props.selected ? 'fs-map-marker fs-map-location fs-map-location-selected' : 'fs-map-marker fs-map-location',
           iconAnchor: [size / 2, size / 2],
         });
-      } else {
-        const size = 16;
-        icon = divIcon({
-          html: pinMarkerHtml(getColors(props.color).base, props.label),
-          iconSize: [size, size],
-          className: props.selected ? 'fs-map-marker fs-map-pin fs-map-pin-selected' : 'fs-map-marker fs-map-pin',
-          iconAnchor: [size / 2, size / 2],
-        });
       }
-      
-      lastMarker.value = marker(props.latlng, { icon });
-      lastMarker.value.on('click', (e) => {
-        emit('click', e);
+
+      const size = 16;
+      return divIcon({
+        html: pinMarkerHtml(getColors(props.color).base, props.label),
+        iconSize: [size, size],
+        className: props.selected ? 'fs-map-marker fs-map-pin fs-map-pin-selected' : 'fs-map-marker fs-map-pin',
+        iconAnchor: [size / 2, size / 2],
       });
+    }
+
+    const actualMarker = ref(marker(props.latlng ?? [0, 0], { icon: getMarkerIcon() }));
+
+    if(!map) {
+      throw new Error('FSMapTileLayer must be used inside a FSMap component');
+    }
+
+    if(!map.value) {
+      throw new Error('FSMapTileLayer must be used inside a FSMap component with a map');
+    }
+
+    watch(map, () => {
+      if(!map.value) {
+        return;
+      }
 
       if(markerClusterGroup && markerClusterGroup.value) {
-        lastMarker.value.addTo(markerClusterGroup.value);
+        actualMarker.value.addTo(markerClusterGroup.value);
       } else {
-        lastMarker.value.addTo(map.value);
+        actualMarker.value.addTo(map.value);
       }
-    };
+    }, { immediate: true });
 
-    onMounted(updateMarker);
+    watch([() => props.variant, () => props.color, () => props.selected], () => {
+      if(!actualMarker.value || !map.value) {
+        return;
+      }
+
+      const icon = getMarkerIcon();
+      actualMarker.value?.setIcon(icon);
+    });
+
+    watch([() => props.latlng?.lat, () => props.latlng?.lng], () => {
+      if(!actualMarker.value || !map.value || !props.latlng) {
+        return;
+      }
+
+      actualMarker.value.setLatLng(props.latlng);
+    });
 
-    watch(() => [props.variant, props.color, props.latlng, props.selected], updateMarker);
+    onMounted(() => {
+      actualMarker.value.on('click', (event: LeafletMouseEvent) => {
+        emit('click', event);
+      });
+    });
+
+    onUnmounted(() => {
+      if(actualMarker.value && map.value) {
+        if(markerClusterGroup && markerClusterGroup.value) {
+          markerClusterGroup.value.removeLayer(actualMarker.value as Marker);
+        } else {
+          map.value.removeLayer(actualMarker.value as Marker);
+        }
+      }
+    })
   }
 };
 </script>

package/components/map/FSMapMarkerClusterGroup.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script lang="ts">
-import { inject, provide, ref, type Ref } from 'vue';
+import { inject, provide, ref, type Ref, onUnmounted } from 'vue';
 
-import { type Map, MarkerClusterGroup, divIcon } from 'leaflet';
+import { LatLngBounds, type Map, MarkerClusterGroup, divIcon } from 'leaflet';
 
 import { clusterMarkerHtml } from '../../utils/leafletMarkers';
 import { MAP } from './keys';
@@ -54,17 +54,42 @@ export default {
 
     provide('markerClusterGroup', markerClusterGroup);
 
-    markerClusterGroup.value.on("layeradd", () => {
-      if(!map.value) {
+    const handleLayerChange = () => {
+      if (!map.value) {
         return;
       }
 
       const layers = markerClusterGroup.value.getLayers();
 
-      if(layers.length === props.expectedLayers && !added) {
+      if (layers.length === 0 && added) {
+        map.value.removeLayer(markerClusterGroup.value as unknown as L.Layer);
+        added = false;
+        return;
+      }
+      if (layers.length === props.expectedLayers && !added) {
         markerClusterGroup.value.addTo(map.value);
         added = true;
-        emit("update:bounds", markerClusterGroup.value.getBounds());
+      }
+      if (layers.length === props.expectedLayers) {
+        const bounds = new LatLngBounds([]);
+        for (const layer of layers as any[]) {
+          if (layer.getBounds) {
+            bounds.extend(layer.getBounds());
+          } else if (layer.getLatLng) {
+            bounds.extend(layer.getLatLng());
+          }
+        }
+
+        emit("update:bounds", layers.length > 0 ? bounds : null);
+      }
+    };
+
+    markerClusterGroup.value.on("layeradd", handleLayerChange);
+    markerClusterGroup.value.on("layerremove", handleLayerChange);
+
+    onUnmounted(() => {
+      if (map.value && map.value.hasLayer(markerClusterGroup.value as unknown as L.Layer)) {
+        map.value.removeLayer(markerClusterGroup.value as unknown as L.Layer);
       }
     });
   }

package/components/map/FSMapPolygon.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { inject, type PropType, onMounted, type Ref, watch, ref } from 'vue';
+import { inject, type PropType, onMounted, type Ref, watch, ref, onUnmounted } from 'vue';
 
 import { type Map, type LatLng, type Polygon, type FeatureGroup, polygon } from 'leaflet';
 
@@ -75,7 +75,19 @@ export default {
 
     onMounted(updatePolygon);
 
-    watch(() => [props.color, props.latlngs], updatePolygon);
+    onUnmounted(() => {
+      if (lastPolygon.value) {
+        if (featureGroup?.value) {
+          featureGroup.value.removeLayer(lastPolygon.value);
+        } else if (map.value?.hasLayer(lastPolygon.value)) {
+          map.value.removeLayer(lastPolygon.value);
+        }
+        lastPolygon.value = null;
+      }
+    });
+
+
+    watch([() => props.color, () => props.latlngs], updatePolygon);
   }
 };
 </script>

package/components/map/FSMapTileLayer.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { inject, type PropType, onMounted, type Ref, watch } from 'vue';
+import { inject, type PropType, onMounted, type Ref, watch, onUnmounted } from 'vue';
 
 import type { Map, Layer } from 'leaflet';
 
@@ -50,6 +50,17 @@ export default {
 
     onMounted(updateLayer);
 
+    onUnmounted(() => {
+      if (lastLayers && map.value) {
+        lastLayers.forEach(layer => {
+          if (map.value.hasLayer(layer)) {
+            map.value.removeLayer(layer);
+          }
+        });
+        lastLayers = [];
+      }
+    });
+
     watch(() => props.layers, updateLayer);
   }
 };

package/composables/index.ts

@@ -4,6 +4,7 @@ export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useDebounce";
 export * from "./useMagicFieldProvider";
+export * from "./useMapLayers";
 export * from "./useRules";
 export * from "./useSlots";
 export * from "./useTables";

package/composables/useMapLayers.ts

@@ -0,0 +1,62 @@
+import { tileLayer } from 'leaflet';
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+
+import { MapLayers } from '@dative-gpi/foundation-shared-components/models';
+
+export const useMapLayers = () => {
+  const { $tr } = useTranslationsProvider();
+
+  const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? "";
+
+  const layers = [
+    {
+      name: MapLayers.Map,
+      label: $tr("ui.map-layer.map", "Map"),
+      image: new URL("../../assets/images/map/map.png", import.meta.url).href,
+      layers: [
+        tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`, {
+          maxZoom: 22,
+          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+          attribution: '© Google Map Data',
+          className: 'fs-map-tile-base-layer'
+        })
+      ]
+    },
+    {
+      name: MapLayers.Imagery,
+      label: $tr("ui.map-layer.imagery", "Imagery"),
+      image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
+      layers: [
+        tileLayer(`https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${apiKey}`, {
+          maxZoom: 22,
+          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+          attribution: '© Google Map Data',
+          className: 'fs-map-tile-base-layer'
+        })
+      ]
+    },
+    {
+      name: MapLayers.Snow,
+      label: $tr("ui.map-layer.snow", "Snow ski map"),
+      image: new URL("../../assets/images/map/snow.png", import.meta.url).href,
+      layers: [
+        tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`, {
+          maxZoom: 22,
+          subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+          attribution: '© Google Map Data',
+          className: 'fs-map-tile-base-layer fs-map-tile-grayscale-layer'
+        }),
+        tileLayer(`https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png`, {
+          maxZoom: 18,
+          attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors & ODbL, &copy; <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
+          className: 'fs-map-tile-base-layer'
+        })
+      ]
+    }
+  ];
+
+  return {
+    layers
+  };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.154",
+  "version": "1.0.156-fix-alert-tools",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.154",
-    "@dative-gpi/foundation-shared-services": "1.0.154"
+    "@dative-gpi/foundation-shared-domain": "1.0.156-fix-alert-tools",
+    "@dative-gpi/foundation-shared-services": "1.0.156-fix-alert-tools"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "66ef41383d6cfdcc36dadf2e77dffb8f4ef88e96"
+  "gitHead": "e142d2893cf730a0b78d2c42eee5f9ec06239155"
 }

package/tools/alertsTools.ts

@@ -21,19 +21,19 @@ export const AlertTools = {
   statusLabel(value: AlertStatus): string {
     switch (value) {
       case AlertStatus.Pending:
-        return $tr('ui.alert-status.pending','Pending');
+        return $tr('ui.alert-status.pending', 'Pending');
       case AlertStatus.Untriggered:
-        return $tr('ui.alert-status.untriggered','Untriggered');
+        return $tr('ui.alert-status.untriggered', 'Untriggered');
       case AlertStatus.Unresolved:
-        return $tr('ui.alert-status.unresolved','Unresolved');
+        return $tr('ui.alert-status.unresolved', 'Unresolved');
       case AlertStatus.Resolved:
-        return $tr('ui.alert-status.resolved','Resolved');
+        return $tr('ui.alert-status.resolved', 'Resolved');
       case AlertStatus.Expired:
-        return $tr('ui.alert-status.expired','Expired');
+        return $tr('ui.alert-status.expired', 'Expired');
       case AlertStatus.Triggered:
-        return $tr('ui.alert-status.triggered','Triggered');
+        return $tr('ui.alert-status.triggered', 'Triggered');
       case AlertStatus.Abandoned:
-        return $tr('ui.alert-status.abandoned','Abandoned');
+        return $tr('ui.alert-status.abandoned', 'Abandoned');
       default: return "";
     }
   },
@@ -74,11 +74,43 @@ export const AlertTools = {
   },
   criticityLabel(value: Criticity): string {
     switch (value) {
-      case Criticity.Warning: return $tr('ui.common.warning','Warning');
-      case Criticity.Error: return $tr('ui.common.error','Error');
-      default: return $tr('ui.common.information','Information');
+      case Criticity.Warning: return $tr('ui.common.warning', 'Warning');
+      case Criticity.Error: return $tr('ui.common.error', 'Error');
+      default: return $tr('ui.common.information', 'Information');
+    }
+  },
+  statusColor(status: AlertStatus): ColorEnum {
+    switch (status) {
+      case AlertStatus.None:
+      case AlertStatus.Pending:
+      case AlertStatus.Expired:
+        return ColorEnum.Warning;
+      case AlertStatus.Unresolved:
+      case AlertStatus.Triggered:
+        return ColorEnum.Error;
+      case AlertStatus.Resolved:
+      case AlertStatus.Untriggered:
+        return ColorEnum.Success;
+      default:
+        return ColorEnum.Warning;
+    }
+  },
+
+  formatValue(value: string) {
+    const n = parseFloat(value);
+
+    if (isNaN(n)) {
+      return value;
+    }
+
+    if (Number.isInteger(n)) {
+      return n;
+    }
+    else {
+      return n.toFixed(2);
     }
   }
+
 }
 
 export const prettyDuration = (n: number | undefined) => {

package/utils/operations.ts

@@ -1,7 +1,42 @@
 const MinusOperator = "-";
 
-// Matches one of the three operators (+, *, /) or the - operator if it is preceded by something that is not another operator
-const operatorsRegex = new RegExp(/[\+\*\/]|(?<=.)(?<![-\+\*\/])[-]/gm);
+/**
+ * Splits an expression by operators while keeping unary minus signs.
+ */
+const splitByOperators = (expression: string): string[] => {
+  const tokens: string[] = [];
+  let current = '';
+  let expectOperand = true;
+
+  for (let i = 0; i < expression.length; i++) {
+    const char = expression[i];
+    if ('+-*/'.includes(char)) {
+      const isUnaryMinus = char === '-' && expectOperand;
+      if (isUnaryMinus) {
+        current += char;
+        expectOperand = true;
+      } else {
+        if (expectOperand) {
+          // 2 consecutive operators or operator at the start
+          return [];
+        }
+        if (current !== '') {
+          tokens.push(current);
+          current = '';
+        }
+        tokens.push(char);
+        expectOperand = true;
+      }
+    } else {
+      current += char;
+      expectOperand = false;
+    }
+  }
+  if (current !== '') {
+    tokens.push(current);
+  }
+  return tokens;
+};
 
 // Matches a nested block of parenthesis
 const parenthesisRegex = new RegExp(/\([^)(]+\)/gm);
@@ -14,7 +49,11 @@ const validateBlock = (block: string, operands: string[] = [], variables: string
   block = block.replaceAll("(", "").replaceAll(")", "");
 
   // Split block on operators (Leave negative signs)
-  const components = block.split(operatorsRegex);
+  const tokens = splitByOperators(block);
+  if (tokens.length === 0) {
+    return false;
+  }
+  const components = tokens.filter(token => !'+-*/'.includes(token));
 
   // Check if each bit is a valid operand
   for (let i = 0; i < components.length; i++) {