[CL-553] Migrate CL to Control Flow syntax

libs/components/src/avatar/avatar.component.ts

@@ -1,6 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { NgIf, NgClass } from "@angular/common";
+import { NgClass } from "@angular/common";
 import { Component, Input, OnChanges } from "@angular/core";
 import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
 
@@ -18,9 +18,11 @@ const SizeClasses: Record<SizeTypes, string[]> = {
 
 @Component({
   selector: "bit-avatar",
-  template: `<img *ngIf="src" [src]="src" title="{{ title || text }}" [ngClass]="classList" />`,
+  template: `@if (src) {
+    <img [src]="src" title="{{ title || text }}" [ngClass]="classList" />
+  }`,
   standalone: true,
-  imports: [NgIf, NgClass],
+  imports: [NgClass],
 })
 export class AvatarComponent implements OnChanges {
   @Input() border = false;

libs/components/src/badge-list/badge-list.component.html

@@ -1,11 +1,15 @@
 <div class="tw-inline-flex tw-flex-wrap tw-gap-2">
-  <ng-container *ngFor="let item of filteredItems; let last = last">
+  @for (item of filteredItems; track item; let last = $last) {
     <span bitBadge [variant]="variant" [truncate]="truncate">
       {{ item }}
     </span>
-    <span class="tw-sr-only" *ngIf="!last || isFiltered">, </span>
-  </ng-container>
-  <span *ngIf="isFiltered" bitBadge [variant]="variant">
-    {{ "plusNMore" | i18n: (items.length - filteredItems.length).toString() }}
-  </span>
+    @if (!last || isFiltered) {
+      <span class="tw-sr-only">, </span>
+    }
+  }
+  @if (isFiltered) {
+    <span bitBadge [variant]="variant">
+      {{ "plusNMore" | i18n: (items.length - filteredItems.length).toString() }}
+    </span>
+  }
 </div>

libs/components/src/badge-list/badge-list.component.ts

@@ -1,6 +1,6 @@
 // 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, OnChanges } from "@angular/core";
 
 import { I18nPipe } from "@bitwarden/ui-common";
@@ -11,7 +11,7 @@ import { BadgeModule, BadgeVariant } from "../badge";
   selector: "bit-badge-list",
   templateUrl: "badge-list.component.html",
   standalone: true,
-  imports: [CommonModule, BadgeModule, I18nPipe],
+  imports: [BadgeModule, I18nPipe],
 })
 export class BadgeListComponent implements OnChanges {
   private _maxItems: number;

libs/components/src/banner/banner.component.html

@@ -4,21 +4,24 @@
   [attr.role]="useAlertRole ? 'status' : null"
   [attr.aria-live]="useAlertRole ? 'polite' : null"
 >
-  <i class="bwi tw-align-middle tw-text-base" [ngClass]="icon" *ngIf="icon" aria-hidden="true"></i>
+  @if (icon) {
+    <i class="bwi tw-align-middle tw-text-base" [ngClass]="icon" aria-hidden="true"></i>
+  }
   <!-- Overriding focus-visible color for link buttons for a11y against colored background -->
   <span class="tw-grow tw-text-base [&>button[bitlink]:focus-visible:before]:!tw-ring-text-main">
     <ng-content></ng-content>
   </span>
   <!-- Overriding hover and focus-visible colors for a11y against colored background -->
-  <button
-    *ngIf="showClose"
-    class="hover:tw-border-text-main focus-visible:before:tw-ring-text-main"
-    type="button"
-    bitIconButton="bwi-close"
-    buttonType="main"
-    size="default"
-    (click)="onClose.emit()"
-    [attr.title]="'close' | i18n"
-    [attr.aria-label]="'close' | i18n"
-  ></button>
+  @if (showClose) {
+    <button
+      class="hover:tw-border-text-main focus-visible:before:tw-ring-text-main"
+      type="button"
+      bitIconButton="bwi-close"
+      buttonType="main"
+      size="default"
+      (click)="onClose.emit()"
+      [attr.title]="'close' | i18n"
+      [attr.aria-label]="'close' | i18n"
+    ></button>
+  }
 </div>

libs/components/src/breadcrumbs/breadcrumb.component.html

@@ -1,3 +1,6 @@
 <ng-template>
-  <i *ngIf="icon" class="bwi {{ icon }} !tw-mr-2" aria-hidden="true"></i><ng-content></ng-content>
+  @if (icon) {
+    <i class="bwi {{ icon }} !tw-mr-2" aria-hidden="true"></i>
+  }
+  <ng-content></ng-content>
 </ng-template>

libs/components/src/breadcrumbs/breadcrumb.component.ts

@@ -1,14 +1,13 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { NgIf } from "@angular/common";
+
 import { Component, EventEmitter, Input, Output, TemplateRef, ViewChild } from "@angular/core";
 import { QueryParamsHandling } from "@angular/router";
 
 @Component({
   selector: "bit-breadcrumb",
   templateUrl: "./breadcrumb.component.html",
   standalone: true,
-  imports: [NgIf],
 })
 export class BreadcrumbComponent {
   @Input()

libs/components/src/breadcrumbs/breadcrumbs.component.html

@@ -1,5 +1,5 @@
-<ng-container *ngFor="let breadcrumb of beforeOverflow; let last = last">
-  <ng-container *ngIf="breadcrumb.route">
+@for (breadcrumb of beforeOverflow; track breadcrumb; let last = $last) {
+  @if (breadcrumb.route) {
     <a
       bitLink
       linkType="primary"
@@ -10,8 +10,8 @@
     >
       <ng-container [ngTemplateOutlet]="breadcrumb.content"></ng-container>
     </a>
-  </ng-container>
-  <ng-container *ngIf="!breadcrumb.route">
+  }
+  @if (!breadcrumb.route) {
     <button
       type="button"
       bitLink
@@ -21,24 +21,26 @@
     >
       <ng-container [ngTemplateOutlet]="breadcrumb.content"></ng-container>
     </button>
-  </ng-container>
-  <i *ngIf="!last" class="bwi bwi-angle-right tw-mx-1.5 tw-text-main"></i>
-</ng-container>
-
-<ng-container *ngIf="hasOverflow">
-  <i *ngIf="beforeOverflow.length > 0" class="bwi bwi-angle-right tw-mx-1.5 tw-text-main"></i>
+  }
+  @if (!last) {
+    <i class="bwi bwi-angle-right tw-mx-1.5 tw-text-main"></i>
+  }
+}
 
+@if (hasOverflow) {
+  @if (beforeOverflow.length > 0) {
+    <i class="bwi bwi-angle-right tw-mx-1.5 tw-text-main"></i>
+  }
   <button
     type="button"
     bitIconButton="bwi-ellipsis-h"
     [bitMenuTriggerFor]="overflowMenu"
     size="small"
     aria-haspopup
   ></button>
-
   <bit-menu #overflowMenu>
-    <ng-container *ngFor="let breadcrumb of overflow">
-      <ng-container *ngIf="breadcrumb.route">
+    @for (breadcrumb of overflow; track breadcrumb) {
+      @if (breadcrumb.route) {
         <a
           bitMenuItem
           linkType="primary"
@@ -48,18 +50,17 @@
         >
           <ng-container [ngTemplateOutlet]="breadcrumb.content"></ng-container>
         </a>
-      </ng-container>
-      <ng-container *ngIf="!breadcrumb.route">
+      }
+      @if (!breadcrumb.route) {
         <button type="button" bitMenuItem linkType="primary" (click)="breadcrumb.onClick($event)">
           <ng-container [ngTemplateOutlet]="breadcrumb.content"></ng-container>
         </button>
-      </ng-container>
-    </ng-container>
+      }
+    }
   </bit-menu>
   <i class="bwi bwi-angle-right tw-mx-1.5 tw-text-main"></i>
-
-  <ng-container *ngFor="let breadcrumb of afterOverflow; let last = last">
-    <ng-container *ngIf="breadcrumb.route">
+  @for (breadcrumb of afterOverflow; track breadcrumb; let last = $last) {
+    @if (breadcrumb.route) {
       <a
         bitLink
         linkType="primary"
@@ -70,8 +71,8 @@
       >
         <ng-container [ngTemplateOutlet]="breadcrumb.content"></ng-container>
       </a>
-    </ng-container>
-    <ng-container *ngIf="!breadcrumb.route">
+    }
+    @if (!breadcrumb.route) {
       <button
         type="button"
         bitLink
@@ -81,7 +82,9 @@
       >
         <ng-container [ngTemplateOutlet]="breadcrumb.content"></ng-container>
       </button>
-    </ng-container>
-    <i *ngIf="!last" class="bwi bwi-angle-right tw-mx-1.5 tw-text-main"></i>
-  </ng-container>
-</ng-container>
+    }
+    @if (!last) {
+      <i class="bwi bwi-angle-right tw-mx-1.5 tw-text-main"></i>
+    }
+  }
+}

libs/components/src/button/button.stories.ts

@@ -86,16 +86,15 @@ export const DisabledWithAttribute: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <ng-container *ngIf="disabled">
+      @if (disabled) {
         <button bitButton disabled [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
         <button bitButton disabled [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
         <button bitButton disabled [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
-      </ng-container>
-      <ng-container *ngIf="!disabled">
+      } @else {
         <button bitButton [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
         <button bitButton [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
         <button bitButton [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
-      </ng-container>
+      }
     `,
   }),
   args: {

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

@@ -3,10 +3,14 @@
   [ngClass]="calloutClass"
   [attr.aria-labelledby]="titleId"
 >
-  <header id="{{ titleId }}" class="tw-mb-1 tw-mt-0 tw-text-base tw-font-semibold" *ngIf="title">
-    <i class="bwi" [ngClass]="[icon, headerClass]" *ngIf="icon" aria-hidden="true"></i>
-    {{ title }}
-  </header>
+  @if (title) {
+    <header id="{{ titleId }}" class="tw-mb-1 tw-mt-0 tw-text-base tw-font-semibold">
+      @if (icon) {
+        <i class="bwi" [ngClass]="[icon, headerClass]" aria-hidden="true"></i>
+      }
+      {{ title }}
+    </header>
+  }
   <div bitTypography="body2">
     <ng-content></ng-content>
   </div>

libs/components/src/card/card.component.ts

@@ -1,10 +1,8 @@
-import { CommonModule } from "@angular/common";
 import { ChangeDetectionStrategy, Component } from "@angular/core";
 
 @Component({
   selector: "bit-card",
   standalone: true,
-  imports: [CommonModule],
   template: `<ng-content></ng-content>`,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {