@@ -9,53 +9,59 @@ import {
9
9
OnDestroy ,
10
10
OnInit ,
11
11
Output ,
12
- Renderer2 ,
12
+ Renderer2
13
13
} from '@angular/core' ;
14
14
15
- import { animate , AnimationEvent , state , style , transition , trigger } from '@angular/animations' ;
15
+ import { animate , state , style , transition , trigger } from '@angular/animations' ;
16
16
import { BooleanInput , coerceBooleanProperty } from '@angular/cdk/coercion' ;
17
17
18
+ import { Colors } from '../../coreui.types' ;
18
19
import { ToasterService } from '../toaster/toaster.service' ;
19
20
import { TToasterPlacement } from '../toaster/toaster.component' ;
20
- import { Colors } from '../../coreui.types' ;
21
21
22
22
type AnimateType = ( 'hide' | 'show' ) ;
23
23
24
24
@Component ( {
25
25
selector :'c-toast' ,
26
- template :` <ng-content></ng-content>` ,
26
+ template :' <ng-content></ng-content>' ,
27
27
styleUrls :[ './toast.component.scss' ] ,
28
28
exportAs :'cToast' ,
29
29
standalone :true ,
30
30
animations :[
31
31
trigger ( 'fadeInOut' , [
32
- state ( 'show' , style ( { opacity :1 , height :'*' , padding :'*' , border :'*' , margin :'*' } ) ) ,
33
- state ( 'hide' , style ( { opacity :0 , height :0 , padding :0 , border :0 , margin :0 } ) ) ,
34
- state ( 'void' , style ( { opacity :0 , height :0 , padding :0 , border :0 , margin :0 } ) ) ,
32
+ state ( 'show' , style ( { opacity :1 , height :'*' , padding :'*' , border :'*' , margin :'*' } ) ) ,
33
+ state ( 'hide' , style ( { opacity :0 , height :0 , padding :0 , border :0 , margin :0 } ) ) ,
34
+ state ( 'void' , style ( { opacity :0 , height :0 , padding :0 , border :0 , margin :0 } ) ) ,
35
35
transition ( 'show => hide' , [
36
- animate ( '{{ time }} {{ easing }}' ) ,
36
+ animate ( '{{ time }} {{ easing }}' )
37
37
] , {
38
- params :{ time :'300ms' , easing :'ease-out' }
38
+ params :{ time :'300ms' , easing :'ease-out' }
39
39
} ) ,
40
40
transition ( 'hide => show' , [ animate ( '{{ time }} {{ easing }}' ) ] , {
41
- params :{ time :'300ms' , easing :'ease-in' } ,
41
+ params :{ time :'300ms' , easing :'ease-in' }
42
42
} ) ,
43
43
transition ( 'show => void' , [ animate ( '{{ time }} {{ easing }}' ) ] , {
44
- params :{ time :'300ms' , easing :'ease-out' } ,
44
+ params :{ time :'300ms' , easing :'ease-out' }
45
45
} ) ,
46
46
transition ( 'void => show' , [ animate ( '{{ time }} {{ easing }}' ) ] , {
47
- params :{ time :'300ms' , easing :'ease-in' } ,
48
- } ) ,
49
- ] ) ,
50
- ] ,
47
+ params :{ time :'300ms' , easing :'ease-in' }
48
+ } )
49
+ ] )
50
+ ]
51
51
} )
52
52
export class ToastComponent implements OnInit , OnDestroy {
53
53
54
54
static ngAcceptInputType_visible :BooleanInput ;
55
55
56
56
public dynamic ! :boolean ;
57
57
public placement ! :TToasterPlacement ;
58
- public hide ! :boolean ;
58
+
59
+ constructor (
60
+ public hostElement :ElementRef ,
61
+ public renderer :Renderer2 ,
62
+ public toasterService :ToasterService ,
63
+ public changeDetectorRef :ChangeDetectorRef
64
+ ) { }
59
65
60
66
/**
61
67
* Auto hide the toast.
@@ -95,9 +101,11 @@ export class ToastComponent implements OnInit, OnDestroy {
95
101
this . changeDetectorRef . markForCheck ( ) ;
96
102
}
97
103
}
104
+
98
105
get visible ( ) {
99
106
return this . _visible ;
100
107
}
108
+
101
109
private _visible = false ;
102
110
103
111
/**
@@ -121,13 +129,6 @@ export class ToastComponent implements OnInit, OnDestroy {
121
129
private clockId :any ;
122
130
private clockTimerId :any ;
123
131
124
- constructor (
125
- public hostElement :ElementRef ,
126
- public renderer :Renderer2 ,
127
- public toasterService :ToasterService ,
128
- public changeDetectorRef :ChangeDetectorRef
129
- ) { }
130
-
131
132
private _clock ! :number ;
132
133
133
134
get clock ( ) :number {
@@ -150,16 +151,6 @@ export class ToastComponent implements OnInit, OnDestroy {
150
151
return this . visible ?'show' :'hide' ;
151
152
}
152
153
153
- @HostListener ( '@fadeInOut.start' , [ '$event' ] )
154
- onAnimationStart ( $event :AnimationEvent ) :void {
155
- this . onAnimationEvent ( $event ) ;
156
- }
157
-
158
- @HostListener ( '@fadeInOut.done' , [ '$event' ] )
159
- onAnimationDone ( $event :AnimationEvent ) :void {
160
- this . onAnimationEvent ( $event ) ;
161
- }
162
-
163
154
@HostListener ( 'mouseover' ) onMouseOver ( ) :void {
164
155
this . clearTimer ( ) ;
165
156
}
@@ -183,7 +174,7 @@ export class ToastComponent implements OnInit, OnDestroy {
183
174
this . toasterService . setState ( {
184
175
toast :this ,
185
176
show :this . visible ,
186
- placement :this . placement ,
177
+ placement :this . placement
187
178
} ) ;
188
179
this . clearTimer ( ) ;
189
180
this . setTimer ( ) ;
@@ -213,7 +204,7 @@ export class ToastComponent implements OnInit, OnDestroy {
213
204
this . toasterService . setState ( {
214
205
toast :this ,
215
206
show :false ,
216
- placement :this . placement ,
207
+ placement :this . placement
217
208
} ) ;
218
209
}
219
210
@@ -234,14 +225,4 @@ export class ToastComponent implements OnInit, OnDestroy {
234
225
clearInterval ( this . clockId ) ;
235
226
this . clockId = null ;
236
227
}
237
-
238
- onAnimationEvent ( event :AnimationEvent ) :void {
239
- this . hide = event . phaseName === 'start' && event . toState === 'show' ;
240
- if ( event . phaseName === 'done' ) {
241
- this . hide = ( event . toState === 'hide' || event . toState === 'void' ) ;
242
- if ( event . toState === 'show' ) {
243
- this . hide = false ;
244
- }
245
- }
246
- }
247
228
}