From 1872e59cecabee0fc7923ac2d807a72459e51ab9 Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Tue, 24 Jun 2025 15:46:24 -0400
Subject: [PATCH] continue migrating toggle-group module

---
 .../src/toggle-group/toggle-group.component.ts      |  8 +++-----
 .../src/toggle-group/toggle.component.spec.ts       | 13 ++++++++-----
 .../components/src/toggle-group/toggle.component.ts |  2 +-
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/libs/components/src/toggle-group/toggle-group.component.ts b/libs/components/src/toggle-group/toggle-group.component.ts
index dcdfa8e0861..d21670130e1 100644
--- a/libs/components/src/toggle-group/toggle-group.component.ts
+++ b/libs/components/src/toggle-group/toggle-group.component.ts
@@ -3,9 +3,9 @@ import {
   Component,
   EventEmitter,
   HostBinding,
-  Input,
   Output,
   input,
+  model,
 } from "@angular/core";
 
 let nextId = 0;
@@ -19,9 +19,7 @@ export class ToggleGroupComponent<TValue = unknown> {
   name = `bit-toggle-group-${this.id}`;
 
   readonly fullWidth = input<boolean, unknown>(undefined, { transform: booleanAttribute });
-  // TODO: Skipped for migration because:
-  //  Your application code writes to the input. This prevents migration.
-  @Input() selected?: TValue;
+  selected = model<TValue>();
   @Output() selectedChange = new EventEmitter<TValue>();
 
   @HostBinding("attr.role") role = "radiogroup";
@@ -31,7 +29,7 @@ export class ToggleGroupComponent<TValue = unknown> {
   }
 
   onInputInteraction(value: TValue) {
-    this.selected = value;
+    this.selected.set(value);
     this.selectedChange.emit(value);
   }
 }
diff --git a/libs/components/src/toggle-group/toggle.component.spec.ts b/libs/components/src/toggle-group/toggle.component.spec.ts
index c26ea3ed6a4..3042966ab58 100644
--- a/libs/components/src/toggle-group/toggle.component.spec.ts
+++ b/libs/components/src/toggle-group/toggle.component.spec.ts
@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, model } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 
@@ -39,7 +39,7 @@ describe("Button", () => {
     testAppComponent.value = "value";
     fixture.detectChanges();
 
-    mockGroupComponent.selected = "value";
+    mockGroupComponent.selected.set("value");
     fixture.detectChanges();
 
     expect(radioButton.checked).toBe(true);
@@ -49,16 +49,19 @@ describe("Button", () => {
     testAppComponent.value = "value";
     fixture.detectChanges();
 
-    mockGroupComponent.selected = "nonMatchingValue";
+    mockGroupComponent.selected.set("nonMatchingValue");
     fixture.detectChanges();
 
     expect(radioButton.checked).toBe(false);
   });
 });
 
-class MockedButtonGroupComponent implements Partial<ToggleGroupComponent> {
+@Component({
+  selector: "mock-button-group",
+})
+class MockedButtonGroupComponent implements Partial<ToggleGroupComponent<string>> {
   onInputInteraction = jest.fn();
-  selected: unknown = null;
+  selected = model<string>();
 }
 
 @Component({
diff --git a/libs/components/src/toggle-group/toggle.component.ts b/libs/components/src/toggle-group/toggle.component.ts
index 1e8cf6735d2..7ddca5cad49 100644
--- a/libs/components/src/toggle-group/toggle.component.ts
+++ b/libs/components/src/toggle-group/toggle.component.ts
@@ -41,7 +41,7 @@ export class ToggleComponent<TValue> implements AfterContentChecked, AfterViewIn
   }
 
   get selected() {
-    return this.groupComponent.selected === this.value();
+    return this.groupComponent.selected() === this.value();
   }
 
   get inputClasses() {