Task/widen input types on value component (#7953)

Widen input types

libs/ui/src/lib/value/value.component.html

@@ -46,7 +46,7 @@
       [class.justify-content-end]="position === 'end'"
     >
       @if (isNumber || value === null) {
-        @if (colorizeSign && !useAbsoluteValue) {
+        @if (colorizeSign && !useAbsoluteValue && value !== null) {
           @if (+value > 0) {
             <div class="mr-1 text-success">+</div>
           }

libs/ui/src/lib/value/value.component.ts

@@ -42,12 +42,12 @@ export class GfValueComponent implements AfterViewInit, OnChanges, OnDestroy {
   @Input() isCurrency = false;
   @Input() isDate = false;
   @Input() isPercent = false;
-  @Input() locale: string;
+  @Input() locale?: string;
   @Input() position = '';
   @Input() size: 'large' | 'medium' | 'small' = 'small';
-  @Input() subLabel = '';
+  @Input() subLabel?: string = '';
-  @Input() unit = '';
+  @Input() unit?: string | null = '';
-  @Input() value: number | string = '';
+  @Input() value?: number | string | null = '';
 
   @ViewChild('labelContent', { static: false })
   labelContent!: ElementRef<HTMLSpanElement>;
@@ -219,11 +219,14 @@ export class GfValueComponent implements AfterViewInit, OnChanges, OnDestroy {
     this.isCopied = false;
     this.isNumber = false;
     this.isString = false;
-    this.locale = this.locale || getLocale();
     this.useAbsoluteValue = false;
 
     if (this.copyToClipboardTimeout) {
       clearTimeout(this.copyToClipboardTimeout);
     }
+
+    if (this.locale === undefined || this.locale === '') {
+      this.locale = getLocale();
+    }
   }
 }