phoenix-ui-components 2.5.1 → 2.7.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, Input, Output, ViewEncapsulation, ViewChild, Injectable, Pipe, ViewChildren, NgModule } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewEncapsulation, ViewChild, Injectable, Pipe, ViewChildren, Inject, NgModule } from '@angular/core';
 import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1$1 from '@angular/material/slider';
@@ -12,8 +12,8 @@ import * as i3 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i3$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i5 from '@angular-slider/ngx-slider';
-import { NgxSliderModule } from '@angular-slider/ngx-slider';
+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 * as i2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
@@ -28,18 +28,23 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import packageJson from 'phoenix-event-display/package.json';
 import JSZip from 'jszip';
 import * as i1$5 from '@angular/material/dialog';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i3$3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import QRCode from 'qrcode';
+import * as i1$6 from '@angular/cdk/tree';
+import { NestedTreeControl, CdkTreeModule } from '@angular/cdk/tree';
+import { MatTreeNestedDataSource } from '@angular/material/tree';
+import * as i4$1 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 
 class NavComponent {
     constructor() { }
     ngOnInit() { }
 }
-NavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: NavComponent, decorators: [{
+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: [{
             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 []; } });
@@ -59,9 +64,9 @@ class ConfigSliderComponent {
         }
     }
 }
-ConfigSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ConfigSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ConfigSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: ConfigSliderComponent, decorators: [{
+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: [{
             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: [{
@@ -89,12 +94,16 @@ class PhoenixMenuItemComponent {
             this.cdr.detectChanges();
         }
     }
+    // Casting to `any` as a workaround to bypass strict template checks.
+    castConfigsToAny(configs) {
+        return configs;
+    }
 }
-PhoenixMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PhoenixMenuItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PhoenixMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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 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.ɵa, 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.0.3", ngImport: i0, type: PhoenixMenuItemComponent, decorators: [{
+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: [{
             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 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              <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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { currentNode: [{
                 type: Input
             }], phoenixMenuItem: [{
@@ -104,9 +113,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
 
 class PhoenixMenuComponent {
 }
-PhoenixMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PhoenixMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PhoenixMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: PhoenixMenuComponent, decorators: [{
+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: [{
             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: [{
@@ -124,9 +133,9 @@ class EventDisplayService extends EventDisplay {
         super();
     }
 }
-EventDisplayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: EventDisplayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-EventDisplayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: EventDisplayService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: EventDisplayService, decorators: [{
+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: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -138,9 +147,9 @@ class MenuToggleComponent {
         this.disabled = false;
     }
 }
-MenuToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MenuToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MenuToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: MenuToggleComponent, decorators: [{
+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: [{
             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: [{
@@ -213,9 +222,9 @@ class AnimateCameraComponent {
             .setGeometryOpacity(SceneManager.GEOMETRIES_ID, opacity);
     }
 }
-AnimateCameraComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AnimateCameraComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-AnimateCameraComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: AnimateCameraComponent, decorators: [{
+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: [{
             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: [{
@@ -236,9 +245,9 @@ class AnimateEventComponent {
         }
     }
 }
-AnimateEventComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AnimateEventComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-AnimateEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: AnimateEventComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -253,9 +262,9 @@ class AutoRotateComponent {
         this.eventDisplay.getUIManager().setAutoRotate(this.autoRotate);
     }
 }
-AutoRotateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AutoRotateComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-AutoRotateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: AutoRotateComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -330,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.0.3", ngImport: i0, type: OverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: OverlayComponent, decorators: [{
+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: [{
             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: [{
@@ -417,9 +426,9 @@ class CollectionsInfoOverlayComponent {
             .getObjectByName(SceneManager.EVENT_DATA_ID);
     }
 }
-CollectionsInfoOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CollectionsInfoOverlayComponent, deps: [{ token: i0.ElementRef }, { token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-CollectionsInfoOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: CollectionsInfoOverlayComponent, decorators: [{
+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: [{
             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: [{
@@ -445,9 +454,9 @@ class CollectionsInfoComponent {
         this.overlayWindow.instance.showObjectsInfo = this.showObjectsInfo;
     }
 }
-CollectionsInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CollectionsInfoComponent, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-CollectionsInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: CollectionsInfoComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -465,9 +474,9 @@ class DarkThemeComponent {
         this.eventDisplay.getUIManager().setDarkTheme(this.darkTheme);
     }
 }
-DarkThemeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DarkThemeComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-DarkThemeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: DarkThemeComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -484,9 +493,9 @@ class EventSelectorComponent {
         this.eventDisplay.loadEvent(value);
     }
 }
-EventSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: EventSelectorComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-EventSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: EventSelectorComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -501,9 +510,9 @@ class ExperimentInfoComponent {
         });
     }
 }
-ExperimentInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ExperimentInfoComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-ExperimentInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: ExperimentInfoComponent, decorators: [{
+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: [{
             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: [{
@@ -534,9 +543,9 @@ class InfoPanelOverlayComponent {
         this.actionsList = this.eventDisplay.getInfoLogger().getInfoLoggerList();
     }
 }
-InfoPanelOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: InfoPanelOverlayComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-InfoPanelOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: InfoPanelOverlayComponent, decorators: [{
+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: [{
             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: [{
@@ -579,9 +588,9 @@ class InfoPanelComponent {
         this.overlayWindow.instance.showInfoPanel = this.showInfoPanel;
     }
 }
-InfoPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: InfoPanelComponent, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-InfoPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: InfoPanelComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -780,9 +789,9 @@ class IOOptionsDialogComponent {
         this.eventDisplay.exportToOBJ();
     }
 }
-IOOptionsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", 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.0.3", ngImport: i0, type: IOOptionsDialogComponent, decorators: [{
+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: [{
             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: [{
@@ -802,9 +811,9 @@ class IoOptionsComponent {
             this.eventDataImportOptions;
     }
 }
-IoOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: IoOptionsComponent, deps: [{ token: i1$5.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-IoOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: IoOptionsComponent, decorators: [{
+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: [{
             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: [{
@@ -823,9 +832,9 @@ class MainViewToggleComponent {
             .toggleOrthographicView(this.orthographicView);
     }
 }
-MainViewToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MainViewToggleComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-MainViewToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: MainViewToggleComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -835,11 +844,16 @@ class ObjectClippingComponent {
         this.eventDisplay = eventDisplay;
         const stateManager = this.eventDisplay.getStateManager();
         stateManager.clippingEnabled.onUpdate((clippingValue) => (this.clippingEnabled = clippingValue));
-        stateManager.clippingAngle.onUpdate((value) => (this.clippingAngle = value));
+        stateManager.startClippingAngle.onUpdate((value) => (this.startClippingAngle = value));
+        stateManager.openingClippingAngle.onUpdate((value) => (this.openingClippingAngle = value));
+    }
+    changeStartClippingAngle(change) {
+        const startingAngle = change.value;
+        this.eventDisplay.getUIManager().rotateStartAngleClipping(startingAngle);
     }
-    changeClippingAngle(change) {
-        const angle = change.value;
-        this.eventDisplay.getUIManager().rotateClipping(angle);
+    changeOpeningClippingAngle(change) {
+        const openingAngle = change.value;
+        this.eventDisplay.getUIManager().rotateOpeningAngleClipping(openingAngle);
     }
     toggleClipping(change) {
         const value = change.checked;
@@ -847,11 +861,11 @@ class ObjectClippingComponent {
         this.clippingEnabled = value;
     }
 }
-ObjectClippingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ObjectClippingComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-ObjectClippingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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 class=\"slider-btn\" mat-menu-item (focus)=\"clippingSlider.focus()\">\n    <mat-slider\n      #clippingSlider\n      min=\"0\"\n      max=\"180\"\n      step=\"1\"\n      thumbLabel\n      [value]=\"clippingAngle\"\n      (click)=\"$event.stopPropagation()\"\n      (input)=\"changeClippingAngle($event)\"\n    >\n    </mat-slider>\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.0.3", ngImport: i0, type: ObjectClippingComponent, decorators: [{
+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=\"180\"\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=\"180\"\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: [{
             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 class=\"slider-btn\" mat-menu-item (focus)=\"clippingSlider.focus()\">\n    <mat-slider\n      #clippingSlider\n      min=\"0\"\n      max=\"180\"\n      step=\"1\"\n      thumbLabel\n      [value]=\"clippingAngle\"\n      (click)=\"$event.stopPropagation()\"\n      (input)=\"changeClippingAngle($event)\"\n    >\n    </mat-slider>\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=\"180\"\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=\"180\"\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"] }]
         }], ctorParameters: function () { return [{ type: EventDisplayService }]; } });
 
 /**
@@ -876,9 +890,9 @@ class AttributePipe {
         return transformedValue;
     }
 }
-AttributePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AttributePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-AttributePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AttributePipe, name: "attributePipe" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AttributePipe, decorators: [{
+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: [{
             type: Pipe,
             args: [{
                     name: 'attributePipe',
@@ -894,9 +908,9 @@ class ObjectSelectionOverlayComponent {
         this.eventDisplay.allowSelection(this.selectedObject);
     }
 }
-ObjectSelectionOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ObjectSelectionOverlayComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-ObjectSelectionOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: ObjectSelectionOverlayComponent, decorators: [{
+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: [{
             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: [{
@@ -925,9 +939,9 @@ class ObjectSelectionComponent {
         this.eventDisplay.enableSelecting(!this.hiddenSelectedInfo);
     }
 }
-ObjectSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", 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.0.3", ngImport: i0, type: ObjectSelectionComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -967,9 +981,9 @@ class OverlayViewWindowComponent {
         this.transparentBody = !this.transparentBody;
     }
 }
-OverlayViewWindowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: OverlayViewWindowComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-OverlayViewWindowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: OverlayViewWindowComponent, decorators: [{
+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: [{
             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: [{
@@ -998,9 +1012,9 @@ class OverlayViewComponent {
         this.overlayWindow.instance.showOverlay = this.showOverlay;
     }
 }
-OverlayViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: OverlayViewComponent, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-OverlayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: OverlayViewComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -1020,9 +1034,9 @@ class TreeMenuItemComponent {
         this.children.forEach((child) => child.toggleVisibility(visible));
     }
 }
-TreeMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TreeMenuItemComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-TreeMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: TreeMenuItemComponent, decorators: [{
+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: [{
             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: [{
@@ -1093,9 +1107,9 @@ class TreeMenuComponent {
     }
     ngOnInit() { }
 }
-TreeMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TreeMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TreeMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: TreeMenuComponent, decorators: [{
+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: [{
             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 []; } });
@@ -1120,9 +1134,9 @@ class ViewOptionsComponent {
         this.eventDisplay.getUIManager().setShowGrid(value);
     }
 }
-ViewOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ViewOptionsComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-ViewOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: ViewOptionsComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -1159,9 +1173,9 @@ class VrToggleComponent {
         }
     }
 }
-VrToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: VrToggleComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-VrToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: VrToggleComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -1199,9 +1213,9 @@ class ArToggleComponent {
         }
     }
 }
-ArToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ArToggleComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-ArToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: ArToggleComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -1256,9 +1270,9 @@ class ZoomControlsComponent {
         clearTimeout(this.zoomTimeout);
     }
 }
-ZoomControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ZoomControlsComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-ZoomControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: ZoomControlsComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -1294,9 +1308,9 @@ class SSModeComponent {
         }
     }
 }
-SSModeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SSModeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SSModeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: SSModeComponent, decorators: [{
+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: [{
             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"] }]
         }] });
@@ -1311,9 +1325,9 @@ class PerformanceToggleComponent {
         this.eventDisplay.getThreeManager().setAntialiasing(!this.performanceMode);
     }
 }
-PerformanceToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PerformanceToggleComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-PerformanceToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: PerformanceToggleComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -1374,9 +1388,9 @@ class ShareLinkDialogComponent {
         QRCode.toCanvas(this.qrcodeCanvas.nativeElement, link);
     }
 }
-ShareLinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ShareLinkDialogComponent, deps: [{ token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-ShareLinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: ShareLinkDialogComponent, decorators: [{
+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: [{
             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: [{
@@ -1392,9 +1406,9 @@ class ShareLinkComponent {
         this.dialog.open(ShareLinkDialogComponent);
     }
 }
-ShareLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ShareLinkComponent, deps: [{ token: i1$5.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-ShareLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: ShareLinkComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -1406,9 +1420,9 @@ class UiMenuComponent {
         this.hideUIMenu = false;
     }
 }
-UiMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: UiMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UiMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: UiMenuComponent, decorators: [{
+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: [{
             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"] }]
         }], propDecorators: { eventDataImportOptions: [{
@@ -1417,14 +1431,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }] } });
 
+class FileNode {
+    constructor(name) {
+        this.name = name;
+    }
+}
+class FileExplorerComponent {
+    constructor() {
+        this.onFileSelect = new EventEmitter();
+        this.treeControl = new NestedTreeControl(this.getSortedChildren.bind(this));
+        this.dataSource = new MatTreeNestedDataSource();
+        this.hasChildren = (_, node) => !!node.children && Object.keys(node.children).length > 0;
+    }
+    ngOnChanges(changes) {
+        if (changes.rootFileNode?.currentValue) {
+            this.dataSource.data = this.getSortedChildren(changes.rootFileNode.currentValue);
+        }
+    }
+    onSelect(url) {
+        this.onFileSelect.emit(url);
+    }
+    /**
+     * Sort the FileNode's children with folders before files.
+     * @param node FileNode whose children are to be sorted.
+     * @returns An array of sorted FileNodes.
+     */
+    getSortedChildren(node) {
+        if (!node.children) {
+            return [];
+        }
+        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: [{
+            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: [{
+                type: Input
+            }], onFileSelect: [{
+                type: Output
+            }] } });
+
+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: [{
+            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"] }]
+        }] });
+
+const supportFileTypes = ['json', 'xml'];
+class EventDataExplorerDialogComponent {
+    constructor(eventDisplay, dialogRef, dialogData) {
+        this.eventDisplay = eventDisplay;
+        this.dialogRef = dialogRef;
+        this.dialogData = dialogData;
+        this.loading = true;
+        this.error = false;
+        // Event data
+        this.makeRequest(this.dialogData.apiURL, 'json', (res) => {
+            const filePaths = res.filter((file) => supportFileTypes.includes(file.name.split('.').pop()));
+            this.eventDataFileNode = this.buildFileNode(filePaths);
+        });
+        // Config
+        this.makeRequest(`${this.dialogData.apiURL}?type=config`, 'json', (res) => {
+            const filePaths = res.filter((file) => file.name.split('.').pop() === 'json');
+            this.configFileNode = this.buildFileNode(filePaths);
+        });
+    }
+    loadEvent(file) {
+        this.makeRequest(file, 'text', (eventData) => {
+            switch (file.split('.').pop()) {
+                case 'xml':
+                    this.loadJiveXMLEvent(eventData);
+                    break;
+                case 'json':
+                    this.loadJSONEvent(eventData);
+                    break;
+            }
+        });
+    }
+    loadJSONEvent(eventData) {
+        this.eventDisplay.parsePhoenixEvents(JSON.parse(eventData));
+        this.onClose();
+    }
+    loadJiveXMLEvent(eventData) {
+        const jiveXMLLoader = new JiveXMLLoader();
+        jiveXMLLoader.process(eventData);
+        const processedEventData = jiveXMLLoader.getEventData();
+        this.eventDisplay.buildEventDataFromJSON(processedEventData);
+        this.onClose();
+    }
+    loadConfig(file) {
+        this.makeRequest(`${this.dialogData.apiURL}?type=config&f=${file}`, 'text', (config) => {
+            const stateManager = this.eventDisplay.getStateManager();
+            stateManager.loadStateFromJSON(JSON.parse(config));
+            this.onClose();
+        });
+    }
+    // Helpers
+    onClose() {
+        this.dialogRef.close();
+    }
+    makeRequest(urlPath, responseType, onData) {
+        this.loading = true;
+        fetch(urlPath)
+            .then((res) => res[responseType]())
+            .then((data) => {
+            onData(data);
+            this.error = false;
+        })
+            .catch((error) => {
+            console.error(error);
+            this.error = true;
+        })
+            .finally(() => {
+            this.loading = false;
+        });
+    }
+    buildFileNode(filePaths) {
+        const rootNode = new FileNode();
+        let fileNode = rootNode;
+        for (const filePath of filePaths) {
+            filePath.name.split('/').forEach((name) => {
+                fileNode.children = fileNode.children ?? {};
+                fileNode.children[name] = fileNode.children[name] ?? new FileNode(name);
+                fileNode = fileNode.children[name];
+            });
+            fileNode.url = filePath.url;
+            fileNode = rootNode;
+        }
+        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: [{
+            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 () { return [{ type: EventDisplayService }, { type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
+
+class EventDataExplorerComponent {
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    openEventDataExplorerDialog() {
+        this.dialog.open(EventDataExplorerDialogComponent, {
+            data: {
+                apiURL: this.apiURL,
+            },
+        });
+    }
+}
+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: [{
+            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 {
     constructor() {
         this.loaded = false;
     }
 }
-LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: LoaderComponent, decorators: [{
+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: [{
             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: [{
@@ -1441,18 +1622,18 @@ class ExperimentLinkComponent {
         window.open(this.experimentLink, '_blank');
     }
 }
-ExperimentLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ExperimentLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ExperimentLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: ExperimentLinkComponent, decorators: [{
+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: [{
             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.0.3", ngImport: i0, type: EmbedMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EmbedMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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.0.3", ngImport: i0, type: EmbedMenuComponent, decorators: [{
+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: [{
             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"] }]
         }] });
@@ -1497,11 +1678,15 @@ const PHOENIX_COMPONENTS = [
     ShareLinkDialogComponent,
     EmbedMenuComponent,
     ExperimentLinkComponent,
+    EventDataExplorerComponent,
+    EventDataExplorerDialogComponent,
+    FileExplorerComponent,
+    RingLoaderComponent,
 ];
 class PhoenixUIModule {
 }
-PhoenixUIModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PhoenixUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PhoenixUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PhoenixUIModule, declarations: [NavComponent,
+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,
         UiMenuComponent,
         CollectionsInfoComponent,
         MenuToggleComponent,
@@ -1539,7 +1724,11 @@ PhoenixUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         ShareLinkComponent,
         ShareLinkDialogComponent,
         EmbedMenuComponent,
-        ExperimentLinkComponent], imports: [CommonModule,
+        ExperimentLinkComponent,
+        EventDataExplorerComponent,
+        EventDataExplorerDialogComponent,
+        FileExplorerComponent,
+        RingLoaderComponent], imports: [CommonModule,
         RouterModule,
         DragDropModule,
         MatDialogModule,
@@ -1551,7 +1740,9 @@ PhoenixUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         MatSlideToggleModule,
         MatCheckboxModule,
         MatIconModule,
-        NgxSliderModule], exports: [NavComponent,
+        NgxSliderModule,
+        CdkTreeModule,
+        MatTabsModule], exports: [NavComponent,
         UiMenuComponent,
         CollectionsInfoComponent,
         MenuToggleComponent,
@@ -1589,8 +1780,12 @@ PhoenixUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         ShareLinkComponent,
         ShareLinkDialogComponent,
         EmbedMenuComponent,
-        ExperimentLinkComponent] });
-PhoenixUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PhoenixUIModule, imports: [[
+        ExperimentLinkComponent,
+        EventDataExplorerComponent,
+        EventDataExplorerDialogComponent,
+        FileExplorerComponent,
+        RingLoaderComponent] });
+PhoenixUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: PhoenixUIModule, imports: [[
             CommonModule,
             RouterModule,
             DragDropModule,
@@ -1604,11 +1799,13 @@ PhoenixUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             MatCheckboxModule,
             MatIconModule,
             NgxSliderModule,
+            CdkTreeModule,
+            MatTabsModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: PhoenixUIModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: PhoenixUIModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...PHOENIX_COMPONENTS],
+                    declarations: PHOENIX_COMPONENTS,
                     imports: [
                         CommonModule,
                         RouterModule,
@@ -1623,6 +1820,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         MatCheckboxModule,
                         MatIconModule,
                         NgxSliderModule,
+                        CdkTreeModule,
+                        MatTabsModule,
                     ],
                     entryComponents: [
                         OverlayComponent,
@@ -1631,8 +1830,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         CollectionsInfoOverlayComponent,
                         ObjectSelectionOverlayComponent,
                         InfoPanelOverlayComponent,
+                        EventDataExplorerDialogComponent,
                     ],
-                    exports: [PHOENIX_COMPONENTS],
+                    exports: PHOENIX_COMPONENTS,
                 }]
         }] });
 
@@ -1640,5 +1840,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AnimateCameraComponent, AnimateEventComponent, ArToggleComponent, AttributePipe, AutoRotateComponent, CollectionsInfoComponent, CollectionsInfoOverlayComponent, ConfigSliderComponent, DarkThemeComponent, EmbedMenuComponent, EventDataFormat, EventDisplayService, EventSelectorComponent, ExperimentInfoComponent, ExperimentLinkComponent, IOOptionsDialogComponent, ImportOption, InfoPanelComponent, InfoPanelOverlayComponent, IoOptionsComponent, LoaderComponent, MainViewToggleComponent, MenuToggleComponent, NavComponent, ObjectClippingComponent, ObjectSelectionComponent, ObjectSelectionOverlayComponent, OverlayComponent, OverlayViewComponent, OverlayViewWindowComponent, PerformanceToggleComponent, PhoenixMenuComponent, PhoenixMenuItemComponent, PhoenixUIModule, SSModeComponent, ShareLinkComponent, ShareLinkDialogComponent, TreeMenuComponent, TreeMenuItemComponent, UiMenuComponent, ViewOptionsComponent, VrToggleComponent, ZoomControlsComponent, defaultAnimationPresets };
+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 };
 //# sourceMappingURL=phoenix-ui-components.mjs.map