-
Notifications
You must be signed in to change notification settings - Fork 1.5k
/
toast.ts
132 lines (118 loc) · 3.36 KB
/
toast.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
import {
AfterContentInit,
Attribute,
Component,
ContentChild,
Directive,
EventEmitter,
Input,
OnChanges,
Output,
SimpleChanges,
TemplateRef,
ViewEncapsulation,
} from '@angular/core';
import {NgbToastConfig} from './toast-config';
/**
* This directive allows the usage of HTML markup or other directives
* inside of the toast's header.
*/
@Directive({selector: '[ngbToastHeader]'})
export class NgbToastHeader {
}
/**
* Toasts provide feedback messages as notifications to the user.
* Goal is to mimic the push notifications available both on mobile and desktop operating systems.
*/
@Component({
selector: 'ngb-toast',
exportAs: 'ngbToast',
encapsulation: ViewEncapsulation.None,
host: {
'role': 'alert',
'[attr.aria-live]': 'ariaLive',
'aria-atomic': 'true',
'[class.toast]': 'true',
'[class.show]': 'true',
'[class.autohide]': 'autohide',
},
template: `
<ng-template #headerTpl>
<strong class="mr-auto">{{header}}</strong>
</ng-template>
<ng-template [ngIf]="contentHeaderTpl || header">
<div class="toast-header">
<ng-template [ngTemplateOutlet]="contentHeaderTpl || headerTpl"></ng-template>
<button type="button" class="close" aria-label="Close" i18n-aria-label="@@ngb.toast.close-aria" (click)="hide()">
<span aria-hidden="true">×</span>
</button>
</div>
</ng-template>
<div class="toast-body">
<ng-content></ng-content>
</div>
`,
styleUrls: ['./toast.scss']
})
export class NgbToast implements AfterContentInit,
OnChanges {
private _timeoutID;
/**
* Delay after which the toast will hide (ms).
* default: `500` (ms) (inherited from NgbToastConfig)
*/
@Input() delay: number;
/**
* Auto hide the toast after a delay in ms.
* default: `true` (inherited from NgbToastConfig)
*/
@Input() autohide: boolean;
/**
* Text to be used as toast's header.
* Ignored if a ContentChild template is specified at the same time.
*/
@Input() header: string;
/**
* A template like `<ng-template ngbToastHeader></ng-template>` can be
* used in the projected content to allow markup usage.
*/
@ContentChild(NgbToastHeader, {read: TemplateRef, static: true}) contentHeaderTpl: TemplateRef<any>| null = null;
/**
* An event fired immediately when toast's `hide()` method has been called.
* It can only occur in 2 different scenarios:
* - `autohide` timeout fires
* - user clicks on a closing cross (×)
*
* Additionally this output is purely informative. The toast won't disappear. It's up to the user to take care of
* that.
*/
@Output('hide') hideOutput = new EventEmitter<void>();
constructor(@Attribute('aria-live') public ariaLive: string, config: NgbToastConfig) {
if (this.ariaLive == null) {
this.ariaLive = config.ariaLive;
}
this.delay = config.delay;
this.autohide = config.autohide;
}
ngAfterContentInit() {
if (this.autohide) {
this._timeoutID = setTimeout(() => this.hide(), this.delay);
}
}
ngOnChanges(changes: SimpleChanges) {
if ('autohide' in changes) {
this._clearTimeout();
this.ngAfterContentInit();
}
}
hide() {
this._clearTimeout();
this.hideOutput.emit();
}
private _clearTimeout() {
if (this._timeoutID) {
clearTimeout(this._timeoutID);
this._timeoutID = null;
}
}
}