phoenix-ui-components 2.9.0 → 2.10.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.
- package/README.md +4 -2
- package/dist/README.md +4 -2
- package/dist/components/phoenix-menu/index.d.ts +1 -1
- package/dist/components/phoenix-menu/{pheonix-menu-item → phoenix-menu-item}/phoenix-menu-item.component.d.ts +0 -0
- package/dist/components/phoenix-ui.module.d.ts +60 -59
- package/dist/components/ui-menu/experiment-info/experiment-info.component.d.ts +4 -3
- package/dist/components/ui-menu/index.d.ts +1 -0
- package/dist/components/ui-menu/ui-menu-wrapper/ui-menu-wrapper.component.d.ts +6 -0
- package/dist/components/ui-menu/ui-menu.component.d.ts +0 -1
- package/dist/esm2020/components/phoenix-menu/index.mjs +2 -2
- package/dist/esm2020/components/phoenix-menu/{pheonix-menu-item → phoenix-menu-item}/phoenix-menu-item.component.mjs +3 -3
- package/dist/esm2020/components/phoenix-menu/phoenix-menu.component.mjs +1 -1
- package/dist/esm2020/components/phoenix-ui.module.mjs +5 -3
- package/dist/esm2020/components/ui-menu/experiment-info/experiment-info.component.mjs +7 -5
- package/dist/esm2020/components/ui-menu/index.mjs +2 -1
- package/dist/esm2020/components/ui-menu/ss-mode/ss-mode.component.mjs +2 -2
- package/dist/esm2020/components/ui-menu/ui-menu-wrapper/ui-menu-wrapper.component.mjs +16 -0
- package/dist/esm2020/components/ui-menu/ui-menu.component.mjs +23 -25
- package/dist/fesm2015/phoenix-ui-components.mjs +28 -12
- package/dist/fesm2015/phoenix-ui-components.mjs.map +1 -1
- package/dist/fesm2020/phoenix-ui-components.mjs +28 -12
- package/dist/fesm2020/phoenix-ui-components.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -100,10 +100,10 @@ class PhoenixMenuItemComponent {
|
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
102
|
PhoenixMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PhoenixMenuItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
103
|
-
PhoenixMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PhoenixMenuItemComponent, selector: "app-phoenix-menu-item", inputs: { currentNode: "currentNode" }, viewQueries: [{ propertyName: "phoenixMenuItem", first: true, predicate: ["phoenixMenuItem"], descendants: true }], ngImport: i0, template: "<div class=\"phoenix-menu-item\" #phoenixMenuItem>\n <div class=\"phoenix-menu-item-left align-items-center\">\n <!-- If the item has some toggle function -->\n <ng-container *ngIf=\"currentNode.onToggle; else nodeName\">\n <mat-slide-toggle\n [checked]=\"currentNode.toggleState\"\n (change)=\"currentNode.toggleSelfAndDescendants($event.checked)\"\n >\n <ng-container *ngTemplateOutlet=\"nodeName\"></ng-container>\n </mat-slide-toggle>\n </ng-container>\n <!-- If the item has no toggle function -->\n <ng-template #nodeName>\n <span class=\"d-flex w-100 align-items-center\">\n <span *ngIf=\"currentNode.icon\" class=\"icon-wrapper item-icon\">\n <svg>\n <use\n attr.href=\"assets/icons/{{ currentNode.icon }}.svg#{{\n currentNode.icon\n }}\"\n ></use>\n </svg>\n </span>\n <span class=\"item-name\" [title]=\"currentNode.name\">{{\n currentNode.name\n }}</span>\n </span>\n </ng-template>\n </div>\n <div class=\"phoenix-menu-item-right\">\n <div *ngIf=\"currentNode.configs.length > 0\">\n <button\n class=\"icon-wrapper icon-button btn-blank item-settings\"\n (click)=\"\n calculateConfigTop();\n currentNode.configActive = !currentNode.configActive\n \"\n >\n <svg>\n <use href=\"assets/icons/gear.svg#gear\"></use>\n </svg>\n </button>\n <div\n class=\"item-config-backdrop\"\n *ngIf=\"currentNode.configActive\"\n (click)=\"currentNode.configActive = false\"\n ></div>\n <div\n class=\"item-config\"\n [hidden]=\"!currentNode.configActive\"\n [ngStyle]=\"{ 'top.px': configTop }\"\n >\n <ng-container\n *ngFor=\"let config of castConfigsToAny(currentNode.configs)\"\n [ngSwitch]=\"config.type\"\n >\n <!-- Config types -->\n <label class=\"item-config-single\" *ngIf=\"!config.hidden\">\n <span\n class=\"item-config-label\"\n *ngIf=\"config.type !== 'button'\"\n [ngClass]=\"{ 'font-weight-bold w-100': config.type === 'label' }\"\n >\n {{ config.label }}\n </span>\n <div\n class=\"item-config-data\"\n [ngClass]=\"{ 'p-0': config.type === 'button' }\"\n *ngIf=\"config.type !== 'label'\"\n >\n <mat-checkbox\n *ngSwitchCase=\"'checkbox'\"\n [checked]=\"config.isChecked\"\n (change)=\"\n config.onChange($event.checked);\n config.isChecked = $event.checked\n \"\n ></mat-checkbox>\n\n <app-config-slider\n *ngSwitchCase=\"'slider'\"\n [value]=\"config.value\"\n (onChange)=\"config.onChange($event); config.value = $event\"\n [min]=\"config.min\"\n [max]=\"config.max\"\n [step]=\"config.step\"\n [allowCustomValue]=\"config.allowCustomValue\"\n >\n </app-config-slider>\n\n <button\n *ngSwitchCase=\"'button'\"\n class=\"w-100\"\n (click)=\"config.onClick()\"\n mat-button\n mat-stroked-button\n >\n {{ config.label }}\n </button>\n\n <input\n *ngSwitchCase=\"'color'\"\n type=\"color\"\n [value]=\"config.color\"\n (input)=\"\n config.onChange($event.target.value);\n config.color = $event.target.value\n \"\n />\n\n <ngx-slider\n *ngSwitchCase=\"'rangeSlider'\"\n class=\"range-slider\"\n [value]=\"config.value ? config.value : config.min\"\n [highValue]=\"config.highValue ? config.highValue : config.max\"\n (userChange)=\"\n config.onChange($event);\n config.value = $event.value;\n config.highValue = $event.highValue\n \"\n [options]=\"{\n floor: config.min,\n ceil: config.max,\n step: config.step,\n animate: false\n }\"\n ></ngx-slider>\n\n <select\n *ngSwitchCase=\"'select'\"\n class=\"w-100\"\n (change)=\"config.onChange($event.target.value)\"\n >\n <option\n *ngFor=\"let singleOption of config.options\"\n [value]=\"singleOption\"\n >\n {{ singleOption }}\n </option>\n </select>\n </div>\n </label>\n <!-- Config types END -->\n </ng-container>\n </div>\n </div>\n <button\n class=\"icon-wrapper icon-button btn-blank item-expand\"\n *ngIf=\"currentNode.children.length > 0\"\n (click)=\"currentNode.childrenActive = !currentNode.childrenActive\"\n [ngClass]=\"{ expanded: currentNode.childrenActive }\"\n >\n <svg>\n <use href=\"assets/icons/expand.svg#expand\"></use>\n </svg>\n </button>\n </div>\n</div>\n<div class=\"phoenix-menu-children\" *ngIf=\"currentNode.childrenActive\">\n <app-phoenix-menu-item\n *ngFor=\"let childNode of currentNode.children\"\n [currentNode]=\"childNode\"\n >\n </app-phoenix-menu-item>\n</div>\n", styles: [".phoenix-menu-item{width:100%;padding:.6rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color);font-size:.8rem;transition:all .5s;display:flex;justify-content:space-between;align-items:center}.phoenix-menu-item-left{display:flex;justify-content:flex-start;min-width:0;padding-right:.5rem;overflow:hidden}.phoenix-menu-item-left .item-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phoenix-menu-item-left .item-icon{margin-right:.2rem}.phoenix-menu-item-right{display:flex;justify-content:flex-end}.phoenix-menu-item-right .item-expand.expanded{transform:scaleY(-1)}.phoenix-menu-item-right .item-settings{margin-right:.2rem}.phoenix-menu-item-right .item-config-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:110}.phoenix-menu-item-right .item-config{position:absolute;margin-top:-5rem;right:100%;width:14rem;padding:.5rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color-secondary);box-shadow:var(--phoenix-box-shadow);display:flex;flex-direction:column;z-index:120}.phoenix-menu-item-right .item-config>*{margin-bottom:.4rem}.phoenix-menu-item-right .item-config>*:last-child{margin-bottom:0}.phoenix-menu-item-right .item-config .item-config-single{display:flex;flex-direction:row}.phoenix-menu-item-right .item-config .item-config-single .item-config-label{width:30%}.phoenix-menu-item-right .item-config .item-config-single .item-config-data{flex-grow:1;padding-left:.5rem}.phoenix-menu-item .icon-wrapper{display:inline-block;width:1.3rem;height:1.3rem;padding:.23rem;transition:all .4s}.phoenix-menu-item .icon-wrapper.icon-button:hover{background:var(--phoenix-options-icon-bg);border-radius:40%;cursor:pointer}.phoenix-menu-item .icon-wrapper svg{width:100%;height:100%;vertical-align:top}.phoenix-menu-item .mat-slide-toggle-bar{width:30px!important}.phoenix-menu-item .mat-slide-toggle-thumb{width:15px!important;height:15px!important;position:absolute;top:2px}.phoenix-menu-item .mat-slider-horizontal{min-width:0;width:100%;height:20px}.phoenix-menu-item .mat-slider-horizontal .mat-slider-wrapper{top:10px}.phoenix-menu-item label.mat-checkbox-layout{margin:0}@media screen and (max-width: 768px){.phoenix-menu-item{font-size:.75rem;padding:.5rem}.phoenix-menu-item .icon-wrapper{width:1rem;height:1rem;padding:.15rem}}.phoenix-menu-children{margin-left:.5rem;border-left:1px solid var(--phoenix-accent)}.range-slider.ngx-slider .ngx-slider-bar{background:var(--phoenix-text-color-secondary);height:.2rem}.range-slider.ngx-slider .ngx-slider-selection{background:var(--phoenix-accent)}.range-slider.ngx-slider .ngx-slider-pointer{width:1rem;height:1rem;top:-.45rem;bottom:0;background-color:var(--phoenix-accent)}.range-slider.ngx-slider .ngx-slider-pointer:after{display:none}.range-slider.ngx-slider .ngx-slider-bubble{color:var(--phoenix-text-color);font-size:.8rem}.range-slider.ngx-slider .ngx-slider-bubble.ngx-slider-limit{color:var(--phoenix-text-color-secondary)}\n"], components: [{ type: i1$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ConfigSliderComponent, selector: "app-config-slider", inputs: ["value", "min", "max", "step", "allowCustomValue"], outputs: ["onChange"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }, { type: PhoenixMenuItemComponent, selector: "app-phoenix-menu-item", inputs: ["currentNode"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
103
|
+
PhoenixMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PhoenixMenuItemComponent, selector: "app-phoenix-menu-item", inputs: { currentNode: "currentNode" }, viewQueries: [{ propertyName: "phoenixMenuItem", first: true, predicate: ["phoenixMenuItem"], descendants: true }], ngImport: i0, template: "<div class=\"phoenix-menu-item\" #phoenixMenuItem>\n <div class=\"phoenix-menu-item-left align-items-center\">\n <!-- If the item has some toggle function -->\n <ng-container *ngIf=\"currentNode.onToggle; else nodeName\">\n <mat-slide-toggle\n [checked]=\"currentNode.toggleState\"\n (change)=\"currentNode.toggleSelfAndDescendants($event.checked)\"\n >\n <ng-container *ngTemplateOutlet=\"nodeName\"></ng-container>\n </mat-slide-toggle>\n </ng-container>\n <!-- If the item has no toggle function -->\n <ng-template #nodeName>\n <span class=\"d-flex w-100 align-items-center\">\n <span *ngIf=\"currentNode.icon\" class=\"icon-wrapper item-icon\">\n <svg>\n <use\n attr.href=\"assets/icons/{{ currentNode.icon }}.svg#{{\n currentNode.icon\n }}\"\n ></use>\n </svg>\n </span>\n <span class=\"item-name\" [title]=\"currentNode.name\">{{\n currentNode.name\n }}</span>\n </span>\n </ng-template>\n </div>\n <div class=\"phoenix-menu-item-right\">\n <div *ngIf=\"currentNode.configs.length > 0\">\n <button\n class=\"icon-wrapper icon-button btn-blank item-settings\"\n (click)=\"\n calculateConfigTop();\n currentNode.configActive = !currentNode.configActive\n \"\n >\n <svg>\n <use href=\"assets/icons/gear.svg#gear\"></use>\n </svg>\n </button>\n <div\n class=\"item-config-backdrop\"\n *ngIf=\"currentNode.configActive\"\n (click)=\"currentNode.configActive = false\"\n ></div>\n <div\n class=\"item-config\"\n [hidden]=\"!currentNode.configActive\"\n [ngStyle]=\"{ 'top.px': configTop }\"\n >\n <ng-container\n *ngFor=\"let config of castConfigsToAny(currentNode.configs)\"\n [ngSwitch]=\"config.type\"\n >\n <!-- Config types -->\n <label class=\"item-config-single\" *ngIf=\"!config.hidden\">\n <span\n class=\"item-config-label\"\n *ngIf=\"config.type !== 'button'\"\n [ngClass]=\"{ 'font-weight-bold w-100': config.type === 'label' }\"\n >\n {{ config.label }}\n </span>\n <div\n class=\"item-config-data\"\n [ngClass]=\"{ 'p-0': config.type === 'button' }\"\n *ngIf=\"config.type !== 'label'\"\n >\n <mat-checkbox\n *ngSwitchCase=\"'checkbox'\"\n [checked]=\"config.isChecked\"\n (change)=\"\n config.onChange($event.checked);\n config.isChecked = $event.checked\n \"\n ></mat-checkbox>\n\n <app-config-slider\n *ngSwitchCase=\"'slider'\"\n [value]=\"config.value\"\n (onChange)=\"config.onChange($event); config.value = $event\"\n [min]=\"config.min\"\n [max]=\"config.max\"\n [step]=\"config.step\"\n [allowCustomValue]=\"config.allowCustomValue\"\n >\n </app-config-slider>\n\n <button\n *ngSwitchCase=\"'button'\"\n class=\"w-100\"\n (click)=\"config.onClick()\"\n mat-button\n mat-stroked-button\n >\n {{ config.label }}\n </button>\n\n <input\n *ngSwitchCase=\"'color'\"\n type=\"color\"\n [value]=\"config.color\"\n (input)=\"\n config.onChange($event.target.value);\n config.color = $event.target.value\n \"\n />\n\n <div *ngSwitchCase=\"'rangeSlider'\" class=\"range-slider\">\n <div class=\"range-slider-inputs d-flex justify-content-between\">\n <input\n type=\"number\"\n placeholder=\"Min\"\n class=\"form-control form-control-sm\"\n [value]=\"config.value\"\n (input)=\"\n config.value = $event.target.value;\n config.onChange(config)\n \"\n />\n <input\n type=\"number\"\n placeholder=\"Max\"\n class=\"form-control form-control-sm\"\n [value]=\"config.highValue\"\n (input)=\"\n config.highValue = $event.target.value;\n config.onChange(config)\n \"\n />\n </div>\n <ngx-slider\n [(value)]=\"config.value\"\n [(highValue)]=\"config.highValue\"\n (userChange)=\"config.onChange($event)\"\n [options]=\"{\n floor: config.min,\n ceil: config.max,\n step: config.step,\n animate: false\n }\"\n ></ngx-slider>\n </div>\n\n <select\n *ngSwitchCase=\"'select'\"\n class=\"w-100\"\n (change)=\"config.onChange($event.target.value)\"\n >\n <option\n *ngFor=\"let singleOption of config.options\"\n [value]=\"singleOption\"\n >\n {{ singleOption }}\n </option>\n </select>\n </div>\n </label>\n <!-- Config types END -->\n </ng-container>\n </div>\n </div>\n <button\n class=\"icon-wrapper icon-button btn-blank item-expand\"\n *ngIf=\"currentNode.children.length > 0\"\n (click)=\"currentNode.childrenActive = !currentNode.childrenActive\"\n [ngClass]=\"{ expanded: currentNode.childrenActive }\"\n >\n <svg>\n <use href=\"assets/icons/expand.svg#expand\"></use>\n </svg>\n </button>\n </div>\n</div>\n<div class=\"phoenix-menu-children\" *ngIf=\"currentNode.childrenActive\">\n <app-phoenix-menu-item\n *ngFor=\"let childNode of currentNode.children\"\n [currentNode]=\"childNode\"\n >\n </app-phoenix-menu-item>\n</div>\n", styles: [".phoenix-menu-item{width:100%;padding:.6rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color);font-size:.8rem;transition:all .5s;display:flex;justify-content:space-between;align-items:center}.phoenix-menu-item-left{display:flex;justify-content:flex-start;min-width:0;padding-right:.5rem;overflow:hidden}.phoenix-menu-item-left .item-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phoenix-menu-item-left .item-icon{margin-right:.2rem}.phoenix-menu-item-right{display:flex;justify-content:flex-end}.phoenix-menu-item-right .item-expand.expanded{transform:scaleY(-1)}.phoenix-menu-item-right .item-settings{margin-right:.2rem}.phoenix-menu-item-right .item-config-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:110}.phoenix-menu-item-right .item-config{position:absolute;margin-top:-5rem;right:100%;width:14rem;padding:.5rem;background:var(--phoenix-background-color-secondary);color:var(--phoenix-text-color-secondary);box-shadow:var(--phoenix-box-shadow);display:flex;flex-direction:column;z-index:120}.phoenix-menu-item-right .item-config>*{margin-bottom:.4rem}.phoenix-menu-item-right .item-config>*:last-child{margin-bottom:0}.phoenix-menu-item-right .item-config .item-config-single{display:flex;flex-direction:row}.phoenix-menu-item-right .item-config .item-config-single .item-config-label{width:30%}.phoenix-menu-item-right .item-config .item-config-single .item-config-data{flex-grow:1;padding-left:.5rem}.phoenix-menu-item .icon-wrapper{display:inline-block;width:1.3rem;height:1.3rem;padding:.23rem;transition:all .4s}.phoenix-menu-item .icon-wrapper.icon-button:hover{background:var(--phoenix-options-icon-bg);border-radius:40%;cursor:pointer}.phoenix-menu-item .icon-wrapper svg{width:100%;height:100%;vertical-align:top}.phoenix-menu-item .mat-slide-toggle-bar{width:30px!important}.phoenix-menu-item .mat-slide-toggle-thumb{width:15px!important;height:15px!important;position:absolute;top:2px}.phoenix-menu-item .mat-slider-horizontal{min-width:0;width:100%;height:20px}.phoenix-menu-item .mat-slider-horizontal .mat-slider-wrapper{top:10px}.phoenix-menu-item label.mat-checkbox-layout{margin:0}@media screen and (max-width: 768px){.phoenix-menu-item{font-size:.75rem;padding:.5rem}.phoenix-menu-item .icon-wrapper{width:1rem;height:1rem;padding:.15rem}}.phoenix-menu-children{margin-left:.5rem;border-left:1px solid var(--phoenix-accent)}.range-slider .range-slider-inputs{gap:20%}.range-slider .ngx-slider .ngx-slider-bar{background:var(--phoenix-text-color-secondary);height:.2rem}.range-slider .ngx-slider .ngx-slider-selection{background:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer{width:1rem;height:1rem;top:-.45rem;bottom:0;background-color:var(--phoenix-accent)}.range-slider .ngx-slider .ngx-slider-pointer:after{display:none}.range-slider .ngx-slider .ngx-slider-bubble{color:var(--phoenix-text-color);font-size:.8rem}.range-slider .ngx-slider .ngx-slider-bubble.ngx-slider-limit{color:var(--phoenix-text-color-secondary)}\n"], components: [{ type: i1$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ConfigSliderComponent, selector: "app-config-slider", inputs: ["value", "min", "max", "step", "allowCustomValue"], outputs: ["onChange"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }, { type: PhoenixMenuItemComponent, selector: "app-phoenix-menu-item", inputs: ["currentNode"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
104
104
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PhoenixMenuItemComponent, decorators: [{
|
|
105
105
|
type: Component,
|
|
106
|
-
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 <
|
|
106
|
+
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 >\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"] }]
|
|
107
107
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { currentNode: [{
|
|
108
108
|
type: Input
|
|
109
109
|
}], phoenixMenuItem: [{
|
|
@@ -510,13 +510,15 @@ class ExperimentInfoComponent {
|
|
|
510
510
|
}
|
|
511
511
|
}
|
|
512
512
|
ExperimentInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ExperimentInfoComponent, deps: [{ token: EventDisplayService }], target: i0.ɵɵFactoryTarget.Component });
|
|
513
|
-
ExperimentInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ExperimentInfoComponent, selector: "app-experiment-info", inputs: {
|
|
513
|
+
ExperimentInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ExperimentInfoComponent, selector: "app-experiment-info", inputs: { url: "url", logo: "logo", tagline: "tagline" }, ngImport: i0, template: "<div id=\"experimentInfo\" class=\"experimentInfo\" cdkDrag cdkDragBoundary=\"body\">\n <a\n class=\"experimentLogoWrapper\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n *ngIf=\"url\"\n [href]=\"url\"\n >\n <img class=\"experimentLogo\" [src]=\"logo\" alt=\"\" />\n </a>\n <div class=\"textInfo\">\n <p *ngIf=\"tagline\">\n <b>{{ tagline }}</b>\n </p>\n <p *ngFor=\"let infoField of experimentInfo\">\n <ng-container *ngIf=\"infoField.label\">\n <b>{{ infoField.label }}: </b>{{ infoField.value }}\n </ng-container>\n <ng-container *ngIf=\"!infoField.label\">\n {{ infoField }}\n </ng-container>\n </p>\n </div>\n</div>\n", styles: [".experimentInfo{position:absolute;top:5rem;left:1rem;display:flex;flex-direction:row;justify-items:flex-end;justify-content:flex-end;align-items:center;align-content:center;cursor:move}.experimentLogoWrapper{width:6rem}.experimentLogoWrapper .experimentLogo{width:100%;height:100%}.textInfo{margin-left:1rem}.textInfo p{color:var(--phoenix-text-color-secondary);font-size:.8rem;margin-bottom:.5rem;-webkit-user-select:none;user-select:none}@media screen and (max-width: 768px){.experimentInfo{top:4rem;max-width:40%}.experimentLogoWrapper{height:4rem}.textInfo{display:none}}\n"], directives: [{ type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
514
514
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ExperimentInfoComponent, decorators: [{
|
|
515
515
|
type: Component,
|
|
516
|
-
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=\"
|
|
517
|
-
}], ctorParameters: function () { return [{ type: EventDisplayService }]; }, propDecorators: {
|
|
516
|
+
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"] }]
|
|
517
|
+
}], ctorParameters: function () { return [{ type: EventDisplayService }]; }, propDecorators: { url: [{
|
|
518
518
|
type: Input
|
|
519
|
-
}],
|
|
519
|
+
}], logo: [{
|
|
520
|
+
type: Input
|
|
521
|
+
}], tagline: [{
|
|
520
522
|
type: Input
|
|
521
523
|
}] } });
|
|
522
524
|
|
|
@@ -1308,10 +1310,10 @@ class SSModeComponent {
|
|
|
1308
1310
|
}
|
|
1309
1311
|
}
|
|
1310
1312
|
SSModeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SSModeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1311
|
-
SSModeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SSModeComponent, selector: "app-ss-mode", ngImport: i0, template: "<app-menu-toggle\n tooltip=\"Screenshot mode\"\n [active]=\"ssMode\"\n icon=\"ss-mode\"\n (click)=\"toggleSSMode()\"\n>\n</app-menu-toggle>\n", styles: ["
|
|
1313
|
+
SSModeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SSModeComponent, selector: "app-ss-mode", ngImport: i0, template: "<app-menu-toggle\n tooltip=\"Screenshot mode\"\n [active]=\"ssMode\"\n icon=\"ss-mode\"\n (click)=\"toggleSSMode()\"\n>\n</app-menu-toggle>\n", styles: ["#uiMenu,#phoenixMenu,#mainLogo,#statsElement{transition:opacity .4s}.ss-mode #uiMenu,.ss-mode #phoenixMenu,.ss-mode #mainLogo,.ss-mode #statsElement{visibility:hidden;opacity:0}\n"], components: [{ type: MenuToggleComponent, selector: "app-menu-toggle", inputs: ["icon", "active", "tooltip", "disabled"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1312
1314
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SSModeComponent, decorators: [{
|
|
1313
1315
|
type: Component,
|
|
1314
|
-
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: ["
|
|
1316
|
+
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"] }]
|
|
1315
1317
|
}] });
|
|
1316
1318
|
|
|
1317
1319
|
class PerformanceToggleComponent {
|
|
@@ -1331,6 +1333,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
1331
1333
|
args: [{ selector: 'app-performance-toggle', template: "<app-menu-toggle\n tooltip=\"Performance mode\"\n [active]=\"performanceMode\"\n icon=\"performance\"\n (click)=\"togglePerformance()\"\n>\n</app-menu-toggle>\n", styles: [""] }]
|
|
1332
1334
|
}], ctorParameters: function () { return [{ type: EventDisplayService }]; } });
|
|
1333
1335
|
|
|
1336
|
+
class UiMenuWrapperComponent {
|
|
1337
|
+
constructor() {
|
|
1338
|
+
this.hideUIMenu = false;
|
|
1339
|
+
}
|
|
1340
|
+
}
|
|
1341
|
+
UiMenuWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: UiMenuWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1342
|
+
UiMenuWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: UiMenuWrapperComponent, selector: "app-ui-menu-wrapper", ngImport: i0, template: "<div id=\"uiMenu\">\n <button\n id=\"hideUIMenu\"\n [matTooltip]=\"hideUIMenu ? 'Show toolbar' : 'Hide toolbar'\"\n matTooltipPosition=\"above\"\n (click)=\"hideUIMenu = !hideUIMenu\"\n [ngClass]=\"{ 'ui-menu-hidden': hideUIMenu }\"\n >\n <svg>\n <use href=\"assets/icons/expand.svg#expand\"></use>\n </svg>\n </button>\n <div id=\"optionsPanel\" [hidden]=\"hideUIMenu\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["#uiMenu{position:absolute;bottom:1rem;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}#optionsPanel{display:flex;align-items:center;background:var(--phoenix-background-color-secondary);border:1px solid var(--phoenix-background-color-tertiary);box-shadow:var(--phoenix-box-shadow);border-radius:30px;max-width:95%;padding:.3rem 1rem;overflow-x:scroll;z-index:90}#hideUIMenu{background:var(--phoenix-background-color-secondary);height:1.2rem;width:3rem;border:1px solid var(--phoenix-border);border-bottom:none;box-shadow:var(--phoenix-box-shadow);border-top-left-radius:15px;border-top-right-radius:15px;padding:3px}#hideUIMenu svg{height:100%;width:100%;vertical-align:top;transition:all .3s}#hideUIMenu.ui-menu-hidden svg{transform:scaleY(-1);transition:all .3s}\n"], directives: [{ type: i3$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1343
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: UiMenuWrapperComponent, decorators: [{
|
|
1344
|
+
type: Component,
|
|
1345
|
+
args: [{ selector: 'app-ui-menu-wrapper', template: "<div id=\"uiMenu\">\n <button\n id=\"hideUIMenu\"\n [matTooltip]=\"hideUIMenu ? 'Show toolbar' : 'Hide toolbar'\"\n matTooltipPosition=\"above\"\n (click)=\"hideUIMenu = !hideUIMenu\"\n [ngClass]=\"{ 'ui-menu-hidden': hideUIMenu }\"\n >\n <svg>\n <use href=\"assets/icons/expand.svg#expand\"></use>\n </svg>\n </button>\n <div id=\"optionsPanel\" [hidden]=\"hideUIMenu\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["#uiMenu{position:absolute;bottom:1rem;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}#optionsPanel{display:flex;align-items:center;background:var(--phoenix-background-color-secondary);border:1px solid var(--phoenix-background-color-tertiary);box-shadow:var(--phoenix-box-shadow);border-radius:30px;max-width:95%;padding:.3rem 1rem;overflow-x:scroll;z-index:90}#hideUIMenu{background:var(--phoenix-background-color-secondary);height:1.2rem;width:3rem;border:1px solid var(--phoenix-border);border-bottom:none;box-shadow:var(--phoenix-box-shadow);border-top-left-radius:15px;border-top-right-radius:15px;padding:3px}#hideUIMenu svg{height:100%;width:100%;vertical-align:top;transition:all .3s}#hideUIMenu.ui-menu-hidden svg{transform:scaleY(-1);transition:all .3s}\n"] }]
|
|
1346
|
+
}] });
|
|
1347
|
+
|
|
1334
1348
|
class ShareLinkDialogComponent {
|
|
1335
1349
|
constructor(dialogRef) {
|
|
1336
1350
|
this.dialogRef = dialogRef;
|
|
@@ -1416,14 +1430,13 @@ class UiMenuComponent {
|
|
|
1416
1430
|
constructor() {
|
|
1417
1431
|
this.eventDataImportOptions = Object.values(EventDataFormat);
|
|
1418
1432
|
this.animationPresets = defaultAnimationPresets;
|
|
1419
|
-
this.hideUIMenu = false;
|
|
1420
1433
|
}
|
|
1421
1434
|
}
|
|
1422
1435
|
UiMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: UiMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1423
|
-
UiMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: UiMenuComponent, selector: "app-ui-menu", inputs: { eventDataImportOptions: "eventDataImportOptions", animationPresets: "animationPresets" }, ngImport: i0, template: "<
|
|
1436
|
+
UiMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: UiMenuComponent, selector: "app-ui-menu", inputs: { eventDataImportOptions: "eventDataImportOptions", animationPresets: "animationPresets" }, ngImport: i0, template: "<app-ui-menu-wrapper>\n <!-- Event selector -->\n <app-event-selector></app-event-selector>\n\n <!-- Zoom in and zoom out controls -->\n <app-zoom-controls></app-zoom-controls>\n\n <app-view-options></app-view-options>\n\n <app-auto-rotate></app-auto-rotate>\n\n <!-- Dark theme toggle -->\n <app-dark-theme></app-dark-theme>\n\n <!-- Toggle for clipping geometries -->\n <app-object-clipping></app-object-clipping>\n\n <!-- Main view toggle -->\n <app-main-view-toggle></app-main-view-toggle>\n\n <!-- Toggle for overlay panel -->\n <app-overlay-view></app-overlay-view>\n\n <!-- Toggle for selected object panel -->\n <app-object-selection></app-object-selection>\n\n <!-- Info panel -->\n <app-info-panel></app-info-panel>\n\n <!-- Toggle for animating the event data -->\n <app-animate-event></app-animate-event>\n\n <!-- Toggle for animating camera through event -->\n <app-animate-camera\n [animationPresets]=\"animationPresets\"\n ></app-animate-camera>\n\n <!-- Toggle for collections info -->\n <app-collections-info></app-collections-info>\n\n <!-- Toggle for performance -->\n <app-performance-toggle></app-performance-toggle>\n\n <!-- Toggle for VR -->\n <app-vr-toggle></app-vr-toggle>\n\n <!-- Toggle for AR -->\n <app-ar-toggle></app-ar-toggle>\n\n <!-- Toggle for screenshot mode -->\n <app-ss-mode></app-ss-mode>\n\n <!-- Toggle for loading geometries modal-->\n <app-io-options\n [eventDataImportOptions]=\"eventDataImportOptions\"\n ></app-io-options>\n\n <!-- Toggle for shareable link constructor modal-->\n <app-share-link></app-share-link>\n\n <!-- Extra options -->\n <ng-content></ng-content>\n</app-ui-menu-wrapper>\n", styles: [""], components: [{ type: UiMenuWrapperComponent, selector: "app-ui-menu-wrapper" }, { type: EventSelectorComponent, selector: "app-event-selector" }, { type: ZoomControlsComponent, selector: "app-zoom-controls" }, { type: ViewOptionsComponent, selector: "app-view-options" }, { type: AutoRotateComponent, selector: "app-auto-rotate" }, { type: DarkThemeComponent, selector: "app-dark-theme" }, { type: ObjectClippingComponent, selector: "app-object-clipping" }, { type: MainViewToggleComponent, selector: "app-main-view-toggle" }, { type: OverlayViewComponent, selector: "app-overlay-view" }, { type: ObjectSelectionComponent, selector: "app-object-selection" }, { type: InfoPanelComponent, selector: "app-info-panel" }, { type: AnimateEventComponent, selector: "app-animate-event" }, { type: AnimateCameraComponent, selector: "app-animate-camera", inputs: ["animationPresets"] }, { type: CollectionsInfoComponent, selector: "app-collections-info" }, { type: PerformanceToggleComponent, selector: "app-performance-toggle" }, { type: VrToggleComponent, selector: "app-vr-toggle" }, { type: ArToggleComponent, selector: "app-ar-toggle" }, { type: SSModeComponent, selector: "app-ss-mode" }, { type: IoOptionsComponent, selector: "app-io-options", inputs: ["eventDataImportOptions"] }, { type: ShareLinkComponent, selector: "app-share-link" }] });
|
|
1424
1437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: UiMenuComponent, decorators: [{
|
|
1425
1438
|
type: Component,
|
|
1426
|
-
args: [{ selector: 'app-ui-menu', template: "<
|
|
1439
|
+
args: [{ selector: 'app-ui-menu', template: "<app-ui-menu-wrapper>\n <!-- Event selector -->\n <app-event-selector></app-event-selector>\n\n <!-- Zoom in and zoom out controls -->\n <app-zoom-controls></app-zoom-controls>\n\n <app-view-options></app-view-options>\n\n <app-auto-rotate></app-auto-rotate>\n\n <!-- Dark theme toggle -->\n <app-dark-theme></app-dark-theme>\n\n <!-- Toggle for clipping geometries -->\n <app-object-clipping></app-object-clipping>\n\n <!-- Main view toggle -->\n <app-main-view-toggle></app-main-view-toggle>\n\n <!-- Toggle for overlay panel -->\n <app-overlay-view></app-overlay-view>\n\n <!-- Toggle for selected object panel -->\n <app-object-selection></app-object-selection>\n\n <!-- Info panel -->\n <app-info-panel></app-info-panel>\n\n <!-- Toggle for animating the event data -->\n <app-animate-event></app-animate-event>\n\n <!-- Toggle for animating camera through event -->\n <app-animate-camera\n [animationPresets]=\"animationPresets\"\n ></app-animate-camera>\n\n <!-- Toggle for collections info -->\n <app-collections-info></app-collections-info>\n\n <!-- Toggle for performance -->\n <app-performance-toggle></app-performance-toggle>\n\n <!-- Toggle for VR -->\n <app-vr-toggle></app-vr-toggle>\n\n <!-- Toggle for AR -->\n <app-ar-toggle></app-ar-toggle>\n\n <!-- Toggle for screenshot mode -->\n <app-ss-mode></app-ss-mode>\n\n <!-- Toggle for loading geometries modal-->\n <app-io-options\n [eventDataImportOptions]=\"eventDataImportOptions\"\n ></app-io-options>\n\n <!-- Toggle for shareable link constructor modal-->\n <app-share-link></app-share-link>\n\n <!-- Extra options -->\n <ng-content></ng-content>\n</app-ui-menu-wrapper>\n", styles: [""] }]
|
|
1427
1440
|
}], propDecorators: { eventDataImportOptions: [{
|
|
1428
1441
|
type: Input
|
|
1429
1442
|
}], animationPresets: [{
|
|
@@ -1671,6 +1684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
1671
1684
|
|
|
1672
1685
|
const PHOENIX_COMPONENTS = [
|
|
1673
1686
|
NavComponent,
|
|
1687
|
+
UiMenuWrapperComponent,
|
|
1674
1688
|
UiMenuComponent,
|
|
1675
1689
|
CollectionsInfoComponent,
|
|
1676
1690
|
MenuToggleComponent,
|
|
@@ -1719,6 +1733,7 @@ class PhoenixUIModule {
|
|
|
1719
1733
|
}
|
|
1720
1734
|
PhoenixUIModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PhoenixUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1721
1735
|
PhoenixUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PhoenixUIModule, declarations: [NavComponent,
|
|
1736
|
+
UiMenuWrapperComponent,
|
|
1722
1737
|
UiMenuComponent,
|
|
1723
1738
|
CollectionsInfoComponent,
|
|
1724
1739
|
MenuToggleComponent,
|
|
@@ -1776,6 +1791,7 @@ PhoenixUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
|
|
|
1776
1791
|
NgxSliderModule,
|
|
1777
1792
|
CdkTreeModule,
|
|
1778
1793
|
MatTabsModule], exports: [NavComponent,
|
|
1794
|
+
UiMenuWrapperComponent,
|
|
1779
1795
|
UiMenuComponent,
|
|
1780
1796
|
CollectionsInfoComponent,
|
|
1781
1797
|
MenuToggleComponent,
|
|
@@ -1874,5 +1890,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
|
|
|
1874
1890
|
* Generated bundle index. Do not edit.
|
|
1875
1891
|
*/
|
|
1876
1892
|
|
|
1877
|
-
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, ViewOptionsComponent, VrToggleComponent, ZoomControlsComponent, defaultAnimationPresets };
|
|
1893
|
+
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 };
|
|
1878
1894
|
//# sourceMappingURL=phoenix-ui-components.mjs.map
|