diff --git a/projects/common/element-components/checkbox.component.ts b/projects/common/element-components/checkbox.component.ts
index 39b425f34b560ef82208ab8450352268489cc74f..839276244bb4a904aa7268198d5221e899578b44 100644
--- a/projects/common/element-components/checkbox.component.ts
+++ b/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"
diff --git a/projects/common/element-components/compound-elements/likert-radio-button-group.component.ts b/projects/common/element-components/compound-elements/likert-radio-button-group.component.ts
index 6db2fb66e8275e05f0c4befe13bc9d7f492df721..85004279352c637d84d46b93747bd7b20eeff92c 100644
--- a/projects/common/element-components/compound-elements/likert-radio-button-group.component.ts
+++ b/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"
diff --git a/projects/common/element-components/dropdown.component.ts b/projects/common/element-components/dropdown.component.ts
index 0b50d054d2275c5c3de4b10a3d5adb5d10f1a2b3..202d4f9df382053a96740cdb22bd18912d36e18b 100644
--- a/projects/common/element-components/dropdown.component.ts
+++ b/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>
diff --git a/projects/common/element-components/radio-button-group.component.ts b/projects/common/element-components/radio-button-group.component.ts
index 3841bd9ce257d5c19d10ac4d64aad16054c1e73a..0e524fb658ea98f1ac9298483f76ee14590e3c98 100644
--- a/projects/common/element-components/radio-button-group.component.ts
+++ b/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>
diff --git a/projects/common/element-components/text-area.component.ts b/projects/common/element-components/text-area.component.ts
index 2ebd1eaa0124cf2db3f6568920f4a127652df722..d7d39ca4ed5ac46d3164bc6909362c42361f9d7a 100644
--- a/projects/common/element-components/text-area.component.ts
+++ b/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"
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 90aa805e0363924af8dde2a5c587e579520cd9a7..01fff83ee236981f3e5cd5be1cd2a1b3cb6d1f34 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/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)"
diff --git a/projects/common/models/compound-elements/likert-element.ts b/projects/common/models/compound-elements/likert-element.ts
index 8c191f64c22768f9073b6f0701de77c399a10e72..e7585e4b1aa8e287551bb7e9c5a0f4adeacd2359 100644
--- a/projects/common/models/compound-elements/likert-element.ts
+++ b/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;
+ });
+ }
}
}
diff --git a/projects/common/models/uI-element.ts b/projects/common/models/uI-element.ts
index e3456d20a50c049d794d2d55d66da2d983c3592f..7a5fb30dd24b73d557c486d14fc472a47de16785 100644
--- a/projects/common/models/uI-element.ts
+++ b/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;
}
}
diff --git a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html b/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html
index 297ac1bb6f5062315daf2e0999ac828de9481158..cf6c121501d82f1820f25e28ed07991f2bbac1fd 100644
--- a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html
+++ b/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)">