@dative-gpi/foundation-shared-components 1.0.95 → 1.0.97

package/components/FSDialogContent.vue

@@ -1,6 +1,6 @@
 <template>
   <FSCard
-    padding="24px"
+    :padding="['24px', '16px', '16px 12px']"
     gap="24px"
     :class="$props.cardClasses"
     :color="$props.color"
@@ -19,13 +19,16 @@
           >
             {{ $props.title }}
           </FSText>
-          <v-spacer />
-          <FSButton
-            icon="mdi-close"
-            variant="icon"
-            :color="ColorEnum.Dark"
-            @click="$emit('update:modelValue', false)"
-          />
+          <FSRow
+            align="center-right"
+          >
+            <FSButton
+              icon="mdi-close"
+              variant="icon"
+              :color="ColorEnum.Dark"
+              @click="$emit('update:modelValue', false)"
+            />
+          </FSRow>
         </FSRow>
         <FSText
           v-if="$props.subtitle"

package/components/FSFadeOut.vue

@@ -117,20 +117,13 @@ export default defineComponent({
         else {
           topMaskHeight.value = sizeToVar(props.maskHeight);
         }
-
-        // const event = {
-        //   target: fadeOutRef.value,
-        //   onTop: topMaskHeight.value === "0px",
-        //   onBottom: bottomMaskHeight.value === "0px",
-        //   goingUp: (fadeOutRef.value as any).scrollTop < lastScroll.value,
-        // };
-
-        // emit("scroll", event);
+        
         lastScroll.value = (fadeOutRef.value as any).scrollTop;
       }
     };
 
-    const debounceMasks = (): void => debounce(handleMasks, 1);
+    // Delay to wait for animations to end before computing masks
+    const debounceMasks = (): void => debounce(handleMasks, 280);
 
     onMounted((): void => {
       debounceMasks();

package/components/FSGrid.vue

@@ -52,7 +52,6 @@
           </template>
         </template>
       </FSCol>
-      <v-spacer />
       <FSRow
         v-if="itemEndSlot(item.code)"
         align="center-right"

package/components/FSTab.vue

@@ -26,19 +26,6 @@
             {{ $props.label }}
           </FSSpan>
         </slot>
-        <v-spacer
-          v-if="$props.tag"
-        />
-        <slot
-          name="tag"
-        >
-          <FSSpan
-            v-if="$props.tag"
-            class="fs-tab-tag"
-          >
-            {{ $props.tag }}
-          </FSSpan>
-        </slot>
         <slot
           name="append"
         >
@@ -49,6 +36,21 @@
             {{ $props.appendIcon }}
           </FSIcon>
         </slot>
+        <FSRow
+          align="center-right"
+          :wrap="false"
+        >
+          <slot
+            name="tag"
+          >
+            <FSSpan
+              v-if="$props.tag"
+              class="fs-tab-tag"
+            >
+              {{ $props.tag }}
+            </FSSpan>
+          </slot>
+        </FSRow>
       </FSRow>
     </slot>
   </v-tab>

package/components/agenda/FSAgendaHeader.vue

@@ -16,12 +16,18 @@
           @click="onPrevious"
         />
         <FSButton
-          width="180px"
+          width="220px"
           color="primary"
           :border="false"
-          :label="epochToMonthYearOnlyFormat($props.start)"
           @click="showCalendarDialog = true"
-        />
+        >
+          <FSSpan
+            class="fs-agenda-header-text"
+            font="text-h3"
+          >
+            {{ epochToMonthYearOnlyFormat($props.start) }}
+          </FSSpan>
+        </FSButton>
         <FSButton
           variant="icon"
           icon="mdi-chevron-right"
@@ -100,6 +106,7 @@ import FSRow from '../FSRow.vue';
 import FSButton from '../FSButton.vue';
 import FSSelectAgendaMode from './FSSelectAgendaMode.vue';
 import FSAgendaDialogCalendar from './FSAgendaDialogCalendar.vue';
+import FSSpan from '../FSSpan.vue';
 
 export default defineComponent({
   name: 'FSAgendaHeader',
@@ -108,6 +115,7 @@ export default defineComponent({
     FSSelectAgendaMode,
     FSCol,
     FSButton,
+    FSSpan,
     FSRow
   },
   props: {

package/components/agenda/FSAgendaHorizontalEvent.vue

@@ -15,7 +15,7 @@
     @click="$emit('click', $props.id)"
   >
     <template
-      #default="{ label, icon, timeStart, timeEnd, iconBis, variant }"
+      #default="{ label, icon, timeStart, timeEnd, iconBis, variant, width }"
     >
       <slot
         name="default"
@@ -25,6 +25,7 @@
         :timeStart="timeStart"
         :timeEnd="timeEnd"
         :variant="variant"
+        :width="width"
       />
     </template>
   </FSAgendaHorizontalEvent>
@@ -47,6 +48,7 @@
       :timeStart="epochToShortTimeOnlyFormat($props.start)"
       :timeEnd="epochToShortTimeOnlyFormat($props.end)"
       :variant="$props.variant"
+      :width="width"
     />
   </FSClickable>
 </template>

package/components/agenda/FSWeekAgenda.vue

@@ -125,7 +125,7 @@
               @click="() => $emit('click:eventId', event.id)"
             >
               <template
-                #default="{ label, icon, timeStart, timeEnd, iconBis, variant }"
+                #default="{ label, icon, timeStart, timeEnd, iconBis, variant, width }"
               >
                 <FSRow
                   align="center-left"
@@ -158,7 +158,7 @@
                     </FSRow>
                   </FSCol>
                   <FSCol
-                    v-if="iconBis && variant !== 'current'"
+                    v-if="iconBis && variant !== 'current' && width > 13"
                     align="center-right"
                     padding="8px 8px 8px 0" 
                     width="hug"

package/components/fields/FSBaseField.vue

@@ -7,39 +7,43 @@
       name="label"
     >
       <FSRow
+        gap="40px"
         :wrap="false"
       >
-        <FSSpan
-          class="fs-base-field-label"
-          font="text-overline"
+        <FSRow
+          gap="2px"
+          :width="widths.label"
+          :wrap="false"
         >
-          {{ $props.label }}
-        </FSSpan>
-        <FSSpan
-          v-if="$props.label && $props.required"
-          class="fs-base-field-label"
-          style="margin-left: -8px;"
-          font="text-overline"
-          :ellipsis="false"
-          :style="style"
-        >
-          *
-        </FSSpan>
-        <v-spacer
-          style="min-width: 40px;"
-        />
-        <template
-          v-if="$props.messages"
+          <FSSpan
+            class="fs-base-field-label"
+            font="text-overline"
+          >
+            {{ $props.label }}
+          </FSSpan>
+          <FSSpan
+            v-if="$props.label && $props.required"
+            class="fs-base-field-label"
+            font="text-overline"
+            :ellipsis="false"
+            :style="style"
+          >
+            *
+          </FSSpan>
+        </FSRow>
+        <FSRow
+          align="center-right"
+          :width="widths.messages"
         >
           <FSSpan
-            v-if="$props.messages.length > 0"
+            v-if="$props.messages && $props.messages.length > 0"
             class="fs-base-field-messages"
             font="text-overline"
             :style="style"
           >
             {{ $props.messages.join(", ") }}
           </FSSpan>
-        </template>
+        </FSRow>
       </FSRow>
     </slot>
     <slot />
@@ -136,7 +140,13 @@ export default defineComponent({
       };
     });
 
+    const widths = computed(() => ({
+      label: props.messages && props.messages.length ? "calc(50% - 40px)" : "100%",
+      messages: props.messages && props.messages.length ? "50%" : "0"
+    }));
+
     return {
+      widths,
       style,
       slots
     };

package/components/fields/FSIconField.vue

@@ -28,7 +28,6 @@
       </template>
     </FSTextField>
     <FSToggleSet
-      class="fs-icon-field-set"
       ref="toggleSetRef"
       variant="slide"
       :buttonColor="$props.buttonColor"

package/components/fields/FSNumberField.vue

@@ -43,10 +43,14 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(_, { emit }) {
-    const onUpdate = (value: string) => {
+    const onUpdate = (value: string | null | undefined) => {
       if (value === "-") {
         return;
       }
+      if(value === null || value === undefined) {
+        emit("update:modelValue", null);
+        return;
+      }
       const match = /[-]?([0-9 ]*[,.]?)?[0-9]*/.exec(value);
       if (match != null && !isNaN(parseFloat(match[0].replace(",", ".").replace(" ", "")))) {
         emit("update:modelValue", parseFloat(match[0].replace(",", ".").replace(" ", "")));

package/components/fields/FSRichTextField.vue

@@ -29,9 +29,10 @@
           </FSSpan>
         </FSRow>
       </slot>
-      <v-spacer />
-      <template
+      <FSRow
         v-if="$props.editable"
+        align="center-right"
+        :wrap="false"
       >
         <FSIcon
           class="fs-rich-text-field-icon"
@@ -177,7 +178,7 @@
         >
           mdi-format-align-justify
         </FSIcon>
-      </template>
+      </FSRow>
     </FSRow>
     <FSText
       v-if="readonly && !$props.modelValue && $props.emptyLabel"

package/components/lists/FSDataTableUI.vue

@@ -289,25 +289,29 @@
               <slot
                 :name="`${header.slotName}-append`"
               />
-              <v-spacer />
-              <slot
-                :name="`${header.slotName}-configuration`"
+              <FSRow
+                align="center-right"
+                :wrap="false"
               >
-                <FSHeaderButton
-                  :first="index === 0"
-                  :last="index === headersSlots.length - 1"
-                  @update:hide="updateHeader(header, 'hidden', !header.hidden)"
-                  @update:left="updateHeader(header, 'index', -1)"
-                  @update:right="updateHeader(header, 'index', 1)"
-                />
-                <FSButton
-                  v-if="header.sortable"
-                  variant="icon"
-                  :color="sortColor(header, props)"
-                  :icon="sortIcon(header, props)"
-                  @click="toggleSort(header)"
-                />
-              </slot>
+                <slot
+                  :name="`${header.slotName}-configuration`"
+                >
+                  <FSHeaderButton
+                    :first="index === 0"
+                    :last="index === headersSlots.length - 1"
+                    @update:hide="updateHeader(header, 'hidden', !header.hidden)"
+                    @update:left="updateHeader(header, 'index', -1)"
+                    @update:right="updateHeader(header, 'index', 1)"
+                  />
+                  <FSButton
+                    v-if="header.sortable"
+                    variant="icon"
+                    :color="sortColor(header, props)"
+                    :icon="sortIcon(header, props)"
+                    @click="toggleSort(header)"
+                  />
+                </slot>
+              </FSRow>
             </FSRow>
           </slot>
         </template>
@@ -370,7 +374,6 @@
                 </FSText>
               </template>
             </template>
-            <v-spacer />
             <FSRow
               align="center-right"
               width="hug"
@@ -544,7 +547,6 @@
                 </FSText>
               </template>
             </template>
-            <v-spacer />
             <FSRow
               align="center-right"
               :wrap="false"

package/components/lists/FSLoadDataTable.vue

@@ -13,13 +13,16 @@
       <FSLoader
         variant="button"
       />
-      <v-spacer />
-      <FSLoader
-        variant="button"
-      />
-      <FSLoader
-        variant="button"
-      />
+      <FSRow
+        align="center-right"
+      >
+        <FSLoader
+          variant="button"
+        />
+        <FSLoader
+          variant="button"
+        />
+      </FSRow>
     </FSRow>
     <FSRow>
       <FSLoader

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/FSChartTileUI.vue

@@ -1,8 +1,8 @@
 <template>
-  <FSClickable
-    padding="16px"
+  <FSTile
     :width="['275px','336px']"
     :height="['124px','156px']"
+    borderRadius="8px"
     v-bind="$attrs"
   >
     <template
@@ -10,27 +10,26 @@
     >
       <FSRow
         align="center-left"
+        padding="4px 4px 4px 8px"
+        gap="16px"
         :wrap="false"
       >
         <FSCol
           align="center-left"
+          gap="4px"
         >
           <FSSpan
-            font="text-button"
-            :lineClamp="2"
+            font="text-overline"
+            :lineClamp="4"
           >
             {{ $props.label }}
           </FSSpan>
           <FSIcon
             :color="ColorEnum.Error"
+            size="18px"
           >
             {{ chartIcon(type) }}
           </FSIcon>
-          <FSSpan
-            font="text-overline"
-          >
-            {{ $props.categoryLabel }}
-          </FSSpan>
         </FSCol>
         <FSCol
           align="center-right"
@@ -38,19 +37,19 @@
         >
           <FSImage
             v-if="$props.imageId"
-            height="92px"
-            width="92px"          
+            :height="['82px','90px']"
+            :width="['82px','90px']"          
             :imageId="$props.imageId"
           />
           <FSIcon
             v-else-if="$props.icon"
-            size="92px"
+            :size="['82px','90px']"
             :icon="$props.icon"
           />
         </FSCol>
       </FSRow>
     </template>
-  </FSClickable>
+  </FSTile>
 </template>
 
 <script lang="ts">
@@ -58,26 +57,27 @@ import { defineComponent } from "vue";
 import type { PropType } from "vue";
 
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import type { ChartType } from "@dative-gpi/foundation-shared-domain/enums";
+import { ChartType } from "@dative-gpi/foundation-shared-domain/enums";
 
 import { chartIcon } from "@dative-gpi/foundation-shared-components/tools";
 
-import FSClickable from "../FSClickable.vue";
 import FSImage from "../FSImage.vue";
+import FSTile from "./FSTile.vue";
 import FSSpan from "../FSSpan.vue";
 import FSIcon from "../FSIcon.vue";
 import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
 
+
 export default defineComponent({
   name: "FSChartTileUI",
   components: {
-    FSIcon,
     FSImage,
+    FSTile,
+    FSIcon,
     FSRow,
     FSCol,
     FSSpan,
-    FSClickable
   },
   props: {
     label: {
@@ -90,11 +90,6 @@ export default defineComponent({
       required: false,
       default: null
     },
-    categoryLabel: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
     icon: {
       type: String as PropType<string | null>,
       required: false,
@@ -103,7 +98,7 @@ export default defineComponent({
     type: {
       type: Number as PropType<ChartType>,
       required: false,
-      default: null
+      default: ChartType.None
     }
   },
   setup() {

package/components/tiles/FSCommentTileUI.vue

@@ -26,15 +26,19 @@
             -
             {{ timestamp }}
           </FSText>
-          <v-spacer />
-          <FSButtonEditIcon
-            v-if="canEditRemove"
-            @click="showEditComment = true"
-          />
-          <FSButtonRemoveIcon
-            v-if="canEditRemove"
-            @click="removeDialog = true"
-          />
+          <FSRow
+            align="center-right"
+            :wrap="false"
+          >
+            <FSButtonEditIcon
+              v-if="canEditRemove"
+              @click="showEditComment = true"
+            />
+            <FSButtonRemoveIcon
+              v-if="canEditRemove"
+              @click="removeDialog = true"
+            />
+          </FSRow>
         </FSRow>
       </template>
       <template

package/components/views/desktop/FSBaseEntityDesktopView.vue

@@ -30,9 +30,9 @@
           v-else-if="$props.icon"
           :backgroundVariant="$props.iconBackgroundVariant"
           :backgroundColor="$props.iconBackgroundColors"
+          :iconColor="$props.iconColor"
           :border="$props.iconBorder"
           :icon="$props.icon"
-          :iconColor="$props.color"
           :size="actualImageSize"
         />
         <FSCol
@@ -144,16 +144,16 @@ export default defineComponent({
       required: false,
       default: () => ["124px", "96px", "80px"]
     },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: null
-    },
     icon: {
       type: String as PropType<string>,
       required: false,
       default: "mdi-ab-testing"
     },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: null
+    },
     iconBackgroundVariant: {
       type: String as PropType<"background" | "standard" | "full" | "gradient">,
       required: false,
@@ -195,7 +195,6 @@ export default defineComponent({
       topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 24));
     }
 
-
     delete slots.title;
 
     return {

package/components/views/mobile/FSBaseEntityMobileView.vue

@@ -22,9 +22,9 @@
           v-else-if="$props.icon"
           :backgroundVariant="$props.iconBackgroundVariant"
           :backgroundColor="$props.iconBackgroundColors"
+          :iconColor="$props.iconColor"
           :border="$props.iconBorder"
           :icon="$props.icon"
-          :iconColor="$props.color"
           :size="actualImageSize"
         />
         <FSCol
@@ -134,16 +134,16 @@ export default defineComponent({
       required: false,
       default: () => ["124px", "96px", "80px"]
     },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: null
-    },
     icon: {
       type: String as PropType<string>,
       required: false,
       default: "mdi-ab-testing"
     },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: null
+    },
     iconBackgroundVariant: {
       type: String as PropType<"background" | "standard" | "full" | "gradient">,
       required: false,
@@ -185,7 +185,6 @@ export default defineComponent({
       topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 24));
     }
 
-
     delete slots.title;
 
     return {

package/composables/useBreakpoints.ts

@@ -12,6 +12,11 @@ export const useBreakpoints = () => {
         windowHeight.value = window.innerHeight;
         windowWidth.value = window.innerWidth;
 
+        // Bug in chromium based browsers where window.outerWidth is 0 when tab loads without focus
+        if (!window.document.hasFocus() && window.outerWidth === 0) {
+            windowOuterWidth.value = window.innerWidth;
+            return;
+        }
         windowOuterWidth.value = window.outerWidth;
     };
 

package/package.json

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

package/styles/components/fs_agenda.scss

@@ -30,3 +30,7 @@
   width: 100%;
   height: 100%;
 }
+
+.fs-agenda-header-text {
+  text-transform: capitalize !important;
+}

package/styles/components/fs_autocomplete_field.scss

@@ -22,19 +22,6 @@
     }
 }
 
-.fs-autocomplete-field-label {
-    color: var(--fs-autocomplete-field-color);
-}
-
-.fs-autocomplete-field-messages {
-    align-self: stretch;
-    color: var(--fs-autocomplete-field-error-color);
-}
-
-.fs-autocomplete-field-description {
-    color: var(--fs-autocomplete-field-color);
-}
-
 .v-overlay-container > .v-overlay > .v-autocomplete__content {
     box-shadow: 0px 5px 8px 0px #00000029;
     max-width: none !important;

package/styles/components/fs_color_field.scss

@@ -17,8 +17,4 @@
   background: none !important;
   min-width: auto !important;
   width: 100% !important;
-}
-
-.fs-color-field-description {
-  color: var(--fs-color-field-color);
 }

package/styles/components/fs_magic_config_field.scss

@@ -1,5 +1,4 @@
-.fs-magic-config-field > .fs-col:has(.v-switch) {
-    margin: 0 0 6px 0;
+.fs-magic-config-field > :has(.v-switch) {
     align-self: end;
 }
 

package/styles/components/fs_select_field.scss

@@ -21,19 +21,6 @@
     }
 }
 
-.fs-select-field-label {
-    color: var(--fs-select-field-color);
-}
-
-.fs-select-field-messages {
-    align-self: stretch;
-    color: var(--fs-select-field-error-color);
-}
-
-.fs-select-field-description {
-    color: var(--fs-select-field-color);
-}
-
 .v-overlay-container > .v-overlay > .v-select__content > .v-list {
     @extend .fs-hide-y-scrollbar;
 

package/styles/components/index.scss

@@ -33,7 +33,6 @@
 @import "fs_grid.scss";
 @import "fs_header_button.scss";
 @import "fs_hidden_button.scss";
-@import "fs_icon_field.scss";
 @import "fs_icon.scss";
 @import "fs_image.scss";
 @import "fs_image_card.scss";
@@ -51,7 +50,6 @@
 @import "fs_radio.scss";
 @import "fs_rich_text_field.scss";
 @import "fs_row.scss";
-@import "fs_search_field.scss";
 @import "fs_select_field.scss";
 @import "fs_slide_group.scss";
 @import "fs_slider.scss";
@@ -59,12 +57,10 @@
 @import "fs_switch.scss";
 @import "fs_tag.scss";
 @import "fs_tabs.scss";
-@import "fs_tag_field.scss";
 @import "fs_text_area.scss";
 @import "fs_text_field.scss";
 @import "fs_text.scss";
 @import "fs_tile.scss";
-@import "fs_time_field.scss";
 @import "fs_tooltip.scss";
 @import "fs_translate_field.scss";
 @import "fs_tree_view_field.scss";

package/components/views/FSEntityHeader.vue

@@ -1,343 +0,0 @@
-<template>
-  <template
-    v-if="isExtraSmall"
-  >
-    <FSCol
-      class="f-entity-header"
-      padding="0 10px 0 0"
-      align="center-left"
-      gap="12px"
-    >
-      <FSRow
-        align="center-left"
-        gap="12px"
-        :height="imageSize"
-        :wrap="false"
-      >
-        <template
-          v-if="$props.imageId"
-        >
-          <slot 
-            name="image"
-            v-bind="{ imageSize }"
-          >
-            <FSImage
-              :imageId="$props.imageId"
-              :cover="imageCover"
-              :height="imageSize"
-              :width="imageSize"
-            />
-          </slot>
-        </template>
-        <FSIconCard
-          v-else-if="$props.icon"
-          :backgroundVariant="$props.iconBackgroundVariant"
-          :backgroundColor="$props.iconBackgroundColors"
-          :border="$props.iconBorder"
-          :icon="$props.icon"
-          :iconColor="$props.color"
-          :size="imageSize"
-        />
-        <FSCol
-          align="center-left"
-          :width="`calc(100% - ${rightOverflow})`"
-        >
-          <template
-            v-if="$props.subtitle && $props.description"
-          >
-            <FSText
-              font="text-h3"
-            >
-              {{ $props.title }}
-            </FSText>
-            <FSCol
-              align="center-left"
-              gap="4px"
-            >
-              <FSText
-                font="text-button"
-              >
-                {{ $props.subtitle }}
-              </FSText>
-              <FSText
-                font="text-body"
-              >
-                {{ $props.description }}
-              </FSText>
-            </FSCol>
-          </template>
-          <template
-            v-else-if="$props.subtitle && !$props.description"
-          >
-            <FSText
-              font="text-h3"
-              :lineClamp="2"
-            >
-              {{ $props.title }}
-            </FSText>
-            <FSText
-              font="text-button"
-            >
-              {{ $props.subtitle }}
-            </FSText>
-          </template>
-          <template
-            v-else-if="!$props.subtitle && $props.description"
-          >
-            <FSText
-              font="text-h3"
-              :lineClamp="2"
-            >
-              {{ $props.title }}
-            </FSText>
-            <FSText
-              font="text-body"
-              :lineClamp="2"
-            >
-              {{ $props.description }}
-            </FSText>
-          </template>
-          <template
-            v-else
-          >
-            <FSText
-              font="text-h3"
-              :lineClamp="2"
-            >
-              {{ $props.title }}
-            </FSText>
-          </template>
-        </FSCol>
-      </FSRow>
-      <template
-        v-if="!$props.light"
-      >
-        <FSBreadcrumbs
-          :items="$props.breadcrumbs"
-        />
-        <FSSlideGroup
-          v-if="slots['toolbar']"
-        >
-          <slot
-            name="toolbar"
-          />
-        </FSSlideGroup>
-        <slot
-          name="title-append"
-        />
-      </template>
-    </FSCol>
-  </template>
-  <template
-    v-else
-  >
-    <FSCol
-      class="f-entity-header"
-      padding="0 14px 0 0"
-      align="center-left"
-      gap="16px"
-    >
-      <FSRow
-        align="center-left"
-        gap="16px"
-        :height="imageSize"
-        :wrap="false"
-      >
-        
-        <template
-          v-if="$props.imageId"
-        >
-          <slot 
-            name="image"
-            v-bind="{ imageSize }"
-          >
-            <FSImage
-              :imageId="$props.imageId"
-              :cover="imageCover"
-              :height="imageSize"
-              :width="imageSize"
-            />
-          </slot>
-        </template>
-        <FSIconCard
-          v-else-if="$props.icon"
-          iconSize="70px"
-          :backgroundVariant="$props.iconBackgroundVariant"
-          :backgroundColor="$props.iconBackgroundColors"
-          :border="$props.iconBorder"
-          :iconColor="$props.color"
-          :icon="$props.icon"
-          :size="imageSize"
-        />
-        <FSCol
-          align="center-left"
-        >
-          <FSText
-            :font="$props.light ? 'text-h3' : 'text-h2'"
-          >
-            {{ $props.title }}
-          </FSText>
-          <FSCol
-            v-if="!$props.light && ($props.subtitle || $props.description)"
-            gap="4px"
-          >
-            <FSText
-              v-if="$props.subtitle"
-              font="text-button"
-            >
-              {{ $props.subtitle }}
-            </FSText>
-            <FSText
-              v-if="$props.description"
-              font="text-body"
-              :lineClamp="2"
-            >
-              {{ $props.description }}
-            </FSText>
-          </FSCol>
-        </FSCol>
-        <FSRow
-          v-if="!$props.light"
-          align="center-right"
-        >
-          <slot
-            name="title-append"
-          />
-        </FSRow>
-      </FSRow>
-      <template
-        v-if="!$props.light"
-      >
-        <FSBreadcrumbs
-          :items="$props.breadcrumbs"
-        />
-        <FSSlideGroup
-          v-if="slots['toolbar']"
-        >
-          <slot
-            name="toolbar"
-          />
-        </FSSlideGroup>
-      </template>
-    </FSCol>
-  </template>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
-
-import { type ColorBase, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
-import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-
-import FSBreadcrumbs from "../FSBreadcrumbs.vue";
-import FSSlideGroup from "../FSSlideGroup.vue";
-import FSIconCard from "../FSIconCard.vue";
-import FSImage from "../FSImage.vue";
-import FSText from "../FSText.vue";
-import FSCol from "../FSCol.vue";
-import FSRow from "../FSRow.vue";
-
-export default defineComponent({
-  name: "FSEntityHeader",
-  components: {
-    FSBreadcrumbs,
-    FSSlideGroup,
-    FSIconCard,
-    FSImage,
-    FSText,
-    FSCol,
-    FSRow
-  },
-  props: {
-    imageId: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: null
-    },
-    icon: {
-      type: String as PropType<string>,
-      required: false,
-      default: "mdi-ab-testing"
-    },
-    iconBackgroundVariant: {
-      type: String as PropType<"background" | "standard" | "full" | "gradient">,
-      required: false,
-      default: "background"
-    },
-    iconBackgroundColors: {
-      type: Array as PropType<string[]>,
-      required: false,
-      default: () => []
-    },
-    iconBorder: {
-      type: Boolean as PropType<boolean>,
-      required: false,
-      default: true
-    },
-    title: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    subtitle: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    description: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    breadcrumbs: {
-      type: Array as PropType<Array<FSBreadcrumbItem>>,
-      required: false,
-      default: () => []
-    },
-    light: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    imageCover: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  setup(props) {
-    const { isExtraSmall, isMobileSized } = useBreakpoints();
-    const { slots } = useSlots();
-
-    const imageSize = computed((): string[] | string => {
-      if (props.light) {
-        return ["40px", "36px"];
-      }
-      return ["124px", "96px", "80px"];
-    });
-
-    const rightOverflow = computed(() => {
-      let result = imageSize.value[0];
-      if (isExtraSmall.value && imageSize.value[2]) {
-        result = imageSize.value[2];
-      }
-      if ((isExtraSmall.value || isMobileSized.value) && imageSize.value[1]) {
-        result = imageSize.value[1];
-      }
-      return result;
-    });
-
-    return {
-      rightOverflow,
-      isExtraSmall,
-      imageSize,
-      slots
-    };
-  }
-});
-</script>

package/components/views/FSListHeader.vue

@@ -1,83 +0,0 @@
-<template>
-  <template
-    v-if="isExtraSmall"
-  >
-    <FSCol
-      gap="12px"
-    >
-      <FSText
-        font="text-h3"
-      >
-        {{  $props.title }}
-      </FSText>
-      <FSBreadcrumbs
-        :items="$props.breadcrumbs"
-      />
-    </FSCol>
-  </template>
-  <template
-    v-else
-  >
-    <FSCol
-      gap="16px"
-    >
-      <FSText
-        font="text-h2"
-      >
-        {{  $props.title }}
-      </FSText>
-      <FSBreadcrumbs
-        :items="$props.breadcrumbs"
-      />
-      <FSSlideGroup
-        v-if="$slots['toolbar']"
-        style="min-width: 100%;"
-      >
-        <slot
-          name="toolbar"
-        />
-      </FSSlideGroup>
-    </FSCol>
-  </template>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
-
-import { type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
-import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
-
-import FSBreadcrumbs from "../FSBreadcrumbs.vue";
-import FSSlideGroup from "../FSSlideGroup.vue";
-import FSText from "../FSText.vue";
-import FSCol from "../FSCol.vue";
-
-export default defineComponent({
-  name: "FSListHeader",
-  components: {
-    FSBreadcrumbs,
-    FSSlideGroup,
-    FSText,
-    FSCol
-  },
-  props: {
-    title: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    breadcrumbs: {
-      type: Array as PropType<Array<FSBreadcrumbItem>>,
-      required: false,
-      default: () => []
-    },
-  },
-  setup() {
-    const { isExtraSmall } = useBreakpoints();
-
-    return {
-      isExtraSmall
-    };
-  }
-});
-</script>

package/styles/components/fs_icon_field.scss

@@ -1,12 +0,0 @@
-.fs-icon-field-label {
-    color: var(--fs-icon-field-color);
-}
-
-.fs-icon-field-messages {
-    align-self: stretch;
-    color: var(--fs-icon-field-error-color);
-}
-
-.fs-icon-field-set {
-    max-width: 100%;
-}

package/styles/components/fs_search_field.scss

@@ -1,3 +0,0 @@
-.fs-search-field {
-  max-width: 500px;
-}

package/styles/components/fs_tag_field.scss

@@ -1,8 +0,0 @@
-.fs-tag-field-label {
-    color: var(--fs-tag-field-color);
-}
-
-.fs-tag-field-messages {
-    align-self: stretch;
-    color: var(--fs-tag-field-error-color);
-}

package/styles/components/fs_time_field.scss

@@ -1,12 +0,0 @@
-.fs-time-field-label {
-    color: var(--fs-time-field-color);
-}
-
-.fs-time-field-messages {
-    align-self: stretch;
-    color: var(--fs-time-field-error-color);
-}
-
-.fs-time-field-description {
-    color: var(--fs-time-field-color);
-}