Displaying the caseType name on self service case view page

Author: manasa

packages/angular-sdk-components/src/lib/_components/infra/Containers/flow-container/flow-container.component.html

@@ -1,7 +1,7 @@
 <div style="text-align: left" class="psdk-flow-container-top">
   <div *ngIf="!bShowConfirm">
     <div *ngIf="!todo_showTodo$">
-      <h2>{{ containerName$ }}</h2>
+      <h2 *ngIf="!isMultiStep">{{ containerName$ }}</h2>
       <div *ngIf="banners?.length">
         <component-mapper name="AlertBanner" [props]="{ banners }"></component-mapper>
       </div>

packages/angular-sdk-components/src/lib/_components/infra/Containers/flow-container/flow-container.component.ts

@@ -70,6 +70,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
   // itemKey: string = "";   // JA - this is what Nebula/Constellation uses to pass to finishAssignment, navigateToStep
 
   pConnectOfActiveContainerItem;
+  isMultiStep: any;
 
   constructor(
     injector: Injector,
@@ -281,6 +282,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     // this.containerName$ = oWorkMeta["name"];
     if (bLoadChildren && oWorkData) {
       this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name, undefined, this.localeReference);
+      this.isMultiStep = this.utils.getBooleanValue(oWorkData.caseInfo.assignments?.[0].isMultiStep);
     }
 
     // turn off spinner

packages/angular-sdk-components/src/lib/_components/template/self-service-case-view/self-service-case-view.component.html

@@ -1,6 +1,6 @@
-<div *ngIf="showCaseActions" class="psdk-self-service-case-view-header">
-  <div>{{ this.heading$ }}</div>
-  <div class="psdk-case-view-buttons">
+<div class="psdk-self-service-case-view-header">
+  <div class="heading">{{ this.heading$ }}</div>
+  <div *ngIf="showCaseActions" class="psdk-case-view-buttons">
     <button mat-raised-button color="secondary" [matMenuTriggerFor]="actionMenu">{{ localizedVal('Actions...', localeCategory) }}</button>
     <mat-menu #actionMenu="matMenu" overlapTrigger="false">
       <ng-container *ngFor="let action of arAvailableActions$">

packages/angular-sdk-components/src/lib/_components/template/self-service-case-view/self-service-case-view.component.scss

@@ -117,9 +117,16 @@ button {
 }
 
 .psdk-self-service-case-view-header {
+  height: 50px;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
   align-items: center;
-  margin: 10px;
   background-color: var(--mat-sys-primary);
+  padding: 0px 8px;
+}
+
+.heading {
+  font-size: 20px;
+  color: var(--mat-sys-on-primary);
+  font-weight: 600;
 }

packages/angular-sdk-components/src/lib/_components/template/wss-nav-bar/wss-nav-bar.component.scss

@@ -125,7 +125,6 @@
 }
 
 mat-toolbar {
-  margin-bottom: 5px;
   background-color: var(--mat-sys-surface-variant);
 }