From b37df2c84f484e478531880cb9f914f39e8729bc Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 26 Mar 2023 16:16:24 +0200
Subject: [PATCH 1/2] Bugfix/fix algebraic sign in value component (#1811)

* Fix algebraic sign by resetting member variables

* Update changelog
---
 CHANGELOG.md                             |  6 ++++++
 libs/ui/src/lib/value/value.component.ts | 10 ++++++++++
 2 files changed, 16 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index df4626150..ad96fde42 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Fixed
+
+- Fixed an issue with the algebraic sign in the value component
+
 ## 1.248.0 - 2023-03-25
 
 ### Added
diff --git a/libs/ui/src/lib/value/value.component.ts b/libs/ui/src/lib/value/value.component.ts
index d92d87cb1..e4b7779e9 100644
--- a/libs/ui/src/lib/value/value.component.ts
+++ b/libs/ui/src/lib/value/value.component.ts
@@ -37,6 +37,8 @@ export class ValueComponent implements OnChanges {
   public constructor() {}
 
   public ngOnChanges() {
+    this.initializeVariables();
+
     if (this.value || this.value === 0) {
       if (isNumber(this.value)) {
         this.isNumber = true;
@@ -120,4 +122,12 @@ export class ValueComponent implements OnChanges {
       this.useAbsoluteValue = true;
     }
   }
+
+  private initializeVariables() {
+    this.absoluteValue = 0;
+    this.formattedValue = '';
+    this.isNumber = false;
+    this.isString = false;
+    this.useAbsoluteValue = false;
+  }
 }

From 1f3511368a3afdd6c10922373fbf8147f6fe342b Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 26 Mar 2023 16:59:52 +0200
Subject: [PATCH 2/2] Feature/always show label in value component (#1812)

* Always show label while loading

* Update changelog
---
 CHANGELOG.md                               |  4 ++++
 libs/ui/src/lib/value/value.component.html | 25 +++++++++++-----------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ad96fde42..70061ac8d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Improved the value component by always showing the label (also while loading)
+
 ### Fixed
 
 - Fixed an issue with the algebraic sign in the value component
diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index 790d99a4e..35be5b808 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/libs/ui/src/lib/value/value.component.html
@@ -48,17 +48,6 @@
         </div>
       </ng-container>
     </div>
-    <ng-container>
-      <div *ngIf="size === 'large'">
-        <span class="h6"
-          ><ng-container *ngTemplateOutlet="label"></ng-container
-        ></span>
-        <span *ngIf="subLabel" class="text-muted"> {{ subLabel }}</span>
-      </div>
-      <small *ngIf="size !== 'large'">
-        <ng-container *ngTemplateOutlet="label"></ng-container>
-      </small>
-    </ng-container>
   </ng-container>
 
   <ngx-skeleton-loader
@@ -66,8 +55,20 @@
     animation="pulse"
     [theme]="{
       height:
-        size === 'large' ? '2.5rem' : size === 'medium' ? '2rem' : '1.5rem',
+        size === 'large' ? '2rem' : size === 'medium' ? '1.8rem' : '1.5rem',
       width: '5rem'
     }"
   ></ngx-skeleton-loader>
+
+  <ng-container>
+    <div *ngIf="size === 'large'">
+      <span class="h6"
+        ><ng-container *ngTemplateOutlet="label"></ng-container
+      ></span>
+      <span *ngIf="subLabel" class="text-muted"> {{ subLabel }}</span>
+    </div>
+    <small *ngIf="size !== 'large'">
+      <ng-container *ngTemplateOutlet="label"></ng-container>
+    </small>
+  </ng-container>
 </div>