From ea324bfbef3c74a0aea795b9ca5fca18586f7863 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Wed, 8 Jun 2022 14:19:40 +0300
Subject: [PATCH] Add no value selected in input.

---
 sharedComponents/input/input.component.ts | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts
index 930ee5fa..fe470718 100644
--- a/sharedComponents/input/input.component.ts
+++ b/sharedComponents/input/input.component.ts
@@ -49,7 +49,7 @@ declare var UIkit;
     <div *ngIf="formControl" [id]="id">
       <div class="input-wrapper" [class.disabled]="formControl.disabled" [class.opened]="opened"
            [class.focused]="focused" [ngClass]="inputClass" [class.hint]="hint"
-           [class.active]="(formAsControl?.value || type === 'select' || formAsArray?.length > 0 || getLabel(formAsControl?.value)) && !focused"
+           [class.active]="(formAsControl?.value || selectable || formAsArray?.length > 0 || getLabel(formAsControl?.value)) && !focused"
            [class.danger]="(formControl.invalid && (formControl.touched || !!searchControl?.touched)) || (!!searchControl?.invalid && !!searchControl?.touched)">
         <div #inputBox class="input-box" [class.select]="selectable" click-outside-or-esc
              [class.static]="placeholderInfo?.static" (clickOutside)="click($event)">
@@ -74,7 +74,7 @@ declare var UIkit;
                      class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
               </ng-container>
               <ng-container *ngIf="!placeholderInfo?.static">
-                <div *ngIf="!getLabel(formControl.value)" class="input uk-text-truncate">No value selected</div>
+                <div *ngIf="!getLabel(formControl.value)" class="input uk-text-truncate">{{noValueSelected}}</div>
                 <div *ngIf="getLabel(formControl.value)"
                      class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
               </ng-container>
@@ -82,7 +82,11 @@ declare var UIkit;
             <ng-template [ngIf]="type === 'autocomplete'">
               <input *ngIf="focused" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
                      #searchInput class="input" [formControl]="searchControl" [class.uk-text-truncate]="!focused">
-              <div *ngIf="!focused" class="input uk-text-truncate">{{getLabel(formAsControl.value)}}</div>
+              <div *ngIf="!focused && !selectable" class="input uk-text-truncate">{{getLabel(formAsControl.value)}}</div>
+              <ng-container *ngIf="!focused && selectable" >
+                <div *ngIf="!getLabel(formControl.value)" class="input uk-text-truncate">{{noValueSelected}}</div>
+                <div *ngIf="getLabel(formControl.value)" class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
+              </ng-container>
             </ng-template>
             <ng-template [ngIf]="type === 'autocomplete_soft'">
               <input #input class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
@@ -112,12 +116,12 @@ declare var UIkit;
               </div>
             </ng-template>
             <div
-                *ngIf="(formControl.disabled && disabledIcon) || icon || (type === 'select' && selectArrow) || type === 'autocomplete'"
+                *ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete'"
                 class="uk-margin-left icon">
               <icon *ngIf="formControl.disabled && disabledIcon" [name]="disabledIcon" [flex]="true"></icon>
               <ng-template [ngIf]="formControl.enabled">
                 <icon *ngIf="!searchControl?.value && icon" [name]="icon" [flex]="true"></icon>
-                <icon *ngIf="!icon && type === 'select' && selectArrow" [name]="selectArrow" [flex]="true"></icon>
+                <icon *ngIf="!icon && selectable && selectArrow" [name]="selectArrow" [flex]="true"></icon>
                 <button *ngIf="!!searchControl?.value && type === 'autocomplete'" class="uk-close  uk-icon"
                         (click)="resetSearch($event)">
                   <icon [flex]="true" name="close"></icon>
@@ -206,6 +210,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   @Input() selectArrow: string = 'arrow_drop_down';
   @Input() selectedIndex: number = 0;
   @Input() selectable: boolean = false;
+  @Input() noValueSelected: string = 'No option selected';
   /** Chips && Autocomplete*/
   public filteredOptions: Option[] = [];
   public searchControl: FormControl;
@@ -481,7 +486,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
     this.searchControl.setValue('');
   }
   
-  getLabel(value: any) {
+  getLabel(value: any): string {
     let option = this.optionsArray.find(option => HelperFunctions.equals(option.value, value));
     return (option) ? option.label : (value);
   }