diff --git a/projects/common/classes/buttonElement.ts b/projects/common/classes/buttonElement.ts
index 7b8410e43caf555af551a56cc10bac19cf3ff7e2..a9681aa2c352b7a15a6589f8e508dd8ca53f51a9 100644
--- a/projects/common/classes/buttonElement.ts
+++ b/projects/common/classes/buttonElement.ts
@@ -3,9 +3,9 @@ import { initSurfaceElement, initFontElement, UIElement } from './uIElement';
export class ButtonElement extends UIElement implements FontElement, SurfaceUIElement {
label: string = 'Knopf';
- imageSrc: string | undefined;
+ imageSrc: string | null = null;
borderRadius: number = 0;
- action: undefined | 'previous' | 'next' | 'end';
+ action: null | 'previous' | 'next' | 'end' = null;
fontColor: string = 'black';
font: string = 'Roboto';
diff --git a/projects/common/classes/textFieldElement.ts b/projects/common/classes/textFieldElement.ts
index 66aa6d56b8f53cd91eba46ea3fc8aa81f9159a94..8ae22001ebaaba705fa3e5970819063b2e47e42c 100644
--- a/projects/common/classes/textFieldElement.ts
+++ b/projects/common/classes/textFieldElement.ts
@@ -3,9 +3,9 @@ import { FontElement, SurfaceUIElement } from '../interfaces/UIElementInterfaces
export class TextFieldElement extends InputElement implements FontElement, SurfaceUIElement {
appearance: 'standard' | 'legacy' | 'fill' | 'outline' = 'outline';
- minLength: number | undefined;
+ minLength: number = 0;
minLengthWarnMessage: string = 'Eingabe zu kurz';
- maxLength: number | undefined;
+ maxLength: number = 0;
maxLengthWarnMessage: string = 'Eingabe zu lang';
pattern: string = '';
patternWarnMessage: string = 'Eingabe entspricht nicht der Vorgabe';
diff --git a/projects/common/classes/uIElement.ts b/projects/common/classes/uIElement.ts
index 020663546de4e48dcaedc095764f35aec36625c1..dd74dba43d9194ad56360cc889fd4b65b3a163c1 100644
--- a/projects/common/classes/uIElement.ts
+++ b/projects/common/classes/uIElement.ts
@@ -3,7 +3,7 @@ import { FontElement, SurfaceUIElement } from '../interfaces/UIElementInterfaces
import { IdService } from '../id.service';
export abstract class UIElement {
- [index: string]: string | number | boolean | string[] | undefined | ((...args: any) => any);
+ [index: string]: string | number | boolean | string[] | null | ((...args: any) => any);
type!: 'text' | 'button' | 'text-field' | 'text-area' | 'checkbox'
| 'dropdown' | 'radio' | 'image' | 'audio' | 'video';
@@ -42,14 +42,14 @@ export abstract class UIElement {
export abstract class InputElement extends UIElement {
label: string;
- value: string | number | boolean | undefined;
+ value: string | number | boolean | null;
required: boolean;
requiredWarnMessage: string;
protected constructor(serializedElement: UIElement, coordinates?: { x: number; y: number }) {
super(serializedElement, coordinates);
this.label = serializedElement.label as string || 'Dummylabel';
- this.value = serializedElement.value as string | number | boolean | undefined || undefined;
+ 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';
}
diff --git a/projects/common/form-element-component.directive.ts b/projects/common/form-element-component.directive.ts
index 8f20b02bc8cfb1d267ad6e5e5d59e514046e13e2..4bc5e7dfa85e4be2254682ac7c6e415f90a052dc 100644
--- a/projects/common/form-element-component.directive.ts
+++ b/projects/common/form-element-component.directive.ts
@@ -65,7 +65,7 @@ export abstract class FormElementComponent extends ElementComponent implements O
new FormControl({});
}
- updateFormValue(newValue: string | number | boolean | undefined): void {
+ updateFormValue(newValue: string | number | boolean | null): void {
this.elementFormControl?.setValue(newValue, { emitEvent: false });
}
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-overlay.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-overlay.ts
index a925bb8ad667bc7ac88ea0934bb96bc62af44dfe..46ebaf3f7968dab42d49ac9f6586369a658fb946 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-overlay.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-overlay.ts
@@ -46,7 +46,7 @@ export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe(() => {
(this.childComponent.instance as FormElementComponent).updateFormValue(
- (this.element as InputElement).value as string | number | boolean | undefined
+ (this.element as InputElement).value as string | number | boolean | null
);
});
}
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html
index c8302ee77e99d201acc9e2da2723860a2c279f3d..7d72c6cf2cc7b8bdfa0d5612e53603323ae5c52f 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html
+++ b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html
@@ -12,7 +12,7 @@
<input matInput type="text" disabled *ngIf="selectedElements.length > 1" [value]="'Muss eindeutig sein'">
</mat-form-field>
- <mat-form-field *ngIf="combinedProperties.label !== null" appearance="fill">
+ <mat-form-field *ngIf="combinedProperties.label !== undefined" appearance="fill">
<mat-label>Label</mat-label>
<input matInput type="text" [value]="combinedProperties.label"
(input)="updateModel('label', $any($event.target).value)">
@@ -25,25 +25,25 @@
</div>
</ng-container>
- <mat-form-field *ngIf="combinedProperties.borderRadius != null" appearance="fill">
+ <mat-form-field *ngIf="combinedProperties.borderRadius !== undefined" appearance="fill">
<mat-label>Kantenradius</mat-label>
<input matInput type="number" [value]="combinedProperties.borderRadius"
(input)="updateModel('borderRadius', $any($event.target).value)">
</mat-form-field>
- <mat-checkbox *ngIf="combinedProperties.highlightable != null"
+ <mat-checkbox *ngIf="combinedProperties.highlightable !== undefined"
[checked]="$any(combinedProperties.highlightable)"
(change)="updateModel('highlightable', $event.checked)">
Farbmarkierungen erlauben
</mat-checkbox>
- <mat-checkbox *ngIf="combinedProperties.allowUnset != null"
+ <mat-checkbox *ngIf="combinedProperties.allowUnset !== undefined"
[checked]="$any(combinedProperties.allowUnset)"
(change)="updateModel('allowUnset', $event.checked)">
Deselektion erlauben
</mat-checkbox>
- <mat-checkbox *ngIf="combinedProperties.required != null"
+ <mat-checkbox *ngIf="combinedProperties.required !== undefined"
[checked]="$any(combinedProperties.required)"
(change)="updateModel('required', $event.checked)">
Pflichtfeld
@@ -55,7 +55,7 @@
(input)="updateModel('requiredWarnMessage', $any($event.target).value)">
</mat-form-field>
- <mat-form-field disabled="true" *ngIf="combinedProperties.options != null">
+ <mat-form-field disabled="true" *ngIf="combinedProperties.options !== undefined">
<ng-container>
<mat-label>Optionen</mat-label>
<div class="drop-list" cdkDropList [cdkDropListData]="combinedProperties.options"
@@ -92,29 +92,28 @@
</mat-select>
</mat-form-field>
- <mat-checkbox *ngIf="combinedProperties.resizeEnabled != null"
+ <mat-checkbox *ngIf="combinedProperties.resizeEnabled !== undefined"
[checked]="$any(combinedProperties.resizeEnabled)"
(change)="updateModel('resizeEnabled', $event.checked)">
größenverstellbar
</mat-checkbox>
</div>
- <!-- Some type specific fields which may be undefined but need to show up regardless -->
- <ng-container *ngIf="combinedProperties.type == 'button'">
- <mat-form-field appearance="fill">
- <mat-label>Aktion</mat-label>
- <mat-select [value]="combinedProperties.action"
- (selectionChange)="updateModel('action', $event.value)">
- <mat-option *ngFor="let option of [{displayValue: 'keine', value: undefined},
- {displayValue: 'Vorherige Seite', value: 'previous'},
- {displayValue: 'Nächste Seite', value: 'next'},
- {displayValue: 'Letzte Seite', value: 'end'}]"
- [value]="option.value">
- {{option.displayValue}}
- </mat-option>
- </mat-select>
- </mat-form-field>
+ <mat-form-field *ngIf="combinedProperties.action !== undefined" appearance="fill">
+ <mat-label>Aktion</mat-label>
+ <mat-select [value]="combinedProperties.action"
+ (selectionChange)="updateModel('action', $event.value)">
+ <mat-option *ngFor="let option of [{displayValue: 'keine', value: undefined},
+ {displayValue: 'Vorherige Seite', value: 'previous'},
+ {displayValue: 'Nächste Seite', value: 'next'},
+ {displayValue: 'Letzte Seite', value: 'end'}]"
+ [value]="option.value">
+ {{option.displayValue}}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ <ng-container *ngIf="combinedProperties.imageSrc !== undefined">
<input #imageUpload type="file" hidden (click)="loadImage()">
<button mat-raised-button (click)="imageUpload.click()">Bild laden</button>
<button mat-raised-button (click)="removeImage()">Bild entfernen</button>
@@ -123,7 +122,19 @@
[width]="200">
</ng-container>
- <ng-container *ngIf="combinedProperties.type === 'checkbox'">
+ <mat-form-field *ngIf="combinedProperties.options !== undefined"
+ appearance="fill">
+ <mat-label>Vorbelegung</mat-label>
+ <mat-select [value]="combinedProperties.value"
+ (selectionChange)="updateModel('value', $event.value)">
+ <mat-option>undefiniert</mat-option>
+ <mat-option *ngFor="let option of $any(combinedProperties).options" [value]="option">
+ {{option}}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+
+ <ng-container *ngIf="combinedProperties.value === true || combinedProperties.value === false">
Vorbelegung
<mat-button-toggle-group [value]="combinedProperties.value"
(change)="updateModel('value', $event.value)">
@@ -132,79 +143,72 @@
</mat-button-toggle-group>
</ng-container>
- <mat-form-field *ngIf="combinedProperties.type === 'dropdown' || combinedProperties.type === 'radio'"
+<!-- <ng-container *ngIf="combinedProperties.type === 'text-field' || combinedProperties.type === 'text-area'">-->
+<!-- <ng-container *ngIf="combinedProperties.value !== undefined &&-->
+ <!--combinedProperties.value !== true || combinedProperties.value !== false">-->
+ <mat-form-field *ngIf="combinedProperties.value !== undefined &&
+ combinedProperties.value !== true && combinedProperties.value !== false"
appearance="fill">
<mat-label>Vorbelegung</mat-label>
- <mat-select [value]="combinedProperties.value"
- (selectionChange)="updateModel('value', $event.value)">
- <mat-option>undefiniert</mat-option>
- <mat-option *ngFor="let option of $any(combinedProperties).options" [value]="option">
- {{option}}
+ <input matInput type="text"
+ [value]="combinedProperties.value"
+ (input)="updateModel('value', $any($event.target).value)">
+ </mat-form-field>
+
+ <mat-form-field *ngIf="combinedProperties.appearance !== undefined" appearance="fill">
+ <mat-label>Aussehen</mat-label>
+ <mat-select [value]="combinedProperties.appearance"
+ (selectionChange)="updateModel('appearance', $event.value)">
+ <mat-option *ngFor="let option of [{displayValue: 'standard', value: 'standard'},
+ {displayValue: 'legacy', value: 'legacy'},
+ {displayValue: 'fill', value: 'fill'},
+ {displayValue: 'outline', value: 'outline'}]"
+ [value]="option.value">
+ {{option.displayValue}}
</mat-option>
</mat-select>
</mat-form-field>
- <ng-container *ngIf="combinedProperties.type === 'text-field' || combinedProperties.type === 'text-area'">
- <mat-form-field appearance="fill">
- <mat-label>Vorbelegung</mat-label>
- <input matInput type="text"
- [value]="combinedProperties.value"
- (input)="updateModel('value', $any($event.target).value)">
- </mat-form-field>
- <mat-form-field appearance="fill">
- <mat-label>Aussehen</mat-label>
- <mat-select [value]="combinedProperties.appearance"
- (selectionChange)="updateModel('appearance', $event.value)">
- <mat-option *ngFor="let option of [{displayValue: 'standard', value: 'standard'},
- {displayValue: 'legacy', value: 'legacy'},
- {displayValue: 'fill', value: 'fill'},
- {displayValue: 'outline', value: 'outline'}]"
- [value]="option.value">
- {{option.displayValue}}
- </mat-option>
- </mat-select>
- </mat-form-field>
- <mat-form-field appearance="fill">
- <mat-label>Minimallänge</mat-label>
- <input matInput type="number" #minLength="ngModel" min="0"
- [ngModel]="combinedProperties.minLength"
- (ngModelChange)="updateModel('minLength', $event, minLength.valid)">
- </mat-form-field>
- <mat-form-field *ngIf="combinedProperties.minLength &&
- $any(combinedProperties.minLength) > 0"
- appearance="fill">
- <mat-label>Minimalwert Warnmeldung</mat-label>
- <input matInput type="text" [value]="combinedProperties.minLengthWarnMessage"
- (input)="updateModel('minLengthWarnMessage', $any($event.target).value)">
- </mat-form-field>
- <mat-form-field appearance="fill">
- <mat-label>Maximalwert</mat-label>
- <input matInput type="number" #maxLength="ngModel" min="0"
- [ngModel]="combinedProperties.maxLength"
- (ngModelChange)="updateModel('maxLength', $event, maxLength.valid)">
- </mat-form-field>
- <mat-form-field *ngIf="combinedProperties.maxLength &&
- $any(combinedProperties.maxLength) > 0"
- appearance="fill">
- <mat-label>Maximalwert Warnmeldung</mat-label>
- <input matInput type="text" [value]="combinedProperties.maxLengthWarnMessage"
- (input)="updateModel('maxLengthWarnMessage', $any($event.target).value)">
- </mat-form-field>
+ <mat-form-field *ngIf="combinedProperties.minLength !== undefined" appearance="fill">
+ <mat-label>Minimallänge</mat-label>
+ <input matInput type="number" #minLength="ngModel" min="0"
+ [ngModel]="combinedProperties.minLength"
+ (ngModelChange)="updateModel('minLength', $event, minLength.valid)">
+ </mat-form-field>
+ <mat-form-field *ngIf="combinedProperties.minLength &&
+ $any(combinedProperties.minLength) > 0"
+ appearance="fill">
+ <mat-label>Minimalwert Warnmeldung</mat-label>
+ <input matInput type="text" [value]="combinedProperties.minLengthWarnMessage"
+ (input)="updateModel('minLengthWarnMessage', $any($event.target).value)">
+ </mat-form-field>
- <mat-form-field appearance="fill">
- <mat-label>Muster</mat-label>
- <input matInput [value]="combinedProperties.pattern"
- (input)="updateModel('pattern', $any($event.target).value)">
- </mat-form-field>
- <mat-form-field *ngIf="combinedProperties.pattern &&
- $any(combinedProperties.pattern) != ''"
- appearance="fill"
- matTooltip="Angabe als regulärer Ausdruck.">
- <mat-label>Muster Warnmeldung</mat-label>
- <input matInput type="text" [value]="combinedProperties.patternWarnMessage"
- (input)="updateModel('patternWarnMessage', $any($event.target).value)">
- </mat-form-field>
- </ng-container>
+ <mat-form-field *ngIf="combinedProperties.maxLength !== undefined" appearance="fill">
+ <mat-label>Maximalwert</mat-label>
+ <input matInput type="number" #maxLength="ngModel" min="0"
+ [ngModel]="combinedProperties.maxLength"
+ (ngModelChange)="updateModel('maxLength', $event, maxLength.valid)">
+ </mat-form-field>
+ <mat-form-field *ngIf="combinedProperties.maxLength &&
+ $any(combinedProperties.maxLength) > 0"
+ appearance="fill">
+ <mat-label>Maximalwert Warnmeldung</mat-label>
+ <input matInput type="text" [value]="combinedProperties.maxLengthWarnMessage"
+ (input)="updateModel('maxLengthWarnMessage', $any($event.target).value)">
+ </mat-form-field>
+
+ <mat-form-field *ngIf="combinedProperties.pattern !== undefined" appearance="fill">
+ <mat-label>Muster</mat-label>
+ <input matInput [value]="combinedProperties.pattern"
+ (input)="updateModel('pattern', $any($event.target).value)">
+ </mat-form-field>
+ <mat-form-field *ngIf="combinedProperties.pattern && $any(combinedProperties.pattern) !== ''"
+ appearance="fill"
+ matTooltip="Angabe als regulärer Ausdruck.">
+ <mat-label>Muster Warnmeldung</mat-label>
+ <input matInput type="text" [value]="combinedProperties.patternWarnMessage"
+ (input)="updateModel('patternWarnMessage', $any($event.target).value)">
+ </mat-form-field>
<mat-divider></mat-divider>
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.ts
index b28278c4b91e93afda4e45478281c8db640122f5..0ea3b77447306e8ca98fa60093b3bf8e0e356f1e 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.ts
@@ -61,7 +61,7 @@ export class ElementPropertiesComponent implements OnInit, OnDestroy {
}
}
if (this.selectedElements[i][property] !== this.combinedProperties[property]) {
- this.combinedProperties[property] = undefined;
+ this.combinedProperties[property] = null;
}
} else {
delete this.combinedProperties[property];
@@ -73,7 +73,7 @@ export class ElementPropertiesComponent implements OnInit, OnDestroy {
}
updateModel(property: string,
- value: string | number | boolean | string[] | undefined,
+ value: string | number | boolean | string[] | null,
isInputValid: boolean | null = true): void {
if (isInputValid && value !== null) {
this.unitService.updateElementProperty(this.selectedElements, property, value);
@@ -124,6 +124,6 @@ export class ElementPropertiesComponent implements OnInit, OnDestroy {
}
removeImage(): void {
- this.updateModel('imageSrc', undefined);
+ this.updateModel('imageSrc', null);
}
}
diff --git a/projects/editor/src/app/unit.service.ts b/projects/editor/src/app/unit.service.ts
index 7cc1820419028ca572827fbee4d0bda7dedadd1d..1e02cb92831cfd9d82992975af5ed7c2a953f50b 100644
--- a/projects/editor/src/app/unit.service.ts
+++ b/projects/editor/src/app/unit.service.ts
@@ -157,7 +157,7 @@ export class UnitService {
}
updateElementProperty(elements: UIElement[], property: string,
- value: string | number | boolean | string[] | undefined): void {
+ value: string | number | boolean | string[] | null): void {
elements.forEach((element: UIElement) => {
if (property === 'id') {
if (!IdService.getInstance().isIdAvailable((value as string))) { // prohibit existing IDs