@dative-gpi/foundation-shared-components 1.0.157 → 1.0.158-sankey2

package/components/FSCol.vue

@@ -26,6 +26,11 @@ export default defineComponent({
       required: false,
       default: "fill"
     },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -49,11 +54,12 @@ export default defineComponent({
   },
   setup(props) {
     const style = computed((): StyleValue => ({
-      "--fs-col-overflow": props.overflow,
-      "--fs-col-padding" : sizeToVar(props.padding),
-      "--fs-col-gap"     : sizeToVar(props.gap),
-      "--fs-col-width"   : sizeToVar(props.width),
-      "--fs-col-height"  : sizeToVar(props.height)
+      "--fs-col-overflow"   : props.overflow,
+      "--fs-col-padding"    : sizeToVar(props.padding),
+      "--fs-col-gap"        : sizeToVar(props.gap),
+      "--fs-col-width"      : sizeToVar(props.width),
+      "--fs-col-max-width"  : props.maxWidth ? sizeToVar(props.maxWidth) : "100%",
+      "--fs-col-height"     : sizeToVar(props.height),
     }));
 
     const classes = computed((): string[] => {

package/components/FSInstantPicker.vue

@@ -97,9 +97,9 @@ import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue
 import FSSpan from '@dative-gpi/foundation-shared-components/components/FSSpan.vue';
 import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
 import FSSlider from '@dative-gpi/foundation-shared-components/components/FSSlider.vue';
+import FSPlayButtons from '@dative-gpi/foundation-shared-components/components/FSPlayButtons.vue';
 import FSBaseField from '@dative-gpi/foundation-shared-components/components/fields/FSBaseField.vue';
 import FSTermField from '@dative-gpi/foundation-shared-components/components/fields/FSTermField.vue';
-import FSPlayButtons from '@dative-gpi/foundation-shared-components/components/FSPlayButtons.vue';
 
 export default defineComponent({
   name: "FSInstantPicker",
@@ -110,7 +110,7 @@ export default defineComponent({
     FSSlider,
     FSTermField,
     FSBaseField,
-    FSPlayButtons
+    FSPlayButtons,
   },
   props: {
     label: {
@@ -119,8 +119,7 @@ export default defineComponent({
     },
     modelValue: {
       type: Number,
-      required: false,
-      default: 0,
+      required: false
     },
     startDate: {
       type: String,
@@ -231,6 +230,12 @@ export default defineComponent({
       }
     }, { immediate: true });
 
+    watch(() => props.modelValue, (value) => {
+      if(!value) {
+        emit('update:modelValue', endTimestamp.value);
+      }
+    }, { immediate: true });
+
     watch(playing, (value) => {
       if(!value && playingInterval.value) {
         clearInterval(playingInterval.value);

package/components/FSRangePicker.vue

@@ -0,0 +1,275 @@
+<template>
+  <FSBaseField
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :disabled="$props.disabled"
+    :label="$props.label"
+  >
+    <FSRow
+      align="bottom-center"
+      gap="32px"
+    >
+      <FSTermField
+        width="430px"
+        :label="$tr('ui.instant-picker.analyze-period', 'Analyze Period')"
+        :startDate="$props.startDate"
+        :endDate="$props.endDate"
+        :disabled="$props.disabled"
+        @update:startDate="$emit('update:startDate', $event)"
+        @update:endDate="$emit('update:endDate', $event)"
+      />
+      <FSRow
+        padding="0 0 2px 0"
+        align="center-center"
+      >
+        <FSCol
+          width="fill"
+        >
+          <FSRangeSlider
+            minWidth='min(300px, 90vw)'
+            :disabled="$props.disabled"
+            :color="ColorEnum.Light"
+            :thumbColor="ColorEnum.Primary"
+            :trackFillColor="ColorEnum.Primary"
+            :trackSize="8"
+            thumb-label="always"
+            :step="$props.stepTime"
+            :min="startTimestamp"
+            :max="endTimestamp"
+            :ticks="ticks"
+            showTicks="always"
+            :tick-size="0"
+            :modelValue="$props.modelValue"
+            @update:modelValue="$emit('update:modelValue', $event)"
+          >
+            <template
+              #thumb-label="{ modelValue }"
+            >
+              <FSSpan
+                font="text-overline"
+              >
+                {{ epochToMonthShortTimeFormat(modelValue) }}
+              </FSSpan>
+            </template>
+            <template
+              #tick-label="{ tick }"
+            >
+              <FSRow>
+                <FSText
+                  :color="lightColors.dark"
+                  font="text-overline"
+                >
+                  {{ intervalTime <= 3600000
+                    ?
+                      epochToShortTimeOnlyFormat(tick.value)
+                    :
+                      epochToDayMonthShortOnly(tick.value)
+                  }}
+                </FSText>
+              </FSRow>
+            </template>
+          </FSRangeSlider>
+        </FSCol>
+        <FSPlayButtons
+          v-if="$props.playable"
+          :disabled="$props.disabled"
+          :modelValue="playing"
+          @click:backward="onClickBackward"
+          @click:forward="onClickForward"
+          @update:modelValue="onPlayingChange"
+        />
+      </FSRow>
+    </FSRow>
+  </FSBaseField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from "vue";
+
+import { useDateFormat, useDateExpression } from "@dative-gpi/foundation-shared-services/composables";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints, useColors } from '@dative-gpi/foundation-shared-components/composables';
+
+import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue';
+import FSSpan from '@dative-gpi/foundation-shared-components/components/FSSpan.vue';
+import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
+import FSPlayButtons from '@dative-gpi/foundation-shared-components/components/FSPlayButtons.vue';
+import FSRangeSlider from '@dative-gpi/foundation-shared-components/components/FSRangeSlider.vue';
+import FSBaseField from '@dative-gpi/foundation-shared-components/components/fields/FSBaseField.vue';
+import FSTermField from '@dative-gpi/foundation-shared-components/components/fields/FSTermField.vue';
+
+export default defineComponent({
+  name: "FSRangePicker",
+  components: {
+    FSCol,
+    FSSpan,
+    FSText,
+    FSTermField,
+    FSBaseField,
+    FSRangeSlider,
+    FSPlayButtons,
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+    },
+    mode: {
+      type: String as () => 'single' | 'range',
+      required: false,
+      default: 'single'
+    },
+    modelValue: {
+      type: Object as () => [number, number],
+      required: true
+    },
+    startDate: {
+      type: String,
+      required: true
+    },
+    endDate: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      required: false,
+      default: null
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    playable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    stepTime: {
+      type: Number,
+      required: false,
+      default: 60000
+    },
+    playingStepDuration: {
+      type: Number,
+      required: false,
+      default: 50
+    }
+  },
+  emits: ['update:modelValue', 'update:startDate', 'update:endDate'],
+  setup(props, { emit }) {
+    const { epochToShortTimeOnlyFormat, epochToShortDateFormat, epochToDayMonthShortOnly, epochToISO, epochToMonthShortTimeFormat } = useDateFormat();
+    const { convert : convertTermToEpoch } = useDateExpression();
+    const { isMobileSized, isExtraSmall } = useBreakpoints();
+    const { getColors } = useColors();
+
+    const lightColors = getColors(ColorEnum.Light);
+    const playing = ref(false);
+    const playingInterval = ref();
+
+    const startTimestamp = computed(() => convertTermToEpoch(props.startDate));
+    const endTimestamp = computed(() => convertTermToEpoch(props.endDate));
+
+    const intervalTime = computed(() => {
+      const possibleIntervals = [60000, 3600000, 86400000];
+
+      const interval = possibleIntervals.find(interval => {
+        return (endTimestamp.value - startTimestamp.value) / interval < 100;
+      });
+
+      if (interval) {
+        return interval;
+      }
+      return 86400000;
+    });
+
+    const ticks = computed(() => {
+      const ticks: number[] = [];
+
+      const rangeDuration = endTimestamp.value - startTimestamp.value;
+      const interval = rangeDuration / maximumTickToShow.value;
+
+      for (let i = 1; i < maximumTickToShow.value; i++) {
+        ticks.push(startTimestamp.value + i * interval);
+      }
+      return ticks;
+    });
+
+    const maximumTickToShow = computed(() => {
+      if (isExtraSmall.value) {
+        return 4;
+      }
+      if (isMobileSized.value) {
+        return 5;
+      }
+      return 6;
+    });
+
+    const onPlayingChange = (value: boolean) => {
+      playing.value = value;
+    };
+
+    const onClickBackward = () => {
+      const rangeDuration = props.modelValue[1] - props.modelValue[0];
+      emit('update:modelValue', [startTimestamp.value, startTimestamp.value + rangeDuration]);
+    };
+
+    const onClickForward = () => {
+      const rangeDuration = props.modelValue[1] - props.modelValue[0];
+      emit('update:modelValue', [endTimestamp.value - rangeDuration, endTimestamp.value]);
+    };
+
+    watch(() => [props.startDate, props.endDate], () => {
+      if((props.modelValue[0] < startTimestamp.value || props.modelValue[1] > endTimestamp.value)) {
+        emit('update:modelValue', [startTimestamp.value, endTimestamp.value]);
+      }
+    }, { immediate: true });
+
+    watch(playing, (value) => {
+      if(!value && playingInterval.value) {
+        clearInterval(playingInterval.value);
+      } else {
+        playingInterval.value = setInterval(() => {
+          if(props.modelValue[0] + props.stepTime <= endTimestamp.value && props.modelValue[1] + props.stepTime <= endTimestamp.value) {
+            emit('update:modelValue', [props.modelValue[0] + props.stepTime, props.modelValue[1] + props.stepTime]);
+          } else {
+            playing.value = false;
+          }
+        }, props.playingStepDuration);
+      }
+    });
+
+    return {
+      ticks,
+      playing,
+      ColorEnum,
+      lightColors,
+      intervalTime,
+      endTimestamp,
+      startTimestamp,
+      maximumTickToShow,
+      epochToISO,
+      onPlayingChange,
+      onClickForward,
+      onClickBackward,
+      epochToShortDateFormat,
+      epochToShortTimeOnlyFormat,
+      epochToDayMonthShortOnly,
+      epochToMonthShortTimeFormat
+    };
+  },
+});
+</script>

package/components/FSRangeSlider.vue

@@ -0,0 +1,112 @@
+<template>
+  <FSBaseField
+    :label="$props.label"
+    :description="$props.description"
+    :required="$props.required"
+    :disabled="$props.disabled"
+    :style="style"
+  >
+    <v-range-slider
+      class="fs-range-slider"
+      hide-details
+      :disabled="$props.disabled"
+      :ripple="false"
+      :style="style"
+      :elevation="0"
+      :tickSize="4"
+      :modelValue="$props.modelValue ?? undefined"
+      @update:modelValue="$emit('update:modelValue', $event)"
+      v-bind="$attrs"
+    >
+      <template
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="slotData"
+        />
+      </template>
+    </v-range-slider>
+  </FSBaseField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSBaseField from '@dative-gpi/foundation-shared-components/components/fields/FSBaseField.vue';
+
+export default defineComponent({
+  name: "FSRangeSlider",
+  components: {
+    FSBaseField
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Object as PropType<[number, number] | null>,
+      required: false,
+      default: null
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getColors } = useColors();
+
+    const colors = computed(() => getColors(props.color));
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+
+    const style = computed((): StyleValue => {
+      if (props.disabled) {
+        return {
+          "--fs-range-slider-cursor"     : "default",
+          "--fs-range-slider-track-color": lights.base,
+          "--fs-range-slider-thumb-color": lights.dark,
+          "--fs-range-slider-fill-color" : lights.dark,
+          "--fs-range-slider-color"      : lights.dark
+        };
+      }
+      console.log(colors.value);
+      return {
+        "--fs-range-slider-cursor"     : "pointer",
+        "--fs-range-slider-track-color": colors.value.light,
+        "--fs-range-slider-fill-color" : colors.value.base,
+        "--fs-range-slider-thumb-color": colors.value.base,
+        "--fs-range-slider-color"      : darks.base
+      };
+    });
+
+    return {
+      style
+    };
+  } 
+});
+</script>

package/components/fields/FSAutocompleteField.vue

@@ -1,6 +1,7 @@
 <template>
   <FSCol
     v-if="$props.loading"
+    :maxWidth="$props.maxWidth"
   >
     <FSLoader
       v-if="!$props.hideHeader"
@@ -14,6 +15,7 @@
   </FSCol>
   <FSCol
     v-else-if="isExtraSmall"
+    :maxWidth="$props.maxWidth"
   >
     <FSTextField
       :validationValue="$props.modelValue"
@@ -220,6 +222,7 @@
     :disabled="$props.disabled"
     :label="$props.label"
     :messages="messages"
+    :maxWidth="$props.maxWidth"
   >
     <FSToggleSet
       v-if="$props.toggleSet"
@@ -588,6 +591,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "600px"
     }
   },
   emits: ["update:modelValue", "update:search", "add:item"],

package/components/fields/FSBaseField.vue

@@ -1,5 +1,6 @@
 <template>
   <FSCol
+    :maxWidth="$props.maxWidth"
     :style="style"
   >
     <slot
@@ -114,6 +115,11 @@ export default defineComponent({
       type: String,
       required: false,
       default: "120px"
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "600px"
     }
   },
   setup(props) {

package/components/fields/FSIconField.vue

@@ -1,5 +1,7 @@
 <template>
-  <FSCol>
+  <FSCol
+    :maxWidth="$props.maxWidth"
+  >
     <FSTextField
       :label="$props.label"
       :description="$props.description"
@@ -10,6 +12,7 @@
       :messages="messages"
       :validateOn="validateOn"
       :validationValue="$props.modelValue"
+      :maxWidth="null"
       v-model="innerValue"
       v-bind="$attrs"
     >
@@ -123,7 +126,12 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    }
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "600px"
+    },
   },
   emits: ["update:modelValue"],
   setup(props) {

package/components/fields/FSSearchField.vue

@@ -4,6 +4,7 @@
     :placeholder="placeholder"
     :modelValue="$props.modelValue"
     prependInnerIcon="mdi-magnify"
+    minWidth="200px"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >

package/components/fields/FSTimeRangeField.vue

@@ -6,6 +6,7 @@
     :disabled="$props.disabled"
     :label="$props.label"
     :messages="messages"
+    :maxWidth="$props.maxWidth"
   >
     <FSRow>
       <FSRow
@@ -132,6 +133,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],

package/components/lists/FSDataTableUI.vue

@@ -5,7 +5,7 @@
   >
     <FSRow
       v-if="$props.showSearch || (!isMobileSized && ($slots['prepend-toolbar'] || $slots['toolbar'] || $slots['append-toolbar'])) || (!$props.disableTable && !$props.disableIterator)"
-      align="bottom-left"
+      align="top-left"
       :wrap="isMobileSized ? false : true"
       width="fill"
     >
@@ -13,35 +13,41 @@
         v-if="!isMobileSized"
         name="prepend-toolbar"
       />
-      <template
-        v-if="$props.showSearch"
-      >
-        <FSSearchField
-          :hideHeader="true"
-          v-model="innerSearch"
-        />
-        <FSButton
-          v-if="filterableHeaders.length > 0"
-          prependIcon="mdi-filter-variant"
-          :variant="innerShowFilters ? 'full' : 'standard'"
-          @click="innerShowFilters = !innerShowFilters"
-        />
-      </template>
-      <slot
-        v-if="!isMobileSized"
-        name="toolbar"
-      />
-      <template
-        v-if="$slots['append-toolbar'] || (!$props.disableTable && !$props.disableIterator)"
+      <FSRow
+        align="top-left"
       >
         <FSRow
-          align="center-right"
-          :width="isExtraSmall ? 'hug' : 'fill'"
+          v-if="$props.showSearch || filterableHeaders.length > 0 || $slots['append-toolbar']"
+          align="bottom-left"
         >
+          <FSSearchField
+            :hideHeader="true"
+            v-model="innerSearch"
+          />
+          <FSButton
+            v-if="filterableHeaders.length > 0"
+            prependIcon="mdi-filter-variant"
+            :variant="innerShowFilters ? 'full' : 'standard'"
+            @click="innerShowFilters = !innerShowFilters"
+          />
           <slot
             v-if="!isMobileSized"
-            name="append-toolbar"
+            name="toolbar"
           />
+        </FSRow>
+        <slot
+          v-if="!isMobileSized"
+          name="append-toolbar"
+        />
+      </FSRow>
+      <template
+        v-if="(!$props.disableTable && !$props.disableIterator)"
+      >
+        <FSRow
+          align="top-right"
+          width="hug"
+          :wrap="false"
+        >
           <FSOptionGroup
             v-if="!$props.disableTable && !$props.disableIterator"
             :values="modeOptions"

package/components/views/desktop/FSBaseDefaultDesktopView.vue

@@ -29,7 +29,7 @@
         </FSRow>
         <FSCol
           v-if="$props.breadcrumbs && $props.breadcrumbs.length > 0"
-          :padding="$slots.toolbar ? '0px 24px 8px 24px' : '0px 24px'"
+          :padding="$slots.toolbar ? '0px 24px 16px 24px' : '0px 24px'"
           gap="16px"
         >
           <FSCol>

package/components/views/desktop/FSBaseEntityDesktopView.vue

@@ -9,6 +9,7 @@
     >
       <FSRow
         gap="24px"
+        :height="actualImageSize"
         :wrap="false"
       >
         <template 
@@ -54,7 +55,7 @@
             >
               <slot
                 name="subtitle"
-                v-if="topOffset < 60"
+                v-if="topOffset < 64"
               >
                 <FSText
                   v-if="$props.subtitle"
@@ -65,10 +66,11 @@
               </slot>
               <slot
                 name="description"
-                v-if="topOffset < 20"
+                v-if="topOffset < 24"
               >
                 <FSText
                   v-if="$props.description"
+                  :lineClamp="2"
                   font="text-body"
                 >
                   {{ $props.description }}
@@ -146,9 +148,9 @@ export default defineComponent({
       default: () => ["124px", "96px", "80px"]
     },
     icon: {
-      type: String as PropType<string>,
+      type: String as PropType<string | null>,
       required: false,
-      default: "mdi-ab-testing"
+      default: null
     },
     iconColor: {
       type: String as PropType<ColorBase>,

package/components/views/mobile/FSBaseDefaultMobileView.vue

@@ -15,7 +15,7 @@
         <FSRow
           style="position: sticky; top: 0px; z-index: 3;"
           :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
-          :padding="`24px ${isTouchScreenEnabled ? '24px' : '16px'} 16px 24px`"
+          :padding="`16px ${isTouchScreenEnabled ? '20px' : '12px'} 12px 12px`"
         >
           <slot
             name="title"
@@ -29,7 +29,7 @@
         </FSRow>
         <FSCol
           v-if="$props.breadcrumbs && $props.breadcrumbs.length > 0"
-          :padding="$slots.toolbar ? '0px 24px 8px 24px' : '0px 24px'"
+          :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} ${$slots.toolbar ? '12px' : '0px'} 12px`"
           gap="16px"
         >
           <FSCol>
@@ -45,7 +45,7 @@
         <FSRow
           v-if="$slots.toolbar"
           :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
-          :padding="`0px ${isTouchScreenEnabled ? '24px' : '16px'} 8px 24px`"
+          :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} 12px 12px`"
         >
           <FSSlideGroup>
             <slot
@@ -58,7 +58,7 @@
       <FSCol
         height="fill"
         gap="0px"
-        :padding="`${$slots.toolbar ? '8px' : '16px'} ${isTouchScreenEnabled ? '24px' : '16px'} 24px 24px`"
+        :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} 16px 12px`"
       >
         <slot />
       </FSCol>

package/components/views/mobile/FSBaseEntityMobileView.vue

@@ -8,7 +8,8 @@
       #title
     >
       <FSRow
-        gap="24px"
+        gap="12px"
+        :height="actualImageSize"
         :wrap="false"
       >
         <FSImage 
@@ -31,6 +32,7 @@
           style="min-width: 0"
           align="center-left"
           height="fill"
+          :gap="$props.subtitle && $props.description ? '6px' : '8px'"
         >
           <slot
             name="title"
@@ -44,26 +46,31 @@
               name="title-extra"
               v-bind="{ topOffset }"
             >
-              <slot
-                name="subtitle"
+              <FSCol
+                gap="4px"
               >
-                <FSText
-                  v-if="$props.subtitle && topOffset < 60"
-                  font="text-button"
+                <slot
+                  name="subtitle"
                 >
-                  {{ $props.subtitle }}
-                </FSText>
-              </slot>
-              <slot
-                name="description"
-              >
-                <FSText
-                  v-if="$props.description && topOffset < 20"
-                  font="text-body"
+                  <FSText
+                    v-if="$props.subtitle && topOffset < 48"
+                    font="text-button"
+                  >
+                    {{ $props.subtitle }}
+                  </FSText>
+                </slot>
+                <slot
+                  name="description"
                 >
-                  {{ $props.description }}
-                </FSText>
-              </slot>
+                  <FSText
+                    v-if="$props.description && topOffset < 8"
+                    :lineClamp="2"
+                    font="text-body"
+                  >
+                    {{ $props.description }}
+                  </FSText>
+                </slot>
+              </FSCol>
             </slot>
           </slot>
         </FSCol>
@@ -136,9 +143,9 @@ export default defineComponent({
       default: () => ["124px", "96px", "80px"]
     },
     icon: {
-      type: String as PropType<string>,
+      type: String as PropType<string | null>,
       required: false,
-      default: "mdi-ab-testing"
+      default: null
     },
     iconColor: {
       type: String as PropType<ColorBase>,
@@ -183,7 +190,7 @@ export default defineComponent({
       const minSize = sizeToVar(props.minImageSize);
       const actualMinSize = parseInt(minSize);
 
-      topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 24));
+      topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 12));
     }
 
     delete slots.title;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.157",
+  "version": "1.0.158-sankey2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.157",
-    "@dative-gpi/foundation-shared-services": "1.0.157"
+    "@dative-gpi/foundation-shared-domain": "1.0.158-sankey2",
+    "@dative-gpi/foundation-shared-services": "1.0.158-sankey2"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "0aedaf4c6e5f977982f18d5936f5cdfaf7ab86a4"
+  "gitHead": "3bdd971b1260dda85c68b5c550521861a513c2f1"
 }

package/styles/components/fs_col.scss

@@ -4,7 +4,7 @@
     overflow-y: var(--fs-col-overflow);
     padding: var(--fs-col-padding);
     gap: var(--fs-col-gap);
-    max-width: 100%;
+    max-width: var(--fs-col-max-width);
 
     &-top-left {
         justify-content: flex-start;

package/styles/components/fs_range_slider.scss

@@ -0,0 +1,51 @@
+.fs-range-slider {
+    padding: 0px !important;
+    width: calc(100% - 16px);
+
+    & .v-slider__container {
+        cursor: var(--fs-range-slider-cursor);
+        margin-left: 8px;
+        margin-right: 8px;
+        opacity: 1 !important;
+    }
+
+    & .v-slider-track__background {
+        background-color: var(--fs-range-slider-track-color);
+        height: 6px !important;
+        opacity: 1;
+    }
+
+    & .v-slider-track__fill {
+        background-color: var(--fs-range-slider-fill-color);
+        opacity: 0.7 !important;
+    }
+
+    & .v-slider-track__tick {
+        background-color: var(--fs-range-slider-thumb-color);
+        border-radius: 50%;
+    }
+
+    & .v-slider-thumb {
+        color: var(--fs-range-slider-thumb-color);
+
+        &__surface:before {
+            display: none !important;
+        }
+
+        &__surface:after {
+            display: none !important;
+        }
+
+        &__ripple {
+            display: none !important;
+        }
+    }
+}
+
+.fs-range-slider-label {
+    color: var(--fs-range-slider-color);
+}
+
+.fs-range-slider-description {
+    color: var(--fs-range-slider-color);
+}

package/styles/components/index.scss

@@ -48,6 +48,7 @@
 @import "fs_password_field.scss";
 @import "fs_progress_bar.scss";
 @import "fs_radio.scss";
+@import "fs_range_slider.scss";
 @import "fs_rich_text_field.scss";
 @import "fs_row.scss";
 @import "fs_select_field.scss";