[CL-946] Migrate ToggleGroup to OnPush (#17718)

Migrates the ToggleGroup and Toggle components to use OnPush.

libs/components/src/toggle-group/toggle.component.spec.ts

@@ -1,7 +1,9 @@
-import { Component, DebugElement } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DebugElement, signal } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 
+import { BadgeModule } from "../badge";
+
 import { ToggleGroupComponent } from "./toggle-group.component";
 import { ToggleGroupModule } from "./toggle-group.module";
 
@@ -45,8 +47,45 @@ describe("Toggle", () => {
   });
 });
 
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+describe("Toggle with badge content", () => {
+  let fixtureWithBadge: ComponentFixture<TestComponentWithBadgeComponent>;
+  let badgeContainers: DebugElement[];
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [TestComponentWithBadgeComponent],
+    });
+
+    await TestBed.compileComponents();
+    fixtureWithBadge = TestBed.createComponent(TestComponentWithBadgeComponent);
+    fixtureWithBadge.detectChanges();
+    badgeContainers = fixtureWithBadge.debugElement.queryAll(By.css(".tw-shrink-0"));
+  });
+
+  it("should hide badge container when no badge content is projected", () => {
+    // First toggle has no badge
+    expect(badgeContainers[0].nativeElement.hidden).toBe(true);
+
+    // Second toggle has a badge
+    expect(badgeContainers[1].nativeElement.hidden).toBe(false);
+
+    // Third toggle has no badge
+    expect(badgeContainers[2].nativeElement.hidden).toBe(true);
+  });
+
+  it("should show badge container when badge content is projected", () => {
+    const badgeElement = fixtureWithBadge.debugElement.query(By.css("[bitBadge]"));
+    expect(badgeElement).toBeTruthy();
+    expect(badgeElement.nativeElement.textContent.trim()).toBe("2");
+  });
+
+  it("should render badge content correctly", () => {
+    const badges = fixtureWithBadge.debugElement.queryAll(By.css("[bitBadge]"));
+    expect(badges.length).toBe(1);
+    expect(badges[0].nativeElement.textContent.trim()).toBe("2");
+  });
+});
+
 @Component({
   selector: "test-component",
   template: `
@@ -56,7 +95,24 @@ describe("Toggle", () => {
     </bit-toggle-group>
   `,
   imports: [ToggleGroupModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 class TestComponent {
-  selected = 0;
+  readonly selected = signal(0);
+}
+
+@Component({
+  selector: "test-component-with-badge",
+  template: `
+    <bit-toggle-group [(selected)]="selected">
+      <bit-toggle [value]="0">Zero</bit-toggle>
+      <bit-toggle [value]="1">One <span bitBadge variant="info">2</span></bit-toggle>
+      <bit-toggle [value]="2">Two</bit-toggle>
+    </bit-toggle-group>
+  `,
+  imports: [ToggleGroupModule, BadgeModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class TestComponentWithBadgeComponent {
+  readonly selected = signal(0);
 }