[editor] Fix toggling between action params in properties panel

projects/editor/src/app/app.module.ts

@@ -51,7 +51,7 @@ import {
   TooltipPropertiesDialogComponent
 } from 'editor/src/app/components/dialogs/tooltip-properties-dialog.component';
 import {
-  ActionPropertiesComponent, GetAnchorIdsPipe, GetStateVariableIdsPipe, ScrollPageIndexPipe
+  ActionPropertiesComponent, GetAnchorIdsPipe, GetStateVariableIdsPipe, GetStateVariablePipe, ScrollPageIndexPipe
 } from 'editor/src/app/components/properties-panel/model-properties-tab/input-groups/action-properties.component';
 import { AppComponent } from './app.component';
 import { ToolbarComponent } from './components/toolbar/toolbar.component';
@@ -192,6 +192,7 @@ import {
     GeogebraAppDefinitionDialogComponent,
     GetValidDropListsPipe,
     GetAnchorIdsPipe,
+    GetStateVariablePipe,
     ScrollPageIndexPipe,
     SizeInputPanelComponent,
     ComboButtonComponent,

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

@@ -33,9 +33,7 @@ import { Page } from 'common/models/page';
             <aspect-action-param-state-variable
               *ngIf="unitService.unit.stateVariables.length"
               [stateVariableIds]="unitService.unit.stateVariables | getStateVariableIds"
-              [stateVariable]="combinedProperties.actionParam ?
-                               $any(combinedProperties.actionParam) :
-                               { id: unitService.unit.stateVariables[0].id, value: '' }"
+              [stateVariable]="combinedProperties.actionParam | getStateVariable : unitService.unit.stateVariables"
               (stateVariableChange)="updateModel.emit({ property: 'actionParam', value: $event })">
             </aspect-action-param-state-variable>
             <p *ngIf="!unitService.unit.stateVariables.length">{{'propertiesPanel.addStateVariables' | translate}}</p>
@@ -111,6 +109,16 @@ export class GetStateVariableIdsPipe implements PipeTransform {
   }
 }
 
+@Pipe({
+  name: 'getStateVariable'
+})
+export class GetStateVariablePipe implements PipeTransform {
+  transform(actionParam: unknown, stateVariables: StateVariable[]): StateVariable {
+    if (actionParam && typeof actionParam === 'object') return actionParam as StateVariable;
+    return { id: stateVariables[0].id, value: '' };
+  }
+}
+
 @Pipe({
   name: 'getAnchorIds'
 })