Fix ExpressionChangedAfterItHasBeenCheckedError in slider

Use css grid instead of flex plus calculating margins in template

projects/common/components/input-elements/slider.component.ts

@@ -19,60 +19,34 @@ import { FormElementComponent } from '../../directives/form-element-component.di
            [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''">
           {{elementModel.label}}
       </div>
-      <div #valueContainer
-           [class.values]="elementModel.label && !elementModel.showValues">
-        <div fxFlex fxLayout="row" fxLayoutAlign="space-between">
-          <div #valueMin
-               class="value-container-min">
-            <div *ngIf="elementModel.showValues"
-                 class="value-container">
-                <div [style.color]="elementModel.styling.fontColor"
-                     [style.font-family]="elementModel.styling.font"
-                     [style.font-size.px]="elementModel.styling.fontSize"
-                     [style.line-height.%]="elementModel.styling.lineHeight"
-                     [style.font-weight]="elementModel.styling.bold ? 'bold' : ''"
-                     [style.font-style]="elementModel.styling.italic ? 'italic' : ''"
-                     [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''">
-                  {{elementModel.minValue | number:'':'de'}}
-                </div>
-                <div *ngIf="elementModel.barStyle" class="number-marker"></div>
-            </div>
-          </div>
-          <div #valueMax
-               [class.value-container-max]="elementModel.barStyle">
-            <div *ngIf="elementModel.showValues"
-                 class="value-container">
-                <div [style.color]="elementModel.styling.fontColor"
-                     [style.font-family]="elementModel.styling.font"
-                     [style.font-size.px]="elementModel.styling.fontSize"
-                     [style.line-height.%]="elementModel.styling.lineHeight"
-                     [style.font-weight]="elementModel.styling.bold ? 'bold' : ''"
-                     [style.font-style]="elementModel.styling.italic ? 'italic' : ''"
-                     [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''">
-                  {{elementModel.maxValue | number:'':'de'}}
-                </div>
-                <div *ngIf="elementModel.barStyle"
-                     class="number-marker">
-                </div>
-            </div>
-          </div>
+      <div class="container">
+        <div *ngIf="elementModel.showValues"
+             class="min-value"
+             [style.color]="elementModel.styling.fontColor"
+             [style.font-family]="elementModel.styling.font"
+             [style.font-size.px]="elementModel.styling.fontSize"
+             [style.line-height.%]="elementModel.styling.lineHeight"
+             [style.font-weight]="elementModel.styling.bold ? 'bold' : ''"
+             [style.font-style]="elementModel.styling.italic ? 'italic' : ''"
+             [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''">
+          {{elementModel.minValue | number:'':'de'}}
         </div>
-      </div>
-      <div *ngIf="elementModel.barStyle"
-           fxFlex fxLayout="row" fxLayoutAlign="space-between center"
-           [style.margin-top.px]="elementModel.showValues ? -18 : 0"
-           [style.margin-left.px]="valueMin.offsetWidth/2">
-        <div class="arrow-line"></div>
-        <div class="arrow-head"></div>
-      </div>
-      <div *ngIf="valueMax && valueMin"
-           [style.display]="'flex'"
-           [style.flex-direction]="'column'"
-           [style.height.%]="100"
-           [style.margin-right.px]="elementModel.barStyle ? valueMax.offsetWidth/2 - 8 : valueMax.offsetWidth"
-           [style.margin-left.px]="elementModel.barStyle ? valueMin.offsetWidth/2 - 8: valueMin.offsetWidth"
-           [style.margin-top.px]="elementModel.barStyle ? -32 : -valueContainer.offsetHeight">
-        <mat-slider [class]="elementModel.barStyle ? 'bar-style' : ''"
+        <div *ngIf="elementModel.showValues"
+             class="max-value"
+             [style.color]="elementModel.styling.fontColor"
+             [style.font-family]="elementModel.styling.font"
+             [style.font-size.px]="elementModel.styling.fontSize"
+             [style.line-height.%]="elementModel.styling.lineHeight"
+             [style.font-weight]="elementModel.styling.bold ? 'bold' : ''"
+             [style.font-style]="elementModel.styling.italic ? 'italic' : ''"
+             [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''">
+          {{elementModel.maxValue | number:'':'de'}}
+        </div>
+        <div *ngIf="elementModel.barStyle" class="arrow-line"></div>
+        <div *ngIf="elementModel.barStyle" class="arrow-head"></div>
+        <div *ngIf="elementModel.barStyle" class="value-marker min-value-marker"></div>
+        <div *ngIf="elementModel.barStyle" class="value-marker max-value-marker"></div>
+        <mat-slider [class]="elementModel.barStyle ? 'slider-bar-style' : 'slider'"
                     [isDisabled]="elementModel.readOnly"
                     [thumbLabel]="elementModel.thumbLabel"
                     [formControl]="elementFormControl"
@@ -80,24 +54,28 @@ import { FormElementComponent } from '../../directives/form-element-component.di
                     [max]="elementModel.maxValue"
                     [min]="elementModel.minValue">
         </mat-slider>
-        <mat-error *ngIf="elementFormControl.touched && elementFormControl.errors">
-          {{elementModel.requiredWarnMessage}}
-        </mat-error>
       </div>
     </div>
   `,
   styles: [
-    '.values {margin-top: 10px;}',
-    '.value-container {text-align: center;}',
-    '.value-container-max {min-width: 100px}',
-    '.value-container-min {min-width: 8px}',
-    '.arrow-line {height: 2px; width: 100%; background-color: #555;}',
-    '.number-marker {width: 2px; height: 20px; background-color: #555; margin: 10px auto 0 auto}',
-    '.arrow-head {width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 20px solid #555;}',
-    // Background color must use !important to be displayed also in the editor
-    ':host ::ng-deep .bar-style .mat-slider-thumb {border-radius: 0; border: none; width: 9px; height: 40px; bottom: -20px; margin-right: 5px; background-color: #006064 !important}',
-    ':host ::ng-deep .bar-style .mat-slider-track-fill {background-color: rgba(0,0,0,0);}',
-    ':host ::ng-deep .bar-style .mat-slider-track-background {background-color: rgba(0,0,0,0);}'
+    ':host ::ng-deep .slider-bar-style .mat-slider-thumb {border-radius: 0; border: none; width: 9px; height: 40px;}',
+    ':host ::ng-deep .slider-bar-style .mat-slider-thumb {bottom: -20px; margin-right: 5px; background-color: #006064}',
+    ':host ::ng-deep .slider-bar-style .mat-slider-track-fill {background-color: rgba(0,0,0,0);}',
+    ':host ::ng-deep .slider-bar-style .mat-slider-track-background {background-color: rgba(0,0,0,0);}',
+
+    '.container {display: grid; grid-template-rows: auto auto;}',
+    '.container {grid-template-columns: repeat(3, minmax(0, auto)) minmax(100px, 8fr) repeat(4, minmax(0, auto));}',
+    '.min-value {text-align: center; grid-column: 1/4; grid-row: 1/2;}',
+    '.max-value {text-align: center; grid-column: 5/8;grid-row: 1/2;}',
+    '.slider-bar-style {grid-column: 2/7; grid-row: 2/3; margin: 0 -7px 0 -7px;}',
+    '.slider {grid-column: 4/5; grid-row: 1/2;}',
+    '.value-marker {width: 2px; height: 20px; background-color: #555; margin-top: 14px}',
+    '.min-value-marker {grid-column: 2/3;grid-row: 2/3;}',
+    '.max-value-marker {grid-column: 6/7;grid-row: 2/3;}',
+    '.arrow-line {height: 2px; width: 100%; background-color: #555; grid-column: 2/8; grid-row: 2/3; margin-top: 23px}',
+    '.arrow-head {width: 0; height: 0; margin-top: 15px; grid-column: 8/9;grid-row: 2/3;}',
+    '.arrow-head {border-top: 8px solid transparent; border-bottom: 8px solid transparent;}',
+    '.arrow-head {border-left: 20px solid #555;}'
   ]
 })
 export class SliderComponent extends FormElementComponent {