phoenix-ui-components 2.13.0 → 2.14.0

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

@@ -70,7 +70,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();
@@ -78,6 +80,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) { if (rf & 1) {
@@ -166,8 +190,8 @@ function PhoenixMenuItemComponent_div_7_div_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } }
 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) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 26);
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_label_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "label", 26);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -176,28 +200,28 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_span_1_Template(r
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1(" ", config_r15.label, " ");
 } }
-function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_mat_checkbox_1_Template(rf, ctx) { if (rf & 1) {
+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) {
     const config_r15 = i0.ɵɵnextContext(3).$implicit;
     i0.ɵɵproperty("checked", config_r15.isChecked);
 } }
-function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_app_config_slider_2_Template(rf, ctx) { if (rf & 1) {
+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) {
     const config_r15 = i0.ɵɵnextContext(3).$implicit;
     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) { if (rf & 1) {
+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();
 } if (rf & 2) {
@@ -205,51 +229,61 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_button_3_Te
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1(" ", config_r15.label, " ");
 } }
-function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_input_4_Template(rf, ctx) { if (rf & 1) {
+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) {
     const config_r15 = i0.ɵɵnextContext(3).$implicit;
     i0.ɵɵproperty("value", config_r15.color);
 } }
 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) { if (rf & 1) {
+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, "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(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, "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(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(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(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) { if (rf & 1) {
+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) { if (rf & 1) {
-    const _r58 = i0.ɵɵgetCurrentView();
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_Template(rf, ctx) { if (rf & 1) {
+    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) {
     const config_r15 = i0.ɵɵnextContext(3).$implicit;
@@ -257,14 +291,14 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_select_6_Te
     i0.ɵɵproperty("ngForOf", config_r15.options);
 } }
 const _c3$1 = function (a0) { return { "p-0": a0 }; };
-function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_Template(rf, ctx) { if (rf & 1) {
+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) {
     const config_r15 = i0.ɵɵnextContext(2).$implicit;
@@ -282,10 +316,10 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_Template(rf
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngSwitchCase", "select");
 } }
-function PhoenixMenuItemComponent_div_7_ng_container_6_label_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);
+function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_label_1_Template, 2, 4, "label", 24);
+    i0.ɵɵtemplate(2, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_Template, 7, 9, "div", 25);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const config_r15 = i0.ɵɵnextContext().$implicit;
@@ -296,7 +330,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) {
     const config_r15 = ctx.$implicit;
@@ -306,9 +340,9 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_Template(rf, ctx) { if (r
 } }
 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);
@@ -329,9 +363,9 @@ function PhoenixMenuItemComponent_div_7_Template(rf, ctx) { if (rf & 1) {
 } }
 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);
@@ -343,8 +377,8 @@ function PhoenixMenuItemComponent_button_8_Template(rf, ctx) { if (rf & 1) {
 function PhoenixMenuItemComponent_div_9_app_phoenix_menu_item_1_Template(rf, ctx) { if (rf & 1) {
     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) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 47);
@@ -377,7 +411,7 @@ PhoenixMenuItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ph
     } if (rf & 2) {
         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) { if (rf & 1) {
+    } }, 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);
         i0.ɵɵtemplate(4, PhoenixMenuItemComponent_ng_template_4_Template, 4, 3, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
@@ -400,7 +434,7 @@ PhoenixMenuItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ph
     } }, 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: [{
@@ -492,30 +526,43 @@ function AnimateCameraComponent_button_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", preset_r2, " ");
 } }
 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,
             },
         ],
@@ -529,6 +576,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);
@@ -691,8 +742,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 */
@@ -727,7 +782,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';
+            }
         }
     }
     /**
@@ -758,7 +818,7 @@ OverlayComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverlayCom
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.overlayCard = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.resizeHandleCorner = _t.first);
-    } }, inputs: { overlayTitle: "overlayTitle", active: "active", icon: "icon", resizable: "resizable", transparentBody: "transparentBody" }, 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) {
+    } }, 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);
         i0.ɵɵtemplate(2, OverlayComponent_div_2_Template, 7, 8, "div", 2);
@@ -787,6 +847,8 @@ OverlayComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverlayCom
             type: Input
         }], transparentBody: [{
             type: Input
+        }], keepAspectRatioFixed: [{
+            type: Input
         }], overlayCard: [{
             type: ViewChild,
             args: ['overlayCard']
@@ -1228,10 +1290,10 @@ ExperimentInfoComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Exp
         i0.ɵɵproperty("ngIf", ctx.tagline);
         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: [{
@@ -1918,7 +1980,7 @@ OverlayViewWindowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } if (rf & 2) {
         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) { if (rf & 1) {
+    } }, 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);
         i0.ɵɵelementStart(4, "div", 4)(5, "app-menu-toggle", 5);
@@ -1931,7 +1993,7 @@ OverlayViewWindowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵlistener("click", function OverlayViewWindowComponent_Template_app_menu_toggle_click_7_listener() { return ctx.switchOverlayView(); });
         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);
@@ -1941,7 +2003,7 @@ OverlayViewWindowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, dependencies: [i2$3.MatTooltip, MenuToggleComponent, OverlayComponent], styles: ["#overlay-canvas[_ngcontent-%COMP%]{background-color:#0000001a;width:100%}.overlay-view-controls[_ngcontent-%COMP%]{bottom:1em;right:1em;opacity:0;transition:opacity .2s}.overlay-view-controls[_ngcontent-%COMP%]   .overlay-view-control[_ngcontent-%COMP%]{background:var(--phoenix-background-color-secondary);box-shadow:var(--phoenix-box-shadow);overflow:hidden;width:2.5rem;height:2.5rem;border-radius:50%;display:flex;justify-content:center;align-items:center}.overlay-view-wrapper[_ngcontent-%COMP%]:hover   .overlay-view-controls[_ngcontent-%COMP%]{opacity:1;transition:opacity .2s}"] });
 (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: [{
@@ -3233,7 +3295,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');