npm - phoenix-ui-components - Versions diffs - 2.16.0 → 3.0.0 - Mend

phoenix-ui-components 2.16.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

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

@@ -8,16 +8,16 @@ 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 * as i3$1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i4 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 * as i3$3 from '@angular/material/menu';
 import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
-import * as i3$1 from '@angular/material/tooltip';
+import * as i3$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ResizeSensor } from 'css-element-queries';
@@ -28,7 +28,7 @@ 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 * as i4$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { Vector3 } from 'three';
 import * as i5$1 from '@angular/material/radio';
@@ -44,7 +44,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 class NavComponent {
     constructor() { }
     ngOnInit() { }
-    static ɵfac = function NavComponent_Factory(t) { return new (t || NavComponent)(); };
+    static ɵfac = function NavComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
@@ -76,7 +76,8 @@ class ConfigSliderComponent {
     allowCustomValue = false;
     onChange = new EventEmitter();
     onValueChange(value) {
-        value && this.onChange.emit(value);
+        if (value)
+            this.onChange.emit(value);
     }
     toggleMinCut(change) {
         const value = change.checked;
@@ -100,7 +101,7 @@ class ConfigSliderComponent {
         }
         // 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 ɵfac = function ConfigSliderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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); });
@@ -240,31 +241,35 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_input_4_Templ
 } }
 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.ɵɵelementStart(0, "div", 37)(1, "div", 38)(2, "mat-checkbox", 39);
+    i0.ɵɵtwoWayListener("ngModelChange", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_mat_checkbox_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r11); const config_r6 = i0.ɵɵnextContext(3).$implicit; i0.ɵɵtwoWayBindingSet(config_r6.enableMin, $event) || (config_r6.enableMin = $event); return i0.ɵɵresetView($event); });
     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.ɵɵelementStart(3, "mat-checkbox", 39);
+    i0.ɵɵtwoWayListener("ngModelChange", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_mat_checkbox_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r11); const config_r6 = i0.ɵɵnextContext(3).$implicit; i0.ɵɵtwoWayBindingSet(config_r6.enableMax, $event) || (config_r6.enableMax = $event); return i0.ɵɵresetView($event); });
     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.ɵɵelementStart(4, "div", 38)(5, "input", 40);
+    i0.ɵɵtwoWayListener("ngModelChange", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r11); const config_r6 = i0.ɵɵnextContext(3).$implicit; i0.ɵɵtwoWayBindingSet(config_r6.value, $event) || (config_r6.value = $event); return i0.ɵɵresetView($event); });
     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.ɵɵelementStart(6, "input", 41);
+    i0.ɵɵtwoWayListener("ngModelChange", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_input_ngModelChange_6_listener($event) { i0.ɵɵrestoreView(_r11); const config_r6 = i0.ɵɵnextContext(3).$implicit; i0.ɵɵtwoWayBindingSet(config_r6.highValue, $event) || (config_r6.highValue = $event); return i0.ɵɵresetView($event); });
     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.ɵɵtwoWayProperty("ngModel", config_r6.enableMin);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", config_r6.enableMax);
+    i0.ɵɵtwoWayProperty("ngModel", config_r6.enableMax);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("value", config_r6.value);
+    i0.ɵɵtwoWayProperty("ngModel", config_r6.value);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("value", config_r6.highValue);
+    i0.ɵɵtwoWayProperty("ngModel", 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.ɵɵelementStart(0, "option", 44);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -275,9 +280,9 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_opti
 } }
 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.ɵɵelementStart(0, "select", 42);
     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.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_option_1_Template, 2, 2, "option", 43);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const config_r6 = i0.ɵɵnextContext(3).$implicit;
@@ -349,25 +354,25 @@ function PhoenixMenuItemComponent_div_7_Template(rf, ctx) { if (rf & 1) {
 } }
 function PhoenixMenuItemComponent_button_8_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵelementStart(0, "button", 45);
     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.ɵɵelement(2, "use", 46);
     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);
+    i0.ɵɵelement(0, "app-phoenix-menu-item", 49);
 } 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.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_9_app_phoenix_menu_item_1_Template, 1, 1, "app-phoenix-menu-item", 48);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -393,13 +398,13 @@ class PhoenixMenuItemComponent {
     castConfigsToAny(configs) {
         return configs;
     }
-    static ɵfac = function PhoenixMenuItemComponent_Factory(t) { return new (t || PhoenixMenuItemComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵfac = function PhoenixMenuItemComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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) {
+        } }, 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"], [3, "ngModelChange", "change", "ngModel"], ["type", "number", "placeholder", "Min", "step", "config.step", 1, "form-control", "form-control-sm", 3, "ngModelChange", "input", "ngModel"], ["type", "number", "placeholder", "Max", "step", "config.step", 1, "form-control", "form-control-sm", 3, "ngModelChange", "input", "ngModel"], ["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();
@@ -417,11 +422,11 @@ class PhoenixMenuItemComponent {
             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 });
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i2.NgSwitch, i2.NgSwitchCase, i3.MatButton, i3$1.NgSelectOption, i3$1.ɵNgSelectMultipleOption, i3$1.DefaultValueAccessor, i3$1.NumberValueAccessor, i3$1.NgControlStatus, i3$1.NgModel, i4.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"] }]
+        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                    [(ngModel)]=\"config.enableMin\"\n                    (change)=\"config.setEnableMin($event.checked)\"\n                  ></mat-checkbox>\n                  <mat-checkbox\n                    [(ngModel)]=\"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                    [(ngModel)]=\"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                    [(ngModel)]=\"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: [{
@@ -432,7 +437,7 @@ class PhoenixMenuItemComponent {
 class PhoenixMenuComponent {
     rootNode;
-    static ɵfac = function PhoenixMenuComponent_Factory(t) { return new (t || PhoenixMenuComponent)(); };
+    static ɵfac = function PhoenixMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
@@ -460,7 +465,7 @@ class EventDisplayService extends EventDisplay {
     constructor() {
         super();
     }
-    static ɵfac = function EventDisplayService_Factory(t) { return new (t || EventDisplayService)(); };
+    static ɵfac = function EventDisplayService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EventDisplayService)(); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: EventDisplayService, factory: EventDisplayService.ɵfac, providedIn: 'root' });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EventDisplayService, [{
@@ -477,7 +482,7 @@ class MenuToggleComponent {
     active;
     tooltip;
     disabled = false;
-    static ɵfac = function MenuToggleComponent_Factory(t) { return new (t || MenuToggleComponent)(); };
+    static ɵfac = function MenuToggleComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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();
@@ -490,7 +495,7 @@ class MenuToggleComponent {
             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}"] });
+        } }, dependencies: [i2.NgClass, i3$2.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,
@@ -593,7 +598,7 @@ class AnimateCameraComponent {
         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 ɵfac = function AnimateCameraComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
@@ -609,7 +614,7 @@ class AnimateCameraComponent {
             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] });
+        } }, dependencies: [i2.NgForOf, i3$3.MatMenu, i3$3.MatMenuItem, i3$3.MatMenuTrigger, MenuToggleComponent] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AnimateCameraComponent, [{
         type: Component,
@@ -617,7 +622,7 @@ class AnimateCameraComponent {
     }], () => [{ 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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AnimateCameraComponent, { className: "AnimateCameraComponent", filePath: "components/ui-menu/animate-camera/animate-camera.component.ts", lineNumber: 59 }); })();
 class AnimateEventComponent {
     eventDisplay;
@@ -633,7 +638,7 @@ class AnimateEventComponent {
             });
         }
     }
-    static ɵfac = function AnimateEventComponent_Factory(t) { return new (t || AnimateEventComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵfac = function AnimateEventComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(); });
@@ -658,7 +663,7 @@ class AutoRotateComponent {
         this.autoRotate = !this.autoRotate;
         this.eventDisplay.getUIManager().setAutoRotate(this.autoRotate);
     }
-    static ɵfac = function AutoRotateComponent_Factory(t) { return new (t || AutoRotateComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵfac = function AutoRotateComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(); });
@@ -817,7 +822,7 @@ class OverlayComponent {
         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 ɵfac = function OverlayComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
@@ -838,7 +843,7 @@ class OverlayComponent {
             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 });
+        } }, dependencies: [i2.NgClass, i2.NgIf, i2$2.CdkDrag, i2$2.CdkDragHandle, i3$2.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,
@@ -979,13 +984,14 @@ function CollectionsInfoOverlayComponent_div_1_table_3_tr_11_Template(rf, ctx) {
     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.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(7, _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.ɵɵpropertyInterpolate("value", object_r9.labelText);
     i0.ɵɵproperty("id", "label" + i_r11);
     i0.ɵɵadvance(5);
     i0.ɵɵproperty("ngForOf", ctx_r1.collectionColumns);
@@ -1003,7 +1009,7 @@ function CollectionsInfoOverlayComponent_div_1_table_3_Template(rf, ctx) { if (r
     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.ɵɵtemplate(11, CollectionsInfoOverlayComponent_div_1_table_3_tr_11_Template, 14, 11, "tr", 19);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -1066,7 +1072,7 @@ class CollectionsInfoOverlayComponent {
             isCut: !eventDataGroup.getObjectByProperty('uuid', object.uuid)
                 ?.visible,
         }));
-        this.collectionColumns = Object.keys(this.showingCollection[0]).filter((column) => !['uuid', 'hits', 'isCut'].includes(column));
+        this.collectionColumns = Object.keys(this.showingCollection[0]).filter((column) => !['uuid', 'hits', 'isCut', 'labelText'].includes(column));
     }
     sort(column, order) {
         if (order === 'asc')
@@ -1109,8 +1115,8 @@ class CollectionsInfoOverlayComponent {
             .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) {
+    static ɵfac = function CollectionsInfoOverlayComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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, "value", "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();
@@ -1118,11 +1124,11 @@ class CollectionsInfoOverlayComponent {
             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)}"] });
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i3$2.MatTooltip, i3$1.NgSelectOption, i3$1.ɵ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"] }]
+        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                    value=\"{{ object.labelText }}\"\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
         }] }); })();
@@ -1147,11 +1153,14 @@ class CollectionsInfoComponent {
     toggleOverlay() {
         this.showObjectsInfo = !this.showObjectsInfo;
         this.overlayWindow.instance.showObjectsInfo = this.showObjectsInfo;
-        this.showObjectsInfo
-            ? this.overlayWindow.instance.enableHighlighting()
-            : this.overlayWindow.instance.disableHighlighting();
+        if (this.showObjectsInfo) {
+            this.overlayWindow.instance.enableHighlighting();
+        }
+        else {
+            this.overlayWindow.instance.disableHighlighting();
+        }
     }
-    static ɵfac = function CollectionsInfoComponent_Factory(t) { return new (t || CollectionsInfoComponent)(i0.ɵɵdirectiveInject(i1$1.Overlay)); };
+    static ɵfac = function CollectionsInfoComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(); });
@@ -1164,7 +1173,7 @@ class 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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CollectionsInfoComponent, { className: "CollectionsInfoComponent", filePath: "components/ui-menu/collections-info/collections-info.component.ts", lineNumber: 16 }); })();
 const _c0$7 = a0 => ({ "active-object": a0 });
 function GeometryBrowserOverlayComponent_div_1_div_1_option_8_Template(rf, ctx) { if (rf & 1) {
@@ -1312,7 +1321,7 @@ class GeometryBrowserOverlayComponent {
     disableHighlighting() {
         this.eventDisplay.disableHighlighting();
     }
-    static ɵfac = function GeometryBrowserOverlayComponent_Factory(t) { return new (t || GeometryBrowserOverlayComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵfac = function GeometryBrowserOverlayComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
@@ -1321,11 +1330,11 @@ class GeometryBrowserOverlayComponent {
             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)}"] });
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i3$2.MatTooltip, i3$1.NgSelectOption, i3$1.ɵ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"] }]
+        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
         }] }); })();
@@ -1350,11 +1359,12 @@ class GeometryBrowserComponent {
     toggleOverlay() {
         this.browseDetectorParts = !this.browseDetectorParts;
         this.overlayWindow.instance.browseDetectorParts = this.browseDetectorParts;
+        // eslint-disable-next-line
         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 ɵfac = function GeometryBrowserComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(); });
@@ -1367,7 +1377,7 @@ class 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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GeometryBrowserComponent, { className: "GeometryBrowserComponent", filePath: "components/ui-menu/geometry-browser/geometry-browser.component.ts", lineNumber: 16 }); })();
 class DarkThemeComponent {
     eventDisplay;
@@ -1382,7 +1392,7 @@ class DarkThemeComponent {
         this.darkTheme = !this.darkTheme;
         this.eventDisplay.getUIManager().setDarkTheme(this.darkTheme);
     }
-    static ɵfac = function DarkThemeComponent_Factory(t) { return new (t || DarkThemeComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵfac = function DarkThemeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(); });
@@ -1432,12 +1442,12 @@ class EventSelectorComponent {
         const value = selected.target.value;
         this.eventDisplay.loadEvent(value);
     }
-    static ɵfac = function EventSelectorComponent_Factory(t) { return new (t || EventSelectorComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵfac = function EventSelectorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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)}"] });
+        } }, dependencies: [i2.NgForOf, i2.NgIf, i3$2.MatTooltip, i3$1.NgSelectOption, i3$1.ɵ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,
@@ -1512,7 +1522,7 @@ class ExperimentInfoComponent {
             this.experimentInfo = this.eventDisplay.getEventMetadata();
         });
     }
-    static ɵfac = function ExperimentInfoComponent_Factory(t) { return new (t || ExperimentInfoComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵfac = function ExperimentInfoComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
@@ -1578,7 +1588,7 @@ class InfoPanelOverlayComponent {
     ngOnInit() {
         this.actionsList = this.eventDisplay.getInfoLogger().getInfoLoggerList();
     }
-    static ɵfac = function InfoPanelOverlayComponent_Factory(t) { return new (t || InfoPanelOverlayComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵfac = function InfoPanelOverlayComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
@@ -1641,7 +1651,7 @@ class InfoPanelComponent {
         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 ɵfac = function InfoPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(); });
@@ -1654,7 +1664,7 @@ class 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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InfoPanelComponent, { className: "InfoPanelComponent", filePath: "components/ui-menu/info-panel/info-panel.component.ts", lineNumber: 19 }); })();
 var EventDataFormat;
 (function (EventDataFormat) {
@@ -1770,13 +1780,21 @@ class IOOptionsDialogComponent {
     }
     handleJiveXMLDataInput(files) {
         const callback = (content) => {
-            const jiveloader = new JiveXMLLoader();
+            const jiveloader = this.getJiveXMLLoader();
             jiveloader.process(content);
             const eventData = jiveloader.getEventData();
             this.eventDisplay.buildEventDataFromJSON(eventData);
         };
         this.handleFileInput(files[0], 'xml', callback);
     }
+    getJiveXMLLoader() {
+        if (this.eventDisplay?.configuration?.eventDataLoader instanceof JiveXMLLoader) {
+            return this.eventDisplay.configuration.eventDataLoader;
+        }
+        else {
+            return new JiveXMLLoader();
+        }
+    }
     handleOBJInput(files) {
         const callback = (content, name) => {
             this.eventDisplay.parseOBJGeometry(content, name);
@@ -1790,10 +1808,12 @@ class IOOptionsDialogComponent {
         this.handleFileInput(files[0], 'phnx', callback);
     }
     handleGLTFInput(files) {
-        const callback = (content, name) => {
-            this.eventDisplay.parseGLTFGeometry(content, name);
+        const callback = (file) => {
+            this.eventDisplay.parseGLTFGeometry(file);
         };
-        this.handleFileInput(files[0], 'gltf', callback);
+        if (this.isFileOfExtension(files[0].name, 'gltf,glb,gltf.zip,glb.zip')) {
+            callback(files[0]);
+        }
     }
     handlePhoenixInput(files) {
         const callback = (content) => {
@@ -1807,7 +1827,7 @@ class IOOptionsDialogComponent {
         this.onClose();
     }
     async handleRootJSONInput(files) {
-        if (!this.isFileOfExtension(files[0], 'gz')) {
+        if (!this.isFileOfExtension(files[0].name, 'gz')) {
             return;
         }
         const name = files[0].name.split('.')[0];
@@ -1823,7 +1843,7 @@ class IOOptionsDialogComponent {
         });
     }
     async handleZipEventDataInput(files) {
-        if (!this.isFileOfExtension(files[0], 'zip')) {
+        if (!this.isFileOfExtension(files[0].name, 'zip,json.zip')) {
             return;
         }
         const allEventsObject = {};
@@ -1844,7 +1864,7 @@ class IOOptionsDialogComponent {
             Object.assign(allEventsObject, JSON.parse(filesWithData[fileName]));
         });
         // JiveXML event data
-        const jiveloader = new JiveXMLLoader();
+        const jiveloader = this.getJiveXMLLoader();
         Object.keys(filesWithData)
             .filter((fileName) => {
             return fileName.endsWith('.xml') || fileName.startsWith('JiveXML');
@@ -1858,9 +1878,9 @@ class IOOptionsDialogComponent {
         this.eventDisplay.parsePhoenixEvents(allEventsObject);
         this.onClose();
     }
-    handleFileInput(file, extension, callback) {
+    handleFileInput(file, extensions, callback) {
         const reader = new FileReader();
-        if (this.isFileOfExtension(file, extension)) {
+        if (this.isFileOfExtension(file.name, extensions)) {
             reader.onload = () => {
                 callback(reader.result.toString(), file.name.split('.')[0]);
             };
@@ -1868,8 +1888,8 @@ class IOOptionsDialogComponent {
         }
         this.onClose();
     }
-    isFileOfExtension(file, extension) {
-        if (file.name.split('.').pop() === extension) {
+    isFileOfExtension(fileName, extensions) {
+        if (extensions.split(',').includes(fileName.slice(fileName.indexOf('.') + 1))) {
             return true;
         }
         console.error('Error: Invalid file format!');
@@ -1882,8 +1902,8 @@ class IOOptionsDialogComponent {
     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) {
+    static ɵfac = function IOOptionsDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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,.glb,.gltf.zip,.glb.zip", "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");
@@ -1907,7 +1927,7 @@ class IOOptionsDialogComponent {
             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.ɵɵtext(18, " Load .gltf/.glb ");
             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)); });
@@ -1957,7 +1977,7 @@ class IOOptionsDialogComponent {
 }
 (() => { (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"] }]
+        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,.glb,.gltf.zip,.glb.zip\"\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/.glb\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
         }] }); })();
@@ -1976,7 +1996,7 @@ class IoOptionsComponent {
         dialogRef.componentInstance.eventDataImportOptions =
             this.eventDataImportOptions;
     }
-    static ɵfac = function IoOptionsComponent_Factory(t) { return new (t || IoOptionsComponent)(i0.ɵɵdirectiveInject(i1$2.MatDialog)); };
+    static ɵfac = function IoOptionsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(); });
@@ -2005,14 +2025,14 @@ class MainViewToggleComponent {
             .getUIManager()
             .toggleOrthographicView(this.orthographicView);
     }
-    static ɵfac = function MainViewToggleComponent_Factory(t) { return new (t || MainViewToggleComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵfac = function MainViewToggleComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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] });
+        } }, dependencies: [i3$2.MatTooltip, MenuToggleComponent] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MainViewToggleComponent, [{
         type: Component,
@@ -2043,7 +2063,7 @@ class ObjectClippingComponent {
         this.eventDisplay.getUIManager().setClipping(value);
         this.clippingEnabled = value;
     }
-    static ɵfac = function ObjectClippingComponent_Factory(t) { return new (t || ObjectClippingComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵfac = function ObjectClippingComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
@@ -2077,7 +2097,7 @@ class ObjectClippingComponent {
             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}"] });
+        } }, dependencies: [i3$3.MatMenu, i3$3.MatMenuItem, i3$3.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,
@@ -2106,7 +2126,7 @@ class AttributePipe {
         }
         return transformedValue;
     }
-    static ɵfac = function AttributePipe_Factory(t) { return new (t || AttributePipe)(); };
+    static ɵfac = function AttributePipe_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AttributePipe)(); };
     static ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "attributePipe", type: AttributePipe, pure: true });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AttributePipe, [{
@@ -2150,7 +2170,7 @@ class ObjectSelectionOverlayComponent {
     ngOnInit() {
         this.eventDisplay.allowSelection(this.selectedObject);
     }
-    static ɵfac = function ObjectSelectionOverlayComponent_Factory(t) { return new (t || ObjectSelectionOverlayComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵfac = function ObjectSelectionOverlayComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
@@ -2193,7 +2213,7 @@ class ObjectSelectionComponent {
         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 ɵfac = function ObjectSelectionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(); });
@@ -2206,7 +2226,7 @@ class 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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ObjectSelectionComponent, { className: "ObjectSelectionComponent", filePath: "components/ui-menu/object-selection/object-selection.component.ts", lineNumber: 17 }); })();
 const _c0$6 = ["overlayWindow"];
 class OverlayViewWindowComponent {
@@ -2245,7 +2265,7 @@ class OverlayViewWindowComponent {
     toggleBgTransparency() {
         this.transparentBody = !this.transparentBody;
     }
-    static ɵfac = function OverlayViewWindowComponent_Factory(t) { return new (t || OverlayViewWindowComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵfac = function OverlayViewWindowComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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) {
@@ -2272,7 +2292,7 @@ class OverlayViewWindowComponent {
             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}"] });
+        } }, dependencies: [i3$2.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,
@@ -2305,7 +2325,7 @@ class OverlayViewComponent {
         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 ɵfac = function OverlayViewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(); });
@@ -2318,7 +2338,7 @@ class 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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OverlayViewComponent, { className: "OverlayViewComponent", filePath: "components/ui-menu/overlay-view/overlay-view.component.ts", lineNumber: 16 }); })();
 const _c0$5 = a0 => ({ visible: a0 });
 function TreeMenuItemComponent_ng_container_0_button_2_Template(rf, ctx) { if (rf & 1) {
@@ -2385,7 +2405,7 @@ class TreeMenuItemComponent {
         this.visible = visible;
         this.children.forEach((child) => child.toggleVisibility(visible));
     }
-    static ɵfac = function TreeMenuItemComponent_Factory(t) { return new (t || TreeMenuItemComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵfac = function TreeMenuItemComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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) {
@@ -2395,7 +2415,7 @@ class TreeMenuItemComponent {
             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}"] });
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i3.MatIconButton, i4$1.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,
@@ -2467,7 +2487,7 @@ class TreeMenuComponent {
     };
     constructor() { }
     ngOnInit() { }
-    static ɵfac = function TreeMenuComponent_Factory(t) { return new (t || TreeMenuComponent)(); };
+    static ɵfac = function TreeMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
@@ -2581,7 +2601,7 @@ class CartesianGridConfigComponent {
     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 ɵfac = function CartesianGridConfigComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
@@ -2707,7 +2727,7 @@ class CartesianGridConfigComponent {
             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}"] });
+        } }, dependencies: [i1$2.MatDialogTitle, i1$2.MatDialogActions, i1$2.MatDialogContent, i3.MatButton, i3$1.NgControlStatus, i3$1.NgModel, i3$3.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,
@@ -2808,7 +2828,7 @@ class ViewOptionsComponent {
     ngOnDestroy() {
         this.sub.unsubscribe();
     }
-    static ɵfac = function ViewOptionsComponent_Factory(t) { return new (t || ViewOptionsComponent)(i0.ɵɵdirectiveInject(EventDisplayService), i0.ɵɵdirectiveInject(i1$2.MatDialog)); };
+    static ɵfac = function ViewOptionsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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) {
@@ -2866,7 +2886,7 @@ class ViewOptionsComponent {
             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}"] });
+        } }, dependencies: [i2.NgForOf, i2.NgIf, i3$3.MatMenu, i3$3.MatMenuItem, i3$3.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,
@@ -2875,7 +2895,7 @@ class ViewOptionsComponent {
             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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ViewOptionsComponent, { className: "ViewOptionsComponent", filePath: "components/ui-menu/view-options/view-options.component.ts", lineNumber: 21 }); })();
 class VrToggleComponent {
     eventDisplay;
@@ -2909,7 +2929,7 @@ class VrToggleComponent {
             this.vrActive = false;
         }
     }
-    static ɵfac = function VrToggleComponent_Factory(t) { return new (t || VrToggleComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵfac = function VrToggleComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(); });
@@ -2975,7 +2995,7 @@ class ArToggleComponent {
             this.arActive = false;
         }
     }
-    static ɵfac = function ArToggleComponent_Factory(t) { return new (t || ArToggleComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵfac = function ArToggleComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
@@ -2992,7 +3012,7 @@ class ArToggleComponent {
             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] });
+        } }, dependencies: [i2.NgIf, i3$3.MatMenu, i3$3.MatMenuItem, i3$3.MatMenuTrigger, MenuToggleComponent] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArToggleComponent, [{
         type: Component,
@@ -3054,7 +3074,7 @@ class ZoomControlsComponent {
         this.zoomTime = 200;
         clearTimeout(this.zoomTimeout);
     }
-    static ɵfac = function ZoomControlsComponent_Factory(t) { return new (t || ZoomControlsComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵfac = function ZoomControlsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(); });
@@ -3103,7 +3123,7 @@ class SSModeComponent {
     onDocumentClick = () => {
         document.exitFullscreen?.();
     };
-    static ɵfac = function SSModeComponent_Factory(t) { return new (t || SSModeComponent)(); };
+    static ɵfac = function SSModeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(); });
@@ -3160,7 +3180,7 @@ class MakePictureComponent {
             .getThreeManager()
             .makeScreenShot(this.width, this.height, this.fitting);
     }
-    static ɵfac = function MakePictureComponent_Factory(t) { return new (t || MakePictureComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵfac = function MakePictureComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
@@ -3211,13 +3231,13 @@ class MakePictureComponent {
             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 });
+        } }, dependencies: [i2.NgForOf, i3$1.NgControlStatus, i3$1.NgModel, i3$3.MatMenu, i3$3.MatMenuItem, i3$3.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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MakePictureComponent, { className: "MakePictureComponent", filePath: "components/ui-menu/make-picture/make-picture.component.ts", lineNumber: 15 }); })();
 class PerformanceToggleComponent {
     eventDisplay;
@@ -3229,7 +3249,7 @@ class PerformanceToggleComponent {
         this.performanceMode = !this.performanceMode;
         this.eventDisplay.getThreeManager().setAntialiasing(!this.performanceMode);
     }
-    static ɵfac = function PerformanceToggleComponent_Factory(t) { return new (t || PerformanceToggleComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+    static ɵfac = function PerformanceToggleComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(); });
@@ -3248,7 +3268,7 @@ 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 ɵfac = function UiMenuWrapperComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
@@ -3266,7 +3286,7 @@ class UiMenuWrapperComponent {
             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}"] });
+        } }, dependencies: [i2.NgClass, i3$2.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,
@@ -3335,7 +3355,7 @@ class ShareLinkDialogComponent {
     updateQRCode(link) {
         QRCode.toCanvas(this.qrcodeCanvas.nativeElement, link);
     }
-    static ɵfac = function ShareLinkDialogComponent_Factory(t) { return new (t || ShareLinkDialogComponent)(i0.ɵɵdirectiveInject(i1$2.MatDialogRef)); };
+    static ɵfac = function ShareLinkDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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) {
@@ -3420,7 +3440,7 @@ class ShareLinkDialogComponent {
             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)}"] });
+        } }, dependencies: [i1$2.MatDialogTitle, i1$2.MatDialogActions, i1$2.MatDialogContent, i3.MatButton, i3$1.NgSelectOption, i3$1.ɵ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,
@@ -3429,7 +3449,7 @@ class ShareLinkDialogComponent {
             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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShareLinkDialogComponent, { className: "ShareLinkDialogComponent", filePath: "components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.ts", lineNumber: 16 }); })();
 class ShareLinkComponent {
     dialog;
@@ -3439,7 +3459,7 @@ class ShareLinkComponent {
     openShareLinkDialog() {
         this.dialog.open(ShareLinkDialogComponent);
     }
-    static ɵfac = function ShareLinkComponent_Factory(t) { return new (t || ShareLinkComponent)(i0.ɵɵdirectiveInject(i1$2.MatDialog)); };
+    static ɵfac = function ShareLinkComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(); });
@@ -3458,7 +3478,7 @@ const _c0$2 = ["*"];
 class UiMenuComponent {
     eventDataImportOptions = Object.values(EventDataFormat);
     animationPresets = defaultAnimationPresets;
-    static ɵfac = function UiMenuComponent_Factory(t) { return new (t || UiMenuComponent)(); };
+    static ɵfac = function UiMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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");
@@ -3564,7 +3584,7 @@ class FileExplorerComponent {
         }
         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 ɵfac = function FileExplorerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
@@ -3631,7 +3651,14 @@ class FileLoaderService {
         eventDisplay.parsePhoenixEvents(JSON.parse(eventData));
     }
     loadJiveXMLEvent(eventData, eventDisplay) {
-        const jiveXMLLoader = new JiveXMLLoader();
+        let jiveXMLLoader = undefined;
+        if (eventDisplay.configuration.eventDataLoader instanceof JiveXMLLoader) {
+            jiveXMLLoader = eventDisplay.configuration
+                .eventDataLoader;
+        }
+        else {
+            jiveXMLLoader = new JiveXMLLoader();
+        }
         jiveXMLLoader.process(eventData);
         const processedEventData = jiveXMLLoader.getEventData();
         eventDisplay.buildEventDataFromJSON(processedEventData);
@@ -3657,7 +3684,7 @@ class FileLoaderService {
             this.loadEvent(this.lastEventsURL, eventDisplay, this.lastEventsOptions);
         }
     }
-    static ɵfac = function FileLoaderService_Factory(t) { return new (t || FileLoaderService)(); };
+    static ɵfac = function FileLoaderService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FileLoaderService)(); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: FileLoaderService, factory: FileLoaderService.ɵfac, providedIn: 'root' });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileLoaderService, [{
@@ -3668,7 +3695,7 @@ class FileLoaderService {
     }], null, null); })();
 class RingLoaderComponent {
-    static ɵfac = function RingLoaderComponent_Factory(t) { return new (t || RingLoaderComponent)(); };
+    static ɵfac = function RingLoaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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");
@@ -3765,7 +3792,7 @@ class EventDataExplorerDialogComponent {
         }
         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 ɵfac = function EventDataExplorerDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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");
@@ -3810,7 +3837,7 @@ class EventDataExplorerComponent {
             },
         });
     }
-    static ɵfac = function EventDataExplorerComponent_Factory(t) { return new (t || EventDataExplorerComponent)(i0.ɵɵdirectiveInject(i1$2.MatDialog)); };
+    static ɵfac = function EventDataExplorerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(); });
@@ -3886,7 +3913,7 @@ class CycleEventsComponent {
             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 ɵfac = function CycleEventsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(); });
@@ -3897,7 +3924,7 @@ class CycleEventsComponent {
         } 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}"] });
+        } }, dependencies: [i2.NgClass, i3$2.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,
@@ -3928,7 +3955,7 @@ class ErrorMessageService {
     setError(error) {
         this.error.update(error);
     }
-    static ɵfac = function ErrorMessageService_Factory(t) { return new (t || ErrorMessageService)(); };
+    static ɵfac = function ErrorMessageService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ErrorMessageService)(); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ErrorMessageService, factory: ErrorMessageService.ɵfac, providedIn: 'root' });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ErrorMessageService, [{
@@ -3983,7 +4010,7 @@ class LoaderComponent {
             }
         });
     }
-    static ɵfac = function LoaderComponent_Factory(t) { return new (t || LoaderComponent)(i0.ɵɵdirectiveInject(ErrorMessageService)); };
+    static ɵfac = function LoaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
@@ -4025,7 +4052,7 @@ class GlobalErrorHandler {
         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 ɵfac = function GlobalErrorHandler_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || GlobalErrorHandler)(i0.ɵɵinject(i0.Injector)); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: GlobalErrorHandler, factory: GlobalErrorHandler.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GlobalErrorHandler, [{
@@ -4043,7 +4070,7 @@ class ExperimentLinkComponent {
     goToExperiment() {
         window.open(this.experimentLink, '_blank');
     }
-    static ɵfac = function ExperimentLinkComponent_Factory(t) { return new (t || ExperimentLinkComponent)(); };
+    static ɵfac = function ExperimentLinkComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(); });
@@ -4057,7 +4084,7 @@ class ExperimentLinkComponent {
 (() => { (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 ɵfac = function EmbedMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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");
@@ -4122,7 +4149,7 @@ const PHOENIX_COMPONENTS = [
     CycleEventsComponent,
 ];
 class PhoenixUIModule {
-    static ɵfac = function PhoenixUIModule_Factory(t) { return new (t || PhoenixUIModule)(); };
+    static ɵfac = function PhoenixUIModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PhoenixUIModule)(); };
     static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: PhoenixUIModule });
     static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
             EventDisplayService,
@@ -4139,6 +4166,7 @@ class PhoenixUIModule {
             MatTooltipModule,
             OverlayModule,
             FormsModule,
+            ReactiveFormsModule,
             MatMenuModule,
             MatRadioModule,
             MatSliderModule,
@@ -4161,6 +4189,7 @@ class PhoenixUIModule {
                     MatTooltipModule,
                     OverlayModule,
                     FormsModule,
+                    ReactiveFormsModule,
                     MatMenuModule,
                     MatRadioModule,
                     MatSliderModule,
@@ -4237,6 +4266,7 @@ class PhoenixUIModule {
         MatTooltipModule,
         OverlayModule,
         FormsModule,
+        ReactiveFormsModule,
         MatMenuModule,
         MatRadioModule,
         MatSliderModule,