phoenix-ui-components 2.12.0 → 2.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/components/phoenix-menu/config/config-slider/config-slider.component.d.ts +5 -0
  2. package/dist/components/phoenix-ui.module.d.ts +30 -27
  3. package/dist/components/ui-menu/event-data-explorer/event-data-explorer-dialog/event-data-explorer-dialog.component.d.ts +1 -1
  4. package/dist/components/ui-menu/event-data-explorer/event-data-explorer.component.d.ts +1 -1
  5. package/dist/components/ui-menu/index.d.ts +1 -0
  6. package/dist/components/ui-menu/make-picture/make-picture.component.d.ts +17 -0
  7. package/dist/components/ui-menu/overlay/overlay.component.d.ts +5 -1
  8. package/dist/components/ui-menu/tree-menu/tree-menu-item/tree-menu-item.component.d.ts +1 -1
  9. package/dist/esm2020/components/embed-menu/experiment-link/experiment-link.component.mjs +5 -2
  10. package/dist/esm2020/components/phoenix-menu/config/config-slider/config-slider.component.mjs +25 -1
  11. package/dist/esm2020/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.mjs +63 -52
  12. package/dist/esm2020/components/phoenix-ui.module.mjs +13 -2
  13. package/dist/esm2020/components/ui-menu/animate-camera/animate-camera.component.mjs +25 -8
  14. package/dist/esm2020/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.mjs +5 -4
  15. package/dist/esm2020/components/ui-menu/event-selector/event-selector.component.mjs +3 -2
  16. package/dist/esm2020/components/ui-menu/experiment-info/experiment-info.component.mjs +2 -2
  17. package/dist/esm2020/components/ui-menu/index.mjs +2 -1
  18. package/dist/esm2020/components/ui-menu/make-picture/make-picture.component.mjs +88 -0
  19. package/dist/esm2020/components/ui-menu/overlay/overlay.component.mjs +14 -3
  20. package/dist/esm2020/components/ui-menu/overlay-view/overlay-view-window/overlay-view-window.component.mjs +4 -4
  21. package/dist/esm2020/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.mjs +4 -3
  22. package/dist/esm2020/components/ui-menu/ss-mode/ss-mode.component.mjs +3 -3
  23. package/dist/esm2020/components/ui-menu/ui-menu.component.mjs +10 -9
  24. package/dist/fesm2015/phoenix-ui-components.mjs +247 -81
  25. package/dist/fesm2015/phoenix-ui-components.mjs.map +1 -1
  26. package/dist/fesm2020/phoenix-ui-components.mjs +239 -81
  27. package/dist/fesm2020/phoenix-ui-components.mjs.map +1 -1
  28. package/dist/services/extras/event-data-import.d.ts +1 -1
  29. package/package.json +10 -6
@@ -8,11 +8,13 @@ import * as i2$1 from '@angular/material/slider';
8
8
  import { MatSliderModule } from '@angular/material/slider';
9
9
  import * as i2$2 from '@angular/material/button';
10
10
  import { MatButtonModule } from '@angular/material/button';
11
- import * as i3 from '@angular/material/slide-toggle';
11
+ import * as i3 from '@angular/forms';
12
+ import { FormsModule } from '@angular/forms';
13
+ import * as i4 from '@angular/material/slide-toggle';
12
14
  import { MatSlideToggleModule } from '@angular/material/slide-toggle';
13
- import * as i4 from '@angular/material/checkbox';
15
+ import * as i4$1 from '@angular/material/checkbox';
14
16
  import { MatCheckboxModule } from '@angular/material/checkbox';
15
- import * as i5 from '@rp3e11/ngx-slider';
17
+ import * as i6 from '@rp3e11/ngx-slider';
16
18
  import { NgxSliderModule } from '@rp3e11/ngx-slider';
17
19
  import { EventDisplay, SceneManager, PrettySymbols, Edm4hepJsonLoader, JiveXMLLoader, CMSLoader, readZipFile, VRManager, XRSessionType, ARManager, phoenixURLOptions, ActiveVariable } from 'phoenix-event-display';
18
20
  import * as i3$1 from '@angular/material/menu';
@@ -28,8 +30,10 @@ import { OverlayModule } from '@angular/cdk/overlay';
28
30
  import packageJson from 'phoenix-event-display/package.json';
29
31
  import * as i1$2 from '@angular/material/dialog';
30
32
  import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
31
- import * as i4$1 from '@angular/material/icon';
33
+ import * as i4$2 from '@angular/material/icon';
32
34
  import { MatIconModule } from '@angular/material/icon';
35
+ import * as i5 from '@angular/material/radio';
36
+ import { MatRadioModule } from '@angular/material/radio';
33
37
  import QRCode from 'qrcode';
34
38
  import * as i2$5 from '@angular/cdk/tree';
35
39
  import { NestedTreeControl, CdkTreeModule } from '@angular/cdk/tree';
@@ -66,7 +70,9 @@ class ConfigSliderComponent {
66
70
  constructor() {
67
71
  this.value = 0;
68
72
  this.min = 0;
73
+ this.oldMin = 0;
69
74
  this.max = 100;
75
+ this.oldMax = 0;
70
76
  this.step = 1;
71
77
  this.allowCustomValue = false;
72
78
  this.onChange = new EventEmitter();
@@ -74,6 +80,28 @@ class ConfigSliderComponent {
74
80
  onValueChange(value) {
75
81
  value && this.onChange.emit(value);
76
82
  }
83
+ toggleMinCut(change) {
84
+ const value = change.checked;
85
+ if (value) {
86
+ this.min = this.oldMin;
87
+ }
88
+ else {
89
+ this.oldMin = this.min;
90
+ this.min = Number.MIN_SAFE_INTEGER;
91
+ }
92
+ // We should probably disable the min input too, and change text to be infinity symbol or something?
93
+ }
94
+ toggleMaxCut(change) {
95
+ const value = change.checked;
96
+ if (value) {
97
+ this.max = this.oldMax;
98
+ }
99
+ else {
100
+ this.oldMax = this.max;
101
+ this.max = Number.MAX_SAFE_INTEGER;
102
+ }
103
+ // We should probably disable the min input too, and change text to be infinity symbol or something?
104
+ }
77
105
  }
78
106
  ConfigSliderComponent.ɵfac = function ConfigSliderComponent_Factory(t) { return new (t || ConfigSliderComponent)(); };
79
107
  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) {
@@ -162,8 +190,8 @@ function PhoenixMenuItemComponent_div_7_div_4_Template(rf, ctx) { if (rf & 1) {
162
190
  i0.ɵɵelementEnd();
163
191
  } }
164
192
  const _c1$4 = function (a0) { return { "font-weight-bold w-100": a0 }; };
165
- function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_span_1_Template(rf, ctx) { if (rf & 1) {
166
- i0.ɵɵelementStart(0, "span", 26);
193
+ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_label_1_Template(rf, ctx) { if (rf & 1) {
194
+ i0.ɵɵelementStart(0, "label", 26);
167
195
  i0.ɵɵtext(1);
168
196
  i0.ɵɵelementEnd();
169
197
  } if (rf & 2) {
@@ -172,28 +200,28 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_span_1_Template(r
172
200
  i0.ɵɵadvance(1);
173
201
  i0.ɵɵtextInterpolate1(" ", config_r15.label, " ");
174
202
  } }
175
- function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_mat_checkbox_1_Template(rf, ctx) { if (rf & 1) {
203
+ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_mat_checkbox_1_Template(rf, ctx) { if (rf & 1) {
176
204
  const _r28 = i0.ɵɵgetCurrentView();
177
205
  i0.ɵɵelementStart(0, "mat-checkbox", 9);
178
- 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); });
206
+ 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); });
179
207
  i0.ɵɵelementEnd();
180
208
  } if (rf & 2) {
181
209
  const config_r15 = i0.ɵɵnextContext(3).$implicit;
182
210
  i0.ɵɵproperty("checked", config_r15.isChecked);
183
211
  } }
184
- function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_app_config_slider_2_Template(rf, ctx) { if (rf & 1) {
212
+ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_app_config_slider_2_Template(rf, ctx) { if (rf & 1) {
185
213
  const _r32 = i0.ɵɵgetCurrentView();
186
214
  i0.ɵɵelementStart(0, "app-config-slider", 34);
187
- 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); });
215
+ 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); });
188
216
  i0.ɵɵelementEnd();
189
217
  } if (rf & 2) {
190
218
  const config_r15 = i0.ɵɵnextContext(3).$implicit;
191
219
  i0.ɵɵproperty("value", config_r15.value)("min", config_r15.min)("max", config_r15.max)("step", config_r15.step)("allowCustomValue", config_r15.allowCustomValue);
192
220
  } }
193
- function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_button_3_Template(rf, ctx) { if (rf & 1) {
221
+ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_button_3_Template(rf, ctx) { if (rf & 1) {
194
222
  const _r36 = i0.ɵɵgetCurrentView();
195
223
  i0.ɵɵelementStart(0, "button", 35);
196
- 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()); });
224
+ 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()); });
197
225
  i0.ɵɵtext(1);
198
226
  i0.ɵɵelementEnd();
199
227
  } if (rf & 2) {
@@ -201,51 +229,61 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_button_3_Te
201
229
  i0.ɵɵadvance(1);
202
230
  i0.ɵɵtextInterpolate1(" ", config_r15.label, " ");
203
231
  } }
204
- function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_input_4_Template(rf, ctx) { if (rf & 1) {
232
+ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_input_4_Template(rf, ctx) { if (rf & 1) {
205
233
  const _r40 = i0.ɵɵgetCurrentView();
206
234
  i0.ɵɵelementStart(0, "input", 36);
207
- 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); });
235
+ 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); });
208
236
  i0.ɵɵelementEnd();
209
237
  } if (rf & 2) {
210
238
  const config_r15 = i0.ɵɵnextContext(3).$implicit;
211
239
  i0.ɵɵproperty("value", config_r15.color);
212
240
  } }
213
241
  const _c2$1 = function (a0, a1, a2) { return { floor: a0, ceil: a1, step: a2, animate: false }; };
214
- function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_div_5_Template(rf, ctx) { if (rf & 1) {
242
+ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template(rf, ctx) { if (rf & 1) {
215
243
  const _r44 = i0.ɵɵgetCurrentView();
216
- i0.ɵɵelementStart(0, "div", 37)(1, "div", 38)(2, "input", 39);
217
- 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)); });
244
+ i0.ɵɵelementStart(0, "div", 37)(1, "div", 38)(2, "mat-checkbox", 9);
245
+ 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)); });
246
+ i0.ɵɵelementEnd();
247
+ i0.ɵɵelementStart(3, "mat-checkbox", 9);
248
+ 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)); });
249
+ i0.ɵɵelementEnd()();
250
+ i0.ɵɵelementStart(4, "div", 38)(5, "input", 39);
251
+ 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)); });
218
252
  i0.ɵɵelementEnd();
219
- i0.ɵɵelementStart(3, "input", 40);
220
- 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)); });
253
+ i0.ɵɵelementStart(6, "input", 40);
254
+ 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)); });
221
255
  i0.ɵɵelementEnd()();
222
- i0.ɵɵelementStart(4, "ngx-slider", 41);
223
- 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)); });
256
+ i0.ɵɵelementStart(7, "ngx-slider", 41);
257
+ 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)); });
224
258
  i0.ɵɵelementEnd()();
225
259
  } if (rf & 2) {
226
260
  const config_r15 = i0.ɵɵnextContext(3).$implicit;
227
261
  i0.ɵɵadvance(2);
262
+ i0.ɵɵproperty("checked", config_r15.enableMin);
263
+ i0.ɵɵadvance(1);
264
+ i0.ɵɵproperty("checked", config_r15.enableMax);
265
+ i0.ɵɵadvance(2);
228
266
  i0.ɵɵproperty("value", config_r15.value);
229
267
  i0.ɵɵadvance(1);
230
268
  i0.ɵɵproperty("value", config_r15.highValue);
231
269
  i0.ɵɵadvance(1);
232
- 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));
270
+ 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));
233
271
  } }
234
- function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_select_6_option_1_Template(rf, ctx) { if (rf & 1) {
272
+ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_option_1_Template(rf, ctx) { if (rf & 1) {
235
273
  i0.ɵɵelementStart(0, "option", 44);
236
274
  i0.ɵɵtext(1);
237
275
  i0.ɵɵelementEnd();
238
276
  } if (rf & 2) {
239
- const singleOption_r55 = ctx.$implicit;
240
- i0.ɵɵproperty("value", singleOption_r55);
277
+ const singleOption_r59 = ctx.$implicit;
278
+ i0.ɵɵproperty("value", singleOption_r59);
241
279
  i0.ɵɵadvance(1);
242
- i0.ɵɵtextInterpolate1(" ", singleOption_r55, " ");
280
+ i0.ɵɵtextInterpolate1(" ", singleOption_r59, " ");
243
281
  } }
244
- function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_select_6_Template(rf, ctx) { if (rf & 1) {
245
- const _r58 = i0.ɵɵgetCurrentView();
282
+ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_Template(rf, ctx) { if (rf & 1) {
283
+ const _r62 = i0.ɵɵgetCurrentView();
246
284
  i0.ɵɵelementStart(0, "select", 42);
247
- 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)); });
248
- i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_select_6_option_1_Template, 2, 2, "option", 43);
285
+ 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)); });
286
+ i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_option_1_Template, 2, 2, "option", 43);
249
287
  i0.ɵɵelementEnd();
250
288
  } if (rf & 2) {
251
289
  const config_r15 = i0.ɵɵnextContext(3).$implicit;
@@ -253,14 +291,14 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_select_6_Te
253
291
  i0.ɵɵproperty("ngForOf", config_r15.options);
254
292
  } }
255
293
  const _c3$1 = function (a0) { return { "p-0": a0 }; };
256
- function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_Template(rf, ctx) { if (rf & 1) {
294
+ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_Template(rf, ctx) { if (rf & 1) {
257
295
  i0.ɵɵelementStart(0, "div", 27);
258
- i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_mat_checkbox_1_Template, 1, 1, "mat-checkbox", 28);
259
- i0.ɵɵtemplate(2, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_app_config_slider_2_Template, 1, 5, "app-config-slider", 29);
260
- i0.ɵɵtemplate(3, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_button_3_Template, 2, 1, "button", 30);
261
- i0.ɵɵtemplate(4, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_input_4_Template, 1, 1, "input", 31);
262
- i0.ɵɵtemplate(5, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_div_5_Template, 5, 9, "div", 32);
263
- i0.ɵɵtemplate(6, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_select_6_Template, 2, 1, "select", 33);
296
+ i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_mat_checkbox_1_Template, 1, 1, "mat-checkbox", 28);
297
+ i0.ɵɵtemplate(2, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_app_config_slider_2_Template, 1, 5, "app-config-slider", 29);
298
+ i0.ɵɵtemplate(3, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_button_3_Template, 2, 1, "button", 30);
299
+ i0.ɵɵtemplate(4, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_input_4_Template, 1, 1, "input", 31);
300
+ i0.ɵɵtemplate(5, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_div_5_Template, 8, 11, "div", 32);
301
+ i0.ɵɵtemplate(6, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_select_6_Template, 2, 1, "select", 33);
264
302
  i0.ɵɵelementEnd();
265
303
  } if (rf & 2) {
266
304
  const config_r15 = i0.ɵɵnextContext(2).$implicit;
@@ -278,10 +316,10 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_Template(rf
278
316
  i0.ɵɵadvance(1);
279
317
  i0.ɵɵproperty("ngSwitchCase", "select");
280
318
  } }
281
- function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_Template(rf, ctx) { if (rf & 1) {
282
- i0.ɵɵelementStart(0, "label", 23);
283
- i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_span_1_Template, 2, 4, "span", 24);
284
- i0.ɵɵtemplate(2, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_div_2_Template, 7, 9, "div", 25);
319
+ function PhoenixMenuItemComponent_div_7_ng_container_6_div_1_Template(rf, ctx) { if (rf & 1) {
320
+ i0.ɵɵelementStart(0, "div", 23);
321
+ i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_label_1_Template, 2, 4, "label", 24);
322
+ i0.ɵɵtemplate(2, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_div_2_Template, 7, 9, "div", 25);
285
323
  i0.ɵɵelementEnd();
286
324
  } if (rf & 2) {
287
325
  const config_r15 = i0.ɵɵnextContext().$implicit;
@@ -292,7 +330,7 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_label_1_Template(rf, ctx)
292
330
  } }
293
331
  function PhoenixMenuItemComponent_div_7_ng_container_6_Template(rf, ctx) { if (rf & 1) {
294
332
  i0.ɵɵelementContainerStart(0, 21);
295
- i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_label_1_Template, 3, 2, "label", 22);
333
+ i0.ɵɵtemplate(1, PhoenixMenuItemComponent_div_7_ng_container_6_div_1_Template, 3, 2, "div", 22);
296
334
  i0.ɵɵelementContainerEnd();
297
335
  } if (rf & 2) {
298
336
  const config_r15 = ctx.$implicit;
@@ -302,9 +340,9 @@ function PhoenixMenuItemComponent_div_7_ng_container_6_Template(rf, ctx) { if (r
302
340
  } }
303
341
  const _c4$1 = function (a0) { return { "top.px": a0 }; };
304
342
  function PhoenixMenuItemComponent_div_7_Template(rf, ctx) { if (rf & 1) {
305
- const _r63 = i0.ɵɵgetCurrentView();
343
+ const _r67 = i0.ɵɵgetCurrentView();
306
344
  i0.ɵɵelementStart(0, "div")(1, "button", 15);
307
- 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); });
345
+ 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); });
308
346
  i0.ɵɵnamespaceSVG();
309
347
  i0.ɵɵelementStart(2, "svg");
310
348
  i0.ɵɵelement(3, "use", 16);
@@ -325,9 +363,9 @@ function PhoenixMenuItemComponent_div_7_Template(rf, ctx) { if (rf & 1) {
325
363
  } }
326
364
  const _c5$1 = function (a0) { return { expanded: a0 }; };
327
365
  function PhoenixMenuItemComponent_button_8_Template(rf, ctx) { if (rf & 1) {
328
- const _r65 = i0.ɵɵgetCurrentView();
366
+ const _r69 = i0.ɵɵgetCurrentView();
329
367
  i0.ɵɵelementStart(0, "button", 45);
330
- 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); });
368
+ 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); });
331
369
  i0.ɵɵnamespaceSVG();
332
370
  i0.ɵɵelementStart(1, "svg");
333
371
  i0.ɵɵelement(2, "use", 46);
@@ -339,8 +377,8 @@ function PhoenixMenuItemComponent_button_8_Template(rf, ctx) { if (rf & 1) {
339
377
  function PhoenixMenuItemComponent_div_9_app_phoenix_menu_item_1_Template(rf, ctx) { if (rf & 1) {
340
378
  i0.ɵɵelement(0, "app-phoenix-menu-item", 49);
341
379
  } if (rf & 2) {
342
- const childNode_r67 = ctx.$implicit;
343
- i0.ɵɵproperty("currentNode", childNode_r67);
380
+ const childNode_r71 = ctx.$implicit;
381
+ i0.ɵɵproperty("currentNode", childNode_r71);
344
382
  } }
345
383
  function PhoenixMenuItemComponent_div_9_Template(rf, ctx) { if (rf & 1) {
346
384
  i0.ɵɵelementStart(0, "div", 47);
@@ -373,7 +411,7 @@ PhoenixMenuItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ph
373
411
  } if (rf & 2) {
374
412
  let _t;
375
413
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.phoenixMenuItem = _t.first);
376
- } }, 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) {
414
+ } }, 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) {
377
415
  i0.ɵɵelementStart(0, "div", 0, 1)(2, "div", 2);
378
416
  i0.ɵɵtemplate(3, PhoenixMenuItemComponent_ng_container_3_Template, 3, 2, "ng-container", 3);
379
417
  i0.ɵɵtemplate(4, PhoenixMenuItemComponent_ng_template_4_Template, 4, 3, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
@@ -393,10 +431,10 @@ PhoenixMenuItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ph
393
431
  i0.ɵɵproperty("ngIf", ctx.currentNode.children.length > 0);
394
432
  i0.ɵɵadvance(1);
395
433
  i0.ɵɵproperty("ngIf", ctx.currentNode.childrenActive);
396
- } }, 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 });
434
+ } }, 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 });
397
435
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PhoenixMenuItemComponent, [{
398
436
  type: Component,
399
- 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"] }]
437
+ 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"] }]
400
438
  }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { currentNode: [{
401
439
  type: Input
402
440
  }], phoenixMenuItem: [{
@@ -488,30 +526,43 @@ function AnimateCameraComponent_button_2_Template(rf, ctx) { if (rf & 1) {
488
526
  i0.ɵɵtextInterpolate1(" ", preset_r2, " ");
489
527
  } }
490
528
  const defaultAnimationPresets = {
491
- 'Preset 1': {
529
+ 'Cavern to ID': {
530
+ name: 'Cavern to ID',
492
531
  positions: [
493
532
  {
494
- position: [11976, 7262, 11927],
533
+ position: [66388.95051168812, 5264.228603228927, -46910.7848593543],
495
534
  duration: 1000,
496
535
  },
497
536
  {
498
- position: [-1000, 0, 11927],
537
+ position: [12834.18729094943, 677.7571205763458, 135.68755273443463],
499
538
  duration: 2000,
500
539
  },
501
540
  {
502
- position: [2000, 500, 1000],
541
+ position: [312.02688693297375, 25.884223757326, 270.10019006776236],
503
542
  duration: 3500,
504
543
  },
505
544
  {
506
- position: [5000, 2000, 1000],
545
+ position: [263.3640855132258, 19.874838262525053, -318.16541790248885],
507
546
  duration: 3000,
508
547
  },
509
548
  {
510
- position: [5000, 2000, 1000],
549
+ position: [5534.140362338047, 234.03507981484574, -2933.619479808285],
511
550
  duration: 2000,
512
551
  },
513
552
  {
514
- position: [11976, 7262, 11927],
553
+ position: [2681.277288705242, 646.5795158318147, 5628.5248735111745],
554
+ duration: 1000,
555
+ },
556
+ {
557
+ position: [-6062.586283740076, 790.5876682946184, 1381.1675900848818],
558
+ duration: 1000,
559
+ },
560
+ {
561
+ position: [-1766.7693725879053, 1007.1048030984678, -5928.901341784575],
562
+ duration: 1000,
563
+ },
564
+ {
565
+ position: [12814.982506255355, 2516.987185037266, -22891.902734328327],
515
566
  duration: 1000,
516
567
  },
517
568
  ],
@@ -525,6 +576,10 @@ class AnimateCameraComponent {
525
576
  this.animationPresets = defaultAnimationPresets;
526
577
  this.animationPresetsKeys = Object.keys(this.animationPresets);
527
578
  this.isAnimating = false;
579
+ // this.animationPresets = this.eventDisplay
580
+ // .getUIManager()
581
+ // .getPresetAnimations();
582
+ // This is too late to fill the UI! FIXME. EJWM
528
583
  }
529
584
  animatePreset(preset) {
530
585
  this.setDetectorOpacity(0.2);
@@ -687,8 +742,12 @@ class OverlayComponent {
687
742
  this.resizable = false;
688
743
  /** If the overlay body is transparent or not. */
689
744
  this.transparentBody = false;
745
+ /** If the aspect ratio is kept fixed or not. */
746
+ this.keepAspectRatioFixed = false;
690
747
  /** If the overlay body is visible or not. */
691
748
  this.showBody = true;
749
+ /** Aspect ratio of the overlay view. */
750
+ this.aspectRatio = window.innerWidth / window.innerHeight;
692
751
  /** Minimum resizable width. */
693
752
  this.MIN_RES_WIDTH = 300;
694
753
  /** Minimum resizable height */
@@ -723,7 +782,12 @@ class OverlayComponent {
723
782
  this.setHandleTransform(overlayRect, dragRect);
724
783
  if (width > this.MIN_RES_WIDTH && height > this.MIN_RES_HEIGHT) {
725
784
  overlayCardElement.style.width = width + 'px';
726
- overlayCardElement.style.height = height + 'px';
785
+ if (this.keepAspectRatioFixed) {
786
+ overlayCardElement.style.height = width / this.aspectRatio + 30 + 'px';
787
+ }
788
+ else {
789
+ overlayCardElement.style.height = height + 'px';
790
+ }
727
791
  }
728
792
  }
729
793
  /**
@@ -754,7 +818,7 @@ OverlayComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverlayCom
754
818
  let _t;
755
819
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.overlayCard = _t.first);
756
820
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.resizeHandleCorner = _t.first);
757
- } }, 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) {
821
+ } }, 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) {
758
822
  i0.ɵɵprojectionDef();
759
823
  i0.ɵɵelementStart(0, "div", 0, 1);
760
824
  i0.ɵɵtemplate(2, OverlayComponent_div_2_Template, 7, 8, "div", 2);
@@ -783,6 +847,8 @@ OverlayComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverlayCom
783
847
  type: Input
784
848
  }], transparentBody: [{
785
849
  type: Input
850
+ }], keepAspectRatioFixed: [{
851
+ type: Input
786
852
  }], overlayCard: [{
787
853
  type: ViewChild,
788
854
  args: ['overlayCard']
@@ -1035,7 +1101,7 @@ CollectionsInfoOverlayComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ t
1035
1101
  i0.ɵɵproperty("resizable", true)("active", ctx.showObjectsInfo);
1036
1102
  i0.ɵɵadvance(1);
1037
1103
  i0.ɵɵproperty("ngIf", ctx.showObjectsInfo);
1038
- } }, 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)}"] });
1104
+ } }, 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)}"] });
1039
1105
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CollectionsInfoOverlayComponent, [{
1040
1106
  type: Component,
1041
1107
  args: [{ selector: 'app-collections-info-overlay', template: "<!-- Show objects -->\n<app-overlay\n overlayTitle=\"Collections Info\"\n icon=\"info\"\n [resizable]=\"true\"\n [active]=\"showObjectsInfo\"\n>\n <!-- Using ngIf to remove it from DOM since this panel requires heavy computing -->\n <div *ngIf=\"showObjectsInfo\" class=\"collectionsInfo m-2\">\n <div\n class=\"collectionSelector mb-2 d-flex align-items-center\"\n *ngIf=\"collections != null\"\n >\n <div class=\"d-flex align-items-center\">\n <span>Choose a collection: </span>\n <div class=\"eventSelector\">\n <label for=\"event\">Event</label>\n <select\n id=\"collection\"\n name=\"collection\"\n (change)=\"changeCollection($event.target.value)\"\n >\n <option value=\"\" selected disabled hidden>Choose Collection</option>\n <option *ngFor=\"let collection of collections\" [value]=\"collection\">\n {{ collection }}\n </option>\n </select>\n </div>\n <mat-checkbox\n *ngIf=\"showingCollection\"\n (change)=\"toggleInvisible($event.checked)\"\n >\n Hide Invisible Objects\n </mat-checkbox>\n </div>\n </div>\n\n <div class=\"boxBody table-responsive\">\n <table\n id=\"collectionTable\"\n class=\"table table-borderless table-sm\"\n *ngIf=\"showingCollection\"\n >\n <thead>\n <tr>\n <th>No.</th>\n <th>Selection</th>\n <th>Label</th>\n <th *ngFor=\"let column of collectionColumns\">\n <div class=\"head-wrapper\">\n <div>\n {{ getPrettySymbol(column) }}\n </div>\n <div class=\"sort-options\">\n <button\n class=\"icon-wrapper icon-button btn-blank up\"\n (click)=\"sort(column, 'dec')\"\n >\n <svg>\n <use href=\"assets/icons/expand.svg#expand\"></use>\n </svg>\n </button>\n <button\n class=\"icon-wrapper icon-button btn-blank\"\n (click)=\"sort(column, 'asc')\"\n >\n <svg>\n <use href=\"assets/icons/expand.svg#expand\"></use>\n </svg>\n </button>\n </div>\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n *ngFor=\"let object of showingCollection; index as i\"\n [attr.id]=\"object.uuid\"\n [ngClass]=\"{\n 'active-object':\n activeObject && activeObject.value === object.uuid,\n 'is-cut': object.isCut,\n 'd-none': object.isCut && hideInvisible\n }\"\n >\n <td>#{{ i }}</td>\n <td>\n <div\n *ngIf=\"object.uuid\"\n class=\"row justify-content-center icon-wrapper\"\n >\n <button\n class=\"object-select btn-blank\"\n matTooltip=\"Move camera to object\"\n (click)=\"lookAtObject(object.uuid)\"\n >\n <svg>\n <use href=\"assets/icons/views.svg#views\"></use>\n </svg>\n </button>\n <button\n class=\"object-select btn-blank\"\n matTooltip=\"Highlight object\"\n (click)=\"highlightObject(object.uuid)\"\n >\n <svg>\n <use href=\"assets/icons/cursor.svg#cursor\"></use>\n </svg>\n </button>\n </div>\n </td>\n <td>\n <div class=\"row m-0 add-label\">\n <div class=\"col-10 p-0\">\n <input\n class=\"form-control form-control-sm\"\n type=\"text\"\n [id]=\"'label' + i\"\n />\n </div>\n <div class=\"col-2 p-0 pl-2 text-center icon-wrapper\">\n <button\n class=\"object-select btn-blank\"\n matTooltip=\"Add, update or remove object label\"\n (click)=\"addLabel(i, object.uuid)\"\n >\n <svg>\n <use href=\"assets/icons/update.svg#update\"></use>\n </svg>\n </button>\n </div>\n </div>\n </td>\n <td *ngFor=\"let column of collectionColumns\">\n {{ object[column] }}\n </td>\n </tr>\n </tbody>\n </table>\n <p class=\"emptyBox\" *ngIf=\"!collections\">\n Load event data to be able to display information about the collections\n here.\n </p>\n </div>\n </div>\n</app-overlay>\n", styles: [".collectionsInfo{height:95%}.collectionsInfo .collectionSelector{height:15%;min-height:2rem}.collectionsInfo .collectionSelector span{color:var(--phoenix-text-color-secondary);margin-right:1rem}.collectionsInfo .collectionSelector mat-checkbox{margin-left:1rem}.boxBody{height:85%;overflow:scroll}.boxBody p.emptyBox{max-width:21em}.boxBody .add-label{min-width:8rem}.boxBody .add-label input{padding:.1rem .3rem;font-size:.75rem}#collectionTable{position:relative;color:var(--phoenix-text-color-secondary)}#collectionTable thead tr th{position:sticky;top:0;z-index:100;background:var(--phoenix-background-color-secondary)}#collectionTable thead tr th .head-wrapper{display:flex;align-items:center}#collectionTable thead tr th .head-wrapper .sort-options{display:flex;flex-direction:row}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper{display:flex;width:1rem;height:1rem;padding:.2rem}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper.up{transform:rotate(180deg)}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper svg{width:100%;height:100%}#collectionTable tr *{padding-right:1.2rem}#collectionTable tr *:last-child{padding-right:0}#collectionTable tr.is-cut{opacity:.5}#collectionTable tr.active-object{color:var(--phoenix-background-color);background:var(--phoenix-text-color);box-shadow:0 0 15px var(--phoenix-text-color)}#collectionTable tr.active-object div.icon-wrapper{--phoenix-options-icon-path: var(--phoenix-background-color);--phoenix-options-icon-bg: var(--phoenix-text-color-hover)}#collectionTable tr.active-object .add-label input{--phoenix-text-color: var(--phoenix-background-color);--phoenix-background-color-tertiary: var( --phoenix-text-color-secondary );--phoenix-border: var(--phoenix-background-color)}#collectionTable td .object-select{position:relative;width:1.6rem;height:1.6rem;margin-right:.4em;text-align:center;background-color:var(--phoenix-options-icon-bg);border-radius:10px;cursor:pointer}#collectionTable td .object-select:last-child{margin-right:0}#collectionTable td .object-select:hover{border:1px solid var(--phoenix-options-icon-path)}#collectionTable td .object-select svg{position:absolute;top:0;left:0;padding:.4rem;width:100%;height:100%;vertical-align:top}.eventSelector{display:flex}.eventSelector label{display:none;color:var(--phoenix-text-color-secondary)}.eventSelector select{width:9rem;padding:5px 10px;font-size:12px;border:1px solid rgba(88,88,88,.08);box-shadow:var(--phoenix-icon-shadow);background-color:var(--phoenix-background-color-tertiary);color:var(--phoenix-text-color-secondary)}\n"] }]
@@ -1139,7 +1205,7 @@ EventSelectorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Even
1139
1205
  i0.ɵɵtemplate(0, EventSelectorComponent_div_0_Template, 3, 1, "div", 0);
1140
1206
  } if (rf & 2) {
1141
1207
  i0.ɵɵproperty("ngIf", ctx.events != null);
1142
- } }, 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)}"] });
1208
+ } }, 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)}"] });
1143
1209
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EventSelectorComponent, [{
1144
1210
  type: Component,
1145
1211
  args: [{ selector: 'app-event-selector', template: "<div\n class=\"eventSelector mx-2\"\n *ngIf=\"events != null\"\n matTooltip=\"Event selector\"\n matTooltipPosition=\"above\"\n>\n <select name=\"event\" (change)=\"changeEvent($event)\">\n <option *ngFor=\"let event of events\" [value]=\"event\">\n {{ event }}\n </option>\n </select>\n</div>\n", styles: [".eventSelector select{width:9rem;padding:5px 10px;font-size:12px;border:1px solid rgba(88,88,88,.08);box-shadow:var(--phoenix-icon-shadow);background-color:var(--phoenix-background-color-tertiary);color:var(--phoenix-text-color-secondary)}\n"] }]
@@ -1224,10 +1290,10 @@ ExperimentInfoComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Exp
1224
1290
  i0.ɵɵproperty("ngIf", ctx.tagline);
1225
1291
  i0.ɵɵadvance(1);
1226
1292
  i0.ɵɵproperty("ngForOf", ctx.experimentInfo);
1227
- } }, 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}}"] });
1293
+ } }, 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}}"] });
1228
1294
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExperimentInfoComponent, [{
1229
1295
  type: Component,
1230
- 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"] }]
1296
+ 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"] }]
1231
1297
  }], function () { return [{ type: EventDisplayService }]; }, { url: [{
1232
1298
  type: Input
1233
1299
  }], logo: [{
@@ -1751,7 +1817,7 @@ ObjectClippingComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Obj
1751
1817
  i0.ɵɵproperty("value", ctx.openingClippingAngle);
1752
1818
  i0.ɵɵadvance(3);
1753
1819
  i0.ɵɵproperty("matMenuTriggerFor", _r0)("active", ctx.clippingEnabled);
1754
- } }, 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}"] });
1820
+ } }, 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}"] });
1755
1821
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ObjectClippingComponent, [{
1756
1822
  type: Component,
1757
1823
  args: [{ selector: 'app-object-clipping', template: "<mat-menu class=\"mat-menu\" #menu>\n <button\n mat-menu-item\n (click)=\"\n $event.stopPropagation();\n clippingCheckbox._inputElement.nativeElement.click()\n \"\n >\n <mat-checkbox\n #clippingCheckbox\n [checked]=\"clippingEnabled\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleClipping($event)\"\n >\n Clipping\n </mat-checkbox>\n </button>\n <button\n class=\"slider-btn\"\n mat-menu-item\n (focus)=\"startingAngleSlider.focus()\"\n >\n <mat-slider min=\"0\" max=\"360\" step=\"1\" thumbLabel>\n <input\n #startingAngleSlider\n matSliderThumb\n [value]=\"startClippingAngle\"\n (valueChange)=\"changeStartClippingAngle($event)\"\n />\n </mat-slider>\n Start Angle\n </button>\n <button class=\"slider-btn\" mat-menu-item (focus)=\"openingAngleSlider.focus()\">\n <mat-slider min=\"0\" max=\"360\" step=\"1\" thumbLabel>\n <input\n #openingAngleSlider\n matSliderThumb\n [value]=\"openingClippingAngle\"\n (valueChange)=\"changeOpeningClippingAngle($event)\"\n />\n </mat-slider>\n Opening Angle\n </button>\n</mat-menu>\n\n<app-menu-toggle\n [matMenuTriggerFor]=\"menu\"\n tooltip=\"Geometry clipping\"\n icon=\"clipping\"\n [active]=\"clippingEnabled\"\n>\n</app-menu-toggle>\n", styles: [".slider-btn{overflow:visible}mat-slider{margin-left:.75rem;margin-right:.75rem}\n"] }]
@@ -1914,7 +1980,7 @@ OverlayViewWindowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
1914
1980
  } if (rf & 2) {
1915
1981
  let _t;
1916
1982
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.overlayWindow = _t.first);
1917
- } }, 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) {
1983
+ } }, 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) {
1918
1984
  i0.ɵɵelementStart(0, "app-overlay", 0)(1, "div", 1);
1919
1985
  i0.ɵɵelement(2, "canvas", 2, 3);
1920
1986
  i0.ɵɵelementStart(4, "div", 4)(5, "app-menu-toggle", 5);
@@ -1927,7 +1993,7 @@ OverlayViewWindowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
1927
1993
  i0.ɵɵlistener("click", function OverlayViewWindowComponent_Template_app_menu_toggle_click_7_listener() { return ctx.switchOverlayView(); });
1928
1994
  i0.ɵɵelementEnd()()()();
1929
1995
  } if (rf & 2) {
1930
- i0.ɵɵproperty("resizable", true)("transparentBody", ctx.transparentBody)("active", ctx.showOverlay);
1996
+ i0.ɵɵproperty("resizable", true)("transparentBody", ctx.transparentBody)("active", ctx.showOverlay)("keepAspectRatioFixed", true);
1931
1997
  i0.ɵɵadvance(2);
1932
1998
  i0.ɵɵproperty("hidden", !ctx.showOverlay);
1933
1999
  i0.ɵɵadvance(4);
@@ -1937,7 +2003,7 @@ OverlayViewWindowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
1937
2003
  } }, 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}"] });
1938
2004
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayViewWindowComponent, [{
1939
2005
  type: Component,
1940
- 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"] }]
2006
+ 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"] }]
1941
2007
  }], function () { return [{ type: EventDisplayService }]; }, { showOverlay: [{
1942
2008
  type: Input
1943
2009
  }], overlayWindow: [{
@@ -2050,7 +2116,7 @@ TreeMenuItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TreeM
2050
2116
  i0.ɵɵtemplate(0, TreeMenuItemComponent_ng_container_0_Template, 8, 7, "ng-container", 0);
2051
2117
  } if (rf & 2) {
2052
2118
  i0.ɵɵproperty("ngIf", ctx.node);
2053
- } }, 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}"] });
2119
+ } }, 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}"] });
2054
2120
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TreeMenuItemComponent, [{
2055
2121
  type: Component,
2056
2122
  args: [{ selector: 'app-tree-menu-item', template: "<ng-container *ngIf=\"node\">\n <div class=\"header\" [ngClass]=\"{ visible: visible }\">\n <button\n *ngIf=\"node.children\"\n mat-icon-button\n matTreeNodeToggle\n (click)=\"isExpanded = !isExpanded\"\n >\n <mat-icon class=\"mat-icon-rtl-mirror\">\n {{ isExpanded ? 'expand_more' : 'chevron_right' }}\n </mat-icon>\n </button>\n <div (click)=\"toggleVisibility(!visible)\" class=\"node-name\">\n {{ node.name }}\n </div>\n </div>\n <ul [hidden]=\"!isExpanded\" hid>\n <div class=\"children\">\n <li *ngFor=\"let node of node.children\">\n <app-tree-menu-item [node]=\"node\"></app-tree-menu-item>\n </li>\n </div>\n </ul>\n</ng-container>\n", styles: [".header{cursor:pointer;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;flex-direction:row;align-items:center}.header .node-name,.header .mat-icon-rtl-mirror{color:var(--phoenix-text-color-secondary)}.header.visible .node-name,.header.visible .mat-icon-rtl-mirror{color:var(--phoenix-accent)}.children li{list-style-type:none}\n"] }]
@@ -2204,7 +2270,7 @@ ViewOptionsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ViewOp
2204
2270
  i0.ɵɵproperty("ngForOf", ctx.views);
2205
2271
  i0.ɵɵadvance(1);
2206
2272
  i0.ɵɵproperty("matMenuTriggerFor", _r0)("active", false);
2207
- } }, 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}"] });
2273
+ } }, 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}"] });
2208
2274
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ViewOptionsComponent, [{
2209
2275
  type: Component,
2210
2276
  args: [{ selector: 'app-view-options', template: "<mat-menu #viewOptions>\n <button\n mat-menu-item\n (click)=\"\n $event.stopPropagation();\n showGridCheckbox._inputElement.nativeElement.click()\n \"\n >\n <mat-checkbox\n #showGridCheckbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"setGrid($event)\"\n >Show Grid\n </mat-checkbox>\n </button>\n <button\n mat-menu-item\n (click)=\"\n $event.stopPropagation();\n showAxisCheckbox._inputElement.nativeElement.click()\n \"\n >\n <mat-checkbox\n #showAxisCheckbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"setAxis($event)\"\n >Show Axis\n </mat-checkbox>\n </button>\n <button\n mat-menu-item\n *ngFor=\"let view of views\"\n (click)=\"displayView($event, view)\"\n >\n <svg class=\"view-icon\" *ngIf=\"view.icon\">\n <use attr.href=\"assets/icons/{{ view.icon }}.svg#{{ view.icon }}\"></use>\n </svg>\n {{ view.name }}\n </button>\n</mat-menu>\n\n<app-menu-toggle\n [matMenuTriggerFor]=\"viewOptions\"\n tooltip=\"View options\"\n icon=\"views\"\n [active]=\"false\"\n>\n</app-menu-toggle>\n", styles: [".view-icon{width:1.2rem;height:1.2rem;margin-right:.5rem}\n"] }]
@@ -2430,7 +2496,7 @@ class SSModeComponent {
2430
2496
  }
2431
2497
  }
2432
2498
  SSModeComponent.ɵfac = function SSModeComponent_Factory(t) { return new (t || SSModeComponent)(); };
2433
- 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) { if (rf & 1) {
2499
+ 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) {
2434
2500
  i0.ɵɵelementStart(0, "app-menu-toggle", 0);
2435
2501
  i0.ɵɵlistener("click", function SSModeComponent_Template_app_menu_toggle_click_0_listener() { return ctx.toggleSSMode(); });
2436
2502
  i0.ɵɵelementEnd();
@@ -2439,9 +2505,89 @@ SSModeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SSModeCompo
2439
2505
  } }, dependencies: [MenuToggleComponent], styles: ["#uiMenu,#phoenixMenu,#mainLogo,#statsElement{transition:opacity .4s}.ss-mode #uiMenu,.ss-mode #phoenixMenu,.ss-mode #mainLogo,.ss-mode #statsElement{visibility:hidden;opacity:0}\n"], encapsulation: 2 });
2440
2506
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SSModeComponent, [{
2441
2507
  type: Component,
2442
- 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"] }]
2508
+ 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"] }]
2443
2509
  }], null, null); })();
2444
2510
 
2511
+ function MakePictureComponent_mat_radio_button_14_Template(rf, ctx) { if (rf & 1) {
2512
+ i0.ɵɵelementStart(0, "mat-radio-button", 12);
2513
+ i0.ɵɵtext(1);
2514
+ i0.ɵɵelementEnd();
2515
+ } if (rf & 2) {
2516
+ const fitting_r4 = ctx.$implicit;
2517
+ i0.ɵɵproperty("value", fitting_r4);
2518
+ i0.ɵɵadvance(1);
2519
+ i0.ɵɵtextInterpolate1("", fitting_r4, " ");
2520
+ } }
2521
+ class MakePictureComponent {
2522
+ constructor(eventDisplay) {
2523
+ this.eventDisplay = eventDisplay;
2524
+ this.fittings = ['Crop', 'Stretch'];
2525
+ this.fitting = 'Crop';
2526
+ this.width = 3840;
2527
+ this.height = 2160;
2528
+ }
2529
+ ngOnInit() { }
2530
+ setWidth(value) {
2531
+ this.width = value;
2532
+ }
2533
+ setHeight(value) {
2534
+ this.height = value;
2535
+ }
2536
+ makePicture() {
2537
+ this.eventDisplay.makeScreenShot(this.width, this.height, this.fitting);
2538
+ }
2539
+ }
2540
+ MakePictureComponent.ɵfac = function MakePictureComponent_Factory(t) { return new (t || MakePictureComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
2541
+ 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) {
2542
+ const _r5 = i0.ɵɵgetCurrentView();
2543
+ i0.ɵɵelementStart(0, "mat-menu", 0, 1)(2, "button", 2);
2544
+ i0.ɵɵlistener("click", function MakePictureComponent_Template_button_click_2_listener($event) { return $event.stopPropagation(); });
2545
+ i0.ɵɵelementStart(3, "label");
2546
+ i0.ɵɵtext(4, "width");
2547
+ i0.ɵɵelementEnd();
2548
+ i0.ɵɵelementStart(5, "input", 3, 4);
2549
+ 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(); });
2550
+ i0.ɵɵelementEnd()();
2551
+ i0.ɵɵelementStart(7, "button", 2);
2552
+ i0.ɵɵlistener("click", function MakePictureComponent_Template_button_click_7_listener($event) { return $event.stopPropagation(); });
2553
+ i0.ɵɵelementStart(8, "label");
2554
+ i0.ɵɵtext(9, "height");
2555
+ i0.ɵɵelementEnd();
2556
+ i0.ɵɵelementStart(10, "input", 3, 5);
2557
+ 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(); });
2558
+ i0.ɵɵelementEnd()();
2559
+ i0.ɵɵelementStart(12, "button", 6);
2560
+ i0.ɵɵlistener("click", function MakePictureComponent_Template_button_click_12_listener($event) { return $event.stopPropagation(); });
2561
+ i0.ɵɵelementStart(13, "mat-radio-group", 7);
2562
+ i0.ɵɵlistener("ngModelChange", function MakePictureComponent_Template_mat_radio_group_ngModelChange_13_listener($event) { return ctx.fitting = $event; });
2563
+ i0.ɵɵtemplate(14, MakePictureComponent_mat_radio_button_14_Template, 2, 2, "mat-radio-button", 8);
2564
+ i0.ɵɵelementEnd()();
2565
+ i0.ɵɵelementStart(15, "button", 9);
2566
+ i0.ɵɵlistener("click", function MakePictureComponent_Template_button_click_15_listener() { return ctx.makePicture(); });
2567
+ i0.ɵɵtext(16, " Create picture ");
2568
+ i0.ɵɵelementEnd()();
2569
+ i0.ɵɵelement(17, "app-menu-toggle", 10);
2570
+ i0.ɵɵelementStart(18, "div");
2571
+ i0.ɵɵelement(19, "canvas", 11);
2572
+ i0.ɵɵelementEnd();
2573
+ } if (rf & 2) {
2574
+ const _r0 = i0.ɵɵreference(1);
2575
+ i0.ɵɵadvance(5);
2576
+ i0.ɵɵproperty("value", 3840);
2577
+ i0.ɵɵadvance(5);
2578
+ i0.ɵɵproperty("value", 2610);
2579
+ i0.ɵɵadvance(3);
2580
+ i0.ɵɵproperty("ngModel", ctx.fitting);
2581
+ i0.ɵɵadvance(1);
2582
+ i0.ɵɵproperty("ngForOf", ctx.fittings);
2583
+ i0.ɵɵadvance(3);
2584
+ i0.ɵɵproperty("matMenuTriggerFor", _r0);
2585
+ } }, 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 });
2586
+ (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MakePictureComponent, [{
2587
+ type: Component,
2588
+ 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"] }]
2589
+ }], function () { return [{ type: EventDisplayService }]; }, null); })();
2590
+
2445
2591
  class PerformanceToggleComponent {
2446
2592
  constructor(eventDisplay) {
2447
2593
  this.eventDisplay = eventDisplay;
@@ -2637,7 +2783,7 @@ ShareLinkDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sh
2637
2783
  i0.ɵɵtextInterpolate(ctx.shareLink.value);
2638
2784
  i0.ɵɵadvance(7);
2639
2785
  i0.ɵɵtextInterpolate(ctx.embedLink);
2640
- } }, 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)}"] });
2786
+ } }, 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)}"] });
2641
2787
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShareLinkDialogComponent, [{
2642
2788
  type: Component,
2643
2789
  args: [{ selector: 'app-share-link-dialog', template: "<div class=\"dialog\">\n <h1 mat-dialog-title>Create shareable link</h1>\n <div mat-dialog-content class=\"dialog-content\">\n <h5>URL options</h5>\n <div class=\"form-group mt-2\">\n <label for=\"eventDataFile\">Event data file (URL or path)</label>\n <input\n type=\"text\"\n class=\"form-control\"\n id=\"eventDataFile\"\n placeholder=\"assets/files/event_data/atlaseventdump2.json\"\n [value]=\"urlOptions.file\"\n (input)=\"setOptionValue('file', $event.target.value)\"\n />\n </div>\n <div class=\"form-group\">\n <label for=\"eventDataType\">Event data type</label>\n <select\n class=\"form-control\"\n id=\"eventDataType\"\n (input)=\"setOptionValue('type', $event.target.value)\"\n >\n <option selected value=\"\">Select</option>\n <option value=\"jivexml\">JiveXML</option>\n <option value=\"json\">JSON</option>\n </select>\n </div>\n <div class=\"form-group\">\n <label for=\"configuration\">Configuration (URL or path)</label>\n <input\n type=\"text\"\n class=\"form-control\"\n id=\"configuration\"\n placeholder=\"assets/files/config/phoenix-config.json\"\n [value]=\"urlOptions.config\"\n (input)=\"setOptionValue('config', $event.target.value)\"\n />\n </div>\n <div class=\"form-group\">\n <mat-checkbox\n [checked]=\"urlOptions.hideWidgets\"\n (change)=\"setOptionValue('hideWidgets', $event.checked)\"\n >\n Hide all widgets\n </mat-checkbox>\n </div>\n\n <h5>Share</h5>\n <div class=\"share-box my-2\">\n <span>{{ shareLink.value }}</span>\n <button\n class=\"share-box-copy\"\n (click)=\"copyText(shareLink.value, $event.target)\"\n >\n COPY\n </button>\n </div>\n <h5>Embed</h5>\n <div class=\"share-box my-2\">\n <span>{{ embedLink }}</span>\n <button\n class=\"share-box-copy\"\n (click)=\"copyText(embedLink, $event.target)\"\n >\n COPY\n </button>\n </div>\n <h5>QR Code</h5>\n <div class=\"qrcode d-flex justify-content-center\">\n <canvas #qrcodeCanvas></canvas>\n </div>\n </div>\n <div mat-dialog-actions>\n <button mat-button (click)=\"onClose()\" cdkFocusInitial>Close</button>\n </div>\n</div>\n", styles: [".share-box{width:30rem;max-width:100%;position:relative;background:var(--phoenix-background-color-tertiary);border:1px solid var(--phoenix-border);border-radius:.5rem;padding:1.25rem;word-wrap:break-word}.share-box .share-box-copy{position:absolute;top:-1px;right:-1px;background:transparent;color:inherit;cursor:pointer;padding:.25rem .5rem;font-size:.75rem;border:1px solid var(--phoenix-border);border-radius:.5rem}.share-box .share-box-copy:hover{background:var(--phoenix-border)}\n"] }]
@@ -2675,21 +2821,21 @@ class UiMenuComponent {
2675
2821
  }
2676
2822
  }
2677
2823
  UiMenuComponent.ɵfac = function UiMenuComponent_Factory(t) { return new (t || UiMenuComponent)(); };
2678
- 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) { if (rf & 1) {
2824
+ 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) {
2679
2825
  i0.ɵɵprojectionDef();
2680
2826
  i0.ɵɵelementStart(0, "app-ui-menu-wrapper");
2681
- 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");
2682
- i0.ɵɵprojection(20);
2827
+ 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");
2828
+ i0.ɵɵprojection(21);
2683
2829
  i0.ɵɵelementEnd();
2684
2830
  } if (rf & 2) {
2685
2831
  i0.ɵɵadvance(12);
2686
2832
  i0.ɵɵproperty("animationPresets", ctx.animationPresets);
2687
- i0.ɵɵadvance(6);
2833
+ i0.ɵɵadvance(7);
2688
2834
  i0.ɵɵproperty("eventDataImportOptions", ctx.eventDataImportOptions);
2689
- } }, dependencies: [UiMenuWrapperComponent, CollectionsInfoComponent, IoOptionsComponent, OverlayViewComponent, ObjectSelectionComponent, EventSelectorComponent, ObjectClippingComponent, DarkThemeComponent, AutoRotateComponent, ViewOptionsComponent, InfoPanelComponent, MainViewToggleComponent, ZoomControlsComponent, AnimateCameraComponent, AnimateEventComponent, VrToggleComponent, ArToggleComponent, SSModeComponent, PerformanceToggleComponent, ShareLinkComponent] });
2835
+ } }, dependencies: [UiMenuWrapperComponent, CollectionsInfoComponent, IoOptionsComponent, OverlayViewComponent, ObjectSelectionComponent, EventSelectorComponent, ObjectClippingComponent, DarkThemeComponent, AutoRotateComponent, ViewOptionsComponent, InfoPanelComponent, MainViewToggleComponent, ZoomControlsComponent, AnimateCameraComponent, AnimateEventComponent, VrToggleComponent, ArToggleComponent, SSModeComponent, MakePictureComponent, PerformanceToggleComponent, ShareLinkComponent] });
2690
2836
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UiMenuComponent, [{
2691
2837
  type: Component,
2692
- 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" }]
2838
+ 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" }]
2693
2839
  }], null, { eventDataImportOptions: [{
2694
2840
  type: Input
2695
2841
  }], animationPresets: [{
@@ -3149,7 +3295,10 @@ GlobalErrorHandler.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: Globa
3149
3295
 
3150
3296
  class ExperimentLinkComponent {
3151
3297
  ngOnInit() {
3152
- this.experimentLink = window.location.href.split('?')[0];
3298
+ // we just want to remove the "&embed=true" instruction here.
3299
+ const url = new URL(window.location.href);
3300
+ url.searchParams.delete('embed');
3301
+ this.experimentLink = url.toString();
3153
3302
  }
3154
3303
  goToExperiment() {
3155
3304
  window.open(this.experimentLink, '_blank');
@@ -3214,6 +3363,7 @@ const PHOENIX_COMPONENTS = [
3214
3363
  VrToggleComponent,
3215
3364
  ArToggleComponent,
3216
3365
  SSModeComponent,
3366
+ MakePictureComponent,
3217
3367
  PerformanceToggleComponent,
3218
3368
  LoaderComponent,
3219
3369
  ShareLinkComponent,
@@ -3244,7 +3394,9 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
3244
3394
  MatButtonModule,
3245
3395
  MatTooltipModule,
3246
3396
  OverlayModule,
3397
+ FormsModule,
3247
3398
  MatMenuModule,
3399
+ MatRadioModule,
3248
3400
  MatSliderModule,
3249
3401
  MatSlideToggleModule,
3250
3402
  MatCheckboxModule,
@@ -3264,7 +3416,9 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
3264
3416
  MatButtonModule,
3265
3417
  MatTooltipModule,
3266
3418
  OverlayModule,
3419
+ FormsModule,
3267
3420
  MatMenuModule,
3421
+ MatRadioModule,
3268
3422
  MatSliderModule,
3269
3423
  MatSlideToggleModule,
3270
3424
  MatCheckboxModule,
@@ -3327,6 +3481,7 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
3327
3481
  VrToggleComponent,
3328
3482
  ArToggleComponent,
3329
3483
  SSModeComponent,
3484
+ MakePictureComponent,
3330
3485
  PerformanceToggleComponent,
3331
3486
  LoaderComponent,
3332
3487
  ShareLinkComponent,
@@ -3344,7 +3499,9 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
3344
3499
  MatButtonModule,
3345
3500
  MatTooltipModule,
3346
3501
  OverlayModule,
3502
+ FormsModule,
3347
3503
  MatMenuModule,
3504
+ MatRadioModule,
3348
3505
  MatSliderModule,
3349
3506
  MatSlideToggleModule,
3350
3507
  MatCheckboxModule,
@@ -3385,6 +3542,7 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
3385
3542
  VrToggleComponent,
3386
3543
  ArToggleComponent,
3387
3544
  SSModeComponent,
3545
+ MakePictureComponent,
3388
3546
  PerformanceToggleComponent,
3389
3547
  LoaderComponent,
3390
3548
  ShareLinkComponent,
@@ -3401,5 +3559,5 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
3401
3559
  * Generated bundle index. Do not edit.
3402
3560
  */
3403
3561
 
3404
- 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 };
3562
+ 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 };
3405
3563
  //# sourceMappingURL=phoenix-ui-components.mjs.map