phoenix-ui-components 2.14.1 → 2.16.0

package/dist/fesm2022/phoenix-ui-components.mjs

@@ -0,0 +1,4302 @@
+import * as i0 from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewEncapsulation, ViewChild, Injectable, Pipe, ViewChildren, Inject, ErrorHandler, NgModule } from '@angular/core';
+import * as i1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2$1 from '@angular/material/slider';
+import { MatSliderModule } from '@angular/material/slider';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i4$1 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i5 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { EventDisplay, SceneManager, PrettySymbols, Edm4hepJsonLoader, JiveXMLLoader, CMSLoader, readZipFile, VRManager, XRSessionType, ARManager, phoenixURLOptions, ActiveVariable } from 'phoenix-event-display';
+import * as i3$2 from '@angular/material/menu';
+import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
+import * as i3$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { ResizeSensor } from 'css-element-queries';
+import * as i2$2 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i1$1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import packageJson from 'phoenix-event-display/package.json';
+import * as i1$2 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i4$2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { Vector3 } from 'three';
+import * as i5$1 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import QRCode from 'qrcode';
+import * as i2$3 from '@angular/cdk/tree';
+import { NestedTreeControl, CdkTreeModule } from '@angular/cdk/tree';
+import { MatTreeNestedDataSource } from '@angular/material/tree';
+import JSZip from 'jszip';
+import * as i6 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+
+class NavComponent {
+    constructor() { }
+    ngOnInit() { }
+    static ɵfac = function NavComponent_Factory(t) { return new (t || NavComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavComponent, selectors: [["app-nav"]], decls: 2, vars: 0, consts: [["id", "mainLogo", "routerLink", "/", 1, "main-logo", "fixed-top", "p-2", "mx-auto", "mt-2"], ["src", "assets/images/logo-text.svg"]], template: function NavComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "a", 0);
+            i0.ɵɵelement(1, "img", 1);
+            i0.ɵɵelementEnd();
+        } }, dependencies: [i1.RouterLink], styles: [".main-logo[_ngcontent-%COMP%]{width:140px;z-index:9999}.main-logo[_ngcontent-%COMP%]   img[_ngcontent-%COMP%]{transition:all .5s}.main-logo[_ngcontent-%COMP%]:hover   img[_ngcontent-%COMP%]{filter:drop-shadow(0px 0px 10px var(--phoenix-text-color));transition:all .5s}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavComponent, [{
+        type: 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"] }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NavComponent, { className: "NavComponent", filePath: "components/nav/nav.component.ts", lineNumber: 8 }); })();
+
+function ConfigSliderComponent_input_3_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 4);
+    i0.ɵɵlistener("input", function ConfigSliderComponent_input_3_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onValueChange($event.target.value)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("value", ctx_r1.value);
+} }
+class ConfigSliderComponent {
+    value = 0;
+    min = 0;
+    oldMin = 0;
+    max = 100;
+    oldMax = 0;
+    step = 1;
+    allowCustomValue = false;
+    onChange = new EventEmitter();
+    onValueChange(value) {
+        value && this.onChange.emit(value);
+    }
+    toggleMinCut(change) {
+        const value = change.checked;
+        if (value) {
+            this.min = this.oldMin;
+        }
+        else {
+            this.oldMin = this.min;
+            this.min = Number.MIN_SAFE_INTEGER;
+        }
+        // We should probably disable the min input too, and change text to be infinity symbol or something?
+    }
+    toggleMaxCut(change) {
+        const value = change.checked;
+        if (value) {
+            this.max = this.oldMax;
+        }
+        else {
+            this.oldMax = this.max;
+            this.max = Number.MAX_SAFE_INTEGER;
+        }
+        // We should probably disable the min input too, and change text to be infinity symbol or something?
+    }
+    static ɵfac = function ConfigSliderComponent_Factory(t) { return new (t || ConfigSliderComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConfigSliderComponent, selectors: [["app-config-slider"]], inputs: { value: "value", min: "min", max: "max", step: "step", allowCustomValue: "allowCustomValue" }, outputs: { onChange: "onChange" }, decls: 4, vars: 5, consts: [[1, "d-flex", "flex-row", "align-items-center"], ["thumbLabel", "", 1, "mx-2", 3, "min", "max", "step"], ["matSliderThumb", "", 3, "valueChange", "value"], ["class", "config-slider-input", "type", "number", 3, "value", "input", 4, "ngIf"], ["type", "number", 1, "config-slider-input", 3, "input", "value"]], template: function ConfigSliderComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "mat-slider", 1)(2, "input", 2);
+            i0.ɵɵlistener("valueChange", function ConfigSliderComponent_Template_input_valueChange_2_listener($event) { return ctx.onValueChange($event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(3, ConfigSliderComponent_input_3_Template, 1, 1, "input", 3);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("min", ctx.min)("max", ctx.max)("step", ctx.step);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("value", ctx.value);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.allowCustomValue);
+        } }, dependencies: [i2.NgIf, i2$1.MatSlider, i2$1.MatSliderThumb], styles: [".config-slider-input[_ngcontent-%COMP%]{background:transparent;color:var(--phoenix-text-color);border:none;border-bottom:1px solid var(--phoenix-text-color);width:25%;-moz-appearance:textfield}input[_ngcontent-%COMP%]::-webkit-outer-spin-button, input[_ngcontent-%COMP%]::-webkit-inner-spin-button{-webkit-appearance:none}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfigSliderComponent, [{
+        type: Component,
+        args: [{ selector: 'app-config-slider', template: "<div class=\"d-flex flex-row align-items-center\">\n  <mat-slider class=\"mx-2\" [min]=\"min\" [max]=\"max\" [step]=\"step\" thumbLabel>\n    <input\n      matSliderThumb\n      [value]=\"value\"\n      (valueChange)=\"onValueChange($event)\"\n    />\n  </mat-slider>\n  <input\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"] }]
+    }], null, { value: [{
+            type: Input
+        }], min: [{
+            type: Input
+        }], max: [{
+            type: Input
+        }], step: [{
+            type: Input
+        }], allowCustomValue: [{
+            type: Input
+        }], onChange: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConfigSliderComponent, { className: "ConfigSliderComponent", filePath: "components/phoenix-menu/config/config-slider/config-slider.component.ts", lineNumber: 9 }); })();
+
+const _c0$b = ["phoenixMenuItem"];
+const _c1$4 = a0 => ({ "top.px": a0 });
+const _c2$1 = a0 => ({ "font-weight-bold w-100": a0 });
+const _c3$1 = a0 => ({ "p-0": a0 });
+const _c4$1 = a0 => ({ expanded: a0 });
+function PhoenixMenuItemComponent_ng_container_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function PhoenixMenuItemComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "mat-slide-toggle", 9);
+    i0.ɵɵlistener("change", function PhoenixMenuItemComponent_ng_container_3_Template_mat_slide_toggle_change_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.currentNode.toggleSelfAndDescendants($event.checked)); });
+    i0.ɵɵtemplate(2, PhoenixMenuItemComponent_ng_container_3_ng_container_2_Template, 1, 0, "ng-container", 10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    const nodeName_r3 = i0.ɵɵreference(5);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r1.currentNode.toggleState);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", nodeName_r3);
+} }
+function PhoenixMenuItemComponent_ng_template_4_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 14);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg");
+    i0.ɵɵelement(2, "use");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵattributeInterpolate2("href", "assets/icons/", ctx_r1.currentNode.icon, ".svg#", ctx_r1.currentNode.icon, "");
+} }
+function PhoenixMenuItemComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 11);
+    i0.ɵɵtemplate(1, PhoenixMenuItemComponent_ng_template_4_span_1_Template, 3, 3, "span", 12);
+    i0.ɵɵelementStart(2, "span", 13);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.currentNode.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", ctx_r1.currentNode.name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.currentNode.name);
+} }
+function PhoenixMenuItemComponent_div_7_div_4_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵlistener("click", function PhoenixMenuItemComponent_div_7_div_4_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.currentNode.configActive = false); });
+    i0.ɵɵelementEnd();
+} }
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_label_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "label", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r6 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c2$1, config_r6.type === "label"));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", config_r6.label, " ");
+} }
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_mat_checkbox_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mat-checkbox", 9);
+    i0.ɵɵlistener("change", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_mat_checkbox_1_Template_mat_checkbox_change_0_listener($event) { i0.ɵɵrestoreView(_r7); const config_r6 = i0.ɵɵnextContext(3).$implicit; config_r6.onChange($event.checked); return i0.ɵɵresetView(config_r6.isChecked = $event.checked); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r6 = i0.ɵɵnextContext(3).$implicit;
+    i0.ɵɵproperty("checked", config_r6.isChecked);
+} }
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_app_config_slider_2_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-config-slider", 34);
+    i0.ɵɵlistener("onChange", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_app_config_slider_2_Template_app_config_slider_onChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const config_r6 = i0.ɵɵnextContext(3).$implicit; config_r6.onChange($event); return i0.ɵɵresetView(config_r6.value = $event); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r6 = i0.ɵɵnextContext(3).$implicit;
+    i0.ɵɵproperty("value", config_r6.value)("min", config_r6.min)("max", config_r6.max)("step", config_r6.step)("allowCustomValue", config_r6.allowCustomValue);
+} }
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_button_3_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 35);
+    i0.ɵɵlistener("click", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_button_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const config_r6 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r6.onClick()); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r6 = i0.ɵɵnextContext(3).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", config_r6.label, " ");
+} }
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_input_4_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 36);
+    i0.ɵɵlistener("input", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_input_4_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r10); const config_r6 = i0.ɵɵnextContext(3).$implicit; config_r6.onChange($event.target.value); return i0.ɵɵresetView(config_r6.color = $event.target.value); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r6 = i0.ɵɵnextContext(3).$implicit;
+    i0.ɵɵproperty("value", config_r6.color);
+} }
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 37)(1, "div", 38)(2, "mat-checkbox", 9);
+    i0.ɵɵlistener("change", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_mat_checkbox_change_2_listener($event) { i0.ɵɵrestoreView(_r11); const config_r6 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r6.setEnableMin($event.checked)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "mat-checkbox", 9);
+    i0.ɵɵlistener("change", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_mat_checkbox_change_3_listener($event) { i0.ɵɵrestoreView(_r11); const config_r6 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r6.setEnableMax($event.checked)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "div", 38)(5, "input", 39);
+    i0.ɵɵlistener("input", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_input_input_5_listener($event) { i0.ɵɵrestoreView(_r11); const config_r6 = i0.ɵɵnextContext(3).$implicit; config_r6.value = $event.target.value; return i0.ɵɵresetView(config_r6.onChange(config_r6)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "input", 40);
+    i0.ɵɵlistener("input", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_input_input_6_listener($event) { i0.ɵɵrestoreView(_r11); const config_r6 = i0.ɵɵnextContext(3).$implicit; config_r6.highValue = $event.target.value; return i0.ɵɵresetView(config_r6.onChange(config_r6)); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const config_r6 = i0.ɵɵnextContext(3).$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("checked", config_r6.enableMin);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", config_r6.enableMax);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("value", config_r6.value);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", config_r6.highValue);
+} }
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_option_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 43);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const singleOption_r13 = ctx.$implicit;
+    i0.ɵɵproperty("value", singleOption_r13);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", singleOption_r13, " ");
+} }
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "select", 41);
+    i0.ɵɵlistener("change", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r12); const config_r6 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r6.onChange($event.target.value)); });
+    i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_option_1_Template, 2, 2, "option", 42);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r6 = i0.ɵɵnextContext(3).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", config_r6.options);
+} }
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_mat_checkbox_1_Template, 1, 1, "mat-checkbox", 28)(2, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_app_config_slider_2_Template, 1, 5, "app-config-slider", 29)(3, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_button_3_Template, 2, 1, "button", 30)(4, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_input_4_Template, 1, 1, "input", 31)(5, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template, 7, 4, "div", 32)(6, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_Template, 2, 1, "select", 33);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r6 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c3$1, config_r6.type === "button"));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngSwitchCase", "checkbox");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngSwitchCase", "slider");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngSwitchCase", "button");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngSwitchCase", "color");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngSwitchCase", "rangeSlider");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngSwitchCase", "select");
+} }
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_label_1_Template, 2, 4, "label", 24)(2, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_Template, 7, 9, "div", 25);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", config_r6.type !== "button");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", config_r6.type !== "label");
+} }
+function PhoenixMenuItemComponent_div_7_ng_container_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0, 21);
+    i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_Template, 3, 2, "div", 22);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const config_r6 = ctx.$implicit;
+    i0.ɵɵproperty("ngSwitch", config_r6.type);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !config_r6.hidden);
+} }
+function PhoenixMenuItemComponent_div_7_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "button", 15);
+    i0.ɵɵlistener("click", function PhoenixMenuItemComponent_div_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.calculateConfigTop(); return i0.ɵɵresetView(ctx_r1.currentNode.configActive = !ctx_r1.currentNode.configActive); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(2, "svg");
+    i0.ɵɵelement(3, "use", 16);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(4, PhoenixMenuItemComponent_div_7_div_4_Template, 1, 0, "div", 17);
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(5, "div", 18);
+    i0.ɵɵtemplate(6, PhoenixMenuItemComponent_div_7_ng_container_6_Template, 2, 2, "ng-container", 19);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngIf", ctx_r1.currentNode.configActive);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("hidden", !ctx_r1.currentNode.configActive)("ngStyle", i0.ɵɵpureFunction1(4, _c1$4, ctx_r1.configTop));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r1.castConfigsToAny(ctx_r1.currentNode.configs));
+} }
+function PhoenixMenuItemComponent_button_8_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵlistener("click", function PhoenixMenuItemComponent_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.currentNode.childrenActive = !ctx_r1.currentNode.childrenActive); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg");
+    i0.ɵɵelement(2, "use", 45);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c4$1, ctx_r1.currentNode.childrenActive));
+} }
+function PhoenixMenuItemComponent_div_9_app_phoenix_menu_item_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "app-phoenix-menu-item", 48);
+} if (rf & 2) {
+    const childNode_r15 = ctx.$implicit;
+    i0.ɵɵproperty("currentNode", childNode_r15);
+} }
+function PhoenixMenuItemComponent_div_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46);
+    i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_9_app_phoenix_menu_item_1_Template, 1, 1, "app-phoenix-menu-item", 47);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r1.currentNode.children);
+} }
+class PhoenixMenuItemComponent {
+    cdr;
+    currentNode;
+    phoenixMenuItem;
+    configTop;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    calculateConfigTop() {
+        if (this.phoenixMenuItem) {
+            this.configTop =
+                this.phoenixMenuItem.nativeElement.getBoundingClientRect().top;
+            this.cdr.detectChanges();
+        }
+    }
+    // Casting to `any` as a workaround to bypass strict template checks.
+    castConfigsToAny(configs) {
+        return configs;
+    }
+    static ɵfac = function PhoenixMenuItemComponent_Factory(t) { return new (t || PhoenixMenuItemComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhoenixMenuItemComponent, selectors: [["app-phoenix-menu-item"]], viewQuery: function PhoenixMenuItemComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$b, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.phoenixMenuItem = _t.first);
+        } }, inputs: { currentNode: "currentNode" }, decls: 10, vars: 5, consts: [["phoenixMenuItem", ""], ["nodeName", ""], [1, "phoenix-menu-item"], [1, "phoenix-menu-item-left", "align-items-center"], [4, "ngIf", "ngIfElse"], [1, "phoenix-menu-item-right"], [4, "ngIf"], ["class", "icon-wrapper icon-button btn-blank item-expand", "data-testid", "dropdown", 3, "ngClass", "click", 4, "ngIf"], ["class", "phoenix-menu-children", 4, "ngIf"], [3, "change", "checked"], [4, "ngTemplateOutlet"], [1, "d-flex", "w-100", "align-items-center"], ["class", "icon-wrapper item-icon", 4, "ngIf"], [1, "item-name", 3, "title"], [1, "icon-wrapper", "item-icon"], [1, "icon-wrapper", "icon-button", "btn-blank", "item-settings", 3, "click"], ["href", "assets/icons/gear.svg#gear"], ["class", "item-config-backdrop", 3, "click", 4, "ngIf"], [1, "item-config", 3, "hidden", "ngStyle"], [3, "ngSwitch", 4, "ngFor", "ngForOf"], [1, "item-config-backdrop", 3, "click"], [3, "ngSwitch"], ["class", "item-config-single", 4, "ngIf"], [1, "item-config-single"], ["class", "item-config-label", "for", "item-config-field", 3, "ngClass", 4, "ngIf"], ["class", "item-config-data", 3, "ngClass", 4, "ngIf"], ["for", "item-config-field", 1, "item-config-label", 3, "ngClass"], [1, "item-config-data", 3, "ngClass"], [3, "checked", "change", 4, "ngSwitchCase"], [3, "value", "min", "max", "step", "allowCustomValue", "onChange", 4, "ngSwitchCase"], ["class", "w-100", "mat-button", "", "mat-stroked-button", "", 3, "click", 4, "ngSwitchCase"], ["id", "item-config-field", "type", "color", 3, "value", "input", 4, "ngSwitchCase"], ["class", "range-slider", 4, "ngSwitchCase"], ["id", "item-config-field", "class", "w-100", 3, "change", 4, "ngSwitchCase"], [3, "onChange", "value", "min", "max", "step", "allowCustomValue"], ["mat-button", "", "mat-stroked-button", "", 1, "w-100", 3, "click"], ["id", "item-config-field", "type", "color", 3, "input", "value"], [1, "range-slider"], [1, "range-slider-inputs", "d-flex", "justify-content-between"], ["type", "number", "placeholder", "Min", "step", "config.step", 1, "form-control", "form-control-sm", 3, "input", "value"], ["type", "number", "placeholder", "Max", "step", "config.step", 1, "form-control", "form-control-sm", 3, "input", "value"], ["id", "item-config-field", 1, "w-100", 3, "change"], [3, "value", 4, "ngFor", "ngForOf"], [3, "value"], ["data-testid", "dropdown", 1, "icon-wrapper", "icon-button", "btn-blank", "item-expand", 3, "click", "ngClass"], ["href", "assets/icons/expand.svg#expand"], [1, "phoenix-menu-children"], [3, "currentNode", 4, "ngFor", "ngForOf"], [3, "currentNode"]], template: function PhoenixMenuItemComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 2, 0)(2, "div", 3);
+            i0.ɵɵtemplate(3, PhoenixMenuItemComponent_ng_container_3_Template, 3, 2, "ng-container", 4)(4, PhoenixMenuItemComponent_ng_template_4_Template, 4, 3, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "div", 5);
+            i0.ɵɵtemplate(7, PhoenixMenuItemComponent_div_7_Template, 7, 6, "div", 6)(8, PhoenixMenuItemComponent_button_8_Template, 3, 3, "button", 7);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(9, PhoenixMenuItemComponent_div_9_Template, 2, 1, "div", 8);
+        } if (rf & 2) {
+            const nodeName_r3 = i0.ɵɵreference(5);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngIf", ctx.currentNode.onToggle)("ngIfElse", nodeName_r3);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngIf", ctx.currentNode.configs.length > 0);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.currentNode.children.length > 0);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.currentNode.childrenActive);
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i2.NgSwitch, i2.NgSwitchCase, i3.MatButton, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i4$1.MatSlideToggle, i5.MatCheckbox, PhoenixMenuItemComponent, ConfigSliderComponent], 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 .range-slider-inputs{gap:20%}\n"], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PhoenixMenuItemComponent, [{
+        type: Component,
+        args: [{ selector: 'app-phoenix-menu-item', encapsulation: ViewEncapsulation.None, 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 castConfigsToAny(currentNode.configs)\"\n          [ngSwitch]=\"config.type\"\n        >\n          <!-- Config types -->\n          <div class=\"item-config-single\" *ngIf=\"!config.hidden\">\n            <label\n              class=\"item-config-label\"\n              for=\"item-config-field\"\n              *ngIf=\"config.type !== 'button'\"\n              [ngClass]=\"{ 'font-weight-bold w-100': config.type === 'label' }\"\n            >\n              {{ config.label }}\n            </label>\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                id=\"item-config-field\"\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              <div *ngSwitchCase=\"'rangeSlider'\" class=\"range-slider\">\n                <div class=\"range-slider-inputs d-flex justify-content-between\">\n                  <mat-checkbox\n                    [checked]=\"config.enableMin\"\n                    (change)=\"config.setEnableMin($event.checked)\"\n                  ></mat-checkbox>\n                  <mat-checkbox\n                    [checked]=\"config.enableMax\"\n                    (change)=\"config.setEnableMax($event.checked)\"\n                  ></mat-checkbox>\n                </div>\n                <div class=\"range-slider-inputs d-flex justify-content-between\">\n                  <input\n                    type=\"number\"\n                    placeholder=\"Min\"\n                    class=\"form-control form-control-sm\"\n                    [value]=\"config.value\"\n                    (input)=\"\n                      config.value = $event.target.value;\n                      config.onChange(config)\n                    \"\n                    step=\"config.step\"\n                  />\n                  <input\n                    type=\"number\"\n                    placeholder=\"Max\"\n                    class=\"form-control form-control-sm\"\n                    [value]=\"config.highValue\"\n                    (input)=\"\n                      config.highValue = $event.target.value;\n                      config.onChange(config)\n                    \"\n                    step=\"config.step\"\n                  />\n                </div>\n              </div>\n\n              <select\n                *ngSwitchCase=\"'select'\"\n                id=\"item-config-field\"\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          </div>\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      data-testid=\"dropdown\"\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", 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 .range-slider-inputs{gap:20%}\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { currentNode: [{
+            type: Input
+        }], phoenixMenuItem: [{
+            type: ViewChild,
+            args: ['phoenixMenuItem']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PhoenixMenuItemComponent, { className: "PhoenixMenuItemComponent", filePath: "components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.ts", lineNumber: 17 }); })();
+
+class PhoenixMenuComponent {
+    rootNode;
+    static ɵfac = function PhoenixMenuComponent_Factory(t) { return new (t || PhoenixMenuComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhoenixMenuComponent, selectors: [["app-phoenix-menu"]], inputs: { rootNode: "rootNode" }, decls: 2, vars: 1, consts: [["id", "phoenixMenu"], [3, "currentNode"]], template: function PhoenixMenuComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵelement(1, "app-phoenix-menu-item", 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("currentNode", ctx.rootNode);
+        } }, dependencies: [PhoenixMenuItemComponent], styles: ["[_nghost-%COMP%]{width:15rem;max-width:45%;position:absolute;top:5rem;right:1rem}#phoenixMenu[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]{top:4rem}}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PhoenixMenuComponent, [{
+        type: 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"] }]
+    }], null, { rootNode: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PhoenixMenuComponent, { className: "PhoenixMenuComponent", filePath: "components/phoenix-menu/phoenix-menu.component.ts", lineNumber: 9 }); })();
+
+/**
+ * Service for all event display related functions.
+ */
+class EventDisplayService extends EventDisplay {
+    /**
+     * Instantiate the event display by calling the parent constructor.
+     */
+    constructor() {
+        super();
+    }
+    static ɵfac = function EventDisplayService_Factory(t) { return new (t || EventDisplayService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: EventDisplayService, factory: EventDisplayService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EventDisplayService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root',
+            }]
+    }], () => [], null); })();
+
+const _c0$a = a0 => ({ disabled: a0 });
+const _c1$3 = a0 => ({ "active-icon": a0 });
+class MenuToggleComponent {
+    icon;
+    active;
+    tooltip;
+    disabled = false;
+    static ɵfac = function MenuToggleComponent_Factory(t) { return new (t || MenuToggleComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuToggleComponent, selectors: [["app-menu-toggle"]], inputs: { icon: "icon", active: "active", tooltip: "tooltip", disabled: "disabled" }, decls: 3, vars: 10, consts: [["matTooltipPosition", "above", "matTooltipTouchGestures", "off", 1, "menu-toggle", 3, "ngClass", "matTooltip"], [1, "menu-toggle-icon", 3, "ngClass"]], template: function MenuToggleComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "button", 0);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(1, "svg", 1);
+            i0.ɵɵelement(2, "use");
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c0$a, ctx.disabled))("matTooltip", ctx.tooltip);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c1$3, ctx.active));
+            i0.ɵɵadvance();
+            i0.ɵɵattributeInterpolate2("href", "assets/icons/", ctx.icon, ".svg#", ctx.icon, "");
+        } }, dependencies: [i2.NgClass, i3$1.MatTooltip], styles: ["[_nghost-%COMP%]{display:flex;margin:0 .6rem}[_nghost-%COMP%]   .menu-toggle[_ngcontent-%COMP%]{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}[_nghost-%COMP%]   .menu-toggle-icon[_ngcontent-%COMP%]{width:100%;height:100%}[_nghost-%COMP%]   .menu-toggle-icon.active-icon[_ngcontent-%COMP%]{--phoenix-options-icon-path: #00bcd4}[_nghost-%COMP%]   .menu-toggle[_ngcontent-%COMP%]:hover{background-color:var(--phoenix-options-icon-bg);border-radius:40%;transition:all .4s}[_nghost-%COMP%]   .menu-toggle.disabled[_ngcontent-%COMP%]{cursor:not-allowed;opacity:.4}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuToggleComponent, [{
+        type: 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"] }]
+    }], null, { icon: [{
+            type: Input
+        }], active: [{
+            type: Input
+        }], tooltip: [{
+            type: Input
+        }], disabled: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuToggleComponent, { className: "MenuToggleComponent", filePath: "components/ui-menu/menu-toggle/menu-toggle.component.ts", lineNumber: 8 }); })();
+
+function AnimateCameraComponent_button_2_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 2);
+    i0.ɵɵlistener("click", function AnimateCameraComponent_button_2_Template_button_click_0_listener() { const preset_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.animatePreset(preset_r3)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const preset_r3 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", preset_r3, " ");
+} }
+const defaultAnimationPresets = {
+    'Cavern to ID': {
+        name: 'Cavern to ID',
+        positions: [
+            {
+                position: [66388.95051168812, 5264.228603228927, -46910.7848593543],
+                duration: 1000,
+            },
+            {
+                position: [12834.18729094943, 677.7571205763458, 135.68755273443463],
+                duration: 2000,
+            },
+            {
+                position: [312.02688693297375, 25.884223757326, 270.10019006776236],
+                duration: 3500,
+            },
+            {
+                position: [263.3640855132258, 19.874838262525053, -318.16541790248885],
+                duration: 3000,
+            },
+            {
+                position: [5534.140362338047, 234.03507981484574, -2933.619479808285],
+                duration: 2000,
+            },
+            {
+                position: [2681.277288705242, 646.5795158318147, 5628.5248735111745],
+                duration: 1000,
+            },
+            {
+                position: [-6062.586283740076, 790.5876682946184, 1381.1675900848818],
+                duration: 1000,
+            },
+            {
+                position: [-1766.7693725879053, 1007.1048030984678, -5928.901341784575],
+                duration: 1000,
+            },
+            {
+                position: [12814.982506255355, 2516.987185037266, -22891.902734328327],
+                duration: 1000,
+            },
+        ],
+        animateEventAfterInterval: 5000,
+        collisionDuration: 6000,
+    },
+};
+class AnimateCameraComponent {
+    eventDisplay;
+    animationPresets = defaultAnimationPresets;
+    animationPresetsKeys = Object.keys(this.animationPresets);
+    isAnimating = false;
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+        // this.animationPresets = this.eventDisplay
+        //   .getUIManager()
+        //   .getPresetAnimations();
+        // This is too late to fill the UI! FIXME. EJWM
+    }
+    animatePreset(preset) {
+        this.setDetectorOpacity(0.2);
+        this.eventDisplay.animatePreset(this.animationPresets[preset], () => {
+            this.setDetectorOpacity(1);
+        });
+    }
+    animateCamera() {
+        if (!this.isAnimating) {
+            this.isAnimating = true;
+            this.eventDisplay.animateThroughEvent([11976, 7262, 11927], 3000, () => {
+                this.isAnimating = false;
+            });
+        }
+    }
+    setDetectorOpacity(opacity) {
+        const sceneManager = this.eventDisplay.getThreeManager().getSceneManager();
+        const geometriesGroup = sceneManager.getObjectByName(SceneManager.GEOMETRIES_ID);
+        sceneManager.setGeometryOpacity(geometriesGroup, opacity);
+    }
+    static ɵfac = function AnimateCameraComponent_Factory(t) { return new (t || AnimateCameraComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AnimateCameraComponent, selectors: [["app-animate-camera"]], inputs: { animationPresets: "animationPresets" }, decls: 6, vars: 2, consts: [["animationPresets", ""], ["mat-menu-item", "", 3, "click", 4, "ngFor", "ngForOf"], ["mat-menu-item", "", 3, "click"], ["tooltip", "Preset animations", "icon", "animate-camera", 3, "matMenuTriggerFor"]], template: function AnimateCameraComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "mat-menu", null, 0);
+            i0.ɵɵtemplate(2, AnimateCameraComponent_button_2_Template, 2, 1, "button", 1);
+            i0.ɵɵelementStart(3, "button", 2);
+            i0.ɵɵlistener("click", function AnimateCameraComponent_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.animateCamera()); });
+            i0.ɵɵtext(4, "Animate camera");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(5, "app-menu-toggle", 3);
+        } if (rf & 2) {
+            const animationPresets_r5 = i0.ɵɵreference(1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngForOf", ctx.animationPresetsKeys);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("matMenuTriggerFor", animationPresets_r5);
+        } }, dependencies: [i2.NgForOf, i3$2.MatMenu, i3$2.MatMenuItem, i3$2.MatMenuTrigger, MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AnimateCameraComponent, [{
+        type: 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" }]
+    }], () => [{ type: EventDisplayService }], { animationPresets: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AnimateCameraComponent, { className: "AnimateCameraComponent", filePath: "components/ui-menu/animate-camera/animate-camera.component.ts", lineNumber: 58 }); })();
+
+class AnimateEventComponent {
+    eventDisplay;
+    isAnimating = false;
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+    }
+    toggleAnimateEvent() {
+        if (!this.isAnimating) {
+            this.isAnimating = true;
+            this.eventDisplay.animateEventWithCollision(10000, () => {
+                this.isAnimating = false;
+            });
+        }
+    }
+    static ɵfac = function AnimateEventComponent_Factory(t) { return new (t || AnimateEventComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AnimateEventComponent, selectors: [["app-animate-event"]], decls: 1, vars: 1, consts: [["tooltip", "Animate event", "icon", "event-folder", 3, "click", "active"]], template: function AnimateEventComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-menu-toggle", 0);
+            i0.ɵɵlistener("click", function AnimateEventComponent_Template_app_menu_toggle_click_0_listener() { return ctx.toggleAnimateEvent(); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("active", ctx.isAnimating);
+        } }, dependencies: [MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AnimateEventComponent, [{
+        type: 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" }]
+    }], () => [{ type: EventDisplayService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AnimateEventComponent, { className: "AnimateEventComponent", filePath: "components/ui-menu/animate-event/animate-event.component.ts", lineNumber: 9 }); })();
+
+class AutoRotateComponent {
+    eventDisplay;
+    autoRotate = false;
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+    }
+    toggleAutoRotate() {
+        this.autoRotate = !this.autoRotate;
+        this.eventDisplay.getUIManager().setAutoRotate(this.autoRotate);
+    }
+    static ɵfac = function AutoRotateComponent_Factory(t) { return new (t || AutoRotateComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AutoRotateComponent, selectors: [["app-auto-rotate"]], decls: 1, vars: 1, consts: [["tooltip", "Auto rotate", "icon", "rotate", 3, "click", "active"]], template: function AutoRotateComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-menu-toggle", 0);
+            i0.ɵɵlistener("click", function AutoRotateComponent_Template_app_menu_toggle_click_0_listener() { return ctx.toggleAutoRotate(); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("active", ctx.autoRotate);
+        } }, dependencies: [MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AutoRotateComponent, [{
+        type: 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" }]
+    }], () => [{ type: EventDisplayService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AutoRotateComponent, { className: "AutoRotateComponent", filePath: "components/ui-menu/auto-rotate/auto-rotate.component.ts", lineNumber: 9 }); })();
+
+const _c0$9 = ["overlayCard"];
+const _c1$2 = ["resizeHandleCorner"];
+const _c2 = ["*"];
+const _c3 = a0 => ({ "with-body": a0 });
+const _c4 = a0 => ({ expand: a0 });
+const _c5 = a0 => ({ "transparent-bg": a0 });
+function OverlayComponent_div_2_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg");
+    i0.ɵɵelement(2, "use");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵattributeInterpolate2("href", "assets/icons/", ctx_r1.icon, ".svg#", ctx_r1.icon, "");
+} }
+function OverlayComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵtemplate(1, OverlayComponent_div_2_div_1_Template, 3, 3, "div", 7);
+    i0.ɵɵelementStart(2, "h5", 8);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 9);
+    i0.ɵɵlistener("click", function OverlayComponent_div_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showBody = !ctx_r1.showBody); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(5, "svg");
+    i0.ɵɵelement(6, "use", 10);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c3, ctx_r1.showBody));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.icon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.overlayTitle);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c4, ctx_r1.showBody));
+} }
+function OverlayComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵprojection(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c5, ctx_r1.transparentBody));
+} }
+function OverlayComponent_span_4_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 13, 1);
+    i0.ɵɵlistener("cdkDragMoved", function OverlayComponent_span_4_Template_span_cdkDragMoved_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResize()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("hidden", !ctx_r1.showBody);
+} }
+/**
+ * Component for overlay panel.
+ */
+class OverlayComponent {
+    /** Title of the overlay. */
+    overlayTitle;
+    /** If the overlay is open or not. */
+    active = false;
+    /** Icon of the overlay header. */
+    icon;
+    /** If the overlay is resizable. */
+    resizable = false;
+    /** If the overlay body is transparent or not. */
+    transparentBody = false;
+    /** If the aspect ratio is kept fixed or not. */
+    keepAspectRatioFixed = false;
+    /** If the overlay body is visible or not. */
+    showBody = true;
+    /** Aspect ratio of the overlay view. */
+    aspectRatio = window.innerWidth / window.innerHeight;
+    // ********************************************************************************
+    // * Below code is specific to the overlay resize feature. (LOOK INTO CSS RESIZE) *
+    // ********************************************************************************
+    /** Complete overlay card containing both header and body. */
+    overlayCard;
+    /** Handle for resizing the overlay. */
+    resizeHandleCorner;
+    /** Minimum resizable width. */
+    MIN_RES_WIDTH = 300;
+    /** Minimum resizable height */
+    MIN_RES_HEIGHT = 100;
+    /**
+     * Move the resizable handle to the bottom right after the component is created.
+     */
+    ngAfterViewInit() {
+        if (this.resizable) {
+            const resizeHandleElement = this.resizeHandleCorner.nativeElement;
+            resizeHandleElement.style.bottom = '0';
+            resizeHandleElement.style.right = '0';
+            new ResizeSensor(this.overlayCard.nativeElement, () => {
+                this.resetHandlePosition();
+            });
+            window.addEventListener('resize', () => {
+                this.resetHandlePosition();
+            });
+        }
+    }
+    /**
+     * Resize the overlay card when the resize handle is dragged.
+     */
+    onResize() {
+        const resizeHandleElement = this.resizeHandleCorner.nativeElement;
+        const overlayCardElement = this.overlayCard.nativeElement;
+        const dragRect = resizeHandleElement.getBoundingClientRect();
+        const overlayRect = overlayCardElement.getBoundingClientRect();
+        const width = dragRect.left - overlayRect.left + dragRect.width;
+        const 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';
+            if (this.keepAspectRatioFixed) {
+                overlayCardElement.style.height = width / this.aspectRatio + 30 + 'px';
+            }
+            else {
+                overlayCardElement.style.height = height + 'px';
+            }
+        }
+    }
+    /**
+     * Reset resize handle position.
+     */
+    resetHandlePosition() {
+        const 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.
+     */
+    setHandleTransform(overlayRect, dragRect) {
+        const translateX = overlayRect.width - dragRect.width;
+        const translateY = overlayRect.height - dragRect.height;
+        this.resizeHandleCorner.nativeElement.style.transform = `translate3d(${translateX}px, ${translateY}px, 0)`;
+    }
+    static ɵfac = function OverlayComponent_Factory(t) { return new (t || OverlayComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverlayComponent, selectors: [["app-overlay"]], viewQuery: function OverlayComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$9, 5);
+            i0.ɵɵviewQuery(_c1$2, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.overlayCard = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.resizeHandleCorner = _t.first);
+        } }, inputs: { overlayTitle: "overlayTitle", active: "active", icon: "icon", resizable: "resizable", transparentBody: "transparentBody", keepAspectRatioFixed: "keepAspectRatioFixed" }, ngContentSelectors: _c2, decls: 5, vars: 4, consts: [["overlayCard", ""], ["resizeHandleCorner", ""], ["cdkDrag", "", "cdkDragBoundary", "body", 1, "overlay-card", "card", 3, "hidden"], ["class", "card-header d-flex justify-content-between", "cdkDragHandle", "", 3, "ngClass", 4, "ngIf"], ["class", "overlay-card-content", 3, "ngClass", 4, "ngIf"], ["class", "resize-handle corner", "cdkDrag", "", 3, "hidden", "cdkDragMoved", 4, "ngIf"], ["cdkDragHandle", "", 1, "card-header", "d-flex", "justify-content-between", 3, "ngClass"], ["class", "align-self-center card-icon", 4, "ngIf"], [1, "align-self-center", "m-0", "px-2"], ["matTooltip", "Expand / Collapse", "matTooltipPosition", "right", 1, "align-self-center", "card-icon", "btn-blank", "expandCollapse", 3, "click", "ngClass"], ["href", "assets/icons/expand.svg#expand"], [1, "align-self-center", "card-icon"], [1, "overlay-card-content", 3, "ngClass"], ["cdkDrag", "", 1, "resize-handle", "corner", 3, "cdkDragMoved", "hidden"]], template: function OverlayComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "div", 2, 0);
+            i0.ɵɵtemplate(2, OverlayComponent_div_2_Template, 7, 8, "div", 3)(3, OverlayComponent_div_3_Template, 2, 3, "div", 4)(4, OverlayComponent_span_4_Template, 2, 1, "span", 5);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("hidden", !ctx.active);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.overlayTitle);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.showBody);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.resizable);
+        } }, dependencies: [i2.NgClass, i2.NgIf, i2$2.CdkDrag, i2$2.CdkDragHandle, i3$1.MatTooltip], 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"], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayComponent, [{
+        type: Component,
+        args: [{ selector: 'app-overlay', encapsulation: ViewEncapsulation.None, 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", 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"] }]
+    }], null, { overlayTitle: [{
+            type: Input
+        }], active: [{
+            type: Input
+        }], icon: [{
+            type: Input
+        }], resizable: [{
+            type: Input
+        }], transparentBody: [{
+            type: Input
+        }], keepAspectRatioFixed: [{
+            type: Input
+        }], overlayCard: [{
+            type: ViewChild,
+            args: ['overlayCard']
+        }], resizeHandleCorner: [{
+            type: ViewChild,
+            args: ['resizeHandleCorner']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OverlayComponent, { className: "OverlayComponent", filePath: "components/ui-menu/overlay/overlay.component.ts", lineNumber: 20 }); })();
+
+const _c0$8 = (a0, a1, a2) => ({ "active-object": a0, "is-cut": a1, "d-none": a2 });
+function CollectionsInfoOverlayComponent_div_1_div_1_option_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 15);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const collection_r3 = ctx.$implicit;
+    i0.ɵɵproperty("value", collection_r3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", collection_r3, " ");
+} }
+function CollectionsInfoOverlayComponent_div_1_div_1_mat_checkbox_11_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mat-checkbox", 16);
+    i0.ɵɵlistener("change", function CollectionsInfoOverlayComponent_div_1_div_1_mat_checkbox_11_Template_mat_checkbox_change_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleInvisible($event.checked)); });
+    i0.ɵɵtext(1, " Hide Invisible Objects ");
+    i0.ɵɵelementEnd();
+} }
+function CollectionsInfoOverlayComponent_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "div", 8)(2, "span");
+    i0.ɵɵtext(3, "Choose a collection: ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 9)(5, "label", 10);
+    i0.ɵɵtext(6, "Event");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "select", 11);
+    i0.ɵɵlistener("change", function CollectionsInfoOverlayComponent_div_1_div_1_Template_select_change_7_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeCollection($event.target.value)); });
+    i0.ɵɵelementStart(8, "option", 12);
+    i0.ɵɵtext(9, "Choose Collection");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(10, CollectionsInfoOverlayComponent_div_1_div_1_option_10_Template, 2, 2, "option", 13);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(11, CollectionsInfoOverlayComponent_div_1_div_1_mat_checkbox_11_Template, 2, 0, "mat-checkbox", 14);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(10);
+    i0.ɵɵproperty("ngForOf", ctx_r1.collections);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.showingCollection);
+} }
+function CollectionsInfoOverlayComponent_div_1_table_3_th_9_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "th")(1, "div", 20)(2, "div");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 21)(5, "button", 22);
+    i0.ɵɵlistener("click", function CollectionsInfoOverlayComponent_div_1_table_3_th_9_Template_button_click_5_listener() { const column_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sort(column_r6, "dec")); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(6, "svg");
+    i0.ɵɵelement(7, "use", 23);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(8, "button", 24);
+    i0.ɵɵlistener("click", function CollectionsInfoOverlayComponent_div_1_table_3_th_9_Template_button_click_8_listener() { const column_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sort(column_r6, "asc")); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(9, "svg");
+    i0.ɵɵelement(10, "use", 23);
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    const column_r6 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getPrettySymbol(column_r6), " ");
+} }
+function CollectionsInfoOverlayComponent_div_1_table_3_tr_11_div_4_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 33)(1, "button", 34);
+    i0.ɵɵlistener("click", function CollectionsInfoOverlayComponent_div_1_table_3_tr_11_div_4_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r8); const object_r9 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.lookAtObject(object_r9.uuid)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(2, "svg");
+    i0.ɵɵelement(3, "use", 35);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(4, "button", 36);
+    i0.ɵɵlistener("click", function CollectionsInfoOverlayComponent_div_1_table_3_tr_11_div_4_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r8); const object_r9 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.highlightObject(object_r9.uuid)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(5, "svg");
+    i0.ɵɵelement(6, "use", 37);
+    i0.ɵɵelementEnd()()();
+} }
+function CollectionsInfoOverlayComponent_div_1_table_3_tr_11_td_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const column_r12 = ctx.$implicit;
+    const object_r9 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", object_r9[column_r12], " ");
+} }
+function CollectionsInfoOverlayComponent_div_1_table_3_tr_11_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr", 25)(1, "td");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td");
+    i0.ɵɵtemplate(4, CollectionsInfoOverlayComponent_div_1_table_3_tr_11_div_4_Template, 7, 0, "div", 26);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "td")(6, "div", 27)(7, "div", 28);
+    i0.ɵɵelement(8, "input", 29);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 30)(10, "button", 31);
+    i0.ɵɵlistener("click", function CollectionsInfoOverlayComponent_div_1_table_3_tr_11_Template_button_click_10_listener() { const ctx_r9 = i0.ɵɵrestoreView(_r7); const object_r9 = ctx_r9.$implicit; const i_r11 = ctx_r9.index; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.addLabel(i_r11, object_r9.uuid)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(11, "svg");
+    i0.ɵɵelement(12, "use", 32);
+    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵtemplate(13, CollectionsInfoOverlayComponent_div_1_table_3_tr_11_td_13_Template, 2, 1, "td", 18);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const object_r9 = ctx.$implicit;
+    const i_r11 = ctx.index;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(6, _c0$8, ctx_r1.activeObject && ctx_r1.activeObject.value === object_r9.uuid, object_r9.isCut, object_r9.isCut && ctx_r1.hideInvisible));
+    i0.ɵɵattribute("id", object_r9.uuid);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("#", i_r11, "");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", object_r9.uuid);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("id", "label" + i_r11);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngForOf", ctx_r1.collectionColumns);
+} }
+function CollectionsInfoOverlayComponent_div_1_table_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "table", 17)(1, "thead")(2, "tr")(3, "th");
+    i0.ɵɵtext(4, "No.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "th");
+    i0.ɵɵtext(6, "Selection");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "th");
+    i0.ɵɵtext(8, "Label");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(9, CollectionsInfoOverlayComponent_div_1_table_3_th_9_Template, 11, 1, "th", 18);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "tbody");
+    i0.ɵɵtemplate(11, CollectionsInfoOverlayComponent_div_1_table_3_tr_11_Template, 14, 10, "tr", 19);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(9);
+    i0.ɵɵproperty("ngForOf", ctx_r1.collectionColumns);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", ctx_r1.showingCollection);
+} }
+function CollectionsInfoOverlayComponent_div_1_p_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 38);
+    i0.ɵɵtext(1, " Load event data to be able to display information about the collections here. ");
+    i0.ɵɵelementEnd();
+} }
+function CollectionsInfoOverlayComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵtemplate(1, CollectionsInfoOverlayComponent_div_1_div_1_Template, 12, 2, "div", 3);
+    i0.ɵɵelementStart(2, "div", 4);
+    i0.ɵɵtemplate(3, CollectionsInfoOverlayComponent_div_1_table_3_Template, 12, 2, "table", 5)(4, CollectionsInfoOverlayComponent_div_1_p_4_Template, 2, 0, "p", 6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.collections != null);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.showingCollection);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.collections);
+} }
+class CollectionsInfoOverlayComponent {
+    elementRef;
+    eventDisplay;
+    showObjectsInfo;
+    hideInvisible;
+    collections;
+    selectedCollection;
+    showingCollection;
+    collectionColumns;
+    getPrettySymbol = PrettySymbols.getPrettySymbol;
+    activeObject;
+    constructor(elementRef, eventDisplay) {
+        this.elementRef = elementRef;
+        this.eventDisplay = eventDisplay;
+    }
+    ngOnInit() {
+        this.eventDisplay.listenToDisplayedEventChange((_event) => (this.collections = this.eventDisplay.getCollections()));
+        this.activeObject = this.eventDisplay.getActiveObjectId();
+        this.activeObject.onUpdate((value) => {
+            if (document.getElementById(value)) {
+                document.getElementById(value).scrollIntoView(false);
+            }
+        });
+    }
+    changeCollection(selectedCollection) {
+        const eventDataGroup = this.getEventDataGroup();
+        this.selectedCollection = selectedCollection;
+        this.showingCollection = this.eventDisplay
+            .getCollection(selectedCollection)
+            .map((object) => ({
+            ...object,
+            isCut: !eventDataGroup.getObjectByProperty('uuid', object.uuid)
+                ?.visible,
+        }));
+        this.collectionColumns = Object.keys(this.showingCollection[0]).filter((column) => !['uuid', 'hits', 'isCut'].includes(column));
+    }
+    sort(column, order) {
+        if (order === 'asc')
+            this.showingCollection.sort((a, b) => (a[column] < b[column] ? -1 : 1));
+        else
+            this.showingCollection.sort((a, b) => (a[column] > b[column] ? -1 : 1));
+    }
+    lookAtObject(uuid) {
+        if (uuid) {
+            this.activeObject.update(uuid);
+            this.eventDisplay.lookAtObject(uuid);
+        }
+    }
+    highlightObject(uuid) {
+        if (uuid) {
+            this.activeObject.update(uuid);
+            this.eventDisplay.highlightObject(uuid);
+        }
+    }
+    enableHighlighting() {
+        this.eventDisplay.enableHighlighting();
+    }
+    disableHighlighting() {
+        this.eventDisplay.disableHighlighting();
+    }
+    toggleInvisible(checked) {
+        this.hideInvisible = checked;
+    }
+    addLabel(index, uuid) {
+        const 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);
+        }
+    }
+    getEventDataGroup() {
+        return this.eventDisplay
+            .getThreeManager()
+            .getSceneManager()
+            .getScene()
+            .getObjectByName(SceneManager.EVENT_DATA_ID);
+    }
+    static ɵfac = function CollectionsInfoOverlayComponent_Factory(t) { return new (t || CollectionsInfoOverlayComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CollectionsInfoOverlayComponent, selectors: [["app-collections-info-overlay"]], inputs: { showObjectsInfo: "showObjectsInfo" }, decls: 2, vars: 3, consts: [["overlayTitle", "Collections Info", "icon", "info", 3, "resizable", "active"], ["class", "collectionsInfo m-2", 4, "ngIf"], [1, "collectionsInfo", "m-2"], ["class", "collectionSelector mb-2 d-flex align-items-center", 4, "ngIf"], [1, "boxBody", "table-responsive"], ["id", "collectionTable", "class", "table table-borderless table-sm", 4, "ngIf"], ["class", "emptyBox", 4, "ngIf"], [1, "collectionSelector", "mb-2", "d-flex", "align-items-center"], [1, "d-flex", "align-items-center"], [1, "eventSelector"], ["for", "event"], ["id", "collection", "name", "collection", 3, "change"], ["value", "", "selected", "", "disabled", "", "hidden", ""], [3, "value", 4, "ngFor", "ngForOf"], [3, "change", 4, "ngIf"], [3, "value"], [3, "change"], ["id", "collectionTable", 1, "table", "table-borderless", "table-sm"], [4, "ngFor", "ngForOf"], [3, "ngClass", 4, "ngFor", "ngForOf"], [1, "head-wrapper"], [1, "sort-options"], [1, "icon-wrapper", "icon-button", "btn-blank", "up", 3, "click"], ["href", "assets/icons/expand.svg#expand"], [1, "icon-wrapper", "icon-button", "btn-blank", 3, "click"], [3, "ngClass"], ["class", "row justify-content-center icon-wrapper", 4, "ngIf"], [1, "row", "m-0", "add-label"], [1, "col-10", "p-0"], ["type", "text", 1, "form-control", "form-control-sm", 3, "id"], [1, "col-2", "p-0", "pl-2", "text-center", "icon-wrapper"], ["matTooltip", "Add, update or remove object label", 1, "object-select", "btn-blank", 3, "click"], ["href", "assets/icons/update.svg#update"], [1, "row", "justify-content-center", "icon-wrapper"], ["matTooltip", "Move camera to object", 1, "object-select", "btn-blank", 3, "click"], ["href", "assets/icons/views.svg#views"], ["matTooltip", "Highlight object", 1, "object-select", "btn-blank", 3, "click"], ["href", "assets/icons/cursor.svg#cursor"], [1, "emptyBox"]], template: function CollectionsInfoOverlayComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-overlay", 0);
+            i0.ɵɵtemplate(1, CollectionsInfoOverlayComponent_div_1_Template, 5, 3, "div", 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("resizable", true)("active", ctx.showObjectsInfo);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.showObjectsInfo);
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i3$1.MatTooltip, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i5.MatCheckbox, OverlayComponent], styles: [".collectionsInfo[_ngcontent-%COMP%]{height:95%}.collectionsInfo[_ngcontent-%COMP%]   .collectionSelector[_ngcontent-%COMP%]{height:15%;min-height:2rem}.collectionsInfo[_ngcontent-%COMP%]   .collectionSelector[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{color:var(--phoenix-text-color-secondary);margin-right:1rem}.collectionsInfo[_ngcontent-%COMP%]   .collectionSelector[_ngcontent-%COMP%]   mat-checkbox[_ngcontent-%COMP%]{margin-left:1rem}.boxBody[_ngcontent-%COMP%]{height:85%;overflow:scroll}.boxBody[_ngcontent-%COMP%]   p.emptyBox[_ngcontent-%COMP%]{max-width:21em}.boxBody[_ngcontent-%COMP%]   .add-label[_ngcontent-%COMP%]{min-width:8rem}.boxBody[_ngcontent-%COMP%]   .add-label[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{padding:.1rem .3rem;font-size:.75rem}#collectionTable[_ngcontent-%COMP%]{position:relative;color:var(--phoenix-text-color-secondary)}#collectionTable[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]{position:sticky;top:0;z-index:100;background:var(--phoenix-background-color-secondary)}#collectionTable[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]   .head-wrapper[_ngcontent-%COMP%]{display:flex;align-items:center}#collectionTable[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]   .head-wrapper[_ngcontent-%COMP%]   .sort-options[_ngcontent-%COMP%]{display:flex;flex-direction:row}#collectionTable[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]   .head-wrapper[_ngcontent-%COMP%]   .sort-options[_ngcontent-%COMP%]   .icon-wrapper[_ngcontent-%COMP%]{display:flex;width:1rem;height:1rem;padding:.2rem}#collectionTable[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]   .head-wrapper[_ngcontent-%COMP%]   .sort-options[_ngcontent-%COMP%]   .icon-wrapper.up[_ngcontent-%COMP%]{transform:rotate(180deg)}#collectionTable[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]   .head-wrapper[_ngcontent-%COMP%]   .sort-options[_ngcontent-%COMP%]   .icon-wrapper[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%]{width:100%;height:100%}#collectionTable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{padding-right:1.2rem}#collectionTable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]:last-child{padding-right:0}#collectionTable[_ngcontent-%COMP%]   tr.is-cut[_ngcontent-%COMP%]{opacity:.5}#collectionTable[_ngcontent-%COMP%]   tr.active-object[_ngcontent-%COMP%]{color:var(--phoenix-background-color);background:var(--phoenix-text-color);box-shadow:0 0 15px var(--phoenix-text-color)}#collectionTable[_ngcontent-%COMP%]   tr.active-object[_ngcontent-%COMP%]   div.icon-wrapper[_ngcontent-%COMP%]{--phoenix-options-icon-path: var(--phoenix-background-color);--phoenix-options-icon-bg: var(--phoenix-text-color-hover)}#collectionTable[_ngcontent-%COMP%]   tr.active-object[_ngcontent-%COMP%]   .add-label[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{--phoenix-text-color: var(--phoenix-background-color);--phoenix-background-color-tertiary: var( --phoenix-text-color-secondary );--phoenix-border: var(--phoenix-background-color)}#collectionTable[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]   .object-select[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]   .object-select[_ngcontent-%COMP%]:last-child{margin-right:0}#collectionTable[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]   .object-select[_ngcontent-%COMP%]:hover{border:1px solid var(--phoenix-options-icon-path)}#collectionTable[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]   .object-select[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%]{position:absolute;top:0;left:0;padding:.4rem;width:100%;height:100%;vertical-align:top}.eventSelector[_ngcontent-%COMP%]{display:flex}.eventSelector[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]{display:none;color:var(--phoenix-text-color-secondary)}.eventSelector[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]{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)}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CollectionsInfoOverlayComponent, [{
+        type: 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      <div class=\"d-flex align-items-center\">\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        <mat-checkbox\n          *ngIf=\"showingCollection\"\n          (change)=\"toggleInvisible($event.checked)\"\n        >\n          Hide Invisible Objects\n        </mat-checkbox>\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              <div class=\"head-wrapper\">\n                <div>\n                  {{ getPrettySymbol(column) }}\n                </div>\n                <div class=\"sort-options\">\n                  <button\n                    class=\"icon-wrapper icon-button btn-blank up\"\n                    (click)=\"sort(column, 'dec')\"\n                  >\n                    <svg>\n                      <use href=\"assets/icons/expand.svg#expand\"></use>\n                    </svg>\n                  </button>\n                  <button\n                    class=\"icon-wrapper icon-button btn-blank\"\n                    (click)=\"sort(column, 'asc')\"\n                  >\n                    <svg>\n                      <use href=\"assets/icons/expand.svg#expand\"></use>\n                    </svg>\n                  </button>\n                </div>\n              </div>\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              'd-none': object.isCut && hideInvisible\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}.collectionsInfo .collectionSelector mat-checkbox{margin-left: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 thead tr th .head-wrapper{display:flex;align-items:center}#collectionTable thead tr th .head-wrapper .sort-options{display:flex;flex-direction:row}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper{display:flex;width:1rem;height:1rem;padding:.2rem}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper.up{transform:rotate(180deg)}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper svg{width:100%;height:100%}#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"] }]
+    }], () => [{ type: i0.ElementRef }, { type: EventDisplayService }], { showObjectsInfo: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CollectionsInfoOverlayComponent, { className: "CollectionsInfoOverlayComponent", filePath: "components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.ts", lineNumber: 14 }); })();
+
+class CollectionsInfoComponent {
+    overlay;
+    showObjectsInfo = false;
+    overlayWindow;
+    constructor(overlay) {
+        this.overlay = overlay;
+    }
+    ngOnInit() {
+        const overlayRef = this.overlay.create();
+        const overlayPortal = new ComponentPortal(CollectionsInfoOverlayComponent);
+        this.overlayWindow = overlayRef.attach(overlayPortal);
+        this.overlayWindow.instance.showObjectsInfo = this.showObjectsInfo;
+    }
+    ngOnDestroy() {
+        this.overlayWindow.destroy();
+    }
+    toggleOverlay() {
+        this.showObjectsInfo = !this.showObjectsInfo;
+        this.overlayWindow.instance.showObjectsInfo = this.showObjectsInfo;
+        this.showObjectsInfo
+            ? this.overlayWindow.instance.enableHighlighting()
+            : this.overlayWindow.instance.disableHighlighting();
+    }
+    static ɵfac = function CollectionsInfoComponent_Factory(t) { return new (t || CollectionsInfoComponent)(i0.ɵɵdirectiveInject(i1$1.Overlay)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CollectionsInfoComponent, selectors: [["app-collections-info"]], decls: 1, vars: 1, consts: [["tooltip", "Event data collections info", "icon", "info", 3, "click", "active"]], template: function CollectionsInfoComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-menu-toggle", 0);
+            i0.ɵɵlistener("click", function CollectionsInfoComponent_Template_app_menu_toggle_click_0_listener() { return ctx.toggleOverlay(); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("active", ctx.showObjectsInfo);
+        } }, dependencies: [MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CollectionsInfoComponent, [{
+        type: 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" }]
+    }], () => [{ type: i1$1.Overlay }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CollectionsInfoComponent, { className: "CollectionsInfoComponent", filePath: "components/ui-menu/collections-info/collections-info.component.ts", lineNumber: 11 }); })();
+
+const _c0$7 = a0 => ({ "active-object": a0 });
+function GeometryBrowserOverlayComponent_div_1_div_1_option_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 13);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const child_r3 = ctx.$implicit;
+    i0.ɵɵproperty("value", child_r3.name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", child_r3.name, " ");
+} }
+function GeometryBrowserOverlayComponent_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "div", 8)(2, "span");
+    i0.ɵɵtext(3, "Choose a collection: ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 9)(5, "select", 10);
+    i0.ɵɵlistener("change", function GeometryBrowserOverlayComponent_div_1_div_1_Template_select_change_5_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeCollection($event.target.value)); });
+    i0.ɵɵelementStart(6, "option", 11);
+    i0.ɵɵtext(7, "Choose Collection");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(8, GeometryBrowserOverlayComponent_div_1_div_1_option_8_Template, 2, 2, "option", 12);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("ngForOf", ctx_r1.children);
+} }
+function GeometryBrowserOverlayComponent_div_1_table_3_tr_8_div_4_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 18)(1, "button", 19);
+    i0.ɵɵlistener("click", function GeometryBrowserOverlayComponent_div_1_table_3_tr_8_div_4_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const object_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.lookAtObject(object_r5.uuid)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(2, "svg");
+    i0.ɵɵelement(3, "use", 20);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(4, "button", 21);
+    i0.ɵɵlistener("click", function GeometryBrowserOverlayComponent_div_1_table_3_tr_8_div_4_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r4); const object_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.highlightObject(object_r5.uuid)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(5, "svg");
+    i0.ɵɵelement(6, "use", 22);
+    i0.ɵɵelementEnd()()();
+} }
+function GeometryBrowserOverlayComponent_div_1_table_3_tr_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr", 16)(1, "td");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td");
+    i0.ɵɵtemplate(4, GeometryBrowserOverlayComponent_div_1_table_3_tr_8_div_4_Template, 7, 0, "div", 17);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const object_r5 = ctx.$implicit;
+    const i_r6 = ctx.index;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c0$7, ctx_r1.activeObject && ctx_r1.activeObject.value === object_r5.uuid));
+    i0.ɵɵattribute("id", object_r5.uuid);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("#", i_r6, "");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", object_r5.uuid);
+} }
+function GeometryBrowserOverlayComponent_div_1_table_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "table", 14)(1, "thead")(2, "tr")(3, "th");
+    i0.ɵɵtext(4, "No.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "th");
+    i0.ɵɵtext(6, "Selection");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(7, "tbody");
+    i0.ɵɵtemplate(8, GeometryBrowserOverlayComponent_div_1_table_3_tr_8_Template, 5, 6, "tr", 15);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("ngForOf", ctx_r1.showingCollection);
+} }
+function GeometryBrowserOverlayComponent_div_1_p_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 23);
+    i0.ɵɵtext(1, " Load event data to be able to display information about the collections here. ");
+    i0.ɵɵelementEnd();
+} }
+function GeometryBrowserOverlayComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵtemplate(1, GeometryBrowserOverlayComponent_div_1_div_1_Template, 9, 1, "div", 3);
+    i0.ɵɵelementStart(2, "div", 4);
+    i0.ɵɵtemplate(3, GeometryBrowserOverlayComponent_div_1_table_3_Template, 9, 1, "table", 5)(4, GeometryBrowserOverlayComponent_div_1_p_4_Template, 2, 0, "p", 6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.children != null);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.showingCollection);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.children);
+} }
+class GeometryBrowserOverlayComponent {
+    eventDisplay;
+    browseDetectorParts;
+    selectedCollection;
+    showingCollection;
+    activeObject;
+    children;
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+    }
+    ngOnInit() {
+        this.children = this.eventDisplay
+            .getThreeManager()
+            .getSceneManager()
+            .getGeometries().children;
+        this.activeObject = this.eventDisplay.getActiveObjectId();
+        this.activeObject.onUpdate((value) => {
+            if (document.getElementById(value)) {
+                document.getElementById(value).scrollIntoView(false);
+            }
+        });
+    }
+    changeCollection(selectedCollection) {
+        this.selectedCollection = selectedCollection;
+        for (const child of this.children) {
+            if (child.name === this.selectedCollection) {
+                this.showingCollection = child.children;
+                break;
+            }
+        }
+    }
+    lookAtObject(uuid) {
+        if (uuid) {
+            this.activeObject.update(uuid);
+            this.eventDisplay.lookAtObject(uuid, true);
+        }
+    }
+    highlightObject(uuid) {
+        if (uuid) {
+            this.activeObject.update(uuid);
+            this.eventDisplay.highlightObject(uuid, true);
+        }
+    }
+    enableHighlighting() {
+        this.eventDisplay.enableHighlighting();
+    }
+    disableHighlighting() {
+        this.eventDisplay.disableHighlighting();
+    }
+    static ɵfac = function GeometryBrowserOverlayComponent_Factory(t) { return new (t || GeometryBrowserOverlayComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GeometryBrowserOverlayComponent, selectors: [["app-geometry-browser-overlay"]], inputs: { browseDetectorParts: "browseDetectorParts" }, decls: 2, vars: 3, consts: [["overlayTitle", "Browse Display", "icon", "info", 3, "resizable", "active"], ["class", "collectionsInfo m-2", 4, "ngIf"], [1, "collectionsInfo", "m-2"], ["class", "collectionSelector mb-2 d-flex align-items-center", 4, "ngIf"], [1, "boxBody", "table-responsive"], ["id", "collectionTable", "class", "table table-borderless table-sm", 4, "ngIf"], ["class", "emptyBox", 4, "ngIf"], [1, "collectionSelector", "mb-2", "d-flex", "align-items-center"], [1, "d-flex", "align-items-center"], [1, "eventSelector"], ["id", "detectorCollection", "name", "detectorCollection", 3, "change"], ["value", "", "selected", "", "disabled", "", "hidden", ""], [3, "value", 4, "ngFor", "ngForOf"], [3, "value"], ["id", "collectionTable", 1, "table", "table-borderless", "table-sm"], [3, "ngClass", 4, "ngFor", "ngForOf"], [3, "ngClass"], ["class", "row justify-content-center icon-wrapper", 4, "ngIf"], [1, "row", "justify-content-center", "icon-wrapper"], ["matTooltip", "Move camera to object", 1, "object-select", "btn-blank", 3, "click"], ["href", "assets/icons/views.svg#views"], ["matTooltip", "Highlight object", 1, "object-select", "btn-blank", 3, "click"], ["href", "assets/icons/cursor.svg#cursor"], [1, "emptyBox"]], template: function GeometryBrowserOverlayComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-overlay", 0);
+            i0.ɵɵtemplate(1, GeometryBrowserOverlayComponent_div_1_Template, 5, 3, "div", 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("resizable", true)("active", ctx.browseDetectorParts);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.browseDetectorParts);
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i3$1.MatTooltip, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, OverlayComponent], styles: [".collectionsInfo[_ngcontent-%COMP%]{height:95%}.collectionsInfo[_ngcontent-%COMP%]   .collectionSelector[_ngcontent-%COMP%]{height:15%;min-height:2rem}.collectionsInfo[_ngcontent-%COMP%]   .collectionSelector[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{color:var(--phoenix-text-color-secondary);margin-right:1rem}.boxBody[_ngcontent-%COMP%]{height:85%;overflow:scroll}.boxBody[_ngcontent-%COMP%]   p.emptyBox[_ngcontent-%COMP%]{max-width:21em}#collectionTable[_ngcontent-%COMP%]{position:relative;color:var(--phoenix-text-color-secondary)}#collectionTable[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]{position:sticky;top:0;z-index:100;background:var(--phoenix-background-color-secondary)}#collectionTable[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]   .row[_ngcontent-%COMP%]{margin-right:10px;margin-left:-92px}#collectionTable[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]   .icon-wrapper[_ngcontent-%COMP%]{display:flex;width:1rem;height:1rem;padding:.2rem}#collectionTable[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]   .icon-wrapper[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%]{width:100%;height:100%}#collectionTable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{padding-right:1.2rem}#collectionTable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]:last-child{padding-right:0}#collectionTable[_ngcontent-%COMP%]   tr.active-object[_ngcontent-%COMP%]{color:var(--phoenix-background-color);background:var(--phoenix-text-color);box-shadow:0 0 15px var(--phoenix-text-color)}#collectionTable[_ngcontent-%COMP%]   tr.active-object[_ngcontent-%COMP%]   div.icon-wrapper[_ngcontent-%COMP%]{--phoenix-options-icon-path: var(--phoenix-background-color);--phoenix-options-icon-bg: var(--phoenix-text-color-hover)}#collectionTable[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]   .object-select[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]   .object-select[_ngcontent-%COMP%]:last-child{margin-right:0}#collectionTable[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]   .object-select[_ngcontent-%COMP%]:hover{border:1px solid var(--phoenix-options-icon-path)}#collectionTable[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]   .object-select[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%]{position:absolute;top:0;left:0;padding:.4rem;width:100%;height:100%;vertical-align:top}.eventSelector[_ngcontent-%COMP%]{display:flex}.eventSelector[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]{display:none;color:var(--phoenix-text-color-secondary)}.eventSelector[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]{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)}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GeometryBrowserOverlayComponent, [{
+        type: Component,
+        args: [{ selector: 'app-geometry-browser-overlay', template: "<!-- Show objects -->\n<app-overlay\n  overlayTitle=\"Browse Display\"\n  icon=\"info\"\n  [resizable]=\"true\"\n  [active]=\"browseDetectorParts\"\n>\n  <!-- Using ngIf to remove it from DOM since this panel requires heavy computing -->\n  <div *ngIf=\"browseDetectorParts\" class=\"collectionsInfo m-2\">\n    <div\n      class=\"collectionSelector mb-2 d-flex align-items-center\"\n      *ngIf=\"children != null\"\n    >\n      <div class=\"d-flex align-items-center\">\n        <span>Choose a collection: </span>\n        <div class=\"eventSelector\">\n          <select\n            id=\"detectorCollection\"\n            name=\"detectorCollection\"\n            (change)=\"changeCollection($event.target.value)\"\n          >\n            <option value=\"\" selected disabled hidden>Choose Collection</option>\n            <option *ngFor=\"let child of children\" [value]=\"child.name\">\n              {{ child.name }}\n            </option>\n          </select>\n        </div>\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          </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            }\"\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          </tr>\n        </tbody>\n      </table>\n      <p class=\"emptyBox\" *ngIf=\"!children\">\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}#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 thead tr th .row{margin-right:10px;margin-left:-92px}#collectionTable thead tr th .icon-wrapper{display:flex;width:1rem;height:1rem;padding:.2rem}#collectionTable thead tr th .icon-wrapper svg{width:100%;height:100%}#collectionTable tr *{padding-right:1.2rem}#collectionTable tr *:last-child{padding-right:0}#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 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"] }]
+    }], () => [{ type: EventDisplayService }], { browseDetectorParts: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GeometryBrowserOverlayComponent, { className: "GeometryBrowserOverlayComponent", filePath: "components/ui-menu/geometry-browser/geometry-browser-overlay/geometry-browser-overlay.component.ts", lineNumber: 11 }); })();
+
+class GeometryBrowserComponent {
+    overlay;
+    browseDetectorParts = false;
+    overlayWindow;
+    constructor(overlay) {
+        this.overlay = overlay;
+    }
+    ngOnInit() {
+        const overlayRef = this.overlay.create();
+        const overlayPortal = new ComponentPortal(GeometryBrowserOverlayComponent);
+        this.overlayWindow = overlayRef.attach(overlayPortal);
+        this.overlayWindow.instance.browseDetectorParts = this.browseDetectorParts;
+    }
+    ngOnDestroy() {
+        this.overlayWindow.destroy();
+    }
+    toggleOverlay() {
+        this.browseDetectorParts = !this.browseDetectorParts;
+        this.overlayWindow.instance.browseDetectorParts = this.browseDetectorParts;
+        this.browseDetectorParts
+            ? this.overlayWindow.instance.enableHighlighting()
+            : this.overlayWindow.instance.disableHighlighting();
+    }
+    static ɵfac = function GeometryBrowserComponent_Factory(t) { return new (t || GeometryBrowserComponent)(i0.ɵɵdirectiveInject(i1$1.Overlay)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GeometryBrowserComponent, selectors: [["app-geometry-browser"]], decls: 1, vars: 1, consts: [["tooltip", "Browse geometry", "icon", "info", 3, "click", "active"]], template: function GeometryBrowserComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-menu-toggle", 0);
+            i0.ɵɵlistener("click", function GeometryBrowserComponent_Template_app_menu_toggle_click_0_listener() { return ctx.toggleOverlay(); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("active", ctx.browseDetectorParts);
+        } }, dependencies: [MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GeometryBrowserComponent, [{
+        type: Component,
+        args: [{ selector: 'app-geometry-browser', template: "<app-menu-toggle\n  tooltip=\"Browse geometry\"\n  icon=\"info\"\n  [active]=\"browseDetectorParts\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n" }]
+    }], () => [{ type: i1$1.Overlay }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GeometryBrowserComponent, { className: "GeometryBrowserComponent", filePath: "components/ui-menu/geometry-browser/geometry-browser.component.ts", lineNumber: 11 }); })();
+
+class DarkThemeComponent {
+    eventDisplay;
+    darkTheme = false;
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+    }
+    ngOnInit() {
+        this.darkTheme = this.eventDisplay.getUIManager().getDarkTheme();
+    }
+    setDarkTheme() {
+        this.darkTheme = !this.darkTheme;
+        this.eventDisplay.getUIManager().setDarkTheme(this.darkTheme);
+    }
+    static ɵfac = function DarkThemeComponent_Factory(t) { return new (t || DarkThemeComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DarkThemeComponent, selectors: [["app-dark-theme"]], decls: 1, vars: 1, consts: [["tooltip", "Dark theme", "icon", "dark", 3, "click", "active"]], template: function DarkThemeComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-menu-toggle", 0);
+            i0.ɵɵlistener("click", function DarkThemeComponent_Template_app_menu_toggle_click_0_listener() { return ctx.setDarkTheme(); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("active", ctx.darkTheme);
+        } }, dependencies: [MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DarkThemeComponent, [{
+        type: 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" }]
+    }], () => [{ type: EventDisplayService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DarkThemeComponent, { className: "DarkThemeComponent", filePath: "components/ui-menu/dark-theme/dark-theme.component.ts", lineNumber: 9 }); })();
+
+function EventSelectorComponent_div_0_option_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 4);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const event_r3 = ctx.$implicit;
+    i0.ɵɵproperty("value", event_r3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", event_r3, " ");
+} }
+function EventSelectorComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 1)(1, "select", 2);
+    i0.ɵɵlistener("change", function EventSelectorComponent_div_0_Template_select_change_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.changeEvent($event)); });
+    i0.ɵɵtemplate(2, EventSelectorComponent_div_0_option_2_Template, 2, 2, "option", 3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", ctx_r1.events);
+} }
+class EventSelectorComponent {
+    eventDisplay;
+    // Array containing the keys of the multiple loaded events
+    events;
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+    }
+    ngOnInit() {
+        this.eventDisplay.listenToLoadedEventsChange((events) => (this.events = events));
+    }
+    changeEvent(selected) {
+        const value = selected.target.value;
+        this.eventDisplay.loadEvent(value);
+    }
+    static ɵfac = function EventSelectorComponent_Factory(t) { return new (t || EventSelectorComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EventSelectorComponent, selectors: [["app-event-selector"]], decls: 1, vars: 1, consts: [["class", "eventSelector mx-2", "matTooltip", "Event selector", "matTooltipPosition", "above", 4, "ngIf"], ["matTooltip", "Event selector", "matTooltipPosition", "above", 1, "eventSelector", "mx-2"], ["name", "event", 3, "change"], [3, "value", 4, "ngFor", "ngForOf"], [3, "value"]], template: function EventSelectorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, EventSelectorComponent_div_0_Template, 3, 1, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.events != null);
+        } }, dependencies: [i2.NgForOf, i2.NgIf, i3$1.MatTooltip, i4.NgSelectOption, i4.ɵNgSelectMultipleOption], styles: [".eventSelector[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]{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)}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EventSelectorComponent, [{
+        type: 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"] }]
+    }], () => [{ type: EventDisplayService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EventSelectorComponent, { className: "EventSelectorComponent", filePath: "components/ui-menu/event-selector/event-selector.component.ts", lineNumber: 9 }); })();
+
+function ExperimentInfoComponent_a_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "a", 5);
+    i0.ɵɵelement(1, "img", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("href", ctx_r0.url, i0.ɵɵsanitizeUrl);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("src", ctx_r0.logo, i0.ɵɵsanitizeUrl);
+} }
+function ExperimentInfoComponent_p_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p")(1, "b");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.tagline);
+} }
+function ExperimentInfoComponent_p_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "b");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(3);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const infoField_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", infoField_r2.label, ": ");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", infoField_r2.value, " ");
+} }
+function ExperimentInfoComponent_p_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const infoField_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", infoField_r2, " ");
+} }
+function ExperimentInfoComponent_p_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p");
+    i0.ɵɵtemplate(1, ExperimentInfoComponent_p_4_ng_container_1_Template, 4, 2, "ng-container", 3)(2, ExperimentInfoComponent_p_4_ng_container_2_Template, 2, 1, "ng-container", 3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const infoField_r2 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", infoField_r2.label);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !infoField_r2.label);
+} }
+class ExperimentInfoComponent {
+    eventDisplay;
+    experimentInfo;
+    url;
+    logo;
+    tagline;
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+    }
+    ngOnInit() {
+        this.eventDisplay.listenToDisplayedEventChange(() => {
+            this.experimentInfo = this.eventDisplay.getEventMetadata();
+        });
+    }
+    static ɵfac = function ExperimentInfoComponent_Factory(t) { return new (t || ExperimentInfoComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExperimentInfoComponent, selectors: [["app-experiment-info"]], inputs: { url: "url", logo: "logo", tagline: "tagline" }, decls: 5, vars: 3, consts: [["id", "experimentInfo", "cdkDrag", "", "cdkDragBoundary", "body", 1, "experimentInfo"], ["class", "experimentLogoWrapper", "target", "_blank", "rel", "noopener noreferrer", 3, "href", 4, "ngIf"], [1, "textInfo"], [4, "ngIf"], [4, "ngFor", "ngForOf"], ["target", "_blank", "rel", "noopener noreferrer", 1, "experimentLogoWrapper", 3, "href"], ["alt", "", 1, "experimentLogo", 3, "src"]], template: function ExperimentInfoComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵtemplate(1, ExperimentInfoComponent_a_1_Template, 2, 2, "a", 1);
+            i0.ɵɵelementStart(2, "div", 2);
+            i0.ɵɵtemplate(3, ExperimentInfoComponent_p_3_Template, 3, 1, "p", 3)(4, ExperimentInfoComponent_p_4_Template, 3, 2, "p", 4);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.url);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.tagline);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngForOf", ctx.experimentInfo);
+        } }, dependencies: [i2.NgForOf, i2.NgIf, i2$2.CdkDrag], styles: [".experimentInfo[_ngcontent-%COMP%]{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;font-family:Courier New,Lucida Console,monospace;cursor:move}.experimentLogoWrapper[_ngcontent-%COMP%]{width:6rem}.experimentLogoWrapper[_ngcontent-%COMP%]   .experimentLogo[_ngcontent-%COMP%]{width:100%;height:100%}.textInfo[_ngcontent-%COMP%]{margin-left:1rem}.textInfo[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]{color:var(--phoenix-text-color-secondary);font-size:.8rem;margin-bottom:.5rem;-webkit-user-select:none;user-select:none}@media screen and (max-width: 768px){.experimentInfo[_ngcontent-%COMP%]{top:4rem;max-width:40%}.experimentLogoWrapper[_ngcontent-%COMP%]{height:4rem}.textInfo[_ngcontent-%COMP%]{display:none}}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExperimentInfoComponent, [{
+        type: 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=\"url\"\n    [href]=\"url\"\n  >\n    <img class=\"experimentLogo\" [src]=\"logo\" alt=\"\" />\n  </a>\n  <div class=\"textInfo\">\n    <p *ngIf=\"tagline\">\n      <b>{{ tagline }}</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;font-family:Courier New,Lucida Console,monospace;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;user-select:none}@media screen and (max-width: 768px){.experimentInfo{top:4rem;max-width:40%}.experimentLogoWrapper{height:4rem}.textInfo{display:none}}\n"] }]
+    }], () => [{ type: EventDisplayService }], { url: [{
+            type: Input
+        }], logo: [{
+            type: Input
+        }], tagline: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExperimentInfoComponent, { className: "ExperimentInfoComponent", filePath: "components/ui-menu/experiment-info/experiment-info.component.ts", lineNumber: 9 }); })();
+
+function InfoPanelOverlayComponent_li_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "li", 2);
+    i0.ɵɵtext(1, " No actions. ");
+    i0.ɵɵelementEnd();
+} }
+function InfoPanelOverlayComponent_li_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "li", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const action_r1 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", action_r1, " ");
+} }
+/**
+ * Component for displaying information from the logger
+ */
+class InfoPanelOverlayComponent {
+    eventDisplay;
+    /** @ignore */
+    showInfoPanel;
+    /** List of actions to be displayed in the info panel */
+    actionsList = [];
+    /** Get Phoenix Version */
+    version = packageJson.version;
+    /**
+     * Create the information panel overlay
+     * @param infoLogger Service containing operations related to info logs
+     */
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+    }
+    /**
+     * Get the list of logs from the info logger service
+     */
+    ngOnInit() {
+        this.actionsList = this.eventDisplay.getInfoLogger().getInfoLoggerList();
+    }
+    static ɵfac = function InfoPanelOverlayComponent_Factory(t) { return new (t || InfoPanelOverlayComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InfoPanelOverlayComponent, selectors: [["app-info-panel-overlay"]], inputs: { showInfoPanel: "showInfoPanel" }, decls: 6, vars: 5, consts: [["overlayTitle", "Info Panel", "icon", "info-panel", 3, "resizable", "active"], [1, "list-group", "list-group-flush"], [1, "list-group-item"], ["class", "list-group-item", 4, "ngIf"], ["class", "list-group-item", 4, "ngFor", "ngForOf"]], template: function InfoPanelOverlayComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-overlay", 0)(1, "ul", 1)(2, "li", 2);
+            i0.ɵɵtext(3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(4, InfoPanelOverlayComponent_li_4_Template, 2, 0, "li", 3)(5, InfoPanelOverlayComponent_li_5_Template, 2, 1, "li", 4);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵproperty("resizable", true)("active", ctx.showInfoPanel);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1(" Phoenix Version: ", ctx.version, " ");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.actionsList.length === 0);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngForOf", ctx.actionsList);
+        } }, dependencies: [i2.NgForOf, i2.NgIf, OverlayComponent], styles: [".list-group-item[_ngcontent-%COMP%]{font-size:.8rem;padding:.5rem 1rem}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InfoPanelOverlayComponent, [{
+        type: 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"] }]
+    }], () => [{ type: EventDisplayService }], { showInfoPanel: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InfoPanelOverlayComponent, { className: "InfoPanelOverlayComponent", filePath: "components/ui-menu/info-panel/info-panel-overlay/info-panel-overlay.component.ts", lineNumber: 13 }); })();
+
+/**
+ * Component for toggling info panel overlay
+ */
+class InfoPanelComponent {
+    overlay;
+    /** @ignore */
+    showInfoPanel = false;
+    /** Information panel overlay window */
+    overlayWindow;
+    /**
+     * Create the info panel toggle
+     * @param overlay Info panel overlay containing logger data
+     */
+    constructor(overlay) {
+        this.overlay = overlay;
+    }
+    /**
+     * Create the info panel overlay
+     */
+    ngOnInit() {
+        const overlayRef = this.overlay.create();
+        const overlayPortal = new ComponentPortal(InfoPanelOverlayComponent);
+        this.overlayWindow = overlayRef.attach(overlayPortal);
+        this.overlayWindow.instance.showInfoPanel = this.showInfoPanel;
+    }
+    /**
+     * Destroy the info panel overlay
+     */
+    ngOnDestroy() {
+        this.overlayWindow.destroy();
+    }
+    /**
+     * Toggle the info panel overlay
+     */
+    toggleOverlay() {
+        this.showInfoPanel = !this.showInfoPanel;
+        this.overlayWindow.instance.showInfoPanel = this.showInfoPanel;
+    }
+    static ɵfac = function InfoPanelComponent_Factory(t) { return new (t || InfoPanelComponent)(i0.ɵɵdirectiveInject(i1$1.Overlay)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InfoPanelComponent, selectors: [["app-info-panel"]], decls: 1, vars: 1, consts: [["tooltip", "Info panel", "icon", "info-panel", 3, "click", "active"]], template: function InfoPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-menu-toggle", 0);
+            i0.ɵɵlistener("click", function InfoPanelComponent_Template_app_menu_toggle_click_0_listener() { return ctx.toggleOverlay(); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("active", ctx.showInfoPanel);
+        } }, dependencies: [MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InfoPanelComponent, [{
+        type: 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" }]
+    }], () => [{ type: i1$1.Overlay }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InfoPanelComponent, { className: "InfoPanelComponent", filePath: "components/ui-menu/info-panel/info-panel.component.ts", lineNumber: 14 }); })();
+
+var EventDataFormat;
+(function (EventDataFormat) {
+    EventDataFormat["JSON"] = "JSON";
+    EventDataFormat["EDM4HEPJSON"] = "EDM4HEPJSON";
+    EventDataFormat["JIVEXML"] = "JIVEXML";
+    EventDataFormat["IG"] = "IG";
+    EventDataFormat["ZIP"] = "ZIP";
+})(EventDataFormat || (EventDataFormat = {}));
+class ImportOption {
+    format;
+    fileType;
+    handler;
+    accept;
+    constructor(format, fileType, handler, accept) {
+        this.format = format;
+        this.fileType = fileType;
+        this.handler = handler;
+        this.accept = accept;
+    }
+}
+
+function IOOptionsDialogComponent_div_4_ng_container_5_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "input", 29, 5);
+    i0.ɵɵlistener("change", function IOOptionsDialogComponent_div_4_ng_container_5_Template_input_change_1_listener($event) { const eventDataImportOption_r3 = i0.ɵɵrestoreView(_r2).$implicit; return i0.ɵɵresetView(eventDataImportOption_r3.handler($event.target.files)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 13);
+    i0.ɵɵlistener("click", function IOOptionsDialogComponent_div_4_ng_container_5_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const eventDataFileInput_r4 = i0.ɵɵreference(2); return i0.ɵɵresetView(eventDataFileInput_r4.click()); });
+    i0.ɵɵelement(4, "img", 30);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const eventDataImportOption_r3 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("accept", eventDataImportOption_r3.accept);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" Load ", eventDataImportOption_r3.fileType, " ");
+} }
+function IOOptionsDialogComponent_div_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "p", 10)(2, "b");
+    i0.ɵɵtext(3, "Event data");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "div", 11);
+    i0.ɵɵtemplate(5, IOOptionsDialogComponent_div_4_ng_container_5_Template, 6, 2, "ng-container", 28);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngForOf", ctx_r4.eventDataOptionsWithHandler);
+} }
+class IOOptionsDialogComponent {
+    eventDisplay;
+    dialogRef;
+    eventDataImportOptions = [EventDataFormat.JSON];
+    eventDataOptionsWithHandler;
+    supportedEventDataFormats = [
+        new ImportOption(EventDataFormat.JSON, '.json', this.handleJSONEventDataInput.bind(this), 'application/json'),
+        new ImportOption(EventDataFormat.EDM4HEPJSON, '.edm4hep.json', this.handleEDM4HEPJSONEventDataInput.bind(this), 'application/json'),
+        new ImportOption(EventDataFormat.JIVEXML, '.xml', this.handleJiveXMLDataInput.bind(this), 'text/xml'),
+        new ImportOption(EventDataFormat.ZIP, '.zip', this.handleZipEventDataInput.bind(this), '.zip'),
+        new ImportOption(EventDataFormat.IG, '.ig', this.handleIgEventDataInput.bind(this), '.ig'),
+    ];
+    constructor(eventDisplay, dialogRef) {
+        this.eventDisplay = eventDisplay;
+        this.dialogRef = dialogRef;
+    }
+    ngOnInit() {
+        this.eventDataOptionsWithHandler = this.supportedEventDataFormats.filter((eventDataFormat) => this.eventDataImportOptions.includes(eventDataFormat.format));
+        this.eventDataImportOptions.forEach((eventDataImportOption) => {
+            if (eventDataImportOption instanceof ImportOption) {
+                const importHandler = eventDataImportOption.handler.bind(this);
+                eventDataImportOption.handler = (files) => {
+                    importHandler(files);
+                    this.onClose();
+                };
+                this.eventDataOptionsWithHandler.push(eventDataImportOption);
+            }
+        });
+    }
+    getSupportedEventDataFormats() {
+        return this.eventDataImportOptions
+            .map((format) => {
+            if (format instanceof ImportOption) {
+                return format.format;
+            }
+            return format;
+        })
+            .filter((format) => format !== 'ZIP')
+            .join(', ');
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    handleJSONEventDataInput(files) {
+        const callback = (content) => {
+            const json = typeof content === 'string' ? JSON.parse(content) : content;
+            this.eventDisplay.parsePhoenixEvents(json);
+        };
+        this.handleFileInput(files[0], 'json', callback);
+    }
+    handleEDM4HEPJSONEventDataInput(files) {
+        const callback = (content) => {
+            const json = typeof content === 'string' ? JSON.parse(content) : content;
+            const edm4hepJsonLoader = new Edm4hepJsonLoader();
+            edm4hepJsonLoader.setRawEventData(json);
+            edm4hepJsonLoader.processEventData();
+            this.eventDisplay.parsePhoenixEvents(edm4hepJsonLoader.getEventData());
+        };
+        this.handleFileInput(files[0], 'json', callback);
+    }
+    handleJiveXMLDataInput(files) {
+        const callback = (content) => {
+            const jiveloader = new JiveXMLLoader();
+            jiveloader.process(content);
+            const eventData = jiveloader.getEventData();
+            this.eventDisplay.buildEventDataFromJSON(eventData);
+        };
+        this.handleFileInput(files[0], 'xml', callback);
+    }
+    handleOBJInput(files) {
+        const callback = (content, name) => {
+            this.eventDisplay.parseOBJGeometry(content, name);
+        };
+        this.handleFileInput(files[0], 'obj', callback);
+    }
+    handleSceneInput(files) {
+        const callback = (content) => {
+            this.eventDisplay.parsePhoenixDisplay(content);
+        };
+        this.handleFileInput(files[0], 'phnx', callback);
+    }
+    handleGLTFInput(files) {
+        const callback = (content, name) => {
+            this.eventDisplay.parseGLTFGeometry(content, name);
+        };
+        this.handleFileInput(files[0], 'gltf', callback);
+    }
+    handlePhoenixInput(files) {
+        const callback = (content) => {
+            this.eventDisplay.parsePhoenixDisplay(content);
+        };
+        this.handleFileInput(files[0], 'phnx', callback);
+    }
+    async handleROOTInput(files) {
+        const rootObjectName = prompt('Enter object name in ROOT file');
+        await this.eventDisplay.loadRootGeometry(URL.createObjectURL(files[0]), rootObjectName, files[0].name.split('.')[0]);
+        this.onClose();
+    }
+    async handleRootJSONInput(files) {
+        if (!this.isFileOfExtension(files[0], 'gz')) {
+            return;
+        }
+        const name = files[0].name.split('.')[0];
+        await this.eventDisplay.loadRootJSONGeometry(URL.createObjectURL(files[0]), name);
+        this.onClose();
+    }
+    handleIgEventDataInput(files) {
+        const cmsLoader = new CMSLoader();
+        cmsLoader.readIgArchive(files[0], (allEvents) => {
+            const allEventsData = cmsLoader.getAllEventsData(allEvents);
+            this.eventDisplay.parsePhoenixEvents(allEventsData);
+            this.onClose();
+        });
+    }
+    async handleZipEventDataInput(files) {
+        if (!this.isFileOfExtension(files[0], 'zip')) {
+            return;
+        }
+        const allEventsObject = {};
+        let filesWithData;
+        // Using a try catch block to catch any errors in Promises
+        try {
+            filesWithData = await readZipFile(files[0]);
+        }
+        catch (error) {
+            console.error('Error while reading zip', error);
+            this.eventDisplay.getInfoLogger().add('Could not read zip file', 'Error');
+            return;
+        }
+        // JSON event data
+        Object.keys(filesWithData)
+            .filter((fileName) => fileName.endsWith('.json'))
+            .forEach((fileName) => {
+            Object.assign(allEventsObject, JSON.parse(filesWithData[fileName]));
+        });
+        // JiveXML event data
+        const jiveloader = new JiveXMLLoader();
+        Object.keys(filesWithData)
+            .filter((fileName) => {
+            return fileName.endsWith('.xml') || fileName.startsWith('JiveXML');
+        })
+            .forEach((fileName) => {
+            jiveloader.process(filesWithData[fileName]);
+            const eventData = jiveloader.getEventData();
+            Object.assign(allEventsObject, { [fileName]: eventData });
+        });
+        // For some reason the above doesn't pick up JiveXML_XXX_YYY.zip
+        this.eventDisplay.parsePhoenixEvents(allEventsObject);
+        this.onClose();
+    }
+    handleFileInput(file, extension, callback) {
+        const reader = new FileReader();
+        if (this.isFileOfExtension(file, extension)) {
+            reader.onload = () => {
+                callback(reader.result.toString(), file.name.split('.')[0]);
+            };
+            reader.readAsText(file);
+        }
+        this.onClose();
+    }
+    isFileOfExtension(file, extension) {
+        if (file.name.split('.').pop() === extension) {
+            return true;
+        }
+        console.error('Error: Invalid file format!');
+        this.eventDisplay.getInfoLogger().add('Invalid file format!', 'Error');
+        return false;
+    }
+    saveScene() {
+        this.eventDisplay.exportPhoenixDisplay();
+    }
+    exportOBJ() {
+        this.eventDisplay.exportToOBJ();
+    }
+    static ɵfac = function IOOptionsDialogComponent_Factory(t) { return new (t || IOOptionsDialogComponent)(i0.ɵɵdirectiveInject(EventDisplayService), i0.ɵɵdirectiveInject(i1$2.MatDialogRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: IOOptionsDialogComponent, selectors: [["app-io-options-dialog"]], inputs: { eventDataImportOptions: "eventDataImportOptions" }, decls: 47, vars: 1, consts: [["objFileInput", ""], ["gltfFileInput", ""], ["rootFileInput", ""], ["rootJSONFileInput", ""], ["loadSceneInput", ""], ["eventDataFileInput", ""], [1, "dialog"], ["mat-dialog-title", ""], ["mat-dialog-content", "", 1, "dialog-content"], [4, "ngIf"], [1, "text-center"], [1, "row", "centered"], ["type", "file", "tabindex", "-1", "accept", ".obj", "name", "image", 1, "file-input", 3, "change"], [1, "file-input-button", 3, "click"], ["src", "assets/icons/obj.svg", "alt", ""], ["type", "file", "tabindex", "-1", "accept", ".gltf", "name", "image", 1, "file-input", 3, "change"], ["src", "assets/icons/gltf.svg", "alt", ""], ["type", "file", "tabindex", "-1", "accept", ".root", 1, "file-input", 3, "change"], ["src", "assets/icons/file-import.svg", "alt", ""], ["type", "file", "tabindex", "-1", "accept", ".json.gz", 1, "file-input", 3, "change"], ["id", "exportScene", 1, "file-input-button", "load-export", 3, "click"], ["src", "assets/icons/save.svg", "alt", ""], ["type", "file", "tabindex", "-1", "accept", ".phnx", "name", "image", 1, "file-input", 3, "change"], ["id", "importScene", 1, "file-input-button", "load-export", 3, "click"], ["src", "assets/icons/upload.svg", "alt", ""], ["id", "exportOBJ", 1, "file-input-button", "export-button", 3, "click"], ["mat-dialog-actions", "", "align", "end"], ["mat-flat-button", "", "color", "primary", "cdkFocusInitial", "", 3, "click"], [4, "ngFor", "ngForOf"], ["type", "file", "tabindex", "-1", 1, "file-input", 3, "change", "accept"], ["src", "assets/icons/eventData.svg", "alt", "Event data icon"]], template: function IOOptionsDialogComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 6)(1, "h1", 7);
+            i0.ɵɵtext(2, "Import and export");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "div", 8);
+            i0.ɵɵtemplate(4, IOOptionsDialogComponent_div_4_Template, 6, 1, "div", 9);
+            i0.ɵɵelementStart(5, "p", 10)(6, "b");
+            i0.ɵɵtext(7, "Geometries");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(8, "div", 11)(9, "input", 12, 0);
+            i0.ɵɵlistener("change", function IOOptionsDialogComponent_Template_input_change_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleOBJInput($event.target.files)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "button", 13);
+            i0.ɵɵlistener("click", function IOOptionsDialogComponent_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const objFileInput_r6 = i0.ɵɵreference(10); return i0.ɵɵresetView(objFileInput_r6.click()); });
+            i0.ɵɵelement(12, "img", 14);
+            i0.ɵɵtext(13, " Load .obj ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(14, "input", 15, 1);
+            i0.ɵɵlistener("change", function IOOptionsDialogComponent_Template_input_change_14_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleGLTFInput($event.target.files)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(16, "button", 13);
+            i0.ɵɵlistener("click", function IOOptionsDialogComponent_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); const gltfFileInput_r7 = i0.ɵɵreference(15); return i0.ɵɵresetView(gltfFileInput_r7.click()); });
+            i0.ɵɵelement(17, "img", 16);
+            i0.ɵɵtext(18, " Load .gltf ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(19, "input", 17, 2);
+            i0.ɵɵlistener("change", function IOOptionsDialogComponent_Template_input_change_19_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleROOTInput($event.target.files)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(21, "button", 13);
+            i0.ɵɵlistener("click", function IOOptionsDialogComponent_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r1); const rootFileInput_r8 = i0.ɵɵreference(20); return i0.ɵɵresetView(rootFileInput_r8.click()); });
+            i0.ɵɵelement(22, "img", 18);
+            i0.ɵɵtext(23, " Load .root ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(24, "input", 19, 3);
+            i0.ɵɵlistener("change", function IOOptionsDialogComponent_Template_input_change_24_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleRootJSONInput($event.target.files)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(26, "button", 13);
+            i0.ɵɵlistener("click", function IOOptionsDialogComponent_Template_button_click_26_listener() { i0.ɵɵrestoreView(_r1); const rootJSONFileInput_r9 = i0.ɵɵreference(25); return i0.ɵɵresetView(rootJSONFileInput_r9.click()); });
+            i0.ɵɵelement(27, "img", 18);
+            i0.ɵɵtext(28, " Load .json.gz ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(29, "p", 10)(30, "b");
+            i0.ɵɵtext(31, "Scene");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(32, "div", 11)(33, "button", 20);
+            i0.ɵɵlistener("click", function IOOptionsDialogComponent_Template_button_click_33_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.saveScene()); });
+            i0.ɵɵelement(34, "img", 21);
+            i0.ɵɵtext(35, " Save scene ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(36, "input", 22, 4);
+            i0.ɵɵlistener("change", function IOOptionsDialogComponent_Template_input_change_36_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handlePhoenixInput($event.target.files)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(38, "button", 23);
+            i0.ɵɵlistener("click", function IOOptionsDialogComponent_Template_button_click_38_listener() { i0.ɵɵrestoreView(_r1); const loadSceneInput_r10 = i0.ɵɵreference(37); return i0.ɵɵresetView(loadSceneInput_r10.click()); });
+            i0.ɵɵelement(39, "img", 24);
+            i0.ɵɵtext(40, " Load scene ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(41, "button", 25);
+            i0.ɵɵlistener("click", function IOOptionsDialogComponent_Template_button_click_41_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.exportOBJ()); });
+            i0.ɵɵelement(42, "img", 14);
+            i0.ɵɵtext(43, " Save OBJ ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(44, "div", 26)(45, "button", 27);
+            i0.ɵɵlistener("click", function IOOptionsDialogComponent_Template_button_click_45_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onClose()); });
+            i0.ɵɵtext(46, " Close ");
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngIf", ctx.eventDataImportOptions.length > 0);
+        } }, dependencies: [i2.NgForOf, i2.NgIf, i1$2.MatDialogTitle, i1$2.MatDialogActions, i1$2.MatDialogContent, i3.MatButton], styles: [".row[_ngcontent-%COMP%]{justify-content:center;margin:1rem 0}.file-input[_ngcontent-%COMP%]{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.file-input-button[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]{padding:.8em .2em;width:7rem}.file-input-button.load-export[_ngcontent-%COMP%]   img[_ngcontent-%COMP%]{max-height:1.2em}.file-input-button.export-button[_ngcontent-%COMP%]{background-color:#cb7133}.file-input-button.export-button[_ngcontent-%COMP%]:hover{background-color:#ad5b2d}.file-input-button[_ngcontent-%COMP%]   img[_ngcontent-%COMP%]{max-height:2em;display:block;width:100%}.file-input-button[_ngcontent-%COMP%]:hover{background-color:#118ab2}#exportScene[_ngcontent-%COMP%]{background-color:#5bd99e}#exportScene[_ngcontent-%COMP%]:hover{background-color:#05c292}#importScene[_ngcontent-%COMP%]{background-color:#ecc25e}#importScene[_ngcontent-%COMP%]:hover{background-color:#d6b44d}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IOOptionsDialogComponent, [{
+        type: Component,
+        args: [{ selector: 'app-io-options-dialog', template: "<div class=\"dialog\">\n  <h1 mat-dialog-title>Import and export</h1>\n  <div mat-dialog-content class=\"dialog-content\">\n    <div *ngIf=\"eventDataImportOptions.length > 0\">\n      <p class=\"text-center\"><b>Event data</b></p>\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    </div>\n\n    <p class=\"text-center\"><b>Geometries</b></p>\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\"><b>Scene</b></p>\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\n  <div mat-dialog-actions align=\"end\">\n    <button mat-flat-button color=\"primary\" (click)=\"onClose()\" cdkFocusInitial>\n      Close\n    </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"] }]
+    }], () => [{ type: EventDisplayService }, { type: i1$2.MatDialogRef }], { eventDataImportOptions: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(IOOptionsDialogComponent, { className: "IOOptionsDialogComponent", filePath: "components/ui-menu/io-options/io-options-dialog/io-options-dialog.component.ts", lineNumber: 21 }); })();
+
+class IoOptionsComponent {
+    dialog;
+    eventDataImportOptions = Object.values(EventDataFormat);
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    openIODialog() {
+        const dialogRef = this.dialog.open(IOOptionsDialogComponent, {
+            panelClass: 'dialog',
+        });
+        dialogRef.componentInstance.eventDataImportOptions =
+            this.eventDataImportOptions;
+    }
+    static ɵfac = function IoOptionsComponent_Factory(t) { return new (t || IoOptionsComponent)(i0.ɵɵdirectiveInject(i1$2.MatDialog)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: IoOptionsComponent, selectors: [["app-io-options"]], inputs: { eventDataImportOptions: "eventDataImportOptions" }, decls: 1, vars: 1, consts: [["tooltip", "Import and export options", "icon", "import", 3, "click", "active"]], template: function IoOptionsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-menu-toggle", 0);
+            i0.ɵɵlistener("click", function IoOptionsComponent_Template_app_menu_toggle_click_0_listener() { return ctx.openIODialog(); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("active", false);
+        } }, dependencies: [MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IoOptionsComponent, [{
+        type: 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" }]
+    }], () => [{ type: i1$2.MatDialog }], { eventDataImportOptions: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(IoOptionsComponent, { className: "IoOptionsComponent", filePath: "components/ui-menu/io-options/io-options.component.ts", lineNumber: 14 }); })();
+
+class MainViewToggleComponent {
+    eventDisplay;
+    orthographicView = false;
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+    }
+    switchMainView() {
+        this.orthographicView = !this.orthographicView;
+        this.eventDisplay
+            .getUIManager()
+            .toggleOrthographicView(this.orthographicView);
+    }
+    static ɵfac = function MainViewToggleComponent_Factory(t) { return new (t || MainViewToggleComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MainViewToggleComponent, selectors: [["app-main-view-toggle"]], decls: 1, vars: 2, consts: [[3, "click", "icon", "matTooltip"]], template: function MainViewToggleComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-menu-toggle", 0);
+            i0.ɵɵlistener("click", function MainViewToggleComponent_Template_app_menu_toggle_click_0_listener() { return ctx.switchMainView(); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("icon", ctx.orthographicView ? "perspective" : "orthographic")("matTooltip", "Switch to " + (ctx.orthographicView ? "perspective" : "orthographic") + " view");
+        } }, dependencies: [i3$1.MatTooltip, MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MainViewToggleComponent, [{
+        type: 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" }]
+    }], () => [{ type: EventDisplayService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MainViewToggleComponent, { className: "MainViewToggleComponent", filePath: "components/ui-menu/main-view-toggle/main-view-toggle.component.ts", lineNumber: 9 }); })();
+
+class ObjectClippingComponent {
+    eventDisplay;
+    clippingEnabled;
+    startClippingAngle;
+    openingClippingAngle;
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+        const stateManager = this.eventDisplay.getStateManager();
+        stateManager.clippingEnabled.onUpdate((clippingValue) => (this.clippingEnabled = clippingValue));
+        stateManager.startClippingAngle.onUpdate((value) => (this.startClippingAngle = value));
+        stateManager.openingClippingAngle.onUpdate((value) => (this.openingClippingAngle = value));
+    }
+    changeStartClippingAngle(startingAngle) {
+        this.eventDisplay.getUIManager().rotateStartAngleClipping(startingAngle);
+    }
+    changeOpeningClippingAngle(openingAngle) {
+        this.eventDisplay.getUIManager().rotateOpeningAngleClipping(openingAngle);
+    }
+    toggleClipping(change) {
+        const value = change.checked;
+        this.eventDisplay.getUIManager().setClipping(value);
+        this.clippingEnabled = value;
+    }
+    static ɵfac = function ObjectClippingComponent_Factory(t) { return new (t || ObjectClippingComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ObjectClippingComponent, selectors: [["app-object-clipping"]], decls: 17, vars: 5, consts: [["menu", ""], ["clippingCheckbox", ""], ["startingAngleSlider", ""], ["openingAngleSlider", ""], [1, "mat-menu"], ["mat-menu-item", "", 3, "click"], [3, "click", "change", "checked"], ["mat-menu-item", "", 1, "slider-btn", 3, "focus"], ["min", "0", "max", "360", "step", "1", "thumbLabel", ""], ["matSliderThumb", "", 3, "valueChange", "value"], ["tooltip", "Geometry clipping", "icon", "clipping", 3, "matMenuTriggerFor", "active"]], template: function ObjectClippingComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "mat-menu", 4, 0)(2, "button", 5);
+            i0.ɵɵlistener("click", function ObjectClippingComponent_Template_button_click_2_listener($event) { i0.ɵɵrestoreView(_r1); const clippingCheckbox_r2 = i0.ɵɵreference(4); $event.stopPropagation(); return i0.ɵɵresetView(clippingCheckbox_r2._inputElement.nativeElement.click()); });
+            i0.ɵɵelementStart(3, "mat-checkbox", 6, 1);
+            i0.ɵɵlistener("click", function ObjectClippingComponent_Template_mat_checkbox_click_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("change", function ObjectClippingComponent_Template_mat_checkbox_change_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleClipping($event)); });
+            i0.ɵɵtext(5, " Clipping ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(6, "button", 7);
+            i0.ɵɵlistener("focus", function ObjectClippingComponent_Template_button_focus_6_listener() { i0.ɵɵrestoreView(_r1); const startingAngleSlider_r3 = i0.ɵɵreference(9); return i0.ɵɵresetView(startingAngleSlider_r3.focus()); });
+            i0.ɵɵelementStart(7, "mat-slider", 8)(8, "input", 9, 2);
+            i0.ɵɵlistener("valueChange", function ObjectClippingComponent_Template_input_valueChange_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeStartClippingAngle($event)); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtext(10, " Start Angle ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "button", 7);
+            i0.ɵɵlistener("focus", function ObjectClippingComponent_Template_button_focus_11_listener() { i0.ɵɵrestoreView(_r1); const openingAngleSlider_r4 = i0.ɵɵreference(14); return i0.ɵɵresetView(openingAngleSlider_r4.focus()); });
+            i0.ɵɵelementStart(12, "mat-slider", 8)(13, "input", 9, 3);
+            i0.ɵɵlistener("valueChange", function ObjectClippingComponent_Template_input_valueChange_13_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeOpeningClippingAngle($event)); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtext(15, " Opening Angle ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(16, "app-menu-toggle", 10);
+        } if (rf & 2) {
+            const menu_r5 = i0.ɵɵreference(1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("checked", ctx.clippingEnabled);
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("value", ctx.startClippingAngle);
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("value", ctx.openingClippingAngle);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("matMenuTriggerFor", menu_r5)("active", ctx.clippingEnabled);
+        } }, dependencies: [i3$2.MatMenu, i3$2.MatMenuItem, i3$2.MatMenuTrigger, i2$1.MatSlider, i2$1.MatSliderThumb, i5.MatCheckbox, MenuToggleComponent], styles: [".slider-btn[_ngcontent-%COMP%]{overflow:visible}mat-slider[_ngcontent-%COMP%]{margin-left:.75rem;margin-right:.75rem}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ObjectClippingComponent, [{
+        type: 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    >\n      Clipping\n    </mat-checkbox>\n  </button>\n  <button\n    class=\"slider-btn\"\n    mat-menu-item\n    (focus)=\"startingAngleSlider.focus()\"\n  >\n    <mat-slider min=\"0\" max=\"360\" step=\"1\" thumbLabel>\n      <input\n        #startingAngleSlider\n        matSliderThumb\n        [value]=\"startClippingAngle\"\n        (valueChange)=\"changeStartClippingAngle($event)\"\n      />\n    </mat-slider>\n    Start Angle\n  </button>\n  <button class=\"slider-btn\" mat-menu-item (focus)=\"openingAngleSlider.focus()\">\n    <mat-slider min=\"0\" max=\"360\" step=\"1\" thumbLabel>\n      <input\n        #openingAngleSlider\n        matSliderThumb\n        [value]=\"openingClippingAngle\"\n        (valueChange)=\"changeOpeningClippingAngle($event)\"\n      />\n    </mat-slider>\n    Opening Angle\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"] }]
+    }], () => [{ type: EventDisplayService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ObjectClippingComponent, { className: "ObjectClippingComponent", filePath: "components/ui-menu/object-clipping/object-clipping.component.ts", lineNumber: 10 }); })();
+
+/**
+ * Pipe for transforming selected object attributes to a better format.
+ */
+class AttributePipe {
+    /**
+     * Transform the attribute to a better presentable format.
+     * @param value Value to be transformed.
+     * @param args Additional arguments.
+     * @returns The transformed value.
+     */
+    transform(value, args) {
+        let transformedValue = '';
+        if (Array.isArray(value)) {
+            transformedValue += '\n';
+            value.forEach((v) => (transformedValue += v + '\n'));
+        }
+        else {
+            transformedValue = value.toString();
+        }
+        return transformedValue;
+    }
+    static ɵfac = function AttributePipe_Factory(t) { return new (t || AttributePipe)(); };
+    static ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "attributePipe", type: AttributePipe, pure: true });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AttributePipe, [{
+        type: Pipe,
+        args: [{
+                name: 'attributePipe',
+            }]
+    }], null, null); })();
+
+function ObjectSelectionOverlayComponent_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4)(1, "strong");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "attributePipe");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const attribute_r1 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(attribute_r1.attributeName);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" : ", i0.ɵɵpipeBind1(4, 2, attribute_r1.attributeValue), " ");
+} }
+function ObjectSelectionOverlayComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵtemplate(1, ObjectSelectionOverlayComponent_div_1_div_1_Template, 5, 4, "div", 3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r1.selectedObject.attributes);
+} }
+class ObjectSelectionOverlayComponent {
+    eventDisplay;
+    // Attributes for displaying the information of selected objects
+    hiddenSelectedInfo;
+    selectedObject = { name: 'Object', attributes: [] };
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+    }
+    ngOnInit() {
+        this.eventDisplay.allowSelection(this.selectedObject);
+    }
+    static ɵfac = function ObjectSelectionOverlayComponent_Factory(t) { return new (t || ObjectSelectionOverlayComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ObjectSelectionOverlayComponent, selectors: [["app-object-selection-overlay"]], inputs: { hiddenSelectedInfo: "hiddenSelectedInfo" }, decls: 2, vars: 3, consts: [["icon", "cursor", 3, "overlayTitle", "active"], ["id", "selectedObjectPanelBody", "class", "m-1", 4, "ngIf"], ["id", "selectedObjectPanelBody", 1, "m-1"], ["class", "attributeField", 4, "ngFor", "ngForOf"], [1, "attributeField"]], template: function ObjectSelectionOverlayComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-overlay", 0);
+            i0.ɵɵtemplate(1, ObjectSelectionOverlayComponent_div_1_Template, 2, 1, "div", 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("overlayTitle", ctx.selectedObject.name)("active", !ctx.hiddenSelectedInfo);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.selectedObject.attributes.length > 0);
+        } }, dependencies: [i2.NgForOf, i2.NgIf, OverlayComponent, AttributePipe], styles: ["#selectedObjectPanelBody[_ngcontent-%COMP%]{padding:0 .8em;overflow:auto;max-width:300px;max-height:16rem;min-width:7rem}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ObjectSelectionOverlayComponent, [{
+        type: 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"] }]
+    }], () => [{ type: EventDisplayService }], { hiddenSelectedInfo: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ObjectSelectionOverlayComponent, { className: "ObjectSelectionOverlayComponent", filePath: "components/ui-menu/object-selection/object-selection-overlay/object-selection-overlay.component.ts", lineNumber: 9 }); })();
+
+class ObjectSelectionComponent {
+    overlay;
+    eventDisplay;
+    // Attributes for displaying the information of selected objects
+    hiddenSelectedInfo = true;
+    overlayWindow;
+    constructor(overlay, eventDisplay) {
+        this.overlay = overlay;
+        this.eventDisplay = eventDisplay;
+    }
+    ngOnInit() {
+        const overlayRef = this.overlay.create();
+        const overlayPortal = new ComponentPortal(ObjectSelectionOverlayComponent);
+        this.overlayWindow = overlayRef.attach(overlayPortal);
+        this.overlayWindow.instance.hiddenSelectedInfo = this.hiddenSelectedInfo;
+    }
+    ngOnDestroy() {
+        this.overlayWindow.destroy();
+    }
+    toggleOverlay() {
+        this.hiddenSelectedInfo = !this.hiddenSelectedInfo;
+        this.overlayWindow.instance.hiddenSelectedInfo = this.hiddenSelectedInfo;
+        this.eventDisplay.enableSelecting(!this.hiddenSelectedInfo);
+    }
+    static ɵfac = function ObjectSelectionComponent_Factory(t) { return new (t || ObjectSelectionComponent)(i0.ɵɵdirectiveInject(i1$1.Overlay), i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ObjectSelectionComponent, selectors: [["app-object-selection"]], decls: 1, vars: 1, consts: [["tooltip", "Object selection", "icon", "cursor", 3, "click", "active"]], template: function ObjectSelectionComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-menu-toggle", 0);
+            i0.ɵɵlistener("click", function ObjectSelectionComponent_Template_app_menu_toggle_click_0_listener() { return ctx.toggleOverlay(); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("active", !ctx.hiddenSelectedInfo);
+        } }, dependencies: [MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ObjectSelectionComponent, [{
+        type: 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" }]
+    }], () => [{ type: i1$1.Overlay }, { type: EventDisplayService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ObjectSelectionComponent, { className: "ObjectSelectionComponent", filePath: "components/ui-menu/object-selection/object-selection.component.ts", lineNumber: 12 }); })();
+
+const _c0$6 = ["overlayWindow"];
+class OverlayViewWindowComponent {
+    eventDisplay;
+    showOverlay = true;
+    transparentBody = false;
+    orthographicView = false;
+    overlayViewFixed = false;
+    overlayWindow;
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+    }
+    ngAfterViewInit() {
+        const canvas = this.initializeCanvas(this.overlayWindow.nativeElement);
+        this.eventDisplay.setOverlayRenderer(canvas);
+    }
+    initializeCanvas(canvas) {
+        const width = window.innerWidth / 2.5;
+        const 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;
+    }
+    switchOverlayView() {
+        this.orthographicView = !this.orthographicView;
+        this.eventDisplay
+            .getUIManager()
+            .toggleOrthographicView(this.orthographicView);
+    }
+    fixOverlayView() {
+        this.overlayViewFixed = !this.overlayViewFixed;
+        this.eventDisplay.fixOverlayView(this.overlayViewFixed);
+    }
+    toggleBgTransparency() {
+        this.transparentBody = !this.transparentBody;
+    }
+    static ɵfac = function OverlayViewWindowComponent_Factory(t) { return new (t || OverlayViewWindowComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverlayViewWindowComponent, selectors: [["app-overlay-view-window"]], viewQuery: function OverlayViewWindowComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$6, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.overlayWindow = _t.first);
+        } }, inputs: { showOverlay: "showOverlay" }, decls: 8, vars: 9, consts: [["overlayWindow", ""], ["overlayTitle", "Overlay View", "icon", "overlay", 3, "resizable", "transparentBody", "active", "keepAspectRatioFixed"], [1, "overlay-view-wrapper"], ["id", "overlay-canvas", 3, "hidden"], [1, "overlay-view-controls", "position-absolute", "d-flex", "flex-row"], ["icon", "transparent", "matTooltip", "Toggle background transparency", 1, "overlay-view-control", 3, "click"], ["icon", "move-lock", 1, "overlay-view-control", 3, "click", "matTooltip", "active"], [1, "overlay-view-control", 3, "click", "icon", "matTooltip"]], template: function OverlayViewWindowComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "app-overlay", 1)(1, "div", 2);
+            i0.ɵɵelement(2, "canvas", 3, 0);
+            i0.ɵɵelementStart(4, "div", 4)(5, "app-menu-toggle", 5);
+            i0.ɵɵlistener("click", function OverlayViewWindowComponent_Template_app_menu_toggle_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleBgTransparency()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "app-menu-toggle", 6);
+            i0.ɵɵlistener("click", function OverlayViewWindowComponent_Template_app_menu_toggle_click_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fixOverlayView()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "app-menu-toggle", 7);
+            i0.ɵɵlistener("click", function OverlayViewWindowComponent_Template_app_menu_toggle_click_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.switchOverlayView()); });
+            i0.ɵɵelementEnd()()()();
+        } if (rf & 2) {
+            i0.ɵɵproperty("resizable", true)("transparentBody", ctx.transparentBody)("active", ctx.showOverlay)("keepAspectRatioFixed", true);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("hidden", !ctx.showOverlay);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("matTooltip", (ctx.overlayViewFixed ? "Restore" : "Fix") + " overlay view")("active", ctx.overlayViewFixed);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("icon", ctx.orthographicView ? "orthographic" : "perspective")("matTooltip", "Switch to " + (ctx.orthographicView ? "orthographic" : "perspective") + " view");
+        } }, dependencies: [i3$1.MatTooltip, MenuToggleComponent, OverlayComponent], styles: ["#overlay-canvas[_ngcontent-%COMP%]{background-color:#0000001a;width:100%}.overlay-view-controls[_ngcontent-%COMP%]{bottom:1em;right:1em;opacity:0;transition:opacity .2s}.overlay-view-controls[_ngcontent-%COMP%]   .overlay-view-control[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]:hover   .overlay-view-controls[_ngcontent-%COMP%]{opacity:1;transition:opacity .2s}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayViewWindowComponent, [{
+        type: 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  [keepAspectRatioFixed]=\"true\"\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"] }]
+    }], () => [{ type: EventDisplayService }], { showOverlay: [{
+            type: Input
+        }], overlayWindow: [{
+            type: ViewChild,
+            args: ['overlayWindow']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OverlayViewWindowComponent, { className: "OverlayViewWindowComponent", filePath: "components/ui-menu/overlay-view/overlay-view-window/overlay-view-window.component.ts", lineNumber: 10 }); })();
+
+class OverlayViewComponent {
+    overlay;
+    overlayWindow;
+    showOverlay = false;
+    constructor(overlay) {
+        this.overlay = overlay;
+    }
+    ngOnInit() {
+        const overlayRef = this.overlay.create();
+        const overlayPortal = new ComponentPortal(OverlayViewWindowComponent);
+        this.overlayWindow = overlayRef.attach(overlayPortal);
+        this.overlayWindow.instance.showOverlay = this.showOverlay;
+    }
+    ngOnDestroy() {
+        this.overlayWindow.destroy();
+    }
+    toggleOverlay() {
+        this.showOverlay = !this.showOverlay;
+        this.overlayWindow.instance.showOverlay = this.showOverlay;
+    }
+    static ɵfac = function OverlayViewComponent_Factory(t) { return new (t || OverlayViewComponent)(i0.ɵɵdirectiveInject(i1$1.Overlay)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverlayViewComponent, selectors: [["app-overlay-view"]], decls: 1, vars: 1, consts: [["tooltip", "Overlay view", "icon", "overlay", 3, "click", "active"]], template: function OverlayViewComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-menu-toggle", 0);
+            i0.ɵɵlistener("click", function OverlayViewComponent_Template_app_menu_toggle_click_0_listener() { return ctx.toggleOverlay(); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("active", ctx.showOverlay);
+        } }, dependencies: [MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayViewComponent, [{
+        type: 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" }]
+    }], () => [{ type: i1$1.Overlay }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OverlayViewComponent, { className: "OverlayViewComponent", filePath: "components/ui-menu/overlay-view/overlay-view.component.ts", lineNumber: 11 }); })();
+
+const _c0$5 = a0 => ({ visible: a0 });
+function TreeMenuItemComponent_ng_container_0_button_2_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 7);
+    i0.ɵɵlistener("click", function TreeMenuItemComponent_ng_container_0_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.isExpanded = !ctx_r2.isExpanded); });
+    i0.ɵɵelementStart(1, "mat-icon", 8);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.isExpanded ? "expand_more" : "chevron_right", " ");
+} }
+function TreeMenuItemComponent_ng_container_0_li_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "li");
+    i0.ɵɵelement(1, "app-tree-menu-item", 9);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const node_r4 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("node", node_r4);
+} }
+function TreeMenuItemComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 1);
+    i0.ɵɵtemplate(2, TreeMenuItemComponent_ng_container_0_button_2_Template, 3, 1, "button", 2);
+    i0.ɵɵelementStart(3, "div", 3);
+    i0.ɵɵlistener("click", function TreeMenuItemComponent_ng_container_0_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleVisibility(!ctx_r2.visible)); });
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "ul", 4)(6, "div", 5);
+    i0.ɵɵtemplate(7, TreeMenuItemComponent_ng_container_0_li_7_Template, 2, 1, "li", 6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$5, ctx_r2.visible));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.node.children);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.node.name, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("hidden", !ctx_r2.isExpanded);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", ctx_r2.node.children);
+} }
+class TreeMenuItemComponent {
+    eventDisplay;
+    children;
+    node;
+    isExpanded = false;
+    visible = true;
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+    }
+    toggleVisibility(visible) {
+        console.log("hi! it's " + this.node.name);
+        this.eventDisplay
+            .getUIManager()
+            .geometryVisibility(this.node.geometryId, visible);
+        this.visible = visible;
+        this.children.forEach((child) => child.toggleVisibility(visible));
+    }
+    static ɵfac = function TreeMenuItemComponent_Factory(t) { return new (t || TreeMenuItemComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TreeMenuItemComponent, selectors: [["app-tree-menu-item"]], viewQuery: function TreeMenuItemComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(TreeMenuItemComponent, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.children = _t);
+        } }, inputs: { node: "node" }, decls: 1, vars: 1, consts: [[4, "ngIf"], [1, "header", 3, "ngClass"], ["mat-icon-button", "", "matTreeNodeToggle", "", 3, "click", 4, "ngIf"], [1, "node-name", 3, "click"], ["hid", "", 3, "hidden"], [1, "children"], [4, "ngFor", "ngForOf"], ["mat-icon-button", "", "matTreeNodeToggle", "", 3, "click"], [1, "mat-icon-rtl-mirror"], [3, "node"]], template: function TreeMenuItemComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, TreeMenuItemComponent_ng_container_0_Template, 8, 7, "ng-container", 0);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.node);
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i3.MatIconButton, i4$2.MatIcon, TreeMenuItemComponent], styles: [".header[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]   .node-name[_ngcontent-%COMP%], .header[_ngcontent-%COMP%]   .mat-icon-rtl-mirror[_ngcontent-%COMP%]{color:var(--phoenix-text-color-secondary)}.header.visible[_ngcontent-%COMP%]   .node-name[_ngcontent-%COMP%], .header.visible[_ngcontent-%COMP%]   .mat-icon-rtl-mirror[_ngcontent-%COMP%]{color:var(--phoenix-accent)}.children[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{list-style-type:none}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TreeMenuItemComponent, [{
+        type: 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"] }]
+    }], () => [{ type: EventDisplayService }], { children: [{
+            type: ViewChildren,
+            args: [TreeMenuItemComponent]
+        }], node: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeMenuItemComponent, { className: "TreeMenuItemComponent", filePath: "components/ui-menu/tree-menu/tree-menu-item/tree-menu-item.component.ts", lineNumber: 16 }); })();
+
+class TreeMenuComponent {
+    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',
+                    },
+                ],
+            },
+        ],
+    };
+    constructor() { }
+    ngOnInit() { }
+    static ɵfac = function TreeMenuComponent_Factory(t) { return new (t || TreeMenuComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TreeMenuComponent, selectors: [["app-tree-menu"]], decls: 3, vars: 1, consts: [[1, "tree-wrapper"], [1, "tree-menu"], [3, "node"]], template: function TreeMenuComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵelement(2, "app-tree-menu-item", 2);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("node", ctx.rootNode);
+        } }, dependencies: [TreeMenuItemComponent], styles: [".tree-wrapper[_ngcontent-%COMP%]{position:absolute;top:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;align-content:center}.tree-menu[_ngcontent-%COMP%]{display:flex;flex-direction:column;justify-content:center;align-items:center;align-content:center;max-height:70vh;overflow-y:scroll}.example-tree-invisible[_ngcontent-%COMP%]{display:none}.example-tree[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%], .example-tree[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{margin-top:0;margin-bottom:0;list-style-type:none}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TreeMenuComponent, [{
+        type: 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"] }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeMenuComponent, { className: "TreeMenuComponent", filePath: "components/ui-menu/tree-menu/tree-menu.component.ts", lineNumber: 9 }); })();
+
+class CartesianGridConfigComponent {
+    data;
+    dialogRef;
+    eventDisplay;
+    cartesianPos = new Vector3();
+    originChangedSub = null;
+    stopShiftingSub = null;
+    showCartesianGrid;
+    gridConfig;
+    scale;
+    shiftGrid;
+    constructor(data, dialogRef, eventDisplay) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+        this.eventDisplay = eventDisplay;
+    }
+    ngOnInit() {
+        this.shiftGrid = this.eventDisplay.getThreeManager().shiftGrid;
+        this.showCartesianGrid = this.data.gridVisible;
+        this.scale = this.data.scale;
+        this.gridConfig = this.eventDisplay.getUIManager().getCartesianGridConfig();
+        this.cartesianPos = this.eventDisplay.getThreeManager().origin;
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    onSave(x, y, z) {
+        this.shiftCartesianGridByValues(new Vector3(x * 10, y * 10, z * 10));
+    }
+    shiftCartesianGridByPointer() {
+        this.shiftGrid = true;
+        this.eventDisplay.getUIManager().shiftCartesianGridByPointer();
+        this.originChangedSub = this.eventDisplay
+            .getThreeManager()
+            .originChanged.subscribe((intersect) => {
+            this.translateGrid(intersect);
+        });
+        this.stopShiftingSub = this.eventDisplay
+            .getThreeManager()
+            .stopShifting.subscribe((stop) => {
+            if (stop) {
+                this.originChangedSub.unsubscribe();
+                this.stopShiftingSub.unsubscribe();
+            }
+        });
+        this.onClose();
+    }
+    shiftCartesianGridByValues(position) {
+        this.translateGrid(position);
+        this.eventDisplay.getThreeManager().originChangedEmit(position);
+    }
+    translateGrid(position) {
+        const finalPos = position;
+        const initialPos = this.cartesianPos;
+        const difference = new Vector3(finalPos.x - initialPos.x, finalPos.y - initialPos.y, finalPos.z - initialPos.z);
+        this.eventDisplay.getUIManager().translateCartesianGrid(difference.clone());
+        this.eventDisplay
+            .getUIManager()
+            .translateCartesianLabels(difference.clone());
+        this.cartesianPos = finalPos;
+    }
+    addXYPlanes(zDistance) {
+        this.gridConfig.zDistance = Number(zDistance.target.value);
+        this.callSetShowCartesianGrid();
+    }
+    addYZPlanes(xDistance) {
+        this.gridConfig.xDistance = Number(xDistance.target.value);
+        this.callSetShowCartesianGrid();
+    }
+    addZXPlanes(yDistance) {
+        this.gridConfig.yDistance = Number(yDistance.target.value);
+        this.callSetShowCartesianGrid();
+    }
+    changeSparsity(sparsity) {
+        this.gridConfig.sparsity = Number(sparsity.target.value);
+        this.callSetShowCartesianGrid();
+    }
+    showXYPlanes(change) {
+        this.gridConfig.showXY = change.checked;
+        this.callSetShowCartesianGrid();
+    }
+    showYZPlanes(change) {
+        this.gridConfig.showYZ = change.checked;
+        this.callSetShowCartesianGrid();
+    }
+    showZXPlanes(change) {
+        this.gridConfig.showZX = change.checked;
+        this.callSetShowCartesianGrid();
+    }
+    callSetShowCartesianGrid() {
+        this.eventDisplay
+            .getUIManager()
+            .setShowCartesianGrid(this.showCartesianGrid, this.scale, this.gridConfig);
+    }
+    // helper function to calculate number of planes
+    calcPlanes(dis) {
+        return Math.max(0, 1 + 2 * Math.floor((dis * 10) / (this.scale * this.gridConfig.sparsity)));
+    }
+    static ɵfac = function CartesianGridConfigComponent_Factory(t) { return new (t || CartesianGridConfigComponent)(i0.ɵɵdirectiveInject(MAT_DIALOG_DATA), i0.ɵɵdirectiveInject(i1$2.MatDialogRef), i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CartesianGridConfigComponent, selectors: [["app-cartesian-grid-config"]], decls: 65, vars: 28, consts: [["xPos", ""], ["yPos", ""], ["zPos", ""], ["showXYPlanesCheckbox", ""], ["xyPlaneSlider", ""], ["showYZPlanesCheckbox", ""], ["yzPlaneSlider", ""], ["showZXPlanesCheckbox", ""], ["zxPlaneSlider", ""], ["sparsitySlider", ""], ["mat-dialog-title", ""], ["mat-dialog-content", "", 1, "container", "dialog-content"], [1, "item-config-single"], [1, "item-config-group"], ["for", "xPos", 1, "item-config-label"], ["type", "number", "placeholder", "Origin X", "name", "xPos", "id", "xPos", 1, "form-control", 3, "value"], ["for", "yPos", 1, "item-config-label"], ["type", "number", "placeholder", "Origin Y", "name", "yPos", "id", "yPos", 1, "form-control", 3, "value"], ["for", "zPos", 1, "item-config-label"], ["type", "number", "placeholder", "Origin Z", "name", "zPos", "id", "zPos", 1, "form-control", 3, "value"], ["mat-stroked-button", "", 3, "click", "disabled"], ["mat-menu-item", "", 1, "explain-button", 2, "margin", "0.5rem 0", 3, "click", "disabled"], [1, "explain-text"], ["mat-menu-item", "", 3, "click"], [3, "ngModelChange", "click", "change", "ngModel"], ["mat-menu-item", "", 1, "slider-btn", 3, "focus"], ["min", "-300", "step", "300", "thumbLabel", "", 3, "max"], ["matSliderThumb", "", 3, "input", "value"], ["min", "1", "max", "5", "step", "1", "thumbLabel", ""], ["mat-dialog-actions", "", "align", "end"], ["mat-flat-button", "", "color", "primary", "cdkFocusInitial", "", 3, "click"]], template: function CartesianGridConfigComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div")(1, "h1", 10);
+            i0.ɵɵtext(2, "Customize Cartesian Grid");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "div", 11)(4, "div", 12)(5, "div", 13)(6, "label", 14);
+            i0.ɵɵtext(7, "x (cm) : ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(8, "input", 15, 0);
+            i0.ɵɵpipe(10, "number");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "div", 13)(12, "label", 16);
+            i0.ɵɵtext(13, "y (cm) : ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(14, "input", 17, 1);
+            i0.ɵɵpipe(16, "number");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(17, "div", 13)(18, "label", 18);
+            i0.ɵɵtext(19, "z (cm) : ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(20, "input", 19, 2);
+            i0.ɵɵpipe(22, "number");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(23, "button", 20);
+            i0.ɵɵlistener("click", function CartesianGridConfigComponent_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r1); const xPos_r2 = i0.ɵɵreference(9); const yPos_r3 = i0.ɵɵreference(15); const zPos_r4 = i0.ɵɵreference(21); return i0.ɵɵresetView(ctx.onSave(xPos_r2.value, yPos_r3.value, zPos_r4.value)); });
+            i0.ɵɵtext(24, " Save ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(25, "button", 21);
+            i0.ɵɵlistener("click", function CartesianGridConfigComponent_Template_button_click_25_listener($event) { i0.ɵɵrestoreView(_r1); $event.stopPropagation(); return i0.ɵɵresetView(ctx.shiftCartesianGridByPointer()); });
+            i0.ɵɵtext(26, " Shift Cartesian Grid on click ");
+            i0.ɵɵelementStart(27, "p", 22);
+            i0.ɵɵtext(28, " Click on a point to shift the grid. Keep clicking at various points to continue shifting. Right click to stop. ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(29, "div")(30, "button", 23);
+            i0.ɵɵlistener("click", function CartesianGridConfigComponent_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r1); const showXYPlanesCheckbox_r5 = i0.ɵɵreference(32); return i0.ɵɵresetView(showXYPlanesCheckbox_r5._inputElement.nativeElement.click()); });
+            i0.ɵɵelementStart(31, "mat-checkbox", 24, 3);
+            i0.ɵɵtwoWayListener("ngModelChange", function CartesianGridConfigComponent_Template_mat_checkbox_ngModelChange_31_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.gridConfig.showXY, $event) || (ctx.gridConfig.showXY = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("click", function CartesianGridConfigComponent_Template_mat_checkbox_click_31_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("change", function CartesianGridConfigComponent_Template_mat_checkbox_change_31_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.showXYPlanes($event)); });
+            i0.ɵɵtext(33, "Show XY Planes ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(34, "button", 25);
+            i0.ɵɵlistener("focus", function CartesianGridConfigComponent_Template_button_focus_34_listener() { i0.ɵɵrestoreView(_r1); const xyPlaneSlider_r6 = i0.ɵɵreference(37); return i0.ɵɵresetView(xyPlaneSlider_r6.focus()); });
+            i0.ɵɵelementStart(35, "mat-slider", 26)(36, "input", 27, 4);
+            i0.ɵɵlistener("input", function CartesianGridConfigComponent_Template_input_input_36_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.addXYPlanes($event)); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtext(38);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(39, "button", 23);
+            i0.ɵɵlistener("click", function CartesianGridConfigComponent_Template_button_click_39_listener() { i0.ɵɵrestoreView(_r1); const showYZPlanesCheckbox_r7 = i0.ɵɵreference(41); return i0.ɵɵresetView(showYZPlanesCheckbox_r7._inputElement.nativeElement.click()); });
+            i0.ɵɵelementStart(40, "mat-checkbox", 24, 5);
+            i0.ɵɵtwoWayListener("ngModelChange", function CartesianGridConfigComponent_Template_mat_checkbox_ngModelChange_40_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.gridConfig.showYZ, $event) || (ctx.gridConfig.showYZ = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("click", function CartesianGridConfigComponent_Template_mat_checkbox_click_40_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("change", function CartesianGridConfigComponent_Template_mat_checkbox_change_40_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.showYZPlanes($event)); });
+            i0.ɵɵtext(42, "Show YZ Planes ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(43, "button", 25);
+            i0.ɵɵlistener("focus", function CartesianGridConfigComponent_Template_button_focus_43_listener() { i0.ɵɵrestoreView(_r1); const yzPlaneSlider_r8 = i0.ɵɵreference(46); return i0.ɵɵresetView(yzPlaneSlider_r8.focus()); });
+            i0.ɵɵelementStart(44, "mat-slider", 26)(45, "input", 27, 6);
+            i0.ɵɵlistener("input", function CartesianGridConfigComponent_Template_input_input_45_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.addYZPlanes($event)); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtext(47);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(48, "button", 23);
+            i0.ɵɵlistener("click", function CartesianGridConfigComponent_Template_button_click_48_listener() { i0.ɵɵrestoreView(_r1); const showZXPlanesCheckbox_r9 = i0.ɵɵreference(50); return i0.ɵɵresetView(showZXPlanesCheckbox_r9._inputElement.nativeElement.click()); });
+            i0.ɵɵelementStart(49, "mat-checkbox", 24, 7);
+            i0.ɵɵtwoWayListener("ngModelChange", function CartesianGridConfigComponent_Template_mat_checkbox_ngModelChange_49_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.gridConfig.showZX, $event) || (ctx.gridConfig.showZX = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("click", function CartesianGridConfigComponent_Template_mat_checkbox_click_49_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("change", function CartesianGridConfigComponent_Template_mat_checkbox_change_49_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.showZXPlanes($event)); });
+            i0.ɵɵtext(51, "Show ZX Planes ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(52, "button", 25);
+            i0.ɵɵlistener("focus", function CartesianGridConfigComponent_Template_button_focus_52_listener() { i0.ɵɵrestoreView(_r1); const zxPlaneSlider_r10 = i0.ɵɵreference(55); return i0.ɵɵresetView(zxPlaneSlider_r10.focus()); });
+            i0.ɵɵelementStart(53, "mat-slider", 26)(54, "input", 27, 8);
+            i0.ɵɵlistener("input", function CartesianGridConfigComponent_Template_input_input_54_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.addZXPlanes($event)); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtext(56);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(57, "button", 25);
+            i0.ɵɵlistener("focus", function CartesianGridConfigComponent_Template_button_focus_57_listener() { i0.ɵɵrestoreView(_r1); const sparsitySlider_r11 = i0.ɵɵreference(60); return i0.ɵɵresetView(sparsitySlider_r11.focus()); });
+            i0.ɵɵelementStart(58, "mat-slider", 28)(59, "input", 27, 9);
+            i0.ɵɵlistener("input", function CartesianGridConfigComponent_Template_input_input_59_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeSparsity($event)); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtext(61);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(62, "div", 29)(63, "button", 30);
+            i0.ɵɵlistener("click", function CartesianGridConfigComponent_Template_button_click_63_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onClose()); });
+            i0.ɵɵtext(64, " Close ");
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(8);
+            i0.ɵɵproperty("value", i0.ɵɵpipeBind2(10, 19, ctx.cartesianPos.x / 10, "1.2-2"));
+            i0.ɵɵadvance(6);
+            i0.ɵɵproperty("value", i0.ɵɵpipeBind2(16, 22, ctx.cartesianPos.y / 10, "1.2-2"));
+            i0.ɵɵadvance(6);
+            i0.ɵɵproperty("value", i0.ɵɵpipeBind2(22, 25, ctx.cartesianPos.z / 10, "1.2-2"));
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("disabled", ctx.shiftGrid);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", ctx.shiftGrid);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.gridConfig.showXY);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("max", ctx.scale);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("value", ctx.gridConfig.zDistance);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" XY Plane (", ctx.calcPlanes(ctx.gridConfig.zDistance), ") ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.gridConfig.showYZ);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("max", ctx.scale);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("value", ctx.gridConfig.xDistance);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" YZ Plane (", ctx.calcPlanes(ctx.gridConfig.xDistance), ") ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.gridConfig.showZX);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("max", ctx.scale);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("value", ctx.gridConfig.yDistance);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ZX Plane (", ctx.calcPlanes(ctx.gridConfig.yDistance), ") ");
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("value", ctx.gridConfig.sparsity);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" Sparsity (", ctx.gridConfig.sparsity, ") ");
+        } }, dependencies: [i1$2.MatDialogTitle, i1$2.MatDialogActions, i1$2.MatDialogContent, i3.MatButton, i4.NgControlStatus, i4.NgModel, i3$2.MatMenuItem, i2$1.MatSlider, i2$1.MatSliderThumb, i5.MatCheckbox, i2.DecimalPipe], styles: [".container[_ngcontent-%COMP%]{display:flex;flex-direction:row}.item-config-single[_ngcontent-%COMP%]{display:flex;flex-direction:column}.item-config-single[_ngcontent-%COMP%]   .item-config-group[_ngcontent-%COMP%]{margin:.1rem 2rem}.item-config-single[_ngcontent-%COMP%]   .item-config-group[_ngcontent-%COMP%]   .item-config-label[_ngcontent-%COMP%]{display:inline;margin:1rem}.item-config-single[_ngcontent-%COMP%]   .item-config-group[_ngcontent-%COMP%]   .form-control[_ngcontent-%COMP%]{width:60%;display:inline}.item-config-single[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{margin:.5rem 4rem}.item-config-single[_ngcontent-%COMP%]   .explain-button[_ngcontent-%COMP%]{padding-top:1rem}.item-config-single[_ngcontent-%COMP%]   .explain-text[_ngcontent-%COMP%]{width:20rem;opacity:.7;margin-top:.5rem;font-size:.9rem}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CartesianGridConfigComponent, [{
+        type: Component,
+        args: [{ selector: 'app-cartesian-grid-config', template: "<div>\n  <h1 mat-dialog-title>Customize Cartesian Grid</h1>\n\n  <div class=\"container dialog-content\" mat-dialog-content>\n    <div class=\"item-config-single\">\n      <div class=\"item-config-group\">\n        <label class=\"item-config-label\" for=\"xPos\">x (cm) : </label>\n        <input\n          type=\"number\"\n          placeholder=\"Origin X\"\n          [value]=\"cartesianPos.x / 10 | number: '1.2-2'\"\n          class=\"form-control\"\n          name=\"xPos\"\n          id=\"xPos\"\n          #xPos\n        />\n      </div>\n\n      <div class=\"item-config-group\">\n        <label class=\"item-config-label\" for=\"yPos\">y (cm) : </label>\n        <input\n          type=\"number\"\n          placeholder=\"Origin Y\"\n          [value]=\"cartesianPos.y / 10 | number: '1.2-2'\"\n          class=\"form-control\"\n          name=\"yPos\"\n          id=\"yPos\"\n          #yPos\n        />\n      </div>\n\n      <div class=\"item-config-group\">\n        <label class=\"item-config-label\" for=\"zPos\">z (cm) : </label>\n        <input\n          type=\"number\"\n          placeholder=\"Origin Z\"\n          [value]=\"cartesianPos.z / 10 | number: '1.2-2'\"\n          class=\"form-control\"\n          name=\"zPos\"\n          id=\"zPos\"\n          #zPos\n        />\n      </div>\n\n      <button\n        mat-stroked-button\n        (click)=\"onSave(xPos.value, yPos.value, zPos.value)\"\n        [disabled]=\"shiftGrid\"\n      >\n        Save\n      </button>\n\n      <button\n        style=\"margin: 0.5rem 0\"\n        mat-menu-item\n        class=\"explain-button\"\n        [disabled]=\"shiftGrid\"\n        (click)=\"$event.stopPropagation(); shiftCartesianGridByPointer()\"\n      >\n        Shift Cartesian Grid on click\n        <p class=\"explain-text\">\n          Click on a point to shift the grid. Keep clicking at various points to\n          continue shifting. Right click to stop.\n        </p>\n      </button>\n    </div>\n\n    <div>\n      <button\n        mat-menu-item\n        (click)=\"showXYPlanesCheckbox._inputElement.nativeElement.click()\"\n      >\n        <mat-checkbox\n          #showXYPlanesCheckbox\n          [(ngModel)]=\"gridConfig.showXY\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"showXYPlanes($event)\"\n          >Show XY Planes\n        </mat-checkbox>\n      </button>\n      <button class=\"slider-btn\" mat-menu-item (focus)=\"xyPlaneSlider.focus()\">\n        <mat-slider min=\"-300\" [max]=\"scale\" step=\"300\" thumbLabel>\n          <input\n            #xyPlaneSlider\n            matSliderThumb\n            [value]=\"gridConfig.zDistance\"\n            (input)=\"addXYPlanes($event)\"\n          />\n        </mat-slider>\n        XY Plane ({{ calcPlanes(gridConfig.zDistance) }})\n      </button>\n      <button\n        mat-menu-item\n        (click)=\"showYZPlanesCheckbox._inputElement.nativeElement.click()\"\n      >\n        <mat-checkbox\n          #showYZPlanesCheckbox\n          [(ngModel)]=\"gridConfig.showYZ\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"showYZPlanes($event)\"\n          >Show YZ Planes\n        </mat-checkbox>\n      </button>\n      <button class=\"slider-btn\" mat-menu-item (focus)=\"yzPlaneSlider.focus()\">\n        <mat-slider min=\"-300\" [max]=\"scale\" step=\"300\" thumbLabel>\n          <input\n            #yzPlaneSlider\n            matSliderThumb\n            [value]=\"gridConfig.xDistance\"\n            (input)=\"addYZPlanes($event)\"\n          />\n        </mat-slider>\n        YZ Plane ({{ calcPlanes(gridConfig.xDistance) }})\n      </button>\n      <button\n        mat-menu-item\n        (click)=\"showZXPlanesCheckbox._inputElement.nativeElement.click()\"\n      >\n        <mat-checkbox\n          #showZXPlanesCheckbox\n          [(ngModel)]=\"gridConfig.showZX\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"showZXPlanes($event)\"\n          >Show ZX Planes\n        </mat-checkbox>\n      </button>\n      <button class=\"slider-btn\" mat-menu-item (focus)=\"zxPlaneSlider.focus()\">\n        <mat-slider min=\"-300\" [max]=\"scale\" step=\"300\" thumbLabel>\n          <input\n            #zxPlaneSlider\n            matSliderThumb\n            [value]=\"gridConfig.yDistance\"\n            (input)=\"addZXPlanes($event)\"\n          />\n        </mat-slider>\n        ZX Plane ({{ calcPlanes(gridConfig.yDistance) }})\n      </button>\n      <button class=\"slider-btn\" mat-menu-item (focus)=\"sparsitySlider.focus()\">\n        <mat-slider min=\"1\" max=\"5\" step=\"1\" thumbLabel>\n          <input\n            #sparsitySlider\n            matSliderThumb\n            [value]=\"gridConfig.sparsity\"\n            (input)=\"changeSparsity($event)\"\n          />\n        </mat-slider>\n        Sparsity ({{ gridConfig.sparsity }})\n      </button>\n    </div>\n  </div>\n\n  <div mat-dialog-actions align=\"end\">\n    <button mat-flat-button color=\"primary\" (click)=\"onClose()\" cdkFocusInitial>\n      Close\n    </button>\n  </div>\n</div>\n", styles: [".container{display:flex;flex-direction:row}.item-config-single{display:flex;flex-direction:column}.item-config-single .item-config-group{margin:.1rem 2rem}.item-config-single .item-config-group .item-config-label{display:inline;margin:1rem}.item-config-single .item-config-group .form-control{width:60%;display:inline}.item-config-single button{margin:.5rem 4rem}.item-config-single .explain-button{padding-top:1rem}.item-config-single .explain-text{width:20rem;opacity:.7;margin-top:.5rem;font-size:.9rem}\n"] }]
+    }], () => [{ type: undefined, decorators: [{
+                type: Inject,
+                args: [MAT_DIALOG_DATA]
+            }] }, { type: i1$2.MatDialogRef }, { type: EventDisplayService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CartesianGridConfigComponent, { className: "CartesianGridConfigComponent", filePath: "components/ui-menu/view-options/cartesian-grid-config/cartesian-grid-config.component.ts", lineNumber: 13 }); })();
+
+function ViewOptionsComponent_button_29__svg_svg_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "svg", 15);
+    i0.ɵɵelement(1, "use");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const view_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵattributeInterpolate2("href", "assets/icons/", view_r8.icon, ".svg#", view_r8.icon, "");
+} }
+function ViewOptionsComponent_button_29_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 11);
+    i0.ɵɵlistener("click", function ViewOptionsComponent_button_29_Template_button_click_0_listener($event) { const view_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.displayView($event, view_r8)); });
+    i0.ɵɵtemplate(1, ViewOptionsComponent_button_29__svg_svg_1_Template, 2, 3, "svg", 14);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const view_r8 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", view_r8.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", view_r8.name, " ");
+} }
+class ViewOptionsComponent {
+    eventDisplay;
+    dialog;
+    trigger;
+    showCartesianGrid = false;
+    scale = 3000;
+    views;
+    show3DPoints;
+    origin = new Vector3(0, 0, 0);
+    sub;
+    constructor(eventDisplay, dialog) {
+        this.eventDisplay = eventDisplay;
+        this.dialog = dialog;
+    }
+    ngOnInit() {
+        this.views = this.eventDisplay.getUIManager().getPresetViews();
+        this.sub = this.eventDisplay
+            .getThreeManager()
+            .originChanged.subscribe((intersect) => {
+            this.origin = intersect;
+        });
+    }
+    openCartesianGridConfigDialog() {
+        this.dialog.open(CartesianGridConfigComponent, {
+            data: {
+                gridVisible: this.showCartesianGrid,
+                scale: this.scale,
+            },
+            position: {
+                bottom: '5rem',
+                left: '3rem',
+            },
+        });
+    }
+    displayView($event, view) {
+        $event.stopPropagation();
+        this.eventDisplay.getUIManager().displayView(view);
+    }
+    setAxis(change) {
+        const value = change.checked;
+        this.eventDisplay.getUIManager().setShowAxis(value);
+    }
+    setEtaPhiGrid(change) {
+        const value = change.checked;
+        this.eventDisplay.getUIManager().setShowEtaPhiGrid(value);
+    }
+    setCartesianGrid(change) {
+        this.showCartesianGrid = change.checked;
+        this.eventDisplay
+            .getUIManager()
+            .setShowCartesianGrid(this.showCartesianGrid, this.scale);
+    }
+    showLabels(change) {
+        this.eventDisplay.getUIManager().showLabels(change.checked);
+    }
+    show3DMousePoints(change) {
+        this.show3DPoints = change.checked;
+        this.eventDisplay.getUIManager().show3DMousePoints(this.show3DPoints);
+    }
+    toggleShowDistance(change) {
+        this.trigger.closeMenu();
+        this.eventDisplay.getUIManager().show3DDistance(change.checked);
+    }
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+    static ɵfac = function ViewOptionsComponent_Factory(t) { return new (t || ViewOptionsComponent)(i0.ɵɵdirectiveInject(EventDisplayService), i0.ɵɵdirectiveInject(i1$2.MatDialog)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ViewOptionsComponent, selectors: [["app-view-options"]], viewQuery: function ViewOptionsComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(MatMenuTrigger, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.trigger = _t.first);
+        } }, decls: 31, vars: 3, consts: [["viewOptions", ""], ["showCartesianGridCheckbox", ""], ["showEtaPhiGridCheckbox", ""], ["showAxisCheckbox", ""], ["showLabelsCheckbox", ""], ["showMouse3DPointsCheckbox", ""], ["show3DDistanceCheckbox", ""], ["mat-menu-item", ""], [3, "click", "change"], [1, "icon-wrapper", "icon-button", "btn-blank", "item-settings", 3, "click"], ["href", "assets/icons/gear.svg#gear"], ["mat-menu-item", "", 3, "click"], ["mat-menu-item", "", 3, "click", 4, "ngFor", "ngForOf"], ["tooltip", "View options and Tools", "icon", "views", 3, "matMenuTriggerFor", "active"], ["class", "view-icon", 4, "ngIf"], [1, "view-icon"]], template: function ViewOptionsComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "mat-menu", null, 0)(2, "button", 7)(3, "mat-checkbox", 8, 1);
+            i0.ɵɵlistener("click", function ViewOptionsComponent_Template_mat_checkbox_click_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("change", function ViewOptionsComponent_Template_mat_checkbox_change_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setCartesianGrid($event)); });
+            i0.ɵɵtext(5, "Show Cartesian Grid ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "button", 9);
+            i0.ɵɵlistener("click", function ViewOptionsComponent_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.openCartesianGridConfigDialog()); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(7, "svg");
+            i0.ɵɵelement(8, "use", 10);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(9, "button", 11);
+            i0.ɵɵlistener("click", function ViewOptionsComponent_Template_button_click_9_listener($event) { i0.ɵɵrestoreView(_r1); const showEtaPhiGridCheckbox_r2 = i0.ɵɵreference(11); $event.stopPropagation(); return i0.ɵɵresetView(showEtaPhiGridCheckbox_r2._inputElement.nativeElement.click()); });
+            i0.ɵɵelementStart(10, "mat-checkbox", 8, 2);
+            i0.ɵɵlistener("click", function ViewOptionsComponent_Template_mat_checkbox_click_10_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("change", function ViewOptionsComponent_Template_mat_checkbox_change_10_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setEtaPhiGrid($event)); });
+            i0.ɵɵtext(12, "Show Eta Phi Grid ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(13, "button", 11);
+            i0.ɵɵlistener("click", function ViewOptionsComponent_Template_button_click_13_listener($event) { i0.ɵɵrestoreView(_r1); const showAxisCheckbox_r3 = i0.ɵɵreference(15); $event.stopPropagation(); return i0.ɵɵresetView(showAxisCheckbox_r3._inputElement.nativeElement.click()); });
+            i0.ɵɵelementStart(14, "mat-checkbox", 8, 3);
+            i0.ɵɵlistener("click", function ViewOptionsComponent_Template_mat_checkbox_click_14_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("change", function ViewOptionsComponent_Template_mat_checkbox_change_14_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setAxis($event)); });
+            i0.ɵɵtext(16, "Show Axis ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(17, "button", 11);
+            i0.ɵɵlistener("click", function ViewOptionsComponent_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); const showLabelsCheckbox_r4 = i0.ɵɵreference(19); return i0.ɵɵresetView(showLabelsCheckbox_r4._inputElement.nativeElement.click()); });
+            i0.ɵɵelementStart(18, "mat-checkbox", 8, 4);
+            i0.ɵɵlistener("click", function ViewOptionsComponent_Template_mat_checkbox_click_18_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("change", function ViewOptionsComponent_Template_mat_checkbox_change_18_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.showLabels($event)); });
+            i0.ɵɵtext(20, "Show Labels ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(21, "button", 11);
+            i0.ɵɵlistener("click", function ViewOptionsComponent_Template_button_click_21_listener($event) { i0.ɵɵrestoreView(_r1); const showMouse3DPointsCheckbox_r5 = i0.ɵɵreference(23); $event.stopPropagation(); return i0.ɵɵresetView(showMouse3DPointsCheckbox_r5._inputElement.nativeElement.click()); });
+            i0.ɵɵelementStart(22, "mat-checkbox", 8, 5);
+            i0.ɵɵlistener("click", function ViewOptionsComponent_Template_mat_checkbox_click_22_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("change", function ViewOptionsComponent_Template_mat_checkbox_change_22_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.show3DMousePoints($event)); });
+            i0.ɵɵtext(24, "Show 3D Coordinates ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(25, "button", 11);
+            i0.ɵɵlistener("click", function ViewOptionsComponent_Template_button_click_25_listener($event) { i0.ɵɵrestoreView(_r1); const show3DDistanceCheckbox_r6 = i0.ɵɵreference(27); $event.stopPropagation(); return i0.ɵɵresetView(show3DDistanceCheckbox_r6._inputElement.nativeElement.click()); });
+            i0.ɵɵelementStart(26, "mat-checkbox", 8, 6);
+            i0.ɵɵlistener("click", function ViewOptionsComponent_Template_mat_checkbox_click_26_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("change", function ViewOptionsComponent_Template_mat_checkbox_change_26_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleShowDistance($event)); });
+            i0.ɵɵtext(28, "Show 3D Distance ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(29, ViewOptionsComponent_button_29_Template, 3, 2, "button", 12);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(30, "app-menu-toggle", 13);
+        } if (rf & 2) {
+            const viewOptions_r10 = i0.ɵɵreference(1);
+            i0.ɵɵadvance(29);
+            i0.ɵɵproperty("ngForOf", ctx.views);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("matMenuTriggerFor", viewOptions_r10)("active", false);
+        } }, dependencies: [i2.NgForOf, i2.NgIf, i3$2.MatMenu, i3$2.MatMenuItem, i3$2.MatMenuTrigger, i5.MatCheckbox, MenuToggleComponent], styles: [".view-icon[_ngcontent-%COMP%]{width:1.2rem;height:1.2rem;margin-right:.5rem}.icon-wrapper[_ngcontent-%COMP%]{display:inline-block;width:1.5rem;height:1.5rem;padding:.23rem;transition:all .4s;transform:translateY(27%)}.icon-wrapper.icon-button[_ngcontent-%COMP%]:hover{background:var(--phoenix-options-icon-bg);border-radius:40%;cursor:pointer}.icon-wrapper[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%]{width:100%;height:100%;vertical-align:top}.item-settings[_ngcontent-%COMP%]{margin-right:.2rem;margin-left:.5rem}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ViewOptionsComponent, [{
+        type: Component,
+        args: [{ selector: 'app-view-options', template: "<mat-menu #viewOptions>\n  <button mat-menu-item>\n    <mat-checkbox\n      #showCartesianGridCheckbox\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"setCartesianGrid($event)\"\n      >Show Cartesian Grid\n    </mat-checkbox>\n    <button\n      class=\"icon-wrapper icon-button btn-blank item-settings\"\n      (click)=\"openCartesianGridConfigDialog()\"\n    >\n      <svg>\n        <use href=\"assets/icons/gear.svg#gear\"></use>\n      </svg>\n    </button>\n  </button>\n  <button\n    mat-menu-item\n    (click)=\"\n      $event.stopPropagation();\n      showEtaPhiGridCheckbox._inputElement.nativeElement.click()\n    \"\n  >\n    <mat-checkbox\n      #showEtaPhiGridCheckbox\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"setEtaPhiGrid($event)\"\n      >Show Eta Phi 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    (click)=\"showLabelsCheckbox._inputElement.nativeElement.click()\"\n  >\n    <mat-checkbox\n      #showLabelsCheckbox\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"showLabels($event)\"\n      >Show Labels\n    </mat-checkbox>\n  </button>\n  <button\n    mat-menu-item\n    (click)=\"\n      $event.stopPropagation();\n      showMouse3DPointsCheckbox._inputElement.nativeElement.click()\n    \"\n  >\n    <mat-checkbox\n      #showMouse3DPointsCheckbox\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"show3DMousePoints($event)\"\n      >Show 3D Coordinates\n    </mat-checkbox>\n  </button>\n  <button\n    mat-menu-item\n    (click)=\"\n      $event.stopPropagation();\n      show3DDistanceCheckbox._inputElement.nativeElement.click()\n    \"\n  >\n    <mat-checkbox\n      #show3DDistanceCheckbox\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"toggleShowDistance($event)\"\n      >Show 3D Distance\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 and Tools\"\n  icon=\"views\"\n  [active]=\"false\"\n>\n</app-menu-toggle>\n", styles: [".view-icon{width:1.2rem;height:1.2rem;margin-right:.5rem}.icon-wrapper{display:inline-block;width:1.5rem;height:1.5rem;padding:.23rem;transition:all .4s;transform:translateY(27%)}.icon-wrapper.icon-button:hover{background:var(--phoenix-options-icon-bg);border-radius:40%;cursor:pointer}.icon-wrapper svg{width:100%;height:100%;vertical-align:top}.item-settings{margin-right:.2rem;margin-left:.5rem}\n"] }]
+    }], () => [{ type: EventDisplayService }, { type: i1$2.MatDialog }], { trigger: [{
+            type: ViewChild,
+            args: [MatMenuTrigger]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ViewOptionsComponent, { className: "ViewOptionsComponent", filePath: "components/ui-menu/view-options/view-options.component.ts", lineNumber: 16 }); })();
+
+class VrToggleComponent {
+    eventDisplay;
+    vrSupported = false;
+    vrActive = false;
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+        // 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
+        navigator?.xr
+            ?.isSessionSupported?.(VRManager.SESSION_TYPE)
+            .then((supported) => {
+            if (supported) {
+                this.vrSupported = true;
+            }
+        })
+            .catch((err) => console.warn('Error in VR', err));
+    }
+    toggleVr() {
+        // If toggling VR on
+        if (!this.vrActive) {
+            this.eventDisplay.initXR(XRSessionType.VR, () => {
+                this.vrActive = false;
+                // Disable renderer XR and remove animation loop
+                this.eventDisplay.endXR(XRSessionType.VR);
+            });
+            this.vrActive = true;
+        }
+        else {
+            this.eventDisplay.endXR(XRSessionType.VR);
+            this.vrActive = false;
+        }
+    }
+    static ɵfac = function VrToggleComponent_Factory(t) { return new (t || VrToggleComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VrToggleComponent, selectors: [["app-vr-toggle"]], decls: 1, vars: 3, consts: [["icon", "vr", 3, "click", "disabled", "active", "tooltip"]], template: function VrToggleComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-menu-toggle", 0);
+            i0.ɵɵlistener("click", function VrToggleComponent_Template_app_menu_toggle_click_0_listener() { return ctx.vrSupported && ctx.toggleVr(); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("disabled", !ctx.vrSupported)("active", ctx.vrActive)("tooltip", ctx.vrSupported ? ctx.vrActive ? "Exit VR" : "Enter VR" : "VR not supported");
+        } }, dependencies: [MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VrToggleComponent, [{
+        type: 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" }]
+    }], () => [{ type: EventDisplayService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(VrToggleComponent, { className: "VrToggleComponent", filePath: "components/ui-menu/vr-toggle/vr-toggle.component.ts", lineNumber: 10 }); })();
+
+function ArToggleComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "button", 4);
+    i0.ɵɵlistener("click", function ArToggleComponent_ng_container_2_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleAr(true)); });
+    i0.ɵɵtext(2, "AR with overlays");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 4);
+    i0.ɵɵlistener("click", function ArToggleComponent_ng_container_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleAr(false)); });
+    i0.ɵɵtext(4, "AR without overlays");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} }
+function ArToggleComponent_button_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 5);
+    i0.ɵɵtext(1, "AR not supported");
+    i0.ɵɵelementEnd();
+} }
+class ArToggleComponent {
+    eventDisplay;
+    arSupported = false;
+    arActive = false;
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+        // 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
+        navigator.xr
+            ?.isSessionSupported?.(ARManager.SESSION_TYPE)
+            .then((supported) => {
+            if (supported) {
+                this.arSupported = true;
+            }
+        })
+            .catch((err) => console.warn('Error in AR', err));
+    }
+    toggleAr(enableDomOverlay = true) {
+        ARManager.enableDomOverlay = enableDomOverlay;
+        // If toggling AR on
+        if (!this.arActive) {
+            this.eventDisplay.initXR(XRSessionType.AR, () => {
+                this.arActive = false;
+                // Disable renderer XR and remove animation loop
+                this.eventDisplay.endXR(XRSessionType.AR);
+            });
+            this.arActive = true;
+        }
+        else {
+            this.eventDisplay.endXR(XRSessionType.AR);
+            this.arActive = false;
+        }
+    }
+    static ɵfac = function ArToggleComponent_Factory(t) { return new (t || ArToggleComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ArToggleComponent, selectors: [["app-ar-toggle"]], decls: 5, vars: 6, consts: [["arToggleOptions", ""], [4, "ngIf"], ["mat-menu-item", "", "disabled", "", 4, "ngIf"], ["icon", "ar", 3, "click", "matMenuTriggerFor", "disabled", "active", "tooltip"], ["mat-menu-item", "", 3, "click"], ["mat-menu-item", "", "disabled", ""]], template: function ArToggleComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "mat-menu", null, 0);
+            i0.ɵɵtemplate(2, ArToggleComponent_ng_container_2_Template, 5, 0, "ng-container", 1)(3, ArToggleComponent_button_3_Template, 2, 0, "button", 2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "app-menu-toggle", 3);
+            i0.ɵɵlistener("click", function ArToggleComponent_Template_app_menu_toggle_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.arSupported && (ctx.arActive ? ctx.toggleAr() : null)); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            const arToggleOptions_r4 = i0.ɵɵreference(1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.arSupported);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.arSupported);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("matMenuTriggerFor", arToggleOptions_r4)("disabled", !ctx.arSupported)("active", ctx.arActive)("tooltip", ctx.arSupported ? ctx.arActive ? "Exit AR" : "Enter AR" : "AR not supported");
+        } }, dependencies: [i2.NgIf, i3$2.MatMenu, i3$2.MatMenuItem, i3$2.MatMenuTrigger, MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArToggleComponent, [{
+        type: 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" }]
+    }], () => [{ type: EventDisplayService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ArToggleComponent, { className: "ArToggleComponent", filePath: "components/ui-menu/ar-toggle/ar-toggle.component.ts", lineNumber: 10 }); })();
+
+/**
+ * Component for adding zoom controls for the main and overlay cameras.
+ */
+class ZoomControlsComponent {
+    eventDisplay;
+    /** All camera being used by the scene. */
+    allCameras;
+    /** Factor to zoom by. */
+    zoomFactor = 1.1;
+    /** Timeout for clearing mouse hold. */
+    zoomTimeout;
+    /** The speed and time of zoom. */
+    zoomTime = 200;
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+    }
+    /**
+     * 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.
+     */
+    zoomTo(zoomFactor) {
+        this.zoomTime =
+            this.zoomTime > 30 ? Math.floor(this.zoomTime / 1.1) : this.zoomTime;
+        this.eventDisplay.zoomTo(zoomFactor, this.zoomTime);
+        this.zoomTimeout = setTimeout(() => {
+            this.zoomTo(zoomFactor);
+        }, this.zoomTime);
+    }
+    /**
+     * Zoom the camera in.
+     * @param leftClick Whether the mouse click is left or not.
+     */
+    zoomIn(leftClick) {
+        if (leftClick) {
+            this.zoomTo(1 / this.zoomFactor);
+        }
+    }
+    /**
+     * Zoom the camera out.
+     * @param leftClick Whether the mouse click is left or not.s
+     */
+    zoomOut(leftClick) {
+        if (leftClick) {
+            this.zoomTo(this.zoomFactor);
+        }
+    }
+    /**
+     * Reset the zoom time which decreases upon hold and clear the zoom timeout.
+     */
+    clearZoom() {
+        this.zoomTime = 200;
+        clearTimeout(this.zoomTimeout);
+    }
+    static ɵfac = function ZoomControlsComponent_Factory(t) { return new (t || ZoomControlsComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ZoomControlsComponent, selectors: [["app-zoom-controls"]], decls: 3, vars: 2, consts: [[1, "d-flex"], ["tooltip", "Zoom out (hold)", "icon", "zoom-out", 3, "click", "touchstart", "mousedown", "mouseup", "mouseleave", "touchend", "touchcancel", "touchmove", "active"], ["tooltip", "Zoom in (hold)", "icon", "zoom-in", 3, "click", "touchstart", "mousedown", "mouseup", "mouseleave", "touchend", "touchcancel", "touchmove", "active"]], template: function ZoomControlsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "app-menu-toggle", 1);
+            i0.ɵɵlistener("click", function ZoomControlsComponent_Template_app_menu_toggle_click_1_listener() { ctx.zoomOut(true); return ctx.clearZoom(); })("touchstart", function ZoomControlsComponent_Template_app_menu_toggle_touchstart_1_listener() { return ctx.zoomOut(true); })("mousedown", function ZoomControlsComponent_Template_app_menu_toggle_mousedown_1_listener($event) { return ctx.zoomOut($event.button === 0); })("mouseup", function ZoomControlsComponent_Template_app_menu_toggle_mouseup_1_listener() { return ctx.clearZoom(); })("mouseleave", function ZoomControlsComponent_Template_app_menu_toggle_mouseleave_1_listener() { return ctx.clearZoom(); })("touchend", function ZoomControlsComponent_Template_app_menu_toggle_touchend_1_listener() { return ctx.clearZoom(); })("touchcancel", function ZoomControlsComponent_Template_app_menu_toggle_touchcancel_1_listener() { return ctx.clearZoom(); })("touchmove", function ZoomControlsComponent_Template_app_menu_toggle_touchmove_1_listener() { return ctx.clearZoom(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(2, "app-menu-toggle", 2);
+            i0.ɵɵlistener("click", function ZoomControlsComponent_Template_app_menu_toggle_click_2_listener() { ctx.zoomIn(true); return ctx.clearZoom(); })("touchstart", function ZoomControlsComponent_Template_app_menu_toggle_touchstart_2_listener() { return ctx.zoomIn(true); })("mousedown", function ZoomControlsComponent_Template_app_menu_toggle_mousedown_2_listener($event) { return ctx.zoomIn($event.button === 0); })("mouseup", function ZoomControlsComponent_Template_app_menu_toggle_mouseup_2_listener() { return ctx.clearZoom(); })("mouseleave", function ZoomControlsComponent_Template_app_menu_toggle_mouseleave_2_listener() { return ctx.clearZoom(); })("touchend", function ZoomControlsComponent_Template_app_menu_toggle_touchend_2_listener() { return ctx.clearZoom(); })("touchcancel", function ZoomControlsComponent_Template_app_menu_toggle_touchcancel_2_listener() { return ctx.clearZoom(); })("touchmove", function ZoomControlsComponent_Template_app_menu_toggle_touchmove_2_listener() { return ctx.clearZoom(); });
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("active", false);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("active", false);
+        } }, dependencies: [MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ZoomControlsComponent, [{
+        type: 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" }]
+    }], () => [{ type: EventDisplayService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ZoomControlsComponent, { className: "ZoomControlsComponent", filePath: "components/ui-menu/zoom-controls/zoom-controls.component.ts", lineNumber: 12 }); })();
+
+class SSModeComponent {
+    ssMode = false;
+    ngOnInit() {
+        document.onfullscreenchange = () => {
+            if (!document.fullscreenElement) {
+                this.toggleSSMode();
+            }
+        };
+    }
+    toggleSSMode() {
+        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(() => {
+                document.addEventListener('click', this.onDocumentClick);
+                document.addEventListener('touchstart', this.onDocumentClick);
+            }, 1);
+            document.documentElement.requestFullscreen?.();
+        }
+        else {
+            document.removeEventListener('click', this.onDocumentClick);
+            document.removeEventListener('touchstart', this.onDocumentClick);
+        }
+    }
+    onDocumentClick = () => {
+        document.exitFullscreen?.();
+    };
+    static ɵfac = function SSModeComponent_Factory(t) { return new (t || SSModeComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SSModeComponent, selectors: [["app-ss-mode"]], decls: 1, vars: 1, consts: [["tooltip", "Screenshot mode: phoenix will become fullscreen and the menu is suppressed", "icon", "ss-mode", 3, "click", "active"]], template: function SSModeComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-menu-toggle", 0);
+            i0.ɵɵlistener("click", function SSModeComponent_Template_app_menu_toggle_click_0_listener() { return ctx.toggleSSMode(); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("active", ctx.ssMode);
+        } }, dependencies: [MenuToggleComponent], styles: ["#uiMenu,#phoenixMenu,#mainLogo,#statsElement{transition:opacity .4s}.ss-mode #uiMenu,.ss-mode #phoenixMenu,.ss-mode #mainLogo,.ss-mode #statsElement{visibility:hidden;opacity:0}\n"], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SSModeComponent, [{
+        type: Component,
+        args: [{ selector: 'app-ss-mode', encapsulation: ViewEncapsulation.None, template: "<app-menu-toggle\n  tooltip=\"Screenshot mode: phoenix will become fullscreen and the menu is suppressed\"\n  [active]=\"ssMode\"\n  icon=\"ss-mode\"\n  (click)=\"toggleSSMode()\"\n>\n</app-menu-toggle>\n", styles: ["#uiMenu,#phoenixMenu,#mainLogo,#statsElement{transition:opacity .4s}.ss-mode #uiMenu,.ss-mode #phoenixMenu,.ss-mode #mainLogo,.ss-mode #statsElement{visibility:hidden;opacity:0}\n"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SSModeComponent, { className: "SSModeComponent", filePath: "components/ui-menu/ss-mode/ss-mode.component.ts", lineNumber: 10 }); })();
+
+function MakePictureComponent_mat_radio_button_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-radio-button", 12);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const fitting_r4 = ctx.$implicit;
+    i0.ɵɵproperty("value", fitting_r4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", fitting_r4, " ");
+} }
+class MakePictureComponent {
+    eventDisplay;
+    fittings = ['Crop', 'Stretch'];
+    fitting = 'Crop';
+    width = 3840;
+    height = 2160;
+    disabled = false;
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+    }
+    ngOnInit() { }
+    checkSize() {
+        return this.eventDisplay
+            .getThreeManager()
+            .checkScreenShotCanvasSize(this.width, this.height, this.fitting);
+    }
+    setWidth(value) {
+        this.width = value;
+        this.disabled = !this.checkSize();
+    }
+    setHeight(value) {
+        this.height = value;
+        this.disabled = !this.checkSize();
+    }
+    buttonText() {
+        return this.disabled ? 'Size too large' : 'Create picture';
+    }
+    makePicture() {
+        this.eventDisplay
+            .getThreeManager()
+            .makeScreenShot(this.width, this.height, this.fitting);
+    }
+    static ɵfac = function MakePictureComponent_Factory(t) { return new (t || MakePictureComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MakePictureComponent, selectors: [["app-make-picture"]], decls: 20, vars: 11, consts: [["menu", ""], ["width", ""], ["height", ""], [1, "mat-menu"], ["mat-menu-item", "", 1, "size-input", 3, "click"], ["mapInput", "", "type", "number", 3, "change", "click", "value"], ["mat-menu-item", "", 3, "click"], [1, "fitting-radios", 3, "ngModelChange", "ngModel"], [3, "value", 4, "ngFor", "ngForOf"], ["mat-menu-item", "", 1, "make-picture", 3, "click", "disabled"], ["tooltip", "Creates a picture from the current view: directly saves a png of arbitrary size from the current view", "icon", "png", 3, "matMenuTriggerFor"], ["hidden", "", "id", "screenshotCanvas"], [3, "value"]], template: function MakePictureComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "mat-menu", 3, 0)(2, "button", 4);
+            i0.ɵɵlistener("click", function MakePictureComponent_Template_button_click_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
+            i0.ɵɵelementStart(3, "label");
+            i0.ɵɵtext(4, "width");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "input", 5, 1);
+            i0.ɵɵlistener("change", function MakePictureComponent_Template_input_change_5_listener() { i0.ɵɵrestoreView(_r1); const width_r2 = i0.ɵɵreference(6); return i0.ɵɵresetView(ctx.setWidth(width_r2.value)); })("click", function MakePictureComponent_Template_input_click_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(7, "button", 4);
+            i0.ɵɵlistener("click", function MakePictureComponent_Template_button_click_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
+            i0.ɵɵelementStart(8, "label");
+            i0.ɵɵtext(9, "height");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(10, "input", 5, 2);
+            i0.ɵɵlistener("change", function MakePictureComponent_Template_input_change_10_listener() { i0.ɵɵrestoreView(_r1); const height_r3 = i0.ɵɵreference(11); return i0.ɵɵresetView(ctx.setHeight(height_r3.value)); })("click", function MakePictureComponent_Template_input_click_10_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(12, "button", 6);
+            i0.ɵɵlistener("click", function MakePictureComponent_Template_button_click_12_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
+            i0.ɵɵelementStart(13, "mat-radio-group", 7);
+            i0.ɵɵtwoWayListener("ngModelChange", function MakePictureComponent_Template_mat_radio_group_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.fitting, $event) || (ctx.fitting = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵtemplate(14, MakePictureComponent_mat_radio_button_14_Template, 2, 2, "mat-radio-button", 8);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(15, "button", 9);
+            i0.ɵɵlistener("click", function MakePictureComponent_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.makePicture()); });
+            i0.ɵɵtext(16);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(17, "app-menu-toggle", 10);
+            i0.ɵɵelementStart(18, "div");
+            i0.ɵɵelement(19, "canvas", 11);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            const menu_r5 = i0.ɵɵreference(1);
+            i0.ɵɵadvance(5);
+            i0.ɵɵclassProp("badSize", ctx.disabled);
+            i0.ɵɵproperty("value", 3840);
+            i0.ɵɵadvance(5);
+            i0.ɵɵclassProp("badSize", ctx.disabled);
+            i0.ɵɵproperty("value", 2610);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.fitting);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngForOf", ctx.fittings);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("disabled", ctx.disabled);
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.buttonText(), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("matMenuTriggerFor", menu_r5);
+        } }, dependencies: [i2.NgForOf, i4.NgControlStatus, i4.NgModel, i3$2.MatMenu, i3$2.MatMenuItem, i3$2.MatMenuTrigger, i5$1.MatRadioGroup, i5$1.MatRadioButton, MenuToggleComponent], styles: [".size-input{background:transparent;color:var(--phoenix-text-color);text-align:center}.size-input label{width:60px}.size-input input{background:transparent;color:var(--phoenix-text-color);width:80px}.badSize{border-color:red}.make-picture{text-align:center;display:block}.make-picture span{padding:5px 25px;border:2px solid var(--phoenix-text-color);border-radius:8px}\n"], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MakePictureComponent, [{
+        type: Component,
+        args: [{ selector: 'app-make-picture', encapsulation: ViewEncapsulation.None, template: "<mat-menu class=\"mat-menu\" #menu>\n  <button mat-menu-item (click)=\"$event.stopPropagation()\" class=\"size-input\">\n    <label>width</label>\n    <input\n      #width\n      mapInput\n      type=\"number\"\n      [value]=\"3840\"\n      (change)=\"setWidth(width.value)\"\n      (click)=\"$event.stopPropagation()\"\n      [class.badSize]=\"disabled\"\n    />\n  </button>\n  <button mat-menu-item (click)=\"$event.stopPropagation()\" class=\"size-input\">\n    <label>height</label>\n    <input\n      #height\n      mapInput\n      type=\"number\"\n      [value]=\"2610\"\n      (change)=\"setHeight(height.value)\"\n      (click)=\"$event.stopPropagation()\"\n      [class.badSize]=\"disabled\"\n    />\n  </button>\n  <button mat-menu-item (click)=\"$event.stopPropagation()\">\n    <mat-radio-group [(ngModel)]=\"fitting\" class=\"fitting-radios\">\n      <mat-radio-button *ngFor=\"let fitting of fittings\" [value]=\"fitting\"\n        >{{ fitting }}\n      </mat-radio-button>\n    </mat-radio-group>\n  </button>\n  <button\n    mat-menu-item\n    [disabled]=\"disabled\"\n    class=\"make-picture\"\n    (click)=\"makePicture()\"\n  >\n    {{ buttonText() }}\n  </button>\n</mat-menu>\n<app-menu-toggle\n  [matMenuTriggerFor]=\"menu\"\n  tooltip=\"Creates a picture from the current view: directly saves a png of arbitrary size from the current view\"\n  icon=\"png\"\n>\n</app-menu-toggle>\n<div>\n  <canvas hidden id=\"screenshotCanvas\"></canvas>\n</div>\n", styles: [".size-input{background:transparent;color:var(--phoenix-text-color);text-align:center}.size-input label{width:60px}.size-input input{background:transparent;color:var(--phoenix-text-color);width:80px}.badSize{border-color:red}.make-picture{text-align:center;display:block}.make-picture span{padding:5px 25px;border:2px solid var(--phoenix-text-color);border-radius:8px}\n"] }]
+    }], () => [{ type: EventDisplayService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MakePictureComponent, { className: "MakePictureComponent", filePath: "components/ui-menu/make-picture/make-picture.component.ts", lineNumber: 11 }); })();
+
+class PerformanceToggleComponent {
+    eventDisplay;
+    performanceMode = false;
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+    }
+    togglePerformance() {
+        this.performanceMode = !this.performanceMode;
+        this.eventDisplay.getThreeManager().setAntialiasing(!this.performanceMode);
+    }
+    static ɵfac = function PerformanceToggleComponent_Factory(t) { return new (t || PerformanceToggleComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PerformanceToggleComponent, selectors: [["app-performance-toggle"]], decls: 1, vars: 1, consts: [["tooltip", "Performance mode", "icon", "performance", 3, "click", "active"]], template: function PerformanceToggleComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-menu-toggle", 0);
+            i0.ɵɵlistener("click", function PerformanceToggleComponent_Template_app_menu_toggle_click_0_listener() { return ctx.togglePerformance(); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("active", ctx.performanceMode);
+        } }, dependencies: [MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PerformanceToggleComponent, [{
+        type: 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" }]
+    }], () => [{ type: EventDisplayService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PerformanceToggleComponent, { className: "PerformanceToggleComponent", filePath: "components/ui-menu/performance-toggle/performance-toggle.component.ts", lineNumber: 9 }); })();
+
+const _c0$4 = ["*"];
+const _c1$1 = a0 => ({ "ui-menu-hidden": a0 });
+class UiMenuWrapperComponent {
+    hideUIMenu = false;
+    static ɵfac = function UiMenuWrapperComponent_Factory(t) { return new (t || UiMenuWrapperComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UiMenuWrapperComponent, selectors: [["app-ui-menu-wrapper"]], ngContentSelectors: _c0$4, decls: 6, vars: 5, consts: [["id", "uiMenu"], ["id", "hideUIMenu", "matTooltipPosition", "above", 3, "click", "matTooltip", "ngClass"], ["href", "assets/icons/expand.svg#expand"], ["id", "optionsPanel", 3, "hidden"]], template: function UiMenuWrapperComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
+            i0.ɵɵlistener("click", function UiMenuWrapperComponent_Template_button_click_1_listener() { return ctx.hideUIMenu = !ctx.hideUIMenu; });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(2, "svg");
+            i0.ɵɵelement(3, "use", 2);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(4, "div", 3);
+            i0.ɵɵprojection(5);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("matTooltip", ctx.hideUIMenu ? "Show toolbar" : "Hide toolbar")("ngClass", i0.ɵɵpureFunction1(3, _c1$1, ctx.hideUIMenu));
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("hidden", ctx.hideUIMenu);
+        } }, dependencies: [i2.NgClass, i3$1.MatTooltip], styles: ["#uiMenu[_ngcontent-%COMP%]{position:absolute;bottom:1rem;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}#optionsPanel[_ngcontent-%COMP%]{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}#hideUIMenu[_ngcontent-%COMP%]{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}#hideUIMenu[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%]{height:100%;width:100%;vertical-align:top;transition:all .3s}#hideUIMenu.ui-menu-hidden[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%]{transform:scaleY(-1);transition:all .3s}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UiMenuWrapperComponent, [{
+        type: Component,
+        args: [{ selector: 'app-ui-menu-wrapper', template: "<div id=\"uiMenu\">\n  <button\n    id=\"hideUIMenu\"\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    <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}#hideUIMenu{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}#hideUIMenu svg{height:100%;width:100%;vertical-align:top;transition:all .3s}#hideUIMenu.ui-menu-hidden svg{transform:scaleY(-1);transition:all .3s}\n"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UiMenuWrapperComponent, { className: "UiMenuWrapperComponent", filePath: "components/ui-menu/ui-menu-wrapper/ui-menu-wrapper.component.ts", lineNumber: 8 }); })();
+
+const _c0$3 = ["qrcodeCanvas"];
+class ShareLinkDialogComponent {
+    dialogRef;
+    baseLink;
+    shareLink;
+    embedLink;
+    urlOptions = Object.assign({}, phoenixURLOptions);
+    qrcodeCanvas;
+    constructor(dialogRef) {
+        this.dialogRef = dialogRef;
+        const locationHref = window.location.href;
+        const lastIndex = locationHref.lastIndexOf('?') === -1
+            ? locationHref.length
+            : locationHref.lastIndexOf('?');
+        this.baseLink = locationHref.slice(0, lastIndex);
+        this.shareLink = new ActiveVariable(this.baseLink);
+        this.embedLink = this.getEmbedLink();
+    }
+    ngAfterViewInit() {
+        this.updateQRCode(this.shareLink.value);
+        this.shareLink.onUpdate(this.updateQRCode.bind(this));
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    getEmbedLink(urlParametersString = '') {
+        return `<iframe src="${this.baseLink}?embed=true${urlParametersString ? '&' : ''}${urlParametersString}"></iframe>`;
+    }
+    setOptionValue(option, value) {
+        this.urlOptions[option] = value;
+        this.onOptionsChange();
+    }
+    onOptionsChange() {
+        const urlParametersString = Object.getOwnPropertyNames(this.urlOptions)
+            .reduce((filteredOptions, option) => {
+            if (this.urlOptions[option]) {
+                filteredOptions.push(`${option}=${encodeURI(this.urlOptions[option])}`);
+            }
+            return filteredOptions;
+        }, [])
+            .join('&');
+        this.shareLink.update(this.baseLink + (urlParametersString ? '?' : '') + urlParametersString);
+        this.embedLink = this.getEmbedLink(urlParametersString);
+    }
+    copyText(text, element) {
+        const 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(() => {
+            element.innerText = 'COPY';
+        }, 2000);
+    }
+    updateQRCode(link) {
+        QRCode.toCanvas(this.qrcodeCanvas.nativeElement, link);
+    }
+    static ɵfac = function ShareLinkDialogComponent_Factory(t) { return new (t || ShareLinkDialogComponent)(i0.ɵɵdirectiveInject(i1$2.MatDialogRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShareLinkDialogComponent, selectors: [["app-share-link-dialog"]], viewQuery: function ShareLinkDialogComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$3, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.qrcodeCanvas = _t.first);
+        } }, decls: 49, vars: 5, consts: [["qrcodeCanvas", ""], [1, "dialog"], ["mat-dialog-title", ""], ["mat-dialog-content", "", 1, "dialog-content"], [1, "form-group", "mt-2"], ["for", "eventDataFile"], ["type", "text", "id", "eventDataFile", "placeholder", "assets/files/event_data/atlaseventdump2.json", 1, "form-control", 3, "input", "value"], [1, "form-group"], ["for", "eventDataType"], ["id", "eventDataType", 1, "form-control", 3, "input"], ["selected", "", "value", ""], ["value", "jivexml"], ["value", "json"], ["for", "configuration"], ["type", "text", "id", "configuration", "placeholder", "assets/files/config/phoenix-config.json", 1, "form-control", 3, "input", "value"], [3, "change", "checked"], [1, "share-box", "my-2"], [1, "share-box-copy", 3, "click"], [1, "qrcode", "d-flex", "justify-content-center"], ["mat-dialog-actions", ""], ["mat-button", "", "cdkFocusInitial", "", 3, "click"]], template: function ShareLinkDialogComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 1)(1, "h1", 2);
+            i0.ɵɵtext(2, "Create shareable link");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "div", 3)(4, "h5");
+            i0.ɵɵtext(5, "URL options");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "div", 4)(7, "label", 5);
+            i0.ɵɵtext(8, "Event data file (URL or path)");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "input", 6);
+            i0.ɵɵlistener("input", function ShareLinkDialogComponent_Template_input_input_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setOptionValue("file", $event.target.value)); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(10, "div", 7)(11, "label", 8);
+            i0.ɵɵtext(12, "Event data type");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(13, "select", 9);
+            i0.ɵɵlistener("input", function ShareLinkDialogComponent_Template_select_input_13_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setOptionValue("type", $event.target.value)); });
+            i0.ɵɵelementStart(14, "option", 10);
+            i0.ɵɵtext(15, "Select");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(16, "option", 11);
+            i0.ɵɵtext(17, "JiveXML");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "option", 12);
+            i0.ɵɵtext(19, "JSON");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(20, "div", 7)(21, "label", 13);
+            i0.ɵɵtext(22, "Configuration (URL or path)");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(23, "input", 14);
+            i0.ɵɵlistener("input", function ShareLinkDialogComponent_Template_input_input_23_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setOptionValue("config", $event.target.value)); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(24, "div", 7)(25, "mat-checkbox", 15);
+            i0.ɵɵlistener("change", function ShareLinkDialogComponent_Template_mat_checkbox_change_25_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setOptionValue("hideWidgets", $event.checked)); });
+            i0.ɵɵtext(26, " Hide all widgets ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(27, "h5");
+            i0.ɵɵtext(28, "Share");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(29, "div", 16)(30, "span");
+            i0.ɵɵtext(31);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(32, "button", 17);
+            i0.ɵɵlistener("click", function ShareLinkDialogComponent_Template_button_click_32_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.copyText(ctx.shareLink.value, $event.target)); });
+            i0.ɵɵtext(33, " COPY ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(34, "h5");
+            i0.ɵɵtext(35, "Embed");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(36, "div", 16)(37, "span");
+            i0.ɵɵtext(38);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(39, "button", 17);
+            i0.ɵɵlistener("click", function ShareLinkDialogComponent_Template_button_click_39_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.copyText(ctx.embedLink, $event.target)); });
+            i0.ɵɵtext(40, " COPY ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(41, "h5");
+            i0.ɵɵtext(42, "QR Code");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(43, "div", 18);
+            i0.ɵɵelement(44, "canvas", null, 0);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(46, "div", 19)(47, "button", 20);
+            i0.ɵɵlistener("click", function ShareLinkDialogComponent_Template_button_click_47_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onClose()); });
+            i0.ɵɵtext(48, "Close");
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(9);
+            i0.ɵɵproperty("value", ctx.urlOptions.file);
+            i0.ɵɵadvance(14);
+            i0.ɵɵproperty("value", ctx.urlOptions.config);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("checked", ctx.urlOptions.hideWidgets);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(ctx.shareLink.value);
+            i0.ɵɵadvance(7);
+            i0.ɵɵtextInterpolate(ctx.embedLink);
+        } }, dependencies: [i1$2.MatDialogTitle, i1$2.MatDialogActions, i1$2.MatDialogContent, i3.MatButton, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i5.MatCheckbox], styles: [".share-box[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]   .share-box-copy[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]   .share-box-copy[_ngcontent-%COMP%]:hover{background:var(--phoenix-border)}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShareLinkDialogComponent, [{
+        type: 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.value }}</span>\n      <button\n        class=\"share-box-copy\"\n        (click)=\"copyText(shareLink.value, $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    <h5>QR Code</h5>\n    <div class=\"qrcode d-flex justify-content-center\">\n      <canvas #qrcodeCanvas></canvas>\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"] }]
+    }], () => [{ type: i1$2.MatDialogRef }], { qrcodeCanvas: [{
+            type: ViewChild,
+            args: ['qrcodeCanvas']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShareLinkDialogComponent, { className: "ShareLinkDialogComponent", filePath: "components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.ts", lineNumber: 11 }); })();
+
+class ShareLinkComponent {
+    dialog;
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    openShareLinkDialog() {
+        this.dialog.open(ShareLinkDialogComponent);
+    }
+    static ɵfac = function ShareLinkComponent_Factory(t) { return new (t || ShareLinkComponent)(i0.ɵɵdirectiveInject(i1$2.MatDialog)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShareLinkComponent, selectors: [["app-share-link"]], decls: 1, vars: 1, consts: [["tooltip", "Create shareable link", "icon", "share", 3, "click", "active"]], template: function ShareLinkComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-menu-toggle", 0);
+            i0.ɵɵlistener("click", function ShareLinkComponent_Template_app_menu_toggle_click_0_listener() { return ctx.openShareLinkDialog(); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("active", false);
+        } }, dependencies: [MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShareLinkComponent, [{
+        type: 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" }]
+    }], () => [{ type: i1$2.MatDialog }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShareLinkComponent, { className: "ShareLinkComponent", filePath: "components/ui-menu/share-link/share-link.component.ts", lineNumber: 10 }); })();
+
+const _c0$2 = ["*"];
+class UiMenuComponent {
+    eventDataImportOptions = Object.values(EventDataFormat);
+    animationPresets = defaultAnimationPresets;
+    static ɵfac = function UiMenuComponent_Factory(t) { return new (t || UiMenuComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UiMenuComponent, selectors: [["app-ui-menu"]], inputs: { eventDataImportOptions: "eventDataImportOptions", animationPresets: "animationPresets" }, ngContentSelectors: _c0$2, decls: 23, vars: 2, consts: [[3, "animationPresets"], [3, "eventDataImportOptions"]], template: function UiMenuComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "app-ui-menu-wrapper");
+            i0.ɵɵelement(1, "app-event-selector")(2, "app-zoom-controls")(3, "app-view-options")(4, "app-auto-rotate")(5, "app-dark-theme")(6, "app-object-clipping")(7, "app-main-view-toggle")(8, "app-overlay-view")(9, "app-object-selection")(10, "app-info-panel")(11, "app-animate-event")(12, "app-animate-camera", 0)(13, "app-collections-info")(14, "app-geometry-browser")(15, "app-performance-toggle")(16, "app-vr-toggle")(17, "app-ar-toggle")(18, "app-ss-mode")(19, "app-make-picture")(20, "app-io-options", 1)(21, "app-share-link");
+            i0.ɵɵprojection(22);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(12);
+            i0.ɵɵproperty("animationPresets", ctx.animationPresets);
+            i0.ɵɵadvance(8);
+            i0.ɵɵproperty("eventDataImportOptions", ctx.eventDataImportOptions);
+        } }, dependencies: [UiMenuWrapperComponent, CollectionsInfoComponent, GeometryBrowserComponent, IoOptionsComponent, OverlayViewComponent, ObjectSelectionComponent, EventSelectorComponent, ObjectClippingComponent, DarkThemeComponent, AutoRotateComponent, ViewOptionsComponent, InfoPanelComponent, MainViewToggleComponent, ZoomControlsComponent, AnimateCameraComponent, AnimateEventComponent, VrToggleComponent, ArToggleComponent, SSModeComponent, MakePictureComponent, PerformanceToggleComponent, ShareLinkComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UiMenuComponent, [{
+        type: Component,
+        args: [{ selector: 'app-ui-menu', template: "<app-ui-menu-wrapper>\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 geometry browser -->\n  <app-geometry-browser></app-geometry-browser>\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  <!-- Make pictures from scene -->\n  <app-make-picture></app-make-picture>\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</app-ui-menu-wrapper>\n" }]
+    }], null, { eventDataImportOptions: [{
+            type: Input
+        }], animationPresets: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UiMenuComponent, { className: "UiMenuComponent", filePath: "components/ui-menu/ui-menu.component.ts", lineNumber: 13 }); })();
+
+function FileExplorerComponent_cdk_tree_node_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "cdk-tree-node", 3)(1, "button", 4);
+    i0.ɵɵlistener("click", function FileExplorerComponent_cdk_tree_node_1_Template_button_click_1_listener() { const node_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSelect(node_r2.url, node_r2.nocache)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(2, "svg", 5);
+    i0.ɵɵelement(3, "use", 6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const node_r2 = ctx.$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", node_r2.name, " ");
+} }
+function FileExplorerComponent_cdk_nested_tree_node_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "cdk-nested-tree-node", 3)(1, "button", 7);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(2, "svg", 5);
+    i0.ɵɵelement(3, "use", 8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(5, "div");
+    i0.ɵɵelementContainer(6, 9);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const node_r4 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-label", "Toggle " + node_r4.name);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("node-icon-filled", !ctx_r2.treeControl.isExpanded(node_r4));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", node_r4.name, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("file-tree-invisible", !ctx_r2.treeControl.isExpanded(node_r4));
+} }
+class FileNode {
+    name;
+    url;
+    nocache;
+    children;
+    constructor(name) {
+        this.name = name;
+        this.nocache = false;
+    }
+}
+class FileEvent {
+    url;
+    nocache;
+    constructor(url, nocache) {
+        this.url = url;
+        this.nocache = nocache;
+    }
+}
+class FileExplorerComponent {
+    rootFileNode;
+    onFileSelect = new EventEmitter();
+    treeControl = new NestedTreeControl(this.getSortedChildren.bind(this));
+    dataSource = new MatTreeNestedDataSource();
+    ngOnChanges(changes) {
+        if (changes.rootFileNode?.currentValue) {
+            this.dataSource.data = this.getSortedChildren(changes.rootFileNode.currentValue);
+        }
+    }
+    hasChildren = (_, node) => !!node.children && Object.keys(node.children).length > 0;
+    onSelect(url, nocache) {
+        this.onFileSelect.emit(new FileEvent(url, nocache));
+    }
+    /**
+     * Sort the FileNode's children with folders before files.
+     * @param node FileNode whose children are to be sorted.
+     * @returns An array of sorted FileNodes.
+     */
+    getSortedChildren(node) {
+        if (!node.children) {
+            return [];
+        }
+        return Object.values(node.children).sort((a, b) => !a.url && b.url ? -1 : 1);
+    }
+    static ɵfac = function FileExplorerComponent_Factory(t) { return new (t || FileExplorerComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileExplorerComponent, selectors: [["app-file-explorer"]], inputs: { rootFileNode: "rootFileNode" }, outputs: { onFileSelect: "onFileSelect" }, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 3, consts: [[3, "dataSource", "treeControl"], ["class", "tree-node", 4, "cdkTreeNodeDef"], ["class", "tree-node", 4, "cdkTreeNodeDef", "cdkTreeNodeDefWhen"], [1, "tree-node"], ["mat-button", "", "mat-stroked-button", "", 1, "tree-node-button", 3, "click"], [1, "node-icon"], ["href", "assets/icons/file.svg#file"], ["mat-button", "", "cdkTreeNodeToggle", "", 1, "tree-node-button"], ["href", "assets/icons/folder.svg#folder"], ["cdkTreeNodeOutlet", ""]], template: function FileExplorerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "cdk-tree", 0);
+            i0.ɵɵtemplate(1, FileExplorerComponent_cdk_tree_node_1_Template, 5, 1, "cdk-tree-node", 1)(2, FileExplorerComponent_cdk_nested_tree_node_2_Template, 7, 6, "cdk-nested-tree-node", 2);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("dataSource", ctx.dataSource)("treeControl", ctx.treeControl);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("cdkTreeNodeDefWhen", ctx.hasChildren);
+        } }, dependencies: [i3.MatButton, i2$3.CdkNestedTreeNode, i2$3.CdkTreeNodeDef, i2$3.CdkTreeNodeToggle, i2$3.CdkTree, i2$3.CdkTreeNode, i2$3.CdkTreeNodeOutlet], styles: [".file-tree-invisible[_ngcontent-%COMP%]{display:none}.tree-node[_ngcontent-%COMP%]{display:block;margin:.25rem 0}.tree-node[_ngcontent-%COMP%]   .tree-node[_ngcontent-%COMP%]{padding-left:1rem}.tree-node-button[_ngcontent-%COMP%]{outline:none;padding:0 .75rem}.node-icon[_ngcontent-%COMP%]{width:1rem;height:1rem;margin-right:.25rem;margin-top:-2px}.node-icon.node-icon-filled[_ngcontent-%COMP%]{--icon-fill: var(--phoenix-options-icon-path, #fff)}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileExplorerComponent, [{
+        type: Component,
+        args: [{ selector: 'app-file-explorer', template: "<cdk-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n  <!-- This is the tree node template for leaf nodes -->\n  <cdk-tree-node *cdkTreeNodeDef=\"let node\" class=\"tree-node\">\n    <button\n      mat-button\n      mat-stroked-button\n      class=\"tree-node-button\"\n      (click)=\"onSelect(node.url, node.nocache)\"\n    >\n      <svg class=\"node-icon\">\n        <use href=\"assets/icons/file.svg#file\"></use>\n      </svg>\n      {{ node.name }}\n    </button>\n  </cdk-tree-node>\n  <!-- This is the tree node template for expandable nodes -->\n  <cdk-nested-tree-node\n    *cdkTreeNodeDef=\"let node; when: hasChildren\"\n    class=\"tree-node\"\n  >\n    <button\n      mat-button\n      cdkTreeNodeToggle\n      class=\"tree-node-button\"\n      [attr.aria-label]=\"'Toggle ' + node.name\"\n    >\n      <svg\n        class=\"node-icon\"\n        [class.node-icon-filled]=\"!treeControl.isExpanded(node)\"\n      >\n        <use href=\"assets/icons/folder.svg#folder\"></use>\n      </svg>\n      {{ node.name }}\n    </button>\n    <div [class.file-tree-invisible]=\"!treeControl.isExpanded(node)\">\n      <ng-container cdkTreeNodeOutlet></ng-container>\n    </div>\n  </cdk-nested-tree-node>\n</cdk-tree>\n", styles: [".file-tree-invisible{display:none}.tree-node{display:block;margin:.25rem 0}.tree-node .tree-node{padding-left:1rem}.tree-node-button{outline:none;padding:0 .75rem}.node-icon{width:1rem;height:1rem;margin-right:.25rem;margin-top:-2px}.node-icon.node-icon-filled{--icon-fill: var(--phoenix-options-icon-path, #fff)}\n"] }]
+    }], null, { rootFileNode: [{
+            type: Input
+        }], onFileSelect: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FileExplorerComponent, { className: "FileExplorerComponent", filePath: "components/file-explorer/file-explorer.component.ts", lineNumber: 37 }); })();
+
+/**
+ * Service makeing file loading easier
+ */
+class FileLoaderService {
+    lastEventsURL = '';
+    lastEventsOptions = false;
+    async unzip(data) {
+        const archive = new JSZip();
+        await archive.loadAsync(data);
+        let fileData = '';
+        let multiFile = false;
+        for (const filePath in archive.files) {
+            if (multiFile) {
+                console.error('Zip archive contains more than one file. Ignoring all but first');
+                break;
+            }
+            fileData = await archive.file(filePath).async('string');
+            multiFile = true;
+        }
+        return fileData;
+    }
+    // returns whether an error was found
+    makeRequest(urlPath, responseType, onData, options = {}) {
+        fetch(urlPath, options)
+            .then((res) => res[responseType]())
+            .then((data) => {
+            if (responseType === 'blob') {
+                data
+                    .arrayBuffer()
+                    .then((buf) => this.unzip(buf))
+                    .then((d) => onData(d));
+            }
+            else {
+                onData(data);
+            }
+        })
+            .catch((error) => {
+            console.error(error);
+            return true;
+        });
+        return false;
+    }
+    loadJSONEvent(eventData, eventDisplay) {
+        eventDisplay.parsePhoenixEvents(JSON.parse(eventData));
+    }
+    loadJiveXMLEvent(eventData, eventDisplay) {
+        const jiveXMLLoader = new JiveXMLLoader();
+        jiveXMLLoader.process(eventData);
+        const processedEventData = jiveXMLLoader.getEventData();
+        eventDisplay.buildEventDataFromJSON(processedEventData);
+    }
+    loadEvent(file, eventDisplay, options = {}) {
+        this.lastEventsURL = file;
+        this.lastEventsOptions = options;
+        const isZip = file.split('.').pop() === 'zip';
+        const rawfile = isZip ? file.substring(0, file.length - 4) : file;
+        return this.makeRequest(file, isZip ? 'blob' : 'text', (eventData) => {
+            switch (rawfile.split('.').pop()) {
+                case 'xml':
+                    this.loadJiveXMLEvent(eventData, eventDisplay);
+                    break;
+                case 'json':
+                    this.loadJSONEvent(eventData, eventDisplay);
+                    break;
+            }
+        }, options);
+    }
+    reloadLastEvents(eventDisplay) {
+        if (this.lastEventsURL.length > 0) {
+            this.loadEvent(this.lastEventsURL, eventDisplay, this.lastEventsOptions);
+        }
+    }
+    static ɵfac = function FileLoaderService_Factory(t) { return new (t || FileLoaderService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: FileLoaderService, factory: FileLoaderService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileLoaderService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root',
+            }]
+    }], null, null); })();
+
+class RingLoaderComponent {
+    static ɵfac = function RingLoaderComponent_Factory(t) { return new (t || RingLoaderComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RingLoaderComponent, selectors: [["app-ring-loader"]], decls: 5, vars: 0, consts: [[1, "ring"]], template: function RingLoaderComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵelement(1, "div")(2, "div")(3, "div")(4, "div");
+            i0.ɵɵelementEnd();
+        } }, styles: [".ring[_ngcontent-%COMP%]{display:inline-block;position:relative;width:1.5rem;height:1.5rem}.ring[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]{box-sizing:border-box;display:block;position:absolute;width:1.5rem;height:1.5rem;margin:.25rem .5rem;border:.25rem solid var(--phoenix-text-color);border-radius:50%;animation:animate-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--phoenix-text-color) transparent transparent transparent}.ring[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]:nth-child(1){animation-delay:-.45s}.ring[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]:nth-child(2){animation-delay:-.3s}.ring[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]:nth-child(3){animation-delay:-.15s}@keyframes _ngcontent-%COMP%_app-ring-loader_animate-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RingLoaderComponent, [{
+        type: Component,
+        args: [{ selector: 'app-ring-loader', template: "<div class=\"ring\">\n  <div></div>\n  <div></div>\n  <div></div>\n  <div></div>\n</div>\n", styles: [".ring{display:inline-block;position:relative;width:1.5rem;height:1.5rem}.ring div{box-sizing:border-box;display:block;position:absolute;width:1.5rem;height:1.5rem;margin:.25rem .5rem;border:.25rem solid var(--phoenix-text-color);border-radius:50%;animation:animate-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--phoenix-text-color) transparent transparent transparent}.ring div:nth-child(1){animation-delay:-.45s}.ring div:nth-child(2){animation-delay:-.3s}.ring div:nth-child(3){animation-delay:-.15s}@keyframes app-ring-loader_animate-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RingLoaderComponent, { className: "RingLoaderComponent", filePath: "components/ring-loader/ring-loader.component.ts", lineNumber: 8 }); })();
+
+function EventDataExplorerDialogComponent_app_ring_loader_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "app-ring-loader");
+} }
+function EventDataExplorerDialogComponent_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵtext(1, "Error processing request.");
+    i0.ɵɵelementEnd();
+} }
+function EventDataExplorerDialogComponent_mat_tab_group_7_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mat-tab-group", 8)(1, "mat-tab", 9)(2, "div", 10)(3, "app-file-explorer", 11);
+    i0.ɵɵlistener("onFileSelect", function EventDataExplorerDialogComponent_mat_tab_group_7_Template_app_file_explorer_onFileSelect_3_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.loadEvent($event)); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(4, "mat-tab", 12)(5, "div", 10)(6, "app-file-explorer", 11);
+    i0.ɵɵlistener("onFileSelect", function EventDataExplorerDialogComponent_mat_tab_group_7_Template_app_file_explorer_onFileSelect_6_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.loadConfig($event)); });
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("rootFileNode", ctx_r1.eventDataFileNode);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("rootFileNode", ctx_r1.configFileNode);
+} }
+const supportFileTypes = ['json', 'xml'];
+class EventDataExplorerDialogComponent {
+    eventDisplay;
+    fileLoader;
+    dialogRef;
+    dialogData;
+    eventDataFileNode;
+    configFileNode;
+    loading = true;
+    error = false;
+    constructor(eventDisplay, fileLoader, dialogRef, dialogData) {
+        this.eventDisplay = eventDisplay;
+        this.fileLoader = fileLoader;
+        this.dialogRef = dialogRef;
+        this.dialogData = dialogData;
+        // Event data
+        fileLoader.makeRequest(this.dialogData.apiURL, 'json', (res) => {
+            const filePaths = res.filter((file) => supportFileTypes.includes(file.name.split('.').pop()));
+            this.eventDataFileNode = this.buildFileNode(filePaths);
+        });
+        // Config
+        fileLoader.makeRequest(`${this.dialogData.apiURL}?type=config`, 'json', (res) => {
+            const filePaths = res.filter((file) => file.name.split('.').pop() === 'json');
+            this.configFileNode = this.buildFileNode(filePaths);
+        });
+    }
+    loadEvent(file) {
+        this.loading = true;
+        this.error = this.fileLoader.loadEvent(file.url, this.eventDisplay, file.nocache ? { cache: 'no-cache' } : {});
+        this.loading = false;
+        if (!this.error)
+            this.onClose();
+    }
+    loadConfig(file) {
+        this.loading = true;
+        this.error = this.fileLoader.makeRequest(`${this.dialogData.apiURL}?type=config&f=${file.url}`, 'text', (config) => {
+            const stateManager = this.eventDisplay.getStateManager();
+            stateManager.loadStateFromJSON(JSON.parse(config));
+            this.onClose();
+        });
+        this.loading = false;
+    }
+    // Helpers
+    onClose() {
+        this.dialogRef.close();
+    }
+    buildFileNode(filePaths) {
+        const rootNode = new FileNode();
+        let fileNode = rootNode;
+        for (const filePath of filePaths) {
+            filePath.name.split('/').forEach((name) => {
+                fileNode.children = fileNode.children ?? {};
+                fileNode.children[name] = fileNode.children[name] ?? new FileNode(name);
+                fileNode = fileNode.children[name];
+            });
+            fileNode.url = filePath.url;
+            fileNode.nocache = filePath.nocache;
+            fileNode = rootNode;
+        }
+        return rootNode;
+    }
+    static ɵfac = function EventDataExplorerDialogComponent_Factory(t) { return new (t || EventDataExplorerDialogComponent)(i0.ɵɵdirectiveInject(EventDisplayService), i0.ɵɵdirectiveInject(FileLoaderService), i0.ɵɵdirectiveInject(i1$2.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EventDataExplorerDialogComponent, selectors: [["app-event-data-explorer-dialog"]], decls: 11, vars: 3, consts: [[1, "dialog"], [1, "d-flex"], ["mat-dialog-title", ""], [4, "ngIf"], ["mat-dialog-content", "", 1, "dialog-content"], ["mat-align-tabs", "start", "animationDuration", "0ms", "disableRipple", "", "opacity", "transparent", 4, "ngIf"], ["mat-dialog-actions", ""], ["mat-button", "", "cdkFocusInitial", "", 3, "click"], ["mat-align-tabs", "start", "animationDuration", "0ms", "disableRipple", "", "opacity", "transparent"], ["label", "Event data"], [1, "py-3"], [3, "onFileSelect", "rootFileNode"], ["label", "Config"]], template: function EventDataExplorerDialogComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h1", 2);
+            i0.ɵɵtext(3, "Event data from directory");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(4, EventDataExplorerDialogComponent_app_ring_loader_4_Template, 1, 0, "app-ring-loader", 3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div", 4);
+            i0.ɵɵtemplate(6, EventDataExplorerDialogComponent_div_6_Template, 2, 0, "div", 3)(7, EventDataExplorerDialogComponent_mat_tab_group_7_Template, 7, 2, "mat-tab-group", 5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "div", 6)(9, "button", 7);
+            i0.ɵɵlistener("click", function EventDataExplorerDialogComponent_Template_button_click_9_listener() { return ctx.onClose(); });
+            i0.ɵɵtext(10, "Close");
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngIf", ctx.loading);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.error);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.error);
+        } }, dependencies: [i2.NgIf, i1$2.MatDialogTitle, i1$2.MatDialogActions, i1$2.MatDialogContent, i3.MatButton, i6.MatTab, i6.MatTabGroup, FileExplorerComponent, RingLoaderComponent], styles: [".dialog[_ngcontent-%COMP%]{width:30rem;max-width:95%}.file-path-button[_ngcontent-%COMP%]{width:100%;color:var(--phoenix-text-color);background:var(--phoenix-background-color-tertiary);text-align:left;border-radius:1rem;margin-bottom:.5rem;padding:.5rem 1rem}.file-path-button[_ngcontent-%COMP%]:last-child{margin-bottom:0}.file-path-button[_ngcontent-%COMP%]:hover{background:var(--phoenix-background-color-secondary)}.file-path-button[_ngcontent-%COMP%]:focus{border:1px solid var(--phoenix-text-color-secondary);box-shadow:none}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EventDataExplorerDialogComponent, [{
+        type: Component,
+        args: [{ selector: 'app-event-data-explorer-dialog', template: "<div class=\"dialog\">\n  <div class=\"d-flex\">\n    <h1 mat-dialog-title>Event data from directory</h1>\n    <app-ring-loader *ngIf=\"loading\"></app-ring-loader>\n  </div>\n  <div mat-dialog-content class=\"dialog-content\">\n    <div *ngIf=\"error\">Error processing request.</div>\n    <mat-tab-group\n      *ngIf=\"!error\"\n      mat-align-tabs=\"start\"\n      animationDuration=\"0ms\"\n      disableRipple\n      opacity=\"transparent\"\n    >\n      <mat-tab label=\"Event data\">\n        <div class=\"py-3\">\n          <app-file-explorer\n            [rootFileNode]=\"eventDataFileNode\"\n            (onFileSelect)=\"loadEvent($event)\"\n          ></app-file-explorer>\n        </div>\n      </mat-tab>\n      <mat-tab label=\"Config\">\n        <div class=\"py-3\">\n          <app-file-explorer\n            [rootFileNode]=\"configFileNode\"\n            (onFileSelect)=\"loadConfig($event)\"\n          ></app-file-explorer>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button (click)=\"onClose()\" cdkFocusInitial>Close</button>\n  </div>\n</div>\n", styles: [".dialog{width:30rem;max-width:95%}.file-path-button{width:100%;color:var(--phoenix-text-color);background:var(--phoenix-background-color-tertiary);text-align:left;border-radius:1rem;margin-bottom:.5rem;padding:.5rem 1rem}.file-path-button:last-child{margin-bottom:0}.file-path-button:hover{background:var(--phoenix-background-color-secondary)}.file-path-button:focus{border:1px solid var(--phoenix-text-color-secondary);box-shadow:none}\n"] }]
+    }], () => [{ type: EventDisplayService }, { type: FileLoaderService }, { type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                type: Inject,
+                args: [MAT_DIALOG_DATA]
+            }] }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EventDataExplorerDialogComponent, { className: "EventDataExplorerDialogComponent", filePath: "components/ui-menu/event-data-explorer/event-data-explorer-dialog/event-data-explorer-dialog.component.ts", lineNumber: 24 }); })();
+
+class EventDataExplorerComponent {
+    dialog;
+    apiURL;
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    openEventDataExplorerDialog() {
+        this.dialog.open(EventDataExplorerDialogComponent, {
+            data: {
+                apiURL: this.apiURL,
+            },
+        });
+    }
+    static ɵfac = function EventDataExplorerComponent_Factory(t) { return new (t || EventDataExplorerComponent)(i0.ɵɵdirectiveInject(i1$2.MatDialog)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EventDataExplorerComponent, selectors: [["app-event-data-explorer"]], inputs: { apiURL: "apiURL" }, decls: 1, vars: 1, consts: [["tooltip", "Browse events in data directory", "icon", "server", 3, "click", "active"]], template: function EventDataExplorerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-menu-toggle", 0);
+            i0.ɵɵlistener("click", function EventDataExplorerComponent_Template_app_menu_toggle_click_0_listener() { return ctx.openEventDataExplorerDialog(); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("active", false);
+        } }, dependencies: [MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EventDataExplorerComponent, [{
+        type: Component,
+        args: [{ selector: 'app-event-data-explorer', template: "<app-menu-toggle\n  tooltip=\"Browse events in data directory\"\n  icon=\"server\"\n  [active]=\"false\"\n  (click)=\"openEventDataExplorerDialog()\"\n>\n</app-menu-toggle>\n" }]
+    }], () => [{ type: i1$2.MatDialog }], { apiURL: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EventDataExplorerComponent, { className: "EventDataExplorerComponent", filePath: "components/ui-menu/event-data-explorer/event-data-explorer.component.ts", lineNumber: 14 }); })();
+
+const _c0$1 = (a0, a1) => ({ "active-icon": a0, "reload-icon": a1 });
+class CycleEventsComponent {
+    eventDisplay;
+    fileLoader;
+    interval;
+    tooltip;
+    icon;
+    // There are actually 3 states we go through when clicking this component :
+    //  - not active : so we are not cycling throught events
+    //  - active and not reloading : cycling over the events stored in events
+    //  - active and reloading : cycling and reloading the events when reaching the end
+    // Last state is useful e.g. for live feed of events
+    active = false;
+    reloading = false;
+    intervalId;
+    events;
+    constructor(eventDisplay, fileLoader) {
+        this.eventDisplay = eventDisplay;
+        this.fileLoader = fileLoader;
+    }
+    ngOnInit() {
+        this.eventDisplay.listenToLoadedEventsChange((events) => {
+            this.events = events;
+            if (this.active) {
+                // restart cycling from first event
+                clearInterval(this.intervalId);
+                this.startCycleInterval();
+            }
+        });
+    }
+    toggleCycle() {
+        this.reloading = this.active && !this.reloading;
+        this.active = !this.active || this.reloading;
+        console.log(this.active, this.reloading);
+        clearInterval(this.intervalId);
+        if (this.active) {
+            this.startCycleInterval();
+        }
+    }
+    startCycleInterval(startIndex = 0) {
+        // load immediately first event
+        let index = startIndex;
+        this.eventDisplay.loadEvent(this.events[index]);
+        index = index + 1 >= this.events.length ? -1 : index + 1;
+        // launch automatic cycling
+        this.intervalId = setInterval(() => {
+            // special value -1 is used to denote wrapping of the current set of events
+            if (index == -1) {
+                if (this.reloading) {
+                    // reload the current events, ignoring caches
+                    this.fileLoader.reloadLastEvents(this.eventDisplay);
+                }
+                // put back index to 0 to start with first event anyway
+                index = 0;
+            }
+            this.eventDisplay.loadEvent(this.events[index]);
+            index = index + 1 >= this.events.length ? -1 : index + 1;
+        }, this.interval);
+    }
+    static ɵfac = function CycleEventsComponent_Factory(t) { return new (t || CycleEventsComponent)(i0.ɵɵdirectiveInject(EventDisplayService), i0.ɵɵdirectiveInject(FileLoaderService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CycleEventsComponent, selectors: [["app-cycle-events"]], inputs: { interval: "interval", tooltip: "tooltip", icon: "icon" }, decls: 3, vars: 4, consts: [["matTooltip", "Cycle (off/on/on+reload)", "matTooltipPosition", "above", "matTooltipTouchGestures", "off", 1, "cycle-events", 3, "click"], [1, "cycle-events-icon", 3, "ngClass"], ["href", "assets/icons/cycle-events.svg#cycle-events"]], template: function CycleEventsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "button", 0);
+            i0.ɵɵlistener("click", function CycleEventsComponent_Template_button_click_0_listener() { return ctx.toggleCycle(); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(1, "svg", 1);
+            i0.ɵɵelement(2, "use", 2);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c0$1, ctx.active, ctx.reloading));
+        } }, dependencies: [i2.NgClass, i3$1.MatTooltip], styles: ["[_nghost-%COMP%]{display:flex;margin:0 .6rem}[_nghost-%COMP%]   .cycle-events[_ngcontent-%COMP%]{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}[_nghost-%COMP%]   .cycle-events-icon[_ngcontent-%COMP%]{width:100%;height:100%}[_nghost-%COMP%]   .cycle-events-icon.active-icon[_ngcontent-%COMP%]{--phoenix-options-icon-path: #00bcd4}[_nghost-%COMP%]   .cycle-events-icon.reload-icon[_ngcontent-%COMP%]{--phoenix-options-icon-path: #77dd77}[_nghost-%COMP%]   .cycle-events[_ngcontent-%COMP%]:hover{background-color:var(--phoenix-options-icon-bg);border-radius:40%;transition:all .4s}[_nghost-%COMP%]   .cycle-events.disabled[_ngcontent-%COMP%]{cursor:not-allowed;opacity:.4}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CycleEventsComponent, [{
+        type: Component,
+        args: [{ selector: 'app-cycle-events', template: "<button\n  class=\"cycle-events\"\n  matTooltip=\"Cycle (off/on/on+reload)\"\n  matTooltipPosition=\"above\"\n  matTooltipTouchGestures=\"off\"\n  (click)=\"toggleCycle()\"\n>\n  <svg\n    class=\"cycle-events-icon\"\n    [ngClass]=\"{ 'active-icon': active, 'reload-icon': reloading }\"\n  >\n    <use href=\"assets/icons/cycle-events.svg#cycle-events\"></use>\n  </svg>\n</button>\n", styles: [":host{display:flex;margin:0 .6rem}:host .cycle-events{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 .cycle-events-icon{width:100%;height:100%}:host .cycle-events-icon.active-icon{--phoenix-options-icon-path: #00bcd4}:host .cycle-events-icon.reload-icon{--phoenix-options-icon-path: #77dd77}:host .cycle-events:hover{background-color:var(--phoenix-options-icon-bg);border-radius:40%;transition:all .4s}:host .cycle-events.disabled{cursor:not-allowed;opacity:.4}\n"] }]
+    }], () => [{ type: EventDisplayService }, { type: FileLoaderService }], { interval: [{
+            type: Input
+        }], tooltip: [{
+            type: Input
+        }], icon: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CycleEventsComponent, { className: "CycleEventsComponent", filePath: "components/ui-menu/cycle-events/cycle-events.component.ts", lineNumber: 10 }); })();
+
+class ErrorMessageService {
+    /** A variable that stores the latest error thrown. */
+    error = new ActiveVariable();
+    /**
+     * Subscribe to when an error occurs.
+     * @param callback A function called when an error occurs.
+     */
+    subscribeToError(callback) {
+        this.error.onUpdate(callback);
+    }
+    /**
+     * Set the current error.
+     * @param error The error that has occurred.
+     */
+    setError(error) {
+        this.error.update(error);
+    }
+    static ɵfac = function ErrorMessageService_Factory(t) { return new (t || ErrorMessageService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ErrorMessageService, factory: ErrorMessageService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ErrorMessageService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root',
+            }]
+    }], null, null); })();
+
+const _c0 = a0 => ({ "load-complete": a0 });
+const _c1 = a0 => ({ width: a0 });
+function LoaderComponent_ng_container_1_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵelement(1, "span");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleMap(i0.ɵɵpureFunction1(2, _c1, ctx_r0.progress + "%"));
+} }
+function LoaderComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelement(1, "img", 3);
+    i0.ɵɵelementStart(2, "p", 4);
+    i0.ɵɵtext(3, " Loading...");
+    i0.ɵɵelement(4, "br");
+    i0.ɵɵelementStart(5, "small", 5);
+    i0.ɵɵtext(6, "(This may take a while)");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(7, LoaderComponent_ng_container_1_div_7_Template, 2, 4, "div", 6);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("ngIf", ctx_r0.progress !== undefined);
+} }
+function LoaderComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p");
+    i0.ɵɵtext(1, " An error occurred while loading the application. Please try refreshing the page. ");
+    i0.ɵɵelementEnd();
+} }
+class LoaderComponent {
+    errorMessageService;
+    loaded = false;
+    progress;
+    error;
+    constructor(errorMessageService) {
+        this.errorMessageService = errorMessageService;
+        this.errorMessageService.subscribeToError((error) => {
+            if (!this.loaded) {
+                this.error = error;
+            }
+        });
+    }
+    static ɵfac = function LoaderComponent_Factory(t) { return new (t || LoaderComponent)(i0.ɵɵdirectiveInject(ErrorMessageService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LoaderComponent, selectors: [["app-loader"]], inputs: { loaded: "loaded", progress: "progress" }, decls: 4, vars: 5, consts: [["errorContainer", ""], [1, "loader-wrapper", "d-flex", "position-absolute", "flex-column", "justify-content-center", "align-items-center", "w-100", "h-100", "p-5", "text-center", 3, "ngClass"], [4, "ngIf", "ngIfElse"], ["src", "assets/images/logo-small.svg", "alt", "Loader"], [1, "mt-5"], [1, "text-muted"], ["class", "loading-bar", 4, "ngIf"], [1, "loading-bar"]], template: function LoaderComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵtemplate(1, LoaderComponent_ng_container_1_Template, 8, 1, "ng-container", 2)(2, LoaderComponent_ng_template_2_Template, 2, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            const errorContainer_r2 = i0.ɵɵreference(3);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0, ctx.loaded));
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.error === undefined)("ngIfElse", errorContainer_r2);
+        } }, dependencies: [i2.NgClass, i2.NgIf], styles: [".loader-wrapper[_ngcontent-%COMP%]{background:var(--phoenix-background-color);z-index:9998}.loader-wrapper.load-complete[_ngcontent-%COMP%]{display:none!important}.loader-wrapper[_ngcontent-%COMP%]   img[_ngcontent-%COMP%]{width:5rem;height:5rem;animation:loader 2s infinite}.loader-wrapper[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]{color:var(--phoenix-text-color)}.loader-wrapper[_ngcontent-%COMP%]   .loading-bar[_ngcontent-%COMP%]{width:15rem;max-width:90%;height:.5rem;background:var(--phoenix-background-color-tertiary);border-radius:2.5rem;overflow:hidden}.loader-wrapper[_ngcontent-%COMP%]   .loading-bar[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{display:block;height:100%;border-radius:2.5rem;background:linear-gradient(to right,var(--phoenix-primary),var(--phoenix-secondary));transition:all .5s}@keyframes _ngcontent-%COMP%_app-loader_loader{0%,to{transform:scale(.1) rotate(0)}95%{transform:scale(1) rotate(15deg)}}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LoaderComponent, [{
+        type: Component,
+        args: [{ selector: 'app-loader', template: "<div\n  class=\"loader-wrapper d-flex position-absolute flex-column justify-content-center align-items-center w-100 h-100 p-5 text-center\"\n  [ngClass]=\"{ 'load-complete': loaded }\"\n>\n  <ng-container *ngIf=\"error === undefined; else errorContainer\">\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  </ng-container>\n  <ng-template #errorContainer>\n    <p>\n      An error occurred while loading the application. Please try refreshing the\n      page.\n    </p>\n  </ng-template>\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;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}@keyframes app-loader_loader{0%,to{transform:scale(.1) rotate(0)}95%{transform:scale(1) rotate(15deg)}}\n"] }]
+    }], () => [{ type: ErrorMessageService }], { loaded: [{
+            type: Input
+        }], progress: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LoaderComponent, { className: "LoaderComponent", filePath: "components/loader/loader.component.ts", lineNumber: 9 }); })();
+
+/**
+ * Global handler for handling app/module wide errors.
+ */
+class GlobalErrorHandler {
+    injector;
+    /**
+     * Instantiate the global error handler.
+     * @param injector Injector for getting the error message service.
+     */
+    constructor(injector) {
+        this.injector = injector;
+    }
+    /**
+     * A handler for handling the global error that occurs in the app.
+     * @param error The error that occurred.
+     */
+    handleError(error) {
+        console.error('ERROR IN PHOENIX APP', '\n', error);
+        this.injector.get(ErrorMessageService).setError(error);
+    }
+    static ɵfac = function GlobalErrorHandler_Factory(t) { return new (t || GlobalErrorHandler)(i0.ɵɵinject(i0.Injector)); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: GlobalErrorHandler, factory: GlobalErrorHandler.ɵfac });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GlobalErrorHandler, [{
+        type: Injectable
+    }], () => [{ type: i0.Injector }], null); })();
+
+class ExperimentLinkComponent {
+    experimentLink;
+    ngOnInit() {
+        // we just want to remove the "&embed=true" instruction here.
+        const url = new URL(window.location.href);
+        url.searchParams.delete('embed');
+        this.experimentLink = url.toString();
+    }
+    goToExperiment() {
+        window.open(this.experimentLink, '_blank');
+    }
+    static ɵfac = function ExperimentLinkComponent_Factory(t) { return new (t || ExperimentLinkComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExperimentLinkComponent, selectors: [["app-experiment-link"]], decls: 1, vars: 0, consts: [["tooltip", "See full event display", "icon", "link", 3, "click"]], template: function ExperimentLinkComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "app-menu-toggle", 0);
+            i0.ɵɵlistener("click", function ExperimentLinkComponent_Template_app_menu_toggle_click_0_listener() { return ctx.goToExperiment(); });
+            i0.ɵɵelementEnd();
+        } }, dependencies: [MenuToggleComponent] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExperimentLinkComponent, [{
+        type: 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" }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExperimentLinkComponent, { className: "ExperimentLinkComponent", filePath: "components/embed-menu/experiment-link/experiment-link.component.ts", lineNumber: 8 }); })();
+
+class EmbedMenuComponent {
+    static ɵfac = function EmbedMenuComponent_Factory(t) { return new (t || EmbedMenuComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EmbedMenuComponent, selectors: [["app-embed-menu"]], decls: 8, vars: 0, consts: [["id", "embedMenu"], ["id", "embedMenuInner"]], template: function EmbedMenuComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵelement(2, "app-dark-theme")(3, "app-auto-rotate")(4, "app-main-view-toggle")(5, "app-animate-event")(6, "app-animate-camera")(7, "app-experiment-link");
+            i0.ɵɵelementEnd()();
+        } }, dependencies: [DarkThemeComponent, AutoRotateComponent, MainViewToggleComponent, AnimateCameraComponent, AnimateEventComponent, ExperimentLinkComponent], styles: ["#embedMenu[_ngcontent-%COMP%]{display:none}#embedMenu[_ngcontent-%COMP%]   #embedMenuInner[_ngcontent-%COMP%]{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}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EmbedMenuComponent, [{
+        type: 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"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EmbedMenuComponent, { className: "EmbedMenuComponent", filePath: "components/embed-menu/embed-menu.component.ts", lineNumber: 8 }); })();
+
+const PHOENIX_COMPONENTS = [
+    NavComponent,
+    UiMenuWrapperComponent,
+    UiMenuComponent,
+    CollectionsInfoComponent,
+    GeometryBrowserComponent,
+    GeometryBrowserOverlayComponent,
+    MenuToggleComponent,
+    CollectionsInfoOverlayComponent,
+    IoOptionsComponent,
+    IOOptionsDialogComponent,
+    OverlayViewComponent,
+    AttributePipe,
+    ObjectSelectionComponent,
+    ObjectSelectionOverlayComponent,
+    EventSelectorComponent,
+    ObjectClippingComponent,
+    DarkThemeComponent,
+    AutoRotateComponent,
+    ViewOptionsComponent,
+    CartesianGridConfigComponent,
+    OverlayViewWindowComponent,
+    OverlayComponent,
+    ExperimentInfoComponent,
+    InfoPanelComponent,
+    InfoPanelOverlayComponent,
+    MainViewToggleComponent,
+    ZoomControlsComponent,
+    TreeMenuComponent,
+    TreeMenuItemComponent,
+    PhoenixMenuComponent,
+    PhoenixMenuItemComponent,
+    ConfigSliderComponent,
+    AnimateCameraComponent,
+    AnimateEventComponent,
+    VrToggleComponent,
+    ArToggleComponent,
+    SSModeComponent,
+    MakePictureComponent,
+    PerformanceToggleComponent,
+    LoaderComponent,
+    ShareLinkComponent,
+    ShareLinkDialogComponent,
+    EmbedMenuComponent,
+    ExperimentLinkComponent,
+    EventDataExplorerComponent,
+    EventDataExplorerDialogComponent,
+    FileExplorerComponent,
+    RingLoaderComponent,
+    CycleEventsComponent,
+];
+class PhoenixUIModule {
+    static ɵfac = function PhoenixUIModule_Factory(t) { return new (t || PhoenixUIModule)(); };
+    static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: PhoenixUIModule });
+    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
+            EventDisplayService,
+            ErrorMessageService,
+            {
+                provide: ErrorHandler,
+                useClass: GlobalErrorHandler,
+            },
+        ], imports: [CommonModule,
+            RouterModule,
+            DragDropModule,
+            MatDialogModule,
+            MatButtonModule,
+            MatTooltipModule,
+            OverlayModule,
+            FormsModule,
+            MatMenuModule,
+            MatRadioModule,
+            MatSliderModule,
+            MatSlideToggleModule,
+            MatCheckboxModule,
+            MatIconModule,
+            CdkTreeModule,
+            MatTabsModule] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PhoenixUIModule, [{
+        type: NgModule,
+        args: [{
+                declarations: PHOENIX_COMPONENTS,
+                imports: [
+                    CommonModule,
+                    RouterModule,
+                    DragDropModule,
+                    MatDialogModule,
+                    MatButtonModule,
+                    MatTooltipModule,
+                    OverlayModule,
+                    FormsModule,
+                    MatMenuModule,
+                    MatRadioModule,
+                    MatSliderModule,
+                    MatSlideToggleModule,
+                    MatCheckboxModule,
+                    MatIconModule,
+                    CdkTreeModule,
+                    MatTabsModule,
+                ],
+                exports: PHOENIX_COMPONENTS,
+                providers: [
+                    EventDisplayService,
+                    ErrorMessageService,
+                    {
+                        provide: ErrorHandler,
+                        useClass: GlobalErrorHandler,
+                    },
+                ],
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PhoenixUIModule, { declarations: [NavComponent,
+        UiMenuWrapperComponent,
+        UiMenuComponent,
+        CollectionsInfoComponent,
+        GeometryBrowserComponent,
+        GeometryBrowserOverlayComponent,
+        MenuToggleComponent,
+        CollectionsInfoOverlayComponent,
+        IoOptionsComponent,
+        IOOptionsDialogComponent,
+        OverlayViewComponent,
+        AttributePipe,
+        ObjectSelectionComponent,
+        ObjectSelectionOverlayComponent,
+        EventSelectorComponent,
+        ObjectClippingComponent,
+        DarkThemeComponent,
+        AutoRotateComponent,
+        ViewOptionsComponent,
+        CartesianGridConfigComponent,
+        OverlayViewWindowComponent,
+        OverlayComponent,
+        ExperimentInfoComponent,
+        InfoPanelComponent,
+        InfoPanelOverlayComponent,
+        MainViewToggleComponent,
+        ZoomControlsComponent,
+        TreeMenuComponent,
+        TreeMenuItemComponent,
+        PhoenixMenuComponent,
+        PhoenixMenuItemComponent,
+        ConfigSliderComponent,
+        AnimateCameraComponent,
+        AnimateEventComponent,
+        VrToggleComponent,
+        ArToggleComponent,
+        SSModeComponent,
+        MakePictureComponent,
+        PerformanceToggleComponent,
+        LoaderComponent,
+        ShareLinkComponent,
+        ShareLinkDialogComponent,
+        EmbedMenuComponent,
+        ExperimentLinkComponent,
+        EventDataExplorerComponent,
+        EventDataExplorerDialogComponent,
+        FileExplorerComponent,
+        RingLoaderComponent,
+        CycleEventsComponent], imports: [CommonModule,
+        RouterModule,
+        DragDropModule,
+        MatDialogModule,
+        MatButtonModule,
+        MatTooltipModule,
+        OverlayModule,
+        FormsModule,
+        MatMenuModule,
+        MatRadioModule,
+        MatSliderModule,
+        MatSlideToggleModule,
+        MatCheckboxModule,
+        MatIconModule,
+        CdkTreeModule,
+        MatTabsModule], exports: [NavComponent,
+        UiMenuWrapperComponent,
+        UiMenuComponent,
+        CollectionsInfoComponent,
+        GeometryBrowserComponent,
+        GeometryBrowserOverlayComponent,
+        MenuToggleComponent,
+        CollectionsInfoOverlayComponent,
+        IoOptionsComponent,
+        IOOptionsDialogComponent,
+        OverlayViewComponent,
+        AttributePipe,
+        ObjectSelectionComponent,
+        ObjectSelectionOverlayComponent,
+        EventSelectorComponent,
+        ObjectClippingComponent,
+        DarkThemeComponent,
+        AutoRotateComponent,
+        ViewOptionsComponent,
+        CartesianGridConfigComponent,
+        OverlayViewWindowComponent,
+        OverlayComponent,
+        ExperimentInfoComponent,
+        InfoPanelComponent,
+        InfoPanelOverlayComponent,
+        MainViewToggleComponent,
+        ZoomControlsComponent,
+        TreeMenuComponent,
+        TreeMenuItemComponent,
+        PhoenixMenuComponent,
+        PhoenixMenuItemComponent,
+        ConfigSliderComponent,
+        AnimateCameraComponent,
+        AnimateEventComponent,
+        VrToggleComponent,
+        ArToggleComponent,
+        SSModeComponent,
+        MakePictureComponent,
+        PerformanceToggleComponent,
+        LoaderComponent,
+        ShareLinkComponent,
+        ShareLinkDialogComponent,
+        EmbedMenuComponent,
+        ExperimentLinkComponent,
+        EventDataExplorerComponent,
+        EventDataExplorerDialogComponent,
+        FileExplorerComponent,
+        RingLoaderComponent,
+        CycleEventsComponent] }); })();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AnimateCameraComponent, AnimateEventComponent, ArToggleComponent, AttributePipe, AutoRotateComponent, CartesianGridConfigComponent, CollectionsInfoComponent, CollectionsInfoOverlayComponent, ConfigSliderComponent, CycleEventsComponent, DarkThemeComponent, EmbedMenuComponent, EventDataExplorerComponent, EventDataExplorerDialogComponent, EventDataFormat, EventDisplayService, EventSelectorComponent, ExperimentInfoComponent, ExperimentLinkComponent, FileEvent, FileExplorerComponent, FileNode, GeometryBrowserComponent, GeometryBrowserOverlayComponent, IOOptionsDialogComponent, ImportOption, InfoPanelComponent, InfoPanelOverlayComponent, IoOptionsComponent, LoaderComponent, MainViewToggleComponent, MakePictureComponent, MenuToggleComponent, NavComponent, ObjectClippingComponent, ObjectSelectionComponent, ObjectSelectionOverlayComponent, OverlayComponent, OverlayViewComponent, OverlayViewWindowComponent, PerformanceToggleComponent, PhoenixMenuComponent, PhoenixMenuItemComponent, PhoenixUIModule, RingLoaderComponent, SSModeComponent, ShareLinkComponent, ShareLinkDialogComponent, TreeMenuComponent, TreeMenuItemComponent, UiMenuComponent, UiMenuWrapperComponent, ViewOptionsComponent, VrToggleComponent, ZoomControlsComponent, defaultAnimationPresets };
+//# sourceMappingURL=phoenix-ui-components.mjs.map