feat: ClearableInputComponent hinzufügen und in ReceiverTableComponent integrieren

- `ClearableInputComponent` erstellt mit einer Löschen-Schaltfläche für Texteingaben
- `ClearableInputComponent` in `ReceiverTableComponent` integriert, um dynamische Eingabefelder zu verwalten
- `receiver-table.component.html` aktualisiert, um `ClearableInputComponent` für das Feld 'Anrede Email' zu verwenden

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.html

@@ -0,0 +1,9 @@
+<mat-form-field class="example-form-field">
+    <mat-label>{{label}}</mat-label>
+    <input matInput type="text" [(ngModel)]="value">
+    @if (value) {
+    <button matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
+        <mat-icon>close</mat-icon>
+    </button>
+    }
+</mat-form-field>

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.scss

@@ -0,0 +1,7 @@
+.mat-stepper-vertical {
+    margin-top: 8px;
+}
+
+.mat-mdc-form-field {
+    margin-top: 16px;
+}

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClearableInputComponent } from './clearable-input.component';
+
+describe('ClearableInputComponent', () => {
+  let component: ClearableInputComponent;
+  let fixture: ComponentFixture<ClearableInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ClearableInputComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ClearableInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.ts

@@ -0,0 +1,18 @@
+import {Component, Input} from '@angular/core';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import {FormsModule} from '@angular/forms';
+import {MatInputModule} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+
+@Component({
+  selector: 'clearable-input',
+  standalone: true,
+  imports: [MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatIconModule],
+  templateUrl: './clearable-input.component.html',
+  styleUrl: './clearable-input.component.scss'
+})
+export class ClearableInputComponent {
+  @Input() public value: string = '';
+  @Input() public label: string = '';
+}

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.html

@@ -8,7 +8,9 @@
 
     <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef> Anrede Email </th>
-        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+        <td mat-cell *matCellDef="let element">
+            <clearable-input [label]="'Anrede Email'" [value]="element.name"></clearable-input>
+        </td>
     </ng-container>
 
     <ng-container matColumnDef="accessCode">

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.ts

@@ -2,13 +2,14 @@ import { Component, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/
 import { FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatTableModule } from '@angular/material/table';
-import { Observable } from 'rxjs';
-import { startWith, map } from 'rxjs/operators';
 import { AsyncPipe } from '@angular/common';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { ReceiverService } from '../../services/receiver.service'
 import { ReceiverInputComponent } from '../receiver-input/receiver-input.component';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import { ClearableInputComponent } from '../clearable-input/clearable-input.component'
 
 @Component({
   selector: 'receiver-table',
@@ -21,7 +22,8 @@ import { ReceiverInputComponent } from '../receiver-input/receiver-input.compone
     MatAutocompleteModule,
     ReactiveFormsModule,
     AsyncPipe,
-    ReceiverInputComponent
+    ReceiverInputComponent,
+    MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatIconModule, ClearableInputComponent
   ],
   templateUrl: './receiver-table.component.html',
   styleUrl: './receiver-table.component.scss'