diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index 8009739c2934cd61ec93d83f5e252e0ee4fcbe7f..a7c87ba43efe92cefa2d6d772ea7c7ccc2cfb81a 100644
--- a/alfa-client/apps/demo/src/app/app.component.html
+++ b/alfa-client/apps/demo/src/app/app.component.html
@@ -45,164 +45,48 @@
</app-custom-stepper>
<hr />
<div class="flex flex-col gap-4 bg-background-200 p-6">
- <div>
- <button
- type="button"
- class="inline-flex items-center justify-center gap-4 whitespace-nowrap rounded-md bg-background-50 py-3 pl-6 pr-6 text-text hover:bg-background-100 focus:outline-none focus:ring-2 focus:ring-primary"
+ <div class="mt-4">
+ <ods-button class="w-72" [isLoading]="false">
+ <ods-icon icon name="file-generate" class="size-10 fill-primary" />
+ <ods-spinner spinner class="size-10" />
+ <p text class="text-center">Bescheid-Dokument<br />automatisch erstellen</p></ods-button
>
- <svg
- aria-hidden="true"
- role="status"
- class="inline h-10 w-8 animate-spin text-gray-200 dark:text-gray-600"
- viewBox="0 0 100 101"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
- fill="currentColor"
- />
- <path
- d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
- fill="#1C64F2"
- />
- </svg>
- <svg
- width="32"
- height="40"
- viewBox="0 0 32 40"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <g opacity="0.92" clip-path="url(#clip0_559_44467)">
- <g clip-path="url(#clip1_559_44467)">
- <path
- d="M32 12L20 0H4C1.8 0 0.0200005 1.8 0.0200005 4L0 36C0 38.2 1.78 40 3.98 40H28C30.2 40 32 38.2 32 36V12ZM28 36H4V4H18V14H28V36Z"
- fill="#D8625A"
- />
- <path
- d="M18.2731 2.85965H2.85642V37.1454H29.285V13.5739H18.2731V2.85965Z"
- fill="#D8625A"
- />
- <circle
- cx="16"
- cy="20"
- r="11.5"
- stroke="white"
- stroke-opacity="0.3"
- stroke-width="3"
- />
- <path
- d="M25.9412 25.7817C24.9203 27.5369 23.453 28.9905 21.6884 29.9948C19.9237 30.9991 17.9246 31.5183 15.8943 31.4995C13.864 31.4808 11.8748 30.9249 10.1289 29.8883"
- stroke="white"
- stroke-width="3"
- stroke-linecap="round"
- />
- <path
- d="M5.47803 17.5171L3.35107 24H1.6377L4.54346 16.1797H5.63379L5.47803 17.5171ZM7.24512 24L5.11279 17.5171L4.94092 16.1797H6.04199L8.96387 24H7.24512ZM7.14844 21.0889V22.3511H3.01807V21.0889H7.14844ZM13.9106 16.1797H15.5166V21.3467C15.5166 21.9482 15.3877 22.4549 15.1299 22.8667C14.8757 23.2785 14.5229 23.5882 14.0718 23.7959C13.6242 24.0036 13.1086 24.1074 12.5249 24.1074C11.9412 24.1074 11.422 24.0036 10.9673 23.7959C10.5161 23.5882 10.1616 23.2785 9.90381 22.8667C9.64958 22.4549 9.52246 21.9482 9.52246 21.3467V16.1797H11.1338V21.3467C11.1338 21.6976 11.1893 21.984 11.3003 22.2061C11.4113 22.4281 11.5706 22.591 11.7783 22.6948C11.9896 22.7987 12.2384 22.8506 12.5249 22.8506C12.8185 22.8506 13.0674 22.7987 13.2715 22.6948C13.4792 22.591 13.6367 22.4281 13.7441 22.2061C13.8551 21.984 13.9106 21.6976 13.9106 21.3467V16.1797ZM20.3398 16.1797V24H18.7339V16.1797H20.3398ZM22.7461 16.1797V17.4419H16.3652V16.1797H22.7461ZM29.938 19.9072V20.2778C29.938 20.8722 29.8574 21.4058 29.6963 21.8784C29.5352 22.3511 29.3078 22.7539 29.0142 23.0869C28.7205 23.4163 28.3696 23.6688 27.9614 23.8442C27.5568 24.0197 27.1074 24.1074 26.6133 24.1074C26.1227 24.1074 25.6733 24.0197 25.2651 23.8442C24.8605 23.6688 24.5096 23.4163 24.2124 23.0869C23.9152 22.7539 23.6842 22.3511 23.5195 21.8784C23.3584 21.4058 23.2778 20.8722 23.2778 20.2778V19.9072C23.2778 19.3092 23.3584 18.7757 23.5195 18.3066C23.6807 17.834 23.908 17.4312 24.2017 17.0981C24.4989 16.7651 24.8498 16.5109 25.2544 16.3354C25.6626 16.16 26.112 16.0723 26.6025 16.0723C27.0967 16.0723 27.5461 16.16 27.9507 16.3354C28.3589 16.5109 28.7098 16.7651 29.0034 17.0981C29.3006 17.4312 29.5298 17.834 29.6909 18.3066C29.8556 18.7757 29.938 19.3092 29.938 19.9072ZM28.3105 20.2778V19.8965C28.3105 19.4811 28.2729 19.1159 28.1978 18.8008C28.1226 18.4857 28.0116 18.2207 27.8647 18.0059C27.7179 17.791 27.5389 17.6299 27.3276 17.5225C27.1164 17.4115 26.8747 17.356 26.6025 17.356C26.3304 17.356 26.0887 17.4115 25.8774 17.5225C25.6698 17.6299 25.4925 17.791 25.3457 18.0059C25.2025 18.2207 25.0933 18.4857 25.0181 18.8008C24.9429 19.1159 24.9053 19.4811 24.9053 19.8965V20.2778C24.9053 20.6896 24.9429 21.0549 25.0181 21.3735C25.0933 21.6886 25.2043 21.9554 25.3511 22.1738C25.4979 22.3887 25.6769 22.5516 25.8882 22.6626C26.0994 22.7736 26.3411 22.8291 26.6133 22.8291C26.8854 22.8291 27.1271 22.7736 27.3384 22.6626C27.5496 22.5516 27.7269 22.3887 27.8701 22.1738C28.0133 21.9554 28.1226 21.6886 28.1978 21.3735C28.2729 21.0549 28.3105 20.6896 28.3105 20.2778Z"
- fill="white"
- />
- <path
- d="M10.0002 30.0222L11.2875 34.7947"
- stroke="#FEFEFE"
- stroke-width="3"
- stroke-linecap="round"
- />
- </g>
- </g>
- <defs>
- <clipPath id="clip0_559_44467">
- <rect width="32" height="40" fill="white" />
- </clipPath>
- <clipPath id="clip1_559_44467">
- <rect width="32" height="40" fill="white" />
- </clipPath>
- </defs>
- </svg>
- <div>Bescheid-Dokument<br />automatisch erstellen</div>
- </button>
</div>
- <div>
- <button
- type="button"
- class="inline-flex items-center justify-center gap-4 whitespace-nowrap rounded-md bg-background-50 py-3 pl-6 pr-6 text-text hover:bg-background-100 focus:outline-none focus:ring-2 focus:ring-primary"
+ <div class="mt-4">
+ <ods-button class="w-72" [isLoading]="true">
+ <ods-icon icon name="file-generate" class="size-10 fill-primary" />
+ <ods-spinner spinner class="size-10" />
+ <p text class="text-center">Bescheid-Dokument<br />automatisch erstellen</p></ods-button
>
- <svg
- width="32"
- height="40"
- viewBox="0 0 32 40"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <g opacity="0.92" clip-path="url(#clip0_559_44474)">
- <g clip-path="url(#clip1_559_44474)">
- <path
- d="M32 12L20 0H4C1.8 0 0.0200005 1.8 0.0200005 4L0 36C0 38.2 1.78 40 3.98 40H28C30.2 40 32 38.2 32 36V12ZM28 36H4V4H18V14H28V36Z"
- fill="#DB6F67"
- />
- <path
- d="M18.2731 2.85965H2.85642V37.1454H29.285V13.5739H18.2731V2.85965Z"
- fill="#DB6F67"
- />
- <mask
- id="mask0_559_44474"
- style="mask-type: alpha"
- maskUnits="userSpaceOnUse"
- x="4"
- y="8"
- width="24"
- height="24"
- >
- <rect x="4" y="8" width="24" height="24" fill="#D9D9D9" />
- </mask>
- <g mask="url(#mask0_559_44474)">
- <path
- d="M15 24V15.85L12.4 18.45L11 17L16 12L21 17L19.6 18.45L17 15.85V24H15ZM10 28C9.45 28 8.97917 27.8042 8.5875 27.4125C8.19583 27.0208 8 26.55 8 26V23H10V26H22V23H24V26C24 26.55 23.8042 27.0208 23.4125 27.4125C23.0208 27.8042 22.55 28 22 28H10Z"
- fill="#FEFEFE"
- />
- </g>
- </g>
- </g>
- <defs>
- <clipPath id="clip0_559_44474">
- <rect width="32" height="40" fill="white" />
- </clipPath>
- <clipPath id="clip1_559_44474">
- <rect width="32" height="40" fill="white" />
- </clipPath>
- </defs>
- </svg>
-
- <div>Bescheid-Dokument<br />hochladen</div>
- </button>
</div>
<div class="mt-4">
- <ods-file-upload-button class="w-72" [isLoading]="false" id="upload127">
+ <ods-file-upload-button class="w-72" [isLoading]="false" id="upload117">
<ods-icon icon name="file-upload" class="size-10 fill-primary" />
<ods-spinner spinner class="size-10" />
<p text class="text-center">Bescheid-Dokument<br />hochladen</p></ods-file-upload-button
>
</div>
<div class="mt-4">
- <ods-file-upload-button class="w-72" [isLoading]="true" id="upload128">
- <ods-icon icon name="file-upload" class="fill-pdf size-10" />
+ <ods-file-upload-button class="w-72" [isLoading]="true" id="upload117">
+ <ods-icon icon name="file-upload" class="size-10 fill-primary" />
<ods-spinner spinner class="size-10" />
<p text class="text-center">Bescheid-Dokument<br />hochladen</p></ods-file-upload-button
>
</div>
+
<div class="mt-4">
<ods-file-upload-button class="w-72" [isLoading]="false" id="upload129">
- <ods-icon icon name="file-upload" class="size-6 fill-primary" />
- <ods-spinner spinner class="size-6" />
- <p text class="text-center">Anhang hochladen</p></ods-file-upload-button
+ <ods-icon icon name="attachment" class="h-6 w-10 fill-primary" />
+ <ods-spinner spinner class="h-6 w-10" />
+ <div text class="text-center">Anhang hochladen</div></ods-file-upload-button
>
</div>
<div class="mt-4">
<ods-file-upload-button class="w-72" [isLoading]="true" id="upload130">
- <ods-icon icon name="attachment" class="size-6 fill-primary" />
- <ods-spinner spinner class="size-6" />
- <p text class="text-center">Anhang hochladen</p></ods-file-upload-button
+ <ods-icon icon name="attachment" class="h-6 w-10 fill-primary" />
+ <ods-spinner spinner class="h-6 w-10" />
+ <div text class="text-center">Anhang hochladen</div></ods-file-upload-button
>
</div>
</div>
diff --git a/alfa-client/apps/demo/src/app/app.component.ts b/alfa-client/apps/demo/src/app/app.component.ts
index dd187fd3b2515bebd221cb9d27f3fd1d03836684..e494a6e49f4778468e06d5098834f1284a57d2fe 100644
--- a/alfa-client/apps/demo/src/app/app.component.ts
+++ b/alfa-client/apps/demo/src/app/app.component.ts
@@ -5,6 +5,7 @@ import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import {
AttachmentComponent,
+ ButtonComponent,
FileUploadButtonComponent,
IconComponent,
RadioButtonCardComponent,
@@ -23,6 +24,7 @@ import { CustomStepperComponent } from './components/cdk-demo/custom-stepper.com
CommonModule,
AttachmentComponent,
TestbtnComponent,
+ ButtonComponent,
FileUploadButtonComponent,
RouterModule,
CdkStepperModule,
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index dd470191ab4869975f5bbd7d7e4c507bfd175f70..397a9c25ecaf0d0cf59b397abf064dc35b2165ee 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -1,6 +1,7 @@
export * from './lib/attachment/attachment.component';
-export * from './lib/testbtn/testbtn.component';
+export * from './lib/button/button.component';
export * from './lib/form/file-upload-button/file-upload-button.component';
export * from './lib/form/radio-button-card/radio-button-card.component';
-export * from './lib/spinner/spinner.component';
export * from './lib/icon/icon.component';
+export * from './lib/spinner/spinner.component';
+export * from './lib/testbtn/testbtn.component';
diff --git a/alfa-client/libs/design-system/src/lib/button/button.component.html b/alfa-client/libs/design-system/src/lib/button/button.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..623e97f8ca245b2b9db3d62a2544037348cb9659
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/button/button.component.html
@@ -0,0 +1,11 @@
+<button
+ type="button"
+ class="flex flex-grow items-center justify-center gap-4 whitespace-nowrap rounded-md bg-background-50 py-3 pl-6 pr-6 text-text hover:bg-background-100 focus:outline-none focus:ring-2 focus:ring-primary"
+ [disabled]="isLoading"
+>
+ <ng-content *ngIf="!isLoading" select="[icon]"></ng-content>
+ <ng-content *ngIf="isLoading" select="[spinner]"></ng-content>
+ <div class="flex-grow">
+ <ng-content select="[text]"></ng-content>
+ </div>
+</button>
diff --git a/alfa-client/libs/design-system/src/lib/button/button.component.spec.ts b/alfa-client/libs/design-system/src/lib/button/button.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f7a22bc77d11975354d23e99d1ab3b54c756911b
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/button/button.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+ let component: ButtonComponent;
+ let fixture: ComponentFixture<ButtonComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ButtonComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(ButtonComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/button/button.component.ts b/alfa-client/libs/design-system/src/lib/button/button.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6240c252d528d4013110ae53fc180b3ee5c45e9f
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/button/button.component.ts
@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { IconComponent, SpinnerComponent } from 'design-system';
+
+@Component({
+ selector: 'ods-button',
+ standalone: true,
+ imports: [CommonModule, SpinnerComponent, IconComponent],
+ styles: [':host {@apply inline-flex}'],
+ templateUrl: './button.component.html',
+})
+export class ButtonComponent {
+ @Input() text: string = '';
+ @Input() isLoading: boolean = false;
+}