@dative-gpi/foundation-shared-components 1.0.142 → 1.0.143-actions-color

package/components/FSChip.vue

@@ -1,50 +1,56 @@
 <template>
-  <FSRow
-    :align="$props.align"
-    :width="$props.width"
-    :class="classes"
-    :style="style"
-    :wrap="false"
-    v-bind="$attrs"
+  <component
+    :is="$props.to ? 'FSRouterLink' : 'div'"
+    v-bind="$props.to ? { to: $props.to } : {}"
   >
-    <slot
-      name="prepend"
-      v-bind="{ color: $props.color, colors }"
+    <FSRow
+      :align="$props.align"
+      :width="$props.width"
+      :class="classes"
+      :style="style"
+      :wrap="false"
+      v-bind="$attrs"
     >
-      <FSIcon
-        v-if="$props.prependIcon"
-        size="s"
+      <slot
+        name="prepend"
+        v-bind="{ color: $props.color, colors }"
       >
-        {{ $props.prependIcon }}
-      </FSIcon>
-    </slot>
-    <slot
-      v-bind="{ color: $props.color, colors }"
-    >
-      <FSSpan
-        v-if="$props.label"
-        font="text-overline"
-        class="fs-chip-label"
+        <FSIcon
+          v-if="$props.prependIcon"
+          size="s"
+        >
+          {{ $props.prependIcon }}
+        </FSIcon>
+      </slot>
+      <slot
+        v-bind="{ color: $props.color, colors }"
       >
-        {{ $props.label }}
-      </FSSpan>
-    </slot>
-    <slot
-      name="append"
-      v-bind="{ color: $props.color, colors }"
-    >
-      <FSIcon
-        v-if="$props.appendIcon"
-        size="s"
+        <FSSpan
+          v-if="$props.label"
+          font="text-overline"
+          class="fs-chip-label"
+        >
+          {{ $props.label }}
+        </FSSpan>
+      </slot>
+      <slot
+        name="append"
+        v-bind="{ color: $props.color, colors }"
       >
-        {{ $props.appendIcon }}
-      </FSIcon>
-    </slot>
-  </FSRow>
+        <FSIcon
+          v-if="$props.appendIcon"
+          size="s"
+        >
+          {{ $props.appendIcon }}
+        </FSIcon>
+      </slot>
+    </FSRow>
+  </component>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { type RouteLocation } from "vue-router";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
@@ -53,6 +59,7 @@ import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
 import FSRow from "./FSRow.vue";
+import FSRouterLink from '@dative-gpi/foundation-shared-components/components/FSRouterLink.vue';
 
 export default defineComponent({
   name: "FSChip",
@@ -61,6 +68,7 @@ export default defineComponent({
     FSSpan,
     FSRow
   },
+  inheritsAttrs: false,
   props: {
     prependIcon: {
       type: String as PropType<string | null>,
@@ -106,7 +114,12 @@ export default defineComponent({
       type: String as PropType<"center-center" | "center-left">,
       required: false,
       default: "center-center"
-    }
+    },
+    to: {
+      type: Object as PropType<RouteLocation | null>,
+      required: false,
+      default: null
+    },
   },
   setup(props) {
     const { getColors } = useColors();
@@ -165,6 +178,7 @@ export default defineComponent({
     });
 
     return {
+      FSRouterLink,
       classes,
       colors,
       style

package/components/deviceOrganisations/FSWorstAlert.vue

@@ -34,9 +34,11 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref } from "vue";
 
-import { type FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
+import { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
 import { AlertTools } from "@dative-gpi/foundation-shared-components/tools";
 
+import { type FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
+
 import FSWorstAlertCard from "./FSWorstAlertCard.vue";
 import FSColorIcon from "../FSColorIcon.vue";
 import FSBadge from "../FSBadge.vue";
@@ -79,10 +81,8 @@ export default defineComponent({
       if (!props.deviceAlerts || props.deviceAlerts.length < 1) {
         return null;
       }
-      if (props.deviceAlerts.length > 9) {
-        return "9+";
-      }
-      return props.deviceAlerts.length.toString();
+
+      return capNumberToString(props.deviceAlerts.length, 9);
     });
 
     return {

package/components/deviceOrganisations/FSWorstAlertCard.vue

@@ -17,7 +17,7 @@
         gap="0px"
       >
         <FSText>
-          {{ $tr('ui.alert.status', 'Status') }} : {{ AlertTools.statusLabel($props.deviceAlert?.status) }}
+          {{ $tr('entity.alert.current-status', 'Status') }} : {{ AlertTools.statusLabel($props.deviceAlert?.status) }}
         </FSText>
         <FSText
           font="text-button"

package/components/tiles/FSChartTileUI.vue

@@ -1,54 +1,60 @@
 <template>
   <FSTile
-    :width="['275px','336px']"
-    :height="['124px','156px']"
+    :width="['324px','272px']"
+    :height="['132px', '116px']"
+    :padding="['16px', '12px']"
     borderRadius="8px"
     v-bind="$attrs"
   >
-    <template
-      #default
+    <FSRow
+      align="center-left"
+      gap="16px"
+      :wrap="false"
     >
-      <FSRow
+      <FSCol
         align="center-left"
-        padding="4px 4px 4px 8px"
-        gap="16px"
-        :wrap="false"
+        :gap="['12px', '8px']"
       >
-        <FSCol
+        <FSSpan
+          font="text-overline"
+          :lineClamp="4"
+        >
+          {{ $props.label }}
+        </FSSpan>
+        <FSRow
           align="center-left"
-          gap="4px"
+          :gap="['12px', '8px']"
         >
-          <FSSpan
-            font="text-overline"
-            :lineClamp="4"
-          >
-            {{ $props.label }}
-          </FSSpan>
           <FSIcon
-            :color="ColorEnum.Error"
-            size="18px"
+            :color="ColorEnum.Primary"
+            :size="['18px', '16px']"
           >
             {{ chartIcon(type) }}
           </FSIcon>
-        </FSCol>
-        <FSCol
-          align="center-right"
-          width="hug"
-        >
-          <FSImage
-            v-if="$props.imageId"
-            :height="['82px','90px']"
-            :width="['82px','90px']"          
-            :imageId="$props.imageId"
-          />
-          <FSIcon
-            v-else-if="$props.icon"
-            :size="['82px','90px']"
-            :icon="$props.icon"
+          <FSChip
+            v-if="$props.scope === ApplicationScope.OrganisationType"
+            :color="ColorEnum.Light"
+            :label="$tr('ui.chart-origin.organisation-type', 'Shared')"
           />
-        </FSCol>
-      </FSRow>
-    </template>
+        </FSRow>
+      </FSCol>
+      <FSCol
+        align="center-right"
+        width="hug"
+      >
+        <FSImage
+          v-if="$props.imageId"
+          :imageId="$props.imageId"
+          :height="['84px', '72px']"
+          :width="['84px', '72px']"  
+        />
+        <FSIconCard
+          v-else-if="$props.icon"
+          :size="['84px', '72px']"
+          :icon="$props.icon"
+        />
+      </FSCol>
+    </FSRow>
   </FSTile>
 </template>
 
@@ -57,16 +63,17 @@ import { defineComponent } from "vue";
 import type { PropType } from "vue";
 
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { ChartType } from "@dative-gpi/foundation-shared-domain/enums";
+import { ApplicationScope, ChartType } from "@dative-gpi/foundation-shared-domain/enums";
 
 import { chartIcon } from "@dative-gpi/foundation-shared-components/tools";
 
 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";
+import FSIconCard from '../FSIconCard.vue';
+import FSChip from '../FSChip.vue';
 
 
 export default defineComponent({
@@ -74,10 +81,11 @@ export default defineComponent({
   components: {
     FSImage,
     FSTile,
-    FSIcon,
     FSRow,
     FSCol,
     FSSpan,
+    FSChip,
+    FSIconCard
   },
   props: {
     label: {
@@ -99,11 +107,17 @@ export default defineComponent({
       type: Number as PropType<ChartType>,
       required: false,
       default: ChartType.None
-    }
+    },
+    scope: {
+      type: Number as PropType<ApplicationScope>,
+      required: false,
+      default: ApplicationScope.None
+    },
   },
   setup() {
     return {
       ColorEnum,
+      ApplicationScope,
       chartIcon
     };
   }

package/components/tiles/FSDashboardOrganisationTypeTileUI.vue

@@ -3,7 +3,16 @@
     :bottomColor="color"
     :icon="$props.icon"
     v-bind="$attrs"
-  />
+  >
+    <template
+      #append-info
+    >
+      <FSChip
+        :label="$tr('ui.dashboard-type.organisation-type', 'Shared')"
+        :color="ColorEnum.Light"
+      />
+    </template>
+  </FSSimpleTileUI>
 </template>
 
 <script lang="ts">
@@ -12,10 +21,12 @@ import { computed, defineComponent, type PropType } from "vue";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSimpleTileUI from "./FSSimpleTileUI.vue";
+import FSChip from '@dative-gpi/foundation-shared-components/components/FSChip.vue';
 
 export default defineComponent({
   name: "FSDashboardOrganisationTypeTileUI",
   components: {
+    FSChip,
     FSSimpleTileUI
   },
   props: {
@@ -39,7 +50,8 @@ export default defineComponent({
     });
 
     return {
-      color
+      color,
+      ColorEnum
     };
   }
 });

package/components/tiles/FSDashboardShallowTileUI.vue

@@ -3,7 +3,16 @@
     :bottomColor="color"
     :icon="$props.icon"
     v-bind="$attrs"
-  />
+  >
+    <template
+      #append-info
+    >
+      <FSChip
+        :label="$tr('ui.dashboard-type.shallow', 'Shallow copy')"
+        :color="ColorEnum.Light"
+      />
+    </template>
+  </FSSimpleTileUI>
 </template>
 
 <script lang="ts">
@@ -12,10 +21,12 @@ import { computed, defineComponent, type PropType } from "vue";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSimpleTileUI from "./FSSimpleTileUI.vue";
+import FSChip from '@dative-gpi/foundation-shared-components/components/FSChip.vue';
 
 export default defineComponent({
   name: "FSDashboardShallowTileUI",
   components: {
+    FSChip,
     FSSimpleTileUI
   },
   props: {
@@ -39,7 +50,8 @@ export default defineComponent({
     });
 
     return {
-      color
+      color,
+      ColorEnum
     };
   }
 });

package/components/tiles/FSGroupTileUI.vue

@@ -1,135 +1,95 @@
 <template>
-  <FSTile
+  <FSSimpleTileUI
     :activeColor="ColorEnum.Primary"
     :bottomColor="ColorEnum.Error"
     :width="$props.width"
     :modelValue="$props.modelValue"
+    :label="$props.label"
+    :code="$props.code"
+    :imageId="$props.imageId"
+    :icon="$props.icon"
     v-bind="$attrs"
   >
-    <FSCol
-      align="center-center"
-      width="fill"
+    <template
+      #append-info
     >
-      <FSRow
-        align="center-center"
-        gap="24px"
-        :height="imageSize"
-        :wrap="false"
+      <FSCol
+        gap="6px"
       >
-        <FSCol
-          gap="12px"
-          :width="infoWidth"
+        <FSRow
+          align="center-left"
         >
-          <FSCol
-            gap="6px"
-          >
-            <FSSpan
-              font="text-button"
-              :lineClamp="1"
-            >
-              {{ $props.label }}
-            </FSSpan>
-            <FSSpan
-              font="text-overline"
-              variant="soft"
-            >
-              {{ $props.code }}
-            </FSSpan>
-          </FSCol>
-          <FSCol
-            gap="6px"
+          <FSColor
+            height="24px"
+            width="24px"
+            :color="ColorEnum.Primary"
+            :border="false"
           >
             <FSRow
-              align="center-left"
+              align="center-center"
             >
-              <FSColor
-                padding="0 8px"
-                height="24px"
-                :color="ColorEnum.Primary"
-                :border="false"
-              >
-                <FSRow
-                  align="center-center"
-                >
-                  <FSSpan
-                    font="text-overline"
-                  >
-                    {{ groupsLabel }}
-                  </FSSpan>
-                </FSRow>
-              </FSColor>
               <FSSpan
                 font="text-overline"
               >
-                {{ $tr("ui.common.groups", "Group(s)") }}
+                {{ groupsBadgeContent }}
               </FSSpan>
             </FSRow>
+          </FSColor>
+          <FSSpan
+            font="text-overline"
+          >
+            {{ $tr("ui.common.groups", "Group(s)") }}
+          </FSSpan>
+        </FSRow>
+        <FSRow
+          align="center-left"
+        >
+          <FSColor
+            height="24px"
+            width="24px"
+            :color="ColorEnum.Success"
+            :border="false"
+          >
             <FSRow
-              align="center-left"
+              align="center-center"
             >
-              <FSColor
-                padding="0 8px"
-                height="24px"
-                :color="ColorEnum.Success"
-                :border="false"
-              >
-                <FSRow
-                  align="center-center"
-                >
-                  <FSSpan
-                    font="text-overline"
-                  >
-                    {{ deviceOrganisationsLabel }}
-                  </FSSpan>
-                </FSRow>
-              </FSColor>
               <FSSpan
                 font="text-overline"
               >
-                {{ $tr("ui.common.devices", "Device(s)") }}
+                {{ deviceOrganisationsBadgeContent }}
               </FSSpan>
             </FSRow>
-          </FSCol>
-        </FSCol>
-        <FSImage
-          v-if="$props.imageId"
-          :imageId="$props.imageId"
-          :width="imageSize"
-        />
-        <FSIconCard
-          v-else-if="$props.icon"
-          backgroundVariant="standard"
-          :backgroundColor="ColorEnum.Background"
-          :icon="$props.icon"
-          :size="imageSize"
-        />
-      </FSRow>
-    </FSCol>
-  </FSTile>
+          </FSColor>
+          <FSSpan
+            font="text-overline"
+          >
+            {{ $tr("ui.common.devices", "Device(s)") }}
+          </FSSpan>
+        </FSRow>
+      </FSCol>
+    </template>
+  </FSSimpleTileUI>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+import { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
+
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSIconCard from "../FSIconCard.vue";
-import FSImage from "../FSImage.vue";
+import FSSimpleTileUI from './FSSimpleTileUI.vue';
 import FSColor from "../FSColor.vue";
 import FSSpan from "../FSSpan.vue";
-import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSGroupTileUI",
   components: {
-    FSIconCard,
-    FSImage,
+    FSSimpleTileUI,
     FSColor,
     FSSpan,
-    FSTile,
     FSCol,
     FSRow
   },
@@ -175,33 +135,14 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { isMobileSized } = useBreakpoints();
-
-    const groupsLabel = computed((): string => {
-      return props.recursiveGroupsIds.length > 99 ? "99+" : props.recursiveGroupsIds.length.toString();
-    });
-
-    const deviceOrganisationsLabel = computed((): string => {
-      return props.recursiveDeviceOrganisationsIds.length > 99 ? "99+" : props.recursiveDeviceOrganisationsIds.length.toString();
-    });
-
-    const imageSize = computed((): number => {
-      return isMobileSized.value ? 90 : 100;
-    });
+    const groupsBadgeContent = computed(() => capNumberToString(props.recursiveGroupsIds.length));
 
-    const infoWidth = computed((): string => {
-      if (!props.imageId && !props.icon) {
-        return "100%";
-      }
-      return `calc(100% - ${imageSize.value}px - 24px)`;
-    });
+    const deviceOrganisationsBadgeContent = computed(() => capNumberToString(props.recursiveDeviceOrganisationsIds.length));
 
     return {
-      deviceOrganisationsLabel,
-      groupsLabel,
+      deviceOrganisationsBadgeContent,
+      groupsBadgeContent,
       ColorEnum,
-      imageSize,
-      infoWidth
     };
   }
 });

package/components/tiles/FSLocationTileUI.vue

@@ -1,132 +1,96 @@
 <template>
-  <FSTile
+  <FSSimpleTileUI
     :activeColor="$props.color"
     :bottomColor="$props.color"
     :modelValue="$props.modelValue"
     :width="$props.width"
+    :label="$props.label"
+    :icon="$props.icon"
+    :code="$props.code"
     v-bind="$attrs"
   >
-    <FSCol
-      align="center-center"
-      width="fill"
+    <template
+      #append-info
     >
-      <FSRow
-        align="center-left"
-        gap="24px"
-        :height="imageSize"
-        :wrap="false"
+      <FSCol
+        gap="8px"
       >
-        <FSCol 
-          gap="12px"
-          :width="infoWidth"
+        <FSRow
+          v-if="$props.deviceCount"
+          :wrap="false"
+          align="center-left"
         >
-          <FSCol
-            gap="4px"
-          >
-            <FSSpan
-              font="text-button"
-              :lineClamp="1"
-            >
-              {{ $props.label }}
-            </FSSpan>
-            <FSSpan
-              v-if="$props.code"
-              font="text-overline"
-              variant="soft"
-            >
-              {{ $props.code }}
-            </FSSpan>
-          </FSCol>
-          <FSCol
-            gap="8px"
+          <FSColor
+            width="24px"
+            height="24px"
+            :color="ColorEnum.Primary"
+            :border="false"
           >
             <FSRow
-              v-if="$props.deviceCount"
-              :wrap="false"
-              align="center-left"
+              align="center-center"
             >
-              <FSColor
-                padding="0 8px"
-                height="24px"
-                :color="ColorEnum.Light"
-                :border="false"
-              >
-                <FSRow
-                  align="center-center"
-                >
-                  <FSSpan
-                    font="text-overline"
-                  >
-                    {{ $props.deviceCount <= 99 ? $props.deviceCount : "99+" }}
-                  </FSSpan>
-                </FSRow>
-              </FSColor>
               <FSSpan
                 font="text-overline"
               >
-                {{ $tr("ui.common.devices", "Equipment(s)") }}
+                {{ capNumberToString($props.deviceCount) }}
               </FSSpan>
             </FSRow>
+          </FSColor>
+          <FSSpan
+            font="text-overline"
+          >
+            {{ $tr("ui.common.devices", "Equipment(s)") }}
+          </FSSpan>
+        </FSRow>
+        <FSRow
+          v-if="$props.address"
+          :wrap="false"
+          align="center-left"
+        >
+          <FSColor
+            width="24px"
+            height="24px"
+            :color="ColorEnum.Primary"
+            :border="false"
+          >
             <FSRow
-              v-if="$props.address"
-              :wrap="false"
-              align="center-left"
+              align="center-center"
             >
-              <FSColor
-                width="24px"
-                height="24px"
-                :color="ColorEnum.Light"
-                :border="false"
-              >
-                <FSRow
-                  align="center-center"
-                >
-                  <FSIcon
-                    icon="mdi-map-marker"
-                    size="16px"
-                  />
-                </FSRow>
-              </FSColor>
-              <FSSpan
-                font="text-overline"
-              >
-                {{ $props.address }}
-              </FSSpan>
+              <FSIcon
+                icon="mdi-map-marker-radius-outline"
+                size="16px"
+              />
             </FSRow>
-          </FSCol>
-        </FSCol>
-        <FSIconCard
-          backgroundVariant="standard"
-          :backgroundColor="ColorEnum.Background"
-          :iconColor="$props.color"
-          :icon="$props.icon"
-          :size="imageSize"
-        />
-      </FSRow>
-    </FSCol>
-  </FSTile>
+          </FSColor>
+          <FSSpan
+            font="text-overline"
+          >
+            {{ $props.address }}
+          </FSSpan>
+        </FSRow>
+      </FSCol>
+    </template>
+  </FSSimpleTileUI>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
+import { capNumberToString } from '@dative-gpi/foundation-shared-components/utils';
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
-import FSIconCard from "../FSIconCard.vue";
+import FSSimpleTileUI from './FSSimpleTileUI.vue';
 import FSColor from "../FSColor.vue";
 import FSSpan from "../FSSpan.vue";
-import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSLocationTileUI",
   components: {
-    FSIconCard,
+    FSSimpleTileUI,
     FSColor,
     FSSpan,
-    FSTile,
     FSCol,
     FSRow
   },
@@ -172,20 +136,10 @@ export default defineComponent({
     }
   },
   setup() {
-    const { isMobileSized } = useBreakpoints();
-
-    const imageSize = computed((): number => {
-      return isMobileSized.value ? 90 : 100;
-    });
-
-    const infoWidth = computed((): string => {
-      return `calc(100% - ${imageSize.value}px - 24px)`;
-    });
 
     return {
       ColorEnum,
-      imageSize,
-      infoWidth
+      capNumberToString
     };
   }
 });

package/components/tiles/FSSimpleTileUI.vue

@@ -17,21 +17,29 @@
         :wrap="false"
       >
         <FSCol
-          gap="6px"
+          gap="12px"
           :width="infoWidth"
         >
-          <FSSpan
-            font="text-button"
-            :lineClamp="2"
+          <FSCol
+            gap="4px"
           >
-            {{ $props.label }}
-          </FSSpan>
-          <FSSpan
-            font="text-overline"
-            variant="soft"
-          >
-            {{ $props.code }}
-          </FSSpan>
+            <FSSpan
+              font="text-button"
+              :lineClamp="2"
+            >
+              {{ $props.label }}
+            </FSSpan>
+            <FSSpan
+              font="text-overline"
+              variant="soft"
+            >
+              {{ $props.code }}
+            </FSSpan>
+          </FSCol>
+          <slot
+            name="append-info"
+            v-bind="$attrs"
+          />
         </FSCol>
         <FSImage
           v-if="$props.imageId"
@@ -78,7 +86,7 @@ export default defineComponent({
   },
   props: {
     imageId: {
-      type: String as PropType<string>,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -93,8 +101,9 @@ export default defineComponent({
       default: null
     },
     icon: {
-      type: String as PropType<string>,
+      type: String as PropType<string | null>,
       required: false,
+      default: null
     },
     iconBackgroundVariant: {
       type: String as PropType<"background" | "standard" | "full" | "gradient">,

package/components/tiles/FSTile.vue

@@ -97,6 +97,7 @@ import FSCard from "../FSCard.vue";
 
 export default defineComponent({
   name: "FSTile",
+  inheritAttrs: false,
   components: {
     FSClickable,
     FSCheckbox,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.142",
+  "version": "1.0.143-actions-color",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.142",
-    "@dative-gpi/foundation-shared-services": "1.0.142"
+    "@dative-gpi/foundation-shared-domain": "1.0.143-actions-color",
+    "@dative-gpi/foundation-shared-services": "1.0.143-actions-color"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "36eca468f78075f88bb6638dbfdee9bdecf270ce"
+  "gitHead": "80048decd45a755d4b108e300c1c6423142af11b"
 }

package/tools/alertsTools.ts

@@ -1,6 +1,6 @@
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models"
+import { ColorEnum } from "../models"
 import { getTimeBestString } from "../utils";
 
 const { $tr } = useTranslationsProvider();
@@ -20,13 +20,40 @@ export const AlertTools = {
   },
   statusLabel(value: AlertStatus): string {
     switch (value) {
-      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");
+      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 "";
+    }
+  },
+  statusAlternativeColor(value: AlertStatus): string {
+    switch (value) {
+      case AlertStatus.Pending:
+      case AlertStatus.Unresolved:
+      case AlertStatus.Triggered: return "#da2d2d";
+      default: return "#1e56e5";
+    }
+  },
+  statusAlternativeIcon(value: AlertStatus): string {
+    switch (value) {
+      case AlertStatus.Pending: return "timer";
+      case AlertStatus.Untriggered: return "timer_off";
+      case AlertStatus.Unresolved: return "error_outline";
+      case AlertStatus.Resolved: return "check_circle_outline";
+      case AlertStatus.Expired: return "schedule";
+      case AlertStatus.Triggered: return "error_outline";
+      case AlertStatus.Abandoned: return "block"
       default: return "";
     }
   },
@@ -47,23 +74,23 @@ export const AlertTools = {
   },
   criticityLabel(value: Criticity): string {
     switch (value) {
-      case Criticity.Warning: return $tr("ui.common.warning", "Warning");
-      case Criticity.Error: return $tr("ui.common.error", "Error");
-      case Criticity.Information: return $tr("ui.common.information", "Information")
-      default: return $tr("ui.common.none", "None");
+      case Criticity.Warning: return $tr('ui.common.warning','Warning');
+      case Criticity.Error: return $tr('ui.common.error','Error');
+      default: return $tr('ui.common.information','Information');
     }
   }
 }
 
-export const prettyDuration = (n: number) => {
+export const prettyDuration = (n: number | undefined) => {
+  if (n == null) { return "00m 00s"; }
   const day = Math.floor(n / 24 / 60 / 60);
   const hours = Math.floor((n - day * 24 * 60 * 60) / 3600);
   const minutes = Math.floor((n - day * 24 * 60 * 60 - hours * 60 * 60) / 60);
   const seconds = Math.floor(n - day * 24 * 60 * 60 - hours * 60 * 60 - minutes * 60);
 
   return day > 0 ?
-    `${getTimeBestString(day * 24 * 60 * 60)} ${getTimeBestString(hours * 60 * 60)} ${getTimeBestString(minutes * 60)} ${getTimeBestString(seconds)}`
+    `${getTimeBestString(day * 24 * 60 * 60)} ${hours > 0 ? getTimeBestString(hours * 60 * 60) : ''} ${minutes > 0 ? getTimeBestString(minutes * 60) : ''} ${getTimeBestString(seconds)}`
     : hours > 0
-      ? `${getTimeBestString(hours * 60 * 60)} ${getTimeBestString(minutes * 60)} ${getTimeBestString(seconds)}`
-      : `${getTimeBestString(minutes * 60)} ${getTimeBestString(seconds)}`;
+      ? `${getTimeBestString(hours * 60 * 60)} ${minutes > 0 ? getTimeBestString(minutes * 60) : ''} ${getTimeBestString(seconds)}`
+      : `${minutes > 0 ? getTimeBestString(minutes * 60) : ''} ${getTimeBestString(seconds)}`;
 };

package/utils/badge.ts

@@ -1,9 +1,13 @@
-export const getBadgeFromNumber = (value: number, parenthesis: boolean = false): string => {
+export const capNumberToString = (value: number, maximum: number = 99): string => {
+  if (value > maximum) {
+    return `${maximum}+`;
+  }
+  return `${value.toString()}`;
+}
+
+export const getBadgeFromNumber = (value: number, parenthesis: boolean = false, maximum: number = 99): string => {
   if (value < 1) {
     return "";
   }
-  if (value > 99) {
-    return `${parenthesis ? '(' : ''}99+${parenthesis ? ')' : ''}`;
-  }
-  return `${parenthesis ? '(' : ''}${value.toString()}${parenthesis ? ')' : ''}`;
+  return parenthesis ? `(${capNumberToString(value, maximum)})` : capNumberToString(value, maximum);
 }