OZG-5007 Bescheid Templates in demoapp

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>

alfa-client/apps/demo/src/app/app.component.ts

 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',
 })

alfa-client/apps/demo/src/app/components/bescheid-dialog/bescheid-dialog.component.html

+<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>

alfa-client/apps/demo/src/app/components/bescheid-dialog/bescheid-dialog.component.spec.ts

+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();
+  });
+});

alfa-client/apps/demo/src/app/components/bescheid-dialog/bescheid-dialog.component.ts

+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 {}

alfa-client/apps/demo/src/app/components/bescheid-paper/bescheid-paper.component.html

+<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>

alfa-client/apps/demo/src/app/components/bescheid-paper/bescheid-paper.component.spec.ts

+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();
+  });
+});

alfa-client/apps/demo/src/app/components/bescheid-paper/bescheid-paper.component.ts

+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 {}

alfa-client/apps/demo/src/app/components/bescheid-stepper/bescheid-stepper.component.html

+<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>

alfa-client/apps/demo/src/app/components/bescheid-stepper/bescheid-stepper.component.spec.ts

+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();
+  });
+});

alfa-client/apps/demo/src/app/components/bescheid-stepper/bescheid-stepper.component.ts

+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 {}

alfa-client/apps/demo/src/app/components/cdk-demo/custom-stepper.component.html

+<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>

alfa-client/apps/demo/src/app/components/cdk-demo/custom-stepper.component.ts

+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;
+  }
+}

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 {}

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",