From f5d4a58b0510107040b9d8afe42327dc2a4b656f Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Wed, 17 Feb 2021 18:44:02 +0000
Subject: [PATCH] [Library | Trunk]: Input component: Add autocomplete panel
 property, smalls chips and fix textarea padding.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60448 d315682c-612b-4755-9ff5-7f18f6832af3
---
 sharedComponents/input/input.component.ts | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts
index 7db82a38..90a02dd1 100644
--- a/sharedComponents/input/input.component.ts
+++ b/sharedComponents/input/input.component.ts
@@ -54,7 +54,7 @@ export interface Option {
           </div>
         </ng-template>
         <ng-template [ngIf]="type === 'textarea'">
-          <div [ngClass]="inputClass"
+          <div [ngClass]="inputClass" class="uk-padding-remove-right"
                [class.uk-form-danger]="formControl.invalid && formControl.touched"
                [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':''">
               <textarea class="uk-textarea uk-text-small"
@@ -89,11 +89,11 @@ export interface Option {
                [class.clickable]="formControl.enabled"
                [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">
             <mat-form-field class="uk-width-1-1">
-              <mat-chip-list #chipList aria-label="Page selection">
-                <mat-chip *ngFor="let chip of formAsArray.controls; let i=index"
-                          [removable]="removable">
-                  <span class="uk-width-expand uk-text-truncate">{{getLabel(chip.value)}}</span>
-                  <icon name="remove_circle" class="mat-chip-remove" (click)="removed(i)"></icon>
+              <mat-chip-list #chipList>
+                <mat-chip *ngFor="let chip of formAsArray.controls; let i=index" [selectable]="false"
+                          [removable]="removable" [attr.uk-tooltip]="getLabel(chip.value)">
+                  <span class="uk-width-expand uk-text-truncate" [class.uk-text-small]="smallChip">{{getLabel(chip.value)}}</span>
+                  <icon name="remove_circle" class="mat-chip-remove" [ratio]="smallChip?0.8:1" (click)="removed(i)"></icon>
                 </mat-chip>
                 <div class="uk-width-expand uk-position-relative uk-text-small chip-input">
                   <input #searchInput class="uk-width-1-1" [formControl]="searchControl" [matAutocomplete]="auto"
@@ -104,7 +104,7 @@ export interface Option {
                        (click)="searchInput.focus()">{{placeholder}}</div>
                 </div>
               </mat-chip-list>
-              <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
+              <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [class]="panelClass" [panelWidth]="panelWidth">
                 <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
                   {{option.label}}
                 </mat-option>
@@ -147,6 +147,9 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
   /** Chip options */
   @Input() removable: boolean = true;
   @Input() addExtraChips: boolean = false;
+  @Input() smallChip: boolean = false;
+  @Input() panelWidth: number = 300;
+  @Input() panelClass: string = null;
   @Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
   /** Internal basic information */
   public required: boolean = false;