phoenix-ui-components 2.12.0 → 2.14.0

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

@@ -8,11 +8,13 @@ import * as i2$1 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
 import * as i2$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3 from '@angular/material/slide-toggle';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i4 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i4 from '@angular/material/checkbox';
+import * as i4$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i5 from '@rp3e11/ngx-slider';
+import * as i6 from '@rp3e11/ngx-slider';
 import { NgxSliderModule } from '@rp3e11/ngx-slider';
 import { EventDisplay, SceneManager, PrettySymbols, Edm4hepJsonLoader, JiveXMLLoader, CMSLoader, readZipFile, VRManager, XRSessionType, ARManager, phoenixURLOptions, ActiveVariable } from 'phoenix-event-display';
 import * as i3$1 from '@angular/material/menu';
@@ -29,8 +31,10 @@ import packageJson from 'phoenix-event-display/package.json';
 import { __awaiter } from 'tslib';
 import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i4$1 from '@angular/material/icon';
+import * as i4$2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
+import * as i5 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
 import QRCode from 'qrcode';
 import * as i2$5 from '@angular/cdk/tree';
 import { NestedTreeControl, CdkTreeModule } from '@angular/cdk/tree';
@@ -74,7 +78,9 @@ class ConfigSliderComponent {
     constructor() {
         this.value = 0;
         this.min = 0;
+        this.oldMin = 0;
         this.max = 100;
+        this.oldMax = 0;
         this.step = 1;
         this.allowCustomValue = false;
         this.onChange = new EventEmitter();
@@ -82,6 +88,28 @@ class ConfigSliderComponent {
     onValueChange(value) {
         value && this.onChange.emit(value);
     }
+    toggleMinCut(change) {
+        const value = change.checked;
+        if (value) {
+            this.min = this.oldMin;
+        }
+        else {
+            this.oldMin = this.min;
+            this.min = Number.MIN_SAFE_INTEGER;
+        }
+        // We should probably disable the min input too, and change text to be infinity symbol or something?
+    }
+    toggleMaxCut(change) {
+        const value = change.checked;
+        if (value) {
+            this.max = this.oldMax;
+        }
+        else {
+            this.oldMax = this.max;
+            this.max = Number.MAX_SAFE_INTEGER;
+        }
+        // We should probably disable the min input too, and change text to be infinity symbol or something?
+    }
 }
 ConfigSliderComponent.ɵfac = function ConfigSliderComponent_Factory(t) { return new (t || ConfigSliderComponent)(); };
 ConfigSliderComponent.ɵ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, "value", "valueChange"], ["class", "config-slider-input", "type", "number", 3, "value", "input", 4, "ngIf"], ["type", "number", 1, "config-slider-input", 3, "value", "input"]], template: function ConfigSliderComponent_Template(rf, ctx) {
@@ -188,9 +216,9 @@ function PhoenixMenuItemComponent_div_7_div_4_Template(rf, ctx) {
     }
 }
 const _c1$4 = function (a0) { return { "font-weight-bold w-100": a0 }; };
-function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_span_1_Template(rf, ctx) {
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_label_1_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "span", 26);
+        i0.ɵɵelementStart(0, "label", 26);
         i0.ɵɵtext(1);
         i0.ɵɵelementEnd();
     }
@@ -201,11 +229,11 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_span_1_Template(r
         i0.ɵɵtextInterpolate1(" ", config_r15.label, " ");
     }
 }
-function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_mat_checkbox_1_Template(rf, ctx) {
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_mat_checkbox_1_Template(rf, ctx) {
     if (rf & 1) {
         const _r28 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "mat-checkbox", 9);
-        i0.ɵɵlistener("change", function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_mat_checkbox_1_Template_mat_checkbox_change_0_listener($event) { i0.ɵɵrestoreView(_r28); const config_r15 = i0.ɵɵnextContext(3).$implicit; config_r15.onChange($event.checked); return i0.ɵɵresetView(config_r15.isChecked = $event.checked); });
+        i0.ɵɵlistener("change", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_mat_checkbox_1_Template_mat_checkbox_change_0_listener($event) { i0.ɵɵrestoreView(_r28); const config_r15 = i0.ɵɵnextContext(3).$implicit; config_r15.onChange($event.checked); return i0.ɵɵresetView(config_r15.isChecked = $event.checked); });
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
@@ -213,11 +241,11 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_mat_checkbo
         i0.ɵɵproperty("checked", config_r15.isChecked);
     }
 }
-function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_app_config_slider_2_Template(rf, ctx) {
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_app_config_slider_2_Template(rf, ctx) {
     if (rf & 1) {
         const _r32 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "app-config-slider", 34);
-        i0.ɵɵlistener("onChange", function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_app_config_slider_2_Template_app_config_slider_onChange_0_listener($event) { i0.ɵɵrestoreView(_r32); const config_r15 = i0.ɵɵnextContext(3).$implicit; config_r15.onChange($event); return i0.ɵɵresetView(config_r15.value = $event); });
+        i0.ɵɵlistener("onChange", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_app_config_slider_2_Template_app_config_slider_onChange_0_listener($event) { i0.ɵɵrestoreView(_r32); const config_r15 = i0.ɵɵnextContext(3).$implicit; config_r15.onChange($event); return i0.ɵɵresetView(config_r15.value = $event); });
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
@@ -225,11 +253,11 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_app_config_
         i0.ɵɵproperty("value", config_r15.value)("min", config_r15.min)("max", config_r15.max)("step", config_r15.step)("allowCustomValue", config_r15.allowCustomValue);
     }
 }
-function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_button_3_Template(rf, ctx) {
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_button_3_Template(rf, ctx) {
     if (rf & 1) {
         const _r36 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "button", 35);
-        i0.ɵɵlistener("click", function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_button_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r36); const config_r15 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r15.onClick()); });
+        i0.ɵɵlistener("click", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_button_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r36); const config_r15 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r15.onClick()); });
         i0.ɵɵtext(1);
         i0.ɵɵelementEnd();
     }
@@ -239,11 +267,11 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_button_3_Te
         i0.ɵɵtextInterpolate1(" ", config_r15.label, " ");
     }
 }
-function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_input_4_Template(rf, ctx) {
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_input_4_Template(rf, ctx) {
     if (rf & 1) {
         const _r40 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "input", 36);
-        i0.ɵɵlistener("input", function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_input_4_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r40); const config_r15 = i0.ɵɵnextContext(3).$implicit; config_r15.onChange($event.target.value); return i0.ɵɵresetView(config_r15.color = $event.target.value); });
+        i0.ɵɵlistener("input", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_input_4_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r40); const config_r15 = i0.ɵɵnextContext(3).$implicit; config_r15.onChange($event.target.value); return i0.ɵɵresetView(config_r15.color = $event.target.value); });
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
@@ -252,48 +280,58 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_input_4_Tem
     }
 }
 const _c2$1 = function (a0, a1, a2) { return { floor: a0, ceil: a1, step: a2, animate: false }; };
-function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_div_5_Template(rf, ctx) {
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template(rf, ctx) {
     if (rf & 1) {
         const _r44 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "div", 37)(1, "div", 38)(2, "input", 39);
-        i0.ɵɵlistener("input", function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_div_5_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r44); const config_r15 = i0.ɵɵnextContext(3).$implicit; config_r15.value = $event.target.value; return i0.ɵɵresetView(config_r15.onChange(config_r15)); });
+        i0.ɵɵelementStart(0, "div", 37)(1, "div", 38)(2, "mat-checkbox", 9);
+        i0.ɵɵlistener("change", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_mat_checkbox_change_2_listener($event) { i0.ɵɵrestoreView(_r44); const config_r15 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r15.setEnableMin($event.checked)); });
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "mat-checkbox", 9);
+        i0.ɵɵlistener("change", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_mat_checkbox_change_3_listener($event) { i0.ɵɵrestoreView(_r44); const config_r15 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r15.setEnableMax($event.checked)); });
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(4, "div", 38)(5, "input", 39);
+        i0.ɵɵlistener("input", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_input_input_5_listener($event) { i0.ɵɵrestoreView(_r44); const config_r15 = i0.ɵɵnextContext(3).$implicit; config_r15.value = $event.target.value; return i0.ɵɵresetView(config_r15.onChange(config_r15)); });
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(3, "input", 40);
-        i0.ɵɵlistener("input", function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_div_5_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r44); const config_r15 = i0.ɵɵnextContext(3).$implicit; config_r15.highValue = $event.target.value; return i0.ɵɵresetView(config_r15.onChange(config_r15)); });
+        i0.ɵɵelementStart(6, "input", 40);
+        i0.ɵɵlistener("input", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_input_input_6_listener($event) { i0.ɵɵrestoreView(_r44); const config_r15 = i0.ɵɵnextContext(3).$implicit; config_r15.highValue = $event.target.value; return i0.ɵɵresetView(config_r15.onChange(config_r15)); });
         i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(4, "ngx-slider", 41);
-        i0.ɵɵlistener("valueChange", function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_div_5_Template_ngx_slider_valueChange_4_listener($event) { i0.ɵɵrestoreView(_r44); const config_r15 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r15.value = $event); })("highValueChange", function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_div_5_Template_ngx_slider_highValueChange_4_listener($event) { i0.ɵɵrestoreView(_r44); const config_r15 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r15.highValue = $event); })("userChange", function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_div_5_Template_ngx_slider_userChange_4_listener($event) { i0.ɵɵrestoreView(_r44); const config_r15 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r15.onChange($event)); });
+        i0.ɵɵelementStart(7, "ngx-slider", 41);
+        i0.ɵɵlistener("valueChange", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_ngx_slider_valueChange_7_listener($event) { i0.ɵɵrestoreView(_r44); const config_r15 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r15.value = $event); })("highValueChange", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_ngx_slider_highValueChange_7_listener($event) { i0.ɵɵrestoreView(_r44); const config_r15 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r15.highValue = $event); })("userChange", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template_ngx_slider_userChange_7_listener($event) { i0.ɵɵrestoreView(_r44); const config_r15 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r15.onChange($event)); });
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
         const config_r15 = i0.ɵɵnextContext(3).$implicit;
         i0.ɵɵadvance(2);
+        i0.ɵɵproperty("checked", config_r15.enableMin);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("checked", config_r15.enableMax);
+        i0.ɵɵadvance(2);
         i0.ɵɵproperty("value", config_r15.value);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("value", config_r15.highValue);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("value", config_r15.value)("highValue", config_r15.highValue)("options", i0.ɵɵpureFunction3(5, _c2$1, config_r15.min, config_r15.max, config_r15.step));
+        i0.ɵɵproperty("value", config_r15.value)("highValue", config_r15.highValue)("options", i0.ɵɵpureFunction3(7, _c2$1, config_r15.min, config_r15.max, config_r15.step));
     }
 }
-function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_select_6_option_1_Template(rf, ctx) {
+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", 44);
         i0.ɵɵtext(1);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const singleOption_r55 = ctx.$implicit;
-        i0.ɵɵproperty("value", singleOption_r55);
+        const singleOption_r59 = ctx.$implicit;
+        i0.ɵɵproperty("value", singleOption_r59);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", singleOption_r55, " ");
+        i0.ɵɵtextInterpolate1(" ", singleOption_r59, " ");
     }
 }
-function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_select_6_Template(rf, ctx) {
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_Template(rf, ctx) {
     if (rf & 1) {
-        const _r58 = i0.ɵɵgetCurrentView();
+        const _r62 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "select", 42);
-        i0.ɵɵlistener("change", function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_select_6_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r58); const config_r15 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r15.onChange($event.target.value)); });
-        i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_select_6_option_1_Template, 2, 2, "option", 43);
+        i0.ɵɵlistener("change", function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r62); const config_r15 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(config_r15.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", 43);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
@@ -303,15 +341,15 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_select_6_Te
     }
 }
 const _c3$1 = function (a0) { return { "p-0": a0 }; };
-function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_Template(rf, ctx) {
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 27);
-        i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_mat_checkbox_1_Template, 1, 1, "mat-checkbox", 28);
-        i0.ɵɵtemplate(2, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_app_config_slider_2_Template, 1, 5, "app-config-slider", 29);
-        i0.ɵɵtemplate(3, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_button_3_Template, 2, 1, "button", 30);
-        i0.ɵɵtemplate(4, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_input_4_Template, 1, 1, "input", 31);
-        i0.ɵɵtemplate(5, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_div_5_Template, 5, 9, "div", 32);
-        i0.ɵɵtemplate(6, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_select_6_Template, 2, 1, "select", 33);
+        i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_mat_checkbox_1_Template, 1, 1, "mat-checkbox", 28);
+        i0.ɵɵtemplate(2, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_app_config_slider_2_Template, 1, 5, "app-config-slider", 29);
+        i0.ɵɵtemplate(3, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_button_3_Template, 2, 1, "button", 30);
+        i0.ɵɵtemplate(4, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_input_4_Template, 1, 1, "input", 31);
+        i0.ɵɵtemplate(5, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template, 8, 11, "div", 32);
+        i0.ɵɵtemplate(6, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_Template, 2, 1, "select", 33);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
@@ -331,11 +369,11 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_Template(rf
         i0.ɵɵproperty("ngSwitchCase", "select");
     }
 }
-function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_Template(rf, ctx) {
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "label", 23);
-        i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_span_1_Template, 2, 4, "span", 24);
-        i0.ɵɵtemplate(2, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_Template, 7, 9, "div", 25);
+        i0.ɵɵelementStart(0, "div", 23);
+        i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_label_1_Template, 2, 4, "label", 24);
+        i0.ɵɵtemplate(2, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_Template, 7, 9, "div", 25);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
@@ -349,7 +387,7 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_Template(rf, ctx)
 function PhoenixMenuItemComponent_div_7_ng_container_6_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainerStart(0, 21);
-        i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_Template, 3, 2, "label", 22);
+        i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_Template, 3, 2, "div", 22);
         i0.ɵɵelementContainerEnd();
     }
     if (rf & 2) {
@@ -362,9 +400,9 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_Template(rf, ctx) {
 const _c4$1 = function (a0) { return { "top.px": a0 }; };
 function PhoenixMenuItemComponent_div_7_Template(rf, ctx) {
     if (rf & 1) {
-        const _r63 = i0.ɵɵgetCurrentView();
+        const _r67 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "div")(1, "button", 15);
-        i0.ɵɵlistener("click", function PhoenixMenuItemComponent_div_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r63); const ctx_r62 = i0.ɵɵnextContext(); ctx_r62.calculateConfigTop(); return i0.ɵɵresetView(ctx_r62.currentNode.configActive = !ctx_r62.currentNode.configActive); });
+        i0.ɵɵlistener("click", function PhoenixMenuItemComponent_div_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r67); const ctx_r66 = i0.ɵɵnextContext(); ctx_r66.calculateConfigTop(); return i0.ɵɵresetView(ctx_r66.currentNode.configActive = !ctx_r66.currentNode.configActive); });
         i0.ɵɵnamespaceSVG();
         i0.ɵɵelementStart(2, "svg");
         i0.ɵɵelement(3, "use", 16);
@@ -388,9 +426,9 @@ function PhoenixMenuItemComponent_div_7_Template(rf, ctx) {
 const _c5$1 = function (a0) { return { expanded: a0 }; };
 function PhoenixMenuItemComponent_button_8_Template(rf, ctx) {
     if (rf & 1) {
-        const _r65 = i0.ɵɵgetCurrentView();
+        const _r69 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "button", 45);
-        i0.ɵɵlistener("click", function PhoenixMenuItemComponent_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r65); const ctx_r64 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r64.currentNode.childrenActive = !ctx_r64.currentNode.childrenActive); });
+        i0.ɵɵlistener("click", function PhoenixMenuItemComponent_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r69); const ctx_r68 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r68.currentNode.childrenActive = !ctx_r68.currentNode.childrenActive); });
         i0.ɵɵnamespaceSVG();
         i0.ɵɵelementStart(1, "svg");
         i0.ɵɵelement(2, "use", 46);
@@ -406,8 +444,8 @@ function PhoenixMenuItemComponent_div_9_app_phoenix_menu_item_1_Template(rf, ctx
         i0.ɵɵelement(0, "app-phoenix-menu-item", 49);
     }
     if (rf & 2) {
-        const childNode_r67 = ctx.$implicit;
-        i0.ɵɵproperty("currentNode", childNode_r67);
+        const childNode_r71 = ctx.$implicit;
+        i0.ɵɵproperty("currentNode", childNode_r71);
     }
 }
 function PhoenixMenuItemComponent_div_9_Template(rf, ctx) {
@@ -447,7 +485,7 @@ PhoenixMenuItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ph
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.phoenixMenuItem = _t.first);
         }
-    }, inputs: { currentNode: "currentNode" }, decls: 10, vars: 5, consts: [[1, "phoenix-menu-item"], ["phoenixMenuItem", ""], [1, "phoenix-menu-item-left", "align-items-center"], [4, "ngIf", "ngIfElse"], ["nodeName", ""], [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, "checked", "change"], [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", 3, "ngClass", 4, "ngIf"], ["class", "item-config-data", 3, "ngClass", 4, "ngIf"], [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"], ["type", "color", 3, "value", "input", 4, "ngSwitchCase"], ["class", "range-slider", 4, "ngSwitchCase"], ["class", "w-100", 3, "change", 4, "ngSwitchCase"], [3, "value", "min", "max", "step", "allowCustomValue", "onChange"], ["mat-button", "", "mat-stroked-button", "", 1, "w-100", 3, "click"], ["type", "color", 3, "value", "input"], [1, "range-slider"], [1, "range-slider-inputs", "d-flex", "justify-content-between"], ["type", "number", "placeholder", "Min", 1, "form-control", "form-control-sm", 3, "value", "input"], ["type", "number", "placeholder", "Max", 1, "form-control", "form-control-sm", 3, "value", "input"], [3, "value", "highValue", "options", "valueChange", "highValueChange", "userChange"], [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, "ngClass", "click"], ["href", "assets/icons/expand.svg#expand"], [1, "phoenix-menu-children"], [3, "currentNode", 4, "ngFor", "ngForOf"], [3, "currentNode"]], template: function PhoenixMenuItemComponent_Template(rf, ctx) {
+    }, inputs: { currentNode: "currentNode" }, decls: 10, vars: 5, consts: [[1, "phoenix-menu-item"], ["phoenixMenuItem", ""], [1, "phoenix-menu-item-left", "align-items-center"], [4, "ngIf", "ngIfElse"], ["nodeName", ""], [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, "checked", "change"], [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, "value", "min", "max", "step", "allowCustomValue", "onChange"], ["mat-button", "", "mat-stroked-button", "", 1, "w-100", 3, "click"], ["id", "item-config-field", "type", "color", 3, "value", "input"], [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, "value", "input"], ["type", "number", "placeholder", "Max", "step", "config.step", 1, "form-control", "form-control-sm", 3, "value", "input"], ["thumbLabel", "", 3, "value", "highValue", "options", "valueChange", "highValueChange", "userChange"], ["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, "ngClass", "click"], ["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", 0, 1)(2, "div", 2);
             i0.ɵɵtemplate(3, PhoenixMenuItemComponent_ng_container_3_Template, 3, 2, "ng-container", 3);
@@ -470,11 +508,11 @@ PhoenixMenuItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ph
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.currentNode.childrenActive);
         }
-    }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i2.NgSwitch, i2.NgSwitchCase, i2$2.MatButton, i3.MatSlideToggle, i4.MatCheckbox, i5.SliderComponent, 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%}.range-slider .ngx-slider .ngx-slider-bar{background:var(--phoenix-text-color-secondary);height:.2rem}.range-slider .ngx-slider .ngx-slider-selection{background:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer{width:1rem;height:1rem;top:-.45rem;bottom:0;background-color:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer:after{display:none}.range-slider .ngx-slider .ngx-slider-bubble{color:var(--phoenix-text-color);font-size:.8rem}.range-slider .ngx-slider .ngx-slider-bubble.ngx-slider-limit{color:var(--phoenix-text-color-secondary)}\n"], encapsulation: 2 });
+    }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i2.NgSwitch, i2.NgSwitchCase, i2$2.MatButton, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i4.MatSlideToggle, i4$1.MatCheckbox, i6.SliderComponent, 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%}.range-slider .ngx-slider .ngx-slider-bar{background:var(--phoenix-text-color-secondary);height:.2rem}.range-slider .ngx-slider .ngx-slider-selection{background:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer{width:1rem;height:1rem;top:-.45rem;bottom:0;background-color:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer:after{display:none}.range-slider .ngx-slider .ngx-slider-bubble{color:var(--phoenix-text-color);font-size:.8rem}.range-slider .ngx-slider .ngx-slider-bubble.ngx-slider-limit{color:var(--phoenix-text-color-secondary)}\n"], encapsulation: 2 });
 (function () {
     (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          <label class=\"item-config-single\" *ngIf=\"!config.hidden\">\n            <span\n              class=\"item-config-label\"\n              *ngIf=\"config.type !== 'button'\"\n              [ngClass]=\"{ 'font-weight-bold w-100': config.type === 'label' }\"\n            >\n              {{ config.label }}\n            </span>\n            <div\n              class=\"item-config-data\"\n              [ngClass]=\"{ 'p-0': config.type === 'button' }\"\n              *ngIf=\"config.type !== 'label'\"\n            >\n              <mat-checkbox\n                *ngSwitchCase=\"'checkbox'\"\n                [checked]=\"config.isChecked\"\n                (change)=\"\n                  config.onChange($event.checked);\n                  config.isChecked = $event.checked\n                \"\n              ></mat-checkbox>\n\n              <app-config-slider\n                *ngSwitchCase=\"'slider'\"\n                [value]=\"config.value\"\n                (onChange)=\"config.onChange($event); config.value = $event\"\n                [min]=\"config.min\"\n                [max]=\"config.max\"\n                [step]=\"config.step\"\n                [allowCustomValue]=\"config.allowCustomValue\"\n              >\n              </app-config-slider>\n\n              <button\n                *ngSwitchCase=\"'button'\"\n                class=\"w-100\"\n                (click)=\"config.onClick()\"\n                mat-button\n                mat-stroked-button\n              >\n                {{ config.label }}\n              </button>\n\n              <input\n                *ngSwitchCase=\"'color'\"\n                type=\"color\"\n                [value]=\"config.color\"\n                (input)=\"\n                  config.onChange($event.target.value);\n                  config.color = $event.target.value\n                \"\n              />\n\n              <div *ngSwitchCase=\"'rangeSlider'\" class=\"range-slider\">\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                  />\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                  />\n                </div>\n                <ngx-slider\n                  [(value)]=\"config.value\"\n                  [(highValue)]=\"config.highValue\"\n                  (userChange)=\"config.onChange($event)\"\n                  [options]=\"{\n                    floor: config.min,\n                    ceil: config.max,\n                    step: config.step,\n                    animate: false\n                  }\"\n                ></ngx-slider>\n              </div>\n\n              <select\n                *ngSwitchCase=\"'select'\"\n                class=\"w-100\"\n                (change)=\"config.onChange($event.target.value)\"\n              >\n                <option\n                  *ngFor=\"let singleOption of config.options\"\n                  [value]=\"singleOption\"\n                >\n                  {{ singleOption }}\n                </option>\n              </select>\n            </div>\n          </label>\n          <!-- Config types END -->\n        </ng-container>\n      </div>\n    </div>\n    <button\n      class=\"icon-wrapper icon-button btn-blank item-expand\"\n      *ngIf=\"currentNode.children.length > 0\"\n      (click)=\"currentNode.childrenActive = !currentNode.childrenActive\"\n      [ngClass]=\"{ expanded: currentNode.childrenActive }\"\n      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%}.range-slider .ngx-slider .ngx-slider-bar{background:var(--phoenix-text-color-secondary);height:.2rem}.range-slider .ngx-slider .ngx-slider-selection{background:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer{width:1rem;height:1rem;top:-.45rem;bottom:0;background-color:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer:after{display:none}.range-slider .ngx-slider .ngx-slider-bubble{color:var(--phoenix-text-color);font-size:.8rem}.range-slider .ngx-slider .ngx-slider-bubble.ngx-slider-limit{color:var(--phoenix-text-color-secondary)}\n"] }]
+            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                <ngx-slider\n                  [(value)]=\"config.value\"\n                  [(highValue)]=\"config.highValue\"\n                  (userChange)=\"config.onChange($event)\"\n                  thumbLabel\n                  [options]=\"{\n                    floor: config.min,\n                    ceil: config.max,\n                    step: config.step,\n                    animate: false\n                  }\"\n                ></ngx-slider>\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%}.range-slider .ngx-slider .ngx-slider-bar{background:var(--phoenix-text-color-secondary);height:.2rem}.range-slider .ngx-slider .ngx-slider-selection{background:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer{width:1rem;height:1rem;top:-.45rem;bottom:0;background-color:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer:after{display:none}.range-slider .ngx-slider .ngx-slider-bubble{color:var(--phoenix-text-color);font-size:.8rem}.range-slider .ngx-slider .ngx-slider-bubble.ngx-slider-limit{color:var(--phoenix-text-color-secondary)}\n"] }]
         }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { currentNode: [{
                 type: Input
             }], phoenixMenuItem: [{
@@ -582,30 +620,43 @@ function AnimateCameraComponent_button_2_Template(rf, ctx) {
     }
 }
 const defaultAnimationPresets = {
-    'Preset 1': {
+    'Cavern to ID': {
+        name: 'Cavern to ID',
         positions: [
             {
-                position: [11976, 7262, 11927],
+                position: [66388.95051168812, 5264.228603228927, -46910.7848593543],
                 duration: 1000,
             },
             {
-                position: [-1000, 0, 11927],
+                position: [12834.18729094943, 677.7571205763458, 135.68755273443463],
                 duration: 2000,
             },
             {
-                position: [2000, 500, 1000],
+                position: [312.02688693297375, 25.884223757326, 270.10019006776236],
                 duration: 3500,
             },
             {
-                position: [5000, 2000, 1000],
+                position: [263.3640855132258, 19.874838262525053, -318.16541790248885],
                 duration: 3000,
             },
             {
-                position: [5000, 2000, 1000],
+                position: [5534.140362338047, 234.03507981484574, -2933.619479808285],
                 duration: 2000,
             },
             {
-                position: [11976, 7262, 11927],
+                position: [2681.277288705242, 646.5795158318147, 5628.5248735111745],
+                duration: 1000,
+            },
+            {
+                position: [-6062.586283740076, 790.5876682946184, 1381.1675900848818],
+                duration: 1000,
+            },
+            {
+                position: [-1766.7693725879053, 1007.1048030984678, -5928.901341784575],
+                duration: 1000,
+            },
+            {
+                position: [12814.982506255355, 2516.987185037266, -22891.902734328327],
                 duration: 1000,
             },
         ],
@@ -619,6 +670,10 @@ class AnimateCameraComponent {
         this.animationPresets = defaultAnimationPresets;
         this.animationPresetsKeys = Object.keys(this.animationPresets);
         this.isAnimating = false;
+        // this.animationPresets = this.eventDisplay
+        //   .getUIManager()
+        //   .getPresetAnimations();
+        // This is too late to fill the UI! FIXME. EJWM
     }
     animatePreset(preset) {
         this.setDetectorOpacity(0.2);
@@ -808,8 +863,12 @@ class OverlayComponent {
         this.resizable = false;
         /** If the overlay body is transparent or not. */
         this.transparentBody = false;
+        /** If the aspect ratio is kept fixed or not. */
+        this.keepAspectRatioFixed = false;
         /** If the overlay body is visible or not. */
         this.showBody = true;
+        /** Aspect ratio of the overlay view. */
+        this.aspectRatio = window.innerWidth / window.innerHeight;
         /** Minimum resizable width. */
         this.MIN_RES_WIDTH = 300;
         /** Minimum resizable height */
@@ -844,7 +903,12 @@ class OverlayComponent {
         this.setHandleTransform(overlayRect, dragRect);
         if (width > this.MIN_RES_WIDTH && height > this.MIN_RES_HEIGHT) {
             overlayCardElement.style.width = width + 'px';
-            overlayCardElement.style.height = height + 'px';
+            if (this.keepAspectRatioFixed) {
+                overlayCardElement.style.height = width / this.aspectRatio + 30 + 'px';
+            }
+            else {
+                overlayCardElement.style.height = height + 'px';
+            }
         }
     }
     /**
@@ -878,7 +942,7 @@ OverlayComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverlayCom
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.overlayCard = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.resizeHandleCorner = _t.first);
         }
-    }, inputs: { overlayTitle: "overlayTitle", active: "active", icon: "icon", resizable: "resizable", transparentBody: "transparentBody" }, ngContentSelectors: _c5, decls: 5, vars: 4, consts: [["cdkDrag", "", "cdkDragBoundary", "body", 1, "overlay-card", "card", 3, "hidden"], ["overlayCard", ""], ["class", "card-header d-flex justify-content-between", "cdkDragHandle", "", 3, "ngClass", 4, "ngIf"], ["class", "overlay-card-content", 3, "ngClass", 4, "ngIf"], ["class", "resize-handle corner", "cdkDrag", "", 3, "hidden", "cdkDragMoved", 4, "ngIf"], ["cdkDragHandle", "", 1, "card-header", "d-flex", "justify-content-between", 3, "ngClass"], ["class", "align-self-center card-icon", 4, "ngIf"], [1, "align-self-center", "m-0", "px-2"], ["matTooltip", "Expand / Collapse", "matTooltipPosition", "right", 1, "align-self-center", "card-icon", "btn-blank", "expandCollapse", 3, "ngClass", "click"], ["href", "assets/icons/expand.svg#expand"], [1, "align-self-center", "card-icon"], [1, "overlay-card-content", 3, "ngClass"], ["cdkDrag", "", 1, "resize-handle", "corner", 3, "hidden", "cdkDragMoved"], ["resizeHandleCorner", ""]], template: function OverlayComponent_Template(rf, ctx) {
+    }, inputs: { overlayTitle: "overlayTitle", active: "active", icon: "icon", resizable: "resizable", transparentBody: "transparentBody", keepAspectRatioFixed: "keepAspectRatioFixed" }, ngContentSelectors: _c5, decls: 5, vars: 4, consts: [["cdkDrag", "", "cdkDragBoundary", "body", 1, "overlay-card", "card", 3, "hidden"], ["overlayCard", ""], ["class", "card-header d-flex justify-content-between", "cdkDragHandle", "", 3, "ngClass", 4, "ngIf"], ["class", "overlay-card-content", 3, "ngClass", 4, "ngIf"], ["class", "resize-handle corner", "cdkDrag", "", 3, "hidden", "cdkDragMoved", 4, "ngIf"], ["cdkDragHandle", "", 1, "card-header", "d-flex", "justify-content-between", 3, "ngClass"], ["class", "align-self-center card-icon", 4, "ngIf"], [1, "align-self-center", "m-0", "px-2"], ["matTooltip", "Expand / Collapse", "matTooltipPosition", "right", 1, "align-self-center", "card-icon", "btn-blank", "expandCollapse", 3, "ngClass", "click"], ["href", "assets/icons/expand.svg#expand"], [1, "align-self-center", "card-icon"], [1, "overlay-card-content", 3, "ngClass"], ["cdkDrag", "", 1, "resize-handle", "corner", 3, "hidden", "cdkDragMoved"], ["resizeHandleCorner", ""]], template: function OverlayComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0, 1);
@@ -911,6 +975,8 @@ OverlayComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverlayCom
                 type: Input
             }], transparentBody: [{
                 type: Input
+            }], keepAspectRatioFixed: [{
+                type: Input
             }], overlayCard: [{
                 type: ViewChild,
                 args: ['overlayCard']
@@ -1193,7 +1259,7 @@ CollectionsInfoOverlayComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ t
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.showObjectsInfo);
         }
-    }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2$3.MatTooltip, i4.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, i2$3.MatTooltip, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i4$1.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)}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CollectionsInfoOverlayComponent, [{
             type: Component,
@@ -1318,7 +1384,7 @@ EventSelectorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Even
         if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.events != null);
         }
-    }, dependencies: [i2.NgForOf, i2.NgIf, i2$3.MatTooltip], 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, i2$3.MatTooltip, i3.NgSelectOption, i3.ɵ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)}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EventSelectorComponent, [{
             type: Component,
@@ -1423,11 +1489,11 @@ ExperimentInfoComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Exp
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngForOf", ctx.experimentInfo);
         }
-    }, dependencies: [i2.NgForOf, i2.NgIf, i2$4.CdkDrag], styles: [".experimentInfo[_ngcontent-%COMP%]{position:absolute;top:5rem;left:1rem;display:flex;flex-direction:row;justify-items:flex-end;justify-content:flex-end;align-items:center;align-content:center;cursor:move}.experimentLogoWrapper[_ngcontent-%COMP%]{width:6rem}.experimentLogoWrapper[_ngcontent-%COMP%]   .experimentLogo[_ngcontent-%COMP%]{width:100%;height:100%}.textInfo[_ngcontent-%COMP%]{margin-left:1rem}.textInfo[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]{color:var(--phoenix-text-color-secondary);font-size:.8rem;margin-bottom:.5rem;-webkit-user-select:none;user-select:none}@media screen and (max-width: 768px){.experimentInfo[_ngcontent-%COMP%]{top:4rem;max-width:40%}.experimentLogoWrapper[_ngcontent-%COMP%]{height:4rem}.textInfo[_ngcontent-%COMP%]{display:none}}"] });
+    }, dependencies: [i2.NgForOf, i2.NgIf, i2$4.CdkDrag], styles: [".experimentInfo[_ngcontent-%COMP%]{position:absolute;top:5rem;left:1rem;display:flex;flex-direction:row;justify-items:flex-end;justify-content:flex-end;align-items:center;align-content:center;font-family:Courier New,Lucida Console,monospace;cursor:move}.experimentLogoWrapper[_ngcontent-%COMP%]{width:6rem}.experimentLogoWrapper[_ngcontent-%COMP%]   .experimentLogo[_ngcontent-%COMP%]{width:100%;height:100%}.textInfo[_ngcontent-%COMP%]{margin-left:1rem}.textInfo[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]{color:var(--phoenix-text-color-secondary);font-size:.8rem;margin-bottom:.5rem;-webkit-user-select:none;user-select:none}@media screen and (max-width: 768px){.experimentInfo[_ngcontent-%COMP%]{top:4rem;max-width:40%}.experimentLogoWrapper[_ngcontent-%COMP%]{height:4rem}.textInfo[_ngcontent-%COMP%]{display:none}}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExperimentInfoComponent, [{
             type: Component,
-            args: [{ selector: 'app-experiment-info', template: "<div id=\"experimentInfo\" class=\"experimentInfo\" cdkDrag cdkDragBoundary=\"body\">\n  <a\n    class=\"experimentLogoWrapper\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    *ngIf=\"url\"\n    [href]=\"url\"\n  >\n    <img class=\"experimentLogo\" [src]=\"logo\" alt=\"\" />\n  </a>\n  <div class=\"textInfo\">\n    <p *ngIf=\"tagline\">\n      <b>{{ tagline }}</b>\n    </p>\n    <p *ngFor=\"let infoField of experimentInfo\">\n      <ng-container *ngIf=\"infoField.label\">\n        <b>{{ infoField.label }}: </b>{{ infoField.value }}\n      </ng-container>\n      <ng-container *ngIf=\"!infoField.label\">\n        {{ infoField }}\n      </ng-container>\n    </p>\n  </div>\n</div>\n", styles: [".experimentInfo{position:absolute;top:5rem;left:1rem;display:flex;flex-direction:row;justify-items:flex-end;justify-content:flex-end;align-items:center;align-content:center;cursor:move}.experimentLogoWrapper{width:6rem}.experimentLogoWrapper .experimentLogo{width:100%;height:100%}.textInfo{margin-left:1rem}.textInfo p{color:var(--phoenix-text-color-secondary);font-size:.8rem;margin-bottom:.5rem;-webkit-user-select:none;user-select:none}@media screen and (max-width: 768px){.experimentInfo{top:4rem;max-width:40%}.experimentLogoWrapper{height:4rem}.textInfo{display:none}}\n"] }]
+            args: [{ selector: 'app-experiment-info', template: "<div id=\"experimentInfo\" class=\"experimentInfo\" cdkDrag cdkDragBoundary=\"body\">\n  <a\n    class=\"experimentLogoWrapper\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    *ngIf=\"url\"\n    [href]=\"url\"\n  >\n    <img class=\"experimentLogo\" [src]=\"logo\" alt=\"\" />\n  </a>\n  <div class=\"textInfo\">\n    <p *ngIf=\"tagline\">\n      <b>{{ tagline }}</b>\n    </p>\n    <p *ngFor=\"let infoField of experimentInfo\">\n      <ng-container *ngIf=\"infoField.label\">\n        <b>{{ infoField.label }}: </b>{{ infoField.value }}\n      </ng-container>\n      <ng-container *ngIf=\"!infoField.label\">\n        {{ infoField }}\n      </ng-container>\n    </p>\n  </div>\n</div>\n", styles: [".experimentInfo{position:absolute;top:5rem;left:1rem;display:flex;flex-direction:row;justify-items:flex-end;justify-content:flex-end;align-items:center;align-content:center;font-family:Courier New,Lucida Console,monospace;cursor:move}.experimentLogoWrapper{width:6rem}.experimentLogoWrapper .experimentLogo{width:100%;height:100%}.textInfo{margin-left:1rem}.textInfo p{color:var(--phoenix-text-color-secondary);font-size:.8rem;margin-bottom:.5rem;-webkit-user-select:none;user-select:none}@media screen and (max-width: 768px){.experimentInfo{top:4rem;max-width:40%}.experimentLogoWrapper{height:4rem}.textInfo{display:none}}\n"] }]
         }], function () { return [{ type: EventDisplayService }]; }, { url: [{
                 type: Input
             }], logo: [{
@@ -1997,7 +2063,7 @@ ObjectClippingComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Obj
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("matMenuTriggerFor", _r0)("active", ctx.clippingEnabled);
         }
-    }, dependencies: [i3$1.MatMenu, i3$1.MatMenuItem, i3$1.MatMenuTrigger, i2$1.MatSlider, i2$1.MatSliderThumb, i4.MatCheckbox, MenuToggleComponent], styles: [".slider-btn[_ngcontent-%COMP%]{overflow:visible}mat-slider[_ngcontent-%COMP%]{margin-left:.75rem;margin-right:.75rem}"] });
+    }, dependencies: [i3$1.MatMenu, i3$1.MatMenuItem, i3$1.MatMenuTrigger, i2$1.MatSlider, i2$1.MatSliderThumb, i4$1.MatCheckbox, MenuToggleComponent], styles: [".slider-btn[_ngcontent-%COMP%]{overflow:visible}mat-slider[_ngcontent-%COMP%]{margin-left:.75rem;margin-right:.75rem}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ObjectClippingComponent, [{
             type: Component,
@@ -2183,7 +2249,7 @@ OverlayViewWindowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.overlayWindow = _t.first);
         }
-    }, inputs: { showOverlay: "showOverlay" }, decls: 8, vars: 8, consts: [["overlayTitle", "Overlay View", "icon", "overlay", 3, "resizable", "transparentBody", "active"], [1, "overlay-view-wrapper"], ["id", "overlay-canvas", 3, "hidden"], ["overlayWindow", ""], [1, "overlay-view-controls", "position-absolute", "d-flex", "flex-row"], ["icon", "transparent", "matTooltip", "Toggle background transparency", 1, "overlay-view-control", 3, "click"], ["icon", "move-lock", 1, "overlay-view-control", 3, "matTooltip", "active", "click"], [1, "overlay-view-control", 3, "icon", "matTooltip", "click"]], template: function OverlayViewWindowComponent_Template(rf, ctx) {
+    }, inputs: { showOverlay: "showOverlay" }, decls: 8, vars: 9, consts: [["overlayTitle", "Overlay View", "icon", "overlay", 3, "resizable", "transparentBody", "active", "keepAspectRatioFixed"], [1, "overlay-view-wrapper"], ["id", "overlay-canvas", 3, "hidden"], ["overlayWindow", ""], [1, "overlay-view-controls", "position-absolute", "d-flex", "flex-row"], ["icon", "transparent", "matTooltip", "Toggle background transparency", 1, "overlay-view-control", 3, "click"], ["icon", "move-lock", 1, "overlay-view-control", 3, "matTooltip", "active", "click"], [1, "overlay-view-control", 3, "icon", "matTooltip", "click"]], template: function OverlayViewWindowComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "app-overlay", 0)(1, "div", 1);
             i0.ɵɵelement(2, "canvas", 2, 3);
@@ -2198,7 +2264,7 @@ OverlayViewWindowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             i0.ɵɵelementEnd()()()();
         }
         if (rf & 2) {
-            i0.ɵɵproperty("resizable", true)("transparentBody", ctx.transparentBody)("active", ctx.showOverlay);
+            i0.ɵɵproperty("resizable", true)("transparentBody", ctx.transparentBody)("active", ctx.showOverlay)("keepAspectRatioFixed", true);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("hidden", !ctx.showOverlay);
             i0.ɵɵadvance(4);
@@ -2210,7 +2276,7 @@ OverlayViewWindowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayViewWindowComponent, [{
             type: Component,
-            args: [{ selector: 'app-overlay-view-window', template: "<app-overlay\n  overlayTitle=\"Overlay View\"\n  icon=\"overlay\"\n  [resizable]=\"true\"\n  [transparentBody]=\"transparentBody\"\n  [active]=\"showOverlay\"\n>\n  <div class=\"overlay-view-wrapper\">\n    <canvas #overlayWindow id=\"overlay-canvas\" [hidden]=\"!showOverlay\">\n    </canvas>\n    <div class=\"overlay-view-controls position-absolute d-flex flex-row\">\n      <app-menu-toggle\n        class=\"overlay-view-control\"\n        icon=\"transparent\"\n        matTooltip=\"Toggle background transparency\"\n        (click)=\"toggleBgTransparency()\"\n      >\n      </app-menu-toggle>\n      <app-menu-toggle\n        class=\"overlay-view-control\"\n        icon=\"move-lock\"\n        [matTooltip]=\"(overlayViewFixed ? 'Restore' : 'Fix') + ' overlay view'\"\n        [active]=\"overlayViewFixed\"\n        (click)=\"fixOverlayView()\"\n      >\n      </app-menu-toggle>\n      <app-menu-toggle\n        class=\"overlay-view-control\"\n        [icon]=\"orthographicView ? 'orthographic' : 'perspective'\"\n        [matTooltip]=\"\n          'Switch to ' +\n          (orthographicView ? 'orthographic' : 'perspective') +\n          ' view'\n        \"\n        (click)=\"switchOverlayView()\"\n      >\n      </app-menu-toggle>\n    </div>\n  </div>\n</app-overlay>\n", styles: ["#overlay-canvas{background-color:#0000001a;width:100%}.overlay-view-controls{bottom:1em;right:1em;opacity:0;transition:opacity .2s}.overlay-view-controls .overlay-view-control{background:var(--phoenix-background-color-secondary);box-shadow:var(--phoenix-box-shadow);overflow:hidden;width:2.5rem;height:2.5rem;border-radius:50%;display:flex;justify-content:center;align-items:center}.overlay-view-wrapper:hover .overlay-view-controls{opacity:1;transition:opacity .2s}\n"] }]
+            args: [{ selector: 'app-overlay-view-window', template: "<app-overlay\n  overlayTitle=\"Overlay View\"\n  icon=\"overlay\"\n  [resizable]=\"true\"\n  [transparentBody]=\"transparentBody\"\n  [active]=\"showOverlay\"\n  [keepAspectRatioFixed]=\"true\"\n>\n  <div class=\"overlay-view-wrapper\">\n    <canvas #overlayWindow id=\"overlay-canvas\" [hidden]=\"!showOverlay\">\n    </canvas>\n    <div class=\"overlay-view-controls position-absolute d-flex flex-row\">\n      <app-menu-toggle\n        class=\"overlay-view-control\"\n        icon=\"transparent\"\n        matTooltip=\"Toggle background transparency\"\n        (click)=\"toggleBgTransparency()\"\n      >\n      </app-menu-toggle>\n      <app-menu-toggle\n        class=\"overlay-view-control\"\n        icon=\"move-lock\"\n        [matTooltip]=\"(overlayViewFixed ? 'Restore' : 'Fix') + ' overlay view'\"\n        [active]=\"overlayViewFixed\"\n        (click)=\"fixOverlayView()\"\n      >\n      </app-menu-toggle>\n      <app-menu-toggle\n        class=\"overlay-view-control\"\n        [icon]=\"orthographicView ? 'orthographic' : 'perspective'\"\n        [matTooltip]=\"\n          'Switch to ' +\n          (orthographicView ? 'orthographic' : 'perspective') +\n          ' view'\n        \"\n        (click)=\"switchOverlayView()\"\n      >\n      </app-menu-toggle>\n    </div>\n  </div>\n</app-overlay>\n", styles: ["#overlay-canvas{background-color:#0000001a;width:100%}.overlay-view-controls{bottom:1em;right:1em;opacity:0;transition:opacity .2s}.overlay-view-controls .overlay-view-control{background:var(--phoenix-background-color-secondary);box-shadow:var(--phoenix-box-shadow);overflow:hidden;width:2.5rem;height:2.5rem;border-radius:50%;display:flex;justify-content:center;align-items:center}.overlay-view-wrapper:hover .overlay-view-controls{opacity:1;transition:opacity .2s}\n"] }]
         }], function () { return [{ type: EventDisplayService }]; }, { showOverlay: [{
                 type: Input
             }], overlayWindow: [{
@@ -2344,7 +2410,7 @@ TreeMenuItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TreeM
         if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.node);
         }
-    }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2$2.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}"] });
+    }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2$2.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}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TreeMenuItemComponent, [{
             type: Component,
@@ -2514,7 +2580,7 @@ ViewOptionsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ViewOp
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("matMenuTriggerFor", _r0)("active", false);
         }
-    }, dependencies: [i2.NgForOf, i2.NgIf, i3$1.MatMenu, i3$1.MatMenuItem, i3$1.MatMenuTrigger, i4.MatCheckbox, MenuToggleComponent], styles: [".view-icon[_ngcontent-%COMP%]{width:1.2rem;height:1.2rem;margin-right:.5rem}"] });
+    }, dependencies: [i2.NgForOf, i2.NgIf, i3$1.MatMenu, i3$1.MatMenuItem, i3$1.MatMenuTrigger, i4$1.MatCheckbox, MenuToggleComponent], styles: [".view-icon[_ngcontent-%COMP%]{width:1.2rem;height:1.2rem;margin-right:.5rem}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ViewOptionsComponent, [{
             type: Component,
@@ -2759,7 +2825,7 @@ class SSModeComponent {
     }
 }
 SSModeComponent.ɵfac = function SSModeComponent_Factory(t) { return new (t || SSModeComponent)(); };
-SSModeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SSModeComponent, selectors: [["app-ss-mode"]], decls: 1, vars: 1, consts: [["tooltip", "Screenshot mode", "icon", "ss-mode", 3, "active", "click"]], template: function SSModeComponent_Template(rf, ctx) {
+SSModeComponent.ɵ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, "active", "click"]], 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(); });
@@ -2772,10 +2838,98 @@ SSModeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SSModeCompo
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SSModeComponent, [{
             type: Component,
-            args: [{ selector: 'app-ss-mode', encapsulation: ViewEncapsulation.None, template: "<app-menu-toggle\n  tooltip=\"Screenshot mode\"\n  [active]=\"ssMode\"\n  icon=\"ss-mode\"\n  (click)=\"toggleSSMode()\"\n>\n</app-menu-toggle>\n", styles: ["#uiMenu,#phoenixMenu,#mainLogo,#statsElement{transition:opacity .4s}.ss-mode #uiMenu,.ss-mode #phoenixMenu,.ss-mode #mainLogo,.ss-mode #statsElement{visibility:hidden;opacity:0}\n"] }]
+            args: [{ selector: 'app-ss-mode', encapsulation: ViewEncapsulation.None, template: "<app-menu-toggle\n  tooltip=\"Screenshot mode: phoenix will become fullscreen and the menu is suppressed\"\n  [active]=\"ssMode\"\n  icon=\"ss-mode\"\n  (click)=\"toggleSSMode()\"\n>\n</app-menu-toggle>\n", styles: ["#uiMenu,#phoenixMenu,#mainLogo,#statsElement{transition:opacity .4s}.ss-mode #uiMenu,.ss-mode #phoenixMenu,.ss-mode #mainLogo,.ss-mode #statsElement{visibility:hidden;opacity:0}\n"] }]
         }], null, null);
 })();
 
+function MakePictureComponent_mat_radio_button_14_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "mat-radio-button", 12);
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const fitting_r4 = ctx.$implicit;
+        i0.ɵɵproperty("value", fitting_r4);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1("", fitting_r4, " ");
+    }
+}
+class MakePictureComponent {
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+        this.fittings = ['Crop', 'Stretch'];
+        this.fitting = 'Crop';
+        this.width = 3840;
+        this.height = 2160;
+    }
+    ngOnInit() { }
+    setWidth(value) {
+        this.width = value;
+    }
+    setHeight(value) {
+        this.height = value;
+    }
+    makePicture() {
+        this.eventDisplay.makeScreenShot(this.width, this.height, this.fitting);
+    }
+}
+MakePictureComponent.ɵfac = function MakePictureComponent_Factory(t) { return new (t || MakePictureComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
+MakePictureComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MakePictureComponent, selectors: [["app-make-picture"]], decls: 20, vars: 5, consts: [[1, "mat-menu"], ["menu", ""], ["mat-menu-item", "", 1, "size-input", 3, "click"], ["mapInput", "", "type", "number", 3, "value", "change", "click"], ["width", ""], ["height", ""], ["mat-menu-item", "", 3, "click"], [1, "fitting-radios", 3, "ngModel", "ngModelChange"], [3, "value", 4, "ngFor", "ngForOf"], ["mat-menu-item", "", 1, "make-picture", 3, "click"], ["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 _r5 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "mat-menu", 0, 1)(2, "button", 2);
+            i0.ɵɵlistener("click", function MakePictureComponent_Template_button_click_2_listener($event) { return $event.stopPropagation(); });
+            i0.ɵɵelementStart(3, "label");
+            i0.ɵɵtext(4, "width");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "input", 3, 4);
+            i0.ɵɵlistener("change", function MakePictureComponent_Template_input_change_5_listener() { i0.ɵɵrestoreView(_r5); const _r1 = i0.ɵɵreference(6); return i0.ɵɵresetView(ctx.setWidth(_r1.value)); })("click", function MakePictureComponent_Template_input_click_5_listener($event) { return $event.stopPropagation(); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(7, "button", 2);
+            i0.ɵɵlistener("click", function MakePictureComponent_Template_button_click_7_listener($event) { return $event.stopPropagation(); });
+            i0.ɵɵelementStart(8, "label");
+            i0.ɵɵtext(9, "height");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(10, "input", 3, 5);
+            i0.ɵɵlistener("change", function MakePictureComponent_Template_input_change_10_listener() { i0.ɵɵrestoreView(_r5); const _r2 = i0.ɵɵreference(11); return i0.ɵɵresetView(ctx.setHeight(_r2.value)); })("click", function MakePictureComponent_Template_input_click_10_listener($event) { return $event.stopPropagation(); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(12, "button", 6);
+            i0.ɵɵlistener("click", function MakePictureComponent_Template_button_click_12_listener($event) { return $event.stopPropagation(); });
+            i0.ɵɵelementStart(13, "mat-radio-group", 7);
+            i0.ɵɵlistener("ngModelChange", function MakePictureComponent_Template_mat_radio_group_ngModelChange_13_listener($event) { return ctx.fitting = $event; });
+            i0.ɵɵtemplate(14, MakePictureComponent_mat_radio_button_14_Template, 2, 2, "mat-radio-button", 8);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(15, "button", 9);
+            i0.ɵɵlistener("click", function MakePictureComponent_Template_button_click_15_listener() { return ctx.makePicture(); });
+            i0.ɵɵtext(16, " Create picture ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(17, "app-menu-toggle", 10);
+            i0.ɵɵelementStart(18, "div");
+            i0.ɵɵelement(19, "canvas", 11);
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            const _r0 = i0.ɵɵreference(1);
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("value", 3840);
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("value", 2610);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngModel", ctx.fitting);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngForOf", ctx.fittings);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("matMenuTriggerFor", _r0);
+        }
+    }, dependencies: [i2.NgForOf, i3.NgControlStatus, i3.NgModel, i3$1.MatMenu, i3$1.MatMenuItem, i3$1.MatMenuTrigger, i5.MatRadioGroup, i5.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}.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 });
+(function () {
+    (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    />\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    />\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 mat-menu-item class=\"make-picture\" (click)=\"makePicture()\">\n    Create picture\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}.make-picture{text-align:center;display:block}.make-picture span{padding:5px 25px;border:2px solid var(--phoenix-text-color);border-radius:8px}\n"] }]
+        }], function () { return [{ type: EventDisplayService }]; }, null);
+})();
+
 class PerformanceToggleComponent {
     constructor(eventDisplay) {
         this.eventDisplay = eventDisplay;
@@ -2987,7 +3141,7 @@ ShareLinkDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sh
             i0.ɵɵadvance(7);
             i0.ɵɵtextInterpolate(ctx.embedLink);
         }
-    }, dependencies: [i1$2.MatDialogTitle, i1$2.MatDialogContent, i1$2.MatDialogActions, i2$2.MatButton, i4.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.MatDialogContent, i1$2.MatDialogActions, i2$2.MatButton, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i4$1.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)}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShareLinkDialogComponent, [{
             type: Component,
@@ -3032,25 +3186,25 @@ class UiMenuComponent {
     }
 }
 UiMenuComponent.ɵfac = function UiMenuComponent_Factory(t) { return new (t || UiMenuComponent)(); };
-UiMenuComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UiMenuComponent, selectors: [["app-ui-menu"]], inputs: { eventDataImportOptions: "eventDataImportOptions", animationPresets: "animationPresets" }, ngContentSelectors: _c0$1, decls: 21, vars: 2, consts: [[3, "animationPresets"], [3, "eventDataImportOptions"]], template: function UiMenuComponent_Template(rf, ctx) {
+UiMenuComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UiMenuComponent, selectors: [["app-ui-menu"]], inputs: { eventDataImportOptions: "eventDataImportOptions", animationPresets: "animationPresets" }, ngContentSelectors: _c0$1, decls: 22, vars: 2, consts: [[3, "animationPresets"], [3, "eventDataImportOptions"]], template: function UiMenuComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "app-ui-menu-wrapper");
-            i0.ɵɵelement(1, "app-event-selector")(2, "app-zoom-controls")(3, "app-view-options")(4, "app-auto-rotate")(5, "app-dark-theme")(6, "app-object-clipping")(7, "app-main-view-toggle")(8, "app-overlay-view")(9, "app-object-selection")(10, "app-info-panel")(11, "app-animate-event")(12, "app-animate-camera", 0)(13, "app-collections-info")(14, "app-performance-toggle")(15, "app-vr-toggle")(16, "app-ar-toggle")(17, "app-ss-mode")(18, "app-io-options", 1)(19, "app-share-link");
-            i0.ɵɵprojection(20);
+            i0.ɵɵelement(1, "app-event-selector")(2, "app-zoom-controls")(3, "app-view-options")(4, "app-auto-rotate")(5, "app-dark-theme")(6, "app-object-clipping")(7, "app-main-view-toggle")(8, "app-overlay-view")(9, "app-object-selection")(10, "app-info-panel")(11, "app-animate-event")(12, "app-animate-camera", 0)(13, "app-collections-info")(14, "app-performance-toggle")(15, "app-vr-toggle")(16, "app-ar-toggle")(17, "app-ss-mode")(18, "app-make-picture")(19, "app-io-options", 1)(20, "app-share-link");
+            i0.ɵɵprojection(21);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
             i0.ɵɵadvance(12);
             i0.ɵɵproperty("animationPresets", ctx.animationPresets);
-            i0.ɵɵadvance(6);
+            i0.ɵɵadvance(7);
             i0.ɵɵproperty("eventDataImportOptions", ctx.eventDataImportOptions);
         }
-    }, dependencies: [UiMenuWrapperComponent, CollectionsInfoComponent, IoOptionsComponent, OverlayViewComponent, ObjectSelectionComponent, EventSelectorComponent, ObjectClippingComponent, DarkThemeComponent, AutoRotateComponent, ViewOptionsComponent, InfoPanelComponent, MainViewToggleComponent, ZoomControlsComponent, AnimateCameraComponent, AnimateEventComponent, VrToggleComponent, ArToggleComponent, SSModeComponent, PerformanceToggleComponent, ShareLinkComponent] });
+    }, dependencies: [UiMenuWrapperComponent, CollectionsInfoComponent, IoOptionsComponent, OverlayViewComponent, ObjectSelectionComponent, EventSelectorComponent, ObjectClippingComponent, DarkThemeComponent, AutoRotateComponent, ViewOptionsComponent, InfoPanelComponent, MainViewToggleComponent, ZoomControlsComponent, AnimateCameraComponent, AnimateEventComponent, VrToggleComponent, ArToggleComponent, SSModeComponent, MakePictureComponent, PerformanceToggleComponent, ShareLinkComponent] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UiMenuComponent, [{
             type: Component,
-            args: [{ selector: 'app-ui-menu', template: "<app-ui-menu-wrapper>\n  <!-- Event selector -->\n  <app-event-selector></app-event-selector>\n\n  <!-- Zoom in and zoom out controls -->\n  <app-zoom-controls></app-zoom-controls>\n\n  <app-view-options></app-view-options>\n\n  <app-auto-rotate></app-auto-rotate>\n\n  <!-- Dark theme toggle -->\n  <app-dark-theme></app-dark-theme>\n\n  <!-- Toggle for clipping geometries -->\n  <app-object-clipping></app-object-clipping>\n\n  <!-- Main view toggle -->\n  <app-main-view-toggle></app-main-view-toggle>\n\n  <!-- Toggle for overlay panel -->\n  <app-overlay-view></app-overlay-view>\n\n  <!-- Toggle for selected object panel -->\n  <app-object-selection></app-object-selection>\n\n  <!-- Info panel -->\n  <app-info-panel></app-info-panel>\n\n  <!-- Toggle for animating the event data -->\n  <app-animate-event></app-animate-event>\n\n  <!-- Toggle for animating camera through event -->\n  <app-animate-camera\n    [animationPresets]=\"animationPresets\"\n  ></app-animate-camera>\n\n  <!-- Toggle for collections info -->\n  <app-collections-info></app-collections-info>\n\n  <!-- Toggle for performance -->\n  <app-performance-toggle></app-performance-toggle>\n\n  <!-- Toggle for VR -->\n  <app-vr-toggle></app-vr-toggle>\n\n  <!-- Toggle for AR -->\n  <app-ar-toggle></app-ar-toggle>\n\n  <!-- Toggle for screenshot mode -->\n  <app-ss-mode></app-ss-mode>\n\n  <!-- Toggle for loading geometries modal-->\n  <app-io-options\n    [eventDataImportOptions]=\"eventDataImportOptions\"\n  ></app-io-options>\n\n  <!-- Toggle for shareable link constructor modal-->\n  <app-share-link></app-share-link>\n\n  <!-- Extra options -->\n  <ng-content></ng-content>\n</app-ui-menu-wrapper>\n" }]
+            args: [{ selector: 'app-ui-menu', template: "<app-ui-menu-wrapper>\n  <!-- Event selector -->\n  <app-event-selector></app-event-selector>\n\n  <!-- Zoom in and zoom out controls -->\n  <app-zoom-controls></app-zoom-controls>\n\n  <app-view-options></app-view-options>\n\n  <app-auto-rotate></app-auto-rotate>\n\n  <!-- Dark theme toggle -->\n  <app-dark-theme></app-dark-theme>\n\n  <!-- Toggle for clipping geometries -->\n  <app-object-clipping></app-object-clipping>\n\n  <!-- Main view toggle -->\n  <app-main-view-toggle></app-main-view-toggle>\n\n  <!-- Toggle for overlay panel -->\n  <app-overlay-view></app-overlay-view>\n\n  <!-- Toggle for selected object panel -->\n  <app-object-selection></app-object-selection>\n\n  <!-- Info panel -->\n  <app-info-panel></app-info-panel>\n\n  <!-- Toggle for animating the event data -->\n  <app-animate-event></app-animate-event>\n\n  <!-- Toggle for animating camera through event -->\n  <app-animate-camera\n    [animationPresets]=\"animationPresets\"\n  ></app-animate-camera>\n\n  <!-- Toggle for collections info -->\n  <app-collections-info></app-collections-info>\n\n  <!-- Toggle for performance -->\n  <app-performance-toggle></app-performance-toggle>\n\n  <!-- Toggle for VR -->\n  <app-vr-toggle></app-vr-toggle>\n\n  <!-- Toggle for AR -->\n  <app-ar-toggle></app-ar-toggle>\n\n  <!-- Toggle for screenshot mode -->\n  <app-ss-mode></app-ss-mode>\n\n  <!-- Make pictures from scene -->\n  <app-make-picture></app-make-picture>\n\n  <!-- Toggle for loading geometries modal-->\n  <app-io-options\n    [eventDataImportOptions]=\"eventDataImportOptions\"\n  ></app-io-options>\n\n  <!-- Toggle for shareable link constructor modal-->\n  <app-share-link></app-share-link>\n\n  <!-- Extra options -->\n  <ng-content></ng-content>\n</app-ui-menu-wrapper>\n" }]
         }], null, { eventDataImportOptions: [{
                 type: Input
             }], animationPresets: [{
@@ -3571,7 +3725,10 @@ GlobalErrorHandler.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: Globa
 
 class ExperimentLinkComponent {
     ngOnInit() {
-        this.experimentLink = window.location.href.split('?')[0];
+        // we just want to remove the "&embed=true" instruction here.
+        const url = new URL(window.location.href);
+        url.searchParams.delete('embed');
+        this.experimentLink = url.toString();
     }
     goToExperiment() {
         window.open(this.experimentLink, '_blank');
@@ -3644,6 +3801,7 @@ const PHOENIX_COMPONENTS = [
     VrToggleComponent,
     ArToggleComponent,
     SSModeComponent,
+    MakePictureComponent,
     PerformanceToggleComponent,
     LoaderComponent,
     ShareLinkComponent,
@@ -3674,7 +3832,9 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
         MatButtonModule,
         MatTooltipModule,
         OverlayModule,
+        FormsModule,
         MatMenuModule,
+        MatRadioModule,
         MatSliderModule,
         MatSlideToggleModule,
         MatCheckboxModule,
@@ -3695,7 +3855,9 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
                         MatButtonModule,
                         MatTooltipModule,
                         OverlayModule,
+                        FormsModule,
                         MatMenuModule,
+                        MatRadioModule,
                         MatSliderModule,
                         MatSlideToggleModule,
                         MatCheckboxModule,
@@ -3760,6 +3922,7 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
             VrToggleComponent,
             ArToggleComponent,
             SSModeComponent,
+            MakePictureComponent,
             PerformanceToggleComponent,
             LoaderComponent,
             ShareLinkComponent,
@@ -3777,7 +3940,9 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
             MatButtonModule,
             MatTooltipModule,
             OverlayModule,
+            FormsModule,
             MatMenuModule,
+            MatRadioModule,
             MatSliderModule,
             MatSlideToggleModule,
             MatCheckboxModule,
@@ -3818,6 +3983,7 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
             VrToggleComponent,
             ArToggleComponent,
             SSModeComponent,
+            MakePictureComponent,
             PerformanceToggleComponent,
             LoaderComponent,
             ShareLinkComponent,
@@ -3835,5 +4001,5 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
  * Generated bundle index. Do not edit.
  */
 
-export { AnimateCameraComponent, AnimateEventComponent, ArToggleComponent, AttributePipe, AutoRotateComponent, CollectionsInfoComponent, CollectionsInfoOverlayComponent, ConfigSliderComponent, CycleEventsComponent, DarkThemeComponent, EmbedMenuComponent, EventDataExplorerComponent, EventDataExplorerDialogComponent, EventDataFormat, EventDisplayService, EventSelectorComponent, ExperimentInfoComponent, ExperimentLinkComponent, FileExplorerComponent, FileNode, IOOptionsDialogComponent, ImportOption, InfoPanelComponent, InfoPanelOverlayComponent, IoOptionsComponent, LoaderComponent, MainViewToggleComponent, MenuToggleComponent, NavComponent, ObjectClippingComponent, ObjectSelectionComponent, ObjectSelectionOverlayComponent, OverlayComponent, OverlayViewComponent, OverlayViewWindowComponent, PerformanceToggleComponent, PhoenixMenuComponent, PhoenixMenuItemComponent, PhoenixUIModule, RingLoaderComponent, SSModeComponent, ShareLinkComponent, ShareLinkDialogComponent, TreeMenuComponent, TreeMenuItemComponent, UiMenuComponent, UiMenuWrapperComponent, ViewOptionsComponent, VrToggleComponent, ZoomControlsComponent, defaultAnimationPresets };
+export { AnimateCameraComponent, AnimateEventComponent, ArToggleComponent, AttributePipe, AutoRotateComponent, CollectionsInfoComponent, CollectionsInfoOverlayComponent, ConfigSliderComponent, CycleEventsComponent, DarkThemeComponent, EmbedMenuComponent, EventDataExplorerComponent, EventDataExplorerDialogComponent, EventDataFormat, EventDisplayService, EventSelectorComponent, ExperimentInfoComponent, ExperimentLinkComponent, FileExplorerComponent, FileNode, IOOptionsDialogComponent, ImportOption, InfoPanelComponent, InfoPanelOverlayComponent, IoOptionsComponent, LoaderComponent, MainViewToggleComponent, MakePictureComponent, MenuToggleComponent, NavComponent, ObjectClippingComponent, ObjectSelectionComponent, ObjectSelectionOverlayComponent, OverlayComponent, OverlayViewComponent, OverlayViewWindowComponent, PerformanceToggleComponent, PhoenixMenuComponent, PhoenixMenuItemComponent, PhoenixUIModule, RingLoaderComponent, SSModeComponent, ShareLinkComponent, ShareLinkDialogComponent, TreeMenuComponent, TreeMenuItemComponent, UiMenuComponent, UiMenuWrapperComponent, ViewOptionsComponent, VrToggleComponent, ZoomControlsComponent, defaultAnimationPresets };
 //# sourceMappingURL=phoenix-ui-components.mjs.map