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

Author: tomson7777

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,15 +4,15 @@
      [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>
         <mat-form-field class="adf-date-time-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>
+                {{ 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"
-            *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>