added autoresize inputs to annotation dialog

frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html

@@ -29,7 +29,7 @@
 					<div class="col-12">
 						<mat-form-field appearance="outline" class="w-100">
 							<mat-label>{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}</mat-label>
-							<textarea matInput name="text" rows="2" formControlName="text" required></textarea>
+							<textarea matInput autocomplete="off" formControlName="text" required appTextareaAutoresize></textarea>
 							<mat-error *ngIf="threadFormGroup.get('text').hasError('backendError')">{{threadFormGroup.get('text').getError('backendError')?.message}}</mat-error>
 							<mat-error *ngIf="threadFormGroup.get('text').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
 						</mat-form-field>
@@ -156,7 +156,7 @@
 																<div class="col">
 																	<mat-form-field appearance="outline" class="w-100">
 																		<mat-label>{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}</mat-label>
-																		<input matInput [formControl]="this.threadReplyTextsFG[thread.toString()].get('replyText')" required>
+																		<textarea matInput autocomplete="off" [formControl]="this.threadReplyTextsFG[thread.toString()].get('replyText')" required appTextareaAutoresize></textarea>
 																	</mat-form-field>
 																</div>			
 																<div class="col-auto p-0 send-msg">

frontend/src/common/forms/common-forms.module.ts

@@ -3,6 +3,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { PendingChangesGuard } from '@common/forms/pending-form-changes/pending-form-changes-guard.service';
 import { FormService } from './form-service';
 import { ReactiveAsteriskDirective } from './reactive-asterisk-directive';
+import { TextareaAutoresizeDirective } from './textarea-autoresize-directive';
 
 @NgModule({
 	imports: [
@@ -11,16 +12,19 @@ import { ReactiveAsteriskDirective } from './reactive-asterisk-directive';
 	],
 	declarations:[
 		ReactiveAsteriskDirective,
+		TextareaAutoresizeDirective
 	],
 	exports: [
 		FormsModule,
 		ReactiveFormsModule,
 		ReactiveAsteriskDirective,
+		TextareaAutoresizeDirective
 	],
 	providers: [
 		FormService,
 		PendingChangesGuard,
 		ReactiveAsteriskDirective,
+		TextareaAutoresizeDirective
 	]
 })
 export class CommonFormsModule { }

frontend/src/common/forms/textarea-autoresize-directive.ts

@@ -0,0 +1,26 @@
+
+import { Directive, ElementRef, HostListener, OnInit } from '@angular/core';
+
+@Directive({
+	selector: '[appTextareaAutoresize]'
+})
+export class TextareaAutoresizeDirective implements OnInit {
+
+	constructor(private elementRef: ElementRef) { }
+
+	@HostListener(':input')
+	onInput() {
+		this.resize();
+	}
+
+	ngOnInit() {
+		if (this.elementRef.nativeElement.scrollHeight) {
+			setTimeout(() => this.resize());
+		}
+	}
+
+	resize() {
+		this.elementRef.nativeElement.style.height = '0';
+		this.elementRef.nativeElement.style.height = this.elementRef.nativeElement.scrollHeight + 'px';
+	}
+}