[player] Prevent form validation when clicking buttons

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

@@ -10,6 +10,7 @@ import { ButtonElement } from '../models/button-element';
          [style.height.%]="100">
       <button *ngIf="!elementModel.imageSrc" mat-button
               (focusin)="onFocusin.emit()"
+              (click)="onClick($event)"
               [style.width.%]="100"
               [style.height.%]="100"
               [style.background-color]="elementModel.backgroundColor"
@@ -23,6 +24,8 @@ import { ButtonElement } from '../models/button-element';
         {{elementModel.label}}
       </button>
       <input *ngIf="elementModel.imageSrc" type="image"
+             (focusin)="onFocusin.emit()"
+             (click)="onClick($event)"
              [src]="elementModel.imageSrc | safeResourceUrl"
              [class]="elementModel.dynamicPositioning? 'dynamic-image' : 'static-image'"
              [alt]="'imageNotFound' | translate">
@@ -36,4 +39,9 @@ import { ButtonElement } from '../models/button-element';
 export class ButtonComponent extends ElementComponent {
   @Output() onFocusin = new EventEmitter();
   elementModel!: ButtonElement;
+
+  onClick = (event: MouseEvent): void => {
+    event.stopPropagation();
+    event.preventDefault();
+  };
 }

projects/common/element-components/text-field.component.ts

@@ -24,7 +24,7 @@ import { TextFieldElement } from '../models/text-field-element';
              [formControl]="elementFormControl"
              placeholder="{{elementModel.label}}">
       <button *ngIf="elementModel.clearable" matSuffix mat-icon-button aria-label="Clear"
-              (click)="elementFormControl.setValue('')">
+              (click)="onClick($event)">
         <mat-icon>close</mat-icon>
       </button>
       <mat-error *ngIf="elementFormControl.errors">
@@ -39,6 +39,12 @@ export class TextFieldComponent extends FormElementComponent {
   @Output() onBlur = new EventEmitter<HTMLElement>();
   elementModel!: TextFieldElement;
 
+  onClick(event: MouseEvent) : void {
+    this.elementFormControl.setValue('');
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
   get validators(): ValidatorFn[] {
     const validators: ValidatorFn[] = [];
     if (this.elementModel.required) {

projects/common/element-components/text.component.ts

@@ -13,19 +13,19 @@ import { TextElement } from '../models/text-element';
       <div *ngIf="elementModel.highlightable"
            class="marking-bar">
         <button class="marking-button" mat-mini-fab [style.background-color]="'yellow'"
-                (click)="applySelection.emit({color:'yellow', element: container, clear: false})">
+                (click)="onClick($event, {color:'yellow', element: container, clear: false})">
           <mat-icon>border_color</mat-icon>
         </button>
         <button class="marking-button" mat-mini-fab [style.background-color]="'turquoise'"
-                (click)="applySelection.emit({color: 'turquoise', element: container, clear: false})">
+                (click)="onClick($event, {color: 'turquoise', element: container, clear: false})">
           <mat-icon>border_color</mat-icon>
         </button>
         <button class="marking-button" mat-mini-fab [style.background-color]="'orange'"
-                (click)="applySelection.emit({color: 'orange', element: container, clear: false})">
+                (click)="onClick($event, {color: 'orange', element: container, clear: false})">
           <mat-icon>border_color</mat-icon>
         </button>
         <button class="marking-button" [style.background-color]="'lightgrey'" mat-mini-fab
-                (click)="applySelection.emit({color: 'none', element: container, clear: true})">
+                (click)="onClick($event, {color: 'none', element: container, clear: true})">
           <mat-icon>clear</mat-icon>
         </button>
       </div>
@@ -53,4 +53,10 @@ export class TextComponent extends ElementComponent {
   constructor(public sanitizer: DomSanitizer) {
     super();
   }
+
+  onClick(event: MouseEvent, markingValues: { color: string; element: HTMLElement; clear: boolean }) : void {
+    this.applySelection.emit(markingValues);
+    event.preventDefault();
+    event.stopPropagation();
+  }
 }