Claims: Fix color of icon in cards. Input: Add noWrap for chips in order to show them in a row. Add extendEnter Input in order to extend enter event.

claims/claim-utils/displayClaims/displayClaims.component.html

@@ -86,7 +86,7 @@
                   </div>
                   <div class="uk-visible@m">
                     <div class="claim-divider">
-                      <icon class="uk-position-center uk-background-default" name="link" customClass="uk-text-primary" ratio="2" [flex]="true"></icon>
+                      <icon class="uk-position-center" name="link" customClass="uk-text-primary" ratio="2" [flex]="true"></icon>
                     </div>
                   </div>
                   <div class="uk-width-1-2@m uk-width-1-1 uk-flex uk-flex-column uk-flex-center">

sharedComponents/input/input.component.ts

@@ -10,15 +10,18 @@ import {
   OnDestroy,
   OnInit,
   Output,
+  QueryList,
   SimpleChanges,
-  ViewChild
+  ViewChild,
+  ViewChildren
 } from "@angular/core";
 import {AbstractControl, UntypedFormArray, UntypedFormControl, ValidatorFn} from "@angular/forms";
 import {HelperFunctions} from "../../utils/HelperFunctions.class";
-import {Subscription} from "rxjs";
+import {BehaviorSubject, Subscription} from "rxjs";
 import {EnvProperties} from "../../utils/properties/env-properties";
 import {properties} from "../../../../environments/environment";
 import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
+import {element} from "protractor";
 
 export type InputType = 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'autocomplete_soft' | 'textarea' | 'select' | 'chips';
 
@@ -63,7 +66,8 @@ declare var UIkit;
                [attr.uk-tooltip]="(tooltip && !focused && type !== 'chips' && type !== 'textarea' && (formControl.value || hint || placeholderInfo?.label))?('title: ' + (formControl.value ?getTooltip(formControl.value):(hint?hint:placeholderInfo?.label)) + '; delay: 500; pos: bottom-left'):null">
             <ng-template [ngIf]="type === 'text' || type === 'URL' || type === 'logoURL'">
               <input #input class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
-                     [type]="password?'password':'text'" [formControl]="formAsControl" [class.uk-text-truncate]="!focused">
+                     [type]="password?'password':'text'" [formControl]="formAsControl"
+                     [class.uk-text-truncate]="!focused">
             </ng-template>
             <ng-template [ngIf]="type === 'textarea'">
               <textarea #textArea class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
@@ -77,7 +81,8 @@ declare var UIkit;
                      class="input uk-width-expand uk-text-truncate">{{getLabel(formControl.value)}}</div>
               </ng-container>
               <ng-container *ngIf="!placeholderInfo?.static">
-                <div *ngIf="!getLabel(formControl.value)" class="input uk-width-expand uk-text-truncate">{{noValueSelected}}</div>
+                <div *ngIf="!getLabel(formControl.value)"
+                     class="input uk-width-expand uk-text-truncate">{{noValueSelected}}</div>
                 <div *ngIf="getLabel(formControl.value)"
                      class="input uk-width-expand uk-text-truncate">{{getLabel(formControl.value)}}</div>
               </ng-container>
@@ -86,12 +91,15 @@ declare var UIkit;
               <input *ngIf="focused" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
                      #searchInput class="input" [formControl]="searchControl" [class.uk-text-truncate]="!focused">
               <ng-container *ngIf="!focused && !selectable">
-                <div *ngIf="!getLabel(formControl.value)" class="input placeholder uk-text-truncate">{{placeholderInfo?.static?placeholderInfo.label:getLabel(formAsControl.value)}}</div>
+                <div *ngIf="!getLabel(formControl.value)"
-                <div *ngIf="getLabel(formControl.value)" class="input uk-text-truncate">{{getLabel(formAsControl.value)}}</div>
+                     class="input placeholder uk-text-truncate">{{placeholderInfo?.static ? placeholderInfo.label : getLabel(formAsControl.value)}}</div>
+                <div *ngIf="getLabel(formControl.value)"
+                     class="input uk-text-truncate">{{getLabel(formAsControl.value)}}</div>
               </ng-container>
-              <ng-container *ngIf="!focused && selectable" >
+              <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>
+                <div *ngIf="getLabel(formControl.value)"
+                     class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
               </ng-container>
             </ng-template>
             <ng-template [ngIf]="type === 'autocomplete_soft'">
@@ -99,18 +107,21 @@ declare var UIkit;
                      [formControl]="formAsControl" [class.uk-text-truncate]="!focused">
             </ng-template>
             <ng-template [ngIf]="type === 'chips'">
-              <div class="uk-grid uk-grid-small uk-grid-row-collapse uk-width-expand" uk-grid>
+              <div class="uk-grid uk-grid-small uk-grid-row-collapse uk-overflow-auto uk-width-expand"
-                <div *ngFor="let chip of formAsArray.controls; let i=index" [class.uk-hidden]="!focused && i > visibleChips - 1"
+                   [class.uk-flex-nowrap]="noWrap" [class.uk-overflow-auto]="noWrap" uk-grid>
+                <div *ngFor="let chip of formAsArray.controls; let i=index" #chip
+                     [class.uk-hidden]="!focused && i > visibleChips - 1"
                      class="chip">
                   <div class="uk-label uk-label-small uk-flex uk-flex-middle"
                        [attr.uk-tooltip]="(tooltip)?('title: ' + getLabel(chip.value) + '; delay: 500; pos: bottom-left'):null">
                     <span class="uk-text-truncate uk-width-expand">{{getLabel(chip.value)}}</span>
-                    <icon *ngIf="focused" (click)="remove(i, $event)" class="uk-link-text uk-margin-small-left clickable" [flex]="true"
+                    <icon *ngIf="focused" (click)="remove(i, $event)"
+                          class="uk-link-text uk-margin-small-left clickable" [flex]="true"
                           name="close" ratio="0.7"></icon>
                   </div>
                 </div>
-                <div *ngIf="searchControl && (focused || formAsArray.length === 0)"
+                <div *ngIf="searchControl && (focused || formAsArray.length === 0)" #chip
-                     class="uk-width-small uk-flex uk-flex-column uk-flex-center">
+                     class="uk-width-expand search-input uk-flex uk-flex-column uk-flex-center">
                   <input #searchInput class="input" [class.search]="searchControl.value"
                          [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
                          [formControl]="searchControl" [class.uk-text-truncate]="!focused">
@@ -121,7 +132,8 @@ declare var UIkit;
                 </div>
               </div>
             </ng-template>
-            <div *ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete' || searchable"
+            <div
+                *ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete' || searchable"
                 class="uk-margin-small-left icon">
               <icon *ngIf="formControl.disabled && disabledIcon" [name]="disabledIcon" [flex]="true"></icon>
               <ng-template [ngIf]="formControl.enabled">
@@ -131,7 +143,8 @@ declare var UIkit;
                         (click)="resetSearch($event)">
                   <icon [flex]="true" name="close"></icon>
                 </button>
-                <button *ngIf="!searchControl?.value && !!formControl?.value && (searchable || !selectable)" class="uk-close uk-icon" (click)="resetValue($event)">
+                <button *ngIf="!searchControl?.value && !!formControl?.value && (searchable || !selectable)"
+                        class="uk-close uk-icon" (click)="resetValue($event)">
                   <icon [flex]="true" name="close"></icon>
                 </button>
               </ng-template>
@@ -146,10 +159,12 @@ declare var UIkit;
       <div class="options uk-dropdown" *ngIf="filteredOptions && filteredOptions.length > 0 && opened" #optionBox
            uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
         <ul class="uk-nav uk-dropdown-nav">
-          <li *ngFor="let option of filteredOptions; let i=index" [class.uk-hidden]="option.hidden" [class.uk-active]="(formControl.value === option.value) || selectedIndex === i">
+          <li *ngFor="let option of filteredOptions; let i=index" [class.uk-hidden]="option.hidden"
+              [class.uk-active]="(formControl.value === option.value) || selectedIndex === i">
             <a (click)="selectOption(option, $event)"
                [class]="option.disabled ? 'uk-disabled uk-text-muted' : ''">
-              <span [attr.uk-tooltip]="(tooltip)?('title: ' + (option.tooltip ? option.tooltip : option.label) + '; delay: 500; pos:bottom-left'):null">{{option.label}}</span>
+              <span
+                  [attr.uk-tooltip]="(tooltip)?('title: ' + (option.tooltip ? option.tooltip : option.label) + '; delay: 500; pos:bottom-left'):null">{{option.label}}</span>
             </a>
           </li>
         </ul>
@@ -202,6 +217,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   /** Chips && Autocomplete*/
   public filteredOptions: Option[] = [];
   public searchControl: UntypedFormControl;
+  public activeElement: BehaviorSubject<ElementRef> = new BehaviorSubject<ElementRef>(null);
   /** Use modifier's class(es) to change view of your Input */
   @Input() inputClass: string = 'inner';
   /** Icon on the input */
@@ -211,6 +227,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   @Input() showOptionsOnEmpty: boolean = true;
   @Input() visibleChips: number = 1;
   @Input() separators: string[] = [];
+  @Input() noWrap: boolean = false;
+  @Input() visibleRows: number = -1;
+  @Input() extendEnter: () => void = null;
   @Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
   /** LogoUrl information */
   public secure: boolean = true;
@@ -228,13 +247,14 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   @ViewChild('inputBox') inputBox: ElementRef;
   @ViewChild('optionBox') optionBox: ElementRef;
   @ViewChild('searchInput') searchInput: ElementRef;
+  @ViewChildren('chip') chips: QueryList<ElementRef>;
   
   @Input()
   set placeholder(placeholder: string | Placeholder) {
     if (typeof placeholder === 'string') {
       this.placeholderInfo = {label: placeholder, static: false};
     } else {
-      if (placeholder.static && (this.type === 'autocomplete' || this.type === 'chips' || this.hint)) {
+      if (placeholder.static && (this.type === 'autocomplete' || this.hint)) {
         placeholder.static = false;
         console.debug('Static placeholder is not available in this type of input and if hint is available.');
       }
@@ -295,6 +315,34 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
     }
   }
   
+  @HostListener('window:keydown.arrowLeft', ['$event'])
+  arrowLeft(event: KeyboardEvent) {
+    if(this.focused) {
+      event.preventDefault();
+      if(this.activeElement.getValue()) {
+        let index = this.chips.toArray().indexOf(this.activeElement.getValue());
+        if(index > 0) {
+          this.activeElement.next(this.chips.get(index - 1));
+          return;
+        }
+      }
+    }
+  }
+  
+  @HostListener('window:keydown.arrowRight', ['$event'])
+  arrowRight(event: KeyboardEvent) {
+    if(this.focused) {
+      event.preventDefault();
+      if(this.activeElement.getValue()) {
+        let index = this.chips.toArray().indexOf(this.activeElement.getValue());
+        if(index < this.chips.length - 1) {
+          this.activeElement.next(this.chips.get(index + 1));
+          return;
+        }
+      }
+    }
+  }
+  
   @HostListener('window:keydown.enter', ['$event'])
   enter(event: KeyboardEvent) {
     if (this.opened && this.optionBox) {
@@ -307,11 +355,14 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
     } else {
       this.focus(false, event);
     }
+    if(this.extendEnter) {
+      this.extendEnter();
+    }
   }
   
   @HostListener('keydown', ['$event'])
   onKeyDown(event: KeyboardEvent) {
-    if (this.separators.includes(event.key)) {
+    if (this.separators.includes(event.key) || this.separators.includes(event.key.toLowerCase())) {
       event.preventDefault();
       this.add(event, true);
     }
@@ -337,6 +388,11 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
         this.formControl.disable();
       }
     }
+    this.activeElement.subscribe(element => {
+      if(element) {
+        element.nativeElement.scrollIntoView({behavior: 'smooth'});
+      }
+    })
   }
   
   ngAfterViewInit() {
@@ -499,6 +555,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       this.formAsArray.push(new UntypedFormControl(this.searchControl.value, this.validators));
       this.formAsArray.markAsDirty();
       this.searchControl.setValue('');
+      this.activeElement.next(this.chips.last);
     } else if(!this.focused) {
       this.searchControl.setValue('');
     }
@@ -527,6 +584,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
         this.textArea.nativeElement.focus();
       } else if (this.searchInput) {
         this.searchInput.nativeElement.focus();
+        this.activeElement.next(this.chips.last);
       }
       if (this.selectArrow) {
         this.open(!this.opened);