@dative-gpi/foundation-shared-components 1.0.156-maps2 → 1.0.157-mobile

package/components/FSAccordionPanel.vue

@@ -6,32 +6,47 @@
     :disabled="false"
     :elevation="0"
     :style="style"
+    :hideActions="$props.actionPosition === 'start'"
     v-bind="$attrs"
   >
-    <template
-      #title
-    >
-      <slot
-        name="title"
+    <v-expansion-panel-title>
+      <template
+        v-slot:default="{ expanded, collapseIcon, expandIcon }"
       >
-        <FSRow>
-          <FSIcon
-            v-if="$props.prependIcon"
+        <FSRow
+          gap="4px"
+        >
+          <FSCol
+            v-if="$props.actionPosition === 'start'"
+            width="hug"
+            align="center-center"
           >
-            {{ $props.prependIcon }}
-          </FSIcon>
-          <FSSpan
-            class="fs-accordion-panel-title"
-            :lineClamp="$props.lineClampTitle"
+            <FSIcon
+              size="22.5px"
+              :icon="expanded ? collapseIcon : expandIcon"
+            />
+          </FSCol>
+          <slot
+            name="title"
           >
-            {{ $props.title }}
-          </FSSpan>
+            <FSRow>
+              <FSIcon
+                v-if="$props.prependIcon"
+              >
+                {{ $props.prependIcon }}
+              </FSIcon>
+              <FSSpan
+                class="fs-accordion-panel-title"
+                :lineClamp="$props.lineClampTitle"
+              >
+                {{ $props.title }}
+              </FSSpan>
+            </FSRow>
+          </slot>
         </FSRow>
-      </slot>
-    </template>
-    <template
-      #text
-    >
+      </template>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text>
       <slot
         name="content"
       >
@@ -47,7 +62,7 @@
           :modelValue="$props.content"
         />
       </slot>
-    </template>
+    </v-expansion-panel-text>
   </v-expansion-panel>
 </template>
 
@@ -128,6 +143,10 @@ export default defineComponent({
       type: String as PropType<"standard" | "rich-text">,
       required: false,
       default: "standard"
+    },
+    actionPosition: {
+      type: String as () => "start" | "end",
+      default: "end"
     }
   },
   setup(props) {

package/components/FSCard.vue

@@ -68,6 +68,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -103,6 +108,11 @@ export default defineComponent({
       required: false,
       default: "solid"
     },
+    borderColor: {
+      type: [Array, String] as PropType<ColorBase | null | string>,
+      required: false,
+      default: null
+    },
     elevation: {
       type: Boolean,
       required: false,
@@ -129,6 +139,10 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const borderColor = computed((): ColorBase => {
+      if (props.borderColor) {
+        return getColors(props.borderColor).base;
+      }
+
       switch (props.variant) {
         case "background":
           return lights.dark;
@@ -154,6 +168,7 @@ export default defineComponent({
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": backgrounds.base,
           "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : darks.base,
@@ -166,6 +181,7 @@ export default defineComponent({
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": colors.value.light,
           "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : colors.value.lightContrast!,
@@ -178,6 +194,7 @@ export default defineComponent({
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": colors.value.base,
           "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : colors.value.baseContrast!,
@@ -190,6 +207,7 @@ export default defineComponent({
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": gradients.value.base,
           "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : colors.value.lightContrast!,

package/components/FSChip.vue

@@ -1,7 +1,9 @@
 <template>
   <component
-    :is="$props.to ? 'FSRouterLink' : 'div'"
+    :is="$props.to && $props.clickable ? 'FSRouterLink' : 'div'"
+    class="fs-chip-container"
     v-bind="$props.to ? { to: $props.to } : {}"
+    @click="$emit('click', $event)"
   >
     <FSRow
       :align="$props.align"
@@ -69,7 +71,6 @@ export default defineComponent({
     FSSpan,
     FSRow
   },
-  inheritsAttrs: false,
   props: {
     prependIcon: {
       type: String as PropType<string | null>,
@@ -122,6 +123,8 @@ export default defineComponent({
       default: null
     },
   },
+  inheritsAttrs: false,
+  emits: ['click'],
   setup(props) {
     const { getColors } = useColors();
 
@@ -136,9 +139,9 @@ export default defineComponent({
           "--fs-chip-background-color"       : backgrounds.base,
           "--fs-chip-border-color"           : colors.value.base,
           "--fs-chip-color"                  : colors.value.base,
-          "--fs-chip-hover-background-color" : backgrounds.base,
+          "--fs-chip-hover-background-color" : colors.value.base,
           "--fs-chip-hover-border-color"     : colors.value.base,
-          "--fs-chip-hover-color"            : colors.value.base,
+          "--fs-chip-hover-color"            : colors.value.baseContrast!,
           "--fs-chip-active-background-color": backgrounds.base,
           "--fs-chip-active-border-color"    : colors.value.dark,
           "--fs-chip-active-color"           : colors.value.dark
@@ -148,8 +151,8 @@ export default defineComponent({
           "--fs-chip-background-color"       : colors.value.base,
           "--fs-chip-border-color"           : colors.value.base,
           "--fs-chip-color"                  : colors.value.baseContrast!,
-          "--fs-chip-hover-background-color" : colors.value.base,
-          "--fs-chip-hover-border-color"     : colors.value.base,
+          "--fs-chip-hover-background-color" : colors.value.soft,
+          "--fs-chip-hover-border-color"     : colors.value.soft,
           "--fs-chip-hover-color"            : colors.value.baseContrast!,
           "--fs-chip-active-background-color": colors.value.dark,
           "--fs-chip-active-border-color"    : colors.value.darkContrast!,

package/components/FSIcon.vue

@@ -13,7 +13,7 @@
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { type ColorBase } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, type ColorBaseVariations } from "@dative-gpi/foundation-shared-components/models";
 
 import { sizeToVar } from "../utils";
 
@@ -31,7 +31,7 @@ export default defineComponent({
       default: null
     },
     variant: {
-      type: String as PropType<"base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
+      type: String as PropType<ColorBaseVariations>,
       required: false,
       default: "base"
     }

package/components/FSIconCard.vue

@@ -1,6 +1,7 @@
 <template>
   <FSCard
     :variant="$props.backgroundVariant"
+    :borderColor="$props.backgroundVariant === 'background' ? ColorEnum.Light : null"
     :color="$props.backgroundColor"
     :border="$props.border"
     :height="$props.size"
@@ -10,8 +11,8 @@
       align="center-center"
     >
       <FSIcon
-        :variant="$props.iconVariant"
-        :color="contrastedIconColor"
+        :variant="iconVariant"
+        :color="iconColor"
         :size="actualIconSize"
       >
         {{ $props.icon }}
@@ -23,10 +24,9 @@
 <script lang="ts">
 import { defineComponent, type PropType, computed } from "vue";
 
-import { ColorEnum, type ColorBase } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum, type ColorBase, type ColorBaseVariations } from "@dative-gpi/foundation-shared-components/models";
 
 import { sizeToVar } from "../utils";
-import { useColors } from "../composables";
 
 import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
@@ -46,7 +46,7 @@ export default defineComponent({
     backgroundColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
       required: false,
-      default: null
+      default: ColorEnum.Background
     },
     backgroundVariant: {
       type: String as PropType<"background" | "standard" | "full" | "gradient">,
@@ -60,13 +60,12 @@ export default defineComponent({
     },
     iconColor: {
       type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Light
+      required: false
     },
     iconVariant: {
-      type: String as PropType<"base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
+      type: String as PropType<ColorBaseVariations | null>,
       required: false,
-      default: "base"
+      default: null
     },
     iconSize: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
@@ -80,14 +79,6 @@ export default defineComponent({
     }
   },
   setup(props){
-    const { getColors } = useColors();
-    
-    const colors = computed(() => {
-      return Array.isArray(props.backgroundColor) 
-        ? getColors(props.backgroundColor[Math.floor(props.backgroundColor.length/2)]) 
-        : getColors(props.backgroundColor)
-    });
-
     const actualIconSize = computed(() => {
       if (props.iconSize){
         return props.iconSize;
@@ -98,22 +89,47 @@ export default defineComponent({
       return "42px";
     });
 
-    const contrastedIconColor = computed(() => {
+    const iconVariant = computed((): ColorBaseVariations | undefined => {
+      if (props.iconVariant) {
+        return props.iconVariant;
+      }
+      if (props.iconColor) {
+        return "base";
+      }
+
       switch (props.backgroundVariant) {
+        case "background":
+          return "lightContrast";
         case "standard":
-          switch (props.iconColor) {
-            case ColorEnum.Dark :
-            case ColorEnum.Light:
-            default: return colors.value.lightContrast!
-          };
-        case "background": return colors.value.base
-        default: return colors.value.baseContrast!
+          return "lightContrast";
+        case "full":
+          return "baseContrast";
+        case "gradient":
+          return "baseContrast";
+        default:
+          return "base";
+      }
+    });
+
+    const iconColor = computed((): ColorBase | undefined => {
+      if (props.iconColor) {
+        return props.iconColor;
+      }
+      
+      if(Array.isArray(props.backgroundColor)) {
+        return props.backgroundColor[Math.floor(props.backgroundColor.length/2)];
+      }
+      if(props.backgroundVariant === "background") {
+        return ColorEnum.Light;
       }
+      return props.backgroundColor;
     });
 
     return {
-      contrastedIconColor,
-      actualIconSize
+      actualIconSize,
+      iconVariant,
+      ColorEnum,
+      iconColor,
     };
   }
 });

package/components/FSInformationsMenu.vue

@@ -15,7 +15,7 @@
       >
         <FSButton
           v-bind="props"
-          :color="lightColors.dark"
+          :color="$props.iconColor"
           :iconSize="$props.iconSize"
           variant="icon"
           icon="mdi-information-outline"
@@ -26,6 +26,7 @@
       name="menuContent"
     >
       <FSCard
+        :maxWidth="$props.maxWidth"
         :width="$props.width"
         :padding="$props.padding"
         :elevation="true"
@@ -38,14 +39,15 @@
             align="center-center"
           >
             <FSText
-              font="text-overline"
-              :lineClamp="4"
+              font="text-body"
+              :lineClamp="$props.lineClamp"
             >
               {{ $props.content }}
             </FSText>
           </FSRow>
         </slot>
         <template
+          v-if="$props.showCloseButton"
           #top-right
         >
           <FSButton
@@ -95,7 +97,11 @@ export default defineComponent({
     },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      default: 182
+      default: null
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      default: null
     },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
@@ -104,6 +110,18 @@ export default defineComponent({
     iconSize: {
       type: String,
       default: "18px"
+    },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      default: ColorEnum.Primary
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: true
+    },
+    lineClamp: {
+      type: Number,
+      default: 4
     }
   },
   emits: ["update:modelValue"],

package/components/tiles/FSChartTileUI.vue

@@ -1,6 +1,6 @@
 <template>
   <FSTile
-    :width="['324px','272px']"
+    :width="['296px','336px']"
     :height="['132px', '116px']"
     :padding="['16px', '12px']"
     borderRadius="8px"

package/components/tiles/FSSimpleTileUI.vue

@@ -107,13 +107,11 @@ export default defineComponent({
     },
     iconBackgroundVariant: {
       type: String as PropType<"background" | "standard" | "full" | "gradient">,
-      required: false,
-      default: "standard"
+      required: false
     },
     iconBackgroundColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
-      required: false,
-      default: ColorEnum.Background
+      required: false
     },
     iconBorder: {
       type: Boolean as PropType<boolean>,
@@ -122,8 +120,7 @@ export default defineComponent({
     },
     iconColor: {
       type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Light
+      required: false
     },
     activeColor: {
       type: String as PropType<ColorBase>,

package/components/views/desktop/FSBaseDefaultDesktopView.vue

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

package/components/views/desktop/FSBaseEntityDesktopView.vue

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

package/components/views/mobile/FSBaseDefaultMobileView.vue

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

package/components/views/mobile/FSBaseEntityMobileView.vue

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

package/models/colors.ts

@@ -19,4 +19,5 @@ export interface ColorVariations {
     darkContrast?: string | null;
 }
 
-export type ColorBase = (string | ColorEnum);
+export type ColorBase = (string | ColorEnum);
+export type ColorBaseVariations = "base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast";

package/package.json

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

package/styles/components/fs_card.scss

@@ -4,6 +4,7 @@
     padding: var(--fs-card-padding);
     height: var(--fs-card-height);
     width: var(--fs-card-width);
+    max-width: var(--fs-card-max-width);
     position: relative;
     display: flex;
     

package/styles/components/fs_chip.scss

@@ -1,3 +1,7 @@
+.fs-chip-container {
+    text-decoration: none;
+}
+
 .fs-chip {
     user-select: none;
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);

package/tools/alertsTools.ts

@@ -21,19 +21,19 @@ export const AlertTools = {
   statusLabel(value: AlertStatus): string {
     switch (value) {
       case AlertStatus.Pending:
-        return $tr('ui.alert-status.pending','Pending');
+        return $tr('ui.alert-status.pending', 'Pending');
       case AlertStatus.Untriggered:
-        return $tr('ui.alert-status.untriggered','Untriggered');
+        return $tr('ui.alert-status.untriggered', 'Untriggered');
       case AlertStatus.Unresolved:
-        return $tr('ui.alert-status.unresolved','Unresolved');
+        return $tr('ui.alert-status.unresolved', 'Unresolved');
       case AlertStatus.Resolved:
-        return $tr('ui.alert-status.resolved','Resolved');
+        return $tr('ui.alert-status.resolved', 'Resolved');
       case AlertStatus.Expired:
-        return $tr('ui.alert-status.expired','Expired');
+        return $tr('ui.alert-status.expired', 'Expired');
       case AlertStatus.Triggered:
-        return $tr('ui.alert-status.triggered','Triggered');
+        return $tr('ui.alert-status.triggered', 'Triggered');
       case AlertStatus.Abandoned:
-        return $tr('ui.alert-status.abandoned','Abandoned');
+        return $tr('ui.alert-status.abandoned', 'Abandoned');
       default: return "";
     }
   },
@@ -74,11 +74,43 @@ 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');
-      default: return $tr('ui.common.information','Information');
+      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');
+    }
+  },
+  statusColor(status: AlertStatus): ColorEnum {
+    switch (status) {
+      case AlertStatus.None:
+      case AlertStatus.Pending:
+      case AlertStatus.Expired:
+        return ColorEnum.Warning;
+      case AlertStatus.Unresolved:
+      case AlertStatus.Triggered:
+        return ColorEnum.Error;
+      case AlertStatus.Resolved:
+      case AlertStatus.Untriggered:
+        return ColorEnum.Success;
+      default:
+        return ColorEnum.Warning;
+    }
+  },
+
+  formatValue(value: string) {
+    const n = parseFloat(value);
+
+    if (isNaN(n)) {
+      return value;
+    }
+
+    if (Number.isInteger(n)) {
+      return n;
+    }
+    else {
+      return n.toFixed(2);
     }
   }
+
 }
 
 export const prettyDuration = (n: number | undefined) => {

package/utils/operations.ts

@@ -1,7 +1,42 @@
 const MinusOperator = "-";
 
-// Matches one of the three operators (+, *, /) or the - operator if it is preceded by something that is not another operator
-const operatorsRegex = new RegExp(/[\+\*\/]|(?<=.)(?<![-\+\*\/])[-]/gm);
+/**
+ * Splits an expression by operators while keeping unary minus signs.
+ */
+const splitByOperators = (expression: string): string[] => {
+  const tokens: string[] = [];
+  let current = '';
+  let expectOperand = true;
+
+  for (let i = 0; i < expression.length; i++) {
+    const char = expression[i];
+    if ('+-*/'.includes(char)) {
+      const isUnaryMinus = char === '-' && expectOperand;
+      if (isUnaryMinus) {
+        current += char;
+        expectOperand = true;
+      } else {
+        if (expectOperand) {
+          // 2 consecutive operators or operator at the start
+          return [];
+        }
+        if (current !== '') {
+          tokens.push(current);
+          current = '';
+        }
+        tokens.push(char);
+        expectOperand = true;
+      }
+    } else {
+      current += char;
+      expectOperand = false;
+    }
+  }
+  if (current !== '') {
+    tokens.push(current);
+  }
+  return tokens;
+};
 
 // Matches a nested block of parenthesis
 const parenthesisRegex = new RegExp(/\([^)(]+\)/gm);
@@ -14,7 +49,11 @@ const validateBlock = (block: string, operands: string[] = [], variables: string
   block = block.replaceAll("(", "").replaceAll(")", "");
 
   // Split block on operators (Leave negative signs)
-  const components = block.split(operatorsRegex);
+  const tokens = splitByOperators(block);
+  if (tokens.length === 0) {
+    return false;
+  }
+  const components = tokens.filter(token => !'+-*/'.includes(token));
 
   // Check if each bit is a valid operand
   for (let i = 0; i < components.length; i++) {