Skip to content
Snippets Groups Projects
Commit fe4e3bcf authored by OZGCloud's avatar OZGCloud
Browse files

OZG-5008-OZG-5104 add radio-button-card

parent fcbb067b
Branches
Tags
No related merge requests found
Showing
with 183 additions and 68 deletions
......@@ -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>
......
......@@ -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()));
......
......@@ -10,7 +10,7 @@
"error",
{
"type": "attribute",
"prefix": "lib",
"prefix": "ozgdesign",
"style": "camelCase"
}
],
......@@ -18,7 +18,7 @@
"error",
{
"type": "element",
"prefix": "lib",
"prefix": "ozgdesign",
"style": "kebab-case"
}
]
......
export * from './lib/testbtn/testbtn.component';
export * from './lib/form/radio-button-card/radio-button-card.component';
<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>
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();
});
});
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';
}
......@@ -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 {
......
......@@ -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>)',
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment