From 132bb7e1b5be64ea6ecab17b6e376b7c49040fc6 Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Tue, 24 Jun 2025 14:29:48 -0400
Subject: [PATCH] finish migrating radio-button module

---
 .../src/radio-button/radio-button.component.ts     | 14 +++++++-------
 .../src/radio-button/radio-group.component.ts      | 12 +++---------
 .../src/radio-button/radio-input.component.ts      | 10 +++++-----
 3 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/libs/components/src/radio-button/radio-button.component.ts b/libs/components/src/radio-button/radio-button.component.ts
index 775c5485676..f314eea534c 100644
--- a/libs/components/src/radio-button/radio-button.component.ts
+++ b/libs/components/src/radio-button/radio-button.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostBinding, Input, input } from "@angular/core";
+import { Component, HostBinding, input } from "@angular/core";
 
 import { FormControlModule } from "../form-control/form-control.module";
 
@@ -11,12 +11,12 @@ let nextId = 0;
   selector: "bit-radio-button",
   templateUrl: "radio-button.component.html",
   imports: [FormControlModule, RadioInputComponent],
+  host: {
+    "[id]": "this.id()",
+  },
 })
 export class RadioButtonComponent {
-  // TODO: Skipped for migration because:
-  //  This input is used in combination with `@HostBinding` and migrating would
-  //  break.
-  @HostBinding("attr.id") @Input() id = `bit-radio-button-${nextId++}`;
+  readonly id = input(`bit-radio-button-${nextId++}`);
   @HostBinding("class") get classList() {
     return [this.block ? "tw-block" : "tw-inline-block", "tw-mb-1", "[&_bit-hint]:tw-mt-0"];
   }
@@ -27,11 +27,11 @@ export class RadioButtonComponent {
   constructor(private groupComponent: RadioGroupComponent) {}
 
   get inputId() {
-    return `${this.id}-input`;
+    return `${this.id()}-input`;
   }
 
   get name() {
-    return this.groupComponent.name;
+    return this.groupComponent.name();
   }
 
   get selected() {
diff --git a/libs/components/src/radio-button/radio-group.component.ts b/libs/components/src/radio-button/radio-group.component.ts
index ddea2f8d645..a76e4a77291 100644
--- a/libs/components/src/radio-button/radio-group.component.ts
+++ b/libs/components/src/radio-button/radio-group.component.ts
@@ -19,15 +19,9 @@ export class RadioGroupComponent implements ControlValueAccessor {
   selected: unknown;
   disabled = false;
 
-  private _name?: string;
-  // TODO: Skipped for migration because:
-  //  Accessor inputs cannot be migrated as they are too complex.
-  @Input() get name() {
-    return this._name ?? this.ngControl?.name?.toString();
-  }
-  set name(value: string) {
-    this._name = value;
-  }
+  readonly name = input(undefined, {
+    transform: (value: string | undefined) => value ?? this.ngControl?.name?.toString(),
+  });
 
   readonly block = input(false);
 
diff --git a/libs/components/src/radio-button/radio-input.component.ts b/libs/components/src/radio-button/radio-input.component.ts
index 0f2b990c91f..b36a0e7b00d 100644
--- a/libs/components/src/radio-button/radio-input.component.ts
+++ b/libs/components/src/radio-button/radio-input.component.ts
@@ -1,6 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { Component, HostBinding, Input, Optional, Self } from "@angular/core";
+import { Component, HostBinding, input, Input, Optional, Self } from "@angular/core";
 import { NgControl, Validators } from "@angular/forms";
 
 import { BitFormControlAbstraction } from "../form-control";
@@ -11,12 +11,12 @@ let nextId = 0;
   selector: "input[type=radio][bitRadio]",
   template: "",
   providers: [{ provide: BitFormControlAbstraction, useExisting: RadioInputComponent }],
+  host: {
+    "[id]": "this.id()",
+  },
 })
 export class RadioInputComponent implements BitFormControlAbstraction {
-  // TODO: Skipped for migration because:
-  //  This input is used in combination with `@HostBinding` and migrating would
-  //  break.
-  @HostBinding("attr.id") @Input() id = `bit-radio-input-${nextId++}`;
+  id = input(`bit-radio-input-${nextId++}`);
 
   @HostBinding("class")
   protected inputClasses = [