chrv-components 1.12.75 → 1.12.77

package/fesm2022/chrv-components.mjs

@@ -6765,6 +6765,9 @@ class ChrHoverDirective {
         this.chrHoverContext = input({}, ...(ngDevMode ? [{ debugName: "chrHoverContext" }] : []));
         this.chrHoverSnap = input(false, ...(ngDevMode ? [{ debugName: "chrHoverSnap" }] : []));
         this.chrHoverPosition = input('right', ...(ngDevMode ? [{ debugName: "chrHoverPosition" }] : []));
+        this.chrHoverCloseDelay = input(10, ...(ngDevMode ? [{ debugName: "chrHoverCloseDelay" }] : []));
+        this.closeTimeout = null;
+        this.overlayEventListeners = [];
         this.mousePositionStrategy = (mousemove) => {
             const positionOffset = { left: mousemove.clientX, top: mousemove.clientY };
             const componentSize = this.overlayRef?.overlayElement.getBoundingClientRect();
@@ -6872,11 +6875,12 @@ class ChrHoverDirective {
         });
     }
     ngOnInit() {
-        this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mouseenter', (event) => {
+        this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mouseenter', () => {
+            this.clearCloseTimeout();
             this.open();
         }));
-        this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mouseleave', (event) => {
-            this.close();
+        this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mouseleave', () => {
+            this.startCloseTimeout();
         }));
         this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mousemove', (event) => {
             if (!this.chrHoverSnap()) {
@@ -6886,6 +6890,8 @@ class ChrHoverDirective {
         }));
     }
     ngOnDestroy() {
+        this.clearCloseTimeout();
+        this.clearOverlayListeners();
         this.overlayRef.dispose();
         this.removeEventListeners();
     }
@@ -6893,19 +6899,44 @@ class ChrHoverDirective {
         this.eventListeners.forEach((unlisten) => unlisten());
         this.eventListeners = [];
     }
+    startCloseTimeout() {
+        this.clearCloseTimeout();
+        this.closeTimeout = window.setTimeout(() => this.close(), this.chrHoverCloseDelay());
+    }
+    clearCloseTimeout() {
+        if (this.closeTimeout != null) {
+            clearTimeout(this.closeTimeout);
+            this.closeTimeout = null;
+        }
+    }
+    clearOverlayListeners() {
+        this.overlayEventListeners.forEach((u) => u());
+        this.overlayEventListeners = [];
+    }
     open() {
         if (!this.overlayRef.hasAttached()) {
             if (!this.portal) {
                 this.portal = new TemplatePortal(this.template, this.vcr, this.chrHoverContext());
             }
             const ref = this.overlayRef.attach(this.portal);
+            // keep overlay open when overlay itself is hovered
+            const overlayEl = this.overlayRef.overlayElement;
+            this.clearOverlayListeners();
+            this.overlayEventListeners.push(this.renderer.listen(overlayEl, 'mouseenter', () => {
+                this.clearCloseTimeout();
+            }));
+            this.overlayEventListeners.push(this.renderer.listen(overlayEl, 'mouseleave', () => {
+                this.startCloseTimeout();
+            }));
         }
     }
     close() {
+        this.clearCloseTimeout();
+        this.clearOverlayListeners();
         this.overlayRef.detach();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ChrHoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: ChrHoverDirective, isStandalone: true, selector: "[chrHover]", inputs: { template: { classPropertyName: "template", publicName: "chrHover", isSignal: false, isRequired: false, transformFunction: null }, chrHoverContext: { classPropertyName: "chrHoverContext", publicName: "chrHoverContext", isSignal: true, isRequired: false, transformFunction: null }, chrHoverSnap: { classPropertyName: "chrHoverSnap", publicName: "chrHoverSnap", isSignal: true, isRequired: false, transformFunction: null }, chrHoverPosition: { classPropertyName: "chrHoverPosition", publicName: "chrHoverPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: ChrHoverDirective, isStandalone: true, selector: "[chrHover]", inputs: { template: { classPropertyName: "template", publicName: "chrHover", isSignal: false, isRequired: false, transformFunction: null }, chrHoverContext: { classPropertyName: "chrHoverContext", publicName: "chrHoverContext", isSignal: true, isRequired: false, transformFunction: null }, chrHoverSnap: { classPropertyName: "chrHoverSnap", publicName: "chrHoverSnap", isSignal: true, isRequired: false, transformFunction: null }, chrHoverPosition: { classPropertyName: "chrHoverPosition", publicName: "chrHoverPosition", isSignal: true, isRequired: false, transformFunction: null }, chrHoverCloseDelay: { classPropertyName: "chrHoverCloseDelay", publicName: "chrHoverCloseDelay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ChrHoverDirective, decorators: [{
             type: Directive,
@@ -6915,7 +6946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
         }], ctorParameters: () => [], propDecorators: { template: [{
                 type: Input,
                 args: ['chrHover']
-            }], chrHoverContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverContext", required: false }] }], chrHoverSnap: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverSnap", required: false }] }], chrHoverPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverPosition", required: false }] }] } });
+            }], chrHoverContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverContext", required: false }] }], chrHoverSnap: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverSnap", required: false }] }], chrHoverPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverPosition", required: false }] }], chrHoverCloseDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverCloseDelay", required: false }] }] } });
 
 class CsvExporter {
     export(data, columns) {