Simplify text field component

Remove duplicate code

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

@@ -7,43 +7,10 @@ import { TextFieldElement } from '../../interfaces/elements';
 @Component({
   selector: 'aspect-text-field',
   template: `
-    <mat-form-field
-            *ngIf="elementModel.label !== ''"
-            [style.width.%]="100"
-            [style.height.%]="100"
-            [style.color]="elementModel.styling.fontColor"
-            [style.font-family]="elementModel.styling.font"
-            [style.font-size.px]="elementModel.styling.fontSize"
-            [style.font-weight]="elementModel.styling.bold ? 'bold' : ''"
-            [style.font-style]="elementModel.styling.italic ? 'italic' : ''"
-            [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
-            aspectInputBackgroundColor [backgroundColor]="elementModel.styling.backgroundColor"
-            [appearance]="$any(elementModel.appearance)">
-      <mat-label>{{elementModel.label}}</mat-label>
-      <input matInput type="text" #input
-             autocomplete="off"
-             autocapitalize="none"
-             autocorrect="off"
-             spellcheck="false"
-             value="{{elementModel.value}}"
-             [formControl]="elementFormControl"
-             [pattern]="elementModel.pattern"
-             [readonly]="elementModel.readOnly"
-             (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null"
-             (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null">
-      <button *ngIf="elementModel.clearable"
-              type="button"
-              matSuffix mat-icon-button aria-label="Clear"
-              (click)="this.elementFormControl.setValue('')">
-        <mat-icon>close</mat-icon>
-      </button>
-      <mat-error *ngIf="elementFormControl.errors">
-        {{elementFormControl.errors | errorTransform: elementModel}}
-      </mat-error>
-    </mat-form-field>
-    <mat-form-field *ngIf="elementModel.label === ''" class="small-input"
+    <mat-form-field [class.small-input]="elementModel.label === ''"
                     [style.width.%]="100"
                     [style.height.%]="100"
+                    [style.line-height.%]="elementModel.styling.lineHeight"
                     [style.color]="elementModel.styling.fontColor"
                     [style.font-family]="elementModel.styling.font"
                     [style.font-size.px]="elementModel.styling.fontSize"
@@ -52,6 +19,7 @@ import { TextFieldElement } from '../../interfaces/elements';
                     [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
                     aspectInputBackgroundColor [backgroundColor]="elementModel.styling.backgroundColor"
                     [appearance]="$any(elementModel.appearance)">
+      <mat-label>{{elementModel.label}}</mat-label>
       <input matInput type="text" #input
              autocomplete="off"
              autocapitalize="none"
@@ -59,8 +27,8 @@ import { TextFieldElement } from '../../interfaces/elements';
              spellcheck="false"
              value="{{elementModel.value}}"
              [formControl]="elementFormControl"
-             [readonly]="elementModel.readOnly"
              [pattern]="elementModel.pattern"
+             [readonly]="elementModel.readOnly"
              (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null"
              (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null">
       <button *ngIf="elementModel.clearable"
@@ -75,7 +43,8 @@ import { TextFieldElement } from '../../interfaces/elements';
     </mat-form-field>
   `,
   styles: [
-    ':host ::ng-deep .small-input div.mat-form-field-infix {border-top: none; padding: 0.55em 0 0.25em 0;}'
+    ':host ::ng-deep .small-input div.mat-form-field-infix {border-top: none; padding: 0.55em 0 0.25em 0;}',
+    ':host ::ng-deep .small-input .mat-form-field-outline-gap {display: none; }'
   ]
 })
 export class TextFieldComponent extends FormElementComponent {