[editor] Fix button action inputs

Casting to ButtonElement caused issues where changed values were not 
recognized by inputs.

#280

projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/button-properties.component.ts

 import {
-  Component, EventEmitter, Input, OnInit, Output
+  Component, EventEmitter, Input, Output
 } from '@angular/core';
-import { UnitService } from '../../../../services/unit.service';
-import { SelectionService } from '../../../../services/selection.service';
 import { FileService } from 'common/services/file.service';
 import { UIElement } from 'common/models/elements/element';
-import { ButtonElement } from 'common/models/elements/button/button';
+import { UnitService } from '../../../../services/unit.service';
+import { SelectionService } from '../../../../services/selection.service';
 
 @Component({
   selector: 'aspect-button-properties',
@@ -14,14 +13,14 @@ import { ButtonElement } from 'common/models/elements/button/button';
       <legend>Knopf</legend>
 
       <mat-checkbox *ngIf="combinedProperties.asLink !== undefined"
-                    [checked]="combinedButtonElement.asLink"
+                    [checked]="$any(combinedProperties).asLink"
                     (change)="updateModel.emit({ property: 'asLink', value: $event.checked })">
         {{'propertiesPanel.asLink' | translate }}
       </mat-checkbox>
 
       <mat-form-field *ngIf="combinedProperties.action !== undefined" appearance="fill">
         <mat-label>{{'propertiesPanel.action' | translate }}</mat-label>
-        <mat-select [value]="combinedButtonElement.action"
+        <mat-select [value]="combinedProperties.action"
                     (selectionChange)="updateModel.emit({ property: 'action', value: $event.value })">
           <mat-option [value]="null">
             {{ 'propertiesPanel.none' | translate }}
@@ -35,13 +34,13 @@ import { ButtonElement } from 'common/models/elements/button/button';
 
       <mat-form-field appearance="fill">
         <mat-label>{{'propertiesPanel.actionParam' | translate }}</mat-label>
-          <mat-select [disabled]="combinedButtonElement.action === null"
-                      [value]="combinedButtonElement.actionParam"
-                      [matTooltipDisabled]="combinedButtonElement.action !== 'pageNav'"
+          <mat-select [disabled]="combinedProperties.action === null"
+                      [value]="combinedProperties.actionParam"
+                      [matTooltipDisabled]="combinedProperties.action !== 'pageNav'"
                       [matTooltip]="'propertiesPanel.pageNavSelectionHint' | translate"
                       (selectionChange)="updateModel.emit({ property: 'actionParam', value: $event.value })">
 
-            <ng-container *ngIf="combinedButtonElement.action === 'pageNav'">
+            <ng-container *ngIf="combinedProperties.action === 'pageNav'">
               <ng-container *ngFor="let page of unitService.unit.pages; index as i">
                 <mat-option *ngIf="!page.alwaysVisible && selectionService.selectedPageIndex !== i"
                             [value]="i">
@@ -50,7 +49,7 @@ import { ButtonElement } from 'common/models/elements/button/button';
               </ng-container>
             </ng-container>
 
-            <ng-container *ngIf="combinedButtonElement.action === 'unitNav'">
+            <ng-container *ngIf="combinedProperties.action === 'unitNav'">
               <mat-option *ngFor="let option of [undefined, 'previous', 'next', 'first', 'last', 'end']"
                           [value]="option">
                 {{ 'propertiesPanel.' + option | translate }}
@@ -60,14 +59,14 @@ import { ButtonElement } from 'common/models/elements/button/button';
       </mat-form-field>
 
       <div class="image-panel" (mouseenter)="hoveringImage = true" (mouseleave)="hoveringImage = false">
-        <button *ngIf="combinedButtonElement.imageSrc === null || hoveringImage"
+        <button *ngIf="combinedProperties.imageSrc === null || hoveringImage"
                 class="add-image-button" mat-raised-button
                 (click)="loadImage()">{{'loadImage' | translate }}</button>
-        <button *ngIf="combinedButtonElement.imageSrc !== null && hoveringImage"
+        <button *ngIf="combinedProperties.imageSrc !== null && hoveringImage"
                 class="remove-image-button" mat-raised-button
                 (click)="removeImage()">{{'removeImage' | translate }}</button>
-        <img *ngIf="combinedButtonElement.imageSrc"
-             [src]="combinedButtonElement.imageSrc">
+        <img *ngIf="combinedProperties.imageSrc"
+             [src]="combinedProperties.imageSrc">
       </div>
     </fieldset>
   `,
@@ -80,20 +79,15 @@ import { ButtonElement } from 'common/models/elements/button/button';
     '.image-panel img {width:100%; height:100%;}'
   ]
 })
-export class ButtonPropertiesComponent implements OnInit {
+export class ButtonPropertiesComponent {
   @Input() combinedProperties!: UIElement;
   @Output() updateModel =
     new EventEmitter<{ property: string; value: string | number | boolean | null, isInputValid?: boolean | null }>();
 
-  combinedButtonElement: ButtonElement = {} as ButtonElement;
   hoveringImage = false;
 
   constructor(public unitService: UnitService, public selectionService: SelectionService) { }
 
-  ngOnInit(): void {
-    this.combinedButtonElement = this.combinedProperties as ButtonElement;
-  }
-
   async loadImage(): Promise<void> {
     this.updateModel.emit({ property: 'imageSrc', value: await FileService.loadImage() });
   }