diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index 756395e9b95d5b3bde3d2b1ba5df90ed3a1b714a..681f9c886673e68d0bbee15215eda57c628048eb 100644
--- a/alfa-client/apps/demo/src/app/app.component.html
+++ b/alfa-client/apps/demo/src/app/app.component.html
@@ -6,8 +6,24 @@
<div class="w-96 bg-slate-300 p-6">
<nav>NAV</nav>
</div>
- <main class="flex-auto bg-slate-200 p-6">
- <ozg-testbtn />
+ <main class="flex-auto bg-slate-100 p-6">
+ <app-bescheid-dialog />
+ <hr class="mt-24" />
+ <div>CDK Stepper</div>
+ <app-custom-stepper>
+ <cdk-step>
+ <div class="mb-4">Antrag bescheiden</div>
+ <p>
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+ invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+ </p>
+ </cdk-step>
+ <cdk-step>
+ <div>Dokumente hinzufügen</div>
+ <p>sjdkflsd sdjsdsjdlfj</p>
+ </cdk-step>
+ </app-custom-stepper>
+
<router-outlet></router-outlet>
</main>
</div>
diff --git a/alfa-client/apps/demo/src/app/app.component.ts b/alfa-client/apps/demo/src/app/app.component.ts
index 4b0931b7dbeb43fa3b07961c6e326b7965cd64a2..8825936598e8d5963476f2fd3e4074b3b1cfb647 100644
--- a/alfa-client/apps/demo/src/app/app.component.ts
+++ b/alfa-client/apps/demo/src/app/app.component.ts
@@ -1,10 +1,23 @@
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
+import { CdkStepperModule } from '@angular/cdk/stepper';
import { TestbtnComponent } from 'design-system';
+import { CustomStepperComponent } from './components/cdk-demo/custom-stepper.component';
+import { BescheidStepperComponent } from './components/bescheid-stepper/bescheid-stepper.component';
+import { BescheidDialogComponent } from './components/bescheid-dialog/bescheid-dialog.component';
+import { BescheidPaperComponent } from './components/bescheid-paper/bescheid-paper.component';
@Component({
standalone: true,
- imports: [TestbtnComponent, RouterModule],
+ imports: [
+ TestbtnComponent,
+ RouterModule,
+ CdkStepperModule,
+ CustomStepperComponent,
+ BescheidDialogComponent,
+ BescheidStepperComponent,
+ BescheidPaperComponent,
+ ],
selector: 'app-root',
templateUrl: './app.component.html',
})
diff --git a/alfa-client/apps/demo/src/app/components/bescheid-dialog/bescheid-dialog.component.html b/alfa-client/apps/demo/src/app/components/bescheid-dialog/bescheid-dialog.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..7d6c9067d31bf809da50cd8d721bbc64c23f2cc9
--- /dev/null
+++ b/alfa-client/apps/demo/src/app/components/bescheid-dialog/bescheid-dialog.component.html
@@ -0,0 +1,7 @@
+<div class="relative flex h-full rounded-xl bg-neutral-200 px-6 py-10">
+ <button class="absolute right-4 top-4">X</button>
+ <div class="flex flex-row gap-11">
+ <app-bescheid-stepper class="flex w-2/3" />
+ <app-bescheid-paper class="flex w-1/3" />
+ </div>
+</div>
diff --git a/alfa-client/apps/demo/src/app/components/bescheid-dialog/bescheid-dialog.component.spec.ts b/alfa-client/apps/demo/src/app/components/bescheid-dialog/bescheid-dialog.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3303218328ecd4bae3e39e8ef35ad7cc1b5a47bc
--- /dev/null
+++ b/alfa-client/apps/demo/src/app/components/bescheid-dialog/bescheid-dialog.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BescheidDialogComponent } from './bescheid-dialog.component';
+
+describe('BescheidDialogComponent', () => {
+ let component: BescheidDialogComponent;
+ let fixture: ComponentFixture<BescheidDialogComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [BescheidDialogComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(BescheidDialogComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/apps/demo/src/app/components/bescheid-dialog/bescheid-dialog.component.ts b/alfa-client/apps/demo/src/app/components/bescheid-dialog/bescheid-dialog.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..45cac030114e6b95068bc8c94d5fdea36d8e6eb8
--- /dev/null
+++ b/alfa-client/apps/demo/src/app/components/bescheid-dialog/bescheid-dialog.component.ts
@@ -0,0 +1,12 @@
+import { Component, HostBinding } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BescheidPaperComponent } from '../bescheid-paper/bescheid-paper.component';
+import { BescheidStepperComponent } from '../bescheid-stepper/bescheid-stepper.component';
+
+@Component({
+ selector: 'app-bescheid-dialog',
+ standalone: true,
+ imports: [CommonModule, BescheidPaperComponent, BescheidStepperComponent],
+ templateUrl: './bescheid-dialog.component.html',
+})
+export class BescheidDialogComponent {}
diff --git a/alfa-client/apps/demo/src/app/components/bescheid-paper/bescheid-paper.component.html b/alfa-client/apps/demo/src/app/components/bescheid-paper/bescheid-paper.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..6f73dc9b6cd251c66b683c72658506a833cd6b8c
--- /dev/null
+++ b/alfa-client/apps/demo/src/app/components/bescheid-paper/bescheid-paper.component.html
@@ -0,0 +1,14 @@
+<section class="w-full overflow-auto rounded-xl bg-white">
+ <div class="px-6 py-6">
+ <div class="text-ozgblue-800 my-2 text-base font-bold">Bescheid</div>
+ <p>
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+ invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
+ justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+ ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+ eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
+ et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+ sanctus est Lorem ipsum dolor sit amet.
+ </p>
+ </div>
+</section>
diff --git a/alfa-client/apps/demo/src/app/components/bescheid-paper/bescheid-paper.component.spec.ts b/alfa-client/apps/demo/src/app/components/bescheid-paper/bescheid-paper.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d6d84bf945dc829971c0bf75e1a352ea5bbf63eb
--- /dev/null
+++ b/alfa-client/apps/demo/src/app/components/bescheid-paper/bescheid-paper.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BescheidPaperComponent } from './bescheid-paper.component';
+
+describe('BescheidPaperComponent', () => {
+ let component: BescheidPaperComponent;
+ let fixture: ComponentFixture<BescheidPaperComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [BescheidPaperComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(BescheidPaperComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/apps/demo/src/app/components/bescheid-paper/bescheid-paper.component.ts b/alfa-client/apps/demo/src/app/components/bescheid-paper/bescheid-paper.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..736cb48d19618821a764f40293c19e62c28faf19
--- /dev/null
+++ b/alfa-client/apps/demo/src/app/components/bescheid-paper/bescheid-paper.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'app-bescheid-paper',
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './bescheid-paper.component.html',
+})
+export class BescheidPaperComponent {}
diff --git a/alfa-client/apps/demo/src/app/components/bescheid-stepper/bescheid-stepper.component.html b/alfa-client/apps/demo/src/app/components/bescheid-stepper/bescheid-stepper.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..4dba806d92b09ab7dc78ed6092454a6b69c7b994
--- /dev/null
+++ b/alfa-client/apps/demo/src/app/components/bescheid-stepper/bescheid-stepper.component.html
@@ -0,0 +1,72 @@
+<div class="flex- flex flex-row gap-7">
+ <div>
+ <div class="relative z-10 flex min-h-28 flex-col items-center">
+ <div class="bg-ozgblue-800 -z-1 absolute bottom-0 top-2 w-1"></div>
+ <button class="z-10 flex">
+ <span
+ class="flex size-10 items-center justify-center rounded-full border-transparent bg-transparent"
+ >
+ <span
+ class="bg-ozgblue-800 flex size-7 items-center justify-center rounded-full text-sm text-white"
+ >
+ 1
+ </span>
+ </span>
+ </button>
+ </div>
+ <div class="relative z-10 flex min-h-28 flex-col items-center">
+ <div class="-z-1 absolute bottom-0 top-2 w-1 bg-gray-400"></div>
+ <span class="z-10 flex">
+ <span
+ class="border-ozgblue-800 flex size-10 items-center justify-center rounded-full border-4 bg-white"
+ >
+ <span
+ class="bg-ozgblue-800 flex size-7 items-center justify-center rounded-full text-sm text-white"
+ >
+ 2
+ </span>
+ </span>
+ </span>
+ </div>
+ <div class="relative z-10 flex min-h-28 flex-col items-center">
+ <div class="-z-1 absolute top-0 h-2 w-1 bg-gray-400"></div>
+ <span class="z-10 flex">
+ <span
+ class="flex size-10 items-center justify-center rounded-full border-transparent bg-transparent"
+ >
+ <span
+ class="flex size-7 items-center justify-center rounded-full bg-gray-400 text-sm text-white"
+ >
+ 3
+ </span>
+ </span>
+ </span>
+ </div>
+ </div>
+ <div>
+ <div class="min-h-28 flex-1">
+ <button class="text-ozgblue-800 my-2 text-base font-bold">Antrag bescheiden</button>
+ </div>
+ <div class="min-h-36 flex-1">
+ <div class="text-ozgblue-800 my-2 text-base font-bold">Dokumente hinzufügen</div>
+ <p>
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+ invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
+ et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+ Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+ diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+ voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+ gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+ </p>
+ <p>
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+ invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
+ et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+ Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+ diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+ voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+ gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+ </p>
+ </div>
+ </div>
+</div>
diff --git a/alfa-client/apps/demo/src/app/components/bescheid-stepper/bescheid-stepper.component.spec.ts b/alfa-client/apps/demo/src/app/components/bescheid-stepper/bescheid-stepper.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bb9b5e5ede5e9eebfe36bd7945ab7b18ee10b5c8
--- /dev/null
+++ b/alfa-client/apps/demo/src/app/components/bescheid-stepper/bescheid-stepper.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BescheidStepperComponent } from './bescheid-stepper.component';
+
+describe('BescheidStepperComponent', () => {
+ let component: BescheidStepperComponent;
+ let fixture: ComponentFixture<BescheidStepperComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [BescheidStepperComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(BescheidStepperComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/apps/demo/src/app/components/bescheid-stepper/bescheid-stepper.component.ts b/alfa-client/apps/demo/src/app/components/bescheid-stepper/bescheid-stepper.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bc32f294ca2b8c3faec94b9a398d0beb2de27dec
--- /dev/null
+++ b/alfa-client/apps/demo/src/app/components/bescheid-stepper/bescheid-stepper.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'app-bescheid-stepper',
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './bescheid-stepper.component.html',
+})
+export class BescheidStepperComponent {}
diff --git a/alfa-client/apps/demo/src/app/components/cdk-demo/custom-stepper.component.html b/alfa-client/apps/demo/src/app/components/cdk-demo/custom-stepper.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..47ccf74a2d385df2712cb89e809ea03e3b6ce5b8
--- /dev/null
+++ b/alfa-client/apps/demo/src/app/components/cdk-demo/custom-stepper.component.html
@@ -0,0 +1,25 @@
+<div class="bg-slate-200 p-10">
+ <section class="my-10 w-1/2 rounded-md bg-slate-300 p-6">
+ <div class="flex min-h-52 gap-4">
+ <div class="flex-0">
+ <div class="text-ozgblue-300 bg-ozgblue-600 rounded-full border-4 p-2">
+ {{ selectedIndex + 1 }}
+ </div>
+ </div>
+ <div class="flex-1"><div [ngTemplateOutlet]="selected ? selected.content : null"></div></div>
+ </div>
+
+ <footer class="example-step-navigation-bar">
+ <button cdkStepperPrevious>
+ <ozg-testbtn cdkStepperPrevious>zurück</ozg-testbtn>
+ </button>
+ <button cdkStepperNext>
+ <ozg-testbtn cdkStepperPrevious>weiter</ozg-testbtn>
+ </button>
+ </footer>
+ </section>
+
+ <!-- Copyright 2024 Google LLC. All Rights Reserved.
+ Use of this source code is governed by an MIT-style license that
+ can be found in the LICENSE file at https://angular.io/license -->
+</div>
diff --git a/alfa-client/apps/demo/src/app/components/cdk-demo/custom-stepper.component.ts b/alfa-client/apps/demo/src/app/components/cdk-demo/custom-stepper.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..107fda7ed02b667e06e7cab3fec4cda3243db1fd
--- /dev/null
+++ b/alfa-client/apps/demo/src/app/components/cdk-demo/custom-stepper.component.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
+import { NgTemplateOutlet } from '@angular/common';
+import { TestbtnComponent } from 'design-system';
+
+
+@Component({
+ standalone: true,
+ selector: 'app-custom-stepper',
+ templateUrl: './custom-stepper.component.html',
+ providers: [{ provide: CdkStepper, useExisting: CustomStepperComponent }],
+ imports: [NgTemplateOutlet, CdkStepperModule, TestbtnComponent],
+})
+export class CustomStepperComponent extends CdkStepper {
+ selectStepByIndex(index: number): void {
+ this.selectedIndex = index;
+ }
+}
diff --git a/alfa-client/libs/design-system/src/lib/testbtn/testbtn.component.ts b/alfa-client/libs/design-system/src/lib/testbtn/testbtn.component.ts
index a96bff1339c67bd5e10dedbd5548dfd4306cd34a..72687de7e36279bd5f7ee5468ca024dfe8a55158 100644
--- a/alfa-client/libs/design-system/src/lib/testbtn/testbtn.component.ts
+++ b/alfa-client/libs/design-system/src/lib/testbtn/testbtn.component.ts
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
type="button"
class="bg-ozgblue-700 hover:bg-ozgblue-600 focus-visible:outline-ozgblue-800 rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
>
- Design-System Test Button
+ <ng-content></ng-content>
</button>`,
})
export class TestbtnComponent {}
diff --git a/alfa-client/package.json b/alfa-client/package.json
index 75db085e57c56c8299c6ccd254004b58724884c3..a31df2da907754a139d84079021c72e072e14596 100644
--- a/alfa-client/package.json
+++ b/alfa-client/package.json
@@ -5,7 +5,7 @@
"scripts": {
"start": "nx run alfa:serve --port 4300 --disable-host-check",
"start:admin": "nx run admin:serve --port 4300 --disable-host-check",
- "start:demo": "nx run demo:serve --port 4320 --disable-host-check",
+ "start:demo": "nx run demo:serve --port 4500 --disable-host-check",
"start:debug": "nx run alfa:serve --port 4300 --disable-host-check --verbose",
"start-for-screenreader": "nx run alfa:serve --host 192.168.178.20 --port 4300 --disable-host-check --verbose",
"start:devbe": "nx run alfa:serve --port 4300 --disable-host-check --proxy-config proxy.dev.conf.json --verbose",