feat(notification): add optional callbacks to jump marks

Allow to perform specific actions on jump mark click.

closes sbb-design-systems#131

projects/sbb-esta/angular-public/notification/src/notification/notification.component.spec.ts

@@ -7,6 +7,7 @@ import { IconCollectionModule } from '@sbb-esta/angular-icons';
 import { configureTestSuite } from 'ng-bullet';
 
 import { NotificationComponent, NotificationType } from './notification.component';
+import createSpy = jasmine.createSpy;
 
 @Component({
   selector: 'sbb-notification-mock',
@@ -109,5 +110,18 @@ describe('NotificationComponent', () => {
         expect(componentStyles.height).toBe('92px');
       });
     });
+
+    it('should call callback of jump mark', () => {
+      const callbackMock = createSpy('mock-callback');
+      testComponent.jumpMarks = [{ callback: callbackMock, title: 'Here' }];
+      testFixture.detectChanges();
+      const notificationLink = testFixture.debugElement.query(
+        By.css('.sbb-notification-jump-mark > a')
+      );
+      notificationLink.triggerEventHandler('click', {
+        preventDefault: createSpy('prevent-default-mock')
+      });
+      expect(callbackMock).toHaveBeenCalled();
+    });
   });
 });

projects/sbb-esta/angular-public/notification/src/notification/notification.component.ts

@@ -20,7 +20,8 @@ export interface JumpMark {
   /** Title of an element in jump marks. */
   title: string;
   /** Identifier of an element in jump marks. */
-  elementId: string;
+  elementId?: string;
+  callback?: (event$: any, jumpMark: JumpMark) => void;
 }
 
 @Component({
@@ -114,6 +115,11 @@ export class NotificationComponent {
    */
   scrollTo($event: any, jumpMark: JumpMark) {
     $event.preventDefault();
-    document.querySelector(jumpMark.elementId).scrollIntoView({ behavior: 'smooth' });
+    if (jumpMark.elementId) {
+      document.querySelector(jumpMark.elementId).scrollIntoView({ behavior: 'smooth' });
+    }
+    if (jumpMark.callback) {
+      jumpMark.callback($event, jumpMark);
+    }
   }
 }