@dative-gpi/foundation-shared-components 1.0.128-fix-mobile-8 → 1.0.128-remove-deprecated-scenario

package/components/FSBreadcrumbs.vue

@@ -1,7 +1,7 @@
 <template>
   <v-breadcrumbs
     class="fs-breadcrumbs"
-    :items="items"
+    :items="$props.items"
     :style="style"
     v-bind="$attrs"
   >
@@ -9,7 +9,7 @@
       #title="{ item }"
     >
       <FSSpan
-        class="fs-breadcrumbs-label"
+        :class="classes(item)"
       >
         {{ item.title }}
       </FSSpan>
@@ -31,9 +31,7 @@
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
-import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
-
-import { sizeToVar } from "../utils";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
@@ -51,34 +49,28 @@ export default defineComponent({
       default: () => []
     }
   },
-  setup(props) {
-    const { isExtraSmall } = useBreakpoints();
+  setup() {
     const { getColors } = useColors();
 
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => ({
-      "--fs-breadcrumbs-height"        : sizeToVar(["20px", "16px"]),
       "--fs-breadcrumbs-color"         : darks.dark,
       "--fs-breadcrumbs-active-color"  : darks.base,
       "--fs-breadcrumbs-disabled-color": darks.soft
     }));
 
-    const items = computed((): FSBreadcrumbItem[] => {
-      if (isExtraSmall.value && props.items.length > 3) {
-        const mobileItems: FSBreadcrumbItem[] = [0, -2, -1].map((index) => props.items.at(index)!)
-        mobileItems.splice(1, 0, {
-          title    : "...",
-          disabled : true
-        });
-        return mobileItems;
+    const classes = (item: FSBreadcrumbItem): string[] => {
+      const classNames = ["fs-breadcrumbs-label"];
+      if (item.disabled) {
+        classNames.push("fs-breadcrumbs-label-disabled");
       }
-      return props.items;
-    });
+      return classNames;
+    };
 
     return {
-      items,
-      style
+      style,
+      classes
     };
   }
 });

package/components/FSDialogMenu.vue

@@ -6,8 +6,8 @@
   >
     <FSCard
       width="calc(100vw - 48px)"
-      :padding="$props.cardPadding"
-      :gap="$props.cardGap"
+      padding="8px"
+      gap="24px"
       :color="$props.color"
       :class="classes"
     >
@@ -43,16 +43,6 @@ export default defineComponent({
       required: false,
       default: null
     },
-    cardPadding: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "8px"
-    },
-    cardGap: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "24px"
-    },
     modelValue: {
       type: Boolean,
       required: false,

package/components/FSDialogRemove.vue

@@ -21,7 +21,7 @@
             mdi-alert-outline
           </FSIcon>
           <FSRow
-            gap="4px"
+            gap="2px"
           >
             <FSSpan>
               {{ $tr("dialog-remove.body-regular", "This action is") }}

package/components/FSFadeOut.vue

@@ -84,7 +84,7 @@ export default defineComponent({
 
     const elementId = `id${uuidv4()}`;
 
-    const showOutsideScrollbar = computed(() => props.scrollOutside && !isTouchScreenEnabled.value);
+    const showOutsideScrollbar = computed(() => props.scrollOutside && !isTouchScreenEnabled);
 
     const style = computed((): StyleValue => ({
       "--fs-fade-out-height"            : props.height ? sizeToVar(props.height) : "initial",

package/components/FSSpan.vue

@@ -1,15 +1,13 @@
 <template>
-  <div
+  <span
     :class="classes"
     :style="style"
     v-bind="$attrs"
   >
-    <span>
-      <slot>
-        {{ $props.label }}
-      </slot>
-    </span>
-  </div>
+    <slot>
+      {{ $props.label }}
+    </slot>
+  </span>
 </template>
 
 <script lang="ts">
@@ -51,7 +49,6 @@ export default defineComponent({
     const { slots } = useSlots();
 
     const style = computed((): StyleValue => ({
-      "--fs-span-text-align": props.align,
       "--fs-span-line-clamp": props.lineClamp.toString(),
       ...fontStyles.value
     }));

package/components/FSText.vue

@@ -1,15 +1,13 @@
 <template>
-  <div
+  <span
     :class="classes"
     :style="style"
     v-bind="$attrs"
   >
-    <span>
-      <slot>
-        {{ $props.label }}
-      </slot>
-    </span>
-  </div>
+    <slot>
+      {{ $props.label }}
+    </slot>
+  </span>
 </template>
 
 <script lang="ts">

package/components/fields/FSAutocompleteField.vue

@@ -121,7 +121,6 @@
       </FSCard>
     </FSSlideGroup>
     <FSDialogMenu
-      cardPadding="16px"
       v-model="dialog"
     >
       <template
@@ -140,52 +139,69 @@
           >
             <FSRow
               v-for="(item, index) in searchItems"
-              align="center-left"
-              height="36px"
-              :wrap="false"
               :key="index"
-              @click="$props.multiple ?
-                onCheckboxChange(item[$props.itemValue!]) :
-                onRadioChange(item[$props.itemValue!])
-              "
             >
-              <FSRow
-                style="min-width: 0;"
-                :wrap="false"
+              <FSCheckbox
+                v-if="$props.multiple"
+                :label="item[$props.itemTitle!]"
+                :editable="$props.editable"
+                :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
+                @update:modelValue="() => onCheckboxChange(item[$props.itemValue!])"
               >
-                <slot
-                  name="item-prepend"
-                  v-bind="{ item }"
-                />
-                <FSSpan
-                  :font="selectedItems.includes(item) ? 'text-button' : 'text-body'"
+                <template
+                  #label="{ font }"
                 >
-                  {{ item[$props.itemTitle!] }}
-                </FSSpan>
-              </FSRow>
+                  <FSRow
+                    align="center-left"
+                    :wrap="false"
+                  >
+                    <slot
+                      name="item-prepend"
+                      v-bind="{ item }"
+                    />
+                    <FSSpan
+                      :font="font"
+                    >
+                      {{ item[$props.itemTitle!] }}
+                    </FSSpan>
+                  </FSRow>
+                </template>
+              </FSCheckbox>
+              <FSRadio
+                v-else
+                :selected="$props.modelValue === item[$props.itemValue!]"
+                :label="item[$props.itemTitle!]"
+                :editable="$props.editable"
+                :item="item"
+                :modelValue="item[$props.itemValue!]"
+                @update:modelValue="() => onRadioChange(item[$props.itemValue!])"
+              >
+                <template
+                  #label="{ font }"
+                >
+                  <FSRow
+                    align="center-left"
+                    :wrap="false"
+                  >
+                    <slot
+                      name="item-prepend"
+                      v-bind="{ item }"
+                    />
+                    <FSSpan
+                      :font="font"
+                    >
+                      {{ item[$props.itemTitle!] }}
+                    </FSSpan>
+                  </FSRow>
+                </template>
+              </FSRadio>
               <FSRow
                 align="center-right"
-                width="hug"
-                :wrap="false"
               >
                 <slot
                   name="item-append"
                   v-bind="{ item }"
                 />
-                <FSCheckbox
-                  v-if="$props.multiple"
-                  :editable="$props.editable"
-                  :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
-                  @update:modelValue="onCheckboxChange(item[$props.itemValue!])"
-                />
-                <FSRadio
-                  v-else
-                  :selected="$props.modelValue === item[$props.itemValue!]"
-                  :editable="$props.editable"
-                  :item="item"
-                  :modelValue="item[$props.itemValue!]"
-                  @update:modelValue="onRadioChange(item[$props.itemValue!])"
-                />
               </FSRow>
             </FSRow>
           </FSCol>

package/components/fields/FSSelectField.vue

@@ -122,7 +122,6 @@
       </FSCard>
     </FSSlideGroup>
     <FSDialogMenu
-      cardPadding="16px"
       v-model="dialog"
     >
       <template
@@ -136,52 +135,69 @@
           >
             <FSRow
               v-for="(item, index) in $props.items"
-              align="center-left"
-              height="36px"
-              :wrap="false"
               :key="index"
-              @click="$props.multiple ?
-                onCheckboxChange(item[$props.itemValue!]) :
-                onRadioChange(item[$props.itemValue!])
-              "
             >
-              <FSRow
-                style="min-width: 0;"
-                :wrap="false"
+              <FSCheckbox
+                v-if="$props.multiple"
+                :label="item[$props.itemTitle!]"
+                :editable="$props.editable"
+                :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
+                @update:modelValue="() => onCheckboxChange(item[$props.itemValue!])"
               >
-                <slot
-                  name="item-prepend"
-                  v-bind="{ item }"
-                />
-                <FSSpan
-                  :font="selectedItems.includes(item) ? 'text-button' : 'text-body'"
+                <template
+                  #label="{ font }"
                 >
-                  {{ item[$props.itemTitle!] }}
-                </FSSpan>
-              </FSRow>
+                  <FSRow
+                    align="center-left"
+                    :wrap="false"
+                  >
+                    <slot
+                      name="item-prepend"
+                      v-bind="{ item }"
+                    />
+                    <FSSpan
+                      :font="font"
+                    >
+                      {{ item[$props.itemTitle!] }}
+                    </FSSpan>
+                  </FSRow>
+                </template>
+              </FSCheckbox>
+              <FSRadio
+                v-else
+                :selected="$props.modelValue === item[$props.itemValue!]"
+                :label="item[$props.itemTitle!]"
+                :editable="$props.editable"
+                :item="item"
+                :modelValue="item[$props.itemValue!]"
+                @update:modelValue="() => onRadioChange(item[$props.itemValue!])"
+              >
+                <template
+                  #label="{ font }"
+                >
+                  <FSRow
+                    align="center-left"
+                    :wrap="false"
+                  >
+                    <slot
+                      name="item-prepend"
+                      v-bind="{ item }"
+                    />
+                    <FSSpan
+                      :font="font"
+                    >
+                      {{ item[$props.itemTitle!] }}
+                    </FSSpan>
+                  </FSRow>
+                </template>
+              </FSRadio>
               <FSRow
                 align="center-right"
-                width="hug"
-                :wrap="false"
               >
                 <slot
                   name="item-append"
                   v-bind="{ item }"
                 />
-                <FSCheckbox
-                  v-if="$props.multiple"
-                  :editable="$props.editable"
-                  :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
-                  @update:modelValue="onCheckboxChange(item[$props.itemValue!])"
-                />
-                <FSRadio
-                  v-else
-                  :selected="$props.modelValue === item[$props.itemValue!]"
-                  :editable="$props.editable"
-                  :item="item"
-                  :modelValue="item[$props.itemValue!]"
-                  @update:modelValue="onRadioChange(item[$props.itemValue!])"
-                />
               </FSRow>
             </FSRow>
           </FSCol>

package/components/lists/FSDataTableUI.vue

@@ -4,13 +4,13 @@
     style="position: relative;"
   >
     <FSRow
-      v-if="$props.showSearch || (!isMobileSized && ($slots['prepend-toolbar'] || $slots['toolbar'] || $slots['append-toolbar'])) || (!$props.disableTable && !$props.disableIterator)"
+      v-if="$props.showSearch || (!isExtraSmall && ($slots.prependToolbar || $slots.toolbar )) || (!$props.disableTable && !$props.disableIterator)"
       align="bottom-left"
-      :wrap="isMobileSized ? false : true"
+      :wrap="isExtraSmall ? false : true"
       width="fill"
     >
       <slot
-        v-if="!isMobileSized"
+        v-if="!isExtraSmall"
         name="prepend-toolbar"
       />
       <template
@@ -28,22 +28,16 @@
         />
       </template>
       <slot
-        v-if="!isMobileSized"
+        v-if="!isExtraSmall"
         name="toolbar"
       />
       <template
-        v-if="$slots['append-toolbar'] || (!$props.disableTable && !$props.disableIterator)"
+        v-if="!$props.disableTable && !$props.disableIterator"
       >
         <FSRow
           align="center-right"
-          :width="isExtraSmall ? 'hug' : 'fill'"
         >
-          <slot
-            v-if="!isMobileSized"
-            name="append-toolbar"
-          />
           <FSOptionGroup
-            v-if="!$props.disableTable && !$props.disableIterator"
             :values="modeOptions"
             :singleColor="true"
             :required="true"
@@ -54,19 +48,13 @@
       </template>
     </FSRow>
     <FSRow
-      v-if="isMobileSized && ($slots['prepend-toolbar'] || $slots['toolbar'] || $slots['append-toolbar'])"
+      v-if="isExtraSmall && hasToolbar"
     >
-      <FSSlideGroup>
-        <slot
-          name="prepend-toolbar"
-        />
+      <FSWrapGroup>
         <slot
           name="toolbar"
         />
-        <slot
-          name="append-toolbar"
-        />
-      </FSSlideGroup>
+      </FSWrapGroup>
     </FSRow>
     <FSRow
       v-if="showFiltersRow"
@@ -912,8 +900,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "update:headers", "update:search", "update:showFilters", "update:filters", "update:mode", "update:sortBy", "update:rowsPerPage", "update:page", "update:include", "update:items", "click:row"],
   setup(props, { emit }) {
-    const { isExtraSmall, isMobileSized } = useBreakpoints();
     const { handleRoutingEvent } = useRouting();
+    const { isExtraSmall } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
     const { getColors } = useColors();
     const router = useRouter();
@@ -974,6 +962,10 @@ export default defineComponent({
       
     });
 
+    const hasToolbar = computed((): boolean => {
+      return !!useSlots().slots["toolbar"];
+    });
+
     const innerSlots = computed((): { [label: string]: Slot<any> } => {
       const slots = { ...useSlots().slots };
       delete slots["toolbar"];
@@ -1585,6 +1577,7 @@ export default defineComponent({
       innerMode,
       modeOptions,
       innerPage,
+      hasToolbar,
       pageOptions,
       innerShowFilters,
       showFiltersRow,
@@ -1603,7 +1596,6 @@ export default defineComponent({
       classes,
       style,
       size,
-      isMobileSized,
       isExtraSmall,
       draggableDisabled,
       elementId,

package/components/tiles/FSChartTile.vue

@@ -0,0 +1,73 @@
+<template>
+  <FSChartTileUI
+    v-if="chart"
+    :label="chart.label"
+    :icon="chart.icon"
+    :type="chart.chartType"
+    :imageId="chart.imageId"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, watch, computed } from "vue";
+import type { PropType } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { chartIcon } from "@dative-gpi/foundation-shared-components/tools";
+
+import { useChartOrganisation, useChartOrganisationType } from "@dative-gpi/foundation-core-services/composables";
+
+import { ApplicationScope } from "@dative-gpi/foundation-shared-domain/enums";
+import FSChartTileUI from "./FSChartTileUI.vue";
+
+export default defineComponent({
+  name: "FSChartTile",
+  components: {
+    FSChartTileUI
+  },
+  props: {
+    chartId: {
+      type: String,
+      required: true
+    },
+    scope: {
+      type: Object as PropType<ApplicationScope | number>,
+      required : true
+    }
+  },
+  setup(props) {
+
+    const {get : fetchChartOrganisation, entity : chartOrganisation } = useChartOrganisation();
+    const {get : fetchChartOrganisationType, entity : chartOrganisationType } = useChartOrganisationType();
+
+    const chart = computed(() =>{
+      if(props.scope == ApplicationScope.Organisation){
+        return chartOrganisation.value;
+      }
+      else if(props.scope == ApplicationScope.OrganisationType){
+        return chartOrganisationType.value;
+      }
+      else{
+        return null
+      }
+    })
+
+    watch(() => [props.chartId, props.scope], () =>{
+      if(props.scope == ApplicationScope.Organisation){
+        fetchChartOrganisation(props.chartId);
+      }
+      else if(props.scope == ApplicationScope.OrganisationType)
+      {
+        fetchChartOrganisationType(props.chartId)
+      }
+    }, {immediate : true})
+
+    return {
+      ColorEnum,
+      chart,
+      chartIcon
+    };
+  }
+});
+</script>

package/components/tiles/FSLocationTileUI.vue

@@ -46,7 +46,7 @@
               align="center-left"
             >
               <FSColor
-                padding="0 8px"
+                width="24px"
                 height="24px"
                 :color="ColorEnum.Light"
                 :border="false"

package/components/views/desktop/FSBaseDefaultDesktopView.vue

@@ -12,9 +12,11 @@
       <slot
         name="header"
       >
+
         <FSRow
-          :style="`position: sticky; top: 0px; z-index: 3; background-color: ${backgroundColor}; margin-top: ${$props.stickyTitleTopOffset};`"
-          :padding="`24px ${isTouchScreenEnabled ? '24px' : '16px'} 16px 24px`"
+          padding="24px 16px 16px 24px"
+          style="position: sticky; top: 0px; z-index: 3;"
+          :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
         >
           <slot
             name="title"
@@ -43,8 +45,8 @@
         </FSCol>
         <FSRow
           v-if="$slots.toolbar"
+          padding="0px 16px 8px 24px"
           :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
-          :padding="`0px ${isTouchScreenEnabled ? '24px' : '16px'} 8px 24px`"
         >
           <FSSlideGroup
             width="100%"
@@ -58,8 +60,8 @@
 
       <FSCol
         height="fill"
+        :padding="$slots.toolbar ? '8px 16px 24px 24px' : '16px 16px 24px 24px'"
         gap="0px"
-        :padding="`${$slots.toolbar ? '8px' : '16px'} ${isTouchScreenEnabled ? '24px' : '16px'} 24px 24px`"
       >
         <slot />
       </FSCol>
@@ -72,7 +74,7 @@ import { defineComponent, type PropType, computed } from "vue";
 
 import { type FSBreadcrumbItem, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import { useBreakpoints, useColors } from "../../../composables"
+import { useColors } from "../../../composables"
  
 import FSCol from "../../FSCol.vue";
 import FSRow from "../../FSRow.vue"
@@ -117,8 +119,7 @@ export default defineComponent({
       default: "0px"
     }
   },
-  setup() {
-    const { isTouchScreenEnabled } = useBreakpoints();
+  setup(){
     const { getColors } = useColors();
 
     const backgroundColor = computed(() => {
@@ -126,9 +127,8 @@ export default defineComponent({
     });
 
     return {
-      isTouchScreenEnabled,
       backgroundColor
-    };
+    }
   }
 });
 </script>

package/components/views/desktop/FSBaseEntityDesktopView.vue

@@ -36,7 +36,6 @@
           :icon="$props.icon"
         />
         <FSCol
-          style="min-width: 0"
           align="center-left"
           height="fill"
         >

package/components/views/mobile/FSBaseDefaultMobileView.vue

@@ -12,9 +12,11 @@
       <slot
         name="header"
       >
+
         <FSRow
-          :style="`position: sticky; top: 0px; z-index: 3; background-color: ${backgroundColor}; margin-top: ${$props.stickyTitleTopOffset};`"
-          :padding="`24px ${isTouchScreenEnabled ? '24px' : '16px'} 16px 24px`"
+          padding="24px 16px 16px 24px"
+          style="position: sticky; top: 0px; z-index: 3;"
+          :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
         >
           <slot
             name="title"
@@ -43,8 +45,8 @@
         </FSCol>
         <FSRow
           v-if="$slots.toolbar"
+          padding="0px 16px 8px 24px"
           :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
-          :padding="`0px ${isTouchScreenEnabled ? '24px' : '16px'} 8px 24px`"
         >
           <FSSlideGroup>
             <slot
@@ -56,8 +58,8 @@
 
       <FSCol
         height="fill"
+        :padding="$slots.toolbar ? '8px 16px 24px 24px' : '16px 16px 24px 24px'"
         gap="0px"
-        :padding="`${$slots.toolbar ? '8px' : '16px'} ${isTouchScreenEnabled ? '24px' : '16px'} 24px 24px`"
       >
         <slot />
       </FSCol>
@@ -70,7 +72,7 @@ import { defineComponent, type PropType, computed } from "vue";
 
 import { type FSBreadcrumbItem, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import { useBreakpoints, useColors } from "../../../composables"
+import { useColors } from "../../../composables"
  
 import FSCol from "../../FSCol.vue";
 import FSRow from "../../FSRow.vue"
@@ -115,8 +117,7 @@ export default defineComponent({
       default: "0px"
     }
   },
-  setup() {
-    const { isTouchScreenEnabled } = useBreakpoints();
+  setup(){
     const { getColors } = useColors();
 
     const backgroundColor = computed(() => {
@@ -124,9 +125,8 @@ export default defineComponent({
     });
 
     return {
-      isTouchScreenEnabled,
       backgroundColor
-    };
+    }
   }
 });
 </script>

package/components/views/mobile/FSBaseEntityMobileView.vue

@@ -28,7 +28,6 @@
           :size="actualImageSize"
         />
         <FSCol
-          style="min-width: 0"
           align="center-left"
           height="fill"
         >

package/composables/useSlots.ts

@@ -20,12 +20,11 @@ export const useSlots = () => {
         // Directive wrapper (v-for, v-if)
         case "symbol":
           switch (element.type) {
-            // On a v-for, we want to get the children of the v-for
             case Symbol.for("v-fgt"):
               returnElements.push(...recursiveGetChildren(element.children));
               break;
-              // On a negative v-if, we want to get nothing
             case Symbol.for("v-cmt"):
+              returnElements.push(element);
               break;
             default:
               returnElements.push(element);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.128-fix-mobile-8",
+  "version": "1.0.128-remove-deprecated-scenario",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.128-fix-mobile-8",
-    "@dative-gpi/foundation-shared-services": "1.0.128-fix-mobile-8"
+    "@dative-gpi/foundation-shared-domain": "1.0.128-remove-deprecated-scenario",
+    "@dative-gpi/foundation-shared-services": "1.0.128-remove-deprecated-scenario"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "5b1dcb13a29b9fc131731f859b12dd31dcd6beff"
+  "gitHead": "c130943e7cb96800dbd98069299ec689da3c9866"
 }

package/styles/components/fs_breadcrumbs.scss

@@ -1,36 +1,48 @@
-.fs-breadcrumbs {
-    height: var(--fs-breadcrumbs-height) !important;
-    padding: 0 !important;
-    gap: 0 !important;
+.fs-breadcrumbs-label {
+    cursor: pointer;
+    user-select: none;
+    color: var(--fs-breadcrumbs-color);
 
-    max-width: 100%;
+    &-disabled {
+        color: var(--fs-breadcrumbs-disabled-color) !important;
+    }
+
+    &:hover {
+        text-decoration: underline;
+    }
+
+    &:active {
+        color: var(--fs-breadcrumbs-active-color) !important;
+    }
 }
 
-.v-breadcrumbs-item,
-.v-breadcrumbs-item--link {
-    padding: 0 !important;
-    user-select: none;
-    cursor: pointer;
+// .fs-breadcrumbs-divider {
+//     margin-bottom: 2px !important;
+// }
 
-    align-self: stretch;
-    display: flex;
-    flex: 1 0 0;
+.fs-breadcrumbs.v-breadcrumbs {
+    line-height: normal!important;
+    padding: 0 !important;
+    gap: 8px !important;
+    height: 20px;
+}
 
-    max-width: fit-content;
-    min-width: 20px;
+.v-breadcrumbs-item {
+    padding: 0 !important;
 
     &--disabled {
         opacity: 1 !important;
         color: var(--fs-breadcrumbs-disabled-color) !important;
     }
-}
 
-.v-breadcrumbs-item:last-child > .fs-breadcrumbs-label {
-    @extend .text-button;
+    &:last-child > .fs-breadcrumbs-label-disabled {
+        @extend .text-button;
 
-    color: var(--fs-breadcrumbs-active-color) !important;
+        color: var(--fs-breadcrumbs-active-color) !important;
+    }
 }
 
 .v-breadcrumbs-divider {
+    padding: 0 !important;
     color: var(--fs-breadcrumbs-color) !important;
 }

package/styles/components/fs_button.scss

@@ -2,6 +2,11 @@
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
     color: var(--fs-button-color) !important;
 
+    &:not(.fs-button-disabled, :has(.fs-button-load)):hover {
+        color: var(--fs-button-hover-color) !important;
+        cursor: pointer !important;
+    }
+
     &.fs-button-disabled,
     &:has(.fs-button-load) {
         cursor: default !important;
@@ -11,11 +16,4 @@
         color: inherit;
         text-decoration: none;
     }
-
-    @include clickscreen {
-        &:not(.fs-button-disabled, :has(.fs-button-load)):hover {
-            color: var(--fs-button-hover-color) !important;
-            cursor: pointer !important;
-        }
-    }
 }

package/styles/components/fs_chip.scss

@@ -12,17 +12,15 @@
 .fs-chip-editable {
     cursor: pointer !important;
 
+    &:hover {
+        background-color: var(--fs-chip-hover-background-color) !important;
+        border-color: var(--fs-chip-hover-border-color) !important;
+        color: var(--fs-chip-hover-color) !important;
+    }
+
     &:active {
         background-color: var(--fs-chip-active-background-color) !important;
         border-color: var(--fs-chip-active-border-color) !important;
         color: var(--fs-chip-active-color) !important;
     }
-
-    @include clickscreen {
-        &:hover {
-            background-color: var(--fs-chip-hover-background-color) !important;
-            border-color: var(--fs-chip-hover-border-color) !important;
-            color: var(--fs-chip-hover-color) !important;
-        }
-    }
 }

package/styles/components/fs_clickable.scss

@@ -11,7 +11,18 @@
     &.fs-clickable-disabled {
         cursor: default;
     }
-    
+
+    &:not(.fs-clickable-disabled):hover:not(:has( .fs-stopclick:hover)) {
+        background-color: var(--fs-clickable-hover-background-color) !important;
+        border-color: var(--fs-clickable-hover-border-color) !important;
+        color: var(--fs-clickable-hover-color) !important;
+
+        & .fs-card-clickable {
+            transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+            background-color: var(--fs-clickable-hover-background-color);
+        }
+    }
+
     &:not(.fs-clickable-disabled):active:not(:has( .fs-stopclick:hover)) {
         background-color: var(--fs-clickable-active-background-color) !important;
         border-color: var(--fs-clickable-active-border-color) !important;
@@ -22,19 +33,6 @@
             background-color: var(--fs-clickable-active-background-color);
         }
     }
-
-    @include clickscreen {
-        &:not(.fs-clickable-disabled):hover:not(:has( .fs-stopclick:hover)) {
-            background-color: var(--fs-clickable-hover-background-color) !important;
-            border-color: var(--fs-clickable-hover-border-color) !important;
-            color: var(--fs-clickable-hover-color) !important;
-    
-            & .fs-card-clickable {
-                transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-                background-color: var(--fs-clickable-hover-background-color);
-            }
-        }
-    }
 }
 
 a:has(.fs-clickable) {

package/styles/components/fs_data_iterator_item.scss

@@ -8,18 +8,16 @@
         padding-right: 32px;
     }
 
-    @include clickscreen {
-        &:hover::after {
-            content: "";
-            background-color: black;
-            pointer-events: none;
-            position: absolute;
-            opacity: 0.04;
-            height: 100%;
-            width: 100%;
-            left: 0;
-            top: 0;
-        }
+    &:hover::after {
+        content: "";
+        background-color: black;
+        pointer-events: none;
+        position: absolute;
+        opacity: 0.04;
+        height: 100%;
+        width: 100%;
+        left: 0;
+        top: 0;
     }
 }
 

package/styles/components/fs_image_card.scss

@@ -11,10 +11,8 @@
   }
 }
 
-@include clickscreen {
-  .fs-image-card:hover {
-    > .fs-card {
-      background-size: 105%;
-    }
+.fs-image-card:hover {
+  > .fs-card {
+    background-size: 105%;
   }
 }

package/styles/components/fs_map.scss

@@ -92,13 +92,11 @@
     align-items: center;
     justify-content: center;
 
-    @include clickscreen {
-      &:hover {
-        filter: brightness(0.92) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
-  
-        > * {
-          transform: scale(1.15);
-        }
+    &:hover {
+      filter: brightness(0.92) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
+
+      > * {
+        transform: scale(1.15);
       }
     }
   }
@@ -130,10 +128,8 @@
     opacity: 0.6;
     transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 
-    @include clickscreen {
-      &:hover {
-        opacity: 1;
-      }
+    &:hover {
+      opacity: 1;
     }
   }
 }

package/styles/components/fs_password_field.scss

@@ -4,9 +4,7 @@
     color: var(--fs-password-field-color) !important;
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 
-    @include clickscreen {
-        &:hover {
-            color: var(--fs-password-field-hover-color) !important;
-        }
+    &:hover {
+        color: var(--fs-password-field-hover-color) !important;
     }
 }

package/styles/components/fs_span.scss

@@ -1,17 +1,9 @@
 .fs-span {
-    display: flex;
-
-    max-width: 100%;
-    min-width: 0;
-}
-
-.fs-span > span {
-    text-align: var(--fs-span-text-align);
-    align-content: center;
     max-width: 100%;
+    text-align: left;
 }
 
-.fs-span-line-clamp > span {
+.fs-span-line-clamp {
     overflow: hidden;
     display: -webkit-box;
     line-clamp: var(--fs-span-line-clamp);
@@ -19,12 +11,12 @@
     -webkit-line-clamp: var(--fs-span-line-clamp);
 }
 
-.fs-span-ellipsis > span {
+.fs-span-ellipsis {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
-.fs-span-pre-wrap > span {
+.fs-span-pre-wrap {
     white-space: pre-wrap;
 }

package/styles/components/fs_tabs.scss

@@ -23,11 +23,9 @@
         @extend .text-button;
     }
 
-    @include clickscreen {
-        &:hover {
-            border-bottom: 1px solid var(--fs-tab-hover-border-color) !important;
-            color: var(--fs-group-hover-color) !important;
-        }
+    &:hover {
+        border-bottom: 1px solid var(--fs-tab-hover-border-color) !important;
+        color: var(--fs-group-hover-color) !important;
     }
 }
 
@@ -36,10 +34,8 @@
     color: var(--fs-group-hover-color) !important;
     border-bottom: 0 !important;
 
-    @include clickscreen {
-        &:hover {
-            border-bottom: 0 !important;
-        }
+    &:hover {
+        border-bottom: 0 !important;
     }
 }
 

package/styles/components/fs_tag.scss

@@ -13,19 +13,17 @@
     background-color: var(--fs-tag-background-color) !important;
     color: var(--fs-tag-color) !important;
 
-    min-width: 20px !important;
-    width: 20px !important;
-    height: 20px !important;
+    &:hover {
+        background-color: var(--fs-tag-hover-background-color) !important;
+        color: var(--fs-tag-hover-color) !important;
+    }
 
     &:active {
         background-color: var(--fs-tag-active-background-color) !important;
         color: var(--fs-tag-active-color) !important;
     }
 
-    @include clickscreen {
-        &:hover {
-            background-color: var(--fs-tag-hover-background-color) !important;
-            color: var(--fs-tag-hover-color) !important;
-        }
-    }
+    min-width: 20px !important;
+    width: 20px !important;
+    height: 20px !important;
 }

package/styles/globals/overrides.scss

@@ -137,16 +137,11 @@
     }
 }
 
+// Ellipsis on input of all fields
 input {
-    // Ellipsis on all fields
     text-overflow: ellipsis;
 }
 
-input, select, textarea {
-    // No zoom on focus for user of a certain version of Chrome, and who ask their mobile to zoom if font-size < 16px
-    touch-action: none;
-}
-
 // No up / down buttons in input field of type number
 input[type=number] { 
     -moz-appearance: textfield;
@@ -192,11 +187,9 @@ $nthOverlay: 25;
 }
 
 // Change color on arrows when hovered
-@include clickscreen {
-    .v-slide-group__prev:hover,
-    .v-slide-group__next:hover {
-        color: var(--fs-group-hover-color);
-    }
+.v-slide-group__prev:hover,
+.v-slide-group__next:hover {
+    color: var(--fs-group-hover-color);
 }
 
 /***************************************************************************/

package/styles/globals/scrollbars.scss

@@ -47,19 +47,9 @@
 @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;
   }
 }