From 6d9b8bc96b886f321acca518e806c0d172cb677d Mon Sep 17 00:00:00 2001 From: "Tizian.Breuch" Date: Tue, 9 Sep 2025 17:20:21 +0200 Subject: [PATCH] styles --- public/icons/chevron_backward.svg | 1 + public/icons/chevron_forward.svg | 1 + .../components/demo2/demo2.component.html | 36 ++++----- .../demo/components/demo2/demo2.component.ts | 14 +++- .../paginator/paginator.component.html | 10 ++- .../form/form-field/form-field.component.css | 0 .../form/form-field/form-field.component.ts | 39 ++++++---- .../form-select/form-select.component.html | 22 ++++++ .../form/form-select/form-select.component.ts | 44 +++++++++++ .../form-textarea.component.html | 13 ++++ .../form-textarea/form-textarea.component.ts | 40 ++++++++++ src/app/shared/components/form/form.css | 73 +++++++++++++++++++ .../slide-toggle/slide-toggle.component.css | 38 ---------- .../slide-toggle/slide-toggle.component.ts | 2 +- .../components/ui/button/button.component.css | 41 +++++++++-- .../ui/button/button.component.html | 17 ++--- .../components/ui/button/button.component.ts | 25 ++++--- src/styles.css | 43 +---------- 18 files changed, 310 insertions(+), 149 deletions(-) create mode 100644 public/icons/chevron_backward.svg create mode 100644 public/icons/chevron_forward.svg delete mode 100644 src/app/shared/components/form/form-field/form-field.component.css create mode 100644 src/app/shared/components/form/form-select/form-select.component.html create mode 100644 src/app/shared/components/form/form-select/form-select.component.ts create mode 100644 src/app/shared/components/form/form-textarea/form-textarea.component.html create mode 100644 src/app/shared/components/form/form-textarea/form-textarea.component.ts create mode 100644 src/app/shared/components/form/form.css delete mode 100644 src/app/shared/components/form/slide-toggle/slide-toggle.component.css diff --git a/public/icons/chevron_backward.svg b/public/icons/chevron_backward.svg new file mode 100644 index 0000000..9c792e0 --- /dev/null +++ b/public/icons/chevron_backward.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/chevron_forward.svg b/public/icons/chevron_forward.svg new file mode 100644 index 0000000..0ad8fd6 --- /dev/null +++ b/public/icons/chevron_forward.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/features/demo/components/demo2/demo2.component.html b/src/app/features/demo/components/demo2/demo2.component.html index 775c928..a84b8d6 100644 --- a/src/app/features/demo/components/demo2/demo2.component.html +++ b/src/app/features/demo/components/demo2/demo2.component.html @@ -75,25 +75,11 @@

Moderne Formular-Elemente

-
- -
-
- -
-
- -
+ + + + +
@@ -101,11 +87,14 @@

Buttons, Chips & Interaktion

- Primary + Primary Secondary Stroked Flat -
-
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 ,