Revert value component

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

@@ -1,26 +1,20 @@
-@if (icon) {
-  <div class="align-self-center mr-3">
+<div *ngIf="icon" class="align-self-center mr-3">
   <ion-icon class="h3 m-0" [name]="icon" />
-  </div>
-}
+</div>
 <div class="d-flex flex-column w-100">
   <ng-template #label><ng-content></ng-content></ng-template>
-  @if (value || value === 0 || value === null) {
+  <ng-container *ngIf="value || value === 0 || value === null">
     <div
       class="align-items-center d-flex"
       [ngClass]="position === 'end' ? 'justify-content-end' : ''"
     >
-      @if (isNumber || value === null) {
-        @if (colorizeSign && !useAbsoluteValue) {
-          @if (+value > 0) {
-            <div class="mr-1 text-success">+</div>
-          }
-          @if (+value < 0) {
-            <div class="mr-1 text-danger">-</div>
-          }
-        }
-        @if (isPercent) {
+      <ng-container *ngIf="isNumber || value === null">
+        <ng-container *ngIf="colorizeSign && !useAbsoluteValue">
+          <div *ngIf="value > 0" class="mr-1 text-success">+</div>
+          <div *ngIf="value < 0" class="mr-1 text-danger">-</div>
+        </ng-container>
         <div
+          *ngIf="isPercent"
           class="mb-0 value"
           [ngClass]="{
             'font-weight-bold h2': size === 'large',
@@ -33,8 +27,8 @@
             {{ formattedValue }}%
           }
         </div>
-        } @else {
         <div
+          *ngIf="!isPercent"
           class="mb-0 value"
           [ngClass]="{
             'font-weight-bold h2': size === 'large',
@@ -47,20 +41,14 @@
             {{ formattedValue }}
           }
         </div>
-        }
-        @if (unit && size === 'medium') {
-          @if (size === 'medium') {
-            <small class="ml-1">
+        <small *ngIf="unit && size === 'medium'" class="ml-1">
           {{ unit }}
         </small>
-          } @else {
-            <div class="ml-1">
+        <div *ngIf="unit && size !== 'medium'" class="ml-1">
           {{ unit }}
         </div>
-          }
-        }
-      }
-      @if (isString) {
+      </ng-container>
+      <ng-container *ngIf="isString">
         <div
           class="mb-0 text-truncate value"
           [ngClass]="{
@@ -70,12 +58,12 @@
         >
           {{ formattedValue }}
         </div>
-      }
+      </ng-container>
     </div>
-  }
+  </ng-container>
 
-  @if (value === undefined) {
   <ngx-skeleton-loader
+    *ngIf="value === undefined"
     animation="pulse"
     [theme]="{
       height:
@@ -83,22 +71,16 @@
       width: '5rem'
     }"
   />
-  }
 
   <ng-container>
-    @if (size === 'large') {
-      <div class="text-truncate">
+    <div *ngIf="size === 'large'" class="text-truncate">
       <span class="h6"
         ><ng-container *ngTemplateOutlet="label"></ng-container
       ></span>
-        @if (subLabel) {
-          <span class="text-muted"> {{ subLabel }}</span>
-        }
+      <span *ngIf="subLabel" class="text-muted"> {{ subLabel }}</span>
     </div>
-    } @else {
-      <small class="d-block text-truncate">
+    <small *ngIf="size !== 'large'" class="d-block text-truncate">
       <ng-container *ngTemplateOutlet="label"></ng-container>
     </small>
-    }
   </ng-container>
 </div>