src/app/shared/alert/alert.component.ts
encapsulation | ViewEncapsulation.None |
selector | alert |
styleUrls | alert.css |
templateUrl | alert.component.html |
Properties |
|
Methods |
|
Inputs |
Accessors |
constructor(cts: CustomtextService)
|
||||||
Defined in src/app/shared/alert/alert.component.ts:37
|
||||||
Parameters :
|
customtext | |
Type : string
|
|
Defined in src/app/shared/alert/alert.component.ts:18
|
level | |
Type : "error" | "warning" | "info" | "success"
|
|
Defined in src/app/shared/alert/alert.component.ts:20
|
replacements | |
Type : string[]
|
|
Defined in src/app/shared/alert/alert.component.ts:19
|
text | |
Type : string
|
|
Defined in src/app/shared/alert/alert.component.ts:17
|
getCustomtext |
getCustomtext()
|
Defined in src/app/shared/alert/alert.component.ts:69
|
Returns :
Observable<string>
|
ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
Defined in src/app/shared/alert/alert.component.ts:45
|
||||||
Parameters :
Returns :
void
|
Private subscribeCustomText |
subscribeCustomText()
|
Defined in src/app/shared/alert/alert.component.ts:57
|
Returns :
void
|
Private unsubscribeCustomText |
unsubscribeCustomText()
|
Defined in src/app/shared/alert/alert.component.ts:62
|
Returns :
void
|
Private _displayText$ |
Type : Subject<string>
|
Defined in src/app/shared/alert/alert.component.ts:36
|
Private customTextSubscription |
Type : Subscription
|
Defined in src/app/shared/alert/alert.component.ts:37
|
Private highlightTicks |
Default value : () => {...}
|
Defined in src/app/shared/alert/alert.component.ts:74
|
icons |
Type : object
|
Default value : {
error: 'error',
warning: 'warning',
info: 'info',
success: 'check_circle'
}
|
Defined in src/app/shared/alert/alert.component.ts:22
|
displayText$ |
getdisplayText$()
|
Defined in src/app/shared/alert/alert.component.ts:29
|
import {
Component, Input, OnChanges, SimpleChanges, ViewEncapsulation
} from '@angular/core';
import { CustomtextPipe, CustomtextService } from 'iqb-components';
import {
Observable, ReplaySubject, Subject, Subscription
} from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'alert',
templateUrl: 'alert.component.html',
styleUrls: ['alert.css'],
encapsulation: ViewEncapsulation.None
})
export class AlertComponent implements OnChanges {
@Input() text: string;
@Input() customtext: string;
@Input() replacements: string[];
@Input() level: 'error' | 'warning' | 'info' | 'success';
icons = {
error: 'error',
warning: 'warning',
info: 'info',
success: 'check_circle'
};
get displayText$(): Observable<string> {
return this._displayText$
.pipe(
map(text => this.highlightTicks(text || ''))
);
}
private _displayText$: Subject<string>;
private customTextSubscription: Subscription;
constructor(
private cts: CustomtextService
) {
this._displayText$ = new ReplaySubject<string>();
}
ngOnChanges(changes: SimpleChanges): void {
if (!this.customtext) {
this.unsubscribeCustomText();
if (changes.text) {
this._displayText$.next(this.text);
}
} else if (changes.customtext || changes.replacements) {
this.unsubscribeCustomText();
this.subscribeCustomText();
}
}
private subscribeCustomText(): void {
this.customTextSubscription = this.getCustomtext()
.subscribe(text => this._displayText$.next(text));
}
private unsubscribeCustomText(): void {
if (this.customTextSubscription) {
this.customTextSubscription.unsubscribe();
this.customTextSubscription = null;
}
}
getCustomtext(): Observable<string> {
return new CustomtextPipe(this.cts)
.transform(this.text, this.customtext, ...(this.replacements || []));
}
private highlightTicks = (text: string): string => text.replace(
/\u0060([^\u0060]+)\u0060/g,
(match, match2) => `<span class='highlight'>${match2}</span>`
);
}
<div class="alert">
<div class="vertical-align-middle">
<mat-icon class="alert-{{level}}">{{icons[level]}}</mat-icon>
<span [innerHTML]="displayText$ | async"></span>
</div>
</div>
alert.css
.alert {
margin-bottom: 2px;
}
.vertical-align-middle {
display: inline-flex;
vertical-align: middle;
align-items: center;
}
.alert-error {
color: #821324;
}
.alert-warning {
color: goldenrod;
}
.alert-info {
color: blue;
}
.alert-success {
color: green;
}
.highlight {
color: #003333;
font-style: italic;
}
mat-icon {
margin-right: 0.2em
}