From ad7ccb7373994f00ee62aaa0621d8260d9becfaf Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Fri, 19 Nov 2021 00:47:05 +0100
Subject: [PATCH] Add Input decorator to all element components

This allows to use them in template bindings. Used in compound elements.
---
 projects/common/element-components/audio.component.ts         | 4 ++--
 projects/common/element-components/button.component.ts        | 2 +-
 projects/common/element-components/checkbox.component.ts      | 4 ++--
 .../compound-elements/drop-list.component.ts                  | 4 ++--
 projects/common/element-components/dropdown.component.ts      | 4 ++--
 projects/common/element-components/image.component.ts         | 4 ++--
 .../common/element-components/radio-button-group.component.ts | 4 ++--
 projects/common/element-components/text-area.component.ts     | 4 ++--
 projects/common/element-components/text-field.component.ts    | 4 ++--
 projects/common/element-components/text.component.ts          | 4 ++--
 projects/common/element-components/video.component.ts         | 4 ++--
 11 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/projects/common/element-components/audio.component.ts b/projects/common/element-components/audio.component.ts
index 1d90d57f9..db5cc3c1a 100644
--- a/projects/common/element-components/audio.component.ts
+++ b/projects/common/element-components/audio.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { AudioElement } from '../models/audio-element';
 import { MediaPlayerElementComponent } from '../media-player-element-component.directive';
 
@@ -25,5 +25,5 @@ import { MediaPlayerElementComponent } from '../media-player-element-component.d
   `
 })
 export class AudioComponent extends MediaPlayerElementComponent {
-  elementModel!: AudioElement;
+  @Input() elementModel!: AudioElement;
 }
diff --git a/projects/common/element-components/button.component.ts b/projects/common/element-components/button.component.ts
index dff1c9e38..00a3c3a64 100644
--- a/projects/common/element-components/button.component.ts
+++ b/projects/common/element-components/button.component.ts
@@ -35,8 +35,8 @@ import { ButtonElement } from '../models/button-element';
   ]
 })
 export class ButtonComponent extends ElementComponent {
+  @Input() elementModel!: ButtonElement;
   @Output() navigationRequested = new EventEmitter<'previous' | 'next' | 'first' | 'last' | 'end'>();
-  elementModel!: ButtonElement;
 
   onClick = (event: MouseEvent, action: 'previous' | 'next' | 'first' | 'last' | 'end' | null): void => {
     if (action) {
diff --git a/projects/common/element-components/checkbox.component.ts b/projects/common/element-components/checkbox.component.ts
index 1d5e2d79d..52c1cb260 100644
--- a/projects/common/element-components/checkbox.component.ts
+++ b/projects/common/element-components/checkbox.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ValidatorFn, Validators } from '@angular/forms';
 import { FormElementComponent } from '../form-element-component.directive';
 import { CheckboxElement } from '../models/checkbox-element';
@@ -34,7 +34,7 @@ import { CheckboxElement } from '../models/checkbox-element';
   ]
 })
 export class CheckboxComponent extends FormElementComponent {
-  elementModel!: CheckboxElement;
+  @Input() elementModel!: CheckboxElement;
 
   get validators(): ValidatorFn[] {
     const validators: ValidatorFn[] = [];
diff --git a/projects/common/element-components/compound-elements/drop-list.component.ts b/projects/common/element-components/compound-elements/drop-list.component.ts
index a6b863954..878bbd3af 100644
--- a/projects/common/element-components/compound-elements/drop-list.component.ts
+++ b/projects/common/element-components/compound-elements/drop-list.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { CdkDragDrop } from '@angular/cdk/drag-drop/drag-events';
 import {
   CdkDrag, CdkDropList, moveItemInArray, transferArrayItem
@@ -65,7 +65,7 @@ import { FormElementComponent } from '../../form-element-component.directive';
   ]
 })
 export class DropListComponent extends FormElementComponent {
-  elementModel!: DropListElement;
+  @Input() elementModel!: DropListElement;
 
   drop(event: CdkDragDrop<DropListComponent>): void {
     if (!this.elementModel.readOnly) {
diff --git a/projects/common/element-components/dropdown.component.ts b/projects/common/element-components/dropdown.component.ts
index 66f3d33dc..fd76fca20 100644
--- a/projects/common/element-components/dropdown.component.ts
+++ b/projects/common/element-components/dropdown.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { FormElementComponent } from '../form-element-component.directive';
 import { DropdownElement } from '../models/dropdown-element';
 
@@ -34,5 +34,5 @@ import { DropdownElement } from '../models/dropdown-element';
   `
 })
 export class DropdownComponent extends FormElementComponent {
-  elementModel!: DropdownElement;
+  @Input() elementModel!: DropdownElement;
 }
diff --git a/projects/common/element-components/image.component.ts b/projects/common/element-components/image.component.ts
index cdf49e469..18363835f 100644
--- a/projects/common/element-components/image.component.ts
+++ b/projects/common/element-components/image.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { ElementComponent } from '../element-component.directive';
 import { ImageElement } from '../models/image-element';
 import { ValueChangeElement } from '../models/uI-element';
@@ -35,7 +35,7 @@ import { ValueChangeElement } from '../models/uI-element';
   ]
 })
 export class ImageComponent extends ElementComponent {
+  @Input() elementModel!: ImageElement;
   @Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
   magnifierVisible = false;
-  elementModel!: ImageElement;
 }
diff --git a/projects/common/element-components/radio-button-group.component.ts b/projects/common/element-components/radio-button-group.component.ts
index f16ee18a6..fa5de6344 100644
--- a/projects/common/element-components/radio-button-group.component.ts
+++ b/projects/common/element-components/radio-button-group.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { FormElementComponent } from '../form-element-component.directive';
 import { RadioButtonGroupElement } from '../models/radio-button-group-element';
 
@@ -52,5 +52,5 @@ import { RadioButtonGroupElement } from '../models/radio-button-group-element';
   ]
 })
 export class RadioButtonGroupComponent extends FormElementComponent {
-  elementModel!: RadioButtonGroupElement;
+  @Input() elementModel!: RadioButtonGroupElement;
 }
diff --git a/projects/common/element-components/text-area.component.ts b/projects/common/element-components/text-area.component.ts
index 248af63e2..401ce1760 100644
--- a/projects/common/element-components/text-area.component.ts
+++ b/projects/common/element-components/text-area.component.ts
@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component, Output, EventEmitter, Input } from '@angular/core';
 import { FormElementComponent } from '../form-element-component.directive';
 import { TextAreaElement } from '../models/text-area-element';
 
@@ -33,6 +33,6 @@ import { TextAreaElement } from '../models/text-area-element';
   `
 })
 export class TextAreaComponent extends FormElementComponent {
+  @Input() elementModel!: TextAreaElement;
   @Output() onFocusChanged = new EventEmitter<HTMLElement | null>();
-  elementModel!: TextAreaElement;
 }
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 7f3835888..a446aaf36 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { ValidatorFn, Validators } from '@angular/forms';
 import { FormElementComponent } from '../form-element-component.directive';
 import { TextFieldElement } from '../models/text-field-element';
@@ -65,8 +65,8 @@ import { TextFieldElement } from '../models/text-field-element';
   ]
 })
 export class TextFieldComponent extends FormElementComponent {
+  @Input() elementModel!: TextFieldElement;
   @Output() onFocusChanged = new EventEmitter<HTMLElement | null>();
-  elementModel!: TextFieldElement;
 
   onClearButtonClick(event: MouseEvent) : void {
     this.elementFormControl.setValue('');
diff --git a/projects/common/element-components/text.component.ts b/projects/common/element-components/text.component.ts
index e0484ea4f..5dacabd14 100644
--- a/projects/common/element-components/text.component.ts
+++ b/projects/common/element-components/text.component.ts
@@ -1,5 +1,5 @@
 import {
-  Component, ElementRef, EventEmitter, Output, ViewChild
+  Component, ElementRef, EventEmitter, Input, Output, ViewChild
 } from '@angular/core';
 import { ElementComponent } from '../element-component.directive';
 import { TextElement } from '../models/text-element';
@@ -62,7 +62,7 @@ import { ValueChangeElement } from '../models/uI-element';
   ]
 })
 export class TextComponent extends ElementComponent {
-  elementModel!: TextElement;
+  @Input() elementModel!: TextElement;
   @Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
   @Output() startSelection = new EventEmitter<MouseEvent>();
   @Output() applySelection = new EventEmitter <{
diff --git a/projects/common/element-components/video.component.ts b/projects/common/element-components/video.component.ts
index 04edb4f0c..d9ad61b12 100644
--- a/projects/common/element-components/video.component.ts
+++ b/projects/common/element-components/video.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { VideoElement } from '../models/video-element';
 import { MediaPlayerElementComponent } from '../media-player-element-component.directive';
 
@@ -27,5 +27,5 @@ import { MediaPlayerElementComponent } from '../media-player-element-component.d
   styles: ['.correct-position{ display: block; margin-top: -4px; }']
 })
 export class VideoComponent extends MediaPlayerElementComponent {
-  elementModel!: VideoElement;
+  @Input() elementModel!: VideoElement;
 }
-- 
GitLab