From e25d7cf45e1076f92ff5140fbf9ffdf4c0e9631d Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Wed, 25 Jun 2025 10:20:53 -0400
Subject: [PATCH] finish migrating icon button

---
 .../form-field/password-input-toggle.directive.ts  |  4 ++--
 .../src/form-field/password-input-toggle.spec.ts   |  6 +++---
 libs/components/src/form-field/prefix.directive.ts |  2 +-
 libs/components/src/form-field/suffix.directive.ts |  2 +-
 .../src/icon-button/icon-button.component.ts       | 14 +++++---------
 5 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/libs/components/src/form-field/password-input-toggle.directive.ts b/libs/components/src/form-field/password-input-toggle.directive.ts
index 931928aa5cb..c0bd5ab41e5 100644
--- a/libs/components/src/form-field/password-input-toggle.directive.ts
+++ b/libs/components/src/form-field/password-input-toggle.directive.ts
@@ -60,11 +60,11 @@ export class BitPasswordInputToggleDirective implements AfterContentInit, OnChan
     if (this.formField.input?.type) {
       this.toggled.set(this.formField.input.type() !== "password");
     }
-    this.button.icon = this.icon;
+    this.button.icon.set(this.icon);
   }
 
   private update() {
-    this.button.icon = this.icon;
+    this.button.icon.set(this.icon);
     if (this.formField.input?.type != null) {
       this.formField.input.type.set(this.toggled() ? "text" : "password");
       this.formField?.input?.spellcheck?.set(this.toggled() ? false : undefined);
diff --git a/libs/components/src/form-field/password-input-toggle.spec.ts b/libs/components/src/form-field/password-input-toggle.spec.ts
index 03c7507cead..6b4c621f65c 100644
--- a/libs/components/src/form-field/password-input-toggle.spec.ts
+++ b/libs/components/src/form-field/password-input-toggle.spec.ts
@@ -60,7 +60,7 @@ describe("PasswordInputToggle", () => {
 
   describe("initial state", () => {
     it("has correct icon", () => {
-      expect(button.icon).toBe("bwi-eye");
+      expect(button.icon()).toBe("bwi-eye");
     });
 
     it("input is type password", () => {
@@ -78,7 +78,7 @@ describe("PasswordInputToggle", () => {
     });
 
     it("has correct icon", () => {
-      expect(button.icon).toBe("bwi-eye-slash");
+      expect(button.icon()).toBe("bwi-eye-slash");
     });
 
     it("input is type text", () => {
@@ -97,7 +97,7 @@ describe("PasswordInputToggle", () => {
     });
 
     it("has correct icon", () => {
-      expect(button.icon).toBe("bwi-eye");
+      expect(button.icon()).toBe("bwi-eye");
     });
 
     it("input is type password", () => {
diff --git a/libs/components/src/form-field/prefix.directive.ts b/libs/components/src/form-field/prefix.directive.ts
index 58fb5f8970a..b9ba6d61feb 100644
--- a/libs/components/src/form-field/prefix.directive.ts
+++ b/libs/components/src/form-field/prefix.directive.ts
@@ -15,7 +15,7 @@ export class BitPrefixDirective implements OnInit {
 
   ngOnInit() {
     if (this.iconButtonComponent) {
-      this.iconButtonComponent.size = "small";
+      this.iconButtonComponent.size.set("small");
     }
   }
 }
diff --git a/libs/components/src/form-field/suffix.directive.ts b/libs/components/src/form-field/suffix.directive.ts
index 6d0118723bf..8afda8761ec 100644
--- a/libs/components/src/form-field/suffix.directive.ts
+++ b/libs/components/src/form-field/suffix.directive.ts
@@ -15,7 +15,7 @@ export class BitSuffixDirective implements OnInit {
 
   ngOnInit() {
     if (this.iconButtonComponent) {
-      this.iconButtonComponent.size = "small";
+      this.iconButtonComponent.size.set("small");
     }
   }
 }
diff --git a/libs/components/src/icon-button/icon-button.component.ts b/libs/components/src/icon-button/icon-button.component.ts
index ae4c53a37f3..d3944cd013c 100644
--- a/libs/components/src/icon-button/icon-button.component.ts
+++ b/libs/components/src/icon-button/icon-button.component.ts
@@ -1,7 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { NgClass } from "@angular/common";
-import { Component, computed, ElementRef, HostBinding, Input, model, input } from "@angular/core";
+import { Component, computed, ElementRef, HostBinding, model, input } from "@angular/core";
 import { toObservable, toSignal } from "@angular/core/rxjs-interop";
 import { debounce, interval } from "rxjs";
 
@@ -167,15 +167,11 @@ const sizes: Record<IconButtonSize, string[]> = {
   },
 })
 export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableElement {
-  // TODO: Skipped for migration because:
-  //  Your application code writes to the input. This prevents migration.
-  @Input("bitIconButton") icon: string;
+  icon = model<string>(undefined, { alias: "bitIconButton" });
 
   readonly buttonType = input<IconButtonType>("main");
 
-  // TODO: Skipped for migration because:
-  //  Your application code writes to the input. This prevents migration.
-  @Input() size: IconButtonSize = "default";
+  size = model<IconButtonSize>("default");
 
   @HostBinding("class") get classList() {
     return [
@@ -188,14 +184,14 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
       "focus:tw-outline-none",
     ]
       .concat(styles[this.buttonType()])
-      .concat(sizes[this.size])
+      .concat(sizes[this.size()])
       .concat(
         this.showDisabledStyles() || this.disabled() ? disabledStyles[this.buttonType()] : [],
       );
   }
 
   get iconClass() {
-    return [this.icon, "!tw-m-0"];
+    return [this.icon(), "!tw-m-0"];
   }
 
   protected disabledAttr = computed(() => {