fix: scroll to top when new step loads (#401)

Author: tumms2021389

packages/angular-sdk-components/src/lib/_components/designSystemExtension/banner/banner.component.scss

@@ -20,6 +20,10 @@
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
+
+  & > *:nth-child(1) {
+    min-width: 0;
+  }
 }
 
 .psdk-grid-filter-narrow-wide {

packages/angular-sdk-components/src/lib/_components/field/date-time/date-time.component.ts

@@ -4,9 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
-
 import { ScrollStrategyOptions } from '@angular/cdk/overlay';
-
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
 import dayjs from 'dayjs';
 

packages/angular-sdk-components/src/lib/_components/infra/assignment/assignment.component.ts

@@ -18,6 +18,11 @@ function getRefreshProps(refreshConditions) {
   return refreshConditions.filter(item => item.event && item.event === 'Changes').map(item => [item.field, item.field?.substring(1)]) || [];
 }
 
+function scrollToTop() {
+  const scrollElement = document.querySelector('.psdk-view-container-top');
+  scrollElement?.scrollIntoView();
+}
+
 interface AssignmentProps {
   // If any, enter additional props that only exist on this component
   template: string;
@@ -140,6 +145,8 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   updateChanges() {
+    scrollToTop();
+
     this.registerForRefresh();
 
     // pConn$ may be a 'reference' component, so normalize it

packages/angular-sdk-components/src/lib/_components/template/confirmation/confirmation.component.html

@@ -1,7 +1,7 @@
 <div>
   <div *ngIf="showConfirmView">
     <h2 id="confirm-label" class="confirm-label">{{ label }}</h2>
-    <div *ngIf="showDetails">
+    <div *ngIf="showDetails" class="confirmation-details">
       <component-mapper name="Details" [props]="{ pConn$ }"></component-mapper>
     </div>
     <div *ngIf="showTasks && toDoList?.length > 0">

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

@@ -15,8 +15,6 @@
   padding-top: 0.625rem;
   cursor: pointer;
   padding-right: 1rem;
-  &:hover {
-  }
   align-items: center;
 }
 
@@ -106,9 +104,6 @@
 
 .psdk-nav-button-span {
   padding: 0 1rem;
-
-  &:hover {
-  }
 }
 
 .psdk-nav-oper-avatar {
@@ -148,9 +143,6 @@ mat-list-item {
   cursor: pointer !important;
   height: auto !important;
 
-  &:hover {
-  }
-
   .flex-box {
     display: flex;
     align-items: center;

projects/angular-test-app/src/app/_samples/full-portal/full-portal.component.html

@@ -17,7 +17,7 @@
     </div>
   </div>
   <div *ngIf="bPCoreReady$">
-    <div *ngIf="sComponentName$ == 'RootContainer'">
+    <div *ngIf="sComponentName$ == 'RootContainer'" id="pega-portal-container">
       <component-mapper name="RootContainer" [props]="{ pConn$ }"></component-mapper>
     </div>
   </div>

projects/angular-test-app/src/containerStyles.scss

@@ -71,5 +71,6 @@ app-view-container {
 
   .psdk-view-container-top {
     padding: 0;
+    scroll-margin-top: 64px;
   }
 }