Revert value component

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

@@ -1,66 +1,54 @@
-@if (icon) {
-  <div class="align-self-center mr-3">
-    <ion-icon class="h3 m-0" [name]="icon" />
-  </div>
-}
+<div *ngIf="icon" class="align-self-center mr-3">
+  <ion-icon class="h3 m-0" [name]="icon" />
+</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>
+      <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',
+            h4: size === 'medium'
+          }"
+        >
+          @if (value === null) {
+            <span class="text-monospace text-muted">*****</span>%
+          } @else {
+            {{ formattedValue }}%
           }
-        }
-        @if (isPercent) {
-          <div
-            class="mb-0 value"
-            [ngClass]="{
-              'font-weight-bold h2': size === 'large',
-              h4: size === 'medium'
-            }"
-          >
-            @if (value === null) {
-              <span class="text-monospace text-muted">*****</span>%
-            } @else {
-              {{ formattedValue }}%
-            }
-          </div>
-        } @else {
-          <div
-            class="mb-0 value"
-            [ngClass]="{
-              'font-weight-bold h2': size === 'large',
-              h4: size === 'medium'
-            }"
-          >
-            @if (value === null) {
-              <span class="text-monospace text-muted">*****</span>
-            } @else {
-              {{ formattedValue }}
-            }
-          </div>
-        }
-        @if (unit && size === 'medium') {
-          @if (size === 'medium') {
-            <small class="ml-1">
-              {{ unit }}
-            </small>
+        </div>
+        <div
+          *ngIf="!isPercent"
+          class="mb-0 value"
+          [ngClass]="{
+            'font-weight-bold h2': size === 'large',
+            h4: size === 'medium'
+          }"
+        >
+          @if (value === null) {
+            <span class="text-monospace text-muted">*****</span>
           } @else {
-            <div class="ml-1">
-              {{ unit }}
-            </div>
+            {{ formattedValue }}
           }
-        }
-      }
-      @if (isString) {
+        </div>
+        <small *ngIf="unit && size === 'medium'" class="ml-1">
+          {{ unit }}
+        </small>
+        <div *ngIf="unit && size !== 'medium'" class="ml-1">
+          {{ unit }}
+        </div>
+      </ng-container>
+      <ng-container *ngIf="isString">
         <div
           class="mb-0 text-truncate value"
           [ngClass]="{
@@ -70,35 +58,29 @@
         >
           {{ formattedValue }}
         </div>
-      }
+      </ng-container>
     </div>
-  }
+  </ng-container>
 
-  @if (value === undefined) {
-    <ngx-skeleton-loader
-      animation="pulse"
-      [theme]="{
-        height:
-          size === 'large' ? '2rem' : size === 'medium' ? '1.8rem' : '1.5rem',
-        width: '5rem'
-      }"
-    />
-  }
+  <ngx-skeleton-loader
+    *ngIf="value === undefined"
+    animation="pulse"
+    [theme]="{
+      height:
+        size === 'large' ? '2rem' : size === 'medium' ? '1.8rem' : '1.5rem',
+      width: '5rem'
+    }"
+  />
 
   <ng-container>
-    @if (size === 'large') {
-      <div class="text-truncate">
-        <span class="h6"
-          ><ng-container *ngTemplateOutlet="label"></ng-container
-        ></span>
-        @if (subLabel) {
-          <span class="text-muted"> {{ subLabel }}</span>
-        }
-      </div>
-    } @else {
-      <small class="d-block text-truncate">
-        <ng-container *ngTemplateOutlet="label"></ng-container>
-      </small>
-    }
+    <div *ngIf="size === 'large'" class="text-truncate">
+      <span class="h6"
+        ><ng-container *ngTemplateOutlet="label"></ng-container
+      ></span>
+      <span *ngIf="subLabel" class="text-muted"> {{ subLabel }}</span>
+    </div>
+    <small *ngIf="size !== 'large'" class="d-block text-truncate">
+      <ng-container *ngTemplateOutlet="label"></ng-container>
+    </small>
   </ng-container>
 </div>