@dotglitch/ngx-common 1.0.3 → 1.0.7

package/fesm2020/dotglitch-ngx-common.mjs

@@ -174,6 +174,7 @@ class TooltipComponent {
         this.dialogRef = dialogRef;
         this.hasBootstrapped = false;
         this.pointerIsOnVoid = false;
+        this.isLockedOpen = false;
         this.coverRectCords = {
             top: 0,
             left: 0,
@@ -207,7 +208,7 @@ class TooltipComponent {
             this.hasBootstrapped = true;
             if (this.pointerIsOnVoid)
                 this.dialogRef.close();
-        }, 10);
+        }, 200);
     }
     /**
      * Close the tooltip if these actions occur
@@ -218,9 +219,13 @@ class TooltipComponent {
     onPointerLeave() {
         this.dialogRef?.close();
     }
+    closeOnVoid() {
+        console.log("fuck you");
+        this.dialogRef.close();
+    }
 }
 TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ViewContainerRef }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1.MatDialog, optional: true }, { token: i1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TooltipComponent, isStandalone: true, selector: "ngx-tooltip", inputs: { data: "data", config: "config", ownerCords: "ownerCords", selfCords: "selfCords", template: "template" }, host: { listeners: { "window:resize": "onClose()", "window:blur": "onClose()", "pointerleave": "onPointerLeave()" } }, ngImport: i0, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n    *ngIf=\"coverRectCords\"\n    class=\"owner-mask\"\n    [style.top]=\"coverRectCords.top + 'px'\"\n    [style.left]=\"coverRectCords.left + 'px'\"\n    [style.height]=\"coverRectCords.height + 'px'\"\n    [style.width]=\"coverRectCords.width + 'px'\"\n    style=\"z-index: -1;\"\n></div>\n\n<div class=\"void\"\n    (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && dialogRef.close()\"\n    (pointerleave)=\"pointerIsOnVoid = false\"\n    (pointerdown)=\"hasBootstrapped && dialogRef.close()\"\n></div>\n\n<div class=\"container\">\n    <ng-container\n        *ngIf=\"isTemplate == false\"\n        [ngComponentOutlet]=\"$any(template)\"\n    >\n    </ng-container>\n\n    <ng-container\n        *ngIf=\"isTemplate == true\"\n    >\n        <ng-container\n            [ngTemplateOutlet]=\"$any(template)\"\n            [ngTemplateOutletContext]=\"{ '$implicit': data }\"\n        ></ng-container>\n    </ng-container>\n</div>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-tooltip{--mdc-dialog-container-color: var(--ngx-tooltip-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__surface{overflow:visible;background-color:#0000}::ng-deep .cdk-overlay-container .context-menu-backdrop.cdk-overlay-backdrop-showing{opacity:0}::ng-deep .cdk-overlay-pane.ngx-tooltip .mat-dialog-container{padding:0}:host{min-width:2px;min-height:2px;display:block}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: 
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TooltipComponent, isStandalone: true, selector: "ngx-tooltip", inputs: { data: "data", config: "config", ownerCords: "ownerCords", selfCords: "selfCords", template: "template" }, host: { listeners: { "window:resize": "onClose()", "window:blur": "onClose()", "pointerleave": "onPointerLeave()" } }, ngImport: i0, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n    *ngIf=\"coverRectCords\"\n    class=\"owner-mask\"\n    [style.top]=\"coverRectCords.top + 'px'\"\n    [style.left]=\"coverRectCords.left + 'px'\"\n    [style.height]=\"coverRectCords.height + 'px'\"\n    [style.width]=\"coverRectCords.width + 'px'\"\n    style=\"z-index: -1;\"\n></div>\n\n<div class=\"void\"\n    (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n    (pointerleave)=\"pointerIsOnVoid = false\"\n    (pointerdown)=\"hasBootstrapped && dialogRef.close()\"\n></div>\n\n<div class=\"container\">\n    <ng-container\n        *ngIf=\"isTemplate == false\"\n        [ngComponentOutlet]=\"$any(template)\"\n    >\n    </ng-container>\n\n    <ng-container\n        *ngIf=\"isTemplate == true\"\n    >\n        <ng-container\n            [ngTemplateOutlet]=\"$any(template)\"\n            [ngTemplateOutletContext]=\"{ '$implicit': data }\"\n        ></ng-container>\n    </ng-container>\n</div>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-tooltip{--mdc-dialog-container-color: var(--ngx-tooltip-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__surface{overflow:visible;background-color:#0000}::ng-deep .cdk-overlay-container .context-menu-backdrop.cdk-overlay-backdrop-showing{opacity:0}::ng-deep .cdk-overlay-pane.ngx-tooltip .mat-dialog-container{padding:0}:host{min-width:2px;min-height:2px;display:block}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: 
             // NgIf,
             // NgTemplateOutlet,
             // NgComponentOutlet,
@@ -232,7 +237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         // NgTemplateOutlet,
                         // NgComponentOutlet,
                         CommonModule,
-                    ], standalone: true, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n    *ngIf=\"coverRectCords\"\n    class=\"owner-mask\"\n    [style.top]=\"coverRectCords.top + 'px'\"\n    [style.left]=\"coverRectCords.left + 'px'\"\n    [style.height]=\"coverRectCords.height + 'px'\"\n    [style.width]=\"coverRectCords.width + 'px'\"\n    style=\"z-index: -1;\"\n></div>\n\n<div class=\"void\"\n    (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && dialogRef.close()\"\n    (pointerleave)=\"pointerIsOnVoid = false\"\n    (pointerdown)=\"hasBootstrapped && dialogRef.close()\"\n></div>\n\n<div class=\"container\">\n    <ng-container\n        *ngIf=\"isTemplate == false\"\n        [ngComponentOutlet]=\"$any(template)\"\n    >\n    </ng-container>\n\n    <ng-container\n        *ngIf=\"isTemplate == true\"\n    >\n        <ng-container\n            [ngTemplateOutlet]=\"$any(template)\"\n            [ngTemplateOutletContext]=\"{ '$implicit': data }\"\n        ></ng-container>\n    </ng-container>\n</div>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-tooltip{--mdc-dialog-container-color: var(--ngx-tooltip-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__surface{overflow:visible;background-color:#0000}::ng-deep .cdk-overlay-container .context-menu-backdrop.cdk-overlay-backdrop-showing{opacity:0}::ng-deep .cdk-overlay-pane.ngx-tooltip .mat-dialog-container{padding:0}:host{min-width:2px;min-height:2px;display:block}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"] }]
+                    ], standalone: true, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n    *ngIf=\"coverRectCords\"\n    class=\"owner-mask\"\n    [style.top]=\"coverRectCords.top + 'px'\"\n    [style.left]=\"coverRectCords.left + 'px'\"\n    [style.height]=\"coverRectCords.height + 'px'\"\n    [style.width]=\"coverRectCords.width + 'px'\"\n    style=\"z-index: -1;\"\n></div>\n\n<div class=\"void\"\n    (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n    (pointerleave)=\"pointerIsOnVoid = false\"\n    (pointerdown)=\"hasBootstrapped && dialogRef.close()\"\n></div>\n\n<div class=\"container\">\n    <ng-container\n        *ngIf=\"isTemplate == false\"\n        [ngComponentOutlet]=\"$any(template)\"\n    >\n    </ng-container>\n\n    <ng-container\n        *ngIf=\"isTemplate == true\"\n    >\n        <ng-container\n            [ngTemplateOutlet]=\"$any(template)\"\n            [ngTemplateOutletContext]=\"{ '$implicit': data }\"\n        ></ng-container>\n    </ng-container>\n</div>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-tooltip{--mdc-dialog-container-color: var(--ngx-tooltip-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__surface{overflow:visible;background-color:#0000}::ng-deep .cdk-overlay-container .context-menu-backdrop.cdk-overlay-backdrop-showing{opacity:0}::ng-deep .cdk-overlay-pane.ngx-tooltip .mat-dialog-container{padding:0}:host{min-width:2px;min-height:2px;display:block}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -275,20 +280,47 @@ class TooltipDirective {
          * Arbitrary data to pass into the template
          */
         this.data = {};
+        this.isCursorOverTarget = false;
+        this.isFreezeOnKeyCodeBound = false;
+        this.onKeyDownEvt = this.onKeyDown.bind(this);
+        if (this.config.freezeOnKeyCode !== null) {
+            this.isFreezeOnKeyCodeBound = true;
+            document.body.addEventListener("keydown", this.onKeyDownEvt);
+        }
     }
-    ngOnInit() {
+    ngOnDestroy() {
+        if (this.isFreezeOnKeyCodeBound) {
+            document.body.removeEventListener("keydown", this.onKeyDownEvt);
+        }
+    }
+    onKeyDown(evt) {
+        // TODO: fade message 'tooltip is locked open'
+        if (evt.code == ("F2")) {
+            this.dialogInstance.componentInstance.isLockedOpen = true;
+        }
     }
     // Needs to be public so we can manually open the dialog
     async onPointerEnter(evt) {
         // If the template is not a template ref, do nothing.
         if (!(this.template instanceof TemplateRef))
             return;
-        const el = this.viewContainer.element.nativeElement;
-        this.dialogInstance = await openTooltip(this.dialog, this.template, this.data, el, this.config);
+        this.isCursorOverTarget = true;
+        setTimeout(async () => {
+            // If the cursor moved away in the time
+            if (!this.isCursorOverTarget)
+                return;
+            if (!this.dialogInstance) {
+                const el = this.viewContainer.element.nativeElement;
+                this.dialogInstance = await openTooltip(this.dialog, this.template, this.data, el, this.config);
+            }
+        }, this.config.delay ?? 250);
+    }
+    async onPointerLeave(evt) {
+        this.isCursorOverTarget = false;
     }
 }
 TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipDirective, deps: [{ token: i1.MatDialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TooltipDirective, isStandalone: true, selector: "[ngxTooltip],[ngx-tooltip]", inputs: { template: ["ngx-tooltip", "template"], config: ["ngx-tooltip-config", "config"], data: ["ngx-tooltip-context", "data"] }, host: { listeners: { "pointerenter": "onPointerEnter($event)" } }, providers: [
+TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TooltipDirective, isStandalone: true, selector: "[ngxTooltip],[ngx-tooltip]", inputs: { template: ["ngx-tooltip", "template"], config: ["ngx-tooltip-config", "config"], data: ["ngx-tooltip-context", "data"] }, host: { listeners: { "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)" } }, providers: [
         MatDialog
     ], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipDirective, decorators: [{
@@ -321,6 +353,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }], onPointerEnter: [{
                 type: HostListener,
                 args: ['pointerenter', ['$event']]
+            }], onPointerLeave: [{
+                type: HostListener,
+                args: ['pointerleave', ['$event']]
             }] } });
 // Helper to open the context menu without using the directive.
 const openTooltip = async (dialog, template, data, el, config) => {
@@ -482,10 +517,10 @@ class MenuComponent {
                 }
         });
         // Show the icon column if there are any items with an icon
-        this.showIconColumn = !!this.items.find(i => typeof i == "object" &&
+        this.showIconColumn = !!this.items?.find(i => typeof i == "object" &&
             typeof i['icon'] == "string" &&
             i['icon'].length > 2);
-        this.showShortcutColumn = !!this.items.find(i => typeof i == "object" &&
+        this.showShortcutColumn = !!this.items?.find(i => typeof i == "object" &&
             typeof i['shortcut'] == "string" &&
             i['shortcut'].length > 2);
         // setTimeout(() => {
@@ -672,7 +707,6 @@ class MenuDirective {
             });
         }
         if (!this.config?.trigger) {
-            el.onclick = this.openMenu.bind(this);
             el.addEventListener('click', this.openMenu.bind(this));
         }
         else {
@@ -693,7 +727,7 @@ class MenuDirective {
     async openMenu(evt) {
         const el = this.viewContainer.element.nativeElement;
         el.classList.add("ngx-menu-open");
-        return openMenu(this.dialog, this.menuItems, this.data, evt, this.config)
+        return openMenu(this.dialog, this.menuItems, this.data, evt, this.config, el)
             .then((...res) => {
             el.classList.remove("ngx-menu-open");
             return res;
@@ -705,36 +739,48 @@ class MenuDirective {
     }
 }
 MenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuDirective, deps: [{ token: i1.MatDialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-MenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: MenuDirective, isStandalone: true, selector: "[ngx-ctxmenu],[ngx-menu]", inputs: { data: ["ngx-menu-context", "data"], ctxMenuItems: ["ngx-ctxmenu", "ctxMenuItems"], menuItems: ["ngx-menu", "menuItems"], config: ["ngx-menu-config", "config"] }, providers: [
+MenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: MenuDirective, isStandalone: true, selector: "[ngx-contextmenu],[ngx-menu],[ngxContextmenu],[ngxMenu]", inputs: { data: ["ngx-menu-context", "data"], ctxMenuItems: ["ngx-contextmenu", "ctxMenuItems"], menuItems: ["ngx-menu", "menuItems"], config: ["ngx-menu-config", "config"] }, providers: [
         MatDialog
     ], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ngx-ctxmenu],[ngx-menu]',
+                    selector: '[ngx-contextmenu],[ngx-menu],[ngxContextmenu],[ngxMenu]',
                     providers: [
                         MatDialog
                     ],
                     standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.ViewContainerRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ["ngxMenuContext"]
+            }, {
                 type: Input,
                 args: ["ngx-menu-context"]
             }], ctxMenuItems: [{
                 type: Input,
-                args: ["ngx-ctxmenu"]
+                args: ["ngxContextmenu"]
+            }, {
+                type: Input,
+                args: ["ngx-contextmenu"]
             }], menuItems: [{
+                type: Input,
+                args: ["ngxMenu"]
+            }, {
                 type: Input,
                 args: ["ngx-menu"]
             }], config: [{
+                type: Input,
+                args: ["ngxMenuConfig"]
+            }, {
                 type: Input,
                 args: ["ngx-menu-config"]
             }] } });
-// Helper to open the context menu without using the directive.
-const openMenu = async (dialog, menuItems, data, evt, config = {}) => {
+// Helper to open the menu without using the directive.
+const openMenu = async (dialog, menuItems, data, evt, config = {}, el) => {
     evt.preventDefault();
     evt.stopPropagation();
-    const cords = getPosition(evt, config, await calcMenuItemBounds(menuItems, data));
+    const cords = getPosition(el || evt, config, await calcMenuItemBounds(menuItems, data));
     const specificId = crypto.randomUUID();
     if (!config.alignment)
         config.alignment = "start";
@@ -1966,7 +2012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Public API Surface of package
  */
 /**
- ** Directives
+ ** Types
  */
 
 /**