Fixed the issue UserReference value not displaying in Details template

Author: manasa

packages/angular-sdk-components/src/lib/_components/field/user-reference/user-reference.component.html

@@ -1,8 +1,8 @@
-<div class="psdk-user-reference">
+<div>
   <div *ngIf="displayMode$; else noDisplayMode">
     <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
   </div>
-  <ng-template #noDisplayMode>
+  <ng-template class="psdk-user-reference" #noDisplayMode>
     <div *ngIf="type === 'operator'">
       <component-mapper name="Operator" [props]="{ pConn$ }"></component-mapper>
     </div>

packages/angular-sdk-components/src/lib/_components/field/user-reference/user-reference.component.ts

@@ -168,7 +168,12 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     this.placeholder = placeholder || '';
     this.displayMode$ = displayMode;
 
-    this.value$ = this.pConn$.getConfigProps()?.value;
+    const user = this.pConn$.getConfigProps()?.value;
+    if (typeof user === 'object' && user !== null && user.userName) {
+      this.value$ = user.userName;
+    } else {
+      this.value$ = user || '';
+    }
 
     const { readOnly, required } = props;
     [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));

packages/angular-sdk-components/src/lib/_components/template/field-value-list/field-value-list.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="displayMode$ === 'DISPLAY_ONLY'; else STACKED_LARGE_VAL" class="${label$ ? 'psdk-container-labels-left' : 'psdk-container-nolabels'}">
+<div *ngIf="displayMode$ === 'DISPLAY_ONLY'; else STACKED_LARGE_VAL" [ngClass]="label$ ? 'psdk-container-labels-left' : 'psdk-container-nolabels'">
   <div *ngIf="label$" class="psdk-grid-label">{{ label$ }}</div>
   <div class="psdk-val-labels-left">
     <ng-container *ngTemplateOutlet="valueTemplate"></ng-container>