From 5561cf3cf19e1783deb7c7dd013879c7d9c41c53 Mon Sep 17 00:00:00 2001
From: Ashley Hunter <20795331+ashley-hunter@users.noreply.github.com>
Date: Tue, 26 Nov 2024 22:33:46 +0000
Subject: [PATCH 1/3] feat(radio-group): migrate to signals

---
 libs/ui/radio-group/brain/package.json        |   3 +-
 libs/ui/radio-group/brain/src/index.ts        |   4 +-
 .../src/lib/brn-radio-group.component.ts      | 114 ++++
 .../brain/src/lib/brn-radio-group.token.ts    |  12 +
 .../brain/src/lib/brn-radio.component.ts      | 537 ++++--------------
 package.json                                  |   1 -
 6 files changed, 226 insertions(+), 445 deletions(-)
 create mode 100644 libs/ui/radio-group/brain/src/lib/brn-radio-group.component.ts
 create mode 100644 libs/ui/radio-group/brain/src/lib/brn-radio-group.token.ts

diff --git a/libs/ui/radio-group/brain/package.json b/libs/ui/radio-group/brain/package.json
index 287115d20..7ed15daab 100644
--- a/libs/ui/radio-group/brain/package.json
+++ b/libs/ui/radio-group/brain/package.json
@@ -4,7 +4,8 @@
 	"peerDependencies": {
 		"@angular/core": ">=18.0.0",
 		"@angular/cdk": ">=18.0.0",
-		"@angular/forms": ">=18.0.0"
+		"@angular/forms": ">=18.0.0",
+		"@spartan-ng/ui-forms-brain": "0.0.1-alpha.356"
 	},
 	"dependencies": {},
 	"sideEffects": false,
diff --git a/libs/ui/radio-group/brain/src/index.ts b/libs/ui/radio-group/brain/src/index.ts
index c57460fcb..22f19056f 100644
--- a/libs/ui/radio-group/brain/src/index.ts
+++ b/libs/ui/radio-group/brain/src/index.ts
@@ -1,7 +1,9 @@
 import { NgModule } from '@angular/core';
 
-import { BrnRadioComponent, BrnRadioGroupComponent } from './lib/brn-radio.component';
+import { BrnRadioGroupComponent } from './lib/brn-radio-group.component';
+import { BrnRadioComponent } from './lib/brn-radio.component';
 
+export * from './lib/brn-radio-group.component';
 export * from './lib/brn-radio.component';
 
 export const BrnRadioGroupImports = [BrnRadioGroupComponent, BrnRadioComponent] as const;
diff --git a/libs/ui/radio-group/brain/src/lib/brn-radio-group.component.ts b/libs/ui/radio-group/brain/src/lib/brn-radio-group.component.ts
new file mode 100644
index 000000000..fff367a19
--- /dev/null
+++ b/libs/ui/radio-group/brain/src/lib/brn-radio-group.component.ts
@@ -0,0 +1,114 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { BooleanInput } from '@angular/cdk/coercion';
+import {
+	booleanAttribute,
+	Component,
+	computed,
+	contentChildren,
+	forwardRef,
+	input,
+	model,
+	output,
+	signal,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ChangeFn, TouchFn } from '@spartan-ng/ui-forms-brain';
+import { provideBrnRadioGroupToken } from './brn-radio-group.token';
+import { BrnRadioChange, BrnRadioComponent } from './brn-radio.component';
+
+export const BRN_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = {
+	provide: NG_VALUE_ACCESSOR,
+	useExisting: forwardRef(() => BrnRadioGroupComponent),
+	multi: true,
+};
+
+@Component({
+	selector: 'brn-radio-group',
+	standalone: true,
+	providers: [BRN_RADIO_GROUP_CONTROL_VALUE_ACCESSOR, provideBrnRadioGroupToken(BrnRadioGroupComponent)],
+	host: {
+		role: 'radiogroup',
+		'(focusout)': 'onTouched()',
+	},
+	template: '<ng-content />',
+})
+export class BrnRadioGroupComponent<T = unknown> implements ControlValueAccessor {
+	private static _nextUniqueId = 0;
+
+	protected onChange: ChangeFn<T> = () => {};
+
+	protected onTouched: TouchFn = () => {};
+
+	public readonly name = input(`brn-radio-group-${BrnRadioGroupComponent._nextUniqueId++}`);
+
+	/**
+	 * The value of the selected radio button.
+	 */
+	public readonly value = model<T>();
+
+	/**
+	 * Whether the radio group is disabled.
+	 */
+	public disabled = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
+
+	/**
+	 * Whether the radio group should be required.
+	 */
+	public readonly required = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
+
+	/**
+	 * The direction of the radio group.
+	 */
+	public readonly direction = input<'ltr' | 'rtl' | null>('ltr');
+
+	/**
+	 * Event emitted when the group value changes.
+	 */
+	public readonly change = output<BrnRadioChange<T>>();
+
+	/**
+	 * The internal disabled state of the radio group. This could be switched to a linkedSignal when we can drop v18 support.
+	 * @internal
+	 */
+	public readonly disabledState = computed(() => signal(this.disabled()));
+
+	/**
+	 * Access the radio buttons within the group.
+	 * @internal
+	 */
+	public readonly radioButtons = contentChildren(BrnRadioComponent, { descendants: true });
+
+	writeValue(value: T) {
+		this.value.set(value);
+	}
+
+	registerOnChange(fn: ChangeFn<T>) {
+		this.onChange = fn;
+	}
+
+	registerOnTouched(fn: TouchFn) {
+		this.onTouched = fn;
+	}
+
+	setDisabledState(isDisabled: boolean) {
+		this.disabledState().set(isDisabled);
+	}
+
+	/**
+	 * Select a radio button.
+	 * @internal
+	 */
+	select(radioButton: BrnRadioComponent<T>, value: T) {
+		if (this.value() === value) {
+			return;
+		}
+
+		this.value.set(value);
+		this.onChange(value);
+		this.change.emit(new BrnRadioChange<T>(radioButton, value));
+	}
+}
diff --git a/libs/ui/radio-group/brain/src/lib/brn-radio-group.token.ts b/libs/ui/radio-group/brain/src/lib/brn-radio-group.token.ts
new file mode 100644
index 000000000..a19dce4bf
--- /dev/null
+++ b/libs/ui/radio-group/brain/src/lib/brn-radio-group.token.ts
@@ -0,0 +1,12 @@
+import { ExistingProvider, inject, InjectionToken, Type } from '@angular/core';
+import type { BrnRadioGroupComponent } from './brn-radio-group.component';
+
+const BrnRadioGroupToken = new InjectionToken<BrnRadioGroupComponent<unknown>>('BrnRadioGroupToken');
+
+export function provideBrnRadioGroupToken<T>(component: Type<BrnRadioGroupComponent<T>>): ExistingProvider {
+	return { provide: BrnRadioGroupToken, useExisting: component };
+}
+
+export function injectBrnRadioGroup<T = unknown>(): BrnRadioGroupComponent<T> {
+	return inject(BrnRadioGroupToken) as BrnRadioGroupComponent<T>;
+}
diff --git a/libs/ui/radio-group/brain/src/lib/brn-radio.component.ts b/libs/ui/radio-group/brain/src/lib/brn-radio.component.ts
index 428e9e5e8..1582d4db8 100644
--- a/libs/ui/radio-group/brain/src/lib/brn-radio.component.ts
+++ b/libs/ui/radio-group/brain/src/lib/brn-radio.component.ts
@@ -1,55 +1,38 @@
-import { FocusMonitor, type FocusOrigin, type FocusableOption } from '@angular/cdk/a11y';
-import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { BooleanInput } from '@angular/cdk/coercion';
 import {
-	type AfterContentInit,
-	type AfterViewInit,
 	ChangeDetectionStrategy,
-	ChangeDetectorRef,
 	Component,
-	ContentChildren,
-	type DoCheck,
 	ElementRef,
-	EventEmitter,
-	Input,
 	type OnDestroy,
-	type OnInit,
-	Output,
-	type QueryList,
-	ViewChild,
 	ViewEncapsulation,
 	booleanAttribute,
-	forwardRef,
+	computed,
 	inject,
-	numberAttribute,
+	input,
+	output,
+	viewChild,
 } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { injectBrnRadioGroup } from './brn-radio-group.token';
 
-export const BRN_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = {
-	provide: NG_VALUE_ACCESSOR,
-	useExisting: forwardRef(() => BrnRadioGroupComponent),
-	multi: true,
-};
-
-export class BrnRadioChange {
+export class BrnRadioChange<T> {
 	constructor(
-		public source: BrnRadioComponent,
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		public value: any,
+		public source: BrnRadioComponent<T>,
+		public value: T,
 	) {}
 }
 
 @Component({
 	selector: 'brn-radio',
 	standalone: true,
-	imports: [],
 	host: {
 		class: 'brn-radio',
-		'[attr.id]': 'id',
-		'[class.brn-radio-checked]': 'checked',
-		'[class.brn-radio-disabled]': 'disabled',
-		'[attr.data-checked]': 'checked',
-		'[attr.data-disabled]': 'disabled',
-		'[attr.data-value]': 'value',
+		'[attr.id]': 'id()',
+		'[class.brn-radio-checked]': 'checked()',
+		'[class.brn-radio-disabled]': 'disabledState()',
+		'[attr.data-checked]': 'checked()',
+		'[attr.data-disabled]': 'disabledState()',
+		'[attr.data-value]': 'value()',
 		// Needs to be removed since it causes some a11y issues (see #21266).
 		'[attr.tabindex]': 'null',
 		'[attr.aria-label]': 'null',
@@ -58,215 +41,119 @@ export class BrnRadioChange {
 		// Note: under normal conditions focus shouldn't land on this element, however it may be
 		// programmatically set, for example inside of a focus trap, in this case we want to forward
 		// the focus to the native element.
-		'(focus)': '_inputElement.nativeElement.focus()',
+		'(focus)': '_inputElement().nativeElement.focus()',
 	},
 	exportAs: 'brnRadio',
 	encapsulation: ViewEncapsulation.None,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
-		<div style="display: flex; height: fit-content; width: fit-content" (click)="_onTouchTargetClick($event)">
+		<div style="display: flex; height: fit-content; width: fit-content" (click)="onTouchTargetClick($event)">
 			<ng-content select="[target],[indicator]" />
 		</div>
 		<input
 			#input
 			style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;"
 			type="radio"
-			[id]="inputId"
-			[checked]="checked"
-			[disabled]="disabled"
-			[attr.name]="name"
-			[attr.value]="value"
-			[required]="required"
-			[attr.aria-label]="ariaLabel"
-			[attr.aria-labelledby]="ariaLabelledby"
-			[attr.aria-describedby]="ariaDescribedby"
-			(change)="_onInputInteraction($event)"
-			(click)="_onInputClick($event)"
+			[id]="inputId()"
+			[checked]="checked()"
+			[disabled]="disabledState()"
+			[tabIndex]="tabIndex()"
+			[attr.name]="radioGroup.name()"
+			[attr.value]="value()"
+			[required]="required()"
+			[attr.aria-label]="ariaLabel()"
+			[attr.aria-labelledby]="ariaLabelledby()"
+			[attr.aria-describedby]="ariaDescribedby()"
+			(change)="onInputInteraction($event)"
+			(click)="onInputClick($event)"
 		/>
-		<label style="display: flex; height: fit-content; width: fit-content" [for]="inputId">
-			<ng-content></ng-content>
+		<label style="display: flex; height: fit-content; width: fit-content" [for]="inputId()">
+			<ng-content />
 		</label>
 	`,
 })
-export class BrnRadioComponent implements FocusableOption, OnInit, AfterViewInit, DoCheck, OnDestroy {
+export class BrnRadioComponent<T = unknown> implements OnDestroy {
 	private static _nextUniqueId = 0;
 	private readonly _focusMonitor = inject(FocusMonitor);
 	private readonly _elementRef = inject(ElementRef);
-	private readonly _radioDispatcher = inject(UniqueSelectionDispatcher);
-	protected _changeDetector = inject(ChangeDetectorRef);
-	public radioGroup = inject(BrnRadioGroupComponent, { optional: true });
-
-	private _disabled = false;
-	@Input({ transform: booleanAttribute })
-	public get disabled(): boolean {
-		return this._disabled || (this.radioGroup !== null && this.radioGroup.disabled);
-	}
-	public set disabled(value: boolean) {
-		this._setDisabled(value);
-	}
-
-	private _defaultTabIndex = 0;
-	@Input({ transform: numberAttribute })
-	public set defaultTabIndex(value: number) {
-		this._defaultTabIndex = value;
-	}
-
-	private _tabIndex = 0;
-	@Input({ transform: numberAttribute })
-	public get tabIndex(): number {
-		return this.disabled ? -1 : this._tabIndex;
-	}
-	public set tabIndex(value: number) {
-		this._tabIndex = value !== null ? value : this._defaultTabIndex;
-	}
-
-	private readonly _uniqueId = `brn-radio-${++BrnRadioComponent._nextUniqueId}`;
+	protected readonly radioGroup = injectBrnRadioGroup<T>();
 
-	@Input()
-	public id = this._uniqueId;
-	// will be overwritten with radio group name if group exists
-	@Input()
-	public name = this._uniqueId;
-	@Input('aria-label')
-	public ariaLabel?: string;
-	@Input('aria-labelledby')
-	public ariaLabelledby?: string;
-	@Input('aria-describedby')
-	public ariaDescribedby?: string;
-
-	private _checked = false;
-	@Input({ transform: booleanAttribute })
-	public get checked(): boolean {
-		return this._checked;
-	}
+	/**
+	 * Whether the radio button is disabled.
+	 */
+	public readonly disabled = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+		alias: 'disabled',
+	});
 
-	public set checked(value: boolean) {
-		const newCheckedState = value;
-		if (this._checked !== newCheckedState) {
-			this._checked = newCheckedState;
-			if (newCheckedState && this.radioGroup && this.radioGroup.value !== this.value) {
-				this.radioGroup.selected = this;
-			} else if (!newCheckedState && this.radioGroup && this.radioGroup.value === this.value) {
-				// When unchecking the selected radio button, update the selected radio
-				// property on the group.
-				this.radioGroup.selected = null;
-			}
+	/**
+	 * Whether the radio button is disabled or the radio group is disabled.
+	 */
+	protected readonly disabledState = computed(() => this.disabled() || (this.radioGroup && this.radioGroup.disabled()));
 
-			if (newCheckedState) {
-				// Notify all radio buttons with the same name to un-check.
-				this._radioDispatcher.notify(this.id, this.name);
-			}
-			this._changeDetector.markForCheck();
-		}
-	}
+	/**
+	 * Whether the radio button is checked.
+	 */
+	protected readonly checked = computed(() => this.radioGroup.value() === this.value());
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	private _value: any = null;
-	@Input({ required: true }) // eslint-disable-next-line @typescript-eslint/no-explicit-any
-	public get value(): any {
-		return this._value;
-	}
+	protected readonly tabIndex = computed(() => {
+		const disabled = this.disabledState();
+		const checked = this.checked();
+		const hasSelectedRadio = this.radioGroup.value() !== undefined;
+		const isFirstRadio = this.radioGroup.radioButtons()[0] === this;
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	public set value(value: any) {
-		if (this._value !== value) {
-			this._value = value;
-			if (this.radioGroup !== null) {
-				if (!this.checked) {
-					// Update checked when the value changed to match the radio group's value
-					this.checked = this.radioGroup.value === value;
-				}
-				if (this.checked) {
-					this.radioGroup.selected = this;
-				}
-			}
+		if (disabled || (!checked && (hasSelectedRadio || !isFirstRadio))) {
+			return -1;
 		}
-	}
-
-	private _required = false;
-	@Input({ transform: booleanAttribute })
-	public get required(): boolean {
-		return this._required || (this.radioGroup !== null && this.radioGroup.required);
-	}
+		return 0;
+	});
 
-	public set required(value: boolean) {
-		this._required = value;
-	}
-
-	@Output()
-	// eslint-disable-next-line @angular-eslint/no-output-native
-	public readonly change = new EventEmitter<BrnRadioChange>();
-
-	public get inputId(): string {
-		return `${this.id || this._uniqueId}-input`;
-	}
-
-	// eslint-disable-next-line @typescript-eslint/no-empty-function
-	private _removeUniqueSelectionListener: () => void = () => {};
-
-	private _previousTabIndex: number | undefined;
+	/**
+	 * The unique ID for the radio button input. If none is supplied, it will be auto-generated.
+	 */
+	public readonly id = input(`brn-radio-${++BrnRadioComponent._nextUniqueId}`);
 
-	@ViewChild('input')
-	public _inputElement?: ElementRef<HTMLInputElement>;
+	public readonly ariaLabel = input<string | undefined>(undefined, { alias: 'aria-label' });
 
-	/** Focuses the radio button. */
-	focus(origin?: FocusOrigin): void {
-		if (!this._inputElement) return;
-		if (origin) {
-			this._focusMonitor.focusVia(this._inputElement, origin);
-		} else {
-			this._inputElement.nativeElement.focus();
-		}
-	}
+	public readonly ariaLabelledby = input<string | undefined>(undefined, { alias: 'aria-labelledby' });
 
-	_markForCheck() {
-		this._changeDetector.markForCheck();
-	}
+	public readonly ariaDescribedby = input<string | undefined>(undefined, { alias: 'aria-describedby' });
 
-	ngOnInit() {
-		if (this.radioGroup) {
-			// If the radio is inside a radio group, determine if it should be checked
-			this.checked = this.radioGroup.value === this._value;
+	/**
+	 * The value this radio button represents.
+	 */
+	public readonly value = input.required<T>();
 
-			if (this.checked) {
-				this.radioGroup.selected = this;
-			}
+	/**
+	 * Whether the radio button is required.
+	 */
+	public readonly required = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
 
-			// Copy name from parent radio group
-			this.name = this.radioGroup.name;
-		}
+	/**
+	 * Event emitted when the checked state of this radio button changes.
+	 */
+	public readonly change = output<BrnRadioChange<T>>();
 
-		this._removeUniqueSelectionListener = this._radioDispatcher.listen((id, name) => {
-			if (id !== this.id && name === this.name) {
-				this.checked = false;
-			}
-		});
-	}
+	protected readonly inputId = computed(() => `${this.id()}-input`);
 
-	ngDoCheck(): void {
-		this._updateTabIndex();
-	}
+	private readonly _inputElement = viewChild.required<ElementRef<HTMLInputElement>>('input');
 
-	ngAfterViewInit() {
-		this._updateTabIndex();
-		this._focusMonitor.monitor(this._elementRef, true).subscribe((focusOrigin) => {
-			if (!focusOrigin && this.radioGroup) {
-				this.radioGroup._touch();
-			}
-		});
+	constructor() {
+		this._focusMonitor.monitor(this._elementRef, true);
 	}
 
-	ngOnDestroy() {
+	ngOnDestroy(): void {
 		this._focusMonitor.stopMonitoring(this._elementRef);
-		this._removeUniqueSelectionListener();
 	}
 
 	/** Dispatch change event with current value. */
-	private _emitChangeEvent(): void {
-		this.change.emit(new BrnRadioChange(this, this._value));
+	private emitChangeEvent(): void {
+		this.change.emit(new BrnRadioChange(this, this.value()));
 	}
 
-	_onInputClick(event: Event) {
+	protected onInputClick(event: Event) {
 		// We have to stop propagation for click events on the visual hidden input element.
 		// By default, when a user clicks on a label element, a generated click event will be
 		// dispatched on the associated input element. Since we are using a label element as our
@@ -277,260 +164,26 @@ export class BrnRadioComponent implements FocusableOption, OnInit, AfterViewInit
 		event.stopPropagation();
 	}
 
-	_onInputInteraction(event: Event) {
+	protected onInputInteraction(event: Event) {
 		// We always have to stop propagation on the change event.
 		// Otherwise the change event, from the input element, will bubble up and
 		// emit its event object to the `change` output.
 		event.stopPropagation();
 
-		if (!this.checked && !this.disabled) {
-			const groupValueChanged = this.radioGroup && this.value !== this.radioGroup.value;
-			this.checked = true;
-			this._emitChangeEvent();
-
-			if (this.radioGroup) {
-				this.radioGroup._controlValueAccessorChangeFn(this.value);
-				if (groupValueChanged) {
-					this.radioGroup._emitChangeEvent();
-				}
-			}
+		if (!this.checked() && !this.disabledState()) {
+			this.emitChangeEvent();
+			this.radioGroup.select(this, this.value());
 		}
 	}
 
 	/** Triggered when the user clicks on the touch target. */
-	_onTouchTargetClick(event: Event) {
-		this._onInputInteraction(event);
+	protected onTouchTargetClick(event: Event) {
+		this.onInputInteraction(event);
 
-		if (!this.disabled && this._inputElement) {
+		if (!this.disabledState()) {
 			// Normally the input should be focused already, but if the click
 			// comes from the touch target, then we might have to focus it ourselves.
-			this._inputElement.nativeElement.focus();
-		}
-	}
-
-	protected _setDisabled(value: boolean) {
-		if (this._disabled !== value) {
-			this._disabled = value;
-			this._changeDetector.markForCheck();
-		}
-	}
-
-	private _updateTabIndex() {
-		const group = this.radioGroup;
-		let value: number;
-
-		// Implement a roving tabindex if the button is inside a group. For most cases this isn't
-		// necessary, because the browser handles the tab order for inputs inside a group automatically,
-		// but we need an explicitly higher tabindex for the selected button in order for things like
-		// the focus trap to pick it up correctly.
-		if (!group || !group.selected || this.disabled) {
-			value = this.tabIndex;
-		} else {
-			value = group.selected === this ? this.tabIndex : -1;
-		}
-
-		if (value !== this._previousTabIndex) {
-			// We have to set the tabindex directly on the DOM node, because it depends on
-			// the selected state which is prone to "changed after checked errors".
-			const input: HTMLInputElement | undefined = this._inputElement?.nativeElement;
-
-			if (input) {
-				input.setAttribute('tabindex', `${value}`);
-				this._previousTabIndex = value;
-			}
-		}
-	}
-}
-
-@Component({
-	selector: 'brn-radio-group',
-	standalone: true,
-	providers: [BRN_RADIO_GROUP_CONTROL_VALUE_ACCESSOR],
-	imports: [],
-	host: {
-		role: 'radiogroup',
-	},
-	template: `
-		<ng-content />
-	`,
-})
-export class BrnRadioGroupComponent implements AfterContentInit {
-	private static _nextUniqueId = 0;
-	private readonly _changeDetector = inject(ChangeDetectorRef);
-
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	private _value: any = null;
-	private _isInitialized = false;
-
-	@ContentChildren(BrnRadioComponent, { descendants: true })
-	private readonly _radios?: QueryList<BrnRadioComponent>;
-
-	// eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-explicit-any
-	public _controlValueAccessorChangeFn: (value: any) => void = () => {};
-	// eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-explicit-any
-	public onTouched: () => any = () => {};
-
-	private _name = `brn-radio-group-${BrnRadioGroupComponent._nextUniqueId++}`;
-	@Input()
-	public get name(): string {
-		return this._name;
-	}
-
-	public set name(value: string) {
-		this._name = value;
-		this._updateRadioButtonNames();
-	}
-
-	/**
-	 * Value for the radio-group. Should equal the value of the selected radio button if there is
-	 * a corresponding radio button with a matching value. If there is not such a corresponding
-	 * radio button, this value persists to be applied in case a new radio button is added with a
-	 * matching value.
-	 */
-	@Input() // eslint-disable-next-line @typescript-eslint/no-explicit-any
-	public get value(): any {
-		return this._value;
-	}
-
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	public set value(newValue: any) {
-		if (this._value !== newValue) {
-			// Set this before proceeding to ensure no circular loop occurs with selection.
-			this._value = newValue;
-			this._updateSelectedRadioFromValue();
-			this._checkSelectedRadioButton();
-		}
-	}
-
-	_checkSelectedRadioButton() {
-		if (this._selected && !this._selected.checked) {
-			this._selected.checked = true;
-		}
-	}
-
-	/**
-	 * The currently selected radio button. If set to a new radio button, the radio group value
-	 * will be updated to match the new selected button.
-	 */
-	private _selected: BrnRadioComponent | null = null;
-	@Input()
-	public get selected() {
-		return this._selected;
-	}
-
-	public set selected(selected: BrnRadioComponent | null) {
-		this._selected = selected;
-		this.value = selected ? selected.value : null;
-		this._checkSelectedRadioButton();
-	}
-
-	private _disabled = false;
-	@Input({ transform: booleanAttribute })
-	public get disabled(): boolean {
-		return this._disabled;
-	}
-
-	public set disabled(value: boolean) {
-		this._disabled = value;
-		this._markRadiosForCheck();
-	}
-
-	private _required = false;
-	@Input({ transform: booleanAttribute })
-	public get required(): boolean {
-		return this._required;
-	}
-
-	public set required(value: boolean) {
-		this._required = value;
-		this._markRadiosForCheck();
-	}
-
-	@Input()
-	public direction: 'ltr' | 'rtl' | null = 'ltr';
-
-	@Output()
-	// eslint-disable-next-line @angular-eslint/no-output-native
-	public readonly change: EventEmitter<BrnRadioChange> = new EventEmitter<BrnRadioChange>();
-
-	/**
-	 * Initialize properties once content children are available.
-	 * This allows us to propagate relevant attributes to associated buttons.
-	 */
-	ngAfterContentInit() {
-		// Mark this component as initialized in AfterContentInit because the initial value can
-		// possibly be set by NgModel on MatRadioGroup, and it is possible that the OnInit of the
-		// NgModel occurs *after* the OnInit of the MatRadioGroup.
-		this._isInitialized = true;
-	}
-
-	/**
-	 * Mark this group as being "touched" (for ngModel). Meant to be called by the contained
-	 * radio buttons upon their blur.
-	 */
-	_touch() {
-		if (this.onTouched) {
-			this.onTouched();
-		}
-	}
-
-	private _updateRadioButtonNames(): void {
-		if (this._radios) {
-			for (const radio of this._radios) {
-				radio.name = this.name;
-				radio._markForCheck();
-			}
-		}
-	}
-
-	/** Updates the `selected` radio button from the internal _value state. */
-	private _updateSelectedRadioFromValue(): void {
-		// If the value already matches the selected radio, do nothing.
-		const isAlreadySelected = this._selected !== null && this._selected.value === this._value;
-
-		if (this._radios && !isAlreadySelected) {
-			this._selected = null;
-			for (const radio of this._radios) {
-				radio.checked = this.value === radio.value;
-				if (radio.checked) {
-					this._selected = radio;
-				}
-			}
-		}
-	}
-
-	_emitChangeEvent(): void {
-		if (this._isInitialized) {
-			this.change.emit(new BrnRadioChange(this._selected!, this._value));
-		}
-	}
-
-	_markRadiosForCheck() {
-		if (this._radios) {
-			for (const radio of this._radios) {
-				radio._markForCheck();
-			}
+			this._inputElement().nativeElement.focus();
 		}
 	}
-
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	writeValue(value: any) {
-		this.value = value;
-		this._changeDetector.markForCheck();
-	}
-
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	registerOnChange(fn: (value: any) => void) {
-		this._controlValueAccessorChangeFn = fn;
-	}
-
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	registerOnTouched(fn: any) {
-		this.onTouched = fn;
-	}
-
-	setDisabledState(isDisabled: boolean) {
-		this.disabled = isDisabled;
-		this._changeDetector.markForCheck();
-	}
 }
diff --git a/package.json b/package.json
index df4c8c4ea..0272a851f 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,6 @@
 		"@nx/angular": "20.1.1",
 		"@nx/devkit": "20.1.1",
 		"@nx/plugin": "20.1.1",
-		"@storybook/addon-interactions": "^8.3.4",
 		"@swc/helpers": "0.5.13",
 		"@testing-library/cypress": "^10.0.2",
 		"@trpc/client": "10.45.2",

From d0481e93695b5fb513efcfdd05f21ca435e5ef49 Mon Sep 17 00:00:00 2001
From: Ashley Hunter <20795331+ashley-hunter@users.noreply.github.com>
Date: Fri, 29 Nov 2024 21:35:14 +0000
Subject: [PATCH 2/3] fix: adding return types

---
 .../brain/src/lib/brn-radio-group.component.ts       | 10 +++++-----
 .../radio-group/brain/src/lib/brn-radio.component.ts | 12 ++++++------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/libs/ui/radio-group/brain/src/lib/brn-radio-group.component.ts b/libs/ui/radio-group/brain/src/lib/brn-radio-group.component.ts
index fff367a19..cceba4340 100644
--- a/libs/ui/radio-group/brain/src/lib/brn-radio-group.component.ts
+++ b/libs/ui/radio-group/brain/src/lib/brn-radio-group.component.ts
@@ -82,19 +82,19 @@ export class BrnRadioGroupComponent<T = unknown> implements ControlValueAccessor
 	 */
 	public readonly radioButtons = contentChildren(BrnRadioComponent, { descendants: true });
 
-	writeValue(value: T) {
+	writeValue(value: T): void {
 		this.value.set(value);
 	}
 
-	registerOnChange(fn: ChangeFn<T>) {
+	registerOnChange(fn: ChangeFn<T>): void {
 		this.onChange = fn;
 	}
 
-	registerOnTouched(fn: TouchFn) {
+	registerOnTouched(fn: TouchFn): void {
 		this.onTouched = fn;
 	}
 
-	setDisabledState(isDisabled: boolean) {
+	setDisabledState(isDisabled: boolean): void {
 		this.disabledState().set(isDisabled);
 	}
 
@@ -102,7 +102,7 @@ export class BrnRadioGroupComponent<T = unknown> implements ControlValueAccessor
 	 * Select a radio button.
 	 * @internal
 	 */
-	select(radioButton: BrnRadioComponent<T>, value: T) {
+	select(radioButton: BrnRadioComponent<T>, value: T): void {
 		if (this.value() === value) {
 			return;
 		}
diff --git a/libs/ui/radio-group/brain/src/lib/brn-radio.component.ts b/libs/ui/radio-group/brain/src/lib/brn-radio.component.ts
index 1582d4db8..4b8370472 100644
--- a/libs/ui/radio-group/brain/src/lib/brn-radio.component.ts
+++ b/libs/ui/radio-group/brain/src/lib/brn-radio.component.ts
@@ -41,7 +41,7 @@ export class BrnRadioChange<T> {
 		// Note: under normal conditions focus shouldn't land on this element, however it may be
 		// programmatically set, for example inside of a focus trap, in this case we want to forward
 		// the focus to the native element.
-		'(focus)': '_inputElement().nativeElement.focus()',
+		'(focus)': 'inputElement().nativeElement.focus()',
 	},
 	exportAs: 'brnRadio',
 	encapsulation: ViewEncapsulation.None,
@@ -138,7 +138,7 @@ export class BrnRadioComponent<T = unknown> implements OnDestroy {
 
 	protected readonly inputId = computed(() => `${this.id()}-input`);
 
-	private readonly _inputElement = viewChild.required<ElementRef<HTMLInputElement>>('input');
+	protected readonly inputElement = viewChild.required<ElementRef<HTMLInputElement>>('input');
 
 	constructor() {
 		this._focusMonitor.monitor(this._elementRef, true);
@@ -153,7 +153,7 @@ export class BrnRadioComponent<T = unknown> implements OnDestroy {
 		this.change.emit(new BrnRadioChange(this, this.value()));
 	}
 
-	protected onInputClick(event: Event) {
+	protected onInputClick(event: Event): void {
 		// We have to stop propagation for click events on the visual hidden input element.
 		// By default, when a user clicks on a label element, a generated click event will be
 		// dispatched on the associated input element. Since we are using a label element as our
@@ -164,7 +164,7 @@ export class BrnRadioComponent<T = unknown> implements OnDestroy {
 		event.stopPropagation();
 	}
 
-	protected onInputInteraction(event: Event) {
+	protected onInputInteraction(event: Event): void {
 		// We always have to stop propagation on the change event.
 		// Otherwise the change event, from the input element, will bubble up and
 		// emit its event object to the `change` output.
@@ -177,13 +177,13 @@ export class BrnRadioComponent<T = unknown> implements OnDestroy {
 	}
 
 	/** Triggered when the user clicks on the touch target. */
-	protected onTouchTargetClick(event: Event) {
+	protected onTouchTargetClick(event: Event): void {
 		this.onInputInteraction(event);
 
 		if (!this.disabledState()) {
 			// Normally the input should be focused already, but if the click
 			// comes from the touch target, then we might have to focus it ourselves.
-			this._inputElement().nativeElement.focus();
+			this.inputElement().nativeElement.focus();
 		}
 	}
 }

From 39847eba06acbce6d78914ce402b45e94e792aa1 Mon Sep 17 00:00:00 2001
From: Ashley Hunter <20795331+ashley-hunter@users.noreply.github.com>
Date: Fri, 29 Nov 2024 22:23:03 +0000
Subject: [PATCH 3/3] fix: lockfile

---
 pnpm-lock.yaml | 102 -------------------------------------------------
 1 file changed, 102 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b712b452a..6fa2432ac 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,9 +71,6 @@ importers:
       '@nx/plugin':
         specifier: 20.1.1
         version: 20.1.1(@babel/traverse@7.25.9)(@swc-node/register@1.10.9(@swc/core@1.7.26(@swc/helpers@0.5.13))(@swc/types@0.1.12)(typescript@5.5.4))(@swc/core@1.7.26(@swc/helpers@0.5.13))(@types/node@22.6.2)(@zkochan/js-yaml@0.0.7)(eslint@9.15.0(jiti@2.4.0))(nx@20.1.1(@swc-node/register@1.10.9(@swc/core@1.7.26(@swc/helpers@0.5.13))(@swc/types@0.1.12)(typescript@5.5.4))(@swc/core@1.7.26(@swc/helpers@0.5.13)))(ts-node@10.9.2(@swc/core@1.7.26(@swc/helpers@0.5.13))(@types/node@22.6.2)(typescript@5.5.4))(typescript@5.5.4)(verdaccio@5.32.2(encoding@0.1.13)(typanion@3.14.0))
-      '@storybook/addon-interactions':
-        specifier: ^8.3.4
-        version: 8.4.4(storybook@8.4.4(prettier@3.3.3))
       '@swc/helpers':
         specifier: 0.5.13
         version: 0.5.13
@@ -4274,11 +4271,6 @@ packages:
     peerDependencies:
       storybook: ^8.4.4
 
-  '@storybook/addon-interactions@8.4.4':
-    resolution: {integrity: sha512-izqcc6tY0BiKW7DYrEnoXUEH9FYDPWNfQnqqE0nVBv3BS2DoNmm8M9SB8fZx7pPfw53cMJBGt3vrlY0Wtxy1+Q==}
-    peerDependencies:
-      storybook: ^8.4.4
-
   '@storybook/addon-measure@8.4.4':
     resolution: {integrity: sha512-KsjrwrXwrI+z7hKKfjyY1w1b0gLSLZmp15vIRJMELybWV0+4bZFLJGwMBOQFx+aWBED8yZrRV9OjTmoczawsZg==}
     peerDependencies:
@@ -4389,11 +4381,6 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
 
-  '@storybook/instrumenter@8.4.4':
-    resolution: {integrity: sha512-mq/YVEZrB8jyyio2Of01rQixsQ72z8ssAhJS9ldIlK+cvERQi0VBCpH3pejPmjOB40yiKBJHNqH4HIANVhibgw==}
-    peerDependencies:
-      storybook: ^8.4.4
-
   '@storybook/manager-api@8.4.4':
     resolution: {integrity: sha512-rmNPcbEyzakEHoaecUbhkW7WWOkyZ0z7ywH4d5/s0ZuQS57Px2N+ZLVgRJwYK+YNHiJYqDf1BTln9YJ/Mt1L6Q==}
     peerDependencies:
@@ -4411,11 +4398,6 @@ packages:
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       storybook: ^8.4.4
 
-  '@storybook/test@8.4.4':
-    resolution: {integrity: sha512-tmJd+lxl3MC0Xdu1KW/69V8tibv98OvdopxGqfVR0x5dkRHM3sFK/tv1ZJAUeronlvRyhGySOu1tHUrMjcNqyA==}
-    peerDependencies:
-      storybook: ^8.4.4
-
   '@storybook/theming@8.4.4':
     resolution: {integrity: sha512-iq4yt3Fx35ZV5owNC//E6G+QPV19xHHVN2Ugi3p7KOSFK3chuXX9mxZ1rfir+t+U30a5EPOEnlsY3/1LXn7aTw==}
     peerDependencies:
@@ -4549,10 +4531,6 @@ packages:
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
 
-  '@testing-library/jest-dom@6.5.0':
-    resolution: {integrity: sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==}
-    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
-
   '@testing-library/jest-dom@6.6.3':
     resolution: {integrity: sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
@@ -5072,9 +5050,6 @@ packages:
       '@vitest/browser':
         optional: true
 
-  '@vitest/expect@2.0.5':
-    resolution: {integrity: sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==}
-
   '@vitest/expect@2.1.1':
     resolution: {integrity: sha512-YeueunS0HiHiQxk+KEOnq/QMzlUuOzbU1Go+PgAsHvvv3tUkJPm9xWt+6ITNTlzsMXUjmgm5T+U7KBPK2qQV6w==}
 
@@ -5090,9 +5065,6 @@ packages:
       vite:
         optional: true
 
-  '@vitest/pretty-format@2.0.5':
-    resolution: {integrity: sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==}
-
   '@vitest/pretty-format@2.1.1':
     resolution: {integrity: sha512-SjxPFOtuINDUW8/UkElJYQSFtnWX7tMksSGW0vfjxMneFqxVr8YJ979QpMbDW7g+BIiq88RAGDjf7en6rvLPPQ==}
 
@@ -5105,9 +5077,6 @@ packages:
   '@vitest/snapshot@2.1.1':
     resolution: {integrity: sha512-BnSku1WFy7r4mm96ha2FzN99AZJgpZOWrAhtQfoxjUU5YMRpq1zmHRq7a5K9/NjqonebO7iVDla+VvZS8BOWMw==}
 
-  '@vitest/spy@2.0.5':
-    resolution: {integrity: sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==}
-
   '@vitest/spy@2.1.1':
     resolution: {integrity: sha512-ZM39BnZ9t/xZ/nF4UwRH5il0Sw93QnZXd9NAZGRpIgj0yvVwPpLd702s/Cx955rGaMlyBQkZJ2Ir7qyY48VZ+g==}
 
@@ -5116,15 +5085,9 @@ packages:
     peerDependencies:
       vitest: 2.1.1
 
-  '@vitest/utils@2.0.5':
-    resolution: {integrity: sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==}
-
   '@vitest/utils@2.1.1':
     resolution: {integrity: sha512-Y6Q9TsI+qJ2CC0ZKj6VBb+T8UPz593N113nnUykqwANqhgf3QkZeHFlusgKLTqrnVHbj/XDKZcDHol+dxVT+rQ==}
 
-  '@vitest/utils@2.1.5':
-    resolution: {integrity: sha512-yfj6Yrp0Vesw2cwJbP+cl04OC+IHFsuQsrsJBL9pyGeQXE56v1UAOQco+SR55Vf1nQzfV0QJg1Qum7AaWUwwYg==}
-
   '@webassemblyjs/ast@1.14.1':
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
 
@@ -17669,15 +17632,6 @@ snapshots:
       '@storybook/global': 5.0.0
       storybook: 8.4.4(prettier@3.3.3)
 
-  '@storybook/addon-interactions@8.4.4(storybook@8.4.4(prettier@3.3.3))':
-    dependencies:
-      '@storybook/global': 5.0.0
-      '@storybook/instrumenter': 8.4.4(storybook@8.4.4(prettier@3.3.3))
-      '@storybook/test': 8.4.4(storybook@8.4.4(prettier@3.3.3))
-      polished: 4.3.1
-      storybook: 8.4.4(prettier@3.3.3)
-      ts-dedent: 2.2.0
-
   '@storybook/addon-measure@8.4.4(storybook@8.4.4(prettier@3.3.3))':
     dependencies:
       '@storybook/global': 5.0.0
@@ -17846,12 +17800,6 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/instrumenter@8.4.4(storybook@8.4.4(prettier@3.3.3))':
-    dependencies:
-      '@storybook/global': 5.0.0
-      '@vitest/utils': 2.1.5
-      storybook: 8.4.4(prettier@3.3.3)
-
   '@storybook/manager-api@8.4.4(storybook@8.4.4(prettier@3.3.3))':
     dependencies:
       storybook: 8.4.4(prettier@3.3.3)
@@ -17866,18 +17814,6 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       storybook: 8.4.4(prettier@3.3.3)
 
-  '@storybook/test@8.4.4(storybook@8.4.4(prettier@3.3.3))':
-    dependencies:
-      '@storybook/csf': 0.1.11
-      '@storybook/global': 5.0.0
-      '@storybook/instrumenter': 8.4.4(storybook@8.4.4(prettier@3.3.3))
-      '@testing-library/dom': 10.4.0
-      '@testing-library/jest-dom': 6.5.0
-      '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0)
-      '@vitest/expect': 2.0.5
-      '@vitest/spy': 2.0.5
-      storybook: 8.4.4(prettier@3.3.3)
-
   '@storybook/theming@8.4.4(storybook@8.4.4(prettier@3.3.3))':
     dependencies:
       storybook: 8.4.4(prettier@3.3.3)
@@ -18009,16 +17945,6 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/jest-dom@6.5.0':
-    dependencies:
-      '@adobe/css-tools': 4.4.1
-      aria-query: 5.3.2
-      chalk: 3.0.0
-      css.escape: 1.5.1
-      dom-accessibility-api: 0.6.3
-      lodash: 4.17.21
-      redent: 3.0.0
-
   '@testing-library/jest-dom@6.6.3':
     dependencies:
       '@adobe/css-tools': 4.4.1
@@ -18711,13 +18637,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/expect@2.0.5':
-    dependencies:
-      '@vitest/spy': 2.0.5
-      '@vitest/utils': 2.0.5
-      chai: 5.1.2
-      tinyrainbow: 1.2.0
-
   '@vitest/expect@2.1.1':
     dependencies:
       '@vitest/spy': 2.1.1
@@ -18733,10 +18652,6 @@ snapshots:
     optionalDependencies:
       vite: 5.4.8(@types/node@22.6.2)(less@4.2.0)(sass@1.81.0)(stylus@0.64.0)(terser@5.31.6)
 
-  '@vitest/pretty-format@2.0.5':
-    dependencies:
-      tinyrainbow: 1.2.0
-
   '@vitest/pretty-format@2.1.1':
     dependencies:
       tinyrainbow: 1.2.0
@@ -18756,10 +18671,6 @@ snapshots:
       magic-string: 0.30.13
       pathe: 1.1.2
 
-  '@vitest/spy@2.0.5':
-    dependencies:
-      tinyspy: 3.0.2
-
   '@vitest/spy@2.1.1':
     dependencies:
       tinyspy: 3.0.2
@@ -18775,25 +18686,12 @@ snapshots:
       tinyrainbow: 1.2.0
       vitest: 2.1.1(@types/node@22.6.2)(@vitest/ui@2.1.1)(jsdom@25.0.1)(less@4.2.0)(sass@1.81.0)(stylus@0.64.0)(terser@5.31.6)
 
-  '@vitest/utils@2.0.5':
-    dependencies:
-      '@vitest/pretty-format': 2.0.5
-      estree-walker: 3.0.3
-      loupe: 3.1.2
-      tinyrainbow: 1.2.0
-
   '@vitest/utils@2.1.1':
     dependencies:
       '@vitest/pretty-format': 2.1.1
       loupe: 3.1.2
       tinyrainbow: 1.2.0
 
-  '@vitest/utils@2.1.5':
-    dependencies:
-      '@vitest/pretty-format': 2.1.5
-      loupe: 3.1.2
-      tinyrainbow: 1.2.0
-
   '@webassemblyjs/ast@1.14.1':
     dependencies:
       '@webassemblyjs/helper-numbers': 1.13.2