diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index 4a44b0f2d64b9a90ab09d90f8733c7f5140fdf89..1ae5b075b44149c944beab187330af12675cde14 100644
--- a/alfa-client/apps/demo/src/app/app.component.html
+++ b/alfa-client/apps/demo/src/app/app.component.html
@@ -14,6 +14,30 @@
<nav>NAV</nav>
</div>
<main class="flex-auto bg-background-50 p-6">
+ <form id="antrag_bescheiden_form" [formGroup]="exampleForm">
+ <div class="my-10 flex gap-8">
+ <ozgdesign-radio-button-card
+ label="bewilligt"
+ name="exampleName"
+ value="bewilligt"
+ backgroudColorChecked="bg-bewilligt-100"
+ borderColorChecked="border-bewilligt"
+ ><div>
+ <!--<mat-icon svgIcon="stamp" class="text-bewilligt"></mat-icon>-->ICON
+ </div></ozgdesign-radio-button-card
+ >
+ <ozgdesign-radio-button-card
+ label="abgelehnt"
+ name="exampleName"
+ value="abgelehnt"
+ backgroudColorChecked="bg-abgelehnt-100"
+ borderColorChecked="border-abgelehnt"
+ ><div>
+ <!--<mat-icon class="text-abgelehnt">close</mat-icon>-->ICON
+ </div></ozgdesign-radio-button-card
+ >
+ </div>
+ </form>
<app-bescheid-dialog-button></app-bescheid-dialog-button>
<ozg-testbtn />
<div class="text-warning">Achtung</div>
@@ -33,6 +57,7 @@
<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 76c526c664faa81d33f695239afbc5536873b164..a03f6b9b4a247169cedde22f993346edb3512c74 100644
--- a/alfa-client/apps/demo/src/app/app.component.ts
+++ b/alfa-client/apps/demo/src/app/app.component.ts
@@ -2,11 +2,13 @@ import { Component, HostBinding, effect, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { CdkStepperModule } from '@angular/cdk/stepper';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { TestbtnComponent } from 'design-system';
import { CustomStepperComponent } from './components/cdk-demo/custom-stepper.component';
import { BescheidStepperComponent } from './components/bescheid-stepper/bescheid-stepper.component';
import { BescheidDialogExampleComponent } from './components/bescheid-dialog/bescheid-dialog.component';
import { BescheidPaperComponent } from './components/bescheid-paper/bescheid-paper.component';
+import { RadioButtonCardComponent } from 'design-system';
@Component({
standalone: true,
@@ -19,6 +21,8 @@ import { BescheidPaperComponent } from './components/bescheid-paper/bescheid-pap
BescheidDialogExampleComponent,
BescheidStepperComponent,
BescheidPaperComponent,
+ RadioButtonCardComponent,
+ ReactiveFormsModule,
],
selector: 'app-root',
templateUrl: './app.component.html',
@@ -32,6 +36,10 @@ export class AppComponent {
return this.darkMode();
}
+ exampleForm = new FormGroup({
+ exampleName: new FormControl('bewilligt'),
+ });
+
constructor() {
effect(() => {
window.localStorage.setItem('darkMode', JSON.stringify(this.darkMode()));
diff --git a/alfa-client/libs/design-system/.eslintrc.json b/alfa-client/libs/design-system/.eslintrc.json
index 971cfea2ae6cb70d991d4f6717f922aa618b8b28..b11b611dfdc2853e24d3eaab79cebb2dff3aa104 100644
--- a/alfa-client/libs/design-system/.eslintrc.json
+++ b/alfa-client/libs/design-system/.eslintrc.json
@@ -1,40 +1,40 @@
{
- "extends": ["../../.eslintrc.json"],
- "ignorePatterns": ["!**/*"],
- "overrides": [
- {
- "files": ["*.ts"],
- "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
- "rules": {
- "@angular-eslint/directive-selector": [
- "error",
- {
- "type": "attribute",
- "prefix": "lib",
- "style": "camelCase"
- }
- ],
- "@angular-eslint/component-selector": [
- "error",
- {
- "type": "element",
- "prefix": "lib",
- "style": "kebab-case"
- }
- ]
- }
- },
- {
- "files": ["*.html"],
- "extends": ["plugin:@nx/angular-template"],
- "rules": {}
- },
- {
- "files": ["*.json"],
- "parser": "jsonc-eslint-parser",
- "rules": {
- "@nx/dependency-checks": "error"
- }
- }
- ]
+ "extends": ["../../.eslintrc.json"],
+ "ignorePatterns": ["!**/*"],
+ "overrides": [
+ {
+ "files": ["*.ts"],
+ "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+ "rules": {
+ "@angular-eslint/directive-selector": [
+ "error",
+ {
+ "type": "attribute",
+ "prefix": "ozgdesign",
+ "style": "camelCase"
+ }
+ ],
+ "@angular-eslint/component-selector": [
+ "error",
+ {
+ "type": "element",
+ "prefix": "ozgdesign",
+ "style": "kebab-case"
+ }
+ ]
+ }
+ },
+ {
+ "files": ["*.html"],
+ "extends": ["plugin:@nx/angular-template"],
+ "rules": {}
+ },
+ {
+ "files": ["*.json"],
+ "parser": "jsonc-eslint-parser",
+ "rules": {
+ "@nx/dependency-checks": "error"
+ }
+ }
+ ]
}
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index a7ea040ebc047e27f7897fd015887082c925e1b3..e3a4f7b40031f15ab72cf97c1adcc7ca00eb5b46 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -1 +1,2 @@
export * from './lib/testbtn/testbtn.component';
+export * from './lib/form/radio-button-card/radio-button-card.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
new file mode 100644
index 0000000000000000000000000000000000000000..e2ab62432b8cee4e787f73c2e07826ba611873f2
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.html
@@ -0,0 +1,18 @@
+<input
+ #someInput
+ 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 bg-white px-12 py-5 text-center align-middle text-base peer-checked:font-semibold peer-checked:{{
+ backgroudColorChecked
+ }} peer-checked:{{ borderColorChecked }}"
+>
+ <ng-content />
+ <span>{{ label }}</span>
+</label>
diff --git a/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.spec.ts b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d64246447bd01f70086a2d0627e0fb0f4f8e6c0c
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RadioButtonCardComponent } from './radio-button-card.component';
+
+describe('RadioButtonCardComponent', () => {
+ let component: RadioButtonCardComponent;
+ let fixture: ComponentFixture<RadioButtonCardComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [RadioButtonCardComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(RadioButtonCardComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
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
new file mode 100644
index 0000000000000000000000000000000000000000..5bc58d07b04e3554902f0bf088c9c17d01ac8c02
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.ts
@@ -0,0 +1,20 @@
+import { Component, Input, ElementRef, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroupDirective, ControlContainer, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+ selector: 'ozgdesign-radio-button-card',
+ standalone: true,
+ imports: [CommonModule, ReactiveFormsModule],
+ templateUrl: './radio-button-card.component.html',
+ styles: [':host {@apply flex flex-1}'],
+ viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
+})
+export class RadioButtonCardComponent {
+ @Input() tabindex?: number;
+ @Input() label!: string;
+ @Input() name!: string;
+ @Input() value!: string;
+ @Input() backgroudColorChecked: string = 'bg-bewilligt-100';
+ @Input() borderColorChecked: string = 'border-bewilligt';
+}
diff --git a/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css b/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css
index f2ce959a3b8802546f37623ba7401ce714044933..6169e037814608499e39c830855a0616da5a5b64 100644
--- a/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css
+++ b/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css
@@ -15,6 +15,12 @@
--color-background-50: 0 0% 100%;
--color-background-100: 0 0% 98%;
--color-background-200: 0 0% 90%;
+
+ --color-bewilligt-100: 122 100% 92%;
+ --color-bewilligt-700: 122 100% 29%;
+
+ --color-abgelehnt-100: 0 100% 92%;
+ --color-abgelehnt-500: 0 100% 60%;
}
.dark {
@@ -26,6 +32,12 @@
--color-background-50: 0 0% 0%;
--color-background-100: 0 0% 8%;
--color-background-200: 0 0% 16%;
+
+ --color-bewilligt-100: 122 100% 92%;
+ --color-bewilligt-700: 122 100% 29%;
+
+ --color-abgelehnt-100: 0 100% 92%;
+ --color-abgelehnt-500: 0 100% 60%;
}
.bescheid-dialog-backdrop {
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 e0b51243121a163edd574a821854af7bf22a058b..30e8966a847cace9b283b79db55f2311f435eedd 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
@@ -33,6 +33,16 @@ module.exports = {
200: 'hsl(var(--color-background-200) / <alpha-value>)',
DEFAULT: 'hsl(var(--color-background-100) / <alpha-value>)',
},
+ bewilligt: {
+ 100: 'hsl(var(--color-bewilligt-100) / <alpha-value>)',
+ 700: 'hsl(var(--color-bewilligt-700) / <alpha-value>)',
+ DEFAULT: 'hsl(var(--color-bewilligt-700) / <alpha-value>)',
+ },
+ abgelehnt: {
+ 100: 'hsl(var(--color-abgelehnt-100) / <alpha-value>)',
+ 700: 'hsl(var(--color-abgelehnt-500) / <alpha-value>)',
+ DEFAULT: 'hsl(var(--color-abgelehnt-500) / <alpha-value>)',
+ },
mainbg: 'hsl(var(--color-mainbg) / <alpha-value>)',
primary: {
600: 'hsl(var(--color-primary-600) / <alpha-value>)',
diff --git a/alfa-client/libs/design-system/tsconfig.json b/alfa-client/libs/design-system/tsconfig.json
index 832897bd73778f6ac3365a4548921da0a2197d3e..c5ab1e5582f6b8a0f68784eec3fee2c1e152e3d7 100644
--- a/alfa-client/libs/design-system/tsconfig.json
+++ b/alfa-client/libs/design-system/tsconfig.json
@@ -1,32 +1,32 @@
{
- "compilerOptions": {
- "target": "es2022",
- "useDefineForClassFields": false,
- "forceConsistentCasingInFileNames": true,
- "strict": true,
- "noImplicitOverride": true,
- "noPropertyAccessFromIndexSignature": true,
- "noImplicitReturns": true,
- "noFallthroughCasesInSwitch": true
- },
- "files": [],
- "include": [],
- "references": [
- {
- "path": "./tsconfig.lib.json"
- },
- {
- "path": "./tsconfig.spec.json"
- },
- {
- "path": "./.storybook/tsconfig.json"
- }
- ],
- "extends": "../../tsconfig.base.json",
- "angularCompilerOptions": {
- "enableI18nLegacyMessageIdFormat": false,
- "strictInjectionParameters": true,
- "strictInputAccessModifiers": true,
- "strictTemplates": true
- }
+ "compilerOptions": {
+ "target": "es2022",
+ "useDefineForClassFields": false,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "files": [],
+ "include": [],
+ "references": [
+ {
+ "path": "./tsconfig.lib.json"
+ },
+ {
+ "path": "./tsconfig.spec.json"
+ },
+ {
+ "path": "./.storybook/tsconfig.json"
+ }
+ ],
+ "extends": "../../tsconfig.base.json",
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true
+ }
}