phoenix-ui-components 2.4.0 → 2.5.0

package/dist/bundles/phoenix-ui-components.umd.js

@@ -1,2148 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('phoenix-event-display'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('phoenix-event-display/package.json'), require('@angular/material/dialog'), require('jszip'), require('css-element-queries'), require('@angular/cdk/drag-drop'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/slide-toggle'), require('@angular/material/slider'), require('@angular/material/tooltip'), require('@angular-slider/ngx-slider'), require('@angular/common'), require('@angular/router')) :
-    typeof define === 'function' && define.amd ? define('phoenix-ui-components', ['exports', '@angular/core', 'phoenix-event-display', '@angular/cdk/overlay', '@angular/cdk/portal', 'phoenix-event-display/package.json', '@angular/material/dialog', 'jszip', 'css-element-queries', '@angular/cdk/drag-drop', '@angular/material/button', '@angular/material/checkbox', '@angular/material/icon', '@angular/material/menu', '@angular/material/slide-toggle', '@angular/material/slider', '@angular/material/tooltip', '@angular-slider/ngx-slider', '@angular/common', '@angular/router'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['phoenix-ui-components'] = {}, global.ng.core, global.phoenixEventDisplay, global.ng.cdk.overlay, global.ng.cdk.portal, global.packageJson, global.ng.material.dialog, global.JSZip, global.cssElementQueries, global.ng.cdk.dragDrop, global.ng.material.button, global.ng.material.checkbox, global.ng.material.icon, global.ng.material.menu, global.ng.material.slideToggle, global.ng.material.slider, global.ng.material.tooltip, global.ngxSlider, global.ng.common, global.ng.router));
-}(this, (function (exports, i0, phoenixEventDisplay, overlay, portal, packageJson, dialog, JSZip, cssElementQueries, dragDrop, button, checkbox, icon, menu, slideToggle, slider, tooltip, ngxSlider, common, router) { 'use strict';
-
-    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-    function _interopNamespace(e) {
-        if (e && e.__esModule) return e;
-        var n = Object.create(null);
-        if (e) {
-            Object.keys(e).forEach(function (k) {
-                if (k !== 'default') {
-                    var d = Object.getOwnPropertyDescriptor(e, k);
-                    Object.defineProperty(n, k, d.get ? d : {
-                        enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
-                    });
-                }
-            });
-        }
-        n['default'] = e;
-        return Object.freeze(n);
-    }
-
-    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var packageJson__default = /*#__PURE__*/_interopDefaultLegacy(packageJson);
-    var JSZip__default = /*#__PURE__*/_interopDefaultLegacy(JSZip);
-
-    var NavComponent = /** @class */ (function () {
-        function NavComponent() {
-        }
-        NavComponent.prototype.ngOnInit = function () { };
-        return NavComponent;
-    }());
-    NavComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-nav',
-                    template: "<a id=\"mainLogo\" class=\"main-logo fixed-top p-2 mx-auto mt-2\" routerLink=\"/\">\n  <img src=\"assets/images/logo-text.svg\" />\n</a>\n",
-                    styles: [".main-logo{width:140px;z-index:9999}.main-logo img{transition:all .5s}.main-logo:hover img{filter:drop-shadow(0px 0px 10px var(--phoenix-text-color));transition:all .5s}\n"]
-                },] }
-    ];
-    NavComponent.ctorParameters = function () { return []; };
-
-    var ConfigSliderComponent = /** @class */ (function () {
-        function ConfigSliderComponent() {
-            this.value = 0;
-            this.min = 0;
-            this.max = 100;
-            this.step = 1;
-            this.allowCustomValue = false;
-            this.onChange = new i0.EventEmitter();
-        }
-        ConfigSliderComponent.prototype.onValueChange = function (value) {
-            if (value) {
-                this.onChange.emit(value);
-            }
-        };
-        return ConfigSliderComponent;
-    }());
-    ConfigSliderComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-config-slider',
-                    template: "<div class=\"d-flex flex-row align-items-center\">\n  <mat-slider\n    #configSlider\n    class=\"mx-2\"\n    [value]=\"value\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    thumbLabel\n    (click)=\"$event.stopPropagation()\"\n    (input)=\"onValueChange($event.value)\"\n  >\n  </mat-slider>\n  <input\n    #configSliderInput\n    *ngIf=\"allowCustomValue\"\n    class=\"config-slider-input\"\n    type=\"number\"\n    [value]=\"value\"\n    (input)=\"onValueChange($event.target.value)\"\n  />\n</div>\n",
-                    styles: [".config-slider-input{background:transparent;color:var(--phoenix-text-color);border:none;border-bottom:1px solid var(--phoenix-text-color);width:25%;-moz-appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}\n"]
-                },] }
-    ];
-    ConfigSliderComponent.propDecorators = {
-        value: [{ type: i0.Input }],
-        min: [{ type: i0.Input }],
-        max: [{ type: i0.Input }],
-        step: [{ type: i0.Input }],
-        allowCustomValue: [{ type: i0.Input }],
-        onChange: [{ type: i0.Output }]
-    };
-
-    var PhoenixMenuItemComponent = /** @class */ (function () {
-        function PhoenixMenuItemComponent(cdr) {
-            this.cdr = cdr;
-        }
-        PhoenixMenuItemComponent.prototype.calculateConfigTop = function () {
-            if (this.phoenixMenuItem) {
-                this.configTop =
-                    this.phoenixMenuItem.nativeElement.getBoundingClientRect().top;
-                this.cdr.detectChanges();
-            }
-        };
-        return PhoenixMenuItemComponent;
-    }());
-    PhoenixMenuItemComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-phoenix-menu-item',
-                    template: "<div class=\"phoenix-menu-item\" #phoenixMenuItem>\n  <div class=\"phoenix-menu-item-left align-items-center\">\n    <!-- If the item has some toggle function -->\n    <ng-container *ngIf=\"currentNode.onToggle; else nodeName\">\n      <mat-slide-toggle\n        [checked]=\"currentNode.toggleState\"\n        (change)=\"currentNode.toggleSelfAndDescendants($event.checked)\"\n      >\n        <ng-container *ngTemplateOutlet=\"nodeName\"></ng-container>\n      </mat-slide-toggle>\n    </ng-container>\n    <!-- If the item has no toggle function -->\n    <ng-template #nodeName>\n      <span class=\"d-flex w-100 align-items-center\">\n        <span *ngIf=\"currentNode.icon\" class=\"icon-wrapper item-icon\">\n          <svg>\n            <use\n              attr.href=\"assets/icons/{{ currentNode.icon }}.svg#{{\n                currentNode.icon\n              }}\"\n            ></use>\n          </svg>\n        </span>\n        <span class=\"item-name\" [title]=\"currentNode.name\">{{\n          currentNode.name\n        }}</span>\n      </span>\n    </ng-template>\n  </div>\n  <div class=\"phoenix-menu-item-right\">\n    <div *ngIf=\"currentNode.configs.length > 0\">\n      <button\n        class=\"icon-wrapper icon-button btn-blank item-settings\"\n        (click)=\"\n          calculateConfigTop();\n          currentNode.configActive = !currentNode.configActive\n        \"\n      >\n        <svg>\n          <use href=\"assets/icons/gear.svg#gear\"></use>\n        </svg>\n      </button>\n      <div\n        class=\"item-config-backdrop\"\n        *ngIf=\"currentNode.configActive\"\n        (click)=\"currentNode.configActive = false\"\n      ></div>\n      <div\n        class=\"item-config\"\n        [hidden]=\"!currentNode.configActive\"\n        [ngStyle]=\"{ 'top.px': configTop }\"\n      >\n        <ng-container\n          *ngFor=\"let config of currentNode.configs\"\n          [ngSwitch]=\"config.type\"\n        >\n          <!-- Config types -->\n          <label class=\"item-config-single\" *ngIf=\"!config.hidden\">\n            <span\n              class=\"item-config-label\"\n              *ngIf=\"config.type !== 'button'\"\n              [ngClass]=\"{ 'font-weight-bold w-100': config.type === 'label' }\"\n            >\n              {{ config.label }}\n            </span>\n            <div\n              class=\"item-config-data\"\n              [ngClass]=\"{ 'p-0': config.type === 'button' }\"\n              *ngIf=\"config.type !== 'label'\"\n            >\n              <mat-checkbox\n                *ngSwitchCase=\"'checkbox'\"\n                [checked]=\"config.isChecked\"\n                (change)=\"\n                  config.onChange($event.checked);\n                  config.isChecked = $event.checked\n                \"\n              ></mat-checkbox>\n\n              <app-config-slider\n                *ngSwitchCase=\"'slider'\"\n                [value]=\"config.value\"\n                (onChange)=\"config.onChange($event); config.value = $event\"\n                [min]=\"config.min\"\n                [max]=\"config.max\"\n                [step]=\"config.step\"\n                [allowCustomValue]=\"config.allowCustomValue\"\n              >\n              </app-config-slider>\n\n              <button\n                *ngSwitchCase=\"'button'\"\n                class=\"w-100\"\n                (click)=\"config.onClick()\"\n                mat-button\n                mat-stroked-button\n              >\n                {{ config.label }}\n              </button>\n\n              <input\n                *ngSwitchCase=\"'color'\"\n                type=\"color\"\n                [value]=\"config.color\"\n                (input)=\"\n                  config.onChange($event.target.value);\n                  config.color = $event.target.value\n                \"\n              />\n\n              <ngx-slider\n                *ngSwitchCase=\"'rangeSlider'\"\n                class=\"range-slider\"\n                [value]=\"config.value ? config.value : config.min\"\n                [highValue]=\"config.highValue ? config.highValue : config.max\"\n                (userChange)=\"\n                  config.onChange($event);\n                  config.value = $event.value;\n                  config.highValue = $event.highValue\n                \"\n                [options]=\"{\n                  floor: config.min,\n                  ceil: config.max,\n                  step: config.step,\n                  animate: false\n                }\"\n              ></ngx-slider>\n\n              <select\n                *ngSwitchCase=\"'select'\"\n                class=\"w-100\"\n                (change)=\"config.onChange($event.target.value)\"\n              >\n                <option\n                  *ngFor=\"let singleOption of config.options\"\n                  [value]=\"singleOption\"\n                >\n                  {{ singleOption }}\n                </option>\n              </select>\n            </div>\n          </label>\n          <!-- Config types END -->\n        </ng-container>\n      </div>\n    </div>\n    <button\n      class=\"icon-wrapper icon-button btn-blank item-expand\"\n      *ngIf=\"currentNode.children.length > 0\"\n      (click)=\"currentNode.childrenActive = !currentNode.childrenActive\"\n      [ngClass]=\"{ expanded: currentNode.childrenActive }\"\n    >\n      <svg>\n        <use href=\"assets/icons/expand.svg#expand\"></use>\n      </svg>\n    </button>\n  </div>\n</div>\n<div class=\"phoenix-menu-children\" *ngIf=\"currentNode.childrenActive\">\n  <app-phoenix-menu-item\n    *ngFor=\"let childNode of currentNode.children\"\n    [currentNode]=\"childNode\"\n  >\n  </app-phoenix-menu-item>\n</div>\n",
-                    encapsulation: i0.ViewEncapsulation.None,
-                    styles: [".phoenix-menu-item{width:100%;padding:.6rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color);font-size:.8rem;transition:all .5s;display:flex;justify-content:space-between;align-items:center}.phoenix-menu-item-left{display:flex;justify-content:flex-start;min-width:0;padding-right:.5rem;overflow:hidden}.phoenix-menu-item-left .item-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phoenix-menu-item-left .item-icon{margin-right:.2rem}.phoenix-menu-item-right{display:flex;justify-content:flex-end}.phoenix-menu-item-right .item-expand.expanded{transform:scaleY(-1)}.phoenix-menu-item-right .item-settings{margin-right:.2rem}.phoenix-menu-item-right .item-config-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:110}.phoenix-menu-item-right .item-config{position:absolute;margin-top:-5rem;right:100%;width:14rem;padding:.5rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color-secondary);box-shadow:var(--phoenix-box-shadow);display:flex;flex-direction:column;z-index:120}.phoenix-menu-item-right .item-config>*{margin-bottom:.4rem}.phoenix-menu-item-right .item-config>*:last-child{margin-bottom:0}.phoenix-menu-item-right .item-config .item-config-single{display:flex;flex-direction:row}.phoenix-menu-item-right .item-config .item-config-single .item-config-label{width:30%}.phoenix-menu-item-right .item-config .item-config-single .item-config-data{flex-grow:1;padding-left:.5rem}.phoenix-menu-item .icon-wrapper{display:inline-block;width:1.3rem;height:1.3rem;padding:.23rem;transition:all .4s}.phoenix-menu-item .icon-wrapper.icon-button:hover{background:var(--phoenix-options-icon-bg);border-radius:40%;cursor:pointer}.phoenix-menu-item .icon-wrapper svg{width:100%;height:100%;vertical-align:top}.phoenix-menu-item .mat-slide-toggle-bar{width:30px!important}.phoenix-menu-item .mat-slide-toggle-thumb{width:15px!important;height:15px!important;position:absolute;top:2px}.phoenix-menu-item .mat-slider-horizontal{min-width:0;width:100%;height:20px}.phoenix-menu-item .mat-slider-horizontal .mat-slider-wrapper{top:10px}.phoenix-menu-item label.mat-checkbox-layout{margin:0}@media screen and (max-width: 768px){.phoenix-menu-item{font-size:.75rem;padding:.5rem}.phoenix-menu-item .icon-wrapper{width:1rem;height:1rem;padding:.15rem}}.phoenix-menu-children{margin-left:.5rem;border-left:1px solid var(--phoenix-accent)}.range-slider.ngx-slider .ngx-slider-bar{background:var(--phoenix-text-color-secondary);height:.2rem}.range-slider.ngx-slider .ngx-slider-selection{background:var(--phoenix-accent)}.range-slider.ngx-slider .ngx-slider-pointer{width:1rem;height:1rem;top:-.45rem;bottom:0;background-color:var(--phoenix-accent)}.range-slider.ngx-slider .ngx-slider-pointer:after{display:none}.range-slider.ngx-slider .ngx-slider-bubble{color:var(--phoenix-text-color);font-size:.8rem}.range-slider.ngx-slider .ngx-slider-bubble.ngx-slider-limit{color:var(--phoenix-text-color-secondary)}\n"]
-                },] }
-    ];
-    PhoenixMenuItemComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef }
-    ]; };
-    PhoenixMenuItemComponent.propDecorators = {
-        currentNode: [{ type: i0.Input }],
-        phoenixMenuItem: [{ type: i0.ViewChild, args: ['phoenixMenuItem',] }]
-    };
-
-    var PhoenixMenuComponent = /** @class */ (function () {
-        function PhoenixMenuComponent() {
-        }
-        return PhoenixMenuComponent;
-    }());
-    PhoenixMenuComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-phoenix-menu',
-                    template: "<div id=\"phoenixMenu\">\n  <app-phoenix-menu-item [currentNode]=\"rootNode\"></app-phoenix-menu-item>\n</div>\n",
-                    styles: [":host{width:15rem;max-width:45%;position:absolute;top:5rem;right:1rem}#phoenixMenu{background:var(--phoenix-background-color-secondary);max-height:75vh;overflow-y:auto;box-shadow:var(--phoenix-box-shadow);z-index:100}@media screen and (max-width: 768px){#phoenixMenu{top:4rem}}\n"]
-                },] }
-    ];
-    PhoenixMenuComponent.propDecorators = {
-        rootNode: [{ type: i0.Input }]
-    };
-
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b)
-                if (Object.prototype.hasOwnProperty.call(b, p))
-                    d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    function __extends(d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-    var __assign = function () {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s)
-                    if (Object.prototype.hasOwnProperty.call(s, p))
-                        t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-                t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-            r = Reflect.decorate(decorators, target, key, desc);
-        else
-            for (var i = decorators.length - 1; i >= 0; i--)
-                if (d = decorators[i])
-                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); };
-    }
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-            return Reflect.metadata(metadataKey, metadataValue);
-    }
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function rejected(value) { try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function () { if (t[0] & 1)
-                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f)
-                throw new TypeError("Generator is already executing.");
-            while (_)
-                try {
-                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                        return t;
-                    if (y = 0, t)
-                        op = [op[0] & 2, t.value];
-                    switch (op[0]) {
-                        case 0:
-                        case 1:
-                            t = op;
-                            break;
-                        case 4:
-                            _.label++;
-                            return { value: op[1], done: false };
-                        case 5:
-                            _.label++;
-                            y = op[1];
-                            op = [0];
-                            continue;
-                        case 7:
-                            op = _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                        default:
-                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                                _ = 0;
-                                continue;
-                            }
-                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                                _.label = op[1];
-                                break;
-                            }
-                            if (op[0] === 6 && _.label < t[1]) {
-                                _.label = t[1];
-                                t = op;
-                                break;
-                            }
-                            if (t && _.label < t[2]) {
-                                _.label = t[2];
-                                _.ops.push(op);
-                                break;
-                            }
-                            if (t[2])
-                                _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                    }
-                    op = body.call(thisArg, _);
-                }
-                catch (e) {
-                    op = [6, e];
-                    y = 0;
-                }
-                finally {
-                    f = t = 0;
-                }
-            if (op[0] & 5)
-                throw op[1];
-            return { value: op[0] ? op[1] : void 0, done: true };
-        }
-    }
-    var __createBinding = Object.create ? (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
-    }) : (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        o[k2] = m[k];
-    });
-    function __exportStar(m, o) {
-        for (var p in m)
-            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
-                __createBinding(o, m, p);
-    }
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m)
-            return m.call(o);
-        if (o && typeof o.length === "number")
-            return {
-                next: function () {
-                    if (o && i >= o.length)
-                        o = void 0;
-                    return { value: o && o[i++], done: !o };
-                }
-            };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m)
-            return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-                ar.push(r.value);
-        }
-        catch (error) {
-            e = { error: error };
-        }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
-            }
-            finally {
-                if (e)
-                    throw e.error;
-            }
-        }
-        return ar;
-    }
-    /** @deprecated */
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-    /** @deprecated */
-    function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-            s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    }
-    function __spreadArray(to, from, pack) {
-        if (pack || arguments.length === 2)
-            for (var i = 0, l = from.length, ar; i < l; i++) {
-                if (ar || !(i in from)) {
-                    if (!ar)
-                        ar = Array.prototype.slice.call(from, 0, i);
-                    ar[i] = from[i];
-                }
-            }
-        return to.concat(ar || Array.prototype.slice.call(from));
-    }
-    function __await(v) {
-        return this instanceof __await ? (this.v = v, this) : new __await(v);
-    }
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n])
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try {
-            step(g[n](v));
-        }
-        catch (e) {
-            settle(q[0][3], e);
-        } }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length)
-            resume(q[0][0], q[0][1]); }
-    }
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-    }
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-    }
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) {
-            Object.defineProperty(cooked, "raw", { value: raw });
-        }
-        else {
-            cooked.raw = raw;
-        }
-        return cooked;
-    }
-    ;
-    var __setModuleDefault = Object.create ? (function (o, v) {
-        Object.defineProperty(o, "default", { enumerable: true, value: v });
-    }) : function (o, v) {
-        o["default"] = v;
-    };
-    function __importStar(mod) {
-        if (mod && mod.__esModule)
-            return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod)
-                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
-                    __createBinding(result, mod, k);
-        __setModuleDefault(result, mod);
-        return result;
-    }
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-    function __classPrivateFieldGet(receiver, state, kind, f) {
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a getter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot read private member from an object whose class did not declare it");
-        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-    }
-    function __classPrivateFieldSet(receiver, state, value, kind, f) {
-        if (kind === "m")
-            throw new TypeError("Private method is not writable");
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a setter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-    }
-
-    /**
-     * Service for all event display related functions.
-     */
-    var EventDisplayService = /** @class */ (function (_super) {
-        __extends(EventDisplayService, _super);
-        /**
-         * Instantiate the event display by calling the parent constructor.
-         */
-        function EventDisplayService() {
-            return _super.call(this) || this;
-        }
-        return EventDisplayService;
-    }(phoenixEventDisplay.EventDisplay));
-    EventDisplayService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function EventDisplayService_Factory() { return new EventDisplayService(); }, token: EventDisplayService, providedIn: "root" });
-    EventDisplayService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root',
-                },] }
-    ];
-    EventDisplayService.ctorParameters = function () { return []; };
-
-    var defaultAnimationPresets = {
-        'Preset 1': {
-            positions: [
-                {
-                    position: [11976, 7262, 11927],
-                    duration: 1000,
-                },
-                {
-                    position: [-1000, 0, 11927],
-                    duration: 2000,
-                },
-                {
-                    position: [2000, 500, 1000],
-                    duration: 3500,
-                },
-                {
-                    position: [5000, 2000, 1000],
-                    duration: 3000,
-                },
-                {
-                    position: [5000, 2000, 1000],
-                    duration: 2000,
-                },
-                {
-                    position: [11976, 7262, 11927],
-                    duration: 1000,
-                },
-            ],
-            animateEventAfterInterval: 5000,
-            collisionDuration: 6000,
-        },
-    };
-    var AnimateCameraComponent = /** @class */ (function () {
-        function AnimateCameraComponent(eventDisplay) {
-            this.eventDisplay = eventDisplay;
-            this.animationPresets = defaultAnimationPresets;
-            this.animationPresetsKeys = Object.keys(this.animationPresets);
-            this.isAnimating = false;
-        }
-        AnimateCameraComponent.prototype.animatePreset = function (preset) {
-            var _this = this;
-            this.setDetectorOpacity(0.2);
-            this.eventDisplay.animatePreset(this.animationPresets[preset], function () {
-                _this.setDetectorOpacity(1);
-            });
-        };
-        AnimateCameraComponent.prototype.animateCamera = function () {
-            var _this = this;
-            if (!this.isAnimating) {
-                this.isAnimating = true;
-                this.eventDisplay.animateThroughEvent([11976, 7262, 11927], 3000, function () {
-                    _this.isAnimating = false;
-                });
-            }
-        };
-        AnimateCameraComponent.prototype.setDetectorOpacity = function (opacity) {
-            this.eventDisplay
-                .getThreeManager()
-                .getSceneManager()
-                .setGeometryOpacity(phoenixEventDisplay.SceneManager.GEOMETRIES_ID, opacity);
-        };
-        return AnimateCameraComponent;
-    }());
-    AnimateCameraComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-animate-camera',
-                    template: "<mat-menu #animationPresets>\n  <button\n    mat-menu-item\n    *ngFor=\"let preset of animationPresetsKeys\"\n    (click)=\"animatePreset(preset)\"\n  >\n    {{ preset }}\n  </button>\n  <button mat-menu-item (click)=\"animateCamera()\">Animate camera</button>\n</mat-menu>\n\n<app-menu-toggle\n  [matMenuTriggerFor]=\"animationPresets\"\n  tooltip=\"Preset animations\"\n  icon=\"animate-camera\"\n>\n</app-menu-toggle>\n",
-                    styles: [""]
-                },] }
-    ];
-    AnimateCameraComponent.ctorParameters = function () { return [
-        { type: EventDisplayService }
-    ]; };
-    AnimateCameraComponent.propDecorators = {
-        animationPresets: [{ type: i0.Input }]
-    };
-
-    var AnimateEventComponent = /** @class */ (function () {
-        function AnimateEventComponent(eventDisplay) {
-            this.eventDisplay = eventDisplay;
-            this.isAnimating = false;
-        }
-        AnimateEventComponent.prototype.toggleAnimateEvent = function () {
-            var _this = this;
-            if (!this.isAnimating) {
-                this.isAnimating = true;
-                this.eventDisplay.animateEventWithCollision(10000, function () {
-                    _this.isAnimating = false;
-                });
-            }
-        };
-        return AnimateEventComponent;
-    }());
-    AnimateEventComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-animate-event',
-                    template: "<app-menu-toggle\n  tooltip=\"Animate event\"\n  icon=\"event-folder\"\n  [active]=\"isAnimating\"\n  (click)=\"toggleAnimateEvent()\"\n>\n</app-menu-toggle>\n",
-                    styles: [""]
-                },] }
-    ];
-    AnimateEventComponent.ctorParameters = function () { return [
-        { type: EventDisplayService }
-    ]; };
-
-    var AutoRotateComponent = /** @class */ (function () {
-        function AutoRotateComponent(eventDisplay) {
-            this.eventDisplay = eventDisplay;
-            this.autoRotate = false;
-        }
-        AutoRotateComponent.prototype.toggleAutoRotate = function () {
-            this.autoRotate = !this.autoRotate;
-            this.eventDisplay.getUIManager().setAutoRotate(this.autoRotate);
-        };
-        return AutoRotateComponent;
-    }());
-    AutoRotateComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-auto-rotate',
-                    template: "<app-menu-toggle\n  tooltip=\"Auto rotate\"\n  icon=\"rotate\"\n  [active]=\"autoRotate\"\n  (click)=\"toggleAutoRotate()\"\n>\n</app-menu-toggle>\n",
-                    styles: [""]
-                },] }
-    ];
-    AutoRotateComponent.ctorParameters = function () { return [
-        { type: EventDisplayService }
-    ]; };
-
-    var CollectionsInfoOverlayComponent = /** @class */ (function () {
-        function CollectionsInfoOverlayComponent(elementRef, eventDisplay) {
-            this.elementRef = elementRef;
-            this.eventDisplay = eventDisplay;
-            this.getPrettySymbol = phoenixEventDisplay.PrettySymbols.getPrettySymbol;
-        }
-        CollectionsInfoOverlayComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.eventDisplay.listenToDisplayedEventChange(function (_event) { return (_this.collections = _this.eventDisplay.getCollections()); });
-            this.activeObject = this.eventDisplay.getActiveObjectId();
-            this.activeObject.onUpdate(function (value) {
-                if (document.getElementById(value)) {
-                    document.getElementById(value).scrollIntoView(false);
-                }
-            });
-        };
-        CollectionsInfoOverlayComponent.prototype.changeCollection = function (selectedCollection) {
-            var eventDataGroup = this.getEventDataGroup();
-            this.selectedCollection = selectedCollection;
-            this.showingCollection = this.eventDisplay
-                .getCollection(selectedCollection)
-                .map(function (object) {
-                var _a;
-                return (Object.assign(Object.assign({}, object), { isCut: !((_a = eventDataGroup.getObjectByProperty('uuid', object.uuid)) === null || _a === void 0 ? void 0 : _a.visible) }));
-            });
-            this.collectionColumns = Object.keys(this.showingCollection[0]).filter(function (column) { return !['uuid', 'hits', 'isCut'].includes(column); } // FIXME - this is an ugly hack. But currently hits from tracks make track collections unusable. Better to have exlusion list passed in.
-            );
-        };
-        CollectionsInfoOverlayComponent.prototype.lookAtObject = function (uuid) {
-            if (uuid) {
-                this.activeObject.update(uuid);
-                this.eventDisplay.lookAtObject(uuid);
-            }
-        };
-        CollectionsInfoOverlayComponent.prototype.highlightObject = function (uuid) {
-            if (uuid) {
-                this.activeObject.update(uuid);
-                this.eventDisplay.highlightObject(uuid);
-            }
-        };
-        CollectionsInfoOverlayComponent.prototype.addLabel = function (index, uuid) {
-            var labelValue = this.elementRef.nativeElement.querySelector("#label" + index).value;
-            if (this.selectedCollection) {
-                // Empty labelValue will remove the label object
-                this.eventDisplay.addLabelToObject(labelValue, this.selectedCollection, index, uuid);
-            }
-        };
-        CollectionsInfoOverlayComponent.prototype.getEventDataGroup = function () {
-            return this.eventDisplay
-                .getThreeManager()
-                .getSceneManager()
-                .getScene()
-                .getObjectByName(phoenixEventDisplay.SceneManager.EVENT_DATA_ID);
-        };
-        return CollectionsInfoOverlayComponent;
-    }());
-    CollectionsInfoOverlayComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-collections-info-overlay',
-                    template: "<!-- Show objects -->\n<app-overlay\n  overlayTitle=\"Collections Info\"\n  icon=\"info\"\n  [resizable]=\"true\"\n  [active]=\"showObjectsInfo\"\n>\n  <!-- Using ngIf to remove it from DOM since this panel requires heavy computing -->\n  <div *ngIf=\"showObjectsInfo\" class=\"collectionsInfo m-2\">\n    <div\n      class=\"collectionSelector mb-2 d-flex align-items-center\"\n      *ngIf=\"collections != null\"\n    >\n      <span>Choose a collection: </span>\n      <div class=\"eventSelector\">\n        <label for=\"event\">Event</label>\n        <select\n          id=\"collection\"\n          name=\"collection\"\n          (change)=\"changeCollection($event.target.value)\"\n        >\n          <option value=\"\" selected disabled hidden>Choose Collection</option>\n          <option *ngFor=\"let collection of collections\" [value]=\"collection\">\n            {{ collection }}\n          </option>\n        </select>\n      </div>\n    </div>\n\n    <div class=\"boxBody table-responsive\">\n      <table\n        id=\"collectionTable\"\n        class=\"table table-borderless table-sm\"\n        *ngIf=\"showingCollection\"\n      >\n        <thead>\n          <tr>\n            <th>No.</th>\n            <th>Selection</th>\n            <th>Label</th>\n            <th *ngFor=\"let column of collectionColumns\">\n              {{ getPrettySymbol(column) }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"let object of showingCollection; index as i\"\n            [attr.id]=\"object.uuid\"\n            [ngClass]=\"{\n              'active-object':\n                activeObject && activeObject.value === object.uuid,\n              'is-cut': object.isCut\n            }\"\n          >\n            <td>#{{ i }}</td>\n            <td>\n              <div\n                *ngIf=\"object.uuid\"\n                class=\"row justify-content-center icon-wrapper\"\n              >\n                <button\n                  class=\"object-select btn-blank\"\n                  matTooltip=\"Move camera to object\"\n                  (click)=\"lookAtObject(object.uuid)\"\n                >\n                  <svg>\n                    <use href=\"assets/icons/views.svg#views\"></use>\n                  </svg>\n                </button>\n                <button\n                  class=\"object-select btn-blank\"\n                  matTooltip=\"Highlight object\"\n                  (click)=\"highlightObject(object.uuid)\"\n                >\n                  <svg>\n                    <use href=\"assets/icons/cursor.svg#cursor\"></use>\n                  </svg>\n                </button>\n              </div>\n            </td>\n            <td>\n              <div class=\"row m-0 add-label\">\n                <div class=\"col-10 p-0\">\n                  <input\n                    class=\"form-control form-control-sm\"\n                    type=\"text\"\n                    [id]=\"'label' + i\"\n                  />\n                </div>\n                <div class=\"col-2 p-0 pl-2 text-center icon-wrapper\">\n                  <button\n                    class=\"object-select btn-blank\"\n                    matTooltip=\"Add, update or remove object label\"\n                    (click)=\"addLabel(i, object.uuid)\"\n                  >\n                    <svg>\n                      <use href=\"assets/icons/update.svg#update\"></use>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </td>\n            <td *ngFor=\"let column of collectionColumns\">\n              {{ object[column] }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <p class=\"emptyBox\" *ngIf=\"!collections\">\n        Load event data to be able to display information about the collections\n        here.\n      </p>\n    </div>\n  </div>\n</app-overlay>\n",
-                    styles: [".collectionsInfo{height:95%}.collectionsInfo .collectionSelector{height:15%;min-height:2rem}.collectionsInfo .collectionSelector span{color:var(--phoenix-text-color-secondary);margin-right:1rem}.boxBody{height:85%;overflow:scroll}.boxBody p.emptyBox{max-width:21em}.boxBody .add-label{min-width:8rem}.boxBody .add-label input{padding:.1rem .3rem;font-size:.75rem}#collectionTable{position:relative;color:var(--phoenix-text-color-secondary)}#collectionTable thead tr th{position:sticky;top:0;z-index:100;background:var(--phoenix-background-color-secondary)}#collectionTable tr *{padding-right:1.2rem}#collectionTable tr *:last-child{padding-right:0}#collectionTable tr.is-cut{opacity:.5}#collectionTable tr.active-object{color:var(--phoenix-background-color);background:var(--phoenix-text-color);box-shadow:0 0 15px var(--phoenix-text-color)}#collectionTable tr.active-object div.icon-wrapper{--phoenix-options-icon-path: var(--phoenix-background-color);--phoenix-options-icon-bg: var(--phoenix-text-color-hover)}#collectionTable tr.active-object .add-label input{--phoenix-text-color: var(--phoenix-background-color);--phoenix-background-color-tertiary: var( --phoenix-text-color-secondary );--phoenix-border: var(--phoenix-background-color)}#collectionTable td .object-select{position:relative;width:1.6rem;height:1.6rem;margin-right:.4em;text-align:center;background-color:var(--phoenix-options-icon-bg);border-radius:10px;cursor:pointer}#collectionTable td .object-select:last-child{margin-right:0}#collectionTable td .object-select:hover{border:1px solid var(--phoenix-options-icon-path)}#collectionTable td .object-select svg{position:absolute;top:0;left:0;padding:.4rem;width:100%;height:100%;vertical-align:top}.eventSelector{display:flex}.eventSelector label{display:none;color:var(--phoenix-text-color-secondary)}.eventSelector select{width:9rem;padding:5px 10px;font-size:12px;border:1px solid rgba(88,88,88,.08);box-shadow:var(--phoenix-icon-shadow);background-color:var(--phoenix-background-color-tertiary);color:var(--phoenix-text-color-secondary)}\n"]
-                },] }
-    ];
-    CollectionsInfoOverlayComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: EventDisplayService }
-    ]; };
-    CollectionsInfoOverlayComponent.propDecorators = {
-        showObjectsInfo: [{ type: i0.Input }]
-    };
-
-    var CollectionsInfoComponent = /** @class */ (function () {
-        function CollectionsInfoComponent(overlay) {
-            this.overlay = overlay;
-            this.showObjectsInfo = false;
-        }
-        CollectionsInfoComponent.prototype.ngOnInit = function () {
-            var overlayRef = this.overlay.create();
-            var overlayPortal = new portal.ComponentPortal(CollectionsInfoOverlayComponent);
-            this.overlayWindow = overlayRef.attach(overlayPortal);
-            this.overlayWindow.instance.showObjectsInfo = this.showObjectsInfo;
-        };
-        CollectionsInfoComponent.prototype.ngOnDestroy = function () {
-            this.overlayWindow.destroy();
-        };
-        CollectionsInfoComponent.prototype.toggleOverlay = function () {
-            this.showObjectsInfo = !this.showObjectsInfo;
-            this.overlayWindow.instance.showObjectsInfo = this.showObjectsInfo;
-        };
-        return CollectionsInfoComponent;
-    }());
-    CollectionsInfoComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-collections-info',
-                    template: "<app-menu-toggle\n  tooltip=\"Event data collections info\"\n  icon=\"info\"\n  [active]=\"showObjectsInfo\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n",
-                    styles: [""]
-                },] }
-    ];
-    CollectionsInfoComponent.ctorParameters = function () { return [
-        { type: overlay.Overlay }
-    ]; };
-
-    var DarkThemeComponent = /** @class */ (function () {
-        function DarkThemeComponent(eventDisplay) {
-            this.eventDisplay = eventDisplay;
-            this.darkTheme = false;
-        }
-        DarkThemeComponent.prototype.ngOnInit = function () {
-            this.darkTheme = this.eventDisplay.getUIManager().getDarkTheme();
-        };
-        DarkThemeComponent.prototype.setDarkTheme = function () {
-            this.darkTheme = !this.darkTheme;
-            this.eventDisplay.getUIManager().setDarkTheme(this.darkTheme);
-        };
-        return DarkThemeComponent;
-    }());
-    DarkThemeComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-dark-theme',
-                    template: "<app-menu-toggle\n  tooltip=\"Dark theme\"\n  [active]=\"darkTheme\"\n  icon=\"dark\"\n  (click)=\"setDarkTheme()\"\n>\n</app-menu-toggle>\n",
-                    styles: [""]
-                },] }
-    ];
-    DarkThemeComponent.ctorParameters = function () { return [
-        { type: EventDisplayService }
-    ]; };
-
-    var EventSelectorComponent = /** @class */ (function () {
-        function EventSelectorComponent(eventDisplay) {
-            this.eventDisplay = eventDisplay;
-        }
-        EventSelectorComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.eventDisplay.listenToLoadedEventsChange(function (events) { return (_this.events = events); });
-        };
-        EventSelectorComponent.prototype.changeEvent = function (selected) {
-            var value = selected.target.value;
-            this.eventDisplay.loadEvent(value);
-        };
-        return EventSelectorComponent;
-    }());
-    EventSelectorComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-event-selector',
-                    template: "<div\n  class=\"eventSelector mx-2\"\n  *ngIf=\"events != null\"\n  matTooltip=\"Event selector\"\n  matTooltipPosition=\"above\"\n>\n  <select name=\"event\" (change)=\"changeEvent($event)\">\n    <option *ngFor=\"let event of events\" [value]=\"event\">\n      {{ event }}\n    </option>\n  </select>\n</div>\n",
-                    styles: [".eventSelector select{width:9rem;padding:5px 10px;font-size:12px;border:1px solid rgba(88,88,88,.08);box-shadow:var(--phoenix-icon-shadow);background-color:var(--phoenix-background-color-tertiary);color:var(--phoenix-text-color-secondary)}\n"]
-                },] }
-    ];
-    EventSelectorComponent.ctorParameters = function () { return [
-        { type: EventDisplayService }
-    ]; };
-
-    var ExperimentInfoComponent = /** @class */ (function () {
-        function ExperimentInfoComponent(eventDisplay) {
-            this.eventDisplay = eventDisplay;
-        }
-        ExperimentInfoComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.eventDisplay.listenToDisplayedEventChange(function () {
-                _this.experimentInfo = _this.eventDisplay.getEventMetadata();
-            });
-        };
-        return ExperimentInfoComponent;
-    }());
-    ExperimentInfoComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-experiment-info',
-                    template: "<div id=\"experimentInfo\" class=\"experimentInfo\" cdkDrag cdkDragBoundary=\"body\">\n  <a\n    class=\"experimentLogoWrapper\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    *ngIf=\"experiment\"\n    href=\"https://home.cern/science/experiments/{{ experiment }}\"\n  >\n    <img\n      class=\"experimentLogo\"\n      src=\"assets/images/{{ experiment }}.svg\"\n      alt=\"\"\n    />\n  </a>\n  <div class=\"textInfo\">\n    <p *ngIf=\"experimentTagline\">\n      <b>{{ experimentTagline }}</b>\n    </p>\n    <p *ngFor=\"let infoField of experimentInfo\">\n      <ng-container *ngIf=\"infoField.label\">\n        <b>{{ infoField.label }}: </b>{{ infoField.value }}\n      </ng-container>\n      <ng-container *ngIf=\"!infoField.label\">\n        {{ infoField }}\n      </ng-container>\n    </p>\n  </div>\n</div>\n",
-                    styles: [".experimentInfo{position:absolute;top:5rem;left:1rem;display:flex;flex-direction:row;justify-items:flex-end;justify-content:flex-end;align-items:center;align-content:center;cursor:move}.experimentLogoWrapper{width:6rem}.experimentLogoWrapper .experimentLogo{width:100%;height:100%}.textInfo{margin-left:1rem}.textInfo p{color:var(--phoenix-text-color-secondary);font-size:.8rem;margin-bottom:.5rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media screen and (max-width: 768px){.experimentInfo{top:4rem;max-width:40%}.experimentLogoWrapper{height:4rem}.textInfo{display:none}}\n"]
-                },] }
-    ];
-    ExperimentInfoComponent.ctorParameters = function () { return [
-        { type: EventDisplayService }
-    ]; };
-    ExperimentInfoComponent.propDecorators = {
-        experiment: [{ type: i0.Input }],
-        experimentTagline: [{ type: i0.Input }]
-    };
-
-    /**
-     * Component for displaying information from the logger
-     */
-    var InfoPanelOverlayComponent = /** @class */ (function () {
-        /**
-         * Create the information panel overlay
-         * @param infoLogger Service containing operations related to info logs
-         */
-        function InfoPanelOverlayComponent(eventDisplay) {
-            this.eventDisplay = eventDisplay;
-            /** List of actions to be displayed in the info panel */
-            this.actionsList = [];
-            /** Get Phoenix Version */
-            this.version = packageJson__default['default'].version;
-        }
-        /**
-         * Get the list of logs from the info logger service
-         */
-        InfoPanelOverlayComponent.prototype.ngOnInit = function () {
-            this.actionsList = this.eventDisplay.getInfoLogger().getInfoLoggerList();
-        };
-        return InfoPanelOverlayComponent;
-    }());
-    InfoPanelOverlayComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-info-panel-overlay',
-                    template: "<app-overlay\n  overlayTitle=\"Info Panel\"\n  icon=\"info-panel\"\n  [resizable]=\"true\"\n  [active]=\"showInfoPanel\"\n>\n  <ul class=\"list-group list-group-flush\">\n    <li class=\"list-group-item\">\n      <!-- Show Phoenix Current Version (ON by Default) -->\n      Phoenix Version: {{ version }}\n    </li>\n    <li class=\"list-group-item\" *ngIf=\"actionsList.length === 0\">\n      No actions.\n    </li>\n    <li class=\"list-group-item\" *ngFor=\"let action of actionsList\">\n      {{ action }}\n    </li>\n  </ul>\n</app-overlay>\n",
-                    styles: [".list-group-item{font-size:.8rem;padding:.5rem 1rem}\n"]
-                },] }
-    ];
-    InfoPanelOverlayComponent.ctorParameters = function () { return [
-        { type: EventDisplayService }
-    ]; };
-    InfoPanelOverlayComponent.propDecorators = {
-        showInfoPanel: [{ type: i0.Input }]
-    };
-
-    /**
-     * Component for toggling info panel overlay
-     */
-    var InfoPanelComponent = /** @class */ (function () {
-        /**
-         * Create the info panel toggle
-         * @param overlay Info panel overlay containing logger data
-         */
-        function InfoPanelComponent(overlay) {
-            this.overlay = overlay;
-            /** @ignore */
-            this.showInfoPanel = false;
-        }
-        /**
-         * Create the info panel overlay
-         */
-        InfoPanelComponent.prototype.ngOnInit = function () {
-            var overlayRef = this.overlay.create();
-            var overlayPortal = new portal.ComponentPortal(InfoPanelOverlayComponent);
-            this.overlayWindow = overlayRef.attach(overlayPortal);
-            this.overlayWindow.instance.showInfoPanel = this.showInfoPanel;
-        };
-        /**
-         * Destroy the info panel overlay
-         */
-        InfoPanelComponent.prototype.ngOnDestroy = function () {
-            this.overlayWindow.destroy();
-        };
-        /**
-         * Toggle the info panel overlay
-         */
-        InfoPanelComponent.prototype.toggleOverlay = function () {
-            this.showInfoPanel = !this.showInfoPanel;
-            this.overlayWindow.instance.showInfoPanel = this.showInfoPanel;
-        };
-        return InfoPanelComponent;
-    }());
-    InfoPanelComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-info-panel',
-                    template: "<app-menu-toggle\n  tooltip=\"Info panel\"\n  icon=\"info-panel\"\n  [active]=\"showInfoPanel\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n",
-                    styles: [""]
-                },] }
-    ];
-    InfoPanelComponent.ctorParameters = function () { return [
-        { type: overlay.Overlay }
-    ]; };
-
-    exports.EventDataFormat = void 0;
-    (function (EventDataFormat) {
-        EventDataFormat["JSON"] = "JSON";
-        EventDataFormat["JIVEXML"] = "JIVEXML";
-        EventDataFormat["IG"] = "IG";
-        EventDataFormat["ZIP"] = "ZIP";
-    })(exports.EventDataFormat || (exports.EventDataFormat = {}));
-    var ImportOption = /** @class */ (function () {
-        function ImportOption(format, fileType, handler, accept) {
-            this.format = format;
-            this.fileType = fileType;
-            this.handler = handler;
-            this.accept = accept;
-        }
-        return ImportOption;
-    }());
-
-    var IOOptionsDialogComponent = /** @class */ (function () {
-        function IOOptionsDialogComponent(eventDisplay, dialogRef) {
-            this.eventDisplay = eventDisplay;
-            this.dialogRef = dialogRef;
-            this.eventDataImportOptions = [exports.EventDataFormat.JSON];
-            this.supportedEventDataFormats = [
-                new ImportOption(exports.EventDataFormat.JSON, '.json', this.handleJSONEventDataInput.bind(this), 'application/json'),
-                new ImportOption(exports.EventDataFormat.JIVEXML, '.xml', this.handleJiveXMLDataInput.bind(this), 'text/xml'),
-                new ImportOption(exports.EventDataFormat.ZIP, '.zip', this.handleZipEventDataInput.bind(this), '.zip'),
-                new ImportOption(exports.EventDataFormat.IG, '.ig', this.handleIgEventDataInput.bind(this), '.ig'),
-            ];
-        }
-        IOOptionsDialogComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.eventDataOptionsWithHandler = this.supportedEventDataFormats.filter(function (eventDataFormat) { return _this.eventDataImportOptions.includes(eventDataFormat.format); });
-            this.eventDataImportOptions.forEach(function (eventDataImportOption) {
-                if (eventDataImportOption instanceof ImportOption) {
-                    var importHandler_1 = eventDataImportOption.handler.bind(_this);
-                    eventDataImportOption.handler = function (files) {
-                        importHandler_1(files);
-                        _this.onClose();
-                    };
-                    _this.eventDataOptionsWithHandler.push(eventDataImportOption);
-                }
-            });
-        };
-        IOOptionsDialogComponent.prototype.getSupportedEventDataFormats = function () {
-            return this.eventDataImportOptions
-                .map(function (format) {
-                if (format instanceof ImportOption) {
-                    return format.format;
-                }
-                return format;
-            })
-                .filter(function (format) { return format !== 'ZIP'; })
-                .join(', ');
-        };
-        IOOptionsDialogComponent.prototype.onClose = function () {
-            this.dialogRef.close();
-        };
-        IOOptionsDialogComponent.prototype.handleJSONEventDataInput = function (files) {
-            var _this = this;
-            var callback = function (content) {
-                var json = typeof content === 'string' ? JSON.parse(content) : content;
-                _this.eventDisplay.parsePhoenixEvents(json);
-            };
-            this.handleFileInput(files[0], 'json', callback);
-        };
-        IOOptionsDialogComponent.prototype.handleJiveXMLDataInput = function (files) {
-            var _this = this;
-            var callback = function (content) {
-                var jiveloader = new phoenixEventDisplay.JiveXMLLoader();
-                jiveloader.process(content);
-                var eventData = jiveloader.getEventData();
-                _this.eventDisplay.buildEventDataFromJSON(eventData);
-            };
-            this.handleFileInput(files[0], 'xml', callback);
-        };
-        IOOptionsDialogComponent.prototype.handleOBJInput = function (files) {
-            var _this = this;
-            var callback = function (content, name) {
-                _this.eventDisplay.parseOBJGeometry(content, name);
-            };
-            this.handleFileInput(files[0], 'obj', callback);
-        };
-        IOOptionsDialogComponent.prototype.handleSceneInput = function (files) {
-            var _this = this;
-            var callback = function (content) {
-                _this.eventDisplay.parsePhoenixDisplay(content);
-            };
-            this.handleFileInput(files[0], 'phnx', callback);
-        };
-        IOOptionsDialogComponent.prototype.handleGLTFInput = function (files) {
-            var _this = this;
-            var callback = function (content, name) {
-                _this.eventDisplay.parseGLTFGeometry(content, name);
-            };
-            this.handleFileInput(files[0], 'gltf', callback);
-        };
-        IOOptionsDialogComponent.prototype.handlePhoenixInput = function (files) {
-            var _this = this;
-            var callback = function (content) {
-                _this.eventDisplay.parsePhoenixDisplay(content);
-            };
-            this.handleFileInput(files[0], 'phnx', callback);
-        };
-        IOOptionsDialogComponent.prototype.handleROOTInput = function (files) {
-            var _this = this;
-            phoenixEventDisplay.ScriptLoader.loadJSRootScripts().then(function (JSROOT) {
-                var objectName = prompt('Enter object name in ROOT file');
-                JSROOT.openFile(files[0]).then(function (file) {
-                    file.readObject(objectName).then(function (obj) {
-                        _this.eventDisplay.loadJSONGeometry(JSROOT.GEO.build(obj, { dflt_colors: true }).toJSON(), files[0].name.split('.')[0]);
-                    });
-                });
-            });
-            this.onClose();
-        };
-        IOOptionsDialogComponent.prototype.handleRootJSONInput = function (files) {
-            var _this = this;
-            phoenixEventDisplay.ScriptLoader.loadJSRootScripts().then(function (JSROOT) {
-                var callback = function (content, name) {
-                    _this.eventDisplay.loadJSONGeometry(JSROOT.GEO.build(JSROOT.parse(content), {
-                        dflt_colors: true,
-                    }).toJSON(), name);
-                };
-                _this.handleFileInput(files[0], 'gz', callback);
-            });
-        };
-        IOOptionsDialogComponent.prototype.handleIgEventDataInput = function (files) {
-            var _this = this;
-            var cmsLoader = new phoenixEventDisplay.CMSLoader();
-            cmsLoader.readIgArchive(files[0], function (allEvents) {
-                var allEventsData = cmsLoader.getAllEventsData(allEvents);
-                _this.eventDisplay.parsePhoenixEvents(allEventsData);
-                _this.onClose();
-            });
-        };
-        IOOptionsDialogComponent.prototype.handleZipEventDataInput = function (files) {
-            var _this = this;
-            if (this.isFileOfExtension(files[0], 'zip')) {
-                this.handleZipInput(files[0], function (allFilesWithData) {
-                    var allEventsObject = {};
-                    // JSON event data
-                    Object.keys(allFilesWithData)
-                        .filter(function (fileName) { return fileName.endsWith('.json'); })
-                        .forEach(function (fileName) {
-                        Object.assign(allEventsObject, JSON.parse(allFilesWithData[fileName]));
-                    });
-                    // JiveXML event data
-                    var jiveloader = new phoenixEventDisplay.JiveXMLLoader();
-                    Object.keys(allFilesWithData)
-                        .filter(function (fileName) { return fileName.endsWith('.xml'); })
-                        .forEach(function (fileName) {
-                        var _a;
-                        jiveloader.process(allFilesWithData[fileName]);
-                        var eventData = jiveloader.getEventData();
-                        Object.assign(allEventsObject, (_a = {}, _a[fileName] = eventData, _a));
-                    });
-                    _this.eventDisplay.parsePhoenixEvents(allEventsObject);
-                    _this.onClose();
-                });
-            }
-            else {
-                console.error('Error: Invalid file format!');
-                this.eventDisplay.getInfoLogger().add('Invalid file format!', 'Error');
-            }
-        };
-        IOOptionsDialogComponent.prototype.handleZipInput = function (file, callback) {
-            return __awaiter(this, void 0, void 0, function () {
-                var allFilesWithData, zipArchive, allFiles, allFiles_1, allFiles_1_1, singleFile, fileData, e_1_1, error_1;
-                var e_1, _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            allFilesWithData = {};
-                            _b.label = 1;
-                        case 1:
-                            _b.trys.push([1, 11, , 12]);
-                            zipArchive = new JSZip__default['default']();
-                            return [4 /*yield*/, zipArchive.loadAsync(file)];
-                        case 2:
-                            _b.sent();
-                            allFiles = Object.keys(zipArchive.files);
-                            _b.label = 3;
-                        case 3:
-                            _b.trys.push([3, 8, 9, 10]);
-                            allFiles_1 = __values(allFiles), allFiles_1_1 = allFiles_1.next();
-                            _b.label = 4;
-                        case 4:
-                            if (!!allFiles_1_1.done) return [3 /*break*/, 7];
-                            singleFile = allFiles_1_1.value;
-                            return [4 /*yield*/, zipArchive.file(singleFile).async('string')];
-                        case 5:
-                            fileData = _b.sent();
-                            allFilesWithData[singleFile] = fileData;
-                            _b.label = 6;
-                        case 6:
-                            allFiles_1_1 = allFiles_1.next();
-                            return [3 /*break*/, 4];
-                        case 7: return [3 /*break*/, 10];
-                        case 8:
-                            e_1_1 = _b.sent();
-                            e_1 = { error: e_1_1 };
-                            return [3 /*break*/, 10];
-                        case 9:
-                            try {
-                                if (allFiles_1_1 && !allFiles_1_1.done && (_a = allFiles_1.return)) _a.call(allFiles_1);
-                            }
-                            finally { if (e_1) throw e_1.error; }
-                            return [7 /*endfinally*/];
-                        case 10:
-                            callback(allFilesWithData);
-                            return [3 /*break*/, 12];
-                        case 11:
-                            error_1 = _b.sent();
-                            console.error('Error while reading zip', error_1);
-                            this.eventDisplay.getInfoLogger().add('Could not read zip file', 'Error');
-                            return [3 /*break*/, 12];
-                        case 12: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        IOOptionsDialogComponent.prototype.handleFileInput = function (file, extension, callback) {
-            var reader = new FileReader();
-            if (this.isFileOfExtension(file, extension)) {
-                reader.onload = function () {
-                    callback(reader.result.toString(), file.name.split('.')[0]);
-                };
-                reader.readAsText(file);
-            }
-            else {
-                console.error('Error: Invalid file format!');
-                this.eventDisplay.getInfoLogger().add('Invalid file format!', 'Error');
-            }
-            this.onClose();
-        };
-        IOOptionsDialogComponent.prototype.isFileOfExtension = function (file, extension) {
-            return file.name.split('.').pop() === extension;
-        };
-        IOOptionsDialogComponent.prototype.saveScene = function () {
-            this.eventDisplay.exportPhoenixDisplay();
-        };
-        IOOptionsDialogComponent.prototype.exportOBJ = function () {
-            this.eventDisplay.exportToOBJ();
-        };
-        return IOOptionsDialogComponent;
-    }());
-    IOOptionsDialogComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-io-options-dialog',
-                    template: "<div class=\"dialog\">\n  <h1 mat-dialog-title>Import and export options</h1>\n  <div mat-dialog-content class=\"dialog-content\">\n    <div *ngIf=\"eventDataImportOptions.length > 0\">\n      <h5>Import</h5>\n\n      <h6 class=\"text-center\">Event data</h6>\n\n      <div class=\"row centered\">\n        <ng-container\n          *ngFor=\"let eventDataImportOption of eventDataOptionsWithHandler\"\n        >\n          <input\n            #eventDataFileInput\n            type=\"file\"\n            tabindex=\"-1\"\n            class=\"file-input\"\n            [accept]=\"eventDataImportOption.accept\"\n            (change)=\"eventDataImportOption.handler($event.target.files)\"\n          />\n          <button\n            class=\"file-input-button\"\n            (click)=\"eventDataFileInput.click()\"\n          >\n            <img src=\"assets/icons/eventData.svg\" alt=\"Event data icon\" />\n            Load {{ eventDataImportOption.fileType }}\n          </button>\n        </ng-container>\n      </div>\n\n      <p class=\"text-center\">\n        Supported formats: {{ getSupportedEventDataFormats() }}\n      </p>\n    </div>\n\n    <h6 class=\"text-center\">Geometries</h6>\n\n    <div class=\"row centered\">\n      <input\n        #objFileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".obj\"\n        name=\"image\"\n        (change)=\"handleOBJInput($event.target.files)\"\n      />\n      <button class=\"file-input-button\" (click)=\"objFileInput.click()\">\n        <img src=\"assets/icons/obj.svg\" alt=\"\" /> Load .obj\n      </button>\n\n      <input\n        #gltfFileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".gltf\"\n        name=\"image\"\n        (change)=\"handleGLTFInput($event.target.files)\"\n      />\n      <button class=\"file-input-button\" (click)=\"gltfFileInput.click()\">\n        <img src=\"assets/icons/gltf.svg\" alt=\"\" /> Load .gltf\n      </button>\n\n      <input\n        #rootFileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".root\"\n        (change)=\"handleROOTInput($event.target.files)\"\n      />\n      <button class=\"file-input-button\" (click)=\"rootFileInput.click()\">\n        <img src=\"assets/icons/file-import.svg\" alt=\"\" /> Load .root\n      </button>\n\n      <input\n        #rootJSONFileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".json.gz\"\n        (change)=\"handleRootJSONInput($event.target.files)\"\n      />\n      <button class=\"file-input-button\" (click)=\"rootJSONFileInput.click()\">\n        <img src=\"assets/icons/file-import.svg\" alt=\"\" /> Load .json.gz\n      </button>\n    </div>\n\n    <p class=\"text-center\">Supported formats: OBJ, GLTF, ROOT, ROOT JSON</p>\n\n    <h5>Import / export scene</h5>\n\n    <div class=\"row centered\">\n      <button\n        class=\"file-input-button load-export\"\n        id=\"exportScene\"\n        (click)=\"saveScene()\"\n      >\n        <img src=\"assets/icons/save.svg\" alt=\"\" /> Save scene\n      </button>\n\n      <input\n        #loadSceneInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".phnx\"\n        name=\"image\"\n        (change)=\"handlePhoenixInput($event.target.files)\"\n      />\n      <button\n        class=\"file-input-button load-export\"\n        id=\"importScene\"\n        (click)=\"loadSceneInput.click()\"\n      >\n        <img src=\"assets/icons/upload.svg\" alt=\"\" /> Load scene\n      </button>\n\n      <button\n        class=\"file-input-button export-button\"\n        id=\"exportOBJ\"\n        (click)=\"exportOBJ()\"\n      >\n        <img src=\"assets/icons/obj.svg\" alt=\"\" /> Save OBJ\n      </button>\n    </div>\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button (click)=\"onClose()\" cdkFocusInitial>Close</button>\n  </div>\n</div>\n",
-                    styles: [".row{justify-content:center;margin:1rem 0}.file-input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.file-input-button{font-size:1em;font-weight:700;color:#fff;background-color:#6eaece;padding:1em .5em;border:none;border-radius:10px;width:8rem;margin:0 .4rem}.file-input-button.load-export{padding:.8em .2em;width:7rem}.file-input-button.load-export img{max-height:1.2em}.file-input-button.export-button{background-color:#cb7133}.file-input-button.export-button:hover{background-color:#ad5b2d}.file-input-button img{max-height:2em;display:block;width:100%}.file-input-button:hover{background-color:#118ab2}#exportScene{background-color:#5bd99e}#exportScene:hover{background-color:#05c292}#importScene{background-color:#ecc25e}#importScene:hover{background-color:#d6b44d}\n"]
-                },] }
-    ];
-    IOOptionsDialogComponent.ctorParameters = function () { return [
-        { type: EventDisplayService },
-        { type: dialog.MatDialogRef }
-    ]; };
-    IOOptionsDialogComponent.propDecorators = {
-        eventDataImportOptions: [{ type: i0.Input }]
-    };
-
-    var IoOptionsComponent = /** @class */ (function () {
-        function IoOptionsComponent(dialog) {
-            this.dialog = dialog;
-            this.eventDataImportOptions = Object.values(exports.EventDataFormat);
-        }
-        IoOptionsComponent.prototype.openIODialog = function () {
-            var dialogRef = this.dialog.open(IOOptionsDialogComponent, {
-                panelClass: 'dialog',
-            });
-            dialogRef.componentInstance.eventDataImportOptions =
-                this.eventDataImportOptions;
-        };
-        return IoOptionsComponent;
-    }());
-    IoOptionsComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-io-options',
-                    template: "<app-menu-toggle\n  tooltip=\"Import and export options\"\n  icon=\"import\"\n  [active]=\"false\"\n  (click)=\"openIODialog()\"\n>\n</app-menu-toggle>\n",
-                    styles: [""]
-                },] }
-    ];
-    IoOptionsComponent.ctorParameters = function () { return [
-        { type: dialog.MatDialog }
-    ]; };
-    IoOptionsComponent.propDecorators = {
-        eventDataImportOptions: [{ type: i0.Input }]
-    };
-
-    var MainViewToggleComponent = /** @class */ (function () {
-        function MainViewToggleComponent(eventDisplay) {
-            this.eventDisplay = eventDisplay;
-            this.orthographicView = false;
-        }
-        MainViewToggleComponent.prototype.switchMainView = function () {
-            this.orthographicView = !this.orthographicView;
-            this.eventDisplay
-                .getUIManager()
-                .toggleOrthographicView(this.orthographicView);
-        };
-        return MainViewToggleComponent;
-    }());
-    MainViewToggleComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-main-view-toggle',
-                    template: "<app-menu-toggle\n  [icon]=\"orthographicView ? 'perspective' : 'orthographic'\"\n  [matTooltip]=\"\n    'Switch to ' + (orthographicView ? 'perspective' : 'orthographic') + ' view'\n  \"\n  (click)=\"switchMainView()\"\n>\n</app-menu-toggle>\n",
-                    styles: [""]
-                },] }
-    ];
-    MainViewToggleComponent.ctorParameters = function () { return [
-        { type: EventDisplayService }
-    ]; };
-
-    var MenuToggleComponent = /** @class */ (function () {
-        function MenuToggleComponent() {
-            this.disabled = false;
-        }
-        return MenuToggleComponent;
-    }());
-    MenuToggleComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-menu-toggle',
-                    template: "<button\n  class=\"menu-toggle\"\n  [ngClass]=\"{ disabled: disabled }\"\n  [matTooltip]=\"tooltip\"\n  matTooltipPosition=\"above\"\n  matTooltipTouchGestures=\"off\"\n>\n  <svg class=\"menu-toggle-icon\" [ngClass]=\"{ 'active-icon': active }\">\n    <use attr.href=\"assets/icons/{{ icon }}.svg#{{ icon }}\"></use>\n  </svg>\n</button>\n",
-                    styles: [":host{display:flex;margin:0 .6rem}:host .menu-toggle{display:flex;background:unset;border:none;height:2.5rem;width:2.5rem;min-height:2.5rem;min-width:2.5rem;padding:.65rem;cursor:pointer;align-self:center;transition:all .4s}:host .menu-toggle-icon{width:100%;height:100%}:host .menu-toggle-icon.active-icon{--phoenix-options-icon-path: #00bcd4}:host .menu-toggle:hover{background-color:var(--phoenix-options-icon-bg);border-radius:40%;transition:all .4s}:host .menu-toggle.disabled{cursor:not-allowed;opacity:.4}\n"]
-                },] }
-    ];
-    MenuToggleComponent.propDecorators = {
-        icon: [{ type: i0.Input }],
-        active: [{ type: i0.Input }],
-        tooltip: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }]
-    };
-
-    var ObjectClippingComponent = /** @class */ (function () {
-        function ObjectClippingComponent(eventDisplay) {
-            var _this = this;
-            this.eventDisplay = eventDisplay;
-            var stateManager = this.eventDisplay.getStateManager();
-            stateManager.clippingEnabled.onUpdate(function (clippingValue) { return (_this.clippingEnabled = clippingValue); });
-            stateManager.clippingAngle.onUpdate(function (value) { return (_this.clippingAngle = value); });
-        }
-        ObjectClippingComponent.prototype.changeClippingAngle = function (change) {
-            var angle = change.value;
-            this.eventDisplay.getUIManager().rotateClipping(angle);
-        };
-        ObjectClippingComponent.prototype.toggleClipping = function (change) {
-            var value = change.checked;
-            this.eventDisplay.getUIManager().setClipping(value);
-            this.clippingEnabled = value;
-        };
-        return ObjectClippingComponent;
-    }());
-    ObjectClippingComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-object-clipping',
-                    template: "<mat-menu class=\"mat-menu\" #menu>\n  <button\n    mat-menu-item\n    (click)=\"\n      $event.stopPropagation();\n      clippingCheckbox._inputElement.nativeElement.click()\n    \"\n  >\n    <mat-checkbox\n      #clippingCheckbox\n      [checked]=\"clippingEnabled\"\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"toggleClipping($event)\"\n      >Clipping\n    </mat-checkbox>\n  </button>\n  <button class=\"slider-btn\" mat-menu-item (focus)=\"clippingSlider.focus()\">\n    <mat-slider\n      #clippingSlider\n      min=\"0\"\n      max=\"180\"\n      step=\"1\"\n      thumbLabel\n      [value]=\"clippingAngle\"\n      (click)=\"$event.stopPropagation()\"\n      (input)=\"changeClippingAngle($event)\"\n    >\n    </mat-slider>\n  </button>\n</mat-menu>\n\n<app-menu-toggle\n  [matMenuTriggerFor]=\"menu\"\n  tooltip=\"Geometry clipping\"\n  icon=\"clipping\"\n  [active]=\"clippingEnabled\"\n>\n</app-menu-toggle>\n",
-                    styles: [".slider-btn{overflow:visible}mat-slider{margin-left:.75rem;margin-right:.75rem}\n"]
-                },] }
-    ];
-    ObjectClippingComponent.ctorParameters = function () { return [
-        { type: EventDisplayService }
-    ]; };
-
-    var ObjectSelectionOverlayComponent = /** @class */ (function () {
-        function ObjectSelectionOverlayComponent(eventDisplay) {
-            this.eventDisplay = eventDisplay;
-            this.selectedObject = { name: 'Object', attributes: [] };
-        }
-        ObjectSelectionOverlayComponent.prototype.ngOnInit = function () {
-            this.eventDisplay.allowSelection(this.selectedObject);
-        };
-        return ObjectSelectionOverlayComponent;
-    }());
-    ObjectSelectionOverlayComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-object-selection-overlay',
-                    template: "<app-overlay\n  icon=\"cursor\"\n  [overlayTitle]=\"selectedObject.name\"\n  [active]=\"!hiddenSelectedInfo\"\n>\n  <div\n    id=\"selectedObjectPanelBody\"\n    class=\"m-1\"\n    *ngIf=\"selectedObject.attributes.length > 0\"\n  >\n    <div\n      *ngFor=\"let attribute of selectedObject.attributes\"\n      class=\"attributeField\"\n    >\n      <strong>{{ attribute.attributeName }}</strong>\n      : {{ attribute.attributeValue | attributePipe }}\n    </div>\n  </div>\n</app-overlay>\n",
-                    styles: ["#selectedObjectPanelBody{padding:0 .8em;overflow:auto;max-width:300px;max-height:16rem;min-width:7rem}\n"]
-                },] }
-    ];
-    ObjectSelectionOverlayComponent.ctorParameters = function () { return [
-        { type: EventDisplayService }
-    ]; };
-    ObjectSelectionOverlayComponent.propDecorators = {
-        hiddenSelectedInfo: [{ type: i0.Input }]
-    };
-
-    var ObjectSelectionComponent = /** @class */ (function () {
-        function ObjectSelectionComponent(overlay, eventDisplay) {
-            this.overlay = overlay;
-            this.eventDisplay = eventDisplay;
-            // Attributes for displaying the information of selected objects
-            this.hiddenSelectedInfo = true;
-        }
-        ObjectSelectionComponent.prototype.ngOnInit = function () {
-            var overlayRef = this.overlay.create();
-            var overlayPortal = new portal.ComponentPortal(ObjectSelectionOverlayComponent);
-            this.overlayWindow = overlayRef.attach(overlayPortal);
-            this.overlayWindow.instance.hiddenSelectedInfo = this.hiddenSelectedInfo;
-        };
-        ObjectSelectionComponent.prototype.ngOnDestroy = function () {
-            this.overlayWindow.destroy();
-        };
-        ObjectSelectionComponent.prototype.toggleOverlay = function () {
-            this.hiddenSelectedInfo = !this.hiddenSelectedInfo;
-            this.overlayWindow.instance.hiddenSelectedInfo = this.hiddenSelectedInfo;
-            this.eventDisplay.enableSelecting(!this.hiddenSelectedInfo);
-        };
-        return ObjectSelectionComponent;
-    }());
-    ObjectSelectionComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-object-selection',
-                    template: "<app-menu-toggle\n  tooltip=\"Object selection\"\n  icon=\"cursor\"\n  [active]=\"!hiddenSelectedInfo\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n",
-                    styles: [""]
-                },] }
-    ];
-    ObjectSelectionComponent.ctorParameters = function () { return [
-        { type: overlay.Overlay },
-        { type: EventDisplayService }
-    ]; };
-
-    /**
-     * Component for overlay panel.
-     */
-    var OverlayComponent = /** @class */ (function () {
-        function OverlayComponent() {
-            /** If the overlay is open or not. */
-            this.active = false;
-            /** If the overlay is resizable. */
-            this.resizable = false;
-            /** If the overlay body is transparent or not. */
-            this.transparentBody = false;
-            /** If the overlay body is visible or not. */
-            this.showBody = true;
-            /** Minimum resizable width. */
-            this.MIN_RES_WIDTH = 300;
-            /** Minimum resizable height */
-            this.MIN_RES_HEIGHT = 100;
-        }
-        /**
-         * Move the resizable handle to the bottom right after the component is created.
-         */
-        OverlayComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            if (this.resizable) {
-                var resizeHandleElement = this.resizeHandleCorner.nativeElement;
-                resizeHandleElement.style.bottom = '0';
-                resizeHandleElement.style.right = '0';
-                new cssElementQueries.ResizeSensor(this.overlayCard.nativeElement, function () {
-                    _this.resetHandlePosition();
-                });
-                window.addEventListener('resize', function () {
-                    _this.resetHandlePosition();
-                });
-            }
-        };
-        /**
-         * Resize the overlay card when the resize handle is dragged.
-         */
-        OverlayComponent.prototype.onResize = function () {
-            var resizeHandleElement = this.resizeHandleCorner.nativeElement;
-            var overlayCardElement = this.overlayCard.nativeElement;
-            var dragRect = resizeHandleElement.getBoundingClientRect();
-            var overlayRect = overlayCardElement.getBoundingClientRect();
-            var width = dragRect.left - overlayRect.left + dragRect.width;
-            var height = dragRect.top - overlayRect.top + dragRect.height;
-            this.setHandleTransform(overlayRect, dragRect);
-            if (width > this.MIN_RES_WIDTH && height > this.MIN_RES_HEIGHT) {
-                overlayCardElement.style.width = width + 'px';
-                overlayCardElement.style.height = height + 'px';
-            }
-        };
-        /**
-         * Reset resize handle position.
-         */
-        OverlayComponent.prototype.resetHandlePosition = function () {
-            var resizeHandleElement = this.resizeHandleCorner.nativeElement;
-            this.setHandleTransform(this.overlayCard.nativeElement.getBoundingClientRect(), resizeHandleElement.getBoundingClientRect());
-            resizeHandleElement.style.bottom = null;
-            resizeHandleElement.style.right = null;
-        };
-        /**
-         * Set the position of the resize handle using transform3d.
-         * @param overlayRect Bounding client rectangle of the overlay card.
-         * @param dragRect Bounding client rectangle of the resize handle.
-         */
-        OverlayComponent.prototype.setHandleTransform = function (overlayRect, dragRect) {
-            var translateX = overlayRect.width - dragRect.width;
-            var translateY = overlayRect.height - dragRect.height;
-            this.resizeHandleCorner.nativeElement.style.transform = "translate3d(" + translateX + "px, " + translateY + "px, 0)";
-        };
-        return OverlayComponent;
-    }());
-    OverlayComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-overlay',
-                    template: "<div\n  #overlayCard\n  class=\"overlay-card card\"\n  [hidden]=\"!active\"\n  cdkDrag\n  cdkDragBoundary=\"body\"\n>\n  <div\n    class=\"card-header d-flex justify-content-between\"\n    [ngClass]=\"{ 'with-body': showBody }\"\n    cdkDragHandle\n    *ngIf=\"overlayTitle\"\n  >\n    <div class=\"align-self-center card-icon\" *ngIf=\"icon\">\n      <svg>\n        <use attr.href=\"assets/icons/{{ icon }}.svg#{{ icon }}\"></use>\n      </svg>\n    </div>\n    <h5 class=\"align-self-center m-0 px-2\">{{ overlayTitle }}</h5>\n    <button\n      class=\"align-self-center card-icon btn-blank expandCollapse\"\n      matTooltip=\"Expand / Collapse\"\n      matTooltipPosition=\"right\"\n      [ngClass]=\"{ expand: showBody }\"\n      (click)=\"showBody = !showBody\"\n    >\n      <svg>\n        <use href=\"assets/icons/expand.svg#expand\"></use>\n      </svg>\n    </button>\n  </div>\n  <div\n    class=\"overlay-card-content\"\n    *ngIf=\"showBody\"\n    [ngClass]=\"{ 'transparent-bg': transparentBody }\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <!-- Making the overlay resizable -->\n  <span\n    #resizeHandleCorner\n    class=\"resize-handle corner\"\n    *ngIf=\"resizable\"\n    [hidden]=\"!showBody\"\n    cdkDrag\n    (cdkDragMoved)=\"onResize()\"\n  ></span>\n</div>\n",
-                    encapsulation: i0.ViewEncapsulation.None,
-                    styles: [".overlay-card.card{color:var(--phoenix-text-color);background:none;max-width:100vw;font-size:12px;min-width:300px;height:100%;max-height:70vh;box-shadow:none;border:none;position:relative;z-index:200}.overlay-card.card .card-header{width:12rem;background:var(--phoenix-background-color-secondary);box-shadow:var(--phoenix-box-shadow);padding:.4rem .8rem;border-radius:10px;border:none;cursor:move;text-align:center;transition:all .2s}.overlay-card.card .card-header.with-body{border-bottom-left-radius:0;border-bottom-right-radius:0}.overlay-card.card .card-header .card-icon{display:flex;height:.7rem;width:.7rem}.overlay-card.card .card-header h5{font-size:.9rem}.overlay-card.card .card-header .expandCollapse{cursor:pointer;transition:all .2s}.overlay-card.card .card-header .expandCollapse.expand{transform:scaleY(-1)}.overlay-card.card .card-header .expandCollapse svg{width:100%;height:100%}.overlay-card.card .overlay-card-content{background:var(--phoenix-background-color-secondary);box-shadow:var(--phoenix-box-shadow);border-radius:0 10px 10px;overflow:auto;height:100%}.overlay-card.card .overlay-card-content.transparent-bg{background:none}.overlay-card.card .list-group{color:var(--phoenix-text-color-secondary);background:var(--phoenix-background-color-secondary);max-height:40vh;overflow:auto}.overlay-card.card .list-group .list-group-item{background-color:var(--phoenix-background-color-secondary);border-color:var(--phoenix-border)}.overlay-card.card .resize-handle{width:1rem;height:1rem;cursor:nwse-resize;position:absolute}.overlay-card.card .resize-handle.corner{border-right:.2rem solid var(--phoenix-text-color);border-bottom:.2rem solid var(--phoenix-text-color)}\n"]
-                },] }
-    ];
-    OverlayComponent.propDecorators = {
-        overlayTitle: [{ type: i0.Input }],
-        active: [{ type: i0.Input }],
-        icon: [{ type: i0.Input }],
-        resizable: [{ type: i0.Input }],
-        transparentBody: [{ type: i0.Input }],
-        overlayCard: [{ type: i0.ViewChild, args: ['overlayCard',] }],
-        resizeHandleCorner: [{ type: i0.ViewChild, args: ['resizeHandleCorner',] }]
-    };
-
-    var OverlayViewWindowComponent = /** @class */ (function () {
-        function OverlayViewWindowComponent(eventDisplay) {
-            this.eventDisplay = eventDisplay;
-            this.showOverlay = true;
-            this.transparentBody = false;
-            this.orthographicView = false;
-            this.overlayViewFixed = false;
-        }
-        OverlayViewWindowComponent.prototype.ngAfterViewInit = function () {
-            var canvas = this.initializeCanvas(this.overlayWindow.nativeElement);
-            this.eventDisplay.setOverlayRenderer(canvas);
-        };
-        OverlayViewWindowComponent.prototype.initializeCanvas = function (canvas) {
-            var width = window.innerWidth / 2.5;
-            var height = window.innerHeight / 2.5;
-            canvas.width = width;
-            canvas.height = height;
-            canvas.style.width = width.toString() + ' px';
-            canvas.style.height = height.toString() + ' px';
-            return canvas;
-        };
-        OverlayViewWindowComponent.prototype.switchOverlayView = function () {
-            this.orthographicView = !this.orthographicView;
-            this.eventDisplay
-                .getUIManager()
-                .toggleOrthographicView(this.orthographicView);
-        };
-        OverlayViewWindowComponent.prototype.fixOverlayView = function () {
-            this.overlayViewFixed = !this.overlayViewFixed;
-            this.eventDisplay.fixOverlayView(this.overlayViewFixed);
-        };
-        OverlayViewWindowComponent.prototype.toggleBgTransparency = function () {
-            this.transparentBody = !this.transparentBody;
-        };
-        return OverlayViewWindowComponent;
-    }());
-    OverlayViewWindowComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-overlay-view-window',
-                    template: "<app-overlay\n  overlayTitle=\"Overlay View\"\n  icon=\"overlay\"\n  [resizable]=\"true\"\n  [transparentBody]=\"transparentBody\"\n  [active]=\"showOverlay\"\n>\n  <div class=\"overlay-view-wrapper\">\n    <canvas #overlayWindow id=\"overlay-canvas\" [hidden]=\"!showOverlay\">\n    </canvas>\n    <div class=\"overlay-view-controls position-absolute d-flex flex-row\">\n      <app-menu-toggle\n        class=\"overlay-view-control\"\n        icon=\"transparent\"\n        matTooltip=\"Toggle background transparency\"\n        (click)=\"toggleBgTransparency()\"\n      >\n      </app-menu-toggle>\n      <app-menu-toggle\n        class=\"overlay-view-control\"\n        icon=\"move-lock\"\n        [matTooltip]=\"(overlayViewFixed ? 'Restore' : 'Fix') + ' overlay view'\"\n        [active]=\"overlayViewFixed\"\n        (click)=\"fixOverlayView()\"\n      >\n      </app-menu-toggle>\n      <app-menu-toggle\n        class=\"overlay-view-control\"\n        [icon]=\"orthographicView ? 'orthographic' : 'perspective'\"\n        [matTooltip]=\"\n          'Switch to ' +\n          (orthographicView ? 'orthographic' : 'perspective') +\n          ' view'\n        \"\n        (click)=\"switchOverlayView()\"\n      >\n      </app-menu-toggle>\n    </div>\n  </div>\n</app-overlay>\n",
-                    styles: ["#overlay-canvas{background-color:#0000001a;width:100%}.overlay-view-controls{bottom:1em;right:1em;opacity:0;transition:opacity .2s}.overlay-view-controls .overlay-view-control{background:var(--phoenix-background-color-secondary);box-shadow:var(--phoenix-box-shadow);overflow:hidden;width:2.5rem;height:2.5rem;border-radius:50%;display:flex;justify-content:center;align-items:center}.overlay-view-wrapper:hover .overlay-view-controls{opacity:1;transition:opacity .2s}\n"]
-                },] }
-    ];
-    OverlayViewWindowComponent.ctorParameters = function () { return [
-        { type: EventDisplayService }
-    ]; };
-    OverlayViewWindowComponent.propDecorators = {
-        showOverlay: [{ type: i0.Input }],
-        overlayWindow: [{ type: i0.ViewChild, args: ['overlayWindow',] }]
-    };
-
-    var OverlayViewComponent = /** @class */ (function () {
-        function OverlayViewComponent(overlay) {
-            this.overlay = overlay;
-            this.showOverlay = false;
-        }
-        OverlayViewComponent.prototype.ngOnInit = function () {
-            var overlayRef = this.overlay.create();
-            var overlayPortal = new portal.ComponentPortal(OverlayViewWindowComponent);
-            this.overlayWindow = overlayRef.attach(overlayPortal);
-            this.overlayWindow.instance.showOverlay = this.showOverlay;
-        };
-        OverlayViewComponent.prototype.ngOnDestroy = function () {
-            this.overlayWindow.destroy();
-        };
-        OverlayViewComponent.prototype.toggleOverlay = function () {
-            this.showOverlay = !this.showOverlay;
-            this.overlayWindow.instance.showOverlay = this.showOverlay;
-        };
-        return OverlayViewComponent;
-    }());
-    OverlayViewComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-overlay-view',
-                    template: "<app-menu-toggle\n  tooltip=\"Overlay view\"\n  icon=\"overlay\"\n  [active]=\"showOverlay\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n",
-                    styles: [""]
-                },] }
-    ];
-    OverlayViewComponent.ctorParameters = function () { return [
-        { type: overlay.Overlay }
-    ]; };
-
-    var TreeMenuComponent = /** @class */ (function () {
-        function TreeMenuComponent() {
-            this.rootNode = {
-                name: 'Atlas Detector',
-                geometryId: 'AtlasDetector',
-                children: [
-                    {
-                        name: 'Magnet systems',
-                        geometryId: 'MagnetSys',
-                        children: [
-                            {
-                                name: 'Toroids',
-                                geometryId: 'Toroids',
-                            },
-                        ],
-                    },
-                    {
-                        name: 'Calorimeters',
-                        geometryId: 'CaloSys',
-                        children: [
-                            {
-                                name: 'LAr Barrel',
-                                geometryId: 'LAr Barrel',
-                            },
-                            {
-                                name: 'LAr EC1',
-                                geometryId: 'LAr EC1',
-                            },
-                            {
-                                name: 'LAr EC2',
-                                geometryId: 'LAr EC2',
-                            },
-                            {
-                                name: 'Tile Cal',
-                                geometryId: 'Tile Cal',
-                            },
-                        ],
-                    },
-                    {
-                        name: 'Inner detector',
-                        geometryId: 'InDetSys',
-                        children: [
-                            {
-                                name: 'Pixel',
-                                geometryId: 'Pixel',
-                            },
-                            {
-                                name: 'SCT',
-                                geometryId: 'SCT',
-                            },
-                            {
-                                name: 'TRT',
-                                geometryId: 'TRT',
-                            },
-                        ],
-                    },
-                ],
-            };
-        }
-        TreeMenuComponent.prototype.ngOnInit = function () { };
-        return TreeMenuComponent;
-    }());
-    TreeMenuComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-tree-menu',
-                    template: "<div class=\"tree-wrapper\">\n  <div class=\"tree-menu\">\n    <app-tree-menu-item [node]=\"rootNode\"></app-tree-menu-item>\n  </div>\n</div>\n",
-                    styles: [".tree-wrapper{position:absolute;top:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;align-content:center}.tree-menu{display:flex;flex-direction:column;justify-content:center;align-items:center;align-content:center;max-height:70vh;overflow-y:scroll}.example-tree-invisible{display:none}.example-tree ul,.example-tree li{margin-top:0;margin-bottom:0;list-style-type:none}\n"]
-                },] }
-    ];
-    TreeMenuComponent.ctorParameters = function () { return []; };
-
-    var TreeMenuItemComponent = /** @class */ (function () {
-        function TreeMenuItemComponent(eventDisplay) {
-            this.eventDisplay = eventDisplay;
-            this.isExpanded = false;
-            this.visible = true;
-        }
-        TreeMenuItemComponent.prototype.toggleVisibility = function (visible) {
-            console.log("hi! it's " + this.node.name);
-            this.eventDisplay
-                .getUIManager()
-                .geometryVisibility(this.node.geometryId, visible);
-            this.visible = visible;
-            this.children.forEach(function (child) { return child.toggleVisibility(visible); });
-        };
-        return TreeMenuItemComponent;
-    }());
-    TreeMenuItemComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-tree-menu-item',
-                    template: "<ng-container *ngIf=\"node\">\n  <div class=\"header\" [ngClass]=\"{ visible: visible }\">\n    <button\n      *ngIf=\"node.children\"\n      mat-icon-button\n      matTreeNodeToggle\n      (click)=\"isExpanded = !isExpanded\"\n    >\n      <mat-icon class=\"mat-icon-rtl-mirror\">\n        {{ isExpanded ? 'expand_more' : 'chevron_right' }}\n      </mat-icon>\n    </button>\n    <div (click)=\"toggleVisibility(!visible)\" class=\"node-name\">\n      {{ node.name }}\n    </div>\n  </div>\n  <ul [hidden]=\"!isExpanded\" hid>\n    <div class=\"children\">\n      <li *ngFor=\"let node of node.children\">\n        <app-tree-menu-item [node]=\"node\"></app-tree-menu-item>\n      </li>\n    </div>\n  </ul>\n</ng-container>\n",
-                    styles: [".header{cursor:pointer;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;flex-direction:row;align-items:center}.header .node-name,.header .mat-icon-rtl-mirror{color:var(--phoenix-text-color-secondary)}.header.visible .node-name,.header.visible .mat-icon-rtl-mirror{color:var(--phoenix-accent)}.children li{list-style-type:none}\n"]
-                },] }
-    ];
-    TreeMenuItemComponent.ctorParameters = function () { return [
-        { type: EventDisplayService }
-    ]; };
-    TreeMenuItemComponent.propDecorators = {
-        children: [{ type: i0.ViewChildren, args: [TreeMenuItemComponent,] }],
-        node: [{ type: i0.Input }]
-    };
-
-    var ViewOptionsComponent = /** @class */ (function () {
-        function ViewOptionsComponent(eventDisplay) {
-            this.eventDisplay = eventDisplay;
-        }
-        ViewOptionsComponent.prototype.ngOnInit = function () {
-            this.views = this.eventDisplay.getUIManager().getPresetViews();
-        };
-        ViewOptionsComponent.prototype.displayView = function ($event, view) {
-            $event.stopPropagation();
-            this.eventDisplay.getUIManager().displayView(view);
-        };
-        ViewOptionsComponent.prototype.setAxis = function (change) {
-            var value = change.checked;
-            this.eventDisplay.getUIManager().setShowAxis(value);
-        };
-        ViewOptionsComponent.prototype.setGrid = function (change) {
-            var value = change.checked;
-            this.eventDisplay.getUIManager().setShowGrid(value);
-        };
-        return ViewOptionsComponent;
-    }());
-    ViewOptionsComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-view-options',
-                    template: "<mat-menu #viewOptions>\n  <button\n    mat-menu-item\n    (click)=\"\n      $event.stopPropagation();\n      showGridCheckbox._inputElement.nativeElement.click()\n    \"\n  >\n    <mat-checkbox\n      #showGridCheckbox\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"setGrid($event)\"\n      >Show Grid\n    </mat-checkbox>\n  </button>\n  <button\n    mat-menu-item\n    (click)=\"\n      $event.stopPropagation();\n      showAxisCheckbox._inputElement.nativeElement.click()\n    \"\n  >\n    <mat-checkbox\n      #showAxisCheckbox\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"setAxis($event)\"\n      >Show axis\n    </mat-checkbox>\n  </button>\n  <button\n    mat-menu-item\n    *ngFor=\"let view of views\"\n    (click)=\"displayView($event, view)\"\n  >\n    <svg class=\"view-icon\" *ngIf=\"view.icon\">\n      <use attr.href=\"assets/icons/{{ view.icon }}.svg#{{ view.icon }}\"></use>\n    </svg>\n    {{ view.name }}\n  </button>\n</mat-menu>\n\n<app-menu-toggle\n  [matMenuTriggerFor]=\"viewOptions\"\n  tooltip=\"View options\"\n  icon=\"views\"\n  [active]=\"false\"\n>\n</app-menu-toggle>\n",
-                    styles: [".view-icon{width:1.2rem;height:1.2rem;margin-right:.5rem}\n"]
-                },] }
-    ];
-    ViewOptionsComponent.ctorParameters = function () { return [
-        { type: EventDisplayService }
-    ]; };
-
-    var VrToggleComponent = /** @class */ (function () {
-        function VrToggleComponent(eventDisplay) {
-            var _this = this;
-            var _a, _b, _c;
-            this.eventDisplay = eventDisplay;
-            this.vrSupported = false;
-            this.vrActive = false;
-            // NOTE: WebXR needs secure HTTPS context
-            // Query for permissions of XR before using it (not supported by browsers yet). See https://developer.mozilla.org/en-US/docs/Web/API/Permissions/query
-            (_c = (_b = (_a = navigator) === null || _a === void 0 ? void 0 : _a.xr) === null || _b === void 0 ? void 0 : _b.isSessionSupported) === null || _c === void 0 ? void 0 : _c.call(_b, phoenixEventDisplay.VRManager.SESSION_TYPE).then(function (supported) {
-                if (supported) {
-                    _this.vrSupported = true;
-                }
-            }).catch(function (err) { return console.warn('Error in VR', err); });
-        }
-        VrToggleComponent.prototype.toggleVr = function () {
-            var _this = this;
-            // If toggling VR on
-            if (!this.vrActive) {
-                this.eventDisplay.initXR(phoenixEventDisplay.XRSessionType.VR, function () {
-                    _this.vrActive = false;
-                    // Disable renderer XR and remove animation loop
-                    _this.eventDisplay.endXR(phoenixEventDisplay.XRSessionType.VR);
-                });
-                this.vrActive = true;
-            }
-            else {
-                this.eventDisplay.endXR(phoenixEventDisplay.XRSessionType.VR);
-                this.vrActive = false;
-            }
-        };
-        return VrToggleComponent;
-    }());
-    VrToggleComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-vr-toggle',
-                    template: "<app-menu-toggle\n  [disabled]=\"!vrSupported\"\n  [active]=\"vrActive\"\n  icon=\"vr\"\n  (click)=\"vrSupported && toggleVr()\"\n  [tooltip]=\"\n    vrSupported ? (vrActive ? 'Exit VR' : 'Enter VR') : 'VR not supported'\n  \"\n>\n</app-menu-toggle>\n",
-                    styles: [""]
-                },] }
-    ];
-    VrToggleComponent.ctorParameters = function () { return [
-        { type: EventDisplayService }
-    ]; };
-
-    var ArToggleComponent = /** @class */ (function () {
-        function ArToggleComponent(eventDisplay) {
-            var _this = this;
-            var _a, _b;
-            this.eventDisplay = eventDisplay;
-            this.arSupported = false;
-            this.arActive = false;
-            // NOTE: WebXR needs secure HTTPS context
-            // Query for permissions of XR before using it (not supported by browsers yet). See https://developer.mozilla.org/en-US/docs/Web/API/Permissions/query
-            (_b = (_a = navigator.xr) === null || _a === void 0 ? void 0 : _a.isSessionSupported) === null || _b === void 0 ? void 0 : _b.call(_a, phoenixEventDisplay.ARManager.SESSION_TYPE).then(function (supported) {
-                if (supported) {
-                    _this.arSupported = true;
-                }
-            }).catch(function (err) { return console.warn('Error in AR', err); });
-        }
-        ArToggleComponent.prototype.toggleAr = function (enableDomOverlay) {
-            var _this = this;
-            if (enableDomOverlay === void 0) { enableDomOverlay = true; }
-            phoenixEventDisplay.ARManager.enableDomOverlay = enableDomOverlay;
-            // If toggling AR on
-            if (!this.arActive) {
-                this.eventDisplay.initXR(phoenixEventDisplay.XRSessionType.AR, function () {
-                    _this.arActive = false;
-                    // Disable renderer XR and remove animation loop
-                    _this.eventDisplay.endXR(phoenixEventDisplay.XRSessionType.AR);
-                });
-                this.arActive = true;
-            }
-            else {
-                this.eventDisplay.endXR(phoenixEventDisplay.XRSessionType.AR);
-                this.arActive = false;
-            }
-        };
-        return ArToggleComponent;
-    }());
-    ArToggleComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-ar-toggle',
-                    template: "<mat-menu #arToggleOptions>\n  <ng-container *ngIf=\"arSupported\">\n    <button mat-menu-item (click)=\"toggleAr(true)\">AR with overlays</button>\n    <button mat-menu-item (click)=\"toggleAr(false)\">AR without overlays</button>\n  </ng-container>\n  <button *ngIf=\"!arSupported\" mat-menu-item disabled>AR not supported</button>\n</mat-menu>\n\n<app-menu-toggle\n  [matMenuTriggerFor]=\"arToggleOptions\"\n  (click)=\"arSupported && (arActive ? toggleAr() : null)\"\n  [disabled]=\"!arSupported\"\n  [active]=\"arActive\"\n  icon=\"ar\"\n  [tooltip]=\"\n    arSupported ? (arActive ? 'Exit AR' : 'Enter AR') : 'AR not supported'\n  \"\n>\n</app-menu-toggle>\n",
-                    styles: [""]
-                },] }
-    ];
-    ArToggleComponent.ctorParameters = function () { return [
-        { type: EventDisplayService }
-    ]; };
-
-    /**
-     * Component for adding zoom controls for the main and overlay cameras.
-     */
-    var ZoomControlsComponent = /** @class */ (function () {
-        function ZoomControlsComponent(eventDisplay) {
-            this.eventDisplay = eventDisplay;
-            /** Factor to zoom by. */
-            this.zoomFactor = 1.1;
-            /** The speed and time of zoom. */
-            this.zoomTime = 200;
-        }
-        /**
-         * Zoom all the cameras by a specific zoom factor.
-         * The factor may either be greater (zoom in) or smaller (zoom out) than 1.
-         * @param zoomFactor The factor to zoom by.
-         */
-        ZoomControlsComponent.prototype.zoomTo = function (zoomFactor) {
-            var _this = this;
-            this.zoomTime =
-                this.zoomTime > 30 ? Math.floor(this.zoomTime / 1.1) : this.zoomTime;
-            this.eventDisplay.zoomTo(zoomFactor, this.zoomTime);
-            this.zoomTimeout = setTimeout(function () {
-                _this.zoomTo(zoomFactor);
-            }, this.zoomTime);
-        };
-        /**
-         * Zoom the camera in.
-         * @param leftClick Whether the mouse click is left or not.
-         */
-        ZoomControlsComponent.prototype.zoomIn = function (leftClick) {
-            if (leftClick) {
-                this.zoomTo(1 / this.zoomFactor);
-            }
-        };
-        /**
-         * Zoom the camera out.
-         * @param leftClick Whether the mouse click is left or not.s
-         */
-        ZoomControlsComponent.prototype.zoomOut = function (leftClick) {
-            if (leftClick) {
-                this.zoomTo(this.zoomFactor);
-            }
-        };
-        /**
-         * Reset the zoom time which decreases upon hold and clear the zoom timeout.
-         */
-        ZoomControlsComponent.prototype.clearZoom = function () {
-            this.zoomTime = 200;
-            clearTimeout(this.zoomTimeout);
-        };
-        return ZoomControlsComponent;
-    }());
-    ZoomControlsComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-zoom-controls',
-                    template: "<div class=\"d-flex\">\n  <app-menu-toggle\n    tooltip=\"Zoom out (hold)\"\n    icon=\"zoom-out\"\n    [active]=\"false\"\n    (click)=\"zoomOut(true); clearZoom()\"\n    (touchstart)=\"zoomOut(true)\"\n    (mousedown)=\"zoomOut($event.button === 0)\"\n    (mouseup)=\"clearZoom()\"\n    (mouseleave)=\"clearZoom()\"\n    (touchend)=\"clearZoom()\"\n    (touchcancel)=\"clearZoom()\"\n    (touchmove)=\"clearZoom()\"\n  >\n  </app-menu-toggle>\n  <app-menu-toggle\n    tooltip=\"Zoom in (hold)\"\n    icon=\"zoom-in\"\n    [active]=\"false\"\n    (click)=\"zoomIn(true); clearZoom()\"\n    (touchstart)=\"zoomIn(true)\"\n    (mousedown)=\"zoomIn($event.button === 0)\"\n    (mouseup)=\"clearZoom()\"\n    (mouseleave)=\"clearZoom()\"\n    (touchend)=\"clearZoom()\"\n    (touchcancel)=\"clearZoom()\"\n    (touchmove)=\"clearZoom()\"\n  >\n  </app-menu-toggle>\n</div>\n",
-                    styles: [""]
-                },] }
-    ];
-    ZoomControlsComponent.ctorParameters = function () { return [
-        { type: EventDisplayService }
-    ]; };
-
-    var SSModeComponent = /** @class */ (function () {
-        function SSModeComponent() {
-            this.ssMode = false;
-            this.onDocumentClick = function () {
-                var _a;
-                (_a = document.exitFullscreen) === null || _a === void 0 ? void 0 : _a.call(document);
-            };
-        }
-        SSModeComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            document.onfullscreenchange = function () {
-                if (!document.fullscreenElement) {
-                    _this.toggleSSMode();
-                }
-            };
-        };
-        SSModeComponent.prototype.toggleSSMode = function () {
-            var _this = this;
-            var _a, _b;
-            this.ssMode = !this.ssMode;
-            document.body.classList.toggle('ss-mode');
-            if (this.ssMode) {
-                // WORKAROUND - Adding the event listener directly somehow calls it on the first click
-                setTimeout(function () {
-                    document.addEventListener('click', _this.onDocumentClick);
-                    document.addEventListener('touchstart', _this.onDocumentClick);
-                }, 1);
-                (_b = (_a = document.documentElement).requestFullscreen) === null || _b === void 0 ? void 0 : _b.call(_a);
-            }
-            else {
-                document.removeEventListener('click', this.onDocumentClick);
-                document.removeEventListener('touchstart', this.onDocumentClick);
-            }
-        };
-        return SSModeComponent;
-    }());
-    SSModeComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-ss-mode',
-                    template: "<app-menu-toggle\n  tooltip=\"Screenshot mode\"\n  [active]=\"ssMode\"\n  icon=\"ss-mode\"\n  (click)=\"toggleSSMode()\"\n>\n</app-menu-toggle>\n",
-                    encapsulation: i0.ViewEncapsulation.None,
-                    styles: ["app-ui-menu #uiMenu,app-phoenix-menu #phoenixMenu,app-nav #mainLogo,#statsElement{visibility:visible;opacity:1;transition:opacity .4s}.ss-mode app-ui-menu #uiMenu,.ss-mode app-phoenix-menu #phoenixMenu,.ss-mode app-nav #mainLogo,.ss-mode #statsElement{visibility:hidden;opacity:0}\n"]
-                },] }
-    ];
-
-    var PerformanceToggleComponent = /** @class */ (function () {
-        function PerformanceToggleComponent(eventDisplay) {
-            this.eventDisplay = eventDisplay;
-            this.performanceMode = false;
-        }
-        PerformanceToggleComponent.prototype.togglePerformance = function () {
-            this.performanceMode = !this.performanceMode;
-            this.eventDisplay.getThreeManager().setAntialiasing(!this.performanceMode);
-        };
-        return PerformanceToggleComponent;
-    }());
-    PerformanceToggleComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-performance-toggle',
-                    template: "<app-menu-toggle\n  tooltip=\"Performance mode\"\n  [active]=\"performanceMode\"\n  icon=\"performance\"\n  (click)=\"togglePerformance()\"\n>\n</app-menu-toggle>\n",
-                    styles: [""]
-                },] }
-    ];
-    PerformanceToggleComponent.ctorParameters = function () { return [
-        { type: EventDisplayService }
-    ]; };
-
-    var UiMenuComponent = /** @class */ (function () {
-        function UiMenuComponent() {
-            this.eventDataImportOptions = Object.values(exports.EventDataFormat);
-            this.animationPresets = defaultAnimationPresets;
-            this.hideUIMenu = false;
-        }
-        return UiMenuComponent;
-    }());
-    UiMenuComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-ui-menu',
-                    template: "<div id=\"uiMenu\">\n  <button\n    id=\"hide-ui-menu\"\n    [matTooltip]=\"hideUIMenu ? 'Show toolbar' : 'Hide toolbar'\"\n    matTooltipPosition=\"above\"\n    (click)=\"hideUIMenu = !hideUIMenu\"\n    [ngClass]=\"{ 'ui-menu-hidden': hideUIMenu }\"\n  >\n    <svg>\n      <use href=\"assets/icons/expand.svg#expand\"></use>\n    </svg>\n  </button>\n  <div id=\"optionsPanel\" [hidden]=\"hideUIMenu\">\n    <!-- Event selector -->\n    <app-event-selector></app-event-selector>\n\n    <!-- Zoom in and zoom out controls -->\n    <app-zoom-controls></app-zoom-controls>\n\n    <app-view-options></app-view-options>\n\n    <app-auto-rotate></app-auto-rotate>\n\n    <!-- Dark theme toggle -->\n    <app-dark-theme></app-dark-theme>\n\n    <!-- Toggle for clipping geometries -->\n    <app-object-clipping></app-object-clipping>\n\n    <!-- Main view toggle -->\n    <app-main-view-toggle></app-main-view-toggle>\n\n    <!-- Toggle for overlay panel -->\n    <app-overlay-view></app-overlay-view>\n\n    <!-- Toggle for selected object panel -->\n    <app-object-selection></app-object-selection>\n\n    <!-- Info panel -->\n    <app-info-panel></app-info-panel>\n\n    <!-- Toggle for animating the event data -->\n    <app-animate-event></app-animate-event>\n\n    <!-- Toggle for animating camera through event -->\n    <app-animate-camera\n      [animationPresets]=\"animationPresets\"\n    ></app-animate-camera>\n\n    <!-- Toggle for collections info -->\n    <app-collections-info></app-collections-info>\n\n    <!-- Toggle for performance -->\n    <app-performance-toggle></app-performance-toggle>\n\n    <!-- Toggle for VR -->\n    <app-vr-toggle></app-vr-toggle>\n\n    <!-- Toggle for AR -->\n    <app-ar-toggle></app-ar-toggle>\n\n    <!-- Toggle for screenshot mode -->\n    <app-ss-mode></app-ss-mode>\n\n    <!-- Toggle for loading geometries modal-->\n    <app-io-options\n      [eventDataImportOptions]=\"eventDataImportOptions\"\n    ></app-io-options>\n\n    <!-- Toggle for shareable link constructor modal-->\n    <app-share-link></app-share-link>\n\n    <!-- Extra options -->\n    <ng-content></ng-content>\n  </div>\n</div>\n",
-                    styles: ["#uiMenu{position:absolute;bottom:1rem;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}#optionsPanel{display:flex;align-items:center;background:var(--phoenix-background-color-secondary);border:1px solid var(--phoenix-background-color-tertiary);box-shadow:var(--phoenix-box-shadow);border-radius:30px;max-width:95%;padding:.3rem 1rem;overflow-x:scroll;z-index:90}#hide-ui-menu{background:var(--phoenix-background-color-secondary);height:1.2rem;width:3rem;border:1px solid var(--phoenix-border);border-bottom:none;box-shadow:var(--phoenix-box-shadow);border-top-left-radius:15px;border-top-right-radius:15px;padding:3px}#hide-ui-menu svg{height:100%;width:100%;vertical-align:top;transition:all .3s}#hide-ui-menu.ui-menu-hidden svg{transform:scaleY(-1);transition:all .3s}\n"]
-                },] }
-    ];
-    UiMenuComponent.propDecorators = {
-        eventDataImportOptions: [{ type: i0.Input }],
-        animationPresets: [{ type: i0.Input }]
-    };
-
-    var ShareLinkDialogComponent = /** @class */ (function () {
-        function ShareLinkDialogComponent(dialogRef) {
-            this.dialogRef = dialogRef;
-            this.urlOptions = Object.assign({}, phoenixEventDisplay.phoenixURLOptions);
-            var locationHref = window.location.href;
-            var lastIndex = locationHref.lastIndexOf('?') === -1
-                ? locationHref.length
-                : locationHref.lastIndexOf('?');
-            this.baseLink = locationHref.slice(0, lastIndex);
-            this.shareLink = this.baseLink;
-            this.embedLink = this.getEmbedLink();
-        }
-        ShareLinkDialogComponent.prototype.onClose = function () {
-            this.dialogRef.close();
-        };
-        ShareLinkDialogComponent.prototype.getEmbedLink = function (urlParametersString) {
-            if (urlParametersString === void 0) { urlParametersString = ''; }
-            return "<iframe src=\"" + this.baseLink + "?embed=true" + (urlParametersString ? '&' : '') + urlParametersString + "\"></iframe>";
-        };
-        ShareLinkDialogComponent.prototype.setOptionValue = function (option, value) {
-            this.urlOptions[option] = value;
-            this.onOptionsChange();
-        };
-        ShareLinkDialogComponent.prototype.onOptionsChange = function () {
-            var _this = this;
-            var urlParametersString = Object.getOwnPropertyNames(this.urlOptions)
-                .reduce(function (filteredOptions, option) {
-                if (_this.urlOptions[option]) {
-                    filteredOptions.push(option + "=" + encodeURI(_this.urlOptions[option]));
-                }
-                return filteredOptions;
-            }, [])
-                .join('&');
-            this.shareLink =
-                this.baseLink + (urlParametersString ? '?' : '') + urlParametersString;
-            this.embedLink = this.getEmbedLink(urlParametersString);
-        };
-        ShareLinkDialogComponent.prototype.copyText = function (text, element) {
-            var inputElement = document.createElement('input');
-            document.body.appendChild(inputElement);
-            inputElement.value = text;
-            inputElement.select();
-            document.execCommand('copy');
-            document.body.removeChild(inputElement);
-            element.focus();
-            // Set text on copying
-            element.innerText = 'COPIED';
-            setTimeout(function () {
-                element.innerText = 'COPY';
-            }, 2000);
-        };
-        return ShareLinkDialogComponent;
-    }());
-    ShareLinkDialogComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-share-link-dialog',
-                    template: "<div class=\"dialog\">\n  <h1 mat-dialog-title>Create shareable link</h1>\n  <div mat-dialog-content class=\"dialog-content\">\n    <h5>URL options</h5>\n    <div class=\"form-group mt-2\">\n      <label for=\"eventDataFile\">Event data file (URL or path)</label>\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        id=\"eventDataFile\"\n        placeholder=\"assets/files/event_data/atlaseventdump2.json\"\n        [value]=\"urlOptions.file\"\n        (input)=\"setOptionValue('file', $event.target.value)\"\n      />\n    </div>\n    <div class=\"form-group\">\n      <label for=\"eventDataType\">Event data type</label>\n      <select\n        class=\"form-control\"\n        id=\"eventDataType\"\n        (input)=\"setOptionValue('type', $event.target.value)\"\n      >\n        <option selected value=\"\">Select</option>\n        <option value=\"jivexml\">JiveXML</option>\n        <option value=\"json\">JSON</option>\n      </select>\n    </div>\n    <div class=\"form-group\">\n      <label for=\"configuration\">Configuration (URL or path)</label>\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        id=\"configuration\"\n        placeholder=\"assets/files/config/phoenix-config.json\"\n        [value]=\"urlOptions.config\"\n        (input)=\"setOptionValue('config', $event.target.value)\"\n      />\n    </div>\n    <div class=\"form-group\">\n      <mat-checkbox\n        [checked]=\"urlOptions.hideWidgets\"\n        (change)=\"setOptionValue('hideWidgets', $event.checked)\"\n      >\n        Hide all widgets\n      </mat-checkbox>\n    </div>\n\n    <h5>Share</h5>\n    <div class=\"share-box my-2\">\n      <span>{{ shareLink }}</span>\n      <button\n        class=\"share-box-copy\"\n        (click)=\"copyText(shareLink, $event.target)\"\n      >\n        COPY\n      </button>\n    </div>\n    <h5>Embed</h5>\n    <div class=\"share-box my-2\">\n      <span>{{ embedLink }}</span>\n      <button\n        class=\"share-box-copy\"\n        (click)=\"copyText(embedLink, $event.target)\"\n      >\n        COPY\n      </button>\n    </div>\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button (click)=\"onClose()\" cdkFocusInitial>Close</button>\n  </div>\n</div>\n",
-                    styles: [".share-box{width:30rem;max-width:100%;position:relative;background:var(--phoenix-background-color-tertiary);border:1px solid var(--phoenix-border);border-radius:.5rem;padding:1.25rem;word-wrap:break-word}.share-box .share-box-copy{position:absolute;top:-1px;right:-1px;background:transparent;color:inherit;cursor:pointer;padding:.25rem .5rem;font-size:.75rem;border:1px solid var(--phoenix-border);border-radius:.5rem}.share-box .share-box-copy:hover{background:var(--phoenix-border)}\n"]
-                },] }
-    ];
-    ShareLinkDialogComponent.ctorParameters = function () { return [
-        { type: dialog.MatDialogRef }
-    ]; };
-
-    var ShareLinkComponent = /** @class */ (function () {
-        function ShareLinkComponent(dialog) {
-            this.dialog = dialog;
-        }
-        ShareLinkComponent.prototype.openShareLinkDialog = function () {
-            this.dialog.open(ShareLinkDialogComponent);
-        };
-        return ShareLinkComponent;
-    }());
-    ShareLinkComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-share-link',
-                    template: "<app-menu-toggle\n  tooltip=\"Create shareable link\"\n  icon=\"share\"\n  [active]=\"false\"\n  (click)=\"openShareLinkDialog()\"\n>\n</app-menu-toggle>\n",
-                    styles: [""]
-                },] }
-    ];
-    ShareLinkComponent.ctorParameters = function () { return [
-        { type: dialog.MatDialog }
-    ]; };
-
-    var LoaderComponent = /** @class */ (function () {
-        function LoaderComponent() {
-            this.loaded = false;
-        }
-        return LoaderComponent;
-    }());
-    LoaderComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-loader',
-                    template: "<div\n  class=\"\n    loader-wrapper\n    d-flex\n    position-absolute\n    flex-column\n    justify-content-center\n    align-items-center\n    w-100\n    h-100\n    text-center\n  \"\n  [ngClass]=\"{ 'load-complete': loaded }\"\n>\n  <img src=\"assets/images/logo-small.svg\" alt=\"Loader\" />\n  <p class=\"mt-5\">\n    Loading...<br />\n    <small class=\"text-muted\">(This may take a while)</small>\n  </p>\n  <div class=\"loading-bar\" *ngIf=\"progress !== undefined\">\n    <span [style]=\"{ width: progress + '%' }\"></span>\n  </div>\n</div>\n",
-                    styles: [".loader-wrapper{background:var(--phoenix-background-color);z-index:9998}.loader-wrapper.load-complete{display:none!important}.loader-wrapper img{width:5rem;height:5rem;-webkit-animation:loader 2s infinite;animation:loader 2s infinite}.loader-wrapper p{color:var(--phoenix-text-color)}.loader-wrapper .loading-bar{width:15rem;max-width:90%;height:.5rem;background:var(--phoenix-background-color-tertiary);border-radius:2.5rem;overflow:hidden}.loader-wrapper .loading-bar span{display:block;height:100%;border-radius:2.5rem;background:linear-gradient(to right,var(--phoenix-primary),var(--phoenix-secondary));transition:all .5s}@-webkit-keyframes loader{0%,to{transform:scale(.1) rotate(0)}95%{transform:scale(1) rotate(15deg)}}@keyframes loader{0%,to{transform:scale(.1) rotate(0)}95%{transform:scale(1) rotate(15deg)}}\n"]
-                },] }
-    ];
-    LoaderComponent.propDecorators = {
-        loaded: [{ type: i0.Input }],
-        progress: [{ type: i0.Input }]
-    };
-
-    /**
-     * Pipe for transforming selected object attributes to a better format.
-     */
-    var AttributePipe = /** @class */ (function () {
-        function AttributePipe() {
-        }
-        /**
-         * Transform the attribute to a better presentable format.
-         * @param value Value to be transformed.
-         * @param args Additional arguments.
-         * @returns The transformed value.
-         */
-        AttributePipe.prototype.transform = function (value, args) {
-            var transformedValue = '';
-            if (Array.isArray(value)) {
-                transformedValue += '\n';
-                value.forEach(function (v) { return (transformedValue += v + '\n'); });
-            }
-            else {
-                transformedValue = value.toString();
-            }
-            return transformedValue;
-        };
-        return AttributePipe;
-    }());
-    AttributePipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'attributePipe',
-                },] }
-    ];
-
-    var EmbedMenuComponent = /** @class */ (function () {
-        function EmbedMenuComponent() {
-        }
-        return EmbedMenuComponent;
-    }());
-    EmbedMenuComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-embed-menu',
-                    template: "<div id=\"embedMenu\">\n  <div id=\"embedMenuInner\">\n    <app-dark-theme></app-dark-theme>\n    <app-auto-rotate></app-auto-rotate>\n    <app-main-view-toggle></app-main-view-toggle>\n    <app-animate-event></app-animate-event>\n    <app-animate-camera></app-animate-camera>\n    <app-experiment-link></app-experiment-link>\n  </div>\n</div>\n",
-                    styles: ["#embedMenu{display:none}#embedMenu #embedMenuInner{display:flex;position:absolute;left:1rem;bottom:1rem;background:var(--phoenix-background-color-secondary);border:1px solid var(--phoenix-background-color-tertiary);box-shadow:var(--phoenix-box-shadow);border-radius:30px;padding:.25rem 0}\n"]
-                },] }
-    ];
-
-    var ExperimentLinkComponent = /** @class */ (function () {
-        function ExperimentLinkComponent() {
-        }
-        ExperimentLinkComponent.prototype.ngOnInit = function () {
-            this.experimentLink = window.location.href.split('?')[0];
-        };
-        ExperimentLinkComponent.prototype.goToExperiment = function () {
-            window.open(this.experimentLink, '_blank');
-        };
-        return ExperimentLinkComponent;
-    }());
-    ExperimentLinkComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-experiment-link',
-                    template: "<app-menu-toggle\n  tooltip=\"See full event display\"\n  icon=\"link\"\n  (click)=\"goToExperiment()\"\n></app-menu-toggle>\n",
-                    styles: [""]
-                },] }
-    ];
-
-    var PHOENIX_COMPONENTS = [
-        NavComponent,
-        UiMenuComponent,
-        CollectionsInfoComponent,
-        MenuToggleComponent,
-        CollectionsInfoOverlayComponent,
-        IoOptionsComponent,
-        IOOptionsDialogComponent,
-        OverlayViewComponent,
-        AttributePipe,
-        ObjectSelectionComponent,
-        ObjectSelectionOverlayComponent,
-        EventSelectorComponent,
-        ObjectClippingComponent,
-        DarkThemeComponent,
-        AutoRotateComponent,
-        ViewOptionsComponent,
-        OverlayViewWindowComponent,
-        OverlayComponent,
-        ExperimentInfoComponent,
-        InfoPanelComponent,
-        InfoPanelOverlayComponent,
-        MainViewToggleComponent,
-        ZoomControlsComponent,
-        TreeMenuComponent,
-        TreeMenuItemComponent,
-        PhoenixMenuComponent,
-        PhoenixMenuItemComponent,
-        ConfigSliderComponent,
-        AnimateCameraComponent,
-        AnimateEventComponent,
-        VrToggleComponent,
-        ArToggleComponent,
-        SSModeComponent,
-        PerformanceToggleComponent,
-        LoaderComponent,
-        ShareLinkComponent,
-        ShareLinkDialogComponent,
-        EmbedMenuComponent,
-        ExperimentLinkComponent,
-    ];
-    var PhoenixUIModule = /** @class */ (function () {
-        function PhoenixUIModule() {
-        }
-        return PhoenixUIModule;
-    }());
-    PhoenixUIModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: __spreadArray([], __read(PHOENIX_COMPONENTS)),
-                    imports: [
-                        common.CommonModule,
-                        router.RouterModule,
-                        dragDrop.DragDropModule,
-                        dialog.MatDialogModule,
-                        button.MatButtonModule,
-                        tooltip.MatTooltipModule,
-                        overlay.OverlayModule,
-                        menu.MatMenuModule,
-                        slider.MatSliderModule,
-                        slideToggle.MatSlideToggleModule,
-                        checkbox.MatCheckboxModule,
-                        icon.MatIconModule,
-                        ngxSlider.NgxSliderModule,
-                    ],
-                    entryComponents: [
-                        OverlayComponent,
-                        OverlayViewWindowComponent,
-                        IOOptionsDialogComponent,
-                        CollectionsInfoOverlayComponent,
-                        ObjectSelectionOverlayComponent,
-                        InfoPanelOverlayComponent,
-                    ],
-                    exports: [PHOENIX_COMPONENTS],
-                },] }
-    ];
-
-    /**
-     * Generated bundle index. Do not edit.
-     */
-
-    exports.AnimateCameraComponent = AnimateCameraComponent;
-    exports.AnimateEventComponent = AnimateEventComponent;
-    exports.ArToggleComponent = ArToggleComponent;
-    exports.AutoRotateComponent = AutoRotateComponent;
-    exports.CollectionsInfoComponent = CollectionsInfoComponent;
-    exports.CollectionsInfoOverlayComponent = CollectionsInfoOverlayComponent;
-    exports.ConfigSliderComponent = ConfigSliderComponent;
-    exports.DarkThemeComponent = DarkThemeComponent;
-    exports.EventDisplayService = EventDisplayService;
-    exports.EventSelectorComponent = EventSelectorComponent;
-    exports.ExperimentInfoComponent = ExperimentInfoComponent;
-    exports.IOOptionsDialogComponent = IOOptionsDialogComponent;
-    exports.ImportOption = ImportOption;
-    exports.InfoPanelComponent = InfoPanelComponent;
-    exports.InfoPanelOverlayComponent = InfoPanelOverlayComponent;
-    exports.IoOptionsComponent = IoOptionsComponent;
-    exports.LoaderComponent = LoaderComponent;
-    exports.MainViewToggleComponent = MainViewToggleComponent;
-    exports.MenuToggleComponent = MenuToggleComponent;
-    exports.NavComponent = NavComponent;
-    exports.ObjectClippingComponent = ObjectClippingComponent;
-    exports.ObjectSelectionComponent = ObjectSelectionComponent;
-    exports.ObjectSelectionOverlayComponent = ObjectSelectionOverlayComponent;
-    exports.OverlayComponent = OverlayComponent;
-    exports.OverlayViewComponent = OverlayViewComponent;
-    exports.OverlayViewWindowComponent = OverlayViewWindowComponent;
-    exports.PerformanceToggleComponent = PerformanceToggleComponent;
-    exports.PhoenixMenuComponent = PhoenixMenuComponent;
-    exports.PhoenixMenuItemComponent = PhoenixMenuItemComponent;
-    exports.PhoenixUIModule = PhoenixUIModule;
-    exports.SSModeComponent = SSModeComponent;
-    exports.ShareLinkComponent = ShareLinkComponent;
-    exports.ShareLinkDialogComponent = ShareLinkDialogComponent;
-    exports.TreeMenuComponent = TreeMenuComponent;
-    exports.TreeMenuItemComponent = TreeMenuItemComponent;
-    exports.UiMenuComponent = UiMenuComponent;
-    exports.ViewOptionsComponent = ViewOptionsComponent;
-    exports.VrToggleComponent = VrToggleComponent;
-    exports.ZoomControlsComponent = ZoomControlsComponent;
-    exports.defaultAnimationPresets = defaultAnimationPresets;
-    exports.ɵa = UiMenuComponent;
-    exports.ɵb = CollectionsInfoComponent;
-    exports.ɵba = ConfigSliderComponent;
-    exports.ɵbb = AnimateCameraComponent;
-    exports.ɵbc = AnimateEventComponent;
-    exports.ɵbd = VrToggleComponent;
-    exports.ɵbe = ArToggleComponent;
-    exports.ɵbf = SSModeComponent;
-    exports.ɵbg = PerformanceToggleComponent;
-    exports.ɵbh = ShareLinkComponent;
-    exports.ɵbi = ShareLinkDialogComponent;
-    exports.ɵbj = EmbedMenuComponent;
-    exports.ɵbk = ExperimentLinkComponent;
-    exports.ɵc = MenuToggleComponent;
-    exports.ɵd = CollectionsInfoOverlayComponent;
-    exports.ɵe = IoOptionsComponent;
-    exports.ɵf = IOOptionsDialogComponent;
-    exports.ɵg = OverlayViewComponent;
-    exports.ɵh = AttributePipe;
-    exports.ɵi = ObjectSelectionComponent;
-    exports.ɵj = ObjectSelectionOverlayComponent;
-    exports.ɵk = EventSelectorComponent;
-    exports.ɵl = ObjectClippingComponent;
-    exports.ɵm = DarkThemeComponent;
-    exports.ɵn = AutoRotateComponent;
-    exports.ɵo = ViewOptionsComponent;
-    exports.ɵp = OverlayViewWindowComponent;
-    exports.ɵq = OverlayComponent;
-    exports.ɵr = ExperimentInfoComponent;
-    exports.ɵs = InfoPanelComponent;
-    exports.ɵt = InfoPanelOverlayComponent;
-    exports.ɵu = MainViewToggleComponent;
-    exports.ɵv = ZoomControlsComponent;
-    exports.ɵw = TreeMenuComponent;
-    exports.ɵx = TreeMenuItemComponent;
-    exports.ɵy = PhoenixMenuComponent;
-    exports.ɵz = PhoenixMenuItemComponent;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
-//# sourceMappingURL=phoenix-ui-components.umd.js.map