From 8d1d50cf559c5e006c7b78f964f714a37ebe4de8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rube=CC=81n=20Barroso?=
 <1204625+rbarroso@users.noreply.github.com>
Date: Mon, 9 May 2022 16:20:47 +0200
Subject: [PATCH] [AAE-6807] Left side labels for text widget

---
 .../components/form-renderer.component.scss   |  2 +-
 .../components/widgets/text/text.widget.html  | 48 +++++++++----------
 .../components/widgets/text/text.widget.scss  | 14 +++++-
 3 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/lib/core/form/components/form-renderer.component.scss b/lib/core/form/components/form-renderer.component.scss
index 8022ec9b44..b403029039 100644
--- a/lib/core/form/components/form-renderer.component.scss
+++ b/lib/core/form/components/form-renderer.component.scss
@@ -89,7 +89,7 @@
     }
 
     &-left-label {
-        font-size: var(--theme-caption-font-size);
+        font-size: 12px;
         line-height: 64px;
         margin-right: 15px;
     }
diff --git a/lib/core/form/components/widgets/text/text.widget.html b/lib/core/form/components/widgets/text/text.widget.html
index 12db9e3774..af4fe6a075 100644
--- a/lib/core/form/components/widgets/text/text.widget.html
+++ b/lib/core/form/components/widgets/text/text.widget.html
@@ -1,26 +1,26 @@
 <div class="adf-textfield adf-text-widget {{field.className}}"
      [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
-    <mat-form-field [hideRequiredMarker]="true" [appearance]="field.compactFields ? 'outline' : 'legacy'" [class.adf-compact-field]="field.compactFields">
-    <mat-label *ngIf="field.compactFields" [attr.for]="field.id">{{field.name | translate }}
-        <span class="adf-asterisk" *ngIf="isRequired()">*</span>
-    </mat-label>
-    <label class="adf-label" *ngIf="!field.compactFields" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
-    <input matInput
-        class="adf-input"
-        type="text"
-        [id]="field.id"
-        [required]="isRequired()"
-        [value]="field.value"
-        [(ngModel)]="field.value"
-        (ngModelChange)="onFieldChanged(field)"
-        [disabled]="field.readOnly || readOnly"
-        [textMask]="{mask: mask, isReversed: isMaskReversed}"
-        [placeholder]="placeholder"
-        [matTooltip]="field.tooltip"
-        (blur)="markAsTouched()"
-        matTooltipPosition="above"
-        matTooltipShowDelay="1000">
-    </mat-form-field>
-    <error-widget *ngIf="isTouched() && !this.field.isValid" [error]="field.validationSummary" class="a"></error-widget>
-    <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}" class="b"></error-widget>
-</div>
+    <label class="adf-left-label" *ngIf="field.compactFields" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+    <div>
+        <mat-form-field [hideRequiredMarker]="true">
+            <label class="adf-label" *ngIf="!field.compactFields" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
+            <input matInput
+                   class="adf-input"
+                   type="text"
+                   [id]="field.id"
+                   [required]="isRequired()"
+                   [value]="field.value"
+                   [(ngModel)]="field.value"
+                   (ngModelChange)="onFieldChanged(field)"
+                   [disabled]="field.readOnly || readOnly"
+                   [textMask]="{mask: mask, isReversed: isMaskReversed}"
+                   [placeholder]="placeholder"
+                   [matTooltip]="field.tooltip"
+                   (blur)="markAsTouched()"
+                    matTooltipPosition="above"
+                    matTooltipShowDelay="1000">
+        </mat-form-field>
+        <error-widget [error]="field.validationSummary"></error-widget>
+        <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
+    </div>
+</div>
\ No newline at end of file
diff --git a/lib/core/form/components/widgets/text/text.widget.scss b/lib/core/form/components/widgets/text/text.widget.scss
index 8f95cb8ecf..b9994941aa 100644
--- a/lib/core/form/components/widgets/text/text.widget.scss
+++ b/lib/core/form/components/widgets/text/text.widget.scss
@@ -1,7 +1,19 @@
 .adf {
     &-text-widget {
 
-        width: 100%;
+        display: flex;
+
+        min-height: 4.2em !important;
+        height: 4.2em;
+
+        div {
+            width: 100%;
+            padding-right: 1%;
+        }
+
+        label {
+            width: 240px;
+        }
 
         .mat-form-field-label-wrapper label {
             top: 20px;