ngx-mat-menu-hover 1.0.0

package/README.md

@@ -0,0 +1,39 @@
+# mat-menu-hover - An Angular Material directive
+This Angular directive provides functionality to handle hover menu behavior, allowing menus to open when hovered over and close when the mouse leaves.
+
+## Installation
+
+    npm install mat-menu-hover@latest
+
+Since the directive is marked as standalone you can directly import it into a module.
+
+    import { NgModule } from  '@angular/core';
+    import { HoverMenuDirective } from  'mat-menu-hover';
+    
+    @NgModule({
+    	declarations: [...],
+    	imports: [
+    		HoverMenuDirective
+    	],
+    	exports: [...]
+   	})
+   	export class AppModule { }
+
+## Usage
+
+    <button mat-button [matMenuTriggerFor]="menu" matHoverMenu>Menu</button>
+    <mat-menu #menu="matMenu">
+    	<!-- Menu content goes here -->
+    </mat-menu>
+
+## Optional inputs/outputs
+|Keyword     |Function                           |Note          |
+|------------|-----------------------------------|--------------|
+|[closeDelay]|Adds a delay before the menu closed|Default = 50ms|
+|(opened)    |Emits if the menu is opened/closed |              |
+
+## Known issues
+- Currently it is not possible to nest menus. It will only work with single-level mat-menus.
+
+## License
+This project is licensed under the MIT License - see the LICENSE file for details.

package/esm2022/lib/mat-menu-hover.directive.mjs

@@ -0,0 +1,83 @@
+import { DestroyRef, Directive, EventEmitter, HostListener, Input, Output, Self, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { BehaviorSubject, filter, fromEvent, mergeMap, tap } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/menu";
+/**
+ * Directive to handle hover menu behavior.
+ */
+export class MatMenuHoverDirective {
+    onMouseEnter() {
+        this.openMenu();
+        // Get the menu element by ID and emit it to the observable
+        const element = document.querySelector(`#${this.menu.panelId}`);
+        if (element) {
+            this.menuElement$.next(element);
+        }
+    }
+    onMouseLeave() {
+        this.closeMenu();
+    }
+    constructor(matMenuTrigger) {
+        this.matMenuTrigger = matMenuTrigger;
+        this.destroyRef = inject(DestroyRef);
+        this.menuElement$ = new BehaviorSubject(null); // Observable for menu element
+        /**
+        * Delay (in milliseconds) before closing the menu after mouseleave.
+        */
+        this.closeDelay = 50; // Delay before closing the menu on mouseleave
+        /**
+       * Event emitter for notifying when the menu is opened.
+       */
+        this.opened = new EventEmitter();
+    }
+    ngOnInit() {
+        // Ensure MatMenuTrigger is present
+        if (!this.matMenuTrigger) {
+            console.error('There must be a MatMenuTrigger present.');
+            return;
+        }
+        // Assign the menu and disable backdrop
+        this.menu = this.matMenuTrigger.menu;
+        this.menu.hasBackdrop = false;
+        // Subscribe to mouseleave event on the menu element to close the menu
+        this.menuElement$.pipe(takeUntilDestroyed(this.destroyRef), filter(element => !!element), mergeMap(element => fromEvent(element, 'mouseleave')), tap(() => this.closeMenu()))
+            .subscribe();
+        // Subscribe to mouseenter event on the menu element to open the menu
+        this.menuElement$.pipe(takeUntilDestroyed(this.destroyRef), filter(element => !!element), mergeMap(element => fromEvent(element, 'mouseenter')), tap(() => this.openMenu()))
+            .subscribe();
+    }
+    closeMenu() {
+        this.closer = setTimeout(() => {
+            this.matMenuTrigger.closeMenu();
+        }, this.closeDelay);
+    }
+    openMenu() {
+        if (this.closer) {
+            clearTimeout(this.closer);
+        }
+        this.matMenuTrigger.openMenu();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MatMenuHoverDirective, deps: [{ token: i1.MatMenuTrigger, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: MatMenuHoverDirective, isStandalone: true, selector: "[matHoverMenu]", inputs: { closeDelay: "closeDelay" }, outputs: { opened: "opened" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MatMenuHoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matHoverMenu]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1.MatMenuTrigger, decorators: [{
+                    type: Self
+                }] }], propDecorators: { closeDelay: [{
+                type: Input
+            }], opened: [{
+                type: Output
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0LW1lbnUtaG92ZXIuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbWF0LW1lbnUtaG92ZXIvc3JjL2xpYi9tYXQtbWVudS1ob3Zlci5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkgsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFFaEUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxHQUFHLEVBQUUsTUFBTSxNQUFNLENBQUM7OztBQUV6RTs7R0FFRztBQUtILE1BQU0sT0FBTyxxQkFBcUI7SUFpQmhDLFlBQVk7UUFDVixJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7UUFFaEIsMkRBQTJEO1FBQzNELE1BQU0sT0FBTyxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFtQixDQUFDO1FBQ2xGLElBQUksT0FBTyxFQUFFLENBQUM7WUFDWixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUNsQyxDQUFDO0lBQ0gsQ0FBQztJQUdELFlBQVk7UUFDVixJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDbkIsQ0FBQztJQUVELFlBQTRCLGNBQThCO1FBQTlCLG1CQUFjLEdBQWQsY0FBYyxDQUFnQjtRQS9CbEQsZUFBVSxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUVoQyxpQkFBWSxHQUFHLElBQUksZUFBZSxDQUFpQixJQUFJLENBQUMsQ0FBQyxDQUFDLDhCQUE4QjtRQUdoRzs7VUFFRTtRQUNPLGVBQVUsR0FBRyxFQUFFLENBQUMsQ0FBQyw4Q0FBOEM7UUFFeEU7O1NBRUM7UUFDUyxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztJQWtCZSxDQUFDO0lBRS9ELFFBQVE7UUFDTixtQ0FBbUM7UUFDbkMsSUFBSSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN6QixPQUFPLENBQUMsS0FBSyxDQUFDLHlDQUF5QyxDQUFDLENBQUM7WUFDekQsT0FBTztRQUNULENBQUM7UUFFRCx1Q0FBdUM7UUFDdkMsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQztRQUNyQyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7UUFFOUIsc0VBQXNFO1FBQ3RFLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUNwQixrQkFBa0IsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEVBQ25DLE1BQU0sQ0FBQyxPQUFPLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsRUFDNUIsUUFBUSxDQUFDLE9BQU8sQ0FBQyxFQUFFLENBQUMsU0FBUyxDQUFDLE9BQU8sRUFBRSxZQUFZLENBQUMsQ0FBQyxFQUNyRCxHQUFHLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLENBQzVCO2FBQ0UsU0FBUyxFQUFFLENBQUM7UUFFZixxRUFBcUU7UUFDckUsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQ3BCLGtCQUFrQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsRUFDbkMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxFQUM1QixRQUFRLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxTQUFTLENBQUMsT0FBTyxFQUFFLFlBQVksQ0FBQyxDQUFDLEVBQ3JELEdBQUcsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FDM0I7YUFDRSxTQUFTLEVBQUUsQ0FBQztJQUNqQixDQUFDO0lBRU8sU0FBUztRQUNmLElBQUksQ0FBQyxNQUFNLEdBQUcsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUM1QixJQUFJLENBQUMsY0FBYyxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ2xDLENBQUMsRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDdEIsQ0FBQztJQUVPLFFBQVE7UUFDZCxJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztZQUNoQixZQUFZLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQzVCLENBQUM7UUFFRCxJQUFJLENBQUMsY0FBYyxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ2pDLENBQUM7OEdBNUVVLHFCQUFxQjtrR0FBckIscUJBQXFCOzsyRkFBckIscUJBQXFCO2tCQUpqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLFVBQVUsRUFBRSxJQUFJO2lCQUNqQjs7MEJBaUNjLElBQUk7eUNBdkJSLFVBQVU7c0JBQWxCLEtBQUs7Z0JBS0ksTUFBTTtzQkFBZixNQUFNO2dCQUdQLFlBQVk7c0JBRFgsWUFBWTt1QkFBQyxZQUFZO2dCQVkxQixZQUFZO3NCQURYLFlBQVk7dUJBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERlc3Ryb3lSZWYsIERpcmVjdGl2ZSwgRXZlbnRFbWl0dGVyLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCwgU2VsZiwgaW5qZWN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IHRha2VVbnRpbERlc3Ryb3llZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvcnhqcy1pbnRlcm9wJztcclxuaW1wb3J0IHsgTWF0TWVudVBhbmVsLCBNYXRNZW51VHJpZ2dlciB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL21lbnUnO1xyXG5pbXBvcnQgeyBCZWhhdmlvclN1YmplY3QsIGZpbHRlciwgZnJvbUV2ZW50LCBtZXJnZU1hcCwgdGFwIH0gZnJvbSAncnhqcyc7XHJcblxyXG4vKipcclxuICogRGlyZWN0aXZlIHRvIGhhbmRsZSBob3ZlciBtZW51IGJlaGF2aW9yLlxyXG4gKi9cclxuQERpcmVjdGl2ZSh7XHJcbiAgc2VsZWN0b3I6ICdbbWF0SG92ZXJNZW51XScsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZVxyXG59KVxyXG5leHBvcnQgY2xhc3MgTWF0TWVudUhvdmVyRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0IHtcclxuICBwcml2YXRlIGRlc3Ryb3lSZWYgPSBpbmplY3QoRGVzdHJveVJlZik7XHJcbiAgcHJpdmF0ZSBtZW51OiBNYXRNZW51UGFuZWw8YW55PjsgLy8gUmVmZXJlbmNlIHRvIHRoZSBNYXRNZW51UGFuZWxcclxuICBwcml2YXRlIG1lbnVFbGVtZW50JCA9IG5ldyBCZWhhdmlvclN1YmplY3Q8SFRNTERpdkVsZW1lbnQ+KG51bGwpOyAvLyBPYnNlcnZhYmxlIGZvciBtZW51IGVsZW1lbnRcclxuICBwcml2YXRlIGNsb3NlcjogYW55O1xyXG5cclxuICAvKipcclxuICAqIERlbGF5IChpbiBtaWxsaXNlY29uZHMpIGJlZm9yZSBjbG9zaW5nIHRoZSBtZW51IGFmdGVyIG1vdXNlbGVhdmUuXHJcbiAgKi9cclxuICBASW5wdXQoKSBjbG9zZURlbGF5ID0gNTA7IC8vIERlbGF5IGJlZm9yZSBjbG9zaW5nIHRoZSBtZW51IG9uIG1vdXNlbGVhdmVcclxuXHJcbiAgLyoqXHJcbiAqIEV2ZW50IGVtaXR0ZXIgZm9yIG5vdGlmeWluZyB3aGVuIHRoZSBtZW51IGlzIG9wZW5lZC5cclxuICovXHJcbiAgQE91dHB1dCgpIG9wZW5lZCA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignbW91c2VlbnRlcicpXHJcbiAgb25Nb3VzZUVudGVyKCk6IHZvaWQge1xyXG4gICAgdGhpcy5vcGVuTWVudSgpO1xyXG5cclxuICAgIC8vIEdldCB0aGUgbWVudSBlbGVtZW50IGJ5IElEIGFuZCBlbWl0IGl0IHRvIHRoZSBvYnNlcnZhYmxlXHJcbiAgICBjb25zdCBlbGVtZW50ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcihgIyR7dGhpcy5tZW51LnBhbmVsSWR9YCkgYXMgSFRNTERpdkVsZW1lbnQ7XHJcbiAgICBpZiAoZWxlbWVudCkge1xyXG4gICAgICB0aGlzLm1lbnVFbGVtZW50JC5uZXh0KGVsZW1lbnQpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignbW91c2VsZWF2ZScpXHJcbiAgb25Nb3VzZUxlYXZlKCk6IHZvaWQge1xyXG4gICAgdGhpcy5jbG9zZU1lbnUoKTtcclxuICB9XHJcblxyXG4gIGNvbnN0cnVjdG9yKEBTZWxmKCkgcHJpdmF0ZSBtYXRNZW51VHJpZ2dlcjogTWF0TWVudVRyaWdnZXIpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIC8vIEVuc3VyZSBNYXRNZW51VHJpZ2dlciBpcyBwcmVzZW50XHJcbiAgICBpZiAoIXRoaXMubWF0TWVudVRyaWdnZXIpIHtcclxuICAgICAgY29uc29sZS5lcnJvcignVGhlcmUgbXVzdCBiZSBhIE1hdE1lbnVUcmlnZ2VyIHByZXNlbnQuJyk7XHJcbiAgICAgIHJldHVybjtcclxuICAgIH1cclxuXHJcbiAgICAvLyBBc3NpZ24gdGhlIG1lbnUgYW5kIGRpc2FibGUgYmFja2Ryb3BcclxuICAgIHRoaXMubWVudSA9IHRoaXMubWF0TWVudVRyaWdnZXIubWVudTtcclxuICAgIHRoaXMubWVudS5oYXNCYWNrZHJvcCA9IGZhbHNlO1xyXG5cclxuICAgIC8vIFN1YnNjcmliZSB0byBtb3VzZWxlYXZlIGV2ZW50IG9uIHRoZSBtZW51IGVsZW1lbnQgdG8gY2xvc2UgdGhlIG1lbnVcclxuICAgIHRoaXMubWVudUVsZW1lbnQkLnBpcGUoXHJcbiAgICAgIHRha2VVbnRpbERlc3Ryb3llZCh0aGlzLmRlc3Ryb3lSZWYpLFxyXG4gICAgICBmaWx0ZXIoZWxlbWVudCA9PiAhIWVsZW1lbnQpLFxyXG4gICAgICBtZXJnZU1hcChlbGVtZW50ID0+IGZyb21FdmVudChlbGVtZW50LCAnbW91c2VsZWF2ZScpKSxcclxuICAgICAgdGFwKCgpID0+IHRoaXMuY2xvc2VNZW51KCkpXHJcbiAgICApXHJcbiAgICAgIC5zdWJzY3JpYmUoKTtcclxuXHJcbiAgICAvLyBTdWJzY3JpYmUgdG8gbW91c2VlbnRlciBldmVudCBvbiB0aGUgbWVudSBlbGVtZW50IHRvIG9wZW4gdGhlIG1lbnVcclxuICAgIHRoaXMubWVudUVsZW1lbnQkLnBpcGUoXHJcbiAgICAgIHRha2VVbnRpbERlc3Ryb3llZCh0aGlzLmRlc3Ryb3lSZWYpLFxyXG4gICAgICBmaWx0ZXIoZWxlbWVudCA9PiAhIWVsZW1lbnQpLFxyXG4gICAgICBtZXJnZU1hcChlbGVtZW50ID0+IGZyb21FdmVudChlbGVtZW50LCAnbW91c2VlbnRlcicpKSxcclxuICAgICAgdGFwKCgpID0+IHRoaXMub3Blbk1lbnUoKSlcclxuICAgIClcclxuICAgICAgLnN1YnNjcmliZSgpO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBjbG9zZU1lbnUoKTogdm9pZCB7XHJcbiAgICB0aGlzLmNsb3NlciA9IHNldFRpbWVvdXQoKCkgPT4ge1xyXG4gICAgICB0aGlzLm1hdE1lbnVUcmlnZ2VyLmNsb3NlTWVudSgpO1xyXG4gICAgfSwgdGhpcy5jbG9zZURlbGF5KTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgb3Blbk1lbnUoKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5jbG9zZXIpIHtcclxuICAgICAgY2xlYXJUaW1lb3V0KHRoaXMuY2xvc2VyKTtcclxuICAgIH1cclxuXHJcbiAgICB0aGlzLm1hdE1lbnVUcmlnZ2VyLm9wZW5NZW51KCk7XHJcbiAgfVxyXG59XHJcblxyXG4iXX0=

package/esm2022/ngx-mat-menu-hover.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LW1hdC1tZW51LWhvdmVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vcHJvamVjdHMvbWF0LW1lbnUtaG92ZXIvc3JjL25neC1tYXQtbWVudS1ob3Zlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpYy1hcGknO1xuIl19

package/esm2022/public-api.mjs

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of mat-menu-hover
+ */
+export * from './lib/mat-menu-hover.directive';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL21hdC1tZW51LWhvdmVyL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxnQ0FBZ0MsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXHJcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBtYXQtbWVudS1ob3ZlclxyXG4gKi9cclxuXHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL21hdC1tZW51LWhvdmVyLmRpcmVjdGl2ZSc7XHJcblxyXG4iXX0=

package/fesm2022/ngx-mat-menu-hover.mjs

@@ -0,0 +1,94 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, EventEmitter, Directive, Self, Input, Output, HostListener } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { BehaviorSubject, filter, mergeMap, fromEvent, tap } from 'rxjs';
+import * as i1 from '@angular/material/menu';
+
+/**
+ * Directive to handle hover menu behavior.
+ */
+class MatMenuHoverDirective {
+    onMouseEnter() {
+        this.openMenu();
+        // Get the menu element by ID and emit it to the observable
+        const element = document.querySelector(`#${this.menu.panelId}`);
+        if (element) {
+            this.menuElement$.next(element);
+        }
+    }
+    onMouseLeave() {
+        this.closeMenu();
+    }
+    constructor(matMenuTrigger) {
+        this.matMenuTrigger = matMenuTrigger;
+        this.destroyRef = inject(DestroyRef);
+        this.menuElement$ = new BehaviorSubject(null); // Observable for menu element
+        /**
+        * Delay (in milliseconds) before closing the menu after mouseleave.
+        */
+        this.closeDelay = 50; // Delay before closing the menu on mouseleave
+        /**
+       * Event emitter for notifying when the menu is opened.
+       */
+        this.opened = new EventEmitter();
+    }
+    ngOnInit() {
+        // Ensure MatMenuTrigger is present
+        if (!this.matMenuTrigger) {
+            console.error('There must be a MatMenuTrigger present.');
+            return;
+        }
+        // Assign the menu and disable backdrop
+        this.menu = this.matMenuTrigger.menu;
+        this.menu.hasBackdrop = false;
+        // Subscribe to mouseleave event on the menu element to close the menu
+        this.menuElement$.pipe(takeUntilDestroyed(this.destroyRef), filter(element => !!element), mergeMap(element => fromEvent(element, 'mouseleave')), tap(() => this.closeMenu()))
+            .subscribe();
+        // Subscribe to mouseenter event on the menu element to open the menu
+        this.menuElement$.pipe(takeUntilDestroyed(this.destroyRef), filter(element => !!element), mergeMap(element => fromEvent(element, 'mouseenter')), tap(() => this.openMenu()))
+            .subscribe();
+    }
+    closeMenu() {
+        this.closer = setTimeout(() => {
+            this.matMenuTrigger.closeMenu();
+        }, this.closeDelay);
+    }
+    openMenu() {
+        if (this.closer) {
+            clearTimeout(this.closer);
+        }
+        this.matMenuTrigger.openMenu();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MatMenuHoverDirective, deps: [{ token: i1.MatMenuTrigger, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: MatMenuHoverDirective, isStandalone: true, selector: "[matHoverMenu]", inputs: { closeDelay: "closeDelay" }, outputs: { opened: "opened" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MatMenuHoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matHoverMenu]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1.MatMenuTrigger, decorators: [{
+                    type: Self
+                }] }], propDecorators: { closeDelay: [{
+                type: Input
+            }], opened: [{
+                type: Output
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+/*
+ * Public API Surface of mat-menu-hover
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MatMenuHoverDirective };
+//# sourceMappingURL=ngx-mat-menu-hover.mjs.map

package/fesm2022/ngx-mat-menu-hover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-mat-menu-hover.mjs","sources":["../../../projects/mat-menu-hover/src/lib/mat-menu-hover.directive.ts","../../../projects/mat-menu-hover/src/public-api.ts","../../../projects/mat-menu-hover/src/ngx-mat-menu-hover.ts"],"sourcesContent":["import { DestroyRef, Directive, EventEmitter, HostListener, Input, OnInit, Output, Self, inject } from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu';\r\nimport { BehaviorSubject, filter, fromEvent, mergeMap, tap } from 'rxjs';\r\n\r\n/**\r\n * Directive to handle hover menu behavior.\r\n */\r\n@Directive({\r\n  selector: '[matHoverMenu]',\r\n  standalone: true\r\n})\r\nexport class MatMenuHoverDirective implements OnInit {\r\n  private destroyRef = inject(DestroyRef);\r\n  private menu: MatMenuPanel<any>; // Reference to the MatMenuPanel\r\n  private menuElement$ = new BehaviorSubject<HTMLDivElement>(null); // Observable for menu element\r\n  private closer: any;\r\n\r\n  /**\r\n  * Delay (in milliseconds) before closing the menu after mouseleave.\r\n  */\r\n  @Input() closeDelay = 50; // Delay before closing the menu on mouseleave\r\n\r\n  /**\r\n * Event emitter for notifying when the menu is opened.\r\n */\r\n  @Output() opened = new EventEmitter<boolean>();\r\n\r\n  @HostListener('mouseenter')\r\n  onMouseEnter(): void {\r\n    this.openMenu();\r\n\r\n    // Get the menu element by ID and emit it to the observable\r\n    const element = document.querySelector(`#${this.menu.panelId}`) as HTMLDivElement;\r\n    if (element) {\r\n      this.menuElement$.next(element);\r\n    }\r\n  }\r\n\r\n  @HostListener('mouseleave')\r\n  onMouseLeave(): void {\r\n    this.closeMenu();\r\n  }\r\n\r\n  constructor(@Self() private matMenuTrigger: MatMenuTrigger) { }\r\n\r\n  ngOnInit(): void {\r\n    // Ensure MatMenuTrigger is present\r\n    if (!this.matMenuTrigger) {\r\n      console.error('There must be a MatMenuTrigger present.');\r\n      return;\r\n    }\r\n\r\n    // Assign the menu and disable backdrop\r\n    this.menu = this.matMenuTrigger.menu;\r\n    this.menu.hasBackdrop = false;\r\n\r\n    // Subscribe to mouseleave event on the menu element to close the menu\r\n    this.menuElement$.pipe(\r\n      takeUntilDestroyed(this.destroyRef),\r\n      filter(element => !!element),\r\n      mergeMap(element => fromEvent(element, 'mouseleave')),\r\n      tap(() => this.closeMenu())\r\n    )\r\n      .subscribe();\r\n\r\n    // Subscribe to mouseenter event on the menu element to open the menu\r\n    this.menuElement$.pipe(\r\n      takeUntilDestroyed(this.destroyRef),\r\n      filter(element => !!element),\r\n      mergeMap(element => fromEvent(element, 'mouseenter')),\r\n      tap(() => this.openMenu())\r\n    )\r\n      .subscribe();\r\n  }\r\n\r\n  private closeMenu(): void {\r\n    this.closer = setTimeout(() => {\r\n      this.matMenuTrigger.closeMenu();\r\n    }, this.closeDelay);\r\n  }\r\n\r\n  private openMenu(): void {\r\n    if (this.closer) {\r\n      clearTimeout(this.closer);\r\n    }\r\n\r\n    this.matMenuTrigger.openMenu();\r\n  }\r\n}\r\n\r\n","/*\r\n * Public API Surface of mat-menu-hover\r\n */\r\n\r\nexport * from './lib/mat-menu-hover.directive';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="ngx-mat-menu-hover" />
+export * from './public-api';

package/lib/mat-menu-hover.directive.d.ts

@@ -0,0 +1,29 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { MatMenuTrigger } from '@angular/material/menu';
+import * as i0 from "@angular/core";
+/**
+ * Directive to handle hover menu behavior.
+ */
+export declare class MatMenuHoverDirective implements OnInit {
+    private matMenuTrigger;
+    private destroyRef;
+    private menu;
+    private menuElement$;
+    private closer;
+    /**
+    * Delay (in milliseconds) before closing the menu after mouseleave.
+    */
+    closeDelay: number;
+    /**
+   * Event emitter for notifying when the menu is opened.
+   */
+    opened: EventEmitter<boolean>;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    constructor(matMenuTrigger: MatMenuTrigger);
+    ngOnInit(): void;
+    private closeMenu;
+    private openMenu;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatMenuHoverDirective, [{ self: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatMenuHoverDirective, "[matHoverMenu]", never, { "closeDelay": { "alias": "closeDelay"; "required": false; }; }, { "opened": "opened"; }, never, never, true, never>;
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "ngx-mat-menu-hover",
+  "version": "1.0.0",
+  "peerDependencies": {
+    "@angular/common": "^17.2.0",
+    "@angular/core": "^17.2.0",
+    "@angular/material": "^17.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ngx-mat-menu-hover.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/ngx-mat-menu-hover.mjs",
+      "esm": "./esm2022/ngx-mat-menu-hover.mjs",
+      "default": "./fesm2022/ngx-mat-menu-hover.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1 @@
+export * from './lib/mat-menu-hover.directive';