[text-field] Fix background color dimension for small inputs

#611

docs/release-notes-editor.md

 Editor
 ======
+## next 2.4.1
+### Fehlerbehebungen
+- Korrigiert den Bereich der Hintergrundfarbe bei Eingabefeldern ohne Beschriftung 
+
+
 ## 2.4.0
 ### Neue Funktionen
 - Rechenkästchen: 

projects/common/components/input-elements/text-field.component.ts

@@ -18,7 +18,9 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
                     [appearance]="$any(elementModel.appearance)">
       <mat-label>{{elementModel.label}}</mat-label>
       <div *ngIf="elementModel.styling.backgroundColor && elementModel.styling.backgroundColor !== 'transparent'"
-           class="background-color-container">
+           class="background-color-container"
+           [class.border-bottom-radius]="elementModel.appearance === 'outline'"
+           [class.small-input]="elementModel.label === '' && elementModel.appearance === 'outline'">
       </div>
       <input matInput #input
              autocomplete="off"
@@ -58,6 +60,10 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
     :host ::ng-deep .small-input .mdc-notched-outline__notch {
       display: none;
     }
+    .background-color-container.small-input{
+      top: 0.45em;
+      bottom: 0.45em;
+    }
     .background-color-container {
       background-color: var(--backgroundColor) !important;
       position: absolute;
@@ -66,7 +72,12 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
       bottom: 0;
       left: -16px;
       z-index: -1;
-      border-radius: 4px;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+    }
+    .border-bottom-radius {
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
     }
 
     :host ::ng-deep .mat-mdc-text-field-wrapper .mdc-notched-outline mat-label {