-
Sind Sie sicher? Diese Aktion kann nicht rückgängig gemacht werden.
-
Abbrechen
+
Abbrechen
Ja, endgültig löschen
diff --git a/src/app/features/demo/components/demo2/demo2.component.ts b/src/app/features/demo/components/demo2/demo2.component.ts
index 8dc2d71..35a7e61 100644
--- a/src/app/features/demo/components/demo2/demo2.component.ts
+++ b/src/app/features/demo/components/demo2/demo2.component.ts
@@ -23,7 +23,8 @@ import { ExpansionPanelComponent } from '../../../../shared/components/layout/ex
import { SidebarComponent } from '../../../../shared/components/layout/sidebar/sidebar.component';
import { OrdersTableComponent, Order } from '../../../../shared/components/data-display/orders-table/orders-table.component';
-
+import { FormSelectComponent, SelectOption } from '../../../../shared/components/form/form-select/form-select.component';
+import { FormTextareaComponent } from '../../../../shared/components/form/form-textarea/form-textarea.component';
@Component({
selector: 'app-demo2',
standalone: true,
@@ -44,7 +45,9 @@ import { OrdersTableComponent, Order } from '../../../../shared/components/data-
SkeletonComponent,
ExpansionPanelComponent,
SidebarComponent,
- OrdersTableComponent
+ OrdersTableComponent,
+ FormSelectComponent,
+ FormTextareaComponent
],
templateUrl: './demo2.component.html',
styleUrl: './demo2.component.css',
@@ -101,6 +104,13 @@ export class Demo2Component implements OnInit {
}
];
+ cityOptions: SelectOption[] = [
+ { value: 'berlin', label: 'Berlin' },
+ { value: 'munich', label: 'München' },
+ { value: 'hamburg', label: 'Hamburg' }
+ ];
+
+
constructor(private snackbarService: SnackbarService) {}
ngOnInit(): void {
diff --git a/src/app/shared/components/data-display/paginator/paginator.component.html b/src/app/shared/components/data-display/paginator/paginator.component.html
index 733dbb0..b6d408d 100644
--- a/src/app/shared/components/data-display/paginator/paginator.component.html
+++ b/src/app/shared/components/data-display/paginator/paginator.component.html
@@ -4,18 +4,20 @@
\ No newline at end of file
diff --git a/src/app/shared/components/form/form-field/form-field.component.css b/src/app/shared/components/form/form-field/form-field.component.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/shared/components/form/form-field/form-field.component.ts b/src/app/shared/components/form/form-field/form-field.component.ts
index 3951806..ac16c01 100644
--- a/src/app/shared/components/form/form-field/form-field.component.ts
+++ b/src/app/shared/components/form/form-field/form-field.component.ts
@@ -1,37 +1,46 @@
import { Component, Input, forwardRef } from '@angular/core';
// ControlValueAccessor und NG_VALUE_ACCESSOR sind Typen, kein Modul
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms'; // <-- FormsModule hier importieren
+import {
+ ControlValueAccessor,
+ NG_VALUE_ACCESSOR,
+ FormsModule,
+} from '@angular/forms'; // <-- FormsModule hier importieren
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-form-field',
standalone: true,
- imports: [
- CommonModule,
- FormsModule
- ],
+ imports: [CommonModule, FormsModule],
templateUrl: './form-field.component.html',
- styleUrl: './form-field.component.css',
+ styleUrl: '../form.css',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => FormFieldComponent),
- multi: true
- }
- ]
+ multi: true,
+ },
+ ],
})
export class FormFieldComponent implements ControlValueAccessor {
@Input() label: string = '';
@Input() type: 'text' | 'email' | 'password' = 'text';
-
+
// Interne Logik für ControlValueAccessor
value: string = '';
onChange: (value: any) => void = () => {};
onTouched: () => void = () => {};
disabled = false;
- writeValue(value: any): void { this.value = value; }
- registerOnChange(fn: any): void { this.onChange = fn; }
- registerOnTouched(fn: any): void { this.onTouched = fn; }
- setDisabledState?(isDisabled: boolean): void { this.disabled = isDisabled; }
-}
\ No newline at end of file
+ writeValue(value: any): void {
+ this.value = value;
+ }
+ registerOnChange(fn: any): void {
+ this.onChange = fn;
+ }
+ registerOnTouched(fn: any): void {
+ this.onTouched = fn;
+ }
+ setDisabledState?(isDisabled: boolean): void {
+ this.disabled = isDisabled;
+ }
+}
diff --git a/src/app/shared/components/form/form-select/form-select.component.html b/src/app/shared/components/form/form-select/form-select.component.html
new file mode 100644
index 0000000..14bdc1f
--- /dev/null
+++ b/src/app/shared/components/form/form-select/form-select.component.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/shared/components/form/form-select/form-select.component.ts b/src/app/shared/components/form/form-select/form-select.component.ts
new file mode 100644
index 0000000..f5ba575
--- /dev/null
+++ b/src/app/shared/components/form/form-select/form-select.component.ts
@@ -0,0 +1,44 @@
+import { Component, Input, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms'; // FormsModule importieren
+import { CommonModule } from '@angular/common';
+
+// Interface für die Select-Optionen
+export interface SelectOption {
+ value: any;
+ label: string;
+}
+
+@Component({
+ selector: 'app-form-select',
+ standalone: true,
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ FormsModule // <-- HIER IST DIE KORREKTUR
+ ],
+ templateUrl: './form-select.component.html',
+ styleUrl: '../form.css',
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => FormSelectComponent),
+ multi: true
+ }
+ ]
+})
+export class FormSelectComponent implements ControlValueAccessor {
+ @Input() label: string = '';
+ @Input() options: SelectOption[] = [];
+
+ // ... (der Rest der Klasse bleibt unverändert)
+ controlId = `form-select-${Math.random().toString(36).substring(2)}`;
+ value: any = null;
+ onChange: (value: any) => void = () => {};
+ onTouched: () => void = () => {};
+ disabled = false;
+
+ writeValue(value: any): void { this.value = value; }
+ registerOnChange(fn: any): void { this.onChange = fn; }
+ registerOnTouched(fn: any): void { this.onTouched = fn; }
+ setDisabledState?(isDisabled: boolean): void { this.disabled = isDisabled; }
+}
\ No newline at end of file
diff --git a/src/app/shared/components/form/form-textarea/form-textarea.component.html b/src/app/shared/components/form/form-textarea/form-textarea.component.html
new file mode 100644
index 0000000..980ed7e
--- /dev/null
+++ b/src/app/shared/components/form/form-textarea/form-textarea.component.html
@@ -0,0 +1,13 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/shared/components/form/form-textarea/form-textarea.component.ts b/src/app/shared/components/form/form-textarea/form-textarea.component.ts
new file mode 100644
index 0000000..ecbbacf
--- /dev/null
+++ b/src/app/shared/components/form/form-textarea/form-textarea.component.ts
@@ -0,0 +1,40 @@
+import { Component, Input, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'app-form-textarea',
+ standalone: true,
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ FormsModule // Wichtig für [(ngModel)]
+ ],
+ templateUrl: './form-textarea.component.html',
+ styleUrl: '../form.css',
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => FormTextareaComponent),
+ multi: true
+ }
+ ]
+})
+export class FormTextareaComponent implements ControlValueAccessor {
+ @Input() label: string = '';
+ @Input() rows = 3; // Standardanzahl der Zeilen
+
+ // Eindeutige ID für die Verknüpfung
+ controlId = `form-textarea-${Math.random().toString(36).substring(2)}`;
+
+ // --- Logik für ControlValueAccessor ---
+ value: string = '';
+ onChange: (value: any) => void = () => {};
+ onTouched: () => void = () => {};
+ disabled = false;
+
+ writeValue(value: any): void { this.value = value; }
+ registerOnChange(fn: any): void { this.onChange = fn; }
+ registerOnTouched(fn: any): void { this.onTouched = fn; }
+ setDisabledState?(isDisabled: boolean): void { this.disabled = isDisabled; }
+}
\ No newline at end of file
diff --git a/src/app/shared/components/form/form.css b/src/app/shared/components/form/form.css
new file mode 100644
index 0000000..b8872ae
--- /dev/null
+++ b/src/app/shared/components/form/form.css
@@ -0,0 +1,73 @@
+/* =================================================================================
+ * GEMEINSAME BASIS-STILE FÜR ALLE FORMULAR-KOMPONENTEN
+ * ================================================================================= */
+
+/* Stellt sicher, dass die Host-Komponente als Block-Element gerendert wird */
+:host {
+ display: block;
+}
+
+/* Der Wrapper für das Label und das Eingabefeld */
+.form-field {
+ position: relative;
+}
+
+/* Das "schwebende" Label */
+.form-label {
+ position: absolute;
+ top: 50%;
+ left: 1rem;
+ transform: translateY(-50%);
+ color: var(--color-text-light);
+ background-color: var(--color-surface);
+ padding: 0 0.25rem;
+ transition: all 0.2s ease-out;
+ pointer-events: none;
+ border-radius: var(--border-radius-sm);
+}
+
+/* Passt die Hintergrundfarbe des Labels für das Dark Theme an */
+:host-context(body.dark-theme) .form-label {
+ background-color: var(--color-surface);
+}
+
+/* Gemeinsame Stile für
,