Add player event handling for button's navigation events

projects/common/components/button/button.component.ts

 import {
   Component, EventEmitter, Input, Output
 } from '@angular/core';
-import { ElementComponent } from '../../directives/element-component.directive';
 import { ButtonElement } from 'common/models/elements/button/button';
+import { NavigationEvent } from 'common/models/elements/element';
+import { ElementComponent } from '../../directives/element-component.directive';
 
 @Component({
   selector: 'aspect-button',
@@ -68,8 +69,5 @@ import { ButtonElement } from 'common/models/elements/button/button';
 })
 export class ButtonComponent extends ElementComponent {
   @Input() elementModel!: ButtonElement;
-  @Output() navigateTo = new EventEmitter<{
-    action: 'unitNav' | 'pageNav';
-    param: 'previous' | 'next' | 'first' | 'last' | 'end' | number
-  }>();
+  @Output() navigateTo = new EventEmitter<NavigationEvent>();
 }

projects/common/models/elements/element.ts

@@ -205,6 +205,11 @@ export interface ValueChangeElement {
   value: InputElementValue;
 }
 
+export interface NavigationEvent {
+  action: 'unitNav' | 'pageNav';
+  param: 'previous' | 'next' | 'first' | 'last' | 'end' | number;
+}
+
 export interface OptionElement extends UIElement {
   getNewOptionLabel(optionText: string): Label;
 }

projects/player/src/app/components/elements/compound-group-element/compound-group-element.component.ts

@@ -10,6 +10,9 @@ import {
 import { ClozeElement } from 'common/models/elements/compound-elements/cloze/cloze';
 import { LikertElement } from 'common/models/elements/compound-elements/likert/likert';
 import { CompoundElement, InputElement } from 'common/models/elements/element';
+import { ButtonComponent } from 'common/components/button/button.component';
+import { VeronaPostService } from 'player/modules/verona/services/verona-post.service';
+import { NavigationService } from 'player/src/app/services/navigation.service';
 import { UnitStateService } from '../../../services/unit-state.service';
 import { ElementModelElementCodeMappingService } from '../../../services/element-model-element-code-mapping.service';
 import { ValidationService } from '../../../services/validation.service';
@@ -39,6 +42,8 @@ export class CompoundGroupElementComponent extends ElementFormGroupDirective imp
     public translateService: TranslateService,
     public messageService: MessageService,
     public veronaSubscriptionService: VeronaSubscriptionService,
+    private veronaPostService: VeronaPostService,
+    private navigationService: NavigationService,
     public validationService: ValidationService
   ) {
     super();
@@ -60,6 +65,9 @@ export class CompoundGroupElementComponent extends ElementFormGroupDirective imp
         this.manageKeyInputToggling(child as TextFieldSimpleComponent, childModel);
         this.manageHardwareKeyBoardDetection(child as TextFieldSimpleComponent);
       }
+      if (childModel.type === 'button') {
+        this.addNavigationEventListener(child as ButtonComponent);
+      }
     });
   }
 
@@ -98,4 +106,17 @@ export class CompoundGroupElementComponent extends ElementFormGroupDirective imp
     this.deviceService.hasHardwareKeyboard = true;
     this.keyboardService.close();
   }
+
+  private addNavigationEventListener(button: ButtonComponent) {
+    button.navigateTo
+      .pipe(takeUntil(this.ngUnsubscribe))
+      .subscribe(navigationEvent => {
+        if (navigationEvent.action === 'unitNav') {
+          this.veronaPostService.sendVopUnitNavigationRequestedNotification(
+            (navigationEvent.param as 'previous' | 'next' | 'first' | 'last' | 'end'));
+        } else {
+          this.navigationService.setPage(navigationEvent.param as number);
+        }
+      });
+  }
 }