@dative-gpi/foundation-shared-components 0.0.23 → 0.0.25

package/components/FSBreadcrumbs.vue

@@ -51,7 +51,7 @@ export default defineComponent({
     const classes = (item: FSBreadcrumbItem): string[] => {
       const classNames = ["fs-breadcrumbs-label"];
       if (item.disabled) {
-        classNames.push("fs-breadcrumbs-label--disabled");
+        classNames.push("fs-breadcrumbs-label-disabled");
       }
       return classNames;
     };

package/components/FSButton.vue

@@ -7,7 +7,6 @@
     :variant="$props.variant"
     :color="$props.color"
     :padding="padding"
-    :class="classes"
     :style="style"
     :width="width"
     v-bind="$attrs"
@@ -46,7 +45,7 @@
     v-else-if="$props.icon"
     align="center-center"
     width="hug"
-    :class="classes"
+    :class="iconClasses"
     :style="style"
     v-bind="$attrs"
   >
@@ -156,18 +155,10 @@ export default defineComponent({
       }
     });
 
-    const classes = computed((): string[] => {
-      const classNames: string[] = [];
-      if (props.fullWidth) {
-        classNames.push("fs-button-full-width");
-      }
-      switch (props.variant) {
-        case "icon":
-          classNames.push("fs-button-icon");
-          break;
-        default:
-          classNames.push("fs-button");
-          break;
+    const iconClasses = computed((): string[] => {
+      const classNames = ["fs-button-icon"];
+      if (!props.editable) {
+        classNames.push("fs-button-disabled");
       }
       return classNames;
     });
@@ -188,7 +179,7 @@ export default defineComponent({
     });
 
     return {
-      classes,
+      iconClasses,
       padding,
       colors,
       style,

package/components/FSClickable.vue

@@ -140,7 +140,7 @@ export default defineComponent({
 
     const anchorClasses = computed((): string[] => {
       const classNames: string[] = [];
-      if (!props.fullWidth) {
+      if (props.fullWidth) {
         classNames.push("fs-clickable-anchor-full-width");
       }
       return classNames;

package/components/deviceOrganisations/FSConnectivity.vue

@@ -1,6 +1,5 @@
 <template>
   <v-menu
-    v-if="$props.deviceConnectivity"
     :closeOnContentClick="false"
     v-model="menu"
   >
@@ -14,68 +13,25 @@
         {{ $props.deviceConnectivity.icon }}
       </FSColorIcon>
     </template>
-    <FSCard
-      :elevation="true"
-      :border="false"
-    >
-      <FSCol
-        align="center-center"
-        padding="6px 24px"
-      >
-        <FSCol
-          align="center-center"
-          gap="12px"
-        >
-          <FSChip
-            :color="$props.deviceConnectivity.color"
-            :prependIcon="$props.deviceConnectivity.icon"
-            :label="connectivityLabel"
-          />
-          <FSRow
-            width="hug"
-          >
-            <FSText>
-              {{ $tr("ui.shared.device-connectivity.last-message", "Last message") }}
-            </FSText>
-          </FSRow>
-        </FSCol>
-        <FSRow
-          v-if="deviceTimestamp"
-          width="hug"
-        >
-          <FSSpan
-            font="text-overline"
-          >
-            {{ deviceTimestamp }}
-          </FSSpan>
-        </FSRow>
-      </FSCol>
-    </FSCard>
+    <FSConnectivityCard
+      :deviceConnectivity="$props.deviceConnectivity"
+    />
   </v-menu>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import { defineComponent, PropType, ref } from "vue";
 
-import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
-import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
+import FSConnectivityCard from "./FSConnectivityCard.vue";
 import FSColorIcon from "../FSColorIcon.vue";
-import FSCard from "../FSCard.vue";
-import FSChip from "../FSChip.vue";
-import FSText from "../FSText.vue";
-import FSSpan from "../FSSpan.vue";
 
 export default defineComponent({
   name: "FSConnectivity",
   components: {
-    FSColorIcon,
-    FSCard,
-    FSChip,
-    FSText,
-    FSSpan
+    FSConnectivityCard,
+    FSColorIcon
   },
   props: {
     deviceConnectivity: {
@@ -83,31 +39,10 @@ export default defineComponent({
       required: true
     }
   },
-  setup(props) {
-    const { epochToLongTimeFormat } = useTimeZone();
-    const { $tr } = useTranslationsProvider();
-
+  setup() {
     const menu = ref(false);
 
-    const connectivityLabel = computed((): string => {
-      switch (props.deviceConnectivity.status) {
-        case ConnectivityStatus.Connected:          return $tr("ui.connectivity-status.connected", "Connected");
-        case ConnectivityStatus.PartiallyConnected: return $tr("ui.connectivity-status.partially-connected", "Partially connected");
-        case ConnectivityStatus.AlmostOffline:      return $tr("ui.connectivity-status.almost-offline", "Almost offline");
-        default:                                    return $tr("ui.connectivity-status.offline", "Offline");
-      }
-    });
-
-    const deviceTimestamp = computed((): string => {
-      if (props.deviceConnectivity.sourceTimestamp) {
-        return epochToLongTimeFormat(props.deviceConnectivity.sourceTimestamp);
-      }
-      return "";
-    });
-
     return {
-      connectivityLabel,
-      deviceTimestamp,
       menu
     };
   }

package/components/deviceOrganisations/FSConnectivityCard.vue

@@ -0,0 +1,98 @@
+<template>
+  <FSCard
+    :elevation="true"
+    :border="false"
+  >
+    <FSCol
+      align="center-center"
+      padding="6px 24px"
+    >
+      <FSCol
+        align="center-center"
+        gap="12px"
+      >
+        <FSChip
+          :color="$props.deviceConnectivity.color"
+          :prependIcon="$props.deviceConnectivity.icon"
+          :label="connectivityLabel"
+        />
+        <FSRow
+          width="hug"
+        >
+          <FSText>
+            {{ $tr("ui.shared.device-connectivity.last-message", "Last message") }}
+          </FSText>
+        </FSRow>
+      </FSCol>
+      <FSRow
+        v-if="deviceTimestamp"
+        width="hug"
+      >
+        <FSSpan
+          font="text-overline"
+        >
+          {{ deviceTimestamp }}
+        </FSSpan>
+      </FSRow>
+    </FSCol>
+  </FSCard>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
+import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
+import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+
+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: {
+    FSCard,
+    FSChip,
+    FSText,
+    FSSpan,
+    FSCol,
+    FSRow
+  },
+  props: {
+    deviceConnectivity: {
+      type: Object as PropType<FSDeviceConnectivity>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { epochToLongTimeFormat } = useTimeZone();
+    const { $tr } = useTranslationsProvider();
+
+    const connectivityLabel = computed((): string => {
+      switch (props.deviceConnectivity.status) {
+        case ConnectivityStatus.Connected:          return $tr("ui.connectivity-status.connected", "Connected");
+        case ConnectivityStatus.PartiallyConnected: return $tr("ui.connectivity-status.partially-connected", "Partially connected");
+        case ConnectivityStatus.AlmostOffline:      return $tr("ui.connectivity-status.almost-offline", "Almost offline");
+        default:                                    return $tr("ui.connectivity-status.offline", "Offline");
+      }
+    });
+
+    const deviceTimestamp = computed((): string => {
+      if (props.deviceConnectivity.sourceTimestamp) {
+        return epochToLongTimeFormat(props.deviceConnectivity.sourceTimestamp);
+      }
+      return "";
+    });
+
+    return {
+      connectivityLabel,
+      deviceTimestamp
+    };
+  }
+});
+</script>

package/components/deviceOrganisations/FSStatus.vue

@@ -13,78 +13,26 @@
         {{ $props.statusGroup.icon }}
       </FSColorIcon>
     </template>
-    <FSCard
-      :elevation="true"
-      :border="false"
-    >
-      <FSCol
-        align="center-center"
-        padding="6px 24px"
-      >
-        <FSCol
-          align="center-center"
-          gap="12px"
-        >
-          <FSChip
-            :color="$props.statusGroup.color"
-            :prependIcon="$props.statusGroup.icon"
-            :label="$props.statusGroup.label"
-          />
-          <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>
-        <FSRow
-          v-if="deviceTimestamp"
-          width="hug"
-        >
-          <FSSpan
-            font="text-overline"
-          >
-            {{ deviceTimestamp }}
-          </FSSpan>
-        </FSRow>
-      </FSCol>
-    </FSCard>
+    <FSStatusCard
+      :modelStatus="$props.modelStatus"
+      :statusGroup="$props.statusGroup"
+    />
   </v-menu>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import { defineComponent, PropType, ref } from "vue";
 
 import { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
+import FSStatusCard from "./FSStatusCard.vue";
 import FSColorIcon from "../FSColorIcon.vue";
-import FSCard from "../FSCard.vue";
-import FSChip from "../FSChip.vue";
-import FSText from "../FSText.vue";
-import FSSpan from "../FSSpan.vue";
 
 export default defineComponent({
   name: "FSStatus",
   components: {
-    FSColorIcon,
-    FSCard,
-    FSChip,
-    FSText,
-    FSSpan
+    FSStatusCard,
+    FSColorIcon
   },
   props: {
     modelStatus: {
@@ -96,20 +44,10 @@ export default defineComponent({
       required: true
     }
   },
-  setup(props) {
-    const { epochToLongTimeFormat } = useTimeZone();
-
+  setup() {
     const menu = ref(false);
 
-    const deviceTimestamp = computed((): string => {
-      if (props.statusGroup.sourceTimestamp) {
-        return epochToLongTimeFormat(props.statusGroup.sourceTimestamp);
-      }
-      return "";
-    });
-
     return {
-      deviceTimestamp,
       menu
     };
   }

package/components/deviceOrganisations/FSStatusCard.vue

@@ -0,0 +1,101 @@
+<template>
+  <FSCard
+    :elevation="true"
+    :border="false"
+  >
+    <FSCol
+      align="center-center"
+      padding="6px 24px"
+    >
+      <FSCol
+        align="center-center"
+        gap="12px"
+      >
+        <FSChip
+          :color="$props.statusGroup.color"
+          :prependIcon="$props.statusGroup.icon"
+          :label="$props.statusGroup.label"
+        />
+        <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>
+      <FSRow
+        v-if="deviceTimestamp"
+        width="hug"
+      >
+        <FSSpan
+          font="text-overline"
+        >
+          {{ deviceTimestamp }}
+        </FSSpan>
+      </FSRow>
+    </FSCol>
+  </FSCard>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+
+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: {
+    FSCard,
+    FSChip,
+    FSText,
+    FSSpan,
+    FSCol,
+    FSRow
+  },
+  props: {
+    modelStatus: {
+      type: Object as PropType<FSModelStatus>,
+      required: true
+    },
+    statusGroup: {
+      type: Object as PropType<FSDeviceStatusGroup>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { epochToLongTimeFormat } = useTimeZone();
+
+    const deviceTimestamp = computed((): string => {
+      if (props.statusGroup.sourceTimestamp) {
+        return epochToLongTimeFormat(props.statusGroup.sourceTimestamp);
+      }
+      return "";
+    });
+
+    return {
+      deviceTimestamp
+    };
+  }
+});
+</script>

package/components/deviceOrganisations/FSStatusesCarousel.vue

@@ -1,6 +1,6 @@
 <template>
   <FSCarousel
-    :height="height"
+    :height="['26px', '20px']"
   >
     <template #prev="{ props }">
       <FSButton
@@ -39,10 +39,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import { defineComponent, PropType, ref } from "vue";
 
 import { FSDeviceStatus, FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
-import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSCarousel from "../FSCarousel.vue";
@@ -69,14 +68,8 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { isMobileSized } = useBreakpoints();
-
     const tab = ref(0);
 
-    const height = computed((): number => {
-      return isMobileSized.value ? 20 : 26;
-    });
-
     const deviceStatus = (modelStatus: FSModelStatus): FSDeviceStatusGroup[] => {
       const deviceStatus = props.deviceStatuses
         .find((deviceStatus: FSDeviceStatus) => deviceStatus.modelStatusId === modelStatus.id);
@@ -96,7 +89,6 @@ export default defineComponent({
 
     return {
       ColorEnum,
-      height,
       tab,
       deviceStatus
     };

package/components/deviceOrganisations/FSWorstAlert.vue

@@ -1,6 +1,5 @@
 <template>
   <v-menu
-    v-if="$props.deviceAlert"
     :closeOnContentClick="false"
     v-model="menu"
   >
@@ -19,71 +18,29 @@
         </FSColorIcon>
       </FSBadge>
     </template>
-    <FSCard
-      :elevation="true"
-      :border="false"
-    >
-      <FSCol
-        align="center-center"
-        padding="6px 24px"
-      >
-        <FSCol
-          align="center-center"
-          gap="12px"
-        >
-          <FSChip
-            :color="criticityColor"
-            :prependIcon="statusIcon"
-            :label="$props.deviceAlert.label"
-          />
-          <FSRow
-            width="hug"
-          >
-            <FSText>
-              {{ statusLabel }}
-            </FSText>
-          </FSRow>
-        </FSCol>
-        <FSRow
-          v-if="deviceTimestamp"
-          width="hug"
-        >
-          <FSSpan
-            font="text-overline"
-          >
-            {{ deviceTimestamp }}
-          </FSSpan>
-        </FSRow>
-      </FSCol>
-    </FSCard>
+    <FSWorstAlertCard
+      :deviceAlert="deviceAlert"
+    />
   </v-menu>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
-import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 import { FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSWorstAlertCard from "./FSWorstAlertCard.vue";
 import FSColorIcon from "../FSColorIcon.vue";
 import FSBadge from "../FSBadge.vue";
-import FSCard from "../FSCard.vue";
-import FSChip from "../FSChip.vue";
-import FSText from "../FSText.vue";
-import FSSpan from "../FSSpan.vue";
 
 export default defineComponent({
   name: "FSWorstAlert",
   components: {
+    FSWorstAlertCard,
     FSColorIcon,
-    FSBadge,
-    FSCard,
-    FSChip,
-    FSText,
-    FSSpan
+    FSBadge
   },
   props: {
     deviceAlert: {
@@ -97,9 +54,6 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { epochToLongTimeFormat } = useTimeZone();
-    const { $tr } = useTranslationsProvider();
-
     const menu = ref(false);
 
     const criticityColor = computed(() => {
@@ -123,19 +77,6 @@ export default defineComponent({
       }
     });
 
-    const statusLabel = computed(() => {
-      switch (props.deviceAlert?.status) {
-        case AlertStatus.Pending:     return $tr("ui.alert-status.pending", "Pending");
-        case AlertStatus.Untriggered: return $tr("ui.alert-status.untriggered", "Untriggered");
-        case AlertStatus.Unresolved:  return $tr("ui.alert-status.unresolved", "Unresolved");
-        case AlertStatus.Resolved:    return $tr("ui.alert-status.resolved", "Resolved");
-        case AlertStatus.Expired:     return $tr("ui.alert-status.expired", "Expired");
-        case AlertStatus.Triggered:   return $tr("ui.alert-status.triggered", "Triggered");
-        case AlertStatus.Abandoned:   return $tr("ui.alert-status.abandoned", "Abandoned");
-        default:                      return "";
-      }
-    });
-
     const badgeLabel = computed((): string | null => {
       if (props.deviceAlerts < 1) {
         return null;
@@ -146,17 +87,8 @@ export default defineComponent({
       return (props.deviceAlerts + 1).toString();
     });
 
-    const deviceTimestamp = computed((): string => {
-      if (props.deviceAlert.sourceTimestamp) {
-        return epochToLongTimeFormat(props.deviceAlert.sourceTimestamp);
-      }
-      return "";
-    });
-
     return {
-      deviceTimestamp,
       criticityColor,
-      statusLabel,
       statusIcon,
       badgeLabel,
       menu

package/components/deviceOrganisations/FSWorstAlertCard.vue

@@ -0,0 +1,126 @@
+<template>
+  <FSCard
+    :elevation="true"
+    :border="false"
+  >
+    <FSCol
+      align="center-center"
+      padding="6px 24px"
+    >
+      <FSCol
+        align="center-center"
+        gap="12px"
+      >
+        <FSChip
+          :label="$props.deviceAlert.label"
+          :prependIcon="statusIcon"
+          :color="criticityColor"
+        />
+        <FSRow
+          width="hug"
+        >
+          <FSText>
+            {{ statusLabel }}
+          </FSText>
+        </FSRow>
+      </FSCol>
+      <FSRow
+        v-if="deviceTimestamp"
+        width="hug"
+      >
+        <FSSpan
+          font="text-overline"
+        >
+          {{ deviceTimestamp }}
+        </FSSpan>
+      </FSRow>
+    </FSCol>
+  </FSCard>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
+import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+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",
+  components: {
+    FSCard,
+    FSChip,
+    FSText,
+    FSSpan,
+    FSCol,
+    FSRow
+  },
+  props: {
+    deviceAlert: {
+      type: Object as PropType<FSDeviceAlert>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { epochToLongTimeFormat } = useTimeZone();
+    const { $tr } = useTranslationsProvider();
+
+    const criticityColor = computed(() => {
+      switch (props.deviceAlert?.criticity) {
+        case Criticity.Error: return ColorEnum.Error;
+        case Criticity.Warning: return ColorEnum.Warning;
+        default: return ColorEnum.Primary;
+      }
+    });
+
+    const statusIcon = computed(() => {
+      switch (props.deviceAlert?.status) {
+        case AlertStatus.Pending:     return "mdi-timer-outline";
+        case AlertStatus.Untriggered: return "mdi-timer-off-outline";
+        case AlertStatus.Unresolved:  return "mdi-alert-circle-outline";
+        case AlertStatus.Resolved:    return "mdi-check-circle-outline";
+        case AlertStatus.Expired:     return "mdi-clock-outline";
+        case AlertStatus.Triggered:   return "mdi-alert-circle-outline";
+        case AlertStatus.Abandoned:   return "mdi-cancel"
+        default:                      return "";
+      }
+    });
+
+    const statusLabel = computed(() => {
+      switch (props.deviceAlert?.status) {
+        case AlertStatus.Pending:     return $tr("ui.alert-status.pending", "Pending");
+        case AlertStatus.Untriggered: return $tr("ui.alert-status.untriggered", "Untriggered");
+        case AlertStatus.Unresolved:  return $tr("ui.alert-status.unresolved", "Unresolved");
+        case AlertStatus.Resolved:    return $tr("ui.alert-status.resolved", "Resolved");
+        case AlertStatus.Expired:     return $tr("ui.alert-status.expired", "Expired");
+        case AlertStatus.Triggered:   return $tr("ui.alert-status.triggered", "Triggered");
+        case AlertStatus.Abandoned:   return $tr("ui.alert-status.abandoned", "Abandoned");
+        default:                      return "";
+      }
+    });
+
+    const deviceTimestamp = computed((): string => {
+      if (props.deviceAlert.sourceTimestamp) {
+        return epochToLongTimeFormat(props.deviceAlert.sourceTimestamp);
+      }
+      return "";
+    });
+
+    return {
+      deviceTimestamp,
+      criticityColor,
+      statusLabel,
+      statusIcon
+    };
+  }
+});
+</script>

package/components/lists/FSLoadDataTable.vue

@@ -36,10 +36,15 @@
       type="table-row-divider@10"
     />
     <FSRow
-      align="bottom-right"
+      align="center-right"
     >
       <FSLoader
-        variant="input"
+        height="16px"
+        width="100px"
+      />
+      <FSLoader
+        width="120px"
+        :height="['40px', '36px']"
       />
       <FSLoader
         variant="button"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.23",
+  "version": "0.0.25",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.23",
-    "@dative-gpi/foundation-shared-services": "0.0.23",
+    "@dative-gpi/foundation-shared-domain": "0.0.25",
+    "@dative-gpi/foundation-shared-services": "0.0.25",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "c0d661503cf9ffd8f585a696a7b0c1173d9c111c"
+  "gitHead": "a390e06ed87cce4f2ae27570f474f5b52419327c"
 }

package/styles/components/fs_breadcrumbs.scss

@@ -3,7 +3,7 @@
     user-select: none;
     color: var(--fs-breadcrumbs-color);
 
-    &--disabled {
+    &-disabled {
         color: var(--fs-breadcrumbs-disabled-color) !important;
     }
 
@@ -33,7 +33,7 @@
         color: var(--fs-breadcrumbs-disabled-color) !important;
     }
 
-    &:last-child > .fs-breadcrumbs-label--disabled {
+    &:last-child > .fs-breadcrumbs-label-disabled {
         @extend .text-button;
 
         color: var(--fs-breadcrumbs-active-color) !important;

package/styles/components/fs_button.scss

@@ -2,7 +2,7 @@
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
     color: var(--fs-button-color) !important;
 
-    &:not(.fs-button--disabled):hover {
+    &:not(.fs-button-disabled):hover {
         color: var(--fs-button-hover-color) !important;
         cursor: pointer !important;
     }

package/styles/components/fs_clickable.scss

@@ -30,6 +30,6 @@ a:has(.fs-clickable) {
     padding: 0 !important;
 }
 
-.fs-clickable-achor-full-width {
+.fs-clickable-anchor-full-width {
     width: 100%;
 }