AAE-46434 Fix read-only field styling on forms (#11928)

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

@@ -1,4 +1,5 @@
 /* stylelint-disable selector-class-pattern */
+@use '@angular/material' as mat;
 @use '../../styles/flex' as flex;
 @use '../../styles/mat-selectors' as ms;
 
@@ -274,3 +275,49 @@
 form-field {
     width: 100%;
 }
+
+.adf-readonly {
+    @include mat.form-field-overrides(
+        (
+            filled-disabled-input-text-color: var(--mat-sys-on-surface),
+            filled-disabled-label-text-color: var(--mat-sys-on-surface-variant),
+            filled-active-indicator-color: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent),
+            filled-hover-active-indicator-color: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent),
+            outlined-disabled-input-text-color: var(--mat-sys-on-surface),
+            outlined-disabled-label-text-color: var(--mat-sys-on-surface-variant),
+            outlined-outline-color: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent),
+            outlined-hover-outline-color: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent)
+        )
+    );
+    @include mat.select-overrides(
+        (
+            disabled-trigger-text-color: var(--mat-sys-on-surface)
+        )
+    );
+    @include mat.checkbox-overrides(
+        (
+            disabled-label-color: var(--mat-sys-on-surface),
+            disabled-selected-checkmark-color: var(--mat-sys-surface),
+            disabled-selected-icon-color: var(--mat-sys-outline)
+        )
+    );
+    @include mat.radio-overrides(
+        (
+            disabled-label-color: var(--mat-sys-on-surface),
+            disabled-selected-icon-color: var(--mat-sys-primary)
+        )
+    );
+    @include mat.button-overrides(
+        (
+            filled-disabled-label-text-color: var(--mat-sys-on-surface)
+        )
+    );
+
+    .mat-datepicker-toggle.mat-mdc-button-disabled {
+        color: var(--mat-sys-on-surface-variant);
+    }
+
+    .mat-mdc-chip-disabled {
+        opacity: 1;
+    }
+}

lib/core/src/lib/form/components/widgets/button/button.widget.html

@@ -1,10 +1,12 @@
-<button
-    mat-flat-button
-    class="adf-button-widget__button"
-    [matTooltip]="field?.tooltip"
-    [matTooltipShowDelay]="tooltipShowDelay"
-    [disabled]="field?.readOnly ?? false"
-    (click)="onClick($event)"
->
-    {{ field?.name | translate }}
-</button>
+<div [class.adf-readonly]="field?.readOnly">
+    <button
+        mat-flat-button
+        class="adf-button-widget__button"
+        [matTooltip]="field?.tooltip"
+        [matTooltipShowDelay]="tooltipShowDelay"
+        [disabled]="field?.readOnly ?? false"
+        (click)="onClick($event)"
+    >
+        {{ field?.name | translate }}
+    </button>
+</div>

lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html

@@ -1,5 +1,7 @@
 <div [ngClass]="field.className"
-     [class.adf-invalid]="!field.isValid && isTouched()" class="adf-checkbox-widget-container"
+     [class.adf-invalid]="!field.isValid && isTouched()"
+     [class.adf-readonly]="field.readOnly || readOnly"
+     class="adf-checkbox-widget-container"
 >
     <mat-checkbox [id]="field.id"
                   class="adf-checkbox"

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html

@@ -1,6 +1,7 @@
 <div class="{{ field.className }}"
      id="data-time-widget"
      [class.adf-invalid]="datetimeInputControl.invalid && datetimeInputControl.touched"
+     [class.adf-readonly]="field.readOnly"
      [class.adf-left-label-input-container]="field.leftLabels">
     <div *ngIf="field.leftLabels">
         <label class="adf-label adf-left-label" [attr.for]="field.id">

lib/core/src/lib/form/components/widgets/date/date.widget.html

@@ -1,4 +1,6 @@
-<div class="{{ field.className }} date-widget-container" id="data-widget" [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched">
+<div class="{{ field.className }} date-widget-container" id="data-widget"
+     [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched"
+     [class.adf-readonly]="field.readOnly">
     <mat-form-field class="adf-date-widget adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
         <mat-label class="adf-label"
                    [id]="field.id + '-label'"

lib/core/src/lib/form/components/widgets/repeat/repeat.widget.scss

@@ -21,13 +21,13 @@
 .adf-readonly {
     .adf-container-widget {
         &-repeat__text {
-            color: var(--mdc-text-button-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));
-            border-bottom: 1px solid var(--mdc-text-button-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));
+            color: var(--mat-sys-on-surface);
+            border-bottom: 1px solid var(--mat-sys-outline-variant);
             cursor: default;
         }
 
         &-row-limit {
-            color: var(--mdc-text-button-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));
+            color: var(--mat-sys-on-surface-variant);
             font-size: 12px;
         }
     }