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"