phoenix-ui-components 2.12.0 → 2.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/components/phoenix-ui.module.d.ts +30 -27
  2. package/dist/components/ui-menu/event-data-explorer/event-data-explorer-dialog/event-data-explorer-dialog.component.d.ts +1 -1
  3. package/dist/components/ui-menu/event-data-explorer/event-data-explorer.component.d.ts +1 -1
  4. package/dist/components/ui-menu/index.d.ts +1 -0
  5. package/dist/components/ui-menu/make-picture/make-picture.component.d.ts +17 -0
  6. package/dist/components/ui-menu/tree-menu/tree-menu-item/tree-menu-item.component.d.ts +1 -1
  7. package/dist/esm2020/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.mjs +7 -6
  8. package/dist/esm2020/components/phoenix-ui.module.mjs +13 -2
  9. package/dist/esm2020/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.mjs +5 -4
  10. package/dist/esm2020/components/ui-menu/event-selector/event-selector.component.mjs +3 -2
  11. package/dist/esm2020/components/ui-menu/index.mjs +2 -1
  12. package/dist/esm2020/components/ui-menu/make-picture/make-picture.component.mjs +88 -0
  13. package/dist/esm2020/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.mjs +4 -3
  14. package/dist/esm2020/components/ui-menu/ss-mode/ss-mode.component.mjs +3 -3
  15. package/dist/esm2020/components/ui-menu/ui-menu.component.mjs +10 -9
  16. package/dist/fesm2015/phoenix-ui-components.mjs +121 -20
  17. package/dist/fesm2015/phoenix-ui-components.mjs.map +1 -1
  18. package/dist/fesm2020/phoenix-ui-components.mjs +113 -20
  19. package/dist/fesm2020/phoenix-ui-components.mjs.map +1 -1
  20. package/dist/services/extras/event-data-import.d.ts +1 -1
  21. package/package.json +10 -6
@@ -8,11 +8,13 @@ import * as i2$1 from '@angular/material/slider';
8
8
  import { MatSliderModule } from '@angular/material/slider';
9
9
  import * as i2$2 from '@angular/material/button';
10
10
  import { MatButtonModule } from '@angular/material/button';
11
- import * as i3 from '@angular/material/slide-toggle';
11
+ import * as i3 from '@angular/forms';
12
+ import { FormsModule } from '@angular/forms';
13
+ import * as i4 from '@angular/material/slide-toggle';
12
14
  import { MatSlideToggleModule } from '@angular/material/slide-toggle';
13
- import * as i4 from '@angular/material/checkbox';
15
+ import * as i4$1 from '@angular/material/checkbox';
14
16
  import { MatCheckboxModule } from '@angular/material/checkbox';
15
- import * as i5 from '@rp3e11/ngx-slider';
17
+ import * as i6 from '@rp3e11/ngx-slider';
16
18
  import { NgxSliderModule } from '@rp3e11/ngx-slider';
17
19
  import { EventDisplay, SceneManager, PrettySymbols, Edm4hepJsonLoader, JiveXMLLoader, CMSLoader, readZipFile, VRManager, XRSessionType, ARManager, phoenixURLOptions, ActiveVariable } from 'phoenix-event-display';
18
20
  import * as i3$1 from '@angular/material/menu';
@@ -28,8 +30,10 @@ import { OverlayModule } from '@angular/cdk/overlay';
28
30
  import packageJson from 'phoenix-event-display/package.json';
29
31
  import * as i1$2 from '@angular/material/dialog';
30
32
  import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
31
- import * as i4$1 from '@angular/material/icon';
33
+ import * as i4$2 from '@angular/material/icon';
32
34
  import { MatIconModule } from '@angular/material/icon';
35
+ import * as i5 from '@angular/material/radio';
36
+ import { MatRadioModule } from '@angular/material/radio';
33
37
  import QRCode from 'qrcode';
34
38
  import * as i2$5 from '@angular/cdk/tree';
35
39
  import { NestedTreeControl, CdkTreeModule } from '@angular/cdk/tree';
@@ -393,7 +397,7 @@ PhoenixMenuItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ph
393
397
  i0.ɵɵproperty("ngIf", ctx.currentNode.children.length > 0);
394
398
  i0.ɵɵadvance(1);
395
399
  i0.ɵɵproperty("ngIf", ctx.currentNode.childrenActive);
396
- } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i2.NgSwitch, i2.NgSwitchCase, i2$2.MatButton, i3.MatSlideToggle, i4.MatCheckbox, i5.SliderComponent, PhoenixMenuItemComponent, ConfigSliderComponent], styles: [".phoenix-menu-item{width:100%;padding:.6rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color);font-size:.8rem;transition:all .5s;display:flex;justify-content:space-between;align-items:center}.phoenix-menu-item-left{display:flex;justify-content:flex-start;min-width:0;padding-right:.5rem;overflow:hidden}.phoenix-menu-item-left .item-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phoenix-menu-item-left .item-icon{margin-right:.2rem}.phoenix-menu-item-right{display:flex;justify-content:flex-end}.phoenix-menu-item-right .item-expand.expanded{transform:scaleY(-1)}.phoenix-menu-item-right .item-settings{margin-right:.2rem}.phoenix-menu-item-right .item-config-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:110}.phoenix-menu-item-right .item-config{position:absolute;margin-top:-5rem;right:100%;width:14rem;padding:.5rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color-secondary);box-shadow:var(--phoenix-box-shadow);display:flex;flex-direction:column;z-index:120}.phoenix-menu-item-right .item-config>*{margin-bottom:.4rem}.phoenix-menu-item-right .item-config>*:last-child{margin-bottom:0}.phoenix-menu-item-right .item-config .item-config-single{display:flex;flex-direction:row}.phoenix-menu-item-right .item-config .item-config-single .item-config-label{width:30%}.phoenix-menu-item-right .item-config .item-config-single .item-config-data{flex-grow:1;padding-left:.5rem}.phoenix-menu-item .icon-wrapper{display:inline-block;width:1.3rem;height:1.3rem;padding:.23rem;transition:all .4s}.phoenix-menu-item .icon-wrapper.icon-button:hover{background:var(--phoenix-options-icon-bg);border-radius:40%;cursor:pointer}.phoenix-menu-item .icon-wrapper svg{width:100%;height:100%;vertical-align:top}.phoenix-menu-item .mat-slide-toggle-bar{width:30px!important}.phoenix-menu-item .mat-slide-toggle-thumb{width:15px!important;height:15px!important;position:absolute;top:2px}.phoenix-menu-item .mat-slider-horizontal{min-width:0;width:100%;height:20px}.phoenix-menu-item .mat-slider-horizontal .mat-slider-wrapper{top:10px}.phoenix-menu-item label.mat-checkbox-layout{margin:0}@media screen and (max-width: 768px){.phoenix-menu-item{font-size:.75rem;padding:.5rem}.phoenix-menu-item .icon-wrapper{width:1rem;height:1rem;padding:.15rem}}.phoenix-menu-children{margin-left:.5rem;border-left:1px solid var(--phoenix-accent)}.range-slider .range-slider-inputs{gap:20%}.range-slider .ngx-slider .ngx-slider-bar{background:var(--phoenix-text-color-secondary);height:.2rem}.range-slider .ngx-slider .ngx-slider-selection{background:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer{width:1rem;height:1rem;top:-.45rem;bottom:0;background-color:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer:after{display:none}.range-slider .ngx-slider .ngx-slider-bubble{color:var(--phoenix-text-color);font-size:.8rem}.range-slider .ngx-slider .ngx-slider-bubble.ngx-slider-limit{color:var(--phoenix-text-color-secondary)}\n"], encapsulation: 2 });
400
+ } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i2.NgSwitch, i2.NgSwitchCase, i2$2.MatButton, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i4.MatSlideToggle, i4$1.MatCheckbox, i6.SliderComponent, PhoenixMenuItemComponent, ConfigSliderComponent], styles: [".phoenix-menu-item{width:100%;padding:.6rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color);font-size:.8rem;transition:all .5s;display:flex;justify-content:space-between;align-items:center}.phoenix-menu-item-left{display:flex;justify-content:flex-start;min-width:0;padding-right:.5rem;overflow:hidden}.phoenix-menu-item-left .item-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phoenix-menu-item-left .item-icon{margin-right:.2rem}.phoenix-menu-item-right{display:flex;justify-content:flex-end}.phoenix-menu-item-right .item-expand.expanded{transform:scaleY(-1)}.phoenix-menu-item-right .item-settings{margin-right:.2rem}.phoenix-menu-item-right .item-config-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:110}.phoenix-menu-item-right .item-config{position:absolute;margin-top:-5rem;right:100%;width:14rem;padding:.5rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color-secondary);box-shadow:var(--phoenix-box-shadow);display:flex;flex-direction:column;z-index:120}.phoenix-menu-item-right .item-config>*{margin-bottom:.4rem}.phoenix-menu-item-right .item-config>*:last-child{margin-bottom:0}.phoenix-menu-item-right .item-config .item-config-single{display:flex;flex-direction:row}.phoenix-menu-item-right .item-config .item-config-single .item-config-label{width:30%}.phoenix-menu-item-right .item-config .item-config-single .item-config-data{flex-grow:1;padding-left:.5rem}.phoenix-menu-item .icon-wrapper{display:inline-block;width:1.3rem;height:1.3rem;padding:.23rem;transition:all .4s}.phoenix-menu-item .icon-wrapper.icon-button:hover{background:var(--phoenix-options-icon-bg);border-radius:40%;cursor:pointer}.phoenix-menu-item .icon-wrapper svg{width:100%;height:100%;vertical-align:top}.phoenix-menu-item .mat-slide-toggle-bar{width:30px!important}.phoenix-menu-item .mat-slide-toggle-thumb{width:15px!important;height:15px!important;position:absolute;top:2px}.phoenix-menu-item .mat-slider-horizontal{min-width:0;width:100%;height:20px}.phoenix-menu-item .mat-slider-horizontal .mat-slider-wrapper{top:10px}.phoenix-menu-item label.mat-checkbox-layout{margin:0}@media screen and (max-width: 768px){.phoenix-menu-item{font-size:.75rem;padding:.5rem}.phoenix-menu-item .icon-wrapper{width:1rem;height:1rem;padding:.15rem}}.phoenix-menu-children{margin-left:.5rem;border-left:1px solid var(--phoenix-accent)}.range-slider .range-slider-inputs{gap:20%}.range-slider .ngx-slider .ngx-slider-bar{background:var(--phoenix-text-color-secondary);height:.2rem}.range-slider .ngx-slider .ngx-slider-selection{background:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer{width:1rem;height:1rem;top:-.45rem;bottom:0;background-color:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer:after{display:none}.range-slider .ngx-slider .ngx-slider-bubble{color:var(--phoenix-text-color);font-size:.8rem}.range-slider .ngx-slider .ngx-slider-bubble.ngx-slider-limit{color:var(--phoenix-text-color-secondary)}\n"], encapsulation: 2 });
397
401
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PhoenixMenuItemComponent, [{
398
402
  type: Component,
399
403
  args: [{ selector: 'app-phoenix-menu-item', encapsulation: ViewEncapsulation.None, template: "<div class=\"phoenix-menu-item\" #phoenixMenuItem>\n <div class=\"phoenix-menu-item-left align-items-center\">\n <!-- If the item has some toggle function -->\n <ng-container *ngIf=\"currentNode.onToggle; else nodeName\">\n <mat-slide-toggle\n [checked]=\"currentNode.toggleState\"\n (change)=\"currentNode.toggleSelfAndDescendants($event.checked)\"\n >\n <ng-container *ngTemplateOutlet=\"nodeName\"></ng-container>\n </mat-slide-toggle>\n </ng-container>\n <!-- If the item has no toggle function -->\n <ng-template #nodeName>\n <span class=\"d-flex w-100 align-items-center\">\n <span *ngIf=\"currentNode.icon\" class=\"icon-wrapper item-icon\">\n <svg>\n <use\n attr.href=\"assets/icons/{{ currentNode.icon }}.svg#{{\n currentNode.icon\n }}\"\n ></use>\n </svg>\n </span>\n <span class=\"item-name\" [title]=\"currentNode.name\">{{\n currentNode.name\n }}</span>\n </span>\n </ng-template>\n </div>\n <div class=\"phoenix-menu-item-right\">\n <div *ngIf=\"currentNode.configs.length > 0\">\n <button\n class=\"icon-wrapper icon-button btn-blank item-settings\"\n (click)=\"\n calculateConfigTop();\n currentNode.configActive = !currentNode.configActive\n \"\n >\n <svg>\n <use href=\"assets/icons/gear.svg#gear\"></use>\n </svg>\n </button>\n <div\n class=\"item-config-backdrop\"\n *ngIf=\"currentNode.configActive\"\n (click)=\"currentNode.configActive = false\"\n ></div>\n <div\n class=\"item-config\"\n [hidden]=\"!currentNode.configActive\"\n [ngStyle]=\"{ 'top.px': configTop }\"\n >\n <ng-container\n *ngFor=\"let config of castConfigsToAny(currentNode.configs)\"\n [ngSwitch]=\"config.type\"\n >\n <!-- Config types -->\n <label class=\"item-config-single\" *ngIf=\"!config.hidden\">\n <span\n class=\"item-config-label\"\n *ngIf=\"config.type !== 'button'\"\n [ngClass]=\"{ 'font-weight-bold w-100': config.type === 'label' }\"\n >\n {{ config.label }}\n </span>\n <div\n class=\"item-config-data\"\n [ngClass]=\"{ 'p-0': config.type === 'button' }\"\n *ngIf=\"config.type !== 'label'\"\n >\n <mat-checkbox\n *ngSwitchCase=\"'checkbox'\"\n [checked]=\"config.isChecked\"\n (change)=\"\n config.onChange($event.checked);\n config.isChecked = $event.checked\n \"\n ></mat-checkbox>\n\n <app-config-slider\n *ngSwitchCase=\"'slider'\"\n [value]=\"config.value\"\n (onChange)=\"config.onChange($event); config.value = $event\"\n [min]=\"config.min\"\n [max]=\"config.max\"\n [step]=\"config.step\"\n [allowCustomValue]=\"config.allowCustomValue\"\n >\n </app-config-slider>\n\n <button\n *ngSwitchCase=\"'button'\"\n class=\"w-100\"\n (click)=\"config.onClick()\"\n mat-button\n mat-stroked-button\n >\n {{ config.label }}\n </button>\n\n <input\n *ngSwitchCase=\"'color'\"\n type=\"color\"\n [value]=\"config.color\"\n (input)=\"\n config.onChange($event.target.value);\n config.color = $event.target.value\n \"\n />\n\n <div *ngSwitchCase=\"'rangeSlider'\" class=\"range-slider\">\n <div class=\"range-slider-inputs d-flex justify-content-between\">\n <input\n type=\"number\"\n placeholder=\"Min\"\n class=\"form-control form-control-sm\"\n [value]=\"config.value\"\n (input)=\"\n config.value = $event.target.value;\n config.onChange(config)\n \"\n />\n <input\n type=\"number\"\n placeholder=\"Max\"\n class=\"form-control form-control-sm\"\n [value]=\"config.highValue\"\n (input)=\"\n config.highValue = $event.target.value;\n config.onChange(config)\n \"\n />\n </div>\n <ngx-slider\n [(value)]=\"config.value\"\n [(highValue)]=\"config.highValue\"\n (userChange)=\"config.onChange($event)\"\n [options]=\"{\n floor: config.min,\n ceil: config.max,\n step: config.step,\n animate: false\n }\"\n ></ngx-slider>\n </div>\n\n <select\n *ngSwitchCase=\"'select'\"\n class=\"w-100\"\n (change)=\"config.onChange($event.target.value)\"\n >\n <option\n *ngFor=\"let singleOption of config.options\"\n [value]=\"singleOption\"\n >\n {{ singleOption }}\n </option>\n </select>\n </div>\n </label>\n <!-- Config types END -->\n </ng-container>\n </div>\n </div>\n <button\n class=\"icon-wrapper icon-button btn-blank item-expand\"\n *ngIf=\"currentNode.children.length > 0\"\n (click)=\"currentNode.childrenActive = !currentNode.childrenActive\"\n [ngClass]=\"{ expanded: currentNode.childrenActive }\"\n data-testid=\"dropdown\"\n >\n <svg>\n <use href=\"assets/icons/expand.svg#expand\"></use>\n </svg>\n </button>\n </div>\n</div>\n<div class=\"phoenix-menu-children\" *ngIf=\"currentNode.childrenActive\">\n <app-phoenix-menu-item\n *ngFor=\"let childNode of currentNode.children\"\n [currentNode]=\"childNode\"\n >\n </app-phoenix-menu-item>\n</div>\n", styles: [".phoenix-menu-item{width:100%;padding:.6rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color);font-size:.8rem;transition:all .5s;display:flex;justify-content:space-between;align-items:center}.phoenix-menu-item-left{display:flex;justify-content:flex-start;min-width:0;padding-right:.5rem;overflow:hidden}.phoenix-menu-item-left .item-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phoenix-menu-item-left .item-icon{margin-right:.2rem}.phoenix-menu-item-right{display:flex;justify-content:flex-end}.phoenix-menu-item-right .item-expand.expanded{transform:scaleY(-1)}.phoenix-menu-item-right .item-settings{margin-right:.2rem}.phoenix-menu-item-right .item-config-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:110}.phoenix-menu-item-right .item-config{position:absolute;margin-top:-5rem;right:100%;width:14rem;padding:.5rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color-secondary);box-shadow:var(--phoenix-box-shadow);display:flex;flex-direction:column;z-index:120}.phoenix-menu-item-right .item-config>*{margin-bottom:.4rem}.phoenix-menu-item-right .item-config>*:last-child{margin-bottom:0}.phoenix-menu-item-right .item-config .item-config-single{display:flex;flex-direction:row}.phoenix-menu-item-right .item-config .item-config-single .item-config-label{width:30%}.phoenix-menu-item-right .item-config .item-config-single .item-config-data{flex-grow:1;padding-left:.5rem}.phoenix-menu-item .icon-wrapper{display:inline-block;width:1.3rem;height:1.3rem;padding:.23rem;transition:all .4s}.phoenix-menu-item .icon-wrapper.icon-button:hover{background:var(--phoenix-options-icon-bg);border-radius:40%;cursor:pointer}.phoenix-menu-item .icon-wrapper svg{width:100%;height:100%;vertical-align:top}.phoenix-menu-item .mat-slide-toggle-bar{width:30px!important}.phoenix-menu-item .mat-slide-toggle-thumb{width:15px!important;height:15px!important;position:absolute;top:2px}.phoenix-menu-item .mat-slider-horizontal{min-width:0;width:100%;height:20px}.phoenix-menu-item .mat-slider-horizontal .mat-slider-wrapper{top:10px}.phoenix-menu-item label.mat-checkbox-layout{margin:0}@media screen and (max-width: 768px){.phoenix-menu-item{font-size:.75rem;padding:.5rem}.phoenix-menu-item .icon-wrapper{width:1rem;height:1rem;padding:.15rem}}.phoenix-menu-children{margin-left:.5rem;border-left:1px solid var(--phoenix-accent)}.range-slider .range-slider-inputs{gap:20%}.range-slider .ngx-slider .ngx-slider-bar{background:var(--phoenix-text-color-secondary);height:.2rem}.range-slider .ngx-slider .ngx-slider-selection{background:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer{width:1rem;height:1rem;top:-.45rem;bottom:0;background-color:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer:after{display:none}.range-slider .ngx-slider .ngx-slider-bubble{color:var(--phoenix-text-color);font-size:.8rem}.range-slider .ngx-slider .ngx-slider-bubble.ngx-slider-limit{color:var(--phoenix-text-color-secondary)}\n"] }]
@@ -1035,7 +1039,7 @@ CollectionsInfoOverlayComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ t
1035
1039
  i0.ɵɵproperty("resizable", true)("active", ctx.showObjectsInfo);
1036
1040
  i0.ɵɵadvance(1);
1037
1041
  i0.ɵɵproperty("ngIf", ctx.showObjectsInfo);
1038
- } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2$3.MatTooltip, i4.MatCheckbox, OverlayComponent], styles: [".collectionsInfo[_ngcontent-%COMP%]{height:95%}.collectionsInfo[_ngcontent-%COMP%] .collectionSelector[_ngcontent-%COMP%]{height:15%;min-height:2rem}.collectionsInfo[_ngcontent-%COMP%] .collectionSelector[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{color:var(--phoenix-text-color-secondary);margin-right:1rem}.collectionsInfo[_ngcontent-%COMP%] .collectionSelector[_ngcontent-%COMP%] mat-checkbox[_ngcontent-%COMP%]{margin-left:1rem}.boxBody[_ngcontent-%COMP%]{height:85%;overflow:scroll}.boxBody[_ngcontent-%COMP%] p.emptyBox[_ngcontent-%COMP%]{max-width:21em}.boxBody[_ngcontent-%COMP%] .add-label[_ngcontent-%COMP%]{min-width:8rem}.boxBody[_ngcontent-%COMP%] .add-label[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{padding:.1rem .3rem;font-size:.75rem}#collectionTable[_ngcontent-%COMP%]{position:relative;color:var(--phoenix-text-color-secondary)}#collectionTable[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] th[_ngcontent-%COMP%]{position:sticky;top:0;z-index:100;background:var(--phoenix-background-color-secondary)}#collectionTable[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] th[_ngcontent-%COMP%] .head-wrapper[_ngcontent-%COMP%]{display:flex;align-items:center}#collectionTable[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] th[_ngcontent-%COMP%] .head-wrapper[_ngcontent-%COMP%] .sort-options[_ngcontent-%COMP%]{display:flex;flex-direction:row}#collectionTable[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] th[_ngcontent-%COMP%] .head-wrapper[_ngcontent-%COMP%] .sort-options[_ngcontent-%COMP%] .icon-wrapper[_ngcontent-%COMP%]{display:flex;width:1rem;height:1rem;padding:.2rem}#collectionTable[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] th[_ngcontent-%COMP%] .head-wrapper[_ngcontent-%COMP%] .sort-options[_ngcontent-%COMP%] .icon-wrapper.up[_ngcontent-%COMP%]{transform:rotate(180deg)}#collectionTable[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] th[_ngcontent-%COMP%] .head-wrapper[_ngcontent-%COMP%] .sort-options[_ngcontent-%COMP%] .icon-wrapper[_ngcontent-%COMP%] svg[_ngcontent-%COMP%]{width:100%;height:100%}#collectionTable[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] *[_ngcontent-%COMP%]{padding-right:1.2rem}#collectionTable[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] *[_ngcontent-%COMP%]:last-child{padding-right:0}#collectionTable[_ngcontent-%COMP%] tr.is-cut[_ngcontent-%COMP%]{opacity:.5}#collectionTable[_ngcontent-%COMP%] tr.active-object[_ngcontent-%COMP%]{color:var(--phoenix-background-color);background:var(--phoenix-text-color);box-shadow:0 0 15px var(--phoenix-text-color)}#collectionTable[_ngcontent-%COMP%] tr.active-object[_ngcontent-%COMP%] div.icon-wrapper[_ngcontent-%COMP%]{--phoenix-options-icon-path: var(--phoenix-background-color);--phoenix-options-icon-bg: var(--phoenix-text-color-hover)}#collectionTable[_ngcontent-%COMP%] tr.active-object[_ngcontent-%COMP%] .add-label[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{--phoenix-text-color: var(--phoenix-background-color);--phoenix-background-color-tertiary: var( --phoenix-text-color-secondary );--phoenix-border: var(--phoenix-background-color)}#collectionTable[_ngcontent-%COMP%] td[_ngcontent-%COMP%] .object-select[_ngcontent-%COMP%]{position:relative;width:1.6rem;height:1.6rem;margin-right:.4em;text-align:center;background-color:var(--phoenix-options-icon-bg);border-radius:10px;cursor:pointer}#collectionTable[_ngcontent-%COMP%] td[_ngcontent-%COMP%] .object-select[_ngcontent-%COMP%]:last-child{margin-right:0}#collectionTable[_ngcontent-%COMP%] td[_ngcontent-%COMP%] .object-select[_ngcontent-%COMP%]:hover{border:1px solid var(--phoenix-options-icon-path)}#collectionTable[_ngcontent-%COMP%] td[_ngcontent-%COMP%] .object-select[_ngcontent-%COMP%] svg[_ngcontent-%COMP%]{position:absolute;top:0;left:0;padding:.4rem;width:100%;height:100%;vertical-align:top}.eventSelector[_ngcontent-%COMP%]{display:flex}.eventSelector[_ngcontent-%COMP%] label[_ngcontent-%COMP%]{display:none;color:var(--phoenix-text-color-secondary)}.eventSelector[_ngcontent-%COMP%] select[_ngcontent-%COMP%]{width:9rem;padding:5px 10px;font-size:12px;border:1px solid rgba(88,88,88,.08);box-shadow:var(--phoenix-icon-shadow);background-color:var(--phoenix-background-color-tertiary);color:var(--phoenix-text-color-secondary)}"] });
1042
+ } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2$3.MatTooltip, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i4$1.MatCheckbox, OverlayComponent], styles: [".collectionsInfo[_ngcontent-%COMP%]{height:95%}.collectionsInfo[_ngcontent-%COMP%] .collectionSelector[_ngcontent-%COMP%]{height:15%;min-height:2rem}.collectionsInfo[_ngcontent-%COMP%] .collectionSelector[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{color:var(--phoenix-text-color-secondary);margin-right:1rem}.collectionsInfo[_ngcontent-%COMP%] .collectionSelector[_ngcontent-%COMP%] mat-checkbox[_ngcontent-%COMP%]{margin-left:1rem}.boxBody[_ngcontent-%COMP%]{height:85%;overflow:scroll}.boxBody[_ngcontent-%COMP%] p.emptyBox[_ngcontent-%COMP%]{max-width:21em}.boxBody[_ngcontent-%COMP%] .add-label[_ngcontent-%COMP%]{min-width:8rem}.boxBody[_ngcontent-%COMP%] .add-label[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{padding:.1rem .3rem;font-size:.75rem}#collectionTable[_ngcontent-%COMP%]{position:relative;color:var(--phoenix-text-color-secondary)}#collectionTable[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] th[_ngcontent-%COMP%]{position:sticky;top:0;z-index:100;background:var(--phoenix-background-color-secondary)}#collectionTable[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] th[_ngcontent-%COMP%] .head-wrapper[_ngcontent-%COMP%]{display:flex;align-items:center}#collectionTable[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] th[_ngcontent-%COMP%] .head-wrapper[_ngcontent-%COMP%] .sort-options[_ngcontent-%COMP%]{display:flex;flex-direction:row}#collectionTable[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] th[_ngcontent-%COMP%] .head-wrapper[_ngcontent-%COMP%] .sort-options[_ngcontent-%COMP%] .icon-wrapper[_ngcontent-%COMP%]{display:flex;width:1rem;height:1rem;padding:.2rem}#collectionTable[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] th[_ngcontent-%COMP%] .head-wrapper[_ngcontent-%COMP%] .sort-options[_ngcontent-%COMP%] .icon-wrapper.up[_ngcontent-%COMP%]{transform:rotate(180deg)}#collectionTable[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] th[_ngcontent-%COMP%] .head-wrapper[_ngcontent-%COMP%] .sort-options[_ngcontent-%COMP%] .icon-wrapper[_ngcontent-%COMP%] svg[_ngcontent-%COMP%]{width:100%;height:100%}#collectionTable[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] *[_ngcontent-%COMP%]{padding-right:1.2rem}#collectionTable[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] *[_ngcontent-%COMP%]:last-child{padding-right:0}#collectionTable[_ngcontent-%COMP%] tr.is-cut[_ngcontent-%COMP%]{opacity:.5}#collectionTable[_ngcontent-%COMP%] tr.active-object[_ngcontent-%COMP%]{color:var(--phoenix-background-color);background:var(--phoenix-text-color);box-shadow:0 0 15px var(--phoenix-text-color)}#collectionTable[_ngcontent-%COMP%] tr.active-object[_ngcontent-%COMP%] div.icon-wrapper[_ngcontent-%COMP%]{--phoenix-options-icon-path: var(--phoenix-background-color);--phoenix-options-icon-bg: var(--phoenix-text-color-hover)}#collectionTable[_ngcontent-%COMP%] tr.active-object[_ngcontent-%COMP%] .add-label[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{--phoenix-text-color: var(--phoenix-background-color);--phoenix-background-color-tertiary: var( --phoenix-text-color-secondary );--phoenix-border: var(--phoenix-background-color)}#collectionTable[_ngcontent-%COMP%] td[_ngcontent-%COMP%] .object-select[_ngcontent-%COMP%]{position:relative;width:1.6rem;height:1.6rem;margin-right:.4em;text-align:center;background-color:var(--phoenix-options-icon-bg);border-radius:10px;cursor:pointer}#collectionTable[_ngcontent-%COMP%] td[_ngcontent-%COMP%] .object-select[_ngcontent-%COMP%]:last-child{margin-right:0}#collectionTable[_ngcontent-%COMP%] td[_ngcontent-%COMP%] .object-select[_ngcontent-%COMP%]:hover{border:1px solid var(--phoenix-options-icon-path)}#collectionTable[_ngcontent-%COMP%] td[_ngcontent-%COMP%] .object-select[_ngcontent-%COMP%] svg[_ngcontent-%COMP%]{position:absolute;top:0;left:0;padding:.4rem;width:100%;height:100%;vertical-align:top}.eventSelector[_ngcontent-%COMP%]{display:flex}.eventSelector[_ngcontent-%COMP%] label[_ngcontent-%COMP%]{display:none;color:var(--phoenix-text-color-secondary)}.eventSelector[_ngcontent-%COMP%] select[_ngcontent-%COMP%]{width:9rem;padding:5px 10px;font-size:12px;border:1px solid rgba(88,88,88,.08);box-shadow:var(--phoenix-icon-shadow);background-color:var(--phoenix-background-color-tertiary);color:var(--phoenix-text-color-secondary)}"] });
1039
1043
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CollectionsInfoOverlayComponent, [{
1040
1044
  type: Component,
1041
1045
  args: [{ selector: 'app-collections-info-overlay', template: "<!-- Show objects -->\n<app-overlay\n overlayTitle=\"Collections Info\"\n icon=\"info\"\n [resizable]=\"true\"\n [active]=\"showObjectsInfo\"\n>\n <!-- Using ngIf to remove it from DOM since this panel requires heavy computing -->\n <div *ngIf=\"showObjectsInfo\" class=\"collectionsInfo m-2\">\n <div\n class=\"collectionSelector mb-2 d-flex align-items-center\"\n *ngIf=\"collections != null\"\n >\n <div class=\"d-flex align-items-center\">\n <span>Choose a collection: </span>\n <div class=\"eventSelector\">\n <label for=\"event\">Event</label>\n <select\n id=\"collection\"\n name=\"collection\"\n (change)=\"changeCollection($event.target.value)\"\n >\n <option value=\"\" selected disabled hidden>Choose Collection</option>\n <option *ngFor=\"let collection of collections\" [value]=\"collection\">\n {{ collection }}\n </option>\n </select>\n </div>\n <mat-checkbox\n *ngIf=\"showingCollection\"\n (change)=\"toggleInvisible($event.checked)\"\n >\n Hide Invisible Objects\n </mat-checkbox>\n </div>\n </div>\n\n <div class=\"boxBody table-responsive\">\n <table\n id=\"collectionTable\"\n class=\"table table-borderless table-sm\"\n *ngIf=\"showingCollection\"\n >\n <thead>\n <tr>\n <th>No.</th>\n <th>Selection</th>\n <th>Label</th>\n <th *ngFor=\"let column of collectionColumns\">\n <div class=\"head-wrapper\">\n <div>\n {{ getPrettySymbol(column) }}\n </div>\n <div class=\"sort-options\">\n <button\n class=\"icon-wrapper icon-button btn-blank up\"\n (click)=\"sort(column, 'dec')\"\n >\n <svg>\n <use href=\"assets/icons/expand.svg#expand\"></use>\n </svg>\n </button>\n <button\n class=\"icon-wrapper icon-button btn-blank\"\n (click)=\"sort(column, 'asc')\"\n >\n <svg>\n <use href=\"assets/icons/expand.svg#expand\"></use>\n </svg>\n </button>\n </div>\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n *ngFor=\"let object of showingCollection; index as i\"\n [attr.id]=\"object.uuid\"\n [ngClass]=\"{\n 'active-object':\n activeObject && activeObject.value === object.uuid,\n 'is-cut': object.isCut,\n 'd-none': object.isCut && hideInvisible\n }\"\n >\n <td>#{{ i }}</td>\n <td>\n <div\n *ngIf=\"object.uuid\"\n class=\"row justify-content-center icon-wrapper\"\n >\n <button\n class=\"object-select btn-blank\"\n matTooltip=\"Move camera to object\"\n (click)=\"lookAtObject(object.uuid)\"\n >\n <svg>\n <use href=\"assets/icons/views.svg#views\"></use>\n </svg>\n </button>\n <button\n class=\"object-select btn-blank\"\n matTooltip=\"Highlight object\"\n (click)=\"highlightObject(object.uuid)\"\n >\n <svg>\n <use href=\"assets/icons/cursor.svg#cursor\"></use>\n </svg>\n </button>\n </div>\n </td>\n <td>\n <div class=\"row m-0 add-label\">\n <div class=\"col-10 p-0\">\n <input\n class=\"form-control form-control-sm\"\n type=\"text\"\n [id]=\"'label' + i\"\n />\n </div>\n <div class=\"col-2 p-0 pl-2 text-center icon-wrapper\">\n <button\n class=\"object-select btn-blank\"\n matTooltip=\"Add, update or remove object label\"\n (click)=\"addLabel(i, object.uuid)\"\n >\n <svg>\n <use href=\"assets/icons/update.svg#update\"></use>\n </svg>\n </button>\n </div>\n </div>\n </td>\n <td *ngFor=\"let column of collectionColumns\">\n {{ object[column] }}\n </td>\n </tr>\n </tbody>\n </table>\n <p class=\"emptyBox\" *ngIf=\"!collections\">\n Load event data to be able to display information about the collections\n here.\n </p>\n </div>\n </div>\n</app-overlay>\n", styles: [".collectionsInfo{height:95%}.collectionsInfo .collectionSelector{height:15%;min-height:2rem}.collectionsInfo .collectionSelector span{color:var(--phoenix-text-color-secondary);margin-right:1rem}.collectionsInfo .collectionSelector mat-checkbox{margin-left:1rem}.boxBody{height:85%;overflow:scroll}.boxBody p.emptyBox{max-width:21em}.boxBody .add-label{min-width:8rem}.boxBody .add-label input{padding:.1rem .3rem;font-size:.75rem}#collectionTable{position:relative;color:var(--phoenix-text-color-secondary)}#collectionTable thead tr th{position:sticky;top:0;z-index:100;background:var(--phoenix-background-color-secondary)}#collectionTable thead tr th .head-wrapper{display:flex;align-items:center}#collectionTable thead tr th .head-wrapper .sort-options{display:flex;flex-direction:row}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper{display:flex;width:1rem;height:1rem;padding:.2rem}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper.up{transform:rotate(180deg)}#collectionTable thead tr th .head-wrapper .sort-options .icon-wrapper svg{width:100%;height:100%}#collectionTable tr *{padding-right:1.2rem}#collectionTable tr *:last-child{padding-right:0}#collectionTable tr.is-cut{opacity:.5}#collectionTable tr.active-object{color:var(--phoenix-background-color);background:var(--phoenix-text-color);box-shadow:0 0 15px var(--phoenix-text-color)}#collectionTable tr.active-object div.icon-wrapper{--phoenix-options-icon-path: var(--phoenix-background-color);--phoenix-options-icon-bg: var(--phoenix-text-color-hover)}#collectionTable tr.active-object .add-label input{--phoenix-text-color: var(--phoenix-background-color);--phoenix-background-color-tertiary: var( --phoenix-text-color-secondary );--phoenix-border: var(--phoenix-background-color)}#collectionTable td .object-select{position:relative;width:1.6rem;height:1.6rem;margin-right:.4em;text-align:center;background-color:var(--phoenix-options-icon-bg);border-radius:10px;cursor:pointer}#collectionTable td .object-select:last-child{margin-right:0}#collectionTable td .object-select:hover{border:1px solid var(--phoenix-options-icon-path)}#collectionTable td .object-select svg{position:absolute;top:0;left:0;padding:.4rem;width:100%;height:100%;vertical-align:top}.eventSelector{display:flex}.eventSelector label{display:none;color:var(--phoenix-text-color-secondary)}.eventSelector select{width:9rem;padding:5px 10px;font-size:12px;border:1px solid rgba(88,88,88,.08);box-shadow:var(--phoenix-icon-shadow);background-color:var(--phoenix-background-color-tertiary);color:var(--phoenix-text-color-secondary)}\n"] }]
@@ -1139,7 +1143,7 @@ EventSelectorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Even
1139
1143
  i0.ɵɵtemplate(0, EventSelectorComponent_div_0_Template, 3, 1, "div", 0);
1140
1144
  } if (rf & 2) {
1141
1145
  i0.ɵɵproperty("ngIf", ctx.events != null);
1142
- } }, dependencies: [i2.NgForOf, i2.NgIf, i2$3.MatTooltip], styles: [".eventSelector[_ngcontent-%COMP%] select[_ngcontent-%COMP%]{width:9rem;padding:5px 10px;font-size:12px;border:1px solid rgba(88,88,88,.08);box-shadow:var(--phoenix-icon-shadow);background-color:var(--phoenix-background-color-tertiary);color:var(--phoenix-text-color-secondary)}"] });
1146
+ } }, dependencies: [i2.NgForOf, i2.NgIf, i2$3.MatTooltip, i3.NgSelectOption, i3.ɵNgSelectMultipleOption], styles: [".eventSelector[_ngcontent-%COMP%] select[_ngcontent-%COMP%]{width:9rem;padding:5px 10px;font-size:12px;border:1px solid rgba(88,88,88,.08);box-shadow:var(--phoenix-icon-shadow);background-color:var(--phoenix-background-color-tertiary);color:var(--phoenix-text-color-secondary)}"] });
1143
1147
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EventSelectorComponent, [{
1144
1148
  type: Component,
1145
1149
  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"] }]
@@ -1751,7 +1755,7 @@ ObjectClippingComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Obj
1751
1755
  i0.ɵɵproperty("value", ctx.openingClippingAngle);
1752
1756
  i0.ɵɵadvance(3);
1753
1757
  i0.ɵɵproperty("matMenuTriggerFor", _r0)("active", ctx.clippingEnabled);
1754
- } }, dependencies: [i3$1.MatMenu, i3$1.MatMenuItem, i3$1.MatMenuTrigger, i2$1.MatSlider, i2$1.MatSliderThumb, i4.MatCheckbox, MenuToggleComponent], styles: [".slider-btn[_ngcontent-%COMP%]{overflow:visible}mat-slider[_ngcontent-%COMP%]{margin-left:.75rem;margin-right:.75rem}"] });
1758
+ } }, dependencies: [i3$1.MatMenu, i3$1.MatMenuItem, i3$1.MatMenuTrigger, i2$1.MatSlider, i2$1.MatSliderThumb, i4$1.MatCheckbox, MenuToggleComponent], styles: [".slider-btn[_ngcontent-%COMP%]{overflow:visible}mat-slider[_ngcontent-%COMP%]{margin-left:.75rem;margin-right:.75rem}"] });
1755
1759
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ObjectClippingComponent, [{
1756
1760
  type: Component,
1757
1761
  args: [{ selector: 'app-object-clipping', template: "<mat-menu class=\"mat-menu\" #menu>\n <button\n mat-menu-item\n (click)=\"\n $event.stopPropagation();\n clippingCheckbox._inputElement.nativeElement.click()\n \"\n >\n <mat-checkbox\n #clippingCheckbox\n [checked]=\"clippingEnabled\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleClipping($event)\"\n >\n Clipping\n </mat-checkbox>\n </button>\n <button\n class=\"slider-btn\"\n mat-menu-item\n (focus)=\"startingAngleSlider.focus()\"\n >\n <mat-slider min=\"0\" max=\"360\" step=\"1\" thumbLabel>\n <input\n #startingAngleSlider\n matSliderThumb\n [value]=\"startClippingAngle\"\n (valueChange)=\"changeStartClippingAngle($event)\"\n />\n </mat-slider>\n Start Angle\n </button>\n <button class=\"slider-btn\" mat-menu-item (focus)=\"openingAngleSlider.focus()\">\n <mat-slider min=\"0\" max=\"360\" step=\"1\" thumbLabel>\n <input\n #openingAngleSlider\n matSliderThumb\n [value]=\"openingClippingAngle\"\n (valueChange)=\"changeOpeningClippingAngle($event)\"\n />\n </mat-slider>\n Opening Angle\n </button>\n</mat-menu>\n\n<app-menu-toggle\n [matMenuTriggerFor]=\"menu\"\n tooltip=\"Geometry clipping\"\n icon=\"clipping\"\n [active]=\"clippingEnabled\"\n>\n</app-menu-toggle>\n", styles: [".slider-btn{overflow:visible}mat-slider{margin-left:.75rem;margin-right:.75rem}\n"] }]
@@ -2050,7 +2054,7 @@ TreeMenuItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TreeM
2050
2054
  i0.ɵɵtemplate(0, TreeMenuItemComponent_ng_container_0_Template, 8, 7, "ng-container", 0);
2051
2055
  } if (rf & 2) {
2052
2056
  i0.ɵɵproperty("ngIf", ctx.node);
2053
- } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2$2.MatIconButton, i4$1.MatIcon, TreeMenuItemComponent], styles: [".header[_ngcontent-%COMP%]{cursor:pointer;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;flex-direction:row;align-items:center}.header[_ngcontent-%COMP%] .node-name[_ngcontent-%COMP%], .header[_ngcontent-%COMP%] .mat-icon-rtl-mirror[_ngcontent-%COMP%]{color:var(--phoenix-text-color-secondary)}.header.visible[_ngcontent-%COMP%] .node-name[_ngcontent-%COMP%], .header.visible[_ngcontent-%COMP%] .mat-icon-rtl-mirror[_ngcontent-%COMP%]{color:var(--phoenix-accent)}.children[_ngcontent-%COMP%] li[_ngcontent-%COMP%]{list-style-type:none}"] });
2057
+ } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2$2.MatIconButton, i4$2.MatIcon, TreeMenuItemComponent], styles: [".header[_ngcontent-%COMP%]{cursor:pointer;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;flex-direction:row;align-items:center}.header[_ngcontent-%COMP%] .node-name[_ngcontent-%COMP%], .header[_ngcontent-%COMP%] .mat-icon-rtl-mirror[_ngcontent-%COMP%]{color:var(--phoenix-text-color-secondary)}.header.visible[_ngcontent-%COMP%] .node-name[_ngcontent-%COMP%], .header.visible[_ngcontent-%COMP%] .mat-icon-rtl-mirror[_ngcontent-%COMP%]{color:var(--phoenix-accent)}.children[_ngcontent-%COMP%] li[_ngcontent-%COMP%]{list-style-type:none}"] });
2054
2058
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TreeMenuItemComponent, [{
2055
2059
  type: Component,
2056
2060
  args: [{ selector: 'app-tree-menu-item', template: "<ng-container *ngIf=\"node\">\n <div class=\"header\" [ngClass]=\"{ visible: visible }\">\n <button\n *ngIf=\"node.children\"\n mat-icon-button\n matTreeNodeToggle\n (click)=\"isExpanded = !isExpanded\"\n >\n <mat-icon class=\"mat-icon-rtl-mirror\">\n {{ isExpanded ? 'expand_more' : 'chevron_right' }}\n </mat-icon>\n </button>\n <div (click)=\"toggleVisibility(!visible)\" class=\"node-name\">\n {{ node.name }}\n </div>\n </div>\n <ul [hidden]=\"!isExpanded\" hid>\n <div class=\"children\">\n <li *ngFor=\"let node of node.children\">\n <app-tree-menu-item [node]=\"node\"></app-tree-menu-item>\n </li>\n </div>\n </ul>\n</ng-container>\n", styles: [".header{cursor:pointer;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;flex-direction:row;align-items:center}.header .node-name,.header .mat-icon-rtl-mirror{color:var(--phoenix-text-color-secondary)}.header.visible .node-name,.header.visible .mat-icon-rtl-mirror{color:var(--phoenix-accent)}.children li{list-style-type:none}\n"] }]
@@ -2204,7 +2208,7 @@ ViewOptionsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ViewOp
2204
2208
  i0.ɵɵproperty("ngForOf", ctx.views);
2205
2209
  i0.ɵɵadvance(1);
2206
2210
  i0.ɵɵproperty("matMenuTriggerFor", _r0)("active", false);
2207
- } }, dependencies: [i2.NgForOf, i2.NgIf, i3$1.MatMenu, i3$1.MatMenuItem, i3$1.MatMenuTrigger, i4.MatCheckbox, MenuToggleComponent], styles: [".view-icon[_ngcontent-%COMP%]{width:1.2rem;height:1.2rem;margin-right:.5rem}"] });
2211
+ } }, dependencies: [i2.NgForOf, i2.NgIf, i3$1.MatMenu, i3$1.MatMenuItem, i3$1.MatMenuTrigger, i4$1.MatCheckbox, MenuToggleComponent], styles: [".view-icon[_ngcontent-%COMP%]{width:1.2rem;height:1.2rem;margin-right:.5rem}"] });
2208
2212
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ViewOptionsComponent, [{
2209
2213
  type: Component,
2210
2214
  args: [{ selector: 'app-view-options', template: "<mat-menu #viewOptions>\n <button\n mat-menu-item\n (click)=\"\n $event.stopPropagation();\n showGridCheckbox._inputElement.nativeElement.click()\n \"\n >\n <mat-checkbox\n #showGridCheckbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"setGrid($event)\"\n >Show Grid\n </mat-checkbox>\n </button>\n <button\n mat-menu-item\n (click)=\"\n $event.stopPropagation();\n showAxisCheckbox._inputElement.nativeElement.click()\n \"\n >\n <mat-checkbox\n #showAxisCheckbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"setAxis($event)\"\n >Show Axis\n </mat-checkbox>\n </button>\n <button\n mat-menu-item\n *ngFor=\"let view of views\"\n (click)=\"displayView($event, view)\"\n >\n <svg class=\"view-icon\" *ngIf=\"view.icon\">\n <use attr.href=\"assets/icons/{{ view.icon }}.svg#{{ view.icon }}\"></use>\n </svg>\n {{ view.name }}\n </button>\n</mat-menu>\n\n<app-menu-toggle\n [matMenuTriggerFor]=\"viewOptions\"\n tooltip=\"View options\"\n icon=\"views\"\n [active]=\"false\"\n>\n</app-menu-toggle>\n", styles: [".view-icon{width:1.2rem;height:1.2rem;margin-right:.5rem}\n"] }]
@@ -2430,7 +2434,7 @@ class SSModeComponent {
2430
2434
  }
2431
2435
  }
2432
2436
  SSModeComponent.ɵfac = function SSModeComponent_Factory(t) { return new (t || SSModeComponent)(); };
2433
- SSModeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SSModeComponent, selectors: [["app-ss-mode"]], decls: 1, vars: 1, consts: [["tooltip", "Screenshot mode", "icon", "ss-mode", 3, "active", "click"]], template: function SSModeComponent_Template(rf, ctx) { if (rf & 1) {
2437
+ SSModeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SSModeComponent, selectors: [["app-ss-mode"]], decls: 1, vars: 1, consts: [["tooltip", "Screenshot mode: phoenix will become fullscreen and the menu is suppressed", "icon", "ss-mode", 3, "active", "click"]], template: function SSModeComponent_Template(rf, ctx) { if (rf & 1) {
2434
2438
  i0.ɵɵelementStart(0, "app-menu-toggle", 0);
2435
2439
  i0.ɵɵlistener("click", function SSModeComponent_Template_app_menu_toggle_click_0_listener() { return ctx.toggleSSMode(); });
2436
2440
  i0.ɵɵelementEnd();
@@ -2439,9 +2443,89 @@ SSModeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SSModeCompo
2439
2443
  } }, dependencies: [MenuToggleComponent], styles: ["#uiMenu,#phoenixMenu,#mainLogo,#statsElement{transition:opacity .4s}.ss-mode #uiMenu,.ss-mode #phoenixMenu,.ss-mode #mainLogo,.ss-mode #statsElement{visibility:hidden;opacity:0}\n"], encapsulation: 2 });
2440
2444
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SSModeComponent, [{
2441
2445
  type: Component,
2442
- args: [{ selector: 'app-ss-mode', encapsulation: ViewEncapsulation.None, template: "<app-menu-toggle\n tooltip=\"Screenshot mode\"\n [active]=\"ssMode\"\n icon=\"ss-mode\"\n (click)=\"toggleSSMode()\"\n>\n</app-menu-toggle>\n", styles: ["#uiMenu,#phoenixMenu,#mainLogo,#statsElement{transition:opacity .4s}.ss-mode #uiMenu,.ss-mode #phoenixMenu,.ss-mode #mainLogo,.ss-mode #statsElement{visibility:hidden;opacity:0}\n"] }]
2446
+ args: [{ selector: 'app-ss-mode', encapsulation: ViewEncapsulation.None, template: "<app-menu-toggle\n tooltip=\"Screenshot mode: phoenix will become fullscreen and the menu is suppressed\"\n [active]=\"ssMode\"\n icon=\"ss-mode\"\n (click)=\"toggleSSMode()\"\n>\n</app-menu-toggle>\n", styles: ["#uiMenu,#phoenixMenu,#mainLogo,#statsElement{transition:opacity .4s}.ss-mode #uiMenu,.ss-mode #phoenixMenu,.ss-mode #mainLogo,.ss-mode #statsElement{visibility:hidden;opacity:0}\n"] }]
2443
2447
  }], null, null); })();
2444
2448
 
2449
+ function MakePictureComponent_mat_radio_button_14_Template(rf, ctx) { if (rf & 1) {
2450
+ i0.ɵɵelementStart(0, "mat-radio-button", 12);
2451
+ i0.ɵɵtext(1);
2452
+ i0.ɵɵelementEnd();
2453
+ } if (rf & 2) {
2454
+ const fitting_r4 = ctx.$implicit;
2455
+ i0.ɵɵproperty("value", fitting_r4);
2456
+ i0.ɵɵadvance(1);
2457
+ i0.ɵɵtextInterpolate1("", fitting_r4, " ");
2458
+ } }
2459
+ class MakePictureComponent {
2460
+ constructor(eventDisplay) {
2461
+ this.eventDisplay = eventDisplay;
2462
+ this.fittings = ['Crop', 'Stretch'];
2463
+ this.fitting = 'Crop';
2464
+ this.width = 3840;
2465
+ this.height = 2160;
2466
+ }
2467
+ ngOnInit() { }
2468
+ setWidth(value) {
2469
+ this.width = value;
2470
+ }
2471
+ setHeight(value) {
2472
+ this.height = value;
2473
+ }
2474
+ makePicture() {
2475
+ this.eventDisplay.makeScreenShot(this.width, this.height, this.fitting);
2476
+ }
2477
+ }
2478
+ MakePictureComponent.ɵfac = function MakePictureComponent_Factory(t) { return new (t || MakePictureComponent)(i0.ɵɵdirectiveInject(EventDisplayService)); };
2479
+ MakePictureComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MakePictureComponent, selectors: [["app-make-picture"]], decls: 20, vars: 5, consts: [[1, "mat-menu"], ["menu", ""], ["mat-menu-item", "", 1, "size-input", 3, "click"], ["mapInput", "", "type", "number", 3, "value", "change", "click"], ["width", ""], ["height", ""], ["mat-menu-item", "", 3, "click"], [1, "fitting-radios", 3, "ngModel", "ngModelChange"], [3, "value", 4, "ngFor", "ngForOf"], ["mat-menu-item", "", 1, "make-picture", 3, "click"], ["tooltip", "Creates a picture from the current view: directly saves a png of arbitrary size from the current view", "icon", "png", 3, "matMenuTriggerFor"], ["hidden", "", "id", "screenshotCanvas"], [3, "value"]], template: function MakePictureComponent_Template(rf, ctx) { if (rf & 1) {
2480
+ const _r5 = i0.ɵɵgetCurrentView();
2481
+ i0.ɵɵelementStart(0, "mat-menu", 0, 1)(2, "button", 2);
2482
+ i0.ɵɵlistener("click", function MakePictureComponent_Template_button_click_2_listener($event) { return $event.stopPropagation(); });
2483
+ i0.ɵɵelementStart(3, "label");
2484
+ i0.ɵɵtext(4, "width");
2485
+ i0.ɵɵelementEnd();
2486
+ i0.ɵɵelementStart(5, "input", 3, 4);
2487
+ i0.ɵɵlistener("change", function MakePictureComponent_Template_input_change_5_listener() { i0.ɵɵrestoreView(_r5); const _r1 = i0.ɵɵreference(6); return i0.ɵɵresetView(ctx.setWidth(_r1.value)); })("click", function MakePictureComponent_Template_input_click_5_listener($event) { return $event.stopPropagation(); });
2488
+ i0.ɵɵelementEnd()();
2489
+ i0.ɵɵelementStart(7, "button", 2);
2490
+ i0.ɵɵlistener("click", function MakePictureComponent_Template_button_click_7_listener($event) { return $event.stopPropagation(); });
2491
+ i0.ɵɵelementStart(8, "label");
2492
+ i0.ɵɵtext(9, "height");
2493
+ i0.ɵɵelementEnd();
2494
+ i0.ɵɵelementStart(10, "input", 3, 5);
2495
+ i0.ɵɵlistener("change", function MakePictureComponent_Template_input_change_10_listener() { i0.ɵɵrestoreView(_r5); const _r2 = i0.ɵɵreference(11); return i0.ɵɵresetView(ctx.setHeight(_r2.value)); })("click", function MakePictureComponent_Template_input_click_10_listener($event) { return $event.stopPropagation(); });
2496
+ i0.ɵɵelementEnd()();
2497
+ i0.ɵɵelementStart(12, "button", 6);
2498
+ i0.ɵɵlistener("click", function MakePictureComponent_Template_button_click_12_listener($event) { return $event.stopPropagation(); });
2499
+ i0.ɵɵelementStart(13, "mat-radio-group", 7);
2500
+ i0.ɵɵlistener("ngModelChange", function MakePictureComponent_Template_mat_radio_group_ngModelChange_13_listener($event) { return ctx.fitting = $event; });
2501
+ i0.ɵɵtemplate(14, MakePictureComponent_mat_radio_button_14_Template, 2, 2, "mat-radio-button", 8);
2502
+ i0.ɵɵelementEnd()();
2503
+ i0.ɵɵelementStart(15, "button", 9);
2504
+ i0.ɵɵlistener("click", function MakePictureComponent_Template_button_click_15_listener() { return ctx.makePicture(); });
2505
+ i0.ɵɵtext(16, " Create picture ");
2506
+ i0.ɵɵelementEnd()();
2507
+ i0.ɵɵelement(17, "app-menu-toggle", 10);
2508
+ i0.ɵɵelementStart(18, "div");
2509
+ i0.ɵɵelement(19, "canvas", 11);
2510
+ i0.ɵɵelementEnd();
2511
+ } if (rf & 2) {
2512
+ const _r0 = i0.ɵɵreference(1);
2513
+ i0.ɵɵadvance(5);
2514
+ i0.ɵɵproperty("value", 3840);
2515
+ i0.ɵɵadvance(5);
2516
+ i0.ɵɵproperty("value", 2610);
2517
+ i0.ɵɵadvance(3);
2518
+ i0.ɵɵproperty("ngModel", ctx.fitting);
2519
+ i0.ɵɵadvance(1);
2520
+ i0.ɵɵproperty("ngForOf", ctx.fittings);
2521
+ i0.ɵɵadvance(3);
2522
+ i0.ɵɵproperty("matMenuTriggerFor", _r0);
2523
+ } }, dependencies: [i2.NgForOf, i3.NgControlStatus, i3.NgModel, i3$1.MatMenu, i3$1.MatMenuItem, i3$1.MatMenuTrigger, i5.MatRadioGroup, i5.MatRadioButton, MenuToggleComponent], styles: [".size-input{background:transparent;color:var(--phoenix-text-color);text-align:center}.size-input label{width:60px}.size-input input{background:transparent;color:var(--phoenix-text-color);width:80px}.make-picture{text-align:center;display:block}.make-picture span{padding:5px 25px;border:2px solid var(--phoenix-text-color);border-radius:8px}\n"], encapsulation: 2 });
2524
+ (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MakePictureComponent, [{
2525
+ type: Component,
2526
+ args: [{ selector: 'app-make-picture', encapsulation: ViewEncapsulation.None, template: "<mat-menu class=\"mat-menu\" #menu>\n <button mat-menu-item (click)=\"$event.stopPropagation()\" class=\"size-input\">\n <label>width</label>\n <input\n #width\n mapInput\n type=\"number\"\n [value]=\"3840\"\n (change)=\"setWidth(width.value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </button>\n <button mat-menu-item (click)=\"$event.stopPropagation()\" class=\"size-input\">\n <label>height</label>\n <input\n #height\n mapInput\n type=\"number\"\n [value]=\"2610\"\n (change)=\"setHeight(height.value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </button>\n <button mat-menu-item (click)=\"$event.stopPropagation()\">\n <mat-radio-group [(ngModel)]=\"fitting\" class=\"fitting-radios\">\n <mat-radio-button *ngFor=\"let fitting of fittings\" [value]=\"fitting\"\n >{{ fitting }}\n </mat-radio-button>\n </mat-radio-group>\n </button>\n <button mat-menu-item class=\"make-picture\" (click)=\"makePicture()\">\n Create picture\n </button>\n</mat-menu>\n<app-menu-toggle\n [matMenuTriggerFor]=\"menu\"\n tooltip=\"Creates a picture from the current view: directly saves a png of arbitrary size from the current view\"\n icon=\"png\"\n>\n</app-menu-toggle>\n<div>\n <canvas hidden id=\"screenshotCanvas\"></canvas>\n</div>\n", styles: [".size-input{background:transparent;color:var(--phoenix-text-color);text-align:center}.size-input label{width:60px}.size-input input{background:transparent;color:var(--phoenix-text-color);width:80px}.make-picture{text-align:center;display:block}.make-picture span{padding:5px 25px;border:2px solid var(--phoenix-text-color);border-radius:8px}\n"] }]
2527
+ }], function () { return [{ type: EventDisplayService }]; }, null); })();
2528
+
2445
2529
  class PerformanceToggleComponent {
2446
2530
  constructor(eventDisplay) {
2447
2531
  this.eventDisplay = eventDisplay;
@@ -2637,7 +2721,7 @@ ShareLinkDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sh
2637
2721
  i0.ɵɵtextInterpolate(ctx.shareLink.value);
2638
2722
  i0.ɵɵadvance(7);
2639
2723
  i0.ɵɵtextInterpolate(ctx.embedLink);
2640
- } }, dependencies: [i1$2.MatDialogTitle, i1$2.MatDialogContent, i1$2.MatDialogActions, i2$2.MatButton, i4.MatCheckbox], styles: [".share-box[_ngcontent-%COMP%]{width:30rem;max-width:100%;position:relative;background:var(--phoenix-background-color-tertiary);border:1px solid var(--phoenix-border);border-radius:.5rem;padding:1.25rem;word-wrap:break-word}.share-box[_ngcontent-%COMP%] .share-box-copy[_ngcontent-%COMP%]{position:absolute;top:-1px;right:-1px;background:transparent;color:inherit;cursor:pointer;padding:.25rem .5rem;font-size:.75rem;border:1px solid var(--phoenix-border);border-radius:.5rem}.share-box[_ngcontent-%COMP%] .share-box-copy[_ngcontent-%COMP%]:hover{background:var(--phoenix-border)}"] });
2724
+ } }, dependencies: [i1$2.MatDialogTitle, i1$2.MatDialogContent, i1$2.MatDialogActions, i2$2.MatButton, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i4$1.MatCheckbox], styles: [".share-box[_ngcontent-%COMP%]{width:30rem;max-width:100%;position:relative;background:var(--phoenix-background-color-tertiary);border:1px solid var(--phoenix-border);border-radius:.5rem;padding:1.25rem;word-wrap:break-word}.share-box[_ngcontent-%COMP%] .share-box-copy[_ngcontent-%COMP%]{position:absolute;top:-1px;right:-1px;background:transparent;color:inherit;cursor:pointer;padding:.25rem .5rem;font-size:.75rem;border:1px solid var(--phoenix-border);border-radius:.5rem}.share-box[_ngcontent-%COMP%] .share-box-copy[_ngcontent-%COMP%]:hover{background:var(--phoenix-border)}"] });
2641
2725
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShareLinkDialogComponent, [{
2642
2726
  type: Component,
2643
2727
  args: [{ selector: 'app-share-link-dialog', template: "<div class=\"dialog\">\n <h1 mat-dialog-title>Create shareable link</h1>\n <div mat-dialog-content class=\"dialog-content\">\n <h5>URL options</h5>\n <div class=\"form-group mt-2\">\n <label for=\"eventDataFile\">Event data file (URL or path)</label>\n <input\n type=\"text\"\n class=\"form-control\"\n id=\"eventDataFile\"\n placeholder=\"assets/files/event_data/atlaseventdump2.json\"\n [value]=\"urlOptions.file\"\n (input)=\"setOptionValue('file', $event.target.value)\"\n />\n </div>\n <div class=\"form-group\">\n <label for=\"eventDataType\">Event data type</label>\n <select\n class=\"form-control\"\n id=\"eventDataType\"\n (input)=\"setOptionValue('type', $event.target.value)\"\n >\n <option selected value=\"\">Select</option>\n <option value=\"jivexml\">JiveXML</option>\n <option value=\"json\">JSON</option>\n </select>\n </div>\n <div class=\"form-group\">\n <label for=\"configuration\">Configuration (URL or path)</label>\n <input\n type=\"text\"\n class=\"form-control\"\n id=\"configuration\"\n placeholder=\"assets/files/config/phoenix-config.json\"\n [value]=\"urlOptions.config\"\n (input)=\"setOptionValue('config', $event.target.value)\"\n />\n </div>\n <div class=\"form-group\">\n <mat-checkbox\n [checked]=\"urlOptions.hideWidgets\"\n (change)=\"setOptionValue('hideWidgets', $event.checked)\"\n >\n Hide all widgets\n </mat-checkbox>\n </div>\n\n <h5>Share</h5>\n <div class=\"share-box my-2\">\n <span>{{ shareLink.value }}</span>\n <button\n class=\"share-box-copy\"\n (click)=\"copyText(shareLink.value, $event.target)\"\n >\n COPY\n </button>\n </div>\n <h5>Embed</h5>\n <div class=\"share-box my-2\">\n <span>{{ embedLink }}</span>\n <button\n class=\"share-box-copy\"\n (click)=\"copyText(embedLink, $event.target)\"\n >\n COPY\n </button>\n </div>\n <h5>QR Code</h5>\n <div class=\"qrcode d-flex justify-content-center\">\n <canvas #qrcodeCanvas></canvas>\n </div>\n </div>\n <div mat-dialog-actions>\n <button mat-button (click)=\"onClose()\" cdkFocusInitial>Close</button>\n </div>\n</div>\n", styles: [".share-box{width:30rem;max-width:100%;position:relative;background:var(--phoenix-background-color-tertiary);border:1px solid var(--phoenix-border);border-radius:.5rem;padding:1.25rem;word-wrap:break-word}.share-box .share-box-copy{position:absolute;top:-1px;right:-1px;background:transparent;color:inherit;cursor:pointer;padding:.25rem .5rem;font-size:.75rem;border:1px solid var(--phoenix-border);border-radius:.5rem}.share-box .share-box-copy:hover{background:var(--phoenix-border)}\n"] }]
@@ -2675,21 +2759,21 @@ class UiMenuComponent {
2675
2759
  }
2676
2760
  }
2677
2761
  UiMenuComponent.ɵfac = function UiMenuComponent_Factory(t) { return new (t || UiMenuComponent)(); };
2678
- UiMenuComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UiMenuComponent, selectors: [["app-ui-menu"]], inputs: { eventDataImportOptions: "eventDataImportOptions", animationPresets: "animationPresets" }, ngContentSelectors: _c0$1, decls: 21, vars: 2, consts: [[3, "animationPresets"], [3, "eventDataImportOptions"]], template: function UiMenuComponent_Template(rf, ctx) { if (rf & 1) {
2762
+ UiMenuComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UiMenuComponent, selectors: [["app-ui-menu"]], inputs: { eventDataImportOptions: "eventDataImportOptions", animationPresets: "animationPresets" }, ngContentSelectors: _c0$1, decls: 22, vars: 2, consts: [[3, "animationPresets"], [3, "eventDataImportOptions"]], template: function UiMenuComponent_Template(rf, ctx) { if (rf & 1) {
2679
2763
  i0.ɵɵprojectionDef();
2680
2764
  i0.ɵɵelementStart(0, "app-ui-menu-wrapper");
2681
- i0.ɵɵelement(1, "app-event-selector")(2, "app-zoom-controls")(3, "app-view-options")(4, "app-auto-rotate")(5, "app-dark-theme")(6, "app-object-clipping")(7, "app-main-view-toggle")(8, "app-overlay-view")(9, "app-object-selection")(10, "app-info-panel")(11, "app-animate-event")(12, "app-animate-camera", 0)(13, "app-collections-info")(14, "app-performance-toggle")(15, "app-vr-toggle")(16, "app-ar-toggle")(17, "app-ss-mode")(18, "app-io-options", 1)(19, "app-share-link");
2682
- i0.ɵɵprojection(20);
2765
+ i0.ɵɵelement(1, "app-event-selector")(2, "app-zoom-controls")(3, "app-view-options")(4, "app-auto-rotate")(5, "app-dark-theme")(6, "app-object-clipping")(7, "app-main-view-toggle")(8, "app-overlay-view")(9, "app-object-selection")(10, "app-info-panel")(11, "app-animate-event")(12, "app-animate-camera", 0)(13, "app-collections-info")(14, "app-performance-toggle")(15, "app-vr-toggle")(16, "app-ar-toggle")(17, "app-ss-mode")(18, "app-make-picture")(19, "app-io-options", 1)(20, "app-share-link");
2766
+ i0.ɵɵprojection(21);
2683
2767
  i0.ɵɵelementEnd();
2684
2768
  } if (rf & 2) {
2685
2769
  i0.ɵɵadvance(12);
2686
2770
  i0.ɵɵproperty("animationPresets", ctx.animationPresets);
2687
- i0.ɵɵadvance(6);
2771
+ i0.ɵɵadvance(7);
2688
2772
  i0.ɵɵproperty("eventDataImportOptions", ctx.eventDataImportOptions);
2689
- } }, dependencies: [UiMenuWrapperComponent, CollectionsInfoComponent, IoOptionsComponent, OverlayViewComponent, ObjectSelectionComponent, EventSelectorComponent, ObjectClippingComponent, DarkThemeComponent, AutoRotateComponent, ViewOptionsComponent, InfoPanelComponent, MainViewToggleComponent, ZoomControlsComponent, AnimateCameraComponent, AnimateEventComponent, VrToggleComponent, ArToggleComponent, SSModeComponent, PerformanceToggleComponent, ShareLinkComponent] });
2773
+ } }, dependencies: [UiMenuWrapperComponent, CollectionsInfoComponent, IoOptionsComponent, OverlayViewComponent, ObjectSelectionComponent, EventSelectorComponent, ObjectClippingComponent, DarkThemeComponent, AutoRotateComponent, ViewOptionsComponent, InfoPanelComponent, MainViewToggleComponent, ZoomControlsComponent, AnimateCameraComponent, AnimateEventComponent, VrToggleComponent, ArToggleComponent, SSModeComponent, MakePictureComponent, PerformanceToggleComponent, ShareLinkComponent] });
2690
2774
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UiMenuComponent, [{
2691
2775
  type: Component,
2692
- args: [{ selector: 'app-ui-menu', template: "<app-ui-menu-wrapper>\n <!-- Event selector -->\n <app-event-selector></app-event-selector>\n\n <!-- Zoom in and zoom out controls -->\n <app-zoom-controls></app-zoom-controls>\n\n <app-view-options></app-view-options>\n\n <app-auto-rotate></app-auto-rotate>\n\n <!-- Dark theme toggle -->\n <app-dark-theme></app-dark-theme>\n\n <!-- Toggle for clipping geometries -->\n <app-object-clipping></app-object-clipping>\n\n <!-- Main view toggle -->\n <app-main-view-toggle></app-main-view-toggle>\n\n <!-- Toggle for overlay panel -->\n <app-overlay-view></app-overlay-view>\n\n <!-- Toggle for selected object panel -->\n <app-object-selection></app-object-selection>\n\n <!-- Info panel -->\n <app-info-panel></app-info-panel>\n\n <!-- Toggle for animating the event data -->\n <app-animate-event></app-animate-event>\n\n <!-- Toggle for animating camera through event -->\n <app-animate-camera\n [animationPresets]=\"animationPresets\"\n ></app-animate-camera>\n\n <!-- Toggle for collections info -->\n <app-collections-info></app-collections-info>\n\n <!-- Toggle for performance -->\n <app-performance-toggle></app-performance-toggle>\n\n <!-- Toggle for VR -->\n <app-vr-toggle></app-vr-toggle>\n\n <!-- Toggle for AR -->\n <app-ar-toggle></app-ar-toggle>\n\n <!-- Toggle for screenshot mode -->\n <app-ss-mode></app-ss-mode>\n\n <!-- Toggle for loading geometries modal-->\n <app-io-options\n [eventDataImportOptions]=\"eventDataImportOptions\"\n ></app-io-options>\n\n <!-- Toggle for shareable link constructor modal-->\n <app-share-link></app-share-link>\n\n <!-- Extra options -->\n <ng-content></ng-content>\n</app-ui-menu-wrapper>\n" }]
2776
+ args: [{ selector: 'app-ui-menu', template: "<app-ui-menu-wrapper>\n <!-- Event selector -->\n <app-event-selector></app-event-selector>\n\n <!-- Zoom in and zoom out controls -->\n <app-zoom-controls></app-zoom-controls>\n\n <app-view-options></app-view-options>\n\n <app-auto-rotate></app-auto-rotate>\n\n <!-- Dark theme toggle -->\n <app-dark-theme></app-dark-theme>\n\n <!-- Toggle for clipping geometries -->\n <app-object-clipping></app-object-clipping>\n\n <!-- Main view toggle -->\n <app-main-view-toggle></app-main-view-toggle>\n\n <!-- Toggle for overlay panel -->\n <app-overlay-view></app-overlay-view>\n\n <!-- Toggle for selected object panel -->\n <app-object-selection></app-object-selection>\n\n <!-- Info panel -->\n <app-info-panel></app-info-panel>\n\n <!-- Toggle for animating the event data -->\n <app-animate-event></app-animate-event>\n\n <!-- Toggle for animating camera through event -->\n <app-animate-camera\n [animationPresets]=\"animationPresets\"\n ></app-animate-camera>\n\n <!-- Toggle for collections info -->\n <app-collections-info></app-collections-info>\n\n <!-- Toggle for performance -->\n <app-performance-toggle></app-performance-toggle>\n\n <!-- Toggle for VR -->\n <app-vr-toggle></app-vr-toggle>\n\n <!-- Toggle for AR -->\n <app-ar-toggle></app-ar-toggle>\n\n <!-- Toggle for screenshot mode -->\n <app-ss-mode></app-ss-mode>\n\n <!-- Make pictures from scene -->\n <app-make-picture></app-make-picture>\n\n <!-- Toggle for loading geometries modal-->\n <app-io-options\n [eventDataImportOptions]=\"eventDataImportOptions\"\n ></app-io-options>\n\n <!-- Toggle for shareable link constructor modal-->\n <app-share-link></app-share-link>\n\n <!-- Extra options -->\n <ng-content></ng-content>\n</app-ui-menu-wrapper>\n" }]
2693
2777
  }], null, { eventDataImportOptions: [{
2694
2778
  type: Input
2695
2779
  }], animationPresets: [{
@@ -3214,6 +3298,7 @@ const PHOENIX_COMPONENTS = [
3214
3298
  VrToggleComponent,
3215
3299
  ArToggleComponent,
3216
3300
  SSModeComponent,
3301
+ MakePictureComponent,
3217
3302
  PerformanceToggleComponent,
3218
3303
  LoaderComponent,
3219
3304
  ShareLinkComponent,
@@ -3244,7 +3329,9 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
3244
3329
  MatButtonModule,
3245
3330
  MatTooltipModule,
3246
3331
  OverlayModule,
3332
+ FormsModule,
3247
3333
  MatMenuModule,
3334
+ MatRadioModule,
3248
3335
  MatSliderModule,
3249
3336
  MatSlideToggleModule,
3250
3337
  MatCheckboxModule,
@@ -3264,7 +3351,9 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
3264
3351
  MatButtonModule,
3265
3352
  MatTooltipModule,
3266
3353
  OverlayModule,
3354
+ FormsModule,
3267
3355
  MatMenuModule,
3356
+ MatRadioModule,
3268
3357
  MatSliderModule,
3269
3358
  MatSlideToggleModule,
3270
3359
  MatCheckboxModule,
@@ -3327,6 +3416,7 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
3327
3416
  VrToggleComponent,
3328
3417
  ArToggleComponent,
3329
3418
  SSModeComponent,
3419
+ MakePictureComponent,
3330
3420
  PerformanceToggleComponent,
3331
3421
  LoaderComponent,
3332
3422
  ShareLinkComponent,
@@ -3344,7 +3434,9 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
3344
3434
  MatButtonModule,
3345
3435
  MatTooltipModule,
3346
3436
  OverlayModule,
3437
+ FormsModule,
3347
3438
  MatMenuModule,
3439
+ MatRadioModule,
3348
3440
  MatSliderModule,
3349
3441
  MatSlideToggleModule,
3350
3442
  MatCheckboxModule,
@@ -3385,6 +3477,7 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
3385
3477
  VrToggleComponent,
3386
3478
  ArToggleComponent,
3387
3479
  SSModeComponent,
3480
+ MakePictureComponent,
3388
3481
  PerformanceToggleComponent,
3389
3482
  LoaderComponent,
3390
3483
  ShareLinkComponent,
@@ -3401,5 +3494,5 @@ PhoenixUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
3401
3494
  * Generated bundle index. Do not edit.
3402
3495
  */
3403
3496
 
3404
- export { AnimateCameraComponent, AnimateEventComponent, ArToggleComponent, AttributePipe, AutoRotateComponent, CollectionsInfoComponent, CollectionsInfoOverlayComponent, ConfigSliderComponent, CycleEventsComponent, DarkThemeComponent, EmbedMenuComponent, EventDataExplorerComponent, EventDataExplorerDialogComponent, EventDataFormat, EventDisplayService, EventSelectorComponent, ExperimentInfoComponent, ExperimentLinkComponent, FileExplorerComponent, FileNode, IOOptionsDialogComponent, ImportOption, InfoPanelComponent, InfoPanelOverlayComponent, IoOptionsComponent, LoaderComponent, MainViewToggleComponent, MenuToggleComponent, NavComponent, ObjectClippingComponent, ObjectSelectionComponent, ObjectSelectionOverlayComponent, OverlayComponent, OverlayViewComponent, OverlayViewWindowComponent, PerformanceToggleComponent, PhoenixMenuComponent, PhoenixMenuItemComponent, PhoenixUIModule, RingLoaderComponent, SSModeComponent, ShareLinkComponent, ShareLinkDialogComponent, TreeMenuComponent, TreeMenuItemComponent, UiMenuComponent, UiMenuWrapperComponent, ViewOptionsComponent, VrToggleComponent, ZoomControlsComponent, defaultAnimationPresets };
3497
+ export { AnimateCameraComponent, AnimateEventComponent, ArToggleComponent, AttributePipe, AutoRotateComponent, CollectionsInfoComponent, CollectionsInfoOverlayComponent, ConfigSliderComponent, CycleEventsComponent, DarkThemeComponent, EmbedMenuComponent, EventDataExplorerComponent, EventDataExplorerDialogComponent, EventDataFormat, EventDisplayService, EventSelectorComponent, ExperimentInfoComponent, ExperimentLinkComponent, FileExplorerComponent, FileNode, IOOptionsDialogComponent, ImportOption, InfoPanelComponent, InfoPanelOverlayComponent, IoOptionsComponent, LoaderComponent, MainViewToggleComponent, MakePictureComponent, MenuToggleComponent, NavComponent, ObjectClippingComponent, ObjectSelectionComponent, ObjectSelectionOverlayComponent, OverlayComponent, OverlayViewComponent, OverlayViewWindowComponent, PerformanceToggleComponent, PhoenixMenuComponent, PhoenixMenuItemComponent, PhoenixUIModule, RingLoaderComponent, SSModeComponent, ShareLinkComponent, ShareLinkDialogComponent, TreeMenuComponent, TreeMenuItemComponent, UiMenuComponent, UiMenuWrapperComponent, ViewOptionsComponent, VrToggleComponent, ZoomControlsComponent, defaultAnimationPresets };
3405
3498
  //# sourceMappingURL=phoenix-ui-components.mjs.map