From eb146b21c74eaf1da23379fc7fb1f05f54c7f60b Mon Sep 17 00:00:00 2001
From: Diamantis Tziotzios <tziotzios.diamantis@nbg.gr>
Date: Fri, 19 Apr 2024 10:13:02 +0300
Subject: [PATCH] no message

---
 .../multiple-auto-complete.component.html     | 140 ++++++++++--------
 .../multiple-auto-complete.component.scss     |   8 +-
 2 files changed, 79 insertions(+), 69 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 29608db43..b69c9919d 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
@@ -1,76 +1,86 @@
 <div class="row multiple-auto-complete" ng-form>
-	<mat-chip-grid #chipList ngDefaultControl class="chip-list">
-		<ng-container *ngIf="value as values;">
-			<mat-chip-row *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable" [ngClass]="computeClass(value)" class="chip-row">
-				<ng-container *ngIf="getSelectedItem(value) as selectedItem;">
-					<ng-template #cellTemplate *ngIf="_selectedValueTemplate(selectedItem)" [ngTemplateOutlet]="_selectedValueTemplate(selectedItem)" [ngTemplateOutletContext]="{
+	<div class="col">
+		<div class="row">
+			<div class="col-12">
+				<mat-chip-grid #chipList ngDefaultControl class="chip-list">
+					<ng-container *ngIf="value as values;">
+						<mat-chip-row *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable" [ngClass]="computeClass(value)" class="chip-row">
+							<ng-container *ngIf="getSelectedItem(value) as selectedItem;">
+								<ng-template #cellTemplate *ngIf="_selectedValueTemplate(selectedItem)" [ngTemplateOutlet]="_selectedValueTemplate(selectedItem)" [ngTemplateOutletContext]="{
 							item: selectedItem
 						}" />
-					<span *ngIf="!_selectedValueTemplate(selectedItem)" class="chip-text" [title]="_displayFn(selectedItem)">{{_displayFn(selectedItem)}}</span>
-				</ng-container>
-				<button matChipRemove *ngIf="!disabled && removable" (click)="_removeSelectedItem(getSelectedItem(value), $event)">
-					<mat-icon>cancel</mat-icon>
-				</button>
-			</mat-chip-row>
-		</ng-container>
-	</mat-chip-grid>
-	<input matInput #autocompleteInput class="col" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($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>
-	<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
-		<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)">
-					<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
-					<ng-container *ngIf="_optionComponent(item)">
-						<ng-container *ngComponentOutlet="_optionComponent(item); inputs: { item };" />
+								<span *ngIf="!_selectedValueTemplate(selectedItem)" class="chip-text" [title]="_displayFn(selectedItem)">{{_displayFn(selectedItem)}}</span>
+							</ng-container>
+							<button matChipRemove *ngIf="!disabled && removable" (click)="_removeSelectedItem(getSelectedItem(value), $event)">
+								<mat-icon>cancel</mat-icon>
+							</button>
+						</mat-chip-row>
 					</ng-container>
-					<ng-template #cellTemplate *ngIf="_optionTemplate(item) && !_optionComponent(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
+				</mat-chip-grid>
+			</div>
+			<div class="col-12">
+				<input matInput #autocompleteInput [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
+			</div>
+			<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
+				<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)">
+							<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
+							<ng-container *ngIf="_optionComponent(item)">
+								<ng-container *ngComponentOutlet="_optionComponent(item); inputs: { item };" />
+							</ng-container>
+							<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="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>
+									</div>
+									<div *ngIf="_subtitleFn(item)" class="subtitle-fn">
+										<div class="subtitle-fn-inner">
+											<small [innerHTML]="_subtitleFn(item)" class="subtitle-text"></small>
+										</div>
+									</div>
 								</div>
+								<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
 							</div>
-							<div *ngIf="_subtitleFn(item)" class="subtitle-fn">
-								<div class="subtitle-fn-inner">
-									<small [innerHTML]="_subtitleFn(item)" class="subtitle-text"></small>
-								</div>
-							</div>
-						</div>
-						<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
-					</div>
-				</mat-option>
-			</mat-optgroup>
-		</span>
-		<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)">
-						<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
-						<ng-container *ngIf="_optionComponent(item)">
-							<ng-container *ngComponentOutlet="_optionComponent(item); inputs: { item };" />
-						</ng-container>
-						<ng-template #cellTemplate *ngIf="_optionTemplate(item) && !_optionComponent(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
+						</mat-option>
+					</mat-optgroup>
+				</span>
+				<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)">
+								<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
+								<ng-container *ngIf="_optionComponent(item)">
+									<ng-container *ngComponentOutlet="_optionComponent(item); inputs: { item };" />
+								</ng-container>
+								<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>
-					</mat-option>
-				</ng-container>
-				<ng-template #noItems>
-					<mat-option disabled="true">No results found!</mat-option>
-				</ng-template>
-			</div>
-			<ng-template #loading>
-				<mat-option disabled="true">loading...</mat-option>
-			</ng-template>
-		</span>
-	</mat-autocomplete>
+								<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>
+							</mat-option>
+						</ng-container>
+						<ng-template #noItems>
+							<mat-option disabled="true">No results found!</mat-option>
+						</ng-template>
+					</div>
+					<ng-template #loading>
+						<mat-option disabled="true">loading...</mat-option>
+					</ng-template>
+				</span>
+			</mat-autocomplete>
+		</div>
+	</div>
+	<div class="col-auto d-flex">
+		<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>
+	</div>
 </div>
\ No newline at end of file
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 1d84384a4..552405597 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
@@ -33,10 +33,10 @@
 }
 
 
-.chip-list {
-	max-width: calc(100% - 30px);
-	padding-left: 0.8em;
-}
+// .chip-list {
+// 	max-width: calc(100% - 30px);
+// 	padding-left: 0.8em;
+// }
 
 .title-subtitle-fn {
 	height: auto;