chrv-components 1.12.130 → 1.12.132

package/fesm2022/chrv-components.mjs

@@ -4020,8 +4020,9 @@ class ChrPopoverDirective {
         this.viewContainerRef = inject(ViewContainerRef);
         this.hostElement = computed(() => this.hostElementRef.nativeElement, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hostElement" }] : /* istanbul ignore next */ []));
-        this.isHostHovered$ = new BehaviorSubject(false);
-        this.isTargetHovered$ = new BehaviorSubject(false);
+        this.isHostHovered$ = new Subject();
+        this.isTargetHovered$ = new Subject();
+        this.lastKnowMousePosition = new Subject();
         // private readonly isInsidePopover$ = new BehaviorSubject<boolean>(false);
         this.destroyRef = inject(DestroyRef);
         // private readonly isInsideHost = signal(false);
@@ -4063,9 +4064,21 @@ class ChrPopoverDirective {
         //   if (y < rect.top || y >= rect.bottom) return false;
         //   return true;
         // };
+        this.updateMousePosition = (event) => {
+            this.lastKnowMousePosition.next({
+                x: event.clientX,
+                y: event.clientY,
+            });
+        };
         this.setupSubject = () => {
-            combineLatest([this.isHostHovered$, this.isTargetHovered$])
-                .pipe(map(([hostHovered, targetHovered]) => hostHovered || targetHovered), switchMap((isInside) => {
+            combineLatest([
+                this.isHostHovered$,
+                this.isTargetHovered$,
+                this.lastKnowMousePosition,
+            ])
+                .pipe(map(([hostHovered, targetHovered, mouse]) => hostHovered.hover ||
+                targetHovered.hover ||
+                this.isPointerInsideElements(mouse.x, mouse.y)), switchMap((isInside) => {
                 if (isInside) {
                     return of(true);
                 }
@@ -4089,7 +4102,10 @@ class ChrPopoverDirective {
         this.setupHostListeners = () => {
             this.renderer.listen(this.hostElement(), 'mouseenter', (event) => {
                 // this.isInsidePopover$.next(true);
-                this.isHostHovered$.next(true);
+                this.isHostHovered$.next({
+                    hover: true,
+                    position: { x: event.clientX, y: event.clientY },
+                });
                 // if (!this.isOpen()) {
                 //   this.showPopover();
                 // }
@@ -4102,26 +4118,35 @@ class ChrPopoverDirective {
                 //   }
                 // }, 100);
                 // this.isInsidePopover$.next(false);
-                if (this.isPointerInsideElements(event)) {
-                    return;
-                }
-                this.isHostHovered$.next(false);
+                // if (this.isPointerInsideElements(event)) {
+                //   return;
+                // }
+                this.isHostHovered$.next({
+                    hover: false,
+                    position: { x: event.clientX, y: event.clientY },
+                });
             });
         };
         this.setupTargetListeners = () => {
             this.renderer.listen(this.targetElement(), 'mouseenter', (event) => {
                 // this.isInsideTarget.set(true);
                 // this.shopPopover();
-                this.isTargetHovered$.next(true);
+                this.isTargetHovered$.next({
+                    hover: true,
+                    position: { x: event.clientX, y: event.clientY },
+                });
                 // this.isInsidePopover$.next(true);
             });
             this.renderer.listen(this.targetElement(), 'mouseleave', (event) => {
                 // this.isInsideTarget.set(false);
                 // this.isInsidePopover$.next(false);
-                if (this.isPointerInsideElements(event)) {
-                    return;
-                }
-                this.isTargetHovered$.next(false);
+                // if (this.isPointerInsideElements(event)) {
+                //   return;
+                // }
+                this.isTargetHovered$.next({
+                    hover: false,
+                    position: { x: event.clientX, y: event.clientY },
+                });
                 // setTimeout(() => {
                 //   if (!this.isInsideHost() && !this.isInsideTargetBoundingBox(event))
                 //     this.hidePopover();
@@ -4138,15 +4163,19 @@ class ChrPopoverDirective {
             // this.isInsidePopover$.next(false);
             this.targetElement().hidePopover();
         };
-        this.isInsideRect = (event, rect) => {
+        this.isEventInsideRect = (event, rect) => {
             const x = event.clientX;
             const y = event.clientY;
+            return this.isInsideRect(x, y, rect);
+        };
+        this.isInsideRect = (x, y, rect) => {
             return (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom);
         };
-        this.isPointerInsideElements = (event) => {
+        this.isPointerInsideElements = (x, y) => {
+            // private isPointerInsideElements = (event: MouseEvent): boolean => {
             const hostRect = this.hostElement().getBoundingClientRect();
             const targetRect = this.targetElement().getBoundingClientRect();
-            return (this.isInsideRect(event, hostRect) || this.isInsideRect(event, targetRect));
+            return (this.isInsideRect(x, y, hostRect) || this.isInsideRect(x, y, targetRect));
         };
     }
     ngOnInit() {
@@ -4179,7 +4208,7 @@ class ChrPopoverDirective {
         this.renderer.setStyle(this.targetElement(), 'border', 'none');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: ChrPopoverDirective, isStandalone: true, selector: "[chrPopover]", inputs: { chrPopover: { classPropertyName: "chrPopover", publicName: "chrPopover", isSignal: true, isRequired: true, transformFunction: null }, chrPopoverPosition: { classPropertyName: "chrPopoverPosition", publicName: "chrPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, chrPopoverData: { classPropertyName: "chrPopoverData", publicName: "chrPopoverData", isSignal: true, isRequired: false, transformFunction: null }, chrPopoverOnHover: { classPropertyName: "chrPopoverOnHover", publicName: "chrPopoverOnHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keyup.escape": "hidePopover()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: ChrPopoverDirective, isStandalone: true, selector: "[chrPopover]", inputs: { chrPopover: { classPropertyName: "chrPopover", publicName: "chrPopover", isSignal: true, isRequired: true, transformFunction: null }, chrPopoverPosition: { classPropertyName: "chrPopoverPosition", publicName: "chrPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, chrPopoverData: { classPropertyName: "chrPopoverData", publicName: "chrPopoverData", isSignal: true, isRequired: false, transformFunction: null }, chrPopoverOnHover: { classPropertyName: "chrPopoverOnHover", publicName: "chrPopoverOnHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "window:mousemove": "updaeMousePosition($event)" }, listeners: { "keyup.escape": "hidePopover()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPopoverDirective, decorators: [{
             type: Directive,
@@ -4187,6 +4216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     selector: '[chrPopover]',
                     host: {
                         '(keyup.escape)': 'hidePopover()',
+                        'window:mousemove': 'updaeMousePosition($event)',
                     },
                 }]
         }], propDecorators: { chrPopover: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopover", required: true }] }], chrPopoverPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopoverPosition", required: false }] }], chrPopoverData: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopoverData", required: false }] }], chrPopoverOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopoverOnHover", required: false }] }] } });