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

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"