Make cloze element children not directly clickable

Only the overlay can be clicked. This way the statre of the elements can 
not be changed which might be confused for actual value changes. Those 
can still only be done via properties panel.

Unfortunately we need another variable so the cloze elements knows when 
it runs in the editor or not.

projects/common/directives/cloze-child-overlay/compound-child-overlay.component.ts

@@ -14,6 +14,7 @@ import { ElementComponent } from '../element-component.directive';
     <div [style.outline]="isSelected ? 'purple solid 1px' : ''"
          (click)="elementSelected.emit(this); $event.stopPropagation();">
       <app-toggle-button *ngIf="element.type === 'toggle-button'" #childComponent
+                         [style.pointer-events]="editorMode ? 'none' : 'auto'"
                          [parentForm]="parentForm"
                          [style.display]="'inline-block'"
                          [style.vertical-align]="'middle'"
@@ -21,12 +22,14 @@ import { ElementComponent } from '../element-component.directive';
                          (elementValueChanged)="elementValueChanged.emit($event)">
       </app-toggle-button>
       <app-text-field-simple *ngIf="element.type === 'text-field'" #childComponent
+                             [style.pointer-events]="editorMode ? 'none' : 'auto'"
                              [parentForm]="parentForm"
                              [style.display]="'inline-block'"
                              [elementModel]="$any(element)"
                              (elementValueChanged)="elementValueChanged.emit($event)">
       </app-text-field-simple>
       <app-drop-list-simple *ngIf="element.type === 'drop-list'" #childComponent
+                            [style.pointer-events]="editorMode ? 'none' : 'auto'"
                             [parentForm]="parentForm"
                             [style.display]="'inline-block'"
                             [style.vertical-align]="'middle'"
@@ -39,6 +42,7 @@ import { ElementComponent } from '../element-component.directive';
 export class CompoundChildOverlayComponent {
   @Input() element!: ToggleButtonElement | TextFieldSimpleElement | DropListSimpleElement;
   @Input() parentForm!: FormGroup;
+  @Input() editorMode: boolean = false;
   @Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
   @Output() elementSelected = new EventEmitter<CompoundChildOverlayComponent>();
   @ViewChild('childComponent') childComponent!: ElementComponent;

projects/common/ui-elements/cloze/cloze.component.ts

@@ -155,6 +155,7 @@ import { LikertRadioButtonGroupComponent } from '../likert/likert-radio-button-g
           <app-compound-child-overlay [style.display]="'inline-block'"
                                       [parentForm]="parentForm"
                                       [element]="$any(subPart).attrs.model"
+                                      [editorMode]="editorMode"
                                       (elementSelected)="childElementSelected.emit($event)"
                                       (elementValueChanged)="elementValueChanged.emit($event)">
           </app-compound-child-overlay>
@@ -179,6 +180,8 @@ export class ClozeComponent extends CompoundElementComponent {
   @Output() childElementSelected = new EventEmitter<CompoundChildOverlayComponent>();
   @ViewChildren(CompoundChildOverlayComponent) compoundChildren!: QueryList<CompoundChildOverlayComponent>;
 
+  editorMode: boolean = false;
+
   getFormElementModelChildren(): InputElement[] {
     return this.elementModel.document.content
       .filter((paragraph: ClozeDocumentParagraph) => paragraph.content) // filter empty paragraphs

projects/editor/src/app/components/unit-view/page-view/canvas/overlays/canvas-element-overlay.ts

@@ -43,6 +43,8 @@ export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
     this.selectionService.selectElement({ elementComponent: this, multiSelect: false });
 
     if (this.childComponent.instance instanceof ClozeComponent) {
+      // make cloze element children clickable
+      this.childComponent.instance.editorMode = true;
       this.childComponent.location.nativeElement.style.pointerEvents = 'unset';
       this.childComponent.instance.childElementSelected
         .pipe(takeUntil(this.ngUnsubscribe))