@dotglitch/ngx-common 3.0.0-beta.1 → 3.0.0-beta.2

package/fesm2022/dotglitch-ngx-common-core.mjs

@@ -0,0 +1,2280 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Input, Optional, Inject, Directive, Pipe, Injectable, EventEmitter, isDevMode, ViewContainerRef, Output, ViewChild, Component, HostListener, NgModule, TemplateRef, ContentChild } from '@angular/core';
+import { createInstance, INDEXEDDB } from 'localforage';
+import * as i1 from '@angular/platform-browser';
+import { createApplication } from '@angular/platform-browser';
+import { DOCUMENT, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import * as i2$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { debounceTime, of, Subject, BehaviorSubject, firstValueFrom } from 'rxjs';
+import * as i2 from '@angular/cdk/dialog';
+import { retry } from 'rxjs/operators';
+import * as i1$1 from '@angular/common/http';
+import { __decorate, __param } from 'tslib';
+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 i3 from '@angular/cdk/portal';
+import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import { ulid } from 'ulidx';
+
+const storage = createInstance({
+    name: "@dotglitch",
+    storeName: "image-cache",
+    driver: INDEXEDDB,
+    version: 1
+});
+const imageCache = {};
+const loadingSvg = `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" fill="none" stroke="%2340c4ff" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform></circle><!-- [ldio] generated by https://loading.io/ --></svg>`;
+const brokenSvg = `data:image/svg+xml;utf8,<svg width="800" height="800" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><line x1="10.08" y1="8.29" x2="10.18" y2="8.29" style="fill:none;stroke:#000000;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round" /><path d="m 10.51,14.8 5.2,5.2 H 20 a 1,1 0 0 0 1,-1 V 15.73 L 15.29,10 Z M 3,16.71 V 19 a 1,1 0 0 0 1,1 h 11.71 l -8,-8 z M 21,5 v 14 a 1,1 0 0 1 -1,1 H 4 A 1,1 0 0 1 3,19 V 5 A 1,1 0 0 1 4,4 h 16 a 1,1 0 0 1 1,1 z" style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" /><path d="M 21.193388,21.193388 2.8066108,2.8066108 m 18.3867772,0 L 2.8066108,21.193388" style="stroke:%23ff0000;stroke-width:2.62668;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" /></svg>`;
+const NGX_IMAGE_CACHE_CONFIG = new InjectionToken('ngx-image-cache-config');
+class NgxImageCacheDirective {
+    get el() { return this.element.nativeElement; }
+    constructor(element, cacheConfig) {
+        this.element = element;
+        this.cacheConfig = cacheConfig;
+    }
+    ngOnChanges() {
+        this.getCachedImage();
+    }
+    async getCachedImage() {
+        if (this.el.src?.trim() == this.url?.trim() || // Check that there's an actual change
+            this.url?.trim().length == 0 // Check that there's an actual URL
+        )
+            return;
+        // Check if it's in the memory cache
+        if (imageCache[this.url]) {
+            const image = imageCache[this.url];
+            // If the image is currently loading, show the loader
+            // and add it to the reflist
+            if (image['_loading'] == true) {
+                image['_refs'].push(this.el);
+                this.el.setAttribute("loading", "true");
+                this.el.src = this.cacheConfig?.loadingPlaceholder || loadingSvg;
+            }
+            else {
+                // The image is fully loaded, swap out the src with a data-uri
+                this.el.setAttribute("loading", "false");
+                this.el.src = image.src;
+            }
+            // If it's already in the image cache, we're going to trust that it loads properly.
+            return;
+        }
+        // Check if it's in indexedDB
+        if (this.configuration?.cacheInIndexedDB != false) {
+            const cached = await storage.getItem(this.url);
+            if (cached) {
+                // Attempt to load the base64 data from indexeddb.
+                // If this fails, we'll fall back to attempting to download the image
+                this.el.src = cached.data;
+                const evt = await new Promise(res => {
+                    this.el.addEventListener('load', res);
+                    this.el.addEventListener('error', res);
+                });
+                // If the event isn't an error
+                if (evt.type == "load") {
+                    this.el.setAttribute("loading", "false");
+                    if (this.configuration?.cacheInMemory != false) {
+                        // Successfully loaded into element
+                        // Create an entry in the memory cache
+                        const image = imageCache[this.url] = new Image();
+                        image.src = cached.data;
+                        image['_createdAt'] = Date.now();
+                    }
+                    return;
+                }
+                else {
+                    // Else, we try to load again.
+                    this.el.src = this.cacheConfig?.loadingPlaceholder || loadingSvg;
+                }
+            }
+        }
+        const image = (() => {
+            if (this.configuration?.cacheInMemory != false) {
+                return imageCache[this.url] = new Image();
+            }
+            return new Image();
+        })();
+        // const clone = image.cloneNode(true) as HTMLImageElement;
+        image['_refs'] = image['_refs'] ?? [];
+        image['_refs'].push(this.el);
+        image['_loading'] = true;
+        image['_createdAt'] = Date.now();
+        // Show a loader while the image downloads.
+        this.el.setAttribute("loading", "true");
+        this.el.src = this.cacheConfig?.loadingPlaceholder || loadingSvg;
+        // Fetch the image via JS and cache it as base64
+        window.fetch(this.url)
+            .then(response => response.blob())
+            .then(blob => new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                image.src = reader.result;
+                storage.setItem(this.url, {
+                    timestamp: Date.now(),
+                    data: reader.result
+                });
+                image['_refs'].forEach((ref) => {
+                    ref.src = image.src;
+                });
+                image['_loading'] = false;
+                resolve(0);
+            };
+            reader.onerror = reject;
+            reader.readAsDataURL(blob);
+        }))
+            .catch(err => {
+            // If a failure occurs, purge this entry from the cache
+            // TODO: Render better "broken" image
+            delete imageCache[this.url];
+            image['_refs'].forEach((ref) => {
+                ref.src = this.cacheConfig?.brokenPlaceholder || brokenSvg;
+                ref.setAttribute("loading", "failed");
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxImageCacheDirective, deps: [{ token: i0.ElementRef }, { token: NGX_IMAGE_CACHE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NgxImageCacheDirective, isStandalone: true, selector: "img[ngx-cache]", inputs: { url: ["source", "url"], configuration: ["ngx-cache-config", "configuration"] }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxImageCacheDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'img[ngx-cache]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NGX_IMAGE_CACHE_CONFIG]
+                }] }], propDecorators: { url: [{
+                type: Input,
+                args: ["source"]
+            }, {
+                type: Input,
+                args: ["ngx-cache"]
+            }], configuration: [{
+                type: Input,
+                args: ["ngx-cache-config"]
+            }] } });
+
+/**
+ * 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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HtmlBypass, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: HtmlBypass, isStandalone: true, name: "htmlbypass" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HtmlBypass, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'htmlbypass',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1.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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResourceBypass, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ResourceBypass, isStandalone: true, name: "resourcebypass" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResourceBypass, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'resourcebypass',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1.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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScriptBypass, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ScriptBypass, isStandalone: true, name: "scriptbypass" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScriptBypass, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'scriptbypass',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1.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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StyleBypass, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: StyleBypass, isStandalone: true, name: "stylebypass" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StyleBypass, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'stylebypass',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1.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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UrlBypass, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: UrlBypass, isStandalone: true, name: "urlbypass" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UrlBypass, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'urlbypass',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1.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();
+};
+/**
+ * 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, '');
+/**
+* Helper to update the page URL.
+* @param page component page ID to load.
+* @param data string or JSON data for query params.
+*/
+const updateUrl = (page, data = {}, replaceState = false) => {
+    const [oldHash, qstring] = location.hash.split('?');
+    if (!page)
+        page = oldHash.split('/')[1];
+    const hash = `#/${page}`;
+    // Convert the data object to JSON.
+    if (data instanceof URLSearchParams) {
+        data = [...data.entries()].map(([k, v]) => ({ [k]: v })).reduce((a, b) => ({ ...a, ...b }), {});
+    }
+    const query = new URLSearchParams(data);
+    const prevParams = new URLSearchParams(qstring);
+    // If the hash is the same, retain params.
+    if (hash == oldHash) {
+        replaceState = true;
+        for (const [key, value] of prevParams.entries())
+            if (!query.has(key))
+                query.set(key, prevParams.get(key));
+    }
+    for (const [key, val] of query.entries()) {
+        if (val == null ||
+            val == undefined ||
+            val == '' ||
+            val == 'null' ||
+            Number.isNaN(val) ||
+            val == 'NaN')
+            query.delete(key);
+    }
+    if (!(hash.toLowerCase() == "#/frame") || data['id'] == -1)
+        query.delete('id');
+    const strQuery = query.toString();
+    console.log(data, hash, strQuery);
+    if (replaceState) {
+        window.history.replaceState(data, '', hash + (strQuery ? ('?' + strQuery) : ''));
+    }
+    else {
+        window.history.pushState(data, '', hash + (strQuery ? ('?' + strQuery) : ''));
+    }
+};
+const getUrlData = (source = window.location.hash) => {
+    const [hash, query] = source.split('?');
+    let data = new URLSearchParams(query);
+    return [...data.entries()].map(([k, v]) => ({ [k]: v })).reduce((a, b) => ({ ...a, ...b }), {});
+};
+
+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);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DependencyService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DependencyService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DependencyService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
+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('lazyloader-config');
+class LazyLoaderService {
+    get err() { return LazyLoaderService.config.logger.err; }
+    get log() { return LazyLoaderService.config.logger.log; }
+    get warn() { return LazyLoaderService.config.logger.warn; }
+    // A proxied registry that mutates reference keys
+    static { this.registry = {}; }
+    constructor(config = {}) {
+        // Ensure this is singleton and works regardless of special instancing requirements.
+        LazyLoaderService.configure(config);
+    }
+    static configure(config) {
+        this.config = {
+            componentResolveStrategy: ComponentResolveStrategy.PickFirst,
+            logger: {
+                log: console.log,
+                warn: console.warn,
+                err: console.error
+            },
+            ...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 == value || t[$id] == _id;
+            // Matcher is regex
+            if (t.matcher instanceof RegExp)
+                return t.matcher.test(value) || t.matcher.test(_id);
+            // Matcher is string => regex
+            if (typeof t.matcher == 'string') {
+                const rx = new RegExp(t.matcher, 'ui');
+                return rx.test(value) || rx.test(_id);
+            }
+            // 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 = value.match(out.matcher) || _id.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;
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyLoaderService, deps: [{ token: NGX_LAZY_LOADER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyLoaderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyLoaderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NGX_LAZY_LOADER_CONFIG]
+                }] }] });
+
+class LazyLoaderComponent {
+    /**
+     * The id of the component that will be lazy loaded
+     */
+    set id(data) {
+        this.originalId = 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) {
+        this.originalGroup = 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.clearEmitter = new EventEmitter();
+        this.clearLoader$ = this.clearEmitter.pipe(debounceTime(300));
+        this.showEmitter = new EventEmitter();
+        this.showLoader$ = this.showEmitter.pipe(debounceTime(1));
+        this.subscriptions = [
+            this.clearLoader$.subscribe(() => {
+                this.isClearingLoader = true;
+                setTimeout(() => {
+                    this.renderSpinner = false;
+                }, 300);
+            }),
+            this.showLoader$.subscribe(() => {
+                this.isClearingLoader = false;
+                this.renderSpinner = true;
+            })
+        ];
+        this.renderSpinner = 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;
+        }
+    }
+    async ngAfterViewInit() {
+        this.ngOnDestroy(false);
+        this.isClearingLoader = false;
+        this.renderSpinner = true;
+        this.initialized = true;
+        if (!this._id) {
+            this.warn("No component was specified!");
+            return this.loadDefault();
+        }
+        try {
+            const _entry = this.service.resolveRegistrationEntry(this.originalId, this.originalGroup);
+            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') {
+                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();
+            }
+            // const componentRef = this.targetComponentContainerRef = createComponent(component as any, {
+            //     environmentInjector: this.appRef.injector,
+            //     elementInjector: this.injector,
+            //     hostElement: this.viewContainerRef.element.nativeElement,
+            //     // projectableNodes:
+            // });
+            // // this.targetRef = this.targetContainer.insert(this.targetComponentContainerRef.hostView);
+            // this.appRef.attachView(componentRef.hostView);
+            // 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 => {
+                    loading ? this.showEmitter.emit() : this.clearEmitter.emit();
+                });
+            }
+            else {
+                this.clearEmitter.emit();
+            }
+            const name = Object.keys(bundle)[0];
+            this.log(`Loaded '${name}'`);
+            this.clearEmitter.emit();
+            return componentRef;
+        }
+        catch (ex) {
+            if (isDevMode()) {
+                console.warn("Component DDD " + 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) {
+            Object.entries(this.subscriptions).forEach(([key, sub]) => {
+                sub.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)) {
+                // Angular 19.2+
+                if (Array.isArray(childKey)) {
+                    this.targetComponentInstance[childKey[0]] = this._inputs[parentKey];
+                }
+                else {
+                    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.clearEmitter.emit();
+    }
+    /**
+     * 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.clearEmitter.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyLoaderComponent, deps: [{ token: LazyLoaderService }, { token: i0.ViewContainerRef, optional: true }, { token: i2.DialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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@if (renderSpinner) {\n    <div\n        class=\"ngx-lazy-loader-distractor\"\n        [class.destroying]=\"isClearingLoader\"\n    >\n        @if (config.loaderDistractorComponent) {\n            <ng-container\n                [ngComponentOutlet]=\"config.loaderDistractorComponent\"\n            />\n        }\n        @if (config.loaderDistractorTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"config.loaderDistractorTemplate\"\n                [ngTemplateOutletContext]=\"{ '$implicit': inputs }\"\n            />\n        }\n    </div>\n}\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;animation:fade-in .3s ease}.ngx-lazy-loader-distractor.destroying{opacity:0;pointer-events:none}@keyframes fade-in{0%{opacity:0;pointer-events:none}to{opacity:1;pointer-events:all}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-lazy-loader', imports: [NgComponentOutlet, NgTemplateOutlet], standalone: true, template: "<ng-container #content></ng-container>\n\n@if (renderSpinner) {\n    <div\n        class=\"ngx-lazy-loader-distractor\"\n        [class.destroying]=\"isClearingLoader\"\n    >\n        @if (config.loaderDistractorComponent) {\n            <ng-container\n                [ngComponentOutlet]=\"config.loaderDistractorComponent\"\n            />\n        }\n        @if (config.loaderDistractorTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"config.loaderDistractorTemplate\"\n                [ngTemplateOutletContext]=\"{ '$implicit': inputs }\"\n            />\n        }\n    </div>\n}\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;animation:fade-in .3s ease}.ngx-lazy-loader-distractor.destroying{opacity:0;pointer-events:none}@keyframes fade-in{0%{opacity:0;pointer-events:none}to{opacity:1;pointer-events:all}}\n"] }]
+        }], ctorParameters: () => [{ type: LazyLoaderService }, { type: i0.ViewContainerRef, decorators: [{
+                    type: Optional
+                }] }, { type: i2.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 DialogService {
+    constructor(dialog, lazyLoader) {
+        this.dialog = dialog;
+        this.lazyLoader = lazyLoader;
+        this.dialogs = [];
+    }
+    open(name, groupOrOptions, opts = {}) {
+        const group = typeof groupOrOptions == "string" ? groupOrOptions : 'default';
+        if (typeof groupOrOptions == 'object')
+            opts = groupOrOptions;
+        return new Promise((resolve, reject) => {
+            const registration = this.lazyLoader.resolveRegistrationEntry(name, group);
+            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: group
+                },
+                panelClass: [
+                    "dialog-" + name,
+                    ...(Array.isArray(opts.panelClass) ? opts.panelClass : [opts.panelClass])
+                ]
+            };
+            let dialog = this.dialog.open(LazyLoaderComponent, args);
+            dialog['idx'] = name;
+            this.dialogs.push(dialog);
+            dialog.afterClosed().subscribe(result => {
+                console.info("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());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DialogService, deps: [{ token: i2$1.MatDialog }, { token: LazyLoaderService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DialogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i2$1.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;
+        let abort = false;
+        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");
+                    abort = true;
+                    reject(error);
+                    throw error;
+                },
+                count: retryCount
+            }))
+                .subscribe(data => {
+                resolve(data);
+                // provide 3ms slacktime before releasing observable.
+                setTimeout(() => {
+                    o.unsubscribe();
+                }, 3);
+            });
+        });
+        return p;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Fetch, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Fetch, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Fetch, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+
+/**
+ * Service that listens for global keyboard events
+ */
+class FileService {
+    constructor(fetch) {
+        this.fetch = fetch;
+        this.chooseFile = (accept, multiple = false, formMetadata = {}) => {
+            return new Promise(r => {
+                const inEl = document.createElement('input');
+                inEl.setAttribute('type', 'file');
+                if (multiple)
+                    inEl.setAttribute('multiple', '');
+                if (accept)
+                    inEl.setAttribute('accept', accept);
+                inEl.click();
+                let formData = new FormData();
+                inEl.addEventListener('change', () => {
+                    Object.keys(inEl.files).forEach(k => {
+                        const file = inEl.files[k];
+                        const name = file.name;
+                        formData.append(name, file);
+                    });
+                    formData.append("data", JSON.stringify(formMetadata));
+                    inEl.remove();
+                    r(formData);
+                });
+            });
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileService, deps: [{ token: Fetch }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: Fetch }] });
+
+/**
+ * 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;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyboardService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyboardService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [], propDecorators: { clearKeys: [{
+                type: HostListener,
+                args: ["window:blur"]
+            }, {
+                type: HostListener,
+                args: ["window:resize"]
+            }] } });
+
+class NavigationService {
+    constructor(lazyLoader) {
+        this.lazyLoader = lazyLoader;
+        this.virtualPath$ = new BehaviorSubject(null);
+        // @ts-ignore
+        window.onhashchange = () => this.loadRootPageFromUrl();
+        this.loadRootPageFromUrl();
+    }
+    loadRootPageFromUrl() {
+        const hash = location.hash.split("?")[0];
+        const root = hash.replace(/^\/?#\//, '');
+        // If the URL is imprecisely set, we restore it to the landing page
+        if (!root || !root.trim())
+            return this.loadRootPage("#/Landing");
+        this.loadRootPage(location.hash);
+    }
+    loadRootPage(url, data = {}) {
+        const [path, query] = url.split('?');
+        const hash = path.replace(/^\/?#\/?/, '');
+        const chunks = hash.split('/');
+        // Get query params and pass them as @Input arguments.
+        const params = query?.split('&')
+            .reduce((pars, par) => {
+            const [key, value] = par.split("=");
+            const decoded = decodeURIComponent(value);
+            pars[key] = decoded;
+            return pars;
+        }, {}) || {};
+        console.info(`Root page navigate to '${hash}'`, { params, chunks });
+        const root = hash.replace(/^\/?#\//, '');
+        this.virtualPath$.next({
+            root: hash,
+            chunks: chunks,
+            args: params
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationService, deps: [{ token: LazyLoaderService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: LazyLoaderService }] });
+
+const verifyTheme = (theme) => {
+    if (theme == 'dark' || theme == 'light')
+        return theme;
+    return 'auto';
+};
+const initialTheme = verifyTheme(localStorage['fiq.theme']);
+const initialDiscreteTheme = initialTheme != 'auto'
+    ? initialTheme
+    : window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+const getAutoTheme = () => {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+};
+class ThemeService {
+    constructor() {
+        this.themes = [
+            { label: "Dark", id: 'dark' },
+            { label: "Light", id: 'light' },
+            { label: "Automatic", id: 'auto' },
+        ];
+        this.selectedTheme = initialTheme;
+        /**
+         * This theme will always only be 'dark' or 'light'.
+         * For use with canvases and similar libraries.
+         */
+        this.theme = new BehaviorSubject(initialDiscreteTheme);
+        this.theme.subscribe(t => {
+            document.body.parentElement.classList.remove("theme-dark");
+            document.body.parentElement.classList.remove("theme-light");
+            document.body.parentElement.classList.add("theme-" + t);
+        });
+        // The system theme changed (either due to timed color themes or the user changing the mode)
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener("change", ev => {
+            if (localStorage['fiq.theme'] == "auto")
+                this.theme.next(getAutoTheme());
+        });
+    }
+    setTheme(t) {
+        const theme = verifyTheme(t);
+        localStorage['fiq.theme'] = theme;
+        this.selectedTheme = theme;
+        if (theme == 'auto') {
+            this.theme.next(getAutoTheme());
+        }
+        else {
+            this.theme.next(theme);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class LazyLoaderModule {
+    static forRoot(config) {
+        return ({
+            ngModule: LazyLoaderModule,
+            providers: [
+                {
+                    provide: NGX_LAZY_LOADER_CONFIG,
+                    useValue: config
+                },
+                LazyLoaderService
+            ]
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: LazyLoaderModule, imports: [LazyLoaderComponent], exports: [LazyLoaderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyLoaderModule }); }
+}
+__decorate([
+    __param(0, Optional())
+], LazyLoaderModule, "forRoot", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LazyLoaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [LazyLoaderComponent],
+                    exports: [LazyLoaderComponent]
+                }]
+        }] });
+
+class ParallaxCardComponent {
+    get wrapper() { return this.element.nativeElement; }
+    get cardFront() { return this.wrapper.querySelector('.card.front'); }
+    get cardBack() { return this.wrapper.querySelector('.card.backface'); }
+    get backgroundElement() { return this.cardFront.querySelector('.card-bg'); }
+    get backfaceBackgroundElement() { return this.cardBack.querySelector('.card-bg'); }
+    constructor(element, ngZone) {
+        this.element = element;
+        this.ngZone = ngZone;
+        /**
+         *
+         */
+        this.loaded = new EventEmitter();
+        /**
+         * Width of the card
+         * @default `240px`
+         */
+        this.width = '240px';
+        /**
+         * Height of the card
+         * @default `320px`
+         */
+        this.height = '320px';
+        /**
+         * Inset padding of the parallax
+         * @default 80
+         */
+        this.bgInset = 80;
+        /**
+         * Duration for the flip animation in ms
+         * @default 1200
+         */
+        this.flipAnimationDuration = 1200;
+        this.renderCardFront = true;
+        this.renderCardBack = true;
+        this.showBackOfCard = false;
+        this.pointerX = 0;
+        this.pointerY = 0;
+        this.pointerLeave = 0;
+        this.render = () => {
+            const { width, height } = this.wrapper.getBoundingClientRect();
+            const mousePX = this.pointerX / width;
+            const mousePY = this.pointerY / height;
+            // Rotation factors
+            const rX = mousePX * this.bgInset / 1.75;
+            const rY = mousePY * -this.bgInset / 1.75;
+            // Translation factors
+            const tX = mousePX * -this.bgInset * 2;
+            const tY = mousePY * -this.bgInset * 2;
+            if (this.renderCardFront) {
+                this.backgroundElement.style.transform = `translateX(${tX}px) translateY(${tY}px)`;
+            }
+            if (this.renderCardBack) {
+                this.backfaceBackgroundElement.style.transform = `translateX(${tX}px) translateY(${tY}px)`;
+            }
+            if (this.showBackOfCard) {
+                this.cardFront.style.transform = `rotateY(180deg) rotateX(${-rY}deg)`;
+                this.cardBack.style.transform = `rotateY(${-rX}deg) rotateX(${-rY}deg)`;
+            }
+            else {
+                this.cardFront.style.transform = `rotateY(${rX}deg) rotateX(${rY}deg)`;
+                this.cardBack.style.transform = `rotateY(180deg) rotateX(${-rY}deg)`;
+            }
+        };
+    }
+    ngAfterViewInit() {
+        const el = this.wrapper;
+        this.ngZone.runOutsideAngular(() => {
+            // Directly attach events to the wrapper
+            el.onpointermove = (e) => this.onPointerMove(e);
+            el.onpointerenter = () => this.onPointerEnter();
+            el.onpointerleave = () => this.onPointerLeave();
+        });
+        el.onclick = () => this.onClick();
+        this.loaded.emit();
+    }
+    onPointerMove(e) {
+        const { width, height, left, top } = this.wrapper.getBoundingClientRect();
+        this.pointerX = e.pageX - left - (width / 2);
+        this.pointerY = e.pageY - top - (height / 2);
+        this.render();
+    }
+    onPointerEnter() {
+        clearTimeout(this.pointerLeave);
+    }
+    onPointerLeave() {
+        this.pointerLeave = setTimeout(() => {
+            this.pointerX = 0;
+            this.pointerY = 0;
+            this.render();
+        }, 600);
+    }
+    // TODO: This can get intercepted in some states
+    onClick() {
+        this.showBackOfCard = !this.showBackOfCard;
+        this.render();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ParallaxCardComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ParallaxCardComponent, isStandalone: true, selector: "ngx-parallax-card", inputs: { width: "width", height: "height", bgInset: "bgInset", flipAnimationDuration: "flipAnimationDuration" }, outputs: { loaded: "loaded" }, host: { properties: { "style.width": "width", "style.height": "height", "style.--card-bg-inset": "-bgInset+\"px\"", "style.--flip-animation-duration": "flipAnimationDuration+\"ms\"", "class.flip": "showBackOfCard" } }, queries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: TemplateRef }, { propertyName: "background", first: true, predicate: ["background"], descendants: true, read: TemplateRef }, { propertyName: "backContent", first: true, predicate: ["backContent"], descendants: true, read: TemplateRef }, { propertyName: "backBackground", first: true, predicate: ["backBackground"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (renderCardBack) {\n    <div class=\"card backface\">\n        <div class=\"card-bg\" style=\"transform: translateX(0) translateY(0)\">\n            <ng-template [ngTemplateOutlet]=\"backBackground\" />\n        </div>\n        <div class=\"card-content\">\n            <ng-template [ngTemplateOutlet]=\"backContent\" />\n        </div>\n    </div>\n}\n\n@if (renderCardFront) {\n    <div class=\"card front\">\n        <div class=\"card-bg\" style=\"transform: translateX(0) translateY(0)\">\n            <ng-template [ngTemplateOutlet]=\"background\" />\n        </div>\n        <div class=\"card-content\">\n            @if (content) {\n                <ng-template [ngTemplateOutlet]=\"content\"/>\n            }\n            @else {\n                <ng-content/>\n            }\n        </div>\n    </div>\n}\n\n\n", styles: [":host{display:block;position:relative;cursor:pointer;--easing-function: cubic-bezier(.23, 1, .32, 1);--border-radius: 9px}.card{position:absolute;height:100%;width:100%;background-color:#333;backface-visibility:hidden;overflow:hidden;box-shadow:#0000 0 0 40px 5px,#000000a8 0 30px 60px,inset #333 0 0 0 5px;border-radius:var(--border-radius);transition:transform var(--flip-animation-duration) var(--easing-function),box-shadow 2s var(--easing-function);transform-style:preserve-3d;will-change:transform}.card:hover{box-shadow:#fff6 0 0 40px 5px,#000000a8 0 30px 60px,inset #333 0 0 0 5px}.card:hover .card-content{border:2px solid #fff}.card-bg{inset:var(--card-bg-inset);position:absolute;pointer-events:none;transition:transform .6s var(--easing-function)}.card-content{position:absolute;top:0;color:#fff;height:100%;width:100%;z-index:1;border:2px solid rgba(255,255,255,0);border-radius:var(--border-radius);transition:transform .6s var(--easing-function),border-color .6s var(--easing-function)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ParallaxCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-parallax-card', imports: [
+                        NgTemplateOutlet
+                    ], host: {
+                        '[style.width]': 'width',
+                        '[style.height]': 'height',
+                        '[style.--card-bg-inset]': '-bgInset+"px"',
+                        '[style.--flip-animation-duration]': 'flipAnimationDuration+"ms"',
+                        '[class.flip]': 'showBackOfCard'
+                    }, standalone: true, template: "@if (renderCardBack) {\n    <div class=\"card backface\">\n        <div class=\"card-bg\" style=\"transform: translateX(0) translateY(0)\">\n            <ng-template [ngTemplateOutlet]=\"backBackground\" />\n        </div>\n        <div class=\"card-content\">\n            <ng-template [ngTemplateOutlet]=\"backContent\" />\n        </div>\n    </div>\n}\n\n@if (renderCardFront) {\n    <div class=\"card front\">\n        <div class=\"card-bg\" style=\"transform: translateX(0) translateY(0)\">\n            <ng-template [ngTemplateOutlet]=\"background\" />\n        </div>\n        <div class=\"card-content\">\n            @if (content) {\n                <ng-template [ngTemplateOutlet]=\"content\"/>\n            }\n            @else {\n                <ng-content/>\n            }\n        </div>\n    </div>\n}\n\n\n", styles: [":host{display:block;position:relative;cursor:pointer;--easing-function: cubic-bezier(.23, 1, .32, 1);--border-radius: 9px}.card{position:absolute;height:100%;width:100%;background-color:#333;backface-visibility:hidden;overflow:hidden;box-shadow:#0000 0 0 40px 5px,#000000a8 0 30px 60px,inset #333 0 0 0 5px;border-radius:var(--border-radius);transition:transform var(--flip-animation-duration) var(--easing-function),box-shadow 2s var(--easing-function);transform-style:preserve-3d;will-change:transform}.card:hover{box-shadow:#fff6 0 0 40px 5px,#000000a8 0 30px 60px,inset #333 0 0 0 5px}.card:hover .card-content{border:2px solid #fff}.card-bg{inset:var(--card-bg-inset);position:absolute;pointer-events:none;transition:transform .6s var(--easing-function)}.card-content{position:absolute;top:0;color:#fff;height:100%;width:100%;z-index:1;border:2px solid rgba(255,255,255,0);border-radius:var(--border-radius);transition:transform .6s var(--easing-function),border-color .6s var(--easing-function)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { content: [{
+                type: ContentChild,
+                args: ['content', { read: TemplateRef }]
+            }], background: [{
+                type: ContentChild,
+                args: ['background', { read: TemplateRef }]
+            }], backContent: [{
+                type: ContentChild,
+                args: ['backContent', { read: TemplateRef }]
+            }], backBackground: [{
+                type: ContentChild,
+                args: ['backBackground', { read: TemplateRef }]
+            }], loaded: [{
+                type: Output
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], bgInset: [{
+                type: Input
+            }], flipAnimationDuration: [{
+                type: Input
+            }] } });
+
+const NGX_WEB_COMPONENTS_CONFIG = new InjectionToken('webcomponents-config');
+
+const zone = new Zone(Zone.current, { name: "@dotglitch_menu", properties: {} });
+const calcMenuItemBounds = async (menuItems, dataObj) => {
+    const data = {
+        data: dataObj,
+        items: menuItems,
+        config: {},
+        selfCords: { left: "0px", top: "0px" },
+        ownerCords: { x: 0, y: 0, width: 0, height: 0 },
+        id: null
+    };
+    return calcComponentBounds(MenuComponent, data);
+};
+const calcComponentBounds = async (component, data) => {
+    return new Promise((res, rej) => {
+        zone.run(async () => {
+            const app = await createApplication({
+                providers: [
+                    { provide: MAT_DIALOG_DATA, useValue: data }
+                ]
+            });
+            const del = document.createElement("div");
+            del.classList.add("ngx-menu");
+            del.style.position = "absolute";
+            del.style.left = '-1000vw';
+            document.body.append(del);
+            const base = app.bootstrap(component, del);
+            const { instance } = base;
+            await firstValueFrom(app.isStable);
+            const el = instance.viewContainer?.element?.nativeElement;
+            const rect = el.getBoundingClientRect();
+            app.destroy();
+            del.remove();
+            res(rect);
+        });
+    });
+};
+const $data = Symbol("data");
+const $hover = Symbol("hover");
+class MenuComponent {
+    constructor(viewContainer, sanitizer, _data, dialog, // optional only for the purpose of estimating dimensions
+    dialogRef) {
+        this.viewContainer = viewContainer;
+        this.sanitizer = sanitizer;
+        this._data = _data;
+        this.dialog = dialog;
+        this.dialogRef = dialogRef;
+        this.overlayOverlap = 32;
+        this.hoverDelay = 400;
+        this.showDebugOverlay = false;
+        this.isLockedOpen = false;
+        this.hasBootstrapped = false;
+        this.pointerIsOnVoid = false;
+        this.pointerHasBeenOverMask = false;
+        this.parentIsNgxMenu = false;
+        this.coverRectCords = {
+            top: 0,
+            left: 0,
+            height: 0,
+            width: 0
+        };
+        // Check if there are any slashes or dots -- that will clearly exclude it from being a mat icon
+        this.matIconRx = /[\/\.]/i;
+        this.showIconColumn = true;
+        this.showShortcutColumn = true;
+        this.childDialogs = [];
+        // Defaults are set before @Input() hooks evaluate
+        this.dialog = this.dialog || this._data?.dialog;
+        this.data = this._data?.data;
+        this.ownerCords = this._data?.ownerCords;
+        this.selfCords = this._data?.selfCords;
+        this.items = this._data?.items;
+        this.config = this._data?.config;
+        this.id = this._data?.id;
+        this.parentItem = this._data?.parentItem;
+        this.parentContext = this._data?.parentContext;
+        this.isLockedOpen = this.isLockedOpen || this._data?.config?.['_isLockedOpen'];
+        this.parentIsNgxMenu = this._data?.parentIsNgxMenu;
+        this.targetBounds = this._data?.targetBounds;
+        this.template = this._data?.template;
+        this.templateType = this.template instanceof TemplateRef ? "template" : "component";
+        if (this.templateType == "component") {
+            this.componentPortal = new ComponentPortal(this.template);
+        }
+    }
+    ngOnInit() {
+        this.items?.forEach(i => {
+            if (typeof i == "string")
+                return;
+            // Set defaults
+            i['_disabled'] = false;
+            i['_visible'] = true;
+            i['_context'] = (typeof i.context == "function")
+                ? i.context(this.data)
+                : i.context;
+            if (i.label)
+                try {
+                    i['_formattedLabel'] = this.formatLabel(i.label);
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+            if (typeof i.isDisabled == "function")
+                try {
+                    i['_disabled'] = i.isDisabled(this.data || {}, i['_context']);
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+            if (typeof i.isVisible == "function")
+                try {
+                    i['_visible'] = i.isVisible(this.data || {}, i['_context']);
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+            if (typeof i.linkTemplate == "function")
+                try {
+                    i['_link'] = i.linkTemplate(this.data || {}, i['_context']);
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+            if (typeof i.iconTemplate == "function")
+                try {
+                    i['_icon'] = i.iconTemplate(this.data || {}, i['_context']);
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+        });
+        // Show the icon column if there are any items with an icon
+        this.showIconColumn = !!this.items?.find(i => typeof i == "object" &&
+            typeof i['icon'] == "string" &&
+            i['icon'].length > 2);
+        this.showShortcutColumn = !!this.items?.find(i => typeof i == "object" &&
+            typeof i['shortcut'] == "string" &&
+            i['shortcut'].length > 2);
+        if (this.ownerCords) {
+            const selfY = parseInt(this.selfCords.top?.replace('px', '') || '0');
+            const selfX = parseInt(this.selfCords.left?.replace('px', '') || '0');
+            this.coverRectCords = {
+                top: this.ownerCords.y - selfY - (this.overlayOverlap / 2),
+                left: this.ownerCords.x - selfX - (this.overlayOverlap / 2),
+                height: this.ownerCords.height + this.overlayOverlap,
+                width: this.ownerCords.width + this.overlayOverlap
+            };
+        }
+        if (this.config?.stayOpen)
+            this.isLockedOpen = true;
+        setTimeout(() => {
+            this.hasBootstrapped = true;
+        }, 200);
+    }
+    ngAfterViewInit() {
+        const el = this.viewContainer.element.nativeElement;
+        el.addEventListener("keydown", evt => {
+            this.isLockedOpen = true;
+        });
+        el.addEventListener("pointerdown", evt => {
+            this.isLockedOpen = true;
+        });
+        el.addEventListener("touch", evt => {
+            this.isLockedOpen = true;
+        });
+    }
+    ngOnDestroy() {
+        //
+        this.childDialogs.forEach(d => d.close({ [$data]: true }));
+    }
+    /**
+     *
+     */
+    async onMenuItemClick(item, row, keepOpen = false) {
+        if (typeof item == 'string')
+            return null;
+        if (item.separator)
+            return null;
+        const context = await item['_context'];
+        // 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, context);
+            item['_isResolving'] = false;
+        }
+        else if (typeof item.children == "function" && forceLoad) {
+            item['_isResolving'] = true;
+            item['_children'] = await item.children(this.data, context);
+            item['_isResolving'] = false;
+        }
+        else {
+            item['_children'] = item.children;
+        }
+        if (item['_children'] || item.childTemplate)
+            row['_open'] = true;
+        if (!item.childTemplate && !item.children) {
+            if (typeof item.action == "function") {
+                const res = await item.action(this.data, context);
+                this.close(res === undefined ? true : res);
+                return res;
+            }
+            // 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 targetBounds = await (item.childTemplate
+            ? calcComponentBounds(MenuComponent, { template: item.childTemplate })
+            : calcMenuItemBounds(item['_children'], this.data));
+        const { width, height } = targetBounds;
+        if (bounds.y + height > window.innerHeight)
+            cords.bottom = "0px";
+        if (bounds.x + bounds.width + width > window.innerWidth)
+            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 config = structuredClone(this.config);
+        config['_isLockedOpen'] = keepOpen;
+        // Do not project in the top left corner -- this scenario
+        // happens when a dialog opens as the parent is killed.
+        if (cords.left == '0px' && cords.top == '0px')
+            return;
+        const dialogRef = this.dialog.open(MenuComponent, {
+            position: cords,
+            panelClass: ["ngx-menu"].concat(this.config?.customClass || []),
+            backdropClass: "ngx-menu-backdrop",
+            hasBackdrop: false,
+            data: {
+                data: this.data,
+                ownerCords: row.getBoundingClientRect(),
+                selfCords: cords,
+                parentItem: item,
+                parentContext: context,
+                items: item['_children'],
+                template: item.childTemplate,
+                config: config,
+                parentIsNgxMenu: true,
+                targetBounds
+            }
+        });
+        let _s = dialogRef
+            .afterClosed()
+            .subscribe(async (result) => {
+            // Clicked "void" on a submenu
+            if (typeof result == "object" && result[$data] == true) {
+                this.close(result);
+            }
+            // Went back to parent menu -- do not close (same as result == null)
+            else if (typeof result == "object" && result[$data] == false) {
+            }
+            // Got some other result value
+            else if (result != null) {
+                // Perform action callback
+                if (typeof item.action == 'function') {
+                    this.close(await item.action(result, context));
+                }
+                // Just close.
+                else {
+                    this.close();
+                }
+            }
+            row['_open'] = false;
+            this.childDialogs.splice(this.childDialogs.indexOf(dialogRef), 1);
+            _s.unsubscribe();
+        });
+        this.childDialogs.push(dialogRef);
+        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(result) {
+        this.childDialogs.forEach(d => d.close());
+        this.dialogRef?.close(result);
+    }
+    closeOnVoid(force = false) {
+        if (!this.isLockedOpen || force) {
+            this.close({ [$data]: force });
+        }
+    }
+    startHoverTimer(item, row) {
+        // Invert check to make the logic simpler
+        // TL;DR: if (any) of these are true, we will do the hover action
+        if (!(Array.isArray(item.children) && item.children.length > 0 ||
+            typeof item.children == "function" ||
+            item.childTemplate ||
+            item.childrenResolver))
+            return;
+        item[$hover] = setTimeout(() => {
+            delete item[$hover];
+            if (!this.pointerIsOnVoid) {
+                this.childDialogs.forEach(cd => cd.close());
+                row['_open'] = true;
+                this.onMenuItemClick(item, row);
+            }
+        }, this.hoverDelay);
+    }
+    stopHoverTimer(item) {
+        item[$hover] && clearTimeout(item[$hover]);
+        delete item[$hover];
+    }
+    startCloseTimer() {
+        this.closeTimer = setTimeout(() => {
+            this.closeOnVoid();
+        }, 500);
+    }
+    stopCloseTimer() {
+        clearTimeout(this.closeTimer);
+    }
+    /**
+     * Check if the dialog is clipping offscreen
+     * if so, move it back into view.
+     */
+    onResize() {
+        const el = this.viewContainer?.element?.nativeElement;
+        if (!el)
+            return;
+        const { width, height, x, y } = el.getBoundingClientRect();
+        const target = document.querySelector(".ngx-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;
+        }
+    }
+    // If the void element gets stuck open, make wheel events pass through.
+    onWheel(evt) {
+        const el = this.viewContainer.element.nativeElement;
+        el.style.display = "none";
+        const target = document.elementFromPoint(evt.clientX, evt.clientY);
+        el.style.display = "block";
+        target.scroll({
+            top: evt.deltaY + target.scrollTop,
+            left: evt.deltaX + target.scrollLeft,
+            behavior: "smooth"
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.DomSanitizer }, { token: MAT_DIALOG_DATA, optional: true }, { token: i2$1.MatDialog, optional: true }, { token: i2$1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MenuComponent, isStandalone: true, selector: "ngx-menu", inputs: { data: "data", items: "items", config: "config", id: "id", overlayOverlap: "overlayOverlap", hoverDelay: "hoverDelay", showDebugOverlay: "showDebugOverlay", targetBounds: "targetBounds", ownerCords: "ownerCords", selfCords: "selfCords", parentItem: "parentItem", parentContext: "parentContext", isLockedOpen: "isLockedOpen" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "attr.tx": "targetBounds?.x", "attr.ty": "targetBounds?.y", "attr.th": "targetBounds?.height", "attr.tw": "targetBounds?.width" } }, ngImport: i0, template: "<!-- Mouse event blocker for pointer leave -->\n@if (coverRectCords && !parentIsNgxMenu) {\n    <div\n        class=\"owner-mask\"\n        [style.top]=\"coverRectCords.top + 'px'\"\n        [style.left]=\"coverRectCords.left + 'px'\"\n        [style.height]=\"coverRectCords.height + 'px'\"\n        [style.width]=\"coverRectCords.width + 'px'\"\n        [style.background]=\"showDebugOverlay ? '#f004' : '#0000'\"\n        style=\"z-index: -1\"\n        (pointerenter)=\"pointerHasBeenOverMask=true\"\n        (pointerleave)=\"stopCloseTimer()\"\n        (pointermove)=\"pointerHasBeenOverMask=true\"\n        (click)=\"isLockedOpen = true\"\n    ></div>\n}\n\n@if (!parentIsNgxMenu) {\n    <div class=\"void\"\n        [style.background]=\"showDebugOverlay ? '#00f4' : '#0000'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && startCloseTimer()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n        (pointermove)=\"hasBootstrapped && !isLockedOpen && startCloseTimer()\"\n        (click)=\"closeOnVoid(true)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n}\n\n@if (!template) {\n    <table (pointerenter)=\"stopCloseTimer()\">\n        <tbody>\n            @for (item of items; track item) {\n                <!-- A row with a click action -->\n                @if (item != 'separator' && item.separator != true && item['_visible']) {\n                    <tr #row\n                        [class.disabled]=\"item['_disabled']\"\n                        (click)=\"!item['_disabled'] && onMenuItemClick(item, row, true)\"\n                        [class.hover]=\"row['hover']\"\n                        [class.open]=\"row['_open']\"\n                        (pointerenter)=\"row['hover'] = true; startHoverTimer(item, row)\"\n                        (pointerleave)=\"row['hover'] = false; stopHoverTimer(item)\"\n                    >\n\n                        @if (showIconColumn) {\n                            <td class=\"icon\">\n                                @if (matIconRx.test(item['_icon'] ?? item.icon)) {\n                                    <img [src]=\"item['_icon'] ?? item.icon\"/>\n                                }\n                                @else {\n                                    <mat-icon\n                                        [fontIcon]=\"item['_icon'] ?? item.icon\"\n                                        [style.color]=\"item.iconColor\"\n                                    />\n                                }\n                            </td>\n                        }\n\n                        <!-- 'Normal' action based item -->\n                        <td class=\"label\"\n                            [style.padding-left]=\"showIconColumn ? 0 : '16px'\"\n                        >\n                            <a\n                                #anchor\n                                [attr.target]=\"item.linkTarget\"\n                                [attr.href]=\"(item['_link'] || item.link) ? sanitizer.bypassSecurityTrustUrl(item['_link'] || item.link) : undefined\"\n                            >\n                                @if ($any(item.labelTemplate)?.prototype) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"$any(item).labelTemplate\"\n                                        [ngTemplateOutletContext]=\"{\n                                            '$implicit': data,\n                                            'dialog': dialogRef,\n                                            'context': item['_context'],\n                                            'item': item,\n                                            'element': anchor,\n                                            'menu': this\n                                        }\"\n                                    />\n                                }\n                                @else {\n                                    @if ($any(item)?.labelTemplate) {\n                                        {{$any(item)?.labelTemplate(data || {})}}\n                                    }\n                                    @else {\n                                        <div [innerHTML]=\"item['_formattedLabel']\"></div>\n                                    }\n                                }\n                            </a>\n                        </td>\n\n                        @if (showShortcutColumn) {\n                            <td class=\"shortcut\">\n                                {{item.shortcutLabel}}\n                            </td>\n                        }\n\n                        <td style=\"min-width: 16px\">\n                            @if ((\n                                    (item['children']?.length > 0) ||\n                                    (item['_children']?.length > 0) ||\n                                    item.childTemplate ||\n                                    item.children?.['call'] ||\n                                    item.childrenResolver\n                                ) &&\n                                !item['_isResolving']\n                            ) {\n                                <mat-icon\n                                    style=\"transform: translateY(2px)\"\n                                >\n                                    chevron_right\n                                </mat-icon>\n                            }\n\n                            @if (item['_isResolving']) {\n                                <mat-progress-spinner\n                                    mode=\"indeterminate\"\n                                    [diameter]=\"20\"\n                                    style=\"margin-right: 4px\"\n                                />\n                            }\n                        </td>\n                    </tr>\n                }\n                @else if (item != 'separator' && item.separator == true) {\n                    <!-- Separator with label -->\n                    <tr\n                        class=\"disabled separator\"\n                    >\n                        <td\n                            class=\"center\"\n                            [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\"\n                        >\n                            <span class=\"hr\">\n                                {{item['label'] || ''}}\n                            </span>\n                        </td>\n                    </tr>\n                }\n                @else if (item == 'separator') {\n                    <!-- Separator -->\n                    <tr\n                        class=\"disabled separator\"\n                    >\n                        <td\n                            [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\"\n                        >\n                            <hr/>\n                        </td>\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n}\n@else {\n    @if (templateType == 'template') {\n        <div style=\"display: contents;\" (pointerenter)=\"stopCloseTimer()\">\n            <ng-container\n                [ngTemplateOutlet]=\"template\"\n                [ngTemplateOutletContext]=\"{\n                    '$implicit': data,\n                    'dialog': dialogRef,\n                    'context': parentContext,\n                    'item': parentItem,\n                    'element': this.viewContainer?.element?.nativeElement,\n                    'menu': this\n                }\"\n            />\n        </div>\n    }\n    @else {\n        <div style=\"display: contents;\" (pointerenter)=\"stopCloseTimer()\">\n            <ng-container\n                [cdkPortalOutlet]=\"componentPortal\"\n            />\n        </div>\n    }\n}\n\n@if (showDebugOverlay) {\n    <div>\n        <div>hbs: {{hasBootstrapped}}</div>\n        <div>pov: {{pointerIsOnVoid}}</div>\n        <div>ilo: {{isLockedOpen}}</div>\n        <div>hbom: {{pointerHasBeenOverMask}}</div>\n\n        <div>type: {{templateType}}</div>\n    </div>\n}\n", styles: ["::ng-deep .cdk-overlay-container .ngx-menu{--mdc-dialog-container-color: var(--ngx-menu-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-pane.ngx-menu .mat-mdc-dialog-surface{overflow:visible}:host{-webkit-user-select:none;user-select:none;z-index:1;position:relative;display:block}table{border-spacing:0;border-radius:5px;padding:4px 0;overflow:hidden}tr{color:var(--ngx-menu-text-color, #ccc);font-size:var(--ngx-menu-font-size, 14px);cursor:pointer;transition:background-color 75ms ease,color 75ms ease}tr:not(.disabled).hover,tr:not(.disabled).open{background-color:var(--ngx-menu-hover-background-color, #94ebeb);color:var(--ngx-menu-hover-text-color, #000)}tr:not(.disabled).hover a,tr:not(.disabled).open a{color:var(--ngx-menu-hover-text-color, #000)}tr:not(.separator){height:36px}tr.disabled .label{color:var(--ngx-menu-disabled-text-color, #919191)}tr .center{text-align:center}tr a{outline:0;display:flex;align-items:center;gap:10px;justify-content:space-between;height:100%;width:100%;position:relative;left:-16px;width:calc(100% + 32px);padding:0 16px}tr .label{min-width:100px}tr img{max-width:100%;max-height:100%;aspect-ratio:1}.hr{height:1px;text-align:center;position:relative}.hr:before,.hr:after{content:\"\";background:var(--ngx-menu-separator-color, #2a2a2a);display:block;position:absolute;top:0;bottom:0;height:1px;margin:auto;width:300px}.hr:before{right:calc(100% + 4px)}.hr:after{left:calc(100% + 4px)}hr{background:var(--ngx-menu-separator-color, #2a2a2a);border:0;height:1px;margin:0}.icon{width:24px;height:24px;padding-left:10px}.icon mat-icon{transform:translateY(2px)}.shortcut{color:var(--ngx-menu-shortcut-text-color, #848484);text-align:end;padding-right:10px;padding-left:12px}.label{height:var(--ngx-menu-item-height, 30px)}td{vertical-align:middle}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: 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: "17.3.12", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-menu', imports: [
+                        NgTemplateOutlet,
+                        PortalModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule
+                    ], standalone: true, host: {
+                        "[attr.tx]": "targetBounds?.x",
+                        "[attr.ty]": "targetBounds?.y",
+                        "[attr.th]": "targetBounds?.height",
+                        "[attr.tw]": "targetBounds?.width",
+                    }, template: "<!-- Mouse event blocker for pointer leave -->\n@if (coverRectCords && !parentIsNgxMenu) {\n    <div\n        class=\"owner-mask\"\n        [style.top]=\"coverRectCords.top + 'px'\"\n        [style.left]=\"coverRectCords.left + 'px'\"\n        [style.height]=\"coverRectCords.height + 'px'\"\n        [style.width]=\"coverRectCords.width + 'px'\"\n        [style.background]=\"showDebugOverlay ? '#f004' : '#0000'\"\n        style=\"z-index: -1\"\n        (pointerenter)=\"pointerHasBeenOverMask=true\"\n        (pointerleave)=\"stopCloseTimer()\"\n        (pointermove)=\"pointerHasBeenOverMask=true\"\n        (click)=\"isLockedOpen = true\"\n    ></div>\n}\n\n@if (!parentIsNgxMenu) {\n    <div class=\"void\"\n        [style.background]=\"showDebugOverlay ? '#00f4' : '#0000'\"\n        (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && startCloseTimer()\"\n        (pointerleave)=\"pointerIsOnVoid = false\"\n        (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n        (pointermove)=\"hasBootstrapped && !isLockedOpen && startCloseTimer()\"\n        (click)=\"closeOnVoid(true)\"\n        (wheel)=\"onWheel($event)\"\n    ></div>\n}\n\n@if (!template) {\n    <table (pointerenter)=\"stopCloseTimer()\">\n        <tbody>\n            @for (item of items; track item) {\n                <!-- A row with a click action -->\n                @if (item != 'separator' && item.separator != true && item['_visible']) {\n                    <tr #row\n                        [class.disabled]=\"item['_disabled']\"\n                        (click)=\"!item['_disabled'] && onMenuItemClick(item, row, true)\"\n                        [class.hover]=\"row['hover']\"\n                        [class.open]=\"row['_open']\"\n                        (pointerenter)=\"row['hover'] = true; startHoverTimer(item, row)\"\n                        (pointerleave)=\"row['hover'] = false; stopHoverTimer(item)\"\n                    >\n\n                        @if (showIconColumn) {\n                            <td class=\"icon\">\n                                @if (matIconRx.test(item['_icon'] ?? item.icon)) {\n                                    <img [src]=\"item['_icon'] ?? item.icon\"/>\n                                }\n                                @else {\n                                    <mat-icon\n                                        [fontIcon]=\"item['_icon'] ?? item.icon\"\n                                        [style.color]=\"item.iconColor\"\n                                    />\n                                }\n                            </td>\n                        }\n\n                        <!-- 'Normal' action based item -->\n                        <td class=\"label\"\n                            [style.padding-left]=\"showIconColumn ? 0 : '16px'\"\n                        >\n                            <a\n                                #anchor\n                                [attr.target]=\"item.linkTarget\"\n                                [attr.href]=\"(item['_link'] || item.link) ? sanitizer.bypassSecurityTrustUrl(item['_link'] || item.link) : undefined\"\n                            >\n                                @if ($any(item.labelTemplate)?.prototype) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"$any(item).labelTemplate\"\n                                        [ngTemplateOutletContext]=\"{\n                                            '$implicit': data,\n                                            'dialog': dialogRef,\n                                            'context': item['_context'],\n                                            'item': item,\n                                            'element': anchor,\n                                            'menu': this\n                                        }\"\n                                    />\n                                }\n                                @else {\n                                    @if ($any(item)?.labelTemplate) {\n                                        {{$any(item)?.labelTemplate(data || {})}}\n                                    }\n                                    @else {\n                                        <div [innerHTML]=\"item['_formattedLabel']\"></div>\n                                    }\n                                }\n                            </a>\n                        </td>\n\n                        @if (showShortcutColumn) {\n                            <td class=\"shortcut\">\n                                {{item.shortcutLabel}}\n                            </td>\n                        }\n\n                        <td style=\"min-width: 16px\">\n                            @if ((\n                                    (item['children']?.length > 0) ||\n                                    (item['_children']?.length > 0) ||\n                                    item.childTemplate ||\n                                    item.children?.['call'] ||\n                                    item.childrenResolver\n                                ) &&\n                                !item['_isResolving']\n                            ) {\n                                <mat-icon\n                                    style=\"transform: translateY(2px)\"\n                                >\n                                    chevron_right\n                                </mat-icon>\n                            }\n\n                            @if (item['_isResolving']) {\n                                <mat-progress-spinner\n                                    mode=\"indeterminate\"\n                                    [diameter]=\"20\"\n                                    style=\"margin-right: 4px\"\n                                />\n                            }\n                        </td>\n                    </tr>\n                }\n                @else if (item != 'separator' && item.separator == true) {\n                    <!-- Separator with label -->\n                    <tr\n                        class=\"disabled separator\"\n                    >\n                        <td\n                            class=\"center\"\n                            [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\"\n                        >\n                            <span class=\"hr\">\n                                {{item['label'] || ''}}\n                            </span>\n                        </td>\n                    </tr>\n                }\n                @else if (item == 'separator') {\n                    <!-- Separator -->\n                    <tr\n                        class=\"disabled separator\"\n                    >\n                        <td\n                            [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\"\n                        >\n                            <hr/>\n                        </td>\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n}\n@else {\n    @if (templateType == 'template') {\n        <div style=\"display: contents;\" (pointerenter)=\"stopCloseTimer()\">\n            <ng-container\n                [ngTemplateOutlet]=\"template\"\n                [ngTemplateOutletContext]=\"{\n                    '$implicit': data,\n                    'dialog': dialogRef,\n                    'context': parentContext,\n                    'item': parentItem,\n                    'element': this.viewContainer?.element?.nativeElement,\n                    'menu': this\n                }\"\n            />\n        </div>\n    }\n    @else {\n        <div style=\"display: contents;\" (pointerenter)=\"stopCloseTimer()\">\n            <ng-container\n                [cdkPortalOutlet]=\"componentPortal\"\n            />\n        </div>\n    }\n}\n\n@if (showDebugOverlay) {\n    <div>\n        <div>hbs: {{hasBootstrapped}}</div>\n        <div>pov: {{pointerIsOnVoid}}</div>\n        <div>ilo: {{isLockedOpen}}</div>\n        <div>hbom: {{pointerHasBeenOverMask}}</div>\n\n        <div>type: {{templateType}}</div>\n    </div>\n}\n", styles: ["::ng-deep .cdk-overlay-container .ngx-menu{--mdc-dialog-container-color: var(--ngx-menu-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-pane.ngx-menu .mat-mdc-dialog-surface{overflow:visible}:host{-webkit-user-select:none;user-select:none;z-index:1;position:relative;display:block}table{border-spacing:0;border-radius:5px;padding:4px 0;overflow:hidden}tr{color:var(--ngx-menu-text-color, #ccc);font-size:var(--ngx-menu-font-size, 14px);cursor:pointer;transition:background-color 75ms ease,color 75ms ease}tr:not(.disabled).hover,tr:not(.disabled).open{background-color:var(--ngx-menu-hover-background-color, #94ebeb);color:var(--ngx-menu-hover-text-color, #000)}tr:not(.disabled).hover a,tr:not(.disabled).open a{color:var(--ngx-menu-hover-text-color, #000)}tr:not(.separator){height:36px}tr.disabled .label{color:var(--ngx-menu-disabled-text-color, #919191)}tr .center{text-align:center}tr a{outline:0;display:flex;align-items:center;gap:10px;justify-content:space-between;height:100%;width:100%;position:relative;left:-16px;width:calc(100% + 32px);padding:0 16px}tr .label{min-width:100px}tr img{max-width:100%;max-height:100%;aspect-ratio:1}.hr{height:1px;text-align:center;position:relative}.hr:before,.hr:after{content:\"\";background:var(--ngx-menu-separator-color, #2a2a2a);display:block;position:absolute;top:0;bottom:0;height:1px;margin:auto;width:300px}.hr:before{right:calc(100% + 4px)}.hr:after{left:calc(100% + 4px)}hr{background:var(--ngx-menu-separator-color, #2a2a2a);border:0;height:1px;margin:0}.icon{width:24px;height:24px;padding-left:10px}.icon mat-icon{transform:translateY(2px)}.shortcut{color:var(--ngx-menu-shortcut-text-color, #848484);text-align:end;padding-right:10px;padding-left:12px}.label{height:var(--ngx-menu-item-height, 30px)}td{vertical-align:middle}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1.DomSanitizer }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i2$1.MatDialog, decorators: [{
+                    type: Optional
+                }] }, { type: i2$1.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { data: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], overlayOverlap: [{
+                type: Input
+            }], hoverDelay: [{
+                type: Input
+            }], showDebugOverlay: [{
+                type: Input
+            }], targetBounds: [{
+                type: Input
+            }], ownerCords: [{
+                type: Input
+            }], selfCords: [{
+                type: Input
+            }], parentItem: [{
+                type: Input
+            }], parentContext: [{
+                type: Input
+            }], isLockedOpen: [{
+                type: Input
+            }], onResize: [{
+                type: HostListener,
+                args: ["window:resize"]
+            }] } });
+
+/**
+ * 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;
+};
+
+class MenuDirective {
+    constructor(dialog, viewContainer) {
+        this.dialog = dialog;
+        this.viewContainer = viewContainer;
+        /**
+         * Configuration for opening the app menu
+         */
+        this.config = {};
+        this.triggers = [];
+    }
+    ngOnInit() {
+        this.ngOnChanges();
+    }
+    ngOnChanges() {
+        if (this.config.trigger) {
+            this.triggers = Array.isArray(this.config.trigger) ? this.config.trigger : [this.config.trigger];
+        }
+    }
+    ngAfterViewInit() {
+        // const el = this.viewContainer.element.nativeElement as HTMLElement;
+        // // Automatically attach context menu items to
+        // // the contextmenu event
+        // if (this.ctxMenuItems) {
+        //     el.addEventListener('contextmenu', (e) => {
+        //         e.preventDefault();
+        //         this.openMenu(e as any, this.ctxMenuItems, true);
+        //     });
+        // }
+        // if (this.menuItems?.length > 0) {
+        //     if (!this.config?.trigger) {
+        //         el.addEventListener('click', (e) => {
+        //             this.openMenu(e as any, this.menuItems, true);
+        //         });
+        //     }
+        //     else {
+        //         triggers.forEach(t => {
+        //             if (["contextmenu", "click"].includes(t)) {
+        //                 el.addEventListener(t, (e) => {
+        //                     e.preventDefault();
+        //                     this.openMenu(e as any, this.ctxMenuItems, true);
+        //                 });
+        //             }
+        //             else {
+        //                 el.addEventListener(t, this.openMenu.bind(this));
+        //             }
+        //         });
+        //     }
+        // }
+    }
+    async openMenu(evt, items = this.menuItems, keepOpen = false) {
+        const el = this.viewContainer.element.nativeElement;
+        el.classList.add("ngx-menu-open");
+        const isCtxEvent = evt.button == 2;
+        const config = structuredClone(this.config);
+        config['_isLockedOpen'] = keepOpen;
+        return openMenu(this.dialog, items, this.data, evt, this.config, isCtxEvent ? null : el)
+            .then((...res) => {
+            el.classList.remove("ngx-menu-open");
+            return res;
+        })
+            .catch((ex) => {
+            el.classList.remove("ngx-menu-open");
+            throw ex;
+        });
+    }
+    onCtxMenu(e) {
+        if (this.ctxMenuItems || this.triggers.includes("contextmenu")) {
+            e.preventDefault();
+            this.openMenu(e, this.ctxMenuItems, true);
+        }
+    }
+    onClick(e) {
+        if (this.menuItems &&
+            (this.triggers.length == 0 ||
+                this.triggers.includes("click"))) {
+            e.preventDefault();
+            this.openMenu(e, this.menuItems, true);
+        }
+    }
+    onDblClick(e) {
+        if (this.menuItems && this.triggers.length == 0 ||
+            this.menuItems && this.triggers.includes("dblclick")) {
+            e.preventDefault();
+            this.openMenu(e, this.menuItems, true);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuDirective, deps: [{ token: i2$1.MatDialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: MenuDirective, isStandalone: true, selector: "[ngx-contextmenu],[ngx-menu]", inputs: { data: ["ngx-menu-context", "data"], ctxMenuItems: ["ngx-contextmenu", "ctxMenuItems"], menuItems: ["ngx-menu", "menuItems"], config: ["ngx-menu-config", "config"] }, host: { listeners: { "contextmenu": "onCtxMenu($event)", "click": "onClick($event)", "dblclick": "onDblClick($event)" } }, providers: [
+            MatDialog
+        ], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngx-contextmenu],[ngx-menu]',
+                    providers: [
+                        MatDialog
+                    ],
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i2$1.MatDialog }, { type: i0.ViewContainerRef }], propDecorators: { data: [{
+                type: Input,
+                args: ["ngx-menu-context"]
+            }], ctxMenuItems: [{
+                type: Input,
+                args: ["ngx-contextmenu"]
+            }], menuItems: [{
+                type: Input,
+                args: ["ngx-menu"]
+            }], config: [{
+                type: Input,
+                args: ["ngx-menu-config"]
+            }], onCtxMenu: [{
+                type: HostListener,
+                args: ["contextmenu", ['$event']]
+            }], onClick: [{
+                type: HostListener,
+                args: ["click", ['$event']]
+            }], onDblClick: [{
+                type: HostListener,
+                args: ["dblclick", ['$event']]
+            }] } });
+// Helper to open the menu without using the directive.
+const openMenu = async (dialog, menuItems, data, evt, config = {}, el) => {
+    // console.log({ dialog, menuItems, data, evt, config, el });
+    evt.preventDefault();
+    evt.stopPropagation();
+    // Apply defaults.
+    if (!config.alignment)
+        config.alignment = "start";
+    const initialBounds = await calcMenuItemBounds(menuItems, data);
+    const cords = getPosition(el || evt, config, initialBounds);
+    const specificId = ulid();
+    return firstValueFrom(dialog.open(MenuComponent, {
+        data: {
+            dialog,
+            data: data,
+            ownerCords: el?.getBoundingClientRect(),
+            selfCords: cords,
+            items: menuItems,
+            config: config,
+            id: specificId,
+            targetBounds: initialBounds
+        },
+        panelClass: ["ngx-menu", 'ngx-' + specificId].concat(config?.customClass || []),
+        position: cords,
+        backdropClass: "ngx-menu-backdrop"
+    })
+        .afterClosed());
+};
+
+; /*
+ * Public API Surface of package
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComponentResolveStrategy, DependencyService, DialogService, Fetch, FileService, HtmlBypass, KeyboardService, LazyLoaderComponent, LazyLoaderModule, LazyLoaderService, MenuComponent, MenuDirective, NGX_IMAGE_CACHE_CONFIG, NGX_LAZY_LOADER_CONFIG, NGX_WEB_COMPONENTS_CONFIG, NavigationService, NgxImageCacheDirective, ParallaxCardComponent, ResourceBypass, ScriptBypass, StyleBypass, ThemeService, UrlBypass, calcMenuItemBounds, getPosition, getUrlData, openMenu, saveObjectAsFile, sleep, stringToSlug, updateUrl };
+//# sourceMappingURL=dotglitch-ngx-common-core.mjs.map