AAE-21393 Fix amount form widget style (#9601)

Alfresco · May 9, 2024 · 7965108 · 7965108
1 parent 5389780
commit 7965108
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.html b/lib/core/src/lib/form/components/widgets/amount/amount.widget.html
@@ -1,12 +1,12 @@
 <div class="adf-amount-widget__container adf-amount-widget {{field.className}}"
        [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly"
        [class.adf-left-label-input-container]="field.leftLabels">
-       <div>
-              <label class="adf-label"
-                     [class.adf-left-label]="field.leftLabels" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+       <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>
        </div>
        <div>
               <mat-form-field class="adf-amount-widget__input" [hideRequiredMarker]="true">
+                     <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
                      <span matTextPrefix class="adf-amount-widget__prefix-spacing">{{ currency }} &nbsp;</span>
                      <input matInput [matTooltip]="field.tooltip" matTooltipPosition="above" matTooltipShowDelay="1000"
                             class="adf-input" type="text" [id]="field.id" [required]="isRequired()"

diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
@@ -1,7 +1,6 @@
 /* stylelint-disable selector-class-pattern */
 @import 'styles/mat-selectors';
 
-
 .adf {
     &-amount-widget {
         width: 100%;
@@ -19,6 +18,12 @@
             transition: none;
         }
 
+        #{$mat-form-field-prefix} {
+            padding-top: 16px;
+            padding-bottom: 16px;
+            align-self: flex-end;
+        }
+
         &:not(#{$mat-focused}):not(#{$mat-form-field-invalid}) {
             .adf-amount-widget__prefix-spacing {
                 color: var(--adf-theme-foreground-secondary-text-color);