AAE-27107 Improve logic

Author: DiogoABastos

lib/core/src/lib/form/components/form-renderer.component.html

@@ -81,8 +81,24 @@
                         <div 
                             class="adf-grid-list-container"
                             [class.adf-grid-list-container-multiple]="hasMultipleRows"
-                        >
-                            <h4 class="adf-grid-list-container-label">{{ 'FORM.FORM_RENDERER.ROW_LABEL' | translate: {number: rowIndex + 1} }}</h4>
+                            [class.adf-grid-list-container-disabled]="currentRootElement.field.readOnly"
+                        >   
+                            <div class="adf-grid-list-row">
+                                <span  class="adf-grid-list-row-label">{{ 'FORM.FORM_RENDERER.ROW_LABEL' | translate: {number: rowIndex + 1} }}</span>
+
+                                @let shouldDisplayRemoveRowButton = !currentRootElement.field.rows[rowIndex].isInitial || (currentRootElement.field.rows[rowIndex].isInitial && currentRootElement.field.params.allowInitialRowsDelete);
+                                @if (shouldDisplayRemoveRowButton) {
+                                    <button 
+                                        mat-icon-button
+                                        class="adf-grid-list-row-remove-button"
+                                        [disabled]="currentRootElement.field.readOnly"
+                                        [matTooltip]="'FORM.FORM_RENDERER.DELETE_ROW' | translate"
+                                        (click)="displayDialogToRemoveRow(currentRootElement.field, rowIndex)"
+                                    >
+                                        <mat-icon>close</mat-icon>
+                                    </button>
+                                }
+                            </div>
                             <section  class="adf-grid-list-column-view">
                                 @for (column of row.columns; track $index) {
                                     <div 
@@ -100,17 +116,6 @@ <h4 class="adf-grid-list-container-label">{{ 'FORM.FORM_RENDERER.ROW_LABEL' | tr
                                         }
                                     </div>
                                 }
-
-                                @let shouldDisplayRemoveRowButton = !currentRootElement.field.rows[rowIndex].isInitial || (currentRootElement.field.rows[rowIndex].isInitial && currentRootElement.field.params.allowInitialRowsDelete);
-                                @if (shouldDisplayRemoveRowButton) {
-                                    <button 
-                                        mat-icon-button
-                                        class="adf-grid-list-remove-row-button"
-                                        (click)="displayDialogToRemoveRow(currentRootElement.field, rowIndex)"
-                                    >
-                                        <mat-icon>close</mat-icon>
-                                    </button>
-                                }
                             </section>
                         </div>
                     }

lib/core/src/lib/form/components/form-renderer.component.scss

@@ -98,28 +98,48 @@
             padding-right: 3px;
         }
 
-        &-remove-row-button {
-            margin-top: 20px;
-
-            #{ms.$mat-icon} {
+        &-row {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+
+            &-remove-button {
+                padding: 0;
+                width: 30px;
+                height: 30px;
                 display: flex;
-                justify-content: center;
                 align-items: center;
-                font-size: 20px;
+                justify-content: center;
+
+                #{ms.$mat-icon} {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    font-size: 18px;
+                }
             }
         }
 
         &-container {
-            padding: 0 10px;
-
-            &-label {
-                margin: 5px 0 5px -10px;
-            }
+            padding: 0 15px;
 
             &-multiple {
                 border-bottom: 1px solid rgba(0, 0, 0, 0.54);
                 margin-bottom: 25px;
             }
+
+            &-disabled {
+                &.adf-grid-list-container-multiple {
+                    border-bottom: 1px solid
+                        var(--mdc-text-button-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));
+                }
+
+                .adf-grid-list-row-label {
+                    color: var(--mdc-text-button-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));
+                    cursor: default;
+                }
+            }
         }
     }
 

lib/core/src/lib/form/components/form-renderer.component.ts

@@ -32,6 +32,7 @@ import { FormSectionComponent } from './form-section/form-section.component';
 import { DecimalRenderMiddlewareService } from './middlewares/decimal-middleware.service';
 import { MatDialog } from '@angular/material/dialog';
 import { ConfirmDialogComponent } from '../../../lib/dialogs/confirm-dialog/confirm.dialog';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
     selector: 'adf-form-renderer',
@@ -63,7 +64,8 @@ import { ConfirmDialogComponent } from '../../../lib/dialogs/confirm-dialog/conf
         NgClass,
         HeaderWidgetComponent,
         FormSectionComponent,
-        RepeatWidgetComponent
+        RepeatWidgetComponent,
+        MatTooltipModule
     ],
     encapsulation: ViewEncapsulation.None
 })