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

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>

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}}"
-     [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>
-

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"
-    [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>

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"
-    [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 }}" />