From 5d38a440b11f6751b4d25b5ffdf5ff6793a7df6d Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 11 Feb 2024 20:17:12 +0100
Subject: [PATCH] Revert value.component.html

---
 libs/ui/src/lib/value/value.component.html | 140 +++++++++------------
 1 file changed, 62 insertions(+), 78 deletions(-)

diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index f35ac86b4..07c4616df 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/libs/ui/src/lib/value/value.component.html
@@ -1,61 +1,51 @@
-@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="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="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>
-          } @else if (value < 0) {
-            <div class="mr-1 text-danger">-</div>
-          }
-        }
-        @if (isPercent) {
-          <div
-            class="mb-0 value"
-            [ngClass]="{
-              'font-weight-bold h2': size === 'large',
-              h4: size === 'medium'
-            }"
-          >
-            {{ 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) {
-          @if (size === 'medium') {
-            <small class="ml-1">
-              {{ unit }}
-            </small>
-          } @else {
-            <div class="ml-1">
-              {{ unit }}
-            </div>
-          }
-        }
-      }
-      @if (isString) {
+      <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'
+          }"
+        >
+          {{ formattedValue }}%
+        </div>
+        <div
+          *ngIf="!isPercent"
+          class="mb-0 value"
+          [ngClass]="{
+            'font-weight-bold h2': size === 'large',
+            h4: size === 'medium'
+          }"
+        >
+          <ng-container *ngIf="value === null">
+            <span class="text-monospace text-muted">*****</span>
+          </ng-container>
+          <ng-container *ngIf="value !== null">
+            {{ formattedValue }}
+          </ng-container>
+        </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]="{
@@ -65,35 +55,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>
-        <span class="h6"
-          ><ng-container *ngTemplateOutlet="label"></ng-container
-        ></span>
-        @if (subLabel) {
-          <span class="text-muted"> {{ subLabel }}</span>
-        }
-      </div>
-    } @else {
-      <small>
-        <ng-container *ngTemplateOutlet="label"></ng-container>
-      </small>
-    }
+    <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>