[BP-841] Add cyclic reporting subform components
Signed-off-by: Christopher Keim <keim@develop-group.de>
diff --git a/src/app/cyclic-reporting/components/form-date-controls/cyclic-report-form-date-controls.component.html b/src/app/cyclic-reporting/components/form-date-controls/cyclic-report-form-date-controls.component.html
new file mode 100644
index 0000000..e4b4da6
--- /dev/null
+++ b/src/app/cyclic-reporting/components/form-date-controls/cyclic-report-form-date-controls.component.html
@@ -0,0 +1,54 @@
+<!--
+/********************************************************************************
+ * Copyright © 2020 Basys GmbH.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+-->
+
+<ng-container [formGroup]="form">
+
+ <label [for]="controlId" class="field-label">
+ <ng-content></ng-content>
+ </label>
+
+ <ng-container *ngIf="forDayOffset; else weekdayTemplateRef;">
+ <ok-stepper-control [controlId]="controlId"
+ [formControlName]="key + 'DayOffset'"
+ [placeholder]="'Tage'">
+ </ok-stepper-control>
+
+ <span class="field-control-days">Tage</span>
+ </ng-container>
+
+ <ng-template #weekdayTemplateRef>
+
+ <p-dropdown class="field-control-dropdown ui-dropdown" [inputId]="controlId"
+ [style]="{width: '100%', padding: '0.125rem 0.5rem', backgroundColor: 'white'}"
+ [options]="options" [formControlName]="key + 'WeekDay'">
+ </p-dropdown>
+
+ <select *ngIf="false" [id]="controlId"
+ [formControlName]="key + 'WeekDay'"
+ class="form-control field-control-select">
+ <ng-content select="option"></ng-content>
+ </select>
+ </ng-template>
+
+ <ok-stepper-control [minValue]="0" [maxValue]="23" [digits]="2" [cyclic]="true" [step]="1"
+ [placeholder]="'HH'" [formControlName]="key + 'Hour'">
+ </ok-stepper-control>
+
+ <span class="field-control-time-separator">:</span>
+
+ <ok-stepper-control [minValue]="0" [maxValue]="60 - triggerMinuteStep" [digits]="2" [cyclic]="true"
+ [step]="triggerMinuteStep" [placeholder]="'MM'" [formControlName]="key + 'Minute'">
+ </ok-stepper-control>
+
+ <span class="field-control-clock">Uhr</span>
+
+</ng-container>
diff --git a/src/app/cyclic-reporting/components/form-date-controls/cyclic-report-form-date-controls.component.scss b/src/app/cyclic-reporting/components/form-date-controls/cyclic-report-form-date-controls.component.scss
new file mode 100644
index 0000000..d554d22
--- /dev/null
+++ b/src/app/cyclic-reporting/components/form-date-controls/cyclic-report-form-date-controls.component.scss
@@ -0,0 +1,46 @@
+/********************************************************************************
+ * Copyright © 2020 Basys GmbH.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+:host {
+ display: inline-flex;
+ flex-flow: row;
+ align-items: center;
+ width: 100%;
+}
+
+.field-label {
+ margin: 0;
+ display: inline-block;
+ flex: 1;
+}
+
+.field-control {
+ width: 100%;
+ display: flex;
+ flex-flow: column;
+}
+
+.field-control-days {
+ margin: 0 2.35em 0 0.75em;
+}
+
+.field-control-dropdown {
+ max-width: 8.25em;
+ width: 100%;
+ margin: 0 1em 0 0.5em;
+}
+
+.field-control-time-separator {
+ padding: 0.25em;
+}
+
+.field-control-clock {
+ margin-left: 0.25em;
+}
diff --git a/src/app/cyclic-reporting/components/form-date-controls/cyclic-report-form-date-controls.component.spec.ts b/src/app/cyclic-reporting/components/form-date-controls/cyclic-report-form-date-controls.component.spec.ts
new file mode 100644
index 0000000..d6824d5
--- /dev/null
+++ b/src/app/cyclic-reporting/components/form-date-controls/cyclic-report-form-date-controls.component.spec.ts
@@ -0,0 +1,48 @@
+/********************************************************************************
+ * Copyright © 2020 Basys GmbH.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import {CommonModule} from '@angular/common';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {FormControl, FormGroup} from '@angular/forms';
+import {SharedModule} from '@shared/shared.module';
+import {CyclicReportFormDateControlsComponent} from './cyclic-report-form-date-controls.component';
+
+describe('CyclicReportFormDateControlsComponent', () => {
+
+ let component: CyclicReportFormDateControlsComponent;
+ let fixture: ComponentFixture<CyclicReportFormDateControlsComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [
+ CyclicReportFormDateControlsComponent
+ ],
+ imports: [
+ CommonModule,
+ SharedModule
+ ]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CyclicReportFormDateControlsComponent);
+ component = fixture.componentInstance;
+ const key = 'test';
+ component.form = new FormGroup(['DayOffset', 'WeekDay', 'Hour', 'Minute']
+ .reduce((result, postfix) => ({...result, [key + postfix]: new FormControl()}), {}));
+ component.key = key;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeDefined();
+ });
+
+});
diff --git a/src/app/cyclic-reporting/components/form-date-controls/cyclic-report-form-date-controls.component.ts b/src/app/cyclic-reporting/components/form-date-controls/cyclic-report-form-date-controls.component.ts
new file mode 100644
index 0000000..a1b0966
--- /dev/null
+++ b/src/app/cyclic-reporting/components/form-date-controls/cyclic-report-form-date-controls.component.ts
@@ -0,0 +1,42 @@
+/********************************************************************************
+ * Copyright © 2020 Basys GmbH.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import {Component, Input} from '@angular/core';
+import {FormGroup} from '@angular/forms';
+import {SelectOptionObject} from '@shared/model/SelectOptionObject';
+
+@Component({
+ selector: 'ok-cyclic-report-form-date-controls',
+ styleUrls: ['cyclic-report-form-date-controls.component.scss'],
+ templateUrl: 'cyclic-report-form-date-controls.component.html'
+})
+export class CyclicReportFormDateControlsComponent {
+
+ private static id = 0;
+
+ @Input()
+ public controlId = `CyclicReportFormTriggerControlsComponent-${CyclicReportFormDateControlsComponent.id++}`;
+
+ @Input()
+ public triggerMinuteStep = 1;
+
+ @Input()
+ public form: FormGroup;
+
+ @Input()
+ public key: string;
+
+ @Input()
+ public forDayOffset: boolean;
+
+ @Input()
+ public options: SelectOptionObject[] = [];
+
+}
diff --git a/src/app/cyclic-reporting/components/form-input/cyclic-report-form-input.component.html b/src/app/cyclic-reporting/components/form-input/cyclic-report-form-input.component.html
new file mode 100644
index 0000000..b12745d
--- /dev/null
+++ b/src/app/cyclic-reporting/components/form-input/cyclic-report-form-input.component.html
@@ -0,0 +1,43 @@
+<!--
+/********************************************************************************
+ * Copyright © 2020 Basys GmbH.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+-->
+
+<label class="field-label" [for]="controlId">
+ <ng-content></ng-content>
+</label>
+
+<div [formGroup]="form" class="field-control">
+
+ <ng-template #inputTemplateRef>
+ <input [id]="controlId"
+ autocomplete="off"
+ class="form-control"
+ [formControlName]="'' + key">
+ </ng-template>
+
+ <span class="field-control-input-container" *ngIf="displayAddButton || displayCancelButton; else inputTemplateRef;">
+ <ng-container [ngTemplateOutlet]="inputTemplateRef"></ng-container>
+ <button *ngIf="displayAddButton"
+ [disabled]="form.disabled"
+ (click)="add.emit()"
+ class="pi pi-plus btn btn-link field-control-input-btn"
+ type="button">
+ </button>
+ <button *ngIf="displayCancelButton"
+ [disabled]="form.disabled"
+ (click)="cancel.emit()"
+ class="pi pi-times btn btn-link field-control-input-btn"
+ type="button">
+ </button>
+ </span>
+
+ <ok-error [control]="form?.get([key])"></ok-error>
+</div>
diff --git a/src/app/cyclic-reporting/components/form-input/cyclic-report-form-input.component.scss b/src/app/cyclic-reporting/components/form-input/cyclic-report-form-input.component.scss
new file mode 100644
index 0000000..60651c0
--- /dev/null
+++ b/src/app/cyclic-reporting/components/form-input/cyclic-report-form-input.component.scss
@@ -0,0 +1,43 @@
+/********************************************************************************
+ * Copyright © 2020 Basys GmbH.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+:host {
+ display: inline-flex;
+ flex-flow: row;
+ width: 100%;
+}
+
+.field-label {
+ margin: 0;
+ display: inline-block;
+}
+
+.field-control {
+ width: 100%;
+ display: flex;
+ flex-flow: column;
+}
+
+.field-control-input-container {
+ position: relative;
+ display: inline-block;
+ width: 100%;
+
+ input {
+ padding-right: 2.375em;
+ }
+}
+
+.field-control-input-btn {
+ position: absolute;
+ top: 0;
+ right: 0;
+ text-decoration: unset;
+}
diff --git a/src/app/cyclic-reporting/components/form-input/cyclic-report-form-input.component.spec.ts b/src/app/cyclic-reporting/components/form-input/cyclic-report-form-input.component.spec.ts
new file mode 100644
index 0000000..7858639
--- /dev/null
+++ b/src/app/cyclic-reporting/components/form-input/cyclic-report-form-input.component.spec.ts
@@ -0,0 +1,47 @@
+/********************************************************************************
+ * Copyright © 2020 Basys GmbH.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import {CommonModule} from '@angular/common';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {FormControl, FormGroup} from '@angular/forms';
+import {SharedModule} from '@shared/shared.module';
+import {CyclicReportFormInputComponent} from './cyclic-report-form-input.component';
+
+describe('CyclicReportFormInputComponent', () => {
+
+ let component: CyclicReportFormInputComponent;
+ let fixture: ComponentFixture<CyclicReportFormInputComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [
+ CyclicReportFormInputComponent
+ ],
+ imports: [
+ CommonModule,
+ SharedModule
+ ]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CyclicReportFormInputComponent);
+ component = fixture.componentInstance;
+ const key = 'test';
+ component.form = new FormGroup({ [key]: new FormControl()});
+ component.key = key;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeDefined();
+ });
+
+});
diff --git a/src/app/cyclic-reporting/components/form-input/cyclic-report-form-input.component.ts b/src/app/cyclic-reporting/components/form-input/cyclic-report-form-input.component.ts
new file mode 100644
index 0000000..8b6b3fb
--- /dev/null
+++ b/src/app/cyclic-reporting/components/form-input/cyclic-report-form-input.component.ts
@@ -0,0 +1,44 @@
+/********************************************************************************
+ * Copyright © 2020 Basys GmbH.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {FormArray, FormGroup} from '@angular/forms';
+
+@Component({
+ selector: 'ok-cyclic-report-form-input',
+ styleUrls: ['cyclic-report-form-input.component.scss'],
+ templateUrl: 'cyclic-report-form-input.component.html'
+})
+export class CyclicReportFormInputComponent {
+
+ private static id = 0;
+
+ @Input()
+ public controlId = `CyclicReportFormInputComponent-${CyclicReportFormInputComponent.id++}`;
+
+ @Input()
+ public form: FormGroup | FormArray;
+
+ @Input()
+ public key: string | number;
+
+ @Input()
+ public displayAddButton: boolean;
+
+ @Input()
+ public displayCancelButton: boolean;
+
+ @Output()
+ public cancel = new EventEmitter<void>();
+
+ @Output()
+ public add = new EventEmitter<void>();
+
+}
diff --git a/src/app/cyclic-reporting/components/form-select/cyclic-report-form-select.component.html b/src/app/cyclic-reporting/components/form-select/cyclic-report-form-select.component.html
new file mode 100644
index 0000000..4c5e7b5
--- /dev/null
+++ b/src/app/cyclic-reporting/components/form-select/cyclic-report-form-select.component.html
@@ -0,0 +1,26 @@
+<!--
+/********************************************************************************
+ * Copyright © 2020 Basys GmbH.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+-->
+
+<label class="field-label" [for]="controlId">
+ <ng-content></ng-content>
+</label>
+
+<div [formGroup]="form" class="field-control">
+
+ <p-dropdown class="field-control-dropdown ui-dropdown" [inputId]="controlId"
+ [style]="{width: '100%', boxSizing: 'border-box', padding: '0.125rem 0.5rem', backgroundColor: 'white'}"
+ [options]="options" [formControlName]="'' + key" [filter]="filter" [autoDisplayFirst]="false">
+ </p-dropdown>
+
+ <ok-error [control]="form?.get([key])"></ok-error>
+
+</div>
diff --git a/src/app/cyclic-reporting/components/form-select/cyclic-report-form-select.component.scss b/src/app/cyclic-reporting/components/form-select/cyclic-report-form-select.component.scss
new file mode 100644
index 0000000..7fb6ea7
--- /dev/null
+++ b/src/app/cyclic-reporting/components/form-select/cyclic-report-form-select.component.scss
@@ -0,0 +1,31 @@
+/********************************************************************************
+ * Copyright © 2020 Basys GmbH.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+:host {
+ display: inline-flex;
+ flex-flow: row;
+ width: 100%;
+}
+
+.field-label {
+ margin: 0;
+ display: inline-block;
+}
+
+.field-control {
+ width: 5em;
+ flex-grow: 1;
+ display: flex;
+ flex-flow: column;
+}
+
+.field-control-dropdown {
+ width: 100%;
+}
diff --git a/src/app/cyclic-reporting/components/form-select/cyclic-report-form-select.component.spec.ts b/src/app/cyclic-reporting/components/form-select/cyclic-report-form-select.component.spec.ts
new file mode 100644
index 0000000..0dfc9cd
--- /dev/null
+++ b/src/app/cyclic-reporting/components/form-select/cyclic-report-form-select.component.spec.ts
@@ -0,0 +1,47 @@
+/********************************************************************************
+ * Copyright © 2020 Basys GmbH.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import {CommonModule} from '@angular/common';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {FormControl, FormGroup} from '@angular/forms';
+import {SharedModule} from '@shared/shared.module';
+import {CyclicReportFormSelectComponent} from './cyclic-report-form-select.component';
+
+describe('CyclicReportFormSelectComponent', () => {
+
+ let component: CyclicReportFormSelectComponent;
+ let fixture: ComponentFixture<CyclicReportFormSelectComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [
+ CyclicReportFormSelectComponent
+ ],
+ imports: [
+ CommonModule,
+ SharedModule
+ ]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CyclicReportFormSelectComponent);
+ component = fixture.componentInstance;
+ const key = 'test';
+ component.form = new FormGroup({ [key]: new FormControl()});
+ component.key = key;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeDefined();
+ });
+
+});
diff --git a/src/app/cyclic-reporting/components/form-select/cyclic-report-form-select.component.ts b/src/app/cyclic-reporting/components/form-select/cyclic-report-form-select.component.ts
new file mode 100644
index 0000000..8ec9b5e
--- /dev/null
+++ b/src/app/cyclic-reporting/components/form-select/cyclic-report-form-select.component.ts
@@ -0,0 +1,39 @@
+/********************************************************************************
+ * Copyright © 2020 Basys GmbH.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import {Component, Input} from '@angular/core';
+import {FormGroup} from '@angular/forms';
+import {SelectOptionObject} from '@shared/model/SelectOptionObject';
+
+@Component({
+ selector: 'ok-cyclic-report-form-select',
+ styleUrls: ['cyclic-report-form-select.component.scss'],
+ templateUrl: 'cyclic-report-form-select.component.html'
+})
+export class CyclicReportFormSelectComponent {
+
+ private static id = 0;
+
+ @Input()
+ public controlId = `CyclicReportFormSelectComponent-${CyclicReportFormSelectComponent.id++}`;
+
+ @Input()
+ public form: FormGroup;
+
+ @Input()
+ public options: SelectOptionObject[] = [];
+
+ @Input()
+ public filter: boolean;
+
+ @Input()
+ public key: string | number;
+
+}
diff --git a/src/app/cyclic-reporting/components/form-textarea/cyclic-report-form-textarea.component.html b/src/app/cyclic-reporting/components/form-textarea/cyclic-report-form-textarea.component.html
new file mode 100644
index 0000000..48181a2
--- /dev/null
+++ b/src/app/cyclic-reporting/components/form-textarea/cyclic-report-form-textarea.component.html
@@ -0,0 +1,26 @@
+<!--
+/********************************************************************************
+ * Copyright © 2020 Basys GmbH.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+-->
+
+<label class="field-label" [for]="controlId">
+ <ng-content></ng-content>
+</label>
+
+<div [formGroup]="form" class="field-control">
+
+ <textarea [id]="controlId"
+ autocomplete="off"
+ class="form-control"
+ [formControlName]="'' + key">
+ </textarea>
+
+ <ok-error [control]="form?.get([key])"></ok-error>
+</div>
diff --git a/src/app/cyclic-reporting/components/form-textarea/cyclic-report-form-textarea.component.scss b/src/app/cyclic-reporting/components/form-textarea/cyclic-report-form-textarea.component.scss
new file mode 100644
index 0000000..06b1741
--- /dev/null
+++ b/src/app/cyclic-reporting/components/form-textarea/cyclic-report-form-textarea.component.scss
@@ -0,0 +1,30 @@
+/********************************************************************************
+ * Copyright © 2020 Basys GmbH.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+:host {
+ display: inline-flex;
+ flex-flow: row;
+ width: 100%;
+}
+
+.field-label {
+ margin: 0;
+ display: inline-block;
+}
+
+.field-control {
+ width: 100%;
+ display: flex;
+ flex-flow: column;
+
+ textarea {
+ height: 100%;
+ }
+}
diff --git a/src/app/cyclic-reporting/components/form-textarea/cyclic-report-form-textarea.component.spec.ts b/src/app/cyclic-reporting/components/form-textarea/cyclic-report-form-textarea.component.spec.ts
new file mode 100644
index 0000000..dd0aaf3
--- /dev/null
+++ b/src/app/cyclic-reporting/components/form-textarea/cyclic-report-form-textarea.component.spec.ts
@@ -0,0 +1,47 @@
+/********************************************************************************
+ * Copyright © 2020 Basys GmbH.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import {CommonModule} from '@angular/common';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {FormControl, FormGroup} from '@angular/forms';
+import {SharedModule} from '@shared/shared.module';
+import {CyclicReportFormTextareaComponent} from './cyclic-report-form-textarea.component';
+
+describe('CyclicReportFormTextareaComponent', () => {
+
+ let component: CyclicReportFormTextareaComponent;
+ let fixture: ComponentFixture<CyclicReportFormTextareaComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [
+ CyclicReportFormTextareaComponent
+ ],
+ imports: [
+ CommonModule,
+ SharedModule
+ ]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CyclicReportFormTextareaComponent);
+ component = fixture.componentInstance;
+ const key = 'test';
+ component.form = new FormGroup({ [key]: new FormControl()});
+ component.key = key;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeDefined();
+ });
+
+});
diff --git a/src/app/cyclic-reporting/components/form-textarea/cyclic-report-form-textarea.component.ts b/src/app/cyclic-reporting/components/form-textarea/cyclic-report-form-textarea.component.ts
new file mode 100644
index 0000000..3b46cb1
--- /dev/null
+++ b/src/app/cyclic-reporting/components/form-textarea/cyclic-report-form-textarea.component.ts
@@ -0,0 +1,32 @@
+/********************************************************************************
+ * Copyright © 2020 Basys GmbH.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import {Component, Input} from '@angular/core';
+import {FormArray, FormGroup} from '@angular/forms';
+
+@Component({
+ selector: 'ok-cyclic-report-form-textarea',
+ styleUrls: ['cyclic-report-form-textarea.component.scss'],
+ templateUrl: 'cyclic-report-form-textarea.component.html'
+})
+export class CyclicReportFormTextareaComponent {
+
+ private static id = 0;
+
+ @Input()
+ public controlId = `CyclicReportFormTextareaComponent-${CyclicReportFormTextareaComponent.id++}`;
+
+ @Input()
+ public form: FormGroup | FormArray;
+
+ @Input()
+ public key: string | number;
+
+}
