From 51228df7d5bbd2dc845624ab5523f8936754d609 Mon Sep 17 00:00:00 2001
From: Kristan Ntavidi <kntavidi@cite.gr>
Date: Mon, 8 Mar 2021 11:24:30 +0200
Subject: [PATCH] Dataset Profile Editor. UI fixes. Stepper buttons animations.
  Alignments. RadioBox, Other, Select have emptyList Vaditator(custom).
 Numbering fix in table of contents when drag and drop.

---
 dmp-frontend/src/app/app.component.ts         |   4 +-
 .../editor/animations/animations.ts           |  47 +++++
 ...file-editor-composite-field.component.html |   5 +-
 ...-editor-auto-complete-field.component.html |  23 ++-
 ...file-editor-radio-box-field.component.html |  11 +-
 ...file-editor-radio-box-field.component.scss |   1 +
 ...file-editor-word-list-field.component.html |  11 +-
 ...ataset-profile-editor-field.component.scss |   5 +-
 .../dataset-profile-editor-field.component.ts |  26 +--
 .../editor-custom-validators.ts               |  19 ++
 .../dataset-profile-editor.component.html     | 188 ++++++++++--------
 .../dataset-profile-editor.component.scss     |   2 +
 .../dataset-profile-editor.component.ts       | 148 ++++++++------
 .../criteria/dataset-profile.component.html   |   4 +-
 .../criteria/dataset-profile.component.scss   |  22 +-
 .../table-of-contents/table-of-contents.ts    |   1 +
 dmp-frontend/src/assets/i18n/de.json          |   5 +
 dmp-frontend/src/assets/i18n/en.json          |   5 +
 dmp-frontend/src/assets/i18n/es.json          |   5 +
 dmp-frontend/src/assets/i18n/gr.json          |   5 +
 dmp-frontend/src/assets/i18n/pt.json          |   5 +
 dmp-frontend/src/assets/i18n/sk.json          |   5 +
 dmp-frontend/src/assets/i18n/sr.json          |   5 +
 dmp-frontend/src/assets/i18n/tr.json          |   5 +
 dmp-frontend/src/styles.scss                  |   5 +
 25 files changed, 371 insertions(+), 191 deletions(-)
 create mode 100644 dmp-frontend/src/app/ui/admin/dataset-profile/editor/animations/animations.ts
 create mode 100644 dmp-frontend/src/app/ui/admin/dataset-profile/editor/custom-validators/editor-custom-validators.ts

diff --git a/dmp-frontend/src/app/app.component.ts b/dmp-frontend/src/app/app.component.ts
index 567acb990..d6c0fb7d7 100644
--- a/dmp-frontend/src/app/app.component.ts
+++ b/dmp-frontend/src/app/app.component.ts
@@ -174,7 +174,9 @@ export class AppComponent implements OnInit, AfterViewInit {
 
 	ngOnDestroy() {
 		this.statusChangeSubscription.unsubscribe();
-		this.sideNavSubscription.unsubscribe();
+		if(this.sideNavSubscription){
+			this.sideNavSubscription.unsubscribe();
+		}
 	}
 
 	login() {
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/animations/animations.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/animations/animations.ts
new file mode 100644
index 000000000..3c3648e3d
--- /dev/null
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/animations/animations.ts
@@ -0,0 +1,47 @@
+import { animate, keyframes, state, style, transition, trigger } from "@angular/animations";
+
+export const STEPPER_ANIMATIONS  = [
+    trigger('previous_btn',[
+        transition(':enter',[
+            style({'transform': 'translateX(100%)', 'z-index':'9999', 'opacity':0.4}),
+            animate('600ms ease-out', style({
+                'transform': 'translateX(0)',
+                'opacity':1
+            }))
+        ]),
+        transition(':leave',[
+            style({
+                'transform': 'translateX(0)',
+                'opacity':'1',
+                'z-index':'9999'
+            }),
+            animate('800ms ease-out', keyframes([
+                style({'transform': 'translateX(120%)', offset:0.8}),
+                style({'opacity': '0.2', offset:0.96})
+            ]))
+        ])
+    ]),
+    trigger('next_btn', [
+        transition(':leave',[
+            style({opacity:1, position:'absolute', 'z-index':'9999'}),
+            animate('700ms ease-out', keyframes( [
+                style({ transform:'translateX(-100%)', offset:0.6}),
+                style({ opacity:'0.2', offset:0.87})
+        ]))
+        ]),
+        transition(':enter',[
+            style({opacity:0.3, 'z-index':'9999', transform:'translateX(-100%)'}),
+            animate('600ms ease-out', style({ opacity:'1', transform:'translateX(0)' }))
+        ])
+    ]),
+    trigger('finalize_btn',[
+        transition(':enter',[
+            style({opacity:0.3}),
+            animate('400ms ease-in', style({opacity:1}))
+        ]),
+        transition(':leave',[
+            style({opacity:1, position:'absolute'}),
+            animate('600ms ease-in', style({opacity:0.3}))
+        ])
+    ])
+];
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html
index 0bfc28c59..8cdbfaac0 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html
@@ -69,8 +69,9 @@
 			<mat-form-field appearance="none" class="numbering-label" [ngStyle]="calculateLabelWidth(numbering)">
 				<input matInput type="text" [value]="numbering" disabled>
 			</mat-form-field>
-			<mat-form-field class="col field-title" appearance="none">
-				<input matInput type="text" placeholder="Title"
+			<!-- [appearance]="titleControl.focused? 'legacy':'none'" floatLabel="never" -->
+			<mat-form-field class="col field-title" [appearance]="'none'">
+				<input matInput type="text" placeholder="Title" #titleControl="matInput"
 				[formControl]="this.form.get('title')">
 			</mat-form-field>
 		</div>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/auto-complete/dataset-profile-editor-auto-complete-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/auto-complete/dataset-profile-editor-auto-complete-field.component.html
index 4ca660d04..02bd5705b 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/auto-complete/dataset-profile-editor-auto-complete-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/auto-complete/dataset-profile-editor-auto-complete-field.component.html
@@ -11,18 +11,29 @@
 		 [formControl]="form.get('data').get('label')">
 	</mat-form-field>
 
-	<h6 style="font-weight: bold" class="col-auto">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-SOURCE-TITLE' | translate}}</h6>
+	
+	<h6 class="col-12" style="font-weight: bold">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-SOURCE-TITLE' | translate}}</h6>
+	<div class="col-12 d-flex align-items-center" style="margin-bottom: 1em;">
 		<button mat-raised-button 
-			type="button" class="col-auto" 
+			type="button" 
 			(click)="addSource()"
-			[ngClass]="{'text-danger':form.get('data').errors?.emptyArray && form.touched}"
+			style="margin-right: 2em;"
 			>
+			<!-- [ngClass]="{'text-danger':form.get('data').errors?.emptyArray && form.touched}" -->
 			{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-AUTOCOMPLETE-ADD_SOURCE' | translate}}
-			<mat-icon
-			*ngIf="form.get('data').errors?.emptyArray && form.get('data').touched"
+			
+		</button>
+		
+		<!-- *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched" -->
+		<div class="d-flex" *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched">
+			<mat-icon 
+			class="text-danger"
 			matTooltip="At least one source must be provided."
 			>warning_amber</mat-icon>
-		</button>
+			<small class="text-danger">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-OTHER-SOURCES-REQUIRED'| translate}}</small>
+		</div>
+		
+	</div>
 </div>
 	
 	<div *ngFor="let singleForm of multiForm.controls; let i = index" class="row">
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.html
index 3e8b7d00e..944b3e3a9 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.html
@@ -1,7 +1,12 @@
 <div class="row" *ngIf="form.get('data')">
-
-	<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-TITLE'
-		| translate}}</h5>
+	<div class="col-12">
+		<h5 style="font-weight: bold; display: inline-block; margin-right: 2em;">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-TITLE'
+			| translate}}</h5>
+			<ng-container *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched">
+				<mat-icon class="text-danger translateY-3">warning_amber</mat-icon>
+				<small class="text-danger">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-RADIO-AT-LEAST-ONE-REQUIRED'| translate}}</small>
+			</ng-container>
+	</div>
 
 	<!-- <mat-form-field class="col-12">
 		<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-PLACEHOLDER' | translate}}</mat-label>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.scss
index 3db0dee74..8bec9923c 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/radio-box/dataset-profile-editor-radio-box-field.component.scss
@@ -1,3 +1,4 @@
 .full-width {
   width: 100%;
 }
+
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/word-list/dataset-profile-editor-word-list-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/word-list/dataset-profile-editor-word-list-field.component.html
index 049af17e1..12d82cae4 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/word-list/dataset-profile-editor-word-list-field.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/word-list/dataset-profile-editor-word-list-field.component.html
@@ -1,7 +1,14 @@
 <div class="row" *ngIf="form.get('data')">
+	<div class="col-12">
 
-	<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-WORD-LIST-TITLE'
-		| translate}}</h5>
+		<h5 style="font-weight: bold; display: inline-block; margin-right: 2em;">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-WORD-LIST-TITLE'
+			| translate}}</h5>
+			
+		<ng-container *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched">
+			<mat-icon class="text-danger translateY-3">warning_amber</mat-icon>
+			<small class="text-danger">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-SELECT-AT-LEAST-ONE-REQUIRED' |translate}}</small>
+		</ng-container>
+	</div>
 		<mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multiList')">
 			{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-MULTIPLE-WORDLIST' | translate}}
 			</mat-checkbox>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.scss
index 19a7b2248..38ce2f327 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.scss
@@ -23,9 +23,8 @@ li.list-inline-item{
 :host   ::ng-deep .field-toggler 
 {
   .mat-slide-toggle-content{
-  font-size: 0.8em;
-  color: #212121;
-  transform: translateY(3px);
+    font-size: 0.8em;
+    color: #212121;
   }
   .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
     background-color:#129D99 ;
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts
index 9f5a80663..111c98f42 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts
@@ -36,6 +36,7 @@ import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profil
 import { Guid } from '@common/types/guid';
 import { ErrorStateMatcher, MatSlideToggleChange } from '@angular/material';
 import { DefaultValueEditorModel } from '../../../admin/default-value-editor-model';
+import { EditorCustomValidators } from '../../custom-validators/editor-custom-validators';
 
 @Component({
 	selector: 'app-dataset-profile-editor-field-component',
@@ -55,6 +56,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
 	viewTypeEnum =  ViewStyleType;
 	private subject$:Subject<DatasetDescriptionFieldEditorModel> = new Subject<DatasetDescriptionFieldEditorModel>();
 	
+	private myCustomValidators = new EditorCustomValidators();
 
 
 	@Input() expandView: boolean = true;
@@ -423,7 +425,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
 				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
 				this.form.addControl('data', new WordListFieldDataEditorModel().buildForm());
 
-				this.form.get('data').setValidators(this._atLeastOneElementListValidator('options'));
+				this.form.get('data').setValidators(this.myCustomValidators._atLeastOneElementListValidator('options'));
 				this.form.get('data').updateValueAndValidity();
 
 				break;
@@ -431,7 +433,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
 				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
 				this.form.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE
 
-				this.form.get('data').setValidators(this._atLeastOneElementListValidator('autoCompleteSingleDataList'));
+				this.form.get('data').setValidators(this.myCustomValidators._atLeastOneElementListValidator('autoCompleteSingleDataList'));
 				this.form.get('data').updateValueAndValidity();
 
 
@@ -448,7 +450,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
 				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.RadioBox)
 				this.form.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
 
-				this.form.get('data').setValidators(this._atLeastOneElementListValidator('options'));
+				this.form.get('data').setValidators(this.myCustomValidators._atLeastOneElementListValidator('options'));
 				this.form.get('data').updateValueAndValidity();
 
 				break;
@@ -545,15 +547,15 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
 	}
 
 
-	private _atLeastOneElementListValidator(arrayToCheck): ValidatorFn{
-		return (control: AbstractControl): ValidationErrors | null=>{
+	// private _atLeastOneElementListValidator(arrayToCheck): ValidatorFn{
+	// 	return (control: AbstractControl): ValidationErrors | null=>{
 			
-			const fa = control.get(arrayToCheck) as FormArray;
+	// 		const fa = control.get(arrayToCheck) as FormArray;
 
-			if(fa.length  === 0){
-				return {emptyArray: true};
-			}
-			return null;
-		}
-	}
+	// 		if(fa.length  === 0){
+	// 			return {emptyArray: true};
+	// 		}
+	// 		return null;
+	// 	}
+	// }
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/custom-validators/editor-custom-validators.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/custom-validators/editor-custom-validators.ts
new file mode 100644
index 000000000..2bb92afdf
--- /dev/null
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/custom-validators/editor-custom-validators.ts
@@ -0,0 +1,19 @@
+import { Inject, Injectable } from "@angular/core";
+import { AbstractControl, FormArray, ValidationErrors, ValidatorFn } from "@angular/forms";
+
+
+export class EditorCustomValidators{
+
+    public _atLeastOneElementListValidator(arrayToCheck): ValidatorFn{
+		return (control: AbstractControl): ValidationErrors | null=>{
+			
+			const fa = control.get(arrayToCheck) as FormArray;
+
+			if(fa.length  === 0){
+				return {emptyArray: true};
+			}
+			return null;
+		}
+	}
+
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
index 68c54c95c..f37b41a60 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
@@ -2,110 +2,122 @@
 
 <div class="main-content">
 	<div class="container-fluid dataset-profile-editor" *ngIf="form" [formGroup]='form'>
-		<h3 *ngIf="isNew && !isClone && !isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE' | translate}}</h3>
-		<h3 *ngIf="isNew && isClone">
-			<span *ngIf="isClone">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}}</span>
-			{{form.get('label').value}}
-		</h3>
-		<h3 *ngIf="isNew && isNewVersion">
-			<span *ngIf="isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-VERSION' | translate}}</span>
-			{{form.get('label').value}}
-		</h3>
-
-		<h3 *ngIf="!isNew">{{form.get('label').value}}</h3>
-
-		<div class="d-flex justify-content-end pb-3" *ngIf="form.get('status').value==1">
-			<button mat-raised-button color="primary" (click)="downloadXML();" type="button">{{
-				'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
-		</div>
 
+		
 
 
 		<!-- Total steps: {{stepper.steps.length}} -->
 
-		<!-- Steps Navigation -->
-		<div class="row" style="padding: 2em;" *ngIf="steps">
+		
+		<div class="row" style="padding: 2em; margin-bottom: 1em; background: #F5F5F5 0% 0% no-repeat padding-box;" >
 
-			<div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container">
-				<div id="progress" [ngStyle]="progressStyle"></div>
-				<div class="row h-100">
-					<div class="col text-center align-self-center" *ngFor="let step of steps; index as idx">
-						<span (click)="stepper.selectedIndex=idx"
-						class="stepper-title-label"
-						[ngClass]="{'stepper-title-label-locked': !isStepUnlocked(idx),'stepper-title-label-completed':idx < stepper.selectedIndex} ">
-							<ng-container *ngIf="isStepCompleted(idx) else numberLabel">
-								<mat-icon style="font-size:0.7em; height: 0px;">done</mat-icon>
-							</ng-container>
-							<ng-template #numberLabel>
-								{{idx+1}} 
-							</ng-template>
-							{{step.label}}
-						</span>
-					</div>
+			<div class="col-12" style="margin-bottom: 2em;">
+				<h3 *ngIf="isNew && !isClone && !isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE' | translate}}</h3>
+				<h3 *ngIf="isNew && isClone">
+					<span *ngIf="isClone">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}}</span>
+					{{form.get('label').value}}
+				</h3>
+				<h3 *ngIf="isNew && isNewVersion">
+					<span *ngIf="isNewVersion">{{'DATASET-PROFILE-EDITOR.TITLE.NEW-PROFILE-VERSION' | translate}}</span>
+					{{form.get('label').value}}
+				</h3>
+
+				<h3 *ngIf="!isNew">{{form.get('label').value}}</h3>
+
+				<div class="d-flex justify-content-end pb-3" *ngIf="form.get('status').value==1">
+					<button mat-raised-button color="primary" (click)="downloadXML();" type="button">{{
+						'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
 				</div>
 			</div>
 
-			<div class="col d-flex justify-content-end">
-				<button mat-button class="navigate-btn" (click)="stepper.previous()" *ngIf="stepper.selectedIndex !=0">
-					<!-- <mat-icon>navigate_before</mat-icon>  -->
-					{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}} 
-				</button>
-				<button mat-button class="navigate-btn ml-2" 
-				(click)="stepper.next();validateStep(stepper.selected);" 
-				*ngIf="stepper.selectedIndex != (steps.length-1)"
-				[ngClass]="{'navigate-btn-disabled': !isStepCompleted(stepper.selectedIndex)}">
 
-					<mat-icon style="font-size: 1.66em;">navigate_next</mat-icon>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}
-				</button>
-
-
-				<ng-container *ngIf="steps.length-1 === stepper.selectedIndex">
-				<!-- <ng-container *ngIf="stepper.selectedIndex === (steps.length-1)"> -->
-					<ng-container *ngIf="!viewOnly">
-						
-						<!-- <button mat-button class="navigate-btn ml-2"
-							(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
-							translate}}</button> -->
-						<!-- <button mat-button class="finalize-btn ml-2"
-							(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
-							translate}}</button> -->
-					</ng-container>
-
-					<!-- //TODO -->
-					<ng-container *ngIf="true">
-						
-						<!-- <button mat-button class="navigate-btn ml-2"
-							(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
-							translate}}</button> -->
-						<!-- <button mat-button class="finalize-btn ml-2"
-							(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
-							translate}}</button> -->
-						<button mat-button class="finalize-btn ml-2"
-							[disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
-							translate}}</button>
-					
-					</ng-container>
-					<!-- SAVE BUTTON  WHEN FINALIZED-->
-
-					<ng-container *ngIf="false">
-						<ng-container *ngIf="showUpdateButton()">
+			<!-- Steps Navigation -->
+			<div class="col-12 d-flex" *ngIf="steps">
+				<div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container">
+					<div id="progress" [ngStyle]="progressStyle"></div>
+					<div class="row h-100">
+						<div class="col text-center align-self-center" *ngFor="let step of steps; index as idx">
+							<span (click)="stepper.selectedIndex=idx"
+							class="stepper-title-label"
+							[ngClass]="{'stepper-title-label-locked': !isStepUnlocked(idx),'stepper-title-label-completed':idx < stepper.selectedIndex} ">
+								<ng-container *ngIf="isStepCompleted(idx) else numberLabel">
+									<mat-icon style="font-size:0.7em; height: 0px;">done</mat-icon>
+								</ng-container>
+								<ng-template #numberLabel>
+									{{idx+1}} 
+								</ng-template>
+								{{step.label}}
+							</span>
+						</div>
+					</div>
+				</div>
+	
+				<div class="col d-flex justify-content-end">
+					<button [@previous_btn] mat-button class="navigate-btn" (click)="stepper.previous()" *ngIf="stepper.selectedIndex !=0">
+						<!-- <mat-icon>navigate_before</mat-icon>  -->
+						{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}} 
+					</button>
+					<button mat-button class="navigate-btn ml-3" 
+					[@next_btn]
+					(click)="validateStep(stepper.selected);stepper.next();" 
+					*ngIf="stepper.selectedIndex != (steps.length-1)"
+					[ngClass]="{'navigate-btn-disabled': !isStepCompleted(stepper.selectedIndex)}">
+	
+						<mat-icon style="font-size: 1.66em;">navigate_next</mat-icon>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}
+					</button>
+	
+	
+					<ng-container *ngIf="steps.length-1 === stepper.selectedIndex">
+					<!-- <ng-container *ngIf="stepper.selectedIndex === (steps.length-1)"> -->
+						<ng-container *ngIf="!viewOnly">
 							
 							<!-- <button mat-button class="navigate-btn ml-2"
-								(click)='checkFormValidation()'
-								[disabled]="form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.VALIDATE' | translate}}</button> -->
-							<button mat-button class="navigate-btn ml-2"
-								(click)='updateFinalized()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |
+								(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
+								translate}}</button> -->
+							<!-- <button mat-button class="finalize-btn ml-2"
+								(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
+								translate}}</button> -->
+						</ng-container>
+	
+						<!-- //TODO -->
+						<ng-container *ngIf="true">
+							
+							<!-- <button mat-button class="navigate-btn ml-2"
+								(click)='onSubmit()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.SAVE' |
+								translate}}</button> -->
+							<!-- <button mat-button class="finalize-btn ml-2"
+								(click)='finalize()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
+								translate}}</button> -->
+							<button [@finalize_btn] mat-button class="finalize-btn ml-3"
+								[disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.FINALIZE' |
 								translate}}</button>
+						
+						</ng-container>
+						<!-- SAVE BUTTON  WHEN FINALIZED-->
+	
+						<ng-container *ngIf="false">
+							<ng-container *ngIf="showUpdateButton()">
+								
+								<!-- <button mat-button class="navigate-btn ml-2"
+									(click)='checkFormValidation()'
+									[disabled]="form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.VALIDATE' | translate}}</button> -->
+								<button mat-button class="navigate-btn ml-2"
+									(click)='updateFinalized()' [disabled]="!form.valid">{{'DATASET-PROFILE-EDITOR.ACTIONS.UPDATE' |
+									translate}}</button>
+							</ng-container>
 						</ng-container>
 					</ng-container>
-				</ng-container>
-
+	
+	
+				</div>
 
 			</div>
 		</div>
 
 		
-		<mat-horizontal-stepper [linear]="true" #stepper class="stepper" (selectionChange)="onMatStepperSelectionChange($event)">
+
+		
+		<mat-horizontal-stepper [linear]="true" #stepper class="stepper" (selectionChange)="onMatStepperSelectionChange($event)" style="padding-left: 8px; padding-right: 15px;">
 
 			<mat-step [label]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate" [stepControl]="basicInfo">
 				<!-- <ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate}}
@@ -381,7 +393,7 @@
 			</mat-step>
 
 		</mat-horizontal-stepper>
-
+		
 
 
 		<ng-container *ngIf="true">
@@ -428,12 +440,14 @@
 			</div>
 
 		</ng-container>
-
-		<!-- <div class="row">
+<!-- 
+		<div class="row">
 			<button (click)="printForm()">
 				console form
 			</button>
 		</div> -->
+
+		<!-- {{form.value | json}} -->
 		<!-- <div class="row">
 
 			<button (click)="printMyErrors()">
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
index 483f62ee6..0b17e1d81 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
@@ -52,6 +52,7 @@
 //TO CHECK
 :host ::ng-deep .mat-horizontal-content-container {
     overflow: visible;
+	// padding: 0px;
 }
 :host ::ng-deep .mat-form-field-outline{
     background-color: #ffffff4f;
@@ -90,6 +91,7 @@
 .navigate-btn {
 	border-radius: 30px;
 	background-color: #f7dd72;
+	border: 1px solid transparent;
 	padding-left: 2em;
 	padding-right: 2em;
 	box-shadow: 0px 3px 6px #1E202029;
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
index 154ab725e..94b344d8c 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
@@ -41,12 +41,16 @@ import { Rule } from '@app/core/model/dataset-profile-definition/rule';
 import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
 import { invalid } from '@angular/compiler/src/render3/view/util';
 import { SideNavService } from '@app/core/services/sidenav/side-nav.sevice';
+import { EditorCustomValidators } from './custom-validators/editor-custom-validators';
+import { CustomErrorValidator } from '@common/forms/validation/custom-validator';
+import { STEPPER_ANIMATIONS } from './animations/animations';
 const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.json');
 
 @Component({
 	selector: 'app-dataset-profile-editor-component',
 	templateUrl: './dataset-profile-editor.component.html',
-	styleUrls: ['./dataset-profile-editor.component.scss']
+	styleUrls: ['./dataset-profile-editor.component.scss'],
+	animations:[...STEPPER_ANIMATIONS]
 })
 export class DatasetProfileEditorComponent extends BaseComponent implements OnInit {
 
@@ -68,6 +72,9 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 	errorMessages: string[] = [];
 	tocEntryEnumValues = ToCEntryType;
 
+
+	customEditorValidators = new EditorCustomValidators();
+
 	// sectionIdPreviewed:string = null;
 	// currentSubForm:FormGroup = null;
 	// currentSectionIndex: number = null;
@@ -180,6 +187,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 			} else {
 				this.dataModel = new DatasetProfileEditorModel();
 				this.form = this.dataModel.buildForm();
+				this.form.setValidators([this.customEditorValidators._atLeastOneElementListValidator('pages'), this.customEditorValidators._atLeastOneElementListValidator('sections')])
 				if (this.dataModel.status === DatasetProfileEnum.FINALIZED) {
 					this.form.disable();
 					this.viewOnly = true;
@@ -199,6 +207,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 
 	prepareForm() {
 		this.visibilityRulesService.buildVisibilityRules([],this.form);
+		this.form.setValidators([this.customEditorValidators._atLeastOneElementListValidator('pages'), this.customEditorValidators._atLeastOneElementListValidator('pages')]);
 		this.form.valueChanges
 			.pipe(takeUntil(this._destroyed))
 			.subscribe(change => {
@@ -540,7 +549,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 		if(this.selectedTocEntry){
 			this.selectedTocEntry = this._findTocEntryById(this.selectedTocEntry.id, this.toCEntries);
 		}
-		this.updateOrdinals(this.toCEntries);
+		// this.updateOrdinals(this.toCEntries);
+		// this._updateNumbering(this.toCEntries);
 		return this.toCEntries;
 	}
 
@@ -573,6 +583,18 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 		// if(!aValue || !bValue) return 0;
 		return aValue - bValue;
 	}
+	private _updateNumbering(entries:ToCEntry[], parentNumbering:string){
+		if(!entries || !entries.length) return;
+		let prefix ='';
+		if(parentNumbering.length){
+			prefix = parentNumbering + '.';
+		}
+		entries.forEach((entry,index)=>{
+			const numbering = prefix + (index+1);
+			entry.numbering = numbering;
+			this._updateNumbering(entry.subEntries, numbering);
+		})
+	}
 
 	toCEntries:ToCEntry[];
 
@@ -623,7 +645,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 			pageToAdd.subEntries.push(item);
 
 		});
-		this._sortToCentries(result);
+		this._sortToCentries(result);//ordeby ordinal
+		this._updateNumbering(result, '');//update nubering if needed
 		return result;
 	}
 
@@ -798,52 +821,52 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 	}
 
 
-	private customFieldValidator(): ValidatorFn{
-		return (control):ValidationErrors | null=>{
-			DatasetProfileFieldViewStyle
-			switch(control.get('viewStyle').get('renderStyle').value){
+	// private customFieldValidator(): ValidatorFn{
+	// 	return (control):ValidationErrors | null=>{
+	// 		DatasetProfileFieldViewStyle
+	// 		switch(control.get('viewStyle').get('renderStyle').value){
 
-				case DatasetProfileFieldViewStyle.TextArea:
-					return null;
-				case DatasetProfileFieldViewStyle.BooleanDecision:
-					return null;
-				case DatasetProfileFieldViewStyle.ComboBox:
-					return null;
-				case DatasetProfileFieldViewStyle.CheckBox:
-					return null;
-				case DatasetProfileFieldViewStyle.FreeText:
-					return null;
-				case DatasetProfileFieldViewStyle.RadioBox:
-					return null;
-				case DatasetProfileFieldViewStyle.DatePicker:
-					return null;
-				case DatasetProfileFieldViewStyle.InternalDmpEntities:
-					return null;
-				case DatasetProfileFieldViewStyle.ExternalDatasets:
-					return null;
-				case DatasetProfileFieldViewStyle.DataRepositories:
-					return null;
-				case DatasetProfileFieldViewStyle.Registries:
-					return null;
-				case DatasetProfileFieldViewStyle.Services:
-					return null;
-				case DatasetProfileFieldViewStyle.Tags:
-					return null;
-				case DatasetProfileFieldViewStyle.Researchers:
-					return null;
-				case DatasetProfileFieldViewStyle.Organizations:
-					return null;
-				case DatasetProfileFieldViewStyle.DatasetIdentifier:
-					return null;
-				case DatasetProfileFieldViewStyle.Currency:
-					return null;
-				case DatasetProfileFieldViewStyle.Validation:
-					return null;
-				default:
-					return {inputTypeNotValid: true};
-			}
-		}
-	}
+	// 			case DatasetProfileFieldViewStyle.TextArea:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.BooleanDecision:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.ComboBox:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.CheckBox:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.FreeText:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.RadioBox:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.DatePicker:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.InternalDmpEntities:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.ExternalDatasets:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.DataRepositories:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.Registries:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.Services:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.Tags:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.Researchers:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.Organizations:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.DatasetIdentifier:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.Currency:
+	// 				return null;
+	// 			case DatasetProfileFieldViewStyle.Validation:
+	// 				return null;
+	// 			default:
+	// 				return {inputTypeNotValid: true};
+	// 		}
+	// 	}
+	// }
 
 
 	onRemoveEntry(tce: ToCEntry){
@@ -1121,7 +1144,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 
 
 	printForm(){
-		console.log(this.form.value);
+		// console.log(this.form.value);
+		console.log(this.form);
 	}
 
 	get barPercentage(){
@@ -1338,12 +1362,12 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 
 	onMatStepperSelectionChange(event: StepperSelectionEvent){	
 
-		if(event.selectedIndex === 2){//preview selected
+		if(event.selectedIndex === (this.steps.length -1)){//preview selected
 			this.generatePreviewForm();//TODO LAZY LOADING IN THE TEMPLATE
 		}else{
 			this.previewForm = null;
 		}
-
+		this.form.markAsUntouched();
 
 	}
 
@@ -1430,7 +1454,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 
 	validateStep(step: CdkStep){
 		if(step.hasError){
-			this.printMyErrors();
+			this.printMyErrors(this.form);
 		}
 	}
 
@@ -1468,9 +1492,9 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 	}
 
 
-	printMyErrors(){
+	printMyErrors(form: AbstractControl){
 		// this._printToCentriesErrrors(this.toCEntries);
-		const result = this._getErrors(this.form);
+		const result = this._getErrors(form);
 		// console.log('result', result);
 
 
@@ -1478,7 +1502,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 
 		if(result){
 
-			this.form.markAllAsTouched();
+			form.markAllAsTouched();
 			const errmess:string[] = [];
 
 			let indexes:number[] = [];
@@ -1528,13 +1552,13 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 			// console.log(result);
 
 
-			if(this.stepper.selectedIndex != 0){
-				if(!(this.form.get('pages') as FormArray).length){
-					errmess.push(
-						'There has to be at least one section in the template.'
-					);
-				}
-			}
+			// if(this.stepper.selectedIndex != 0){
+			// 	if(!(this.form.get('pages') as FormArray).length){
+			// 		errmess.push(
+			// 			'There has to be at least one section in the template.'
+			// 		);
+			// 	}
+			// }
 
 
 			const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.html
index ce6fb6c10..45a016601 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.html
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.html
@@ -4,7 +4,7 @@
 			<span>{{'CRITERIA.USERS.SHOW' | translate}}:</span>
 		</div>
 
-		<mat-form-field class="status-form">
+		<mat-form-field class="status-form-field">
 			<mat-select [(ngModel)]="criteria.status" (ngModelChange)="controlModified()" placeholder=" {{'CRITERIA.DATASET-PROFILE.STATUS' | translate}}">
 				<mat-option [value]="null">{{'DATASET-PROFILE-STATUS.NONE' | translate}}</mat-option>
 				<mat-option [value]="0">{{'DATASET-PROFILE-STATUS.DRAFT' | translate}}</mat-option>
@@ -14,7 +14,7 @@
 
 	</div>
 	<div class="col-auto ml-lg-auto">
-		<mat-form-field class="status-form">
+		<mat-form-field class="search-form-field">
 			<input matInput placeholder=" {{'CRITERIA.DATASET-PROFILE.LIKE'| translate}}" name="datasetProfileLike"
 				[(ngModel)]="criteria.like" (ngModelChange)="controlModified()">
 				<mat-icon matPrefix>search</mat-icon>
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.scss
index 8aabe0b96..9b64c055a 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.scss
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dataset-profile.component.scss
@@ -2,16 +2,16 @@
     display: inline-block !important;
 }
 
-// ::ng-deep .status-form .mat-form-field-wrapper {
-// 	background-color: white !important;
-// 	padding-bottom: 0 !important;
-// }
+:host ::ng-deep .status-form-field .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
 
-// ::ng-deep .search-form .mat-form-field-wrapper {
-// 	background-color: white !important;
-// 	padding-bottom: 0 !important;
-// }
+:host ::ng-deep .search-form-field .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
 
-// ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
-// 	padding: 0.3rem 0rem 0.6rem 0rem !important;
-// }
\ No newline at end of file
+:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+	padding: 0.3rem 0rem 0.6rem 0rem !important;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts
index b4c53ee90..b454ba2fc 100644
--- a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts
+++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts
@@ -431,6 +431,7 @@ export class DatasetProfileTableOfContents extends BaseComponent implements OnIn
 
 
 		drake.on('drag',(el,source)=>{
+			console.log('drag fired');
 			this.isDragging = true;
 			this.draggingItemId = (el.id as string).replace(this.DRAGULA_ITEM_ID_PREFIX, '');
 		});
diff --git a/dmp-frontend/src/assets/i18n/de.json b/dmp-frontend/src/assets/i18n/de.json
index c892e69cc..cd67ee413 100644
--- a/dmp-frontend/src/assets/i18n/de.json
+++ b/dmp-frontend/src/assets/i18n/de.json
@@ -437,6 +437,11 @@
 						"FIELD-VALIDATOR-TITLE": "Validator Data",
 						"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder"
 					},
+					"ERROR-MESSAGES":{
+						"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
+						"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
+						"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
+					},
 					"DEFAULT-VALUES": {
 						"NONE": "Keine",
 						"BOOLEAN-DECISION": {
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 08c2c8a56..86f380533 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -437,6 +437,11 @@
 						"FIELD-VALIDATOR-TITLE": "Validator Data",
 						"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder"
 					},
+					"ERROR-MESSAGES":{
+						"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
+						"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
+						"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
+					},
 					"DEFAULT-VALUES": {
 						"NONE": "None",
 						"BOOLEAN-DECISION": {
diff --git a/dmp-frontend/src/assets/i18n/es.json b/dmp-frontend/src/assets/i18n/es.json
index ac04db427..23fefb7e1 100644
--- a/dmp-frontend/src/assets/i18n/es.json
+++ b/dmp-frontend/src/assets/i18n/es.json
@@ -437,6 +437,11 @@
 						"FIELD-VALIDATOR-TITLE": "Validator Data",
 						"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder"
 					},
+					"ERROR-MESSAGES":{
+						"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
+						"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
+						"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
+					},
 					"DEFAULT-VALUES": {
 						"NONE": "Ninguno",
 						"BOOLEAN-DECISION": {
diff --git a/dmp-frontend/src/assets/i18n/gr.json b/dmp-frontend/src/assets/i18n/gr.json
index eaa79ab07..87ed12f91 100644
--- a/dmp-frontend/src/assets/i18n/gr.json
+++ b/dmp-frontend/src/assets/i18n/gr.json
@@ -437,6 +437,11 @@
 						"FIELD-VALIDATOR-TITLE": "Validator Data",
 						"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder"
 					},
+					"ERROR-MESSAGES":{
+						"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
+						"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
+						"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
+					},
 					"DEFAULT-VALUES": {
 						"NONE": "Κανένα",
 						"BOOLEAN-DECISION": {
diff --git a/dmp-frontend/src/assets/i18n/pt.json b/dmp-frontend/src/assets/i18n/pt.json
index e004f8073..13ee785a8 100644
--- a/dmp-frontend/src/assets/i18n/pt.json
+++ b/dmp-frontend/src/assets/i18n/pt.json
@@ -437,6 +437,11 @@
 						"FIELD-VALIDATOR-TITLE": "Validator Data",
 						"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder"
 					},
+					"ERROR-MESSAGES":{
+						"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
+						"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
+						"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
+					},
 					"DEFAULT-VALUES": {
 						"NONE": "Nenhum",
 						"BOOLEAN-DECISION": {
diff --git a/dmp-frontend/src/assets/i18n/sk.json b/dmp-frontend/src/assets/i18n/sk.json
index 12040f7af..eb27b0fc9 100644
--- a/dmp-frontend/src/assets/i18n/sk.json
+++ b/dmp-frontend/src/assets/i18n/sk.json
@@ -437,6 +437,11 @@
 						"FIELD-VALIDATOR-TITLE": "Validator Data",
 						"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder"
 					},
+					"ERROR-MESSAGES":{
+						"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
+						"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
+						"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
+					},
 					"DEFAULT-VALUES": {
 						"NONE": "Žiadny",
 						"BOOLEAN-DECISION": {
diff --git a/dmp-frontend/src/assets/i18n/sr.json b/dmp-frontend/src/assets/i18n/sr.json
index f0eaacc50..f81cba2aa 100644
--- a/dmp-frontend/src/assets/i18n/sr.json
+++ b/dmp-frontend/src/assets/i18n/sr.json
@@ -437,6 +437,11 @@
 						"FIELD-VALIDATOR-TITLE": "Validator Data",
 						"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder"
 					},
+					"ERROR-MESSAGES":{
+						"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
+						"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
+						"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
+					},
 					"DEFAULT-VALUES": {
 						"NONE": "Nijedan",
 						"BOOLEAN-DECISION": {
diff --git a/dmp-frontend/src/assets/i18n/tr.json b/dmp-frontend/src/assets/i18n/tr.json
index 754b0fdc5..4f711b5ea 100644
--- a/dmp-frontend/src/assets/i18n/tr.json
+++ b/dmp-frontend/src/assets/i18n/tr.json
@@ -437,6 +437,11 @@
 						"FIELD-VALIDATOR-TITLE": "Validator Data",
 						"FIELD-VALIDATOR-PLACEHOLDER": "Input placeholder"
 					},
+					"ERROR-MESSAGES":{
+						"FIELD-OTHER-SOURCES-REQUIRED": "At least one source must be provided.",
+						"FIELD-RADIO-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided.",
+						"FIELD-SELECT-AT-LEAST-ONE-REQUIRED":"There must be at least one option provided."
+					},
 					"DEFAULT-VALUES": {
 						"NONE": "Hiç",
 						"BOOLEAN-DECISION": {
diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss
index 71daf289c..6ca804bb1 100644
--- a/dmp-frontend/src/styles.scss
+++ b/dmp-frontend/src/styles.scss
@@ -246,4 +246,9 @@
 
 .text-primary-blue{
 	color: #129D99;
+}
+
+
+.translateY-3{
+	transform:translateY(3px);
 }
\ No newline at end of file