[CL-553] Migrate CL to Control Flow syntax (#12390)

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;