migrate upload dialog to control flow

lib/content-services/src/lib/upload/components/file-uploading-dialog.component.html

@@ -1,4 +1,5 @@
-<div *ngIf="canShowDialog()"
+@if (canShowDialog()) {
+  <div
     role="dialog"
     [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG'| translate"
     tabindex="0"
@@ -18,10 +19,8 @@
         (click)="toggleMinimized()">
         <mat-icon class="adf-upload-dialog__header-button-icon" [adf-icon]="isDialogMinimized ? 'keyboard_arrow_up' : 'keyboard_arrow_down'" />
       </button>
-
+      @if (!uploadList.isUploadCancelled()) {
-        <span
+        <span class="adf-upload-dialog__title">
-            class="adf-upload-dialog__title"
-            *ngIf="!uploadList.isUploadCancelled()">
           {{ 'FILE_UPLOAD.MESSAGES.UPLOAD_PROGRESS'
           | translate: {
             completed: totalCompleted,
@@ -29,16 +28,15 @@
           }
         }}
       </span>
-
+    }
-        <span
+    @if (uploadList.isUploadCancelled()) {
-            class="adf-upload-dialog__title"
+      <span class="adf-upload-dialog__title">
-            *ngIf="uploadList.isUploadCancelled()">
         {{ 'FILE_UPLOAD.MESSAGES.UPLOAD_CANCELED' | translate }}
       </span>
+    }
   </header>
-
+  @if (totalErrors) {
-    <section class="adf-upload-dialog__info"
+    <section class="adf-upload-dialog__info">
-        *ngIf="totalErrors">
       {{
       (totalErrors > 1
       ? 'FILE_UPLOAD.MESSAGES.UPLOAD_ERRORS'
@@ -46,7 +44,7 @@
       | translate: { total: totalErrors }
       }}
     </section>
-
+  }
   <section class="adf-upload-dialog__content"
     [class.adf-upload-dialog--padding]="isConfirmation" aria-live="polite">
     <adf-file-uploading-list
@@ -60,7 +58,6 @@
           (cancel)="uploadList.cancelFile(file)" />
       </ng-template>
     </adf-file-uploading-list>
-
     <div
       aria-live="polite"
       aria-labelledby="confirmationTitle"
@@ -75,36 +72,37 @@
       </p>
     </div>
   </section>
-
+  @if (!isConfirmation) {
-    <footer class="adf-upload-dialog__actions" *ngIf="!isConfirmation">
+    <footer class="adf-upload-dialog__actions">
+      @if (canShowCancelAll()) {
         <button
           id="adf-upload-dialog-cancel-all"
           [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.STOP_ALL' | translate"
           color="primary"
           mat-button
-            *ngIf="canShowCancelAll()"
           (click)="toggleConfirmation()"
         >{{ 'ADF_FILE_UPLOAD.BUTTON.STOP_ALL' | translate }}</button>
-
+      }
+      @if (canCloseDialog()) {
         <button
           id="adf-upload-dialog-close"
           [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_CLOSE' | translate"
-            *ngIf="canCloseDialog()"
           mat-button
           color="primary"
           (click)="close()"
         >{{ 'ADF_FILE_UPLOAD.BUTTON.CLOSE' | translate }}</button>
+      }
     </footer>
-
+  }
+  @if (isConfirmation) {
     <footer class="adf-upload-dialog__actions"
-            *ngIf="isConfirmation" cdkTrapFocus cdkTrapFocusAutoCapture>
+      cdkTrapFocus cdkTrapFocusAutoCapture>
       <button
         id="adf-upload-dialog-cancel"
         [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CONFIRMATION.CANCEL' | translate"
         mat-button
         (click)="cancelAllUploads()"
       >{{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CANCEL' | translate }}</button>
-
       <button
         id="adf-upload-dialog-confirm"
         [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CONFIRMATION.CONTINUE' | translate"
@@ -113,4 +111,6 @@
         (click)="toggleConfirmation()"
       >{{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CONTINUE' | translate }}</button>
     </footer>
+  }
 </div>
+}

lib/content-services/src/lib/upload/components/file-uploading-dialog.component.ts

@@ -38,7 +38,7 @@ import { delay } from 'rxjs/operators';
 import { UploadService } from '../../common/services/upload.service';
 import { FileModel, FileUploadStatus } from '../../common/models/file.model';
 import { FileUploadCompleteEvent, FileUploadDeleteEvent } from '../../common/events/file.event';
-import { CommonModule } from '@angular/common';
+
 import { MatButtonModule } from '@angular/material/button';
 import { TranslatePipe } from '@ngx-translate/core';
 import { FileUploadingListRowComponent } from './file-uploading-list-row.component';
@@ -47,7 +47,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'adf-file-uploading-dialog',
-    imports: [CommonModule, MatButtonModule, TranslatePipe, IconModule, FileUploadingListComponent, FileUploadingListRowComponent, A11yModule],
+    imports: [MatButtonModule, TranslatePipe, IconModule, FileUploadingListComponent, FileUploadingListRowComponent, A11yModule],
     templateUrl: './file-uploading-dialog.component.html',
     styleUrls: ['./file-uploading-dialog.component.scss'],
     encapsulation: ViewEncapsulation.None

lib/content-services/src/lib/upload/components/file-uploading-list-row.component.html

@@ -1,7 +1,11 @@
 <div class="adf-file-uploading-row" [attr.aria-label]="file.name + ' ' + file.status">
-    <mat-icon *ngIf="mimeType === 'default'" matListItemIcon class="adf-file-uploading-row__type" adf-icon="insert_drive_file" />
+  @if (mimeType === 'default') {
+    <mat-icon matListItemIcon class="adf-file-uploading-row__type" adf-icon="insert_drive_file" />
+  }
 
-    <mat-icon *ngIf="mimeType !== 'default'" svgIcon="adf:{{ mimeType }}" aria-hidden="true" />
+  @if (mimeType !== 'default') {
+    <mat-icon svgIcon="adf:{{ mimeType }}" aria-hidden="true" />
+  }
 
   <span
     class="adf-file-uploading-row__name"
@@ -9,13 +13,16 @@
     {{ file.name }}
   </span>
 
-    <span *ngIf="isUploadVersion()" class="adf-file-uploading-row__version" tabindex="0" >
+  @if (isUploadVersion()) {
+    <span class="adf-file-uploading-row__version" tabindex="0" >
       <mat-chip color="primary"
         [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.VERSION' | translate: { version:  versionNumber }"
         [title]="'version' + versionNumber"
       >{{ versionNumber }}</mat-chip>
     </span>
+  }
 
+  @if (isUploading()) {
     <div
       tabindex="0"
       role="button"
@@ -24,55 +31,62 @@
       (keyup.enter)="onCancel(file)"
       (click)="onCancel(file)"
       data-automation-id="cancel-upload-progress"
-        *ngIf="isUploading()"
       [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.STOP_FILE_UPLOAD' | translate: { file: file.name }"
       class="adf-file-uploading-row__group adf-file-uploading-row__group--toggle"
       title="{{ 'ADF_FILE_UPLOAD.BUTTON.STOP_FILE' | translate }}">
-
+      @if (!toggleIcon.isToggled) {
-        <span class="adf-file-uploading-row__status" *ngIf="!toggleIcon.isToggled">
+        <span class="adf-file-uploading-row__status">
           {{ file.progress.loaded | adfFileSize }} / {{ file.progress.total | adfFileSize }}
         </span>
-
+      }
-        <mat-icon *ngIf="toggleIcon.isToggled" class="adf-file-uploading-row__action adf-file-uploading-row__action--cancel" adf-icon="clear" />
+      @if (toggleIcon.isToggled) {
+        <mat-icon class="adf-file-uploading-row__action adf-file-uploading-row__action--cancel" adf-icon="clear" />
+      }
     </div>
+  }
 
+  @if (isUploadComplete()) {
     <button mat-icon-button
       adf-toggle-icon
       #toggleIcon="toggleIcon"
-        *ngIf="isUploadComplete()"
       class="adf-file-uploading-row__group"
       [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.UPLOAD_SUCCESSFUL' | translate: { file: file.name }"
       title="{{ 'ADF_FILE_UPLOAD.BUTTON.UPLOAD_SUCCESSFUL' | translate }}">
-
       <mat-icon class="adf-file-uploading-row__status adf-file-uploading-row__status--done" adf-icon="check_circle" />
     </button>
+  }
 
+  @if (isUploadVersionComplete()) {
     <div
-        *ngIf="isUploadVersionComplete()"
       class="adf-file-uploading-row__file-version"
       [attr.aria-label]="'ADF_FILE_UPLOAD.STATUS.FILE_DONE_STATUS' | translate"
       >
       <mat-icon class="adf-file-uploading-row__status--done" adf-icon="check_circle" matListItemIcon />
     </div>
+  }
 
+  @if (canCancelUpload()) {
     <button
       adf-toggle-icon
       #toggleIconCancel="toggleIcon"
       mat-icon-button
-        *ngIf="canCancelUpload()"
       (click)="onCancel(file)"
       data-automation-id="cancel-upload-queue"
       class="adf-file-uploading-row__group"
       title="{{ 'ADF_FILE_UPLOAD.BUTTON.STOP_FILE' | translate }}"
       [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.STOP_FILE' | translate: { file: file.name }">
-        <mat-icon *ngIf="!toggleIconCancel.isToggled" class="adf-file-uploading-row__status adf-file-uploading-row__status--pending" adf-icon="schedule" />
+      @if (!toggleIconCancel.isToggled) {
-
+        <mat-icon class="adf-file-uploading-row__status adf-file-uploading-row__status--pending" adf-icon="schedule" />
-        <mat-icon *ngIf="toggleIconCancel.isToggled" class="adf-file-uploading-row__action adf-file-uploading-row__action--remove" adf-icon="remove_circle" />
+      }
+      @if (toggleIconCancel.isToggled) {
+        <mat-icon class="adf-file-uploading-row__action adf-file-uploading-row__action--remove" adf-icon="remove_circle" />
+      }
     </button>
+  }
 
+  @if (isUploadError()) {
     <div
       role="status"
-        *ngIf="isUploadError()"
       class="adf-file-uploading-row__block adf-file-uploading-row__status--error">
       <mat-icon
         [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.UPLOAD_FILE_ERROR' | translate: { error: file.errorCode | adfFileUploadError }"
@@ -81,12 +95,14 @@
         matListItemIcon
         />
     </div>
+  }
 
+  @if (showCancelledStatus()) {
     <div
       [attr.aria-label]="'ADF_FILE_UPLOAD.STATUS.FILE_CANCELED_STATUS' | translate"
       role="status"
-        *ngIf="showCancelledStatus()"
       class="adf-file-uploading-row__block adf-file-uploading-row__status--cancelled">
       {{ 'ADF_FILE_UPLOAD.STATUS.FILE_CANCELED_STATUS' | translate }}
     </div>
+  }
 </div>

lib/content-services/src/lib/upload/components/file-uploading-list-row.component.ts

@@ -17,7 +17,7 @@
 
 import { FileModel, FileUploadStatus } from '../../common/models/file.model';
 import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { MatListModule } from '@angular/material/list';
 import { FileSizePipe, IconModule } from '@alfresco/adf-core';
 import { MatChipsModule } from '@angular/material/chips';
@@ -28,17 +28,7 @@ import { FileUploadErrorPipe } from '../pipes/file-upload-error.pipe';
 
 @Component({
     selector: 'adf-file-uploading-list-row',
-    imports: [
+    imports: [IconModule, MatListModule, MatChipsModule, TranslatePipe, ToggleIconDirective, FileSizePipe, MatButtonModule, FileUploadErrorPipe],
-        CommonModule,
-        IconModule,
-        MatListModule,
-        MatChipsModule,
-        TranslatePipe,
-        ToggleIconDirective,
-        FileSizePipe,
-        MatButtonModule,
-        FileUploadErrorPipe
-    ],
     templateUrl: './file-uploading-list-row.component.html',
     styleUrls: ['./file-uploading-list-row.component.scss'],
     encapsulation: ViewEncapsulation.None

lib/content-services/src/lib/upload/components/file-uploading-list.component.html

@@ -1,6 +1,7 @@
 <div class="upload-list">
+  @for (file of files; track file) {
     <ng-template
-        ngFor
+      [ngTemplateOutlet]="template"
-        [ngForOf]="files"
+      [ngTemplateOutletContext]="{ $implicit: file }" />
-        [ngForTemplate]="template" />
+  }
 </div>

lib/content-services/src/lib/upload/components/file-uploading-list.component.ts

@@ -20,11 +20,10 @@ import { UploadService } from '../../common/services/upload.service';
 import { FileModel, FileUploadStatus } from '../../common/models/file.model';
 
 import { Component, ContentChild, Input, Output, TemplateRef, EventEmitter, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
 
 @Component({
     selector: 'adf-file-uploading-list',
-    imports: [CommonModule],
+    imports: [],
     templateUrl: './file-uploading-list.component.html',
     styleUrls: ['./file-uploading-list.component.scss']
 })

lib/content-services/src/lib/upload/components/upload-button.component.html

@@ -1,9 +1,9 @@
 <form class="adf-upload-button-file-container">
   <!--Files Upload-->
-    <div *ngIf="!uploadFolders">
+  @if (!uploadFolders) {
-
+    <div>
       <!--Single Files Upload-->
-        <ng-container *ngIf="!multipleFiles">
+      @if (!multipleFiles) {
         <input
           class="adf-upload-button-file-container-upload-single-file"
           id="upload-single-file"
@@ -17,15 +17,16 @@
           (click)="onClickUploadButton()"/>
         <label tabindex="0" (keydown.enter)="onClickUploadButton()" for="upload-single-file" class="adf-upload-button-label">
           <mat-icon class="adf-upload-button-icon" adf-icon="file_upload" />
-                <span id="upload-single-file-label" *ngIf="!staticTitle">
+          @if (!staticTitle) {
-                    {{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
+            <span id="upload-single-file-label">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
-                <span id="upload-single-file-label-static" *ngIf="staticTitle">
+          }
-                    {{ staticTitle }}</span>
+          @if (staticTitle) {
+            <span id="upload-single-file-label-static">{{ staticTitle }}</span>
+          }
         </label>
-        </ng-container>
+      }
-
       <!--Multiple Files Upload-->
-        <ng-container *ngIf="multipleFiles">
+      @if (multipleFiles) {
         <input
           id="upload-multiple-files"
           data-automation-id="upload-multiple-files"
@@ -38,16 +39,19 @@
           (change)="onFilesAdded($event)"/>
         <label for="upload-multiple-files" class="adf-upload-button-label">
           <mat-icon class="adf-upload-button-icon" adf-icon="file_upload" />
-                <span id="upload-multiple-file-label" *ngIf="!staticTitle">
+          @if (!staticTitle) {
-                    {{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
+            <span id="upload-multiple-file-label">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
-                <span id="upload-multiple-file-label-static" *ngIf="staticTitle">
+          }
-                    {{ staticTitle }}</span>
+          @if (staticTitle) {
+            <span id="upload-multiple-file-label-static">{{ staticTitle }}</span>
+          }
         </label>
-        </ng-container>
+      }
     </div>
+  }
 
   <!--Folders Upload-->
-    <ng-container *ngIf="uploadFolders">
+  @if (uploadFolders) {
     <input
       id="uploadFolder"
       data-automation-id="uploadFolder"
@@ -61,10 +65,12 @@
       (change)="onDirectoryAdded($event)"/>
     <label for="uploadFolder" data-automation-id="uploadFolder" class="adf-upload-button-label">
       <mat-icon class="adf-upload-button-icon" adf-icon="file_upload" />
-            <span id="uploadFolder-label" *ngIf="!staticTitle">
+      @if (!staticTitle) {
-                {{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</span>
+        <span id="uploadFolder-label">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</span>
-            <span id="uploadFolder-label-static" *ngIf="staticTitle">
+      }
-                {{ staticTitle }}</span>
+      @if (staticTitle) {
+        <span id="uploadFolder-label-static">{{ staticTitle }}</span>
+      }
     </label>
-    </ng-container>
+  }
 </form>

lib/content-services/src/lib/upload/components/upload-button.component.ts

@@ -24,13 +24,13 @@ import { Node } from '@alfresco/js-api';
 import { Subject } from 'rxjs';
 import { PermissionModel } from '../../document-list/models/permissions.model';
 import { UploadBase } from './base-upload/upload-base';
-import { CommonModule } from '@angular/common';
+
 import { MatButtonModule } from '@angular/material/button';
 import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
     selector: 'adf-upload-button',
-    imports: [CommonModule, MatButtonModule, TranslatePipe, IconModule],
+    imports: [MatButtonModule, TranslatePipe, IconModule],
     templateUrl: './upload-button.component.html',
     styleUrls: ['./upload-button.component.scss'],
     encapsulation: ViewEncapsulation.None