Fix radio selection visual and trailing divider in data rows
- radio-group: the Utrecht radio paints its dot only with the `utrecht-radio-button--checked` class (not the native :checked); we set [checked] but not the class, so a selected radio looked empty. Bind the class too. The intake step-1 choice now visibly selects. - data-row: drop the border-block-end on the last row (:host:last-child) so a summary ends cleanly instead of showing a trailing empty row (visible in the concepts discriminated-unions card). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,9 @@ import { Component, input } from '@angular/core';
|
||||
Wrap several of these in .rhc-data-summary (see registration-summary). */
|
||||
@Component({
|
||||
selector: 'app-data-row',
|
||||
// The RHC item draws a divider below every row; drop it on the last one so the
|
||||
// list ends cleanly instead of looking like a trailing empty row.
|
||||
styles: [`:host:last-child .rhc-data-summary__item { border-block-end-style: none; }`],
|
||||
template: `
|
||||
<div class="rhc-data-summary__item">
|
||||
<dt class="rhc-data-summary__item-key">{{ key() }}</dt>
|
||||
|
||||
@@ -16,6 +16,7 @@ export interface RadioOption {
|
||||
<label class="utrecht-form-label utrecht-form-label--radio-button" style="display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0">
|
||||
<input
|
||||
class="utrecht-radio-button"
|
||||
[class.utrecht-radio-button--checked]="value === opt.value"
|
||||
type="radio"
|
||||
[name]="name()"
|
||||
[value]="opt.value"
|
||||
|
||||
Reference in New Issue
Block a user