@@ -2,9 +2,11 @@ import {
2
2
AfterViewInit ,
3
3
ChangeDetectorRef ,
4
4
ComponentRef ,
5
+ DestroyRef ,
5
6
Directive ,
6
7
ElementRef ,
7
8
HostBinding ,
9
+ inject ,
8
10
Inject ,
9
11
Input ,
10
12
OnChanges ,
@@ -15,9 +17,9 @@ import {
15
17
TemplateRef ,
16
18
ViewContainerRef
17
19
} from '@angular/core' ;
20
+ import { takeUntilDestroyed } from '@angular/core/rxjs-interop' ;
18
21
import { DOCUMENT } from '@angular/common' ;
19
- import { Subscription } from 'rxjs' ;
20
- import { debounceTime } from 'rxjs/operators' ;
22
+ import { debounceTime , finalize } from 'rxjs/operators' ;
21
23
import { createPopper , Instance , Options } from '@popperjs/core' ;
22
24
23
25
import { Triggers } from '../coreui.types' ;
@@ -28,7 +30,7 @@ import { IntersectionService } from '../services';
28
30
@Directive ( {
29
31
selector : '[cPopover]' ,
30
32
exportAs : 'cPopover' ,
31
- providers : [ ListenersService , IntersectionService ] ,
33
+ providers : [ ListenersService ] ,
32
34
standalone : true
33
35
} )
34
36
export class PopoverDirective implements OnChanges , OnDestroy , OnInit , AfterViewInit {
@@ -96,7 +98,7 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit, AfterView
96
98
]
97
99
} ;
98
100
99
- private intersectingSubscription ?: Subscription ;
101
+ readonly #destroyRef = inject ( DestroyRef ) ;
100
102
101
103
constructor (
102
104
@Inject ( DOCUMENT ) private document : Document ,
@@ -109,7 +111,6 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit, AfterView
109
111
) { }
110
112
111
113
ngAfterViewInit ( ) : void {
112
- this . intersectionService . createIntersectionObserver ( this . hostElement ) ;
113
114
this . intersectionServiceSubscribe ( ) ;
114
115
}
115
116
@@ -122,7 +123,6 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit, AfterView
122
123
ngOnDestroy ( ) : void {
123
124
this . clearListeners ( ) ;
124
125
this . destroyPopoverElement ( ) ;
125
- this . intersectionServiceSubscribe ( false ) ;
126
126
}
127
127
128
128
ngOnInit ( ) : void {
@@ -154,18 +154,19 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit, AfterView
154
154
}
155
155
156
156
private intersectionServiceSubscribe ( subscribe : boolean = true ) : void {
157
- if ( subscribe ) {
158
- this . intersectingSubscription = this . intersectionService . intersecting$
159
- . pipe (
160
- debounceTime ( 100 )
161
- )
162
- . subscribe ( isIntersecting => {
163
- this . visible = isIntersecting ? this . visible : false ;
164
- ! this . visible && this . removePopoverElement ( ) ;
165
- } ) ;
166
- } else {
167
- this . intersectingSubscription ?. unsubscribe ( ) ;
168
- }
157
+ this . intersectionService . createIntersectionObserver ( this . hostElement ) ;
158
+ this . intersectionService . intersecting$
159
+ . pipe (
160
+ debounceTime ( 100 ) ,
161
+ finalize ( ( ) => {
162
+ this . intersectionService . unobserve ( this . hostElement ) ;
163
+ } ) ,
164
+ takeUntilDestroyed ( this . #destroyRef)
165
+ )
166
+ . subscribe ( isIntersecting => {
167
+ this . visible = isIntersecting ? this . visible : false ;
168
+ ! this . visible && this . removePopoverElement ( ) ;
169
+ } ) ;
169
170
}
170
171
171
172
private getUID ( prefix : string ) : string {
@@ -241,7 +242,7 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit, AfterView
241
242
this . popoverRef . instance . id = undefined ;
242
243
this . changeDetectorRef . markForCheck ( ) ;
243
244
setTimeout ( ( ) => {
244
- this . viewContainerRef . detach ( ) ;
245
+ this . viewContainerRef ? .detach ( ) ;
245
246
} , 300 ) ;
246
247
}
247
248
}
0 commit comments