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

2025-05-12 17:04:57 +00:00 · 2025-02-25 14:27:44 +01:00 · 2025-02-25 14:27:44 +01:00 · ac11fa8a65
commit ac11fa8a65
parent 58fa965d3f
27 changed files with 217 additions and 138 deletions
--- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.html
+++ b/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>
--- a/lib/core/src/lib/form/components/widgets/base-viewer/base-viewer.widget.html
+++ b/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"
--- a/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html
+++ b/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()"
--- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
+++ b/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"
--- a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
+++ b/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
--- a/lib/core/src/lib/form/components/widgets/hyperlink/hyperlink.widget.html
+++ b/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>
--- a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html
+++ b/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"
--- a/lib/core/src/lib/form/components/widgets/number/number.widget.html
+++ b/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"
--- a/lib/core/src/lib/form/components/widgets/text/text.widget.html
+++ b/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"
--- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
+++ b/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"
-            *ngIf="isRequired()">*</span></label>
-     </div>
+        <label class="adf-label adf-left-label" [attr.for]="field.id"
+            >{{field.name | translate }} ({{field.dateDisplayFormat}})<span
+                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"
-                *ngIf="isRequired()">*</span></label>
-            <input matInput
+            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"
+                >{{field.name | translate }} ({{field.dateDisplayFormat}})<span
+                    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
-                [startAt]="startAt"
-                [disabled]="field.readOnly" />
+            <mat-datepicker #datePicker [startAt]="startAt" [disabled]="field.readOnly" />
        </mat-form-field>
        <error-widget *ngIf="dateInputControl.invalid && dateInputControl.touched" [error]="field.validationSummary" />
    </div>
--- a/lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.html
+++ b/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"
--- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
+++ b/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"
--- a/lib/process-services-cloud/src/lib/form/components/widgets/file-viewer/file-viewer.widget.html
+++ b/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>
--- a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html
+++ b/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}}"
-     [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels">
+<div
+    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"
-                [title]="title"
-                [readOnly]="field.readOnly"
-                [validate]="validate"
-                [roles]="roles"
-                [searchGroupsControl]="search"
-                [required]="isRequired()"
-                (changedGroups)="onChangedGroup($event)"
-                [preSelectGroups]="preSelectGroup"
-                (blur)="markAsTouched()"
-                [attr.title]="field.tooltip">
-            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id" label>{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+        <adf-cloud-group
+            [mode]="mode"
+            [title]="title"
+            [readOnly]="field.readOnly"
+            [validate]="validate"
+            [roles]="roles"
+            [searchGroupsControl]="search"
+            [required]="isRequired()"
+            (changedGroups)="onChangedGroup($event)"
+            [preSelectGroups]="preSelectGroup"
+            (blur)="markAsTouched()"
+            [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()"
-            required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
+            class="adf-dropdown-required-message"
+            *ngIf="isInvalidFieldRequired() && isTouched()"
+            required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
+        />
    </div>
 </div>
-
--- a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html
+++ b/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
--- a/lib/process-services-cloud/src/lib/form/components/widgets/properties-viewer/properties-viewer.widget.html
+++ b/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"
-    [class.adf-readonly]="field.readOnly">
-    <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
-            *ngIf="isRequired()">*</span></label>
-    <ng-template #properties [ngTemplateOutlet]="properties" let-properties="properties" [ngTemplateOutletContext]="{ properties: field.params?.propertiesViewerOptions }">
-        <adf-properties-viewer-wrapper *ngIf="field.value" [nodeId]="field.value"
+<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" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
+    >
+    <ng-template
+        #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>
--- a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.html
+++ b/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'"
--- a/lib/process-services-cloud/src/lib/form/components/widgets/upload/upload-cloud.widget.html
+++ b/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"
-    [class.adf-readonly]="field.readOnly">
-    <label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}<span class="adf-asterisk"
-            *ngIf="isRequired()">*</span></label>
+<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" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</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'"
-                        [src]="getIcon(file.content.mimeType)" [alt]="mimeTypeIcon" (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);">
+                    <img
+                        matListItemLine
+                        class="adf-upload-widget__icon"
+                        [id]="'file-'+file.id+'-icon'"
+                        [src]="getIcon(file.content.mimeType)"
+                        [alt]="mimeTypeIcon"
+                        (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"
-                    (change)="onFileChanged($event)" />
+                <input #uploadFiles [multiple]="multipleOption" type="file" [id]="field.form.nodeId" (change)="onFileChanged($event)" />
            </button>
        </div>

-        <div *ngIf="!hasFile && field.readOnly">
-            {{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }}
-        </div>
-
+        <div *ngIf="!hasFile && field.readOnly">{{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }}</div>
    </div>
    <error-widget [error]="field.validationSummary" />
    <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
--- a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.html
+++ b/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()">
--- a/lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.html
+++ b/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}}"
-     [class.adf-invalid]="!field.isValid"
-     [class.adf-readonly]="field.readOnly">
-    <label class="adf-label" [attr.for]="field.id">{{field.name | translate}}<span *ngIf="isRequired()">*</span></label>
+<div class="adf-attach-folder-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 [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</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}}"
-                        role="button" tabindex="0" class="adf-folder">{{selectedFolderName}}</span>
-                <button *ngIf="!field.readOnly" mat-icon-button [id]="'folder-'+field?.id+'-remove'"
-                        (click)="removeFolder();">
+                <span matLine id="{{ 'folder-' + field?.id }}" role="button" tabindex="0" class="adf-folder">{{ selectedFolderName }}</span>
+                <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'"
-                class="adf-attach-folder-menu-trigger">
-                    {{ 'FORM.FIELD.UPLOAD' | translate }}
+                [id]="'folder-' + field?.id + '-button'"
+                class="adf-attach-folder-menu-trigger"
+            >
+                {{ 'FORM.FIELD.UPLOAD' | translate }}
                <mat-icon>cloud_upload</mat-icon>
            </button>
        </div>
--- a/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.html
+++ b/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>
--- a/lib/process-services/src/lib/form/widgets/dynamic-table/dynamic-table.widget.html
+++ b/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">
--- a/lib/process-services/src/lib/form/widgets/file-viewer/file-viewer.widget.html
+++ b/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"
-    [class.adf-readonly]="field.readOnly">
-    <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
-            *ngIf="isRequired()">*</span></label>
+<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" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
+    >
    <adf-alfresco-viewer [nodeId]="field.value" [showViewer]="field.value" [allowGoBack]="false" />
    <error-widget [error]="field.validationSummary" />
 </div>
--- a/lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.html
+++ b/lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.html
@ -1,47 +1,53 @@
-<div class="adf-group-widget {{field.className}}"
-     [class.is-dirty]="!!field.value"
-     [class.adf-invalid]="!field.isValid && isTouched()"
-     [class.adf-readonly]="field.readOnly"
-     id="functional-group-div">
-    <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
-    <mat-form-field
-        appearance="outline"
-        class="adf-group-widget-field">
+<div
+    class="adf-group-widget {{field.className}}"
+    [class.is-dirty]="!!field.value"
+    [class.adf-invalid]="!field.isValid && isTouched()"
+    [class.adf-readonly]="field.readOnly"
+    id="functional-group-div"
+>
+    <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-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
-               class="adf-input"
-               type="text"
-               data-automation-id="adf-group-search-input"
-               [matChipInputFor]="chipGrid"
-               [id]="field.id"
-               [formControl]="searchTerm"
-               [disabled]="!multiSelect && selectedGroups.length > 0 || field.readOnly"
-               [placeholder]="field.placeholder"
-               (blur)="markAsTouched()"
-               [matAutocomplete]="auto"
-               #inputValue>
+            <input
+                matInput
+                class="adf-input"
+                type="text"
+                data-automation-id="adf-group-search-input"
+                [matChipInputFor]="chipGrid"
+                [id]="field.id"
+                [formControl]="searchTerm"
+                [disabled]="!multiSelect && selectedGroups.length > 0 || field.readOnly"
+                [placeholder]="field.placeholder"
+                (blur)="markAsTouched()"
+                [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"
-                        id="adf-group-widget-user-{{i}}"
-                        [id]="field.id +'-'+item.id"
-                        [value]="item"
-                        [disabled]="isGroupAlreadySelected(item)">
+            <mat-option
+                *ngFor="let item of groups$ | async; let i = index"
+                id="adf-group-widget-user-{{i}}"
+                [id]="field.id +'-'+item.id"
+                [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 }}" />
--- a/lib/process-services/src/lib/form/widgets/people/people.widget.html
+++ b/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">
--- a/lib/process-services/src/lib/form/widgets/radio-buttons/radio-buttons.widget.html
+++ b/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}}"
-    [class.adf-readonly]="field.readOnly" [id]="field.id">
+<div class="adf-radio-buttons-widget {{field.className}}" [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>
--- a/lib/process-services/src/lib/form/widgets/upload/upload.widget.html
+++ b/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"
-                         [id]="'file-'+file.id+'-icon'"
-                         [src]="getIcon(file.mimeType)"
-                         [alt]="mimeTypeIcon"
-                         (click)="fileClicked(file)"
-                         (keyup.enter)="fileClicked(file)"
-                         role="button"
-                         tabindex="0"/>
-                    <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);">
+                    <img
+                        matListItemLine
+                        class="adf-upload-widget__icon"
+                        [id]="'file-'+file.id+'-icon'"
+                        [src]="getIcon(file.mimeType)"
+                        [alt]="mimeTypeIcon"
+                        (click)="fileClicked(file)"
+                        (keyup.enter)="fileClicked(file)"
+                        role="button"
+                        tabindex="0"
+                    />
+                    <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>