@agorapulse/ui-components 13.1.9 → 13.1.10

package/fesm2020/agorapulse-ui-components.mjs

@@ -47,7 +47,7 @@ import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
 import * as i1$3 from '@angular/animations';
 import { animate, style, trigger, transition } from '@angular/animations';
 import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
-import { Subject, merge, of, fromEvent, BehaviorSubject } from 'rxjs';
+import { Subject, of, fromEvent, BehaviorSubject } from 'rxjs';
 import { switchMap, delay, takeUntil, debounceTime, distinctUntilChanged, tap, catchError, map } from 'rxjs/operators';
 import * as i2$3 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
@@ -1067,7 +1067,7 @@ const tooltipNeoPositions = {
 
 class TooltipNeoService {
     constructor() {
-        this.clickOutside$ = new Subject();
+        this.dispose$ = new Subject();
     }
 }
 /** @nocollapse */ /** @nocollapse */ TooltipNeoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -1080,9 +1080,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
         }] });
 
 class TooltipNeoComponent {
-    constructor(_elementRef, _tooltipNeoService) {
-        this._elementRef = _elementRef;
-        this._tooltipNeoService = _tooltipNeoService;
+    constructor(elementRef, tooltipNeoService) {
+        this.elementRef = elementRef;
+        this.tooltipNeoService = tooltipNeoService;
     }
     ngOnInit() {
         this.params.borderColor
@@ -1090,8 +1090,8 @@ class TooltipNeoComponent {
             : this.border = undefined;
     }
     onClickOutside(event) {
-        if (!this._elementRef.nativeElement.contains(event.target)) {
-            this._tooltipNeoService.clickOutside$.next();
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.tooltipNeoService.dispose$.next();
         }
     }
 }
@@ -1130,24 +1130,35 @@ class TooltipNeoDirective {
         this.overlayPositionBuilder = overlayPositionBuilder;
         this.tooltipNeoService = tooltipNeoService;
         this.destroy$ = new Subject();
-        this.hide$ = new Subject();
+        this.display$ = new Subject();
         this.mouseEntered = false;
-        this.show$ = new Subject();
     }
     static enableTooltip(content, contentType, display) {
         return !!content && !!contentType && !!display;
     }
+    /**
+     * To fix issue on inbox virtual scroller, it's a manual cleaner at DOM level
+     * @private
+     */
+    static cleanUpPersistentTooltip() {
+        const tooltips = document.getElementsByTagName('ap-tooltip-neo');
+        if (tooltips) {
+            Array.from(tooltips).forEach(tooltip => {
+                tooltip.parentElement.parentElement.remove();
+            });
+        }
+    }
     ngOnChanges(changes) {
         if ((changes?.apTooltipNeo?.currentValue?.display || changes?.apTooltipNeo?.currentValue?.position) && this.mouseEntered) {
             this.setSettings();
-            this.allowDisplay ? this.show$.next(true) : this.hide$.next(false);
+            this.display$.next(this.allowDisplay);
         }
     }
     ngOnInit() {
         this.initiateTooltip();
     }
     ngOnDestroy() {
-        this.detach();
+        this.dispose();
         this.destroy$.next();
         this.destroy$.complete();
     }
@@ -1167,12 +1178,12 @@ class TooltipNeoDirective {
             const maxWidth = 'full';
             const position = 'top';
             const title = '';
-            this.params = { content, backgroundColor, borderColor, contentType, position, display, displayArrow, title, maxWidth };
+            this.params = { content, backgroundColor, borderColor, contentType, display, displayArrow, maxWidth, position, title };
             this.allowDisplay = TooltipNeoDirective.enableTooltip(content, contentType, display);
         }
     }
     initiateTooltip() {
-        merge(this.hide$, this.show$)
+        this.display$
             .pipe(switchMap(bool => {
             if (!bool) {
                 return of(bool);
@@ -1182,7 +1193,8 @@ class TooltipNeoDirective {
             .subscribe(bool => {
             if (bool) {
                 this.elementRefMouseLeave$ = fromEvent(this.elementRef.nativeElement, 'mouseleave')
-                    .subscribe(() => this.detach());
+                    .subscribe(() => this.dispose());
+                TooltipNeoDirective.cleanUpPersistentTooltip();
                 const positionStrategy = this.overlayPositionBuilder
                     .flexibleConnectedTo(this.elementRef)
                     .withPositions([tooltipNeoPositions[this.params.position]]);
@@ -1192,29 +1204,40 @@ class TooltipNeoDirective {
                 tooltipRef.instance.params = this.params;
             }
             else {
-                this.detach();
+                this.dispose();
             }
         });
-        this.tooltipNeoService.clickOutside$
+        this.tooltipNeoService.dispose$
             .pipe(takeUntil(this.destroy$))
-            .subscribe(() => this.hide$.next(false));
+            .subscribe(() => {
+            this.display$.next(false);
+        });
     }
-    detach() {
-        this.overlayRef && this.overlayRef.hasAttached() && this.overlayRef.detach();
-        this.elementRefMouseLeave$ && this.elementRefMouseLeave$.unsubscribe();
+    dispose() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+        }
+        if (this.elementRefMouseLeave$) {
+            this.elementRefMouseLeave$.unsubscribe();
+        }
     }
     onMouseEnter() {
         this.setSettings();
         this.mouseEntered = true;
-        this.allowDisplay && this.params && this.show$.next(true);
+        if (this.allowDisplay && this.params) {
+            this.display$.next(true);
+        }
     }
     onMouseLeave() {
         this.mouseEntered = false;
-        this.hide$.next(false);
+        this.display$.next(false);
+    }
+    onClick() {
+        this.display$.next(false);
     }
 }
 /** @nocollapse */ /** @nocollapse */ TooltipNeoDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.Overlay }, { token: i1$4.OverlayPositionBuilder }, { token: TooltipNeoService }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ TooltipNeoDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: TooltipNeoDirective, selector: "[apTooltipNeo]", inputs: { apTooltipNeo: "apTooltipNeo" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, usesOnChanges: true, ngImport: i0 });
+/** @nocollapse */ /** @nocollapse */ TooltipNeoDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: TooltipNeoDirective, selector: "[apTooltipNeo]", inputs: { apTooltipNeo: "apTooltipNeo" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()" } }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[apTooltipNeo]' }]
@@ -1226,6 +1249,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
             }], onMouseLeave: [{
                 type: HostListener,
                 args: ['mouseleave']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
             }] } });
 
 class LabelComponent {