Change text field appearance depending on label existence

When the label is empty a smaller input field will be rendered which 
also does not have the label placeholder.

projects/common/element-components/text-field.component.ts

@@ -6,7 +6,8 @@ import { TextFieldElement } from '../models/text-field-element';
 @Component({
   selector: 'app-text-field',
   template: `
-    <mat-form-field [style.width.%]="100"
+    <mat-form-field *ngIf="elementModel.label !== ''"
+                    [style.width.%]="100"
                     [style.height.%]="100"
                     [style.color]="elementModel.fontColor"
                     [style.font-family]="elementModel.font"
@@ -30,7 +31,35 @@ import { TextFieldElement } from '../models/text-field-element';
         {{elementFormControl.errors | errorTransform: elementModel}}
       </mat-error>
     </mat-form-field>
-  `
+    <mat-form-field *ngIf="elementModel.label === ''" class="small-input"
+                    [style.width.%]="100"
+                    [style.height.%]="100"
+                    [style.color]="elementModel.fontColor"
+                    [style.font-family]="elementModel.font"
+                    [style.font-size.px]="elementModel.fontSize"
+                    [style.font-weight]="elementModel.bold ? 'bold' : ''"
+                    [style.font-style]="elementModel.italic ? 'italic' : ''"
+                    [style.text-decoration]="elementModel.underline ? 'underline' : ''"
+                    appInputBackgroundColor [backgroundColor]="elementModel.backgroundColor"
+                    [appearance]="$any(elementModel.appearance)">
+      <input matInput type="text" #input
+             [pattern]="elementModel.pattern"
+             (focus)="onFocus.emit(input)"
+             (blur)="onBlur.emit(input)"
+             autocomplete="off"
+             [formControl]="elementFormControl">
+      <button *ngIf="elementModel.clearable" matSuffix mat-icon-button aria-label="Clear"
+              (click)="onClick($event)">
+        <mat-icon>close</mat-icon>
+      </button>
+      <mat-error *ngIf="elementFormControl.errors">
+        {{elementFormControl.errors | errorTransform: elementModel}}
+      </mat-error>
+    </mat-form-field>
+  `,
+  styles: [
+    '::ng-deep app-text-field .small-input div.mat-form-field-infix {border-top: none; padding: 0.75em 0 0.25em 0;}'
+  ]
 })
 export class TextFieldComponent extends FormElementComponent {
   @Output() onFocus = new EventEmitter<HTMLElement>();