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

libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.component.html

@@ -11,16 +11,17 @@
         {{ acceptButtonText }}
       </button>
 
-      <button
-        *ngIf="showCancelButton"
-        type="button"
-        bitButton
-        bitFormButton
-        buttonType="secondary"
-        (click)="dialogRef.close(false)"
-      >
-        {{ cancelButtonText }}
-      </button>
+      @if (showCancelButton) {
+        <button
+          type="button"
+          bitButton
+          bitFormButton
+          buttonType="secondary"
+          (click)="dialogRef.close(false)"
+        >
+          {{ cancelButtonText }}
+        </button>
+      }
     </ng-container>
   </bit-simple-dialog>
 </form>

libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.component.ts

@@ -1,7 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
-import { NgIf } from "@angular/common";
 import { Component, Inject } from "@angular/core";
 import { FormGroup, ReactiveFormsModule } from "@angular/forms";
 
@@ -39,7 +38,6 @@ const DEFAULT_COLOR: Record<SimpleDialogType, string> = {
     IconDirective,
     ButtonComponent,
     BitFormButtonDirective,
-    NgIf,
   ],
 })
 export class SimpleConfigurableDialogComponent {

libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts

@@ -12,23 +12,24 @@ import { DialogModule } from "../../dialog.module";
 
 @Component({
   template: `
-    <div *ngFor="let group of dialogs">
-      <h2>{{ group.title }}</h2>
-      <div class="tw-mb-4 tw-flex tw-flex-row tw-gap-2">
-        <button
-          type="button"
-          *ngFor="let dialog of group.dialogs"
-          bitButton
-          (click)="openSimpleConfigurableDialog(dialog)"
-        >
-          {{ dialog.title }}
-        </button>
+    @for (group of dialogs; track group) {
+      <div>
+        <h2>{{ group.title }}</h2>
+        <div class="tw-mb-4 tw-flex tw-flex-row tw-gap-2">
+          @for (dialog of group.dialogs; track dialog) {
+            <button type="button" bitButton (click)="openSimpleConfigurableDialog(dialog)">
+              {{ dialog.title }}
+            </button>
+          }
+        </div>
       </div>
-    </div>
+    }
 
-    <bit-callout *ngIf="showCallout" [type]="calloutType" title="Dialog Close Result">
-      {{ dialogCloseResult }}
-    </bit-callout>
+    @if (showCallout) {
+      <bit-callout [type]="calloutType" title="Dialog Close Result">
+        {{ dialogCloseResult }}
+      </bit-callout>
+    }
   `,
 })
 class StoryDialogComponent {

libs/components/src/dialog/simple-dialog/simple-dialog.component.html

@@ -3,12 +3,11 @@
   @fadeIn
 >
   <div class="tw-flex tw-flex-col tw-items-center tw-gap-2 tw-px-4 tw-pt-4 tw-text-center">
-    <ng-container *ngIf="hasIcon; else elseBlock">
+    @if (hasIcon) {
       <ng-content select="[bitDialogIcon]"></ng-content>
-    </ng-container>
-    <ng-template #elseBlock>
+    } @else {
       <i class="bwi bwi-exclamation-triangle tw-text-3xl tw-text-warning" aria-hidden="true"></i>
-    </ng-template>
+    }
     <h1
       bitDialogTitleContainer
       bitTypography="h3"

libs/components/src/dialog/simple-dialog/simple-dialog.component.ts

@@ -1,4 +1,3 @@
-import { NgIf } from "@angular/common";
 import { Component, ContentChild, Directive } from "@angular/core";
 
 import { TypographyDirective } from "../../typography/typography.directive";
@@ -16,7 +15,7 @@ export class IconDirective {}
   templateUrl: "./simple-dialog.component.html",
   animations: [fadeIn],
   standalone: true,
-  imports: [NgIf, DialogTitleContainerDirective, TypographyDirective],
+  imports: [DialogTitleContainerDirective, TypographyDirective],
 })
 export class SimpleDialogComponent {
   @ContentChild(IconDirective) icon!: IconDirective;