[editor] Fix sizing properties panel

- Fix conditions for showing inputs. As all the properties are mandatory 
and have to be available, so no contionals are need here.
- Move CSS into the component (from parent properties component)

projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.css

-::ng-deep app-element-properties .margin-properties .mat-form-field-infix {
-  width: 55px;
-}
-
-::ng-deep app-element-properties .small-input .mat-form-field-infix {
-  width: 95px;
-  margin: 0 5px;
-}
-
 .list-items {
   padding: 5px 10px;
   border-bottom: solid 1px #ccc;
-}
-
-.list-items {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -23,19 +11,6 @@
   margin-top: 10px
 }
 
-.input-group {
-  background-color: rgba(0,0,0,.04);
-  margin-bottom: 10px;
-}
-
-.centered-form-field {
-  margin-left: 25%;
-}
-
-.right-form-field {
-  margin-left: 15%;
-}
-
 ::ng-deep app-element-properties .mat-tab-label {
   min-width: 0 !important;
 }
@@ -49,13 +24,10 @@
   max-height: 500px;
   overflow: auto;
   margin-bottom: 10px;
-}
-
-.text-text {
   background-color: rgba(0,0,0,.04);
 }
 
-::ng-deep app-element-properties p {
+::ng-deep app-element-properties>p {
   text-align: center;
   font-weight: bold;
 }

projects/editor/src/app/components/unit-view/page-view/properties/element-sizing-properties.component.ts

@@ -9,20 +9,20 @@ import { SelectionService } from '../../../../selection.service';
   template: `
     <div fxLayout="column">
       <ng-container *ngIf="!combinedProperties.dynamicPositioning; else elseBlock">
-        <mat-form-field *ngIf="combinedProperties.width" appearance="fill">
+        <mat-form-field appearance="fill">
           <mat-label>Breite</mat-label>
           <input matInput type="number" #width="ngModel" min="0"
                  [ngModel]="combinedProperties.width"
                  (ngModelChange)="updateModel.emit({ property: 'width', value: $event, isInputValid: width.valid })">
         </mat-form-field>
-        <mat-form-field *ngIf="combinedProperties.height" appearance="fill">
+        <mat-form-field appearance="fill">
           <mat-label>Hoehe</mat-label>
           <input matInput type="number" #height="ngModel" min="0"
                  [ngModel]="combinedProperties.height"
                  (ngModelChange)="updateModel.emit({ property: 'height', value: $event, isInputValid: height.valid })">
         </mat-form-field>
 
-        <mat-form-field *ngIf="combinedProperties.xPosition" appearance="fill">
+        <mat-form-field appearance="fill">
           <mat-label>X Position</mat-label>
           <input matInput type="number" #xPosition="ngModel" min="0"
                  [ngModel]="combinedProperties.xPosition"
@@ -30,7 +30,7 @@ import { SelectionService } from '../../../../selection.service';
                     { property: 'xPosition', value: $event, isInputValid: xPosition.valid })">
         </mat-form-field>
 
-        <mat-form-field *ngIf="combinedProperties.yPosition" appearance="fill">
+        <mat-form-field appearance="fill">
           <mat-label>Y Position</mat-label>
           <input matInput type="number" #yPosition="ngModel" min="0"
                  [ngModel]="combinedProperties.yPosition"
@@ -39,39 +39,40 @@ import { SelectionService } from '../../../../selection.service';
         </mat-form-field>
       </ng-container>
       <ng-template #elseBlock>
-        <mat-form-field *ngIf="combinedProperties.width" appearance="fill">
+        <mat-form-field appearance="fill">
           <mat-label>Mindestbreite</mat-label>
           <input matInput type="number" #width="ngModel" min="0"
                  [ngModel]="combinedProperties.width"
                  (ngModelChange)="updateModel.emit({ property: 'width', value: $event, isInputValid: width.valid })">
         </mat-form-field>
-        <mat-form-field *ngIf="combinedProperties.height" appearance="fill">
+        <mat-form-field appearance="fill">
           <mat-label>Mindesthöhe</mat-label>
           <input matInput type="number" #height="ngModel" min="0"
                  [ngModel]="combinedProperties.height"
                  (ngModelChange)="updateModel.emit({ property: 'height', value: $event, isInputValid: height.valid })">
         </mat-form-field>
+
         Grid
         <div class="input-group">
           <div fxLayoutAlign="row">
-            <mat-form-field *ngIf="combinedProperties.gridColumnStart" class="small-input">
+            <mat-form-field class="small-input">
               <mat-label>Start-Spalte</mat-label>
               <input matInput type="number" [ngModel]="combinedProperties.gridColumnStart"
                      (ngModelChange)="updateModel.emit({ property: 'gridColumnStart', value: $event })">
             </mat-form-field>
-            <mat-form-field *ngIf="combinedProperties.gridColumnEnd" class="small-input">
+            <mat-form-field class="small-input">
               <mat-label>End-Spalte</mat-label>
               <input matInput type="number" [ngModel]="combinedProperties.gridColumnEnd"
                      (ngModelChange)="updateModel.emit({ property: 'gridColumnEnd', value: $event })">
             </mat-form-field>
           </div>
           <div fxLayoutAlign="row">
-            <mat-form-field *ngIf="combinedProperties.gridRowStart" class="small-input">
+            <mat-form-field class="small-input">
               <mat-label>Start-Zeile</mat-label>
               <input matInput type="number" [ngModel]="combinedProperties.gridRowStart"
                      (ngModelChange)="updateModel.emit({ property: 'gridRowStart', value: $event })">
             </mat-form-field>
-            <mat-form-field *ngIf="combinedProperties.gridRowEnd" class="small-input">
+            <mat-form-field class="small-input">
               <mat-label>End-Zeile</mat-label>
               <input matInput type="number" [ngModel]="combinedProperties.gridRowEnd"
                      (ngModelChange)="updateModel.emit({ property: 'gridRowEnd', value: $event })">
@@ -81,8 +82,7 @@ import { SelectionService } from '../../../../selection.service';
 
         Abstand
         <div class="input-group">
-          <mat-form-field *ngIf="combinedProperties.marginTop"
-                          class="centered-form-field">
+          <mat-form-field class="centered-form-field small-input">
             <mat-label>oben</mat-label>
             <input matInput type="number" #marginTop="ngModel" min="0"
                    [ngModel]="combinedProperties.marginTop"
@@ -90,15 +90,14 @@ import { SelectionService } from '../../../../selection.service';
                       { property: 'marginTop', value: $event, isInputValid: marginTop.valid })">
           </mat-form-field>
           <div fxLayoutAlign="row">
-            <mat-form-field *ngIf="combinedProperties.marginLeft">
+            <mat-form-field class="small-input">
               <mat-label>links</mat-label>
               <input matInput type="number" #marginLeft="ngModel" min="0"
                      [ngModel]="combinedProperties.marginLeft"
                      (ngModelChange)="updateModel.emit(
                         { property: 'marginLeft', value: $event, isInputValid: marginLeft.valid })">
             </mat-form-field>
-            <mat-form-field *ngIf="combinedProperties.marginRight"
-                            class="right-form-field">
+            <mat-form-field class="right-form-field small-input">
               <mat-label>rechts</mat-label>
               <input matInput type="number" #marginRight="ngModel" min="0"
                      [ngModel]="combinedProperties.marginRight"
@@ -106,8 +105,7 @@ import { SelectionService } from '../../../../selection.service';
                         { property: 'marginRight', value: $event, isInputValid: marginRight.valid })">
             </mat-form-field>
           </div>
-          <mat-form-field *ngIf="combinedProperties.marginBottom"
-                          class="centered-form-field">
+          <mat-form-field class="centered-form-field small-input">
             <mat-label>unten</mat-label>
             <input matInput type="number" #marginBottom="ngModel" min="0"
                    [ngModel]="combinedProperties.marginBottom"
@@ -117,7 +115,7 @@ import { SelectionService } from '../../../../selection.service';
         </div>
       </ng-template>
 
-      <mat-form-field *ngIf="combinedProperties.zIndex" appearance="fill">
+      <mat-form-field appearance="fill">
         <mat-label>Z-Index</mat-label>
         <input matInput type="number" #zIndex="ngModel" min="0"
                [ngModel]="combinedProperties.zIndex"
@@ -142,7 +140,13 @@ import { SelectionService } from '../../../../selection.service';
         </div>
       </ng-container>
     </div>
-  `
+  `,
+  styles: [
+    '.centered-form-field {margin-left: 25%}',
+    '.right-form-field {margin-left: 15%}',
+    '.input-group {background-color: rgba(0,0,0,.04); margin-bottom: 10px;}',
+    '::ng-deep app-element-properties .small-input .mat-form-field-infix {width: 95px; margin: 0 5px;}'
+  ]
 })
 export class ElementSizingPropertiesComponent {
   @Input() combinedProperties: Record<string, string | number | boolean | string[] | undefined> = {};