npm - phoenix-ui-components - Versions diffs - 2.8.0 → 2.11.0 - Mend

phoenix-ui-components 2.8.0 → 2.11.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 (71) hide show

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, Input, Output, ViewEncapsulation, ViewChild, Injectable, Pipe, ViewChildren, Inject, NgModule } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewEncapsulation, ViewChild, Injectable, Pipe, ViewChildren, Inject, ErrorHandler, NgModule } from '@angular/core';
 import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1$1 from '@angular/material/slider';
@@ -14,7 +14,7 @@ import * as i3$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i5 from '@rp3e11/ngx-slider';
 import { NgxSliderModule } from '@rp3e11/ngx-slider';
-import { EventDisplay, SceneManager, PrettySymbols, JiveXMLLoader, ScriptLoader, CMSLoader, VRManager, XRSessionType, ARManager, phoenixURLOptions, ActiveVariable } from 'phoenix-event-display';
+import { EventDisplay, SceneManager, PrettySymbols, JiveXMLLoader, CMSLoader, VRManager, XRSessionType, ARManager, phoenixURLOptions, ActiveVariable } from 'phoenix-event-display';
 import * as i2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i3$2 from '@angular/material/tooltip';
@@ -43,9 +43,9 @@ class NavComponent {
     constructor() { }
     ngOnInit() { }
 }
-NavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: NavComponent, selector: "app-nav", ngImport: i0, template: "<a id=\"mainLogo\" class=\"main-logo fixed-top p-2 mx-auto mt-2\" routerLink=\"/\">\n  <img src=\"assets/images/logo-text.svg\" />\n</a>\n", styles: [".main-logo{width:140px;z-index:9999}.main-logo img{transition:all .5s}.main-logo:hover img{filter:drop-shadow(0px 0px 10px var(--phoenix-text-color));transition:all .5s}\n"], directives: [{ type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NavComponent, decorators: [{
+NavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: NavComponent, selector: "app-nav", ngImport: i0, template: "<a id=\"mainLogo\" class=\"main-logo fixed-top p-2 mx-auto mt-2\" routerLink=\"/\">\n  <img src=\"assets/images/logo-text.svg\" />\n</a>\n", styles: [".main-logo{width:140px;z-index:9999}.main-logo img{transition:all .5s}.main-logo:hover img{filter:drop-shadow(0px 0px 10px var(--phoenix-text-color));transition:all .5s}\n"], directives: [{ type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: NavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-nav', template: "<a id=\"mainLogo\" class=\"main-logo fixed-top p-2 mx-auto mt-2\" routerLink=\"/\">\n  <img src=\"assets/images/logo-text.svg\" />\n</a>\n", styles: [".main-logo{width:140px;z-index:9999}.main-logo img{transition:all .5s}.main-logo:hover img{filter:drop-shadow(0px 0px 10px var(--phoenix-text-color));transition:all .5s}\n"] }]
         }], ctorParameters: function () { return []; } });
@@ -65,9 +65,9 @@ class ConfigSliderComponent {
         }
     }
 }
-ConfigSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ConfigSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ConfigSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ConfigSliderComponent, selector: "app-config-slider", inputs: { value: "value", min: "min", max: "max", step: "step", allowCustomValue: "allowCustomValue" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"d-flex flex-row align-items-center\">\n  <mat-slider\n    #configSlider\n    class=\"mx-2\"\n    [value]=\"value\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    thumbLabel\n    (click)=\"$event.stopPropagation()\"\n    (input)=\"onValueChange($event.value)\"\n  >\n  </mat-slider>\n  <input\n    #configSliderInput\n    *ngIf=\"allowCustomValue\"\n    class=\"config-slider-input\"\n    type=\"number\"\n    [value]=\"value\"\n    (input)=\"onValueChange($event.target.value)\"\n  />\n</div>\n", styles: [".config-slider-input{background:transparent;color:var(--phoenix-text-color);border:none;border-bottom:1px solid var(--phoenix-text-color);width:25%;-moz-appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}\n"], components: [{ type: i1$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ConfigSliderComponent, decorators: [{
+ConfigSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ConfigSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ConfigSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ConfigSliderComponent, selector: "app-config-slider", inputs: { value: "value", min: "min", max: "max", step: "step", allowCustomValue: "allowCustomValue" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"d-flex flex-row align-items-center\">\n  <mat-slider\n    #configSlider\n    class=\"mx-2\"\n    [value]=\"value\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    thumbLabel\n    (click)=\"$event.stopPropagation()\"\n    (input)=\"onValueChange($event.value)\"\n  >\n  </mat-slider>\n  <input\n    #configSliderInput\n    *ngIf=\"allowCustomValue\"\n    class=\"config-slider-input\"\n    type=\"number\"\n    [value]=\"value\"\n    (input)=\"onValueChange($event.target.value)\"\n  />\n</div>\n", styles: [".config-slider-input{background:transparent;color:var(--phoenix-text-color);border:none;border-bottom:1px solid var(--phoenix-text-color);width:25%;-moz-appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}\n"], components: [{ type: i1$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ConfigSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-config-slider', template: "<div class=\"d-flex flex-row align-items-center\">\n  <mat-slider\n    #configSlider\n    class=\"mx-2\"\n    [value]=\"value\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    thumbLabel\n    (click)=\"$event.stopPropagation()\"\n    (input)=\"onValueChange($event.value)\"\n  >\n  </mat-slider>\n  <input\n    #configSliderInput\n    *ngIf=\"allowCustomValue\"\n    class=\"config-slider-input\"\n    type=\"number\"\n    [value]=\"value\"\n    (input)=\"onValueChange($event.target.value)\"\n  />\n</div>\n", styles: [".config-slider-input{background:transparent;color:var(--phoenix-text-color);border:none;border-bottom:1px solid var(--phoenix-text-color);width:25%;-moz-appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}\n"] }]
         }], propDecorators: { value: [{
@@ -100,11 +100,11 @@ class PhoenixMenuItemComponent {
         return configs;
     }
 }
-PhoenixMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: PhoenixMenuItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PhoenixMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: PhoenixMenuItemComponent, selector: "app-phoenix-menu-item", inputs: { currentNode: "currentNode" }, viewQueries: [{ propertyName: "phoenixMenuItem", first: true, predicate: ["phoenixMenuItem"], descendants: true }], ngImport: i0, 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              <ngx-slider\n                *ngSwitchCase=\"'rangeSlider'\"\n                class=\"range-slider\"\n                [value]=\"config.value ? config.value : config.min\"\n                [highValue]=\"config.highValue ? config.highValue : config.max\"\n                (userChange)=\"\n                  config.onChange($event);\n                  config.value = $event.value;\n                  config.highValue = $event.highValue\n                \"\n                [options]=\"{\n                  floor: config.min,\n                  ceil: config.max,\n                  step: config.step,\n                  animate: false\n                }\"\n              ></ngx-slider>\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    >\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.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"], components: [{ type: i1$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ConfigSliderComponent, selector: "app-config-slider", inputs: ["value", "min", "max", "step", "allowCustomValue"], outputs: ["onChange"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }, { type: PhoenixMenuItemComponent, selector: "app-phoenix-menu-item", inputs: ["currentNode"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: PhoenixMenuItemComponent, decorators: [{
+PhoenixMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PhoenixMenuItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PhoenixMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PhoenixMenuItemComponent, selector: "app-phoenix-menu-item", inputs: { currentNode: "currentNode" }, viewQueries: [{ propertyName: "phoenixMenuItem", first: true, predicate: ["phoenixMenuItem"], descendants: true }], ngImport: i0, 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"], components: [{ type: i1$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ConfigSliderComponent, selector: "app-config-slider", inputs: ["value", "min", "max", "step", "allowCustomValue"], outputs: ["onChange"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }, { type: PhoenixMenuItemComponent, selector: "app-phoenix-menu-item", inputs: ["currentNode"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PhoenixMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-phoenix-menu-item', encapsulation: ViewEncapsulation.None, template: "<div class=\"phoenix-menu-item\" #phoenixMenuItem>\n  <div class=\"phoenix-menu-item-left align-items-center\">\n    <!-- If the item has some toggle function -->\n    <ng-container *ngIf=\"currentNode.onToggle; else nodeName\">\n      <mat-slide-toggle\n        [checked]=\"currentNode.toggleState\"\n        (change)=\"currentNode.toggleSelfAndDescendants($event.checked)\"\n      >\n        <ng-container *ngTemplateOutlet=\"nodeName\"></ng-container>\n      </mat-slide-toggle>\n    </ng-container>\n    <!-- If the item has no toggle function -->\n    <ng-template #nodeName>\n      <span class=\"d-flex w-100 align-items-center\">\n        <span *ngIf=\"currentNode.icon\" class=\"icon-wrapper item-icon\">\n          <svg>\n            <use\n              attr.href=\"assets/icons/{{ currentNode.icon }}.svg#{{\n                currentNode.icon\n              }}\"\n            ></use>\n          </svg>\n        </span>\n        <span class=\"item-name\" [title]=\"currentNode.name\">{{\n          currentNode.name\n        }}</span>\n      </span>\n    </ng-template>\n  </div>\n  <div class=\"phoenix-menu-item-right\">\n    <div *ngIf=\"currentNode.configs.length > 0\">\n      <button\n        class=\"icon-wrapper icon-button btn-blank item-settings\"\n        (click)=\"\n          calculateConfigTop();\n          currentNode.configActive = !currentNode.configActive\n        \"\n      >\n        <svg>\n          <use href=\"assets/icons/gear.svg#gear\"></use>\n        </svg>\n      </button>\n      <div\n        class=\"item-config-backdrop\"\n        *ngIf=\"currentNode.configActive\"\n        (click)=\"currentNode.configActive = false\"\n      ></div>\n      <div\n        class=\"item-config\"\n        [hidden]=\"!currentNode.configActive\"\n        [ngStyle]=\"{ 'top.px': configTop }\"\n      >\n        <ng-container\n          *ngFor=\"let config of castConfigsToAny(currentNode.configs)\"\n          [ngSwitch]=\"config.type\"\n        >\n          <!-- Config types -->\n          <label class=\"item-config-single\" *ngIf=\"!config.hidden\">\n            <span\n              class=\"item-config-label\"\n              *ngIf=\"config.type !== 'button'\"\n              [ngClass]=\"{ 'font-weight-bold w-100': config.type === 'label' }\"\n            >\n              {{ config.label }}\n            </span>\n            <div\n              class=\"item-config-data\"\n              [ngClass]=\"{ 'p-0': config.type === 'button' }\"\n              *ngIf=\"config.type !== 'label'\"\n            >\n              <mat-checkbox\n                *ngSwitchCase=\"'checkbox'\"\n                [checked]=\"config.isChecked\"\n                (change)=\"\n                  config.onChange($event.checked);\n                  config.isChecked = $event.checked\n                \"\n              ></mat-checkbox>\n\n              <app-config-slider\n                *ngSwitchCase=\"'slider'\"\n                [value]=\"config.value\"\n                (onChange)=\"config.onChange($event); config.value = $event\"\n                [min]=\"config.min\"\n                [max]=\"config.max\"\n                [step]=\"config.step\"\n                [allowCustomValue]=\"config.allowCustomValue\"\n              >\n              </app-config-slider>\n\n              <button\n                *ngSwitchCase=\"'button'\"\n                class=\"w-100\"\n                (click)=\"config.onClick()\"\n                mat-button\n                mat-stroked-button\n              >\n                {{ config.label }}\n              </button>\n\n              <input\n                *ngSwitchCase=\"'color'\"\n                type=\"color\"\n                [value]=\"config.color\"\n                (input)=\"\n                  config.onChange($event.target.value);\n                  config.color = $event.target.value\n                \"\n              />\n\n              <ngx-slider\n                *ngSwitchCase=\"'rangeSlider'\"\n                class=\"range-slider\"\n                [value]=\"config.value ? config.value : config.min\"\n                [highValue]=\"config.highValue ? config.highValue : config.max\"\n                (userChange)=\"\n                  config.onChange($event);\n                  config.value = $event.value;\n                  config.highValue = $event.highValue\n                \"\n                [options]=\"{\n                  floor: config.min,\n                  ceil: config.max,\n                  step: config.step,\n                  animate: false\n                }\"\n              ></ngx-slider>\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    >\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.ngx-slider .ngx-slider-bar{background:var(--phoenix-text-color-secondary);height:.2rem}.range-slider.ngx-slider .ngx-slider-selection{background:var(--phoenix-accent)}.range-slider.ngx-slider .ngx-slider-pointer{width:1rem;height:1rem;top:-.45rem;bottom:0;background-color:var(--phoenix-accent)}.range-slider.ngx-slider .ngx-slider-pointer:after{display:none}.range-slider.ngx-slider .ngx-slider-bubble{color:var(--phoenix-text-color);font-size:.8rem}.range-slider.ngx-slider .ngx-slider-bubble.ngx-slider-limit{color:var(--phoenix-text-color-secondary)}\n"] }]
+            args: [{ selector: 'app-phoenix-menu-item', encapsulation: ViewEncapsulation.None, template: "<div class=\"phoenix-menu-item\" #phoenixMenuItem>\n  <div class=\"phoenix-menu-item-left align-items-center\">\n    <!-- If the item has some toggle function -->\n    <ng-container *ngIf=\"currentNode.onToggle; else nodeName\">\n      <mat-slide-toggle\n        [checked]=\"currentNode.toggleState\"\n        (change)=\"currentNode.toggleSelfAndDescendants($event.checked)\"\n      >\n        <ng-container *ngTemplateOutlet=\"nodeName\"></ng-container>\n      </mat-slide-toggle>\n    </ng-container>\n    <!-- If the item has no toggle function -->\n    <ng-template #nodeName>\n      <span class=\"d-flex w-100 align-items-center\">\n        <span *ngIf=\"currentNode.icon\" class=\"icon-wrapper item-icon\">\n          <svg>\n            <use\n              attr.href=\"assets/icons/{{ currentNode.icon }}.svg#{{\n                currentNode.icon\n              }}\"\n            ></use>\n          </svg>\n        </span>\n        <span class=\"item-name\" [title]=\"currentNode.name\">{{\n          currentNode.name\n        }}</span>\n      </span>\n    </ng-template>\n  </div>\n  <div class=\"phoenix-menu-item-right\">\n    <div *ngIf=\"currentNode.configs.length > 0\">\n      <button\n        class=\"icon-wrapper icon-button btn-blank item-settings\"\n        (click)=\"\n          calculateConfigTop();\n          currentNode.configActive = !currentNode.configActive\n        \"\n      >\n        <svg>\n          <use href=\"assets/icons/gear.svg#gear\"></use>\n        </svg>\n      </button>\n      <div\n        class=\"item-config-backdrop\"\n        *ngIf=\"currentNode.configActive\"\n        (click)=\"currentNode.configActive = false\"\n      ></div>\n      <div\n        class=\"item-config\"\n        [hidden]=\"!currentNode.configActive\"\n        [ngStyle]=\"{ 'top.px': configTop }\"\n      >\n        <ng-container\n          *ngFor=\"let config of castConfigsToAny(currentNode.configs)\"\n          [ngSwitch]=\"config.type\"\n        >\n          <!-- Config types -->\n          <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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { currentNode: [{
                 type: Input
             }], phoenixMenuItem: [{
@@ -114,9 +114,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
 class PhoenixMenuComponent {
 }
-PhoenixMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: PhoenixMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PhoenixMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: PhoenixMenuComponent, selector: "app-phoenix-menu", inputs: { rootNode: "rootNode" }, ngImport: i0, template: "<div id=\"phoenixMenu\">\n  <app-phoenix-menu-item [currentNode]=\"rootNode\"></app-phoenix-menu-item>\n</div>\n", styles: [":host{width:15rem;max-width:45%;position:absolute;top:5rem;right:1rem}#phoenixMenu{background:var(--phoenix-background-color-secondary);max-height:75vh;overflow-y:auto;box-shadow:var(--phoenix-box-shadow);z-index:100}@media screen and (max-width: 768px){#phoenixMenu{top:4rem}}\n"], components: [{ type: PhoenixMenuItemComponent, selector: "app-phoenix-menu-item", inputs: ["currentNode"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: PhoenixMenuComponent, decorators: [{
+PhoenixMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PhoenixMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PhoenixMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PhoenixMenuComponent, selector: "app-phoenix-menu", inputs: { rootNode: "rootNode" }, ngImport: i0, template: "<div id=\"phoenixMenu\">\n  <app-phoenix-menu-item [currentNode]=\"rootNode\"></app-phoenix-menu-item>\n</div>\n", styles: [":host{width:15rem;max-width:45%;position:absolute;top:5rem;right:1rem}#phoenixMenu{background:var(--phoenix-background-color-secondary);max-height:75vh;overflow-y:auto;box-shadow:var(--phoenix-box-shadow);z-index:100}@media screen and (max-width: 768px){#phoenixMenu{top:4rem}}\n"], components: [{ type: PhoenixMenuItemComponent, selector: "app-phoenix-menu-item", inputs: ["currentNode"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PhoenixMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-phoenix-menu', template: "<div id=\"phoenixMenu\">\n  <app-phoenix-menu-item [currentNode]=\"rootNode\"></app-phoenix-menu-item>\n</div>\n", styles: [":host{width:15rem;max-width:45%;position:absolute;top:5rem;right:1rem}#phoenixMenu{background:var(--phoenix-background-color-secondary);max-height:75vh;overflow-y:auto;box-shadow:var(--phoenix-box-shadow);z-index:100}@media screen and (max-width: 768px){#phoenixMenu{top:4rem}}\n"] }]
         }], propDecorators: { rootNode: [{
@@ -134,9 +134,9 @@ class EventDisplayService extends EventDisplay {
         super();
     }
 }
-EventDisplayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: EventDisplayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-EventDisplayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: EventDisplayService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: EventDisplayService, decorators: [{
+EventDisplayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EventDisplayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+EventDisplayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EventDisplayService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EventDisplayService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -148,9 +148,9 @@ class MenuToggleComponent {
         this.disabled = false;
     }
 }
-MenuToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MenuToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MenuToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: MenuToggleComponent, selector: "app-menu-toggle", inputs: { icon: "icon", active: "active", tooltip: "tooltip", disabled: "disabled" }, ngImport: i0, template: "<button\n  class=\"menu-toggle\"\n  [ngClass]=\"{ disabled: disabled }\"\n  [matTooltip]=\"tooltip\"\n  matTooltipPosition=\"above\"\n  matTooltipTouchGestures=\"off\"\n>\n  <svg class=\"menu-toggle-icon\" [ngClass]=\"{ 'active-icon': active }\">\n    <use attr.href=\"assets/icons/{{ icon }}.svg#{{ icon }}\"></use>\n  </svg>\n</button>\n", styles: [":host{display:flex;margin:0 .6rem}:host .menu-toggle{display:flex;background:unset;border:none;height:2.5rem;width:2.5rem;min-height:2.5rem;min-width:2.5rem;padding:.65rem;cursor:pointer;align-self:center;transition:all .4s}:host .menu-toggle-icon{width:100%;height:100%}:host .menu-toggle-icon.active-icon{--phoenix-options-icon-path: #00bcd4}:host .menu-toggle:hover{background-color:var(--phoenix-options-icon-bg);border-radius:40%;transition:all .4s}:host .menu-toggle.disabled{cursor:not-allowed;opacity:.4}\n"], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MenuToggleComponent, decorators: [{
+MenuToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MenuToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MenuToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: MenuToggleComponent, selector: "app-menu-toggle", inputs: { icon: "icon", active: "active", tooltip: "tooltip", disabled: "disabled" }, ngImport: i0, template: "<button\n  class=\"menu-toggle\"\n  [ngClass]=\"{ disabled: disabled }\"\n  [matTooltip]=\"tooltip\"\n  matTooltipPosition=\"above\"\n  matTooltipTouchGestures=\"off\"\n>\n  <svg class=\"menu-toggle-icon\" [ngClass]=\"{ 'active-icon': active }\">\n    <use attr.href=\"assets/icons/{{ icon }}.svg#{{ icon }}\"></use>\n  </svg>\n</button>\n", styles: [":host{display:flex;margin:0 .6rem}:host .menu-toggle{display:flex;background:unset;border:none;height:2.5rem;width:2.5rem;min-height:2.5rem;min-width:2.5rem;padding:.65rem;cursor:pointer;align-self:center;transition:all .4s}:host .menu-toggle-icon{width:100%;height:100%}:host .menu-toggle-icon.active-icon{--phoenix-options-icon-path: #00bcd4}:host .menu-toggle:hover{background-color:var(--phoenix-options-icon-bg);border-radius:40%;transition:all .4s}:host .menu-toggle.disabled{cursor:not-allowed;opacity:.4}\n"], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MenuToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-menu-toggle', template: "<button\n  class=\"menu-toggle\"\n  [ngClass]=\"{ disabled: disabled }\"\n  [matTooltip]=\"tooltip\"\n  matTooltipPosition=\"above\"\n  matTooltipTouchGestures=\"off\"\n>\n  <svg class=\"menu-toggle-icon\" [ngClass]=\"{ 'active-icon': active }\">\n    <use attr.href=\"assets/icons/{{ icon }}.svg#{{ icon }}\"></use>\n  </svg>\n</button>\n", styles: [":host{display:flex;margin:0 .6rem}:host .menu-toggle{display:flex;background:unset;border:none;height:2.5rem;width:2.5rem;min-height:2.5rem;min-width:2.5rem;padding:.65rem;cursor:pointer;align-self:center;transition:all .4s}:host .menu-toggle-icon{width:100%;height:100%}:host .menu-toggle-icon.active-icon{--phoenix-options-icon-path: #00bcd4}:host .menu-toggle:hover{background-color:var(--phoenix-options-icon-bg);border-radius:40%;transition:all .4s}:host .menu-toggle.disabled{cursor:not-allowed;opacity:.4}\n"] }]
         }], propDecorators: { icon: [{
@@ -217,15 +217,14 @@ class AnimateCameraComponent {
         }
     }
     setDetectorOpacity(opacity) {
-        this.eventDisplay
-            .getThreeManager()
-            .getSceneManager()
-            .setGeometryOpacity(SceneManager.GEOMETRIES_ID, opacity);
+        const sceneManager = this.eventDisplay.getThreeManager().getSceneManager();
+        const geometriesGroup = sceneManager.getObjectByName(SceneManager.GEOMETRIES_ID);
+        sceneManager.setGeometryOpacity(geometriesGroup, opacity);
     }
 }
-AnimateCameraComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AnimateCameraComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-AnimateCameraComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: AnimateCameraComponent, selector: "app-animate-camera", inputs: { animationPresets: "animationPresets" }, ngImport: i0, template: "<mat-menu #animationPresets>\n  <button\n    mat-menu-item\n    *ngFor=\"let preset of animationPresetsKeys\"\n    (click)=\"animatePreset(preset)\"\n  >\n    {{ preset }}\n  </button>\n  <button mat-menu-item (click)=\"animateCamera()\">Animate camera</button>\n</mat-menu>\n\n<app-menu-toggle\n  [matMenuTriggerFor]=\"animationPresets\"\n  tooltip=\"Preset animations\"\n  icon=\"animate-camera\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AnimateCameraComponent, decorators: [{
+AnimateCameraComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AnimateCameraComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+AnimateCameraComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AnimateCameraComponent, selector: "app-animate-camera", inputs: { animationPresets: "animationPresets" }, ngImport: i0, template: "<mat-menu #animationPresets>\n  <button\n    mat-menu-item\n    *ngFor=\"let preset of animationPresetsKeys\"\n    (click)=\"animatePreset(preset)\"\n  >\n    {{ preset }}\n  </button>\n  <button mat-menu-item (click)=\"animateCamera()\">Animate camera</button>\n</mat-menu>\n\n<app-menu-toggle\n  [matMenuTriggerFor]=\"animationPresets\"\n  tooltip=\"Preset animations\"\n  icon=\"animate-camera\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AnimateCameraComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-animate-camera', template: "<mat-menu #animationPresets>\n  <button\n    mat-menu-item\n    *ngFor=\"let preset of animationPresetsKeys\"\n    (click)=\"animatePreset(preset)\"\n  >\n    {{ preset }}\n  </button>\n  <button mat-menu-item (click)=\"animateCamera()\">Animate camera</button>\n</mat-menu>\n\n<app-menu-toggle\n  [matMenuTriggerFor]=\"animationPresets\"\n  tooltip=\"Preset animations\"\n  icon=\"animate-camera\"\n>\n</app-menu-toggle>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }]; }, propDecorators: { animationPresets: [{
@@ -246,9 +245,9 @@ class AnimateEventComponent {
         }
     }
 }
-AnimateEventComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AnimateEventComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-AnimateEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: AnimateEventComponent, selector: "app-animate-event", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Animate event\"\n  icon=\"event-folder\"\n  [active]=\"isAnimating\"\n  (click)=\"toggleAnimateEvent()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AnimateEventComponent, decorators: [{
+AnimateEventComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AnimateEventComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+AnimateEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AnimateEventComponent, selector: "app-animate-event", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Animate event\"\n  icon=\"event-folder\"\n  [active]=\"isAnimating\"\n  (click)=\"toggleAnimateEvent()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AnimateEventComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-animate-event', template: "<app-menu-toggle\n  tooltip=\"Animate event\"\n  icon=\"event-folder\"\n  [active]=\"isAnimating\"\n  (click)=\"toggleAnimateEvent()\"\n>\n</app-menu-toggle>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }]; } });
@@ -263,9 +262,9 @@ class AutoRotateComponent {
         this.eventDisplay.getUIManager().setAutoRotate(this.autoRotate);
     }
 }
-AutoRotateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AutoRotateComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-AutoRotateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: AutoRotateComponent, selector: "app-auto-rotate", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Auto rotate\"\n  icon=\"rotate\"\n  [active]=\"autoRotate\"\n  (click)=\"toggleAutoRotate()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AutoRotateComponent, decorators: [{
+AutoRotateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AutoRotateComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+AutoRotateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AutoRotateComponent, selector: "app-auto-rotate", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Auto rotate\"\n  icon=\"rotate\"\n  [active]=\"autoRotate\"\n  (click)=\"toggleAutoRotate()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AutoRotateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-auto-rotate', template: "<app-menu-toggle\n  tooltip=\"Auto rotate\"\n  icon=\"rotate\"\n  [active]=\"autoRotate\"\n  (click)=\"toggleAutoRotate()\"\n>\n</app-menu-toggle>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }]; } });
@@ -340,9 +339,9 @@ class OverlayComponent {
         this.resizeHandleCorner.nativeElement.style.transform = `translate3d(${translateX}px, ${translateY}px, 0)`;
     }
 }
-OverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: OverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: OverlayComponent, selector: "app-overlay", inputs: { overlayTitle: "overlayTitle", active: "active", icon: "icon", resizable: "resizable", transparentBody: "transparentBody" }, viewQueries: [{ propertyName: "overlayCard", first: true, predicate: ["overlayCard"], descendants: true }, { propertyName: "resizeHandleCorner", first: true, predicate: ["resizeHandleCorner"], descendants: true }], ngImport: i0, template: "<div\n  #overlayCard\n  class=\"overlay-card card\"\n  [hidden]=\"!active\"\n  cdkDrag\n  cdkDragBoundary=\"body\"\n>\n  <div\n    class=\"card-header d-flex justify-content-between\"\n    [ngClass]=\"{ 'with-body': showBody }\"\n    cdkDragHandle\n    *ngIf=\"overlayTitle\"\n  >\n    <div class=\"align-self-center card-icon\" *ngIf=\"icon\">\n      <svg>\n        <use attr.href=\"assets/icons/{{ icon }}.svg#{{ icon }}\"></use>\n      </svg>\n    </div>\n    <h5 class=\"align-self-center m-0 px-2\">{{ overlayTitle }}</h5>\n    <button\n      class=\"align-self-center card-icon btn-blank expandCollapse\"\n      matTooltip=\"Expand / Collapse\"\n      matTooltipPosition=\"right\"\n      [ngClass]=\"{ expand: showBody }\"\n      (click)=\"showBody = !showBody\"\n    >\n      <svg>\n        <use href=\"assets/icons/expand.svg#expand\"></use>\n      </svg>\n    </button>\n  </div>\n  <div\n    class=\"overlay-card-content\"\n    *ngIf=\"showBody\"\n    [ngClass]=\"{ 'transparent-bg': transparentBody }\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <!-- Making the overlay resizable -->\n  <span\n    #resizeHandleCorner\n    class=\"resize-handle corner\"\n    *ngIf=\"resizable\"\n    [hidden]=\"!showBody\"\n    cdkDrag\n    (cdkDragMoved)=\"onResize()\"\n  ></span>\n</div>\n", styles: [".overlay-card.card{color:var(--phoenix-text-color);background:none;max-width:100vw;font-size:12px;min-width:300px;height:100%;max-height:70vh;box-shadow:none;border:none;position:relative;z-index:200}.overlay-card.card .card-header{width:12rem;background:var(--phoenix-background-color-secondary);box-shadow:var(--phoenix-box-shadow);padding:.4rem .8rem;border-radius:10px;border:none;cursor:move;text-align:center;transition:all .2s}.overlay-card.card .card-header.with-body{border-bottom-left-radius:0;border-bottom-right-radius:0}.overlay-card.card .card-header .card-icon{display:flex;height:.7rem;width:.7rem}.overlay-card.card .card-header h5{font-size:.9rem}.overlay-card.card .card-header .expandCollapse{cursor:pointer;transition:all .2s}.overlay-card.card .card-header .expandCollapse.expand{transform:scaleY(-1)}.overlay-card.card .card-header .expandCollapse svg{width:100%;height:100%}.overlay-card.card .overlay-card-content{background:var(--phoenix-background-color-secondary);box-shadow:var(--phoenix-box-shadow);border-radius:0 10px 10px;overflow:auto;height:100%}.overlay-card.card .overlay-card-content.transparent-bg{background:none}.overlay-card.card .list-group{color:var(--phoenix-text-color-secondary);background:var(--phoenix-background-color-secondary);max-height:40vh;overflow:auto}.overlay-card.card .list-group .list-group-item{background-color:var(--phoenix-background-color-secondary);border-color:var(--phoenix-border)}.overlay-card.card .resize-handle{width:1rem;height:1rem;cursor:nwse-resize;position:absolute}.overlay-card.card .resize-handle.corner{border-right:.2rem solid var(--phoenix-text-color);border-bottom:.2rem solid var(--phoenix-text-color)}\n"], directives: [{ type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: OverlayComponent, decorators: [{
+OverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: OverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: OverlayComponent, selector: "app-overlay", inputs: { overlayTitle: "overlayTitle", active: "active", icon: "icon", resizable: "resizable", transparentBody: "transparentBody" }, viewQueries: [{ propertyName: "overlayCard", first: true, predicate: ["overlayCard"], descendants: true }, { propertyName: "resizeHandleCorner", first: true, predicate: ["resizeHandleCorner"], descendants: true }], ngImport: i0, template: "<div\n  #overlayCard\n  class=\"overlay-card card\"\n  [hidden]=\"!active\"\n  cdkDrag\n  cdkDragBoundary=\"body\"\n>\n  <div\n    class=\"card-header d-flex justify-content-between\"\n    [ngClass]=\"{ 'with-body': showBody }\"\n    cdkDragHandle\n    *ngIf=\"overlayTitle\"\n  >\n    <div class=\"align-self-center card-icon\" *ngIf=\"icon\">\n      <svg>\n        <use attr.href=\"assets/icons/{{ icon }}.svg#{{ icon }}\"></use>\n      </svg>\n    </div>\n    <h5 class=\"align-self-center m-0 px-2\">{{ overlayTitle }}</h5>\n    <button\n      class=\"align-self-center card-icon btn-blank expandCollapse\"\n      matTooltip=\"Expand / Collapse\"\n      matTooltipPosition=\"right\"\n      [ngClass]=\"{ expand: showBody }\"\n      (click)=\"showBody = !showBody\"\n    >\n      <svg>\n        <use href=\"assets/icons/expand.svg#expand\"></use>\n      </svg>\n    </button>\n  </div>\n  <div\n    class=\"overlay-card-content\"\n    *ngIf=\"showBody\"\n    [ngClass]=\"{ 'transparent-bg': transparentBody }\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <!-- Making the overlay resizable -->\n  <span\n    #resizeHandleCorner\n    class=\"resize-handle corner\"\n    *ngIf=\"resizable\"\n    [hidden]=\"!showBody\"\n    cdkDrag\n    (cdkDragMoved)=\"onResize()\"\n  ></span>\n</div>\n", styles: [".overlay-card.card{color:var(--phoenix-text-color);background:none;max-width:100vw;font-size:12px;min-width:300px;height:100%;max-height:70vh;box-shadow:none;border:none;position:relative;z-index:200}.overlay-card.card .card-header{width:12rem;background:var(--phoenix-background-color-secondary);box-shadow:var(--phoenix-box-shadow);padding:.4rem .8rem;border-radius:10px;border:none;cursor:move;text-align:center;transition:all .2s}.overlay-card.card .card-header.with-body{border-bottom-left-radius:0;border-bottom-right-radius:0}.overlay-card.card .card-header .card-icon{display:flex;height:.7rem;width:.7rem}.overlay-card.card .card-header h5{font-size:.9rem}.overlay-card.card .card-header .expandCollapse{cursor:pointer;transition:all .2s}.overlay-card.card .card-header .expandCollapse.expand{transform:scaleY(-1)}.overlay-card.card .card-header .expandCollapse svg{width:100%;height:100%}.overlay-card.card .overlay-card-content{background:var(--phoenix-background-color-secondary);box-shadow:var(--phoenix-box-shadow);border-radius:0 10px 10px;overflow:auto;height:100%}.overlay-card.card .overlay-card-content.transparent-bg{background:none}.overlay-card.card .list-group{color:var(--phoenix-text-color-secondary);background:var(--phoenix-background-color-secondary);max-height:40vh;overflow:auto}.overlay-card.card .list-group .list-group-item{background-color:var(--phoenix-background-color-secondary);border-color:var(--phoenix-border)}.overlay-card.card .resize-handle{width:1rem;height:1rem;cursor:nwse-resize;position:absolute}.overlay-card.card .resize-handle.corner{border-right:.2rem solid var(--phoenix-text-color);border-bottom:.2rem solid var(--phoenix-text-color)}\n"], directives: [{ type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: OverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-overlay', encapsulation: ViewEncapsulation.None, template: "<div\n  #overlayCard\n  class=\"overlay-card card\"\n  [hidden]=\"!active\"\n  cdkDrag\n  cdkDragBoundary=\"body\"\n>\n  <div\n    class=\"card-header d-flex justify-content-between\"\n    [ngClass]=\"{ 'with-body': showBody }\"\n    cdkDragHandle\n    *ngIf=\"overlayTitle\"\n  >\n    <div class=\"align-self-center card-icon\" *ngIf=\"icon\">\n      <svg>\n        <use attr.href=\"assets/icons/{{ icon }}.svg#{{ icon }}\"></use>\n      </svg>\n    </div>\n    <h5 class=\"align-self-center m-0 px-2\">{{ overlayTitle }}</h5>\n    <button\n      class=\"align-self-center card-icon btn-blank expandCollapse\"\n      matTooltip=\"Expand / Collapse\"\n      matTooltipPosition=\"right\"\n      [ngClass]=\"{ expand: showBody }\"\n      (click)=\"showBody = !showBody\"\n    >\n      <svg>\n        <use href=\"assets/icons/expand.svg#expand\"></use>\n      </svg>\n    </button>\n  </div>\n  <div\n    class=\"overlay-card-content\"\n    *ngIf=\"showBody\"\n    [ngClass]=\"{ 'transparent-bg': transparentBody }\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <!-- Making the overlay resizable -->\n  <span\n    #resizeHandleCorner\n    class=\"resize-handle corner\"\n    *ngIf=\"resizable\"\n    [hidden]=\"!showBody\"\n    cdkDrag\n    (cdkDragMoved)=\"onResize()\"\n  ></span>\n</div>\n", styles: [".overlay-card.card{color:var(--phoenix-text-color);background:none;max-width:100vw;font-size:12px;min-width:300px;height:100%;max-height:70vh;box-shadow:none;border:none;position:relative;z-index:200}.overlay-card.card .card-header{width:12rem;background:var(--phoenix-background-color-secondary);box-shadow:var(--phoenix-box-shadow);padding:.4rem .8rem;border-radius:10px;border:none;cursor:move;text-align:center;transition:all .2s}.overlay-card.card .card-header.with-body{border-bottom-left-radius:0;border-bottom-right-radius:0}.overlay-card.card .card-header .card-icon{display:flex;height:.7rem;width:.7rem}.overlay-card.card .card-header h5{font-size:.9rem}.overlay-card.card .card-header .expandCollapse{cursor:pointer;transition:all .2s}.overlay-card.card .card-header .expandCollapse.expand{transform:scaleY(-1)}.overlay-card.card .card-header .expandCollapse svg{width:100%;height:100%}.overlay-card.card .overlay-card-content{background:var(--phoenix-background-color-secondary);box-shadow:var(--phoenix-box-shadow);border-radius:0 10px 10px;overflow:auto;height:100%}.overlay-card.card .overlay-card-content.transparent-bg{background:none}.overlay-card.card .list-group{color:var(--phoenix-text-color-secondary);background:var(--phoenix-background-color-secondary);max-height:40vh;overflow:auto}.overlay-card.card .list-group .list-group-item{background-color:var(--phoenix-background-color-secondary);border-color:var(--phoenix-border)}.overlay-card.card .resize-handle{width:1rem;height:1rem;cursor:nwse-resize;position:absolute}.overlay-card.card .resize-handle.corner{border-right:.2rem solid var(--phoenix-text-color);border-bottom:.2rem solid var(--phoenix-text-color)}\n"] }]
         }], propDecorators: { overlayTitle: [{
@@ -426,9 +425,9 @@ class CollectionsInfoOverlayComponent {
             .getObjectByName(SceneManager.EVENT_DATA_ID);
     }
 }
-CollectionsInfoOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CollectionsInfoOverlayComponent, deps: [{ token: i0.ElementRef }, { token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-CollectionsInfoOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: CollectionsInfoOverlayComponent, selector: "app-collections-info-overlay", inputs: { showObjectsInfo: "showObjectsInfo" }, ngImport: i0, 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"], components: [{ type: OverlayComponent, selector: "app-overlay", inputs: ["overlayTitle", "active", "icon", "resizable", "transparentBody"] }, { type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CollectionsInfoOverlayComponent, decorators: [{
+CollectionsInfoOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CollectionsInfoOverlayComponent, deps: [{ token: i0.ElementRef }, { token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+CollectionsInfoOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CollectionsInfoOverlayComponent, selector: "app-collections-info-overlay", inputs: { showObjectsInfo: "showObjectsInfo" }, ngImport: i0, 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"], components: [{ type: OverlayComponent, selector: "app-overlay", inputs: ["overlayTitle", "active", "icon", "resizable", "transparentBody"] }, { type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CollectionsInfoOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-collections-info-overlay', template: "<!-- Show objects -->\n<app-overlay\n  overlayTitle=\"Collections Info\"\n  icon=\"info\"\n  [resizable]=\"true\"\n  [active]=\"showObjectsInfo\"\n>\n  <!-- Using ngIf to remove it from DOM since this panel requires heavy computing -->\n  <div *ngIf=\"showObjectsInfo\" class=\"collectionsInfo m-2\">\n    <div\n      class=\"collectionSelector mb-2 d-flex align-items-center\"\n      *ngIf=\"collections != null\"\n    >\n      <div class=\"d-flex align-items-center\">\n        <span>Choose a collection: </span>\n        <div class=\"eventSelector\">\n          <label for=\"event\">Event</label>\n          <select\n            id=\"collection\"\n            name=\"collection\"\n            (change)=\"changeCollection($event.target.value)\"\n          >\n            <option value=\"\" selected disabled hidden>Choose Collection</option>\n            <option *ngFor=\"let collection of collections\" [value]=\"collection\">\n              {{ collection }}\n            </option>\n          </select>\n        </div>\n        <mat-checkbox\n          *ngIf=\"showingCollection\"\n          (change)=\"toggleInvisible($event.checked)\"\n        >\n          Hide Invisible Objects\n        </mat-checkbox>\n      </div>\n    </div>\n\n    <div class=\"boxBody table-responsive\">\n      <table\n        id=\"collectionTable\"\n        class=\"table table-borderless table-sm\"\n        *ngIf=\"showingCollection\"\n      >\n        <thead>\n          <tr>\n            <th>No.</th>\n            <th>Selection</th>\n            <th>Label</th>\n            <th *ngFor=\"let column of collectionColumns\">\n              <div class=\"head-wrapper\">\n                <div>\n                  {{ getPrettySymbol(column) }}\n                </div>\n                <div class=\"sort-options\">\n                  <button\n                    class=\"icon-wrapper icon-button btn-blank up\"\n                    (click)=\"sort(column, 'dec')\"\n                  >\n                    <svg>\n                      <use href=\"assets/icons/expand.svg#expand\"></use>\n                    </svg>\n                  </button>\n                  <button\n                    class=\"icon-wrapper icon-button btn-blank\"\n                    (click)=\"sort(column, 'asc')\"\n                  >\n                    <svg>\n                      <use href=\"assets/icons/expand.svg#expand\"></use>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"let object of showingCollection; index as i\"\n            [attr.id]=\"object.uuid\"\n            [ngClass]=\"{\n              'active-object':\n                activeObject && activeObject.value === object.uuid,\n              'is-cut': object.isCut,\n              'd-none': object.isCut && hideInvisible\n            }\"\n          >\n            <td>#{{ i }}</td>\n            <td>\n              <div\n                *ngIf=\"object.uuid\"\n                class=\"row justify-content-center icon-wrapper\"\n              >\n                <button\n                  class=\"object-select btn-blank\"\n                  matTooltip=\"Move camera to object\"\n                  (click)=\"lookAtObject(object.uuid)\"\n                >\n                  <svg>\n                    <use href=\"assets/icons/views.svg#views\"></use>\n                  </svg>\n                </button>\n                <button\n                  class=\"object-select btn-blank\"\n                  matTooltip=\"Highlight object\"\n                  (click)=\"highlightObject(object.uuid)\"\n                >\n                  <svg>\n                    <use href=\"assets/icons/cursor.svg#cursor\"></use>\n                  </svg>\n                </button>\n              </div>\n            </td>\n            <td>\n              <div class=\"row m-0 add-label\">\n                <div class=\"col-10 p-0\">\n                  <input\n                    class=\"form-control form-control-sm\"\n                    type=\"text\"\n                    [id]=\"'label' + i\"\n                  />\n                </div>\n                <div class=\"col-2 p-0 pl-2 text-center icon-wrapper\">\n                  <button\n                    class=\"object-select btn-blank\"\n                    matTooltip=\"Add, update or remove object label\"\n                    (click)=\"addLabel(i, object.uuid)\"\n                  >\n                    <svg>\n                      <use href=\"assets/icons/update.svg#update\"></use>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </td>\n            <td *ngFor=\"let column of collectionColumns\">\n              {{ object[column] }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <p class=\"emptyBox\" *ngIf=\"!collections\">\n        Load event data to be able to display information about the collections\n        here.\n      </p>\n    </div>\n  </div>\n</app-overlay>\n", styles: [".collectionsInfo{height:95%}.collectionsInfo .collectionSelector{height:15%;min-height:2rem}.collectionsInfo .collectionSelector span{color:var(--phoenix-text-color-secondary);margin-right:1rem}.collectionsInfo .collectionSelector mat-checkbox{margin-left:1rem}.boxBody{height:85%;overflow:scroll}.boxBody p.emptyBox{max-width:21em}.boxBody .add-label{min-width:8rem}.boxBody .add-label input{padding:.1rem .3rem;font-size:.75rem}#collectionTable{position:relative;color:var(--phoenix-text-color-secondary)}#collectionTable thead tr th{position:sticky;top:0;z-index:100;background:var(--phoenix-background-color-secondary)}#collectionTable thead tr th .head-wrapper{display:flex;align-items:center}#collectionTable thead tr th .head-wrapper .sort-options{display:flex;flex-direction:row}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper{display:flex;width:1rem;height:1rem;padding:.2rem}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper.up{transform:rotate(180deg)}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper svg{width:100%;height:100%}#collectionTable tr *{padding-right:1.2rem}#collectionTable tr *:last-child{padding-right:0}#collectionTable tr.is-cut{opacity:.5}#collectionTable tr.active-object{color:var(--phoenix-background-color);background:var(--phoenix-text-color);box-shadow:0 0 15px var(--phoenix-text-color)}#collectionTable tr.active-object div.icon-wrapper{--phoenix-options-icon-path: var(--phoenix-background-color);--phoenix-options-icon-bg: var(--phoenix-text-color-hover)}#collectionTable tr.active-object .add-label input{--phoenix-text-color: var(--phoenix-background-color);--phoenix-background-color-tertiary: var( --phoenix-text-color-secondary );--phoenix-border: var(--phoenix-background-color)}#collectionTable td .object-select{position:relative;width:1.6rem;height:1.6rem;margin-right:.4em;text-align:center;background-color:var(--phoenix-options-icon-bg);border-radius:10px;cursor:pointer}#collectionTable td .object-select:last-child{margin-right:0}#collectionTable td .object-select:hover{border:1px solid var(--phoenix-options-icon-path)}#collectionTable td .object-select svg{position:absolute;top:0;left:0;padding:.4rem;width:100%;height:100%;vertical-align:top}.eventSelector{display:flex}.eventSelector label{display:none;color:var(--phoenix-text-color-secondary)}.eventSelector select{width:9rem;padding:5px 10px;font-size:12px;border:1px solid rgba(88,88,88,.08);box-shadow:var(--phoenix-icon-shadow);background-color:var(--phoenix-background-color-tertiary);color:var(--phoenix-text-color-secondary)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: EventDisplayService }]; }, propDecorators: { showObjectsInfo: [{
@@ -454,9 +453,9 @@ class CollectionsInfoComponent {
         this.overlayWindow.instance.showObjectsInfo = this.showObjectsInfo;
     }
 }
-CollectionsInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CollectionsInfoComponent, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-CollectionsInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: CollectionsInfoComponent, selector: "app-collections-info", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Event data collections info\"\n  icon=\"info\"\n  [active]=\"showObjectsInfo\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CollectionsInfoComponent, decorators: [{
+CollectionsInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CollectionsInfoComponent, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+CollectionsInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CollectionsInfoComponent, selector: "app-collections-info", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Event data collections info\"\n  icon=\"info\"\n  [active]=\"showObjectsInfo\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CollectionsInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-collections-info', template: "<app-menu-toggle\n  tooltip=\"Event data collections info\"\n  icon=\"info\"\n  [active]=\"showObjectsInfo\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1$4.Overlay }]; } });
@@ -474,9 +473,9 @@ class DarkThemeComponent {
         this.eventDisplay.getUIManager().setDarkTheme(this.darkTheme);
     }
 }
-DarkThemeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DarkThemeComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-DarkThemeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: DarkThemeComponent, selector: "app-dark-theme", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Dark theme\"\n  [active]=\"darkTheme\"\n  icon=\"dark\"\n  (click)=\"setDarkTheme()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DarkThemeComponent, decorators: [{
+DarkThemeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DarkThemeComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+DarkThemeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: DarkThemeComponent, selector: "app-dark-theme", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Dark theme\"\n  [active]=\"darkTheme\"\n  icon=\"dark\"\n  (click)=\"setDarkTheme()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DarkThemeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-dark-theme', template: "<app-menu-toggle\n  tooltip=\"Dark theme\"\n  [active]=\"darkTheme\"\n  icon=\"dark\"\n  (click)=\"setDarkTheme()\"\n>\n</app-menu-toggle>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }]; } });
@@ -493,9 +492,9 @@ class EventSelectorComponent {
         this.eventDisplay.loadEvent(value);
     }
 }
-EventSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: EventSelectorComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-EventSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: EventSelectorComponent, selector: "app-event-selector", ngImport: i0, 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"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: EventSelectorComponent, decorators: [{
+EventSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EventSelectorComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+EventSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: EventSelectorComponent, selector: "app-event-selector", ngImport: i0, 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"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EventSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-event-selector', template: "<div\n  class=\"eventSelector mx-2\"\n  *ngIf=\"events != null\"\n  matTooltip=\"Event selector\"\n  matTooltipPosition=\"above\"\n>\n  <select name=\"event\" (change)=\"changeEvent($event)\">\n    <option *ngFor=\"let event of events\" [value]=\"event\">\n      {{ event }}\n    </option>\n  </select>\n</div>\n", styles: [".eventSelector select{width:9rem;padding:5px 10px;font-size:12px;border:1px solid rgba(88,88,88,.08);box-shadow:var(--phoenix-icon-shadow);background-color:var(--phoenix-background-color-tertiary);color:var(--phoenix-text-color-secondary)}\n"] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }]; } });
@@ -510,14 +509,16 @@ class ExperimentInfoComponent {
         });
     }
 }
-ExperimentInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ExperimentInfoComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-ExperimentInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ExperimentInfoComponent, selector: "app-experiment-info", inputs: { experiment: "experiment", experimentTagline: "experimentTagline" }, ngImport: i0, template: "<div id=\"experimentInfo\" class=\"experimentInfo\" cdkDrag cdkDragBoundary=\"body\">\n  <a\n    class=\"experimentLogoWrapper\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    *ngIf=\"experiment\"\n    href=\"https://home.cern/science/experiments/{{ experiment }}\"\n  >\n    <img\n      class=\"experimentLogo\"\n      src=\"assets/images/{{ experiment }}.svg\"\n      alt=\"\"\n    />\n  </a>\n  <div class=\"textInfo\">\n    <p *ngIf=\"experimentTagline\">\n      <b>{{ experimentTagline }}</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"], directives: [{ type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ExperimentInfoComponent, decorators: [{
+ExperimentInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ExperimentInfoComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+ExperimentInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ExperimentInfoComponent, selector: "app-experiment-info", inputs: { url: "url", logo: "logo", tagline: "tagline" }, ngImport: i0, 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"], directives: [{ type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ExperimentInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-experiment-info', template: "<div id=\"experimentInfo\" class=\"experimentInfo\" cdkDrag cdkDragBoundary=\"body\">\n  <a\n    class=\"experimentLogoWrapper\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    *ngIf=\"experiment\"\n    href=\"https://home.cern/science/experiments/{{ experiment }}\"\n  >\n    <img\n      class=\"experimentLogo\"\n      src=\"assets/images/{{ experiment }}.svg\"\n      alt=\"\"\n    />\n  </a>\n  <div class=\"textInfo\">\n    <p *ngIf=\"experimentTagline\">\n      <b>{{ experimentTagline }}</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"] }]
-        }], ctorParameters: function () { return [{ type: EventDisplayService }]; }, propDecorators: { experiment: [{
+            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"] }]
+        }], ctorParameters: function () { return [{ type: EventDisplayService }]; }, propDecorators: { url: [{
                 type: Input
-            }], experimentTagline: [{
+            }], logo: [{
+                type: Input
+            }], tagline: [{
                 type: Input
             }] } });
@@ -543,9 +544,9 @@ class InfoPanelOverlayComponent {
         this.actionsList = this.eventDisplay.getInfoLogger().getInfoLoggerList();
     }
 }
-InfoPanelOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: InfoPanelOverlayComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-InfoPanelOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: InfoPanelOverlayComponent, selector: "app-info-panel-overlay", inputs: { showInfoPanel: "showInfoPanel" }, ngImport: i0, template: "<app-overlay\n  overlayTitle=\"Info Panel\"\n  icon=\"info-panel\"\n  [resizable]=\"true\"\n  [active]=\"showInfoPanel\"\n>\n  <ul class=\"list-group list-group-flush\">\n    <li class=\"list-group-item\">\n      <!-- Show Phoenix Current Version (ON by Default) -->\n      Phoenix Version: {{ version }}\n    </li>\n    <li class=\"list-group-item\" *ngIf=\"actionsList.length === 0\">\n      No actions.\n    </li>\n    <li class=\"list-group-item\" *ngFor=\"let action of actionsList\">\n      {{ action }}\n    </li>\n  </ul>\n</app-overlay>\n", styles: [".list-group-item{font-size:.8rem;padding:.5rem 1rem}\n"], components: [{ type: OverlayComponent, selector: "app-overlay", inputs: ["overlayTitle", "active", "icon", "resizable", "transparentBody"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: InfoPanelOverlayComponent, decorators: [{
+InfoPanelOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: InfoPanelOverlayComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+InfoPanelOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: InfoPanelOverlayComponent, selector: "app-info-panel-overlay", inputs: { showInfoPanel: "showInfoPanel" }, ngImport: i0, template: "<app-overlay\n  overlayTitle=\"Info Panel\"\n  icon=\"info-panel\"\n  [resizable]=\"true\"\n  [active]=\"showInfoPanel\"\n>\n  <ul class=\"list-group list-group-flush\">\n    <li class=\"list-group-item\">\n      <!-- Show Phoenix Current Version (ON by Default) -->\n      Phoenix Version: {{ version }}\n    </li>\n    <li class=\"list-group-item\" *ngIf=\"actionsList.length === 0\">\n      No actions.\n    </li>\n    <li class=\"list-group-item\" *ngFor=\"let action of actionsList\">\n      {{ action }}\n    </li>\n  </ul>\n</app-overlay>\n", styles: [".list-group-item{font-size:.8rem;padding:.5rem 1rem}\n"], components: [{ type: OverlayComponent, selector: "app-overlay", inputs: ["overlayTitle", "active", "icon", "resizable", "transparentBody"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: InfoPanelOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-info-panel-overlay', template: "<app-overlay\n  overlayTitle=\"Info Panel\"\n  icon=\"info-panel\"\n  [resizable]=\"true\"\n  [active]=\"showInfoPanel\"\n>\n  <ul class=\"list-group list-group-flush\">\n    <li class=\"list-group-item\">\n      <!-- Show Phoenix Current Version (ON by Default) -->\n      Phoenix Version: {{ version }}\n    </li>\n    <li class=\"list-group-item\" *ngIf=\"actionsList.length === 0\">\n      No actions.\n    </li>\n    <li class=\"list-group-item\" *ngFor=\"let action of actionsList\">\n      {{ action }}\n    </li>\n  </ul>\n</app-overlay>\n", styles: [".list-group-item{font-size:.8rem;padding:.5rem 1rem}\n"] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }]; }, propDecorators: { showInfoPanel: [{
@@ -588,9 +589,9 @@ class InfoPanelComponent {
         this.overlayWindow.instance.showInfoPanel = this.showInfoPanel;
     }
 }
-InfoPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: InfoPanelComponent, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-InfoPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: InfoPanelComponent, selector: "app-info-panel", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Info panel\"\n  icon=\"info-panel\"\n  [active]=\"showInfoPanel\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: InfoPanelComponent, decorators: [{
+InfoPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: InfoPanelComponent, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+InfoPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: InfoPanelComponent, selector: "app-info-panel", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Info panel\"\n  icon=\"info-panel\"\n  [active]=\"showInfoPanel\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: InfoPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-info-panel', template: "<app-menu-toggle\n  tooltip=\"Info panel\"\n  icon=\"info-panel\"\n  [active]=\"showInfoPanel\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1$4.Overlay }]; } });
@@ -691,24 +692,20 @@ class IOOptionsDialogComponent {
         this.handleFileInput(files[0], 'phnx', callback);
     }
     handleROOTInput(files) {
-        ScriptLoader.loadJSRootScripts().then((JSROOT) => {
-            const objectName = prompt('Enter object name in ROOT file');
-            JSROOT.openFile(files[0]).then((file) => {
-                file.readObject(objectName).then((obj) => {
-                    this.eventDisplay.loadJSONGeometry(JSROOT.GEO.build(obj, { dflt_colors: true }).toJSON(), files[0].name.split('.')[0]);
-                });
-            });
+        return __awaiter(this, void 0, void 0, function* () {
+            const rootObjectName = prompt('Enter object name in ROOT file');
+            yield this.eventDisplay.loadRootGeometry(URL.createObjectURL(files[0]), rootObjectName, files[0].name.split('.')[0]);
+            this.onClose();
         });
-        this.onClose();
     }
     handleRootJSONInput(files) {
-        ScriptLoader.loadJSRootScripts().then((JSROOT) => {
-            const callback = (content, name) => {
-                this.eventDisplay.loadJSONGeometry(JSROOT.GEO.build(JSROOT.parse(content), {
-                    dflt_colors: true,
-                }).toJSON(), name);
-            };
-            this.handleFileInput(files[0], 'gz', callback);
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.isFileOfExtension(files[0], 'gz')) {
+                return;
+            }
+            const name = files[0].name.split('.')[0];
+            yield this.eventDisplay.loadRootJSONGeometry(URL.createObjectURL(files[0]), name);
+            this.onClose();
         });
     }
     handleIgEventDataInput(files) {
@@ -720,32 +717,29 @@ class IOOptionsDialogComponent {
         });
     }
     handleZipEventDataInput(files) {
-        if (this.isFileOfExtension(files[0], 'zip')) {
-            this.handleZipInput(files[0], (allFilesWithData) => {
-                const allEventsObject = {};
-                // JSON event data
-                Object.keys(allFilesWithData)
-                    .filter((fileName) => fileName.endsWith('.json'))
-                    .forEach((fileName) => {
-                    Object.assign(allEventsObject, JSON.parse(allFilesWithData[fileName]));
-                });
-                // JiveXML event data
-                const jiveloader = new JiveXMLLoader();
-                Object.keys(allFilesWithData)
-                    .filter((fileName) => fileName.endsWith('.xml'))
-                    .forEach((fileName) => {
-                    jiveloader.process(allFilesWithData[fileName]);
-                    const eventData = jiveloader.getEventData();
-                    Object.assign(allEventsObject, { [fileName]: eventData });
-                });
-                this.eventDisplay.parsePhoenixEvents(allEventsObject);
-                this.onClose();
-            });
-        }
-        else {
-            console.error('Error: Invalid file format!');
-            this.eventDisplay.getInfoLogger().add('Invalid file format!', 'Error');
+        if (!this.isFileOfExtension(files[0], 'zip')) {
+            return;
         }
+        this.handleZipInput(files[0], (allFilesWithData) => {
+            const allEventsObject = {};
+            // JSON event data
+            Object.keys(allFilesWithData)
+                .filter((fileName) => fileName.endsWith('.json'))
+                .forEach((fileName) => {
+                Object.assign(allEventsObject, JSON.parse(allFilesWithData[fileName]));
+            });
+            // JiveXML event data
+            const jiveloader = new JiveXMLLoader();
+            Object.keys(allFilesWithData)
+                .filter((fileName) => fileName.endsWith('.xml'))
+                .forEach((fileName) => {
+                jiveloader.process(allFilesWithData[fileName]);
+                const eventData = jiveloader.getEventData();
+                Object.assign(allEventsObject, { [fileName]: eventData });
+            });
+            this.eventDisplay.parsePhoenixEvents(allEventsObject);
+            this.onClose();
+        });
     }
     handleZipInput(file, callback) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -775,14 +769,15 @@ class IOOptionsDialogComponent {
             };
             reader.readAsText(file);
         }
-        else {
-            console.error('Error: Invalid file format!');
-            this.eventDisplay.getInfoLogger().add('Invalid file format!', 'Error');
-        }
         this.onClose();
     }
     isFileOfExtension(file, extension) {
-        return file.name.split('.').pop() === extension;
+        if (file.name.split('.').pop() === extension) {
+            return true;
+        }
+        console.error('Error: Invalid file format!');
+        this.eventDisplay.getInfoLogger().add('Invalid file format!', 'Error');
+        return false;
     }
     saveScene() {
         this.eventDisplay.exportPhoenixDisplay();
@@ -791,9 +786,9 @@ class IOOptionsDialogComponent {
         this.eventDisplay.exportToOBJ();
     }
 }
-IOOptionsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IOOptionsDialogComponent, deps: [{ token: EventDisplayService }, { token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-IOOptionsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: IOOptionsDialogComponent, selector: "app-io-options-dialog", inputs: { eventDataImportOptions: "eventDataImportOptions" }, ngImport: i0, template: "<div class=\"dialog\">\n  <h1 mat-dialog-title>Import and export options</h1>\n  <div mat-dialog-content class=\"dialog-content\">\n    <div *ngIf=\"eventDataImportOptions.length > 0\">\n      <h5>Import</h5>\n\n      <h6 class=\"text-center\">Event data</h6>\n\n      <div class=\"row centered\">\n        <ng-container\n          *ngFor=\"let eventDataImportOption of eventDataOptionsWithHandler\"\n        >\n          <input\n            #eventDataFileInput\n            type=\"file\"\n            tabindex=\"-1\"\n            class=\"file-input\"\n            [accept]=\"eventDataImportOption.accept\"\n            (change)=\"eventDataImportOption.handler($event.target.files)\"\n          />\n          <button\n            class=\"file-input-button\"\n            (click)=\"eventDataFileInput.click()\"\n          >\n            <img src=\"assets/icons/eventData.svg\" alt=\"Event data icon\" />\n            Load {{ eventDataImportOption.fileType }}\n          </button>\n        </ng-container>\n      </div>\n\n      <p class=\"text-center\">\n        Supported formats: {{ getSupportedEventDataFormats() }}\n      </p>\n    </div>\n\n    <h6 class=\"text-center\">Geometries</h6>\n\n    <div class=\"row centered\">\n      <input\n        #objFileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".obj\"\n        name=\"image\"\n        (change)=\"handleOBJInput($event.target.files)\"\n      />\n      <button class=\"file-input-button\" (click)=\"objFileInput.click()\">\n        <img src=\"assets/icons/obj.svg\" alt=\"\" /> Load .obj\n      </button>\n\n      <input\n        #gltfFileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".gltf\"\n        name=\"image\"\n        (change)=\"handleGLTFInput($event.target.files)\"\n      />\n      <button class=\"file-input-button\" (click)=\"gltfFileInput.click()\">\n        <img src=\"assets/icons/gltf.svg\" alt=\"\" /> Load .gltf\n      </button>\n\n      <input\n        #rootFileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".root\"\n        (change)=\"handleROOTInput($event.target.files)\"\n      />\n      <button class=\"file-input-button\" (click)=\"rootFileInput.click()\">\n        <img src=\"assets/icons/file-import.svg\" alt=\"\" /> Load .root\n      </button>\n\n      <input\n        #rootJSONFileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".json.gz\"\n        (change)=\"handleRootJSONInput($event.target.files)\"\n      />\n      <button class=\"file-input-button\" (click)=\"rootJSONFileInput.click()\">\n        <img src=\"assets/icons/file-import.svg\" alt=\"\" /> Load .json.gz\n      </button>\n    </div>\n\n    <p class=\"text-center\">Supported formats: OBJ, GLTF, ROOT, ROOT JSON</p>\n\n    <h5>Import / export scene</h5>\n\n    <div class=\"row centered\">\n      <button\n        class=\"file-input-button load-export\"\n        id=\"exportScene\"\n        (click)=\"saveScene()\"\n      >\n        <img src=\"assets/icons/save.svg\" alt=\"\" /> Save scene\n      </button>\n\n      <input\n        #loadSceneInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".phnx\"\n        name=\"image\"\n        (change)=\"handlePhoenixInput($event.target.files)\"\n      />\n      <button\n        class=\"file-input-button load-export\"\n        id=\"importScene\"\n        (click)=\"loadSceneInput.click()\"\n      >\n        <img src=\"assets/icons/upload.svg\" alt=\"\" /> Load scene\n      </button>\n\n      <button\n        class=\"file-input-button export-button\"\n        id=\"exportOBJ\"\n        (click)=\"exportOBJ()\"\n      >\n        <img src=\"assets/icons/obj.svg\" alt=\"\" /> Save OBJ\n      </button>\n    </div>\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button (click)=\"onClose()\" cdkFocusInitial>Close</button>\n  </div>\n</div>\n", styles: [".row{justify-content:center;margin:1rem 0}.file-input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.file-input-button{font-size:1em;font-weight:700;color:#fff;background-color:#6eaece;padding:1em .5em;border:none;border-radius:10px;width:8rem;margin:0 .4rem}.file-input-button.load-export{padding:.8em .2em;width:7rem}.file-input-button.load-export img{max-height:1.2em}.file-input-button.export-button{background-color:#cb7133}.file-input-button.export-button:hover{background-color:#ad5b2d}.file-input-button img{max-height:2em;display:block;width:100%}.file-input-button:hover{background-color:#118ab2}#exportScene{background-color:#5bd99e}#exportScene:hover{background-color:#05c292}#importScene{background-color:#ecc25e}#importScene:hover{background-color:#d6b44d}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IOOptionsDialogComponent, decorators: [{
+IOOptionsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: IOOptionsDialogComponent, deps: [{ token: EventDisplayService }, { token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+IOOptionsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: IOOptionsDialogComponent, selector: "app-io-options-dialog", inputs: { eventDataImportOptions: "eventDataImportOptions" }, ngImport: i0, template: "<div class=\"dialog\">\n  <h1 mat-dialog-title>Import and export options</h1>\n  <div mat-dialog-content class=\"dialog-content\">\n    <div *ngIf=\"eventDataImportOptions.length > 0\">\n      <h5>Import</h5>\n\n      <h6 class=\"text-center\">Event data</h6>\n\n      <div class=\"row centered\">\n        <ng-container\n          *ngFor=\"let eventDataImportOption of eventDataOptionsWithHandler\"\n        >\n          <input\n            #eventDataFileInput\n            type=\"file\"\n            tabindex=\"-1\"\n            class=\"file-input\"\n            [accept]=\"eventDataImportOption.accept\"\n            (change)=\"eventDataImportOption.handler($event.target.files)\"\n          />\n          <button\n            class=\"file-input-button\"\n            (click)=\"eventDataFileInput.click()\"\n          >\n            <img src=\"assets/icons/eventData.svg\" alt=\"Event data icon\" />\n            Load {{ eventDataImportOption.fileType }}\n          </button>\n        </ng-container>\n      </div>\n\n      <p class=\"text-center\">\n        Supported formats: {{ getSupportedEventDataFormats() }}\n      </p>\n    </div>\n\n    <h6 class=\"text-center\">Geometries</h6>\n\n    <div class=\"row centered\">\n      <input\n        #objFileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".obj\"\n        name=\"image\"\n        (change)=\"handleOBJInput($event.target.files)\"\n      />\n      <button class=\"file-input-button\" (click)=\"objFileInput.click()\">\n        <img src=\"assets/icons/obj.svg\" alt=\"\" /> Load .obj\n      </button>\n\n      <input\n        #gltfFileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".gltf\"\n        name=\"image\"\n        (change)=\"handleGLTFInput($event.target.files)\"\n      />\n      <button class=\"file-input-button\" (click)=\"gltfFileInput.click()\">\n        <img src=\"assets/icons/gltf.svg\" alt=\"\" /> Load .gltf\n      </button>\n\n      <input\n        #rootFileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".root\"\n        (change)=\"handleROOTInput($event.target.files)\"\n      />\n      <button class=\"file-input-button\" (click)=\"rootFileInput.click()\">\n        <img src=\"assets/icons/file-import.svg\" alt=\"\" /> Load .root\n      </button>\n\n      <input\n        #rootJSONFileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".json.gz\"\n        (change)=\"handleRootJSONInput($event.target.files)\"\n      />\n      <button class=\"file-input-button\" (click)=\"rootJSONFileInput.click()\">\n        <img src=\"assets/icons/file-import.svg\" alt=\"\" /> Load .json.gz\n      </button>\n    </div>\n\n    <p class=\"text-center\">Supported formats: OBJ, GLTF, ROOT, ROOT JSON</p>\n\n    <h5>Import / export scene</h5>\n\n    <div class=\"row centered\">\n      <button\n        class=\"file-input-button load-export\"\n        id=\"exportScene\"\n        (click)=\"saveScene()\"\n      >\n        <img src=\"assets/icons/save.svg\" alt=\"\" /> Save scene\n      </button>\n\n      <input\n        #loadSceneInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".phnx\"\n        name=\"image\"\n        (change)=\"handlePhoenixInput($event.target.files)\"\n      />\n      <button\n        class=\"file-input-button load-export\"\n        id=\"importScene\"\n        (click)=\"loadSceneInput.click()\"\n      >\n        <img src=\"assets/icons/upload.svg\" alt=\"\" /> Load scene\n      </button>\n\n      <button\n        class=\"file-input-button export-button\"\n        id=\"exportOBJ\"\n        (click)=\"exportOBJ()\"\n      >\n        <img src=\"assets/icons/obj.svg\" alt=\"\" /> Save OBJ\n      </button>\n    </div>\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button (click)=\"onClose()\" cdkFocusInitial>Close</button>\n  </div>\n</div>\n", styles: [".row{justify-content:center;margin:1rem 0}.file-input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.file-input-button{font-size:1em;font-weight:700;color:#fff;background-color:#6eaece;padding:1em .5em;border:none;border-radius:10px;width:8rem;margin:0 .4rem}.file-input-button.load-export{padding:.8em .2em;width:7rem}.file-input-button.load-export img{max-height:1.2em}.file-input-button.export-button{background-color:#cb7133}.file-input-button.export-button:hover{background-color:#ad5b2d}.file-input-button img{max-height:2em;display:block;width:100%}.file-input-button:hover{background-color:#118ab2}#exportScene{background-color:#5bd99e}#exportScene:hover{background-color:#05c292}#importScene{background-color:#ecc25e}#importScene:hover{background-color:#d6b44d}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: IOOptionsDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-io-options-dialog', template: "<div class=\"dialog\">\n  <h1 mat-dialog-title>Import and export options</h1>\n  <div mat-dialog-content class=\"dialog-content\">\n    <div *ngIf=\"eventDataImportOptions.length > 0\">\n      <h5>Import</h5>\n\n      <h6 class=\"text-center\">Event data</h6>\n\n      <div class=\"row centered\">\n        <ng-container\n          *ngFor=\"let eventDataImportOption of eventDataOptionsWithHandler\"\n        >\n          <input\n            #eventDataFileInput\n            type=\"file\"\n            tabindex=\"-1\"\n            class=\"file-input\"\n            [accept]=\"eventDataImportOption.accept\"\n            (change)=\"eventDataImportOption.handler($event.target.files)\"\n          />\n          <button\n            class=\"file-input-button\"\n            (click)=\"eventDataFileInput.click()\"\n          >\n            <img src=\"assets/icons/eventData.svg\" alt=\"Event data icon\" />\n            Load {{ eventDataImportOption.fileType }}\n          </button>\n        </ng-container>\n      </div>\n\n      <p class=\"text-center\">\n        Supported formats: {{ getSupportedEventDataFormats() }}\n      </p>\n    </div>\n\n    <h6 class=\"text-center\">Geometries</h6>\n\n    <div class=\"row centered\">\n      <input\n        #objFileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".obj\"\n        name=\"image\"\n        (change)=\"handleOBJInput($event.target.files)\"\n      />\n      <button class=\"file-input-button\" (click)=\"objFileInput.click()\">\n        <img src=\"assets/icons/obj.svg\" alt=\"\" /> Load .obj\n      </button>\n\n      <input\n        #gltfFileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".gltf\"\n        name=\"image\"\n        (change)=\"handleGLTFInput($event.target.files)\"\n      />\n      <button class=\"file-input-button\" (click)=\"gltfFileInput.click()\">\n        <img src=\"assets/icons/gltf.svg\" alt=\"\" /> Load .gltf\n      </button>\n\n      <input\n        #rootFileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".root\"\n        (change)=\"handleROOTInput($event.target.files)\"\n      />\n      <button class=\"file-input-button\" (click)=\"rootFileInput.click()\">\n        <img src=\"assets/icons/file-import.svg\" alt=\"\" /> Load .root\n      </button>\n\n      <input\n        #rootJSONFileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".json.gz\"\n        (change)=\"handleRootJSONInput($event.target.files)\"\n      />\n      <button class=\"file-input-button\" (click)=\"rootJSONFileInput.click()\">\n        <img src=\"assets/icons/file-import.svg\" alt=\"\" /> Load .json.gz\n      </button>\n    </div>\n\n    <p class=\"text-center\">Supported formats: OBJ, GLTF, ROOT, ROOT JSON</p>\n\n    <h5>Import / export scene</h5>\n\n    <div class=\"row centered\">\n      <button\n        class=\"file-input-button load-export\"\n        id=\"exportScene\"\n        (click)=\"saveScene()\"\n      >\n        <img src=\"assets/icons/save.svg\" alt=\"\" /> Save scene\n      </button>\n\n      <input\n        #loadSceneInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"file-input\"\n        accept=\".phnx\"\n        name=\"image\"\n        (change)=\"handlePhoenixInput($event.target.files)\"\n      />\n      <button\n        class=\"file-input-button load-export\"\n        id=\"importScene\"\n        (click)=\"loadSceneInput.click()\"\n      >\n        <img src=\"assets/icons/upload.svg\" alt=\"\" /> Load scene\n      </button>\n\n      <button\n        class=\"file-input-button export-button\"\n        id=\"exportOBJ\"\n        (click)=\"exportOBJ()\"\n      >\n        <img src=\"assets/icons/obj.svg\" alt=\"\" /> Save OBJ\n      </button>\n    </div>\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button (click)=\"onClose()\" cdkFocusInitial>Close</button>\n  </div>\n</div>\n", styles: [".row{justify-content:center;margin:1rem 0}.file-input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.file-input-button{font-size:1em;font-weight:700;color:#fff;background-color:#6eaece;padding:1em .5em;border:none;border-radius:10px;width:8rem;margin:0 .4rem}.file-input-button.load-export{padding:.8em .2em;width:7rem}.file-input-button.load-export img{max-height:1.2em}.file-input-button.export-button{background-color:#cb7133}.file-input-button.export-button:hover{background-color:#ad5b2d}.file-input-button img{max-height:2em;display:block;width:100%}.file-input-button:hover{background-color:#118ab2}#exportScene{background-color:#5bd99e}#exportScene:hover{background-color:#05c292}#importScene{background-color:#ecc25e}#importScene:hover{background-color:#d6b44d}\n"] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }, { type: i1$5.MatDialogRef }]; }, propDecorators: { eventDataImportOptions: [{
@@ -813,9 +808,9 @@ class IoOptionsComponent {
             this.eventDataImportOptions;
     }
 }
-IoOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IoOptionsComponent, deps: [{ token: i1$5.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-IoOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: IoOptionsComponent, selector: "app-io-options", inputs: { eventDataImportOptions: "eventDataImportOptions" }, ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Import and export options\"\n  icon=\"import\"\n  [active]=\"false\"\n  (click)=\"openIODialog()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IoOptionsComponent, decorators: [{
+IoOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: IoOptionsComponent, deps: [{ token: i1$5.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+IoOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: IoOptionsComponent, selector: "app-io-options", inputs: { eventDataImportOptions: "eventDataImportOptions" }, ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Import and export options\"\n  icon=\"import\"\n  [active]=\"false\"\n  (click)=\"openIODialog()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: IoOptionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-io-options', template: "<app-menu-toggle\n  tooltip=\"Import and export options\"\n  icon=\"import\"\n  [active]=\"false\"\n  (click)=\"openIODialog()\"\n>\n</app-menu-toggle>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1$5.MatDialog }]; }, propDecorators: { eventDataImportOptions: [{
@@ -834,9 +829,9 @@ class MainViewToggleComponent {
             .toggleOrthographicView(this.orthographicView);
     }
 }
-MainViewToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MainViewToggleComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-MainViewToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: MainViewToggleComponent, selector: "app-main-view-toggle", ngImport: i0, template: "<app-menu-toggle\n  [icon]=\"orthographicView ? 'perspective' : 'orthographic'\"\n  [matTooltip]=\"\n    'Switch to ' + (orthographicView ? 'perspective' : 'orthographic') + ' view'\n  \"\n  (click)=\"switchMainView()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }], directives: [{ type: i3$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: MainViewToggleComponent, decorators: [{
+MainViewToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MainViewToggleComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+MainViewToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: MainViewToggleComponent, selector: "app-main-view-toggle", ngImport: i0, template: "<app-menu-toggle\n  [icon]=\"orthographicView ? 'perspective' : 'orthographic'\"\n  [matTooltip]=\"\n    'Switch to ' + (orthographicView ? 'perspective' : 'orthographic') + ' view'\n  \"\n  (click)=\"switchMainView()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }], directives: [{ type: i3$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MainViewToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-main-view-toggle', template: "<app-menu-toggle\n  [icon]=\"orthographicView ? 'perspective' : 'orthographic'\"\n  [matTooltip]=\"\n    'Switch to ' + (orthographicView ? 'perspective' : 'orthographic') + ' view'\n  \"\n  (click)=\"switchMainView()\"\n>\n</app-menu-toggle>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }]; } });
@@ -863,11 +858,11 @@ class ObjectClippingComponent {
         this.clippingEnabled = value;
     }
 }
-ObjectClippingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ObjectClippingComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-ObjectClippingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ObjectClippingComponent, selector: "app-object-clipping", ngImport: i0, 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      >Clipping\n    </mat-checkbox>\n  </button>\n  <button\n    class=\"slider-btn\"\n    mat-menu-item\n    (focus)=\"startingAngleSlider.focus()\"\n  >\n    <mat-slider\n      #startingAngleSlider\n      min=\"0\"\n      max=\"360\"\n      step=\"1\"\n      thumbLabel\n      [value]=\"startClippingAngle\"\n      (click)=\"$event.stopPropagation()\"\n      (input)=\"changeStartClippingAngle($event)\"\n    >\n    </mat-slider\n    >Start Clipping\n  </button>\n  <button class=\"slider-btn\" mat-menu-item (focus)=\"openingAngleSlider.focus()\">\n    <mat-slider\n      #openingAngleSlider\n      min=\"0\"\n      max=\"360\"\n      step=\"1\"\n      thumbLabel\n      [value]=\"openingClippingAngle\"\n      (click)=\"$event.stopPropagation()\"\n      (input)=\"changeOpeningClippingAngle($event)\"\n    >\n    </mat-slider\n    >Opening\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"], components: [{ type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }, { type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }], directives: [{ type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ObjectClippingComponent, decorators: [{
+ObjectClippingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ObjectClippingComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+ObjectClippingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ObjectClippingComponent, selector: "app-object-clipping", ngImport: i0, 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      >Clipping\n    </mat-checkbox>\n  </button>\n  <button\n    class=\"slider-btn\"\n    mat-menu-item\n    (focus)=\"startingAngleSlider.focus()\"\n  >\n    <mat-slider\n      #startingAngleSlider\n      min=\"0\"\n      max=\"360\"\n      step=\"1\"\n      thumbLabel\n      [value]=\"startClippingAngle\"\n      (click)=\"$event.stopPropagation()\"\n      (input)=\"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\n      #openingAngleSlider\n      min=\"0\"\n      max=\"360\"\n      step=\"1\"\n      thumbLabel\n      [value]=\"openingClippingAngle\"\n      (click)=\"$event.stopPropagation()\"\n      (input)=\"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"], components: [{ type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }, { type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }], directives: [{ type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ObjectClippingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-object-clipping', template: "<mat-menu class=\"mat-menu\" #menu>\n  <button\n    mat-menu-item\n    (click)=\"\n      $event.stopPropagation();\n      clippingCheckbox._inputElement.nativeElement.click()\n    \"\n  >\n    <mat-checkbox\n      #clippingCheckbox\n      [checked]=\"clippingEnabled\"\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"toggleClipping($event)\"\n      >Clipping\n    </mat-checkbox>\n  </button>\n  <button\n    class=\"slider-btn\"\n    mat-menu-item\n    (focus)=\"startingAngleSlider.focus()\"\n  >\n    <mat-slider\n      #startingAngleSlider\n      min=\"0\"\n      max=\"360\"\n      step=\"1\"\n      thumbLabel\n      [value]=\"startClippingAngle\"\n      (click)=\"$event.stopPropagation()\"\n      (input)=\"changeStartClippingAngle($event)\"\n    >\n    </mat-slider\n    >Start Clipping\n  </button>\n  <button class=\"slider-btn\" mat-menu-item (focus)=\"openingAngleSlider.focus()\">\n    <mat-slider\n      #openingAngleSlider\n      min=\"0\"\n      max=\"360\"\n      step=\"1\"\n      thumbLabel\n      [value]=\"openingClippingAngle\"\n      (click)=\"$event.stopPropagation()\"\n      (input)=\"changeOpeningClippingAngle($event)\"\n    >\n    </mat-slider\n    >Opening\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"] }]
+            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      >Clipping\n    </mat-checkbox>\n  </button>\n  <button\n    class=\"slider-btn\"\n    mat-menu-item\n    (focus)=\"startingAngleSlider.focus()\"\n  >\n    <mat-slider\n      #startingAngleSlider\n      min=\"0\"\n      max=\"360\"\n      step=\"1\"\n      thumbLabel\n      [value]=\"startClippingAngle\"\n      (click)=\"$event.stopPropagation()\"\n      (input)=\"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\n      #openingAngleSlider\n      min=\"0\"\n      max=\"360\"\n      step=\"1\"\n      thumbLabel\n      [value]=\"openingClippingAngle\"\n      (click)=\"$event.stopPropagation()\"\n      (input)=\"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"] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }]; } });
 /**
@@ -892,9 +887,9 @@ class AttributePipe {
         return transformedValue;
     }
 }
-AttributePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AttributePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-AttributePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AttributePipe, name: "attributePipe" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: AttributePipe, decorators: [{
+AttributePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AttributePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+AttributePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AttributePipe, name: "attributePipe" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AttributePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'attributePipe',
@@ -910,9 +905,9 @@ class ObjectSelectionOverlayComponent {
         this.eventDisplay.allowSelection(this.selectedObject);
     }
 }
-ObjectSelectionOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ObjectSelectionOverlayComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-ObjectSelectionOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ObjectSelectionOverlayComponent, selector: "app-object-selection-overlay", inputs: { hiddenSelectedInfo: "hiddenSelectedInfo" }, ngImport: i0, template: "<app-overlay\n  icon=\"cursor\"\n  [overlayTitle]=\"selectedObject.name\"\n  [active]=\"!hiddenSelectedInfo\"\n>\n  <div\n    id=\"selectedObjectPanelBody\"\n    class=\"m-1\"\n    *ngIf=\"selectedObject.attributes.length > 0\"\n  >\n    <div\n      *ngFor=\"let attribute of selectedObject.attributes\"\n      class=\"attributeField\"\n    >\n      <strong>{{ attribute.attributeName }}</strong>\n      : {{ attribute.attributeValue | attributePipe }}\n    </div>\n  </div>\n</app-overlay>\n", styles: ["#selectedObjectPanelBody{padding:0 .8em;overflow:auto;max-width:300px;max-height:16rem;min-width:7rem}\n"], components: [{ type: OverlayComponent, selector: "app-overlay", inputs: ["overlayTitle", "active", "icon", "resizable", "transparentBody"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "attributePipe": AttributePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ObjectSelectionOverlayComponent, decorators: [{
+ObjectSelectionOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ObjectSelectionOverlayComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+ObjectSelectionOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ObjectSelectionOverlayComponent, selector: "app-object-selection-overlay", inputs: { hiddenSelectedInfo: "hiddenSelectedInfo" }, ngImport: i0, template: "<app-overlay\n  icon=\"cursor\"\n  [overlayTitle]=\"selectedObject.name\"\n  [active]=\"!hiddenSelectedInfo\"\n>\n  <div\n    id=\"selectedObjectPanelBody\"\n    class=\"m-1\"\n    *ngIf=\"selectedObject.attributes.length > 0\"\n  >\n    <div\n      *ngFor=\"let attribute of selectedObject.attributes\"\n      class=\"attributeField\"\n    >\n      <strong>{{ attribute.attributeName }}</strong>\n      : {{ attribute.attributeValue | attributePipe }}\n    </div>\n  </div>\n</app-overlay>\n", styles: ["#selectedObjectPanelBody{padding:0 .8em;overflow:auto;max-width:300px;max-height:16rem;min-width:7rem}\n"], components: [{ type: OverlayComponent, selector: "app-overlay", inputs: ["overlayTitle", "active", "icon", "resizable", "transparentBody"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "attributePipe": AttributePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ObjectSelectionOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-object-selection-overlay', template: "<app-overlay\n  icon=\"cursor\"\n  [overlayTitle]=\"selectedObject.name\"\n  [active]=\"!hiddenSelectedInfo\"\n>\n  <div\n    id=\"selectedObjectPanelBody\"\n    class=\"m-1\"\n    *ngIf=\"selectedObject.attributes.length > 0\"\n  >\n    <div\n      *ngFor=\"let attribute of selectedObject.attributes\"\n      class=\"attributeField\"\n    >\n      <strong>{{ attribute.attributeName }}</strong>\n      : {{ attribute.attributeValue | attributePipe }}\n    </div>\n  </div>\n</app-overlay>\n", styles: ["#selectedObjectPanelBody{padding:0 .8em;overflow:auto;max-width:300px;max-height:16rem;min-width:7rem}\n"] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }]; }, propDecorators: { hiddenSelectedInfo: [{
@@ -941,9 +936,9 @@ class ObjectSelectionComponent {
         this.eventDisplay.enableSelecting(!this.hiddenSelectedInfo);
     }
 }
-ObjectSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ObjectSelectionComponent, deps: [{ token: i1$4.Overlay }, { token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-ObjectSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ObjectSelectionComponent, selector: "app-object-selection", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Object selection\"\n  icon=\"cursor\"\n  [active]=\"!hiddenSelectedInfo\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ObjectSelectionComponent, decorators: [{
+ObjectSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ObjectSelectionComponent, deps: [{ token: i1$4.Overlay }, { token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+ObjectSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ObjectSelectionComponent, selector: "app-object-selection", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Object selection\"\n  icon=\"cursor\"\n  [active]=\"!hiddenSelectedInfo\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ObjectSelectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-object-selection', template: "<app-menu-toggle\n  tooltip=\"Object selection\"\n  icon=\"cursor\"\n  [active]=\"!hiddenSelectedInfo\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1$4.Overlay }, { type: EventDisplayService }]; } });
@@ -983,9 +978,9 @@ class OverlayViewWindowComponent {
         this.transparentBody = !this.transparentBody;
     }
 }
-OverlayViewWindowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: OverlayViewWindowComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-OverlayViewWindowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: OverlayViewWindowComponent, selector: "app-overlay-view-window", inputs: { showOverlay: "showOverlay" }, viewQueries: [{ propertyName: "overlayWindow", first: true, predicate: ["overlayWindow"], descendants: true }], ngImport: i0, 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"], components: [{ type: OverlayComponent, selector: "app-overlay", inputs: ["overlayTitle", "active", "icon", "resizable", "transparentBody"] }, { type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }], directives: [{ type: i3$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: OverlayViewWindowComponent, decorators: [{
+OverlayViewWindowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: OverlayViewWindowComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+OverlayViewWindowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: OverlayViewWindowComponent, selector: "app-overlay-view-window", inputs: { showOverlay: "showOverlay" }, viewQueries: [{ propertyName: "overlayWindow", first: true, predicate: ["overlayWindow"], descendants: true }], ngImport: i0, 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"], components: [{ type: OverlayComponent, selector: "app-overlay", inputs: ["overlayTitle", "active", "icon", "resizable", "transparentBody"] }, { type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }], directives: [{ type: i3$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: OverlayViewWindowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-overlay-view-window', template: "<app-overlay\n  overlayTitle=\"Overlay View\"\n  icon=\"overlay\"\n  [resizable]=\"true\"\n  [transparentBody]=\"transparentBody\"\n  [active]=\"showOverlay\"\n>\n  <div class=\"overlay-view-wrapper\">\n    <canvas #overlayWindow id=\"overlay-canvas\" [hidden]=\"!showOverlay\">\n    </canvas>\n    <div class=\"overlay-view-controls position-absolute d-flex flex-row\">\n      <app-menu-toggle\n        class=\"overlay-view-control\"\n        icon=\"transparent\"\n        matTooltip=\"Toggle background transparency\"\n        (click)=\"toggleBgTransparency()\"\n      >\n      </app-menu-toggle>\n      <app-menu-toggle\n        class=\"overlay-view-control\"\n        icon=\"move-lock\"\n        [matTooltip]=\"(overlayViewFixed ? 'Restore' : 'Fix') + ' overlay view'\"\n        [active]=\"overlayViewFixed\"\n        (click)=\"fixOverlayView()\"\n      >\n      </app-menu-toggle>\n      <app-menu-toggle\n        class=\"overlay-view-control\"\n        [icon]=\"orthographicView ? 'orthographic' : 'perspective'\"\n        [matTooltip]=\"\n          'Switch to ' +\n          (orthographicView ? 'orthographic' : 'perspective') +\n          ' view'\n        \"\n        (click)=\"switchOverlayView()\"\n      >\n      </app-menu-toggle>\n    </div>\n  </div>\n</app-overlay>\n", styles: ["#overlay-canvas{background-color:#0000001a;width:100%}.overlay-view-controls{bottom:1em;right:1em;opacity:0;transition:opacity .2s}.overlay-view-controls .overlay-view-control{background:var(--phoenix-background-color-secondary);box-shadow:var(--phoenix-box-shadow);overflow:hidden;width:2.5rem;height:2.5rem;border-radius:50%;display:flex;justify-content:center;align-items:center}.overlay-view-wrapper:hover .overlay-view-controls{opacity:1;transition:opacity .2s}\n"] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }]; }, propDecorators: { showOverlay: [{
@@ -1014,9 +1009,9 @@ class OverlayViewComponent {
         this.overlayWindow.instance.showOverlay = this.showOverlay;
     }
 }
-OverlayViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: OverlayViewComponent, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-OverlayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: OverlayViewComponent, selector: "app-overlay-view", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Overlay view\"\n  icon=\"overlay\"\n  [active]=\"showOverlay\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: OverlayViewComponent, decorators: [{
+OverlayViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: OverlayViewComponent, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+OverlayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: OverlayViewComponent, selector: "app-overlay-view", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Overlay view\"\n  icon=\"overlay\"\n  [active]=\"showOverlay\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: OverlayViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-overlay-view', template: "<app-menu-toggle\n  tooltip=\"Overlay view\"\n  icon=\"overlay\"\n  [active]=\"showOverlay\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1$4.Overlay }]; } });
@@ -1036,9 +1031,9 @@ class TreeMenuItemComponent {
         this.children.forEach((child) => child.toggleVisibility(visible));
     }
 }
-TreeMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TreeMenuItemComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-TreeMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TreeMenuItemComponent, selector: "app-tree-menu-item", inputs: { node: "node" }, viewQueries: [{ propertyName: "children", predicate: TreeMenuItemComponent, descendants: true }], ngImport: i0, 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"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TreeMenuItemComponent, selector: "app-tree-menu-item", inputs: ["node"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TreeMenuItemComponent, decorators: [{
+TreeMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TreeMenuItemComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+TreeMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: TreeMenuItemComponent, selector: "app-tree-menu-item", inputs: { node: "node" }, viewQueries: [{ propertyName: "children", predicate: TreeMenuItemComponent, descendants: true }], ngImport: i0, 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"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TreeMenuItemComponent, selector: "app-tree-menu-item", inputs: ["node"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TreeMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-tree-menu-item', template: "<ng-container *ngIf=\"node\">\n  <div class=\"header\" [ngClass]=\"{ visible: visible }\">\n    <button\n      *ngIf=\"node.children\"\n      mat-icon-button\n      matTreeNodeToggle\n      (click)=\"isExpanded = !isExpanded\"\n    >\n      <mat-icon class=\"mat-icon-rtl-mirror\">\n        {{ isExpanded ? 'expand_more' : 'chevron_right' }}\n      </mat-icon>\n    </button>\n    <div (click)=\"toggleVisibility(!visible)\" class=\"node-name\">\n      {{ node.name }}\n    </div>\n  </div>\n  <ul [hidden]=\"!isExpanded\" hid>\n    <div class=\"children\">\n      <li *ngFor=\"let node of node.children\">\n        <app-tree-menu-item [node]=\"node\"></app-tree-menu-item>\n      </li>\n    </div>\n  </ul>\n</ng-container>\n", styles: [".header{cursor:pointer;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;flex-direction:row;align-items:center}.header .node-name,.header .mat-icon-rtl-mirror{color:var(--phoenix-text-color-secondary)}.header.visible .node-name,.header.visible .mat-icon-rtl-mirror{color:var(--phoenix-accent)}.children li{list-style-type:none}\n"] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }]; }, propDecorators: { children: [{
@@ -1109,9 +1104,9 @@ class TreeMenuComponent {
     }
     ngOnInit() { }
 }
-TreeMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TreeMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TreeMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TreeMenuComponent, selector: "app-tree-menu", ngImport: i0, template: "<div class=\"tree-wrapper\">\n  <div class=\"tree-menu\">\n    <app-tree-menu-item [node]=\"rootNode\"></app-tree-menu-item>\n  </div>\n</div>\n", styles: [".tree-wrapper{position:absolute;top:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;align-content:center}.tree-menu{display:flex;flex-direction:column;justify-content:center;align-items:center;align-content:center;max-height:70vh;overflow-y:scroll}.example-tree-invisible{display:none}.example-tree ul,.example-tree li{margin-top:0;margin-bottom:0;list-style-type:none}\n"], components: [{ type: TreeMenuItemComponent, selector: "app-tree-menu-item", inputs: ["node"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TreeMenuComponent, decorators: [{
+TreeMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TreeMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TreeMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: TreeMenuComponent, selector: "app-tree-menu", ngImport: i0, template: "<div class=\"tree-wrapper\">\n  <div class=\"tree-menu\">\n    <app-tree-menu-item [node]=\"rootNode\"></app-tree-menu-item>\n  </div>\n</div>\n", styles: [".tree-wrapper{position:absolute;top:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;align-content:center}.tree-menu{display:flex;flex-direction:column;justify-content:center;align-items:center;align-content:center;max-height:70vh;overflow-y:scroll}.example-tree-invisible{display:none}.example-tree ul,.example-tree li{margin-top:0;margin-bottom:0;list-style-type:none}\n"], components: [{ type: TreeMenuItemComponent, selector: "app-tree-menu-item", inputs: ["node"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TreeMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-tree-menu', template: "<div class=\"tree-wrapper\">\n  <div class=\"tree-menu\">\n    <app-tree-menu-item [node]=\"rootNode\"></app-tree-menu-item>\n  </div>\n</div>\n", styles: [".tree-wrapper{position:absolute;top:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;align-content:center}.tree-menu{display:flex;flex-direction:column;justify-content:center;align-items:center;align-content:center;max-height:70vh;overflow-y:scroll}.example-tree-invisible{display:none}.example-tree ul,.example-tree li{margin-top:0;margin-bottom:0;list-style-type:none}\n"] }]
         }], ctorParameters: function () { return []; } });
@@ -1136,9 +1131,9 @@ class ViewOptionsComponent {
         this.eventDisplay.getUIManager().setShowGrid(value);
     }
 }
-ViewOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ViewOptionsComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-ViewOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ViewOptionsComponent, selector: "app-view-options", ngImport: i0, 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"], components: [{ type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ViewOptionsComponent, decorators: [{
+ViewOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ViewOptionsComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+ViewOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ViewOptionsComponent, selector: "app-view-options", ngImport: i0, 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"], components: [{ type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ViewOptionsComponent, decorators: [{
             type: Component,
             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"] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }]; } });
@@ -1173,9 +1168,9 @@ class VrToggleComponent {
         }
     }
 }
-VrToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: VrToggleComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-VrToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: VrToggleComponent, selector: "app-vr-toggle", ngImport: i0, template: "<app-menu-toggle\n  [disabled]=\"!vrSupported\"\n  [active]=\"vrActive\"\n  icon=\"vr\"\n  (click)=\"vrSupported && toggleVr()\"\n  [tooltip]=\"\n    vrSupported ? (vrActive ? 'Exit VR' : 'Enter VR') : 'VR not supported'\n  \"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: VrToggleComponent, decorators: [{
+VrToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: VrToggleComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+VrToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: VrToggleComponent, selector: "app-vr-toggle", ngImport: i0, template: "<app-menu-toggle\n  [disabled]=\"!vrSupported\"\n  [active]=\"vrActive\"\n  icon=\"vr\"\n  (click)=\"vrSupported && toggleVr()\"\n  [tooltip]=\"\n    vrSupported ? (vrActive ? 'Exit VR' : 'Enter VR') : 'VR not supported'\n  \"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: VrToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-vr-toggle', template: "<app-menu-toggle\n  [disabled]=\"!vrSupported\"\n  [active]=\"vrActive\"\n  icon=\"vr\"\n  (click)=\"vrSupported && toggleVr()\"\n  [tooltip]=\"\n    vrSupported ? (vrActive ? 'Exit VR' : 'Enter VR') : 'VR not supported'\n  \"\n>\n</app-menu-toggle>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }]; } });
@@ -1211,9 +1206,9 @@ class ArToggleComponent {
         }
     }
 }
-ArToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ArToggleComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-ArToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ArToggleComponent, selector: "app-ar-toggle", ngImport: i0, template: "<mat-menu #arToggleOptions>\n  <ng-container *ngIf=\"arSupported\">\n    <button mat-menu-item (click)=\"toggleAr(true)\">AR with overlays</button>\n    <button mat-menu-item (click)=\"toggleAr(false)\">AR without overlays</button>\n  </ng-container>\n  <button *ngIf=\"!arSupported\" mat-menu-item disabled>AR not supported</button>\n</mat-menu>\n\n<app-menu-toggle\n  [matMenuTriggerFor]=\"arToggleOptions\"\n  (click)=\"arSupported && (arActive ? toggleAr() : null)\"\n  [disabled]=\"!arSupported\"\n  [active]=\"arActive\"\n  icon=\"ar\"\n  [tooltip]=\"\n    arSupported ? (arActive ? 'Exit AR' : 'Enter AR') : 'AR not supported'\n  \"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ArToggleComponent, decorators: [{
+ArToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ArToggleComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+ArToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ArToggleComponent, selector: "app-ar-toggle", ngImport: i0, template: "<mat-menu #arToggleOptions>\n  <ng-container *ngIf=\"arSupported\">\n    <button mat-menu-item (click)=\"toggleAr(true)\">AR with overlays</button>\n    <button mat-menu-item (click)=\"toggleAr(false)\">AR without overlays</button>\n  </ng-container>\n  <button *ngIf=\"!arSupported\" mat-menu-item disabled>AR not supported</button>\n</mat-menu>\n\n<app-menu-toggle\n  [matMenuTriggerFor]=\"arToggleOptions\"\n  (click)=\"arSupported && (arActive ? toggleAr() : null)\"\n  [disabled]=\"!arSupported\"\n  [active]=\"arActive\"\n  icon=\"ar\"\n  [tooltip]=\"\n    arSupported ? (arActive ? 'Exit AR' : 'Enter AR') : 'AR not supported'\n  \"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ArToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-ar-toggle', template: "<mat-menu #arToggleOptions>\n  <ng-container *ngIf=\"arSupported\">\n    <button mat-menu-item (click)=\"toggleAr(true)\">AR with overlays</button>\n    <button mat-menu-item (click)=\"toggleAr(false)\">AR without overlays</button>\n  </ng-container>\n  <button *ngIf=\"!arSupported\" mat-menu-item disabled>AR not supported</button>\n</mat-menu>\n\n<app-menu-toggle\n  [matMenuTriggerFor]=\"arToggleOptions\"\n  (click)=\"arSupported && (arActive ? toggleAr() : null)\"\n  [disabled]=\"!arSupported\"\n  [active]=\"arActive\"\n  icon=\"ar\"\n  [tooltip]=\"\n    arSupported ? (arActive ? 'Exit AR' : 'Enter AR') : 'AR not supported'\n  \"\n>\n</app-menu-toggle>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }]; } });
@@ -1268,9 +1263,9 @@ class ZoomControlsComponent {
         clearTimeout(this.zoomTimeout);
     }
 }
-ZoomControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ZoomControlsComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-ZoomControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ZoomControlsComponent, selector: "app-zoom-controls", ngImport: i0, template: "<div class=\"d-flex\">\n  <app-menu-toggle\n    tooltip=\"Zoom out (hold)\"\n    icon=\"zoom-out\"\n    [active]=\"false\"\n    (click)=\"zoomOut(true); clearZoom()\"\n    (touchstart)=\"zoomOut(true)\"\n    (mousedown)=\"zoomOut($event.button === 0)\"\n    (mouseup)=\"clearZoom()\"\n    (mouseleave)=\"clearZoom()\"\n    (touchend)=\"clearZoom()\"\n    (touchcancel)=\"clearZoom()\"\n    (touchmove)=\"clearZoom()\"\n  >\n  </app-menu-toggle>\n  <app-menu-toggle\n    tooltip=\"Zoom in (hold)\"\n    icon=\"zoom-in\"\n    [active]=\"false\"\n    (click)=\"zoomIn(true); clearZoom()\"\n    (touchstart)=\"zoomIn(true)\"\n    (mousedown)=\"zoomIn($event.button === 0)\"\n    (mouseup)=\"clearZoom()\"\n    (mouseleave)=\"clearZoom()\"\n    (touchend)=\"clearZoom()\"\n    (touchcancel)=\"clearZoom()\"\n    (touchmove)=\"clearZoom()\"\n  >\n  </app-menu-toggle>\n</div>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ZoomControlsComponent, decorators: [{
+ZoomControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ZoomControlsComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+ZoomControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ZoomControlsComponent, selector: "app-zoom-controls", ngImport: i0, template: "<div class=\"d-flex\">\n  <app-menu-toggle\n    tooltip=\"Zoom out (hold)\"\n    icon=\"zoom-out\"\n    [active]=\"false\"\n    (click)=\"zoomOut(true); clearZoom()\"\n    (touchstart)=\"zoomOut(true)\"\n    (mousedown)=\"zoomOut($event.button === 0)\"\n    (mouseup)=\"clearZoom()\"\n    (mouseleave)=\"clearZoom()\"\n    (touchend)=\"clearZoom()\"\n    (touchcancel)=\"clearZoom()\"\n    (touchmove)=\"clearZoom()\"\n  >\n  </app-menu-toggle>\n  <app-menu-toggle\n    tooltip=\"Zoom in (hold)\"\n    icon=\"zoom-in\"\n    [active]=\"false\"\n    (click)=\"zoomIn(true); clearZoom()\"\n    (touchstart)=\"zoomIn(true)\"\n    (mousedown)=\"zoomIn($event.button === 0)\"\n    (mouseup)=\"clearZoom()\"\n    (mouseleave)=\"clearZoom()\"\n    (touchend)=\"clearZoom()\"\n    (touchcancel)=\"clearZoom()\"\n    (touchmove)=\"clearZoom()\"\n  >\n  </app-menu-toggle>\n</div>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ZoomControlsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zoom-controls', template: "<div class=\"d-flex\">\n  <app-menu-toggle\n    tooltip=\"Zoom out (hold)\"\n    icon=\"zoom-out\"\n    [active]=\"false\"\n    (click)=\"zoomOut(true); clearZoom()\"\n    (touchstart)=\"zoomOut(true)\"\n    (mousedown)=\"zoomOut($event.button === 0)\"\n    (mouseup)=\"clearZoom()\"\n    (mouseleave)=\"clearZoom()\"\n    (touchend)=\"clearZoom()\"\n    (touchcancel)=\"clearZoom()\"\n    (touchmove)=\"clearZoom()\"\n  >\n  </app-menu-toggle>\n  <app-menu-toggle\n    tooltip=\"Zoom in (hold)\"\n    icon=\"zoom-in\"\n    [active]=\"false\"\n    (click)=\"zoomIn(true); clearZoom()\"\n    (touchstart)=\"zoomIn(true)\"\n    (mousedown)=\"zoomIn($event.button === 0)\"\n    (mouseup)=\"clearZoom()\"\n    (mouseleave)=\"clearZoom()\"\n    (touchend)=\"clearZoom()\"\n    (touchcancel)=\"clearZoom()\"\n    (touchmove)=\"clearZoom()\"\n  >\n  </app-menu-toggle>\n</div>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }]; } });
@@ -1308,11 +1303,11 @@ class SSModeComponent {
         }
     }
 }
-SSModeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SSModeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SSModeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: SSModeComponent, selector: "app-ss-mode", ngImport: i0, 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: ["app-ui-menu #uiMenu,app-phoenix-menu #phoenixMenu,app-nav #mainLogo,#statsElement{visibility:visible;opacity:1;transition:opacity .4s}.ss-mode app-ui-menu #uiMenu,.ss-mode app-phoenix-menu #phoenixMenu,.ss-mode app-nav #mainLogo,.ss-mode #statsElement{visibility:hidden;opacity:0}\n"], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: SSModeComponent, decorators: [{
+SSModeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SSModeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SSModeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SSModeComponent, selector: "app-ss-mode", ngImport: i0, 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"], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SSModeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ss-mode', encapsulation: ViewEncapsulation.None, template: "<app-menu-toggle\n  tooltip=\"Screenshot mode\"\n  [active]=\"ssMode\"\n  icon=\"ss-mode\"\n  (click)=\"toggleSSMode()\"\n>\n</app-menu-toggle>\n", styles: ["app-ui-menu #uiMenu,app-phoenix-menu #phoenixMenu,app-nav #mainLogo,#statsElement{visibility:visible;opacity:1;transition:opacity .4s}.ss-mode app-ui-menu #uiMenu,.ss-mode app-phoenix-menu #phoenixMenu,.ss-mode app-nav #mainLogo,.ss-mode #statsElement{visibility:hidden;opacity:0}\n"] }]
+            args: [{ selector: 'app-ss-mode', encapsulation: ViewEncapsulation.None, template: "<app-menu-toggle\n  tooltip=\"Screenshot mode\"\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"] }]
         }] });
 class PerformanceToggleComponent {
@@ -1325,13 +1320,25 @@ class PerformanceToggleComponent {
         this.eventDisplay.getThreeManager().setAntialiasing(!this.performanceMode);
     }
 }
-PerformanceToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: PerformanceToggleComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-PerformanceToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: PerformanceToggleComponent, selector: "app-performance-toggle", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Performance mode\"\n  [active]=\"performanceMode\"\n  icon=\"performance\"\n  (click)=\"togglePerformance()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: PerformanceToggleComponent, decorators: [{
+PerformanceToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PerformanceToggleComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+PerformanceToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PerformanceToggleComponent, selector: "app-performance-toggle", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Performance mode\"\n  [active]=\"performanceMode\"\n  icon=\"performance\"\n  (click)=\"togglePerformance()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PerformanceToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-performance-toggle', template: "<app-menu-toggle\n  tooltip=\"Performance mode\"\n  [active]=\"performanceMode\"\n  icon=\"performance\"\n  (click)=\"togglePerformance()\"\n>\n</app-menu-toggle>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }]; } });
+class UiMenuWrapperComponent {
+    constructor() {
+        this.hideUIMenu = false;
+    }
+}
+UiMenuWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: UiMenuWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+UiMenuWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: UiMenuWrapperComponent, selector: "app-ui-menu-wrapper", ngImport: i0, template: "<div id=\"uiMenu\">\n  <button\n    id=\"hideUIMenu\"\n    [matTooltip]=\"hideUIMenu ? 'Show toolbar' : 'Hide toolbar'\"\n    matTooltipPosition=\"above\"\n    (click)=\"hideUIMenu = !hideUIMenu\"\n    [ngClass]=\"{ 'ui-menu-hidden': hideUIMenu }\"\n  >\n    <svg>\n      <use href=\"assets/icons/expand.svg#expand\"></use>\n    </svg>\n  </button>\n  <div id=\"optionsPanel\" [hidden]=\"hideUIMenu\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: ["#uiMenu{position:absolute;bottom:1rem;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}#optionsPanel{display:flex;align-items:center;background:var(--phoenix-background-color-secondary);border:1px solid var(--phoenix-background-color-tertiary);box-shadow:var(--phoenix-box-shadow);border-radius:30px;max-width:95%;padding:.3rem 1rem;overflow-x:scroll;z-index:90}#hideUIMenu{background:var(--phoenix-background-color-secondary);height:1.2rem;width:3rem;border:1px solid var(--phoenix-border);border-bottom:none;box-shadow:var(--phoenix-box-shadow);border-top-left-radius:15px;border-top-right-radius:15px;padding:3px}#hideUIMenu svg{height:100%;width:100%;vertical-align:top;transition:all .3s}#hideUIMenu.ui-menu-hidden svg{transform:scaleY(-1);transition:all .3s}\n"], directives: [{ type: i3$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: UiMenuWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ui-menu-wrapper', template: "<div id=\"uiMenu\">\n  <button\n    id=\"hideUIMenu\"\n    [matTooltip]=\"hideUIMenu ? 'Show toolbar' : 'Hide toolbar'\"\n    matTooltipPosition=\"above\"\n    (click)=\"hideUIMenu = !hideUIMenu\"\n    [ngClass]=\"{ 'ui-menu-hidden': hideUIMenu }\"\n  >\n    <svg>\n      <use href=\"assets/icons/expand.svg#expand\"></use>\n    </svg>\n  </button>\n  <div id=\"optionsPanel\" [hidden]=\"hideUIMenu\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: ["#uiMenu{position:absolute;bottom:1rem;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}#optionsPanel{display:flex;align-items:center;background:var(--phoenix-background-color-secondary);border:1px solid var(--phoenix-background-color-tertiary);box-shadow:var(--phoenix-box-shadow);border-radius:30px;max-width:95%;padding:.3rem 1rem;overflow-x:scroll;z-index:90}#hideUIMenu{background:var(--phoenix-background-color-secondary);height:1.2rem;width:3rem;border:1px solid var(--phoenix-border);border-bottom:none;box-shadow:var(--phoenix-box-shadow);border-top-left-radius:15px;border-top-right-radius:15px;padding:3px}#hideUIMenu svg{height:100%;width:100%;vertical-align:top;transition:all .3s}#hideUIMenu.ui-menu-hidden svg{transform:scaleY(-1);transition:all .3s}\n"] }]
+        }] });
 class ShareLinkDialogComponent {
     constructor(dialogRef) {
         this.dialogRef = dialogRef;
@@ -1388,9 +1395,9 @@ class ShareLinkDialogComponent {
         QRCode.toCanvas(this.qrcodeCanvas.nativeElement, link);
     }
 }
-ShareLinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ShareLinkDialogComponent, deps: [{ token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-ShareLinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ShareLinkDialogComponent, selector: "app-share-link-dialog", viewQueries: [{ propertyName: "qrcodeCanvas", first: true, predicate: ["qrcodeCanvas"], descendants: true }], ngImport: i0, 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"], components: [{ type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ShareLinkDialogComponent, decorators: [{
+ShareLinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ShareLinkDialogComponent, deps: [{ token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+ShareLinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ShareLinkDialogComponent, selector: "app-share-link-dialog", viewQueries: [{ propertyName: "qrcodeCanvas", first: true, predicate: ["qrcodeCanvas"], descendants: true }], ngImport: i0, 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"], components: [{ type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ShareLinkDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-share-link-dialog', template: "<div class=\"dialog\">\n  <h1 mat-dialog-title>Create shareable link</h1>\n  <div mat-dialog-content class=\"dialog-content\">\n    <h5>URL options</h5>\n    <div class=\"form-group mt-2\">\n      <label for=\"eventDataFile\">Event data file (URL or path)</label>\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        id=\"eventDataFile\"\n        placeholder=\"assets/files/event_data/atlaseventdump2.json\"\n        [value]=\"urlOptions.file\"\n        (input)=\"setOptionValue('file', $event.target.value)\"\n      />\n    </div>\n    <div class=\"form-group\">\n      <label for=\"eventDataType\">Event data type</label>\n      <select\n        class=\"form-control\"\n        id=\"eventDataType\"\n        (input)=\"setOptionValue('type', $event.target.value)\"\n      >\n        <option selected value=\"\">Select</option>\n        <option value=\"jivexml\">JiveXML</option>\n        <option value=\"json\">JSON</option>\n      </select>\n    </div>\n    <div class=\"form-group\">\n      <label for=\"configuration\">Configuration (URL or path)</label>\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        id=\"configuration\"\n        placeholder=\"assets/files/config/phoenix-config.json\"\n        [value]=\"urlOptions.config\"\n        (input)=\"setOptionValue('config', $event.target.value)\"\n      />\n    </div>\n    <div class=\"form-group\">\n      <mat-checkbox\n        [checked]=\"urlOptions.hideWidgets\"\n        (change)=\"setOptionValue('hideWidgets', $event.checked)\"\n      >\n        Hide all widgets\n      </mat-checkbox>\n    </div>\n\n    <h5>Share</h5>\n    <div class=\"share-box my-2\">\n      <span>{{ shareLink.value }}</span>\n      <button\n        class=\"share-box-copy\"\n        (click)=\"copyText(shareLink.value, $event.target)\"\n      >\n        COPY\n      </button>\n    </div>\n    <h5>Embed</h5>\n    <div class=\"share-box my-2\">\n      <span>{{ embedLink }}</span>\n      <button\n        class=\"share-box-copy\"\n        (click)=\"copyText(embedLink, $event.target)\"\n      >\n        COPY\n      </button>\n    </div>\n    <h5>QR Code</h5>\n    <div class=\"qrcode d-flex justify-content-center\">\n      <canvas #qrcodeCanvas></canvas>\n    </div>\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button (click)=\"onClose()\" cdkFocusInitial>Close</button>\n  </div>\n</div>\n", styles: [".share-box{width:30rem;max-width:100%;position:relative;background:var(--phoenix-background-color-tertiary);border:1px solid var(--phoenix-border);border-radius:.5rem;padding:1.25rem;word-wrap:break-word}.share-box .share-box-copy{position:absolute;top:-1px;right:-1px;background:transparent;color:inherit;cursor:pointer;padding:.25rem .5rem;font-size:.75rem;border:1px solid var(--phoenix-border);border-radius:.5rem}.share-box .share-box-copy:hover{background:var(--phoenix-border)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$5.MatDialogRef }]; }, propDecorators: { qrcodeCanvas: [{
@@ -1406,9 +1413,9 @@ class ShareLinkComponent {
         this.dialog.open(ShareLinkDialogComponent);
     }
 }
-ShareLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ShareLinkComponent, deps: [{ token: i1$5.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-ShareLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ShareLinkComponent, selector: "app-share-link", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Create shareable link\"\n  icon=\"share\"\n  [active]=\"false\"\n  (click)=\"openShareLinkDialog()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ShareLinkComponent, decorators: [{
+ShareLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ShareLinkComponent, deps: [{ token: i1$5.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+ShareLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ShareLinkComponent, selector: "app-share-link", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Create shareable link\"\n  icon=\"share\"\n  [active]=\"false\"\n  (click)=\"openShareLinkDialog()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ShareLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-share-link', template: "<app-menu-toggle\n  tooltip=\"Create shareable link\"\n  icon=\"share\"\n  [active]=\"false\"\n  (click)=\"openShareLinkDialog()\"\n>\n</app-menu-toggle>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1$5.MatDialog }]; } });
@@ -1417,14 +1424,13 @@ class UiMenuComponent {
     constructor() {
         this.eventDataImportOptions = Object.values(EventDataFormat);
         this.animationPresets = defaultAnimationPresets;
-        this.hideUIMenu = false;
     }
 }
-UiMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: UiMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UiMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: UiMenuComponent, selector: "app-ui-menu", inputs: { eventDataImportOptions: "eventDataImportOptions", animationPresets: "animationPresets" }, ngImport: i0, template: "<div id=\"uiMenu\">\n  <button\n    id=\"hide-ui-menu\"\n    [matTooltip]=\"hideUIMenu ? 'Show toolbar' : 'Hide toolbar'\"\n    matTooltipPosition=\"above\"\n    (click)=\"hideUIMenu = !hideUIMenu\"\n    [ngClass]=\"{ 'ui-menu-hidden': hideUIMenu }\"\n  >\n    <svg>\n      <use href=\"assets/icons/expand.svg#expand\"></use>\n    </svg>\n  </button>\n  <div id=\"optionsPanel\" [hidden]=\"hideUIMenu\">\n    <!-- 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  </div>\n</div>\n", styles: ["#uiMenu{position:absolute;bottom:1rem;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}#optionsPanel{display:flex;align-items:center;background:var(--phoenix-background-color-secondary);border:1px solid var(--phoenix-background-color-tertiary);box-shadow:var(--phoenix-box-shadow);border-radius:30px;max-width:95%;padding:.3rem 1rem;overflow-x:scroll;z-index:90}#hide-ui-menu{background:var(--phoenix-background-color-secondary);height:1.2rem;width:3rem;border:1px solid var(--phoenix-border);border-bottom:none;box-shadow:var(--phoenix-box-shadow);border-top-left-radius:15px;border-top-right-radius:15px;padding:3px}#hide-ui-menu svg{height:100%;width:100%;vertical-align:top;transition:all .3s}#hide-ui-menu.ui-menu-hidden svg{transform:scaleY(-1);transition:all .3s}\n"], components: [{ type: EventSelectorComponent, selector: "app-event-selector" }, { type: ZoomControlsComponent, selector: "app-zoom-controls" }, { type: ViewOptionsComponent, selector: "app-view-options" }, { type: AutoRotateComponent, selector: "app-auto-rotate" }, { type: DarkThemeComponent, selector: "app-dark-theme" }, { type: ObjectClippingComponent, selector: "app-object-clipping" }, { type: MainViewToggleComponent, selector: "app-main-view-toggle" }, { type: OverlayViewComponent, selector: "app-overlay-view" }, { type: ObjectSelectionComponent, selector: "app-object-selection" }, { type: InfoPanelComponent, selector: "app-info-panel" }, { type: AnimateEventComponent, selector: "app-animate-event" }, { type: AnimateCameraComponent, selector: "app-animate-camera", inputs: ["animationPresets"] }, { type: CollectionsInfoComponent, selector: "app-collections-info" }, { type: PerformanceToggleComponent, selector: "app-performance-toggle" }, { type: VrToggleComponent, selector: "app-vr-toggle" }, { type: ArToggleComponent, selector: "app-ar-toggle" }, { type: SSModeComponent, selector: "app-ss-mode" }, { type: IoOptionsComponent, selector: "app-io-options", inputs: ["eventDataImportOptions"] }, { type: ShareLinkComponent, selector: "app-share-link" }], directives: [{ type: i3$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: UiMenuComponent, decorators: [{
+UiMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: UiMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+UiMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: UiMenuComponent, selector: "app-ui-menu", inputs: { eventDataImportOptions: "eventDataImportOptions", animationPresets: "animationPresets" }, ngImport: i0, 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", styles: [""], components: [{ type: UiMenuWrapperComponent, selector: "app-ui-menu-wrapper" }, { type: EventSelectorComponent, selector: "app-event-selector" }, { type: ZoomControlsComponent, selector: "app-zoom-controls" }, { type: ViewOptionsComponent, selector: "app-view-options" }, { type: AutoRotateComponent, selector: "app-auto-rotate" }, { type: DarkThemeComponent, selector: "app-dark-theme" }, { type: ObjectClippingComponent, selector: "app-object-clipping" }, { type: MainViewToggleComponent, selector: "app-main-view-toggle" }, { type: OverlayViewComponent, selector: "app-overlay-view" }, { type: ObjectSelectionComponent, selector: "app-object-selection" }, { type: InfoPanelComponent, selector: "app-info-panel" }, { type: AnimateEventComponent, selector: "app-animate-event" }, { type: AnimateCameraComponent, selector: "app-animate-camera", inputs: ["animationPresets"] }, { type: CollectionsInfoComponent, selector: "app-collections-info" }, { type: PerformanceToggleComponent, selector: "app-performance-toggle" }, { type: VrToggleComponent, selector: "app-vr-toggle" }, { type: ArToggleComponent, selector: "app-ar-toggle" }, { type: SSModeComponent, selector: "app-ss-mode" }, { type: IoOptionsComponent, selector: "app-io-options", inputs: ["eventDataImportOptions"] }, { type: ShareLinkComponent, selector: "app-share-link" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: UiMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ui-menu', template: "<div id=\"uiMenu\">\n  <button\n    id=\"hide-ui-menu\"\n    [matTooltip]=\"hideUIMenu ? 'Show toolbar' : 'Hide toolbar'\"\n    matTooltipPosition=\"above\"\n    (click)=\"hideUIMenu = !hideUIMenu\"\n    [ngClass]=\"{ 'ui-menu-hidden': hideUIMenu }\"\n  >\n    <svg>\n      <use href=\"assets/icons/expand.svg#expand\"></use>\n    </svg>\n  </button>\n  <div id=\"optionsPanel\" [hidden]=\"hideUIMenu\">\n    <!-- 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  </div>\n</div>\n", styles: ["#uiMenu{position:absolute;bottom:1rem;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}#optionsPanel{display:flex;align-items:center;background:var(--phoenix-background-color-secondary);border:1px solid var(--phoenix-background-color-tertiary);box-shadow:var(--phoenix-box-shadow);border-radius:30px;max-width:95%;padding:.3rem 1rem;overflow-x:scroll;z-index:90}#hide-ui-menu{background:var(--phoenix-background-color-secondary);height:1.2rem;width:3rem;border:1px solid var(--phoenix-border);border-bottom:none;box-shadow:var(--phoenix-box-shadow);border-top-left-radius:15px;border-top-right-radius:15px;padding:3px}#hide-ui-menu svg{height:100%;width:100%;vertical-align:top;transition:all .3s}#hide-ui-menu.ui-menu-hidden svg{transform:scaleY(-1);transition:all .3s}\n"] }]
+            args: [{ selector: 'app-ui-menu', template: "<app-ui-menu-wrapper>\n  <!-- Event selector -->\n  <app-event-selector></app-event-selector>\n\n  <!-- Zoom in and zoom out controls -->\n  <app-zoom-controls></app-zoom-controls>\n\n  <app-view-options></app-view-options>\n\n  <app-auto-rotate></app-auto-rotate>\n\n  <!-- Dark theme toggle -->\n  <app-dark-theme></app-dark-theme>\n\n  <!-- Toggle for clipping geometries -->\n  <app-object-clipping></app-object-clipping>\n\n  <!-- Main view toggle -->\n  <app-main-view-toggle></app-main-view-toggle>\n\n  <!-- Toggle for overlay panel -->\n  <app-overlay-view></app-overlay-view>\n\n  <!-- Toggle for selected object panel -->\n  <app-object-selection></app-object-selection>\n\n  <!-- Info panel -->\n  <app-info-panel></app-info-panel>\n\n  <!-- Toggle for animating the event data -->\n  <app-animate-event></app-animate-event>\n\n  <!-- Toggle for animating camera through event -->\n  <app-animate-camera\n    [animationPresets]=\"animationPresets\"\n  ></app-animate-camera>\n\n  <!-- Toggle for collections info -->\n  <app-collections-info></app-collections-info>\n\n  <!-- Toggle for performance -->\n  <app-performance-toggle></app-performance-toggle>\n\n  <!-- Toggle for VR -->\n  <app-vr-toggle></app-vr-toggle>\n\n  <!-- Toggle for AR -->\n  <app-ar-toggle></app-ar-toggle>\n\n  <!-- Toggle for screenshot mode -->\n  <app-ss-mode></app-ss-mode>\n\n  <!-- 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", styles: [""] }]
         }], propDecorators: { eventDataImportOptions: [{
                 type: Input
             }], animationPresets: [{
@@ -1464,9 +1470,9 @@ class FileExplorerComponent {
         return Object.values(node.children).sort((a, b) => !a.url && b.url ? -1 : 1);
     }
 }
-FileExplorerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FileExplorerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileExplorerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: FileExplorerComponent, selector: "app-file-explorer", inputs: { rootFileNode: "rootFileNode" }, outputs: { onFileSelect: "onFileSelect" }, usesOnChanges: true, ngImport: i0, template: "<cdk-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n  <!-- This is the tree node template for leaf nodes -->\n  <cdk-tree-node *cdkTreeNodeDef=\"let node\" class=\"tree-node\">\n    <button\n      mat-button\n      mat-stroked-button\n      class=\"tree-node-button\"\n      (click)=\"onSelect(node.url)\"\n    >\n      <svg class=\"node-icon\">\n        <use href=\"assets/icons/file.svg#file\"></use>\n      </svg>\n      {{ node.name }}\n    </button>\n  </cdk-tree-node>\n  <!-- This is the tree node template for expandable nodes -->\n  <cdk-nested-tree-node\n    *cdkTreeNodeDef=\"let node; when: hasChildren\"\n    class=\"tree-node\"\n  >\n    <button\n      mat-button\n      cdkTreeNodeToggle\n      class=\"tree-node-button\"\n      [attr.aria-label]=\"'Toggle ' + node.name\"\n    >\n      <svg\n        class=\"node-icon\"\n        [class.node-icon-filled]=\"!treeControl.isExpanded(node)\"\n      >\n        <use href=\"assets/icons/folder.svg#folder\"></use>\n      </svg>\n      {{ node.name }}\n    </button>\n    <div [class.file-tree-invisible]=\"!treeControl.isExpanded(node)\">\n      <ng-container cdkTreeNodeOutlet></ng-container>\n    </div>\n  </cdk-nested-tree-node>\n</cdk-tree>\n", styles: [".file-tree-invisible{display:none}.tree-node{display:block;margin:.25rem 0}.tree-node .tree-node{padding-left:1rem}.tree-node-button{outline:none;padding:0 .75rem}.node-icon{width:1rem;height:1rem;margin-right:.25rem;margin-top:-2px}.node-icon.node-icon-filled{--icon-fill: var(--phoenix-options-icon-path, #fff)}\n"], components: [{ type: i1$6.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "trackBy"], exportAs: ["cdkTree"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$6.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { type: i1$6.CdkTreeNode, selector: "cdk-tree-node", inputs: ["role"], exportAs: ["cdkTreeNode"] }, { type: i1$6.CdkNestedTreeNode, selector: "cdk-nested-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["cdkNestedTreeNode"] }, { type: i1$6.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { type: i1$6.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: FileExplorerComponent, decorators: [{
+FileExplorerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FileExplorerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FileExplorerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: FileExplorerComponent, selector: "app-file-explorer", inputs: { rootFileNode: "rootFileNode" }, outputs: { onFileSelect: "onFileSelect" }, usesOnChanges: true, ngImport: i0, template: "<cdk-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n  <!-- This is the tree node template for leaf nodes -->\n  <cdk-tree-node *cdkTreeNodeDef=\"let node\" class=\"tree-node\">\n    <button\n      mat-button\n      mat-stroked-button\n      class=\"tree-node-button\"\n      (click)=\"onSelect(node.url)\"\n    >\n      <svg class=\"node-icon\">\n        <use href=\"assets/icons/file.svg#file\"></use>\n      </svg>\n      {{ node.name }}\n    </button>\n  </cdk-tree-node>\n  <!-- This is the tree node template for expandable nodes -->\n  <cdk-nested-tree-node\n    *cdkTreeNodeDef=\"let node; when: hasChildren\"\n    class=\"tree-node\"\n  >\n    <button\n      mat-button\n      cdkTreeNodeToggle\n      class=\"tree-node-button\"\n      [attr.aria-label]=\"'Toggle ' + node.name\"\n    >\n      <svg\n        class=\"node-icon\"\n        [class.node-icon-filled]=\"!treeControl.isExpanded(node)\"\n      >\n        <use href=\"assets/icons/folder.svg#folder\"></use>\n      </svg>\n      {{ node.name }}\n    </button>\n    <div [class.file-tree-invisible]=\"!treeControl.isExpanded(node)\">\n      <ng-container cdkTreeNodeOutlet></ng-container>\n    </div>\n  </cdk-nested-tree-node>\n</cdk-tree>\n", styles: [".file-tree-invisible{display:none}.tree-node{display:block;margin:.25rem 0}.tree-node .tree-node{padding-left:1rem}.tree-node-button{outline:none;padding:0 .75rem}.node-icon{width:1rem;height:1rem;margin-right:.25rem;margin-top:-2px}.node-icon.node-icon-filled{--icon-fill: var(--phoenix-options-icon-path, #fff)}\n"], components: [{ type: i1$6.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "trackBy"], exportAs: ["cdkTree"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$6.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { type: i1$6.CdkTreeNode, selector: "cdk-tree-node", inputs: ["role"], exportAs: ["cdkTreeNode"] }, { type: i1$6.CdkNestedTreeNode, selector: "cdk-nested-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["cdkNestedTreeNode"] }, { type: i1$6.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { type: i1$6.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FileExplorerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-file-explorer', template: "<cdk-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n  <!-- This is the tree node template for leaf nodes -->\n  <cdk-tree-node *cdkTreeNodeDef=\"let node\" class=\"tree-node\">\n    <button\n      mat-button\n      mat-stroked-button\n      class=\"tree-node-button\"\n      (click)=\"onSelect(node.url)\"\n    >\n      <svg class=\"node-icon\">\n        <use href=\"assets/icons/file.svg#file\"></use>\n      </svg>\n      {{ node.name }}\n    </button>\n  </cdk-tree-node>\n  <!-- This is the tree node template for expandable nodes -->\n  <cdk-nested-tree-node\n    *cdkTreeNodeDef=\"let node; when: hasChildren\"\n    class=\"tree-node\"\n  >\n    <button\n      mat-button\n      cdkTreeNodeToggle\n      class=\"tree-node-button\"\n      [attr.aria-label]=\"'Toggle ' + node.name\"\n    >\n      <svg\n        class=\"node-icon\"\n        [class.node-icon-filled]=\"!treeControl.isExpanded(node)\"\n      >\n        <use href=\"assets/icons/folder.svg#folder\"></use>\n      </svg>\n      {{ node.name }}\n    </button>\n    <div [class.file-tree-invisible]=\"!treeControl.isExpanded(node)\">\n      <ng-container cdkTreeNodeOutlet></ng-container>\n    </div>\n  </cdk-nested-tree-node>\n</cdk-tree>\n", styles: [".file-tree-invisible{display:none}.tree-node{display:block;margin:.25rem 0}.tree-node .tree-node{padding-left:1rem}.tree-node-button{outline:none;padding:0 .75rem}.node-icon{width:1rem;height:1rem;margin-right:.25rem;margin-top:-2px}.node-icon.node-icon-filled{--icon-fill: var(--phoenix-options-icon-path, #fff)}\n"] }]
         }], propDecorators: { rootFileNode: [{
@@ -1477,9 +1483,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
 class RingLoaderComponent {
 }
-RingLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: RingLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RingLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: RingLoaderComponent, selector: "app-ring-loader", ngImport: i0, template: "<div class=\"ring\">\n  <div></div>\n  <div></div>\n  <div></div>\n  <div></div>\n</div>\n", styles: [".ring{display:inline-block;position:relative;width:1.5rem;height:1.5rem}.ring div{box-sizing:border-box;display:block;position:absolute;width:1.5rem;height:1.5rem;margin:.25rem .5rem;border:.25rem solid var(--phoenix-text-color);border-radius:50%;animation:ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--phoenix-text-color) transparent transparent transparent}.ring div:nth-child(1){animation-delay:-.45s}.ring div:nth-child(2){animation-delay:-.3s}.ring div:nth-child(3){animation-delay:-.15s}@keyframes ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: RingLoaderComponent, decorators: [{
+RingLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RingLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RingLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: RingLoaderComponent, selector: "app-ring-loader", ngImport: i0, template: "<div class=\"ring\">\n  <div></div>\n  <div></div>\n  <div></div>\n  <div></div>\n</div>\n", styles: [".ring{display:inline-block;position:relative;width:1.5rem;height:1.5rem}.ring div{box-sizing:border-box;display:block;position:absolute;width:1.5rem;height:1.5rem;margin:.25rem .5rem;border:.25rem solid var(--phoenix-text-color);border-radius:50%;animation:ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--phoenix-text-color) transparent transparent transparent}.ring div:nth-child(1){animation-delay:-.45s}.ring div:nth-child(2){animation-delay:-.3s}.ring div:nth-child(3){animation-delay:-.15s}@keyframes ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RingLoaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-ring-loader', template: "<div class=\"ring\">\n  <div></div>\n  <div></div>\n  <div></div>\n  <div></div>\n</div>\n", styles: [".ring{display:inline-block;position:relative;width:1.5rem;height:1.5rem}.ring div{box-sizing:border-box;display:block;position:absolute;width:1.5rem;height:1.5rem;margin:.25rem .5rem;border:.25rem solid var(--phoenix-text-color);border-radius:50%;animation:ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--phoenix-text-color) transparent transparent transparent}.ring div:nth-child(1){animation-delay:-.45s}.ring div:nth-child(2){animation-delay:-.3s}.ring div:nth-child(3){animation-delay:-.15s}@keyframes ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }] });
@@ -1569,9 +1575,9 @@ class EventDataExplorerDialogComponent {
         return rootNode;
     }
 }
-EventDataExplorerDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: EventDataExplorerDialogComponent, deps: [{ token: EventDisplayService }, { token: i1$5.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-EventDataExplorerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: EventDataExplorerDialogComponent, selector: "app-event-data-explorer-dialog", ngImport: i0, template: "<div class=\"dialog\">\n  <div class=\"d-flex\">\n    <h1 mat-dialog-title>Event data from directory</h1>\n    <app-ring-loader *ngIf=\"loading\"></app-ring-loader>\n  </div>\n  <div mat-dialog-content class=\"dialog-content\">\n    <div *ngIf=\"error\">Error processing request.</div>\n    <mat-tab-group\n      *ngIf=\"!error\"\n      mat-align-tabs=\"start\"\n      animationDuration=\"0ms\"\n      disableRipple\n      color=\"transparent\"\n    >\n      <mat-tab label=\"Event data\">\n        <div class=\"py-3\">\n          <app-file-explorer\n            [rootFileNode]=\"eventDataFileNode\"\n            (onFileSelect)=\"loadEvent($event)\"\n          ></app-file-explorer>\n        </div>\n      </mat-tab>\n      <mat-tab label=\"Config\">\n        <div class=\"py-3\">\n          <app-file-explorer\n            [rootFileNode]=\"configFileNode\"\n            (onFileSelect)=\"loadConfig($event)\"\n          ></app-file-explorer>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button (click)=\"onClose()\" cdkFocusInitial>Close</button>\n  </div>\n</div>\n", styles: [".dialog{width:30rem;max-width:95%}.file-path-button{width:100%;color:var(--phoenix-text-color);background:var(--phoenix-background-color-tertiary);text-align:left;border-radius:1rem;margin-bottom:.5rem;padding:.5rem 1rem}.file-path-button:last-child{margin-bottom:0}.file-path-button:hover{background:var(--phoenix-background-color-secondary)}.file-path-button:focus{border:1px solid var(--phoenix-text-color-secondary);box-shadow:none}\n"], components: [{ type: RingLoaderComponent, selector: "app-ring-loader" }, { type: i4$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i4$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: FileExplorerComponent, selector: "app-file-explorer", inputs: ["rootFileNode"], outputs: ["onFileSelect"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: EventDataExplorerDialogComponent, decorators: [{
+EventDataExplorerDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EventDataExplorerDialogComponent, deps: [{ token: EventDisplayService }, { token: i1$5.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+EventDataExplorerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: EventDataExplorerDialogComponent, selector: "app-event-data-explorer-dialog", ngImport: i0, template: "<div class=\"dialog\">\n  <div class=\"d-flex\">\n    <h1 mat-dialog-title>Event data from directory</h1>\n    <app-ring-loader *ngIf=\"loading\"></app-ring-loader>\n  </div>\n  <div mat-dialog-content class=\"dialog-content\">\n    <div *ngIf=\"error\">Error processing request.</div>\n    <mat-tab-group\n      *ngIf=\"!error\"\n      mat-align-tabs=\"start\"\n      animationDuration=\"0ms\"\n      disableRipple\n      color=\"transparent\"\n    >\n      <mat-tab label=\"Event data\">\n        <div class=\"py-3\">\n          <app-file-explorer\n            [rootFileNode]=\"eventDataFileNode\"\n            (onFileSelect)=\"loadEvent($event)\"\n          ></app-file-explorer>\n        </div>\n      </mat-tab>\n      <mat-tab label=\"Config\">\n        <div class=\"py-3\">\n          <app-file-explorer\n            [rootFileNode]=\"configFileNode\"\n            (onFileSelect)=\"loadConfig($event)\"\n          ></app-file-explorer>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button (click)=\"onClose()\" cdkFocusInitial>Close</button>\n  </div>\n</div>\n", styles: [".dialog{width:30rem;max-width:95%}.file-path-button{width:100%;color:var(--phoenix-text-color);background:var(--phoenix-background-color-tertiary);text-align:left;border-radius:1rem;margin-bottom:.5rem;padding:.5rem 1rem}.file-path-button:last-child{margin-bottom:0}.file-path-button:hover{background:var(--phoenix-background-color-secondary)}.file-path-button:focus{border:1px solid var(--phoenix-text-color-secondary);box-shadow:none}\n"], components: [{ type: RingLoaderComponent, selector: "app-ring-loader" }, { type: i4$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i4$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: FileExplorerComponent, selector: "app-file-explorer", inputs: ["rootFileNode"], outputs: ["onFileSelect"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EventDataExplorerDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-event-data-explorer-dialog', template: "<div class=\"dialog\">\n  <div class=\"d-flex\">\n    <h1 mat-dialog-title>Event data from directory</h1>\n    <app-ring-loader *ngIf=\"loading\"></app-ring-loader>\n  </div>\n  <div mat-dialog-content class=\"dialog-content\">\n    <div *ngIf=\"error\">Error processing request.</div>\n    <mat-tab-group\n      *ngIf=\"!error\"\n      mat-align-tabs=\"start\"\n      animationDuration=\"0ms\"\n      disableRipple\n      color=\"transparent\"\n    >\n      <mat-tab label=\"Event data\">\n        <div class=\"py-3\">\n          <app-file-explorer\n            [rootFileNode]=\"eventDataFileNode\"\n            (onFileSelect)=\"loadEvent($event)\"\n          ></app-file-explorer>\n        </div>\n      </mat-tab>\n      <mat-tab label=\"Config\">\n        <div class=\"py-3\">\n          <app-file-explorer\n            [rootFileNode]=\"configFileNode\"\n            (onFileSelect)=\"loadConfig($event)\"\n          ></app-file-explorer>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button (click)=\"onClose()\" cdkFocusInitial>Close</button>\n  </div>\n</div>\n", styles: [".dialog{width:30rem;max-width:95%}.file-path-button{width:100%;color:var(--phoenix-text-color);background:var(--phoenix-background-color-tertiary);text-align:left;border-radius:1rem;margin-bottom:.5rem;padding:.5rem 1rem}.file-path-button:last-child{margin-bottom:0}.file-path-button:hover{background:var(--phoenix-background-color-secondary)}.file-path-button:focus{border:1px solid var(--phoenix-text-color-secondary);box-shadow:none}\n"] }]
         }], ctorParameters: function () {
@@ -1593,31 +1599,124 @@ class EventDataExplorerComponent {
         });
     }
 }
-EventDataExplorerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: EventDataExplorerComponent, deps: [{ token: i1$5.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-EventDataExplorerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: EventDataExplorerComponent, selector: "app-event-data-explorer", inputs: { apiURL: "apiURL" }, ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Browse events in data directory\"\n  icon=\"server\"\n  [active]=\"false\"\n  (click)=\"openEventDataExplorerDialog()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: EventDataExplorerComponent, decorators: [{
+EventDataExplorerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EventDataExplorerComponent, deps: [{ token: i1$5.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+EventDataExplorerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: EventDataExplorerComponent, selector: "app-event-data-explorer", inputs: { apiURL: "apiURL" }, ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Browse events in data directory\"\n  icon=\"server\"\n  [active]=\"false\"\n  (click)=\"openEventDataExplorerDialog()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EventDataExplorerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-event-data-explorer', template: "<app-menu-toggle\n  tooltip=\"Browse events in data directory\"\n  icon=\"server\"\n  [active]=\"false\"\n  (click)=\"openEventDataExplorerDialog()\"\n>\n</app-menu-toggle>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1$5.MatDialog }]; }, propDecorators: { apiURL: [{
                 type: Input
             }] } });
-class LoaderComponent {
+class CycleEventsComponent {
+    constructor(eventDisplay) {
+        this.eventDisplay = eventDisplay;
+        this.active = false;
+    }
+    ngOnInit() {
+        this.eventDisplay.listenToLoadedEventsChange((events) => (this.events = events));
+    }
+    toggleCycle() {
+        this.active = !this.active;
+        clearInterval(this.intervalId);
+        if (this.active) {
+            this.startCycleInterval();
+        }
+    }
+    startCycleInterval(startIndex = 0) {
+        let index = startIndex;
+        this.intervalId = setInterval(() => {
+            index = index >= this.events.length ? 0 : index + 1;
+            this.eventDisplay.loadEvent(this.events[index]);
+        }, this.interval);
+    }
+}
+CycleEventsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CycleEventsComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+CycleEventsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CycleEventsComponent, selector: "app-cycle-events", inputs: { interval: "interval" }, ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Cycle through events\"\n  [active]=\"active\"\n  icon=\"cycle-events\"\n  (click)=\"toggleCycle()\"\n>\n</app-menu-toggle>\n", components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CycleEventsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-cycle-events', template: "<app-menu-toggle\n  tooltip=\"Cycle through events\"\n  [active]=\"active\"\n  icon=\"cycle-events\"\n  (click)=\"toggleCycle()\"\n>\n</app-menu-toggle>\n" }]
+        }], ctorParameters: function () { return [{ type: EventDisplayService }]; }, propDecorators: { interval: [{
+                type: Input
+            }] } });
+class ErrorMessageService {
     constructor() {
+        /** A variable that stores the latest error thrown. */
+        this.error = new ActiveVariable();
+    }
+    /**
+     * Subscribe to when an error occurs.
+     * @param callback A function called when an error occurs.
+     */
+    subscribeToError(callback) {
+        this.error.onUpdate(callback);
+    }
+    /**
+     * Set the current error.
+     * @param error The error that has occurred.
+     */
+    setError(error) {
+        this.error.update(error);
+    }
+}
+ErrorMessageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ErrorMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ErrorMessageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ErrorMessageService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ErrorMessageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+class LoaderComponent {
+    constructor(errorMessageService) {
+        this.errorMessageService = errorMessageService;
         this.loaded = false;
+        this.errorMessageService.subscribeToError((error) => {
+            if (!this.loaded) {
+                this.error = error;
+            }
+        });
     }
 }
-LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: LoaderComponent, selector: "app-loader", inputs: { loaded: "loaded", progress: "progress" }, ngImport: i0, template: "<div\n  class=\"loader-wrapper d-flex position-absolute flex-column justify-content-center align-items-center w-100 h-100 text-center\"\n  [ngClass]=\"{ 'load-complete': loaded }\"\n>\n  <img src=\"assets/images/logo-small.svg\" alt=\"Loader\" />\n  <p class=\"mt-5\">\n    Loading...<br />\n    <small class=\"text-muted\">(This may take a while)</small>\n  </p>\n  <div class=\"loading-bar\" *ngIf=\"progress !== undefined\">\n    <span [style]=\"{ width: progress + '%' }\"></span>\n  </div>\n</div>\n", styles: [".loader-wrapper{background:var(--phoenix-background-color);z-index:9998}.loader-wrapper.load-complete{display:none!important}.loader-wrapper img{width:5rem;height:5rem;animation:loader 2s infinite}.loader-wrapper p{color:var(--phoenix-text-color)}.loader-wrapper .loading-bar{width:15rem;max-width:90%;height:.5rem;background:var(--phoenix-background-color-tertiary);border-radius:2.5rem;overflow:hidden}.loader-wrapper .loading-bar span{display:block;height:100%;border-radius:2.5rem;background:linear-gradient(to right,var(--phoenix-primary),var(--phoenix-secondary));transition:all .5s}@keyframes loader{0%,to{transform:scale(.1) rotate(0)}95%{transform:scale(1) rotate(15deg)}}\n"], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: LoaderComponent, decorators: [{
+LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LoaderComponent, deps: [{ token: ErrorMessageService }], target: i0.ɵɵFactoryTarget.Component });
+LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: LoaderComponent, selector: "app-loader", inputs: { loaded: "loaded", progress: "progress" }, ngImport: i0, template: "<div\n  class=\"loader-wrapper d-flex position-absolute flex-column justify-content-center align-items-center w-100 h-100 p-5 text-center\"\n  [ngClass]=\"{ 'load-complete': loaded }\"\n>\n  <ng-container *ngIf=\"error === undefined; else errorContainer\">\n    <img src=\"assets/images/logo-small.svg\" alt=\"Loader\" />\n    <p class=\"mt-5\">\n      Loading...<br />\n      <small class=\"text-muted\">(This may take a while)</small>\n    </p>\n    <div class=\"loading-bar\" *ngIf=\"progress !== undefined\">\n      <span [style]=\"{ width: progress + '%' }\"></span>\n    </div>\n  </ng-container>\n  <ng-template #errorContainer>\n    <p>\n      An error occurred while loading the application. Please try refreshing the\n      page.\n    </p>\n  </ng-template>\n</div>\n", styles: [".loader-wrapper{background:var(--phoenix-background-color);z-index:9998}.loader-wrapper.load-complete{display:none!important}.loader-wrapper img{width:5rem;height:5rem;animation:loader 2s infinite}.loader-wrapper p{color:var(--phoenix-text-color)}.loader-wrapper .loading-bar{width:15rem;max-width:90%;height:.5rem;background:var(--phoenix-background-color-tertiary);border-radius:2.5rem;overflow:hidden}.loader-wrapper .loading-bar span{display:block;height:100%;border-radius:2.5rem;background:linear-gradient(to right,var(--phoenix-primary),var(--phoenix-secondary));transition:all .5s}@keyframes loader{0%,to{transform:scale(.1) rotate(0)}95%{transform:scale(1) rotate(15deg)}}\n"], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loader', template: "<div\n  class=\"loader-wrapper d-flex position-absolute flex-column justify-content-center align-items-center w-100 h-100 text-center\"\n  [ngClass]=\"{ 'load-complete': loaded }\"\n>\n  <img src=\"assets/images/logo-small.svg\" alt=\"Loader\" />\n  <p class=\"mt-5\">\n    Loading...<br />\n    <small class=\"text-muted\">(This may take a while)</small>\n  </p>\n  <div class=\"loading-bar\" *ngIf=\"progress !== undefined\">\n    <span [style]=\"{ width: progress + '%' }\"></span>\n  </div>\n</div>\n", styles: [".loader-wrapper{background:var(--phoenix-background-color);z-index:9998}.loader-wrapper.load-complete{display:none!important}.loader-wrapper img{width:5rem;height:5rem;animation:loader 2s infinite}.loader-wrapper p{color:var(--phoenix-text-color)}.loader-wrapper .loading-bar{width:15rem;max-width:90%;height:.5rem;background:var(--phoenix-background-color-tertiary);border-radius:2.5rem;overflow:hidden}.loader-wrapper .loading-bar span{display:block;height:100%;border-radius:2.5rem;background:linear-gradient(to right,var(--phoenix-primary),var(--phoenix-secondary));transition:all .5s}@keyframes loader{0%,to{transform:scale(.1) rotate(0)}95%{transform:scale(1) rotate(15deg)}}\n"] }]
-        }], propDecorators: { loaded: [{
+            args: [{ selector: 'app-loader', template: "<div\n  class=\"loader-wrapper d-flex position-absolute flex-column justify-content-center align-items-center w-100 h-100 p-5 text-center\"\n  [ngClass]=\"{ 'load-complete': loaded }\"\n>\n  <ng-container *ngIf=\"error === undefined; else errorContainer\">\n    <img src=\"assets/images/logo-small.svg\" alt=\"Loader\" />\n    <p class=\"mt-5\">\n      Loading...<br />\n      <small class=\"text-muted\">(This may take a while)</small>\n    </p>\n    <div class=\"loading-bar\" *ngIf=\"progress !== undefined\">\n      <span [style]=\"{ width: progress + '%' }\"></span>\n    </div>\n  </ng-container>\n  <ng-template #errorContainer>\n    <p>\n      An error occurred while loading the application. Please try refreshing the\n      page.\n    </p>\n  </ng-template>\n</div>\n", styles: [".loader-wrapper{background:var(--phoenix-background-color);z-index:9998}.loader-wrapper.load-complete{display:none!important}.loader-wrapper img{width:5rem;height:5rem;animation:loader 2s infinite}.loader-wrapper p{color:var(--phoenix-text-color)}.loader-wrapper .loading-bar{width:15rem;max-width:90%;height:.5rem;background:var(--phoenix-background-color-tertiary);border-radius:2.5rem;overflow:hidden}.loader-wrapper .loading-bar span{display:block;height:100%;border-radius:2.5rem;background:linear-gradient(to right,var(--phoenix-primary),var(--phoenix-secondary));transition:all .5s}@keyframes loader{0%,to{transform:scale(.1) rotate(0)}95%{transform:scale(1) rotate(15deg)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: ErrorMessageService }]; }, propDecorators: { loaded: [{
                 type: Input
             }], progress: [{
                 type: Input
             }] } });
+/**
+ * Global handler for handling app/module wide errors.
+ */
+class GlobalErrorHandler {
+    /**
+     * Instantiate the global error handler.
+     * @param injector Injector for getting the error message service.
+     */
+    constructor(injector) {
+        this.injector = injector;
+    }
+    /**
+     * A handler for handling the global error that occurs in the app.
+     * @param error The error that occurred.
+     */
+    handleError(error) {
+        console.error('ERROR IN PHOENIX APP', '\n', error);
+        this.injector.get(ErrorMessageService).setError(error);
+    }
+}
+GlobalErrorHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: GlobalErrorHandler, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+GlobalErrorHandler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: GlobalErrorHandler });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: GlobalErrorHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 class ExperimentLinkComponent {
     ngOnInit() {
         this.experimentLink = window.location.href.split('?')[0];
@@ -1626,24 +1725,25 @@ class ExperimentLinkComponent {
         window.open(this.experimentLink, '_blank');
     }
 }
-ExperimentLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ExperimentLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ExperimentLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: ExperimentLinkComponent, selector: "app-experiment-link", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"See full event display\"\n  icon=\"link\"\n  (click)=\"goToExperiment()\"\n></app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: ExperimentLinkComponent, decorators: [{
+ExperimentLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ExperimentLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ExperimentLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ExperimentLinkComponent, selector: "app-experiment-link", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"See full event display\"\n  icon=\"link\"\n  (click)=\"goToExperiment()\"\n></app-menu-toggle>\n", styles: [""], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ExperimentLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-experiment-link', template: "<app-menu-toggle\n  tooltip=\"See full event display\"\n  icon=\"link\"\n  (click)=\"goToExperiment()\"\n></app-menu-toggle>\n", styles: [""] }]
         }] });
 class EmbedMenuComponent {
 }
-EmbedMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: EmbedMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EmbedMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: EmbedMenuComponent, selector: "app-embed-menu", ngImport: i0, template: "<div id=\"embedMenu\">\n  <div id=\"embedMenuInner\">\n    <app-dark-theme></app-dark-theme>\n    <app-auto-rotate></app-auto-rotate>\n    <app-main-view-toggle></app-main-view-toggle>\n    <app-animate-event></app-animate-event>\n    <app-animate-camera></app-animate-camera>\n    <app-experiment-link></app-experiment-link>\n  </div>\n</div>\n", styles: ["#embedMenu{display:none}#embedMenu #embedMenuInner{display:flex;position:absolute;left:1rem;bottom:1rem;background:var(--phoenix-background-color-secondary);border:1px solid var(--phoenix-background-color-tertiary);box-shadow:var(--phoenix-box-shadow);border-radius:30px;padding:.25rem 0}\n"], components: [{ type: DarkThemeComponent, selector: "app-dark-theme" }, { type: AutoRotateComponent, selector: "app-auto-rotate" }, { type: MainViewToggleComponent, selector: "app-main-view-toggle" }, { type: AnimateEventComponent, selector: "app-animate-event" }, { type: AnimateCameraComponent, selector: "app-animate-camera", inputs: ["animationPresets"] }, { type: ExperimentLinkComponent, selector: "app-experiment-link" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: EmbedMenuComponent, decorators: [{
+EmbedMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EmbedMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+EmbedMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: EmbedMenuComponent, selector: "app-embed-menu", ngImport: i0, template: "<div id=\"embedMenu\">\n  <div id=\"embedMenuInner\">\n    <app-dark-theme></app-dark-theme>\n    <app-auto-rotate></app-auto-rotate>\n    <app-main-view-toggle></app-main-view-toggle>\n    <app-animate-event></app-animate-event>\n    <app-animate-camera></app-animate-camera>\n    <app-experiment-link></app-experiment-link>\n  </div>\n</div>\n", styles: ["#embedMenu{display:none}#embedMenu #embedMenuInner{display:flex;position:absolute;left:1rem;bottom:1rem;background:var(--phoenix-background-color-secondary);border:1px solid var(--phoenix-background-color-tertiary);box-shadow:var(--phoenix-box-shadow);border-radius:30px;padding:.25rem 0}\n"], components: [{ type: DarkThemeComponent, selector: "app-dark-theme" }, { type: AutoRotateComponent, selector: "app-auto-rotate" }, { type: MainViewToggleComponent, selector: "app-main-view-toggle" }, { type: AnimateEventComponent, selector: "app-animate-event" }, { type: AnimateCameraComponent, selector: "app-animate-camera", inputs: ["animationPresets"] }, { type: ExperimentLinkComponent, selector: "app-experiment-link" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EmbedMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-embed-menu', template: "<div id=\"embedMenu\">\n  <div id=\"embedMenuInner\">\n    <app-dark-theme></app-dark-theme>\n    <app-auto-rotate></app-auto-rotate>\n    <app-main-view-toggle></app-main-view-toggle>\n    <app-animate-event></app-animate-event>\n    <app-animate-camera></app-animate-camera>\n    <app-experiment-link></app-experiment-link>\n  </div>\n</div>\n", styles: ["#embedMenu{display:none}#embedMenu #embedMenuInner{display:flex;position:absolute;left:1rem;bottom:1rem;background:var(--phoenix-background-color-secondary);border:1px solid var(--phoenix-background-color-tertiary);box-shadow:var(--phoenix-box-shadow);border-radius:30px;padding:.25rem 0}\n"] }]
         }] });
 const PHOENIX_COMPONENTS = [
     NavComponent,
+    UiMenuWrapperComponent,
     UiMenuComponent,
     CollectionsInfoComponent,
     MenuToggleComponent,
@@ -1686,11 +1786,13 @@ const PHOENIX_COMPONENTS = [
     EventDataExplorerDialogComponent,
     FileExplorerComponent,
     RingLoaderComponent,
+    CycleEventsComponent,
 ];
 class PhoenixUIModule {
 }
-PhoenixUIModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: PhoenixUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PhoenixUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: PhoenixUIModule, declarations: [NavComponent,
+PhoenixUIModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PhoenixUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PhoenixUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PhoenixUIModule, declarations: [NavComponent,
+        UiMenuWrapperComponent,
         UiMenuComponent,
         CollectionsInfoComponent,
         MenuToggleComponent,
@@ -1732,7 +1834,8 @@ PhoenixUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         EventDataExplorerComponent,
         EventDataExplorerDialogComponent,
         FileExplorerComponent,
-        RingLoaderComponent], imports: [CommonModule,
+        RingLoaderComponent,
+        CycleEventsComponent], imports: [CommonModule,
         RouterModule,
         DragDropModule,
         MatDialogModule,
@@ -1747,6 +1850,7 @@ PhoenixUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         NgxSliderModule,
         CdkTreeModule,
         MatTabsModule], exports: [NavComponent,
+        UiMenuWrapperComponent,
         UiMenuComponent,
         CollectionsInfoComponent,
         MenuToggleComponent,
@@ -1788,8 +1892,16 @@ PhoenixUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         EventDataExplorerComponent,
         EventDataExplorerDialogComponent,
         FileExplorerComponent,
-        RingLoaderComponent] });
-PhoenixUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: PhoenixUIModule, imports: [[
+        RingLoaderComponent,
+        CycleEventsComponent] });
+PhoenixUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PhoenixUIModule, providers: [
+        EventDisplayService,
+        ErrorMessageService,
+        {
+            provide: ErrorHandler,
+            useClass: GlobalErrorHandler,
+        },
+    ], imports: [[
             CommonModule,
             RouterModule,
             DragDropModule,
@@ -1806,7 +1918,7 @@ PhoenixUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             CdkTreeModule,
             MatTabsModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: PhoenixUIModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PhoenixUIModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: PHOENIX_COMPONENTS,
@@ -1837,6 +1949,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                         EventDataExplorerDialogComponent,
                     ],
                     exports: PHOENIX_COMPONENTS,
+                    providers: [
+                        EventDisplayService,
+                        ErrorMessageService,
+                        {
+                            provide: ErrorHandler,
+                            useClass: GlobalErrorHandler,
+                        },
+                    ],
                 }]
         }] });
@@ -1844,5 +1964,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { AnimateCameraComponent, AnimateEventComponent, ArToggleComponent, AttributePipe, AutoRotateComponent, CollectionsInfoComponent, CollectionsInfoOverlayComponent, ConfigSliderComponent, 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, ViewOptionsComponent, VrToggleComponent, ZoomControlsComponent, defaultAnimationPresets };
+export { AnimateCameraComponent, AnimateEventComponent, ArToggleComponent, AttributePipe, AutoRotateComponent, CollectionsInfoComponent, CollectionsInfoOverlayComponent, ConfigSliderComponent, CycleEventsComponent, DarkThemeComponent, EmbedMenuComponent, EventDataExplorerComponent, EventDataExplorerDialogComponent, EventDataFormat, EventDisplayService, EventSelectorComponent, ExperimentInfoComponent, ExperimentLinkComponent, FileExplorerComponent, FileNode, IOOptionsDialogComponent, ImportOption, InfoPanelComponent, InfoPanelOverlayComponent, IoOptionsComponent, LoaderComponent, MainViewToggleComponent, MenuToggleComponent, NavComponent, ObjectClippingComponent, ObjectSelectionComponent, ObjectSelectionOverlayComponent, OverlayComponent, OverlayViewComponent, OverlayViewWindowComponent, PerformanceToggleComponent, PhoenixMenuComponent, PhoenixMenuItemComponent, PhoenixUIModule, RingLoaderComponent, SSModeComponent, ShareLinkComponent, ShareLinkDialogComponent, TreeMenuComponent, TreeMenuItemComponent, UiMenuComponent, UiMenuWrapperComponent, ViewOptionsComponent, VrToggleComponent, ZoomControlsComponent, defaultAnimationPresets };
 //# sourceMappingURL=phoenix-ui-components.mjs.map