@dative-gpi/foundation-shared-components 1.0.59 → 1.0.62

package/components/FSEditImage.vue

@@ -39,7 +39,7 @@ export default defineComponent({
 
     const onError = (): void => {
       if (props.imageId) {
-        console.log("onError");
+        console.error("Error loading image", props.imageId);
         getImage(props.imageId);
       }
     };

package/components/FSEditImageUI.vue

@@ -39,6 +39,7 @@
         :wrap="false"
       >
         <FSRow
+          class="fs-edit-image-standard-row"
           gap="24px"
           :wrap="false"
         >
@@ -59,6 +60,7 @@
             :width="$props.width"
           />
           <FSCol
+            class="fs-edit-image-standard-label-wrapper"
             align="center-left"
             height="fill"
             width="hug"
@@ -91,12 +93,12 @@
             </FSCol>
           </FSCol>
         </FSRow>
-        <v-spacer />
         <FSRow
-          width="hug"
+          align="center-right"
+          :width="isExtraSmall ? '40px' : 'hug'"
         >
           <FSButtonFileMini
-            accept="image/*"
+            accept=".jpg,.jpeg,.png"
             :readFile="false"
             @update:metadata="onUpload"
           />
@@ -124,7 +126,7 @@
         padding="4px"
       >
         <FSButtonFileMini
-          accept="image/*"
+          accept=".jpg,.jpeg,.png"
           :readFile="false"
           @update:metadata="onUpload"
         />
@@ -157,7 +159,7 @@
         <FSButtonFileMini
           class="fs-edit-image-hidden-button"
           ref="invisibleButtonRef"
-          accept="image/*"
+          accept=".jpg,.jpeg,.png"
           :readFile="false"
           @update:metadata="onUpload"
         />

package/components/FSGrid.vue

@@ -27,6 +27,7 @@
         >
           <FSText
             :font="item.hideDefault ? 'text-body' : 'text-overline'"
+            variant="soft"
           >
             {{ item.label }}
           </FSText>

package/components/FSTag.vue

@@ -1,6 +1,6 @@
 <template>
   <FSRow
-    align="center-left"
+    align="center-center"
     class="fs-tag"
     :height="$props.height"
     :width="$props.width"
@@ -79,7 +79,7 @@ export default defineComponent({
     color: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Primary
+      default: ColorEnum.Light
     },
     editable: {
       type: Boolean,

package/components/FSTagGroup.vue

@@ -64,7 +64,7 @@ export default defineComponent({
     color: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Primary
+      default: ColorEnum.Light
     },
     editable: {
       type: Boolean,

package/components/deviceOrganisations/FSConnectivity.vue

@@ -2,6 +2,7 @@
   <v-menu
     :closeOnContentClick="false"
     v-model="menu"
+    location="bottom center"
   >
     <template
       #activator="{ props }"

package/components/deviceOrganisations/FSConnectivityCard.vue

@@ -1,55 +1,33 @@
 <template>
   <FSCard
-    padding="2px 2px 8px 2px"
+    padding="12px 24px"
     :elevation="true"
-    :border="false"
   >
     <FSCol
       align="center-center"
+      gap="12px"
     >
+      <FSChip
+        :prependIcon="$props.deviceConnectivity.icon"
+        :color="$props.deviceConnectivity.color"
+        :label="connectivityLabel($props.deviceConnectivity.status)"
+      />
       <FSCol
         align="center-center"
         gap="0px"
       >
-        <FSRow
-          align="center-right"
-        >
-          <FSButton
-            icon="mdi-close"
-            variant="icon"
-            @click="$emit('close')"
-          />
-        </FSRow>
-        <FSCol
-          align="center-center"
-          padding="0px 24px"
-          gap="12px"
-        >
-          <FSChip
-            :prependIcon="$props.deviceConnectivity.icon"
-            :color="$props.deviceConnectivity.color"
-            :label="connectivityLabel($props.deviceConnectivity.status)"
-          />
-          <FSRow
-            width="hug"
-          >
-            <FSText>
-              {{ $tr("ui.shared.device-connectivity.last-message", "Last message") }}
-            </FSText>
-          </FSRow>
-        </FSCol>
-      </FSCol>
-      <FSRow
-        v-if="deviceTimestamp"
-        padding="0px 24px"
-        width="hug"
-      >
-        <FSSpan
-          font="text-overline"
+        <FSText>
+          {{ $tr("ui.device.last-message-received", "Last message received") }}
+        </FSText>
+        <FSText
+          v-if="deviceTimestamp"
+          font="text-button"
+          :color="$props.deviceConnectivity.color"
+          variant="soft"
         >
           {{ deviceTimestamp }}
-        </FSSpan>
-      </FSRow>
+        </FSText>
+      </FSCol>
     </FSCol>
   </FSCard>
 </template>
@@ -62,24 +40,18 @@ import { useDateFormat } from "@dative-gpi/foundation-shared-services/composable
 
 import { connectivityLabel } from "../../utils";
 
-import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSText from "../FSText.vue";
-import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
-import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSConnectivityCard",
   components: {
-    FSButton,
     FSCard,
     FSChip,
     FSText,
-    FSSpan,
     FSCol,
-    FSRow
   },
   props: {
     deviceConnectivity: {

package/components/deviceOrganisations/FSStatus.vue

@@ -2,13 +2,14 @@
   <v-menu
     :closeOnContentClick="false"
     v-model="menu"
+    location="bottom center"
   >
     <template
       #activator="{ props }"
     >
       <FSColorIcon
         class="fs-stopclick"
-        size="m"
+        :size="$props.size"
         :color="$props.statusGroup.color"
         @click.prevent.stop
         v-bind="props"
@@ -47,6 +48,10 @@ export default defineComponent({
     statusGroup: {
       type: Object as PropType<FSDeviceStatusGroup>,
       required: true
+    },
+    size: {
+      type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
+      default: "m"
     }
   },
   setup() {

package/components/deviceOrganisations/FSStatusCard.vue

@@ -1,68 +1,42 @@
 <template>
   <FSCard
-    padding="2px 2px 8px 2px"
+    padding="12px 24px"
     :elevation="true"
-    :border="false"
   >
     <FSCol
       align="center-center"
+      gap="12px"
     >
+      <FSChip
+        :prependIcon="$props.statusGroup.icon"
+        :color="$props.statusGroup.color"
+        :label="statusLabel"
+      />
       <FSCol
+        v-if="$props.statusGroup.value"
         align="center-center"
         gap="0px"
       >
-        <FSRow
-          v-if="$props.closable"
-          align="center-right"
+        <FSText
+          v-if="$props.statusGroup.value && $props.modelStatus.groupById && $props.statusGroup.groupByValue"
         >
-          <FSButton
-            icon="mdi-close"
-            variant="icon"
-            @click="$emit('close')"
-          />
-        </FSRow>
-        <FSCol
-          align="center-center"
-          padding="0px 24px"
-          gap="12px"
+          {{ $props.modelStatus.groupByLabel }} {{ $props.statusGroup.groupByValue }}
+        </FSText>
+        <FSText
+          v-if="$props.statusGroup.value"
+          font="text-button"
+          :color="$props.statusGroup.color"
         >
-          <FSChip
-            :prependIcon="$props.statusGroup.icon"
-            :color="$props.statusGroup.color"
-            :label="statusLabel"
-          />
-          <FSRow
-            v-if="$props.statusGroup.value"
-            width="hug"
-          >
-            <FSText
-              font="text-button"
-              :color="$props.statusGroup.color"
-            >
-              {{ $props.statusGroup.value }} {{ $props.statusGroup.unit }}
-            </FSText>
-          </FSRow>
-          <FSRow
-            v-if="$props.statusGroup.value && $props.modelStatus.groupById && $props.statusGroup.groupByValue"
-            width="hug"
-          >
-            <FSSpan>
-              {{ $props.modelStatus.groupByLabel }} {{ $props.statusGroup.groupByValue }}
-            </FSSpan>
-          </FSRow>
-        </FSCol>
+          {{ statusValue }} {{ $props.statusGroup.unit }}
+        </FSText>
       </FSCol>
-      <FSRow
+      <FSText
         v-if="deviceTimestamp"
-        padding="0px 24px"
-        width="hug"
+        font="text-overline"
+        variant="soft"
       >
-        <FSSpan
-          font="text-overline"
-        >
-          {{ deviceTimestamp }}
-        </FSSpan>
-      </FSRow>
+        {{ deviceTimestamp }}
+      </FSText>
     </FSCol>
   </FSCard>
 </template>
@@ -73,24 +47,18 @@ import { computed, defineComponent, type PropType } from "vue";
 import type { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
-import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSText from "../FSText.vue";
-import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
-import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSStatusCard",
   components: {
-    FSButton,
     FSCard,
     FSChip,
     FSText,
-    FSSpan,
-    FSCol,
-    FSRow
+    FSCol
   },
   props: {
     closable: {
@@ -114,6 +82,13 @@ export default defineComponent({
       return props.statusGroup.label || props.modelStatus.label;
     });
 
+    const statusValue = computed((): string => {
+      if (props.statusGroup.value && !isNaN(parseFloat(props.statusGroup.value))) {
+        return parseFloat(props.statusGroup.value).toLocaleString("fullwide", { maximumFractionDigits: 2 });
+      }
+      return props.statusGroup.value || "";
+    });
+
     const deviceTimestamp = computed((): string => {
       if (props.statusGroup.sourceTimestamp) {
         return epochToLongTimeFormat(props.statusGroup.sourceTimestamp);
@@ -123,7 +98,8 @@ export default defineComponent({
 
     return {
       deviceTimestamp,
-      statusLabel
+      statusLabel,
+      statusValue
     };
   }
 });

package/components/deviceOrganisations/FSStatusesRow.vue

@@ -10,8 +10,9 @@
     />
     <FSWorstAlert
       v-if="$props.deviceWorstAlert"
-      :deviceAlerts="$props.deviceAlerts.length"
-      :deviceAlert="$props.deviceWorstAlert"
+      :deviceWorstAlert="$props.deviceWorstAlert"
+      :deviceAlerts="$props.deviceAlerts"
+      :alertTo="$props.alertTo"
     />
     <template
       v-for="(modelStatus, index) in $props.modelStatuses"
@@ -68,6 +69,11 @@ export default defineComponent({
     deviceStatuses: {
       type: Array as PropType<FSDeviceStatus[]>,
       required: true
+    },
+    alertTo: {
+      type: Function,
+      required: false,
+      default: null
     }
   },
   setup(props) {

package/components/deviceOrganisations/FSWorstAlert.vue

@@ -2,6 +2,7 @@
   <v-menu
     :closeOnContentClick="false"
     v-model="menu"
+    location="bottom center"
   >
     <template
       #activator="{ props }"
@@ -22,7 +23,8 @@
       </FSBadge>
     </template>
     <FSWorstAlertCard
-      :deviceAlert="deviceAlert"
+      :deviceAlert="deviceWorstAlert"
+      :alertTo="$props.alertTo"
       @close="menu = false"
     />
   </v-menu>
@@ -31,8 +33,8 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref } from "vue";
 
+import { type FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
 import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
-import type { FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSWorstAlertCard from "./FSWorstAlertCard.vue";
@@ -47,21 +49,26 @@ export default defineComponent({
     FSBadge
   },
   props: {
-    deviceAlert: {
+    deviceWorstAlert: {
       type: Object as PropType<FSDeviceAlert>,
       required: true
     },
     deviceAlerts: {
-      type: Number,
+      type: Array as PropType<FSDeviceAlert[]>,
       required: false,
-      default: 0
+      default: () => []
+    },
+    alertTo: {
+      type: Function,
+      required: false,
+      default: null
     }
   },
   setup(props) {
     const menu = ref(false);
 
     const criticityColor = computed(() => {
-      switch (props.deviceAlert?.criticity) {
+      switch (props.deviceWorstAlert?.criticity) {
         case Criticity.Error: return ColorEnum.Error;
         case Criticity.Warning: return ColorEnum.Warning;
         default: return ColorEnum.Primary;
@@ -69,7 +76,7 @@ export default defineComponent({
     });
 
     const statusIcon = computed(() => {
-      switch (props.deviceAlert?.status) {
+      switch (props.deviceWorstAlert?.status) {
         case AlertStatus.Pending:     return "mdi-timer-outline";
         case AlertStatus.Untriggered: return "mdi-timer-off-outline";
         case AlertStatus.Unresolved:  return "mdi-alert-circle-outline";
@@ -82,13 +89,13 @@ export default defineComponent({
     });
 
     const badgeLabel = computed((): string | null => {
-      if (props.deviceAlerts < 1) {
+      if (!props.deviceAlerts || props.deviceAlerts.length < 1) {
         return null;
       }
-      if (props.deviceAlerts > 9) {
+      if (props.deviceAlerts.length > 9) {
         return "9+";
       }
-      return (props.deviceAlerts).toString();
+      return props.deviceAlerts.length.toString();
     });
 
     return {

package/components/deviceOrganisations/FSWorstAlertCard.vue

@@ -1,55 +1,44 @@
 <template>
   <FSCard
-    padding="2px 2px 8px 2px"
+    padding="12px 24px"
     :elevation="true"
-    :border="false"
   >
     <FSCol
       align="center-center"
+      gap="12px"
     >
+      <FSChip
+        :label="$tr('ui.common.alert', 'Alert')"
+        :prependIcon="statusIcon"
+        :color="criticityColor"
+      />
       <FSCol
         align="center-center"
         gap="0px"
       >
-        <FSRow
-          align="center-right"
+        <FSText>
+          {{ $tr('ui.alert.status', 'Status') }} : {{ statusLabel }}
+        </FSText>
+        <FSText
+          font="text-button"
+          :color="criticityColor"
         >
-          <FSButton
-            icon="mdi-close"
-            variant="icon"
-            @click="$emit('close')"
-          />
-        </FSRow>
-        <FSCol
-          align="center-center"
-          padding="0px 24px"
-          gap="12px"
-        >
-          <FSChip
-            :label="$props.deviceAlert.label"
-            :prependIcon="statusIcon"
-            :color="criticityColor"
-          />
-          <FSRow
-            width="hug"
-          >
-            <FSText>
-              {{ statusLabel }}
-            </FSText>
-          </FSRow>
-        </FSCol>
+          {{ $props.deviceAlert.label }}
+        </FSText>
       </FSCol>
-      <FSRow
+      <FSText
         v-if="deviceTimestamp"
-        padding="0px 24px"
-        width="hug"
+        font="text-overline"
+        variant="dark"
       >
-        <FSSpan
-          font="text-overline"
-        >
-          {{ deviceTimestamp }}
-        </FSSpan>
-      </FSRow>
+        {{ deviceTimestamp }}
+      </FSText>
+      <FSButton
+        v-if="$props.alertTo"
+        icon="mdi-information-outline"
+        :label="$tr('ui.alert.details', 'Alert details')"
+        :to="$props.alertTo($props.deviceAlert.id)"
+      />
     </FSCol>
   </FSCard>
 </template>
@@ -58,18 +47,16 @@
 import { computed, defineComponent, type PropType } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import type { FSDeviceAlert} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type FSDeviceAlert} from "@dative-gpi/foundation-shared-components/models";
 import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSText from "../FSText.vue";
-import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
-import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSWorstAlertCard",
@@ -78,14 +65,17 @@ export default defineComponent({
     FSCard,
     FSChip,
     FSText,
-    FSSpan,
     FSCol,
-    FSRow
   },
   props: {
     deviceAlert: {
       type: Object as PropType<FSDeviceAlert>,
       required: true
+    },
+    alertTo: {
+      type: Function,
+      required: false,
+      default: null
     }
   },
   emits: ["close"],

package/components/fields/FSBaseField.vue

@@ -1,5 +1,7 @@
 <template>
-  <FSCol>
+  <FSCol
+    :style="style"
+  >
     <slot
       v-if="!$props.hideHeader"
       name="label"
@@ -10,7 +12,6 @@
         <FSSpan
           class="fs-base-field-label"
           font="text-overline"
-          :style="style"
         >
           {{ $props.label }}
         </FSSpan>
@@ -49,7 +50,6 @@
         v-if="$props.description"
         class="fs-base-field-description"
         font="text-overline"
-        :style="style"
       >
         {{ $props.description }}
       </FSSpan>
@@ -104,6 +104,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    minWidth: {
+      type: String,
+      required: false,
+      default: "120px"
     }
   },
   setup(props) {
@@ -120,12 +125,14 @@ export default defineComponent({
     const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
-          "--fs-base-field-color": lights.dark
+          "--fs-base-field-color"    : lights.dark,
+          "--fs-base-field-min-width": props.minWidth
         };
       }
       return {
         "--fs-base-field-color"      : darks.base,
-        "--fs-base-field-error-color": errors.base
+        "--fs-base-field-error-color": errors.base,
+        "--fs-base-field-min-width"  : props.minWidth
       };
     });
 

package/components/fields/FSEntityFieldUI.vue

@@ -10,7 +10,9 @@
     <FSCol
       gap="12px"
     >
-      <FSRow>
+      <FSRow
+        :wrap="false"
+      >
         <FSSelectField
           :hideHeader="true"
           :modelValue="$props.entityType"
@@ -37,7 +39,9 @@
           />
         </template>
       </FSRow>
-      <FSRow>
+      <FSRow
+        v-if="$props.showCount"
+      >
         <template
           v-if="itemsCount > 0"
         >
@@ -89,7 +93,7 @@
 
       <FSFadeOut
         v-if="$props.showEntities && itemsCount > 0"
-        maxHeight="220px"
+        :maxHeight="$props.listMaxHeight"
         width="100%"
       >
         <slot
@@ -181,6 +185,16 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    showCount: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    listMaxHeight: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: "220px"
     }
   },
   emits: ["update:entityType", "click:select"],

package/components/fields/FSNumberField.vue

@@ -1,6 +1,7 @@
 <template>
   <FSTextField
     class="fs-number-field"
+    minWidth="80px"
     :editable="$props.editable"
     :modelValue="$props.modelValue?.toString()"
     @update:modelValue="onUpdate"

package/components/fields/FSTagField.vue

@@ -91,7 +91,7 @@ export default defineComponent({
     tagColor: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Primary
+      default: ColorEnum.Light
     },
     hideHeader: {
       type: Boolean,

package/components/fields/FSTermField.vue

@@ -14,6 +14,7 @@
         :wrap="false"
       >
         <FSSelectDateSetting
+          minWidth="180px"
           :lastPeriod="$props.lastPeriod"
           :editable="$props.editable"
           :variant="$props.variant"
@@ -22,10 +23,12 @@
           @update:modelValue="innerDateSettingChange"
         />
         <FSNumberField
+          minWidth="60px"
           v-if="pastSettings.includes(innerDateSetting)"
           :rules="[NumberRules.required(), NumberRules.min(0)]"
           :editable="$props.editable"
           :hideHeader="true"
+          :clearable="false"
           :modelValue="innerDateValue"
           @update:modelValue="innerDateValueChange"
         />

package/components/lists/FSDataTableUI.vue

@@ -3,7 +3,7 @@
     gap="16px"
   >
     <FSRow
-      align="bottom-center"
+      align="bottom-left"
       :wrap="isExtraSmall ? false : true"
       width="fill"
     >
@@ -896,7 +896,7 @@ export default defineComponent({
     const innerSortBy = ref(props.sortBy);
     const innerMode = ref(props.mode);
     const innerPage = ref(props.page);
-    const showFilters = ref(true);
+    const showFilters = ref(false);
     const resetable = ref(false);
 
     const intersectionObserver = ref<IntersectionObserver | null>(null);

package/components/lists/FSSimpleList.vue

@@ -46,6 +46,7 @@
             >
               <FSRow
                 align="center-left"
+                height="24px"
                 :wrap="false"
               >
                 <FSButtonDragIcon

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -43,6 +43,7 @@
             :deviceStatuses="singleDeviceStatuses"
             :modelStatuses="singleModelStatuses"
             :deviceAlerts="$props.deviceAlerts"
+            :alertTo="$props.alertTo"
           />
         </FSCol>
         <FSImage
@@ -132,6 +133,11 @@ export default defineComponent({
       required: true,
       default: () => []
     },
+    alertTo: {
+      type: Function,
+      required: false,
+      default: null
+    },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,

package/components/tiles/FSLocationTileUI.vue

@@ -3,6 +3,7 @@
     :activeColor="$props.color"
     :bottomColor="$props.color"
     :modelValue="$props.modelValue"
+    :width="$props.width"
     v-bind="$attrs"
   >
     <FSRow
@@ -26,6 +27,7 @@
             {{ $props.label }}
           </FSSpan>
           <FSSpan
+            v-if="$props.code"
             font="text-overline"
             variant="soft"
           >
@@ -55,7 +57,7 @@
           <FSSpan
             font="text-overline"
           >
-            {{ $tr("ui.location-tile.device(s)", "Device(s) in this location.") }}
+            {{ $tr("ui.common.devices", "Devices") }}
           </FSSpan>
         </FSRow>
       </FSCol>
@@ -88,7 +90,7 @@ import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
-  name: "FSGroupTileUI",
+  name: "FSLocationTileUI",
   components: {
     FSIconCard,
     FSColor,
@@ -128,6 +130,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
   },
   setup() {
     return {

package/components/tiles/FSModelTileUI.vue

@@ -1,59 +1,18 @@
 <template>
-  <FSClickable
-    padding="16px"
-    height="196px"
-    width="148px"
-    :border="false"
+  <FSSimpleTileUI
     v-bind="$attrs"
-  >
-    <template
-      #default
-    >
-      <FSCol
-        align="center-center"
-      >
-        <FSImage
-          :imageId="imageId"
-          width="116px"
-          height="116px"
-        />
-        <FSSpan
-          :lineClamp="2"
-        >
-          {{ label }}
-        </FSSpan>
-      </FSCol>
-    </template>
-  </FSClickable>
+  />
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+import { defineComponent } from "vue";
 
-import FSCol from "../FSCol.vue";
-import FSSpan from "../FSSpan.vue";
-import FSImage from "../FSImage.vue";
-import FSClickable from "../FSClickable.vue";
+import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
 export default defineComponent({
   name: "FSModelTileUI",
   components: {
-    FSCol,
-    FSSpan,
-    FSImage,
-    FSClickable,
-  },
-  props:{
-    label: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    imageId: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null,
-    }
+    FSSimpleTileUI,
   }
 });
 </script>

package/components/tiles/FSSimpleTileUI.vue

@@ -12,7 +12,7 @@
       width="fill"
     >
       <FSRow
-        align="center-center"
+        align="center-left"
         gap="24px"
         :height="imageSize"
         :wrap="false"
@@ -41,7 +41,7 @@
           :width="imageSize"
         />
         <FSIconCard
-          v-else
+          v-else-if="$props.icon"
           :backgroundVariant="$props.iconBackgroundVariant"
           :backgroundColor="$props.iconBackgroundColor"
           :border="$props.iconBorder"
@@ -95,7 +95,6 @@ export default defineComponent({
     icon: {
       type: String as PropType<string>,
       required: false,
-      default: "mdi-ab-testing"
     },
     iconBackgroundVariant: {
       type: String as PropType<"background" | "standard" | "full" | "gradient">,

package/components/views/FSEntityHeader.vue

@@ -29,18 +29,13 @@
             />
           </slot>
         </template>
-        <FSIcon
-          v-else-if="$props.icon && $props.color"
-          :color="$props.color"
-          :icon="$props.icon"
-          :size="imageSize"
-        />
         <FSIconCard
-          v-else-if="$props.icon && $props.iconBackgroundColor && $props.iconBackgroundColor.length > 0"
+          v-else-if="$props.icon"
           :backgroundVariant="$props.iconBackgroundVariant"
-          :backgroundColor="$props.iconBackgroundColor"
+          :backgroundColor="$props.iconBackgroundColors"
           :border="$props.iconBorder"
           :icon="$props.icon"
+          :iconColor="$props.color"
           :size="imageSize"
         />
         <FSCol
@@ -59,11 +54,13 @@
               align="center-left"
               gap="4px"
             >
-              <FSText>
+              <FSText
+                font="text-button"
+              >
                 {{ $props.subtitle }}
               </FSText>
               <FSText
-                font="text-overline"
+                font="text-body"
               >
                 {{ $props.description }}
               </FSText>
@@ -78,7 +75,9 @@
             >
               {{ $props.title }}
             </FSText>
-            <FSText>
+            <FSText
+              font="text-button"
+            >
               {{ $props.subtitle }}
             </FSText>
           </template>
@@ -92,7 +91,7 @@
               {{ $props.title }}
             </FSText>
             <FSText
-              font="text-overline"
+              font="text-body"
               :lineClamp="2"
             >
               {{ $props.description }}
@@ -161,17 +160,12 @@
           </slot>
         </template>
         <FSIconCard
-          v-else-if="$props.icon && $props.iconBackgroundColor && $props.iconBackgroundColor.length > 0"
+          v-else-if="$props.icon"
           iconSize="70px"
           :backgroundVariant="$props.iconBackgroundVariant"
-          :backgroundColor="$props.iconBackgroundColor"
+          :backgroundColor="$props.iconBackgroundColors"
           :border="$props.iconBorder"
-          :icon="$props.icon"
-          :size="imageSize"
-        />
-        <FSIcon
-          v-else-if="$props.icon"
-          :color="$props.color"
+          :iconColor="$props.color"
           :icon="$props.icon"
           :size="imageSize"
         />
@@ -189,12 +183,13 @@
           >
             <FSText
               v-if="$props.subtitle"
+              font="text-button"
             >
               {{ $props.subtitle }}
             </FSText>
             <FSText
               v-if="$props.description"
-              font="text-overline"
+              font="text-body"
               :lineClamp="2"
             >
               {{ $props.description }}
@@ -231,14 +226,13 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { ColorEnum, type ColorBase, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
+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 FSIcon from "../FSIcon.vue";
 import FSText from "../FSText.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -250,7 +244,6 @@ export default defineComponent({
     FSSlideGroup,
     FSIconCard,
     FSImage,
-    FSIcon,
     FSText,
     FSCol,
     FSRow
@@ -276,10 +269,10 @@ export default defineComponent({
       required: false,
       default: "background"
     },
-    iconBackgroundColor: {
-      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+    iconBackgroundColors: {
+      type: Array as PropType<string[]>,
       required: false,
-      default: ColorEnum.Background
+      default: () => []
     },
     iconBorder: {
       type: Boolean as PropType<boolean>,

package/components/views/FSEntityView.vue

@@ -11,6 +11,7 @@
         :title="$props.title"
         :light="lightHeader"
         :imageId="imageId"
+        :iconBackgroundVariant="$props.iconBackgroundVariant"
         :icon="$props.icon"
         :color="$props.color"
         :iconBackgroundColors="$props.iconBackgroundColors"
@@ -120,6 +121,11 @@ export default defineComponent({
       type: Array as PropType<FSBreadcrumbItem[]>,
       required: false,
       default: () => []
+    },
+    iconBackgroundVariant: {
+      type: String as PropType<"background" | "standard" | "full" | "gradient">,
+      required: false,
+      default: "background"
     }
   },
   setup() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.59",
+  "version": "1.0.62",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.59",
-    "@dative-gpi/foundation-shared-services": "1.0.59"
+    "@dative-gpi/foundation-shared-domain": "1.0.62",
+    "@dative-gpi/foundation-shared-services": "1.0.62"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "583e582d2f2185269a2d2880806be36bdc4dffdd"
+  "gitHead": "aebca5afe970e1d7117b5515abba742a6c96fa3a"
 }

package/styles/components/fs_color_field.scss

@@ -1,5 +1,6 @@
 .fs-color-field .fs-card {
   cursor: var(--fs-color-field-cursor) !important;
+  min-width: var(--fs-base-field-min-width);
   border-color: var(--fs-color-field-border-color) !important;
   .fs-text {
     color: var(--fs-color-field-color) !important;

package/styles/components/fs_edit_image.scss

@@ -2,6 +2,14 @@
     color: var(--fs-edit-image-overline-text-color) !important;
 }
 
+.fs-edit-image-standard-row {
+    min-width: 0;
+}
+
+.fs-edit-image-standard-label-wrapper {
+    min-width: 0;
+}
+
 .fs-edit-image-hidden-button {
     display: none;
 }

package/styles/components/fs_tabs.scss

@@ -59,6 +59,7 @@
     color: var(--fs-tab-tag-color);
     display: flex;
     align-items: center;
+    justify-content: center;
 
     @include web {
         min-width: 28px;

package/styles/globals/overrides.scss

@@ -40,13 +40,8 @@
         flex: 0 0 auto;
     }
 
-    &:not(.v-checkbox):not(.v-slider):not(.fs-small-input):not(.fs-number-field) {
-        min-width: 120px;
-        width: 100%;
-    }
-
-    &.fs-number-field {
-        min-width: 80px;
+    &:not(.v-checkbox):not(.v-slider):not(.fs-small-input) {
+        min-width: var(--fs-base-field-min-width);
         width: 100%;
     }
 

package/utils/time.ts

@@ -12,7 +12,7 @@ export const timeSteps = [
   { id: TimeUnit.Week,        label: $tr("ui.time-step.week.singular", "Week"),     plural: $tr("ui.time-step.week.plural", "Weeks") },
   { id: TimeUnit.Month,       label: $tr("ui.time-step.month.singular", "Month"),   plural: $tr("ui.time-step.month.plural", "Months") },
   { id: TimeUnit.Year,        label: $tr("ui.time-step.year.singular", "Year"),     plural: $tr("ui.time-step.year.plural", "Years") },
-]
+];
 
 export const timeStepToString = (value: { value: number, unit: TimeUnit } | null): string => {
   if (!value) {
@@ -25,7 +25,7 @@ export const timeStepToString = (value: { value: number, unit: TimeUnit } | null
   }
   
   return `${value.value} ${value.value === 1 ? unit.label.toLowerCase() : unit.plural.toLowerCase()}`;
-}
+};
 
 // TODO : remove everything below this line
 export const timeScale: any[] = [
@@ -52,4 +52,4 @@ export const getTimeBestString = (value: number): string => {
   const unit = getTimeScaleIndex(value);
   const figure = value / timeScale[unit].id;
   return `${figure} ${figure === 1 ? timeScale[unit].label.toLowerCase() : timeScale[unit].plural.toLowerCase()}`;
-}
+};