phoenix-ui-components 2.4.0 → 2.5.0

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

@@ -1,1620 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, EventEmitter, Input, Output, ViewEncapsulation, ChangeDetectorRef, ViewChild, Injectable, ElementRef, ViewChildren, Pipe, NgModule } from '@angular/core';
-import { EventDisplay, SceneManager, PrettySymbols, JiveXMLLoader, ScriptLoader, CMSLoader, VRManager, XRSessionType, ARManager, phoenixURLOptions } from 'phoenix-event-display';
-import { Overlay, OverlayModule } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
-import packageJson from 'phoenix-event-display/package.json';
-import { MatDialogRef, MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { __awaiter } from 'tslib';
-import JSZip from 'jszip';
-import { ResizeSensor } from 'css-element-queries';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { NgxSliderModule } from '@angular-slider/ngx-slider';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-
-class NavComponent {
-    constructor() { }
-    ngOnInit() { }
-}
-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"]
-            },] }
-];
-NavComponent.ctorParameters = () => [];
-
-class ConfigSliderComponent {
-    constructor() {
-        this.value = 0;
-        this.min = 0;
-        this.max = 100;
-        this.step = 1;
-        this.allowCustomValue = false;
-        this.onChange = new EventEmitter();
-    }
-    onValueChange(value) {
-        if (value) {
-            this.onChange.emit(value);
-        }
-    }
-}
-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"]
-            },] }
-];
-ConfigSliderComponent.propDecorators = {
-    value: [{ type: Input }],
-    min: [{ type: Input }],
-    max: [{ type: Input }],
-    step: [{ type: Input }],
-    allowCustomValue: [{ type: Input }],
-    onChange: [{ type: Output }]
-};
-
-class PhoenixMenuItemComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-    }
-    calculateConfigTop() {
-        if (this.phoenixMenuItem) {
-            this.configTop =
-                this.phoenixMenuItem.nativeElement.getBoundingClientRect().top;
-            this.cdr.detectChanges();
-        }
-    }
-}
-PhoenixMenuItemComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-phoenix-menu-item',
-                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",
-                encapsulation: ViewEncapsulation.None,
-                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"]
-            },] }
-];
-PhoenixMenuItemComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-PhoenixMenuItemComponent.propDecorators = {
-    currentNode: [{ type: Input }],
-    phoenixMenuItem: [{ type: ViewChild, args: ['phoenixMenuItem',] }]
-};
-
-class PhoenixMenuComponent {
-}
-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"]
-            },] }
-];
-PhoenixMenuComponent.propDecorators = {
-    rootNode: [{ type: Input }]
-};
-
-/**
- * Service for all event display related functions.
- */
-class EventDisplayService extends EventDisplay {
-    /**
-     * Instantiate the event display by calling the parent constructor.
-     */
-    constructor() {
-        super();
-    }
-}
-EventDisplayService.ɵprov = i0.ɵɵdefineInjectable({ factory: function EventDisplayService_Factory() { return new EventDisplayService(); }, token: EventDisplayService, providedIn: "root" });
-EventDisplayService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-EventDisplayService.ctorParameters = () => [];
-
-const defaultAnimationPresets = {
-    'Preset 1': {
-        positions: [
-            {
-                position: [11976, 7262, 11927],
-                duration: 1000,
-            },
-            {
-                position: [-1000, 0, 11927],
-                duration: 2000,
-            },
-            {
-                position: [2000, 500, 1000],
-                duration: 3500,
-            },
-            {
-                position: [5000, 2000, 1000],
-                duration: 3000,
-            },
-            {
-                position: [5000, 2000, 1000],
-                duration: 2000,
-            },
-            {
-                position: [11976, 7262, 11927],
-                duration: 1000,
-            },
-        ],
-        animateEventAfterInterval: 5000,
-        collisionDuration: 6000,
-    },
-};
-class AnimateCameraComponent {
-    constructor(eventDisplay) {
-        this.eventDisplay = eventDisplay;
-        this.animationPresets = defaultAnimationPresets;
-        this.animationPresetsKeys = Object.keys(this.animationPresets);
-        this.isAnimating = false;
-    }
-    animatePreset(preset) {
-        this.setDetectorOpacity(0.2);
-        this.eventDisplay.animatePreset(this.animationPresets[preset], () => {
-            this.setDetectorOpacity(1);
-        });
-    }
-    animateCamera() {
-        if (!this.isAnimating) {
-            this.isAnimating = true;
-            this.eventDisplay.animateThroughEvent([11976, 7262, 11927], 3000, () => {
-                this.isAnimating = false;
-            });
-        }
-    }
-    setDetectorOpacity(opacity) {
-        this.eventDisplay
-            .getThreeManager()
-            .getSceneManager()
-            .setGeometryOpacity(SceneManager.GEOMETRIES_ID, opacity);
-    }
-}
-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: [""]
-            },] }
-];
-AnimateCameraComponent.ctorParameters = () => [
-    { type: EventDisplayService }
-];
-AnimateCameraComponent.propDecorators = {
-    animationPresets: [{ type: Input }]
-};
-
-class AnimateEventComponent {
-    constructor(eventDisplay) {
-        this.eventDisplay = eventDisplay;
-        this.isAnimating = false;
-    }
-    toggleAnimateEvent() {
-        if (!this.isAnimating) {
-            this.isAnimating = true;
-            this.eventDisplay.animateEventWithCollision(10000, () => {
-                this.isAnimating = false;
-            });
-        }
-    }
-}
-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: [""]
-            },] }
-];
-AnimateEventComponent.ctorParameters = () => [
-    { type: EventDisplayService }
-];
-
-class AutoRotateComponent {
-    constructor(eventDisplay) {
-        this.eventDisplay = eventDisplay;
-        this.autoRotate = false;
-    }
-    toggleAutoRotate() {
-        this.autoRotate = !this.autoRotate;
-        this.eventDisplay.getUIManager().setAutoRotate(this.autoRotate);
-    }
-}
-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: [""]
-            },] }
-];
-AutoRotateComponent.ctorParameters = () => [
-    { type: EventDisplayService }
-];
-
-class CollectionsInfoOverlayComponent {
-    constructor(elementRef, eventDisplay) {
-        this.elementRef = elementRef;
-        this.eventDisplay = eventDisplay;
-        this.getPrettySymbol = PrettySymbols.getPrettySymbol;
-    }
-    ngOnInit() {
-        this.eventDisplay.listenToDisplayedEventChange((_event) => (this.collections = this.eventDisplay.getCollections()));
-        this.activeObject = this.eventDisplay.getActiveObjectId();
-        this.activeObject.onUpdate((value) => {
-            if (document.getElementById(value)) {
-                document.getElementById(value).scrollIntoView(false);
-            }
-        });
-    }
-    changeCollection(selectedCollection) {
-        const eventDataGroup = this.getEventDataGroup();
-        this.selectedCollection = selectedCollection;
-        this.showingCollection = this.eventDisplay
-            .getCollection(selectedCollection)
-            .map((object) => {
-            var _a;
-            return (Object.assign(Object.assign({}, object), { isCut: !((_a = eventDataGroup.getObjectByProperty('uuid', object.uuid)) === null || _a === void 0 ? void 0 : _a.visible) }));
-        });
-        this.collectionColumns = Object.keys(this.showingCollection[0]).filter((column) => !['uuid', 'hits', 'isCut'].includes(column) // FIXME - this is an ugly hack. But currently hits from tracks make track collections unusable. Better to have exlusion list passed in.
-        );
-    }
-    lookAtObject(uuid) {
-        if (uuid) {
-            this.activeObject.update(uuid);
-            this.eventDisplay.lookAtObject(uuid);
-        }
-    }
-    highlightObject(uuid) {
-        if (uuid) {
-            this.activeObject.update(uuid);
-            this.eventDisplay.highlightObject(uuid);
-        }
-    }
-    addLabel(index, uuid) {
-        const labelValue = this.elementRef.nativeElement.querySelector(`#label${index}`).value;
-        if (this.selectedCollection) {
-            // Empty labelValue will remove the label object
-            this.eventDisplay.addLabelToObject(labelValue, this.selectedCollection, index, uuid);
-        }
-    }
-    getEventDataGroup() {
-        return this.eventDisplay
-            .getThreeManager()
-            .getSceneManager()
-            .getScene()
-            .getObjectByName(SceneManager.EVENT_DATA_ID);
-    }
-}
-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      <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    </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              {{ getPrettySymbol(column) }}\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            }\"\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}.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 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"]
-            },] }
-];
-CollectionsInfoOverlayComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: EventDisplayService }
-];
-CollectionsInfoOverlayComponent.propDecorators = {
-    showObjectsInfo: [{ type: Input }]
-};
-
-class CollectionsInfoComponent {
-    constructor(overlay) {
-        this.overlay = overlay;
-        this.showObjectsInfo = false;
-    }
-    ngOnInit() {
-        const overlayRef = this.overlay.create();
-        const overlayPortal = new ComponentPortal(CollectionsInfoOverlayComponent);
-        this.overlayWindow = overlayRef.attach(overlayPortal);
-        this.overlayWindow.instance.showObjectsInfo = this.showObjectsInfo;
-    }
-    ngOnDestroy() {
-        this.overlayWindow.destroy();
-    }
-    toggleOverlay() {
-        this.showObjectsInfo = !this.showObjectsInfo;
-        this.overlayWindow.instance.showObjectsInfo = this.showObjectsInfo;
-    }
-}
-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: [""]
-            },] }
-];
-CollectionsInfoComponent.ctorParameters = () => [
-    { type: Overlay }
-];
-
-class DarkThemeComponent {
-    constructor(eventDisplay) {
-        this.eventDisplay = eventDisplay;
-        this.darkTheme = false;
-    }
-    ngOnInit() {
-        this.darkTheme = this.eventDisplay.getUIManager().getDarkTheme();
-    }
-    setDarkTheme() {
-        this.darkTheme = !this.darkTheme;
-        this.eventDisplay.getUIManager().setDarkTheme(this.darkTheme);
-    }
-}
-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: [""]
-            },] }
-];
-DarkThemeComponent.ctorParameters = () => [
-    { type: EventDisplayService }
-];
-
-class EventSelectorComponent {
-    constructor(eventDisplay) {
-        this.eventDisplay = eventDisplay;
-    }
-    ngOnInit() {
-        this.eventDisplay.listenToLoadedEventsChange((events) => (this.events = events));
-    }
-    changeEvent(selected) {
-        const value = selected.target.value;
-        this.eventDisplay.loadEvent(value);
-    }
-}
-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"]
-            },] }
-];
-EventSelectorComponent.ctorParameters = () => [
-    { type: EventDisplayService }
-];
-
-class ExperimentInfoComponent {
-    constructor(eventDisplay) {
-        this.eventDisplay = eventDisplay;
-    }
-    ngOnInit() {
-        this.eventDisplay.listenToDisplayedEventChange(() => {
-            this.experimentInfo = this.eventDisplay.getEventMetadata();
-        });
-    }
-}
-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;-moz-user-select:none;-ms-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"]
-            },] }
-];
-ExperimentInfoComponent.ctorParameters = () => [
-    { type: EventDisplayService }
-];
-ExperimentInfoComponent.propDecorators = {
-    experiment: [{ type: Input }],
-    experimentTagline: [{ type: Input }]
-};
-
-/**
- * Component for displaying information from the logger
- */
-class InfoPanelOverlayComponent {
-    /**
-     * Create the information panel overlay
-     * @param infoLogger Service containing operations related to info logs
-     */
-    constructor(eventDisplay) {
-        this.eventDisplay = eventDisplay;
-        /** List of actions to be displayed in the info panel */
-        this.actionsList = [];
-        /** Get Phoenix Version */
-        this.version = packageJson.version;
-    }
-    /**
-     * Get the list of logs from the info logger service
-     */
-    ngOnInit() {
-        this.actionsList = this.eventDisplay.getInfoLogger().getInfoLoggerList();
-    }
-}
-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"]
-            },] }
-];
-InfoPanelOverlayComponent.ctorParameters = () => [
-    { type: EventDisplayService }
-];
-InfoPanelOverlayComponent.propDecorators = {
-    showInfoPanel: [{ type: Input }]
-};
-
-/**
- * Component for toggling info panel overlay
- */
-class InfoPanelComponent {
-    /**
-     * Create the info panel toggle
-     * @param overlay Info panel overlay containing logger data
-     */
-    constructor(overlay) {
-        this.overlay = overlay;
-        /** @ignore */
-        this.showInfoPanel = false;
-    }
-    /**
-     * Create the info panel overlay
-     */
-    ngOnInit() {
-        const overlayRef = this.overlay.create();
-        const overlayPortal = new ComponentPortal(InfoPanelOverlayComponent);
-        this.overlayWindow = overlayRef.attach(overlayPortal);
-        this.overlayWindow.instance.showInfoPanel = this.showInfoPanel;
-    }
-    /**
-     * Destroy the info panel overlay
-     */
-    ngOnDestroy() {
-        this.overlayWindow.destroy();
-    }
-    /**
-     * Toggle the info panel overlay
-     */
-    toggleOverlay() {
-        this.showInfoPanel = !this.showInfoPanel;
-        this.overlayWindow.instance.showInfoPanel = this.showInfoPanel;
-    }
-}
-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: [""]
-            },] }
-];
-InfoPanelComponent.ctorParameters = () => [
-    { type: Overlay }
-];
-
-var EventDataFormat;
-(function (EventDataFormat) {
-    EventDataFormat["JSON"] = "JSON";
-    EventDataFormat["JIVEXML"] = "JIVEXML";
-    EventDataFormat["IG"] = "IG";
-    EventDataFormat["ZIP"] = "ZIP";
-})(EventDataFormat || (EventDataFormat = {}));
-class ImportOption {
-    constructor(format, fileType, handler, accept) {
-        this.format = format;
-        this.fileType = fileType;
-        this.handler = handler;
-        this.accept = accept;
-    }
-}
-
-class IOOptionsDialogComponent {
-    constructor(eventDisplay, dialogRef) {
-        this.eventDisplay = eventDisplay;
-        this.dialogRef = dialogRef;
-        this.eventDataImportOptions = [EventDataFormat.JSON];
-        this.supportedEventDataFormats = [
-            new ImportOption(EventDataFormat.JSON, '.json', this.handleJSONEventDataInput.bind(this), 'application/json'),
-            new ImportOption(EventDataFormat.JIVEXML, '.xml', this.handleJiveXMLDataInput.bind(this), 'text/xml'),
-            new ImportOption(EventDataFormat.ZIP, '.zip', this.handleZipEventDataInput.bind(this), '.zip'),
-            new ImportOption(EventDataFormat.IG, '.ig', this.handleIgEventDataInput.bind(this), '.ig'),
-        ];
-    }
-    ngOnInit() {
-        this.eventDataOptionsWithHandler = this.supportedEventDataFormats.filter((eventDataFormat) => this.eventDataImportOptions.includes(eventDataFormat.format));
-        this.eventDataImportOptions.forEach((eventDataImportOption) => {
-            if (eventDataImportOption instanceof ImportOption) {
-                const importHandler = eventDataImportOption.handler.bind(this);
-                eventDataImportOption.handler = (files) => {
-                    importHandler(files);
-                    this.onClose();
-                };
-                this.eventDataOptionsWithHandler.push(eventDataImportOption);
-            }
-        });
-    }
-    getSupportedEventDataFormats() {
-        return this.eventDataImportOptions
-            .map((format) => {
-            if (format instanceof ImportOption) {
-                return format.format;
-            }
-            return format;
-        })
-            .filter((format) => format !== 'ZIP')
-            .join(', ');
-    }
-    onClose() {
-        this.dialogRef.close();
-    }
-    handleJSONEventDataInput(files) {
-        const callback = (content) => {
-            const json = typeof content === 'string' ? JSON.parse(content) : content;
-            this.eventDisplay.parsePhoenixEvents(json);
-        };
-        this.handleFileInput(files[0], 'json', callback);
-    }
-    handleJiveXMLDataInput(files) {
-        const callback = (content) => {
-            const jiveloader = new JiveXMLLoader();
-            jiveloader.process(content);
-            const eventData = jiveloader.getEventData();
-            this.eventDisplay.buildEventDataFromJSON(eventData);
-        };
-        this.handleFileInput(files[0], 'xml', callback);
-    }
-    handleOBJInput(files) {
-        const callback = (content, name) => {
-            this.eventDisplay.parseOBJGeometry(content, name);
-        };
-        this.handleFileInput(files[0], 'obj', callback);
-    }
-    handleSceneInput(files) {
-        const callback = (content) => {
-            this.eventDisplay.parsePhoenixDisplay(content);
-        };
-        this.handleFileInput(files[0], 'phnx', callback);
-    }
-    handleGLTFInput(files) {
-        const callback = (content, name) => {
-            this.eventDisplay.parseGLTFGeometry(content, name);
-        };
-        this.handleFileInput(files[0], 'gltf', callback);
-    }
-    handlePhoenixInput(files) {
-        const callback = (content) => {
-            this.eventDisplay.parsePhoenixDisplay(content);
-        };
-        this.handleFileInput(files[0], 'phnx', callback);
-    }
-    handleROOTInput(files) {
-        ScriptLoader.loadJSRootScripts().then((JSROOT) => {
-            const objectName = prompt('Enter object name in ROOT file');
-            JSROOT.openFile(files[0]).then((file) => {
-                file.readObject(objectName).then((obj) => {
-                    this.eventDisplay.loadJSONGeometry(JSROOT.GEO.build(obj, { dflt_colors: true }).toJSON(), files[0].name.split('.')[0]);
-                });
-            });
-        });
-        this.onClose();
-    }
-    handleRootJSONInput(files) {
-        ScriptLoader.loadJSRootScripts().then((JSROOT) => {
-            const callback = (content, name) => {
-                this.eventDisplay.loadJSONGeometry(JSROOT.GEO.build(JSROOT.parse(content), {
-                    dflt_colors: true,
-                }).toJSON(), name);
-            };
-            this.handleFileInput(files[0], 'gz', callback);
-        });
-    }
-    handleIgEventDataInput(files) {
-        const cmsLoader = new CMSLoader();
-        cmsLoader.readIgArchive(files[0], (allEvents) => {
-            const allEventsData = cmsLoader.getAllEventsData(allEvents);
-            this.eventDisplay.parsePhoenixEvents(allEventsData);
-            this.onClose();
-        });
-    }
-    handleZipEventDataInput(files) {
-        if (this.isFileOfExtension(files[0], 'zip')) {
-            this.handleZipInput(files[0], (allFilesWithData) => {
-                const allEventsObject = {};
-                // JSON event data
-                Object.keys(allFilesWithData)
-                    .filter((fileName) => fileName.endsWith('.json'))
-                    .forEach((fileName) => {
-                    Object.assign(allEventsObject, JSON.parse(allFilesWithData[fileName]));
-                });
-                // JiveXML event data
-                const jiveloader = new JiveXMLLoader();
-                Object.keys(allFilesWithData)
-                    .filter((fileName) => fileName.endsWith('.xml'))
-                    .forEach((fileName) => {
-                    jiveloader.process(allFilesWithData[fileName]);
-                    const eventData = jiveloader.getEventData();
-                    Object.assign(allEventsObject, { [fileName]: eventData });
-                });
-                this.eventDisplay.parsePhoenixEvents(allEventsObject);
-                this.onClose();
-            });
-        }
-        else {
-            console.error('Error: Invalid file format!');
-            this.eventDisplay.getInfoLogger().add('Invalid file format!', 'Error');
-        }
-    }
-    handleZipInput(file, callback) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const allFilesWithData = {};
-            // Using a try catch block to catch any errors in Promises
-            try {
-                const zipArchive = new JSZip();
-                yield zipArchive.loadAsync(file);
-                const allFiles = Object.keys(zipArchive.files);
-                for (const singleFile of allFiles) {
-                    const fileData = yield zipArchive.file(singleFile).async('string');
-                    allFilesWithData[singleFile] = fileData;
-                }
-                callback(allFilesWithData);
-            }
-            catch (error) {
-                console.error('Error while reading zip', error);
-                this.eventDisplay.getInfoLogger().add('Could not read zip file', 'Error');
-            }
-        });
-    }
-    handleFileInput(file, extension, callback) {
-        const reader = new FileReader();
-        if (this.isFileOfExtension(file, extension)) {
-            reader.onload = () => {
-                callback(reader.result.toString(), file.name.split('.')[0]);
-            };
-            reader.readAsText(file);
-        }
-        else {
-            console.error('Error: Invalid file format!');
-            this.eventDisplay.getInfoLogger().add('Invalid file format!', 'Error');
-        }
-        this.onClose();
-    }
-    isFileOfExtension(file, extension) {
-        return file.name.split('.').pop() === extension;
-    }
-    saveScene() {
-        this.eventDisplay.exportPhoenixDisplay();
-    }
-    exportOBJ() {
-        this.eventDisplay.exportToOBJ();
-    }
-}
-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"]
-            },] }
-];
-IOOptionsDialogComponent.ctorParameters = () => [
-    { type: EventDisplayService },
-    { type: MatDialogRef }
-];
-IOOptionsDialogComponent.propDecorators = {
-    eventDataImportOptions: [{ type: Input }]
-};
-
-class IoOptionsComponent {
-    constructor(dialog) {
-        this.dialog = dialog;
-        this.eventDataImportOptions = Object.values(EventDataFormat);
-    }
-    openIODialog() {
-        const dialogRef = this.dialog.open(IOOptionsDialogComponent, {
-            panelClass: 'dialog',
-        });
-        dialogRef.componentInstance.eventDataImportOptions =
-            this.eventDataImportOptions;
-    }
-}
-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: [""]
-            },] }
-];
-IoOptionsComponent.ctorParameters = () => [
-    { type: MatDialog }
-];
-IoOptionsComponent.propDecorators = {
-    eventDataImportOptions: [{ type: Input }]
-};
-
-class MainViewToggleComponent {
-    constructor(eventDisplay) {
-        this.eventDisplay = eventDisplay;
-        this.orthographicView = false;
-    }
-    switchMainView() {
-        this.orthographicView = !this.orthographicView;
-        this.eventDisplay
-            .getUIManager()
-            .toggleOrthographicView(this.orthographicView);
-    }
-}
-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: [""]
-            },] }
-];
-MainViewToggleComponent.ctorParameters = () => [
-    { type: EventDisplayService }
-];
-
-class MenuToggleComponent {
-    constructor() {
-        this.disabled = false;
-    }
-}
-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"]
-            },] }
-];
-MenuToggleComponent.propDecorators = {
-    icon: [{ type: Input }],
-    active: [{ type: Input }],
-    tooltip: [{ type: Input }],
-    disabled: [{ type: Input }]
-};
-
-class ObjectClippingComponent {
-    constructor(eventDisplay) {
-        this.eventDisplay = eventDisplay;
-        const stateManager = this.eventDisplay.getStateManager();
-        stateManager.clippingEnabled.onUpdate((clippingValue) => (this.clippingEnabled = clippingValue));
-        stateManager.clippingAngle.onUpdate((value) => (this.clippingAngle = value));
-    }
-    changeClippingAngle(change) {
-        const angle = change.value;
-        this.eventDisplay.getUIManager().rotateClipping(angle);
-    }
-    toggleClipping(change) {
-        const value = change.checked;
-        this.eventDisplay.getUIManager().setClipping(value);
-        this.clippingEnabled = value;
-    }
-}
-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"]
-            },] }
-];
-ObjectClippingComponent.ctorParameters = () => [
-    { type: EventDisplayService }
-];
-
-class ObjectSelectionOverlayComponent {
-    constructor(eventDisplay) {
-        this.eventDisplay = eventDisplay;
-        this.selectedObject = { name: 'Object', attributes: [] };
-    }
-    ngOnInit() {
-        this.eventDisplay.allowSelection(this.selectedObject);
-    }
-}
-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"]
-            },] }
-];
-ObjectSelectionOverlayComponent.ctorParameters = () => [
-    { type: EventDisplayService }
-];
-ObjectSelectionOverlayComponent.propDecorators = {
-    hiddenSelectedInfo: [{ type: Input }]
-};
-
-class ObjectSelectionComponent {
-    constructor(overlay, eventDisplay) {
-        this.overlay = overlay;
-        this.eventDisplay = eventDisplay;
-        // Attributes for displaying the information of selected objects
-        this.hiddenSelectedInfo = true;
-    }
-    ngOnInit() {
-        const overlayRef = this.overlay.create();
-        const overlayPortal = new ComponentPortal(ObjectSelectionOverlayComponent);
-        this.overlayWindow = overlayRef.attach(overlayPortal);
-        this.overlayWindow.instance.hiddenSelectedInfo = this.hiddenSelectedInfo;
-    }
-    ngOnDestroy() {
-        this.overlayWindow.destroy();
-    }
-    toggleOverlay() {
-        this.hiddenSelectedInfo = !this.hiddenSelectedInfo;
-        this.overlayWindow.instance.hiddenSelectedInfo = this.hiddenSelectedInfo;
-        this.eventDisplay.enableSelecting(!this.hiddenSelectedInfo);
-    }
-}
-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: [""]
-            },] }
-];
-ObjectSelectionComponent.ctorParameters = () => [
-    { type: Overlay },
-    { type: EventDisplayService }
-];
-
-/**
- * Component for overlay panel.
- */
-class OverlayComponent {
-    constructor() {
-        /** If the overlay is open or not. */
-        this.active = false;
-        /** If the overlay is resizable. */
-        this.resizable = false;
-        /** If the overlay body is transparent or not. */
-        this.transparentBody = false;
-        /** If the overlay body is visible or not. */
-        this.showBody = true;
-        /** Minimum resizable width. */
-        this.MIN_RES_WIDTH = 300;
-        /** Minimum resizable height */
-        this.MIN_RES_HEIGHT = 100;
-    }
-    /**
-     * Move the resizable handle to the bottom right after the component is created.
-     */
-    ngAfterViewInit() {
-        if (this.resizable) {
-            const resizeHandleElement = this.resizeHandleCorner.nativeElement;
-            resizeHandleElement.style.bottom = '0';
-            resizeHandleElement.style.right = '0';
-            new ResizeSensor(this.overlayCard.nativeElement, () => {
-                this.resetHandlePosition();
-            });
-            window.addEventListener('resize', () => {
-                this.resetHandlePosition();
-            });
-        }
-    }
-    /**
-     * Resize the overlay card when the resize handle is dragged.
-     */
-    onResize() {
-        const resizeHandleElement = this.resizeHandleCorner.nativeElement;
-        const overlayCardElement = this.overlayCard.nativeElement;
-        const dragRect = resizeHandleElement.getBoundingClientRect();
-        const overlayRect = overlayCardElement.getBoundingClientRect();
-        const width = dragRect.left - overlayRect.left + dragRect.width;
-        const height = dragRect.top - overlayRect.top + dragRect.height;
-        this.setHandleTransform(overlayRect, dragRect);
-        if (width > this.MIN_RES_WIDTH && height > this.MIN_RES_HEIGHT) {
-            overlayCardElement.style.width = width + 'px';
-            overlayCardElement.style.height = height + 'px';
-        }
-    }
-    /**
-     * Reset resize handle position.
-     */
-    resetHandlePosition() {
-        const resizeHandleElement = this.resizeHandleCorner.nativeElement;
-        this.setHandleTransform(this.overlayCard.nativeElement.getBoundingClientRect(), resizeHandleElement.getBoundingClientRect());
-        resizeHandleElement.style.bottom = null;
-        resizeHandleElement.style.right = null;
-    }
-    /**
-     * Set the position of the resize handle using transform3d.
-     * @param overlayRect Bounding client rectangle of the overlay card.
-     * @param dragRect Bounding client rectangle of the resize handle.
-     */
-    setHandleTransform(overlayRect, dragRect) {
-        const translateX = overlayRect.width - dragRect.width;
-        const translateY = overlayRect.height - dragRect.height;
-        this.resizeHandleCorner.nativeElement.style.transform = `translate3d(${translateX}px, ${translateY}px, 0)`;
-    }
-}
-OverlayComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-overlay',
-                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",
-                encapsulation: ViewEncapsulation.None,
-                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"]
-            },] }
-];
-OverlayComponent.propDecorators = {
-    overlayTitle: [{ type: Input }],
-    active: [{ type: Input }],
-    icon: [{ type: Input }],
-    resizable: [{ type: Input }],
-    transparentBody: [{ type: Input }],
-    overlayCard: [{ type: ViewChild, args: ['overlayCard',] }],
-    resizeHandleCorner: [{ type: ViewChild, args: ['resizeHandleCorner',] }]
-};
-
-class OverlayViewWindowComponent {
-    constructor(eventDisplay) {
-        this.eventDisplay = eventDisplay;
-        this.showOverlay = true;
-        this.transparentBody = false;
-        this.orthographicView = false;
-        this.overlayViewFixed = false;
-    }
-    ngAfterViewInit() {
-        const canvas = this.initializeCanvas(this.overlayWindow.nativeElement);
-        this.eventDisplay.setOverlayRenderer(canvas);
-    }
-    initializeCanvas(canvas) {
-        const width = window.innerWidth / 2.5;
-        const height = window.innerHeight / 2.5;
-        canvas.width = width;
-        canvas.height = height;
-        canvas.style.width = width.toString() + ' px';
-        canvas.style.height = height.toString() + ' px';
-        return canvas;
-    }
-    switchOverlayView() {
-        this.orthographicView = !this.orthographicView;
-        this.eventDisplay
-            .getUIManager()
-            .toggleOrthographicView(this.orthographicView);
-    }
-    fixOverlayView() {
-        this.overlayViewFixed = !this.overlayViewFixed;
-        this.eventDisplay.fixOverlayView(this.overlayViewFixed);
-    }
-    toggleBgTransparency() {
-        this.transparentBody = !this.transparentBody;
-    }
-}
-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"]
-            },] }
-];
-OverlayViewWindowComponent.ctorParameters = () => [
-    { type: EventDisplayService }
-];
-OverlayViewWindowComponent.propDecorators = {
-    showOverlay: [{ type: Input }],
-    overlayWindow: [{ type: ViewChild, args: ['overlayWindow',] }]
-};
-
-class OverlayViewComponent {
-    constructor(overlay) {
-        this.overlay = overlay;
-        this.showOverlay = false;
-    }
-    ngOnInit() {
-        const overlayRef = this.overlay.create();
-        const overlayPortal = new ComponentPortal(OverlayViewWindowComponent);
-        this.overlayWindow = overlayRef.attach(overlayPortal);
-        this.overlayWindow.instance.showOverlay = this.showOverlay;
-    }
-    ngOnDestroy() {
-        this.overlayWindow.destroy();
-    }
-    toggleOverlay() {
-        this.showOverlay = !this.showOverlay;
-        this.overlayWindow.instance.showOverlay = this.showOverlay;
-    }
-}
-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: [""]
-            },] }
-];
-OverlayViewComponent.ctorParameters = () => [
-    { type: Overlay }
-];
-
-class TreeMenuComponent {
-    constructor() {
-        this.rootNode = {
-            name: 'Atlas Detector',
-            geometryId: 'AtlasDetector',
-            children: [
-                {
-                    name: 'Magnet systems',
-                    geometryId: 'MagnetSys',
-                    children: [
-                        {
-                            name: 'Toroids',
-                            geometryId: 'Toroids',
-                        },
-                    ],
-                },
-                {
-                    name: 'Calorimeters',
-                    geometryId: 'CaloSys',
-                    children: [
-                        {
-                            name: 'LAr Barrel',
-                            geometryId: 'LAr Barrel',
-                        },
-                        {
-                            name: 'LAr EC1',
-                            geometryId: 'LAr EC1',
-                        },
-                        {
-                            name: 'LAr EC2',
-                            geometryId: 'LAr EC2',
-                        },
-                        {
-                            name: 'Tile Cal',
-                            geometryId: 'Tile Cal',
-                        },
-                    ],
-                },
-                {
-                    name: 'Inner detector',
-                    geometryId: 'InDetSys',
-                    children: [
-                        {
-                            name: 'Pixel',
-                            geometryId: 'Pixel',
-                        },
-                        {
-                            name: 'SCT',
-                            geometryId: 'SCT',
-                        },
-                        {
-                            name: 'TRT',
-                            geometryId: 'TRT',
-                        },
-                    ],
-                },
-            ],
-        };
-    }
-    ngOnInit() { }
-}
-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"]
-            },] }
-];
-TreeMenuComponent.ctorParameters = () => [];
-
-class TreeMenuItemComponent {
-    constructor(eventDisplay) {
-        this.eventDisplay = eventDisplay;
-        this.isExpanded = false;
-        this.visible = true;
-    }
-    toggleVisibility(visible) {
-        console.log("hi! it's " + this.node.name);
-        this.eventDisplay
-            .getUIManager()
-            .geometryVisibility(this.node.geometryId, visible);
-        this.visible = visible;
-        this.children.forEach((child) => child.toggleVisibility(visible));
-    }
-}
-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"]
-            },] }
-];
-TreeMenuItemComponent.ctorParameters = () => [
-    { type: EventDisplayService }
-];
-TreeMenuItemComponent.propDecorators = {
-    children: [{ type: ViewChildren, args: [TreeMenuItemComponent,] }],
-    node: [{ type: Input }]
-};
-
-class ViewOptionsComponent {
-    constructor(eventDisplay) {
-        this.eventDisplay = eventDisplay;
-    }
-    ngOnInit() {
-        this.views = this.eventDisplay.getUIManager().getPresetViews();
-    }
-    displayView($event, view) {
-        $event.stopPropagation();
-        this.eventDisplay.getUIManager().displayView(view);
-    }
-    setAxis(change) {
-        const value = change.checked;
-        this.eventDisplay.getUIManager().setShowAxis(value);
-    }
-    setGrid(change) {
-        const value = change.checked;
-        this.eventDisplay.getUIManager().setShowGrid(value);
-    }
-}
-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"]
-            },] }
-];
-ViewOptionsComponent.ctorParameters = () => [
-    { type: EventDisplayService }
-];
-
-class VrToggleComponent {
-    constructor(eventDisplay) {
-        var _a, _b, _c;
-        this.eventDisplay = eventDisplay;
-        this.vrSupported = false;
-        this.vrActive = false;
-        // NOTE: WebXR needs secure HTTPS context
-        // Query for permissions of XR before using it (not supported by browsers yet). See https://developer.mozilla.org/en-US/docs/Web/API/Permissions/query
-        (_c = (_b = (_a = navigator) === null || _a === void 0 ? void 0 : _a.xr) === null || _b === void 0 ? void 0 : _b.isSessionSupported) === null || _c === void 0 ? void 0 : _c.call(_b, VRManager.SESSION_TYPE).then((supported) => {
-            if (supported) {
-                this.vrSupported = true;
-            }
-        }).catch((err) => console.warn('Error in VR', err));
-    }
-    toggleVr() {
-        // If toggling VR on
-        if (!this.vrActive) {
-            this.eventDisplay.initXR(XRSessionType.VR, () => {
-                this.vrActive = false;
-                // Disable renderer XR and remove animation loop
-                this.eventDisplay.endXR(XRSessionType.VR);
-            });
-            this.vrActive = true;
-        }
-        else {
-            this.eventDisplay.endXR(XRSessionType.VR);
-            this.vrActive = false;
-        }
-    }
-}
-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: [""]
-            },] }
-];
-VrToggleComponent.ctorParameters = () => [
-    { type: EventDisplayService }
-];
-
-class ArToggleComponent {
-    constructor(eventDisplay) {
-        var _a, _b;
-        this.eventDisplay = eventDisplay;
-        this.arSupported = false;
-        this.arActive = false;
-        // NOTE: WebXR needs secure HTTPS context
-        // Query for permissions of XR before using it (not supported by browsers yet). See https://developer.mozilla.org/en-US/docs/Web/API/Permissions/query
-        (_b = (_a = navigator.xr) === null || _a === void 0 ? void 0 : _a.isSessionSupported) === null || _b === void 0 ? void 0 : _b.call(_a, ARManager.SESSION_TYPE).then((supported) => {
-            if (supported) {
-                this.arSupported = true;
-            }
-        }).catch((err) => console.warn('Error in AR', err));
-    }
-    toggleAr(enableDomOverlay = true) {
-        ARManager.enableDomOverlay = enableDomOverlay;
-        // If toggling AR on
-        if (!this.arActive) {
-            this.eventDisplay.initXR(XRSessionType.AR, () => {
-                this.arActive = false;
-                // Disable renderer XR and remove animation loop
-                this.eventDisplay.endXR(XRSessionType.AR);
-            });
-            this.arActive = true;
-        }
-        else {
-            this.eventDisplay.endXR(XRSessionType.AR);
-            this.arActive = false;
-        }
-    }
-}
-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: [""]
-            },] }
-];
-ArToggleComponent.ctorParameters = () => [
-    { type: EventDisplayService }
-];
-
-/**
- * Component for adding zoom controls for the main and overlay cameras.
- */
-class ZoomControlsComponent {
-    constructor(eventDisplay) {
-        this.eventDisplay = eventDisplay;
-        /** Factor to zoom by. */
-        this.zoomFactor = 1.1;
-        /** The speed and time of zoom. */
-        this.zoomTime = 200;
-    }
-    /**
-     * Zoom all the cameras by a specific zoom factor.
-     * The factor may either be greater (zoom in) or smaller (zoom out) than 1.
-     * @param zoomFactor The factor to zoom by.
-     */
-    zoomTo(zoomFactor) {
-        this.zoomTime =
-            this.zoomTime > 30 ? Math.floor(this.zoomTime / 1.1) : this.zoomTime;
-        this.eventDisplay.zoomTo(zoomFactor, this.zoomTime);
-        this.zoomTimeout = setTimeout(() => {
-            this.zoomTo(zoomFactor);
-        }, this.zoomTime);
-    }
-    /**
-     * Zoom the camera in.
-     * @param leftClick Whether the mouse click is left or not.
-     */
-    zoomIn(leftClick) {
-        if (leftClick) {
-            this.zoomTo(1 / this.zoomFactor);
-        }
-    }
-    /**
-     * Zoom the camera out.
-     * @param leftClick Whether the mouse click is left or not.s
-     */
-    zoomOut(leftClick) {
-        if (leftClick) {
-            this.zoomTo(this.zoomFactor);
-        }
-    }
-    /**
-     * Reset the zoom time which decreases upon hold and clear the zoom timeout.
-     */
-    clearZoom() {
-        this.zoomTime = 200;
-        clearTimeout(this.zoomTimeout);
-    }
-}
-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: [""]
-            },] }
-];
-ZoomControlsComponent.ctorParameters = () => [
-    { type: EventDisplayService }
-];
-
-class SSModeComponent {
-    constructor() {
-        this.ssMode = false;
-        this.onDocumentClick = () => {
-            var _a;
-            (_a = document.exitFullscreen) === null || _a === void 0 ? void 0 : _a.call(document);
-        };
-    }
-    ngOnInit() {
-        document.onfullscreenchange = () => {
-            if (!document.fullscreenElement) {
-                this.toggleSSMode();
-            }
-        };
-    }
-    toggleSSMode() {
-        var _a, _b;
-        this.ssMode = !this.ssMode;
-        document.body.classList.toggle('ss-mode');
-        if (this.ssMode) {
-            // WORKAROUND - Adding the event listener directly somehow calls it on the first click
-            setTimeout(() => {
-                document.addEventListener('click', this.onDocumentClick);
-                document.addEventListener('touchstart', this.onDocumentClick);
-            }, 1);
-            (_b = (_a = document.documentElement).requestFullscreen) === null || _b === void 0 ? void 0 : _b.call(_a);
-        }
-        else {
-            document.removeEventListener('click', this.onDocumentClick);
-            document.removeEventListener('touchstart', this.onDocumentClick);
-        }
-    }
-}
-SSModeComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-ss-mode',
-                template: "<app-menu-toggle\n  tooltip=\"Screenshot mode\"\n  [active]=\"ssMode\"\n  icon=\"ss-mode\"\n  (click)=\"toggleSSMode()\"\n>\n</app-menu-toggle>\n",
-                encapsulation: ViewEncapsulation.None,
-                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"]
-            },] }
-];
-
-class PerformanceToggleComponent {
-    constructor(eventDisplay) {
-        this.eventDisplay = eventDisplay;
-        this.performanceMode = false;
-    }
-    togglePerformance() {
-        this.performanceMode = !this.performanceMode;
-        this.eventDisplay.getThreeManager().setAntialiasing(!this.performanceMode);
-    }
-}
-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: [""]
-            },] }
-];
-PerformanceToggleComponent.ctorParameters = () => [
-    { type: EventDisplayService }
-];
-
-class UiMenuComponent {
-    constructor() {
-        this.eventDataImportOptions = Object.values(EventDataFormat);
-        this.animationPresets = defaultAnimationPresets;
-        this.hideUIMenu = false;
-    }
-}
-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"]
-            },] }
-];
-UiMenuComponent.propDecorators = {
-    eventDataImportOptions: [{ type: Input }],
-    animationPresets: [{ type: Input }]
-};
-
-class ShareLinkDialogComponent {
-    constructor(dialogRef) {
-        this.dialogRef = dialogRef;
-        this.urlOptions = Object.assign({}, phoenixURLOptions);
-        const locationHref = window.location.href;
-        const lastIndex = locationHref.lastIndexOf('?') === -1
-            ? locationHref.length
-            : locationHref.lastIndexOf('?');
-        this.baseLink = locationHref.slice(0, lastIndex);
-        this.shareLink = this.baseLink;
-        this.embedLink = this.getEmbedLink();
-    }
-    onClose() {
-        this.dialogRef.close();
-    }
-    getEmbedLink(urlParametersString = '') {
-        return `<iframe src="${this.baseLink}?embed=true${urlParametersString ? '&' : ''}${urlParametersString}"></iframe>`;
-    }
-    setOptionValue(option, value) {
-        this.urlOptions[option] = value;
-        this.onOptionsChange();
-    }
-    onOptionsChange() {
-        const urlParametersString = Object.getOwnPropertyNames(this.urlOptions)
-            .reduce((filteredOptions, option) => {
-            if (this.urlOptions[option]) {
-                filteredOptions.push(`${option}=${encodeURI(this.urlOptions[option])}`);
-            }
-            return filteredOptions;
-        }, [])
-            .join('&');
-        this.shareLink =
-            this.baseLink + (urlParametersString ? '?' : '') + urlParametersString;
-        this.embedLink = this.getEmbedLink(urlParametersString);
-    }
-    copyText(text, element) {
-        const inputElement = document.createElement('input');
-        document.body.appendChild(inputElement);
-        inputElement.value = text;
-        inputElement.select();
-        document.execCommand('copy');
-        document.body.removeChild(inputElement);
-        element.focus();
-        // Set text on copying
-        element.innerText = 'COPIED';
-        setTimeout(() => {
-            element.innerText = 'COPY';
-        }, 2000);
-    }
-}
-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 }}</span>\n      <button\n        class=\"share-box-copy\"\n        (click)=\"copyText(shareLink, $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  </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"]
-            },] }
-];
-ShareLinkDialogComponent.ctorParameters = () => [
-    { type: MatDialogRef }
-];
-
-class ShareLinkComponent {
-    constructor(dialog) {
-        this.dialog = dialog;
-    }
-    openShareLinkDialog() {
-        this.dialog.open(ShareLinkDialogComponent);
-    }
-}
-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: [""]
-            },] }
-];
-ShareLinkComponent.ctorParameters = () => [
-    { type: MatDialog }
-];
-
-class LoaderComponent {
-    constructor() {
-        this.loaded = false;
-    }
-}
-LoaderComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-loader',
-                template: "<div\n  class=\"\n    loader-wrapper\n    d-flex\n    position-absolute\n    flex-column\n    justify-content-center\n    align-items-center\n    w-100\n    h-100\n    text-center\n  \"\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;-webkit-animation:loader 2s infinite;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}@-webkit-keyframes loader{0%,to{transform:scale(.1) rotate(0)}95%{transform:scale(1) rotate(15deg)}}@keyframes loader{0%,to{transform:scale(.1) rotate(0)}95%{transform:scale(1) rotate(15deg)}}\n"]
-            },] }
-];
-LoaderComponent.propDecorators = {
-    loaded: [{ type: Input }],
-    progress: [{ type: Input }]
-};
-
-/**
- * Pipe for transforming selected object attributes to a better format.
- */
-class AttributePipe {
-    /**
-     * Transform the attribute to a better presentable format.
-     * @param value Value to be transformed.
-     * @param args Additional arguments.
-     * @returns The transformed value.
-     */
-    transform(value, args) {
-        let transformedValue = '';
-        if (Array.isArray(value)) {
-            transformedValue += '\n';
-            value.forEach((v) => (transformedValue += v + '\n'));
-        }
-        else {
-            transformedValue = value.toString();
-        }
-        return transformedValue;
-    }
-}
-AttributePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'attributePipe',
-            },] }
-];
-
-class EmbedMenuComponent {
-}
-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"]
-            },] }
-];
-
-class ExperimentLinkComponent {
-    ngOnInit() {
-        this.experimentLink = window.location.href.split('?')[0];
-    }
-    goToExperiment() {
-        window.open(this.experimentLink, '_blank');
-    }
-}
-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: [""]
-            },] }
-];
-
-const PHOENIX_COMPONENTS = [
-    NavComponent,
-    UiMenuComponent,
-    CollectionsInfoComponent,
-    MenuToggleComponent,
-    CollectionsInfoOverlayComponent,
-    IoOptionsComponent,
-    IOOptionsDialogComponent,
-    OverlayViewComponent,
-    AttributePipe,
-    ObjectSelectionComponent,
-    ObjectSelectionOverlayComponent,
-    EventSelectorComponent,
-    ObjectClippingComponent,
-    DarkThemeComponent,
-    AutoRotateComponent,
-    ViewOptionsComponent,
-    OverlayViewWindowComponent,
-    OverlayComponent,
-    ExperimentInfoComponent,
-    InfoPanelComponent,
-    InfoPanelOverlayComponent,
-    MainViewToggleComponent,
-    ZoomControlsComponent,
-    TreeMenuComponent,
-    TreeMenuItemComponent,
-    PhoenixMenuComponent,
-    PhoenixMenuItemComponent,
-    ConfigSliderComponent,
-    AnimateCameraComponent,
-    AnimateEventComponent,
-    VrToggleComponent,
-    ArToggleComponent,
-    SSModeComponent,
-    PerformanceToggleComponent,
-    LoaderComponent,
-    ShareLinkComponent,
-    ShareLinkDialogComponent,
-    EmbedMenuComponent,
-    ExperimentLinkComponent,
-];
-class PhoenixUIModule {
-}
-PhoenixUIModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [...PHOENIX_COMPONENTS],
-                imports: [
-                    CommonModule,
-                    RouterModule,
-                    DragDropModule,
-                    MatDialogModule,
-                    MatButtonModule,
-                    MatTooltipModule,
-                    OverlayModule,
-                    MatMenuModule,
-                    MatSliderModule,
-                    MatSlideToggleModule,
-                    MatCheckboxModule,
-                    MatIconModule,
-                    NgxSliderModule,
-                ],
-                entryComponents: [
-                    OverlayComponent,
-                    OverlayViewWindowComponent,
-                    IOOptionsDialogComponent,
-                    CollectionsInfoOverlayComponent,
-                    ObjectSelectionOverlayComponent,
-                    InfoPanelOverlayComponent,
-                ],
-                exports: [PHOENIX_COMPONENTS],
-            },] }
-];
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AnimateCameraComponent, AnimateEventComponent, ArToggleComponent, AutoRotateComponent, CollectionsInfoComponent, CollectionsInfoOverlayComponent, ConfigSliderComponent, DarkThemeComponent, EventDataFormat, EventDisplayService, EventSelectorComponent, ExperimentInfoComponent, 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, UiMenuComponent as ɵa, CollectionsInfoComponent as ɵb, ConfigSliderComponent as ɵba, AnimateCameraComponent as ɵbb, AnimateEventComponent as ɵbc, VrToggleComponent as ɵbd, ArToggleComponent as ɵbe, SSModeComponent as ɵbf, PerformanceToggleComponent as ɵbg, ShareLinkComponent as ɵbh, ShareLinkDialogComponent as ɵbi, EmbedMenuComponent as ɵbj, ExperimentLinkComponent as ɵbk, MenuToggleComponent as ɵc, CollectionsInfoOverlayComponent as ɵd, IoOptionsComponent as ɵe, IOOptionsDialogComponent as ɵf, OverlayViewComponent as ɵg, AttributePipe as ɵh, ObjectSelectionComponent as ɵi, ObjectSelectionOverlayComponent as ɵj, EventSelectorComponent as ɵk, ObjectClippingComponent as ɵl, DarkThemeComponent as ɵm, AutoRotateComponent as ɵn, ViewOptionsComponent as ɵo, OverlayViewWindowComponent as ɵp, OverlayComponent as ɵq, ExperimentInfoComponent as ɵr, InfoPanelComponent as ɵs, InfoPanelOverlayComponent as ɵt, MainViewToggleComponent as ɵu, ZoomControlsComponent as ɵv, TreeMenuComponent as ɵw, TreeMenuItemComponent as ɵx, PhoenixMenuComponent as ɵy, PhoenixMenuItemComponent as ɵz };
-//# sourceMappingURL=phoenix-ui-components.js.map