[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
This commit is contained in:
parent
747556293f
commit
f5d4a58b05
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue