Project

General

Profile

« Previous | Next » 

Revision 60448

Added by Konstantinos Triantafyllou almost 4 years ago

[Library | Trunk]: Input component: Add autocomplete panel property, smalls chips and fix textarea padding.

View differences:

modules/uoa-services-library/trunk/ng-openaire-library/src/app/sharedComponents/input/input.component.ts
54 54 
          </div>
55 55 
        </ng-template>
56 56 
        <ng-template [ngIf]="type === 'textarea'">
57 
          <div [ngClass]="inputClass"
57 
          <div [ngClass]="inputClass" class="uk-padding-remove-right"
58 58 
               [class.uk-form-danger]="formControl.invalid && formControl.touched"
59 59 
               [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':''">
60 60 
              <textarea class="uk-textarea uk-text-small"
......
89 89 
               [class.clickable]="formControl.enabled"
90 90 
               [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">
91 91 
            <mat-form-field class="uk-width-1-1">
92 
              <mat-chip-list #chipList aria-label="Page selection">
93 
                <mat-chip *ngFor="let chip of formAsArray.controls; let i=index"
94 
                          [removable]="removable">
95 
                  <span class="uk-width-expand uk-text-truncate">{{getLabel(chip.value)}}</span>
96 
                  <icon name="remove_circle" class="mat-chip-remove" (click)="removed(i)"></icon>
92 
              <mat-chip-list #chipList>
93 
                <mat-chip *ngFor="let chip of formAsArray.controls; let i=index" [selectable]="false"
94 
                          [removable]="removable" [attr.uk-tooltip]="getLabel(chip.value)">
95 
                  <span class="uk-width-expand uk-text-truncate" [class.uk-text-small]="smallChip">{{getLabel(chip.value)}}</span>
96 
                  <icon name="remove_circle" class="mat-chip-remove" [ratio]="smallChip?0.8:1" (click)="removed(i)"></icon>
97 97 
                </mat-chip>
98 98 
                <div class="uk-width-expand uk-position-relative uk-text-small chip-input">
99 99 
                  <input #searchInput class="uk-width-1-1" [formControl]="searchControl" [matAutocomplete]="auto"
......
104 104 
                       (click)="searchInput.focus()">{{placeholder}}</div>
105 105 
                </div>
106 106 
              </mat-chip-list>
107 
              <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
107 
              <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [class]="panelClass" [panelWidth]="panelWidth">
108 108 
                <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
109 109 
                  {{option.label}}
110 110 
                </mat-option>
......
147 147 
  /** Chip options */
148 148 
  @Input() removable: boolean = true;
149 149 
  @Input() addExtraChips: boolean = false;
150 
  @Input() smallChip: boolean = false;
151 
  @Input() panelWidth: number = 300;
152 
  @Input() panelClass: string = null;
150 153 
  @Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
151 154 
  /** Internal basic information */
152 155 
  public required: boolean = false;

Also available in: Unified diff