AAE-30141 Replace ngIf for asterix with style visibility (#10665)

lib/core/src/lib/form/components/widgets/amount/amount.widget.html

@@ -6,7 +6,7 @@
 >
     <div *ngIf="field.leftLabels">
         <label class="adf-label adf-left-label" [attr.for]="field.id"
-            >{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label
+            >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
         >
     </div>
     <div>

lib/core/src/lib/form/components/widgets/base-viewer/base-viewer.widget.html

@@ -3,7 +3,7 @@
      [class.adf-readonly]="field.readOnly">
     <label class="adf-label" [attr.for]="field.id">
         {{ field.name | translate }}
-        <span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+        <span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label>
     <adf-viewer [urlFile]="field.value.urlFile"
                 [blobFile]="field.value.blobFile"
                 [fileName]="field.value.fileName"

lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html

@@ -10,7 +10,7 @@
                   [title]="field.tooltip"
                   (click)="markAsTouched()">
         {{ field.name | translate }}
-        <span class="adf-asterisk" *ngIf="isRequired()">*</span>
+        <span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
     </mat-checkbox>
     <error-widget [error]="field.validationSummary" />
     <error-widget *ngIf="isInvalidFieldRequired() && isTouched()"

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html

@@ -4,7 +4,7 @@
      [class.adf-left-label-input-container]="field.leftLabels">
     <div *ngIf="field.leftLabels">
         <label class="adf-label adf-left-label" [attr.for]="field.id">
-            {{ field.name | translate }} ({{ field.dateDisplayFormat }})<span class="adf-asterisk" *ngIf="isRequired()">*</span>
+            {{ field.name | translate }} ({{ field.dateDisplayFormat }})<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
         </label>
     </div>
     <div>
@@ -12,7 +12,7 @@
                         [class.adf-left-label-input-datepicker]="field.leftLabels"
                         [hideRequiredMarker]="true">
             <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
-                {{ field.name | translate }} ({{ field.dateDisplayFormat }})<span class="adf-asterisk" *ngIf="isRequired()">*</span>
+                {{ field.name | translate }} ({{ field.dateDisplayFormat }})<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
             </label>
             <input matInput
                    [matDatetimepicker]="datetimePicker"

lib/core/src/lib/form/components/widgets/decimal/decimal.component.html

@@ -4,14 +4,14 @@
      [class.adf-left-label-input-container]="field.leftLabels">
     <div *ngIf="field.leftLabels">
         <label class="adf-label adf-left-label" [attr.for]="field.id">
-            {{ field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
+            {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
         </label>
     </div>
 
     <div>
         <mat-form-field [hideRequiredMarker]="true">
             <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
-                {{ field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
+                {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
             </label>
 
             <input matInput

lib/core/src/lib/form/components/widgets/hyperlink/hyperlink.widget.html

@@ -1,6 +1,6 @@
 <div class="adf-hyperlink-widget {{field.className}}">
     <label class="adf-label" [attr.for]="field.id">
-        {{ field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
+        {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
     </label>
     <div [title]="field.tooltip">
         <a [href]="linkUrl" target="_blank" rel="nofollow">{{ linkText }}</a>

lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html

@@ -3,7 +3,7 @@
      [class.adf-readonly]="field.readOnly">
     <mat-form-field floatPlaceholder="never" [hideRequiredMarker]="true">
         <label class="adf-label" [attr.for]="field.id">
-            {{ field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
+            {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
         </label>
         <textarea matInput
                   class="adf-input"

lib/core/src/lib/form/components/widgets/number/number.widget.html

@@ -5,13 +5,13 @@
     <div *ngIf="field.leftLabels">
         <label class="adf-label adf-left-label"
                [attr.for]="field.id">
-            {{ field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
+            {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
         </label>
     </div>
     <div>
         <mat-form-field [hideRequiredMarker]="true">
             <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
-                {{ field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
+                {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
             </label>
             <input matInput
                    class="adf-input"

lib/core/src/lib/form/components/widgets/text/text.widget.html

@@ -4,13 +4,13 @@
      [class.adf-left-label-input-container]="field.leftLabels">
     <div *ngIf="field.leftLabels">
         <label class="adf-label adf-left-label" [attr.for]="field.id">
-            {{ field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
+            {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
         </label>
     </div>
     <div>
         <mat-form-field [hideRequiredMarker]="true">
             <label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
-                {{ field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
+                {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
             </label>
             <input matInput
                    class="adf-input"

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html

@@ -1,13 +1,29 @@
-<div class="{{field.className}}" id="data-widget" [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched" [class.adf-left-label-input-container]="field.leftLabels">
+<div
+    class="{{field.className}}"
+    id="data-widget"
+    [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched"
+    [class.adf-left-label-input-container]="field.leftLabels"
+>
     <div *ngIf="field.leftLabels">
-        <label class="adf-label adf-left-label" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk"
+        <label class="adf-label adf-left-label" [attr.for]="field.id"
-            *ngIf="isRequired()">*</span></label>
+            >{{field.name | translate }} ({{field.dateDisplayFormat}})<span
-     </div>
+                class="adf-asterisk"
+                [style.visibility]="isRequired() ? 'visible' : 'hidden'"
+                >*</span
+            ></label
+        >
+    </div>
     <div>
         <mat-form-field class="adf-date-widget" [class.adf-left-label-input-datepicker]="field.leftLabels" [hideRequiredMarker]="true">
-            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk"
+            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"
-                *ngIf="isRequired()">*</span></label>
+                >{{field.name | translate }} ({{field.dateDisplayFormat}})<span
-            <input matInput
+                    class="adf-asterisk"
+                    [style.visibility]="isRequired() ? 'visible' : 'hidden'"
+                    >*</span
+                ></label
+            >
+            <input
+                matInput
                 [matDatepicker]="datePicker"
                 [id]="field.id"
                 [formControl]="dateInputControl"
@@ -17,9 +33,7 @@
                 [title]="field.tooltip"
             />
             <mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" />
-            <mat-datepicker #datePicker
+            <mat-datepicker #datePicker [startAt]="startAt" [disabled]="field.readOnly" />
-                [startAt]="startAt"
-                [disabled]="field.readOnly" />
         </mat-form-field>
         <error-widget *ngIf="dateInputControl.invalid && dateInputControl.touched" [error]="field.validationSummary" />
     </div>

lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.html

@@ -6,14 +6,14 @@
 >
     <div *ngIf="field.leftLabels">
         <label class="adf-label adf-left-label" [attr.for]="field.id">
-            {{ field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
+            {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
         </label>
     </div>
 
     <div>
         <mat-form-field [hideRequiredMarker]="true">
             <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
-                {{ field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
+                {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
             </label>
             <input matInput
                    class="adf-input"

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html

@@ -6,13 +6,13 @@
 >
     <div *ngIf="field.leftLabels">
         <label class="adf-label adf-left-label" [attr.for]="field.id">
-            {{ field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
+            {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
         </label>
     </div>
     <div>
         <mat-form-field>
             <label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
-                {{ field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
+                {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
             </label>
             <mat-select
                 class="adf-select"

lib/process-services-cloud/src/lib/form/components/widgets/file-viewer/file-viewer.widget.html

@@ -1,7 +1,7 @@
 <div class="adf-file-viewer-widget {{field.className}}" [class.adf-invalid]="!field.isValid"
     [class.adf-readonly]="field.readOnly">
     <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
-            *ngIf="isRequired()">*</span></label>
+                                                                                    [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label>
     <adf-alfresco-viewer [overlayMode]="false" [nodeId]="field.value" [showViewer]="field.value" [allowGoBack]="false" />
     <error-widget [error]="field.validationSummary" />
 </div>

lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html

@@ -1,26 +1,37 @@
-<div class="adf-dropdown-widget {{field.className}}"
+<div
-     [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels">
+    class="adf-dropdown-widget {{field.className}}"
+    [class.adf-invalid]="!field.isValid && isTouched()"
+    [class.adf-readonly]="field.readOnly"
+    [class.adf-left-label-input-container]="field.leftLabels"
+>
     <div *ngIf="field.leftLabels">
-        <label class="adf-label adf-left-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+        <label class="adf-label adf-left-label" [attr.for]="field.id"
+            >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
+        >
     </div>
     <div>
-        <adf-cloud-group [mode]="mode"
+        <adf-cloud-group
-                [title]="title"
+            [mode]="mode"
-                [readOnly]="field.readOnly"
+            [title]="title"
-                [validate]="validate"
+            [readOnly]="field.readOnly"
-                [roles]="roles"
+            [validate]="validate"
-                [searchGroupsControl]="search"
+            [roles]="roles"
-                [required]="isRequired()"
+            [searchGroupsControl]="search"
-                (changedGroups)="onChangedGroup($event)"
+            [required]="isRequired()"
-                [preSelectGroups]="preSelectGroup"
+            (changedGroups)="onChangedGroup($event)"
-                (blur)="markAsTouched()"
+            [preSelectGroups]="preSelectGroup"
-                [attr.title]="field.tooltip">
+            (blur)="markAsTouched()"
-            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id" label>{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+            [attr.title]="field.tooltip"
+        >
+            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id" label
+                >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
+            >
         </adf-cloud-group>
         <error-widget [error]="field.validationSummary" />
         <error-widget
-            class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()"
+            class="adf-dropdown-required-message"
-            required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
+            *ngIf="isInvalidFieldRequired() && isTouched()"
+            required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
+        />
     </div>
 </div>
-

lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html

@@ -3,7 +3,7 @@
      [class.adf-readonly]="field.readOnly"
      [class.adf-left-label-input-container]="field.leftLabels">
      <div *ngIf="field.leftLabels">
-        <label class="adf-label adf-left-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+        <label class="adf-label adf-left-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label>
     </div>
     <div>
         <adf-cloud-people
@@ -23,7 +23,7 @@
             <label class="adf-label"
                    *ngIf="!field.leftLabels"
                    [attr.for]="field.id" label
-            >{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+            >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label>
         </adf-cloud-people>
         <error-widget [error]="field.validationSummary" />
         <error-widget

lib/process-services-cloud/src/lib/form/components/widgets/properties-viewer/properties-viewer.widget.html

@@ -1,9 +1,16 @@
-<div class="adf-file-viewer-widget {{field.className}}" [class.adf-invalid]="!field.isValid"
+<div class="adf-file-viewer-widget {{field.className}}" [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
-    [class.adf-readonly]="field.readOnly">
+    <label class="adf-label" [attr.for]="field.id"
-    <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
+        >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
-            *ngIf="isRequired()">*</span></label>
+    >
-    <ng-template #properties [ngTemplateOutlet]="properties" let-properties="properties" [ngTemplateOutletContext]="{ properties: field.params?.propertiesViewerOptions }">
+    <ng-template
-        <adf-properties-viewer-wrapper *ngIf="field.value" [nodeId]="field.value"
+        #properties
+        [ngTemplateOutlet]="properties"
+        let-properties="properties"
+        [ngTemplateOutletContext]="{ properties: field.params?.propertiesViewerOptions }"
+    >
+        <adf-properties-viewer-wrapper
+            *ngIf="field.value"
+            [nodeId]="field.value"
             [displayDefaultProperties]="properties?.displayDefaultProperties !== undefined ?  properties?.displayDefaultProperties : true"
             [expanded]="properties?.expanded !== undefined ? properties?.expanded : true"
             [preset]="properties?.preset"
@@ -13,7 +20,8 @@
             [displayAspect]="properties?.displayAspect !== undefined ? properties?.displayAspect : null"
             [copyToClipboardAction]="properties?.copyToClipboardAction !== undefined ? properties?.copyToClipboardAction : true"
             [useChipsForMultiValueProperty]="properties?.useChipsForMultiValueProperty !== undefined ? properties?.useChipsForMultiValueProperty : true"
-            (nodeContentLoaded)="onNodeContentLoaded($event)" />
+            (nodeContentLoaded)="onNodeContentLoaded($event)"
+        />
     </ng-template>
     <error-widget [error]="field.validationSummary" />
 </div>

lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.html

@@ -2,7 +2,7 @@
     [class.adf-readonly]="field.readOnly" [id]="field.id">
     <div [ngClass]="(field.alignmentType === 'vertical') ? 'adf-radio-button-container': 'adf-radio-button-container-horizontal'">
         <label class="adf-label"
-               [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
+               [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
         </label>
         <mat-radio-group
             [ngClass]="(field.alignmentType === 'vertical') ? 'adf-radio-group': 'adf-radio-group-horizontal'"

lib/process-services-cloud/src/lib/form/components/widgets/upload/upload-cloud.widget.html

@@ -1,18 +1,39 @@
-<div class="adf-upload-widget {{field.className}}" [class.adf-invalid]="!field.isValid"
+<div class="adf-upload-widget {{field.className}}" [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
-    [class.adf-readonly]="field.readOnly">
+    <label class="adf-label" [attr.for]="field.id"
-    <label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}<span class="adf-asterisk"
+        >{{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
-            *ngIf="isRequired()">*</span></label>
+    >
     <div class="adf-cloud-upload-widget-container">
         <div>
             <mat-list *ngIf="hasFile">
                 <mat-list-item class="adf-upload-files-row" *ngFor="let file of uploadedFiles">
-                    <img matListItemLine class="adf-upload-widget__icon" [id]="'file-'+file.id+'-icon'"
+                    <img
-                        [src]="getIcon(file.content.mimeType)" [alt]="mimeTypeIcon" (click)="fileClicked(file)"
+                        matListItemLine
-                        (keyup.enter)="fileClicked(file)" role="button" tabindex="0" />
+                        class="adf-upload-widget__icon"
-                    <span class="adf-upload-widget__button adf-file" matLine id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)"
+                        [id]="'file-'+file.id+'-icon'"
-                        role="button" tabindex="0">{{file.name}}</span>
+                        [src]="getIcon(file.content.mimeType)"
-                    <button *ngIf="!field.readOnly" mat-icon-button [id]="'file-'+file.id+'-remove'"
+                        [alt]="mimeTypeIcon"
-                        (click)="removeFile(file);" (keyup.enter)="removeFile(file);">
+                        (click)="fileClicked(file)"
+                        (keyup.enter)="fileClicked(file)"
+                        role="button"
+                        tabindex="0"
+                    />
+                    <span
+                        class="adf-upload-widget__button adf-file"
+                        matLine
+                        id="{{'file-'+file.id}}"
+                        (click)="fileClicked(file)"
+                        (keyup.enter)="fileClicked(file)"
+                        role="button"
+                        tabindex="0"
+                        >{{file.name}}</span
+                    >
+                    <button
+                        *ngIf="!field.readOnly"
+                        mat-icon-button
+                        [id]="'file-'+file.id+'-remove'"
+                        (click)="removeFile(file);"
+                        (keyup.enter)="removeFile(file);"
+                    >
                         <mat-icon class="mat-24">highlight_off</mat-icon>
                     </button>
                 </mat-list-item>
@@ -22,15 +43,11 @@
         <div *ngIf="(!hasFile || multipleOption) && !field.readOnly">
             <button mat-raised-button color="primary" (click)="uploadFiles.click()" [title]="field.tooltip">
                 {{ 'FORM.FIELD.UPLOAD' | translate }}<mat-icon>file_upload</mat-icon>
-                <input #uploadFiles [multiple]="multipleOption" type="file" [id]="field.form.nodeId"
+                <input #uploadFiles [multiple]="multipleOption" type="file" [id]="field.form.nodeId" (change)="onFileChanged($event)" />
-                    (change)="onFileChanged($event)" />
             </button>
         </div>
 
-        <div *ngIf="!hasFile && field.readOnly">
+        <div *ngIf="!hasFile && field.readOnly">{{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }}</div>
-            {{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }}
-        </div>
-
     </div>
     <error-widget [error]="field.validationSummary" />
     <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />

lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.html

@@ -1,7 +1,7 @@
 <div class="adf-attach-widget {{ field.className }}" [class.adf-readonly]="field.readOnly">
     <label class="adf-label" [attr.for]="field.id"
         >{{ field.name | translate }}
-        <span class="adf-asterisk" *ngIf="isRequired()">*</span>
+        <span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
     </label>
     <div class="adf-attach-widget-container">
         <div id="adf-attach-widget-simple-upload" *ngIf="isSimpleUploadButton() && isUploadButtonVisible()">

lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.html

@@ -1,27 +1,27 @@
-<div class="adf-attach-folder-widget {{field.className}}"
+<div class="adf-attach-folder-widget {{ field.className }}" [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
-     [class.adf-invalid]="!field.isValid"
+    <label class="adf-label" [attr.for]="field.id"
-     [class.adf-readonly]="field.readOnly">
+        >{{ field.name | translate }}<span [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
-    <label class="adf-label" [attr.for]="field.id">{{field.name | translate}}<span *ngIf="isRequired()">*</span></label>
+    >
     <div class="adf-attach-folder-widget-container">
         <div *ngIf="hasFolder" class="adf-attach-folder-result">
             <mat-icon>folder</mat-icon>
             <div class="adf-attach-folder-files-row">
-                <span matLine id="{{'folder-'+field?.id}}"
+                <span matLine id="{{ 'folder-' + field?.id }}" role="button" tabindex="0" class="adf-folder">{{ selectedFolderName }}</span>
-                        role="button" tabindex="0" class="adf-folder">{{selectedFolderName}}</span>
+                <button *ngIf="!field.readOnly" mat-icon-button [id]="'folder-' + field?.id + '-remove'" (click)="removeFolder()">
-                <button *ngIf="!field.readOnly" mat-icon-button [id]="'folder-'+field?.id+'-remove'"
-                        (click)="removeFolder();">
                     <mat-icon class="mat-24">highlight_off</mat-icon>
                 </button>
             </div>
         </div>
 
         <div *ngIf="!hasFolder && !field.readOnly">
-            <button mat-raised-button
+            <button
+                mat-raised-button
                 color="primary"
                 (click)="openSelectDialogFromFileSource()"
-                [id]="'folder-'+field?.id+'-button'"
+                [id]="'folder-' + field?.id + '-button'"
-                class="adf-attach-folder-menu-trigger">
+                class="adf-attach-folder-menu-trigger"
-                    {{ 'FORM.FIELD.UPLOAD' | translate }}
+            >
+                {{ 'FORM.FIELD.UPLOAD' | translate }}
                 <mat-icon>cloud_upload</mat-icon>
             </button>
         </div>

lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.html

@@ -3,7 +3,9 @@
     [class.adf-invalid]="dropdownControl.invalid && dropdownControl.touched"
     [class.adf-readonly]="field.readOnly"
 >
-    <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+    <label class="adf-label" [attr.for]="field.id"
+        >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
+    >
     <mat-form-field>
         <mat-select class="adf-select" [id]="field.id" [formControl]="dropdownControl">
             <mat-option *ngFor="let opt of field.options" [value]="opt" [id]="opt.id">{{opt.name}}</mat-option>

lib/process-services/src/lib/form/widgets/dynamic-table/dynamic-table.widget.html

@@ -1,5 +1,5 @@
 <div class="adf-dynamic-table-scrolling {{field.className}}" [class.adf-invalid]="!isValid()">
-    <div class="adf-label">{{content.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></div>
+    <div class="adf-label">{{content.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></div>
 
     <div *ngIf="!editMode">
         <div class="adf-table-container">

lib/process-services/src/lib/form/widgets/file-viewer/file-viewer.widget.html

@@ -1,7 +1,7 @@
-<div class="adf-file-viewer-widget {{field.className}}" [class.adf-invalid]="!field.isValid"
+<div class="adf-file-viewer-widget {{field.className}}" [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
-    [class.adf-readonly]="field.readOnly">
+    <label class="adf-label" [attr.for]="field.id"
-    <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
+        >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
-            *ngIf="isRequired()">*</span></label>
+    >
     <adf-alfresco-viewer [nodeId]="field.value" [showViewer]="field.value" [allowGoBack]="false" />
     <error-widget [error]="field.validationSummary" />
 </div>

lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.html

@@ -1,47 +1,53 @@
-<div class="adf-group-widget {{field.className}}"
+<div
-     [class.is-dirty]="!!field.value"
+    class="adf-group-widget {{field.className}}"
-     [class.adf-invalid]="!field.isValid && isTouched()"
+    [class.is-dirty]="!!field.value"
-     [class.adf-readonly]="field.readOnly"
+    [class.adf-invalid]="!field.isValid && isTouched()"
-     id="functional-group-div">
+    [class.adf-readonly]="field.readOnly"
-    <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+    id="functional-group-div"
-    <mat-form-field
+>
-        appearance="outline"
+    <label class="adf-label" [attr.for]="field.id"
-        class="adf-group-widget-field">
+        >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
+    >
+    <mat-form-field appearance="outline" class="adf-group-widget-field">
         <mat-chip-grid #chipGrid>
             <mat-chip-row
                 *ngFor="let group of selectedGroups"
                 (removed)="onRemove(group)"
                 [disabled]="field.readOnly"
                 [attr.data-automation-id]="'adf-group-widget-chip-' + group.id"
-                class="adf-group-widget-field-chip">
+                class="adf-group-widget-field-chip"
+            >
                 {{ getDisplayName(group) }}
                 <button matChipRemove [attr.aria-label]="'remove ' + group.name">
                     <mat-icon>close</mat-icon>
                 </button>
             </mat-chip-row>
-        <input matInput
+            <input
-               class="adf-input"
+                matInput
-               type="text"
+                class="adf-input"
-               data-automation-id="adf-group-search-input"
+                type="text"
-               [matChipInputFor]="chipGrid"
+                data-automation-id="adf-group-search-input"
-               [id]="field.id"
+                [matChipInputFor]="chipGrid"
-               [formControl]="searchTerm"
+                [id]="field.id"
-               [disabled]="!multiSelect && selectedGroups.length > 0 || field.readOnly"
+                [formControl]="searchTerm"
-               [placeholder]="field.placeholder"
+                [disabled]="!multiSelect && selectedGroups.length > 0 || field.readOnly"
-               (blur)="markAsTouched()"
+                [placeholder]="field.placeholder"
-               [matAutocomplete]="auto"
+                (blur)="markAsTouched()"
-               #inputValue>
+                [matAutocomplete]="auto"
+                #inputValue
+            />
         </mat-chip-grid>
         <mat-autocomplete #auto="matAutocomplete" (optionSelected)="updateOption($event.option.value)" [displayWith]="getDisplayName">
-            <mat-option *ngFor="let item of groups$ | async; let i = index"
+            <mat-option
-                        id="adf-group-widget-user-{{i}}"
+                *ngFor="let item of groups$ | async; let i = index"
-                        [id]="field.id +'-'+item.id"
+                id="adf-group-widget-user-{{i}}"
-                        [value]="item"
+                [id]="field.id +'-'+item.id"
-                        [disabled]="isGroupAlreadySelected(item)">
+                [value]="item"
+                [disabled]="isGroupAlreadySelected(item)"
+            >
                 <span id="adf-group-label-name">{{item.name}}</span>
             </mat-option>
         </mat-autocomplete>
-
     </mat-form-field>
     <error-widget [error]="field.validationSummary" />
     <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />

lib/process-services/src/lib/form/widgets/people/people.widget.html

@@ -2,7 +2,7 @@
      [class.adf-invalid]="!field.isValid && isTouched()"
      [class.adf-readonly]="field.readOnly"
      id="people-widget-content">
-    <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+    <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label>
     <mat-form-field
         appearance="outline"
         class="adf-people-widget-field">

lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.html

@@ -1,7 +1,8 @@
-<div class="adf-radio-buttons-widget {{field.className}}"
+<div class="adf-radio-buttons-widget {{field.className}}" [class.adf-readonly]="field.readOnly" [id]="field.id">
-    [class.adf-readonly]="field.readOnly" [id]="field.id">
     <div class="adf-radio-button-container">
-        <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+        <label class="adf-label" [attr.for]="field.id"
+            >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
+        >
         <mat-radio-group class="adf-radio-group" [(ngModel)]="field.value" [disabled]="field.readOnly">
             <mat-radio-button
                 [title]="field.tooltip"
@@ -11,7 +12,9 @@
                 [checked]="field.value === opt.id"
                 (change)="onOptionClick(opt.id)"
                 color="primary"
-                class="adf-radio-button" *ngFor="let opt of field.options" >
+                class="adf-radio-button"
+                *ngFor="let opt of field.options"
+            >
                 {{opt.name}}
             </mat-radio-button>
         </mat-radio-group>

lib/process-services/src/lib/form/widgets/upload/upload.widget.html

@@ -1,21 +1,39 @@
 <div class="adf-upload-widget {{field.className}}" [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
-    <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+    <label class="adf-label" [attr.for]="field.id"
+        >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
+    >
     <div class="adf-upload-widget-container">
         <div>
             <mat-list *ngIf="hasFile">
                 <mat-list-item class="adf-upload-files-row" *ngFor="let file of field.value">
-                    <img matListItemLine class="adf-upload-widget__icon"
+                    <img
-                         [id]="'file-'+file.id+'-icon'"
+                        matListItemLine
-                         [src]="getIcon(file.mimeType)"
+                        class="adf-upload-widget__icon"
-                         [alt]="mimeTypeIcon"
+                        [id]="'file-'+file.id+'-icon'"
-                         (click)="fileClicked(file)"
+                        [src]="getIcon(file.mimeType)"
-                         (keyup.enter)="fileClicked(file)"
+                        [alt]="mimeTypeIcon"
-                         role="button"
+                        (click)="fileClicked(file)"
-                         tabindex="0"/>
+                        (keyup.enter)="fileClicked(file)"
-                    <span matListItemLine id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)"
+                        role="button"
-                          role="button" tabindex="0" class="adf-file">{{file.name}}</span>
+                        tabindex="0"
-                    <button *ngIf="!field.readOnly" mat-icon-button [id]="'file-'+file.id+'-remove'"
+                    />
-                            (click)="removeFile(file);" (keyup.enter)="removeFile(file);">
+                    <span
+                        matListItemLine
+                        id="{{'file-'+file.id}}"
+                        (click)="fileClicked(file)"
+                        (keyup.enter)="fileClicked(file)"
+                        role="button"
+                        tabindex="0"
+                        class="adf-file"
+                        >{{file.name}}</span
+                    >
+                    <button
+                        *ngIf="!field.readOnly"
+                        mat-icon-button
+                        [id]="'file-'+file.id+'-remove'"
+                        (click)="removeFile(file);"
+                        (keyup.enter)="removeFile(file);"
+                    >
                         <mat-icon class="mat-24">highlight_off</mat-icon>
                     </button>
                 </mat-list-item>