fix(text-value): display line breaks in read mode of paragraph text values (DEV-211)

src/app/workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component.html

@@ -1,5 +1,5 @@
 <span [ngSwitch]="property.objectType">
-    <app-text-value-as-string #createVal *ngSwitchCase="'ReadTextValueAsString'" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName" [textArea]="textArea"></app-text-value-as-string>
+    <app-text-value-as-string #createVal *ngSwitchCase="'ReadTextValueAsString'" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName" [guiElement]="textValueGuiEle"></app-text-value-as-string>
     <app-text-value-as-xml #createVal *ngSwitchCase="'ReadTextValueAsXml'" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"></app-text-value-as-xml>
     <app-int-value #createVal *ngSwitchCase="constants.IntValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName"></app-int-value>
     <app-boolean-value #createVal *ngSwitchCase="constants.BooleanValue" [mode]="mode" [valueRequiredValidator]="isRequiredProp" [parentForm]="parentForm" [formName]="formName" [moreSpace]="true"></app-boolean-value>

src/app/workspace/resource/resource-instance-form/select-properties/switch-properties/switch-properties.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { Constants, ReadResource, ResourcePropertyDefinition } from '@dasch-swiss/dsp-js';
 import { BaseValueDirective } from 'src/app/main/directive/base-value.directive';
+import { ValueService } from '../../../services/value.service';
 
 @Component({
     selector: 'app-switch-properties',
@@ -23,19 +24,23 @@ export class SwitchPropertiesComponent implements OnInit {
     @Input() isRequiredProp: boolean;
 
     mode = 'create';
-    textArea = false;
+
+    // gui element in case of textValue
+    textValueGuiEle: 'simpleText' | 'textArea' | 'richText';
+
     constants = Constants;
 
-    constructor() { }
+    constructor(
+        private _valueService: ValueService
+    ) { }
 
     ngOnInit(): void {
 
         // the input isRequiredProp provided by KeyValuePair is stored as a number
         // a conversion from a number to a boolean is required by the input valueRequiredValidator
         this.isRequiredProp = !!+this.isRequiredProp;
-        if(this.property.guiElement === Constants.SalsahGui + Constants.HashDelimiter + 'Textarea') {
-            this.textArea = true;
-        }
+
+        this.textValueGuiEle = this._valueService.getTextValueGuiEle(this.property.guiElement);
     }
 
     saveNewValue() {

src/app/workspace/resource/values/text-value/text-value-as-string/text-value-as-string.component.html

@@ -1,5 +1,5 @@
 <span *ngIf="mode === 'read'; else showForm" class="read-mode-view">
-    <span class="rm-value" [innerHtml]="valueFormControl.value | appLinkify"></span>
+    <span class="rm-value text-value" [innerHtml]="valueFormControl.value | appLinkify" style="white-space: pre-wrap;"></span>
     <span class="rm-comment" *ngIf="shouldShowComment">{{commentFormControl.value}}</span>
 </span>
 <ng-template #showForm>

src/assets/style/_viewer.scss

@@ -6,6 +6,10 @@
     display: block;
     margin: 0px;
   }
+
+  .rm-value.text-value {
+    white-space: pre-wrap;
+  }
 }
 
 .child-value-component,