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;
         }
     }

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html

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

lib/process-services-cloud/src/lib/group/components/group-cloud.component.html

@@ -1,7 +1,7 @@
 <form>
     <mat-form-field class="adf-cloud-group adf-form-field-input" [class.adf-invalid]="hasError() && isDirty()">
         @if (label || required) { <mat-label><span>{{label}}</span></mat-label> }
-        <mat-chip-grid [required]="required" #groupChipList data-automation-id="adf-cloud-group-chip-list">
+        <mat-chip-grid [required]="required" [disabled]="isReadonly()" #groupChipList data-automation-id="adf-cloud-group-chip-list">
             <mat-chip-row
                 *ngFor="let group of selectedGroups"
                 [removable]="!(group.readonly)"
@@ -16,7 +16,7 @@
                    [formControl]="searchGroupsControl"
                    [matAutocomplete]="auto"
                    [matChipInputFor]="groupChipList"
-                   [placeholder]="title | translate"
+                   [placeholder]="isReadonly() ? '' : (title | translate)"
                    [required]="required"
                    (focus)="setFocus(true)"
                    (blur)="setFocus(false); markAsTouched()"

lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts

@@ -173,9 +173,6 @@ export class GroupCloudComponent implements OnInit, OnChanges {
     }
 
     ngOnChanges(changes: SimpleChanges): void {
-        if (changes?.readOnly || changes?.validate) {
-            this.updateSearchControlState();
-        }
         if (this.hasPreselectedGroupsChanged(changes) || this.hasModeChanged(changes) || this.isValidationChanged(changes)) {
             if (this.hasPreSelectGroups()) {
                 this.loadPreSelectGroups();
@@ -188,6 +185,8 @@ export class GroupCloudComponent implements OnInit, OnChanges {
                 this.invalidGroups = [];
             }
         }
+
+        this.updateSearchControlState();
     }
 
     private initSearch(): void {

lib/process-services-cloud/src/lib/people/components/people-cloud.component.html

@@ -9,7 +9,7 @@
         </mat-label>
         <mat-label *ngIf="title">{{ title | translate }}</mat-label>
 
-        <mat-chip-grid [required]="required" #userMultipleChipList data-automation-id="adf-cloud-people-chip-list">
+        <mat-chip-grid [required]="required" [disabled]="isReadonly()" #userMultipleChipList data-automation-id="adf-cloud-people-chip-list">
             <mat-chip-row
                 *ngFor="let user of selectedUsers"
                 [removable]="!user.readonly"