migrate upload dialog to control flow

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

@@ -1,116 +1,116 @@
-<div *ngIf="canShowDialog()"
-     role="dialog"
-     [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG'| translate"
-     tabindex="0"
-     class="adf-upload-dialog"
-     id="upload-dialog"
-     [class.adf-upload-dialog--minimized]="isDialogMinimized">
+@if (canShowDialog()) {
+  <div
+    role="dialog"
+    [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG'| translate"
+    tabindex="0"
+    class="adf-upload-dialog"
+    id="upload-dialog"
+    [class.adf-upload-dialog--minimized]="isDialogMinimized">
     <header class="adf-upload-dialog__header">
-        <button
-            mat-icon-button
-            class="adf-upload-dialog__header-button"
-            [attr.data-automation-id]="'adf-upload-dialog__toggle-minimize'"
-            [attr.aria-label]="(isDialogMinimized ?
-                'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_MAXIMIZE':
-                'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_MINIMIZE') | translate"
-            [disabled]="isConfirmation"
-            [attr.aria-expanded]="!isDialogMinimized"
-            (click)="toggleMinimized()">
-            <mat-icon class="adf-upload-dialog__header-button-icon" [adf-icon]="isDialogMinimized ? 'keyboard_arrow_up' : 'keyboard_arrow_down'" />
-        </button>
-
-        <span
-            class="adf-upload-dialog__title"
-            *ngIf="!uploadList.isUploadCancelled()">
-            {{ 'FILE_UPLOAD.MESSAGES.UPLOAD_PROGRESS'
-                | translate: {
-                    completed: totalCompleted,
-                    total: filesUploadingList.length
-                }
-            }}
-        </span>
-
-        <span
-            class="adf-upload-dialog__title"
-            *ngIf="uploadList.isUploadCancelled()">
-            {{ 'FILE_UPLOAD.MESSAGES.UPLOAD_CANCELED' | translate }}
-        </span>
-    </header>
-
-    <section class="adf-upload-dialog__info"
-        *ngIf="totalErrors">
-        {{
-            (totalErrors > 1
-                 ? 'FILE_UPLOAD.MESSAGES.UPLOAD_ERRORS'
-                 : 'FILE_UPLOAD.MESSAGES.UPLOAD_ERROR')
-                 | translate: { total: totalErrors }
+      <button
+        mat-icon-button
+        class="adf-upload-dialog__header-button"
+        [attr.data-automation-id]="'adf-upload-dialog__toggle-minimize'"
+        [attr.aria-label]="(isDialogMinimized ?
+            'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_MAXIMIZE':
+            'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_MINIMIZE') | translate"
+        [disabled]="isConfirmation"
+        [attr.aria-expanded]="!isDialogMinimized"
+        (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 class="adf-upload-dialog__title">
+          {{ 'FILE_UPLOAD.MESSAGES.UPLOAD_PROGRESS'
+          | translate: {
+            completed: totalCompleted,
+            total: filesUploadingList.length
+          }
         }}
+      </span>
+    }
+    @if (uploadList.isUploadCancelled()) {
+      <span class="adf-upload-dialog__title">
+        {{ 'FILE_UPLOAD.MESSAGES.UPLOAD_CANCELED' | translate }}
+      </span>
+    }
+  </header>
+  @if (totalErrors) {
+    <section class="adf-upload-dialog__info">
+      {{
+      (totalErrors > 1
+      ? 'FILE_UPLOAD.MESSAGES.UPLOAD_ERRORS'
+      : 'FILE_UPLOAD.MESSAGES.UPLOAD_ERROR')
+      | translate: { total: totalErrors }
+      }}
     </section>
-
-    <section class="adf-upload-dialog__content"
-        [class.adf-upload-dialog--padding]="isConfirmation" aria-live="polite">
-        <adf-file-uploading-list
-            class="adf-file-uploading-list"
-            [class.adf-upload-dialog--hide]="isConfirmation"
-            #uploadList
-            [files]="filesUploadingList">
-                <ng-template let-file="$implicit">
-                     <adf-file-uploading-list-row
-                        [file]="file"
-                        (cancel)="uploadList.cancelFile(file)" />
-                </ng-template>
-        </adf-file-uploading-list>
-
-        <div
-            aria-live="polite"
-            aria-labelledby="confirmationTitle"
-            aria-describedby="confirmationDescription"
-            class="adf-upload-dialog__confirmation"
-            [class.adf-upload-dialog--hide]="!isConfirmation">
-                <p role="heading" aria-level="2" id="confirmationTitle" class="adf-upload-dialog__confirmation--title">
-                    {{ 'ADF_FILE_UPLOAD.CONFIRMATION.MESSAGE.TITLE' | translate }}
-                </p>
-                <p id="confirmationDescription" class="adf-upload-dialog__confirmation--text">
-                    {{ 'ADF_FILE_UPLOAD.CONFIRMATION.MESSAGE.TEXT' | translate }}
-                </p>
-        </div>
-    </section>
-
-    <footer class="adf-upload-dialog__actions" *ngIf="!isConfirmation">
+  }
+  <section class="adf-upload-dialog__content"
+    [class.adf-upload-dialog--padding]="isConfirmation" aria-live="polite">
+    <adf-file-uploading-list
+      class="adf-file-uploading-list"
+      [class.adf-upload-dialog--hide]="isConfirmation"
+      #uploadList
+      [files]="filesUploadingList">
+      <ng-template let-file="$implicit">
+        <adf-file-uploading-list-row
+          [file]="file"
+          (cancel)="uploadList.cancelFile(file)" />
+      </ng-template>
+    </adf-file-uploading-list>
+    <div
+      aria-live="polite"
+      aria-labelledby="confirmationTitle"
+      aria-describedby="confirmationDescription"
+      class="adf-upload-dialog__confirmation"
+      [class.adf-upload-dialog--hide]="!isConfirmation">
+      <p role="heading" aria-level="2" id="confirmationTitle" class="adf-upload-dialog__confirmation--title">
+        {{ 'ADF_FILE_UPLOAD.CONFIRMATION.MESSAGE.TITLE' | translate }}
+      </p>
+      <p id="confirmationDescription" class="adf-upload-dialog__confirmation--text">
+        {{ 'ADF_FILE_UPLOAD.CONFIRMATION.MESSAGE.TEXT' | translate }}
+      </p>
+    </div>
+  </section>
+  @if (!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()"
+          id="adf-upload-dialog-cancel-all"
+          [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.STOP_ALL' | translate"
+          color="primary"
+          mat-button
+          (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()"
+          id="adf-upload-dialog-close"
+          [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_CLOSE' | translate"
+          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>
-        <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"
-            mat-button
-            color="primary"
-            (click)="toggleConfirmation()"
-        >{{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CONTINUE' | translate }}</button>
+      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"
+        mat-button
+        color="primary"
+        (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,92 +1,108 @@
 <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"
-        title="{{ file.name }}">
-        {{ file.name }}
-    </span>
+  <span
+    class="adf-file-uploading-row__name"
+    title="{{ file.name }}">
+    {{ file.name }}
+  </span>
 
-    <span *ngIf="isUploadVersion()" 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>
+  @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"
-        #toggleIcon="toggleIcon"
-        adf-toggle-icon
-        (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 }}">
-
-        <span class="adf-file-uploading-row__status" *ngIf="!toggleIcon.isToggled">
-            {{ file.progress.loaded | adfFileSize }} / {{ file.progress.total | adfFileSize }}
+      tabindex="0"
+      role="button"
+      #toggleIcon="toggleIcon"
+      adf-toggle-icon
+      (keyup.enter)="onCancel(file)"
+      (click)="onCancel(file)"
+      data-automation-id="cancel-upload-progress"
+      [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">
+          {{ 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" />
+      adf-toggle-icon
+      #toggleIcon="toggleIcon"
+      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 />
+      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" />
-
-        <mat-icon *ngIf="toggleIconCancel.isToggled" class="adf-file-uploading-row__action adf-file-uploading-row__action--remove" adf-icon="remove_circle" />
+      adf-toggle-icon
+      #toggleIconCancel="toggleIcon"
+      mat-icon-button
+      (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 }">
+      @if (!toggleIconCancel.isToggled) {
+        <mat-icon 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__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 }"
-            [title]="file.errorCode | adfFileUploadError"
-            adf-icon="report_problem"
-            matListItemIcon
+      role="status"
+      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 }"
+        [title]="file.errorCode | adfFileUploadError"
+        adf-icon="report_problem"
+        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 }}
+      [attr.aria-label]="'ADF_FILE_UPLOAD.STATUS.FILE_CANCELED_STATUS' | translate"
+      role="status"
+      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: [
-        CommonModule,
-        IconModule,
-        MatListModule,
-        MatChipsModule,
-        TranslatePipe,
-        ToggleIconDirective,
-        FileSizePipe,
-        MatButtonModule,
-        FileUploadErrorPipe
-    ],
+    imports: [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
-        [ngForOf]="files"
-        [ngForTemplate]="template" />
+      [ngTemplateOutlet]="template"
+      [ngTemplateOutletContext]="{ $implicit: file }" />
+  }
 </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,70 +1,76 @@
 <form class="adf-upload-button-file-container">
-    <!--Files Upload-->
-    <div *ngIf="!uploadFolders">
-
-        <!--Single Files Upload-->
-        <ng-container *ngIf="!multipleFiles">
-            <input
-                class="adf-upload-button-file-container-upload-single-file"
-                id="upload-single-file"
-                data-automation-id="upload-single-file"
-                [type]="file ? 'button' : 'file'"
-                name="uploadFiles"
-                accept="{{acceptedFilesType}}"
-                [attr.disabled]="isButtonDisabled()"
-                [title]="tooltip"
-                (change)="onFilesAdded($event)"
-                (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">
-                    {{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
-                <span id="upload-single-file-label-static" *ngIf="staticTitle">
-                    {{ staticTitle }}</span>
-            </label>
-        </ng-container>
-
-        <!--Multiple Files Upload-->
-        <ng-container *ngIf="multipleFiles">
-            <input
-                id="upload-multiple-files"
-                data-automation-id="upload-multiple-files"
-                type="file"
-                name="uploadFiles"
-                multiple="multiple"
-                accept="{{acceptedFilesType}}"
-                [attr.disabled]="isButtonDisabled()"
-                [title]="tooltip"
-                (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">
-                    {{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
-                <span id="upload-multiple-file-label-static" *ngIf="staticTitle">
-                    {{ staticTitle }}</span>
-            </label>
-        </ng-container>
-    </div>
-
-    <!--Folders Upload-->
-    <ng-container *ngIf="uploadFolders">
+  <!--Files Upload-->
+  @if (!uploadFolders) {
+    <div>
+      <!--Single Files Upload-->
+      @if (!multipleFiles) {
         <input
-            id="uploadFolder"
-            data-automation-id="uploadFolder"
-            type="file"
-            name="uploadFiles"
-            multiple="multiple"
-            accept="{{acceptedFilesType}}"
-            webkitdirectory directory
-            [attr.disabled]="isButtonDisabled()"
-            [title]="tooltip"
-            (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">
-                {{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</span>
-            <span id="uploadFolder-label-static" *ngIf="staticTitle">
-                {{ staticTitle }}</span>
+          class="adf-upload-button-file-container-upload-single-file"
+          id="upload-single-file"
+          data-automation-id="upload-single-file"
+          [type]="file ? 'button' : 'file'"
+          name="uploadFiles"
+          accept="{{acceptedFilesType}}"
+          [attr.disabled]="isButtonDisabled()"
+          [title]="tooltip"
+          (change)="onFilesAdded($event)"
+          (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" />
+          @if (!staticTitle) {
+            <span id="upload-single-file-label">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
+          }
+          @if (staticTitle) {
+            <span id="upload-single-file-label-static">{{ staticTitle }}</span>
+          }
         </label>
-    </ng-container>
+      }
+      <!--Multiple Files Upload-->
+      @if (multipleFiles) {
+        <input
+          id="upload-multiple-files"
+          data-automation-id="upload-multiple-files"
+          type="file"
+          name="uploadFiles"
+          multiple="multiple"
+          accept="{{acceptedFilesType}}"
+          [attr.disabled]="isButtonDisabled()"
+          [title]="tooltip"
+          (change)="onFilesAdded($event)"/>
+        <label for="upload-multiple-files" class="adf-upload-button-label">
+          <mat-icon class="adf-upload-button-icon" adf-icon="file_upload" />
+          @if (!staticTitle) {
+            <span id="upload-multiple-file-label">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
+          }
+          @if (staticTitle) {
+            <span id="upload-multiple-file-label-static">{{ staticTitle }}</span>
+          }
+        </label>
+      }
+    </div>
+  }
+
+  <!--Folders Upload-->
+  @if (uploadFolders) {
+    <input
+      id="uploadFolder"
+      data-automation-id="uploadFolder"
+      type="file"
+      name="uploadFiles"
+      multiple="multiple"
+      accept="{{acceptedFilesType}}"
+      webkitdirectory directory
+      [attr.disabled]="isButtonDisabled()"
+      [title]="tooltip"
+      (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" />
+      @if (!staticTitle) {
+        <span id="uploadFolder-label">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</span>
+      }
+      @if (staticTitle) {
+        <span id="uploadFolder-label-static">{{ staticTitle }}</span>
+      }
+    </label>
+  }
 </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