Updated DataReference and Semantic Link to display as label and value

Author: mohas22

packages/angular-sdk-components/src/lib/_components/field/semantic-link/semantic-link.component.html

@@ -1,4 +1,10 @@
-<div *ngIf="bVisible$ !== false" [ngClass]="label$.length > 0 ? 'psdk-grid-filter' : 'psdk-container-nolabels'">
+<div *ngIf="displayMode$">
+  <div class="psdk-grid-filter">
+    <div class="psdk-grid-label">{{ label$ }}</div>
+    <a *ngIf="!isLinkTextEmpty; else noLink" class="psdk-value" href="#" (click)="openLinkClick($event)">{{ value$ || '---' }}</a>
+  </div>
+</div>
+<div *ngIf="bVisible$ !== false && !displayMode$" [ngClass]="label$.length > 0 ? '' : 'psdk-container-nolabels'">
   <div class="psdk-grid-label">{{ label$ }}</div>
   <a *ngIf="!isLinkTextEmpty; else noLink" class="psdk-value" href="#" (click)="openLinkClick($event)">{{ value$ || '---' }}</a>
 </div>

packages/angular-sdk-components/src/lib/_components/field/semantic-link/semantic-link.component.scss

@@ -3,7 +3,7 @@
   grid-template-columns: repeat(2, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
-  align-items: start;
+  align-items: center;
 }
 
 .psdk-container-nolabels {

packages/angular-sdk-components/src/lib/_components/template/single-reference-readonly/single-reference-readonly.component.ts

@@ -55,7 +55,9 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
   updateSelf() {
     this.configProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
     const rawViewMetadata = this.pConn$.getRawMetadata();
-    const propsToUse = { ...this.pConn$.getInheritedProps(), ...this.configProps };
+    const label = this.configProps.label;
+    const showLabel = this.configProps.showLabel;
+    const propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
     const type = (rawViewMetadata?.config as any)?.componentType;
     const displayMode = this.configProps.displayMode;
     const targetObjectType = this.configProps.targetObjectType;
@@ -66,12 +68,16 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
     const dataRelationshipContext = (rawViewMetadata?.config as any)?.displayField
       ? getDataRelationshipContextFromKey((rawViewMetadata?.config as any)?.displayField)
       : this.dataRelationshipContext;
+    if (propsToUse.showLabel === false) {
+      propsToUse.label = '';
+    }
     this.label = propsToUse.label;
 
     const editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown', 'RadioButtons'];
     const config: any = {
       ...rawViewMetadata?.config,
-      primaryField: (rawViewMetadata?.config as any)?.displayField
+      primaryField: (rawViewMetadata?.config as any)?.displayField,
+      label: this.label
     };
 
     const activeViewRuleClass = (rawViewMetadata?.config as any)?.targetObjectClass;