styles

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

@@ -1,24 +1,19 @@
 <main>
-  <app-slide-toggle
-    label="Dark Mode"
-    [ngModel]="darkModeAktiv"
-    (ngModelChange)="onDarkModeChange($event)"
-    name="mainDarkModeToggle"
-  ></app-slide-toggle>
-
-  <div class="dashboard-grid grid-col-span-4">
-    <app-kpi-card
-      *ngFor="let kpi of kpiData"
-      [value]="kpi.value"
-      [label]="kpi.label"
-      [color]="kpi.color"
-      [iconName]="kpi.iconName"
-    >
-    </app-kpi-card>
+  <div class="grid-col-span-4">
+    <app-page-header></app-page-header>
   </div>
 
+  <app-kpi-card
+    *ngFor="let kpi of kpiData"
+    [value]="kpi.value"
+    [label]="kpi.label"
+    [color]="kpi.color"
+    [iconName]="kpi.iconName"
+  >
+  </app-kpi-card>
+
   <div class="grid-col-span-4">
-    <app-form-group title="Table">
+    <app-form-group title="Data-display Components">
       <app-orders-table
         [data]="ordersData"
         [itemsPerPage]="5"
@@ -32,7 +27,7 @@
 
   <div class="grid-col-span-2">
     <app-form-group
-      title="Persönliche Daten"
+      title="Form Components 1"
       description="Diese Informationen sind öffentlich sichtbar."
     >
       <app-form-select
@@ -55,7 +50,7 @@
 
   <div class="grid-col-span-2">
     <app-form-group
-      title="Anwendungs-Einstellungen"
+      title="Form Components 2"
       description="Diese Informationen sind öffentlich sichtbar."
     >
       <app-slide-toggle
@@ -80,4 +75,106 @@
       ></app-slide-toggle>
     </app-form-group>
   </div>
+
+  <div class="grid-col-span-2">
+    <app-form-group
+      title="Layout Components"
+      description="Diese Informationen sind öffentlich sichtbar."
+    >
+      <app-expansion-panel title="Weitere Details anzeigen...">
+        Dieser Inhalt wird jetzt von einer wiederverwendbaren Komponente
+        gesteuert. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </app-expansion-panel>
+    </app-form-group>
+  </div>
+
+  <div class="grid-col-span-2">
+    <app-form-group title="Button Components" description="UI Components">
+      <!-- Sektion 1: Standard-Buttons -->
+      <div class="button-group">
+        <app-button buttonType="primary" tooltip="Primäre Aktion"
+          >Primary</app-button
+        >
+        <app-button buttonType="secondary" tooltip="Sekundäre Aktion"
+          >Secondary</app-button
+        >
+        <app-button buttonType="stroked" tooltip="Hervorgehoben"
+          >Stroked</app-button
+        >
+        <app-button buttonType="flat" tooltip="Weniger wichtige Aktion"
+          >Flat</app-button
+        >
+      </div>
+
+      <!-- Sektion 2: Buttons mit Icon und Text -->
+      <div class="button-group">
+        <app-button buttonType="primary" iconName="edit">Bearbeiten</app-button>
+        <app-button buttonType="secondary" iconName="shopping_bag"
+          >Zum Warenkorb</app-button
+        >
+      </div>
+
+      <!-- Sektion 3: Reine Icon-Buttons -->
+      <div class="button-group">
+        <app-button
+          buttonType="icon"
+          tooltip="Favorit hinzufügen"
+          iconName="favorite"
+          svgColor="red"
+        ></app-button>
+        <app-button
+          buttonType="icon"
+          tooltip="Details anzeigen"
+          iconName="eye"
+        ></app-button>
+        <app-button
+          buttonType="icon"
+          tooltip="Benutzer"
+          iconName="group"
+        ></app-button>
+        <app-button
+          buttonType="icon"
+          tooltip="Performance"
+          iconName="bolt"
+        ></app-button>
+        <app-button
+          buttonType="icon-danger"
+          tooltip="Löschen"
+          iconName="delete"
+        ></app-button>
+      </div>
+
+      <!-- Sektion 4: Paginator Icon-Buttons (Beispiel) -->
+      <div class="button-group">
+        <app-button
+          buttonType="icon"
+          tooltip="Zurück"
+          iconName="chevron_backward"
+        ></app-button>
+        <app-button
+          buttonType="icon"
+          tooltip="Weiter"
+          iconName="chevron_forward"
+        ></app-button>
+      </div>
+
+      <!-- Sektion 5: Deaktivierte Zustände -->
+      <div class="button-group">
+        <app-button buttonType="primary" [disabled]="true"
+          >Deaktiviert</app-button
+        >
+        <app-button
+          buttonType="icon"
+          iconName="money"
+          [disabled]="true"
+          tooltip="Nicht verfügbar"
+        ></app-button>
+      </div>
+
+      <div class="chip-set">
+        <app-chip label="Technologie" [removable]="true"></app-chip>
+        <app-chip label="Angular" [active]="true" [removable]="true"></app-chip>
+      </div>
+    </app-form-group>
+  </div>
 </main>

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

@@ -32,6 +32,14 @@ import { SlideToggleComponent } from '../../../../shared/components/form/slide-t
 
 import { isPlatformBrowser } from '@angular/common';
 
+import { ExpansionPanelComponent } from '../../../../shared/components/layout/expansion-panel/expansion-panel.component';
+
+import { PageHeaderComponent } from '../../../../shared/components/layout/page-header/page-header.component';
+
+import { ButtonComponent } from '../../../../shared/components/ui/button/button.component';
+
+import { ChipComponent } from '../../../../shared/components/ui/chip/chip.component';
+
 // Wir definieren ein Interface für unsere KPI-Daten für Typsicherheit
 interface Kpi {
   value: string;
@@ -54,6 +62,10 @@ interface Kpi {
     FormsModule,
     FormTextareaComponent,
     SlideToggleComponent,
+    ExpansionPanelComponent,
+    PageHeaderComponent,
+    ButtonComponent,
+    ChipComponent
   ],
   templateUrl: './demo2.component.html',
 })
@@ -257,6 +269,7 @@ export class Demo2Component {
       this.renderer.removeClass(this.document.body, 'dark-theme');
     }
   }
+
   handleDeleteOrder(orderId: string): void {
     console.log('Lösche Bestellung mit ID:', orderId);
     // Hier könnten Sie z.B. einen Bestätigungs-Dialog öffnen