[Library | Trunk]: Input component: Dropdown under search input for chips.
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60489 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
467d1a4ff1
commit
35ccd215a1
|
@ -96,12 +96,13 @@ export interface Option {
|
||||||
</mat-chip>
|
</mat-chip>
|
||||||
<div class="uk-width-expand uk-position-relative chip-input">
|
<div class="uk-width-expand uk-position-relative chip-input">
|
||||||
<input #searchInput class="uk-width-1-1" [formControl]="searchControl" [matAutocomplete]="auto"
|
<input #searchInput class="uk-width-1-1" [formControl]="searchControl" [matAutocomplete]="auto"
|
||||||
[matChipInputFor]="chipList"
|
[matChipInputFor]="chipList" [matAutocompleteConnectedTo]="origin"
|
||||||
[matChipInputAddOnBlur]="addExtraChips && searchControl.value"
|
[matChipInputAddOnBlur]="addExtraChips && searchControl.value"
|
||||||
(matChipInputTokenEnd)="add($event)">
|
(matChipInputTokenEnd)="add($event)">
|
||||||
<div *ngIf="placeholder && !searchControl.value" class="placeholder uk-width-1-1"
|
<div *ngIf="placeholder && !searchControl.value" class="placeholder uk-width-1-1"
|
||||||
(click)="searchInput.focus()">{{placeholder}}</div>
|
(click)="searchInput.focus()">{{placeholder}}</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="uk-width-1-1 uk-invisible" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div>
|
||||||
</mat-chip-list>
|
</mat-chip-list>
|
||||||
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [class]="panelClass" [panelWidth]="panelWidth">
|
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [class]="panelClass" [panelWidth]="panelWidth">
|
||||||
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
|
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
|
||||||
|
@ -149,6 +150,7 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
|
||||||
@Input() smallChip: boolean = false;
|
@Input() smallChip: boolean = false;
|
||||||
@Input() panelWidth: number = 300;
|
@Input() panelWidth: number = 300;
|
||||||
@Input() panelClass: string = null;
|
@Input() panelClass: string = null;
|
||||||
|
@Input() showOptionsOnEmpty: boolean = true;
|
||||||
@Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
|
@Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
|
||||||
/** Internal basic information */
|
/** Internal basic information */
|
||||||
public required: boolean = false;
|
public required: boolean = false;
|
||||||
|
@ -250,7 +252,7 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
|
||||||
|
|
||||||
private filter(value: string): Option[] {
|
private filter(value: string): Option[] {
|
||||||
let options = this.options.filter(option => !this.formAsArray.value.find(value => option.value === value));
|
let options = this.options.filter(option => !this.formAsArray.value.find(value => option.value === value));
|
||||||
if (!value || value.length == 0) {
|
if ((!value || value.length == 0) && !this.showOptionsOnEmpty) {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
const filterValue = value.toString().toLowerCase();
|
const filterValue = value.toString().toLowerCase();
|
||||||
|
|
Loading…
Reference in New Issue