Task/Refactor rule settings dialog using value component

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html

@@ -5,7 +5,7 @@
     data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
   ) {
     <div class="w-100">
-      <h6 class="mb-0 d-flex">
+      <h6 class="d-flex mb-0">
         <ng-container i18n>Threshold range</ng-container>:
         <gf-value
           class="mx-1"
@@ -13,7 +13,7 @@
           [locale]="data.locale"
           [precision]="2"
           [value]="data.settings.thresholdMin"
-        ></gf-value>
+        />
         -
         <gf-value
           class="mx-1"
@@ -21,7 +21,7 @@
           [locale]="data.locale"
           [precision]="2"
           [value]="data.settings.thresholdMax"
-        ></gf-value>
+        />
       </h6>
       <div class="align-items-center d-flex w-100">
         <gf-value
@@ -29,7 +29,7 @@
           [locale]="data.locale"
           [precision]="2"
           [value]="data.rule.configuration.threshold.min"
-        ></gf-value>
+        />
         <mat-slider
           class="flex-grow-1"
           [max]="data.rule.configuration.threshold.max"
@@ -44,7 +44,7 @@
           [locale]="data.locale"
           [precision]="2"
           [value]="data.rule.configuration.threshold.max"
-        ></gf-value>
+        />
       </div>
     </div>
   } @else {
@@ -52,15 +52,15 @@
       class="w-100"
       [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
     >
-      <h6 class="mb-0 d-flex">
+      <h6 class="d-flex mb-0">
         <ng-container i18n>Threshold Min</ng-container>:
         <gf-value
-          class="mx-1"
+          class="ml-1"
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
           [locale]="data.locale"
           [precision]="2"
           [value]="data.settings.thresholdMin"
-        ></gf-value>
+        />
       </h6>
       <div class="align-items-center d-flex w-100">
         <gf-value
@@ -68,7 +68,7 @@
           [locale]="data.locale"
           [precision]="2"
           [value]="data.rule.configuration.threshold.min"
-        ></gf-value>
+        />
         <mat-slider
           class="flex-grow-1"
           name="thresholdMin"
@@ -83,21 +83,22 @@
           [locale]="data.locale"
           [precision]="2"
           [value]="data.rule.configuration.threshold.max"
-        ></gf-value>
+        />
       </div>
     </div>
     <div
       class="w-100"
       [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
     >
-      <h6 class="mb-0">
+      <h6 class="d-flex mb-0">
         <ng-container i18n>Threshold Max</ng-container>:
         <gf-value
+          class="ml-1"
           [isPercent]="data.rule.configuration.threshold.unit === '%'"
           [locale]="data.locale"
           [precision]="2"
           [value]="data.settings.thresholdMax"
-        ></gf-value>
+        />
       </h6>
       <div class="align-items-center d-flex w-100">
         <gf-value
@@ -105,7 +106,7 @@
           [locale]="data.locale"
           [precision]="2"
           [value]="data.rule.configuration.threshold.min"
-        ></gf-value>
+        />
         <mat-slider
           class="flex-grow-1"
           name="thresholdMax"
@@ -120,7 +121,7 @@
           [locale]="data.locale"
           [precision]="2"
           [value]="data.rule.configuration.threshold.max"
-        ></gf-value>
+        />
       </div>
     </div>
   }