MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add no value selected in input.

This commit is contained in:
Konstantinos Triantafyllou 2022-06-08 14:19:40 +03:00
parent f3af762dab
commit ea324bfbef
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
sharedComponents/input/input.component.ts
View File

@ -49,7 +49,7 @@ declare var UIkit;
<div *ngIf="formControl" [id]="id"> <div *ngIf="formControl" [id]="id">
<div class="input-wrapper" [class.disabled]="formControl.disabled" [class.opened]="opened" <div class="input-wrapper" [class.disabled]="formControl.disabled" [class.opened]="opened"
[class.focused]="focused" [ngClass]="inputClass" [class.hint]="hint" [class.focused]="focused" [ngClass]="inputClass" [class.hint]="hint"
[class.active]="(formAsControl?.value || type === 'select' || formAsArray?.length > 0 || getLabel(formAsControl?.value)) && !focused" [class.active]="(formAsControl?.value || selectable || formAsArray?.length > 0 || getLabel(formAsControl?.value)) && !focused"
[class.danger]="(formControl.invalid && (formControl.touched || !!searchControl?.touched)) || (!!searchControl?.invalid && !!searchControl?.touched)"> [class.danger]="(formControl.invalid && (formControl.touched || !!searchControl?.touched)) || (!!searchControl?.invalid && !!searchControl?.touched)">
<div #inputBox class="input-box" [class.select]="selectable" click-outside-or-esc <div #inputBox class="input-box" [class.select]="selectable" click-outside-or-esc
[class.static]="placeholderInfo?.static" (clickOutside)="click($event)"> [class.static]="placeholderInfo?.static" (clickOutside)="click($event)">
@ -74,7 +74,7 @@ declare var UIkit;
class="input uk-text-truncate">{{getLabel(formControl.value)}}</div> class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
</ng-container> </ng-container>
<ng-container *ngIf="!placeholderInfo?.static"> <ng-container *ngIf="!placeholderInfo?.static">
<div *ngIf="!getLabel(formControl.value)" class="input uk-text-truncate">No value selected</div> <div *ngIf="!getLabel(formControl.value)" class="input uk-text-truncate">{{noValueSelected}}</div>
<div *ngIf="getLabel(formControl.value)" <div *ngIf="getLabel(formControl.value)"
class="input uk-text-truncate">{{getLabel(formControl.value)}}</div> class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
</ng-container> </ng-container>
@ -82,7 +82,11 @@ declare var UIkit;
<ng-template [ngIf]="type === 'autocomplete'"> <ng-template [ngIf]="type === 'autocomplete'">
<input *ngIf="focused" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint" <input *ngIf="focused" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
#searchInput class="input" [formControl]="searchControl" [class.uk-text-truncate]="!focused"> #searchInput class="input" [formControl]="searchControl" [class.uk-text-truncate]="!focused">
<div *ngIf="!focused" class="input uk-text-truncate">{{getLabel(formAsControl.value)}}</div> <div *ngIf="!focused && !selectable" class="input uk-text-truncate">{{getLabel(formAsControl.value)}}</div>
<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>
</ng-container>
</ng-template> </ng-template>
<ng-template [ngIf]="type === 'autocomplete_soft'"> <ng-template [ngIf]="type === 'autocomplete_soft'">
<input #input class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint" <input #input class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
@ -112,12 +116,12 @@ declare var UIkit;
</div> </div>
</ng-template> </ng-template>
<div <div
*ngIf="(formControl.disabled && disabledIcon) || icon || (type === 'select' && selectArrow) || type === 'autocomplete'" *ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete'"
class="uk-margin-left icon"> class="uk-margin-left icon">
<icon *ngIf="formControl.disabled && disabledIcon" [name]="disabledIcon" [flex]="true"></icon> <icon *ngIf="formControl.disabled && disabledIcon" [name]="disabledIcon" [flex]="true"></icon>
<ng-template [ngIf]="formControl.enabled"> <ng-template [ngIf]="formControl.enabled">
<icon *ngIf="!searchControl?.value && icon" [name]="icon" [flex]="true"></icon> <icon *ngIf="!searchControl?.value && icon" [name]="icon" [flex]="true"></icon>
<icon *ngIf="!icon && type === 'select' && selectArrow" [name]="selectArrow" [flex]="true"></icon> <icon *ngIf="!icon && selectable && selectArrow" [name]="selectArrow" [flex]="true"></icon>
<button *ngIf="!!searchControl?.value && type === 'autocomplete'" class="uk-close uk-icon" <button *ngIf="!!searchControl?.value && type === 'autocomplete'" class="uk-close uk-icon"
(click)="resetSearch($event)"> (click)="resetSearch($event)">
<icon [flex]="true" name="close"></icon> <icon [flex]="true" name="close"></icon>
@ -206,6 +210,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@Input() selectArrow: string = 'arrow_drop_down'; @Input() selectArrow: string = 'arrow_drop_down';
@Input() selectedIndex: number = 0; @Input() selectedIndex: number = 0;
@Input() selectable: boolean = false; @Input() selectable: boolean = false;
@Input() noValueSelected: string = 'No option selected';
/** Chips && Autocomplete*/ /** Chips && Autocomplete*/
public filteredOptions: Option[] = []; public filteredOptions: Option[] = [];
public searchControl: FormControl; public searchControl: FormControl;
@ -481,7 +486,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.searchControl.setValue(''); this.searchControl.setValue('');
} }
getLabel(value: any) { getLabel(value: any): string {
let option = this.optionsArray.find(option => HelperFunctions.equals(option.value, value)); let option = this.optionsArray.find(option => HelperFunctions.equals(option.value, value));
return (option) ? option.label : (value); return (option) ? option.label : (value);
} }