From 02c2e9a6ba60343cb8bdfc7cf845b0178ba2d569 Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartian.com>
Date: Wed, 2 Jul 2025 10:49:36 -0400
Subject: [PATCH] revert banner,radio,toggle

---
 libs/components/src/banner/banner.component.html  |  6 +++---
 libs/components/src/banner/banner.component.ts    | 15 ++++++---------
 .../src/radio-button/radio-button.component.html  |  4 ++--
 .../src/radio-button/radio-button.component.ts    | 15 ++++++---------
 .../src/radio-button/radio-group.component.ts     |  9 ++-------
 .../src/radio-button/radio-input.component.ts     |  7 -------
 .../src/toggle-group/toggle-group.component.ts    |  7 ++-----
 .../src/toggle-group/toggle.component.ts          |  8 ++++----
 8 files changed, 25 insertions(+), 46 deletions(-)

diff --git a/libs/components/src/banner/banner.component.html b/libs/components/src/banner/banner.component.html
index 6135141e0f9..6f271d587b5 100644
--- a/libs/components/src/banner/banner.component.html
+++ b/libs/components/src/banner/banner.component.html
@@ -1,8 +1,8 @@
 <div
   class="tw-flex tw-items-center tw-gap-2 tw-p-2 tw-ps-4 tw-text-main tw-border-transparent tw-bg-clip-padding tw-border-solid tw-border-b tw-border-0"
   [ngClass]="bannerClass"
-  [attr.role]="useAlertRole() ? 'status' : null"
-  [attr.aria-live]="useAlertRole() ? 'polite' : null"
+  [attr.role]="useAlertRole ? 'status' : null"
+  [attr.aria-live]="useAlertRole ? 'polite' : null"
 >
   @if (icon) {
     <i class="bwi tw-align-middle tw-text-base" [ngClass]="icon" aria-hidden="true"></i>
@@ -12,7 +12,7 @@
     <ng-content></ng-content>
   </span>
   <!-- Overriding hover and focus-visible colors for a11y against colored background -->
-  @if (showClose()) {
+  @if (showClose) {
     <button
       class="hover:tw-border-text-main focus-visible:before:tw-ring-text-main"
       type="button"
diff --git a/libs/components/src/banner/banner.component.ts b/libs/components/src/banner/banner.component.ts
index 3d687b3d707..02d55230ce2 100644
--- a/libs/components/src/banner/banner.component.ts
+++ b/libs/components/src/banner/banner.component.ts
@@ -1,7 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { CommonModule } from "@angular/common";
-import { Component, Input, OnInit, Output, EventEmitter, input } from "@angular/core";
+import { Component, Input, OnInit, Output, EventEmitter } from "@angular/core";
 
 import { I18nPipe } from "@bitwarden/ui-common";
 
@@ -31,22 +31,19 @@ const defaultIcon: Record<BannerType, string> = {
   imports: [CommonModule, IconButtonModule, I18nPipe],
 })
 export class BannerComponent implements OnInit {
-  readonly bannerType = input<BannerType>("info");
-  // TODO: Skipped for migration because:
-  //  This input is used in a control flow expression (e.g. `@if` or `*ngIf`)
-  //  and migrating would break narrowing currently.
+  @Input("bannerType") bannerType: BannerType = "info";
   @Input() icon: string;
-  readonly useAlertRole = input(true);
-  readonly showClose = input(true);
+  @Input() useAlertRole = true;
+  @Input() showClose = true;
 
   @Output() onClose = new EventEmitter<void>();
 
   ngOnInit(): void {
-    this.icon ??= defaultIcon[this.bannerType()];
+    this.icon ??= defaultIcon[this.bannerType];
   }
 
   get bannerClass() {
-    switch (this.bannerType()) {
+    switch (this.bannerType) {
       case "danger":
         return "tw-bg-danger-100 tw-border-b-danger-700";
       case "info":
diff --git a/libs/components/src/radio-button/radio-button.component.html b/libs/components/src/radio-button/radio-button.component.html
index 48413301848..04ed6189a58 100644
--- a/libs/components/src/radio-button/radio-button.component.html
+++ b/libs/components/src/radio-button/radio-button.component.html
@@ -3,8 +3,8 @@
     type="radio"
     bitRadio
     [id]="inputId"
-    [disabled]="groupDisabled || disabled()"
-    [value]="value()"
+    [disabled]="groupDisabled || disabled"
+    [value]="value"
     [checked]="selected"
     (change)="onInputChange()"
     (blur)="onBlur()"
diff --git a/libs/components/src/radio-button/radio-button.component.ts b/libs/components/src/radio-button/radio-button.component.ts
index 775c5485676..a319f86840b 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";
 
@@ -13,16 +13,13 @@ let nextId = 0;
   imports: [FormControlModule, RadioInputComponent],
 })
 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++}`;
   @HostBinding("class") get classList() {
     return [this.block ? "tw-block" : "tw-inline-block", "tw-mb-1", "[&_bit-hint]:tw-mt-0"];
   }
 
-  readonly value = input<unknown>(undefined);
-  readonly disabled = input(false);
+  @Input() value: unknown;
+  @Input() disabled = false;
 
   constructor(private groupComponent: RadioGroupComponent) {}
 
@@ -35,7 +32,7 @@ export class RadioButtonComponent {
   }
 
   get selected() {
-    return this.groupComponent.selected === this.value();
+    return this.groupComponent.selected === this.value;
   }
 
   get groupDisabled() {
@@ -43,11 +40,11 @@ export class RadioButtonComponent {
   }
 
   get block() {
-    return this.groupComponent.block();
+    return this.groupComponent.block;
   }
 
   protected onInputChange() {
-    this.groupComponent.onInputChange(this.value());
+    this.groupComponent.onInputChange(this.value);
   }
 
   protected onBlur() {
diff --git a/libs/components/src/radio-button/radio-group.component.ts b/libs/components/src/radio-button/radio-group.component.ts
index ddea2f8d645..51c7c5e9c92 100644
--- a/libs/components/src/radio-button/radio-group.component.ts
+++ b/libs/components/src/radio-button/radio-group.component.ts
@@ -1,7 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { NgTemplateOutlet } from "@angular/common";
-import { Component, ContentChild, HostBinding, Input, Optional, Self, input } from "@angular/core";
+import { Component, ContentChild, HostBinding, Input, Optional, Self } from "@angular/core";
 import { ControlValueAccessor, NgControl, Validators } from "@angular/forms";
 
 import { I18nPipe } from "@bitwarden/ui-common";
@@ -20,8 +20,6 @@ export class RadioGroupComponent implements ControlValueAccessor {
   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();
   }
@@ -29,12 +27,9 @@ export class RadioGroupComponent implements ControlValueAccessor {
     this._name = value;
   }
 
-  readonly block = input(false);
+  @Input() block = false;
 
   @HostBinding("attr.role") role = "radiogroup";
-  // TODO: Skipped for migration because:
-  //  This input is used in combination with `@HostBinding` and migrating would
-  //  break.
   @HostBinding("attr.id") @Input() id = `bit-radio-group-${nextId++}`;
   @HostBinding("class") classList = ["tw-block", "tw-mb-4"];
 
diff --git a/libs/components/src/radio-button/radio-input.component.ts b/libs/components/src/radio-button/radio-input.component.ts
index 0f2b990c91f..53bda5566b7 100644
--- a/libs/components/src/radio-button/radio-input.component.ts
+++ b/libs/components/src/radio-button/radio-input.component.ts
@@ -13,9 +13,6 @@ let nextId = 0;
   providers: [{ provide: BitFormControlAbstraction, useExisting: RadioInputComponent }],
 })
 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++}`;
 
   @HostBinding("class")
@@ -77,8 +74,6 @@ export class RadioInputComponent implements BitFormControlAbstraction {
 
   constructor(@Optional() @Self() private ngControl?: NgControl) {}
 
-  // TODO: Skipped for migration because:
-  //  Accessor inputs cannot be migrated as they are too complex.
   @HostBinding()
   @Input()
   get disabled() {
@@ -89,8 +84,6 @@ export class RadioInputComponent implements BitFormControlAbstraction {
   }
   private _disabled: boolean;
 
-  // TODO: Skipped for migration because:
-  //  Accessor inputs cannot be migrated as they are too complex.
   @Input()
   get required() {
     return (
diff --git a/libs/components/src/toggle-group/toggle-group.component.ts b/libs/components/src/toggle-group/toggle-group.component.ts
index dcdfa8e0861..0b4cb059216 100644
--- a/libs/components/src/toggle-group/toggle-group.component.ts
+++ b/libs/components/src/toggle-group/toggle-group.component.ts
@@ -5,7 +5,6 @@ import {
   HostBinding,
   Input,
   Output,
-  input,
 } from "@angular/core";
 
 let nextId = 0;
@@ -18,16 +17,14 @@ export class ToggleGroupComponent<TValue = unknown> {
   private id = nextId++;
   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({ transform: booleanAttribute }) fullWidth?: boolean;
   @Input() selected?: TValue;
   @Output() selectedChange = new EventEmitter<TValue>();
 
   @HostBinding("attr.role") role = "radiogroup";
   @HostBinding("class")
   get classList() {
-    return ["tw-flex"].concat(this.fullWidth() ? ["tw-w-full", "[&>*]:tw-flex-1"] : []);
+    return ["tw-flex"].concat(this.fullWidth ? ["tw-w-full", "[&>*]:tw-flex-1"] : []);
   }
 
   onInputInteraction(value: TValue) {
diff --git a/libs/components/src/toggle-group/toggle.component.ts b/libs/components/src/toggle-group/toggle.component.ts
index 1e8cf6735d2..03bd8e43404 100644
--- a/libs/components/src/toggle-group/toggle.component.ts
+++ b/libs/components/src/toggle-group/toggle.component.ts
@@ -7,9 +7,9 @@ import {
   Component,
   ElementRef,
   HostBinding,
+  Input,
   signal,
   ViewChild,
-  input,
 } from "@angular/core";
 
 import { ToggleGroupComponent } from "./toggle-group.component";
@@ -24,7 +24,7 @@ let nextId = 0;
 export class ToggleComponent<TValue> implements AfterContentChecked, AfterViewInit {
   id = nextId++;
 
-  readonly value = input<TValue>(undefined);
+  @Input() value?: TValue;
   @ViewChild("labelContent") labelContent: ElementRef<HTMLSpanElement>;
   @ViewChild("bitBadgeContainer") bitBadgeContainer: ElementRef<HTMLSpanElement>;
 
@@ -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() {
@@ -95,7 +95,7 @@ export class ToggleComponent<TValue> implements AfterContentChecked, AfterViewIn
   }
 
   onInputInteraction() {
-    this.groupComponent.onInputInteraction(this.value());
+    this.groupComponent.onInputInteraction(this.value);
   }
 
   ngAfterContentChecked() {