phoenix-ui-components 2.10.0 → 2.11.1

package/dist/esm2020/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.mjs

@@ -2,10 +2,10 @@ import { Component, Input } from '@angular/core';
 import { PrettySymbols, SceneManager, } from 'phoenix-event-display';
 import * as i0 from "@angular/core";
 import * as i1 from "../../../../services/event-display.service";
-import * as i2 from "../../overlay/overlay.component";
-import * as i3 from "@angular/material/checkbox";
-import * as i4 from "@angular/common";
-import * as i5 from "@angular/material/tooltip";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/tooltip";
+import * as i4 from "@angular/material/checkbox";
+import * as i5 from "../../overlay/overlay.component";
 export class CollectionsInfoOverlayComponent {
     constructor(elementRef, eventDisplay) {
         this.elementRef = elementRef;
@@ -70,9 +70,9 @@ export class CollectionsInfoOverlayComponent {
             .getObjectByName(SceneManager.EVENT_DATA_ID);
     }
 }
-CollectionsInfoOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CollectionsInfoOverlayComponent, deps: [{ token: i0.ElementRef }, { token: i1.EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-CollectionsInfoOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CollectionsInfoOverlayComponent, selector: "app-collections-info-overlay", inputs: { showObjectsInfo: "showObjectsInfo" }, ngImport: i0, template: "<!-- Show objects -->\n<app-overlay\n  overlayTitle=\"Collections Info\"\n  icon=\"info\"\n  [resizable]=\"true\"\n  [active]=\"showObjectsInfo\"\n>\n  <!-- Using ngIf to remove it from DOM since this panel requires heavy computing -->\n  <div *ngIf=\"showObjectsInfo\" class=\"collectionsInfo m-2\">\n    <div\n      class=\"collectionSelector mb-2 d-flex align-items-center\"\n      *ngIf=\"collections != null\"\n    >\n      <div class=\"d-flex align-items-center\">\n        <span>Choose a collection: </span>\n        <div class=\"eventSelector\">\n          <label for=\"event\">Event</label>\n          <select\n            id=\"collection\"\n            name=\"collection\"\n            (change)=\"changeCollection($event.target.value)\"\n          >\n            <option value=\"\" selected disabled hidden>Choose Collection</option>\n            <option *ngFor=\"let collection of collections\" [value]=\"collection\">\n              {{ collection }}\n            </option>\n          </select>\n        </div>\n        <mat-checkbox\n          *ngIf=\"showingCollection\"\n          (change)=\"toggleInvisible($event.checked)\"\n        >\n          Hide Invisible Objects\n        </mat-checkbox>\n      </div>\n    </div>\n\n    <div class=\"boxBody table-responsive\">\n      <table\n        id=\"collectionTable\"\n        class=\"table table-borderless table-sm\"\n        *ngIf=\"showingCollection\"\n      >\n        <thead>\n          <tr>\n            <th>No.</th>\n            <th>Selection</th>\n            <th>Label</th>\n            <th *ngFor=\"let column of collectionColumns\">\n              <div class=\"head-wrapper\">\n                <div>\n                  {{ getPrettySymbol(column) }}\n                </div>\n                <div class=\"sort-options\">\n                  <button\n                    class=\"icon-wrapper icon-button btn-blank up\"\n                    (click)=\"sort(column, 'dec')\"\n                  >\n                    <svg>\n                      <use href=\"assets/icons/expand.svg#expand\"></use>\n                    </svg>\n                  </button>\n                  <button\n                    class=\"icon-wrapper icon-button btn-blank\"\n                    (click)=\"sort(column, 'asc')\"\n                  >\n                    <svg>\n                      <use href=\"assets/icons/expand.svg#expand\"></use>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"let object of showingCollection; index as i\"\n            [attr.id]=\"object.uuid\"\n            [ngClass]=\"{\n              'active-object':\n                activeObject && activeObject.value === object.uuid,\n              'is-cut': object.isCut,\n              'd-none': object.isCut && hideInvisible\n            }\"\n          >\n            <td>#{{ i }}</td>\n            <td>\n              <div\n                *ngIf=\"object.uuid\"\n                class=\"row justify-content-center icon-wrapper\"\n              >\n                <button\n                  class=\"object-select btn-blank\"\n                  matTooltip=\"Move camera to object\"\n                  (click)=\"lookAtObject(object.uuid)\"\n                >\n                  <svg>\n                    <use href=\"assets/icons/views.svg#views\"></use>\n                  </svg>\n                </button>\n                <button\n                  class=\"object-select btn-blank\"\n                  matTooltip=\"Highlight object\"\n                  (click)=\"highlightObject(object.uuid)\"\n                >\n                  <svg>\n                    <use href=\"assets/icons/cursor.svg#cursor\"></use>\n                  </svg>\n                </button>\n              </div>\n            </td>\n            <td>\n              <div class=\"row m-0 add-label\">\n                <div class=\"col-10 p-0\">\n                  <input\n                    class=\"form-control form-control-sm\"\n                    type=\"text\"\n                    [id]=\"'label' + i\"\n                  />\n                </div>\n                <div class=\"col-2 p-0 pl-2 text-center icon-wrapper\">\n                  <button\n                    class=\"object-select btn-blank\"\n                    matTooltip=\"Add, update or remove object label\"\n                    (click)=\"addLabel(i, object.uuid)\"\n                  >\n                    <svg>\n                      <use href=\"assets/icons/update.svg#update\"></use>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </td>\n            <td *ngFor=\"let column of collectionColumns\">\n              {{ object[column] }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <p class=\"emptyBox\" *ngIf=\"!collections\">\n        Load event data to be able to display information about the collections\n        here.\n      </p>\n    </div>\n  </div>\n</app-overlay>\n", styles: [".collectionsInfo{height:95%}.collectionsInfo .collectionSelector{height:15%;min-height:2rem}.collectionsInfo .collectionSelector span{color:var(--phoenix-text-color-secondary);margin-right:1rem}.collectionsInfo .collectionSelector mat-checkbox{margin-left:1rem}.boxBody{height:85%;overflow:scroll}.boxBody p.emptyBox{max-width:21em}.boxBody .add-label{min-width:8rem}.boxBody .add-label input{padding:.1rem .3rem;font-size:.75rem}#collectionTable{position:relative;color:var(--phoenix-text-color-secondary)}#collectionTable thead tr th{position:sticky;top:0;z-index:100;background:var(--phoenix-background-color-secondary)}#collectionTable thead tr th .head-wrapper{display:flex;align-items:center}#collectionTable thead tr th .head-wrapper .sort-options{display:flex;flex-direction:row}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper{display:flex;width:1rem;height:1rem;padding:.2rem}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper.up{transform:rotate(180deg)}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper svg{width:100%;height:100%}#collectionTable tr *{padding-right:1.2rem}#collectionTable tr *:last-child{padding-right:0}#collectionTable tr.is-cut{opacity:.5}#collectionTable tr.active-object{color:var(--phoenix-background-color);background:var(--phoenix-text-color);box-shadow:0 0 15px var(--phoenix-text-color)}#collectionTable tr.active-object div.icon-wrapper{--phoenix-options-icon-path: var(--phoenix-background-color);--phoenix-options-icon-bg: var(--phoenix-text-color-hover)}#collectionTable tr.active-object .add-label input{--phoenix-text-color: var(--phoenix-background-color);--phoenix-background-color-tertiary: var( --phoenix-text-color-secondary );--phoenix-border: var(--phoenix-background-color)}#collectionTable td .object-select{position:relative;width:1.6rem;height:1.6rem;margin-right:.4em;text-align:center;background-color:var(--phoenix-options-icon-bg);border-radius:10px;cursor:pointer}#collectionTable td .object-select:last-child{margin-right:0}#collectionTable td .object-select:hover{border:1px solid var(--phoenix-options-icon-path)}#collectionTable td .object-select svg{position:absolute;top:0;left:0;padding:.4rem;width:100%;height:100%;vertical-align:top}.eventSelector{display:flex}.eventSelector label{display:none;color:var(--phoenix-text-color-secondary)}.eventSelector select{width:9rem;padding:5px 10px;font-size:12px;border:1px solid rgba(88,88,88,.08);box-shadow:var(--phoenix-icon-shadow);background-color:var(--phoenix-background-color-tertiary);color:var(--phoenix-text-color-secondary)}\n"], components: [{ type: i2.OverlayComponent, selector: "app-overlay", inputs: ["overlayTitle", "active", "icon", "resizable", "transparentBody"] }, { type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CollectionsInfoOverlayComponent, decorators: [{
+CollectionsInfoOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: CollectionsInfoOverlayComponent, deps: [{ token: i0.ElementRef }, { token: i1.EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+CollectionsInfoOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.4", type: CollectionsInfoOverlayComponent, selector: "app-collections-info-overlay", inputs: { showObjectsInfo: "showObjectsInfo" }, ngImport: i0, template: "<!-- Show objects -->\n<app-overlay\n  overlayTitle=\"Collections Info\"\n  icon=\"info\"\n  [resizable]=\"true\"\n  [active]=\"showObjectsInfo\"\n>\n  <!-- Using ngIf to remove it from DOM since this panel requires heavy computing -->\n  <div *ngIf=\"showObjectsInfo\" class=\"collectionsInfo m-2\">\n    <div\n      class=\"collectionSelector mb-2 d-flex align-items-center\"\n      *ngIf=\"collections != null\"\n    >\n      <div class=\"d-flex align-items-center\">\n        <span>Choose a collection: </span>\n        <div class=\"eventSelector\">\n          <label for=\"event\">Event</label>\n          <select\n            id=\"collection\"\n            name=\"collection\"\n            (change)=\"changeCollection($event.target.value)\"\n          >\n            <option value=\"\" selected disabled hidden>Choose Collection</option>\n            <option *ngFor=\"let collection of collections\" [value]=\"collection\">\n              {{ collection }}\n            </option>\n          </select>\n        </div>\n        <mat-checkbox\n          *ngIf=\"showingCollection\"\n          (change)=\"toggleInvisible($event.checked)\"\n        >\n          Hide Invisible Objects\n        </mat-checkbox>\n      </div>\n    </div>\n\n    <div class=\"boxBody table-responsive\">\n      <table\n        id=\"collectionTable\"\n        class=\"table table-borderless table-sm\"\n        *ngIf=\"showingCollection\"\n      >\n        <thead>\n          <tr>\n            <th>No.</th>\n            <th>Selection</th>\n            <th>Label</th>\n            <th *ngFor=\"let column of collectionColumns\">\n              <div class=\"head-wrapper\">\n                <div>\n                  {{ getPrettySymbol(column) }}\n                </div>\n                <div class=\"sort-options\">\n                  <button\n                    class=\"icon-wrapper icon-button btn-blank up\"\n                    (click)=\"sort(column, 'dec')\"\n                  >\n                    <svg>\n                      <use href=\"assets/icons/expand.svg#expand\"></use>\n                    </svg>\n                  </button>\n                  <button\n                    class=\"icon-wrapper icon-button btn-blank\"\n                    (click)=\"sort(column, 'asc')\"\n                  >\n                    <svg>\n                      <use href=\"assets/icons/expand.svg#expand\"></use>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"let object of showingCollection; index as i\"\n            [attr.id]=\"object.uuid\"\n            [ngClass]=\"{\n              'active-object':\n                activeObject && activeObject.value === object.uuid,\n              'is-cut': object.isCut,\n              'd-none': object.isCut && hideInvisible\n            }\"\n          >\n            <td>#{{ i }}</td>\n            <td>\n              <div\n                *ngIf=\"object.uuid\"\n                class=\"row justify-content-center icon-wrapper\"\n              >\n                <button\n                  class=\"object-select btn-blank\"\n                  matTooltip=\"Move camera to object\"\n                  (click)=\"lookAtObject(object.uuid)\"\n                >\n                  <svg>\n                    <use href=\"assets/icons/views.svg#views\"></use>\n                  </svg>\n                </button>\n                <button\n                  class=\"object-select btn-blank\"\n                  matTooltip=\"Highlight object\"\n                  (click)=\"highlightObject(object.uuid)\"\n                >\n                  <svg>\n                    <use href=\"assets/icons/cursor.svg#cursor\"></use>\n                  </svg>\n                </button>\n              </div>\n            </td>\n            <td>\n              <div class=\"row m-0 add-label\">\n                <div class=\"col-10 p-0\">\n                  <input\n                    class=\"form-control form-control-sm\"\n                    type=\"text\"\n                    [id]=\"'label' + i\"\n                  />\n                </div>\n                <div class=\"col-2 p-0 pl-2 text-center icon-wrapper\">\n                  <button\n                    class=\"object-select btn-blank\"\n                    matTooltip=\"Add, update or remove object label\"\n                    (click)=\"addLabel(i, object.uuid)\"\n                  >\n                    <svg>\n                      <use href=\"assets/icons/update.svg#update\"></use>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </td>\n            <td *ngFor=\"let column of collectionColumns\">\n              {{ object[column] }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <p class=\"emptyBox\" *ngIf=\"!collections\">\n        Load event data to be able to display information about the collections\n        here.\n      </p>\n    </div>\n  </div>\n</app-overlay>\n", styles: [".collectionsInfo{height:95%}.collectionsInfo .collectionSelector{height:15%;min-height:2rem}.collectionsInfo .collectionSelector span{color:var(--phoenix-text-color-secondary);margin-right:1rem}.collectionsInfo .collectionSelector mat-checkbox{margin-left:1rem}.boxBody{height:85%;overflow:scroll}.boxBody p.emptyBox{max-width:21em}.boxBody .add-label{min-width:8rem}.boxBody .add-label input{padding:.1rem .3rem;font-size:.75rem}#collectionTable{position:relative;color:var(--phoenix-text-color-secondary)}#collectionTable thead tr th{position:sticky;top:0;z-index:100;background:var(--phoenix-background-color-secondary)}#collectionTable thead tr th .head-wrapper{display:flex;align-items:center}#collectionTable thead tr th .head-wrapper .sort-options{display:flex;flex-direction:row}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper{display:flex;width:1rem;height:1rem;padding:.2rem}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper.up{transform:rotate(180deg)}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper svg{width:100%;height:100%}#collectionTable tr *{padding-right:1.2rem}#collectionTable tr *:last-child{padding-right:0}#collectionTable tr.is-cut{opacity:.5}#collectionTable tr.active-object{color:var(--phoenix-background-color);background:var(--phoenix-text-color);box-shadow:0 0 15px var(--phoenix-text-color)}#collectionTable tr.active-object div.icon-wrapper{--phoenix-options-icon-path: var(--phoenix-background-color);--phoenix-options-icon-bg: var(--phoenix-text-color-hover)}#collectionTable tr.active-object .add-label input{--phoenix-text-color: var(--phoenix-background-color);--phoenix-background-color-tertiary: var( --phoenix-text-color-secondary );--phoenix-border: var(--phoenix-background-color)}#collectionTable td .object-select{position:relative;width:1.6rem;height:1.6rem;margin-right:.4em;text-align:center;background-color:var(--phoenix-options-icon-bg);border-radius:10px;cursor:pointer}#collectionTable td .object-select:last-child{margin-right:0}#collectionTable td .object-select:hover{border:1px solid var(--phoenix-options-icon-path)}#collectionTable td .object-select svg{position:absolute;top:0;left:0;padding:.4rem;width:100%;height:100%;vertical-align:top}.eventSelector{display:flex}.eventSelector label{display:none;color:var(--phoenix-text-color-secondary)}.eventSelector select{width:9rem;padding:5px 10px;font-size:12px;border:1px solid rgba(88,88,88,.08);box-shadow:var(--phoenix-icon-shadow);background-color:var(--phoenix-background-color-tertiary);color:var(--phoenix-text-color-secondary)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.OverlayComponent, selector: "app-overlay", inputs: ["overlayTitle", "active", "icon", "resizable", "transparentBody"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: CollectionsInfoOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-collections-info-overlay', template: "<!-- Show objects -->\n<app-overlay\n  overlayTitle=\"Collections Info\"\n  icon=\"info\"\n  [resizable]=\"true\"\n  [active]=\"showObjectsInfo\"\n>\n  <!-- Using ngIf to remove it from DOM since this panel requires heavy computing -->\n  <div *ngIf=\"showObjectsInfo\" class=\"collectionsInfo m-2\">\n    <div\n      class=\"collectionSelector mb-2 d-flex align-items-center\"\n      *ngIf=\"collections != null\"\n    >\n      <div class=\"d-flex align-items-center\">\n        <span>Choose a collection: </span>\n        <div class=\"eventSelector\">\n          <label for=\"event\">Event</label>\n          <select\n            id=\"collection\"\n            name=\"collection\"\n            (change)=\"changeCollection($event.target.value)\"\n          >\n            <option value=\"\" selected disabled hidden>Choose Collection</option>\n            <option *ngFor=\"let collection of collections\" [value]=\"collection\">\n              {{ collection }}\n            </option>\n          </select>\n        </div>\n        <mat-checkbox\n          *ngIf=\"showingCollection\"\n          (change)=\"toggleInvisible($event.checked)\"\n        >\n          Hide Invisible Objects\n        </mat-checkbox>\n      </div>\n    </div>\n\n    <div class=\"boxBody table-responsive\">\n      <table\n        id=\"collectionTable\"\n        class=\"table table-borderless table-sm\"\n        *ngIf=\"showingCollection\"\n      >\n        <thead>\n          <tr>\n            <th>No.</th>\n            <th>Selection</th>\n            <th>Label</th>\n            <th *ngFor=\"let column of collectionColumns\">\n              <div class=\"head-wrapper\">\n                <div>\n                  {{ getPrettySymbol(column) }}\n                </div>\n                <div class=\"sort-options\">\n                  <button\n                    class=\"icon-wrapper icon-button btn-blank up\"\n                    (click)=\"sort(column, 'dec')\"\n                  >\n                    <svg>\n                      <use href=\"assets/icons/expand.svg#expand\"></use>\n                    </svg>\n                  </button>\n                  <button\n                    class=\"icon-wrapper icon-button btn-blank\"\n                    (click)=\"sort(column, 'asc')\"\n                  >\n                    <svg>\n                      <use href=\"assets/icons/expand.svg#expand\"></use>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"let object of showingCollection; index as i\"\n            [attr.id]=\"object.uuid\"\n            [ngClass]=\"{\n              'active-object':\n                activeObject && activeObject.value === object.uuid,\n              'is-cut': object.isCut,\n              'd-none': object.isCut && hideInvisible\n            }\"\n          >\n            <td>#{{ i }}</td>\n            <td>\n              <div\n                *ngIf=\"object.uuid\"\n                class=\"row justify-content-center icon-wrapper\"\n              >\n                <button\n                  class=\"object-select btn-blank\"\n                  matTooltip=\"Move camera to object\"\n                  (click)=\"lookAtObject(object.uuid)\"\n                >\n                  <svg>\n                    <use href=\"assets/icons/views.svg#views\"></use>\n                  </svg>\n                </button>\n                <button\n                  class=\"object-select btn-blank\"\n                  matTooltip=\"Highlight object\"\n                  (click)=\"highlightObject(object.uuid)\"\n                >\n                  <svg>\n                    <use href=\"assets/icons/cursor.svg#cursor\"></use>\n                  </svg>\n                </button>\n              </div>\n            </td>\n            <td>\n              <div class=\"row m-0 add-label\">\n                <div class=\"col-10 p-0\">\n                  <input\n                    class=\"form-control form-control-sm\"\n                    type=\"text\"\n                    [id]=\"'label' + i\"\n                  />\n                </div>\n                <div class=\"col-2 p-0 pl-2 text-center icon-wrapper\">\n                  <button\n                    class=\"object-select btn-blank\"\n                    matTooltip=\"Add, update or remove object label\"\n                    (click)=\"addLabel(i, object.uuid)\"\n                  >\n                    <svg>\n                      <use href=\"assets/icons/update.svg#update\"></use>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </td>\n            <td *ngFor=\"let column of collectionColumns\">\n              {{ object[column] }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <p class=\"emptyBox\" *ngIf=\"!collections\">\n        Load event data to be able to display information about the collections\n        here.\n      </p>\n    </div>\n  </div>\n</app-overlay>\n", styles: [".collectionsInfo{height:95%}.collectionsInfo .collectionSelector{height:15%;min-height:2rem}.collectionsInfo .collectionSelector span{color:var(--phoenix-text-color-secondary);margin-right:1rem}.collectionsInfo .collectionSelector mat-checkbox{margin-left:1rem}.boxBody{height:85%;overflow:scroll}.boxBody p.emptyBox{max-width:21em}.boxBody .add-label{min-width:8rem}.boxBody .add-label input{padding:.1rem .3rem;font-size:.75rem}#collectionTable{position:relative;color:var(--phoenix-text-color-secondary)}#collectionTable thead tr th{position:sticky;top:0;z-index:100;background:var(--phoenix-background-color-secondary)}#collectionTable thead tr th .head-wrapper{display:flex;align-items:center}#collectionTable thead tr th .head-wrapper .sort-options{display:flex;flex-direction:row}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper{display:flex;width:1rem;height:1rem;padding:.2rem}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper.up{transform:rotate(180deg)}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper svg{width:100%;height:100%}#collectionTable tr *{padding-right:1.2rem}#collectionTable tr *:last-child{padding-right:0}#collectionTable tr.is-cut{opacity:.5}#collectionTable tr.active-object{color:var(--phoenix-background-color);background:var(--phoenix-text-color);box-shadow:0 0 15px var(--phoenix-text-color)}#collectionTable tr.active-object div.icon-wrapper{--phoenix-options-icon-path: var(--phoenix-background-color);--phoenix-options-icon-bg: var(--phoenix-text-color-hover)}#collectionTable tr.active-object .add-label input{--phoenix-text-color: var(--phoenix-background-color);--phoenix-background-color-tertiary: var( --phoenix-text-color-secondary );--phoenix-border: var(--phoenix-background-color)}#collectionTable td .object-select{position:relative;width:1.6rem;height:1.6rem;margin-right:.4em;text-align:center;background-color:var(--phoenix-options-icon-bg);border-radius:10px;cursor:pointer}#collectionTable td .object-select:last-child{margin-right:0}#collectionTable td .object-select:hover{border:1px solid var(--phoenix-options-icon-path)}#collectionTable td .object-select svg{position:absolute;top:0;left:0;padding:.4rem;width:100%;height:100%;vertical-align:top}.eventSelector{display:flex}.eventSelector label{display:none;color:var(--phoenix-text-color-secondary)}.eventSelector select{width:9rem;padding:5px 10px;font-size:12px;border:1px solid rgba(88,88,88,.08);box-shadow:var(--phoenix-icon-shadow);background-color:var(--phoenix-background-color-tertiary);color:var(--phoenix-text-color-secondary)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.EventDisplayService }]; }, propDecorators: { showObjectsInfo: [{

package/dist/esm2020/components/ui-menu/collections-info/collections-info.component.mjs

@@ -23,10 +23,10 @@ export class CollectionsInfoComponent {
         this.overlayWindow.instance.showObjectsInfo = this.showObjectsInfo;
     }
 }
-CollectionsInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CollectionsInfoComponent, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-CollectionsInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CollectionsInfoComponent, selector: "app-collections-info", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Event data collections info\"\n  icon=\"info\"\n  [active]=\"showObjectsInfo\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: i2.MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CollectionsInfoComponent, decorators: [{
+CollectionsInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: CollectionsInfoComponent, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+CollectionsInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.4", type: CollectionsInfoComponent, selector: "app-collections-info", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Event data collections info\"\n  icon=\"info\"\n  [active]=\"showObjectsInfo\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: CollectionsInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-collections-info', template: "<app-menu-toggle\n  tooltip=\"Event data collections info\"\n  icon=\"info\"\n  [active]=\"showObjectsInfo\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""] }]
+            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" }]
         }], ctorParameters: function () { return [{ type: i1.Overlay }]; } });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sbGVjdGlvbnMtaW5mby5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWIvY29tcG9uZW50cy91aS1tZW51L2NvbGxlY3Rpb25zLWluZm8vY29sbGVjdGlvbnMtaW5mby5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9saWIvY29tcG9uZW50cy91aS1tZW51L2NvbGxlY3Rpb25zLWluZm8vY29sbGVjdGlvbnMtaW5mby5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFtQyxNQUFNLGVBQWUsQ0FBQztBQUUzRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDdEQsT0FBTyxFQUFFLCtCQUErQixFQUFFLE1BQU0sK0RBQStELENBQUM7Ozs7QUFPaEgsTUFBTSxPQUFPLHdCQUF3QjtJQUluQyxZQUFvQixPQUFnQjtRQUFoQixZQUFPLEdBQVAsT0FBTyxDQUFTO1FBSHBDLG9CQUFlLEdBQUcsS0FBSyxDQUFDO0lBR2UsQ0FBQztJQUV4QyxRQUFRO1FBQ04sTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUN6QyxNQUFNLGFBQWEsR0FBRyxJQUFJLGVBQWUsQ0FBQywrQkFBK0IsQ0FBQyxDQUFDO1FBQzNFLElBQUksQ0FBQyxhQUFhLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUN0RCxJQUFJLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQztJQUNyRSxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxhQUFhLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDL0IsQ0FBQztJQUVELGFBQWE7UUFDWCxJQUFJLENBQUMsZUFBZSxHQUFHLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQztRQUM3QyxJQUFJLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQztJQUNyRSxDQUFDOztxSEFwQlUsd0JBQXdCO3lHQUF4Qix3QkFBd0IsNERDVnJDLHNLQU9BOzJGREdhLHdCQUF3QjtrQkFMcEMsU0FBUzsrQkFDRSxzQkFBc0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgQ29tcG9uZW50UmVmLCBPbkRlc3Ryb3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE92ZXJsYXkgfSBmcm9tICdAYW5ndWxhci9jZGsvb3ZlcmxheSc7XG5pbXBvcnQgeyBDb21wb25lbnRQb3J0YWwgfSBmcm9tICdAYW5ndWxhci9jZGsvcG9ydGFsJztcbmltcG9ydCB7IENvbGxlY3Rpb25zSW5mb092ZXJsYXlDb21wb25lbnQgfSBmcm9tICcuL2NvbGxlY3Rpb25zLWluZm8tb3ZlcmxheS9jb2xsZWN0aW9ucy1pbmZvLW92ZXJsYXkuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLWNvbGxlY3Rpb25zLWluZm8nLFxuICB0ZW1wbGF0ZVVybDogJy4vY29sbGVjdGlvbnMtaW5mby5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NvbGxlY3Rpb25zLWluZm8uY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgQ29sbGVjdGlvbnNJbmZvQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBzaG93T2JqZWN0c0luZm8gPSBmYWxzZTtcbiAgb3ZlcmxheVdpbmRvdzogQ29tcG9uZW50UmVmPENvbGxlY3Rpb25zSW5mb092ZXJsYXlDb21wb25lbnQ+O1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgb3ZlcmxheTogT3ZlcmxheSkge31cblxuICBuZ09uSW5pdCgpIHtcbiAgICBjb25zdCBvdmVybGF5UmVmID0gdGhpcy5vdmVybGF5LmNyZWF0ZSgpO1xuICAgIGNvbnN0IG92ZXJsYXlQb3J0YWwgPSBuZXcgQ29tcG9uZW50UG9ydGFsKENvbGxlY3Rpb25zSW5mb092ZXJsYXlDb21wb25lbnQpO1xuICAgIHRoaXMub3ZlcmxheVdpbmRvdyA9IG92ZXJsYXlSZWYuYXR0YWNoKG92ZXJsYXlQb3J0YWwpO1xuICAgIHRoaXMub3ZlcmxheVdpbmRvdy5pbnN0YW5jZS5zaG93T2JqZWN0c0luZm8gPSB0aGlzLnNob3dPYmplY3RzSW5mbztcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMub3ZlcmxheVdpbmRvdy5kZXN0cm95KCk7XG4gIH1cblxuICB0b2dnbGVPdmVybGF5KCkge1xuICAgIHRoaXMuc2hvd09iamVjdHNJbmZvID0gIXRoaXMuc2hvd09iamVjdHNJbmZvO1xuICAgIHRoaXMub3ZlcmxheVdpbmRvdy5pbnN0YW5jZS5zaG93T2JqZWN0c0luZm8gPSB0aGlzLnNob3dPYmplY3RzSW5mbztcbiAgfVxufVxuIiwiPGFwcC1tZW51LXRvZ2dsZVxuICB0b29sdGlwPVwiRXZlbnQgZGF0YSBjb2xsZWN0aW9ucyBpbmZvXCJcbiAgaWNvbj1cImluZm9cIlxuICBbYWN0aXZlXT1cInNob3dPYmplY3RzSW5mb1wiXG4gIChjbGljayk9XCJ0b2dnbGVPdmVybGF5KClcIlxuPlxuPC9hcHAtbWVudS10b2dnbGU+XG4iXX0=

package/dist/esm2020/components/ui-menu/cycle-events/cycle-events.component.mjs

@@ -25,9 +25,9 @@ export class CycleEventsComponent {
         }, this.interval);
     }
 }
-CycleEventsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CycleEventsComponent, deps: [{ token: i1.EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-CycleEventsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CycleEventsComponent, selector: "app-cycle-events", inputs: { interval: "interval" }, ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Cycle through events\"\n  [active]=\"active\"\n  icon=\"cycle-events\"\n  (click)=\"toggleCycle()\"\n>\n</app-menu-toggle>\n", components: [{ type: i2.MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CycleEventsComponent, decorators: [{
+CycleEventsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: CycleEventsComponent, deps: [{ token: i1.EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+CycleEventsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.4", type: CycleEventsComponent, selector: "app-cycle-events", inputs: { interval: "interval" }, ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Cycle through events\"\n  [active]=\"active\"\n  icon=\"cycle-events\"\n  (click)=\"toggleCycle()\"\n>\n</app-menu-toggle>\n", dependencies: [{ kind: "component", type: i2.MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: CycleEventsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-cycle-events', template: "<app-menu-toggle\n  tooltip=\"Cycle through events\"\n  [active]=\"active\"\n  icon=\"cycle-events\"\n  (click)=\"toggleCycle()\"\n>\n</app-menu-toggle>\n" }]
         }], ctorParameters: function () { return [{ type: i1.EventDisplayService }]; }, propDecorators: { interval: [{

package/dist/esm2020/components/ui-menu/dark-theme/dark-theme.component.mjs

@@ -15,10 +15,10 @@ export class DarkThemeComponent {
         this.eventDisplay.getUIManager().setDarkTheme(this.darkTheme);
     }
 }
-DarkThemeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DarkThemeComponent, deps: [{ token: i1.EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-DarkThemeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: DarkThemeComponent, selector: "app-dark-theme", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Dark theme\"\n  [active]=\"darkTheme\"\n  icon=\"dark\"\n  (click)=\"setDarkTheme()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: i2.MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DarkThemeComponent, decorators: [{
+DarkThemeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: DarkThemeComponent, deps: [{ token: i1.EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+DarkThemeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.4", type: DarkThemeComponent, selector: "app-dark-theme", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Dark theme\"\n  [active]=\"darkTheme\"\n  icon=\"dark\"\n  (click)=\"setDarkTheme()\"\n>\n</app-menu-toggle>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: DarkThemeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dark-theme', template: "<app-menu-toggle\n  tooltip=\"Dark theme\"\n  [active]=\"darkTheme\"\n  icon=\"dark\"\n  (click)=\"setDarkTheme()\"\n>\n</app-menu-toggle>\n", styles: [""] }]
+            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" }]
         }], ctorParameters: function () { return [{ type: i1.EventDisplayService }]; } });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGFyay10aGVtZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWIvY29tcG9uZW50cy91aS1tZW51L2RhcmstdGhlbWUvZGFyay10aGVtZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9saWIvY29tcG9uZW50cy91aS1tZW51L2RhcmstdGhlbWUvZGFyay10aGVtZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7O0FBUWxELE1BQU0sT0FBTyxrQkFBa0I7SUFHN0IsWUFBb0IsWUFBaUM7UUFBakMsaUJBQVksR0FBWixZQUFZLENBQXFCO1FBRnJELGNBQVMsR0FBRyxLQUFLLENBQUM7SUFFc0MsQ0FBQztJQUV6RCxRQUFRO1FBQ04sSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLFlBQVksRUFBRSxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQ25FLENBQUM7SUFFRCxZQUFZO1FBQ1YsSUFBSSxDQUFDLFNBQVMsR0FBRyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUM7UUFDakMsSUFBSSxDQUFDLFlBQVksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ2hFLENBQUM7OytHQVpVLGtCQUFrQjttR0FBbEIsa0JBQWtCLHNEQ1IvQiw4SUFPQTsyRkRDYSxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UsZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEV2ZW50RGlzcGxheVNlcnZpY2UgfSBmcm9tICcuLi8uLi8uLi9zZXJ2aWNlcy9ldmVudC1kaXNwbGF5LnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtZGFyay10aGVtZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9kYXJrLXRoZW1lLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZGFyay10aGVtZS5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBEYXJrVGhlbWVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBkYXJrVGhlbWUgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGV2ZW50RGlzcGxheTogRXZlbnREaXNwbGF5U2VydmljZSkge31cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmRhcmtUaGVtZSA9IHRoaXMuZXZlbnREaXNwbGF5LmdldFVJTWFuYWdlcigpLmdldERhcmtUaGVtZSgpO1xuICB9XG5cbiAgc2V0RGFya1RoZW1lKCkge1xuICAgIHRoaXMuZGFya1RoZW1lID0gIXRoaXMuZGFya1RoZW1lO1xuICAgIHRoaXMuZXZlbnREaXNwbGF5LmdldFVJTWFuYWdlcigpLnNldERhcmtUaGVtZSh0aGlzLmRhcmtUaGVtZSk7XG4gIH1cbn1cbiIsIjxhcHAtbWVudS10b2dnbGVcbiAgdG9vbHRpcD1cIkRhcmsgdGhlbWVcIlxuICBbYWN0aXZlXT1cImRhcmtUaGVtZVwiXG4gIGljb249XCJkYXJrXCJcbiAgKGNsaWNrKT1cInNldERhcmtUaGVtZSgpXCJcbj5cbjwvYXBwLW1lbnUtdG9nZ2xlPlxuIl19

package/dist/esm2020/components/ui-menu/event-data-explorer/event-data-explorer-dialog/event-data-explorer-dialog.component.mjs

@@ -5,11 +5,11 @@ import { FileNode } from '../../../file-explorer/file-explorer.component';
 import * as i0 from "@angular/core";
 import * as i1 from "../../../../services/event-display.service";
 import * as i2 from "@angular/material/dialog";
-import * as i3 from "../../../ring-loader/ring-loader.component";
-import * as i4 from "@angular/material/tabs";
-import * as i5 from "../../../file-explorer/file-explorer.component";
-import * as i6 from "@angular/material/button";
-import * as i7 from "@angular/common";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/material/button";
+import * as i5 from "@angular/material/tabs";
+import * as i6 from "../../../file-explorer/file-explorer.component";
+import * as i7 from "../../../ring-loader/ring-loader.component";
 const supportFileTypes = ['json', 'xml'];
 export class EventDataExplorerDialogComponent {
     constructor(eventDisplay, dialogRef, dialogData) {
@@ -94,9 +94,9 @@ export class EventDataExplorerDialogComponent {
         return rootNode;
     }
 }
-EventDataExplorerDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EventDataExplorerDialogComponent, deps: [{ token: i1.EventDisplayService }, { token: i2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-EventDataExplorerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: EventDataExplorerDialogComponent, selector: "app-event-data-explorer-dialog", ngImport: i0, template: "<div class=\"dialog\">\n  <div class=\"d-flex\">\n    <h1 mat-dialog-title>Event data from directory</h1>\n    <app-ring-loader *ngIf=\"loading\"></app-ring-loader>\n  </div>\n  <div mat-dialog-content class=\"dialog-content\">\n    <div *ngIf=\"error\">Error processing request.</div>\n    <mat-tab-group\n      *ngIf=\"!error\"\n      mat-align-tabs=\"start\"\n      animationDuration=\"0ms\"\n      disableRipple\n      color=\"transparent\"\n    >\n      <mat-tab label=\"Event data\">\n        <div class=\"py-3\">\n          <app-file-explorer\n            [rootFileNode]=\"eventDataFileNode\"\n            (onFileSelect)=\"loadEvent($event)\"\n          ></app-file-explorer>\n        </div>\n      </mat-tab>\n      <mat-tab label=\"Config\">\n        <div class=\"py-3\">\n          <app-file-explorer\n            [rootFileNode]=\"configFileNode\"\n            (onFileSelect)=\"loadConfig($event)\"\n          ></app-file-explorer>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button (click)=\"onClose()\" cdkFocusInitial>Close</button>\n  </div>\n</div>\n", styles: [".dialog{width:30rem;max-width:95%}.file-path-button{width:100%;color:var(--phoenix-text-color);background:var(--phoenix-background-color-tertiary);text-align:left;border-radius:1rem;margin-bottom:.5rem;padding:.5rem 1rem}.file-path-button:last-child{margin-bottom:0}.file-path-button:hover{background:var(--phoenix-background-color-secondary)}.file-path-button:focus{border:1px solid var(--phoenix-text-color-secondary);box-shadow:none}\n"], components: [{ type: i3.RingLoaderComponent, selector: "app-ring-loader" }, { type: i4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: i5.FileExplorerComponent, selector: "app-file-explorer", inputs: ["rootFileNode"], outputs: ["onFileSelect"] }, { type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EventDataExplorerDialogComponent, decorators: [{
+EventDataExplorerDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: EventDataExplorerDialogComponent, deps: [{ token: i1.EventDisplayService }, { token: i2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+EventDataExplorerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.4", type: EventDataExplorerDialogComponent, selector: "app-event-data-explorer-dialog", ngImport: i0, template: "<div class=\"dialog\">\n  <div class=\"d-flex\">\n    <h1 mat-dialog-title>Event data from directory</h1>\n    <app-ring-loader *ngIf=\"loading\"></app-ring-loader>\n  </div>\n  <div mat-dialog-content class=\"dialog-content\">\n    <div *ngIf=\"error\">Error processing request.</div>\n    <mat-tab-group\n      *ngIf=\"!error\"\n      mat-align-tabs=\"start\"\n      animationDuration=\"0ms\"\n      disableRipple\n      color=\"transparent\"\n    >\n      <mat-tab label=\"Event data\">\n        <div class=\"py-3\">\n          <app-file-explorer\n            [rootFileNode]=\"eventDataFileNode\"\n            (onFileSelect)=\"loadEvent($event)\"\n          ></app-file-explorer>\n        </div>\n      </mat-tab>\n      <mat-tab label=\"Config\">\n        <div class=\"py-3\">\n          <app-file-explorer\n            [rootFileNode]=\"configFileNode\"\n            (onFileSelect)=\"loadConfig($event)\"\n          ></app-file-explorer>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button (click)=\"onClose()\" cdkFocusInitial>Close</button>\n  </div>\n</div>\n", styles: [".dialog{width:30rem;max-width:95%}.file-path-button{width:100%;color:var(--phoenix-text-color);background:var(--phoenix-background-color-tertiary);text-align:left;border-radius:1rem;margin-bottom:.5rem;padding:.5rem 1rem}.file-path-button:last-child{margin-bottom:0}.file-path-button:hover{background:var(--phoenix-background-color-secondary)}.file-path-button:focus{border:1px solid var(--phoenix-text-color-secondary);box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.FileExplorerComponent, selector: "app-file-explorer", inputs: ["rootFileNode"], outputs: ["onFileSelect"] }, { kind: "component", type: i7.RingLoaderComponent, selector: "app-ring-loader" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: EventDataExplorerDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-event-data-explorer-dialog', template: "<div class=\"dialog\">\n  <div class=\"d-flex\">\n    <h1 mat-dialog-title>Event data from directory</h1>\n    <app-ring-loader *ngIf=\"loading\"></app-ring-loader>\n  </div>\n  <div mat-dialog-content class=\"dialog-content\">\n    <div *ngIf=\"error\">Error processing request.</div>\n    <mat-tab-group\n      *ngIf=\"!error\"\n      mat-align-tabs=\"start\"\n      animationDuration=\"0ms\"\n      disableRipple\n      color=\"transparent\"\n    >\n      <mat-tab label=\"Event data\">\n        <div class=\"py-3\">\n          <app-file-explorer\n            [rootFileNode]=\"eventDataFileNode\"\n            (onFileSelect)=\"loadEvent($event)\"\n          ></app-file-explorer>\n        </div>\n      </mat-tab>\n      <mat-tab label=\"Config\">\n        <div class=\"py-3\">\n          <app-file-explorer\n            [rootFileNode]=\"configFileNode\"\n            (onFileSelect)=\"loadConfig($event)\"\n          ></app-file-explorer>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button (click)=\"onClose()\" cdkFocusInitial>Close</button>\n  </div>\n</div>\n", styles: [".dialog{width:30rem;max-width:95%}.file-path-button{width:100%;color:var(--phoenix-text-color);background:var(--phoenix-background-color-tertiary);text-align:left;border-radius:1rem;margin-bottom:.5rem;padding:.5rem 1rem}.file-path-button:last-child{margin-bottom:0}.file-path-button:hover{background:var(--phoenix-background-color-secondary)}.file-path-button:focus{border:1px solid var(--phoenix-text-color-secondary);box-shadow:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.EventDisplayService }, { type: i2.MatDialogRef }, { type: undefined, decorators: [{

package/dist/esm2020/components/ui-menu/event-data-explorer/event-data-explorer.component.mjs

@@ -15,11 +15,11 @@ export class EventDataExplorerComponent {
         });
     }
 }
-EventDataExplorerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EventDataExplorerComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-EventDataExplorerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: EventDataExplorerComponent, selector: "app-event-data-explorer", inputs: { apiURL: "apiURL" }, ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Browse events in data directory\"\n  icon=\"server\"\n  [active]=\"false\"\n  (click)=\"openEventDataExplorerDialog()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: i2.MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EventDataExplorerComponent, decorators: [{
+EventDataExplorerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: EventDataExplorerComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+EventDataExplorerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.4", type: EventDataExplorerComponent, selector: "app-event-data-explorer", inputs: { apiURL: "apiURL" }, ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Browse events in data directory\"\n  icon=\"server\"\n  [active]=\"false\"\n  (click)=\"openEventDataExplorerDialog()\"\n>\n</app-menu-toggle>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: EventDataExplorerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-event-data-explorer', template: "<app-menu-toggle\n  tooltip=\"Browse events in data directory\"\n  icon=\"server\"\n  [active]=\"false\"\n  (click)=\"openEventDataExplorerDialog()\"\n>\n</app-menu-toggle>\n", styles: [""] }]
+            args: [{ selector: 'app-event-data-explorer', template: "<app-menu-toggle\n  tooltip=\"Browse events in data directory\"\n  icon=\"server\"\n  [active]=\"false\"\n  (click)=\"openEventDataExplorerDialog()\"\n>\n</app-menu-toggle>\n" }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { apiURL: [{
                 type: Input
             }] } });

package/dist/esm2020/components/ui-menu/event-selector/event-selector.component.mjs

@@ -15,9 +15,9 @@ export class EventSelectorComponent {
         this.eventDisplay.loadEvent(value);
     }
 }
-EventSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EventSelectorComponent, deps: [{ token: i1.EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-EventSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: EventSelectorComponent, selector: "app-event-selector", ngImport: i0, template: "<div\n  class=\"eventSelector mx-2\"\n  *ngIf=\"events != null\"\n  matTooltip=\"Event selector\"\n  matTooltipPosition=\"above\"\n>\n  <select name=\"event\" (change)=\"changeEvent($event)\">\n    <option *ngFor=\"let event of events\" [value]=\"event\">\n      {{ event }}\n    </option>\n  </select>\n</div>\n", styles: [".eventSelector select{width:9rem;padding:5px 10px;font-size:12px;border:1px solid rgba(88,88,88,.08);box-shadow:var(--phoenix-icon-shadow);background-color:var(--phoenix-background-color-tertiary);color:var(--phoenix-text-color-secondary)}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EventSelectorComponent, decorators: [{
+EventSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: EventSelectorComponent, deps: [{ token: i1.EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+EventSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.4", type: EventSelectorComponent, selector: "app-event-selector", ngImport: i0, template: "<div\n  class=\"eventSelector mx-2\"\n  *ngIf=\"events != null\"\n  matTooltip=\"Event selector\"\n  matTooltipPosition=\"above\"\n>\n  <select name=\"event\" (change)=\"changeEvent($event)\">\n    <option *ngFor=\"let event of events\" [value]=\"event\">\n      {{ event }}\n    </option>\n  </select>\n</div>\n", styles: [".eventSelector select{width:9rem;padding:5px 10px;font-size:12px;border:1px solid rgba(88,88,88,.08);box-shadow:var(--phoenix-icon-shadow);background-color:var(--phoenix-background-color-tertiary);color:var(--phoenix-text-color-secondary)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: EventSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-event-selector', template: "<div\n  class=\"eventSelector mx-2\"\n  *ngIf=\"events != null\"\n  matTooltip=\"Event selector\"\n  matTooltipPosition=\"above\"\n>\n  <select name=\"event\" (change)=\"changeEvent($event)\">\n    <option *ngFor=\"let event of events\" [value]=\"event\">\n      {{ event }}\n    </option>\n  </select>\n</div>\n", styles: [".eventSelector select{width:9rem;padding:5px 10px;font-size:12px;border:1px solid rgba(88,88,88,.08);box-shadow:var(--phoenix-icon-shadow);background-color:var(--phoenix-background-color-tertiary);color:var(--phoenix-text-color-secondary)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.EventDisplayService }]; } });

package/dist/esm2020/components/ui-menu/experiment-info/experiment-info.component.mjs

@@ -1,8 +1,8 @@
 import { Component, Input } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "../../../services/event-display.service";
-import * as i2 from "@angular/cdk/drag-drop";
-import * as i3 from "@angular/common";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/cdk/drag-drop";
 export class ExperimentInfoComponent {
     constructor(eventDisplay) {
         this.eventDisplay = eventDisplay;
@@ -13,9 +13,9 @@ export class ExperimentInfoComponent {
         });
     }
 }
-ExperimentInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ExperimentInfoComponent, deps: [{ token: i1.EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-ExperimentInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ExperimentInfoComponent, selector: "app-experiment-info", inputs: { url: "url", logo: "logo", tagline: "tagline" }, ngImport: i0, template: "<div id=\"experimentInfo\" class=\"experimentInfo\" cdkDrag cdkDragBoundary=\"body\">\n  <a\n    class=\"experimentLogoWrapper\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    *ngIf=\"url\"\n    [href]=\"url\"\n  >\n    <img class=\"experimentLogo\" [src]=\"logo\" alt=\"\" />\n  </a>\n  <div class=\"textInfo\">\n    <p *ngIf=\"tagline\">\n      <b>{{ tagline }}</b>\n    </p>\n    <p *ngFor=\"let infoField of experimentInfo\">\n      <ng-container *ngIf=\"infoField.label\">\n        <b>{{ infoField.label }}: </b>{{ infoField.value }}\n      </ng-container>\n      <ng-container *ngIf=\"!infoField.label\">\n        {{ infoField }}\n      </ng-container>\n    </p>\n  </div>\n</div>\n", styles: [".experimentInfo{position:absolute;top:5rem;left:1rem;display:flex;flex-direction:row;justify-items:flex-end;justify-content:flex-end;align-items:center;align-content:center;cursor:move}.experimentLogoWrapper{width:6rem}.experimentLogoWrapper .experimentLogo{width:100%;height:100%}.textInfo{margin-left:1rem}.textInfo p{color:var(--phoenix-text-color-secondary);font-size:.8rem;margin-bottom:.5rem;-webkit-user-select:none;user-select:none}@media screen and (max-width: 768px){.experimentInfo{top:4rem;max-width:40%}.experimentLogoWrapper{height:4rem}.textInfo{display:none}}\n"], directives: [{ type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ExperimentInfoComponent, decorators: [{
+ExperimentInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: ExperimentInfoComponent, deps: [{ token: i1.EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+ExperimentInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.4", type: ExperimentInfoComponent, selector: "app-experiment-info", inputs: { url: "url", logo: "logo", tagline: "tagline" }, ngImport: i0, template: "<div id=\"experimentInfo\" class=\"experimentInfo\" cdkDrag cdkDragBoundary=\"body\">\n  <a\n    class=\"experimentLogoWrapper\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    *ngIf=\"url\"\n    [href]=\"url\"\n  >\n    <img class=\"experimentLogo\" [src]=\"logo\" alt=\"\" />\n  </a>\n  <div class=\"textInfo\">\n    <p *ngIf=\"tagline\">\n      <b>{{ tagline }}</b>\n    </p>\n    <p *ngFor=\"let infoField of experimentInfo\">\n      <ng-container *ngIf=\"infoField.label\">\n        <b>{{ infoField.label }}: </b>{{ infoField.value }}\n      </ng-container>\n      <ng-container *ngIf=\"!infoField.label\">\n        {{ infoField }}\n      </ng-container>\n    </p>\n  </div>\n</div>\n", styles: [".experimentInfo{position:absolute;top:5rem;left:1rem;display:flex;flex-direction:row;justify-items:flex-end;justify-content:flex-end;align-items:center;align-content:center;cursor:move}.experimentLogoWrapper{width:6rem}.experimentLogoWrapper .experimentLogo{width:100%;height:100%}.textInfo{margin-left:1rem}.textInfo p{color:var(--phoenix-text-color-secondary);font-size:.8rem;margin-bottom:.5rem;-webkit-user-select:none;user-select:none}@media screen and (max-width: 768px){.experimentInfo{top:4rem;max-width:40%}.experimentLogoWrapper{height:4rem}.textInfo{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: ExperimentInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-experiment-info', template: "<div id=\"experimentInfo\" class=\"experimentInfo\" cdkDrag cdkDragBoundary=\"body\">\n  <a\n    class=\"experimentLogoWrapper\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    *ngIf=\"url\"\n    [href]=\"url\"\n  >\n    <img class=\"experimentLogo\" [src]=\"logo\" alt=\"\" />\n  </a>\n  <div class=\"textInfo\">\n    <p *ngIf=\"tagline\">\n      <b>{{ tagline }}</b>\n    </p>\n    <p *ngFor=\"let infoField of experimentInfo\">\n      <ng-container *ngIf=\"infoField.label\">\n        <b>{{ infoField.label }}: </b>{{ infoField.value }}\n      </ng-container>\n      <ng-container *ngIf=\"!infoField.label\">\n        {{ infoField }}\n      </ng-container>\n    </p>\n  </div>\n</div>\n", styles: [".experimentInfo{position:absolute;top:5rem;left:1rem;display:flex;flex-direction:row;justify-items:flex-end;justify-content:flex-end;align-items:center;align-content:center;cursor:move}.experimentLogoWrapper{width:6rem}.experimentLogoWrapper .experimentLogo{width:100%;height:100%}.textInfo{margin-left:1rem}.textInfo p{color:var(--phoenix-text-color-secondary);font-size:.8rem;margin-bottom:.5rem;-webkit-user-select:none;user-select:none}@media screen and (max-width: 768px){.experimentInfo{top:4rem;max-width:40%}.experimentLogoWrapper{height:4rem}.textInfo{display:none}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.EventDisplayService }]; }, propDecorators: { url: [{

package/dist/esm2020/components/ui-menu/info-panel/info-panel-overlay/info-panel-overlay.component.mjs

@@ -2,8 +2,8 @@ import { Component, Input } from '@angular/core';
 import packageJson from 'phoenix-event-display/package.json';
 import * as i0 from "@angular/core";
 import * as i1 from "../../../../services/event-display.service";
-import * as i2 from "../../overlay/overlay.component";
-import * as i3 from "@angular/common";
+import * as i2 from "@angular/common";
+import * as i3 from "../../overlay/overlay.component";
 /**
  * Component for displaying information from the logger
  */
@@ -26,9 +26,9 @@ export class InfoPanelOverlayComponent {
         this.actionsList = this.eventDisplay.getInfoLogger().getInfoLoggerList();
     }
 }
-InfoPanelOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: InfoPanelOverlayComponent, deps: [{ token: i1.EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-InfoPanelOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: InfoPanelOverlayComponent, selector: "app-info-panel-overlay", inputs: { showInfoPanel: "showInfoPanel" }, ngImport: i0, template: "<app-overlay\n  overlayTitle=\"Info Panel\"\n  icon=\"info-panel\"\n  [resizable]=\"true\"\n  [active]=\"showInfoPanel\"\n>\n  <ul class=\"list-group list-group-flush\">\n    <li class=\"list-group-item\">\n      <!-- Show Phoenix Current Version (ON by Default) -->\n      Phoenix Version: {{ version }}\n    </li>\n    <li class=\"list-group-item\" *ngIf=\"actionsList.length === 0\">\n      No actions.\n    </li>\n    <li class=\"list-group-item\" *ngFor=\"let action of actionsList\">\n      {{ action }}\n    </li>\n  </ul>\n</app-overlay>\n", styles: [".list-group-item{font-size:.8rem;padding:.5rem 1rem}\n"], components: [{ type: i2.OverlayComponent, selector: "app-overlay", inputs: ["overlayTitle", "active", "icon", "resizable", "transparentBody"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: InfoPanelOverlayComponent, decorators: [{
+InfoPanelOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: InfoPanelOverlayComponent, deps: [{ token: i1.EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
+InfoPanelOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.4", type: InfoPanelOverlayComponent, selector: "app-info-panel-overlay", inputs: { showInfoPanel: "showInfoPanel" }, ngImport: i0, template: "<app-overlay\n  overlayTitle=\"Info Panel\"\n  icon=\"info-panel\"\n  [resizable]=\"true\"\n  [active]=\"showInfoPanel\"\n>\n  <ul class=\"list-group list-group-flush\">\n    <li class=\"list-group-item\">\n      <!-- Show Phoenix Current Version (ON by Default) -->\n      Phoenix Version: {{ version }}\n    </li>\n    <li class=\"list-group-item\" *ngIf=\"actionsList.length === 0\">\n      No actions.\n    </li>\n    <li class=\"list-group-item\" *ngFor=\"let action of actionsList\">\n      {{ action }}\n    </li>\n  </ul>\n</app-overlay>\n", styles: [".list-group-item{font-size:.8rem;padding:.5rem 1rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.OverlayComponent, selector: "app-overlay", inputs: ["overlayTitle", "active", "icon", "resizable", "transparentBody"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: InfoPanelOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-info-panel-overlay', template: "<app-overlay\n  overlayTitle=\"Info Panel\"\n  icon=\"info-panel\"\n  [resizable]=\"true\"\n  [active]=\"showInfoPanel\"\n>\n  <ul class=\"list-group list-group-flush\">\n    <li class=\"list-group-item\">\n      <!-- Show Phoenix Current Version (ON by Default) -->\n      Phoenix Version: {{ version }}\n    </li>\n    <li class=\"list-group-item\" *ngIf=\"actionsList.length === 0\">\n      No actions.\n    </li>\n    <li class=\"list-group-item\" *ngFor=\"let action of actionsList\">\n      {{ action }}\n    </li>\n  </ul>\n</app-overlay>\n", styles: [".list-group-item{font-size:.8rem;padding:.5rem 1rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.EventDisplayService }]; }, propDecorators: { showInfoPanel: [{

package/dist/esm2020/components/ui-menu/info-panel/info-panel.component.mjs

@@ -40,10 +40,10 @@ export class InfoPanelComponent {
         this.overlayWindow.instance.showInfoPanel = this.showInfoPanel;
     }
 }
-InfoPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: InfoPanelComponent, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-InfoPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: InfoPanelComponent, selector: "app-info-panel", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Info panel\"\n  icon=\"info-panel\"\n  [active]=\"showInfoPanel\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""], components: [{ type: i2.MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: InfoPanelComponent, decorators: [{
+InfoPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: InfoPanelComponent, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+InfoPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.4", type: InfoPanelComponent, selector: "app-info-panel", ngImport: i0, template: "<app-menu-toggle\n  tooltip=\"Info panel\"\n  icon=\"info-panel\"\n  [active]=\"showInfoPanel\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: InfoPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-info-panel', template: "<app-menu-toggle\n  tooltip=\"Info panel\"\n  icon=\"info-panel\"\n  [active]=\"showInfoPanel\"\n  (click)=\"toggleOverlay()\"\n>\n</app-menu-toggle>\n", styles: [""] }]
+            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" }]
         }], ctorParameters: function () { return [{ type: i1.Overlay }]; } });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5mby1wYW5lbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWIvY29tcG9uZW50cy91aS1tZW51L2luZm8tcGFuZWwvaW5mby1wYW5lbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9saWIvY29tcG9uZW50cy91aS1tZW51L2luZm8tcGFuZWwvaW5mby1wYW5lbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFtQyxNQUFNLGVBQWUsQ0FBQztBQUUzRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDdEQsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0sbURBQW1ELENBQUM7Ozs7QUFFOUY7O0dBRUc7QUFNSCxNQUFNLE9BQU8sa0JBQWtCO0lBTTdCOzs7T0FHRztJQUNILFlBQW9CLE9BQWdCO1FBQWhCLFlBQU8sR0FBUCxPQUFPLENBQVM7UUFUcEMsY0FBYztRQUNkLGtCQUFhLEdBQUcsS0FBSyxDQUFDO0lBUWlCLENBQUM7SUFFeEM7O09BRUc7SUFDSCxRQUFRO1FBQ04sTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUN6QyxNQUFNLGFBQWEsR0FBRyxJQUFJLGVBQWUsQ0FBQyx5QkFBeUIsQ0FBQyxDQUFDO1FBQ3JFLElBQUksQ0FBQyxhQUFhLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUN0RCxJQUFJLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQztJQUNqRSxDQUFDO0lBRUQ7O09BRUc7SUFDSCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGFBQWEsQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUMvQixDQUFDO0lBRUQ7O09BRUc7SUFDSCxhQUFhO1FBQ1gsSUFBSSxDQUFDLGFBQWEsR0FBRyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUM7UUFDekMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUM7SUFDakUsQ0FBQzs7K0dBbkNVLGtCQUFrQjttR0FBbEIsa0JBQWtCLHNEQ2IvQix5SkFPQTsyRkRNYSxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UsZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIENvbXBvbmVudFJlZiwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBPdmVybGF5IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL292ZXJsYXknO1xuaW1wb3J0IHsgQ29tcG9uZW50UG9ydGFsIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL3BvcnRhbCc7XG5pbXBvcnQgeyBJbmZvUGFuZWxPdmVybGF5Q29tcG9uZW50IH0gZnJvbSAnLi9pbmZvLXBhbmVsLW92ZXJsYXkvaW5mby1wYW5lbC1vdmVybGF5LmNvbXBvbmVudCc7XG5cbi8qKlxuICogQ29tcG9uZW50IGZvciB0b2dnbGluZyBpbmZvIHBhbmVsIG92ZXJsYXlcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLWluZm8tcGFuZWwnLFxuICB0ZW1wbGF0ZVVybDogJy4vaW5mby1wYW5lbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2luZm8tcGFuZWwuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgSW5mb1BhbmVsQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICAvKiogQGlnbm9yZSAqL1xuICBzaG93SW5mb1BhbmVsID0gZmFsc2U7XG4gIC8qKiBJbmZvcm1hdGlvbiBwYW5lbCBvdmVybGF5IHdpbmRvdyAqL1xuICBvdmVybGF5V2luZG93OiBDb21wb25lbnRSZWY8SW5mb1BhbmVsT3ZlcmxheUNvbXBvbmVudD47XG5cbiAgLyoqXG4gICAqIENyZWF0ZSB0aGUgaW5mbyBwYW5lbCB0b2dnbGVcbiAgICogQHBhcmFtIG92ZXJsYXkgSW5mbyBwYW5lbCBvdmVybGF5IGNvbnRhaW5pbmcgbG9nZ2VyIGRhdGFcbiAgICovXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgb3ZlcmxheTogT3ZlcmxheSkge31cblxuICAvKipcbiAgICogQ3JlYXRlIHRoZSBpbmZvIHBhbmVsIG92ZXJsYXlcbiAgICovXG4gIG5nT25Jbml0KCkge1xuICAgIGNvbnN0IG92ZXJsYXlSZWYgPSB0aGlzLm92ZXJsYXkuY3JlYXRlKCk7XG4gICAgY29uc3Qgb3ZlcmxheVBvcnRhbCA9IG5ldyBDb21wb25lbnRQb3J0YWwoSW5mb1BhbmVsT3ZlcmxheUNvbXBvbmVudCk7XG4gICAgdGhpcy5vdmVybGF5V2luZG93ID0gb3ZlcmxheVJlZi5hdHRhY2gob3ZlcmxheVBvcnRhbCk7XG4gICAgdGhpcy5vdmVybGF5V2luZG93Lmluc3RhbmNlLnNob3dJbmZvUGFuZWwgPSB0aGlzLnNob3dJbmZvUGFuZWw7XG4gIH1cblxuICAvKipcbiAgICogRGVzdHJveSB0aGUgaW5mbyBwYW5lbCBvdmVybGF5XG4gICAqL1xuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLm92ZXJsYXlXaW5kb3cuZGVzdHJveSgpO1xuICB9XG5cbiAgLyoqXG4gICAqIFRvZ2dsZSB0aGUgaW5mbyBwYW5lbCBvdmVybGF5XG4gICAqL1xuICB0b2dnbGVPdmVybGF5KCkge1xuICAgIHRoaXMuc2hvd0luZm9QYW5lbCA9ICF0aGlzLnNob3dJbmZvUGFuZWw7XG4gICAgdGhpcy5vdmVybGF5V2luZG93Lmluc3RhbmNlLnNob3dJbmZvUGFuZWwgPSB0aGlzLnNob3dJbmZvUGFuZWw7XG4gIH1cbn1cbiIsIjxhcHAtbWVudS10b2dnbGVcbiAgdG9vbHRpcD1cIkluZm8gcGFuZWxcIlxuICBpY29uPVwiaW5mby1wYW5lbFwiXG4gIFthY3RpdmVdPVwic2hvd0luZm9QYW5lbFwiXG4gIChjbGljayk9XCJ0b2dnbGVPdmVybGF5KClcIlxuPlxuPC9hcHAtbWVudS10b2dnbGU+XG4iXX0=