Subtle border on invalid emails inputs (in invitation dialog)
* Mutli auto compolete component extended
This commit is contained in:
parent
7ab5c56072
commit
a212f4e5a1
|
@ -36,4 +36,6 @@ export interface MultipleAutoCompleteConfiguration {
|
||||||
|
|
||||||
autoSelectFirstOptionOnBlur?: boolean;
|
autoSelectFirstOptionOnBlur?: boolean;
|
||||||
|
|
||||||
|
appendClassToItem?: {class: string, applyFunc: (item:any) => boolean}[];
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="row multiple-auto-complete" ngForm>
|
<div class="row multiple-auto-complete" ngForm>
|
||||||
<mat-chip-list #chipList ngDefaultControl>
|
<mat-chip-list #chipList ngDefaultControl>
|
||||||
<ng-container *ngIf="value as values">
|
<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-container *ngIf="_selectedItems.get(stringify(value)) as selectedItem">
|
||||||
<ng-template #cellTemplate *ngIf="_selectedValueTemplate(selectedItem)" [ngTemplateOutlet]="_selectedValueTemplate(selectedItem)" [ngTemplateOutletContext]="{ item: selectedItem }"></ng-template>
|
<ng-template #cellTemplate *ngIf="_selectedValueTemplate(selectedItem)" [ngTemplateOutlet]="_selectedValueTemplate(selectedItem)" [ngTemplateOutletContext]="{ item: selectedItem }"></ng-template>
|
||||||
<div *ngIf="!_selectedValueTemplate(selectedItem)">{{_displayFn(selectedItem)}}</div>
|
<div *ngIf="!_selectedValueTemplate(selectedItem)">{{_displayFn(selectedItem)}}</div>
|
||||||
|
|
|
@ -365,6 +365,9 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
|
||||||
get popupItemActionIcon(): string {
|
get popupItemActionIcon(): string {
|
||||||
return this.configuration.popupItemActionIcon != null ? this.configuration.popupItemActionIcon : '';
|
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
|
//Chip Functions
|
||||||
_addItem(event: MatChipInputEvent): void {
|
_addItem(event: MatChipInputEvent): void {
|
||||||
|
@ -400,4 +403,19 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
|
||||||
if (event != null) { event.stopPropagation(); }
|
if (event != null) { event.stopPropagation(); }
|
||||||
this.optionActionClicked.emit(item);
|
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;
|
background: #129d99;
|
||||||
color: #ffffff;
|
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;
|
const result = typeof(item) === 'string' ? item : item.email;
|
||||||
return result;
|
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 {
|
add(event: MatChipInputEvent): void {
|
||||||
|
|
Loading…
Reference in New Issue