[CL-707] Migrate CL codebase to signals (#15340)

libs/components/src/callout/callout.component.html

@@ -3,12 +3,12 @@
   [ngClass]="calloutClass"
   [attr.aria-labelledby]="titleId"
 >
-  @if (title) {
+  @if (titleComputed(); as title) {
     <header
       id="{{ titleId }}"
       class="tw-mb-1 tw-mt-0 tw-text-base tw-font-semibold tw-flex tw-gap-2 tw-items-start"
     >
-      @if (icon) {
+      @if (iconComputed(); as icon) {
         <i
           class="bwi !tw-text-main tw-relative tw-top-[3px]"
           [ngClass]="[icon]"

libs/components/src/callout/callout.component.spec.ts

@@ -30,31 +30,31 @@ describe("Callout", () => {
 
   describe("default state", () => {
     it("success", () => {
-      component.type = "success";
+      fixture.componentRef.setInput("type", "success");
       fixture.detectChanges();
-      expect(component.title).toBeUndefined();
-      expect(component.icon).toBe("bwi-check-circle");
+      expect(component.titleComputed()).toBeUndefined();
+      expect(component.iconComputed()).toBe("bwi-check-circle");
     });
 
     it("info", () => {
-      component.type = "info";
+      fixture.componentRef.setInput("type", "info");
       fixture.detectChanges();
-      expect(component.title).toBeUndefined();
-      expect(component.icon).toBe("bwi-info-circle");
+      expect(component.titleComputed()).toBeUndefined();
+      expect(component.iconComputed()).toBe("bwi-info-circle");
     });
 
     it("warning", () => {
-      component.type = "warning";
+      fixture.componentRef.setInput("type", "warning");
       fixture.detectChanges();
-      expect(component.title).toBe("Warning");
-      expect(component.icon).toBe("bwi-exclamation-triangle");
+      expect(component.titleComputed()).toBe("Warning");
+      expect(component.iconComputed()).toBe("bwi-exclamation-triangle");
     });
 
     it("danger", () => {
-      component.type = "danger";
+      fixture.componentRef.setInput("type", "danger");
       fixture.detectChanges();
-      expect(component.title).toBe("Error");
-      expect(component.icon).toBe("bwi-error");
+      expect(component.titleComputed()).toBe("Error");
+      expect(component.iconComputed()).toBe("bwi-error");
     });
   });
 });

libs/components/src/callout/callout.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, Input, OnInit } from "@angular/core";
+import { Component, computed, input } from "@angular/core";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
@@ -34,24 +34,28 @@ let nextId = 0;
   templateUrl: "callout.component.html",
   imports: [SharedModule, TypographyModule],
 })
-export class CalloutComponent implements OnInit {
-  @Input() type: CalloutTypes = "info";
-  @Input() icon: string;
-  @Input() title: string;
-  @Input() useAlertRole = false;
+export class CalloutComponent {
+  readonly type = input<CalloutTypes>("info");
+  readonly icon = input<string>();
+  readonly title = input<string>();
+  readonly useAlertRole = input(false);
+  readonly iconComputed = computed(() => this.icon() ?? defaultIcon[this.type()]);
+  readonly titleComputed = computed(() => {
+    const title = this.title();
+    const type = this.type();
+    if (title == null && defaultI18n[type] != null) {
+      return this.i18nService.t(defaultI18n[type]);
+    }
+
+    return title;
+  });
+
   protected titleId = `bit-callout-title-${nextId++}`;
 
   constructor(private i18nService: I18nService) {}
 
-  ngOnInit() {
-    this.icon ??= defaultIcon[this.type];
-    if (this.title == null && defaultI18n[this.type] != null) {
-      this.title = this.i18nService.t(defaultI18n[this.type]);
-    }
-  }
-
   get calloutClass() {
-    switch (this.type) {
+    switch (this.type()) {
       case "danger":
         return "tw-bg-danger-100";
       case "info":

libs/components/src/callout/callout.stories.ts

@@ -68,3 +68,18 @@ export const Danger: Story = {
     type: "danger",
   },
 };
+
+export const CustomIcon: Story = {
+  ...Info,
+  args: {
+    ...Info.args,
+    icon: "bwi-star",
+  },
+};
+
+export const NoTitle: Story = {
+  ...Info,
+  args: {
+    icon: "bwi-star",
+  },
+};