Commit a212f4e5 authored by Kristian Ntavidi's avatar Kristian Ntavidi
Browse files

Subtle border on invalid emails inputs (in invitation dialog)

* Mutli auto compolete component extended
parent 7ab5c560
......@@ -36,4 +36,6 @@ export interface MultipleAutoCompleteConfiguration {
autoSelectFirstOptionOnBlur?: boolean;
appendClassToItem?: {class: string, applyFunc: (item:any) => boolean}[];
}
<div class="row multiple-auto-complete" ngForm>
<mat-chip-list #chipList ngDefaultControl>
<ng-container *ngIf="value as values">
<mat-chip *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable">
<mat-chip *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable" [ngClass]="computeClass(value)">
<ng-container *ngIf="_selectedItems.get(stringify(value)) as selectedItem">
<ng-template #cellTemplate *ngIf="_selectedValueTemplate(selectedItem)" [ngTemplateOutlet]="_selectedValueTemplate(selectedItem)" [ngTemplateOutletContext]="{ item: selectedItem }"></ng-template>
<div *ngIf="!_selectedValueTemplate(selectedItem)">{{_displayFn(selectedItem)}}</div>
......
......@@ -365,6 +365,9 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
get popupItemActionIcon(): string {
return this.configuration.popupItemActionIcon != null ? this.configuration.popupItemActionIcon : '';
}
get appendClassToItem(): {class: string, applyFunc: (item: any) => boolean}[]{
return this.configuration.appendClassToItem !== null ? this.configuration.appendClassToItem : null;
}
//Chip Functions
_addItem(event: MatChipInputEvent): void {
......@@ -400,4 +403,19 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
if (event != null) { event.stopPropagation(); }
this.optionActionClicked.emit(item);
}
private readonly empyObj = {};
computeClass(value: any){
if(!(this.appendClassToItem && this.appendClassToItem.length)){
return this.empyObj;
}
const classes = this.appendClassToItem.filter(e=> e.applyFunc(value));
return classes.reduce((r, current) => {
r[current.class] = true;
return r;
} , {});
}
}
......@@ -121,3 +121,15 @@
background: #129d99;
color: #ffffff;
}
@keyframes blink{
0% {border: 1px solid rgba(255, 0, 0, 0.2);}
50% {border: 1px solid rgba(255, 0, 0, 0.5);}
100% {border: 1px solid rgba(255, 0, 0, 0.2);}
}
:host ::ng-deep .invalid-email{
border: 1px solid red;
// animation: blink 1.4s infinite;
// animation-fill-mode: both;
}
......@@ -69,7 +69,13 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
const result = typeof(item) === 'string' ? item : item.email;
return result;
},
autoSelectFirstOptionOnBlur: true
autoSelectFirstOptionOnBlur: true,
appendClassToItem: [{class: 'invalid-email', applyFunc: (item)=> {
const val = typeof(item) === 'string'? item : item.email;
const regexp = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
return !regexp.test(val);
}
}]
};
add(event: MatChipInputEvent): void {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment