styles

src/app/features/demo/components/demo2/demo2.component.html

@@ -75,25 +75,11 @@
         <h3 class="card-header">Moderne Formular-Elemente</h3>
         <div class="component-grid">
           <app-form-field label="Name" type="text"></app-form-field>
-          <div class="form-field">
-            <select class="form-input" id="city">
-              <option>Berlin</option>
-              <option>München</option></select
-            ><label for="city" class="form-label">Stadt</label>
-          </div>
-          <div class="form-field">
-            <textarea
-              class="form-input"
-              id="message"
-              placeholder=" "
-              rows="3"
-            ></textarea
-            ><label for="message" class="form-label">Ihre Nachricht</label>
-          </div>
-          <div class="form-group-inline">
-            <label>Benachrichtigungen</label
-            ><app-slide-toggle></app-slide-toggle>
-          </div>
+          <app-form-select label="Stadt" [options]="cityOptions" ></app-form-select>
+
+          <app-form-textarea label="Nachricht"></app-form-textarea>
+
+          <app-slide-toggle></app-slide-toggle>
         </div>
       </app-card>
 
@@ -101,11 +87,14 @@
         <h3 class="card-header">Buttons, Chips & Interaktion</h3>
         <div class="component-grid">
           <div class="button-group">
-            <app-button buttonType="primary">Primary</app-button>
+            <app-button buttonType="primary" tooltip="Primary"
+              >Primary</app-button
+            >
             <app-button buttonType="secondary">Secondary</app-button>
             <app-button buttonType="stroked">Stroked</app-button>
             <app-button buttonType="flat">Flat</app-button>
-            <app-button buttonType="icon"
+            <app-button
+              buttonType="icon"
               tooltip="Favorit hinzufügen"
               iconName="favorite"
               svgColor="red"
@@ -118,7 +107,6 @@
             ></app-button>
           </div>
 
-
           <div class="chip-set">
             <app-chip label="Technologie" [removable]="true"></app-chip>
             <app-chip
@@ -266,7 +254,9 @@
       <p>Sind Sie sicher? Diese Aktion kann nicht rückgängig gemacht werden.</p>
     </div>
     <div dialog-actions>
-      <app-button buttonType="stroked" (click)="closeDialog()">Abbrechen</app-button>
+      <app-button buttonType="stroked" (click)="closeDialog()"
+        >Abbrechen</app-button
+      >
       <app-button buttonType="primary" (click)="closeDialog()"
         >Ja, endgültig löschen</app-button
       >

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 {