Files
atomic-design-poc/libs/shared/src/ui/radio-group/radio-group.component.ts
T
ehoandClaude Sonnet 5 e7156c5132 feat(WP-67): merge behandelportal into this repo as a monorepo
Restructures into apps/ssp + apps/behandelportal (two Angular projects)
plus libs/shared + libs/beheer (cross-app libraries), replacing WP-61's
separate sibling repo. That split had already produced real drift: a
hand-vendored copy of the backend's OpenAPI doc, a shared/ui+layout tree
forked and silently diverging (7 files), and beheer + the styles.scss
token bridge duplicated byte-for-byte across both repos.

- git mv the SSP's src/app/* into apps/ssp/; fold shared/, beheer/,
  environments/, the Storybook docs/*.mdx, and styles.scss into
  libs/shared + libs/beheer (all confirmed identical between the two
  repos before merging). auth stays deliberately duplicated per
  ADR-0002 (actor-specific, expected to diverge) - amended there.
- One generated API client (libs/shared), no more vendored swagger.json.
- .dependency-cruiser split into a base factory + one config per app,
  and Storybook into .storybook-ssp/.storybook-behandelportal - both
  forced by the @auth/* alias resolving to different directories per app.
- SiteHeaderComponent/ShellComponent gained HEADER_NAV_ITEMS/
  HEADER_ADMIN_LINKS/DEBUG_PANEL injection tokens so each app supplies
  its own nav/admin-links/dev-panel instead of one being hardcoded.
- CLAUDE.md, ARCHITECTURE.md, dependencies.md, and ADR-0002 updated;
  WP-67 backlog entry documents the full decision trail.

npm run ci green (lint, dep:check x2, 360 tests across ssp/
behandelportal/shared/beheer, both localized builds, backend tests,
snippet + api-client drift); both dev servers, both Storybook
instances, and docker compose verified working.

The old sibling repo (/home/eho/repos/behandelportal) is left
untouched, not deleted.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-02 21:01:57 +02:00

78 lines
2.3 KiB
TypeScript

import { Component, forwardRef, input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
export interface RadioOption {
value: string;
label: string;
}
/** The ubiquitous yes/no option pair. Language-agnostic now the labels are
localized, so it lives next to RadioOption and both wizards import it. */
export const JA_NEE: RadioOption[] = [
{ value: 'ja', label: $localize`:@@common.ja:Ja` },
{ value: 'nee', label: $localize`:@@common.nee:Nee` },
];
/** Atom: a radio group. Thin wrapper over the CIBG Huisstijl `.form-check.styled`
radio CSS, wired as a form control so it works with ngModel just like the
text-input atom. */
@Component({
selector: 'app-radio-group',
template: `
<div
role="radiogroup"
[attr.aria-labelledby]="name() + '-label'"
[attr.aria-invalid]="invalid() ? 'true' : null"
[attr.aria-describedby]="invalid() ? name() + '-error' : null"
>
@for (opt of options(); track opt.value) {
<div class="form-check styled">
<input
class="form-check-input"
[class.is-invalid]="invalid()"
type="radio"
[id]="name() + '-' + opt.value"
[name]="name()"
[value]="opt.value"
[checked]="value === opt.value"
[disabled]="disabled"
(change)="select(opt.value)"
(blur)="onTouched()"
/>
<label class="form-check-label" [for]="name() + '-' + opt.value">{{ opt.label }}</label>
</div>
}
</div>
`,
providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioGroupComponent), multi: true },
],
})
export class RadioGroupComponent implements ControlValueAccessor {
options = input.required<RadioOption[]>();
name = input.required<string>();
invalid = input(false);
value = '';
disabled = false;
onChange: (v: string) => void = () => {};
onTouched: () => void = () => {};
select(v: string) {
this.value = v;
this.onChange(v);
}
writeValue(v: string) {
this.value = v ?? '';
}
registerOnChange(fn: (v: string) => void) {
this.onChange = fn;
}
registerOnTouched(fn: () => void) {
this.onTouched = fn;
}
setDisabledState(d: boolean) {
this.disabled = d;
}
}