@dative-gpi/foundation-shared-components 1.0.145 → 1.0.147-maps

package/components/FSCard.vue

@@ -30,6 +30,14 @@
         </FSRow>
       </FSCol>
     </slot>
+    <FSRow
+      v-if="$slots['top-right']"
+      class="fs-card-top-right"
+    >
+      <slot
+        name="top-right"
+      />
+    </FSRow>
   </div>
 </template>
 
@@ -99,6 +107,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    topRightPadding: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
     }
   },
   setup(props) {
@@ -143,7 +156,8 @@ export default defineComponent({
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": backgrounds.base,
           "--fs-card-border-color"    : borderColor.value,
-          "--fs-card-color"           : darks.base
+          "--fs-card-color"           : darks.base,
+          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
         }
         case "standard": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
@@ -154,7 +168,8 @@ export default defineComponent({
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": colors.value.light,
           "--fs-card-border-color"    : borderColor.value,
-          "--fs-card-color"           : colors.value.lightContrast!
+          "--fs-card-color"           : colors.value.lightContrast!,
+          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
         }
         case "full": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
@@ -165,7 +180,8 @@ export default defineComponent({
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": colors.value.base,
           "--fs-card-border-color"    : borderColor.value,
-          "--fs-card-color"           : colors.value.baseContrast!
+          "--fs-card-color"           : colors.value.baseContrast!,
+          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
         }
         case "gradient": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
@@ -176,7 +192,8 @@ export default defineComponent({
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": gradients.value.base,
           "--fs-card-border-color"    : borderColor.value,
-          "--fs-card-color"           : colors.value.lightContrast!
+          "--fs-card-color"           : colors.value.lightContrast!,
+          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
         }
       }
     });

package/components/FSInformationsMenu.vue

@@ -0,0 +1,124 @@
+<template>
+  <FSMenu
+    :location="$props.location"
+    :closeOnContentClick="false"
+    minWidth="0"
+    v-model="modelValue"
+    v-bind="$attrs"
+  >
+    <template
+      #activator="{ props }"
+    >
+      <slot
+        name="activator"
+        v-bind="props"
+      >
+        <FSButton
+          v-bind="props"
+          :color="lightColors.dark"
+          :iconSize="$props.iconSize"
+          variant="icon"
+          icon="mdi-information-outline"
+        />
+      </slot>
+    </template>
+    <slot
+      name="menuContent"
+    >
+      <FSCard
+        :width="$props.width"
+        :padding="$props.padding"
+        :elevation="true"
+        align="center"
+      >
+        <slot
+          name="cardContent"
+        >
+          <FSRow
+            align="center-center"
+          >
+            <FSText
+              font="text-overline"
+              :lineClamp="4"
+            >
+              {{ $props.content }}
+            </FSText>
+          </FSRow>
+        </slot>
+        <template
+          #top-right
+        >
+          <FSButton
+            variant="icon"
+            icon="mdi-close"
+            iconSize="18px"
+            :color="lightColors.dark"
+            @click="modelValue = false"
+          />
+        </template>
+      </FSCard>
+    </slot>
+  </FSMenu>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, type PropType } from "vue";
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import { ColorEnum } from '@dative-gpi/foundation-shared-components/models';
+
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
+import FSMenu from '@dative-gpi/foundation-shared-components/components/FSMenu.vue';
+import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
+import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
+import FSButton from '@dative-gpi/foundation-shared-components/components/FSButton.vue';
+
+export default defineComponent({
+  name: "FSInformationsMenu",
+  components: {
+    FSMenu,
+    FSCard,
+    FSRow,
+    FSText,
+    FSButton
+  },
+  props: {
+    content: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    location: {
+      type: String,
+      default: "top"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      default: 182
+    },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      default: "16px 8px"
+    },
+    iconSize: {
+      type: String,
+      default: "18px"
+    }
+  },
+  emits: ["update:modelValue"],
+  setup() {
+    const modelValue = ref(false);
+
+    const { getColors } = useColors();
+
+    const lightColors = getColors(ColorEnum.Light);
+
+    return {
+      ColorEnum,
+      modelValue,
+      lightColors
+    };
+  }
+});
+</script>

package/components/FSMenu.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-menu
+    :modelValue="$props.modelValue"
+    :scrollStrategy="$props.scrollStrategy"
+    :offset="$props.offset"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <slot />
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+export default defineComponent({
+  name: "FSMenu",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    scrollStrategy: {
+      type: String,
+      default: "close"
+    },
+    offset: {
+      type: [String, Number] as PropType<string | number | null>,
+      default: "4px"
+    },
+  },
+  emits: ["update:modelValue"],
+  setup() {
+
+    return {
+    };
+  }
+});
+</script>

package/components/deviceOrganisations/FSConnectivity.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-menu
+  <FSMenu
     :closeOnContentClick="false"
     v-model="menu"
     location="bottom center"
@@ -22,7 +22,7 @@
       :deviceConnectivity="$props.deviceConnectivity"
       @close="menu = false"
     />
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
@@ -33,12 +33,14 @@ import type { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-compone
 
 import FSConnectivityCard from "./FSConnectivityCard.vue";
 import FSColorIcon from "../FSColorIcon.vue";
+import FSMenu from '../FSMenu.vue';
 
 export default defineComponent({
   name: "FSConnectivity",
   components: {
     FSConnectivityCard,
-    FSColorIcon
+    FSColorIcon,
+    FSMenu
   },
   props: {
     deviceConnectivity: {

package/components/deviceOrganisations/FSStatus.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-menu
+  <FSMenu
     :closeOnContentClick="false"
     v-model="menu"
     location="bottom center"
@@ -23,7 +23,7 @@
       :statusGroup="$props.statusGroup"
       @close="menu = false"
     />
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
@@ -34,12 +34,14 @@ import type { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-
 
 import FSStatusCard from "./FSStatusCard.vue";
 import FSColorIcon from "../FSColorIcon.vue";
+import FSMenu from '../FSMenu.vue';
 
 export default defineComponent({
   name: "FSStatus",
   components: {
     FSStatusCard,
-    FSColorIcon
+    FSColorIcon,
+    FSMenu
   },
   props: {
     modelStatus: {

package/components/deviceOrganisations/FSStatusRichCard.vue

@@ -2,6 +2,7 @@
   <component
     v-if="$props.modelStatus"
     class="fs-status-rich-card"
+    topRightPadding="2px"
     variant="standard"
     :is="$attrs.onClick ? FSClickable : FSCard"
     :padding="$props.padding"
@@ -41,14 +42,14 @@
         v-bind="{ color }"
       />
     </FSCol>
-    <div
-      class="fs-status-rich-card-corner"
+    <template
+      #top-right
     >
       <slot
         name="corner"
         v-bind="{ color }"
       />
-    </div>
+    </template>
   </component>
 </template>
 
@@ -135,7 +136,7 @@ export default defineComponent({
     });
 
     const title = computed((): string => {
-      return props.title ?? props.modelStatus?.label;
+      return props.title ?? props.modelStatus?.label ?? "";
     });
 
     const value = computed((): string | null => {

package/components/deviceOrganisations/FSWorstAlert.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-menu
+  <FSMenu
     :closeOnContentClick="false"
     v-model="menu"
     location="bottom center"
@@ -28,7 +28,7 @@
       :alertTo="$props.alertTo"
       @close="menu = false"
     />
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
@@ -42,13 +42,15 @@ import { type FSDeviceAlert } from "@dative-gpi/foundation-shared-components/mod
 import FSWorstAlertCard from "./FSWorstAlertCard.vue";
 import FSColorIcon from "../FSColorIcon.vue";
 import FSBadge from "../FSBadge.vue";
+import FSMenu from '../FSMenu.vue';
 
 export default defineComponent({
   name: "FSWorstAlert",
   components: {
     FSWorstAlertCard,
     FSColorIcon,
-    FSBadge
+    FSBadge,
+    FSMenu
   },
   props: {
     deviceWorstAlert: {

package/components/deviceOrganisations/FSWorstAlertCard.vue

@@ -82,7 +82,7 @@ export default defineComponent({
 
     const deviceTimestamp = computed((): string => {
       if (props.deviceAlert.sourceTimestamp) {
-        return epochToLongTimeFormat(props.deviceAlert.sourceTimestamp);
+        return epochToLongTimeFormat(props.deviceAlert.actualTimestamp);
       }
       return "";
     });

package/components/fields/FSColorField.vue

@@ -1,5 +1,4 @@
 <template>
-
   <FSBaseField
     class="fs-color-field"
     :description="$props.description"
@@ -34,7 +33,7 @@
       </FSRow>
     </FSCard>
   </FSBaseField>
-  <v-menu
+  <FSMenu
     origin="top left"
     min-width="300px"
     :activator="`#${activatorId}`"
@@ -73,7 +72,7 @@
         />
       </FSCol>
     </FSCard>
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
@@ -87,6 +86,7 @@ import FSBaseField from "./FSBaseField.vue";
 import FSCard from "../FSCard.vue";
 import FSIcon from "../FSIcon.vue";
 import FSText from "../FSText.vue";
+import FSMenu from "../FSMenu.vue";
 import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
 
@@ -94,6 +94,7 @@ export default defineComponent({
   name: "FSColorField",
   components: {
     FSBaseField,
+    FSMenu,
     FSText,
     FSCard,
     FSIcon,

package/components/fields/FSDateField.vue

@@ -71,7 +71,7 @@
     <template
       v-else
     >
-      <v-menu
+      <FSMenu
         min-width="300px"
         :closeOnContentClick="false"
         :modelValue="menu && !$props.disabled"
@@ -142,7 +142,7 @@
             />
           </FSCol>
         </FSCard>
-      </v-menu>
+      </FSMenu>
     </template>
   </FSCol>
 </template>
@@ -160,6 +160,7 @@ import FSTextField from "./FSTextField.vue";
 import FSCalendar from "../FSCalendar.vue";
 import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
@@ -170,6 +171,7 @@ export default defineComponent({
     FSCalendar,
     FSButton,
     FSCard,
+    FSMenu,
     FSCol
   },
   props: {

package/components/fields/FSDateTimeField.vue

@@ -91,7 +91,8 @@
     <template
       v-else
     >
-      <v-menu
+      <FSMenu
+        min-width="300px"
         :closeOnContentClick="false"
         :modelValue="menu && !$props.disabled"
         @update:modelValue="menu = $event"
@@ -187,7 +188,7 @@
             </FSCol>
           </FSCard>
         </FSWindow>
-      </v-menu>
+      </FSMenu>
     </template>
   </FSCol>
 </template>
@@ -206,6 +207,7 @@ import FSWindow from "../FSWindow.vue";
 import FSButton from "../FSButton.vue";
 import FSClock from "../FSClock.vue";
 import FSCard from "../FSCard.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
@@ -218,6 +220,7 @@ export default defineComponent({
     FSButton,
     FSClock,
     FSCard,
+    FSMenu,
     FSCol
   },
   props: {

package/components/fields/FSRichTextField.vue

@@ -116,7 +116,7 @@
         >
           mdi-link
         </FSIcon>
-        <v-menu
+        <FSMenu
           v-if="$props.variableReferences && $props.variableReferences.length > 0"
           :closeOnContentClick="false"
           v-model="menuVariable"
@@ -146,7 +146,7 @@
               @update:modelValue="insertVariable($event)"
             />
           </FSCard>
-        </v-menu>
+        </FSMenu>
         <v-divider
           vertical
         />
@@ -246,6 +246,7 @@ import FSTextField from "./FSTextField.vue";
 import FSIcon from "../FSIcon.vue";
 import FSCard from "../FSCard.vue";
 import FSText from "../FSText.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
@@ -257,6 +258,7 @@ export default defineComponent({
     FSText,
     FSIcon,
     FSCard,
+    FSMenu,
     FSCol,
     FSRow
   },

package/components/fields/FSTreeViewField.vue

@@ -131,7 +131,7 @@
       <template
         v-else
       >
-        <v-menu
+        <FSMenu
           :closeOnContentClick="false"
           :modelValue="menu && !$props.disabled"
           @update:modelValue="menu = $event"
@@ -233,7 +233,7 @@
               #title
             />
           </v-treeview>
-        </v-menu>
+        </FSMenu>
       </template>
     </FSCol>
   </template>
@@ -253,6 +253,7 @@ import FSFadeOut from "../FSFadeOut.vue";
 import FSLoader from "../FSLoader.vue";
 import FSRadio from "../FSRadio.vue";
 import FSSpan from "../FSSpan.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
@@ -266,6 +267,7 @@ export default defineComponent({
     FSLoader,
     FSRadio,
     FSSpan,
+    FSMenu,
     FSCol,
   },
   props: {

package/components/lists/FSFilterButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-menu
+  <FSMenu
     :closeOnContentClick="false"
     v-model="expanded"
   >
@@ -79,7 +79,7 @@
         </FSFadeOut>
       </FSCol>
     </FSCard>
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
@@ -94,6 +94,7 @@ import FSDivider from "../FSDivider.vue";
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSSpan from "../FSSpan.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
@@ -105,6 +106,7 @@ export default defineComponent({
     FSCard,
     FSChip,
     FSSpan,
+    FSMenu,
     FSCol
   },
   props: {

package/components/lists/FSHeaderButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-menu
+  <FSMenu
     v-model="expanded"
   >
     <template
@@ -61,7 +61,7 @@
         </FSCol>
       </FSCol>
     </FSCard>
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
@@ -73,6 +73,7 @@ import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
 import FSSpan from "../FSSpan.vue";
 import FSChip from "../FSChip.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
@@ -82,6 +83,7 @@ export default defineComponent({
     FSCard,
     FSChip,
     FSSpan,
+    FSMenu,
     FSCol
   },
   props: {

package/components/lists/FSHiddenButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-menu
+  <FSMenu
     :closeOnContentClick="false"
     v-model="expanded"
   >
@@ -55,7 +55,7 @@
         </FSFadeOut>
       </FSCol>
     </FSCard>
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
@@ -66,6 +66,7 @@ import { type ColorBase, ColorEnum, type FSDataTableColumn } from "@dative-gpi/f
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSSpan from "../FSSpan.vue";
+import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
@@ -74,6 +75,7 @@ export default defineComponent({
     FSCard,
     FSChip,
     FSSpan,
+    FSMenu,
     FSCol
   },
   props: {

package/components/map/FSMap.vue

@@ -28,6 +28,7 @@
 
     <FSMapLayerButton
       v-if="$props.allowedLayers?.length && $props.allowedLayers.length > 1"
+      :disabled="$props.disabled"
       :layers="mapLayers.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()"
@@ -130,6 +134,16 @@ export default defineComponent({
       required: false,
       default: '100%'
     },
+    lockZoomOnFlyTo: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     grayscale: {
       type: Boolean,
       required: false,
@@ -353,14 +367,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,
         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));
       
@@ -396,7 +412,9 @@ export default defineComponent({
       if(!map.value || !props.center) {
         return;
       }
-      setView(props.center[0], props.center[1], defaultZoom.value);
+      const zoom = props.lockZoomOnFlyTo ? map.value.getZoom() : defaultZoom.value;
+
+      setView(props.center[0], props.center[1], zoom);
     }, { immediate: true });
 
     watch([() => props.bounds, () => map.value], () => {
@@ -413,6 +431,32 @@ export default defineComponent({
       }
     }, { immediate: true });
 
+    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,

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/tiles/FSLoadTile.vue

@@ -2,6 +2,7 @@
   <FSCard
     class="fs-load-tile"
     padding="11px"
+    topRightPadding="1px"
     :height="heights.card"
     :width="widths.card"
     :style="style"
@@ -39,19 +40,21 @@
         :width="widths.image"
       />
     </FSRow>
-    <FSCard
+    <template 
       v-if="$props.selectable"
-      class="fs-tile-checkbox"
-      :height="['40px', '32px']"
-      :width="['40px', '32px']"
-      :border="false"
+      #top-right
     >
-      <FSCheckbox
-        :modelValue="$props.modelValue"
-        :disabled="true"
-        @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-      />
-    </FSCard>
+      <FSCard
+        padding="8px"
+        :border="false"
+      >
+        <FSCheckbox
+          :modelValue="$props.modelValue"
+          :disabled="true"
+          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+        />
+      </FSCard>
+    </template>
   </FSCard>
 </template>
 

package/components/tiles/FSTile.vue

@@ -12,23 +12,26 @@
       :href="$props.href"
       width="100%"
       height="100%"
+      topRightPadding="1px"
       :to="$props.to"
       :style="style"
       v-bind="$attrs"
     >
       <slot />
-      <FSCard
+      <template 
         v-if="$props.selectable"
-        class="fs-tile-checkbox"
-        :height="['40px', '32px']"
-        :width="['40px', '32px']"
-        :border="false"
+        #top-right
       >
-        <FSCheckbox
-          :modelValue="$props.modelValue"
-          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-        />
-      </FSCard>
+        <FSCard
+          padding="8px"
+          :border="false"
+        >
+          <FSCheckbox
+            :modelValue="$props.modelValue"
+            @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+          />
+        </FSCard>
+      </template>
     </FSClickable>
 
     <FSClickable
@@ -53,22 +56,24 @@
       :style="style"
       width="100%"
       height="100%"
+      topRightPadding="1px"
       v-bind="$attrs"
     >
       <slot />
-      <FSCard
+      <template 
         v-if="$props.selectable"
-        class="fs-tile-checkbox"
-        variant="background"
-        :height="['40px', '32px']"
-        :width="['40px', '32px']"
-        :border="false"
+        #top-right
       >
-        <FSCheckbox
-          :modelValue="$props.modelValue"
-          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-        />
-      </FSCard>
+        <FSCard
+          padding="8px"
+          :border="false"
+        >
+          <FSCheckbox
+            :modelValue="$props.modelValue"
+            @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+          />
+        </FSCard>
+      </template>
     </FSCard>  
     
     <div
@@ -105,7 +110,7 @@ export default defineComponent({
   },
   props: {
     to: {
-      type: [String, Object] as PropType<string | RouteLocation | null>,
+      type: [String, Object] as PropType<RouteLocation | null>,
       required: false,
       default: null
     },

package/composables/useBreakpoints.ts

@@ -21,7 +21,7 @@ export const useBreakpoints = () => {
     };
 
     const isTouchScreenEnabled = computed((): boolean => {
-        return navigator.maxTouchPoints > 0;
+        return window.matchMedia('(hover: none), (pointer: coarse), (pointer: none)').matches;
     });
 
     const isMobileSized = computed((): boolean => {

package/models/deviceAlerts.ts

@@ -7,4 +7,5 @@ export interface FSDeviceAlert {
     criticity: Criticity;
     sourceTimestamp?: number | null;
     enqueuedTimestamp?: number | null;
+    actualTimestamp?: number | null;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.145",
+  "version": "1.0.147-maps",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.145",
-    "@dative-gpi/foundation-shared-services": "1.0.145"
+    "@dative-gpi/foundation-shared-domain": "1.0.147-maps",
+    "@dative-gpi/foundation-shared-services": "1.0.147-maps"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "6c88c1ce189ab312cb04f5956ca391e94b1a0dbe"
+  "gitHead": "ae8bef1eca27c0f0c345f01c69bf851e12fec0df"
 }

package/styles/components/fs_card.scss

@@ -4,6 +4,7 @@
     padding: var(--fs-card-padding);
     height: var(--fs-card-height);
     width: var(--fs-card-width);
+    position: relative;
     display: flex;
     
     border-color: var(--fs-card-border-color);
@@ -21,4 +22,11 @@
     &-gradient {
         background: var(--fs-card-background-color);
     }
+
+    .fs-card-top-right {
+        position: absolute;
+        line-height: normal;
+        right: var(--fs-card-top-right-padding);
+        top: var(--fs-card-top-right-padding);
+    }
 }

package/styles/components/fs_status_rich_card.scss

@@ -4,10 +4,3 @@
   background-color: var(--fs-status-rich-card-background-color);
   border-color: var(--fs-status-rich-card-border-color);
 }
-
-.fs-status-rich-card-corner {
-  position: absolute;
-  display: flex;
-  right: 2px;
-  top: 2px;
-}

package/styles/components/fs_tile.scss

@@ -25,15 +25,6 @@
     background: var(--fs-tile-left-border-color);
 }
 
-.fs-tile-checkbox {
-    border-radius: 4px;
-    position: absolute;
-    align-items: center;
-    justify-content: center;
-    top: 1px;
-    right: 1px;
-}
-
 .fs-location-tile-text-container {
     min-width: 0;
 }

package/styles/globals/scrollbars.scss

@@ -14,6 +14,7 @@
   .fs-hide-x-scrollbar {
     overflow-x: scroll !important;
 
+    // Styles pour WebKit (Chrome, Safari)
     &::-webkit-scrollbar {
       height: 8px;
     }
@@ -25,11 +26,15 @@
     &:hover {
       --scrollbar-x-color: #00000022;
     }
+    &:not(:hover) {
+      --scrollbar-y-color: #00000000;
+    }
   }
 
   .fs-hide-y-scrollbar {
     overflow-y: scroll !important;
 
+    // Styles pour WebKit (Chrome, Safari)
     &::-webkit-scrollbar {
       width: 8px;
     }
@@ -41,25 +46,18 @@
     &:hover {
       --scrollbar-y-color: #00000022;
     }
+    &:not(:hover) {
+      --scrollbar-y-color: #00000000;
+    }
   }
 }
 
 @include touchscreen {
   .fs-hide-x-scrollbar {
     overflow-x: scroll;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    scrollbar-width: none;
   }
 
   .fs-hide-y-scrollbar {
     overflow-y: scroll;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    scrollbar-width: none;
   }
 }

package/styles/globals/touchscreen.scss

@@ -1,11 +1,11 @@
 @mixin touchscreen {
-    @media (hover: none) {
+    @media (hover: none), (pointer: coarse), (pointer: none) {
         @content;
     }
 }
 
 @mixin clickscreen {
-    @media not all and (hover: none) {
+    @media (hover: hover), (pointer: fine) {
         @content;
     }
 }