Add 'readonly' setting for all InputElements and likert

For elements which don't have this functionality the workaround is to 
use pointer events and make the elements unclickable.

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

@@ -11,6 +11,7 @@ import { CheckboxElement } from '../models/checkbox-element';
          [style.height.%]="100"
          [style.background-color]="elementModel.backgroundColor">
       <mat-checkbox #checkbox class="example-margin"
+                    (click)="elementModel.readOnly ? $event.preventDefault() : null"
                     [formControl]="elementFormControl"
                     [style.color]="elementModel.fontColor"
                     [style.font-family]="elementModel.font"

projects/common/element-components/compound-elements/likert-radio-button-group.component.ts

@@ -17,6 +17,7 @@ import { LikertElementRow } from '../../models/compound-elements/likert-element-
       </div>
 
       <mat-radio-button *ngFor="let answer of [].constructor(elementModel.columnCount); let j = index"
+                        [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
                         [value]="j"
                         [style.grid-column-start]="2 + j"
                         [style.grid-column-end]="3 + j"

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

@@ -18,8 +18,11 @@ import { DropdownElement } from '../models/dropdown-element';
         {{$any(elementModel).label}}
       </mat-label>
       <mat-select [formControl]="elementFormControl">
-        <mat-option *ngIf="elementModel.allowUnset" value=""></mat-option>
-        <mat-option *ngFor="let option of elementModel.options; let i = index" [value]="i">
+        <mat-option *ngIf="elementModel.allowUnset" value="" (click)="$event.preventDefault()"
+                    [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'">
+        </mat-option>
+        <mat-option *ngFor="let option of elementModel.options; let i = index" [value]="i"
+                    [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'">
           {{option}}
         </mat-option>
       </mat-select>

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

@@ -26,6 +26,7 @@ import { RadioButtonGroupElement } from '../models/radio-button-group-element';
                        [formControl]="elementFormControl">
         <mat-radio-button *ngFor="let option of elementModel.options; let i = index"
                           [value]="i"
+                          [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
                           [style.line-height.%]="elementModel.lineHeight">
           {{option}}
         </mat-radio-button>

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

@@ -17,6 +17,7 @@ import { TextAreaElement } from '../models/text-area-element';
                     [appearance]="$any(elementModel.appearance)">
       <textarea matInput [formControl]="elementFormControl" #input
                 rows="{{elementModel.rows}}"
+                [readonly]="elementModel.readOnly"
                 (focus)="onFocus.emit(input)"
                 (blur)="onBlur.emit(input)"
                 autocomplete="off"

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

@@ -19,6 +19,7 @@ import { TextFieldElement } from '../models/text-field-element';
                     [appearance]="$any(elementModel.appearance)">
       <mat-label>{{elementModel.label}}</mat-label>
       <input matInput type="text" [pattern]="elementModel.pattern" #input
+             [readonly]="elementModel.readOnly"
              (focus)="onFocus.emit(input)"
              (blur)="onBlur.emit(input)"
              autocomplete="off"
@@ -43,6 +44,7 @@ import { TextFieldElement } from '../models/text-field-element';
                     appInputBackgroundColor [backgroundColor]="elementModel.backgroundColor"
                     [appearance]="$any(elementModel.appearance)">
       <input matInput type="text" #input
+             [readonly]="elementModel.readOnly"
              [pattern]="elementModel.pattern"
              (focus)="onFocus.emit(input)"
              (blur)="onBlur.emit(input)"

projects/common/models/compound-elements/likert-element.ts

@@ -7,6 +7,7 @@ export class LikertElement extends UIElement implements FontElement, SurfaceUIEl
   questions: LikertElementRow[] = [];
   answers: AnswerOption[] = [];
   lineColoring: boolean = true;
+  readOnly: boolean = false;
 
   fontColor: string = 'black';
   font: string = 'Roboto';
@@ -36,5 +37,10 @@ export class LikertElement extends UIElement implements FontElement, SurfaceUIEl
         question.columnCount = this.answers.length;
       });
     }
+    if (property === 'readOnly') {
+      this.questions.forEach(question => {
+        question.readOnly = this.readOnly;
+      });
+    }
   }
 }

projects/common/models/uI-element.ts

@@ -50,6 +50,7 @@ export abstract class InputElement extends UIElement {
   value: InputElementValue;
   required: boolean;
   requiredWarnMessage: string;
+  readOnly: boolean = false;
 
   protected constructor(serializedElement: UIElement) {
     super(serializedElement);
@@ -57,5 +58,6 @@ export abstract class InputElement extends UIElement {
     this.value = serializedElement.value as string | number | boolean | null || null;
     this.required = serializedElement.required as boolean || false;
     this.requiredWarnMessage = serializedElement.requiredWarnMessage as string || 'Eingabe erforderlich';
+    this.readOnly = serializedElement.readOnly as boolean || false;
   }
 }

projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html

@@ -49,6 +49,11 @@
           Deselektion erlauben
         </mat-checkbox>
 
+        <mat-checkbox *ngIf="combinedProperties.readOnly !== undefined"
+                      [checked]="$any(combinedProperties.readOnly)"
+                      (change)="updateModel('readOnly', $event.checked)">
+          Schreibgeschützt
+        </mat-checkbox>
         <mat-checkbox *ngIf="combinedProperties.required !== undefined"
                       [checked]="$any(combinedProperties.required)"
                       (change)="updateModel('required', $event.checked)">