diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index 9612d07c43e6d89c238b6821fdf7d79d6852fd41..6d1c5f3dea02cfb0f39f1a77e340b382095fa2f1 100644
--- a/alfa-client/apps/demo/src/app/app.component.html
+++ b/alfa-client/apps/demo/src/app/app.component.html
@@ -16,14 +16,46 @@
<main class="flex-auto bg-background-50 p-6">
<form id="antrag_bescheiden_form" [formGroup]="exampleForm">
<div class="my-10 flex gap-8">
- <ods-radio-button-card label="bewilligt" name="exampleName" value="bewilligt">
+ <ods-radio-button-card
+ label="bewilligt"
+ name="exampleName"
+ value="bewilligt"
+ variant="bescheid_bewilligt"
+ >
<ods-icon name="stamp" fillColor="green" size="30" />
</ods-radio-button-card>
- <ods-radio-button-card label="abgelehnt" name="exampleName" value="abgelehnt">
+ <ods-radio-button-card
+ label="abgelehnt"
+ name="exampleName"
+ value="abgelehnt"
+ variant="bescheid_abgelehnt"
+ >
<ods-icon name="close" fillColor="red" size="30" />
</ods-radio-button-card>
</div>
</form>
+ <form id="antrag_bescheiden_form" [formGroup]="saveForm" class="w-96 bg-gray-200 p-10">
+ <div class="flex flex-col gap-3">
+ <ods-radio-button-card
+ label="Als neue Nachricht an den Antragsteller senden"
+ name="saveForm"
+ value="send"
+ variant="bescheid_save"
+ [fullWidthText]="true"
+ >
+ <ods-icon name="send" fillColor="#1976D2" size="30" />
+ </ods-radio-button-card>
+ <ods-radio-button-card
+ label="Nur speichern"
+ name="saveForm"
+ value="save"
+ variant="bescheid_save"
+ [fullWidthText]="true"
+ >
+ <ods-icon name="save" fillColor="#1976D2" size="30" />
+ </ods-radio-button-card>
+ </div>
+ </form>
<app-bescheid-dialog-button></app-bescheid-dialog-button>
<ozgdesign-testbtn />
<div class="text-warning">Achtung</div>
diff --git a/alfa-client/apps/demo/src/app/app.component.ts b/alfa-client/apps/demo/src/app/app.component.ts
index 08334251fefb523ab0868d6f23cd1a9eefd6c5d3..e5ac1c986daaa155d4dbfd2a46a85fbfa428aa1d 100644
--- a/alfa-client/apps/demo/src/app/app.component.ts
+++ b/alfa-client/apps/demo/src/app/app.component.ts
@@ -53,6 +53,10 @@ export class AppComponent {
exampleName: new FormControl('bewilligt'),
});
+ saveForm = new FormGroup({
+ saveForm: new FormControl(),
+ });
+
onDownloadClick = () => window.alert('download clicked');
constructor() {
diff --git a/alfa-client/libs/binary-file/src/lib/binary-file.module.ts b/alfa-client/libs/binary-file/src/lib/binary-file.module.ts
index be19caa8ba5b144191d80ae8db1667e0313cc59c..8d28326a15b9737f9f3b719af7025ec85435a4d9 100644
--- a/alfa-client/libs/binary-file/src/lib/binary-file.module.ts
+++ b/alfa-client/libs/binary-file/src/lib/binary-file.module.ts
@@ -25,7 +25,12 @@ import { TechSharedModule } from '@alfa-client/tech-shared';
import { UiModule } from '@alfa-client/ui';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { AttachmentComponent, IconComponent, SpinnerIconComponent } from '@ods/system';
+import {
+ AttachmentComponent,
+ CloseIconComponent,
+ IconComponent,
+ SpinnerIconComponent,
+} from '@ods/system';
import { BinaryFileAttachmentContainerComponent } from './binary-file-attachment-container/binary-file-attachment-container.component';
import { BinaryFileContainerComponent } from './binary-file-container/binary-file-container.component';
import { BinaryFileComponent } from './binary-file-container/binary-file/binary-file.component';
@@ -42,6 +47,7 @@ import { VerticalBinaryFileListComponent } from './vertical-binary-file-list/ver
AttachmentComponent,
IconComponent,
SpinnerIconComponent,
+ CloseIconComponent,
],
declarations: [
BinaryFileAttachmentContainerComponent,
diff --git a/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html b/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html
index f484c27b7a8a943839d7fff846023d710b867f9a..70562f0769b299c82580cffae82137eb669a2976 100644
--- a/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html
+++ b/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html
@@ -18,6 +18,6 @@
title="Anhang löschen"
aria-label="Anhang löschen Button"
>
- <ods-icon name="close" size="14" fillColor="black" class="ml-3 w-6"></ods-icon>
+ <ods-close-icon class="w-4"></ods-close-icon>
</button>
</ods-attachment>
diff --git a/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.spec.ts b/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.spec.ts
index 7c00e9810420d0832b6bd7dff962ea512db3ca03..cfc82643b49b57a8251c25fcc30c1f42e35abb0a 100644
--- a/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.spec.ts
+++ b/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.spec.ts
@@ -3,7 +3,7 @@ import { BinaryFileLinkRel, BinaryFileResource } from '@alfa-client/binary-file-
import { SpinnerComponent } from '@alfa-client/ui';
import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { faker } from '@faker-js/faker';
-import { AttachmentComponent, IconComponent } from '@ods/system';
+import { AttachmentComponent, CloseIconComponent, IconComponent } from '@ods/system';
import { createBinaryFileResource } from 'libs/binary-file-shared/test/binary-file';
import { FileSizePlainPipe } from 'libs/tech-shared/src/lib/pipe/file-size-plain.pipe';
import { MockComponent, MockPipe } from 'ng-mocks';
@@ -22,6 +22,7 @@ describe('BinaryFile2Component', () => {
MockComponent(AttachmentComponent),
MockComponent(IconComponent),
MockComponent(SpinnerComponent),
+ MockComponent(CloseIconComponent),
MockPipe(FileSizePlainPipe),
],
});
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index 57870264b3e8f2853e5fa24cd9da2962e0207902..8ee91e0f46939944a35f756ca2534fd7816207a4 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -5,5 +5,6 @@ export * from './lib/form/radio-button-card/radio-button-card.component';
export * from './lib/icon/icon.component';
export * from './lib/icons/bescheid-generate-icon/bescheid-generate-icon.component';
export * from './lib/icons/bescheid-upload-icon/bescheid-upload-icon.component';
+export * from './lib/icons/close-icon/close-icon.component';
export * from './lib/icons/spinner-icon/spinner-icon.component';
export * from './lib/testbtn/testbtn.component';
diff --git a/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.html b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.html
index 1c28478ef8810c8ce19b73c2ebfab7088a2e1580..614d5245cc1cfaddec4bb130adb2992e12cd7825 100644
--- a/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.html
+++ b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.html
@@ -1,16 +1,18 @@
-<input
- type="radio"
- class="peer hidden"
- id="{{ name }}_{{ value }}"
- name="{{ name }}"
- formControlName="{{ name }}"
- value="{{ value }}"
-/>
-<label
- for="{{ name }}_{{ value }}"
- class="flex flex-1 cursor-pointer select-none justify-center gap-2 rounded-lg border border-background bg-mainbg px-12 py-5 text-center align-middle text-base peer-checked:font-semibold"
- [ngClass]="'peer-checked:border-primary peer-checked:bg-background-100'"
->
- <ng-content />
- <span>{{ label }}</span>
-</label>
+<div class="flex h-full flex-1">
+ <input
+ type="radio"
+ class="peer hidden"
+ id="{{ name }}_{{ value }}"
+ name="{{ name }}"
+ formControlName="{{ name }}"
+ value="{{ value }}"
+ />
+ <label
+ for="{{ name }}_{{ value }}"
+ [ngClass]="getClass(variant)"
+ class="flex flex-1 cursor-pointer select-none items-center justify-center gap-2 rounded-lg text-center text-base"
+ >
+ <ng-content />
+ <p class="h-fit" [ngClass]="{ 'w-full': fullWidthText }">{{ label }}</p>
+ </label>
+</div>
diff --git a/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.ts b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.ts
index 127a8e3858052675a49739b51806b7da762c5a9e..964133f651d0ac1fc0c21fe7fff08bc10ed33523 100644
--- a/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.ts
+++ b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.ts
@@ -1,6 +1,6 @@
-import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
-import { FormGroupDirective, ControlContainer, ReactiveFormsModule } from '@angular/forms';
+import { Component, Input } from '@angular/core';
+import { ControlContainer, FormGroupDirective, ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'ods-radio-button-card',
@@ -13,4 +13,19 @@ export class RadioButtonCardComponent {
@Input() label!: string;
@Input() name!: string;
@Input() value!: string;
+ @Input() variant: string = '';
+ @Input() fullWidthText: boolean = false;
+
+ getClass(variant: string): string {
+ switch (variant) {
+ case 'bescheid_bewilligt':
+ return 'peer-checked:border-bewilligt peer-checked:bg-bewilligt-100 border border-ozggray-700 bg-mainbg peer-checked:font-semibold peer-checked:shadow px-9 py-4';
+ case 'bescheid_abgelehnt':
+ return 'peer-checked:border-abgelehnt peer-checked:bg-abgelehnt-100 border border-ozggray-700 bg-mainbg peer-checked:font-semibold peer-checked:shadow px-9 py-4';
+ case 'bescheid_save':
+ return 'border-3 border-mainbg peer-checked:border-ozgblue-650 bg-mainbg px-6 py-2';
+ default:
+ return '';
+ }
+ }
}
diff --git a/alfa-client/libs/design-system/src/lib/icon/icon.component.html b/alfa-client/libs/design-system/src/lib/icon/icon.component.html
index 620b50bea95bedfc130be7fd80ca453c0866309b..42994adc83ee03422a0ec7111dfcd33cb252a9bb 100644
--- a/alfa-client/libs/design-system/src/lib/icon/icon.component.html
+++ b/alfa-client/libs/design-system/src/lib/icon/icon.component.html
@@ -2,22 +2,21 @@
<!-- Close icon -->
<svg
*ngSwitchCase="'close'"
- [attr.width]="size"
- [attr.height]="size"
+ class="size-full fill-none"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
- [attr.fill]="fillColor"
+ class="fill-abgelehnt"
/>
</svg>
+
<!-- Download icon -->
<svg
*ngSwitchCase="'download'"
- [attr.width]="size"
- [attr.height]="size"
+ class="size-full fill-none"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@@ -39,41 +38,37 @@
d="M15.874 17c0 2.08-.73 3.85-2.19 5.31-1.46 1.46-3.23 2.19-5.31 2.19-2.08 0-3.85-.73-5.31-2.19C1.604 20.85.874 19.08.874 17V5.9c0-1.5.525-2.775 1.575-3.825C3.499 1.025 4.774.5 6.274.5s2.775.525 3.825 1.575c1.05 1.05 1.575 2.325 1.575 3.825v10.5c0 .92-.32 1.7-.96 2.34-.64.64-1.42.96-2.34.96-.92 0-1.7-.32-2.34-.96-.64-.64-.96-1.42-.96-2.34V5.3h2.4v11.1c0 .26.085.475.255.645.17.17.385.255.645.255s.475-.085.645-.255a.874.874 0 0 0 .255-.645V5.9c-.02-.84-.315-1.55-.885-2.13-.57-.58-1.275-.87-2.115-.87-.84 0-1.55.29-2.13.87-.58.58-.87 1.29-.87 2.13V17c-.02 1.42.47 2.625 1.47 3.615 1 .99 2.21 1.485 3.63 1.485 1.4 0 2.59-.495 3.57-1.485.98-.99 1.49-2.195 1.53-3.615V5.3h2.4V17Z"
/>
</svg>
- <!-- /Attachment icon -->
<!-- Send icon -->
<svg
*ngSwitchCase="'send'"
- [attr.width]="size"
- [attr.height]="size"
+ class="size-full fill-none"
viewBox="0 0 26 22"
- fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 21.6693V0.335938L25.3333 11.0026L0 21.6693ZM2.66667 17.6693L18.4667 11.0026L2.66667 4.33594V9.0026L10.6667 11.0026L2.66667 13.0026V17.6693Z"
- [attr.fill]="fillColor"
+ class="fill-ozgblue-750"
/>
</svg>
+
<!-- Save icon -->
<svg
*ngSwitchCase="'save'"
- [attr.width]="size"
- [attr.height]="size"
+ class="size-full fill-none"
viewBox="0 0 32 32"
- fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M25.3333 16V25.3333H6.66667V16H4V25.3333C4 26.8 5.2 28 6.66667 28H25.3333C26.8 28 28 26.8 28 25.3333V16H25.3333ZM17.3333 16.8933L20.7867 13.4533L22.6667 15.3333L16 22L9.33333 15.3333L11.2133 13.4533L14.6667 16.8933V4H17.3333V16.8933Z"
- [attr.fill]="fillColor"
+ class="fill-ozgblue-750"
/>
</svg>
+
<!-- Stamp icon -->
<svg
*ngSwitchCase="'stamp'"
- [attr.width]="size"
- [attr.height]="size"
+ class="size-full fill-none"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@@ -82,12 +77,14 @@
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.42745 26.5162H2.9162C2.77054 26.5191 2.62579 26.4927 2.49052 26.4386C2.35525 26.3844 2.23222 26.3037 2.1287 26.2012C2.02586 26.0976 1.94487 25.9744 1.89055 25.8389C1.83622 25.7034 1.80967 25.5584 1.81245 25.4125V21.2462C1.81476 20.4015 2.15133 19.5921 2.7486 18.9949C3.34587 18.3976 4.15529 18.061 4.99995 18.0587H10.8337C11.0932 18.0577 11.3418 17.9541 11.5251 17.7705C11.7085 17.5869 11.8118 17.3382 11.8125 17.0787V16.6212C11.8125 14.3425 11.27 12.2187 10.1687 10.4875C9.60054 9.59394 9.30316 8.55505 9.31245 7.49622C9.31245 5.88247 10.0262 4.31622 11.2012 3.28122C11.8001 2.73945 12.5078 2.33193 13.277 2.08595C14.0462 1.83998 14.8591 1.76122 15.6612 1.85497C18.1737 2.13872 20.2587 4.13372 20.6387 6.60747C20.8288 7.88489 20.5975 9.18946 19.98 10.3237L19.965 10.35C18.7837 12.3175 18.1875 14.3637 18.1875 16.3712V17.0787C18.1875 17.6175 18.6287 18.0587 19.1662 18.0587H25C25.8446 18.061 26.654 18.3976 27.2513 18.9949C27.8486 19.5921 28.1851 20.4015 28.1875 21.2462V25.4125C28.1902 25.5584 28.1637 25.7034 28.1094 25.8389C28.055 25.9744 27.9741 26.0976 27.8712 26.2012C27.7677 26.3037 27.6447 26.3844 27.5094 26.4386C27.3741 26.4927 27.2294 26.5191 27.0837 26.5162H27.0012C26.7097 27.0216 26.2906 27.4416 25.7859 27.7343C25.2811 28.0269 24.7084 28.1819 24.125 28.1837H6.2912C5.70927 28.1827 5.13793 28.028 4.63504 27.7352C4.13215 27.4423 3.71556 27.0218 3.42745 26.5162ZM25.9787 24.3087V21.2462C25.978 20.9867 25.8748 20.738 25.6914 20.5544C25.508 20.3708 25.2594 20.2672 25 20.2662H19.1662C18.3215 20.2639 17.5121 19.9273 16.9149 19.3301C16.3176 18.7328 15.981 17.9234 15.9787 17.0787V16.3712C15.9787 13.965 16.6725 11.6 18.0225 9.24747C18.4062 8.54997 18.5875 7.74872 18.4462 6.93997C18.2037 5.44497 16.9525 4.22747 15.4287 4.05497C14.5655 3.95832 13.6972 4.18598 12.9925 4.69372L12.685 4.94497C11.9275 5.56497 11.5212 6.53122 11.5212 7.49622C11.5212 8.15747 11.6937 8.78372 12.0437 9.34372C13.315 11.4037 14.0212 13.9025 14.0212 16.6212V17.0787C14.0189 17.9234 13.6823 18.7328 13.0851 19.3301C12.4878 19.9273 11.6784 20.2639 10.8337 20.2662H4.99995C4.74046 20.2672 4.4919 20.3708 4.30853 20.5544C4.12515 20.738 4.02186 20.9867 4.0212 21.2462V24.3087H25.9787Z"
- [attr.fill]="fillColor"
+ class="fill-bewilligt"
/>
</svg>
+
<!-- File icon -->
<svg
*ngIf="name?.startsWith('file')"
+ class="size-full fill-none"
viewBox="0 0 32 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
diff --git a/alfa-client/libs/design-system/src/lib/icons/close-icon/close-icon.component.html b/alfa-client/libs/design-system/src/lib/icons/close-icon/close-icon.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..61985415b8490586c6af1fb91df3a18f32af22e8
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/close-icon/close-icon.component.html
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+ <path
+ fill="currentColor"
+ d="M14 1.41 12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7 14 1.41Z"
+ />
+</svg>
diff --git a/alfa-client/libs/design-system/src/lib/icons/close-icon/close-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/close-icon/close-icon.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bec6b70fd0cf50a48bf797596d5b1555b534ddd1
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/close-icon/close-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CloseIconComponent } from './close-icon.component';
+
+describe('CloseIconComponent', () => {
+ let component: CloseIconComponent;
+ let fixture: ComponentFixture<CloseIconComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [CloseIconComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(CloseIconComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/close-icon/close-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/close-icon/close-icon.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..28b8e3f3143deed4d6d5eef3856426b6be3cfb15
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/close-icon/close-icon.component.ts
@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'ods-close-icon',
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './close-icon.component.html',
+})
+export class CloseIconComponent {}
diff --git a/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js b/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
index 52c2c0698caedde5a831a2dae2d7aaa1e015fa99..5d94c9ea129aae379c1821775868913301845807 100644
--- a/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
+++ b/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
@@ -42,6 +42,7 @@ module.exports = {
400: 'hsl(199, 100%, 64%)',
500: 'hsl(204, 100%, 56%)',
600: 'hsl(209, 100%, 51%)',
+ 650: 'hsl(210, 79%, 46%)',
700: 'hsl(213, 100%, 48%)',
750: 'hsl(212, 80%, 42%)',
800: 'hsl(215, 92%, 40%)',
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result-status/vorgang-detail-bescheiden-result-status.component.html b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result-status/vorgang-detail-bescheiden-result-status.component.html
index 84828c9c8c7c8d839a9f058052f29bcc2aceabde..a7f2e5387aedaa1dd9183aa0a39a4d516deefcb5 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result-status/vorgang-detail-bescheiden-result-status.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result-status/vorgang-detail-bescheiden-result-status.component.html
@@ -1,4 +1,4 @@
-<p class="flex text-text">
+<p class="flex text-base font-bold text-text">
<span class="flex items-center gap-2" *ngIf="bescheid.bewilligt"
><mat-icon svgIcon="stamp" class="text-bewilligt"></mat-icon>Bewilligt am
{{ bescheid.beschiedenAm | date: 'dd.MM.yyyy' }}
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result.component.html b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result.component.html
index 73a4f5ecf28582a26586bed9eb2f36928ad14635..bee8c2f986198851575179003c6878828a99b2e6 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result.component.html
@@ -1,85 +1,90 @@
<section
- class="w-full overflow-auto rounded-xl bg-background-100"
+ class="flex w-full flex-col justify-between overflow-auto rounded-xl bg-background-100 p-4"
*ngIf="{
activeStep: activeStep$ | async,
sendByManual: sendByManual$ | async,
isPostfachConfigured: isPostfachConfigured$ | async
} as wizardData"
>
- <div class="p-4 text-base font-bold text-primary-600">Bescheid</div>
- <div class="p-4" data-test-id="bescheid-status-text">
- <alfa-vorgang-detail-bescheiden-result-status
- *ngIf="
- wizardData.activeStep === 1 || (wizardData.activeStep === 3 && wizardData.sendByManual)
- "
- data-test-id="bescheid-status"
- [bescheid]="bescheid$ | async"
- ></alfa-vorgang-detail-bescheiden-result-status>
- </div>
+ <div class="flex-1">
+ <div class="p-4 text-base font-bold text-primary-600">Bescheid</div>
+ <div class="p-4" data-test-id="bescheid-status-text">
+ <alfa-vorgang-detail-bescheiden-result-status
+ *ngIf="
+ wizardData.activeStep === 1 || (wizardData.activeStep === 3 && wizardData.sendByManual)
+ "
+ data-test-id="bescheid-status"
+ [bescheid]="bescheid$ | async"
+ ></alfa-vorgang-detail-bescheiden-result-status>
+ </div>
- <div class="p-4">
- <alfa-vorgang-detail-bescheiden-result-nachricht
- *ngIf="
- !wizardData.sendByManual && wizardData.activeStep === 3 && wizardData.isPostfachConfigured
- "
- [bescheidDocumentStateResource]="bescheidDocument$ | async"
- data-test-id="bescheid-nachricht-an-antragsteller"
- ></alfa-vorgang-detail-bescheiden-result-nachricht>
- </div>
+ <div class="p-4">
+ <alfa-vorgang-detail-bescheiden-result-nachricht
+ *ngIf="
+ !wizardData.sendByManual && wizardData.activeStep === 3 && wizardData.isPostfachConfigured
+ "
+ [bescheidDocumentStateResource]="bescheidDocument$ | async"
+ data-test-id="bescheid-nachricht-an-antragsteller"
+ ></alfa-vorgang-detail-bescheiden-result-nachricht>
+ </div>
- <div class="p-4" data-test-id="bescheid-status-dokument">
- <alfa-vorgang-detail-bescheiden-result-dokument
- *ngIf="
- wizardData.activeStep === 2 ||
- (wizardData.activeStep === 3 &&
- (wizardData.sendByManual || wizardData.isPostfachConfigured))
- "
- data-test-id="bescheid-document"
- [bescheidDraftStateResource]="bescheidDraftStateResource$ | async"
- [uploadBescheidDocumentInProgress]="uploadBescheidDocumentInProgress$ | async"
- [createBescheidDocumentInProgress]="createBescheidDocumentInProgress$ | async"
- [bescheidDocumentFile]="bescheidDocumentFile$ | async"
- (deleteFile)="deleteBescheidDocument()"
- ></alfa-vorgang-detail-bescheiden-result-dokument>
- </div>
+ <div class="p-4" data-test-id="bescheid-status-dokument">
+ <alfa-vorgang-detail-bescheiden-result-dokument
+ *ngIf="
+ wizardData.activeStep === 2 ||
+ (wizardData.activeStep === 3 &&
+ (wizardData.sendByManual || wizardData.isPostfachConfigured))
+ "
+ data-test-id="bescheid-document"
+ [bescheidDraftStateResource]="bescheidDraftStateResource$ | async"
+ [uploadBescheidDocumentInProgress]="uploadBescheidDocumentInProgress$ | async"
+ [createBescheidDocumentInProgress]="createBescheidDocumentInProgress$ | async"
+ [bescheidDocumentFile]="bescheidDocumentFile$ | async"
+ (deleteFile)="deleteBescheidDocument()"
+ ></alfa-vorgang-detail-bescheiden-result-dokument>
+ </div>
- <div class="p-4" data-test-id="bescheid-status-attachments">
- <alfa-vorgang-detail-bescheiden-result-attachments
- *ngIf="
- wizardData.activeStep === 2 ||
- (wizardData.activeStep === 3 &&
- (wizardData.sendByManual || wizardData.isPostfachConfigured))
- "
- data-test-id="bescheid-attachments"
- ></alfa-vorgang-detail-bescheiden-result-attachments>
+ <div class="p-4" data-test-id="bescheid-status-attachments">
+ <alfa-vorgang-detail-bescheiden-result-attachments
+ *ngIf="
+ wizardData.activeStep === 2 ||
+ (wizardData.activeStep === 3 &&
+ (wizardData.sendByManual || wizardData.isPostfachConfigured))
+ "
+ data-test-id="bescheid-attachments"
+ ></alfa-vorgang-detail-bescheiden-result-attachments>
+ </div>
</div>
+ <div class="flex-none">
+ <div class="flex flex-col align-bottom">
+ <ng-container *ngIf="wizardData.sendByManual && wizardData.activeStep === 3">
+ <span>Der Bescheid muss manuell versendet werden.</span>
- <div *ngIf="wizardData.sendByManual && wizardData.activeStep === 3">
- <span>Der Bescheid muss manuell versendet werden.</span>
-
- <!-- REPLACEME: Durch UI/UX Componenten ersetzen -->
- <ng-container *ngIf="bescheidDraftStateResource$ | async as bescheidDraftStateResource">
- <ozgcloud-button-with-spinner
- data-test-id="save-and-send-button"
- [stateResource]="saveAndSendInProgress$ | async"
- text="Antrag bescheiden und speichern"
- (clickEmitter)="saveAndSendManually(bescheidDraftStateResource.resource)"
- ></ozgcloud-button-with-spinner>
- </ng-container>
- <!-- -->
+ <!-- REPLACEME: Durch UI/UX Componenten ersetzen -->
+ <ng-container *ngIf="bescheidDraftStateResource$ | async as bescheidDraftStateResource">
+ <ozgcloud-button-with-spinner
+ data-test-id="save-and-send-button"
+ [stateResource]="saveAndSendInProgress$ | async"
+ text="Antrag bescheiden und speichern"
+ (clickEmitter)="saveAndSendManually(bescheidDraftStateResource.resource)"
+ ></ozgcloud-button-with-spinner>
+ </ng-container>
+ <!-- -->
+ </ng-container>
+ <ng-container
+ *ngIf="
+ wizardData.activeStep === 3 && !wizardData.sendByManual && wizardData.isPostfachConfigured
+ "
+ >
+ <ng-container *ngIf="bescheidDraftStateResource$ | async as bescheidDraftStateResource">
+ <ozgcloud-button-with-spinner
+ data-test-id="send-button"
+ [stateResource]="saveAndSendInProgress$ | async"
+ text="Bescheid senden"
+ (clickEmitter)="saveAndSendWithNachricht(bescheidDraftStateResource.resource)"
+ ></ozgcloud-button-with-spinner>
+ </ng-container>
+ </ng-container>
+ </div>
</div>
- <ng-container
- *ngIf="
- wizardData.activeStep === 3 && !wizardData.sendByManual && wizardData.isPostfachConfigured
- "
- >
- <ng-container *ngIf="bescheidDraftStateResource$ | async as bescheidDraftStateResource">
- <ozgcloud-button-with-spinner
- data-test-id="send-button"
- [stateResource]="saveAndSendInProgress$ | async"
- text="Bescheid senden"
- (clickEmitter)="saveAndSendWithNachricht(bescheidDraftStateResource.resource)"
- ></ozgcloud-button-with-spinner>
- </ng-container>
- </ng-container>
</section>
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result.component.spec.ts b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result.component.spec.ts
index 22134382ba9806adda95c4d3bc65ba2950519dac..783cde37c75e06889c1a47f3e13686beb95a1849 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result.component.spec.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result.component.spec.ts
@@ -348,15 +348,6 @@ describe('VorgangDetailBescheidenResultComponent', () => {
notExistsAsHtmlElement(fixture, bescheidStatus);
});
-
- it('should NOT be visible on step 2', () => {
- component.sendByManual$ = of(true);
- component.activeStep$ = of(2);
-
- fixture.detectChanges();
-
- notExistsAsHtmlElement(fixture, bescheidStatus);
- });
});
describe('bescheid document', () => {
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-antrag-bescheiden/vorgang-detail-bescheiden-antrag-bescheiden.component.html b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-antrag-bescheiden/vorgang-detail-bescheiden-antrag-bescheiden.component.html
index 7cd1baa50b2790bf28be3e336808b4ff9510566c..720ef2d268463c3bb7aa13d95d49a7cb4f23714d 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-antrag-bescheiden/vorgang-detail-bescheiden-antrag-bescheiden.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-antrag-bescheiden/vorgang-detail-bescheiden-antrag-bescheiden.component.html
@@ -5,15 +5,17 @@
[name]="formServiceClass.FIELD_BEWILLIGT"
value="true"
data-test-id="button-bewilligt"
- ><mat-icon svgIcon="stamp" class="text-bewilligt"></mat-icon
- ></ods-radio-button-card>
+ variant="bescheid_bewilligt"
+ ><ods-icon name="stamp" class="h-7 w-7"></ods-icon>
+ </ods-radio-button-card>
<ods-radio-button-card
label="abgelehnt"
[name]="formServiceClass.FIELD_BEWILLIGT"
value="false"
data-test-id="button-abgelehnt"
- ><mat-icon class="text-abgelehnt">close</mat-icon></ods-radio-button-card
- >
+ variant="bescheid_abgelehnt"
+ ><ods-icon name="close" class="h-6 w-6"></ods-icon>
+ </ods-radio-button-card>
</div>
<div class="flex w-full">
<ozgcloud-date-editor [formControlName]="formServiceClass.FIELD_BESCHIEDEN_AM" label="am">
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-antrag-bescheiden/vorgang-detail-bescheiden-antrag-bescheiden.component.spec.ts b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-antrag-bescheiden/vorgang-detail-bescheiden-antrag-bescheiden.component.spec.ts
index 1064a19c8793c209e0237532d4ef98dcdd9c2947..99eef01ffafb1d700f41fd18a10436253c2de367 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-antrag-bescheiden/vorgang-detail-bescheiden-antrag-bescheiden.component.spec.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-antrag-bescheiden/vorgang-detail-bescheiden-antrag-bescheiden.component.spec.ts
@@ -3,8 +3,7 @@ import { Mock, mock, useFromMock } from '@alfa-client/test-utils';
import { DateEditorComponent } from '@alfa-client/ui';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
-import { MatIcon } from '@angular/material/icon';
-import { RadioButtonCardComponent } from '@ods/system';
+import { IconComponent, RadioButtonCardComponent } from '@ods/system';
import { MockComponent } from 'ng-mocks';
import { BescheidenFormService } from '../../../bescheiden.formservice';
import { VorgangDetailBescheidenAntragBescheidenComponent } from './vorgang-detail-bescheiden-antrag-bescheiden.component';
@@ -22,10 +21,9 @@ describe('VorgangDetailBescheidenAntragBescheidenComponent', () => {
await TestBed.configureTestingModule({
declarations: [
VorgangDetailBescheidenAntragBescheidenComponent,
- MatIcon,
MockComponent(RadioButtonCardComponent),
MockComponent(DateEditorComponent),
- MockComponent(MatIcon),
+ MockComponent(IconComponent),
],
imports: [ReactiveFormsModule],
providers: [
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-bescheid-versenden/vorgang-detail-bescheiden-bescheid-versenden.component.html b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-bescheid-versenden/vorgang-detail-bescheiden-bescheid-versenden.component.html
index 723dcbc08956b497fc04c7ad311add61d7ee388a..f7d76bf601ae74ba05be5eddefcdd5dfc621bc0c 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-bescheid-versenden/vorgang-detail-bescheiden-bescheid-versenden.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-bescheid-versenden/vorgang-detail-bescheiden-bescheid-versenden.component.html
@@ -1,16 +1,18 @@
-<!-- TODO "send" icon als svgIcon bereitstellen -->
-<div [formGroup]="formService.form" style="display: flex; flex-direction: column">
+<div [formGroup]="formService.form" class="mt-5 flex w-72 flex-col gap-4">
<ods-radio-button-card
label="Als neue Nachricht an den Antragsteller senden"
[value]="sendBy.NACHRICHT"
[name]="formServiceClass.FIELD_SEND_BY"
- ><mat-icon>send</mat-icon></ods-radio-button-card
- >
- <!-- TODO "save_alt" icon als svgIcon bereitstellen -->
+ variant="bescheid_save"
+ [fullWidthText]="true"
+ ><ods-icon name="send" class="size-8"></ods-icon
+ ></ods-radio-button-card>
<ods-radio-button-card
label="Nur speichern"
[value]="sendBy.MANUAL"
[name]="formServiceClass.FIELD_SEND_BY"
- ><mat-icon>save_alt</mat-icon></ods-radio-button-card
- >
+ variant="bescheid_save"
+ [fullWidthText]="true"
+ ><ods-icon name="save" class="size-9"></ods-icon
+ ></ods-radio-button-card>
</div>
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden.component.html b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden.component.html
index 83db1a056e348370e7c05df4c065dcf26a52c9f6..6f54c26c24ee56d1caeda53f743fc2d166ab8ad2 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden.component.html
@@ -13,12 +13,12 @@
<alfa-vorgang-detail-bescheiden-abbrechen-button></alfa-vorgang-detail-bescheiden-abbrechen-button>
<form [formGroup]="formService.form" class="flex h-full flex-row gap-11">
<alfa-vorgang-detail-bescheiden-steps
- class="flex w-2/3"
+ class="flex w-1/2"
></alfa-vorgang-detail-bescheiden-steps>
<alfa-vorgang-detail-bescheiden-result
data-test-id="bescheiden-result"
(closeDialog)="onClose()"
- class="flex w-1/3"
+ class="flex w-1/2"
></alfa-vorgang-detail-bescheiden-result>
</form>
</div>