In Dataset Template selection cut description when templates are displayed in list and show description (instead of DMP-EDITOR.DATASET-DESCRIPTION.INTRO) in template preview.

1. multiple-auto-complete.component.html: Added class "title-fn-inner" to cut the displayed description of dataset templates.
2. multiple-auto-complete.component.scss: Css for class "title-fn" updated and for class "title-fn-inner" added to cut the displayed description of dataset templates.
3. available-profiles.component.html: Added class "list-option-inner" to cut the displayed description of dataset templates.
4. available-profiles.component.scss: Css for class "list-option" updated and for class "list-option-inner" added to cut the displayed description of dataset templates.
5. dataset-preview-dialog.component.html: Added [datasetDescription]="data?.template?.description" in <app-dataset-description>
6. dataset-description.component.ts: Added in class, field "datasetDescription".
7. dataset-description.component.html: Show template datasetDescription (as html) instead of DMP-EDITOR.DATASET-DESCRIPTION.INTRO.

dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html

@@ -1,5 +1,7 @@
 <div class="row multiple-auto-complete" ngForm>
+<!--	style="width: calc(100% - 28px) !important;"-->
 	<mat-chip-list #chipList ngDefaultControl>
+<!--		style="width: calc(100%) !important;"-->
 		<ng-container *ngIf="value as values">
 			<mat-chip *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable" [ngClass]="computeClass(value)">
 				<ng-container *ngIf="_selectedItems.get(stringify(value)) as selectedItem">
@@ -9,8 +11,19 @@
 				</ng-container>
 			</mat-chip>
 		</ng-container>
+<!--		<div style="height: 0 !important; width: calc(100% - 28px) !important; visibility: hidden !important;" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div>-->
 	</mat-chip-list>
 	<input matInput #autocompleteInput class="col" [class.hide-placeholder]="hidePlaceholder" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
+<!--	<input matInput #autocompleteInput class="col"-->
+<!--		   style="width: calc(100% - 28px) !important;"-->
+<!--		   [class.hide-placeholder]="hidePlaceholder" [name]="id"-->
+<!--		   autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger"-->
+<!--		   [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue"-->
+<!--		   (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()"-->
+<!--		   (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"-->
+<!--		   [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur"-->
+<!--		   (matChipInputTokenEnd)="_addItem($event)"-->
+<!--		   [matAutocompleteConnectedTo]="origin">-->
 	<!-- The attribute autocomplete="nope", set by downshift, is ignored in Chrome 67 and Opera 54 (latest at the time of writing)
 	<input matInput #autocompleteInput class="col" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)"> -->
 	<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>
@@ -24,9 +37,11 @@
 						}"></ng-template>
 					<div *ngIf="!_optionTemplate(item)" class="d-flex">
 						<div class="title-fn">
+<!--							<div class="title-fn-inner">	&lt;!&ndash;remove this if you want to see all the description &ndash;&gt;-->
 								<span>{{_titleFn(item)}}</span>
 								<br *ngIf="_subtitleFn(item)">
 								<small *ngIf="_subtitleFn(item)">{{_subtitleFn(item)}}</small>
+<!--							</div>-->
 						</div>
 						<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
 					</div>
@@ -43,10 +58,12 @@
 									}"></ng-template>
 						<div *ngIf="!_optionTemplate(item)" class="d-flex">
 							<div class="title-fn">
+								<div class="title-fn-inner">	<!--remove this if you want to see all the description -->
 									<span *ngIf="!_optionTemplate(item)">{{_titleFn(item)}}</span>
 									<br *ngIf="_subtitleFn(item)">
 									<small *ngIf="_subtitleFn(item)" [innerHTML]="_subtitleFn(item)"></small>
 								</div>
+							</div>
 							<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
 						</div>
 					</mat-option>

dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss

@@ -19,14 +19,29 @@
 
 }
 
-.title-fn {
+.title-fn-inner {
-	flex-grow: 1;
+	width: inherit;
-    white-space: nowrap;
+	height: inherit;
-    width: calc(100% - 16px);
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
+.title-fn {
+	height: inherit;
+	width: calc(100% - 16px);
+	overflow: hidden;
+	white-space: nowrap;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-moz-box-orient: vertical;
+	-ms-box-orient: vertical;
+	box-orient: vertical;
+	-webkit-line-clamp: 2;
+	-moz-line-clamp: 2;
+	-ms-line-clamp: 2;
+	line-clamp: 2;
+}
+
 .option-icon {
 	mat-icon {
 		margin: 0px 5px 0px 10px;

dmp-frontend/src/app/ui/dmp/dataset-preview/dataset-preview-dialog.component.html

@@ -7,7 +7,8 @@
 		<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
 	</div>
 	<div mat-dialog-content class="definition-content">
-		<app-dataset-description *ngIf="datasetProfileDefinitionFormGroup && datasetProfileDefinitionModel" [form]="datasetProfileDefinitionFormGroup" [visibilityRules]="datasetProfileDefinitionModel.rules" [datasetProfileId]="data.template.id"></app-dataset-description>
+		<app-dataset-description *ngIf="datasetProfileDefinitionFormGroup && datasetProfileDefinitionModel" [form]="datasetProfileDefinitionFormGroup" [visibilityRules]="datasetProfileDefinitionModel.rules"
+								 [datasetProfileId]="data.template.id" [datasetDescription]="data?.template?.description"></app-dataset-description>
 	</div>
 	<div mat-mat-dialog-actions *ngIf="datasetProfileDefinitionFormGroup">
 		<div class="col-auto d-flex pb-4 pt-2">

dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.html

@@ -3,10 +3,12 @@
 	<mat-selection-list #datasetsprofiles [ngModel]="selectedOptions" >
 		<mat-list-option *ngFor="let profile of profiles" [value]="profile" [selected]='isOptionSelected(profile)' class="mb-1">
 			<div class="list-option">
+				<div class="list-option-inner">
 					{{profile.label}}
 					<br *ngIf="profile.description">
 					<small *ngIf="profile.description" [innerHTML]="profile.description"></small>
 				</div>
+			</div>
 		</mat-list-option>
 	</mat-selection-list>
 	<p>

dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.scss

@@ -1,7 +1,25 @@
-.list-option {
+.list-option-inner {
 	flex-grow: 1;
     white-space: nowrap;
-    width: calc(100% - 16px);
+	width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.list-option {
+	width: calc(100% - 16px);
+	flex-grow: 1;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-moz-box-orient: vertical;
+	-ms-box-orient: vertical;
+	box-orient: vertical;
+	-webkit-line-clamp: 2;
+	-moz-line-clamp: 2;
+	-ms-line-clamp: 2;
+	line-clamp: 2;
+}
+
+::ng-deep .mat-list-text {
+	max-height: 100%;
+}

dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html

@@ -1,6 +1,7 @@
-<div class="col-12 intro">
+<!--<div class="col-12 intro">-->
-	{{'DMP-EDITOR.DATASET-DESCRIPTION.INTRO' | translate}}
+<!--	{{'DMP-EDITOR.DATASET-DESCRIPTION.INTRO' | translate}}-->
-</div>
+<!--</div>-->
+<div *ngIf="datasetDescription" class="col-12 intro" [innerHTML]="datasetDescription"></div>
 <form *ngIf="form" novalidate [formGroup]="form" class="col-12 card">
 	<div class="row">
 		<div class="dynamic-form-editor p-0 col-md-12">

dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts

@@ -23,6 +23,7 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 	@Input() path: string;
 	@Input() visibilityRules: Rule[] = [];
 	@Input() datasetProfileId: String;
+	@Input() datasetDescription: String;
 	@Input() linkToScroll: LinkToScroll;
 	@Output() formChanged: EventEmitter<any> = new EventEmitter();
 	@Output() fieldsetFocusChange: EventEmitter<string> = new EventEmitter<string>();