Error in activity reporter not visible, need to scroll to the top

Add a scrollIntoView method for the vcd-banner-activity-reporter. This increases the visibility of success and error messages by scrolling the activity reporter banner into view.

Testing Done:
- Edited examples locally to have a page where the error/success message is not visible.
- Observed that the scrolling to the activity banner was successful.

Signed-off-by: Juliana Sica <juliana.sica@broadcom.com>

projects/components/CHANGELOG.MD

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix ErrorBannerExampleComponent when closed with X button
 ### Changed
 * errorMessage reset value is `null` instead of `undefined`
+* Add scrollIntoView method for the vcd-banner-activity-reporter
 
 ## [15.0.1-dev.12]
 ### Fixed

projects/components/src/common/activity-reporter/banner-activity-reporter.component.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
-import { Component, Inject, Input } from '@angular/core';
+import { Component, ElementRef, Inject, Input } from '@angular/core';
 import { TranslationService } from '@vcd/i18n';
 import { LazyString } from '@vcd/i18n';
 import { ActivityPromiseResolver } from './activity-promise-resolver';
@@ -29,6 +29,7 @@ export class BannerActivityReporterComponent extends ActivityReporter {
 
     constructor(
         private translationService: TranslationService,
+        private elementRef: ElementRef,
         @Inject(ActivityPromiseResolver) promiseResolver: ActivityPromiseResolver<any>
     ) {
         super(promiseResolver);
@@ -49,6 +50,7 @@ export class BannerActivityReporterComponent extends ActivityReporter {
     reportError(errorText: string): void {
         this.errorText = errorText;
         this.running = false;
+        this.scrollIntoView();
     }
 
     /**
@@ -59,6 +61,7 @@ export class BannerActivityReporterComponent extends ActivityReporter {
             this.successMessage = successMessage;
         }
         this.running = false;
+        this.scrollIntoView();
     }
 
     /**
@@ -75,6 +78,13 @@ export class BannerActivityReporterComponent extends ActivityReporter {
         this.successMessage = null;
     }
 
+    /**
+     * Scroll to the banner activity reporter.
+     */
+    private scrollIntoView(): void {
+        this.elementRef.nativeElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+
     /*
      * Reset the banner activity state manually.
      *