Handling label in single reference component

Author: mohas22

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

@@ -1,11 +1,4 @@
-<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>
+<div *ngIf="bVisible$ !== false">
   <a *ngIf="!isLinkTextEmpty; else noLink" class="psdk-value" href="#" (click)="openLinkClick($event)">{{ value$ || '---' }}</a>
 </div>
 <ng-template #noLink>

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

@@ -1,21 +1,3 @@
-.psdk-grid-filter {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  column-gap: calc(2 * 0.5rem);
-  row-gap: calc(2 * 0.5rem);
-  align-items: center;
-}
-
-.psdk-container-nolabels {
-  align-items: start;
-  padding-block: 8px;
-}
-
-.psdk-label {
-  color: var(--app-label-color);
-  margin: 8px 0px;
-}
-
 .psdk-value {
   margin: 8px 0px;
 }

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

@@ -1 +1,4 @@
-<component-mapper name="SemanticLink" [props]="{ pConn$: newPconn, formGroup$ }"></component-mapper>
+<div [ngClass]="displayMode ? 'psdk-grid-display' : 'psdk-grid-nondisplay'">
+  <div *ngIf="label" class="psdk-grid-label">{{ label }}</div>
+  <component-mapper name="SemanticLink" [props]="{ pConn$: newPconn, formGroup$ }"></component-mapper>
+</div>

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

@@ -0,0 +1,21 @@
+.psdk-grid-display {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: center;
+  margin-top: 1rem;
+}
+
+.psdk-grid-nondisplay {
+  margin-top: 1rem;
+}
+
+.psdk-label {
+  color: var(--app-label-color);
+  margin: 8px 0px;
+}
+
+.psdk-value {
+  margin: 8px 0px;
+}

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

@@ -21,6 +21,7 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
   component: any;
   label: string;
   newPconn: typeof PConnect;
+  displayMode: string;
 
   constructor(private angularPConnect: AngularPConnectService) {}
 
@@ -59,7 +60,7 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
     const showLabel = this.configProps.showLabel;
     const propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
     const type = (rawViewMetadata?.config as any)?.componentType;
-    const displayMode = this.configProps.displayMode;
+    this.displayMode = this.configProps.displayMode;
     const targetObjectType = this.configProps.targetObjectType;
     const referenceType = targetObjectType === 'case' ? 'Case' : 'Data';
     const hideLabel = this.configProps.hideLabel;
@@ -99,7 +100,7 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
         type: 'SemanticLink',
         config: {
           ...config,
-          displayMode,
+          displayMode: this.displayMode,
           referenceType,
           hideLabel,
           dataRelationshipContext