diff --git a/claims/claim-utils/displayClaims/displayClaims.component.html b/claims/claim-utils/displayClaims/displayClaims.component.html
index 0082a945..8eba3930 100644
--- a/claims/claim-utils/displayClaims/displayClaims.component.html
+++ b/claims/claim-utils/displayClaims/displayClaims.component.html
@@ -86,7 +86,7 @@
diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts
index 3d95f75f..bf6b2f09 100644
--- a/sharedComponents/input/input.component.ts
+++ b/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">
+ [type]="password?'password':'text'" [formControl]="formAsControl"
+ [class.uk-text-truncate]="!focused">
- {{noValueSelected}}
+ {{noValueSelected}}
{{getLabel(formControl.value)}}
@@ -86,12 +91,15 @@ declare var UIkit;
- {{placeholderInfo?.static?placeholderInfo.label:getLabel(formAsControl.value)}}
- {{getLabel(formAsControl.value)}}
+ {{placeholderInfo?.static ? placeholderInfo.label : getLabel(formAsControl.value)}}
+ {{getLabel(formAsControl.value)}}
-
+
{{noValueSelected}}
- {{getLabel(formControl.value)}}
+ {{getLabel(formControl.value)}}
@@ -99,18 +107,21 @@ declare var UIkit;
[formControl]="formAsControl" [class.uk-text-truncate]="!focused">
-
-
visibleChips - 1"
+
+
visibleChips - 1"
class="chip">
{{getLabel(chip.value)}}
-
-
-
@@ -131,7 +143,8 @@ declare var UIkit;
(click)="resetSearch($event)">
-
@@ -146,10 +159,12 @@ declare var UIkit;
0 && opened" #optionBox
uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
@@ -202,6 +217,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
/** Chips && Autocomplete*/
public filteredOptions: Option[] = [];
public searchControl: UntypedFormControl;
+ public activeElement: BehaviorSubject
= new BehaviorSubject(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 = new EventEmitter();
/** 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;
@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);