@dotglitch/ngx-common 1.1.35 → 1.1.36

package/fesm2022/dotglitch-ngx-common.mjs

@@ -1,18 +1,18 @@
 import * as i0 from '@angular/core';
 import { TemplateRef, Component, Optional, Inject, Input, HostListener, Directive, InjectionToken, Pipe, Injectable, EventEmitter, isDevMode, ViewContainerRef, ViewChild, Output, NgModule, ViewEncapsulation, SecurityContext, ContentChild, ViewChildren } from '@angular/core';
-import * as i1 from '@angular/material/dialog';
+import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 import { NgTemplateOutlet, NgComponentOutlet, DOCUMENT, NgIf, NgForOf, DatePipe } from '@angular/common';
-import * as i1$1 from '@angular/platform-browser';
+import * as i1 from '@angular/platform-browser';
 import { createApplication } from '@angular/platform-browser';
 import { firstValueFrom, debounceTime, of, Subject, BehaviorSubject } from 'rxjs';
-import { ulid } from 'ulidx';
 import * as i3$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i5 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i3 from '@angular/cdk/portal';
 import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import { ulid } from 'ulidx';
 import { createInstance, INDEXEDDB } from 'localforage';
 import * as i2 from '@angular/cdk/dialog';
 import { retry } from 'rxjs/operators';
@@ -165,39 +165,31 @@ const getPosition = (el, config = {}, bounds) => {
 };
 
 const zone$1 = new Zone(Zone.current, { name: "@dotglitch_menu", properties: {} });
-const calcTooltipBounds = async (template, data, matDialogConfig) => {
-    const args = {
-        data: data || {},
-        template,
+const calcMenuItemBounds = async (menuItems, dataObj) => {
+    const data = {
+        data: dataObj,
+        items: menuItems,
         config: {},
         selfCords: { left: "0px", top: "0px" },
         ownerCords: { x: 0, y: 0, width: 0, height: 0 },
         id: null
     };
-    // dimensions should be in px... Might need to handle vw/v
-    if (matDialogConfig?.width && matDialogConfig?.height) {
-        return {
-            width: parseInt(matDialogConfig.width),
-            height: parseInt(matDialogConfig.height),
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0
-        };
-    }
+    return calcComponentBounds(MenuComponent, data);
+};
+const calcComponentBounds = async (component, data) => {
     return new Promise((res, rej) => {
         zone$1.run(async () => {
-            // Forcibly bootstrap the ctx menu outside of the client application's zone.
             const app = await createApplication({
                 providers: [
-                    { provide: MAT_DIALOG_DATA, useValue: args }
+                    { provide: MAT_DIALOG_DATA, useValue: data }
                 ]
             });
             const del = document.createElement("div");
+            del.classList.add("ngx-menu");
             del.style.position = "absolute";
             del.style.left = '-1000vw';
             document.body.append(del);
-            const base = app.bootstrap(TooltipComponent, del);
+            const base = app.bootstrap(component, del);
             const { instance } = base;
             await firstValueFrom(app.isStable);
             const el = instance.viewContainer?.element?.nativeElement;
@@ -208,53 +200,121 @@ const calcTooltipBounds = async (template, data, matDialogConfig) => {
         });
     });
 };
-class TooltipComponent {
-    constructor(viewContainer, _data, dialog, // optional only for the purpose of estimating dimensions
+const $data = Symbol("data");
+const $hover = Symbol("hover");
+class MenuComponent {
+    constructor(viewContainer, sanitizer, _data, dialog, // optional only for the purpose of estimating dimensions
     dialogRef) {
         this.viewContainer = viewContainer;
+        this.sanitizer = sanitizer;
         this._data = _data;
         this.dialog = dialog;
         this.dialogRef = dialogRef;
+        this.overlayOverlap = 32;
+        this.hoverDelay = 400;
+        this.showDebugOverlay = false;
+        this.isLockedOpen = false;
         this.hasBootstrapped = false;
         this.pointerIsOnVoid = false;
-        this.isLockedOpen = false;
-        this.clientWidth = window.innerWidth;
-        this.clientHeight = window.innerHeight;
+        this.pointerHasBeenOverMask = false;
+        this.parentIsNgxMenu = false;
         this.coverRectCords = {
             top: 0,
             left: 0,
             height: 0,
             width: 0
         };
+        // Check if there are any slashes or dots -- that will clearly exclude it from being a mat icon
+        this.matIconRx = /[\/\.]/i;
+        this.showIconColumn = true;
+        this.showShortcutColumn = true;
+        this.childDialogs = [];
         // Defaults are set before @Input() hooks evaluate
-        this.data = this.data || this._data?.data || {};
-        this.config = this.config || this._data?.config;
         this.dialog = this.dialog || this._data?.dialog;
-        this.template = this.template || this._data?.template;
-        this.ownerCords = this.ownerCords || this._data?.ownerCords;
-        this.selfCords = this.selfCords || this._data?.selfCords;
-        this.isLockedOpen = this._data?.isLockedOpen || this.config?.stayOpen;
+        this.data = this._data?.data;
+        this.ownerCords = this._data?.ownerCords;
+        this.selfCords = this._data?.selfCords;
+        this.items = this._data?.items;
+        this.config = this._data?.config;
+        this.id = this._data?.id;
+        this.parentItem = this._data?.parentItem;
+        this.parentContext = this._data?.parentContext;
+        this.isLockedOpen = this.isLockedOpen || this._data?.config?.['_isLockedOpen'];
+        this.parentIsNgxMenu = this._data?.parentIsNgxMenu;
+        this.targetBounds = this._data?.targetBounds;
+        this.template = _data.template;
+        this.templateType = this.template instanceof TemplateRef ? "template" : "component";
+        if (this.templateType == "component") {
+            this.componentPortal = new ComponentPortal(this.template);
+        }
     }
     ngOnInit() {
-        const selfY = parseInt(this.selfCords.top.replace('px', ''));
-        const selfX = parseInt(this.selfCords.left.replace('px', ''));
-        this.coverRectCords = {
-            top: this.ownerCords.y - selfY - 16,
-            left: this.ownerCords.x - selfX - 16,
-            height: this.ownerCords.height + 32,
-            width: this.ownerCords.width + 32
-        };
-        if (this.template instanceof TemplateRef)
-            this.isTemplate = true;
-        else if (typeof this.template == "function")
-            this.isTemplate = false;
-        else
-            throw new Error("Unrecognized template object provided.");
-        // TODO: resolve the event hook with the .void element
+        this.items?.forEach(i => {
+            if (typeof i == "string")
+                return;
+            // Set defaults
+            i['_disabled'] = false;
+            i['_visible'] = true;
+            i['_context'] = (typeof i.context == "function")
+                ? i.context(this.data)
+                : i.context;
+            if (i.label)
+                try {
+                    i['_formattedLabel'] = this.formatLabel(i.label);
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+            if (typeof i.isDisabled == "function")
+                try {
+                    i['_disabled'] = i.isDisabled(this.data || {}, i['_context']);
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+            if (typeof i.isVisible == "function")
+                try {
+                    i['_visible'] = i.isVisible(this.data || {}, i['_context']);
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+            if (typeof i.linkTemplate == "function")
+                try {
+                    i['_link'] = i.linkTemplate(this.data || {}, i['_context']);
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+            if (typeof i.iconTemplate == "function")
+                try {
+                    i['_icon'] = i.iconTemplate(this.data || {}, i['_context']);
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+        });
+        // Show the icon column if there are any items with an icon
+        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" &&
+            typeof i['shortcut'] == "string" &&
+            i['shortcut'].length > 2);
+        if (this.ownerCords) {
+            const selfY = parseInt(this.selfCords.top?.replace('px', '') || '0');
+            const selfX = parseInt(this.selfCords.left?.replace('px', '') || '0');
+            this.coverRectCords = {
+                top: this.ownerCords.y - selfY - (this.overlayOverlap / 2),
+                left: this.ownerCords.x - selfX - (this.overlayOverlap / 2),
+                height: this.ownerCords.height + this.overlayOverlap,
+                width: this.ownerCords.width + this.overlayOverlap
+            };
+        }
+        if (this.config?.stayOpen)
+            this.isLockedOpen = true;
         setTimeout(() => {
             this.hasBootstrapped = true;
-            if (this.pointerIsOnVoid && !this.isLockedOpen)
-                this.dialogRef.close();
         }, 200);
     }
     ngAfterViewInit() {
@@ -269,367 +329,12 @@ class TooltipComponent {
             this.isLockedOpen = true;
         });
     }
-    onKeyDown(evt) {
-        if (this.config.freezeOnKeyCode) {
-            if (evt.code == this.config.freezeOnKeyCode)
-                this.isLockedOpen = true;
-        }
-    }
-    onVoidPointerDown(evt) {
-        if (!this.isLockedOpen) {
-            const el = this.viewContainer.element.nativeElement;
-            el.querySelector(".void").remove();
-            setTimeout(() => {
-                const clonedEvt = new PointerEvent("pointerdown", evt);
-                const target = document.elementFromPoint(evt.clientX, evt.clientY);
-                console.log("DEBUG EVENTS", { evt, clonedEvt });
-                target.dispatchEvent(clonedEvt);
-            }, 15);
-        }
-        this.closeOnVoid(true);
-    }
-    // If the void element gets stuck open, make wheel events pass through.
-    onWheel(evt) {
-        const el = this.viewContainer.element.nativeElement;
-        el.style.display = "none";
-        const target = document.elementFromPoint(evt.clientX, evt.clientY);
-        el.style.display = "block";
-        target.scroll({
-            top: evt.deltaY + target.scrollTop,
-            left: evt.deltaX + target.scrollLeft,
-            behavior: "smooth"
-        });
+    ngOnDestroy() {
+        //
+        this.childDialogs.forEach(d => d.close({ [$data]: true }));
     }
     /**
-     * Close the tooltip if these actions occur
-     */
-    onClose() {
-        if (!this.isLockedOpen)
-            this.dialogRef?.close();
-        this.clientWidth = window.innerWidth;
-        this.clientHeight = window.innerHeight;
-    }
-    closeOnVoid(force = false) {
-        if (!this.isLockedOpen || force)
-            this.dialogRef.close();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", 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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: TooltipComponent, isStandalone: true, selector: "ngx-tooltip", inputs: { data: "data", config: "config", ownerCords: "ownerCords", selfCords: "selfCords", template: "template" }, host: { listeners: { "window:keydown": "onKeyDown($event)", "window:resize": "onClose()", "window:blur": "onClose()", "pointerleave": "onClose()" } }, ngImport: i0, template: "<!-- Mouse event blocker for pointer leave -->\n@if (coverRectCords) {\n    <!-- <div\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        (pointerdown)=\"onVoidPointerDown($event)\"\n    ></div> -->\n\n    <div class=\"void left\"\n        [style.top]=\"'0px'\"\n        [style.left]=\"'0px'\"\n        [style.height]=\"'100%'\"\n        [style.width]=\"(ownerCords.left) + 'px'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"onVoidPointerDown($event)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n    <div class=\"void top\"\n        [style.top]=\"'0px'\"\n        [style.left]=\"ownerCords.left + 'px'\"\n        [style.height]=\"ownerCords.top + 'px'\"\n        [style.width]=\"ownerCords.width + 'px'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"onVoidPointerDown($event)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n    <div class=\"void right\"\n        [style.top]=\"'0px'\"\n        [style.left]=\"(ownerCords.left + ownerCords.width) + 'px'\"\n        [style.height]=\"'100%'\"\n        [style.width]=\"(clientWidth - (ownerCords.left + ownerCords.width)) + 'px'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"onVoidPointerDown($event)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n    <div class=\"void\"\n        [style.top]=\"(ownerCords.top + ownerCords.height) + 'px'\"\n        [style.left]=\"ownerCords.left + 'px'\"\n        [style.height]=\"(clientHeight - (ownerCords.top + ownerCords.height)) + 'px'\"\n        [style.width]=\"ownerCords.width + 'px'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"onVoidPointerDown($event)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n}\n\n\n<div\n    #container\n    class=\"container\"\n>\n    @if (isTemplate) {\n        <ng-container\n            [ngTemplateOutlet]=\"$any(template)\"\n            [ngTemplateOutletContext]=\"{\n                '$implicit': data,\n                'dialog': dialogRef,\n                'element': container,\n                'tooltip': this\n            }\"\n        ></ng-container>\n    }\n    @else {\n        <ng-container\n            [ngComponentOutlet]=\"$any(template)\"\n        >\n        </ng-container>\n    }\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;position:fixed}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TooltipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-tooltip', imports: [
-                        NgTemplateOutlet,
-                        NgComponentOutlet
-                    ], standalone: true, template: "<!-- Mouse event blocker for pointer leave -->\n@if (coverRectCords) {\n    <!-- <div\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        (pointerdown)=\"onVoidPointerDown($event)\"\n    ></div> -->\n\n    <div class=\"void left\"\n        [style.top]=\"'0px'\"\n        [style.left]=\"'0px'\"\n        [style.height]=\"'100%'\"\n        [style.width]=\"(ownerCords.left) + 'px'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"onVoidPointerDown($event)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n    <div class=\"void top\"\n        [style.top]=\"'0px'\"\n        [style.left]=\"ownerCords.left + 'px'\"\n        [style.height]=\"ownerCords.top + 'px'\"\n        [style.width]=\"ownerCords.width + 'px'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"onVoidPointerDown($event)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n    <div class=\"void right\"\n        [style.top]=\"'0px'\"\n        [style.left]=\"(ownerCords.left + ownerCords.width) + 'px'\"\n        [style.height]=\"'100%'\"\n        [style.width]=\"(clientWidth - (ownerCords.left + ownerCords.width)) + 'px'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"onVoidPointerDown($event)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n    <div class=\"void\"\n        [style.top]=\"(ownerCords.top + ownerCords.height) + 'px'\"\n        [style.left]=\"ownerCords.left + 'px'\"\n        [style.height]=\"(clientHeight - (ownerCords.top + ownerCords.height)) + 'px'\"\n        [style.width]=\"ownerCords.width + 'px'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"onVoidPointerDown($event)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n}\n\n\n<div\n    #container\n    class=\"container\"\n>\n    @if (isTemplate) {\n        <ng-container\n            [ngTemplateOutlet]=\"$any(template)\"\n            [ngTemplateOutletContext]=\"{\n                '$implicit': data,\n                'dialog': dialogRef,\n                'element': container,\n                'tooltip': this\n            }\"\n        ></ng-container>\n    }\n    @else {\n        <ng-container\n            [ngComponentOutlet]=\"$any(template)\"\n        >\n        </ng-container>\n    }\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;position:fixed}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialog, decorators: [{
-                    type: Optional
-                }] }, { type: i1.MatDialogRef, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { data: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], ownerCords: [{
-                type: Input
-            }], selfCords: [{
-                type: Input
-            }], template: [{
-                type: Input
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ["window:keydown", ['$event']]
-            }], onClose: [{
-                type: HostListener,
-                args: ["window:resize"]
-            }, {
-                type: HostListener,
-                args: ["window:blur"]
-            }, {
-                type: HostListener,
-                args: ["pointerleave"]
-            }] } });
-
-class TooltipDirective {
-    constructor(dialog, viewContainer) {
-        this.dialog = dialog;
-        this.viewContainer = viewContainer;
-        /**
-         * Configuration for opening the app menu
-         */
-        this.config = {};
-        /**
-         * Arbitrary data to pass into the template
-         */
-        this.data = {};
-        this.isCursorOverTarget = false;
-        this.dialogIsOpen = false;
-    }
-    ngAfterViewInit() {
-        const el = this.viewContainer.element.nativeElement;
-        this.config?.triggers?.forEach(t => {
-            el.addEventListener(t, () => {
-                if (t == "click")
-                    this.config.stayOpen = true;
-                this.open();
-            });
-        });
-    }
-    async open() {
-        if (!this.dialogIsOpen) {
-            const el = this.viewContainer.element.nativeElement;
-            this.dialogIsOpen = true;
-            await openTooltip(this.dialog, this.template, this.data, el, this.config);
-            this.dialogIsOpen = false;
-        }
-    }
-    async onPointerEnter(evt) {
-        // If the template is not a template ref, do nothing.
-        if (!(this.template instanceof TemplateRef))
-            return;
-        if (Array.isArray(this.config?.triggers) && !this.config.triggers.includes("hover")) {
-            return;
-        }
-        this.isCursorOverTarget = true;
-        setTimeout(async () => {
-            // If the cursor moved away in the time
-            if (!this.isCursorOverTarget)
-                return;
-            this.open();
-        }, this.config.delay ?? 250);
-    }
-    async onPointerLeave(evt) {
-        this.isCursorOverTarget = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TooltipDirective, deps: [{ token: i1.MatDialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: TooltipDirective, isStandalone: true, selector: "[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: "17.1.2", ngImport: i0, type: TooltipDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngx-tooltip]',
-                    providers: [
-                        MatDialog
-                    ],
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i0.ViewContainerRef }], propDecorators: { template: [{
-                type: Input,
-                args: ["ngx-tooltip"]
-            }], config: [{
-                type: Input,
-                args: ["ngx-tooltip-config"]
-            }], data: [{
-                type: Input,
-                args: ["ngx-tooltip-context"]
-            }], 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, focusTrap = false, matPopupOptions) => {
-    const rect = await calcTooltipBounds(template, data, matPopupOptions);
-    const ownerCords = el.getBoundingClientRect();
-    const cords = getPosition(el, config, rect);
-    const specificId = ulid();
-    return firstValueFrom(dialog.open(TooltipComponent, {
-        autoFocus: focusTrap,
-        restoreFocus: focusTrap,
-        data: {
-            dialog,
-            data: data,
-            template: template,
-            config: config,
-            matPopupOptions,
-            ownerCords: ownerCords,
-            selfCords: cords,
-            id: specificId
-        },
-        panelClass: ["ngx-tooltip", 'ngx-' + specificId].concat(config?.customClass || []),
-        position: cords,
-        hasBackdrop: false,
-        ...matPopupOptions
-    })
-        .afterClosed());
-};
-
-const zone = new Zone(Zone.current, { name: "@dotglitch_menu", properties: {} });
-const calcMenuItemBounds = async (menuItems, dataObj) => {
-    const data = {
-        data: dataObj,
-        items: menuItems,
-        config: {},
-        selfCords: { left: "0px", top: "0px" },
-        ownerCords: { x: 0, y: 0, width: 0, height: 0 },
-        id: null
-    };
-    return calcComponentBounds(MenuComponent, data);
-};
-const calcComponentBounds = async (component, data) => {
-    return new Promise((res, rej) => {
-        zone.run(async () => {
-            const app = await createApplication({
-                providers: [
-                    { provide: MAT_DIALOG_DATA, useValue: data }
-                ]
-            });
-            const del = document.createElement("div");
-            del.style.position = "absolute";
-            del.style.left = '-1000vw';
-            document.body.append(del);
-            const base = app.bootstrap(component, del);
-            const { instance } = base;
-            await firstValueFrom(app.isStable);
-            const el = instance.viewContainer?.element?.nativeElement;
-            const rect = el.getBoundingClientRect();
-            app.destroy();
-            del.remove();
-            res(rect);
-        });
-    });
-};
-const $data = Symbol("data");
-const $hover = Symbol("hover");
-class MenuComponent {
-    constructor(viewContainer, sanitizer, _data, dialog, // optional only for the purpose of estimating dimensions
-    dialogRef) {
-        this.viewContainer = viewContainer;
-        this.sanitizer = sanitizer;
-        this._data = _data;
-        this.dialog = dialog;
-        this.dialogRef = dialogRef;
-        this.overlayOverlap = 32;
-        this.hoverDelay = 400;
-        this.showDebugOverlay = false;
-        this.isLockedOpen = false;
-        this.hasBootstrapped = false;
-        this.pointerIsOnVoid = false;
-        this.pointerHasBeenOverMask = false;
-        this.parentIsNgxMenu = false;
-        this.coverRectCords = {
-            top: 0,
-            left: 0,
-            height: 0,
-            width: 0
-        };
-        // Check if there are any slashes or dots -- that will clearly exclude it from being a mat icon
-        this.matIconRx = /[\/\.]/i;
-        this.showIconColumn = true;
-        this.showShortcutColumn = true;
-        this.childDialogs = [];
-        // Defaults are set before @Input() hooks evaluate
-        this.dialog = this.dialog || this._data?.dialog;
-        this.data = this._data?.data;
-        this.ownerCords = this._data?.ownerCords;
-        this.selfCords = this._data?.selfCords;
-        this.items = this._data?.items;
-        this.config = this._data?.config;
-        this.id = this._data?.id;
-        this.parentItem = this._data?.parentItem;
-        this.parentContext = this._data?.parentContext;
-        this.isLockedOpen = this.isLockedOpen || this._data?.config?.['_isLockedOpen'];
-        this.parentIsNgxMenu = this._data?.parentIsNgxMenu;
-        this.template = _data.template;
-        this.templateType = this.template instanceof TemplateRef ? "template" : "component";
-        if (this.templateType == "component") {
-            this.componentPortal = new ComponentPortal(this.template);
-        }
-    }
-    ngOnInit() {
-        this.items?.forEach(i => {
-            if (typeof i == "string")
-                return;
-            // Set defaults
-            i['_disabled'] = false;
-            i['_visible'] = true;
-            i['_context'] = (typeof i.context == "function")
-                ? i.context(this.data)
-                : i.context;
-            if (i.label)
-                try {
-                    i['_formattedLabel'] = this.formatLabel(i.label);
-                }
-                catch (e) {
-                    console.warn(e);
-                }
-            if (typeof i.isDisabled == "function")
-                try {
-                    i['_disabled'] = i.isDisabled(this.data || {}, i['_context']);
-                }
-                catch (e) {
-                    console.warn(e);
-                }
-            if (typeof i.isVisible == "function")
-                try {
-                    i['_visible'] = i.isVisible(this.data || {}, i['_context']);
-                }
-                catch (e) {
-                    console.warn(e);
-                }
-            if (typeof i.linkTemplate == "function")
-                try {
-                    i['_link'] = i.linkTemplate(this.data || {}, i['_context']);
-                }
-                catch (e) {
-                    console.warn(e);
-                }
-            if (typeof i.iconTemplate == "function")
-                try {
-                    i['_icon'] = i.iconTemplate(this.data || {}, i['_context']);
-                }
-                catch (e) {
-                    console.warn(e);
-                }
-        });
-        // Show the icon column if there are any items with an icon
-        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" &&
-            typeof i['shortcut'] == "string" &&
-            i['shortcut'].length > 2);
-        if (this.ownerCords) {
-            const selfY = parseInt(this.selfCords.top?.replace('px', '') || '0');
-            const selfX = parseInt(this.selfCords.left?.replace('px', '') || '0');
-            this.coverRectCords = {
-                top: this.ownerCords.y - selfY - (this.overlayOverlap / 2),
-                left: this.ownerCords.x - selfX - (this.overlayOverlap / 2),
-                height: this.ownerCords.height + this.overlayOverlap,
-                width: this.ownerCords.width + this.overlayOverlap
-            };
-        }
-        setTimeout(() => {
-            this.hasBootstrapped = true;
-        }, 200);
-    }
-    ngAfterViewInit() {
-        const el = this.viewContainer.element.nativeElement;
-        el.addEventListener("keydown", evt => {
-            this.isLockedOpen = true;
-        });
-        el.addEventListener("pointerdown", evt => {
-            this.isLockedOpen = true;
-        });
-        el.addEventListener("touch", evt => {
-            this.isLockedOpen = true;
-        });
-    }
-    ngOnDestroy() {
-        //
-        this.childDialogs.forEach(d => d.close({ [$data]: true }));
-    }
-    /**
-     *
+     *
      */
     async onMenuItemClick(item, row, keepOpen = false) {
         if (typeof item == 'string')
@@ -672,9 +377,10 @@ class MenuComponent {
             // right: null
         };
         // Set position coordinates
-        const { width, height } = await (item.childTemplate
+        const targetBounds = await (item.childTemplate
             ? calcComponentBounds(MenuComponent, { template: item.childTemplate })
             : calcMenuItemBounds(item['_children'], this.data));
+        const { width, height } = targetBounds;
         if (bounds.y + height > window.innerHeight)
             cords.bottom = "0px";
         if (bounds.x + bounds.width + width > window.innerWidth)
@@ -703,7 +409,8 @@ class MenuComponent {
                 items: item['_children'],
                 template: item.childTemplate,
                 config: config,
-                parentIsNgxMenu: true
+                parentIsNgxMenu: true,
+                targetBounds
             }
         });
         let _s = dialogRef
@@ -757,7 +464,6 @@ class MenuComponent {
         }
     }
     startHoverTimer(item, row) {
-        this.childDialogs.forEach(cd => cd.close());
         // Invert check to make the logic simpler
         // TL;DR: if (any) of these are true, we will do the hover action
         if (!(Array.isArray(item.children) && item.children.length > 0 ||
@@ -768,6 +474,7 @@ class MenuComponent {
         item[$hover] = setTimeout(() => {
             delete item[$hover];
             if (!this.pointerIsOnVoid) {
+                this.childDialogs.forEach(cd => cd.close());
                 row['_open'] = true;
                 this.onMenuItemClick(item, row);
             }
@@ -777,6 +484,14 @@ class MenuComponent {
         item[$hover] && clearTimeout(item[$hover]);
         delete item[$hover];
     }
+    startCloseTimer() {
+        this.closeTimer = setTimeout(() => {
+            this.closeOnVoid();
+        }, 500);
+    }
+    stopCloseTimer() {
+        clearTimeout(this.closeTimer);
+    }
     /**
      * Check if the dialog is clipping offscreen
      * if so, move it back into view.
@@ -812,8 +527,8 @@ class MenuComponent {
             behavior: "smooth"
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.DomSanitizer }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1.MatDialog, optional: true }, { token: i1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: MenuComponent, isStandalone: true, selector: "ngx-menu", inputs: { data: "data", items: "items", config: "config", id: "id", overlayOverlap: "overlayOverlap", hoverDelay: "hoverDelay", showDebugOverlay: "showDebugOverlay", ownerCords: "ownerCords", selfCords: "selfCords", parentItem: "parentItem", parentContext: "parentContext", isLockedOpen: "isLockedOpen" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<!-- Mouse event blocker for pointer leave -->\n@if (coverRectCords && !parentIsNgxMenu) {\n    <div\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.background]=\"showDebugOverlay ? '#f004' : '#0000'\"\n        style=\"z-index: -1\"\n        (pointerenter)=\"pointerHasBeenOverMask=true\"\n        (pointermove)=\"pointerHasBeenOverMask=true\"\n        (click)=\"isLockedOpen = true\"\n    ></div>\n}\n\n@if (!parentIsNgxMenu) {\n    <div class=\"void\"\n        [style.background]=\"showDebugOverlay ? '#00f4' : '#0000'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n        (pointermove)=\"hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n        (click)=\"closeOnVoid(true)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n}\n\n@if (!template) {\n    <table>\n        <tbody>\n            @for (item of items; track item) {\n                <!-- A row with a click action -->\n                @if (item != 'separator' && item.separator != true && item['_visible']) {\n                    <tr #row\n                        [class.disabled]=\"item['_disabled']\"\n                        (click)=\"!item['_disabled'] && onMenuItemClick(item, row, true)\"\n                        [class.hover]=\"row['hover']\"\n                        [class.open]=\"row['_open']\"\n                        (pointerenter)=\"row['hover'] = true; startHoverTimer(item, row)\"\n                        (pointerleave)=\"row['hover'] = false; stopHoverTimer(item)\"\n                    >\n\n                        @if (showIconColumn) {\n                            <td class=\"icon\">\n                                @if (matIconRx.test(item['_icon'] ?? item.icon)) {\n                                    <img [src]=\"item['_icon'] ?? item.icon\"/>\n                                }\n                                @else {\n                                    <mat-icon\n                                        [fontIcon]=\"item['_icon'] ?? item.icon\"\n                                        [style.color]=\"item.iconColor\"\n                                    />\n                                }\n                            </td>\n                        }\n\n                        <!-- 'Normal' action based item -->\n                        <td class=\"label\"\n                            [style.padding-left]=\"showIconColumn ? 0 : '16px'\"\n                        >\n                            <a\n                                #anchor\n                                [attr.target]=\"item.linkTarget\"\n                                [attr.href]=\"(item['_link'] || item.link) ? sanitizer.bypassSecurityTrustUrl(item['_link'] || item.link) : undefined\"\n                            >\n                                @if ($any(item.labelTemplate)?.prototype) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"$any(item).labelTemplate\"\n                                        [ngTemplateOutletContext]=\"{\n                                            '$implicit': data,\n                                            'dialog': dialogRef,\n                                            'context': item['_context'],\n                                            'item': item,\n                                            'element': anchor,\n                                            'menu': this\n                                        }\"\n                                    />\n                                }\n                                @else {\n                                    @if ($any(item)?.labelTemplate) {\n                                        {{$any(item)?.labelTemplate(data || {})}}\n                                    }\n                                    @else {\n                                        <div [innerHTML]=\"item['_formattedLabel']\"></div>\n                                    }\n                                }\n                            </a>\n                        </td>\n\n                        @if (showShortcutColumn) {\n                            <td class=\"shortcut\">\n                                {{item.shortcutLabel}}\n                            </td>\n                        }\n\n                        <td style=\"min-width: 16px\">\n                            @if ((\n                                    (item['children']?.length > 0) ||\n                                    (item['_children']?.length > 0) ||\n                                    item.childTemplate ||\n                                    item.children?.['call'] ||\n                                    item.childrenResolver\n                                ) &&\n                                !item['_isResolving']\n                            ) {\n                                <mat-icon\n                                    style=\"transform: translateY(2px)\"\n                                >\n                                    chevron_right\n                                </mat-icon>\n                            }\n\n                            @if (item['_isResolving']) {\n                                <mat-progress-spinner\n                                    mode=\"indeterminate\"\n                                    [diameter]=\"20\"\n                                    style=\"margin-right: 4px\"\n                                />\n                            }\n                        </td>\n                    </tr>\n                }\n                @else if (item != 'separator' && item.separator == true) {\n                    <!-- Separator with label -->\n                    <tr\n                        class=\"disabled separator\"\n                    >\n                        <td\n                            class=\"center\"\n                            [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\"\n                        >\n                            <span class=\"hr\">\n                                {{item['label'] || ''}}\n                            </span>\n                        </td>\n                    </tr>\n                }\n                @else if (item == 'separator') {\n                    <!-- Separator -->\n                    <tr\n                        class=\"disabled separator\"\n                    >\n                        <td\n                            [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\"\n                        >\n                            <hr/>\n                        </td>\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n}\n@else {\n    @if (templateType == 'template') {\n        <ng-container\n            [ngTemplateOutlet]=\"template\"\n            [ngTemplateOutletContext]=\"{\n                '$implicit': data,\n                'dialog': dialogRef,\n                'context': parentContext,\n                'item': parentItem,\n                'element': this.viewContainer?.element?.nativeElement,\n                'menu': this\n            }\"\n        />\n    }\n    @else {\n        <ng-container\n            [cdkPortalOutlet]=\"componentPortal\"\n        />\n    }\n}\n\n@if (showDebugOverlay) {\n    <div>\n        <div>hbs: {{hasBootstrapped}}</div>\n        <div>pov: {{pointerIsOnVoid}}</div>\n        <div>ilo: {{isLockedOpen}}</div>\n        <div>hbom: {{pointerHasBeenOverMask}}</div>\n\n        <div>type: {{templateType}}</div>\n    </div>\n}\n", styles: ["::ng-deep .cdk-overlay-container .ngx-menu{--mdc-dialog-container-color: var(--ngx-menu-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-pane.ngx-menu .mat-mdc-dialog-surface{overflow:visible}:host{-webkit-user-select:none;user-select:none;z-index:1;position:relative;display:block}table{border-spacing:0;border-radius:5px;padding:4px 0}tr{color:var(--ngx-menu-text-color, #ccc);font-size:var(--ngx-menu-font-size, 14px);cursor:pointer;transition:background-color 75ms ease,color 75ms ease}tr:not(.disabled).hover,tr:not(.disabled).open{background-color:var(--ngx-menu-hover-background-color, #94ebeb);color:var(--ngx-menu-hover-text-color, #000)}tr:not(.disabled).hover a,tr:not(.disabled).open a{color:var(--ngx-menu-hover-text-color, #000)}tr:not(.separator){height:36px}tr.disabled .label{color:var(--ngx-menu-disabled-text-color, #919191)}tr .center{text-align:center}tr a{outline:0;display:flex;align-items:center;gap:10px;justify-content:space-between;height:100%;width:100%}tr .label{min-width:100px}tr img{max-width:100%;max-height:100%;aspect-ratio:1}.hr{height:1px;text-align:center;position:relative}.hr:before,.hr:after{content:\"\";background:var(--ngx-menu-separator-color, #2a2a2a);display:block;position:absolute;top:0;bottom:0;height:1px;margin:auto;width:300px}.hr:before{right:calc(100% + 4px)}.hr:after{left:calc(100% + 4px)}hr{background:var(--ngx-menu-separator-color, #2a2a2a);border:0;height:1px;margin:0}.icon{width:24px;height:24px;padding-left:10px}.icon mat-icon{transform:translateY(2px)}.shortcut{color:var(--ngx-menu-shortcut-text-color, #848484);text-align:end;padding-right:10px;padding-left:12px}.label{height:var(--ngx-menu-item-height, 30px)}td{vertical-align:middle}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.DomSanitizer }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1$1.MatDialog, optional: true }, { token: i1$1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: MenuComponent, isStandalone: true, selector: "ngx-menu", inputs: { data: "data", items: "items", config: "config", id: "id", overlayOverlap: "overlayOverlap", hoverDelay: "hoverDelay", showDebugOverlay: "showDebugOverlay", targetBounds: "targetBounds", ownerCords: "ownerCords", selfCords: "selfCords", parentItem: "parentItem", parentContext: "parentContext", isLockedOpen: "isLockedOpen" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "attr.tx": "targetBounds?.x", "attr.ty": "targetBounds?.y", "attr.th": "targetBounds?.height", "attr.tw": "targetBounds?.width" } }, ngImport: i0, template: "<!-- Mouse event blocker for pointer leave -->\n@if (coverRectCords && !parentIsNgxMenu) {\n    <div\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.background]=\"showDebugOverlay ? '#f004' : '#0000'\"\n        style=\"z-index: -1\"\n        (pointerenter)=\"pointerHasBeenOverMask=true;startCloseTimer()\"\n        (pointerleave)=\"stopCloseTimer()\"\n        (pointermove)=\"pointerHasBeenOverMask=true\"\n        (click)=\"isLockedOpen = true\"\n    ></div>\n}\n\n@if (!parentIsNgxMenu) {\n    <div class=\"void\"\n        [style.background]=\"showDebugOverlay ? '#00f4' : '#0000'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && startCloseTimer()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n        (pointermove)=\"hasBootstrapped && !isLockedOpen && startCloseTimer()\"\n        (click)=\"closeOnVoid(true)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n}\n\n@if (!template) {\n    <table (pointerenter)=\"stopCloseTimer()\">\n        <tbody>\n            @for (item of items; track item) {\n                <!-- A row with a click action -->\n                @if (item != 'separator' && item.separator != true && item['_visible']) {\n                    <tr #row\n                        [class.disabled]=\"item['_disabled']\"\n                        (click)=\"!item['_disabled'] && onMenuItemClick(item, row, true)\"\n                        [class.hover]=\"row['hover']\"\n                        [class.open]=\"row['_open']\"\n                        (pointerenter)=\"row['hover'] = true; startHoverTimer(item, row)\"\n                        (pointerleave)=\"row['hover'] = false; stopHoverTimer(item)\"\n                    >\n\n                        @if (showIconColumn) {\n                            <td class=\"icon\">\n                                @if (matIconRx.test(item['_icon'] ?? item.icon)) {\n                                    <img [src]=\"item['_icon'] ?? item.icon\"/>\n                                }\n                                @else {\n                                    <mat-icon\n                                        [fontIcon]=\"item['_icon'] ?? item.icon\"\n                                        [style.color]=\"item.iconColor\"\n                                    />\n                                }\n                            </td>\n                        }\n\n                        <!-- 'Normal' action based item -->\n                        <td class=\"label\"\n                            [style.padding-left]=\"showIconColumn ? 0 : '16px'\"\n                        >\n                            <a\n                                #anchor\n                                [attr.target]=\"item.linkTarget\"\n                                [attr.href]=\"(item['_link'] || item.link) ? sanitizer.bypassSecurityTrustUrl(item['_link'] || item.link) : undefined\"\n                            >\n                                @if ($any(item.labelTemplate)?.prototype) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"$any(item).labelTemplate\"\n                                        [ngTemplateOutletContext]=\"{\n                                            '$implicit': data,\n                                            'dialog': dialogRef,\n                                            'context': item['_context'],\n                                            'item': item,\n                                            'element': anchor,\n                                            'menu': this\n                                        }\"\n                                    />\n                                }\n                                @else {\n                                    @if ($any(item)?.labelTemplate) {\n                                        {{$any(item)?.labelTemplate(data || {})}}\n                                    }\n                                    @else {\n                                        <div [innerHTML]=\"item['_formattedLabel']\"></div>\n                                    }\n                                }\n                            </a>\n                        </td>\n\n                        @if (showShortcutColumn) {\n                            <td class=\"shortcut\">\n                                {{item.shortcutLabel}}\n                            </td>\n                        }\n\n                        <td style=\"min-width: 16px\">\n                            @if ((\n                                    (item['children']?.length > 0) ||\n                                    (item['_children']?.length > 0) ||\n                                    item.childTemplate ||\n                                    item.children?.['call'] ||\n                                    item.childrenResolver\n                                ) &&\n                                !item['_isResolving']\n                            ) {\n                                <mat-icon\n                                    style=\"transform: translateY(2px)\"\n                                >\n                                    chevron_right\n                                </mat-icon>\n                            }\n\n                            @if (item['_isResolving']) {\n                                <mat-progress-spinner\n                                    mode=\"indeterminate\"\n                                    [diameter]=\"20\"\n                                    style=\"margin-right: 4px\"\n                                />\n                            }\n                        </td>\n                    </tr>\n                }\n                @else if (item != 'separator' && item.separator == true) {\n                    <!-- Separator with label -->\n                    <tr\n                        class=\"disabled separator\"\n                    >\n                        <td\n                            class=\"center\"\n                            [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\"\n                        >\n                            <span class=\"hr\">\n                                {{item['label'] || ''}}\n                            </span>\n                        </td>\n                    </tr>\n                }\n                @else if (item == 'separator') {\n                    <!-- Separator -->\n                    <tr\n                        class=\"disabled separator\"\n                    >\n                        <td\n                            [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\"\n                        >\n                            <hr/>\n                        </td>\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n}\n@else {\n    @if (templateType == 'template') {\n        <div style=\"display: contents;\" (pointerenter)=\"stopCloseTimer()\">\n            <ng-container\n                [ngTemplateOutlet]=\"template\"\n                [ngTemplateOutletContext]=\"{\n                    '$implicit': data,\n                    'dialog': dialogRef,\n                    'context': parentContext,\n                    'item': parentItem,\n                    'element': this.viewContainer?.element?.nativeElement,\n                    'menu': this\n                }\"\n            />\n        </div>\n    }\n    @else {\n        <div style=\"display: contents;\" (pointerenter)=\"stopCloseTimer()\">\n            <ng-container\n                [cdkPortalOutlet]=\"componentPortal\"\n            />\n        </div>\n    }\n}\n\n@if (showDebugOverlay) {\n    <div>\n        <div>hbs: {{hasBootstrapped}}</div>\n        <div>pov: {{pointerIsOnVoid}}</div>\n        <div>ilo: {{isLockedOpen}}</div>\n        <div>hbom: {{pointerHasBeenOverMask}}</div>\n\n        <div>type: {{templateType}}</div>\n    </div>\n}\n", styles: ["::ng-deep .cdk-overlay-container .ngx-menu{--mdc-dialog-container-color: var(--ngx-menu-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-pane.ngx-menu .mat-mdc-dialog-surface{overflow:visible}:host{-webkit-user-select:none;user-select:none;z-index:1;position:relative;display:block}table{border-spacing:0;border-radius:5px;padding:4px 0}tr{color:var(--ngx-menu-text-color, #ccc);font-size:var(--ngx-menu-font-size, 14px);cursor:pointer;transition:background-color 75ms ease,color 75ms ease}tr:not(.disabled).hover,tr:not(.disabled).open{background-color:var(--ngx-menu-hover-background-color, #94ebeb);color:var(--ngx-menu-hover-text-color, #000)}tr:not(.disabled).hover a,tr:not(.disabled).open a{color:var(--ngx-menu-hover-text-color, #000)}tr:not(.separator){height:36px}tr.disabled .label{color:var(--ngx-menu-disabled-text-color, #919191)}tr .center{text-align:center}tr a{outline:0;display:flex;align-items:center;gap:10px;justify-content:space-between;height:100%;width:100%}tr .label{min-width:100px}tr img{max-width:100%;max-height:100%;aspect-ratio:1}.hr{height:1px;text-align:center;position:relative}.hr:before,.hr:after{content:\"\";background:var(--ngx-menu-separator-color, #2a2a2a);display:block;position:absolute;top:0;bottom:0;height:1px;margin:auto;width:300px}.hr:before{right:calc(100% + 4px)}.hr:after{left:calc(100% + 4px)}hr{background:var(--ngx-menu-separator-color, #2a2a2a);border:0;height:1px;margin:0}.icon{width:24px;height:24px;padding-left:10px}.icon mat-icon{transform:translateY(2px)}.shortcut{color:var(--ngx-menu-shortcut-text-color, #848484);text-align:end;padding-right:10px;padding-left:12px}.label{height:var(--ngx-menu-item-height, 30px)}td{vertical-align:middle}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -823,15 +538,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         MatIconModule,
                         MatProgressSpinnerModule,
                         TooltipDirective
-                    ], standalone: true, template: "<!-- Mouse event blocker for pointer leave -->\n@if (coverRectCords && !parentIsNgxMenu) {\n    <div\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.background]=\"showDebugOverlay ? '#f004' : '#0000'\"\n        style=\"z-index: -1\"\n        (pointerenter)=\"pointerHasBeenOverMask=true\"\n        (pointermove)=\"pointerHasBeenOverMask=true\"\n        (click)=\"isLockedOpen = true\"\n    ></div>\n}\n\n@if (!parentIsNgxMenu) {\n    <div class=\"void\"\n        [style.background]=\"showDebugOverlay ? '#00f4' : '#0000'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n        (pointermove)=\"hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n        (click)=\"closeOnVoid(true)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n}\n\n@if (!template) {\n    <table>\n        <tbody>\n            @for (item of items; track item) {\n                <!-- A row with a click action -->\n                @if (item != 'separator' && item.separator != true && item['_visible']) {\n                    <tr #row\n                        [class.disabled]=\"item['_disabled']\"\n                        (click)=\"!item['_disabled'] && onMenuItemClick(item, row, true)\"\n                        [class.hover]=\"row['hover']\"\n                        [class.open]=\"row['_open']\"\n                        (pointerenter)=\"row['hover'] = true; startHoverTimer(item, row)\"\n                        (pointerleave)=\"row['hover'] = false; stopHoverTimer(item)\"\n                    >\n\n                        @if (showIconColumn) {\n                            <td class=\"icon\">\n                                @if (matIconRx.test(item['_icon'] ?? item.icon)) {\n                                    <img [src]=\"item['_icon'] ?? item.icon\"/>\n                                }\n                                @else {\n                                    <mat-icon\n                                        [fontIcon]=\"item['_icon'] ?? item.icon\"\n                                        [style.color]=\"item.iconColor\"\n                                    />\n                                }\n                            </td>\n                        }\n\n                        <!-- 'Normal' action based item -->\n                        <td class=\"label\"\n                            [style.padding-left]=\"showIconColumn ? 0 : '16px'\"\n                        >\n                            <a\n                                #anchor\n                                [attr.target]=\"item.linkTarget\"\n                                [attr.href]=\"(item['_link'] || item.link) ? sanitizer.bypassSecurityTrustUrl(item['_link'] || item.link) : undefined\"\n                            >\n                                @if ($any(item.labelTemplate)?.prototype) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"$any(item).labelTemplate\"\n                                        [ngTemplateOutletContext]=\"{\n                                            '$implicit': data,\n                                            'dialog': dialogRef,\n                                            'context': item['_context'],\n                                            'item': item,\n                                            'element': anchor,\n                                            'menu': this\n                                        }\"\n                                    />\n                                }\n                                @else {\n                                    @if ($any(item)?.labelTemplate) {\n                                        {{$any(item)?.labelTemplate(data || {})}}\n                                    }\n                                    @else {\n                                        <div [innerHTML]=\"item['_formattedLabel']\"></div>\n                                    }\n                                }\n                            </a>\n                        </td>\n\n                        @if (showShortcutColumn) {\n                            <td class=\"shortcut\">\n                                {{item.shortcutLabel}}\n                            </td>\n                        }\n\n                        <td style=\"min-width: 16px\">\n                            @if ((\n                                    (item['children']?.length > 0) ||\n                                    (item['_children']?.length > 0) ||\n                                    item.childTemplate ||\n                                    item.children?.['call'] ||\n                                    item.childrenResolver\n                                ) &&\n                                !item['_isResolving']\n                            ) {\n                                <mat-icon\n                                    style=\"transform: translateY(2px)\"\n                                >\n                                    chevron_right\n                                </mat-icon>\n                            }\n\n                            @if (item['_isResolving']) {\n                                <mat-progress-spinner\n                                    mode=\"indeterminate\"\n                                    [diameter]=\"20\"\n                                    style=\"margin-right: 4px\"\n                                />\n                            }\n                        </td>\n                    </tr>\n                }\n                @else if (item != 'separator' && item.separator == true) {\n                    <!-- Separator with label -->\n                    <tr\n                        class=\"disabled separator\"\n                    >\n                        <td\n                            class=\"center\"\n                            [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\"\n                        >\n                            <span class=\"hr\">\n                                {{item['label'] || ''}}\n                            </span>\n                        </td>\n                    </tr>\n                }\n                @else if (item == 'separator') {\n                    <!-- Separator -->\n                    <tr\n                        class=\"disabled separator\"\n                    >\n                        <td\n                            [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\"\n                        >\n                            <hr/>\n                        </td>\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n}\n@else {\n    @if (templateType == 'template') {\n        <ng-container\n            [ngTemplateOutlet]=\"template\"\n            [ngTemplateOutletContext]=\"{\n                '$implicit': data,\n                'dialog': dialogRef,\n                'context': parentContext,\n                'item': parentItem,\n                'element': this.viewContainer?.element?.nativeElement,\n                'menu': this\n            }\"\n        />\n    }\n    @else {\n        <ng-container\n            [cdkPortalOutlet]=\"componentPortal\"\n        />\n    }\n}\n\n@if (showDebugOverlay) {\n    <div>\n        <div>hbs: {{hasBootstrapped}}</div>\n        <div>pov: {{pointerIsOnVoid}}</div>\n        <div>ilo: {{isLockedOpen}}</div>\n        <div>hbom: {{pointerHasBeenOverMask}}</div>\n\n        <div>type: {{templateType}}</div>\n    </div>\n}\n", styles: ["::ng-deep .cdk-overlay-container .ngx-menu{--mdc-dialog-container-color: var(--ngx-menu-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-pane.ngx-menu .mat-mdc-dialog-surface{overflow:visible}:host{-webkit-user-select:none;user-select:none;z-index:1;position:relative;display:block}table{border-spacing:0;border-radius:5px;padding:4px 0}tr{color:var(--ngx-menu-text-color, #ccc);font-size:var(--ngx-menu-font-size, 14px);cursor:pointer;transition:background-color 75ms ease,color 75ms ease}tr:not(.disabled).hover,tr:not(.disabled).open{background-color:var(--ngx-menu-hover-background-color, #94ebeb);color:var(--ngx-menu-hover-text-color, #000)}tr:not(.disabled).hover a,tr:not(.disabled).open a{color:var(--ngx-menu-hover-text-color, #000)}tr:not(.separator){height:36px}tr.disabled .label{color:var(--ngx-menu-disabled-text-color, #919191)}tr .center{text-align:center}tr a{outline:0;display:flex;align-items:center;gap:10px;justify-content:space-between;height:100%;width:100%}tr .label{min-width:100px}tr img{max-width:100%;max-height:100%;aspect-ratio:1}.hr{height:1px;text-align:center;position:relative}.hr:before,.hr:after{content:\"\";background:var(--ngx-menu-separator-color, #2a2a2a);display:block;position:absolute;top:0;bottom:0;height:1px;margin:auto;width:300px}.hr:before{right:calc(100% + 4px)}.hr:after{left:calc(100% + 4px)}hr{background:var(--ngx-menu-separator-color, #2a2a2a);border:0;height:1px;margin:0}.icon{width:24px;height:24px;padding-left:10px}.icon mat-icon{transform:translateY(2px)}.shortcut{color:var(--ngx-menu-shortcut-text-color, #848484);text-align:end;padding-right:10px;padding-left:12px}.label{height:var(--ngx-menu-item-height, 30px)}td{vertical-align:middle}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
+                    ], standalone: true, host: {
+                        "[attr.tx]": "targetBounds?.x",
+                        "[attr.ty]": "targetBounds?.y",
+                        "[attr.th]": "targetBounds?.height",
+                        "[attr.tw]": "targetBounds?.width",
+                    }, template: "<!-- Mouse event blocker for pointer leave -->\n@if (coverRectCords && !parentIsNgxMenu) {\n    <div\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.background]=\"showDebugOverlay ? '#f004' : '#0000'\"\n        style=\"z-index: -1\"\n        (pointerenter)=\"pointerHasBeenOverMask=true;startCloseTimer()\"\n        (pointerleave)=\"stopCloseTimer()\"\n        (pointermove)=\"pointerHasBeenOverMask=true\"\n        (click)=\"isLockedOpen = true\"\n    ></div>\n}\n\n@if (!parentIsNgxMenu) {\n    <div class=\"void\"\n        [style.background]=\"showDebugOverlay ? '#00f4' : '#0000'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && startCloseTimer()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n        (pointermove)=\"hasBootstrapped && !isLockedOpen && startCloseTimer()\"\n        (click)=\"closeOnVoid(true)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n}\n\n@if (!template) {\n    <table (pointerenter)=\"stopCloseTimer()\">\n        <tbody>\n            @for (item of items; track item) {\n                <!-- A row with a click action -->\n                @if (item != 'separator' && item.separator != true && item['_visible']) {\n                    <tr #row\n                        [class.disabled]=\"item['_disabled']\"\n                        (click)=\"!item['_disabled'] && onMenuItemClick(item, row, true)\"\n                        [class.hover]=\"row['hover']\"\n                        [class.open]=\"row['_open']\"\n                        (pointerenter)=\"row['hover'] = true; startHoverTimer(item, row)\"\n                        (pointerleave)=\"row['hover'] = false; stopHoverTimer(item)\"\n                    >\n\n                        @if (showIconColumn) {\n                            <td class=\"icon\">\n                                @if (matIconRx.test(item['_icon'] ?? item.icon)) {\n                                    <img [src]=\"item['_icon'] ?? item.icon\"/>\n                                }\n                                @else {\n                                    <mat-icon\n                                        [fontIcon]=\"item['_icon'] ?? item.icon\"\n                                        [style.color]=\"item.iconColor\"\n                                    />\n                                }\n                            </td>\n                        }\n\n                        <!-- 'Normal' action based item -->\n                        <td class=\"label\"\n                            [style.padding-left]=\"showIconColumn ? 0 : '16px'\"\n                        >\n                            <a\n                                #anchor\n                                [attr.target]=\"item.linkTarget\"\n                                [attr.href]=\"(item['_link'] || item.link) ? sanitizer.bypassSecurityTrustUrl(item['_link'] || item.link) : undefined\"\n                            >\n                                @if ($any(item.labelTemplate)?.prototype) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"$any(item).labelTemplate\"\n                                        [ngTemplateOutletContext]=\"{\n                                            '$implicit': data,\n                                            'dialog': dialogRef,\n                                            'context': item['_context'],\n                                            'item': item,\n                                            'element': anchor,\n                                            'menu': this\n                                        }\"\n                                    />\n                                }\n                                @else {\n                                    @if ($any(item)?.labelTemplate) {\n                                        {{$any(item)?.labelTemplate(data || {})}}\n                                    }\n                                    @else {\n                                        <div [innerHTML]=\"item['_formattedLabel']\"></div>\n                                    }\n                                }\n                            </a>\n                        </td>\n\n                        @if (showShortcutColumn) {\n                            <td class=\"shortcut\">\n                                {{item.shortcutLabel}}\n                            </td>\n                        }\n\n                        <td style=\"min-width: 16px\">\n                            @if ((\n                                    (item['children']?.length > 0) ||\n                                    (item['_children']?.length > 0) ||\n                                    item.childTemplate ||\n                                    item.children?.['call'] ||\n                                    item.childrenResolver\n                                ) &&\n                                !item['_isResolving']\n                            ) {\n                                <mat-icon\n                                    style=\"transform: translateY(2px)\"\n                                >\n                                    chevron_right\n                                </mat-icon>\n                            }\n\n                            @if (item['_isResolving']) {\n                                <mat-progress-spinner\n                                    mode=\"indeterminate\"\n                                    [diameter]=\"20\"\n                                    style=\"margin-right: 4px\"\n                                />\n                            }\n                        </td>\n                    </tr>\n                }\n                @else if (item != 'separator' && item.separator == true) {\n                    <!-- Separator with label -->\n                    <tr\n                        class=\"disabled separator\"\n                    >\n                        <td\n                            class=\"center\"\n                            [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\"\n                        >\n                            <span class=\"hr\">\n                                {{item['label'] || ''}}\n                            </span>\n                        </td>\n                    </tr>\n                }\n                @else if (item == 'separator') {\n                    <!-- Separator -->\n                    <tr\n                        class=\"disabled separator\"\n                    >\n                        <td\n                            [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\"\n                        >\n                            <hr/>\n                        </td>\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n}\n@else {\n    @if (templateType == 'template') {\n        <div style=\"display: contents;\" (pointerenter)=\"stopCloseTimer()\">\n            <ng-container\n                [ngTemplateOutlet]=\"template\"\n                [ngTemplateOutletContext]=\"{\n                    '$implicit': data,\n                    'dialog': dialogRef,\n                    'context': parentContext,\n                    'item': parentItem,\n                    'element': this.viewContainer?.element?.nativeElement,\n                    'menu': this\n                }\"\n            />\n        </div>\n    }\n    @else {\n        <div style=\"display: contents;\" (pointerenter)=\"stopCloseTimer()\">\n            <ng-container\n                [cdkPortalOutlet]=\"componentPortal\"\n            />\n        </div>\n    }\n}\n\n@if (showDebugOverlay) {\n    <div>\n        <div>hbs: {{hasBootstrapped}}</div>\n        <div>pov: {{pointerIsOnVoid}}</div>\n        <div>ilo: {{isLockedOpen}}</div>\n        <div>hbom: {{pointerHasBeenOverMask}}</div>\n\n        <div>type: {{templateType}}</div>\n    </div>\n}\n", styles: ["::ng-deep .cdk-overlay-container .ngx-menu{--mdc-dialog-container-color: var(--ngx-menu-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-pane.ngx-menu .mat-mdc-dialog-surface{overflow:visible}:host{-webkit-user-select:none;user-select:none;z-index:1;position:relative;display:block}table{border-spacing:0;border-radius:5px;padding:4px 0}tr{color:var(--ngx-menu-text-color, #ccc);font-size:var(--ngx-menu-font-size, 14px);cursor:pointer;transition:background-color 75ms ease,color 75ms ease}tr:not(.disabled).hover,tr:not(.disabled).open{background-color:var(--ngx-menu-hover-background-color, #94ebeb);color:var(--ngx-menu-hover-text-color, #000)}tr:not(.disabled).hover a,tr:not(.disabled).open a{color:var(--ngx-menu-hover-text-color, #000)}tr:not(.separator){height:36px}tr.disabled .label{color:var(--ngx-menu-disabled-text-color, #919191)}tr .center{text-align:center}tr a{outline:0;display:flex;align-items:center;gap:10px;justify-content:space-between;height:100%;width:100%}tr .label{min-width:100px}tr img{max-width:100%;max-height:100%;aspect-ratio:1}.hr{height:1px;text-align:center;position:relative}.hr:before,.hr:after{content:\"\";background:var(--ngx-menu-separator-color, #2a2a2a);display:block;position:absolute;top:0;bottom:0;height:1px;margin:auto;width:300px}.hr:before{right:calc(100% + 4px)}.hr:after{left:calc(100% + 4px)}hr{background:var(--ngx-menu-separator-color, #2a2a2a);border:0;height:1px;margin:0}.icon{width:24px;height:24px;padding-left:10px}.icon mat-icon{transform:translateY(2px)}.shortcut{color:var(--ngx-menu-shortcut-text-color, #848484);text-align:end;padding-right:10px;padding-left:12px}.label{height:var(--ngx-menu-item-height, 30px)}td{vertical-align:middle}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1.DomSanitizer }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialog, decorators: [{
+                }] }, { type: i1$1.MatDialog, decorators: [{
                     type: Optional
-                }] }, { type: i1.MatDialogRef, decorators: [{
+                }] }, { type: i1$1.MatDialogRef, decorators: [{
                     type: Optional
                 }] }], propDecorators: { data: [{
                 type: Input
@@ -847,6 +567,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Input
             }], showDebugOverlay: [{
                 type: Input
+            }], targetBounds: [{
+                type: Input
             }], ownerCords: [{
                 type: Input
             }], selfCords: [{
@@ -862,12 +584,353 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 args: ["window:resize"]
             }] } });
 
-class MenuDirective {
-    constructor(dialog, viewContainer) {
-        this.dialog = dialog;
-        this.viewContainer = viewContainer;
-        /**
-         * Configuration for opening the app menu
+const zone = new Zone(Zone.current, { name: "@dotglitch_menu", properties: {} });
+const calcTooltipBounds = async (template, data, matDialogConfig) => {
+    const args = {
+        data: data || {},
+        template,
+        config: {},
+        selfCords: { left: "0px", top: "0px" },
+        ownerCords: { x: 0, y: 0, width: 0, height: 0 },
+        id: null
+    };
+    // dimensions should be in px... Might need to handle vw/v
+    if (matDialogConfig?.width && matDialogConfig?.height) {
+        return {
+            width: parseInt(matDialogConfig.width),
+            height: parseInt(matDialogConfig.height),
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0
+        };
+    }
+    return new Promise((res, rej) => {
+        zone.run(async () => {
+            // Forcibly bootstrap the ctx menu outside of the client application's zone.
+            const app = await createApplication({
+                providers: [
+                    { provide: MAT_DIALOG_DATA, useValue: args }
+                ]
+            });
+            const del = document.createElement("div");
+            del.style.position = "absolute";
+            del.style.left = '-1000vw';
+            document.body.append(del);
+            const base = app.bootstrap(TooltipComponent, del);
+            const { instance } = base;
+            await firstValueFrom(app.isStable);
+            const el = instance.viewContainer?.element?.nativeElement;
+            const rect = el.getBoundingClientRect();
+            app.destroy();
+            del.remove();
+            res(rect);
+        });
+    });
+};
+class TooltipComponent {
+    constructor(viewContainer, _data, dialog, // optional only for the purpose of estimating dimensions
+    dialogRef) {
+        this.viewContainer = viewContainer;
+        this._data = _data;
+        this.dialog = dialog;
+        this.dialogRef = dialogRef;
+        this.isTemplate = false;
+        this.isMenu = false;
+        this.hasBootstrapped = false;
+        this.pointerIsOnVoid = false;
+        this.isLockedOpen = false;
+        this.clientWidth = window.innerWidth;
+        this.clientHeight = window.innerHeight;
+        this.coverRectCords = {
+            top: 0,
+            left: 0,
+            height: 0,
+            width: 0
+        };
+        // Defaults are set before @Input() hooks evaluate
+        this.data = this.data || this._data?.data || {};
+        this.config = this.config || this._data?.config;
+        this.dialog = this.dialog || this._data?.dialog;
+        this.template = this.template || this._data?.template;
+        this.ownerCords = this.ownerCords || this._data?.ownerCords;
+        this.selfCords = this.selfCords || this._data?.selfCords;
+        this.isLockedOpen = this._data?.isLockedOpen || this.config?.stayOpen;
+    }
+    ngOnInit() {
+        const selfY = parseInt(this.selfCords.top.replace('px', ''));
+        const selfX = parseInt(this.selfCords.left.replace('px', ''));
+        this.coverRectCords = {
+            top: this.ownerCords.y - selfY - 16,
+            left: this.ownerCords.x - selfX - 16,
+            height: this.ownerCords.height + 32,
+            width: this.ownerCords.width + 32
+        };
+        if (Array.isArray(this.template))
+            this.isMenu = true;
+        else if (this.template instanceof TemplateRef)
+            this.isTemplate = true;
+        else if (typeof this.template == "function")
+            this.isTemplate = false;
+        else
+            throw new Error("Unrecognized template object provided.");
+        // TODO: resolve the event hook with the .void element
+        setTimeout(() => {
+            this.hasBootstrapped = true;
+            if (this.pointerIsOnVoid && !this.isLockedOpen)
+                this.dialogRef.close();
+        }, 200);
+    }
+    ngAfterViewInit() {
+        const el = this.viewContainer.element.nativeElement;
+        el.addEventListener("keydown", evt => {
+            this.isLockedOpen = true;
+        });
+        el.addEventListener("pointerdown", evt => {
+            this.isLockedOpen = true;
+        });
+        el.addEventListener("touch", evt => {
+            this.isLockedOpen = true;
+        });
+    }
+    onKeyDown(evt) {
+        if (this.config?.freezeOnKeyCode) {
+            if (evt.code == this.config.freezeOnKeyCode)
+                this.isLockedOpen = true;
+        }
+    }
+    onVoidPointerDown(evt) {
+        if (!this.isLockedOpen) {
+            const el = this.viewContainer.element.nativeElement;
+            el.querySelector(".void").remove();
+            setTimeout(() => {
+                const clonedEvt = new PointerEvent("pointerdown", evt);
+                const target = document.elementFromPoint(evt.clientX, evt.clientY);
+                console.log("DEBUG EVENTS", { evt, clonedEvt });
+                target.dispatchEvent(clonedEvt);
+            }, 15);
+        }
+        this.closeOnVoid(true);
+    }
+    // If the void element gets stuck open, make wheel events pass through.
+    onWheel(evt) {
+        const el = this.viewContainer.element.nativeElement;
+        el.style.display = "none";
+        const target = document.elementFromPoint(evt.clientX, evt.clientY);
+        el.style.display = "block";
+        target.scroll({
+            top: evt.deltaY + target.scrollTop,
+            left: evt.deltaX + target.scrollLeft,
+            behavior: "smooth"
+        });
+    }
+    /**
+     * Close the tooltip if these actions occur
+     */
+    onClose() {
+        if (!this.isLockedOpen)
+            this.dialogRef?.close();
+        this.clientWidth = window.innerWidth;
+        this.clientHeight = window.innerHeight;
+    }
+    closeOnVoid(force = false) {
+        if (!this.isLockedOpen || force)
+            this.dialogRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ViewContainerRef }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1$1.MatDialog, optional: true }, { token: i1$1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: TooltipComponent, isStandalone: true, selector: "ngx-tooltip", inputs: { data: "data", config: "config", ownerCords: "ownerCords", selfCords: "selfCords", template: "template" }, host: { listeners: { "window:keydown": "onKeyDown($event)", "window:resize": "onClose()", "window:blur": "onClose()", "pointerleave": "onClose()" } }, ngImport: i0, template: "<!-- Mouse event blocker for pointer leave -->\n@if (coverRectCords) {\n    <!-- <div\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        (pointerdown)=\"onVoidPointerDown($event)\"\n    ></div> -->\n\n    <div class=\"void left\"\n        [style.top]=\"'0px'\"\n        [style.left]=\"'0px'\"\n        [style.height]=\"'100%'\"\n        [style.width]=\"(ownerCords.left) + 'px'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"onVoidPointerDown($event)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n    <div class=\"void top\"\n        [style.top]=\"'0px'\"\n        [style.left]=\"ownerCords.left + 'px'\"\n        [style.height]=\"ownerCords.top + 'px'\"\n        [style.width]=\"ownerCords.width + 'px'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"onVoidPointerDown($event)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n    <div class=\"void right\"\n        [style.top]=\"'0px'\"\n        [style.left]=\"(ownerCords.left + ownerCords.width) + 'px'\"\n        [style.height]=\"'100%'\"\n        [style.width]=\"(clientWidth - (ownerCords.left + ownerCords.width)) + 'px'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"onVoidPointerDown($event)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n    <div class=\"void\"\n        [style.top]=\"(ownerCords.top + ownerCords.height) + 'px'\"\n        [style.left]=\"ownerCords.left + 'px'\"\n        [style.height]=\"(clientHeight - (ownerCords.top + ownerCords.height)) + 'px'\"\n        [style.width]=\"ownerCords.width + 'px'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"onVoidPointerDown($event)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n}\n\n\n<div\n    #container\n    class=\"container\"\n>\n    @if (isMenu) {\n        <ngx-menu\n            [config]=\"config\"\n            [data]=\"data\"\n            [ownerCords]=\"ownerCords\"\n            [selfCords]=\"selfCords\"\n            [items]=\"$any(template)\"\n            [isLockedOpen]=\"config.stayOpen\"\n        />\n    }\n    @else if (isTemplate) {\n        <ng-container\n            [ngTemplateOutlet]=\"$any(template)\"\n            [ngTemplateOutletContext]=\"{\n                '$implicit': data,\n                'dialog': dialogRef,\n                'element': container,\n                'tooltip': this\n            }\"\n        ></ng-container>\n    }\n    @else {\n        <ng-container\n            [ngComponentOutlet]=\"$any(template)\"\n        >\n        </ng-container>\n    }\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;position:fixed}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: MenuComponent, selector: "ngx-menu", inputs: ["data", "items", "config", "id", "overlayOverlap", "hoverDelay", "showDebugOverlay", "targetBounds", "ownerCords", "selfCords", "parentItem", "parentContext", "isLockedOpen"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-tooltip', imports: [
+                        NgTemplateOutlet,
+                        NgComponentOutlet,
+                        MenuComponent
+                    ], standalone: true, template: "<!-- Mouse event blocker for pointer leave -->\n@if (coverRectCords) {\n    <!-- <div\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        (pointerdown)=\"onVoidPointerDown($event)\"\n    ></div> -->\n\n    <div class=\"void left\"\n        [style.top]=\"'0px'\"\n        [style.left]=\"'0px'\"\n        [style.height]=\"'100%'\"\n        [style.width]=\"(ownerCords.left) + 'px'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"onVoidPointerDown($event)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n    <div class=\"void top\"\n        [style.top]=\"'0px'\"\n        [style.left]=\"ownerCords.left + 'px'\"\n        [style.height]=\"ownerCords.top + 'px'\"\n        [style.width]=\"ownerCords.width + 'px'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"onVoidPointerDown($event)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n    <div class=\"void right\"\n        [style.top]=\"'0px'\"\n        [style.left]=\"(ownerCords.left + ownerCords.width) + 'px'\"\n        [style.height]=\"'100%'\"\n        [style.width]=\"(clientWidth - (ownerCords.left + ownerCords.width)) + 'px'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"onVoidPointerDown($event)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n    <div class=\"void\"\n        [style.top]=\"(ownerCords.top + ownerCords.height) + 'px'\"\n        [style.left]=\"ownerCords.left + 'px'\"\n        [style.height]=\"(clientHeight - (ownerCords.top + ownerCords.height)) + 'px'\"\n        [style.width]=\"ownerCords.width + 'px'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && closeOnVoid()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"onVoidPointerDown($event)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n}\n\n\n<div\n    #container\n    class=\"container\"\n>\n    @if (isMenu) {\n        <ngx-menu\n            [config]=\"config\"\n            [data]=\"data\"\n            [ownerCords]=\"ownerCords\"\n            [selfCords]=\"selfCords\"\n            [items]=\"$any(template)\"\n            [isLockedOpen]=\"config.stayOpen\"\n        />\n    }\n    @else if (isTemplate) {\n        <ng-container\n            [ngTemplateOutlet]=\"$any(template)\"\n            [ngTemplateOutletContext]=\"{\n                '$implicit': data,\n                'dialog': dialogRef,\n                'element': container,\n                'tooltip': this\n            }\"\n        ></ng-container>\n    }\n    @else {\n        <ng-container\n            [ngComponentOutlet]=\"$any(template)\"\n        >\n        </ng-container>\n    }\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;position:fixed}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$1.MatDialog, decorators: [{
+                    type: Optional
+                }] }, { type: i1$1.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { data: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], ownerCords: [{
+                type: Input
+            }], selfCords: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ["window:keydown", ['$event']]
+            }], onClose: [{
+                type: HostListener,
+                args: ["window:resize"]
+            }, {
+                type: HostListener,
+                args: ["window:blur"]
+            }, {
+                type: HostListener,
+                args: ["pointerleave"]
+            }] } });
+
+class TooltipDirective {
+    constructor(dialog, viewContainer) {
+        this.dialog = dialog;
+        this.viewContainer = viewContainer;
+        /**
+         * Configuration for opening the app menu
+         */
+        this.config = {};
+        /**
+         * Arbitrary data to pass into the template
+         */
+        this.data = {};
+        this.isCursorOverTarget = false;
+        this.dialogIsOpen = false;
+    }
+    ngAfterViewInit() {
+        const el = this.viewContainer.element.nativeElement;
+        this.config?.triggers?.forEach(t => {
+            el.addEventListener(t, () => {
+                if (t == "click")
+                    this.config.stayOpen = true;
+                this.open();
+            });
+        });
+    }
+    async open() {
+        if (!this.dialogIsOpen) {
+            const el = this.viewContainer.element.nativeElement;
+            this.dialogIsOpen = true;
+            await openTooltip(this.dialog, this.template, this.data, el, this.config);
+            this.dialogIsOpen = false;
+        }
+    }
+    async onPointerEnter(evt) {
+        // If the template is not a template ref, do nothing.
+        if (!(this.template instanceof TemplateRef))
+            return;
+        if (Array.isArray(this.config?.triggers) && !this.config.triggers.includes("hover")) {
+            return;
+        }
+        this.isCursorOverTarget = true;
+        setTimeout(async () => {
+            // If the cursor moved away in the time
+            if (!this.isCursorOverTarget)
+                return;
+            this.open();
+        }, this.config.delay ?? 250);
+    }
+    async onPointerLeave(evt) {
+        this.isCursorOverTarget = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TooltipDirective, deps: [{ token: i1$1.MatDialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: TooltipDirective, isStandalone: true, selector: "[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: "17.1.2", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngx-tooltip]',
+                    providers: [
+                        MatDialog
+                    ],
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i0.ViewContainerRef }], propDecorators: { template: [{
+                type: Input,
+                args: ["ngx-tooltip"]
+            }], config: [{
+                type: Input,
+                args: ["ngx-tooltip-config"]
+            }], data: [{
+                type: Input,
+                args: ["ngx-tooltip-context"]
+            }], 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, focusTrap = false, matPopupOptions) => {
+    const component = Array.isArray(template) ? MenuComponent : template;
+    const rect = await calcTooltipBounds(component, data, matPopupOptions);
+    const ownerCords = el.getBoundingClientRect();
+    const cords = getPosition(el, config, rect);
+    const specificId = ulid();
+    return firstValueFrom(dialog.open(TooltipComponent, {
+        autoFocus: focusTrap,
+        restoreFocus: focusTrap,
+        data: {
+            dialog,
+            data: data,
+            template: template,
+            config: config,
+            matPopupOptions,
+            ownerCords: ownerCords,
+            selfCords: cords,
+            id: specificId
+        },
+        panelClass: ["ngx-tooltip", 'ngx-' + specificId].concat(config?.customClass || []),
+        position: cords,
+        hasBackdrop: false,
+        ...matPopupOptions
+    })
+        .afterClosed());
+};
+class DropdownDirective extends TooltipDirective {
+    constructor() {
+        super(...arguments);
+        /**
+         * Configuration for opening the app menu
+         */
+        this._config = {};
+    }
+    ngOnInit() {
+        // Set default values
+        this._config.position = this._config.position ?? "bottom";
+        this._config.alignment = this._config.alignment ?? "start";
+        this._config.stayOpen = this._config.stayOpen ?? true;
+        this.config = this._config;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DropdownDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: DropdownDirective, isStandalone: true, selector: "[ngx-dropdown],[ngx-dropdown-config]", inputs: { template: ["ngx-dropdown", "template"], _config: ["ngx-dropdown-config", "_config"] }, providers: [
+            MatDialog
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DropdownDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngx-dropdown],[ngx-dropdown-config]',
+                    providers: [
+                        MatDialog
+                    ],
+                    standalone: true
+                }]
+        }], propDecorators: { template: [{
+                type: Input,
+                args: ["ngx-dropdown"]
+            }], _config: [{
+                type: Input,
+                args: ["ngx-dropdown-config"]
+            }] } });
+
+class MenuDirective {
+    constructor(dialog, viewContainer) {
+        this.dialog = dialog;
+        this.viewContainer = viewContainer;
+        /**
+         * Configuration for opening the app menu
          */
         this.config = {};
     }
@@ -919,7 +982,7 @@ class MenuDirective {
             throw ex;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: MenuDirective, deps: [{ token: i1.MatDialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: MenuDirective, deps: [{ token: i1$1.MatDialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: MenuDirective, isStandalone: true, selector: "[ngx-contextmenu],[ngx-menu]", inputs: { data: ["ngx-menu-context", "data"], ctxMenuItems: ["ngx-contextmenu", "ctxMenuItems"], menuItems: ["ngx-menu", "menuItems"], config: ["ngx-menu-config", "config"] }, providers: [
             MatDialog
         ], ngImport: i0 }); }
@@ -933,7 +996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                     ],
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i0.ViewContainerRef }], propDecorators: { data: [{
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i0.ViewContainerRef }], propDecorators: { data: [{
                 type: Input,
                 args: ["ngx-menu-context"]
             }], ctxMenuItems: [{
@@ -954,7 +1017,8 @@ const openMenu = async (dialog, menuItems, data, evt, config = {}, el) => {
     // Apply defaults.
     if (!config.alignment)
         config.alignment = "start";
-    const cords = getPosition(el || evt, config, await calcMenuItemBounds(menuItems, data));
+    const initialBounds = await calcMenuItemBounds(menuItems, data);
+    const cords = getPosition(el || evt, config, initialBounds);
     const specificId = ulid();
     return firstValueFrom(dialog.open(MenuComponent, {
         data: {
@@ -964,7 +1028,8 @@ const openMenu = async (dialog, menuItems, data, evt, config = {}, el) => {
             selfCords: cords,
             items: menuItems,
             config: config,
-            id: specificId
+            id: specificId,
+            targetBounds: initialBounds
         },
         panelClass: ["ngx-menu", 'ngx-' + specificId].concat(config?.customClass || []),
         position: cords,
@@ -1126,7 +1191,7 @@ class HtmlBypass {
     transform(url) {
         return this.sanitizer.bypassSecurityTrustHtml(url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: HtmlBypass, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: HtmlBypass, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: HtmlBypass, isStandalone: true, name: "htmlbypass" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: HtmlBypass, decorators: [{
@@ -1135,7 +1200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                     name: 'htmlbypass',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
 
 /**
  * Url Sanitizer pipe.
@@ -1150,7 +1215,7 @@ class ResourceBypass {
     transform(url) {
         return this.sanitizer.bypassSecurityTrustResourceUrl(url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ResourceBypass, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ResourceBypass, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ResourceBypass, isStandalone: true, name: "resourcebypass" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ResourceBypass, decorators: [{
@@ -1159,7 +1224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                     name: 'resourcebypass',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
 
 /**
  * Url Sanitizer pipe.
@@ -1174,7 +1239,7 @@ class ScriptBypass {
     transform(url) {
         return this.sanitizer.bypassSecurityTrustScript(url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ScriptBypass, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ScriptBypass, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ScriptBypass, isStandalone: true, name: "scriptbypass" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ScriptBypass, decorators: [{
@@ -1183,7 +1248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                     name: 'scriptbypass',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
 
 /**
  * Url Sanitizer pipe.
@@ -1198,7 +1263,7 @@ class StyleBypass {
     transform(url) {
         return this.sanitizer.bypassSecurityTrustStyle(url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: StyleBypass, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: StyleBypass, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: StyleBypass, isStandalone: true, name: "stylebypass" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: StyleBypass, decorators: [{
@@ -1207,7 +1272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                     name: 'stylebypass',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
 
 /**
  * Url Sanitizer pipe.
@@ -1222,7 +1287,7 @@ class UrlBypass {
     transform(url) {
         return this.sanitizer.bypassSecurityTrustUrl(url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UrlBypass, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UrlBypass, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: UrlBypass, isStandalone: true, name: "urlbypass" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UrlBypass, decorators: [{
@@ -1231,7 +1296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                     name: 'urlbypass',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
 
 const sleep = ms => new Promise(r => setTimeout(r, ms));
 /**
@@ -2138,7 +2203,7 @@ class DialogService {
     clearDialog() {
         this.dialogs.forEach(dialog => dialog.close());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DialogService, deps: [{ token: i1.MatDialog }, { token: LazyLoaderService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DialogService, deps: [{ token: i1$1.MatDialog }, { token: LazyLoaderService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DialogService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DialogService, decorators: [{
@@ -2146,7 +2211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: LazyLoaderService }] });
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: LazyLoaderService }] });
 
 // Total number of _retries_ if there is a 429 response code.
 const retryCount = 2;
@@ -2702,7 +2767,7 @@ class CommandPaletteComponent {
             this.dialog.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CommandPaletteComponent, deps: [{ token: CommandPaletteService }, { token: i1.MatDialogRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CommandPaletteComponent, deps: [{ token: CommandPaletteService }, { token: i1$1.MatDialogRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: CommandPaletteComponent, isStandalone: true, selector: "ngx-command-palette", inputs: { contextElement: "contextElement" }, host: { listeners: { "click": "textInput.nativeElement.focus()", "window:blur": "onBlur()", "window:resize": "onBlur()" } }, viewQueries: [{ propertyName: "scrollbar", first: true, predicate: NgScrollbar, descendants: true }, { propertyName: "textInput", first: true, predicate: ["textinput"], descendants: true }], ngImport: i0, template: "<mat-form-field style=\"width: 100%; padding: 8px 8px 0 8px\">\n    <ngx-commandpalette-breadcrumb\n        [breadcrumbs]=\"breadcrumbs\"\n    />\n    <input\n        #textinput\n        matInput\n        type=\"text\"\n        [value]=\"queryString\"\n        (keydown)=\"onKeyDown($event)\"\n    >\n</mat-form-field>\n\n@if (filteredCommands.length == 0) {\n    <div class=\"commands\">\n        <div class=\"command selected\">\n            <div class=\"label\">No matching results.</div>\n        </div>\n    </div>\n}\n@else {\n    <div\n        class=\"commands\"\n        [style.flex]=\"(filteredCommands.length * rowHeight) + 'px'\"\n        [class.shadow]=\"scrollbar?.viewport?.scrollTop > 2\"\n    >\n        <ng-scrollbar #scrollbar>\n            <cdk-virtual-scroll-viewport [itemSize]=\"rowHeight\" scrollViewport [minBufferPx]=\"150\">\n                <div\n                    *cdkVirtualFor=\"let command of filteredCommands; let index = index\"\n                    class=\"command\"\n                    [style.height]=\"rowHeight + 'px'\"\n                    [class.selected]=\"index==activeIndex\"\n                    [class.has-icon]=\"command.icon\"\n                    [attr.index]=\"index\"\n                    (click)=\"executeCommand(command)\"\n                >\n                    @if (command.icon) {\n                        <div class=\"icon\">\n                            @if (!MAT_ICON_REGEX.test(command.icon)) {\n                                <mat-icon [fontIcon]=\"command.icon\"></mat-icon>\n                            }\n                            @else {\n                                <img [src]=\"command.icon\"/>\n                            }\n                        </div>\n                    }\n\n                    <div\n                        class=\"label\"\n                        [innerHTML]=\"command['_renderedLabel'] || command.label || command.description\"\n                    ></div>\n\n                    @if (command['_renderedHint'] || command.hint) {\n                        <div\n                            class=\"hint\"\n                            [innerHTML]=\"command['_renderedHint'] || command.hint\"\n                        ></div>\n                    }\n                    <div style=\"flex: 1\"></div>\n\n                    <div>\n                        @for (shortcut of (command.shortcutKey?.find ? command.shortcutKey : [command.shortcutKey]); track shortcut) {\n                            @if (shortcut) {\n                                <ngx-commandpalette-shortcut [shortcut]=\"shortcut\"/>\n                            }\n                        }\n                    </div>\n                </div>\n            </cdk-virtual-scroll-viewport>\n        </ng-scrollbar>\n    </div>\n}\n\n", styles: [":host{display:flex;flex-direction:column;width:860px;max-height:460px;border:1px solid #484848;border-radius:6px;background-color:#222;-webkit-user-select:none;user-select:none;overflow:hidden;--text-color: #ccc;--transition: .25s ease}.commands{max-height:100%;overflow:hidden;position:relative;padding:0 6px}.commands .command{display:flex;padding-left:16px;padding-right:32px;align-items:center;border-radius:3px;justify-content:space-between;color:var(--text-color);font-size:15.5px;background-color:#0000}.commands .command:hover{background-color:#2a2d2e}.commands .command.selected{background-color:#04395e}.commands .command.has-icon{padding-left:8px}.commands .command .label ::ng-deep b{color:#2196f3}.commands .command .icon{width:38px;height:100%;display:flex;align-items:center;justify-content:center}.commands .command img{max-height:100%;padding:4px}.commands .command .hint{margin-left:12px;opacity:.75}.commands.shadow:after{box-shadow:#000 0 6px 6px -6px inset}.commands:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:6px;box-shadow:#0000 0 6px 6px -6px inset;transition:box-shadow .3s ease}ng-scrollbar.ng-scrollbar{--scrollbar-padding: 0px;--scrollbar-size: 14px;--scrollbar-border-radius: 0;--scrollbar-thumb-color: #4440;--scrollbar-thumb-transition: height ease-out .15s, width ease-out .15s, background-color ease 1.2s;animation:fadeScrollbar 1.2s ease}ng-scrollbar.ng-scrollbar:hover{--scrollbar-thumb-color: #444f}@keyframes fadeScrollbar{0%{--scrollbar-thumb-color: #444f}to{--scrollbar-thumb-color: #4440}}cdk-virtual-scroll-viewport{height:100%;padding-bottom:6px}:host ::ng-deep .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix{padding:2px 0 4px}:host ::ng-deep .mat-mdc-form-field-infix{min-height:32px;display:flex}:host ::ng-deep .mat-mdc-text-field-wrapper{margin-bottom:8px;padding:0 12px}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .light app-command-palette{border:1px solid #e5e5e5;background-color:#f8f8f8;--text-color: #262626}::ng-deep .light app-command-palette .commands .command:hover{background-color:#f2f2f2}::ng-deep .light app-command-palette .commands .command.selected{background-color:#e8e8e8}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i7.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i7.ScrollViewport, selector: "[scrollViewport]" }, { kind: "component", type: ShortcutComponent, selector: "ngx-commandpalette-shortcut", inputs: ["shortcut"] }, { kind: "component", type: BreadcrumbComponent, selector: "ngx-commandpalette-breadcrumb", inputs: ["breadcrumbs"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CommandPaletteComponent, decorators: [{
@@ -2717,7 +2782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         ShortcutComponent,
                         BreadcrumbComponent
                     ], standalone: true, template: "<mat-form-field style=\"width: 100%; padding: 8px 8px 0 8px\">\n    <ngx-commandpalette-breadcrumb\n        [breadcrumbs]=\"breadcrumbs\"\n    />\n    <input\n        #textinput\n        matInput\n        type=\"text\"\n        [value]=\"queryString\"\n        (keydown)=\"onKeyDown($event)\"\n    >\n</mat-form-field>\n\n@if (filteredCommands.length == 0) {\n    <div class=\"commands\">\n        <div class=\"command selected\">\n            <div class=\"label\">No matching results.</div>\n        </div>\n    </div>\n}\n@else {\n    <div\n        class=\"commands\"\n        [style.flex]=\"(filteredCommands.length * rowHeight) + 'px'\"\n        [class.shadow]=\"scrollbar?.viewport?.scrollTop > 2\"\n    >\n        <ng-scrollbar #scrollbar>\n            <cdk-virtual-scroll-viewport [itemSize]=\"rowHeight\" scrollViewport [minBufferPx]=\"150\">\n                <div\n                    *cdkVirtualFor=\"let command of filteredCommands; let index = index\"\n                    class=\"command\"\n                    [style.height]=\"rowHeight + 'px'\"\n                    [class.selected]=\"index==activeIndex\"\n                    [class.has-icon]=\"command.icon\"\n                    [attr.index]=\"index\"\n                    (click)=\"executeCommand(command)\"\n                >\n                    @if (command.icon) {\n                        <div class=\"icon\">\n                            @if (!MAT_ICON_REGEX.test(command.icon)) {\n                                <mat-icon [fontIcon]=\"command.icon\"></mat-icon>\n                            }\n                            @else {\n                                <img [src]=\"command.icon\"/>\n                            }\n                        </div>\n                    }\n\n                    <div\n                        class=\"label\"\n                        [innerHTML]=\"command['_renderedLabel'] || command.label || command.description\"\n                    ></div>\n\n                    @if (command['_renderedHint'] || command.hint) {\n                        <div\n                            class=\"hint\"\n                            [innerHTML]=\"command['_renderedHint'] || command.hint\"\n                        ></div>\n                    }\n                    <div style=\"flex: 1\"></div>\n\n                    <div>\n                        @for (shortcut of (command.shortcutKey?.find ? command.shortcutKey : [command.shortcutKey]); track shortcut) {\n                            @if (shortcut) {\n                                <ngx-commandpalette-shortcut [shortcut]=\"shortcut\"/>\n                            }\n                        }\n                    </div>\n                </div>\n            </cdk-virtual-scroll-viewport>\n        </ng-scrollbar>\n    </div>\n}\n\n", styles: [":host{display:flex;flex-direction:column;width:860px;max-height:460px;border:1px solid #484848;border-radius:6px;background-color:#222;-webkit-user-select:none;user-select:none;overflow:hidden;--text-color: #ccc;--transition: .25s ease}.commands{max-height:100%;overflow:hidden;position:relative;padding:0 6px}.commands .command{display:flex;padding-left:16px;padding-right:32px;align-items:center;border-radius:3px;justify-content:space-between;color:var(--text-color);font-size:15.5px;background-color:#0000}.commands .command:hover{background-color:#2a2d2e}.commands .command.selected{background-color:#04395e}.commands .command.has-icon{padding-left:8px}.commands .command .label ::ng-deep b{color:#2196f3}.commands .command .icon{width:38px;height:100%;display:flex;align-items:center;justify-content:center}.commands .command img{max-height:100%;padding:4px}.commands .command .hint{margin-left:12px;opacity:.75}.commands.shadow:after{box-shadow:#000 0 6px 6px -6px inset}.commands:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:6px;box-shadow:#0000 0 6px 6px -6px inset;transition:box-shadow .3s ease}ng-scrollbar.ng-scrollbar{--scrollbar-padding: 0px;--scrollbar-size: 14px;--scrollbar-border-radius: 0;--scrollbar-thumb-color: #4440;--scrollbar-thumb-transition: height ease-out .15s, width ease-out .15s, background-color ease 1.2s;animation:fadeScrollbar 1.2s ease}ng-scrollbar.ng-scrollbar:hover{--scrollbar-thumb-color: #444f}@keyframes fadeScrollbar{0%{--scrollbar-thumb-color: #444f}to{--scrollbar-thumb-color: #4440}}cdk-virtual-scroll-viewport{height:100%;padding-bottom:6px}:host ::ng-deep .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix{padding:2px 0 4px}:host ::ng-deep .mat-mdc-form-field-infix{min-height:32px;display:flex}:host ::ng-deep .mat-mdc-text-field-wrapper{margin-bottom:8px;padding:0 12px}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .light app-command-palette{border:1px solid #e5e5e5;background-color:#f8f8f8;--text-color: #262626}::ng-deep .light app-command-palette .commands .command:hover{background-color:#f2f2f2}::ng-deep .light app-command-palette .commands .command.selected{background-color:#e8e8e8}\n"] }]
-        }], ctorParameters: () => [{ type: CommandPaletteService }, { type: i1.MatDialogRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: CommandPaletteService }, { type: i1$1.MatDialogRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }], propDecorators: { scrollbar: [{
@@ -2929,7 +2994,7 @@ class CommandPaletteService {
     getRegisteredCommands(element = document.body) {
         return this.getCommandBlocks(element).map(c => c.actions).flat();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CommandPaletteService, deps: [{ token: i1.MatDialog }, { token: LazyLoaderService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CommandPaletteService, deps: [{ token: i1$1.MatDialog }, { token: LazyLoaderService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CommandPaletteService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CommandPaletteService, decorators: [{
@@ -2937,7 +3002,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: LazyLoaderService }] });
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: LazyLoaderService }] });
 
 class LazyLoaderModule {
     static forRoot(config) {
@@ -9946,7 +10011,7 @@ class FileGridComponent {
             inputs: { path: data?.path || this.path, name: data?.name || '', config: this.config }
         }).then(r => this.loadFolder());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: FileGridComponent, deps: [{ token: Fetch }, { token: KeyboardService }, { token: DialogService }, { token: i1.MatDialog }, { token: FilemanagerComponent }, { token: i0.ChangeDetectorRef }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: FileGridComponent, deps: [{ token: Fetch }, { token: KeyboardService }, { token: DialogService }, { token: i1$1.MatDialog }, { token: FilemanagerComponent }, { token: i0.ChangeDetectorRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: FileGridComponent, isStandalone: true, selector: "app-file-grid", inputs: { path: "path", config: "config", showHiddenFiles: "showHiddenFiles", viewMode: "viewMode", gridSize: "gridSize", tab: "tab", selection: "selection", value: "value", sortOrder: "sortOrder" }, outputs: { pathChange: "pathChange", fileSelect: "fileSelect", fileDblClick: "fileDblClick", folderSelect: "folderSelect", folderDblClick: "folderDblClick", newTab: "newTab", loadFiles: "loadFiles", selectionChange: "selectionChange", valueChange: "valueChange" }, viewQueries: [{ propertyName: "filesRef", first: true, predicate: ["fileViewport"], descendants: true }, { propertyName: "tabulator", first: true, predicate: TabulatorComponent, descendants: true }, { propertyName: "renameTemplate", first: true, predicate: ["renameTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (showLoader) {\n    <mat-progress-bar [class.hide]=\"hideLoader\" mode=\"query\"/>\n}\n\n<div\n    style=\"display: contents\"\n    [style.--filemanager-fileicon-backdrop]=\"'url(' + iconResolver.path + '/pop/generic.svg)'\"\n    (dragstart)=\"userIsDraggingFile = true\"\n    (dragend)=\"userIsDraggingFile = false\"\n    (dragover)=\"draggingOver = true\"\n    (dragleave)=\"draggingOver = false\"\n    (ondrop)=\"onDrop($event)\"\n>\n\n    @if (failedLoad) {\n        <div style=\"display: flex; align-items: center; justify-content: center; height: 100%\">\n            <div style=\"max-width: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center;\">\n                <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->\n                <svg\n                    fill=\"var(--text-color)\"\n                    width=\"200px\"\n                    viewBox=\"0 0 600.525 600.525\"\n                >\n                    <path d=\"M57.375,138.656L43.031,95.146c-23.428,8.128-40.162,29.166-42.553,54.028l45.9,3.825C46.856,146.306,51.16,140.568,57.375,138.656z\" />\n                    <rect y=\"288.309\" width=\"45.9\" height=\"45.901\" />\n                    <path d=\"M554.625,446.091c0,3.346-0.956,6.215-2.868,9.084l38.25,25.34c6.693-10.039,10.04-21.992,10.04-34.424V423.14h-45.899v22.951H554.625z\" />\n                    <rect x=\"456.609\" y=\"146.306\" width=\"45.9\" height=\"45.9\" />\n                    <rect x=\"485.297\" y=\"462.825\" width=\"45.9\" height=\"45.9\" />\n                    <rect x=\"393.497\" y=\"462.825\" width=\"45.9\" height=\"45.9\" />\n                    <rect x=\"364.81\" y=\"146.306\" width=\"45.9\" height=\"45.9\" />\n                    <rect x=\"118.097\" y=\"462.825\" width=\"45.9\" height=\"45.9\" />\n                    <rect y=\"380.108\" width=\"45.9\" height=\"45.9\" />\n                    <rect y=\"196.509\" width=\"45.9\" height=\"45.9\" />\n                    <path d=\"M330.385,143.437c-2.391-1.434-3.825-2.391-4.304-2.869l-28.209-29.166c-1.913-1.913-4.303-3.825-6.694-5.737l-27.253,36.815c0.478,0.478,0.956,0.956,0.956,0.956s37.772,34.425,44.465,41.119L330.385,143.437z\" />\n                    <rect x=\"554.625\" y=\"239.541\" width=\"45.9\" height=\"45.9\" />\n                    <rect x=\"301.697\" y=\"462.825\" width=\"45.899\" height=\"45.9\" />\n                    <path d=\"M559.885,146.306h-10.997v47.812h5.737h45.9v-7.172C600.525,164.475,582.356,146.306,559.885,146.306z\" />\n                    <rect x=\"187.425\" y=\"91.8\" width=\"45.9\" height=\"45.9\" />\n                    <rect x=\"554.625\" y=\"331.341\" width=\"45.9\" height=\"45.9\" />\n                    <rect x=\"95.625\" y=\"91.8\" width=\"45.9\" height=\"45.9\" />\n                    <rect x=\"209.897\" y=\"462.825\" width=\"45.9\" height=\"45.9\" />\n                    <path d=\"M49.247,456.132l-36.337,27.73c11.953,15.777,30.122,24.863,49.725,24.863h9.562v-45.9h-9.562C57.375,462.825,52.594,460.435,49.247,456.132z\" />\n                </svg>\n\n                <h3>Sorry about that.</h3>\n                <p>\n                    Our servers aren't doing their thing right now.\n                    You can try again later or contact an administrator about this.\n                </p>\n                <hr style=\"width: 100%; opacity: .5;\"/>\n                <p>\n                    Error:\n                    <span style=\"color: var(--mat-tab-header-active-focus-label-text-color)\">{{error.status}}</span>\n                    <br/>\n                    @if (error.error?.message) {\n                        Message: {{error.error?.message}}\n                    }\n                </p>\n            </div>\n        </div>\n    }\n    @else {\n        <!-- <ng-container *ngIf=\"draggingOver\"></ng-container> -->\n        <!-- Grid mode -->\n        @if (viewMode == 'grid') {\n            <ng-scrollbar\n                class=\"grid content-area {{gridSize}} {{config.imageSize || 'normal'}}\"\n                [class.selectionMode]=\"config.mode == 'focusFiles'\"\n                [class.showDropArea]=\"draggingOver\"\n                style=\"height: 100%; width: 100%\"\n                track=\"vertical\"\n                pointerEventsMethod=\"scrollbar\"\n                [ngx-contextmenu]=\"folderContextMenu\"\n            >\n                <div class=\"resize-observer\" #fileViewport></div>\n                <cdk-virtual-scroll-viewport\n                    itemSize=\"150\"\n                    scrollViewport\n                    (click)=\"selection = []; selectionText = ''\"\n                >\n                    <div class=\"row\" *cdkVirtualFor=\"let row of sortedFolders\">\n                        @for (item of row; track item) {\n                            <div class=\"file\"\n                                [class.selected]=\"selection.includes(item)\"\n                                [class.generic]=\"item['_icon'].needsBackdrop\"\n                                [ngx-contextmenu]=\"fileContextMenu\"\n                                [ngx-menu-context]=\"item\"\n                            >\n                                @if (config.mode == 'focusFiles' && item.kind == 'file') {\n                                    <mat-checkbox\n                                        #checkbox\n                                        [checked]=\"item['_value']\"\n                                        (change)=\"onToggle(item, $event)\"\n                                    />\n                                }\n                                <div\n                                    style=\"display: contents\"\n                                    (click)=\"onSelect(item, $event)\"\n                                    (dblclick)=\"onItemClick(item)\"\n                                    (dragstart)=\"onDragStart($event, item)\"\n                                >\n                                    <img [src]=\"item['_icon'].path\"/>\n                                    <p>{{item['vanityName'] || item.name}}</p>\n                                </div>\n                            </div>\n                        }\n                    </div>\n                </cdk-virtual-scroll-viewport>\n            </ng-scrollbar>\n        }\n\n        <!-- List mode -->\n        @if (viewMode == 'list') {\n            <div\n                class=\"content-area\"\n                style=\"width: 100%; height: 100%\"\n                [class.showDropArea]=\"draggingOver\"\n                [ngx-contextmenu]=\"folderContextMenu\"\n            >\n                <app-tabulator\n                    [dataSource]=\"directoryContents\"\n                    [columns]=\"[\n                        { field: 'name', title: 'Name', formatter: nameCellFormatter },\n                        { field: '_size', title: 'Size' },\n                        { field: '_ctime', title: 'Created' },\n                        { field: '_mtime', title: 'Modified' },\n                    ]\"\n                    [options]=\"{\n                        rowHeight: 32\n                    }\"\n                    (rowClick)=\"onRowClick($event)\"\n                    (rowDblClick)=\"onItemClick($event.data)\"\n                    (rowContext)=\"onRowCtx($event)\"\n                />\n            </div>\n        }\n    }\n</div>\n\n@if (selectionText?.trim()?.length > 0) {\n    <div class=\"select-hint\">\n        {{selectionText}}\n    </div>\n}\n\n<div class=\"controls\">\n    <button\n        mat-flat-button\n        class=\"upload-button\"\n        (click)=\"onCreateFolder()\"\n    >\n        <mat-icon>create_new_folder</mat-icon>\n        New Folder\n    </button>\n    <button\n        mat-flat-button\n        class=\"upload-button\"\n        (click)=\"onUploadFile()\"\n    >\n        <mat-icon>upload_file</mat-icon>\n        Upload\n    </button>\n</div>\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}.resize-observer{position:absolute;inset:0}.grid .row{flex:1;display:grid;grid-template-columns:repeat(auto-fill,80px);justify-content:space-between;grid-gap:20px;grid-auto-rows:min-content;padding:10px;margin-right:10px}.grid .file{width:80px;z-index:1;position:relative;transition:opacity 50ms ease-in-out;display:flex;flex-direction:column;align-items:center;text-align:center}.grid .file.selected p{background-color:#8ad9d9;color:#000}.grid .file.generic:before{content:\" \";position:absolute;background:var(--filemanager-fileicon-backdrop);background-repeat:no-repeat;width:100%;height:100%;z-index:-1;left:0}.grid .file.generic img{height:44px;width:44px;margin-top:28px;margin-bottom:8px}.grid .file img{-webkit-user-select:none;user-select:none}.grid .file p{height:50px;width:100%;margin:0;padding:2px;font-size:14px;line-height:16px;border-radius:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow-wrap:break-word;transition:background-color 50ms ease-in-out,color 50ms ease-in-out}.grid .file mat-checkbox{position:absolute;left:-32px;top:-16px}:host ::ng-deep .small .file{width:46px}:host ::ng-deep .grid.selectionMode .row{padding-left:30px}:host ::ng-deep .grid.selectionMode .cdk-virtual-scroll-content-wrapper{padding-top:10px}:host ::ng-deep .tabulator .tabulator-row .tabulator-cell:not(:first-of-type){padding-top:9px}.list .row{flex:1;display:flex;align-items:center;padding:5px 10px;height:42px}.list .row p{margin:0}.list .row:hover{background-color:var(--filemanager-row-hover-background-color, #343434)}.list .row.selected p{background-color:#8ad9d9;color:#000;border-radius:5px;padding:0 4px}.list .row.odd{background-color:var(--filemanager-row-alt-background-color, #323232)}.controls{position:absolute;bottom:12px;right:12px;display:flex;gap:12px}.select-hint{position:absolute;font-size:14px;bottom:0;right:0;background-color:#000a;padding:2px 10px;border:1px solid black;border-top-right-radius:5px;border-bottom:none;border-right:none;z-index:9999}.select-hint:hover{display:none}.content-area{border:4px dashed rgba(0,0,0,0)}.showDropArea{border:4px dashed var(--theme-primary, rgba(128, 128, 128, .8));transition:border-color .25s ease}:host ::ng-deep ng-scrollbar.ng-scrollbar{box-sizing:border-box!important;--scrollbar-thumb-color: #666;min-height:200px;min-width:200px}mat-progress-bar{--mdc-linear-progress-track-height: 2px;position:absolute;top:0;left:0;width:100%;animation:dropIn .2s ease;transition:position .2s ease;z-index:100}mat-progress-bar.hide{top:-2px}@keyframes dropIn{0%{top:-2px}to{top:0}}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i7.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i7.ScrollViewport, selector: "[scrollViewport]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: TabulatorComponent, selector: "app-tabulator", inputs: ["dataSource", "columns", "key", "options"], outputs: ["cellClick", "cellDblClick", "rowClick", "rowContext", "rowDblClick"] }, { kind: "directive", type: MenuDirective, selector: "[ngx-contextmenu],[ngx-menu]", inputs: ["ngx-menu-context", "ngx-contextmenu", "ngx-menu", "ngx-menu-config"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: FileGridComponent, decorators: [{
@@ -9966,7 +10031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         MenuDirective,
                         ScrollingModule
                     ], standalone: true, template: "@if (showLoader) {\n    <mat-progress-bar [class.hide]=\"hideLoader\" mode=\"query\"/>\n}\n\n<div\n    style=\"display: contents\"\n    [style.--filemanager-fileicon-backdrop]=\"'url(' + iconResolver.path + '/pop/generic.svg)'\"\n    (dragstart)=\"userIsDraggingFile = true\"\n    (dragend)=\"userIsDraggingFile = false\"\n    (dragover)=\"draggingOver = true\"\n    (dragleave)=\"draggingOver = false\"\n    (ondrop)=\"onDrop($event)\"\n>\n\n    @if (failedLoad) {\n        <div style=\"display: flex; align-items: center; justify-content: center; height: 100%\">\n            <div style=\"max-width: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center;\">\n                <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->\n                <svg\n                    fill=\"var(--text-color)\"\n                    width=\"200px\"\n                    viewBox=\"0 0 600.525 600.525\"\n                >\n                    <path d=\"M57.375,138.656L43.031,95.146c-23.428,8.128-40.162,29.166-42.553,54.028l45.9,3.825C46.856,146.306,51.16,140.568,57.375,138.656z\" />\n                    <rect y=\"288.309\" width=\"45.9\" height=\"45.901\" />\n                    <path d=\"M554.625,446.091c0,3.346-0.956,6.215-2.868,9.084l38.25,25.34c6.693-10.039,10.04-21.992,10.04-34.424V423.14h-45.899v22.951H554.625z\" />\n                    <rect x=\"456.609\" y=\"146.306\" width=\"45.9\" height=\"45.9\" />\n                    <rect x=\"485.297\" y=\"462.825\" width=\"45.9\" height=\"45.9\" />\n                    <rect x=\"393.497\" y=\"462.825\" width=\"45.9\" height=\"45.9\" />\n                    <rect x=\"364.81\" y=\"146.306\" width=\"45.9\" height=\"45.9\" />\n                    <rect x=\"118.097\" y=\"462.825\" width=\"45.9\" height=\"45.9\" />\n                    <rect y=\"380.108\" width=\"45.9\" height=\"45.9\" />\n                    <rect y=\"196.509\" width=\"45.9\" height=\"45.9\" />\n                    <path d=\"M330.385,143.437c-2.391-1.434-3.825-2.391-4.304-2.869l-28.209-29.166c-1.913-1.913-4.303-3.825-6.694-5.737l-27.253,36.815c0.478,0.478,0.956,0.956,0.956,0.956s37.772,34.425,44.465,41.119L330.385,143.437z\" />\n                    <rect x=\"554.625\" y=\"239.541\" width=\"45.9\" height=\"45.9\" />\n                    <rect x=\"301.697\" y=\"462.825\" width=\"45.899\" height=\"45.9\" />\n                    <path d=\"M559.885,146.306h-10.997v47.812h5.737h45.9v-7.172C600.525,164.475,582.356,146.306,559.885,146.306z\" />\n                    <rect x=\"187.425\" y=\"91.8\" width=\"45.9\" height=\"45.9\" />\n                    <rect x=\"554.625\" y=\"331.341\" width=\"45.9\" height=\"45.9\" />\n                    <rect x=\"95.625\" y=\"91.8\" width=\"45.9\" height=\"45.9\" />\n                    <rect x=\"209.897\" y=\"462.825\" width=\"45.9\" height=\"45.9\" />\n                    <path d=\"M49.247,456.132l-36.337,27.73c11.953,15.777,30.122,24.863,49.725,24.863h9.562v-45.9h-9.562C57.375,462.825,52.594,460.435,49.247,456.132z\" />\n                </svg>\n\n                <h3>Sorry about that.</h3>\n                <p>\n                    Our servers aren't doing their thing right now.\n                    You can try again later or contact an administrator about this.\n                </p>\n                <hr style=\"width: 100%; opacity: .5;\"/>\n                <p>\n                    Error:\n                    <span style=\"color: var(--mat-tab-header-active-focus-label-text-color)\">{{error.status}}</span>\n                    <br/>\n                    @if (error.error?.message) {\n                        Message: {{error.error?.message}}\n                    }\n                </p>\n            </div>\n        </div>\n    }\n    @else {\n        <!-- <ng-container *ngIf=\"draggingOver\"></ng-container> -->\n        <!-- Grid mode -->\n        @if (viewMode == 'grid') {\n            <ng-scrollbar\n                class=\"grid content-area {{gridSize}} {{config.imageSize || 'normal'}}\"\n                [class.selectionMode]=\"config.mode == 'focusFiles'\"\n                [class.showDropArea]=\"draggingOver\"\n                style=\"height: 100%; width: 100%\"\n                track=\"vertical\"\n                pointerEventsMethod=\"scrollbar\"\n                [ngx-contextmenu]=\"folderContextMenu\"\n            >\n                <div class=\"resize-observer\" #fileViewport></div>\n                <cdk-virtual-scroll-viewport\n                    itemSize=\"150\"\n                    scrollViewport\n                    (click)=\"selection = []; selectionText = ''\"\n                >\n                    <div class=\"row\" *cdkVirtualFor=\"let row of sortedFolders\">\n                        @for (item of row; track item) {\n                            <div class=\"file\"\n                                [class.selected]=\"selection.includes(item)\"\n                                [class.generic]=\"item['_icon'].needsBackdrop\"\n                                [ngx-contextmenu]=\"fileContextMenu\"\n                                [ngx-menu-context]=\"item\"\n                            >\n                                @if (config.mode == 'focusFiles' && item.kind == 'file') {\n                                    <mat-checkbox\n                                        #checkbox\n                                        [checked]=\"item['_value']\"\n                                        (change)=\"onToggle(item, $event)\"\n                                    />\n                                }\n                                <div\n                                    style=\"display: contents\"\n                                    (click)=\"onSelect(item, $event)\"\n                                    (dblclick)=\"onItemClick(item)\"\n                                    (dragstart)=\"onDragStart($event, item)\"\n                                >\n                                    <img [src]=\"item['_icon'].path\"/>\n                                    <p>{{item['vanityName'] || item.name}}</p>\n                                </div>\n                            </div>\n                        }\n                    </div>\n                </cdk-virtual-scroll-viewport>\n            </ng-scrollbar>\n        }\n\n        <!-- List mode -->\n        @if (viewMode == 'list') {\n            <div\n                class=\"content-area\"\n                style=\"width: 100%; height: 100%\"\n                [class.showDropArea]=\"draggingOver\"\n                [ngx-contextmenu]=\"folderContextMenu\"\n            >\n                <app-tabulator\n                    [dataSource]=\"directoryContents\"\n                    [columns]=\"[\n                        { field: 'name', title: 'Name', formatter: nameCellFormatter },\n                        { field: '_size', title: 'Size' },\n                        { field: '_ctime', title: 'Created' },\n                        { field: '_mtime', title: 'Modified' },\n                    ]\"\n                    [options]=\"{\n                        rowHeight: 32\n                    }\"\n                    (rowClick)=\"onRowClick($event)\"\n                    (rowDblClick)=\"onItemClick($event.data)\"\n                    (rowContext)=\"onRowCtx($event)\"\n                />\n            </div>\n        }\n    }\n</div>\n\n@if (selectionText?.trim()?.length > 0) {\n    <div class=\"select-hint\">\n        {{selectionText}}\n    </div>\n}\n\n<div class=\"controls\">\n    <button\n        mat-flat-button\n        class=\"upload-button\"\n        (click)=\"onCreateFolder()\"\n    >\n        <mat-icon>create_new_folder</mat-icon>\n        New Folder\n    </button>\n    <button\n        mat-flat-button\n        class=\"upload-button\"\n        (click)=\"onUploadFile()\"\n    >\n        <mat-icon>upload_file</mat-icon>\n        Upload\n    </button>\n</div>\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}.resize-observer{position:absolute;inset:0}.grid .row{flex:1;display:grid;grid-template-columns:repeat(auto-fill,80px);justify-content:space-between;grid-gap:20px;grid-auto-rows:min-content;padding:10px;margin-right:10px}.grid .file{width:80px;z-index:1;position:relative;transition:opacity 50ms ease-in-out;display:flex;flex-direction:column;align-items:center;text-align:center}.grid .file.selected p{background-color:#8ad9d9;color:#000}.grid .file.generic:before{content:\" \";position:absolute;background:var(--filemanager-fileicon-backdrop);background-repeat:no-repeat;width:100%;height:100%;z-index:-1;left:0}.grid .file.generic img{height:44px;width:44px;margin-top:28px;margin-bottom:8px}.grid .file img{-webkit-user-select:none;user-select:none}.grid .file p{height:50px;width:100%;margin:0;padding:2px;font-size:14px;line-height:16px;border-radius:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow-wrap:break-word;transition:background-color 50ms ease-in-out,color 50ms ease-in-out}.grid .file mat-checkbox{position:absolute;left:-32px;top:-16px}:host ::ng-deep .small .file{width:46px}:host ::ng-deep .grid.selectionMode .row{padding-left:30px}:host ::ng-deep .grid.selectionMode .cdk-virtual-scroll-content-wrapper{padding-top:10px}:host ::ng-deep .tabulator .tabulator-row .tabulator-cell:not(:first-of-type){padding-top:9px}.list .row{flex:1;display:flex;align-items:center;padding:5px 10px;height:42px}.list .row p{margin:0}.list .row:hover{background-color:var(--filemanager-row-hover-background-color, #343434)}.list .row.selected p{background-color:#8ad9d9;color:#000;border-radius:5px;padding:0 4px}.list .row.odd{background-color:var(--filemanager-row-alt-background-color, #323232)}.controls{position:absolute;bottom:12px;right:12px;display:flex;gap:12px}.select-hint{position:absolute;font-size:14px;bottom:0;right:0;background-color:#000a;padding:2px 10px;border:1px solid black;border-top-right-radius:5px;border-bottom:none;border-right:none;z-index:9999}.select-hint:hover{display:none}.content-area{border:4px dashed rgba(0,0,0,0)}.showDropArea{border:4px dashed var(--theme-primary, rgba(128, 128, 128, .8));transition:border-color .25s ease}:host ::ng-deep ng-scrollbar.ng-scrollbar{box-sizing:border-box!important;--scrollbar-thumb-color: #666;min-height:200px;min-width:200px}mat-progress-bar{--mdc-linear-progress-track-height: 2px;position:absolute;top:0;left:0;width:100%;animation:dropIn .2s ease;transition:position .2s ease;z-index:100}mat-progress-bar.hide{top:-2px}@keyframes dropIn{0%{top:-2px}to{top:0}}\n"] }]
-        }], ctorParameters: () => [{ type: Fetch }, { type: KeyboardService }, { type: DialogService }, { type: i1.MatDialog }, { type: FilemanagerComponent }, { type: i0.ChangeDetectorRef }, { type: i1$1.DomSanitizer }], propDecorators: { filesRef: [{
+        }], ctorParameters: () => [{ type: Fetch }, { type: KeyboardService }, { type: DialogService }, { type: i1$1.MatDialog }, { type: FilemanagerComponent }, { type: i0.ChangeDetectorRef }, { type: i1.DomSanitizer }], propDecorators: { filesRef: [{
                 type: ViewChild,
                 args: ["fileViewport"]
             }], tabulator: [{
@@ -10317,7 +10382,7 @@ class FilemanagerComponent {
         lazyLoader.registerComponent({
             id: "folder-rename",
             group: "@dotglitch/ngx-web-components",
-            load: () => import('./dotglitch-ngx-common-folder-rename.component-xUdQXmcY.mjs')
+            load: () => import('./dotglitch-ngx-common-folder-rename.component-6j7OjwOo.mjs')
         });
         this.iconResolver = new IconResolver(libConfig.assetPath);
     }
@@ -11598,5 +11663,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CommandPaletteService, ComponentResolveStrategy, ConsoleLogger, DependencyService, DialogService, DynamicHTMLComponent, DynamicHTMLOptions, DynamicHTMLRenderer, Fetch, FileService, FilemanagerComponent, HtmlBypass, InstallMonacoUMD, KeyboardService, LazyLoaderComponent, LazyLoaderModule, LazyLoaderService, LogIcon, MenuComponent, MenuDirective, NGX_DYNAMIC_CONFIG, NGX_IMAGE_CACHE_CONFIG, NGX_LAZY_LOADER_CONFIG, NGX_WEB_COMPONENTS_CONFIG, NavigationService, NgxDynamicHTMLModule, NgxImageCacheDirective, OnMount, ParallaxCardComponent, ReactMagicWrapperComponent, ResourceBypass, ScriptBypass, StyleBypass, TabulatorComponent, ThemeService, TooltipDirective, UrlBypass, VscodeComponent, calcMenuItemBounds, openMenu, openTooltip };
+export { CommandPaletteService, ComponentResolveStrategy, ConsoleLogger, DependencyService, DialogService, DropdownDirective, DynamicHTMLComponent, DynamicHTMLOptions, DynamicHTMLRenderer, Fetch, FileService, FilemanagerComponent, HtmlBypass, InstallMonacoUMD, KeyboardService, LazyLoaderComponent, LazyLoaderModule, LazyLoaderService, LogIcon, MenuComponent, MenuDirective, NGX_DYNAMIC_CONFIG, NGX_IMAGE_CACHE_CONFIG, NGX_LAZY_LOADER_CONFIG, NGX_WEB_COMPONENTS_CONFIG, NavigationService, NgxDynamicHTMLModule, NgxImageCacheDirective, OnMount, ParallaxCardComponent, ReactMagicWrapperComponent, ResourceBypass, ScriptBypass, StyleBypass, TabulatorComponent, ThemeService, TooltipDirective, UrlBypass, VscodeComponent, calcMenuItemBounds, openMenu, openTooltip };
 //# sourceMappingURL=dotglitch-ngx-common.mjs.map