From baa49851b4d2315c0270d2aed58cf91425bc6ae7 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Thu, 16 May 2024 13:29:14 +0300
Subject: [PATCH] styling fixes on single and multiple autocomplete

---
 .../multiple-auto-complete.component.html     | 42 +++++++++++--------
 .../multiple-auto-complete.component.scss     |  5 +++
 .../single-auto-complete.component.html       | 32 ++++++++------
 .../single-auto-complete.component.scss       |  5 +++
 4 files changed, 55 insertions(+), 29 deletions(-)

diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
index 5d33b0ad9..6a094c61a 100644
--- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
+++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
@@ -25,7 +25,7 @@
 				<div (mouseover)="isMouseOverPanel=true" (mouseout)="isMouseOverPanel=false">
 					<span *ngIf="_groupedItems">
 						<mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title">
-							<mat-option *ngFor="let item of group.items" [value]="item" class="option" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item) && !_optionComponent(item)" (optionActivated)="clickedOnPanel()">
+							<mat-option *ngFor="let item of group.items" [value]="item" class="option autocomplete-option" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item) && !_optionComponent(item)" (optionActivated)="clickedOnPanel()">
 								<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
 								<ng-container *ngIf="_optionComponent(item)">
 									<ng-container *ngComponentOutlet="_optionComponent(item); inputs: { item };" />
@@ -33,20 +33,24 @@
 								<ng-template #cellTemplate *ngIf="_optionTemplate(item) && !_optionComponent(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
 								item: item
 							}"></ng-template>
-								<div *ngIf="!_optionTemplate(item)" class="d-flex">
-									<div class="title-subtitle-fn">
-										<div class="title-fn">
-											<div class="title-fn-inner">
-												<span *ngIf="!_optionTemplate(item)" class="title-text">{{_titleFn(item)}}</span>
+								<div *ngIf="!_optionTemplate(item)" class="row mt-2 mb-2">
+									<div class="col">
+										<div class="title-subtitle-fn">
+											<div class="title-fn">
+												<div class="title-fn-inner">
+													<span *ngIf="!_optionTemplate(item)" class="title-text">{{_titleFn(item)}}</span>
+												</div>
 											</div>
-										</div>
-										<div *ngIf="_subtitleFn(item)" class="subtitle-fn">
-											<div class="subtitle-fn-inner">
-												<small [innerHTML]="_subtitleFn(item)" class="subtitle-text"></small>
+											<div *ngIf="_subtitleFn(item)" class="subtitle-fn">
+												<div class="subtitle-fn-inner">
+													<small [innerHTML]="_subtitleFn(item)" class="subtitle-text"></small>
+												</div>
 											</div>
 										</div>
 									</div>
-									<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
+									<div class="col-auto align-self-center">
+										<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
+									</div>
 								</div>
 							</mat-option>
 						</mat-optgroup>
@@ -54,7 +58,7 @@
 					<span *ngIf="!_groupedItems">
 						<div *ngIf="_items | async as autocompleteItems; else loading">
 							<ng-container *ngIf="autocompleteItems.length; else noItems">
-								<mat-option *ngFor="let item of autocompleteItems" class="option" [value]="item" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item) && !_optionComponent(item)" (optionActivated)="clickedOnPanel()">
+								<mat-option *ngFor="let item of autocompleteItems" class="option autocomplete-option" [value]="item" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item) && !_optionComponent(item)" (optionActivated)="clickedOnPanel()">
 									<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
 									<ng-container *ngIf="_optionComponent(item)">
 										<ng-container *ngComponentOutlet="_optionComponent(item); inputs: { item };" />
@@ -62,11 +66,15 @@
 									<ng-template #cellTemplate *ngIf="_optionTemplate(item) && !_optionComponent(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
 											item: item
 										}"></ng-template>
-									<div *ngIf="!_optionTemplate(item) && !_optionComponent(item)">
-										<span class="title-text">{{_titleFn(item)}}</span>
-										<br *ngIf="_subtitleFn(item)">
-										<small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small>
-										<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
+									<div *ngIf="!_optionTemplate(item) && !_optionComponent(item)" class="row mt-2 mb-2">
+										<div class="col">
+											<span class="title-text">{{_titleFn(item)}}</span>
+											<br *ngIf="_subtitleFn(item)">
+											<small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small>
+										</div>
+										<div class="col-auto align-self-center">
+											<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
+										</div>
 									</div>
 								</mat-option>
 							</ng-container>
diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
index 552405597..0d992a16d 100644
--- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
+++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
@@ -79,6 +79,11 @@
 	line-clamp: 1;
 }
 
+::ng-deep .autocomplete-option > .mdc-list-item__primary-text {
+	margin: 0 !important;
+	width: 100%;
+}
+
 .option {
 	line-height: 1rem;
 	//   height: 3em;
diff --git a/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.html b/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.html
index 43d806668..0b1bb792b 100644
--- a/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.html
+++ b/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.html
@@ -7,16 +7,20 @@
 		<div (mouseover)="isMouseOverPanel=true" (mouseout)="isMouseOverPanel=false">
 			<span *ngIf="_groupedItems">
 				<mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title">
-					<mat-option *ngFor="let item of group.items" [value]="item" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)">
+					<mat-option *ngFor="let item of group.items" [value]="item" class="autocomplete-option" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)">
 						<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
 						<ng-template #cellTemplate *ngIf="_optionTemplate(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
 								item: item
 							}"></ng-template>
-						<div *ngIf="!_optionTemplate(item)">
-							<span class="title-text">{{_titleFn(item)}}</span>
-							<br *ngIf="_subtitleFn(item)">
-							<small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small>
-							<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
+						<div *ngIf="!_optionTemplate(item)" class="row mt-2 mb-2">
+							<div class="col">
+								<span class="title-text">{{_titleFn(item)}}</span>
+								<br *ngIf="_subtitleFn(item)">
+								<small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small>
+							</div>
+							<div class="col-auto">
+								<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
+							</div>
 						</div>
 					</mat-option>
 				</mat-optgroup>
@@ -24,16 +28,20 @@
 			<span *ngIf="!_groupedItems">
 				<div *ngIf="_items | async as autocompleteItems; else loading">
 					<ng-container *ngIf="autocompleteItems.length; else noItems">
-						<mat-option *ngFor="let item of autocompleteItems" [value]="item" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)">
+						<mat-option *ngFor="let item of autocompleteItems" [value]="item" class="autocomplete-option" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)">
 							<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
 							<ng-template #cellTemplate *ngIf="_optionTemplate(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
 											item: item
 										}"></ng-template>
-							<div *ngIf="!_optionTemplate(item)">
-								<span *ngIf="!_optionTemplate(item)" class="title-text">{{_titleFn(item)}}</span>
-								<br *ngIf="_subtitleFn(item)">
-								<small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small>
-								<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
+							<div *ngIf="!_optionTemplate(item)" class="row mt-2 mb-2">
+								<div class="col">
+									<span *ngIf="!_optionTemplate(item)" class="title-text">{{_titleFn(item)}}</span>
+									<br *ngIf="_subtitleFn(item)">
+									<small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small>
+								</div>
+								<div class="col-auto  align-self-center">
+									<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
+								</div>
 							</div>
 						</mat-option>
 					</ng-container>
diff --git a/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss b/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss
index 1e9b9daf2..bbd8d278e 100644
--- a/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss
+++ b/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss
@@ -35,6 +35,11 @@
 	}
 }
 
+::ng-deep .autocomplete-option > .mdc-list-item__primary-text {
+	margin: 0 !important;
+	width: 100%;
+}
+
 .option-icon {
 	mat-icon {
 		margin: 0px 5px 0px 10px;