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

libs/components/src/toast/toast.component.html

@@ -2,13 +2,13 @@
   class="tw-mb-1 tw-min-w-[--bit-toast-width] tw-text-main tw-flex tw-flex-col tw-justify-between tw-rounded-md tw-pointer-events-auto tw-cursor-default tw-overflow-hidden tw-shadow-lg {{
     bgColor
   }}"
-  [attr.role]="variant === 'error' ? 'alert' : null"
+  [attr.role]="variant() === 'error' ? 'alert' : null"
 >
   <div class="tw-flex tw-items-center tw-gap-4 tw-px-2 tw-pb-1 tw-pt-2">
     <i aria-hidden="true" class="bwi tw-text-xl tw-py-1.5 tw-px-2.5 {{ iconClass }}"></i>
     <div>
-      <span class="tw-sr-only">{{ variant | i18n }}</span>
-      @if (title) {
+      <span class="tw-sr-only">{{ variant() | i18n }}</span>
+      @if (title(); as title) {
         <p data-testid="toast-title" class="tw-font-semibold tw-mb-0">{{ title }}</p>
       }
       @for (m of messageArray; track m) {
@@ -26,5 +26,5 @@
       (click)="this.onClose.emit()"
     ></button>
   </div>
-  <div class="tw-h-1 tw-w-full tw-bg-text-main/30" [style.width]="progressWidth + '%'"></div>
+  <div class="tw-h-1 tw-w-full tw-bg-text-main/30" [style.width]="progressWidth() + '%'"></div>
 </div>

libs/components/src/toast/toast.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Output, input } from "@angular/core";
 
 import { IconButtonModule } from "../icon-button";
 import { SharedModule } from "../shared";
@@ -31,36 +31,36 @@ const variants: Record<ToastVariant, { icon: string; bgColor: string }> = {
   imports: [SharedModule, IconButtonModule, TypographyModule],
 })
 export class ToastComponent {
-  @Input() variant: ToastVariant = "info";
+  readonly variant = input<ToastVariant>("info");
 
   /**
    * The message to display
    *
    * Pass an array to render multiple paragraphs.
    **/
-  @Input({ required: true })
-  message!: string | string[];
+  readonly message = input.required<string | string[]>();
 
   /** An optional title to display over the message. */
-  @Input() title?: string;
+  readonly title = input<string>();
 
   /**
    * The percent width of the progress bar, from 0-100
    **/
-  @Input() progressWidth = 0;
+  readonly progressWidth = input(0);
 
   /** Emits when the user presses the close button */
   @Output() onClose = new EventEmitter<void>();
 
   protected get iconClass(): string {
-    return variants[this.variant].icon;
+    return variants[this.variant()].icon;
   }
 
   protected get bgColor(): string {
-    return variants[this.variant].bgColor;
+    return variants[this.variant()].bgColor;
   }
 
   protected get messageArray(): string[] {
-    return Array.isArray(this.message) ? this.message : [this.message];
+    const message = this.message();
+    return Array.isArray(message) ? message : [message];
   }
 }

libs/components/src/toast/toast.service.ts

@@ -11,7 +11,10 @@ export type ToastOptions = {
    * The duration the toast will persist in milliseconds
    **/
   timeout?: number;
-} & Pick<ToastComponent, "message" | "variant" | "title">;
+  message: ReturnType<ToastComponent["message"]>;
+  variant?: ReturnType<ToastComponent["variant"]>;
+  title?: ReturnType<ToastComponent["title"]>;
+};
 
 /**
  * Presents toast notifications

libs/components/src/toast/toast.stories.ts

@@ -34,8 +34,13 @@ export default {
 
   decorators: [
     moduleMetadata({
-      imports: [CommonModule, BrowserAnimationsModule, ButtonModule, ToastModule],
-      declarations: [ToastServiceExampleComponent],
+      imports: [
+        CommonModule,
+        BrowserAnimationsModule,
+        ButtonModule,
+        ToastModule,
+        ToastServiceExampleComponent,
+      ],
     }),
     applicationConfig({
       providers: [