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

libs/components/src/anon-layout/anon-layout.component.html

@@ -6,7 +6,7 @@
   }"
 >
   <a
-    *ngIf="!hideLogo"
+    *ngIf="!hideLogo()"
     [routerLink]="['/']"
     class="tw-w-[128px] tw-block tw-mb-12 [&>*]:tw-align-top"
   >
@@ -14,29 +14,29 @@
   </a>
 
   <div class="tw-text-center tw-mb-4 sm:tw-mb-6 tw-mx-auto" [ngClass]="maxWidthClass">
-    <div *ngIf="!hideIcon" class="tw-w-24 sm:tw-w-28 md:tw-w-32 tw-mx-auto">
-      <bit-icon [icon]="icon"></bit-icon>
+    <div *ngIf="!hideIcon()" class="tw-w-24 sm:tw-w-28 md:tw-w-32 tw-mx-auto">
+      <bit-icon [icon]="icon()"></bit-icon>
     </div>
 
-    <ng-container *ngIf="title">
+    <ng-container *ngIf="title()">
       <!-- Small screens -->
       <h1 bitTypography="h3" class="tw-mt-2 sm:tw-hidden">
-        {{ title }}
+        {{ title() }}
       </h1>
       <!-- Medium to Larger screens -->
       <h1 bitTypography="h2" class="tw-mt-2 tw-hidden sm:tw-block">
-        {{ title }}
+        {{ title() }}
       </h1>
     </ng-container>
 
-    <div *ngIf="subtitle" class="tw-text-sm sm:tw-text-base">{{ subtitle }}</div>
+    <div *ngIf="subtitle()" class="tw-text-sm sm:tw-text-base">{{ subtitle() }}</div>
   </div>
 
   <div
     class="tw-grow tw-w-full tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
     [ngClass]="maxWidthClass"
   >
-    @if (hideCardWrapper) {
+    @if (hideCardWrapper()) {
       <div class="tw-mb-6 sm:tw-mb-10">
         <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
       </div>
@@ -50,11 +50,11 @@
     <ng-content select="[slot=secondary]"></ng-content>
   </div>
 
-  <footer *ngIf="!hideFooter" class="tw-text-center tw-mt-4 sm:tw-mt-6">
-    <div *ngIf="showReadonlyHostname" bitTypography="body2">
+  <footer *ngIf="!hideFooter()" class="tw-text-center tw-mt-4 sm:tw-mt-6">
+    <div *ngIf="showReadonlyHostname()" bitTypography="body2">
       {{ "accessing" | i18n }} {{ hostname }}
     </div>
-    <ng-container *ngIf="!showReadonlyHostname">
+    <ng-container *ngIf="!showReadonlyHostname()">
       <ng-content select="[slot=environment-selector]"></ng-content>
     </ng-container>
     <ng-container *ngIf="!hideYearAndVersion">

libs/components/src/anon-layout/anon-layout.component.ts

@@ -1,7 +1,15 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { CommonModule } from "@angular/common";
-import { Component, HostBinding, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core";
+import {
+  Component,
+  HostBinding,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+  input,
+  model,
+} from "@angular/core";
 import { RouterModule } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
@@ -29,21 +37,21 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
     return ["tw-h-full"];
   }
 
-  @Input() title: string;
-  @Input() subtitle: string;
-  @Input() icon: Icon;
-  @Input() showReadonlyHostname: boolean;
-  @Input() hideLogo: boolean = false;
-  @Input() hideFooter: boolean = false;
-  @Input() hideIcon: boolean = false;
-  @Input() hideCardWrapper: boolean = false;
+  readonly title = input<string>();
+  readonly subtitle = input<string>();
+  readonly icon = model<Icon>();
+  readonly showReadonlyHostname = input<boolean>(false);
+  readonly hideLogo = input<boolean>(false);
+  readonly hideFooter = input<boolean>(false);
+  readonly hideIcon = input<boolean>(false);
+  readonly hideCardWrapper = input<boolean>(false);
 
   /**
    * Max width of the anon layout title, subtitle, and content areas.
    *
    * @default 'md'
    */
-  @Input() maxWidth: AnonLayoutMaxWidth = "md";
+  readonly maxWidth = model<AnonLayoutMaxWidth>("md");
 
   protected logo = BitwardenLogo;
   protected year: string;
@@ -54,7 +62,8 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
   protected hideYearAndVersion = false;
 
   get maxWidthClass(): string {
-    switch (this.maxWidth) {
+    const maxWidth = this.maxWidth();
+    switch (maxWidth) {
       case "md":
         return "tw-max-w-md";
       case "lg":
@@ -78,19 +87,19 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
   }
 
   async ngOnInit() {
-    this.maxWidth = this.maxWidth ?? "md";
+    this.maxWidth.set(this.maxWidth() ?? "md");
     this.hostname = (await firstValueFrom(this.environmentService.environment$)).getHostname();
     this.version = await this.platformUtilsService.getApplicationVersion();
 
     // If there is no icon input, then use the default icon
-    if (this.icon == null) {
-      this.icon = AnonLayoutBitwardenShield;
+    if (this.icon() == null) {
+      this.icon.set(AnonLayoutBitwardenShield);
     }
   }
 
   async ngOnChanges(changes: SimpleChanges) {
     if (changes.maxWidth) {
-      this.maxWidth = changes.maxWidth.currentValue ?? "md";
+      this.maxWidth.set(changes.maxWidth.currentValue ?? "md");
     }
   }
 }

libs/components/src/anon-layout/anon-layout.stories.ts

@@ -19,17 +19,7 @@ class MockPlatformUtilsService implements Partial<PlatformUtilsService> {
   getClientType = () => ClientType.Web;
 }
 
-type StoryArgs = Pick<
-  AnonLayoutComponent,
-  | "title"
-  | "subtitle"
-  | "showReadonlyHostname"
-  | "hideCardWrapper"
-  | "hideIcon"
-  | "hideLogo"
-  | "hideFooter"
-  | "maxWidth"
-> & {
+type StoryArgs = AnonLayoutComponent & {
   contentLength: "normal" | "long" | "thin";
   showSecondary: boolean;
   useDefaultIcon: boolean;
@@ -72,15 +62,14 @@ export default {
       ],
     }),
   ],
-
-  render: (args: StoryArgs) => {
+  render: (args) => {
     const { useDefaultIcon, icon, ...rest } = args;
     return {
       props: {
         ...rest,
         icon: useDefaultIcon ? null : icon,
       },
-      template: `
+      template: /*html*/ `
         <auth-anon-layout
           [title]="title"
           [subtitle]="subtitle"
@@ -160,7 +149,7 @@ export default {
     contentLength: "normal",
     showSecondary: false,
   },
-} as Meta<StoryArgs>;
+} satisfies Meta<StoryArgs>;
 
 type Story = StoryObj<StoryArgs>;