@dotglitch/ngx-common 1.0.2

package/fesm2020/dotglitch-ngx-common.mjs

@@ -0,0 +1,1977 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, Component, Optional, Inject, Input, HostListener, Directive, EventEmitter, Output, Pipe, Injectable, isDevMode, InjectionToken, ViewContainerRef, ViewChild, NgModule } from '@angular/core';
+import * as i1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import * as i2 from '@angular/common';
+import { CommonModule, NgTemplateOutlet, NgIf, NgForOf, DOCUMENT, NgComponentOutlet } from '@angular/common';
+import * as i1$1 from '@angular/platform-browser';
+import { createApplication } from '@angular/platform-browser';
+import { firstValueFrom, of, Subject, debounceTime } from 'rxjs';
+import * as i4 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 i2$1 from '@angular/cdk/portal';
+import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import { retry } from 'rxjs/operators';
+import * as i1$2 from '@angular/common/http';
+import * as i2$2 from '@angular/cdk/dialog';
+
+/**
+ * This utils file exists outside of the strict angular DI zone
+ * This enables opening popups without requiring absolute DI bindings.
+ */
+const getPosition = (el, config = {}, bounds) => {
+    // Bounds of the popup owner
+    const src = !!el['nodeName']
+        ? el.getBoundingClientRect()
+        : {
+            // It's a pointer event, so we'll take the X and Y from the pointer.
+            x: el['clientX'],
+            y: el['clientY'],
+            // Set a default tiny size, so we don't divide by zero.
+            width: 0.0001,
+            height: 0.0001
+        };
+    // Popup bounds
+    const { width, height } = bounds;
+    const winh = window.innerHeight;
+    const winw = window.innerWidth;
+    const cords = {
+        top: null,
+        left: null
+    };
+    if (config?.position == "left" || config?.position == "right" || !config?.position) {
+        switch (config?.alignment) {
+            case "end": {
+                // vertically bind to bottom
+                cords.top = src.y + src.height - height;
+                break;
+            }
+            case "afterend": {
+                // vertically bind below bottom
+                cords.top = src.y + src.height;
+                break;
+            }
+            case "beforestart": {
+                // vertically bind above top
+                cords.top = src.y - height;
+                break;
+            }
+            case "start": {
+                // vertically bind to top
+                cords.top = src.y;
+                break;
+            }
+            case "center":
+            default: {
+                // vertically center
+                cords.top = (src.y + (src.height / 2)) - (height / 2);
+                break;
+            }
+        }
+        // Apply bounds to prevent the dialog from being cut-off screen
+        // Lower bound
+        cords.top = Math.max(config?.edgePadding || 0, cords.top);
+        // Upper bound
+        cords.top = Math.min(winh - height, cords.top);
+        if (config?.position == "left") {
+            cords.left = src.x - (width + (config?.arrowSize || 0) + (config?.arrowPadding || 0));
+        }
+        if (config?.position == "right" || !config?.position) {
+            cords.left = src.x + (src.width + (config?.arrowSize || 0) + (config?.arrowPadding || 0));
+        }
+        // Lower bound
+        cords.left = Math.max(config?.edgePadding || 0, cords.left);
+        // Upper bound
+        cords.left = Math.min(winw - width, cords.left);
+    }
+    else if (config?.position == "top" || config?.position == "bottom") {
+        switch (config?.alignment) {
+            case "end": {
+                // vertically bind to right
+                cords.left = src.x + src.width - width;
+                break;
+            }
+            case "afterend": {
+                // vertically bind past right
+                cords.left = src.x + src.width;
+                break;
+            }
+            case "beforestart": {
+                // vertically bind before left
+                cords.left = src.x - width;
+                break;
+            }
+            case "start": {
+                // vertically bind to left
+                cords.left = src.x;
+                break;
+            }
+            case "center":
+            default: {
+                // vertically center
+                cords.left = (src.x + (src.width / 2)) - (width / 2);
+                break;
+            }
+        }
+        // Apply bounds to prevent the dialog from being cut-off screen
+        // Lower bound
+        cords.left = Math.max(config?.edgePadding || 0, cords.left);
+        // Upper bound
+        cords.left = Math.min(winw - width, cords.left);
+        if (config?.position == "top") {
+            cords.top = src.y - (height + (config?.arrowSize || 0) + (config?.arrowPadding || 0));
+        }
+        if (config?.position == "bottom") {
+            cords.top = src.y + (src.height + (config?.arrowSize || 0) + (config?.arrowPadding || 0));
+        }
+        // Lower bound
+        cords.top = Math.max(config?.edgePadding || 0, cords.top);
+        // Upper bound
+        cords.top = Math.min(winh - height, cords.top);
+    }
+    // Assign unit
+    cords.top = cords.top + 'px';
+    cords.left = cords.left + 'px';
+    return cords;
+};
+
+const calcTooltipBounds = async (template, data) => {
+    const args = {
+        data: data || {},
+        template,
+        config: {},
+        selfCords: { left: "0px", top: "0px" },
+        ownerCords: { x: 0, y: 0, width: 0, height: 0 },
+        id: null
+    };
+    // 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();
+    return 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.hasBootstrapped = false;
+        this.pointerIsOnVoid = false;
+        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.template = this.template || this._data?.template;
+        this.ownerCords = this.ownerCords || this._data?.ownerCords;
+        this.selfCords = this.selfCords || this._data?.selfCords;
+    }
+    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
+        setTimeout(() => {
+            this.hasBootstrapped = true;
+            if (this.pointerIsOnVoid)
+                this.dialogRef.close();
+        }, 10);
+    }
+    /**
+     * Close the tooltip if these actions occur
+     */
+    onClose() {
+        this.dialogRef?.close();
+    }
+    onPointerLeave() {
+        this.dialogRef?.close();
+    }
+}
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ViewContainerRef }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1.MatDialog, optional: true }, { token: i1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TooltipComponent, isStandalone: true, selector: "ngx-tooltip", inputs: { data: "data", config: "config", ownerCords: "ownerCords", selfCords: "selfCords", template: "template" }, host: { listeners: { "window:resize": "onClose()", "window:blur": "onClose()", "pointerleave": "onPointerLeave()" } }, ngImport: i0, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n    *ngIf=\"coverRectCords\"\n    class=\"owner-mask\"\n    [style.top]=\"coverRectCords.top + 'px'\"\n    [style.left]=\"coverRectCords.left + 'px'\"\n    [style.height]=\"coverRectCords.height + 'px'\"\n    [style.width]=\"coverRectCords.width + 'px'\"\n    style=\"z-index: -1;\"\n></div>\n\n<div class=\"void\"\n    (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && dialogRef.close()\"\n    (pointerleave)=\"pointerIsOnVoid = false\"\n    (pointerdown)=\"hasBootstrapped && dialogRef.close()\"\n></div>\n\n<div class=\"container\">\n    <ng-container\n        *ngIf=\"isTemplate == false\"\n        [ngComponentOutlet]=\"$any(template)\"\n    >\n    </ng-container>\n\n    <ng-container\n        *ngIf=\"isTemplate == true\"\n    >\n        <ng-container\n            [ngTemplateOutlet]=\"$any(template)\"\n            [ngTemplateOutletContext]=\"{ '$implicit': data }\"\n        ></ng-container>\n    </ng-container>\n</div>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-tooltip{--mdc-dialog-container-color: var(--ngx-tooltip-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__surface{overflow:visible;background-color:#0000}::ng-deep .cdk-overlay-container .context-menu-backdrop.cdk-overlay-backdrop-showing{opacity:0}::ng-deep .cdk-overlay-pane.ngx-tooltip .mat-dialog-container{padding:0}:host{min-width:2px;min-height:2px;display:block}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: 
+            // NgIf,
+            // NgTemplateOutlet,
+            // NgComponentOutlet,
+            CommonModule }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-tooltip', imports: [
+                        // NgIf,
+                        // NgTemplateOutlet,
+                        // NgComponentOutlet,
+                        CommonModule,
+                    ], standalone: true, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n    *ngIf=\"coverRectCords\"\n    class=\"owner-mask\"\n    [style.top]=\"coverRectCords.top + 'px'\"\n    [style.left]=\"coverRectCords.left + 'px'\"\n    [style.height]=\"coverRectCords.height + 'px'\"\n    [style.width]=\"coverRectCords.width + 'px'\"\n    style=\"z-index: -1;\"\n></div>\n\n<div class=\"void\"\n    (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && dialogRef.close()\"\n    (pointerleave)=\"pointerIsOnVoid = false\"\n    (pointerdown)=\"hasBootstrapped && dialogRef.close()\"\n></div>\n\n<div class=\"container\">\n    <ng-container\n        *ngIf=\"isTemplate == false\"\n        [ngComponentOutlet]=\"$any(template)\"\n    >\n    </ng-container>\n\n    <ng-container\n        *ngIf=\"isTemplate == true\"\n    >\n        <ng-container\n            [ngTemplateOutlet]=\"$any(template)\"\n            [ngTemplateOutletContext]=\"{ '$implicit': data }\"\n        ></ng-container>\n    </ng-container>\n</div>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-tooltip{--mdc-dialog-container-color: var(--ngx-tooltip-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-container .ngx-tooltip .mdc-dialog__surface{overflow:visible;background-color:#0000}::ng-deep .cdk-overlay-container .context-menu-backdrop.cdk-overlay-backdrop-showing{opacity:0}::ng-deep .cdk-overlay-pane.ngx-tooltip .mat-dialog-container{padding:0}:host{min-width:2px;min-height:2px;display:block}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}.container{width:100%;height:100%;background:var(--ngx-tooltip-background-color, #333);border-radius:6px;overflow:hidden}\n"] }]
+        }], ctorParameters: function () { return [{ 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
+            }], onClose: [{
+                type: HostListener,
+                args: ["window:resize"]
+            }, {
+                type: HostListener,
+                args: ["window:blur"]
+            }], onPointerLeave: [{
+                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 = {};
+    }
+    ngOnInit() {
+    }
+    // Needs to be public so we can manually open the dialog
+    async onPointerEnter(evt) {
+        // If the template is not a template ref, do nothing.
+        if (!(this.template instanceof TemplateRef))
+            return;
+        const el = this.viewContainer.element.nativeElement;
+        this.dialogInstance = await openTooltip(this.dialog, this.template, this.data, el, this.config);
+    }
+}
+TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipDirective, deps: [{ token: i1.MatDialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TooltipDirective, isStandalone: true, selector: "[ngxTooltip],[ngx-tooltip]", inputs: { template: ["ngx-tooltip", "template"], config: ["ngx-tooltip-config", "config"], data: ["ngx-tooltip-context", "data"] }, host: { listeners: { "pointerenter": "onPointerEnter($event)" } }, providers: [
+        MatDialog
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxTooltip],[ngx-tooltip]',
+                    providers: [
+                        MatDialog
+                    ],
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.ViewContainerRef }]; }, propDecorators: { template: [{
+                type: Input,
+                args: ["ngxTooltip"]
+            }, {
+                type: Input,
+                args: ["ngx-tooltip"]
+            }], config: [{
+                type: Input,
+                args: ["ngxTooltipConfig"]
+            }, {
+                type: Input,
+                args: ["ngx-tooltip-config"]
+            }], data: [{
+                type: Input,
+                args: ["ngxTooltipContext"]
+            }, {
+                type: Input,
+                args: ["ngx-tooltip-context"]
+            }], onPointerEnter: [{
+                type: HostListener,
+                args: ['pointerenter', ['$event']]
+            }] } });
+// Helper to open the context menu without using the directive.
+const openTooltip = async (dialog, template, data, el, config) => {
+    const rect = await calcTooltipBounds(template, data);
+    const ownerCords = el.getBoundingClientRect();
+    const cords = getPosition(el, config, rect);
+    const specificId = crypto.randomUUID();
+    return new Promise(res => {
+        dialog.open(TooltipComponent, {
+            data: {
+                data: data,
+                template: template,
+                config: config,
+                ownerCords: ownerCords,
+                selfCords: cords,
+                id: specificId
+            },
+            panelClass: ["ngx-tooltip", 'ngx-' + specificId].concat(config?.customClass || []),
+            position: cords,
+            hasBackdrop: false
+        })
+            .afterClosed()
+            .subscribe(s => {
+            res(s);
+        });
+    });
+};
+
+const calcMenuItemBounds = async (menuItems, dataObj) => {
+    const data = {
+        data: dataObj,
+        items: menuItems,
+        config: {},
+        id: null
+    };
+    return calcComponentBounds(MenuComponent, data);
+};
+const calcComponentBounds = async (component, data) => {
+    // Forcibly bootstrap the ctx menu outside of the client application's zone.
+    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();
+    return rect;
+};
+class TemplateWrapper {
+    constructor(dialogRef, _data, viewContainer) {
+        this.dialogRef = dialogRef;
+        this._data = _data;
+        this.viewContainer = viewContainer;
+        this.data = _data.data;
+        this.template = _data.template;
+        // TODO: This is probably invalid
+        this.templateType = this.template instanceof TemplateRef ? "template" : "component";
+        if (this.templateType == "component") {
+            this.componentPortal = new ComponentPortal(this.template);
+        }
+    }
+}
+TemplateWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TemplateWrapper, deps: [{ token: i1.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+TemplateWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TemplateWrapper, isStandalone: true, selector: "ngx-menu-template-wrapper", ngImport: i0, template: `
+    <ng-container *ngIf="templateType == 'template'; else portalOutlet">
+        <ng-container
+            [ngTemplateOutlet]="template"
+            [ngTemplateOutletContext]="{ '$implicit': data, dialog: dialogRef }"
+        />
+    </ng-container>
+    <ng-template #portalOutlet [cdkPortalOutlet]="componentPortal" ></ng-template>
+`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TemplateWrapper, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-menu-template-wrapper',
+                    template: `
+    <ng-container *ngIf="templateType == 'template'; else portalOutlet">
+        <ng-container
+            [ngTemplateOutlet]="template"
+            [ngTemplateOutletContext]="{ '$implicit': data, dialog: dialogRef }"
+        />
+    </ng-container>
+    <ng-template #portalOutlet [cdkPortalOutlet]="componentPortal" ></ng-template>
+`,
+                    imports: [NgTemplateOutlet, PortalModule, NgIf],
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i0.ViewContainerRef }]; } });
+class MenuComponent {
+    constructor(viewContainer, sanitizer, _data, dialog, // optional only for the purpose of estimating dimensions
+    dialogRef, changeDetector) {
+        this.viewContainer = viewContainer;
+        this.sanitizer = sanitizer;
+        this._data = _data;
+        this.dialog = dialog;
+        this.dialogRef = dialogRef;
+        this.changeDetector = changeDetector;
+        this.closeSignal = new EventEmitter();
+        // 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;
+        // Defaults are set before @Input() hooks evaluate
+        this.data = this._data?.data;
+        this.parentCords = this._data?.parentCords;
+        this.items = this._data?.items;
+        this.config = this._data?.config;
+        this.id = this._data?.id;
+    }
+    ngOnInit() {
+        this.items?.forEach(i => {
+            if (typeof i == "string")
+                return;
+            // Set defaults
+            i['_disabled'] = false;
+            i['_visible'] = true;
+            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 || {});
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+            if (typeof i.isVisible == "function")
+                try {
+                    i['_visible'] = i.isVisible(this.data || {});
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+            if (typeof i.linkTemplate == "function")
+                try {
+                    i['_link'] = i.linkTemplate(this.data || {});
+                }
+                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);
+        // setTimeout(() => {
+        //     this.closeOnLeave = true
+        // }, 300);
+    }
+    ngAfterViewInit() {
+        if (this.parentCords) {
+            this.selfCords = this.viewContainer?.element?.nativeElement?.getBoundingClientRect();
+            this.changeDetector.detectChanges();
+        }
+    }
+    /**
+     *
+     * @param item
+     * @param evt
+     * @returns
+     */
+    async onMenuItemClick(item, row, hideBackdrop = false) {
+        if (typeof item == 'string')
+            return null;
+        if (item.separator)
+            return null;
+        // If cache is enabled, only load if we don't have any children.
+        const forceLoad = (item.cacheResolvedChildren ? !item.children : true);
+        if (item.childrenResolver && forceLoad) {
+            item['_isResolving'] = true;
+            item.children = await item.childrenResolver(this.data);
+            item['_isResolving'] = false;
+        }
+        if (!item.childTemplate && !item.children) {
+            if (item.action) {
+                item.action(this.data);
+                this.close();
+            }
+            // If no action, this is simply a text item.
+            return null;
+        }
+        // Need X pos, Y pos, width and height
+        const bounds = row.getBoundingClientRect();
+        const cords = {
+            top: null,
+            left: null,
+            bottom: null,
+            right: null
+        };
+        // Set position coordinates
+        const { width, height } = await (item.childTemplate
+            ? calcComponentBounds(TemplateWrapper, { template: item.childTemplate })
+            : calcMenuItemBounds(item.children, this.data));
+        if (bounds.y + height > window.innerHeight)
+            cords.bottom = "0px";
+        if (bounds.x + bounds.width + width > window.innerWidth)
+            cords.left = ((bounds.x - width)) + "px";
+        if (!cords.bottom)
+            cords.top = bounds.y + "px";
+        if (!cords.left)
+            cords.left = bounds.x + bounds.width + "px";
+        const component = item.children ? MenuComponent : TemplateWrapper;
+        const dialogRef = this.dialog.open(component, {
+            position: cords,
+            panelClass: ["ngx-ctx-menu", "ngx-app-menu"].concat(this.config?.customClass || []),
+            backdropClass: "ngx-ctx-menu-backdrop",
+            hasBackdrop: !hideBackdrop,
+            data: {
+                data: this.data,
+                parentCords: this.viewContainer?.element?.nativeElement?.getBoundingClientRect(),
+                items: item.children,
+                template: item.childTemplate,
+                config: this.config
+            }
+        });
+        let _s = dialogRef
+            .afterClosed()
+            .subscribe((result) => {
+            if (result != -1) {
+                if (result && typeof item.action == 'function')
+                    item.action(result);
+                this.close();
+            }
+            else {
+                item['_selfclose'] = Date.now();
+            }
+            _s.unsubscribe();
+        });
+        return dialogRef;
+    }
+    /**
+     *
+     * @param label
+     * @returns
+     */
+    formatLabel(label) {
+        return label.replace(/_([a-z0-9])_/i, (match, group) => `<u>${group}</u>`);
+    }
+    /**
+     * Close the context menu under these circumstances
+     */
+    // @HostListener("window:resize", ['event'])
+    // @HostListener("window:blur", ['event'])
+    close() {
+        this.closeSignal.emit();
+        this.dialogRef?.close();
+    }
+    /**
+     * Check if the dialog is clipping offscreen
+     * if so, move it back into view.
+     */
+    onResize() {
+        const el = this.viewContainer?.element?.nativeElement;
+        if (!el)
+            return;
+        const { width, height, x, y } = el.getBoundingClientRect();
+        const target = document.querySelector(".ngx-ctx-menu,.ngx-app-menu");
+        if (!target)
+            return;
+        // Move back into view if we're clipping outside of the bottom
+        if (y + height > window.innerHeight) {
+            const newTop = (window.innerHeight - (height + (this.config.edgePadding || 12))) + "px";
+            target.style['margin-top'] = newTop;
+        }
+        // Move back into view if we're clipping off the right
+        if (x + width > window.innerWidth) {
+            const newLeft = (window.innerWidth - (width + (this.config.edgePadding || 12))) + "px";
+            target.style['margin-left'] = newLeft;
+        }
+    }
+}
+MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuComponent, isStandalone: true, selector: "ngx-menu", inputs: { data: "data", parentCords: "parentCords", items: "items", config: "config", id: "id" }, outputs: { closeSignal: "closeSignal" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<table>\n    <tbody>\n        <ng-container *ngFor=\"let item of items\">\n            <ng-container>\n\n                <!-- A row with a click action -->\n                <tr #row\n                    *ngIf=\"item != 'separator' && item.separator != true && item['_visible']\"\n                    [class.disabled]=\"item['_disabled']\"\n                    (click)=\"!item['_disabled'] && onMenuItemClick(item, row)\"\n                    [class.hover]=\"item['children'] && row['hover']\"\n                    (pointerenter)=\"row['hover'] = true;\"\n                    (pointerleave)=\"row['hover'] = false\"\n                >\n                <!--  (item['children']?.length > 0 || item['childTemplate']) && onHover(item, row); closeOnLeave=true -->\n                    <td class=\"icon\" *ngIf=\"showIconColumn\">\n                        <img *ngIf=\"matIconRx.test(item.icon); else matIcon\" [src]=\"item.icon\" />\n                        <ng-template #matIcon>\n                            <mat-icon [fontIcon]=\"item.icon\"></mat-icon>\n                        </ng-template>\n                    </td>\n\n                    <!-- 'Normal' action based item -->\n                    <ng-container>\n                        <td class=\"label\"\n                            [style.padding-left]=\"showIconColumn ? 0 : '16px'\"\n                        >\n                            <a\n                                [attr.target]=\"item.linkTarget\"\n                                [attr.href]=\"(item['_link'] || item.link) ? sanitizer.bypassSecurityTrustUrl(item['_link'] || item.link) : undefined\"\n                            >\n                                <ng-container\n                                    *ngIf=\"$any(item.labelTemplate)?.prototype; else labelTemplate\"\n                                    [ngTemplateOutlet]=\"$any(item).labelTemplate\"\n                                    [ngTemplateOutletContext]=\"{ '$implicit': data, 'dialog': dialogRef }\"\n                                />\n\n                                <ng-template #labelTemplate>\n                                    <ng-container *ngIf=\"!$any(item)?.labelTemplate\">\n                                        <div [innerHTML]=\"item['_formattedLabel']\"></div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"$any(item)?.labelTemplate\">\n                                        {{$any(item)?.labelTemplate(data || {})}}\n                                    </ng-container>\n                                </ng-template>\n                            </a>\n                        </td>\n                    </ng-container>\n\n                    <td class=\"shortcut\" *ngIf=\"showShortcutColumn\">\n                        {{item.shortcutLabel}}\n                    </td>\n                    <td style=\"min-width: 16px\">\n                        <mat-icon *ngIf=\"\n                            (item.children && item.children.length > 0) ||\n                            item.childTemplate ||\n                            (item.childrenResolver && !item['_isResolving'])\n                        \"\n                            sytle=\"transform: translateY(2px)\"\n                        >\n                            chevron_right\n                        </mat-icon>\n\n                        <mat-progress-spinner *ngIf=\"item['_isResolving']\" mode=\"indeterminate\" [diameter]=\"20\" style=\"margin-right: 4px\"/>\n                    </td>\n                </tr>\n\n                <tr *ngIf=\"item != 'separator' && item.separator == true\" class=\"disabled separator\">\n                    <td class=\"center\" [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\">\n                        <span class=\"hr\">\n                            {{item['label'] || ''}}\n                        </span>\n                    </td>\n                </tr>\n                <tr *ngIf=\"item == 'separator'\" class=\"disabled separator\">\n                    <td [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\">\n                        <hr/>\n                    </td>\n                </tr>\n            </ng-container>\n        </ng-container>\n    </tbody>\n</table>\n\n<!-- <div *ngIf=\"true\" class=\"backdrop\"></div> -->\n<!-- <div\n    *ngIf=\"parentCords && this.selfCords\"\n    class=\"backdrop parent\"\n    [style.top]=\"(parentCords.y - selfCords.y + 6) + 'px'\"\n    [style.left]=\"(parentCords.x - selfCords.x + 12) + 'px'\"\n    [style.width]=\"(parentCords.width) + 'px'\"\n    [style.height]=\"(parentCords.height) + 'px'\"\n>\n</div> -->\n<!-- <ng-container *ngIf=\"parentCords && selfCords\">\n    <div #top\n        class=\"backdrop-outer\"\n        [style.bottom]=\"(parentCords.y - selfCords.y)*-1 + parentCords.height + 'px'\"\n        style=\"background: #f003;\"\n        (pointerenter)=\"onLeave()\"\n    ></div>\n    <div #right\n        class=\"backdrop-outer\"\n        [style.left]=\"((parentCords.x - selfCords.x) + parentCords.width) + 'px'\"\n        style=\"background: #0f03;\"\n        (pointerenter)=\"onLeave()\"\n    >\n    <div>px: {{parentCords.x}}</div>\n    <div>py: {{parentCords.y}}</div>\n    <div>pw: {{parentCords.width}}</div>\n    <div>ph: {{parentCords.height}}</div>\n    <div>sx: {{selfCords.x}}</div>\n    <div>sy: {{selfCords.y}}</div>\n    <div>sw: {{selfCords.width}}</div>\n    <div>sh: {{selfCords.height}}</div>\n    </div>\n    <div #bottom\n        class=\"backdrop-outer\"\n        [style.top]=\"((parentCords.y + parentCords.height - selfCords.y)) + 'px'\"\n        style=\"background: #00f3;\"\n        (pointerenter)=\"onLeave()\"\n    ></div>\n    <div #left\n        class=\"backdrop-outer\"\n        [style.right]=\"((parentCords.x - selfCords.x)*-1 + parentCords.width + 32) + 'px'\"\n        style=\"background: #fff3;\"\n        (pointerenter)=\"onLeave()\"\n    ></div>\n</ng-container> -->\n", styles: ["::ng-deep .cdk-overlay-container .ngx-ctx-menu{--mdc-dialog-container-color: var(--ngx-ctx-menu-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-ctx-menu .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-ctx-menu .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-pane.ngx-ctx-menu .mat-mdc-dialog-surface{overflow:visible}:host{-webkit-user-select:none;user-select:none;z-index:1;position:relative;display:block;overflow:hidden auto}table{border-spacing:0;border-radius:5px;padding:4px 0}tr{color:var(--ngx-ctx-menu-text-color, #ccc);font-size:14px;cursor:pointer;transition:background-color 75ms ease,color 75ms ease}tr:not(.disabled):hover{background-color:var(--ngx-ctx-menu-hover-background-color, #94ebeb);color:var(--ngx-ctx-menu-hover-text-color, #000)}tr:not(.disabled):hover a{color:var(--ngx-ctx-menu-hover-text-color, #000)}tr:not(.separator){height:36px}tr.disabled .label{color:var(--ngx-ctx-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}.hr{height:1px;text-align:center;position:relative}.hr:before,.hr:after{content:\"\";background:var(--ngx-ctx-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-ctx-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-ctx-menu-shortcut-text-color, #848484);text-align:end;padding-right:10px;padding-left:12px}.label{height:var(--ngx-ctx-menu-item-height, 30px)}td{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: "15.2.9", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-menu', imports: [
+                        NgIf,
+                        NgForOf,
+                        NgTemplateOutlet,
+                        MatIconModule,
+                        MatProgressSpinnerModule
+                    ], standalone: true, template: "<table>\n    <tbody>\n        <ng-container *ngFor=\"let item of items\">\n            <ng-container>\n\n                <!-- A row with a click action -->\n                <tr #row\n                    *ngIf=\"item != 'separator' && item.separator != true && item['_visible']\"\n                    [class.disabled]=\"item['_disabled']\"\n                    (click)=\"!item['_disabled'] && onMenuItemClick(item, row)\"\n                    [class.hover]=\"item['children'] && row['hover']\"\n                    (pointerenter)=\"row['hover'] = true;\"\n                    (pointerleave)=\"row['hover'] = false\"\n                >\n                <!--  (item['children']?.length > 0 || item['childTemplate']) && onHover(item, row); closeOnLeave=true -->\n                    <td class=\"icon\" *ngIf=\"showIconColumn\">\n                        <img *ngIf=\"matIconRx.test(item.icon); else matIcon\" [src]=\"item.icon\" />\n                        <ng-template #matIcon>\n                            <mat-icon [fontIcon]=\"item.icon\"></mat-icon>\n                        </ng-template>\n                    </td>\n\n                    <!-- 'Normal' action based item -->\n                    <ng-container>\n                        <td class=\"label\"\n                            [style.padding-left]=\"showIconColumn ? 0 : '16px'\"\n                        >\n                            <a\n                                [attr.target]=\"item.linkTarget\"\n                                [attr.href]=\"(item['_link'] || item.link) ? sanitizer.bypassSecurityTrustUrl(item['_link'] || item.link) : undefined\"\n                            >\n                                <ng-container\n                                    *ngIf=\"$any(item.labelTemplate)?.prototype; else labelTemplate\"\n                                    [ngTemplateOutlet]=\"$any(item).labelTemplate\"\n                                    [ngTemplateOutletContext]=\"{ '$implicit': data, 'dialog': dialogRef }\"\n                                />\n\n                                <ng-template #labelTemplate>\n                                    <ng-container *ngIf=\"!$any(item)?.labelTemplate\">\n                                        <div [innerHTML]=\"item['_formattedLabel']\"></div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"$any(item)?.labelTemplate\">\n                                        {{$any(item)?.labelTemplate(data || {})}}\n                                    </ng-container>\n                                </ng-template>\n                            </a>\n                        </td>\n                    </ng-container>\n\n                    <td class=\"shortcut\" *ngIf=\"showShortcutColumn\">\n                        {{item.shortcutLabel}}\n                    </td>\n                    <td style=\"min-width: 16px\">\n                        <mat-icon *ngIf=\"\n                            (item.children && item.children.length > 0) ||\n                            item.childTemplate ||\n                            (item.childrenResolver && !item['_isResolving'])\n                        \"\n                            sytle=\"transform: translateY(2px)\"\n                        >\n                            chevron_right\n                        </mat-icon>\n\n                        <mat-progress-spinner *ngIf=\"item['_isResolving']\" mode=\"indeterminate\" [diameter]=\"20\" style=\"margin-right: 4px\"/>\n                    </td>\n                </tr>\n\n                <tr *ngIf=\"item != 'separator' && item.separator == true\" class=\"disabled separator\">\n                    <td class=\"center\" [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\">\n                        <span class=\"hr\">\n                            {{item['label'] || ''}}\n                        </span>\n                    </td>\n                </tr>\n                <tr *ngIf=\"item == 'separator'\" class=\"disabled separator\">\n                    <td [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\">\n                        <hr/>\n                    </td>\n                </tr>\n            </ng-container>\n        </ng-container>\n    </tbody>\n</table>\n\n<!-- <div *ngIf=\"true\" class=\"backdrop\"></div> -->\n<!-- <div\n    *ngIf=\"parentCords && this.selfCords\"\n    class=\"backdrop parent\"\n    [style.top]=\"(parentCords.y - selfCords.y + 6) + 'px'\"\n    [style.left]=\"(parentCords.x - selfCords.x + 12) + 'px'\"\n    [style.width]=\"(parentCords.width) + 'px'\"\n    [style.height]=\"(parentCords.height) + 'px'\"\n>\n</div> -->\n<!-- <ng-container *ngIf=\"parentCords && selfCords\">\n    <div #top\n        class=\"backdrop-outer\"\n        [style.bottom]=\"(parentCords.y - selfCords.y)*-1 + parentCords.height + 'px'\"\n        style=\"background: #f003;\"\n        (pointerenter)=\"onLeave()\"\n    ></div>\n    <div #right\n        class=\"backdrop-outer\"\n        [style.left]=\"((parentCords.x - selfCords.x) + parentCords.width) + 'px'\"\n        style=\"background: #0f03;\"\n        (pointerenter)=\"onLeave()\"\n    >\n    <div>px: {{parentCords.x}}</div>\n    <div>py: {{parentCords.y}}</div>\n    <div>pw: {{parentCords.width}}</div>\n    <div>ph: {{parentCords.height}}</div>\n    <div>sx: {{selfCords.x}}</div>\n    <div>sy: {{selfCords.y}}</div>\n    <div>sw: {{selfCords.width}}</div>\n    <div>sh: {{selfCords.height}}</div>\n    </div>\n    <div #bottom\n        class=\"backdrop-outer\"\n        [style.top]=\"((parentCords.y + parentCords.height - selfCords.y)) + 'px'\"\n        style=\"background: #00f3;\"\n        (pointerenter)=\"onLeave()\"\n    ></div>\n    <div #left\n        class=\"backdrop-outer\"\n        [style.right]=\"((parentCords.x - selfCords.x)*-1 + parentCords.width + 32) + 'px'\"\n        style=\"background: #fff3;\"\n        (pointerenter)=\"onLeave()\"\n    ></div>\n</ng-container> -->\n", styles: ["::ng-deep .cdk-overlay-container .ngx-ctx-menu{--mdc-dialog-container-color: var(--ngx-ctx-menu-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-ctx-menu .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-ctx-menu .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-pane.ngx-ctx-menu .mat-mdc-dialog-surface{overflow:visible}:host{-webkit-user-select:none;user-select:none;z-index:1;position:relative;display:block;overflow:hidden auto}table{border-spacing:0;border-radius:5px;padding:4px 0}tr{color:var(--ngx-ctx-menu-text-color, #ccc);font-size:14px;cursor:pointer;transition:background-color 75ms ease,color 75ms ease}tr:not(.disabled):hover{background-color:var(--ngx-ctx-menu-hover-background-color, #94ebeb);color:var(--ngx-ctx-menu-hover-text-color, #000)}tr:not(.disabled):hover a{color:var(--ngx-ctx-menu-hover-text-color, #000)}tr:not(.separator){height:36px}tr.disabled .label{color:var(--ngx-ctx-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}.hr{height:1px;text-align:center;position:relative}.hr:before,.hr:after{content:\"\";background:var(--ngx-ctx-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-ctx-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-ctx-menu-shortcut-text-color, #848484);text-align:end;padding-right:10px;padding-left:12px}.label{height:var(--ngx-ctx-menu-item-height, 30px)}td{vertical-align:middle}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialog, decorators: [{
+                    type: Optional
+                }] }, { type: i1.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input
+            }], parentCords: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], closeSignal: [{
+                type: Output
+            }], onResize: [{
+                type: HostListener,
+                args: ["window:resize"]
+            }] } });
+
+class MenuDirective {
+    constructor(dialog, viewContainer) {
+        this.dialog = dialog;
+        this.viewContainer = viewContainer;
+        /**
+         * Configuration for opening the app menu
+         */
+        this.config = {};
+    }
+    ngAfterViewInit() {
+        const el = this.viewContainer.element.nativeElement;
+        // Automatically attach context menu items to
+        // the contextmenu event
+        if (this.ctxMenuItems) {
+            el.onclick = this.openMenu.bind(this);
+            el.addEventListener('contextmenu', (e) => {
+                e.preventDefault();
+                this.openMenu(e);
+            });
+        }
+        if (!this.config?.trigger) {
+            el.onclick = this.openMenu.bind(this);
+            el.addEventListener('click', this.openMenu.bind(this));
+        }
+        else {
+            const triggers = Array.isArray(this.config.trigger) ? this.config.trigger : [this.config.trigger];
+            triggers.forEach(t => {
+                if (t == "contextmenu") {
+                    el.addEventListener(t, (e) => {
+                        e.preventDefault();
+                        this.openMenu(e);
+                    });
+                }
+                else {
+                    el.addEventListener(t, this.openMenu.bind(this));
+                }
+            });
+        }
+    }
+    async openMenu(evt) {
+        const el = this.viewContainer.element.nativeElement;
+        el.classList.add("ngx-menu-open");
+        return openMenu(this.dialog, this.menuItems, this.data, evt, this.config)
+            .then((...res) => {
+            el.classList.remove("ngx-menu-open");
+            return res;
+        })
+            .catch((ex) => {
+            el.classList.remove("ngx-menu-open");
+            throw ex;
+        });
+    }
+}
+MenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuDirective, deps: [{ token: i1.MatDialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+MenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: MenuDirective, isStandalone: true, selector: "[ngx-ctxmenu],[ngx-menu]", inputs: { data: ["ngx-menu-context", "data"], ctxMenuItems: ["ngx-ctxmenu", "ctxMenuItems"], menuItems: ["ngx-menu", "menuItems"], config: ["ngx-menu-config", "config"] }, providers: [
+        MatDialog
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngx-ctxmenu],[ngx-menu]',
+                    providers: [
+                        MatDialog
+                    ],
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.ViewContainerRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ["ngx-menu-context"]
+            }], ctxMenuItems: [{
+                type: Input,
+                args: ["ngx-ctxmenu"]
+            }], menuItems: [{
+                type: Input,
+                args: ["ngx-menu"]
+            }], config: [{
+                type: Input,
+                args: ["ngx-menu-config"]
+            }] } });
+// Helper to open the context menu without using the directive.
+const openMenu = async (dialog, menuItems, data, evt, config = {}) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+    const cords = getPosition(evt, config, await calcMenuItemBounds(menuItems, data));
+    const specificId = crypto.randomUUID();
+    if (!config.alignment)
+        config.alignment = "start";
+    return new Promise(res => {
+        dialog.open(MenuComponent, {
+            data: {
+                data: data,
+                items: menuItems,
+                config: config,
+                id: specificId
+            },
+            panelClass: ["ngx-menu", 'ngx-' + specificId].concat(config?.customClass || []),
+            position: cords,
+            backdropClass: "ngx-menu-backdrop"
+        })
+            .afterClosed()
+            .subscribe(s => {
+            res(s);
+        });
+    });
+};
+
+/**
+ * Url Sanitizer pipe.
+ *
+ * This trusts URLs that exist in a safe list defined in our environments.ts file.
+ * Any other URLs will NOT be trusted, thus will not be loaded.
+ */
+class HtmlBypass {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(url) {
+        return this.sanitizer.bypassSecurityTrustHtml(url);
+    }
+}
+HtmlBypass.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HtmlBypass, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+HtmlBypass.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: HtmlBypass, isStandalone: true, name: "htmlbypass" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HtmlBypass, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'htmlbypass',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
+
+/**
+ * Url Sanitizer pipe.
+ *
+ * This trusts URLs that exist in a safe list defined in our environments.ts file.
+ * Any other URLs will NOT be trusted, thus will not be loaded.
+ */
+class ResourceBypass {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(url) {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    }
+}
+ResourceBypass.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResourceBypass, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+ResourceBypass.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ResourceBypass, isStandalone: true, name: "resourcebypass" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResourceBypass, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'resourcebypass',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
+
+/**
+ * Url Sanitizer pipe.
+ *
+ * This trusts URLs that exist in a safe list defined in our environments.ts file.
+ * Any other URLs will NOT be trusted, thus will not be loaded.
+ */
+class ScriptBypass {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(url) {
+        return this.sanitizer.bypassSecurityTrustScript(url);
+    }
+}
+ScriptBypass.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ScriptBypass, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+ScriptBypass.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ScriptBypass, isStandalone: true, name: "scriptbypass" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ScriptBypass, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'scriptbypass',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
+
+/**
+ * Url Sanitizer pipe.
+ *
+ * This trusts URLs that exist in a safe list defined in our environments.ts file.
+ * Any other URLs will NOT be trusted, thus will not be loaded.
+ */
+class StyleBypass {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(url) {
+        return this.sanitizer.bypassSecurityTrustStyle(url);
+    }
+}
+StyleBypass.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: StyleBypass, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+StyleBypass.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: StyleBypass, isStandalone: true, name: "stylebypass" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: StyleBypass, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'stylebypass',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
+
+/**
+ * Url Sanitizer pipe.
+ *
+ * This trusts URLs that exist in a safe list defined in our environments.ts file.
+ * Any other URLs will NOT be trusted, thus will not be loaded.
+ */
+class UrlBypass {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(url) {
+        return this.sanitizer.bypassSecurityTrustUrl(url);
+    }
+}
+UrlBypass.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UrlBypass, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+UrlBypass.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: UrlBypass, isStandalone: true, name: "urlbypass" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UrlBypass, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'urlbypass',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
+
+const sleep = ms => new Promise(r => setTimeout(r, ms));
+/**
+ * Prompt the user to save a json file of the given object.
+ */
+const saveObjectAsFile = (name, data) => {
+    const a = document.createElement("a");
+    const file = new Blob([JSON.stringify(data)], { type: "application/json" });
+    a.href = URL.createObjectURL(file);
+    a.download = name;
+    a.click();
+    a.remove();
+};
+/**
+ * Formatted logger that will print a bit of context before the message.
+ * @returns
+ */
+const Logger = (context, contextColor, textColor = "#03a9f4") => ({
+    log: (message, ...args) => {
+        console.log(`%c[${context}] %c${message}`, 'color: ' + contextColor, 'color: ' + textColor, ...args);
+    },
+    warn: (message, ...args) => {
+        console.warn(`%c[${context}] %c${message}`, 'color: ' + contextColor, 'color: ' + textColor, ...args);
+    },
+    err: (message, ...args) => {
+        console.error(`%c[${context}] %c${message}`, 'color: ' + contextColor, 'color: ' + textColor, ...args);
+    },
+    error: (message, ...args) => {
+        console.error(`%c[${context}] %c${message}`, 'color: ' + contextColor, 'color: ' + textColor, ...args);
+    }
+});
+/**
+ * Convert a string `fooBAR baz_160054''"1]"` into a slug: `foobar-baz-1600541`
+ */
+const stringToSlug = (text) => (text || '')
+    .trim()
+    .toLowerCase()
+    .replace(/[\-_+ ]/g, '-')
+    .replace(/[^a-z0-9\-]/g, '');
+
+const SCRIPT_INIT_TIMEOUT = 500; // ms
+/**
+ * Service that installs CSS/JS dynamically
+ */
+class DependencyService {
+    constructor(document) {
+        this.document = document;
+    }
+    /**
+     * Install a Javascript file into the webpage on-demand
+     * @param id Unique identifier for the JS script
+     * @param src URL of the script
+     * @param globalkey A global object the script will provide.
+     *  Providing this will ensure a promise only resolves after the
+     *  specified global object is provided, with a timeout of 500ms
+     */
+    loadScript(id, src, globalkey = null) {
+        return new Promise((res, rej) => {
+            if (this.document.getElementById(id))
+                return res();
+            const script = this.document.createElement('script');
+            script.id = id;
+            script.setAttribute("async", '');
+            script.setAttribute("src", src);
+            script.onload = async () => {
+                if (typeof globalkey == "string") {
+                    let i = 0;
+                    for (; !window[globalkey] && i < SCRIPT_INIT_TIMEOUT; i += 10)
+                        await sleep(10);
+                    if (i >= SCRIPT_INIT_TIMEOUT) {
+                        return rej(new Error("Timed out waiting for script to self-initialize."));
+                    }
+                }
+                res();
+            };
+            this.document.body.appendChild(script);
+        });
+    }
+}
+DependencyService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DependencyService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+DependencyService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DependencyService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DependencyService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
+
+const { log, warn, err } = Logger("DialogService", "#607d8b");
+class DialogService {
+    constructor(dialog, lazyLoader) {
+        this.dialog = dialog;
+        this.lazyLoader = lazyLoader;
+        this.dialogs = [];
+    }
+    open(name, opts = {}) {
+        return new Promise((resolve, reject) => {
+            const registration = this.lazyLoader.resolveRegistrationEntry(name, opts.group || "default");
+            if (!registration)
+                return reject(new Error("Cannot open dialog for " + name + ". Could not find in registry."));
+            const args = {
+                closeOnNavigation: true,
+                restoreFocus: true,
+                width: registration['width'],
+                height: registration['height'],
+                ...opts,
+                data: {
+                    id: name,
+                    inputs: opts.inputs || {},
+                    outputs: opts.outputs || {},
+                    group: opts.group
+                },
+                panelClass: [
+                    "dialog-" + name,
+                    ...(Array.isArray(opts.panelClass) ? opts.panelClass : [opts.panelClass] || [])
+                ]
+            };
+            // TODO:
+            let dialog = this.dialog.open(undefined, args);
+            dialog['idx'] = name;
+            this.dialogs.push(dialog);
+            dialog.afterClosed().subscribe(result => {
+                log("Dialog closed " + name, result);
+                resolve(result);
+            });
+        });
+    }
+    // Close all dialogs matching the given name
+    close(name) {
+        const dialogs = this.dialogs.filter(d => d['idx'] == name);
+        dialogs.forEach(dialog => dialog.close());
+    }
+    /**
+     * Method to close _all_ dialogs.
+     * Should be used sparingly.
+     */
+    clearDialog() {
+        this.dialogs.forEach(dialog => dialog.close());
+    }
+}
+DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogService, deps: [{ token: i1.MatDialog }, { token: LazyLoaderService }], target: i0.ɵɵFactoryTarget.Injectable });
+DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: LazyLoaderService }]; } });
+
+// Total number of _retries_ if there is a 429 response code.
+const retryCount = 2;
+class Fetch {
+    constructor(http) {
+        this.http = http;
+    }
+    // Public interface for making AJAX transactions
+    get(url, options = {}, returnError = false) {
+        return this.request("get", url, options, returnError);
+    }
+    put(url, body, options = {}, returnError = false) {
+        options.body = (options.body && Object.keys(options.body).length > 0 ? options.body : body) || {};
+        return this.request("put", url, options, returnError);
+    }
+    post(url, body, options = {}, returnError = false) {
+        options.body = (options.body && Object.keys(options.body).length > 0 ? options.body : body) || {};
+        return this.request("post", url, options, returnError);
+    }
+    patch(url, body, options = {}, returnError = false) {
+        options.body = (options.body && Object.keys(options.body).length > 0 ? options.body : body) || {};
+        return this.request("patch", url, options, returnError);
+    }
+    delete(url, options = {}, returnError = false) {
+        return this.request("delete", url, options, returnError);
+    }
+    // Internally, handle the observable as a promise.
+    request(method, url, options = {}, returnError = false) {
+        options.reportProgress = true;
+        // Allow support for different response types.
+        // Generally we shouldn't need this to be anything other than JSON.
+        options.responseType = options.responseType || "json";
+        options.withCredentials = true;
+        const p = new Promise((resolve, reject) => {
+            const o = this.http.request(method, url, options)
+                .pipe(retry({
+                delay(error, retryCount) {
+                    // 429 and 502 are most common for overloaded
+                    // backends -- so we'll retry if we get these errors
+                    if (error.status == 429 || error.status == 502)
+                        return of({});
+                    if (error.status == 504 && isDevMode())
+                        alert("It looks like you can't reach your development backend anymore");
+                    throw error;
+                },
+                count: retryCount
+            }))
+                .subscribe(data => {
+                resolve(data);
+                // provide 3ms slacktime before releasing observable.
+                setTimeout(() => {
+                    o.unsubscribe();
+                }, 3);
+            });
+        });
+        return p;
+    }
+}
+Fetch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Fetch, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+Fetch.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Fetch, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Fetch, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; } });
+
+/**
+ * Service that listens for global keyboard events
+ */
+class KeyboardService {
+    constructor() {
+        this.heldKeys = {};
+        this.keyCommands = [];
+        window.addEventListener("keydown", (evt) => this.onKeyDown(evt));
+        window.addEventListener("keyup", (evt) => this.onKeyUp(evt));
+    }
+    onKeyDown(evt) {
+        // console.log("keydown", evt.key)
+        this.heldKeys[evt.key.toLowerCase()] = true;
+        // Do a general filter where all of the modifiers must be matched if specified
+        // Then check that the actual keys match what was specified
+        let commands = this.keyCommands
+            .filter(kc => (kc.ctrl == undefined || kc.ctrl === evt.ctrlKey) &&
+            (kc.alt == undefined || kc.alt === evt.altKey) &&
+            (kc.shift == undefined || kc.shift === evt.shiftKey) &&
+            (kc.super == undefined || kc.super === evt.metaKey) &&
+            kc.keys.length == kc.keys.filter(k => this.heldKeys[k])?.length);
+        if (evt.ctrlKey && commands.length > 0 || commands.find(c => c.interrupt)) {
+            evt.stopPropagation();
+            evt.preventDefault();
+        }
+        if (evt.key == "Pause")
+            debugger;
+        commands.forEach(kc => kc.sub.next(evt));
+        /**
+         * Prevent CTRL+P and other standard key events from being handled by the browser.
+         * Allow specific combonations:
+         * CTRL+W
+         * CTRL+T
+         * CTRL+F5
+         */
+        // if (evt.ctrlKey && !['w', 't', 'F5'].includes(evt.key)) {
+        //     evt.preventDefault();
+        // }
+    }
+    onKeyUp(evt) {
+        this.heldKeys[evt.key.toLowerCase()] = false;
+    }
+    onKeyPress(evt) {
+        // this.heldKeys[evt.key] = false;
+    }
+    /**
+     * Use this to subscribe to keyboard events throughout
+     * the application. This is a passive listener and will
+     * **NOT** interrupt the event chain.
+     */
+    onKeyCommand(key) {
+        const sub = new Subject();
+        let item = {
+            ...key,
+            keys: (Array.isArray(key.key) ? key.key : [key.key]),
+            sub: sub
+        };
+        this.keyCommands.push(item);
+        return {
+            ...sub,
+            subscribe: ((...args) => {
+                const s = sub.subscribe(...args);
+                return {
+                    ...s,
+                    unsubscribe: () => {
+                        s.unsubscribe();
+                        // Remove the keycommand from the list of listeners.
+                        const i = this.keyCommands.findIndex(c => c == item);
+                        this.keyCommands.splice(i, 1);
+                    }
+                };
+            })
+        };
+    }
+    /**
+     * Return `true` if shift is currently pressed.
+     */
+    get isShiftPressed() {
+        return !!this.heldKeys["shift"];
+    }
+    /**
+     * Return `true` if ctrl is currently pressed.
+     */
+    get isCtrlPressed() {
+        return !!this.heldKeys["control"];
+    }
+    /**
+     * Return `true` if alt is currently pressed.
+     */
+    get isAltPressed() {
+        return !!this.heldKeys["alt"];
+    }
+    /**
+     * Return `true` if super (mac/linux) or the windows key is currently pressed.
+     */
+    get isSuperPressed() {
+        return !!this.heldKeys["super"];
+    }
+    /**
+     * Return `true` if tab is currently pressed.
+     */
+    get isTabPressed() {
+        return !!this.heldKeys["tab"];
+    }
+    clearKeys() {
+        Object.keys(this.heldKeys).forEach(k => {
+            this.heldKeys[k] = false;
+        });
+    }
+}
+KeyboardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KeyboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+KeyboardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KeyboardService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KeyboardService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { clearKeys: [{
+                type: HostListener,
+                args: ["window:blur"]
+            }, {
+                type: HostListener,
+                args: ["window:resize"]
+            }] } });
+
+var ComponentResolveStrategy;
+(function (ComponentResolveStrategy) {
+    /**
+     * Match the fist component we find
+     * (best used for standalone components)
+     * @default
+     */
+    ComponentResolveStrategy[ComponentResolveStrategy["PickFirst"] = 0] = "PickFirst";
+    /**
+     * Perform an Exact ID to Classname of the Component
+     * case sensitive, zero tolerance.
+     */
+    ComponentResolveStrategy[ComponentResolveStrategy["MatchIdToClassName"] = 1] = "MatchIdToClassName";
+    /**
+     * Perform a fuzzy ID to classname match
+     * case insensitive, mutes symbols
+     * ignores "Component" and "Module" postfixes on class
+     * names
+     */
+    ComponentResolveStrategy[ComponentResolveStrategy["FuzzyIdClassName"] = 2] = "FuzzyIdClassName";
+    /**
+     * Use a user-provided component match function
+     */
+    ComponentResolveStrategy[ComponentResolveStrategy["Custom"] = 3] = "Custom";
+})(ComponentResolveStrategy || (ComponentResolveStrategy = {}));
+
+// Monkey-patch the type of these symbols.
+const $id = Symbol("id");
+const $group = Symbol("group");
+const NGX_LAZY_LOADER_CONFIG = new InjectionToken('config');
+class LazyLoaderService {
+    get err() { return LazyLoaderService.config.logger.err; }
+    get log() { return LazyLoaderService.config.logger.log; }
+    get warn() { return LazyLoaderService.config.logger.warn; }
+    constructor(config = {}) {
+        // Ensure this is singleton and works regardless of special instancing requirements.
+        LazyLoaderService.configure(config);
+    }
+    static configure(config) {
+        const { log, warn, err } = Logger("ngx-lazy-loader", "#009688");
+        this.config = {
+            componentResolveStrategy: ComponentResolveStrategy.PickFirst,
+            logger: {
+                log,
+                warn,
+                err
+            },
+            ...config
+        };
+        config.entries?.forEach(e => this.addComponentToRegistry(e));
+        // If a custom resolution strategy is provided but no resolution function is passed,
+        // we throw an error
+        if (this.config.componentResolveStrategy == ComponentResolveStrategy.Custom &&
+            !this.config.customResolver) {
+            throw new Error("Cannot initialize. Configuration specifies a custom resolve matcher but none was provided");
+        }
+        if (this.config.loaderDistractorComponent && this.config.loaderDistractorTemplate)
+            throw new Error("Cannot have both a Component and Template for Distractor view.");
+        if (this.config.errorComponent && this.config.errorTemplate)
+            throw new Error("Cannot have both a Component and Template for Error view.");
+        if (this.config.notFoundComponent && this.config.notFoundTemplate)
+            throw new Error("Cannot have both a Component and Template for NotFound view.");
+    }
+    static addComponentToRegistry(registration) {
+        if (!registration)
+            throw new Error("Cannot add <undefined> component into registry.");
+        // Clone the object into our repository and transfer the id into a standardized slug format
+        const id = stringToSlug(registration.id ?? Date.now().toString()); // purge non-basic ASCII chars
+        const group = registration.group || "default";
+        registration[$id] = id;
+        registration[$group] = id;
+        if (!this.registry[group])
+            this.registry[group] = [];
+        // Check if we already have a registration for the component
+        // if (this.registry[group] && typeof this.registry[group]['load'] == "function") {
+        //     // Warn the developer that the state is problematic
+        //     this.config.logger.warn(
+        //         `A previous entry already exists for ${id}! The old registration will be overridden.` +
+        //         `Please ensure you use groups if you intend to have duplicate component ids. ` +
+        //         `If this was intentional, first remove the old component from the registry before adding a new instance`
+        //     );
+        //     // If we're in dev mode, break the loader surface
+        //     if (isDevMode())
+        //         return;
+        // }
+        this.registry[group].push(registration);
+    }
+    /**
+     * Register an Angular component
+     * @param id identifier that is used to resolve the component
+     * @param group
+     * @param component Angular Component Class constructor
+     */
+    registerComponent(args) {
+        if (this.isComponentRegistered(args.id, args.group)) {
+            this.log(`Will not re-register component '${args.id}' in group '${args.group || 'default'}' `);
+            return;
+        }
+        LazyLoaderService.addComponentToRegistry({
+            id: stringToSlug(args.id),
+            matcher: args.matcher,
+            group: stringToSlug(args.group || "default"),
+            load: args.load || (() => args.component)
+        });
+    }
+    /**
+     *
+     * @param id
+     * @param group
+     */
+    unregisterComponent(id, group = "default") {
+        const _id = stringToSlug(id);
+        const _group = stringToSlug(group);
+        if (!this.resolveRegistrationEntry(id, group))
+            throw new Error("Cannot unregister component ${}! Component is not present in registry");
+        // TODO: handle clearing running instances
+        delete LazyLoaderService.registry[_group][_id];
+    }
+    /**
+     * Get the registration entry for a component.
+     * Returns null if component is not in the registry.
+     */
+    resolveRegistrationEntry(value, group = "default") {
+        const _id = stringToSlug(value);
+        const _group = stringToSlug(group);
+        const targetGroup = (LazyLoaderService.registry[_group] || []);
+        let items = targetGroup.filter(t => {
+            if (!t)
+                return false;
+            // No matcher, check id
+            if (!t.matcher)
+                return t[$id] == _id;
+            // Matcher is regex
+            if (t.matcher instanceof RegExp)
+                return t.matcher.test(_id) || t.matcher.test(value);
+            // Matcher is string => regex
+            if (typeof t.matcher == 'string') {
+                const rx = new RegExp(t.matcher, 'ui');
+                return rx.test(_id) || rx.test(value);
+            }
+            // Matcher is array
+            if (Array.isArray(t.matcher)) {
+                return !!t.matcher.find(e => stringToSlug(e) == _id);
+            }
+            // Custom matcher function
+            if (typeof t.matcher == "function")
+                return t.matcher(_id);
+            return false;
+        });
+        if (items.length > 1) {
+            this.warn("Resolved multiple components for the provided `[component]` binding. This may cause UI conflicts.");
+        }
+        if (items.length == 0) {
+            return null;
+        }
+        const out = items[0];
+        if (out.matcher instanceof RegExp) {
+            const result = _id.match(out.matcher) || value.match(out.matcher);
+            return {
+                entry: out,
+                matchGroups: result?.groups
+            };
+        }
+        return { entry: out };
+    }
+    /**
+     * Check if a component is currently registered
+     * Can be used to validate regex matchers and aliases.
+     */
+    isComponentRegistered(value, group = "default") {
+        return !!this.resolveRegistrationEntry(value, group);
+    }
+    /**
+     *
+     * @param bundle
+     * @returns The component `Object` if a component was resolved, `null` if no component was found
+     * `false` if the specified strategy was an invalid selection
+     */
+    resolveComponent(id, group, modules) {
+        switch (LazyLoaderService.config.componentResolveStrategy) {
+            case ComponentResolveStrategy.PickFirst: {
+                return modules[0];
+            }
+            // Exact id -> classname match
+            case ComponentResolveStrategy.MatchIdToClassName: {
+                const matches = modules
+                    .filter(k => k.name == id);
+                if (matches.length == 0)
+                    return null;
+                return matches[0];
+            }
+            // Fuzzy id -> classname match
+            case ComponentResolveStrategy.FuzzyIdClassName: {
+                const _id = id.replace(/[^a-z0-9_\-]/ig, '');
+                if (_id.length == 0) {
+                    LazyLoaderService.config.logger.err("Fuzzy classname matching stripped all symbols from the ID specified!");
+                    return false;
+                }
+                const rx = new RegExp(`^${id}(component|module)?$`, "i");
+                const matches = modules
+                    .filter(mod => {
+                    let kid = mod.name.replace(/[^a-z0-9_\-]/ig, '');
+                    return rx.test(kid);
+                });
+                if (matches.length > 1) {
+                    LazyLoaderService.config.logger.err("Fuzzy classname matching resolved multiple targets!");
+                    return false;
+                }
+                if (matches.length == 0) {
+                    LazyLoaderService.config.logger.err("Fuzzy classname matching resolved no targets!");
+                    return null;
+                }
+                return matches[0];
+            }
+            case ComponentResolveStrategy.Custom: {
+                return LazyLoaderService.config.customResolver(modules);
+            }
+            default: {
+                return false;
+            }
+        }
+    }
+}
+// A proxied registry that mutates reference keys
+LazyLoaderService.registry = {};
+LazyLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LazyLoaderService, deps: [{ token: NGX_LAZY_LOADER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+LazyLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LazyLoaderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LazyLoaderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [NGX_LAZY_LOADER_CONFIG]
+                }] }]; } });
+
+class LazyLoaderComponent {
+    /**
+     * The id of the component that will be lazy loaded
+     */
+    set id(data) {
+        const id = stringToSlug(data);
+        // Check if there is a change to the loaded component's id
+        // if it's updated, we destroy and rehydrate the entire container
+        if (this.initialized && this._id != id) {
+            this._id = id;
+            this.ngAfterViewInit();
+        }
+        else {
+            this._id = id;
+        }
+    }
+    ;
+    set group(data) {
+        const group = stringToSlug(data);
+        if (typeof group != "string" || !group)
+            return;
+        // If the group was updated, retry to bootstrap something into the container.
+        if (this.initialized && this._group != group) {
+            this._group = group;
+            this.ngAfterViewInit();
+            return;
+        }
+        this._group = group;
+    }
+    get group() { return this._group; }
+    /**
+     * A map of inputs to bind to the child.
+     * Supports change detection. (May fail on deep JSON changes)
+     *
+     * ```html
+     * <lazy-loader component="MyLazyComponent"
+     *       [inputs]="{
+     *          prop1: true,
+     *          prop2: false,
+     *          complex: {
+     *              a: true,
+     *              b: 0
+     *          }
+     *       }"
+     * >
+     * </lazy-loader>
+     * ```
+     */
+    set inputs(data) {
+        if (data == undefined)
+            return;
+        let previous = this._inputs;
+        this._inputs = data;
+        if (data == undefined)
+            console.trace(data);
+        if (this.targetComponentFactory) {
+            const { inputs } = this.targetComponentFactory.ɵcmp;
+            const currentKeys = Object.keys(inputs);
+            const oldKeys = Object.keys(previous).filter(key => currentKeys.includes(key));
+            const newKeys = Object.keys(data).filter(key => currentKeys.includes(key));
+            const removed = oldKeys.filter(key => !newKeys.includes(key));
+            // ? perhaps set to null or undefined instead
+            removed.forEach(k => this.targetComponentInstance[k] = null);
+            this.bindInputs();
+        }
+    }
+    /**
+     * A map of outputs to bind from the child.
+     * Should support change detection.
+     * ```html
+     * <lazy-loader component="MyLazyComponent"
+     *       [outputs]="{
+     *           prop3: onOutputFire
+     *       }"
+     * >
+     * </lazy-loader>
+     * ```
+     */
+    set outputs(data) {
+        let previous = this._outputs;
+        this._outputs = data;
+        if (this.targetComponentFactory) {
+            const { inputs } = this.targetComponentFactory.ɵcmp;
+            const currentKeys = Object.keys(inputs);
+            const removed = Object.keys(previous).filter(key => !currentKeys.includes(key));
+            removed.forEach(k => {
+                // Unsubscribe from observable
+                this.outputSubscriptions[k]?.unsubscribe();
+                delete this.targetComponentInstance[k];
+            });
+            this.bindOutputs();
+        }
+    }
+    constructor(service, viewContainerRef, dialog, dialogArguments) {
+        this.service = service;
+        this.viewContainerRef = viewContainerRef;
+        this.dialog = dialog;
+        this.dialogArguments = dialogArguments;
+        this._group = "default";
+        this.outputSubscriptions = {};
+        /**
+         * Emits errors encountered when loading components
+         */
+        this.componentLoadError = new EventEmitter();
+        /**
+         * Emits when the component is fully constructed
+         * and had it's inputs and outputs bound
+         * > before `OnInit`
+         *
+         * Returns the active class instance of the lazy-loaded component
+         */
+        this.componentLoaded = new EventEmitter();
+        // Force 500ms delay before revealing the spinner
+        this.loaderEmitter = new EventEmitter();
+        this.clearLoader$ = this.loaderEmitter.pipe(debounceTime(300));
+        this.showLoader = true; // whether we render the DOM for the spinner
+        this.isClearingLoader = false; // should the spinner start fading out
+        this.initialized = false;
+        this.config = LazyLoaderService.config;
+        this.err = LazyLoaderService.config.logger.err;
+        this.warn = LazyLoaderService.config.logger.warn;
+        this.log = LazyLoaderService.config.logger.log;
+        // First, check for dialog arguments
+        if (this.dialogArguments) {
+            this.inputs = this.dialogArguments.inputs || this.dialogArguments.data;
+            this.outputs = this.dialogArguments.outputs;
+            this.id = this.dialogArguments.id;
+            this.group = this.dialogArguments.group;
+        }
+        this.loaderSub = this.clearLoader$.subscribe(() => {
+            this.showLoader = false;
+        });
+    }
+    async ngAfterViewInit() {
+        this.ngOnDestroy(false);
+        this.isClearingLoader = false;
+        this.showLoader = true;
+        this.initialized = true;
+        if (!this._id) {
+            this.warn("No component was specified!");
+            return this.loadDefault();
+        }
+        try {
+            const _entry = this.service.resolveRegistrationEntry(this._id, this._group);
+            if (!_entry || !_entry.entry) {
+                this.err(`Failed to find Component '${this._id}' in group '${this._group}' in registry!`);
+                return this.loadDefault();
+            }
+            const { entry, matchGroups } = _entry;
+            this._matchGroups = matchGroups;
+            // Download the "module" (the standalone component)
+            const bundle = this.targetModule = await entry.load();
+            // Check if there is some corruption on the bundle.
+            if (!bundle || typeof bundle != 'object' || bundle['__esModule'] !== true || bundle.toString() != "[object Module]") {
+                this.err(`Failed to load component/module for '${this._id}'! Parsed resource is invalid.`);
+                return this.loadError();
+            }
+            const modules = Object.keys(bundle)
+                .map(k => {
+                const entry = bundle[k];
+                // Strictly check for exported modules or standalone components
+                if (typeof entry == "function" && typeof entry["ɵfac"] == "function")
+                    return entry;
+                return null;
+            })
+                .filter(e => e != null)
+                .filter(entry => {
+                entry['_isModule'] = !!entry['ɵmod']; // module
+                entry['_isComponent'] = !!entry['ɵcmp']; // component
+                return (entry['_isModule'] || entry['_isComponent']);
+            });
+            if (modules.length == 0) {
+                this.err(`Component/Module loaded for '${this._id}' has no exported components or modules!`);
+                return this.loadError();
+            }
+            const component = this.targetComponentFactory = this.service.resolveComponent(this._id, "default", modules);
+            if (!component) {
+                this.err(`Component '${this._id}' is invalid or corrupted!`);
+                return this.loadError();
+            }
+            // Bootstrap the component into the container
+            const componentRef = this.targetComponentContainerRef = this.targetContainer.createComponent(component);
+            this.targetRef = this.targetContainer.insert(this.targetComponentContainerRef.hostView);
+            const instance = this.targetComponentInstance = componentRef['instance'];
+            this.bindInputs();
+            this.bindOutputs();
+            this.componentLoaded.next(instance);
+            this.instance = instance;
+            // Look for an observable called isLoading$ that will make us show/hide
+            // the same distractor that is used on basic loading
+            const isLoading$ = instance['ngxShowDistractor$'];
+            if (isLoading$ && typeof isLoading$.subscribe == "function") {
+                this.distractorSubscription = isLoading$.subscribe(loading => {
+                    if (!loading) {
+                        this.isClearingLoader = true;
+                        this.loaderEmitter.emit();
+                    }
+                    else {
+                        this.showLoader = true;
+                        this.isClearingLoader = false;
+                    }
+                });
+            }
+            else {
+                this.isClearingLoader = true;
+            }
+            const name = Object.keys(bundle)[0];
+            this.log(`Loaded '${name}'`);
+            this.loaderEmitter.emit();
+            return componentRef;
+        }
+        catch (ex) {
+            if (isDevMode()) {
+                console.warn("Component " + this._id + " threw an error on mount!");
+                console.warn("This will cause you to see a 404 panel.");
+                console.error(ex);
+            }
+            // Network errors throw a toast and return an error component
+            if (ex && !isDevMode()) {
+                console.error("Uncaught error when loading component");
+                throw ex;
+            }
+            return this.loadDefault();
+        }
+    }
+    ngOnDestroy(clearAll = true) {
+        // unsubscribe from all subscriptions
+        Object.entries(this.outputSubscriptions).forEach(([key, sub]) => {
+            sub.unsubscribe();
+        });
+        this.outputSubscriptions = {};
+        // Clear all things
+        if (clearAll) {
+            this.loaderSub?.unsubscribe();
+        }
+        this.distractorSubscription?.unsubscribe();
+        // Clear target container
+        this.targetRef?.destroy();
+        this.targetComponentContainerRef?.destroy();
+        this.targetContainer?.clear();
+        // Wipe the rest of the state clean
+        this.targetRef = null;
+        this.targetComponentContainerRef = null;
+    }
+    /**
+     * Bind the input values to the child component.
+     */
+    bindInputs() {
+        if (!this._inputs || !this.targetComponentInstance)
+            return;
+        // Merge match groups
+        if (typeof this._matchGroups == "object") {
+            Object.entries(this._matchGroups).forEach(([key, val]) => {
+                if (typeof this._inputs[key] == 'undefined')
+                    this._inputs[key] = val;
+            });
+        }
+        // forward-bind inputs
+        const { inputs } = this.targetComponentFactory.ɵcmp;
+        // Returns a list of entries that need to be set
+        // This makes it so that unnecessary setters are not invoked.
+        const updated = Object.entries(inputs).filter(([parentKey, childKey]) => {
+            return this.targetComponentInstance[childKey] != this._inputs[parentKey];
+        });
+        updated.forEach(([parentKey, childKey]) => {
+            if (this._inputs.hasOwnProperty(parentKey))
+                this.targetComponentInstance[childKey] = this._inputs[parentKey];
+        });
+    }
+    /**
+     * Bind the output handlers to the loaded child component
+     */
+    bindOutputs() {
+        if (!this._outputs || !this.targetComponentInstance)
+            return;
+        const { outputs } = this.targetComponentFactory.ɵcmp;
+        // Get a list of unregistered outputs
+        const newOutputs = Object.entries(outputs).filter(([parentKey, childKey]) => {
+            return !this.outputSubscriptions[parentKey];
+        });
+        // Reverse bind via subscription
+        newOutputs.forEach(([parentKey, childKey]) => {
+            if (this._outputs.hasOwnProperty(parentKey)) {
+                const target = this.targetComponentInstance[childKey];
+                const outputs = this._outputs;
+                // Angular folks, stop making this so difficult.
+                const ctx = this.viewContainerRef['_hostLView'][8];
+                const sub = target.subscribe(outputs[parentKey].bind(ctx)); // Subscription
+                this.outputSubscriptions[parentKey] = sub;
+            }
+        });
+    }
+    /**
+     * Load the "Default" component (404) screen normally.
+     * This is shown when the component id isn't in the
+     * registry or otherwise doesn't match
+     *
+     * This
+     */
+    loadDefault() {
+        if (this.config.notFoundComponent)
+            this.targetContainer.createComponent(this.config.notFoundComponent);
+        this.showLoader = false;
+    }
+    /**
+     * Load the "Error" component.
+     * This is shown when we are able to resolve the component
+     * in the registry, but have some issue boostrapping the
+     * component into the viewContainer
+     */
+    loadError() {
+        if (this.config.errorComponent)
+            this.targetContainer.createComponent(this.config.errorComponent);
+        this.showLoader = false;
+    }
+}
+LazyLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LazyLoaderComponent, deps: [{ token: LazyLoaderService }, { token: i0.ViewContainerRef, optional: true }, { token: i2$2.DialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+LazyLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: LazyLoaderComponent, isStandalone: true, selector: "ngx-lazy-loader", inputs: { id: ["component", "id"], group: "group", inputs: "inputs", outputs: "outputs" }, outputs: { componentLoadError: "componentLoadError", componentLoaded: "componentLoaded" }, viewQueries: [{ propertyName: "targetContainer", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #content></ng-container>\n\n<div class=\"ngx-lazy-loader-distractor\" [class.destroying]=\"isClearingLoader\">\n    <ng-container *ngIf=\"config.loaderDistractorComponent\" [ngComponentOutlet]=\"config.loaderDistractorComponent\"></ng-container>\n    <ng-container *ngIf=\"config.loaderDistractorTemplate\" [ngTemplateOutlet]=\"config.loaderDistractorTemplate\" [ngTemplateOutletContext]=\"{ '$implicit': inputs }\"></ng-container>\n</div>\n", styles: [":host{display:contents;contain:content;z-index:1;position:relative}.ngx-lazy-loader-distractor{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--background-color, #212121);opacity:1;transition:opacity .3s ease;z-index:999999}.ngx-lazy-loader-distractor.destroying{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LazyLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-lazy-loader', imports: [NgIf, NgComponentOutlet, NgTemplateOutlet], standalone: true, template: "<ng-container #content></ng-container>\n\n<div class=\"ngx-lazy-loader-distractor\" [class.destroying]=\"isClearingLoader\">\n    <ng-container *ngIf=\"config.loaderDistractorComponent\" [ngComponentOutlet]=\"config.loaderDistractorComponent\"></ng-container>\n    <ng-container *ngIf=\"config.loaderDistractorTemplate\" [ngTemplateOutlet]=\"config.loaderDistractorTemplate\" [ngTemplateOutletContext]=\"{ '$implicit': inputs }\"></ng-container>\n</div>\n", styles: [":host{display:contents;contain:content;z-index:1;position:relative}.ngx-lazy-loader-distractor{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--background-color, #212121);opacity:1;transition:opacity .3s ease;z-index:999999}.ngx-lazy-loader-distractor.destroying{opacity:0;pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: LazyLoaderService }, { type: i0.ViewContainerRef, decorators: [{
+                    type: Optional
+                }] }, { type: i2$2.DialogRef, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; }, propDecorators: { targetContainer: [{
+                type: ViewChild,
+                args: ["content", { read: ViewContainerRef }]
+            }], id: [{
+                type: Input,
+                args: ["component"]
+            }], group: [{
+                type: Input,
+                args: ["group"]
+            }], inputs: [{
+                type: Input,
+                args: ["inputs"]
+            }], outputs: [{
+                type: Input,
+                args: ["outputs"]
+            }], componentLoadError: [{
+                type: Output
+            }], componentLoaded: [{
+                type: Output
+            }] } });
+
+class LazyLoaderModule {
+    static forRoot(config) {
+        return ({
+            ngModule: LazyLoaderModule,
+            providers: [
+                LazyLoaderService,
+                {
+                    provide: NGX_LAZY_LOADER_CONFIG,
+                    useValue: config
+                }
+            ]
+        });
+    }
+}
+LazyLoaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LazyLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LazyLoaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: LazyLoaderModule, imports: [LazyLoaderComponent], exports: [LazyLoaderComponent] });
+LazyLoaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LazyLoaderModule, imports: [LazyLoaderComponent] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LazyLoaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [LazyLoaderComponent],
+                    exports: [LazyLoaderComponent]
+                }]
+        }] });
+
+class OnMount {
+}
+class DynamicHTMLOptions {
+}
+const NGX_DYNAMIC_CONFIG = new InjectionToken('config');
+
+function isBrowserPlatform() {
+    return window != null && window.document != null;
+}
+class DynamicHTMLRenderer {
+    constructor(config, cfr, injector) {
+        this.config = config;
+        this.cfr = cfr;
+        this.injector = injector;
+        this.componentFactories = new Map();
+        this.componentRefs = new Map();
+        this.config.components.forEach(({ selector, component }) => {
+            let cf;
+            cf = this.cfr.resolveComponentFactory(component);
+            this.componentFactories.set(selector, cf);
+        });
+    }
+    renderInnerHTML(elementRef, html) {
+        if (!isBrowserPlatform()) {
+            return {
+                check: () => { },
+                destroy: () => { },
+            };
+        }
+        elementRef.nativeElement.innerHTML = html;
+        const componentRefs = [];
+        this.config.components.forEach(({ selector }) => {
+            const elements = elementRef.nativeElement.querySelectorAll(selector);
+            Array.prototype.forEach.call(elements, (el) => {
+                const content = el.innerHTML;
+                const cmpRef = this.componentFactories.get(selector).create(this.injector, [], el);
+                el.removeAttribute('ng-version');
+                if (cmpRef.instance.dynamicOnMount) {
+                    const attrsMap = new Map();
+                    if (el.hasAttributes()) {
+                        Array.prototype.forEach.call(el.attributes, (attr) => {
+                            attrsMap.set(attr.name, attr.value);
+                        });
+                    }
+                    cmpRef.instance.dynamicOnMount(attrsMap, content, el);
+                }
+                componentRefs.push(cmpRef);
+            });
+        });
+        this.componentRefs.set(elementRef, componentRefs);
+        return {
+            check: () => componentRefs.forEach(ref => ref.changeDetectorRef.detectChanges()),
+            destroy: () => {
+                componentRefs.forEach(ref => ref.destroy());
+                this.componentRefs.delete(elementRef);
+            },
+        };
+    }
+}
+DynamicHTMLRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicHTMLRenderer, deps: [{ token: NGX_DYNAMIC_CONFIG }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicHTMLRenderer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicHTMLRenderer });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicHTMLRenderer, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: DynamicHTMLOptions, decorators: [{
+                    type: Inject,
+                    args: [NGX_DYNAMIC_CONFIG]
+                }] }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }]; } });
+
+class DynamicHTMLComponent {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.ref = null;
+    }
+    ngOnChanges(_) {
+        if (this.ref) {
+            this.ref.destroy();
+            this.ref = null;
+        }
+        if (this.content && this.elementRef) {
+            this.ref = this.renderer.renderInnerHTML(this.elementRef, this.content);
+        }
+    }
+    ngDoCheck() {
+        if (this.ref) {
+            this.ref.check();
+        }
+    }
+    ngOnDestroy() {
+        if (this.ref) {
+            this.ref.destroy();
+            this.ref = null;
+        }
+    }
+}
+DynamicHTMLComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicHTMLComponent, deps: [{ token: DynamicHTMLRenderer }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+DynamicHTMLComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DynamicHTMLComponent, isStandalone: true, selector: "dynamic-html", inputs: { content: "content" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicHTMLComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dynamic-html',
+                    template: '',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: DynamicHTMLRenderer }, { type: i0.ElementRef }]; }, propDecorators: { content: [{
+                type: Input
+            }] } });
+
+class NgxDynamicHTMLModule {
+    static forRoot(config) {
+        return {
+            ngModule: NgxDynamicHTMLModule,
+            providers: [
+                DynamicHTMLRenderer,
+                { provide: NGX_DYNAMIC_CONFIG, useValue: config }
+            ],
+        };
+    }
+}
+NgxDynamicHTMLModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgxDynamicHTMLModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxDynamicHTMLModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NgxDynamicHTMLModule, imports: [DynamicHTMLComponent], exports: [DynamicHTMLComponent] });
+NgxDynamicHTMLModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgxDynamicHTMLModule, imports: [DynamicHTMLComponent] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NgxDynamicHTMLModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [DynamicHTMLComponent],
+                    exports: [DynamicHTMLComponent],
+                }]
+        }] });
+
+/*
+ * Public API Surface of package
+ */
+/**
+ ** Directives
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComponentResolveStrategy, DependencyService, DialogService, DynamicHTMLComponent, DynamicHTMLOptions, DynamicHTMLRenderer, Fetch, HtmlBypass, KeyboardService, LazyLoaderComponent, LazyLoaderModule, LazyLoaderService, MenuDirective, NGX_DYNAMIC_CONFIG, NGX_LAZY_LOADER_CONFIG, NgxDynamicHTMLModule, OnMount, ResourceBypass, ScriptBypass, StyleBypass, TooltipDirective, UrlBypass, openMenu, openTooltip };
+//# sourceMappingURL=dotglitch-ngx-common.mjs.map