From 6bb091868cf49ce5b8af9df52f5d73c1f85915e5 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Tue, 16 Apr 2024 16:06:28 +0300
Subject: [PATCH] notification template ui changes

---
 ...otification-template-editor.component.html | 460 ++++++++++--------
 1 file changed, 254 insertions(+), 206 deletions(-)

diff --git a/dmp-frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.html b/dmp-frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.html
index 9cac4ff1d..bc63c133b 100644
--- a/dmp-frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.html
+++ b/dmp-frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.html
@@ -29,80 +29,100 @@
 						<mat-card-title *ngIf="isNew">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.NEW' | translate}}</mat-card-title>
 					</mat-card-header>
 					<mat-card-content>
-						<div class="d-flex flex-wrap mt-4">
-							<div class="col-md-12">
-								<mat-form-field class="w-100">
-									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.NOTIFICATION-TYPE' | translate}}</mat-label>
-									<mat-select [formControl]="formGroup.get('notificationType')" name="notificationType" required>
-										<mat-option *ngFor="let type of notificationTypeEnum" [value]="type">
-											{{enumUtils.toNotificationTypeString(type)}}
-										</mat-option>
-									</mat-select>
-									<mat-error *ngIf="formGroup.get('notificationType').hasError('backendError')">{{formGroup.get('notificationType').getError('backendError').message}}</mat-error>
-									<mat-error *ngIf="formGroup.get('notificationType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-								</mat-form-field>
-							</div>
-							<div class="col-12 col-lg-4">
-								<mat-form-field class="w-100">
-									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.LANGUAGE' | translate}}</mat-label>
-									<mat-select [formControl]="formGroup.get('languageCode')" name="language" required>
-										<mat-option *ngFor="let language of languages" [value]="language.code">
-											{{language.code}}
-										</mat-option>
-									</mat-select>
-									<mat-error *ngIf="formGroup.get('languageCode').hasError('backendError')">{{formGroup.get('languageCode').getError('backendError').message}}</mat-error>
-									<mat-error *ngIf="formGroup.get('languageCode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-								</mat-form-field>
-							</div>
-							<div class="col-12 col-lg-4">
-								<mat-form-field class="w-100">
-									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KIND' | translate}}</mat-label>
-									<mat-select name="kind" [formControl]="formGroup.get('kind')" required>
-										<mat-option *ngFor="let kind of notificationTemplateKindEnum" [value]="kind">
-											{{enumUtils.toNotificationTemplateKindString(kind)}}
-										</mat-option>
-									</mat-select>
-									<mat-error *ngIf="formGroup.get('kind').hasError('backendError')">{{formGroup.get('kind').getError('backendError').message}}</mat-error>
-									<mat-error *ngIf="formGroup.get('kind').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-								</mat-form-field>
-							</div>
-							<div class="col-12 col-lg-4">
-								<mat-form-field class="w-100">
-									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CHANNEL' | translate}}</mat-label>
-									<mat-select name="channel" [formControl]="formGroup.get('channel')" required>
-										<mat-option *ngFor="let channel of notificationTemplateChannelEnum" [value]="channel">
-											{{enumUtils.toNotificationTemplateChannelString(channel)}}
-										</mat-option>
-									</mat-select>
-									<mat-error *ngIf="formGroup.get('channel').hasError('backendError')">{{formGroup.get('channel').getError('backendError').message}}</mat-error>
-									<mat-error *ngIf="formGroup.get('channel').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-								</mat-form-field>
+						<div class="row mt-4">
+							<div class="col-12">
+								<div class="container">
+									<div class="row flex-wrap">
+										<div class="col-md-12">
+											<mat-form-field class="w-100">
+												<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.NOTIFICATION-TYPE' | translate}}</mat-label>
+												<mat-select [formControl]="formGroup.get('notificationType')" name="notificationType" required>
+													<mat-option *ngFor="let type of notificationTypeEnum" [value]="type">
+														{{enumUtils.toNotificationTypeString(type)}}
+													</mat-option>
+												</mat-select>
+												<mat-error *ngIf="formGroup.get('notificationType').hasError('backendError')">{{formGroup.get('notificationType').getError('backendError').message}}</mat-error>
+												<mat-error *ngIf="formGroup.get('notificationType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+											</mat-form-field>
+										</div>
+										<div class="col-12 col-lg-4">
+											<mat-form-field class="w-100">
+												<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.LANGUAGE' | translate}}</mat-label>
+												<mat-select [formControl]="formGroup.get('languageCode')" name="language" required>
+													<mat-option *ngFor="let language of languages" [value]="language.code">
+														{{language.code}}
+													</mat-option>
+												</mat-select>
+												<mat-error *ngIf="formGroup.get('languageCode').hasError('backendError')">{{formGroup.get('languageCode').getError('backendError').message}}</mat-error>
+												<mat-error *ngIf="formGroup.get('languageCode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+											</mat-form-field>
+										</div>
+										<div class="col-12 col-lg-4">
+											<mat-form-field class="w-100">
+												<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KIND' | translate}}</mat-label>
+												<mat-select name="kind" [formControl]="formGroup.get('kind')" required>
+													<mat-option *ngFor="let kind of notificationTemplateKindEnum" [value]="kind">
+														{{enumUtils.toNotificationTemplateKindString(kind)}}
+													</mat-option>
+												</mat-select>
+												<mat-error *ngIf="formGroup.get('kind').hasError('backendError')">{{formGroup.get('kind').getError('backendError').message}}</mat-error>
+												<mat-error *ngIf="formGroup.get('kind').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+											</mat-form-field>
+										</div>
+										<div class="col-12 col-lg-4">
+											<mat-form-field class="w-100">
+												<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CHANNEL' | translate}}</mat-label>
+												<mat-select name="channel" [formControl]="formGroup.get('channel')" required>
+													<mat-option *ngFor="let channel of notificationTemplateChannelEnum" [value]="channel">
+														{{enumUtils.toNotificationTemplateChannelString(channel)}}
+													</mat-option>
+												</mat-select>
+												<mat-error *ngIf="formGroup.get('channel').hasError('backendError')">{{formGroup.get('channel').getError('backendError').message}}</mat-error>
+												<mat-error *ngIf="formGroup.get('channel').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+											</mat-form-field>
+										</div>
+									</div>
+								</div>
 							</div>
 						</div>
 
 						<!-- Subject -->
-						<div class="d-flex flex-wrap">
-							<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-SECTION' | translate}}</h3>
-							<div class="col-md-6">
-								<mat-form-field class="w-100">
-									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-TEXT' | translate}}</mat-label>
-									<input matInput [formControl]="formGroup.get('value').get('subjectText')">
-									<mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('backendError')">{{formGroup.get('value').get('subjectText').getError('backendError').message}}</mat-error>
-									<mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-								</mat-form-field>
-							</div>
-							<div class="col-md-6">
-								<mat-form-field class="w-100">
-									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-KEY' | translate}}</mat-label>
-									<input matInput [formControl]="formGroup.get('value').get('subjectKey')">
-									<mat-error *ngIf="formGroup.get('value').get('subjectKey').hasError('backendError')">{{formGroup.get('value').get('subjectKey').getError('backendError').message}}</mat-error>
-									<mat-error *ngIf="formGroup.get('value').get('subjectKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-								</mat-form-field>
+						<div class="row">
+							<div class="col-12">
+								<div class="container">
+									<div class="row flex-wrap">									
+										<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-SECTION' | translate}}</h3>
+										<div class="col-md-6">
+											<mat-form-field class="w-100">
+												<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-TEXT' | translate}}</mat-label>
+												<input matInput [formControl]="formGroup.get('value').get('subjectText')">
+												<mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('backendError')">{{formGroup.get('value').get('subjectText').getError('backendError').message}}</mat-error>
+												<mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+											</mat-form-field>
+										</div>
+										<div class="col-md-6">
+											<mat-form-field class="w-100">
+												<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-KEY' | translate}}</mat-label>
+												<input matInput [formControl]="formGroup.get('value').get('subjectKey')">
+												<mat-error *ngIf="formGroup.get('value').get('subjectKey').hasError('backendError')">{{formGroup.get('value').get('subjectKey').getError('backendError').message}}</mat-error>
+												<mat-error *ngIf="formGroup.get('value').get('subjectKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+											</mat-form-field>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-12">
+								<div class="container">
+									<div class="row">
+										<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-FIELD-OPTIONS' | translate}}
+											<mat-checkbox [checked]="subjectFieldOptionsEnabled" (change)="subjectFieldOptionsSelectionChanged($event)"></mat-checkbox>
+										</h4>
+									</div>
+								</div>
 							</div>
 						</div>
-						<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-FIELD-OPTIONS' | translate}}
-							<mat-checkbox [checked]="subjectFieldOptionsEnabled" (change)="subjectFieldOptionsSelectionChanged($event)"></mat-checkbox>
-						</h4>
 						<ng-container *ngIf="subjectFieldOptionsEnabled == true">
 							<app-notification-template-field-options-component
 								[form]="formGroup.get('value').get('subjectFieldOptions')"
@@ -114,44 +134,58 @@
 						</ng-container>
 
 						<!-- Body -->
-						<div>
-							<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-SECTION' | translate}}</h3>
-							<div class="col-md-6">
-								<mat-form-field class="w-100">
-									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-KEY' | translate}}</mat-label>
-									<input matInput [formControl]="formGroup.get('value').get('bodyKey')">
-									<mat-error *ngIf="formGroup.get('value').get('bodyKey').hasError('backendError')">{{formGroup.get('value').get('bodyKey').getError('backendError').message}}</mat-error>
-									<mat-error *ngIf="formGroup.get('value').get('bodyKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-								</mat-form-field>
-							</div>
+						<div class="row">
 							<div class="col-12">
-								<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-TEXT' | translate}}</mat-label>
-								<editor class="w-100 mt-2" [init]="{
-								base_url: '/tinymce',
-								suffix: '.min',
-								height: 800,
-								menubar: true,
-								plugins: [
-								'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'print', 'preview', 'anchor',
-								'searchreplace', 'visualblocks', 'fullpage',
-								'insertdatetime', 'media', 'table' ,'paste', 'code', 'help', 'wordcount','importcss',
-								],
-								extended_valid_elements: '*[*]',
-								forced_root_block: '',
-								valid_children: '+body[script],ol[li|div|p|a|ol|table],h2[span],h3[span]',
-								save_enablewhendirty: false,
-								toolbar:
-								'undo redo | formatselect | bold italic backcolor | \
-								alignleft aligncenter alignright alignjustify | \
-								bullist numlist outdent indent | code | searchreplace | preview | removeformat | help | link | image'
-							}" [formControl]="formGroup.get('value').get('bodyText')"></editor>
-							<mat-error *ngIf="formGroup.get('value').get('bodyText').hasError('backendError')">{{formGroup.get('value').get('bodyText').getError('backendError').message}}</mat-error>
-							<mat-error *ngIf="formGroup.get('value').get('bodyText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+								<div class="container">
+									<div class="row">		
+										<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-SECTION' | translate}}</h3>
+										<div class="col-md-6">
+											<mat-form-field class="w-100">
+												<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-KEY' | translate}}</mat-label>
+												<input matInput [formControl]="formGroup.get('value').get('bodyKey')">
+												<mat-error *ngIf="formGroup.get('value').get('bodyKey').hasError('backendError')">{{formGroup.get('value').get('bodyKey').getError('backendError').message}}</mat-error>
+												<mat-error *ngIf="formGroup.get('value').get('bodyKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+											</mat-form-field>
+										</div>
+										<div class="col-12">
+											<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-TEXT' | translate}}</mat-label>
+											<editor class="w-100 mt-2" [init]="{
+											base_url: '/tinymce',
+											suffix: '.min',
+											height: 800,
+											menubar: true,
+											plugins: [
+											'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'print', 'preview', 'anchor',
+											'searchreplace', 'visualblocks', 'fullpage',
+											'insertdatetime', 'media', 'table' ,'paste', 'code', 'help', 'wordcount','importcss',
+											],
+											extended_valid_elements: '*[*]',
+											forced_root_block: '',
+											valid_children: '+body[script],ol[li|div|p|a|ol|table],h2[span],h3[span]',
+											save_enablewhendirty: false,
+											toolbar:
+											'undo redo | formatselect | bold italic backcolor | \
+											alignleft aligncenter alignright alignjustify | \
+											bullist numlist outdent indent | code | searchreplace | preview | removeformat | help | link | image'
+										}" [formControl]="formGroup.get('value').get('bodyText')"></editor>
+										<mat-error *ngIf="formGroup.get('value').get('bodyText').hasError('backendError')">{{formGroup.get('value').get('bodyText').getError('backendError').message}}</mat-error>
+										<mat-error *ngIf="formGroup.get('value').get('bodyText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-12">
+								<div class="container">
+									<div class="row">
+										<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-FIELD-OPTIONS' | translate}}
+											<mat-checkbox [checked]="bodyFieldOptionsEnabled" (change)="bodyFieldOptionsSelectionChanged($event)"></mat-checkbox>
+										</h4>
+									</div>
+								</div>
 							</div>
 						</div>
-						<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-FIELD-OPTIONS' | translate}}
-							<mat-checkbox [checked]="bodyFieldOptionsEnabled" (change)="bodyFieldOptionsSelectionChanged($event)"></mat-checkbox>
-						</h4>
 						<ng-container *ngIf="bodyFieldOptionsEnabled == true">
 							<app-notification-template-field-options-component
 								[form]="formGroup.get('value').get('bodyFieldOptions')"
@@ -163,110 +197,124 @@
 						</ng-container>
 						<!--Extra Options -->
 						<div class="row">
-							<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.EXTRA-OPTIONS' | translate}}</h3>
-							<div>
-								<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.ALLOW-ATTACHMENTS' | translate}}
-									<mat-checkbox [formControl]="formGroup.get('value').get('allowAttachments')"></mat-checkbox>
-									<mat-error *ngIf="formGroup.get('value').get('allowAttachments').hasError('backendError')">{{formGroup.get('value').get('allowAttachments').getError('backendError').message}}</mat-error>
-								</h4>
+							<div class="col-12">
+								<div class="container">
+									<div class="row">
+										<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.EXTRA-OPTIONS' | translate}}</h3>
+										<div>
+											<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.ALLOW-ATTACHMENTS' | translate}}
+												<mat-checkbox [formControl]="formGroup.get('value').get('allowAttachments')"></mat-checkbox>
+												<mat-error *ngIf="formGroup.get('value').get('allowAttachments').hasError('backendError')">{{formGroup.get('value').get('allowAttachments').getError('backendError').message}}</mat-error>
+											</h4>
+										</div>
+									</div>
+								</div>
 							</div>
-							<div class="col-4">
-								<mat-form-field class="col-md-12">
-									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.PRIORITY-KEY' | translate}}</mat-label>
-									<input matInput [formControl]="formGroup.get('value').get('priorityKey')">
-									<mat-error *ngIf="formGroup.get('value').get('priorityKey').hasError('backendError')">{{formGroup.get('value').get('priorityKey').getError('backendError').message}}</mat-error>
-									<mat-error *ngIf="formGroup.get('value').get('priorityKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-								</mat-form-field>
-							</div>
-							<div class="col-4" >
-								<mat-form-field class="chip-list">
-									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CC' | translate}}</mat-label>
-									<mat-chip-grid #cc [formControl]="formGroup.get('value').get('cc')">
-									<mat-chip-row *ngFor="let field of ccValues"
-													(removed)="removeChipListValues('cc', field)"
-													[editable]="true"
-													(edited)="editChipListValues('cc', $event, field)">
-										{{field}}
-										<button matChipRemove>
-										<mat-icon>cancel</mat-icon>
-										</button>
-									</mat-chip-row>
-									<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}"
-											[matChipInputFor]="cc"
-											[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-											[matChipInputAddOnBlur]="true"
-											(matChipInputTokenEnd)="addChipListValues('cc',$event)"/>
-									</mat-chip-grid>
-									<mat-error *ngIf="formGroup.get('value').get('cc').hasError('backendError')">{{formGroup.get('value').get('cc').getError('backendError').message}}</mat-error>
-								</mat-form-field>
-							</div>
-							<div class="col-4">
-								<mat-form-field class="col-auto">
-									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CC-MODE' | translate}}</mat-label>
-									<mat-select name="ccMode" [formControl]="formGroup.get('value').get('ccMode')">
-										<mat-option *ngFor="let emailOverrideMode of emailOverrideModeEnum" [value]="emailOverrideMode">
-											{{enumUtils.toEmailOverrideModeString(emailOverrideMode)}}
-										</mat-option>
-									</mat-select>
-									<mat-error *ngIf="formGroup.get('value').get('ccMode').hasError('backendError')">{{formGroup.get('value').get('ccMode').getError('backendError').message}}</mat-error>
-									<mat-error *ngIf="formGroup.get('value').get('ccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-								</mat-form-field>
-							</div>
-							<div class="col-4" >
-								<mat-form-field class="chip-list">
-									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BCC' | translate}}</mat-label>
-									<mat-chip-grid #bcc [formControl]="formGroup.get('value').get('bcc')">
-									<mat-chip-row *ngFor="let field of bccValues"
-													(removed)="removeChipListValues('bcc', field)"
-													[editable]="true"
-													(edited)="editChipListValues('bcc', $event, field)">
-										{{field}}
-										<button matChipRemove>
-										<mat-icon>cancel</mat-icon>
-										</button>
-									</mat-chip-row>
-									<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}"
-											[matChipInputFor]="bcc"
-											[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-											[matChipInputAddOnBlur]="true"
-											(matChipInputTokenEnd)="addChipListValues('bcc',$event)"/>
-									</mat-chip-grid>
-									<mat-error *ngIf="formGroup.get('value').get('bcc').hasError('backendError')">{{formGroup.get('value').get('bcc').getError('backendError').message}}</mat-error>
-								</mat-form-field>
-							</div>
-							<div class="col-4">
-								<mat-form-field class="col-auto">
-									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BCC-MODE' | translate}}</mat-label>
-									<mat-select name="bccMode" [formControl]="formGroup.get('value').get('bccMode')">
-										<mat-option *ngFor="let emailOverrideMode of emailOverrideModeEnum" [value]="emailOverrideMode">
-											{{enumUtils.toEmailOverrideModeString(emailOverrideMode)}}
-										</mat-option>
-									</mat-select>
-									<mat-error *ngIf="formGroup.get('value').get('bccMode').hasError('backendError')">{{formGroup.get('value').get('bccMode').getError('backendError').message}}</mat-error>
-									<mat-error *ngIf="formGroup.get('value').get('bccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-								</mat-form-field>
-							</div>
-							<div class="col-4" >
-								<mat-form-field class="chip-list">
-									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.EXTRA-DATA-KEYS' | translate}}</mat-label>
-									<mat-chip-grid #extraDataKeys [formControl]="formGroup.get('value').get('extraDataKeys')">
-									<mat-chip-row *ngFor="let field of extraDataKeys"
-													(removed)="removeChipListValues('extraDataKeys', field)"
-													[editable]="true"
-													(edited)="editChipListValues('extraDataKeys', $event, field)">
-										{{field}}
-										<button matChipRemove>
-										<mat-icon>cancel</mat-icon>
-										</button>
-									</mat-chip-row>
-									<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}"
-											[matChipInputFor]="extraDataKeys"
-											[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-											[matChipInputAddOnBlur]="true"
-											(matChipInputTokenEnd)="addChipListValues('extraDataKeys',$event)"/>
-									</mat-chip-grid>
-									<mat-error *ngIf="formGroup.get('value').get('extraDataKeys').hasError('backendError')">{{formGroup.get('value').get('extraDataKeys').getError('backendError').message}}</mat-error>
-								</mat-form-field>
+						</div>
+						<div class="row">
+							<div class="col-12">
+								<div class="container">
+									<div class="row">
+										<div class="col-12 col-lg-4">
+											<mat-form-field class="w-100">
+												<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.PRIORITY-KEY' | translate}}</mat-label>
+												<input matInput [formControl]="formGroup.get('value').get('priorityKey')">
+												<mat-error *ngIf="formGroup.get('value').get('priorityKey').hasError('backendError')">{{formGroup.get('value').get('priorityKey').getError('backendError').message}}</mat-error>
+												<mat-error *ngIf="formGroup.get('value').get('priorityKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+											</mat-form-field>
+										</div>
+										<div class="col-12 col-lg-4">
+											<mat-form-field class="w-100 chip-list">
+												<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CC' | translate}}</mat-label>
+												<mat-chip-grid #cc [formControl]="formGroup.get('value').get('cc')">
+												<mat-chip-row *ngFor="let field of ccValues"
+																(removed)="removeChipListValues('cc', field)"
+																[editable]="true"
+																(edited)="editChipListValues('cc', $event, field)">
+													{{field}}
+													<button matChipRemove>
+													<mat-icon>cancel</mat-icon>
+													</button>
+												</mat-chip-row>
+												<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}"
+														[matChipInputFor]="cc"
+														[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+														[matChipInputAddOnBlur]="true"
+														(matChipInputTokenEnd)="addChipListValues('cc',$event)"/>
+												</mat-chip-grid>
+												<mat-error *ngIf="formGroup.get('value').get('cc').hasError('backendError')">{{formGroup.get('value').get('cc').getError('backendError').message}}</mat-error>
+											</mat-form-field>
+										</div>
+										<div class="col-12 col-lg-4">
+											<mat-form-field class="w-100">
+												<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CC-MODE' | translate}}</mat-label>
+												<mat-select name="ccMode" [formControl]="formGroup.get('value').get('ccMode')">
+													<mat-option *ngFor="let emailOverrideMode of emailOverrideModeEnum" [value]="emailOverrideMode">
+														{{enumUtils.toEmailOverrideModeString(emailOverrideMode)}}
+													</mat-option>
+												</mat-select>
+												<mat-error *ngIf="formGroup.get('value').get('ccMode').hasError('backendError')">{{formGroup.get('value').get('ccMode').getError('backendError').message}}</mat-error>
+												<mat-error *ngIf="formGroup.get('value').get('ccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+											</mat-form-field>
+										</div>
+										<div class="col-12 col-lg-4">
+											<mat-form-field class="w-100 chip-list">
+												<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BCC' | translate}}</mat-label>
+												<mat-chip-grid #bcc [formControl]="formGroup.get('value').get('bcc')">
+												<mat-chip-row *ngFor="let field of bccValues"
+																(removed)="removeChipListValues('bcc', field)"
+																[editable]="true"
+																(edited)="editChipListValues('bcc', $event, field)">
+													{{field}}
+													<button matChipRemove>
+													<mat-icon>cancel</mat-icon>
+													</button>
+												</mat-chip-row>
+												<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}"
+														[matChipInputFor]="bcc"
+														[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+														[matChipInputAddOnBlur]="true"
+														(matChipInputTokenEnd)="addChipListValues('bcc',$event)"/>
+												</mat-chip-grid>
+												<mat-error *ngIf="formGroup.get('value').get('bcc').hasError('backendError')">{{formGroup.get('value').get('bcc').getError('backendError').message}}</mat-error>
+											</mat-form-field>
+										</div>
+										<div class="col-12 col-lg-4">
+											<mat-form-field class="w-100">
+												<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BCC-MODE' | translate}}</mat-label>
+												<mat-select name="bccMode" [formControl]="formGroup.get('value').get('bccMode')">
+													<mat-option *ngFor="let emailOverrideMode of emailOverrideModeEnum" [value]="emailOverrideMode">
+														{{enumUtils.toEmailOverrideModeString(emailOverrideMode)}}
+													</mat-option>
+												</mat-select>
+												<mat-error *ngIf="formGroup.get('value').get('bccMode').hasError('backendError')">{{formGroup.get('value').get('bccMode').getError('backendError').message}}</mat-error>
+												<mat-error *ngIf="formGroup.get('value').get('bccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+											</mat-form-field>
+										</div>
+										<div class="col-12 col-lg-4">
+											<mat-form-field class="w-100 chip-list">
+												<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.EXTRA-DATA-KEYS' | translate}}</mat-label>
+												<mat-chip-grid #extraDataKeys [formControl]="formGroup.get('value').get('extraDataKeys')">
+												<mat-chip-row *ngFor="let field of extraDataKeys"
+																(removed)="removeChipListValues('extraDataKeys', field)"
+																[editable]="true"
+																(edited)="editChipListValues('extraDataKeys', $event, field)">
+													{{field}}
+													<button matChipRemove>
+													<mat-icon>cancel</mat-icon>
+													</button>
+												</mat-chip-row>
+												<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}"
+														[matChipInputFor]="extraDataKeys"
+														[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+														[matChipInputAddOnBlur]="true"
+														(matChipInputTokenEnd)="addChipListValues('extraDataKeys',$event)"/>
+												</mat-chip-grid>
+												<mat-error *ngIf="formGroup.get('value').get('extraDataKeys').hasError('backendError')">{{formGroup.get('value').get('extraDataKeys').getError('backendError').message}}</mat-error>
+											</mat-form-field>
+										</div>
+									</div>
+								</div>
 							</div>
 						</div>
 					</mat-card-content>