Merge branch 'main' into feature/improve-language-localization-for-german

CHANGELOG.md

@@ -9,8 +9,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the value component by always showing the label (also while loading)
 - Improved the language localization for German (`de`)
 
+### Fixed
+
+- Fixed an issue with the algebraic sign in the value component
+
 ## 1.248.0 - 2023-03-25
 
 ### Added

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

@@ -48,6 +48,18 @@
         </div>
       </ng-container>
     </div>
+  </ng-container>
+
+  <ngx-skeleton-loader
+    *ngIf="value === undefined"
+    animation="pulse"
+    [theme]="{
+      height:
+        size === 'large' ? '2rem' : size === 'medium' ? '1.8rem' : '1.5rem',
+      width: '5rem'
+    }"
+  ></ngx-skeleton-loader>
+
   <ng-container>
     <div *ngIf="size === 'large'">
       <span class="h6"
@@ -59,15 +71,4 @@
       <ng-container *ngTemplateOutlet="label"></ng-container>
     </small>
   </ng-container>
-  </ng-container>
-
-  <ngx-skeleton-loader
-    *ngIf="value === undefined"
-    animation="pulse"
-    [theme]="{
-      height:
-        size === 'large' ? '2.5rem' : size === 'medium' ? '2rem' : '1.5rem',
-      width: '5rem'
-    }"
-  ></ngx-skeleton-loader>
 </div>

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;
+  }
 }