@rocketshow/designer 1.65.0 → 1.68.0

package/fesm2022/rocketshow-designer.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, HostListener, ViewChild, Component, Pipe, EventEmitter, Output, Input, Directive, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { Injectable, HostListener, ViewChild, Component, Pipe, EventEmitter, Output, Input, Directive, ChangeDetectionStrategy, ViewEncapsulation, ContentChild, NgModule } from '@angular/core';
 import * as i2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i1$1 from 'ngx-bootstrap/modal';
@@ -11,7 +11,7 @@ import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpErrorResponse, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import * as i3$1 from 'ngx-toastr';
 import { ToastrModule } from 'ngx-toastr';
-import { of, forkJoin, Observable, Subject, timer } from 'rxjs';
+import { Subject, of, forkJoin, Observable, timer } from 'rxjs';
 import * as i3 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
@@ -34,7 +34,6 @@ import { NgxBootstrapSliderModule } from 'ngx-bootstrap-slider';
 import * as i10$1 from '@angular/common';
 import * as i6 from 'ngx-bootstrap/accordion';
 import { AccordionModule } from 'ngx-bootstrap/accordion';
-import { KEYS, TREE_ACTIONS, TreeModule } from '@ali-hm/angular-tree-component';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -815,6 +814,9 @@ class Project {
         this.fixtures = [];
         // the fixtures and pixel keys in order to be selectable
         this.presetFixtures = [];
+        // the universes (name + uuid) the project's fixtures are assigned to
+        // (used when the user manages universes freely, see freeUniverseEdit)
+        this.universes = [];
         this.scenes = [];
         this.presets = [];
         if (!data) {
@@ -856,6 +858,11 @@ class Project {
                 this.presetFixtures.push(new PresetFixture(presetFixture));
             }
         }
+        if (data.universes) {
+            for (const universe of data.universes) {
+                this.universes.push({ uuid: universe.uuid, name: universe.name });
+            }
+        }
         if (data.scenes) {
             for (const scene of data.scenes) {
                 this.scenes.push(new Scene(scene));
@@ -953,14 +960,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.HttpClient }] });
 
+class ConfigService {
+    constructor() {
+        this.enableMediaLibrary = false;
+        this.loginAvailable = false;
+        this.shareAvailable = false;
+        this.menuHeightPx = 0;
+        this.languageSwitch = false;
+        this.livePreview = false;
+        this.localProfiles = false;
+        this.intro = false;
+        this.uniqueProjectNames = false;
+        this.dropzoneChunking = true;
+        // List of universes (with name and uuid) the user can choose from
+        // in the fixture pool. Typically supplied by the host application
+        // (e.g. fetched from a backend).
+        this.universes = [];
+        // When true, the user can freely add their own universes (only
+        // names) in the fixture pool, without depending on a list provided
+        // by the host application.
+        this.freeUniverseEdit = false;
+        this.menuHeightChanged = new Subject();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
 class ProjectService {
-    constructor(http, userService, router, activatedRoute, translateService, toastrService) {
+    constructor(http, userService, router, activatedRoute, translateService, toastrService, configService) {
         this.http = http;
         this.userService = userService;
         this.router = router;
         this.activatedRoute = activatedRoute;
         this.translateService = translateService;
         this.toastrService = toastrService;
+        this.configService = configService;
         // the project-file versions used in this version of the designer (older ones will be migrated, newer ones are not supported)
         this.currentProjectVersion = 2;
     }
@@ -986,6 +1026,10 @@ class ProjectService {
     }
     save(project) {
         // tries to save the project and returns, whether it has been saved or not
+        if (this.configService.freeUniverseEdit) {
+            // persist the freely edited universes together with the project
+            project.universes = this.configService.universes;
+        }
         this.saveApi(project).subscribe(() => {
             const msg = 'designer.project.save-success';
             const title = 'designer.project.save-success-title';
@@ -1022,7 +1066,7 @@ class ProjectService {
             return project;
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProjectService, deps: [{ token: i1.HttpClient }, { token: UserService }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i2.TranslateService }, { token: i3$1.ToastrService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProjectService, deps: [{ token: i1.HttpClient }, { token: UserService }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i2.TranslateService }, { token: i3$1.ToastrService }, { token: ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProjectService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProjectService, decorators: [{
@@ -1030,7 +1074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: UserService }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i2.TranslateService }, { type: i3$1.ToastrService }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: UserService }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i2.TranslateService }, { type: i3$1.ToastrService }, { type: ConfigService }] });
 
 class UuidService {
     constructor() { }
@@ -2040,38 +2084,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-class ConfigService {
-    constructor() {
-        this.enableMediaLibrary = false;
-        this.loginAvailable = false;
-        this.shareAvailable = false;
-        this.menuHeightPx = 0;
-        this.languageSwitch = false;
-        this.livePreview = false;
-        this.localProfiles = false;
-        this.intro = false;
-        this.uniqueProjectNames = false;
-        this.dropzoneChunking = true;
-        // List of universes (with name and uuid) the user can choose from
-        // in the fixture pool. Typically supplied by the host application
-        // (e.g. fetched from a backend).
-        this.universes = [];
-        // When true, the user can freely add their own universes (only
-        // names) in the fixture pool, without depending on a list provided
-        // by the host application.
-        this.freeUniverseEdit = false;
-        this.menuHeightChanged = new Subject();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
 class TimelineStateService {
     constructor() {
         this.playState = 'paused';
@@ -3558,12 +3570,14 @@ class PreviewService {
                     }
                     const fixture = this.fixtureService.getFixtureByUuid(projectFixture.fixtureUuid);
                     const firstDmxChannelAndFixtureUuid = {
+                        dmxUniverseUuid: fixture.dmxUniverseUuid,
                         firstDmxChannel: fixture.dmxFirstChannel,
                         pixelKey: projectFixture.pixelKey,
                     };
-                    const exists = countedFirstDmxChannelPixelKey.some((item) => item.firstDmxChannel === firstDmxChannelAndFixtureUuid.firstDmxChannel &&
+                    const exists = countedFirstDmxChannelPixelKey.some((item) => item.dmxUniverseUuid === firstDmxChannelAndFixtureUuid.dmxUniverseUuid &&
+                        item.firstDmxChannel === firstDmxChannelAndFixtureUuid.firstDmxChannel &&
                         ((!item.pixelKey && !firstDmxChannelAndFixtureUuid.pixelKey) || item.pixelKey === firstDmxChannelAndFixtureUuid.pixelKey));
-                    // don't count fixtures on the same channel as already counted ones
+                    // don't count fixtures on the same universe and channel as already counted ones
                     if (!exists) {
                         index++;
                         countedFirstDmxChannelPixelKey.push(firstDmxChannelAndFixtureUuid);
@@ -4682,7 +4696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }], ctorParameters: () => [{ type: i1$1.BsModalService }, { type: i2.TranslateService }] });
 
 class ProjectLoadService {
-    constructor(projectService, previewService, fixtureService, presetService, sceneService, modalService, uuidService, timelineService, router, activatedRoute, warningDialogService, livePreviewService) {
+    constructor(projectService, previewService, fixtureService, presetService, sceneService, modalService, uuidService, timelineService, router, activatedRoute, warningDialogService, livePreviewService, configService) {
         this.projectService = projectService;
         this.previewService = previewService;
         this.fixtureService = fixtureService;
@@ -4695,6 +4709,7 @@ class ProjectLoadService {
         this.activatedRoute = activatedRoute;
         this.warningDialogService = warningDialogService;
         this.livePreviewService = livePreviewService;
+        this.configService = configService;
     }
     migrateToVersion2() {
         for (let fixture of this.projectService.project.fixtures) {
@@ -4742,8 +4757,32 @@ class ProjectLoadService {
             this.warningDialogService.show('designer.project.migrated').subscribe();
         }
     }
+    setupUniverses() {
+        if (this.configService.freeUniverseEdit) {
+            // when the user manages universes freely, the project itself stores the
+            // universes -> use them as the working list
+            this.configService.universes = this.projectService.project.universes;
+            // ensure a default universe exists
+            if (this.configService.universes.length === 0) {
+                this.configService.universes.push({ uuid: this.uuidService.getUuid(), name: 'Universe 1' });
+            }
+        }
+        if (this.configService.universes.length === 0) {
+            // no universe available to assign the fixtures to (e.g. the host
+            // application did not provide any)
+            return;
+        }
+        // assign all fixtures without a universe to the first (default) universe
+        const defaultUniverseUuid = this.configService.universes[0].uuid;
+        for (const fixture of this.projectService.project.fixtures) {
+            if (!fixture.dmxUniverseUuid) {
+                fixture.dmxUniverseUuid = defaultUniverseUuid;
+            }
+        }
+    }
     afterLoad() {
         this.migrateFromOldProject();
+        this.setupUniverses();
         this.fixtureService.updateCachedFixtures();
         this.presetService.removeDeletedFixtures();
         this.previewService.updateFixtureSetup();
@@ -4851,7 +4890,7 @@ class ProjectLoadService {
         this.selectScenesPresetComposition();
         this.afterLoad();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProjectLoadService, deps: [{ token: ProjectService }, { token: PreviewService }, { token: FixtureService }, { token: PresetService }, { token: SceneService }, { token: i1$1.BsModalService }, { token: UuidService }, { token: TimelineService }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: WarningDialogService }, { token: LivePreviewService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProjectLoadService, deps: [{ token: ProjectService }, { token: PreviewService }, { token: FixtureService }, { token: PresetService }, { token: SceneService }, { token: i1$1.BsModalService }, { token: UuidService }, { token: TimelineService }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: WarningDialogService }, { token: LivePreviewService }, { token: ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProjectLoadService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProjectLoadService, decorators: [{
@@ -4859,7 +4898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: ProjectService }, { type: PreviewService }, { type: FixtureService }, { type: PresetService }, { type: SceneService }, { type: i1$1.BsModalService }, { type: UuidService }, { type: TimelineService }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: WarningDialogService }, { type: LivePreviewService }] });
+        }], ctorParameters: () => [{ type: ProjectService }, { type: PreviewService }, { type: FixtureService }, { type: PresetService }, { type: SceneService }, { type: i1$1.BsModalService }, { type: UuidService }, { type: TimelineService }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: WarningDialogService }, { type: LivePreviewService }, { type: ConfigService }] });
 
 class ArraySortPipe {
     transform(array, field) {
@@ -5199,7 +5238,7 @@ class FixturePoolCreateFromFileComponent {
                     // validate the file
                     const text = event.target.result;
                     const json = JSON.parse(text);
-                    if (json['$schema'].match('https://raw.githubusercontent.com/OpenLightingProject/open-fixture-library/schema-(.*)/schemas/fixture.json')) {
+                    if (json['$schema'].match(/open-fixture-library\/(?:schema-(.*?)|master)\/schemas\/fixture\.json/)) {
                         // create the metadata from the file. we don't have the corresponding
                         // manufacturer-file, therefore we just assume the attributes from the
                         // fixture-file.
@@ -7579,12 +7618,14 @@ class EffectCurveComponent {
         for (const presetFixture of this.presetService.selectedPreset.fixtures) {
             const fixture = this.fixtureService.getFixtureByUuid(presetFixture.fixtureUuid);
             const firstDmxChannelAndFixtureUuid = {
+                dmxUniverseUuid: fixture.dmxUniverseUuid,
                 firstDmxChannel: fixture.dmxFirstChannel,
                 pixelKey: presetFixture.pixelKey,
             };
-            const exists = countedFirstDmxChannelPixelKey.some((item) => item.firstDmxChannel === firstDmxChannelAndFixtureUuid.firstDmxChannel &&
+            const exists = countedFirstDmxChannelPixelKey.some((item) => item.dmxUniverseUuid === firstDmxChannelAndFixtureUuid.dmxUniverseUuid &&
+                item.firstDmxChannel === firstDmxChannelAndFixtureUuid.firstDmxChannel &&
                 ((!item.pixelKey && !firstDmxChannelAndFixtureUuid.pixelKey) || item.pixelKey === firstDmxChannelAndFixtureUuid.pixelKey));
-            // don't count it, if it has the same DMX address and pixel key (if available),
+            // don't count it, if it has the same DMX universe, address and pixel key (if available),
             // as an already counted one
             if (!exists) {
                 count++;
@@ -7951,64 +7992,6 @@ class PresetComponent {
         this.projectService = projectService;
         this.introService = introService;
         this.modalService = modalService;
-        let actionMapping = {
-            mouse: {
-                click: (tree, node, $event) => {
-                    // block activation for folders (or any condition you want)
-                    if (node.data.isFolder) {
-                        // optional: make click expand/collapse instead
-                        TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
-                        return;
-                    }
-                    TREE_ACTIONS.ACTIVATE(tree, node, $event);
-                },
-            },
-            keys: {
-                [KEYS.ENTER]: (tree, node, $event) => {
-                    if (!node.data.isFolder)
-                        TREE_ACTIONS.ACTIVATE(tree, node, $event);
-                },
-                [KEYS.SPACE]: (tree, node, $event) => {
-                    if (!node.data.isFolder)
-                        TREE_ACTIONS.ACTIVATE(tree, node, $event);
-                },
-            },
-        };
-        this.treeOptions = {
-            displayField: 'name',
-            isExpandedField: 'expanded',
-            idField: 'uuid',
-            hasChildrenField: 'nodes',
-            // actionMapping: {
-            //   mouse: {
-            //     dblClick: (tree, node, $event) => {
-            //       if (node.hasChildren) TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
-            //     }
-            //   },
-            //   keys: {
-            //     [KEYS.ENTER]: (tree, node, $event) => {
-            //       node.expandAll();
-            //     }
-            //   }
-            // },
-            actionMapping: actionMapping,
-            nodeHeight: 23,
-            allowDrag: (node) => {
-                return true;
-            },
-            allowDrop: (node, target) => {
-                // only allow dropping into folders or to the root level
-                return !target.parent.data.id || target.parent.data.isFolder;
-            },
-            allowDragoverStyling: true,
-            levelPadding: 10,
-            useVirtualScroll: true,
-            animateExpand: true,
-            scrollOnActivate: true,
-            animateSpeed: 10,
-            animateAcceleration: 1.2,
-            scrollContainer: document.documentElement,
-        };
         this.treeNodes = [
             {
                 id: 1,
@@ -8021,7 +8004,7 @@ class PresetComponent {
             },
             {
                 id: 4,
-                name: 'root1',
+                name: 'root2',
                 isFolder: true,
                 children: [
                     { id: 5, name: 'child1', isFolder: false },
@@ -8031,8 +8014,8 @@ class PresetComponent {
         ];
     }
     ngOnInit() { }
-    onActivate(event) {
-        console.log(event);
+    onActivate(node) {
+        console.log(node);
     }
     selectPreset(index) {
         this.projectService.project.previewPreset = true;
@@ -8081,15 +8064,12 @@ class PresetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PresetComponent, deps: [{ token: PresetService }, { token: SceneService }, { token: ProjectService }, { token: IntroService }, { token: i1$1.BsModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PresetComponent, isStandalone: false, selector: "lib-app-preset", viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true }], ngImport: i0, template: "<div\n  class=\"card border-secondary h-100 panel card-intro-preset card-intro-active\"\n  [class.card-intro-active]=\"introService.showStep('presets')\"\n>\n  <div class=\"card-header d-flex\">\n    <div>\n      {{ 'designer.preset.title' | translate }}\n    </div>\n    <div class=\"ml-auto\">\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"removePreset(); (false)\"\n        ><i class=\"fa fa-minus-circle fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"addPreset(); (false)\"\n        ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100 p-0\">\n    <!-- List of presets -->\n    <!-- <tree-root #tree [nodes]=\"treeNodes\" [options]=\"treeOptions\" (activate)=\"onActivate($event)\">\n      <ng-template #treeNodeTemplate let-node let-index=\"index\">\n        <span>{{ node.data.name }}</span>\n      </ng-template>\n    </tree-root> -->\n\n    <div class=\"list-group\" [sortablejs]=\"projectService.project.presets\">\n      @for (item of projectService.project.presets; track item; let i = $index) {\n      <div\n        class=\"list-group-item\"\n        (click)=\"selectPreset(i)\"\n        [class.active-light]=\"!projectService.project.previewPreset && item == presetService.selectedPreset\"\n        [class.active]=\"projectService.project.previewPreset && item == presetService.selectedPreset\"\n        [class.inactive-list-item]=\"!sceneService.presetIsSelected(item)\"\n      >\n        <div class=\"row d-flex\" style=\"cursor: pointer\">\n          <div class=\"col-auto list-sort-handle my-auto\" style=\"cursor: move; cursor: -webkit-grabbing\">\n            <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n          </div>\n          <div class=\"form-check\">\n            <input\n              type=\"checkbox\"\n              [disabled]=\"!enableCheckbox()\"\n              class=\"form-check-input\"\n              id=\"active\"\n              [ngModel]=\"sceneService.presetIsSelected(item)\"\n              (ngModelChange)=\"activatePreset($event, i)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n          <div>\n            {{ item.name }}\n          </div>\n          <div class=\"my-auto ml-auto mr-2 d-flex\">\n            <button type=\"button\" class=\"btn btn-secondary btn-sm py-0 px-1\" (click)=\"openSettings(item); (false)\">...</button>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SortablejsDirective, selector: "[sortablejs]", inputs: ["sortablejs", "sortablejsContainer", "sortablejsOptions"], outputs: ["sortablejsInit"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PresetComponent, isStandalone: false, selector: "lib-app-preset", ngImport: i0, template: "<div\n  class=\"card border-secondary h-100 panel card-intro-preset card-intro-active\"\n  [class.card-intro-active]=\"introService.showStep('presets')\"\n>\n  <div class=\"card-header d-flex\">\n    <div>\n      {{ 'designer.preset.title' | translate }}\n    </div>\n    <div class=\"ml-auto\">\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"removePreset(); (false)\"\n        ><i class=\"fa fa-minus-circle fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"addPreset(); (false)\"\n        ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100 p-0\">\n    <!-- List of presets -->\n    <!-- <lib-tree [nodes]=\"treeNodes\" (activate)=\"onActivate($event)\">\n      <ng-template #nodeTemplate let-node>\n        <span>{{ node.name }}</span>\n      </ng-template>\n    </lib-tree> -->\n\n    <div class=\"list-group\" [sortablejs]=\"projectService.project.presets\">\n      @for (item of projectService.project.presets; track item; let i = $index) {\n      <div\n        class=\"list-group-item\"\n        (click)=\"selectPreset(i)\"\n        [class.active-light]=\"!projectService.project.previewPreset && item == presetService.selectedPreset\"\n        [class.active]=\"projectService.project.previewPreset && item == presetService.selectedPreset\"\n        [class.inactive-list-item]=\"!sceneService.presetIsSelected(item)\"\n      >\n        <div class=\"row d-flex\" style=\"cursor: pointer\">\n          <div class=\"col-auto list-sort-handle my-auto\" style=\"cursor: move; cursor: -webkit-grabbing\">\n            <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n          </div>\n          <div class=\"form-check\">\n            <input\n              type=\"checkbox\"\n              [disabled]=\"!enableCheckbox()\"\n              class=\"form-check-input\"\n              id=\"active\"\n              [ngModel]=\"sceneService.presetIsSelected(item)\"\n              (ngModelChange)=\"activatePreset($event, i)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n          <div>\n            {{ item.name }}\n          </div>\n          <div class=\"my-auto ml-auto mr-2 d-flex\">\n            <button type=\"button\" class=\"btn btn-secondary btn-sm py-0 px-1\" (click)=\"openSettings(item); (false)\">...</button>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SortablejsDirective, selector: "[sortablejs]", inputs: ["sortablejs", "sortablejsContainer", "sortablejsOptions"], outputs: ["sortablejsInit"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PresetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-app-preset', standalone: false, template: "<div\n  class=\"card border-secondary h-100 panel card-intro-preset card-intro-active\"\n  [class.card-intro-active]=\"introService.showStep('presets')\"\n>\n  <div class=\"card-header d-flex\">\n    <div>\n      {{ 'designer.preset.title' | translate }}\n    </div>\n    <div class=\"ml-auto\">\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"removePreset(); (false)\"\n        ><i class=\"fa fa-minus-circle fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"addPreset(); (false)\"\n        ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100 p-0\">\n    <!-- List of presets -->\n    <!-- <tree-root #tree [nodes]=\"treeNodes\" [options]=\"treeOptions\" (activate)=\"onActivate($event)\">\n      <ng-template #treeNodeTemplate let-node let-index=\"index\">\n        <span>{{ node.data.name }}</span>\n      </ng-template>\n    </tree-root> -->\n\n    <div class=\"list-group\" [sortablejs]=\"projectService.project.presets\">\n      @for (item of projectService.project.presets; track item; let i = $index) {\n      <div\n        class=\"list-group-item\"\n        (click)=\"selectPreset(i)\"\n        [class.active-light]=\"!projectService.project.previewPreset && item == presetService.selectedPreset\"\n        [class.active]=\"projectService.project.previewPreset && item == presetService.selectedPreset\"\n        [class.inactive-list-item]=\"!sceneService.presetIsSelected(item)\"\n      >\n        <div class=\"row d-flex\" style=\"cursor: pointer\">\n          <div class=\"col-auto list-sort-handle my-auto\" style=\"cursor: move; cursor: -webkit-grabbing\">\n            <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n          </div>\n          <div class=\"form-check\">\n            <input\n              type=\"checkbox\"\n              [disabled]=\"!enableCheckbox()\"\n              class=\"form-check-input\"\n              id=\"active\"\n              [ngModel]=\"sceneService.presetIsSelected(item)\"\n              (ngModelChange)=\"activatePreset($event, i)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n          <div>\n            {{ item.name }}\n          </div>\n          <div class=\"my-auto ml-auto mr-2 d-flex\">\n            <button type=\"button\" class=\"btn btn-secondary btn-sm py-0 px-1\" (click)=\"openSettings(item); (false)\">...</button>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: PresetService }, { type: SceneService }, { type: ProjectService }, { type: IntroService }, { type: i1$1.BsModalService }], propDecorators: { tree: [{
-                type: ViewChild,
-                args: ['tree']
-            }] } });
+            args: [{ selector: 'lib-app-preset', standalone: false, template: "<div\n  class=\"card border-secondary h-100 panel card-intro-preset card-intro-active\"\n  [class.card-intro-active]=\"introService.showStep('presets')\"\n>\n  <div class=\"card-header d-flex\">\n    <div>\n      {{ 'designer.preset.title' | translate }}\n    </div>\n    <div class=\"ml-auto\">\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"removePreset(); (false)\"\n        ><i class=\"fa fa-minus-circle fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"addPreset(); (false)\"\n        ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100 p-0\">\n    <!-- List of presets -->\n    <!-- <lib-tree [nodes]=\"treeNodes\" (activate)=\"onActivate($event)\">\n      <ng-template #nodeTemplate let-node>\n        <span>{{ node.name }}</span>\n      </ng-template>\n    </lib-tree> -->\n\n    <div class=\"list-group\" [sortablejs]=\"projectService.project.presets\">\n      @for (item of projectService.project.presets; track item; let i = $index) {\n      <div\n        class=\"list-group-item\"\n        (click)=\"selectPreset(i)\"\n        [class.active-light]=\"!projectService.project.previewPreset && item == presetService.selectedPreset\"\n        [class.active]=\"projectService.project.previewPreset && item == presetService.selectedPreset\"\n        [class.inactive-list-item]=\"!sceneService.presetIsSelected(item)\"\n      >\n        <div class=\"row d-flex\" style=\"cursor: pointer\">\n          <div class=\"col-auto list-sort-handle my-auto\" style=\"cursor: move; cursor: -webkit-grabbing\">\n            <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n          </div>\n          <div class=\"form-check\">\n            <input\n              type=\"checkbox\"\n              [disabled]=\"!enableCheckbox()\"\n              class=\"form-check-input\"\n              id=\"active\"\n              [ngModel]=\"sceneService.presetIsSelected(item)\"\n              (ngModelChange)=\"activatePreset($event, i)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n          <div>\n            {{ item.name }}\n          </div>\n          <div class=\"my-auto ml-auto mr-2 d-flex\">\n            <button type=\"button\" class=\"btn btn-secondary btn-sm py-0 px-1\" (click)=\"openSettings(item); (false)\">...</button>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: PresetService }, { type: SceneService }, { type: ProjectService }, { type: IntroService }, { type: i1$1.BsModalService }] });
 
 class MasterDimmerComponent {
     constructor(projectService, changeDetectorRef, livePreviewService) {
@@ -8684,11 +8664,11 @@ class DesignerComponent {
         localStorage.setItem('language', language);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DesignerComponent, deps: [{ token: i2.TranslateService }, { token: ProjectService }, { token: ConfigService }, { token: FixturePoolService }, { token: HotkeyTargetExcludeService }, { token: i1$1.BsModalService }, { token: UserService }, { token: UserEnsureLoginService }, { token: ProjectLoadService }, { token: WarningDialogService }, { token: ErrorDialogService }, { token: FixtureService }, { token: TimelineService }, { token: IntroService }, { token: EffectService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DesignerComponent, isStandalone: false, selector: "lib-designer", inputs: { menuHeightPx: "menuHeightPx", externalCompositionsAvailable: "externalCompositionsAvailable", restUrl: "restUrl", enableMediaLibrary: "enableMediaLibrary", loginAvailable: "loginAvailable", shareAvailable: "shareAvailable", languageSwitch: "languageSwitch", livePreview: "livePreview", localProfiles: "localProfiles", intro: "intro", uniqueProjectNames: "uniqueProjectNames", dropzoneChunking: "dropzoneChunking", universes: "universes", freeUniverseEdit: "freeUniverseEdit" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "previewComponent", first: true, predicate: PreviewComponent, descendants: true }, { propertyName: "timelineComponent", first: true, predicate: TimelineComponent, descendants: true }], ngImport: i0, template: "<!-- Wrap the whole component inside a div to encapsulate the CSS -->\n\n<!-- 100 % height minus the menu bar above and the gutter size of 13 px -->\n<!-- <div style=\"height: calc(100% - 33px)\"> -->\n<div id=\"designer\" [ngStyle]=\"{ height: 'calc(100% - ' + totalMenuHeightPx + 'px)' }\">\n  <!-- Navigation -->\n  <nav\n    class=\"navbar navbar-expand-lg navbar-light bg-light border-secondary\"\n    style=\"border-bottom: 1px solid #444; height: 20px; z-index: 9999\"\n  >\n    <!-- Menu buttons -->\n    <ul class=\"navbar-nav mr-auto\">\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"fileDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n          {{ 'designer.navigation.project' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"fileDropdown\">\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectNew(); (false)\"\n            ><i class=\"fa fa-fw fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-new' | translate }}</a\n          >\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"projectOpen(); (false)\"\n            ><i class=\"fa fa-fw fa-folder-open-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-open' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSave(); (false)\"\n            ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSaveAs(); (false)\"\n            ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save-as' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectImport(); (false)\"\n            ><i class=\"fa fa-fw fa-download\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-import' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectExport(); (false)\"\n            ><i class=\"fa fa-fw fa-external-link\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-export' | translate }}</a\n          >\n        </div>\n      </li>\n      <li class=\"nav-item dropdown d-none d-md-block\">\n        <a\n          class=\"nav-link dropdown-toggle\"\n          href=\"#\"\n          id=\"settingsDropdown\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'designer.navigation.settings' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"openFixturePool(); (false)\">{{ 'designer.navigation.fixture-pool' | translate }}</a>\n          <!-- <a class=\"dropdown-item\" href=\"#\">{{ 'designer.navigation.stage' | translate }}</a> -->\n        </div>\n      </li>\n      <li class=\"nav-item dropdown d-none d-md-block\">\n        <a\n          class=\"nav-link dropdown-toggle\"\n          href=\"#\"\n          id=\"settingsDropdown\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'designer.navigation.help' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"introService.reset(); (false)\">{{ 'designer.navigation.reset-intro' | translate }}</a>\n          <a class=\"dropdown-item\" href=\"https://rocketshow.net/support/\" target=\"_blank\">{{\n            'designer.navigation.support' | translate\n          }}</a>\n        </div>\n      </li>\n    </ul>\n\n    <ul class=\"navbar-nav\">\n      @if (configService.shareAvailable) {\n      <li class=\"nav-item d-none d-md-flex\" data-toggle=\"collapse\">\n        <a class=\"nav-link text-primary\" (click)=\"projectShare(); (false)\" routerLinkActive=\"active\"\n          ><i class=\"fa fa-share-alt\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-share' | translate }}</a\n        >\n      </li>\n      } @if (configService.languageSwitch) {\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n          ><i class=\"fa fa-globe\" aria-hidden=\"true\"></i>\n          {{ 'designer.misc.language' | translate }}\n        </a>\n        <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('en'); (false)\" target=\"_blank\">English</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('de'); (false)\" target=\"_blank\">Deutsch</a>\n        </div>\n      </li>\n      } @if (configService.loginAvailable && !userService.isLoggedIn()) {\n      <li class=\"nav-item\" data-toggle=\"collapse\">\n        <a class=\"nav-link\" (click)=\"userRegister(); (false)\" routerLinkActive=\"active\"\n          ><i class=\"fa fa-user\" aria-hidden=\"true\"></i> {{ 'designer.navigation.login' | translate }}</a\n        >\n      </li>\n      } @if (configService.loginAvailable && userService.isLoggedIn()) {\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n          ><i class=\"fa fa-user\" aria-hidden=\"true\"></i>\n          {{ userService.username }}\n        </a>\n        <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"userService.logout(); (false)\" target=\"_blank\"\n            ><i class=\"fa fa-sign-out\" aria-hidden=\"true\"></i> {{ 'designer.navigation.logout' | translate }}</a\n          >\n        </div>\n      </li>\n      }\n    </ul>\n  </nav>\n\n  <!-- The main content for larger screens -->\n  <div class=\"h-100 d-none d-md-block\">\n    <div id=\"row1\" class=\"split split-vertical clearfix pt-3 pl-3\">\n      <!-- Scenes -->\n      <div id=\"scenes\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-scene></lib-app-scene>\n        }\n      </div>\n\n      <!-- Presets -->\n      <div id=\"presets\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-preset></lib-app-preset>\n        }\n      </div>\n\n      <!-- 3D preview -->\n      <div id=\"preview\" class=\"split split-horizontal h-100 pr-3\">\n        @if (projectService.project) {\n        <div class=\"card border-secondary h-100\" [class.card-intro-active]=\"introService.showStep('preview')\">\n          <div class=\"card-body p-0 h-100\">\n            <lib-app-preview class=\"h-100\"></lib-app-preview>\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n\n    <div id=\"row2\" class=\"split split-vertical clearfix px-3 d-flex\" style=\"flex-direction: row\">\n      <!-- Menu for the capabilities, channels, effects and settings -->\n      @if (projectService.project) {\n      <div class=\"col col-auto p-0\" style=\"margin-right: -1px\">\n        <div class=\"nav flex-column nav-pills\" id=\"v-pills-tab\" role=\"tablist\" aria-orientation=\"vertical\">\n          <a\n            class=\"nav-link px-3 active\"\n            (click)=\"openTab('capabilities')\"\n            id=\"v-pills-capabilities-tab\"\n            popover=\"{{ 'designer.misc.capabilities' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-capabilities\"\n            role=\"tab\"\n            aria-controls=\"v-pills-capabilities\"\n            aria-selected=\"true\"\n          >\n            <i class=\"fa fa-bolt fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('channels')\"\n            id=\"v-pills-channels-tab\"\n            popover=\"{{ 'designer.misc.channels' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-channels\"\n            role=\"tab\"\n            aria-controls=\"v-pills-channels\"\n            aria-selected=\"false\"\n          >\n            <i class=\"fa fa-sliders fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('effects')\"\n            id=\"v-pills-effects-tab\"\n            popover=\"{{ 'designer.misc.effects' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-effects\"\n            role=\"tab\"\n            aria-controls=\"v-pills-effects\"\n            aria-selected=\"false\"\n          >\n            <i class=\"fa fa-magic fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('settings')\"\n            id=\"v-pills-settings-tab\"\n            popover=\"{{ 'designer.misc.settings' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-settings\"\n            role=\"tab\"\n            aria-controls=\"v-pills-settings\"\n            aria-selected=\"false\"\n            style=\"border-top: 1px solid #444\"\n          >\n            <i class=\"fa fa-cog fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n        </div>\n      </div>\n      }\n\n      <div id=\"capabilities\" class=\"split split-horizontal h-100\" style=\"padding-left: 1rem\">\n        @if (projectService.project) {\n        <div class=\"row h-100\">\n          <!-- Content for the capabilities, channels, effects and settings -->\n          <div class=\"col pl-0 h-100\">\n            <div class=\"tab-content h-100\" id=\"v-pills-tabContent\">\n              <div class=\"tab-pane h-100 show active\" id=\"v-pills-capabilities\" role=\"tabpanel\">\n                <lib-app-fixture-capability></lib-app-fixture-capability>\n              </div>\n              <div class=\"tab-pane h-100 show\" id=\"v-pills-channels\" role=\"tabpanel\">\n                <lib-app-fixture-channel></lib-app-fixture-channel>\n              </div>\n              <div class=\"tab-pane h-100\" id=\"v-pills-effects\" role=\"tabpanel\" aria-labelledby=\"v-pills-profile-tab\">\n                <lib-app-effect></lib-app-effect>\n              </div>\n              <div class=\"tab-pane h-100\" id=\"v-pills-settings\" role=\"tabpanel\" aria-labelledby=\"v-pills-home-tab\">\n                <lib-app-fixture-settings></lib-app-fixture-settings>\n              </div>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Fixtures -->\n      <div id=\"fixtures\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-fixture></lib-app-fixture>\n        }\n      </div>\n\n      <!-- Master dimmer -->\n      <div id=\"masterDimmer\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-master-dimmer></lib-app-master-dimmer>\n        }\n      </div>\n    </div>\n\n    <!-- Timeline -->\n    <div id=\"row3\" class=\"split split-vertical clearfix px-3 pb-3\" style=\"padding-bottom: 20px\">\n      @if (projectService.project) {\n      <lib-app-timeline></lib-app-timeline>\n      }\n    </div>\n  </div>\n\n  <!-- The components for small screens -->\n  <div class=\"d-md-none p-3\">\n    <div>\n      @if (projectService.project) {\n      <lib-app-master-dimmer></lib-app-master-dimmer>\n      }\n    </div>\n\n    <div class=\"mt-3\">\n      @if (projectService.project) {\n      <lib-app-scene></lib-app-scene>\n      }\n    </div>\n  </div>\n</div>\n\n<lib-app-intro class=\"d-none d-md-flex\"></lib-app-intro>\n", styles: [".modal-full{max-width:unset!important;margin:1.75rem!important}.modal{z-index:10001}#designer{font-size:14px}#designer .nav-link{cursor:pointer}#designer .dropdown-menu{z-index:100000}#designer .row{flex-wrap:unset}#designer .navbar-nav{flex-direction:row!important}#designer .navbar-expand-lg{flex-flow:row nowrap!important;justify-content:flex-start!important}#designer .navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem!important;padding-left:.5rem!important}#designer .list-group-item.active{color:#fff!important;background-color:#fd7e14!important;border-color:#fd7e14!important}#designer *:focus{outline:none}#designer select{font-size:.8rem;cursor:pointer}#designer input{font-size:.7rem;background-color:transparent;color:#fff;border:1px solid}#designer input,#designer select{border-color:#dee2e6}#designer .list-group-item{padding:.3rem 1.25rem;border-left:none;border-right:none}#designer .nav-pills .nav-link.active,#designer .nav-pills .show>.nav-link{background-color:#444}#designer .nav a,#designer .panel-title .btn-link{color:#fff!important}#designer .accordion-toggle .btn,#designer .accordion-toggle button{padding:0}#designer .card-body{overflow:auto;padding:.8rem}#designer .card-header{margin-bottom:0}#designer .card-header{padding:.4rem}#designer .panel-body{background-color:#303030}#designer .list-group-item.active-light{background-color:#906542;border-color:#906542}#designer .inactive-list-item{opacity:.3}#designer span.bigcheck-target{font-family:FontAwesome}#designer input[type=checkbox].bigcheck{position:relative;left:-999em}#designer input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}#designer .gutter.gutter-horizontal{cursor:ew-resize}#designer .gutter.gutter-vertical{cursor:ns-resize}#designer .split-horizontal,#designer .gutter.gutter-horizontal{float:left}#designer .split-vertical,#designer .gutter.gutter-horizontal{height:100%}#designer .split{overflow-y:hidden;overflow-x:hidden}#designer .panel{background-color:transparent}#designer .slider{cursor:pointer}#designer .slider-horizontal .slider-track{height:2px!important;margin-top:-2px!important}#designer .slider-vertical .slider-track{width:2px!important;margin-left:4px!important}#designer .slider-track,#designer .slider-track-low,#designer .slider-track-high,#designer .slider-selection{background-color:#fff!important;border-radius:0!important;background-image:none!important;box-shadow:none!important}#designer .slider-handle{width:13px!important;height:13px!important;background-color:#fff!important;background-image:none!important;border:1px solid #303030}#designer .slider-vertical .slider-handle{margin-left:4px!important}#designer .slider-horizontal .slider-handle{margin-top:2px!important}#designer .slider-input{width:35px;margin-left:8px;text-align:center}#designer .slider-input-readonly{width:35px;margin-left:8px;text-align:center;color:#a9a9a9;border-color:gray}#designer .capability-container{padding:0;height:0}#designer accordion-group>div{border:none!important}#designer .popover{background-color:#fff}#designer .popover-body{color:#000}#designer .bs-popover-right .arrow:after,#designer .bs-popover-auto[x-placement^=right] .arrow:after{border-right-color:#fff}#designer .bs-popover-left .arrow:after,#designer .bs-popover-auto[x-placement^=left] .arrow:after{border-left-color:#fff}#designer .bs-popover-bottom .arrow:after,#designer .bs-popover-auto[x-placement^=bottom] .arrow:after{border-bottom-color:#fff}#designer .bs-popover-top .arrow:after,#designer .bs-popover-auto[x-placement^=top] .arrow:after{border-top-color:#fff}#designer .iro__wheel,#designer .iro__slider{cursor:pointer}#designer .pan-tilt-grid path{fill:none;stroke:#fff;stroke-width:10px}#designer .pan-tilt-grid circle{fill:#4682b4;stroke:#fff;stroke-width:3px}#designer .capability{overflow:visible}#designer .capability-deactivated{opacity:.4}#designer .wavesurfer-region{z-index:5!important}#designer .wavesurfer-region[data-region-selected=true]{z-index:6!important}#designer .wavesurfer-region[data-region-preset=true]{height:50%!important;top:50%!important}#designer .wavesurfer-region[data-region-name]:after{content:attr(data-region-name);margin-left:20px}#designer .wavesurfer-handle{width:10px!important;max-width:10px!important;border:1px solid #ddd;background:#0000001a;box-sizing:border-box;opacity:0;cursor:unset!important}#designer .wavesurfer-handle-end{margin-left:-10px}#designer .wavesurfer-region[data-region-selectable=true] .wavesurfer-handle{opacity:1;cursor:col-resize!important}#designer .wavesurfer-handle:before,#designer .wavesurfer-handle:after{content:\"\";display:block;position:absolute;z-index:1;border-top:1px solid #fff;border-bottom:1px solid #fff;height:4px;left:5%;right:5%;top:50%;transform:translateY(-50%)}#designer .wavesurfer-handle:before{margin-top:-3px}#designer timeline{overflow:scroll!important;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;cursor:s-resize}#designer timeline::-webkit-scrollbar{height:0!important}#designer cursor{top:-20px!important}#designer wave{border-right-color:#fd7e14!important;cursor:col-resize}#designer wave canvas{opacity:.2}\n"], dependencies: [{ kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i10$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i12.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: PreviewComponent, selector: "lib-app-preview" }, { kind: "component", type: SceneComponent, selector: "lib-app-scene" }, { kind: "component", type: TimelineComponent, selector: "lib-app-timeline" }, { kind: "component", type: FixtureComponent, selector: "lib-app-fixture" }, { kind: "component", type: FixtureCapabilityComponent, selector: "lib-app-fixture-capability" }, { kind: "component", type: FixtureSettingsComponent, selector: "lib-app-fixture-settings" }, { kind: "component", type: EffectComponent, selector: "lib-app-effect" }, { kind: "component", type: PresetComponent, selector: "lib-app-preset" }, { kind: "component", type: MasterDimmerComponent, selector: "lib-app-master-dimmer" }, { kind: "component", type: FixtureChannelComponent, selector: "lib-app-fixture-channel" }, { kind: "component", type: IntroComponent, selector: "lib-app-intro" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DesignerComponent, isStandalone: false, selector: "lib-designer", inputs: { menuHeightPx: "menuHeightPx", externalCompositionsAvailable: "externalCompositionsAvailable", restUrl: "restUrl", enableMediaLibrary: "enableMediaLibrary", loginAvailable: "loginAvailable", shareAvailable: "shareAvailable", languageSwitch: "languageSwitch", livePreview: "livePreview", localProfiles: "localProfiles", intro: "intro", uniqueProjectNames: "uniqueProjectNames", dropzoneChunking: "dropzoneChunking", universes: "universes", freeUniverseEdit: "freeUniverseEdit" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "previewComponent", first: true, predicate: PreviewComponent, descendants: true }, { propertyName: "timelineComponent", first: true, predicate: TimelineComponent, descendants: true }], ngImport: i0, template: "<!-- Wrap the whole component inside a div to encapsulate the CSS -->\n\n<!-- 100 % height minus the menu bar above and the gutter size of 13 px -->\n<!-- <div style=\"height: calc(100% - 33px)\"> -->\n<div id=\"designer\" [ngStyle]=\"{ height: 'calc(100% - ' + totalMenuHeightPx + 'px)' }\">\n  <!-- Navigation -->\n  <nav\n    class=\"navbar navbar-expand-lg navbar-light bg-light border-secondary\"\n    style=\"border-bottom: 1px solid #444; height: 20px; z-index: 9999\"\n  >\n    <!-- Menu buttons -->\n    <ul class=\"navbar-nav mr-auto\">\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"fileDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n          {{ 'designer.navigation.project' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"fileDropdown\">\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectNew(); (false)\"\n            ><i class=\"fa fa-fw fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-new' | translate }}</a\n          >\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"projectOpen(); (false)\"\n            ><i class=\"fa fa-fw fa-folder-open-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-open' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSave(); (false)\"\n            ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSaveAs(); (false)\"\n            ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save-as' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectImport(); (false)\"\n            ><i class=\"fa fa-fw fa-download\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-import' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectExport(); (false)\"\n            ><i class=\"fa fa-fw fa-external-link\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-export' | translate }}</a\n          >\n        </div>\n      </li>\n      <li class=\"nav-item dropdown d-none d-md-block\">\n        <a\n          class=\"nav-link dropdown-toggle\"\n          href=\"#\"\n          id=\"settingsDropdown\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'designer.navigation.settings' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"openFixturePool(); (false)\">{{ 'designer.navigation.fixture-pool' | translate }}</a>\n          <!-- <a class=\"dropdown-item\" href=\"#\">{{ 'designer.navigation.stage' | translate }}</a> -->\n        </div>\n      </li>\n      <li class=\"nav-item dropdown d-none d-md-block\">\n        <a\n          class=\"nav-link dropdown-toggle\"\n          href=\"#\"\n          id=\"settingsDropdown\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'designer.navigation.help' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"introService.reset(); (false)\">{{ 'designer.navigation.reset-intro' | translate }}</a>\n          <a class=\"dropdown-item\" href=\"https://rocketshow.net/support/\" target=\"_blank\">{{\n            'designer.navigation.support' | translate\n          }}</a>\n        </div>\n      </li>\n    </ul>\n\n    <ul class=\"navbar-nav\">\n      @if (configService.shareAvailable) {\n      <li class=\"nav-item d-none d-md-flex\" data-toggle=\"collapse\">\n        <a class=\"nav-link text-primary\" (click)=\"projectShare(); (false)\" routerLinkActive=\"active\"\n          ><i class=\"fa fa-share-alt\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-share' | translate }}</a\n        >\n      </li>\n      } @if (configService.languageSwitch) {\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n          ><i class=\"fa fa-globe\" aria-hidden=\"true\"></i>\n          {{ 'designer.misc.language' | translate }}\n        </a>\n        <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('de'); (false)\" target=\"_blank\">Deutsch</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('en'); (false)\" target=\"_blank\">English</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('es'); (false)\" target=\"_blank\">Espa\u00F1ol</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('fr'); (false)\" target=\"_blank\">Fran\u00E7ais</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('it'); (false)\" target=\"_blank\">Italiano</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('pt'); (false)\" target=\"_blank\">Portugu\u00EAs</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('zh'); (false)\" target=\"_blank\">\u4E2D\u6587</a>\n        </div>\n      </li>\n      } @if (configService.loginAvailable && !userService.isLoggedIn()) {\n      <li class=\"nav-item\" data-toggle=\"collapse\">\n        <a class=\"nav-link\" (click)=\"userRegister(); (false)\" routerLinkActive=\"active\"\n          ><i class=\"fa fa-user\" aria-hidden=\"true\"></i> {{ 'designer.navigation.login' | translate }}</a\n        >\n      </li>\n      } @if (configService.loginAvailable && userService.isLoggedIn()) {\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n          ><i class=\"fa fa-user\" aria-hidden=\"true\"></i>\n          {{ userService.username }}\n        </a>\n        <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"userService.logout(); (false)\" target=\"_blank\"\n            ><i class=\"fa fa-sign-out\" aria-hidden=\"true\"></i> {{ 'designer.navigation.logout' | translate }}</a\n          >\n        </div>\n      </li>\n      }\n    </ul>\n  </nav>\n\n  <!-- The main content for larger screens -->\n  <div class=\"h-100 d-none d-md-block\">\n    <div id=\"row1\" class=\"split split-vertical clearfix pt-3 pl-3\">\n      <!-- Scenes -->\n      <div id=\"scenes\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-scene></lib-app-scene>\n        }\n      </div>\n\n      <!-- Presets -->\n      <div id=\"presets\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-preset></lib-app-preset>\n        }\n      </div>\n\n      <!-- 3D preview -->\n      <div id=\"preview\" class=\"split split-horizontal h-100 pr-3\">\n        @if (projectService.project) {\n        <div class=\"card border-secondary h-100\" [class.card-intro-active]=\"introService.showStep('preview')\">\n          <div class=\"card-body p-0 h-100\">\n            <lib-app-preview class=\"h-100\"></lib-app-preview>\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n\n    <div id=\"row2\" class=\"split split-vertical clearfix px-3 d-flex\" style=\"flex-direction: row\">\n      <!-- Menu for the capabilities, channels, effects and settings -->\n      @if (projectService.project) {\n      <div class=\"col col-auto p-0\" style=\"margin-right: -1px\">\n        <div class=\"nav flex-column nav-pills\" id=\"v-pills-tab\" role=\"tablist\" aria-orientation=\"vertical\">\n          <a\n            class=\"nav-link px-3 active\"\n            (click)=\"openTab('capabilities')\"\n            id=\"v-pills-capabilities-tab\"\n            popover=\"{{ 'designer.misc.capabilities' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-capabilities\"\n            role=\"tab\"\n            aria-controls=\"v-pills-capabilities\"\n            aria-selected=\"true\"\n          >\n            <i class=\"fa fa-bolt fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('channels')\"\n            id=\"v-pills-channels-tab\"\n            popover=\"{{ 'designer.misc.channels' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-channels\"\n            role=\"tab\"\n            aria-controls=\"v-pills-channels\"\n            aria-selected=\"false\"\n          >\n            <i class=\"fa fa-sliders fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('effects')\"\n            id=\"v-pills-effects-tab\"\n            popover=\"{{ 'designer.misc.effects' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-effects\"\n            role=\"tab\"\n            aria-controls=\"v-pills-effects\"\n            aria-selected=\"false\"\n          >\n            <i class=\"fa fa-magic fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('settings')\"\n            id=\"v-pills-settings-tab\"\n            popover=\"{{ 'designer.misc.settings' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-settings\"\n            role=\"tab\"\n            aria-controls=\"v-pills-settings\"\n            aria-selected=\"false\"\n            style=\"border-top: 1px solid #444\"\n          >\n            <i class=\"fa fa-cog fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n        </div>\n      </div>\n      }\n\n      <div id=\"capabilities\" class=\"split split-horizontal h-100\" style=\"padding-left: 1rem\">\n        @if (projectService.project) {\n        <div class=\"row h-100\">\n          <!-- Content for the capabilities, channels, effects and settings -->\n          <div class=\"col pl-0 h-100\">\n            <div class=\"tab-content h-100\" id=\"v-pills-tabContent\">\n              <div class=\"tab-pane h-100 show active\" id=\"v-pills-capabilities\" role=\"tabpanel\">\n                <lib-app-fixture-capability></lib-app-fixture-capability>\n              </div>\n              <div class=\"tab-pane h-100 show\" id=\"v-pills-channels\" role=\"tabpanel\">\n                <lib-app-fixture-channel></lib-app-fixture-channel>\n              </div>\n              <div class=\"tab-pane h-100\" id=\"v-pills-effects\" role=\"tabpanel\" aria-labelledby=\"v-pills-profile-tab\">\n                <lib-app-effect></lib-app-effect>\n              </div>\n              <div class=\"tab-pane h-100\" id=\"v-pills-settings\" role=\"tabpanel\" aria-labelledby=\"v-pills-home-tab\">\n                <lib-app-fixture-settings></lib-app-fixture-settings>\n              </div>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Fixtures -->\n      <div id=\"fixtures\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-fixture></lib-app-fixture>\n        }\n      </div>\n\n      <!-- Master dimmer -->\n      <div id=\"masterDimmer\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-master-dimmer></lib-app-master-dimmer>\n        }\n      </div>\n    </div>\n\n    <!-- Timeline -->\n    <div id=\"row3\" class=\"split split-vertical clearfix px-3 pb-3\" style=\"padding-bottom: 20px\">\n      @if (projectService.project) {\n      <lib-app-timeline></lib-app-timeline>\n      }\n    </div>\n  </div>\n\n  <!-- The components for small screens -->\n  <div class=\"d-md-none p-3\">\n    <div>\n      @if (projectService.project) {\n      <lib-app-master-dimmer></lib-app-master-dimmer>\n      }\n    </div>\n\n    <div class=\"mt-3\">\n      @if (projectService.project) {\n      <lib-app-scene></lib-app-scene>\n      }\n    </div>\n  </div>\n</div>\n\n<lib-app-intro class=\"d-none d-md-flex\"></lib-app-intro>\n", styles: [".modal-full{max-width:unset!important;margin:1.75rem!important}.modal{z-index:10001}#designer{font-size:14px}#designer .nav-link{cursor:pointer}#designer .dropdown-menu{z-index:100000}#designer .row{flex-wrap:unset}#designer .navbar-nav{flex-direction:row!important}#designer .navbar-expand-lg{flex-flow:row nowrap!important;justify-content:flex-start!important}#designer .navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem!important;padding-left:.5rem!important}#designer .list-group-item.active{color:#fff!important;background-color:#fd7e14!important;border-color:#fd7e14!important}#designer *:focus{outline:none}#designer select{font-size:.8rem;cursor:pointer}#designer input{font-size:.7rem;background-color:transparent;color:#fff;border:1px solid}#designer input,#designer select{border-color:#dee2e6}#designer .list-group-item{padding:.3rem 1.25rem;border-left:none;border-right:none}#designer .nav-pills .nav-link.active,#designer .nav-pills .show>.nav-link{background-color:#444}#designer .nav a,#designer .panel-title .btn-link{color:#fff!important}#designer .accordion-toggle .btn,#designer .accordion-toggle button{padding:0}#designer .card-body{overflow:auto;padding:.8rem}#designer .card-header{margin-bottom:0}#designer .card-header{padding:.4rem}#designer .panel-body{background-color:#303030}#designer .list-group-item.active-light{background-color:#906542;border-color:#906542}#designer .inactive-list-item{opacity:.3}#designer span.bigcheck-target{font-family:FontAwesome}#designer input[type=checkbox].bigcheck{position:relative;left:-999em}#designer input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}#designer .gutter.gutter-horizontal{cursor:ew-resize}#designer .gutter.gutter-vertical{cursor:ns-resize}#designer .split-horizontal,#designer .gutter.gutter-horizontal{float:left}#designer .split-vertical,#designer .gutter.gutter-horizontal{height:100%}#designer .split{overflow-y:hidden;overflow-x:hidden}#designer .panel{background-color:transparent}#designer .slider{cursor:pointer}#designer .slider-horizontal .slider-track{height:2px!important;margin-top:-2px!important}#designer .slider-vertical .slider-track{width:2px!important;margin-left:4px!important}#designer .slider-track,#designer .slider-track-low,#designer .slider-track-high,#designer .slider-selection{background-color:#fff!important;border-radius:0!important;background-image:none!important;box-shadow:none!important}#designer .slider-handle{width:13px!important;height:13px!important;background-color:#fff!important;background-image:none!important;border:1px solid #303030}#designer .slider-vertical .slider-handle{margin-left:4px!important}#designer .slider-horizontal .slider-handle{margin-top:2px!important}#designer .slider-input{width:35px;margin-left:8px;text-align:center}#designer .slider-input-readonly{width:35px;margin-left:8px;text-align:center;color:#a9a9a9;border-color:gray}#designer .capability-container{padding:0;height:0}#designer accordion-group>div{border:none!important}#designer .popover{background-color:#fff}#designer .popover-body{color:#000}#designer .bs-popover-right .arrow:after,#designer .bs-popover-auto[x-placement^=right] .arrow:after{border-right-color:#fff}#designer .bs-popover-left .arrow:after,#designer .bs-popover-auto[x-placement^=left] .arrow:after{border-left-color:#fff}#designer .bs-popover-bottom .arrow:after,#designer .bs-popover-auto[x-placement^=bottom] .arrow:after{border-bottom-color:#fff}#designer .bs-popover-top .arrow:after,#designer .bs-popover-auto[x-placement^=top] .arrow:after{border-top-color:#fff}#designer .iro__wheel,#designer .iro__slider{cursor:pointer}#designer .pan-tilt-grid path{fill:none;stroke:#fff;stroke-width:10px}#designer .pan-tilt-grid circle{fill:#4682b4;stroke:#fff;stroke-width:3px}#designer .capability{overflow:visible}#designer .capability-deactivated{opacity:.4}#designer .wavesurfer-region{z-index:5!important}#designer .wavesurfer-region[data-region-selected=true]{z-index:6!important}#designer .wavesurfer-region[data-region-preset=true]{height:50%!important;top:50%!important}#designer .wavesurfer-region[data-region-name]:after{content:attr(data-region-name);margin-left:20px}#designer .wavesurfer-handle{width:10px!important;max-width:10px!important;border:1px solid #ddd;background:#0000001a;box-sizing:border-box;opacity:0;cursor:unset!important}#designer .wavesurfer-handle-end{margin-left:-10px}#designer .wavesurfer-region[data-region-selectable=true] .wavesurfer-handle{opacity:1;cursor:col-resize!important}#designer .wavesurfer-handle:before,#designer .wavesurfer-handle:after{content:\"\";display:block;position:absolute;z-index:1;border-top:1px solid #fff;border-bottom:1px solid #fff;height:4px;left:5%;right:5%;top:50%;transform:translateY(-50%)}#designer .wavesurfer-handle:before{margin-top:-3px}#designer timeline{overflow:scroll!important;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;cursor:s-resize}#designer timeline::-webkit-scrollbar{height:0!important}#designer cursor{top:-20px!important}#designer wave{border-right-color:#fd7e14!important;cursor:col-resize}#designer wave canvas{opacity:.2}\n"], dependencies: [{ kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i10$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i12.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: PreviewComponent, selector: "lib-app-preview" }, { kind: "component", type: SceneComponent, selector: "lib-app-scene" }, { kind: "component", type: TimelineComponent, selector: "lib-app-timeline" }, { kind: "component", type: FixtureComponent, selector: "lib-app-fixture" }, { kind: "component", type: FixtureCapabilityComponent, selector: "lib-app-fixture-capability" }, { kind: "component", type: FixtureSettingsComponent, selector: "lib-app-fixture-settings" }, { kind: "component", type: EffectComponent, selector: "lib-app-effect" }, { kind: "component", type: PresetComponent, selector: "lib-app-preset" }, { kind: "component", type: MasterDimmerComponent, selector: "lib-app-master-dimmer" }, { kind: "component", type: FixtureChannelComponent, selector: "lib-app-fixture-channel" }, { kind: "component", type: IntroComponent, selector: "lib-app-intro" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DesignerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-designer', encapsulation: ViewEncapsulation.None, standalone: false, template: "<!-- Wrap the whole component inside a div to encapsulate the CSS -->\n\n<!-- 100 % height minus the menu bar above and the gutter size of 13 px -->\n<!-- <div style=\"height: calc(100% - 33px)\"> -->\n<div id=\"designer\" [ngStyle]=\"{ height: 'calc(100% - ' + totalMenuHeightPx + 'px)' }\">\n  <!-- Navigation -->\n  <nav\n    class=\"navbar navbar-expand-lg navbar-light bg-light border-secondary\"\n    style=\"border-bottom: 1px solid #444; height: 20px; z-index: 9999\"\n  >\n    <!-- Menu buttons -->\n    <ul class=\"navbar-nav mr-auto\">\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"fileDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n          {{ 'designer.navigation.project' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"fileDropdown\">\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectNew(); (false)\"\n            ><i class=\"fa fa-fw fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-new' | translate }}</a\n          >\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"projectOpen(); (false)\"\n            ><i class=\"fa fa-fw fa-folder-open-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-open' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSave(); (false)\"\n            ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSaveAs(); (false)\"\n            ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save-as' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectImport(); (false)\"\n            ><i class=\"fa fa-fw fa-download\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-import' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectExport(); (false)\"\n            ><i class=\"fa fa-fw fa-external-link\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-export' | translate }}</a\n          >\n        </div>\n      </li>\n      <li class=\"nav-item dropdown d-none d-md-block\">\n        <a\n          class=\"nav-link dropdown-toggle\"\n          href=\"#\"\n          id=\"settingsDropdown\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'designer.navigation.settings' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"openFixturePool(); (false)\">{{ 'designer.navigation.fixture-pool' | translate }}</a>\n          <!-- <a class=\"dropdown-item\" href=\"#\">{{ 'designer.navigation.stage' | translate }}</a> -->\n        </div>\n      </li>\n      <li class=\"nav-item dropdown d-none d-md-block\">\n        <a\n          class=\"nav-link dropdown-toggle\"\n          href=\"#\"\n          id=\"settingsDropdown\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'designer.navigation.help' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"introService.reset(); (false)\">{{ 'designer.navigation.reset-intro' | translate }}</a>\n          <a class=\"dropdown-item\" href=\"https://rocketshow.net/support/\" target=\"_blank\">{{\n            'designer.navigation.support' | translate\n          }}</a>\n        </div>\n      </li>\n    </ul>\n\n    <ul class=\"navbar-nav\">\n      @if (configService.shareAvailable) {\n      <li class=\"nav-item d-none d-md-flex\" data-toggle=\"collapse\">\n        <a class=\"nav-link text-primary\" (click)=\"projectShare(); (false)\" routerLinkActive=\"active\"\n          ><i class=\"fa fa-share-alt\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-share' | translate }}</a\n        >\n      </li>\n      } @if (configService.languageSwitch) {\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n          ><i class=\"fa fa-globe\" aria-hidden=\"true\"></i>\n          {{ 'designer.misc.language' | translate }}\n        </a>\n        <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('en'); (false)\" target=\"_blank\">English</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('de'); (false)\" target=\"_blank\">Deutsch</a>\n        </div>\n      </li>\n      } @if (configService.loginAvailable && !userService.isLoggedIn()) {\n      <li class=\"nav-item\" data-toggle=\"collapse\">\n        <a class=\"nav-link\" (click)=\"userRegister(); (false)\" routerLinkActive=\"active\"\n          ><i class=\"fa fa-user\" aria-hidden=\"true\"></i> {{ 'designer.navigation.login' | translate }}</a\n        >\n      </li>\n      } @if (configService.loginAvailable && userService.isLoggedIn()) {\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n          ><i class=\"fa fa-user\" aria-hidden=\"true\"></i>\n          {{ userService.username }}\n        </a>\n        <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"userService.logout(); (false)\" target=\"_blank\"\n            ><i class=\"fa fa-sign-out\" aria-hidden=\"true\"></i> {{ 'designer.navigation.logout' | translate }}</a\n          >\n        </div>\n      </li>\n      }\n    </ul>\n  </nav>\n\n  <!-- The main content for larger screens -->\n  <div class=\"h-100 d-none d-md-block\">\n    <div id=\"row1\" class=\"split split-vertical clearfix pt-3 pl-3\">\n      <!-- Scenes -->\n      <div id=\"scenes\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-scene></lib-app-scene>\n        }\n      </div>\n\n      <!-- Presets -->\n      <div id=\"presets\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-preset></lib-app-preset>\n        }\n      </div>\n\n      <!-- 3D preview -->\n      <div id=\"preview\" class=\"split split-horizontal h-100 pr-3\">\n        @if (projectService.project) {\n        <div class=\"card border-secondary h-100\" [class.card-intro-active]=\"introService.showStep('preview')\">\n          <div class=\"card-body p-0 h-100\">\n            <lib-app-preview class=\"h-100\"></lib-app-preview>\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n\n    <div id=\"row2\" class=\"split split-vertical clearfix px-3 d-flex\" style=\"flex-direction: row\">\n      <!-- Menu for the capabilities, channels, effects and settings -->\n      @if (projectService.project) {\n      <div class=\"col col-auto p-0\" style=\"margin-right: -1px\">\n        <div class=\"nav flex-column nav-pills\" id=\"v-pills-tab\" role=\"tablist\" aria-orientation=\"vertical\">\n          <a\n            class=\"nav-link px-3 active\"\n            (click)=\"openTab('capabilities')\"\n            id=\"v-pills-capabilities-tab\"\n            popover=\"{{ 'designer.misc.capabilities' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-capabilities\"\n            role=\"tab\"\n            aria-controls=\"v-pills-capabilities\"\n            aria-selected=\"true\"\n          >\n            <i class=\"fa fa-bolt fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('channels')\"\n            id=\"v-pills-channels-tab\"\n            popover=\"{{ 'designer.misc.channels' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-channels\"\n            role=\"tab\"\n            aria-controls=\"v-pills-channels\"\n            aria-selected=\"false\"\n          >\n            <i class=\"fa fa-sliders fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('effects')\"\n            id=\"v-pills-effects-tab\"\n            popover=\"{{ 'designer.misc.effects' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-effects\"\n            role=\"tab\"\n            aria-controls=\"v-pills-effects\"\n            aria-selected=\"false\"\n          >\n            <i class=\"fa fa-magic fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('settings')\"\n            id=\"v-pills-settings-tab\"\n            popover=\"{{ 'designer.misc.settings' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-settings\"\n            role=\"tab\"\n            aria-controls=\"v-pills-settings\"\n            aria-selected=\"false\"\n            style=\"border-top: 1px solid #444\"\n          >\n            <i class=\"fa fa-cog fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n        </div>\n      </div>\n      }\n\n      <div id=\"capabilities\" class=\"split split-horizontal h-100\" style=\"padding-left: 1rem\">\n        @if (projectService.project) {\n        <div class=\"row h-100\">\n          <!-- Content for the capabilities, channels, effects and settings -->\n          <div class=\"col pl-0 h-100\">\n            <div class=\"tab-content h-100\" id=\"v-pills-tabContent\">\n              <div class=\"tab-pane h-100 show active\" id=\"v-pills-capabilities\" role=\"tabpanel\">\n                <lib-app-fixture-capability></lib-app-fixture-capability>\n              </div>\n              <div class=\"tab-pane h-100 show\" id=\"v-pills-channels\" role=\"tabpanel\">\n                <lib-app-fixture-channel></lib-app-fixture-channel>\n              </div>\n              <div class=\"tab-pane h-100\" id=\"v-pills-effects\" role=\"tabpanel\" aria-labelledby=\"v-pills-profile-tab\">\n                <lib-app-effect></lib-app-effect>\n              </div>\n              <div class=\"tab-pane h-100\" id=\"v-pills-settings\" role=\"tabpanel\" aria-labelledby=\"v-pills-home-tab\">\n                <lib-app-fixture-settings></lib-app-fixture-settings>\n              </div>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Fixtures -->\n      <div id=\"fixtures\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-fixture></lib-app-fixture>\n        }\n      </div>\n\n      <!-- Master dimmer -->\n      <div id=\"masterDimmer\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-master-dimmer></lib-app-master-dimmer>\n        }\n      </div>\n    </div>\n\n    <!-- Timeline -->\n    <div id=\"row3\" class=\"split split-vertical clearfix px-3 pb-3\" style=\"padding-bottom: 20px\">\n      @if (projectService.project) {\n      <lib-app-timeline></lib-app-timeline>\n      }\n    </div>\n  </div>\n\n  <!-- The components for small screens -->\n  <div class=\"d-md-none p-3\">\n    <div>\n      @if (projectService.project) {\n      <lib-app-master-dimmer></lib-app-master-dimmer>\n      }\n    </div>\n\n    <div class=\"mt-3\">\n      @if (projectService.project) {\n      <lib-app-scene></lib-app-scene>\n      }\n    </div>\n  </div>\n</div>\n\n<lib-app-intro class=\"d-none d-md-flex\"></lib-app-intro>\n", styles: [".modal-full{max-width:unset!important;margin:1.75rem!important}.modal{z-index:10001}#designer{font-size:14px}#designer .nav-link{cursor:pointer}#designer .dropdown-menu{z-index:100000}#designer .row{flex-wrap:unset}#designer .navbar-nav{flex-direction:row!important}#designer .navbar-expand-lg{flex-flow:row nowrap!important;justify-content:flex-start!important}#designer .navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem!important;padding-left:.5rem!important}#designer .list-group-item.active{color:#fff!important;background-color:#fd7e14!important;border-color:#fd7e14!important}#designer *:focus{outline:none}#designer select{font-size:.8rem;cursor:pointer}#designer input{font-size:.7rem;background-color:transparent;color:#fff;border:1px solid}#designer input,#designer select{border-color:#dee2e6}#designer .list-group-item{padding:.3rem 1.25rem;border-left:none;border-right:none}#designer .nav-pills .nav-link.active,#designer .nav-pills .show>.nav-link{background-color:#444}#designer .nav a,#designer .panel-title .btn-link{color:#fff!important}#designer .accordion-toggle .btn,#designer .accordion-toggle button{padding:0}#designer .card-body{overflow:auto;padding:.8rem}#designer .card-header{margin-bottom:0}#designer .card-header{padding:.4rem}#designer .panel-body{background-color:#303030}#designer .list-group-item.active-light{background-color:#906542;border-color:#906542}#designer .inactive-list-item{opacity:.3}#designer span.bigcheck-target{font-family:FontAwesome}#designer input[type=checkbox].bigcheck{position:relative;left:-999em}#designer input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}#designer .gutter.gutter-horizontal{cursor:ew-resize}#designer .gutter.gutter-vertical{cursor:ns-resize}#designer .split-horizontal,#designer .gutter.gutter-horizontal{float:left}#designer .split-vertical,#designer .gutter.gutter-horizontal{height:100%}#designer .split{overflow-y:hidden;overflow-x:hidden}#designer .panel{background-color:transparent}#designer .slider{cursor:pointer}#designer .slider-horizontal .slider-track{height:2px!important;margin-top:-2px!important}#designer .slider-vertical .slider-track{width:2px!important;margin-left:4px!important}#designer .slider-track,#designer .slider-track-low,#designer .slider-track-high,#designer .slider-selection{background-color:#fff!important;border-radius:0!important;background-image:none!important;box-shadow:none!important}#designer .slider-handle{width:13px!important;height:13px!important;background-color:#fff!important;background-image:none!important;border:1px solid #303030}#designer .slider-vertical .slider-handle{margin-left:4px!important}#designer .slider-horizontal .slider-handle{margin-top:2px!important}#designer .slider-input{width:35px;margin-left:8px;text-align:center}#designer .slider-input-readonly{width:35px;margin-left:8px;text-align:center;color:#a9a9a9;border-color:gray}#designer .capability-container{padding:0;height:0}#designer accordion-group>div{border:none!important}#designer .popover{background-color:#fff}#designer .popover-body{color:#000}#designer .bs-popover-right .arrow:after,#designer .bs-popover-auto[x-placement^=right] .arrow:after{border-right-color:#fff}#designer .bs-popover-left .arrow:after,#designer .bs-popover-auto[x-placement^=left] .arrow:after{border-left-color:#fff}#designer .bs-popover-bottom .arrow:after,#designer .bs-popover-auto[x-placement^=bottom] .arrow:after{border-bottom-color:#fff}#designer .bs-popover-top .arrow:after,#designer .bs-popover-auto[x-placement^=top] .arrow:after{border-top-color:#fff}#designer .iro__wheel,#designer .iro__slider{cursor:pointer}#designer .pan-tilt-grid path{fill:none;stroke:#fff;stroke-width:10px}#designer .pan-tilt-grid circle{fill:#4682b4;stroke:#fff;stroke-width:3px}#designer .capability{overflow:visible}#designer .capability-deactivated{opacity:.4}#designer .wavesurfer-region{z-index:5!important}#designer .wavesurfer-region[data-region-selected=true]{z-index:6!important}#designer .wavesurfer-region[data-region-preset=true]{height:50%!important;top:50%!important}#designer .wavesurfer-region[data-region-name]:after{content:attr(data-region-name);margin-left:20px}#designer .wavesurfer-handle{width:10px!important;max-width:10px!important;border:1px solid #ddd;background:#0000001a;box-sizing:border-box;opacity:0;cursor:unset!important}#designer .wavesurfer-handle-end{margin-left:-10px}#designer .wavesurfer-region[data-region-selectable=true] .wavesurfer-handle{opacity:1;cursor:col-resize!important}#designer .wavesurfer-handle:before,#designer .wavesurfer-handle:after{content:\"\";display:block;position:absolute;z-index:1;border-top:1px solid #fff;border-bottom:1px solid #fff;height:4px;left:5%;right:5%;top:50%;transform:translateY(-50%)}#designer .wavesurfer-handle:before{margin-top:-3px}#designer timeline{overflow:scroll!important;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;cursor:s-resize}#designer timeline::-webkit-scrollbar{height:0!important}#designer cursor{top:-20px!important}#designer wave{border-right-color:#fd7e14!important;cursor:col-resize}#designer wave canvas{opacity:.2}\n"] }]
+            args: [{ selector: 'lib-designer', encapsulation: ViewEncapsulation.None, standalone: false, template: "<!-- Wrap the whole component inside a div to encapsulate the CSS -->\n\n<!-- 100 % height minus the menu bar above and the gutter size of 13 px -->\n<!-- <div style=\"height: calc(100% - 33px)\"> -->\n<div id=\"designer\" [ngStyle]=\"{ height: 'calc(100% - ' + totalMenuHeightPx + 'px)' }\">\n  <!-- Navigation -->\n  <nav\n    class=\"navbar navbar-expand-lg navbar-light bg-light border-secondary\"\n    style=\"border-bottom: 1px solid #444; height: 20px; z-index: 9999\"\n  >\n    <!-- Menu buttons -->\n    <ul class=\"navbar-nav mr-auto\">\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"fileDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n          {{ 'designer.navigation.project' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"fileDropdown\">\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectNew(); (false)\"\n            ><i class=\"fa fa-fw fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-new' | translate }}</a\n          >\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"projectOpen(); (false)\"\n            ><i class=\"fa fa-fw fa-folder-open-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-open' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSave(); (false)\"\n            ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSaveAs(); (false)\"\n            ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save-as' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectImport(); (false)\"\n            ><i class=\"fa fa-fw fa-download\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-import' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectExport(); (false)\"\n            ><i class=\"fa fa-fw fa-external-link\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-export' | translate }}</a\n          >\n        </div>\n      </li>\n      <li class=\"nav-item dropdown d-none d-md-block\">\n        <a\n          class=\"nav-link dropdown-toggle\"\n          href=\"#\"\n          id=\"settingsDropdown\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'designer.navigation.settings' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"openFixturePool(); (false)\">{{ 'designer.navigation.fixture-pool' | translate }}</a>\n          <!-- <a class=\"dropdown-item\" href=\"#\">{{ 'designer.navigation.stage' | translate }}</a> -->\n        </div>\n      </li>\n      <li class=\"nav-item dropdown d-none d-md-block\">\n        <a\n          class=\"nav-link dropdown-toggle\"\n          href=\"#\"\n          id=\"settingsDropdown\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'designer.navigation.help' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"introService.reset(); (false)\">{{ 'designer.navigation.reset-intro' | translate }}</a>\n          <a class=\"dropdown-item\" href=\"https://rocketshow.net/support/\" target=\"_blank\">{{\n            'designer.navigation.support' | translate\n          }}</a>\n        </div>\n      </li>\n    </ul>\n\n    <ul class=\"navbar-nav\">\n      @if (configService.shareAvailable) {\n      <li class=\"nav-item d-none d-md-flex\" data-toggle=\"collapse\">\n        <a class=\"nav-link text-primary\" (click)=\"projectShare(); (false)\" routerLinkActive=\"active\"\n          ><i class=\"fa fa-share-alt\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-share' | translate }}</a\n        >\n      </li>\n      } @if (configService.languageSwitch) {\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n          ><i class=\"fa fa-globe\" aria-hidden=\"true\"></i>\n          {{ 'designer.misc.language' | translate }}\n        </a>\n        <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('de'); (false)\" target=\"_blank\">Deutsch</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('en'); (false)\" target=\"_blank\">English</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('es'); (false)\" target=\"_blank\">Espa\u00F1ol</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('fr'); (false)\" target=\"_blank\">Fran\u00E7ais</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('it'); (false)\" target=\"_blank\">Italiano</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('pt'); (false)\" target=\"_blank\">Portugu\u00EAs</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('zh'); (false)\" target=\"_blank\">\u4E2D\u6587</a>\n        </div>\n      </li>\n      } @if (configService.loginAvailable && !userService.isLoggedIn()) {\n      <li class=\"nav-item\" data-toggle=\"collapse\">\n        <a class=\"nav-link\" (click)=\"userRegister(); (false)\" routerLinkActive=\"active\"\n          ><i class=\"fa fa-user\" aria-hidden=\"true\"></i> {{ 'designer.navigation.login' | translate }}</a\n        >\n      </li>\n      } @if (configService.loginAvailable && userService.isLoggedIn()) {\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n          ><i class=\"fa fa-user\" aria-hidden=\"true\"></i>\n          {{ userService.username }}\n        </a>\n        <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"userService.logout(); (false)\" target=\"_blank\"\n            ><i class=\"fa fa-sign-out\" aria-hidden=\"true\"></i> {{ 'designer.navigation.logout' | translate }}</a\n          >\n        </div>\n      </li>\n      }\n    </ul>\n  </nav>\n\n  <!-- The main content for larger screens -->\n  <div class=\"h-100 d-none d-md-block\">\n    <div id=\"row1\" class=\"split split-vertical clearfix pt-3 pl-3\">\n      <!-- Scenes -->\n      <div id=\"scenes\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-scene></lib-app-scene>\n        }\n      </div>\n\n      <!-- Presets -->\n      <div id=\"presets\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-preset></lib-app-preset>\n        }\n      </div>\n\n      <!-- 3D preview -->\n      <div id=\"preview\" class=\"split split-horizontal h-100 pr-3\">\n        @if (projectService.project) {\n        <div class=\"card border-secondary h-100\" [class.card-intro-active]=\"introService.showStep('preview')\">\n          <div class=\"card-body p-0 h-100\">\n            <lib-app-preview class=\"h-100\"></lib-app-preview>\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n\n    <div id=\"row2\" class=\"split split-vertical clearfix px-3 d-flex\" style=\"flex-direction: row\">\n      <!-- Menu for the capabilities, channels, effects and settings -->\n      @if (projectService.project) {\n      <div class=\"col col-auto p-0\" style=\"margin-right: -1px\">\n        <div class=\"nav flex-column nav-pills\" id=\"v-pills-tab\" role=\"tablist\" aria-orientation=\"vertical\">\n          <a\n            class=\"nav-link px-3 active\"\n            (click)=\"openTab('capabilities')\"\n            id=\"v-pills-capabilities-tab\"\n            popover=\"{{ 'designer.misc.capabilities' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-capabilities\"\n            role=\"tab\"\n            aria-controls=\"v-pills-capabilities\"\n            aria-selected=\"true\"\n          >\n            <i class=\"fa fa-bolt fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('channels')\"\n            id=\"v-pills-channels-tab\"\n            popover=\"{{ 'designer.misc.channels' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-channels\"\n            role=\"tab\"\n            aria-controls=\"v-pills-channels\"\n            aria-selected=\"false\"\n          >\n            <i class=\"fa fa-sliders fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('effects')\"\n            id=\"v-pills-effects-tab\"\n            popover=\"{{ 'designer.misc.effects' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-effects\"\n            role=\"tab\"\n            aria-controls=\"v-pills-effects\"\n            aria-selected=\"false\"\n          >\n            <i class=\"fa fa-magic fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('settings')\"\n            id=\"v-pills-settings-tab\"\n            popover=\"{{ 'designer.misc.settings' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-settings\"\n            role=\"tab\"\n            aria-controls=\"v-pills-settings\"\n            aria-selected=\"false\"\n            style=\"border-top: 1px solid #444\"\n          >\n            <i class=\"fa fa-cog fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n        </div>\n      </div>\n      }\n\n      <div id=\"capabilities\" class=\"split split-horizontal h-100\" style=\"padding-left: 1rem\">\n        @if (projectService.project) {\n        <div class=\"row h-100\">\n          <!-- Content for the capabilities, channels, effects and settings -->\n          <div class=\"col pl-0 h-100\">\n            <div class=\"tab-content h-100\" id=\"v-pills-tabContent\">\n              <div class=\"tab-pane h-100 show active\" id=\"v-pills-capabilities\" role=\"tabpanel\">\n                <lib-app-fixture-capability></lib-app-fixture-capability>\n              </div>\n              <div class=\"tab-pane h-100 show\" id=\"v-pills-channels\" role=\"tabpanel\">\n                <lib-app-fixture-channel></lib-app-fixture-channel>\n              </div>\n              <div class=\"tab-pane h-100\" id=\"v-pills-effects\" role=\"tabpanel\" aria-labelledby=\"v-pills-profile-tab\">\n                <lib-app-effect></lib-app-effect>\n              </div>\n              <div class=\"tab-pane h-100\" id=\"v-pills-settings\" role=\"tabpanel\" aria-labelledby=\"v-pills-home-tab\">\n                <lib-app-fixture-settings></lib-app-fixture-settings>\n              </div>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Fixtures -->\n      <div id=\"fixtures\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-fixture></lib-app-fixture>\n        }\n      </div>\n\n      <!-- Master dimmer -->\n      <div id=\"masterDimmer\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-master-dimmer></lib-app-master-dimmer>\n        }\n      </div>\n    </div>\n\n    <!-- Timeline -->\n    <div id=\"row3\" class=\"split split-vertical clearfix px-3 pb-3\" style=\"padding-bottom: 20px\">\n      @if (projectService.project) {\n      <lib-app-timeline></lib-app-timeline>\n      }\n    </div>\n  </div>\n\n  <!-- The components for small screens -->\n  <div class=\"d-md-none p-3\">\n    <div>\n      @if (projectService.project) {\n      <lib-app-master-dimmer></lib-app-master-dimmer>\n      }\n    </div>\n\n    <div class=\"mt-3\">\n      @if (projectService.project) {\n      <lib-app-scene></lib-app-scene>\n      }\n    </div>\n  </div>\n</div>\n\n<lib-app-intro class=\"d-none d-md-flex\"></lib-app-intro>\n", styles: [".modal-full{max-width:unset!important;margin:1.75rem!important}.modal{z-index:10001}#designer{font-size:14px}#designer .nav-link{cursor:pointer}#designer .dropdown-menu{z-index:100000}#designer .row{flex-wrap:unset}#designer .navbar-nav{flex-direction:row!important}#designer .navbar-expand-lg{flex-flow:row nowrap!important;justify-content:flex-start!important}#designer .navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem!important;padding-left:.5rem!important}#designer .list-group-item.active{color:#fff!important;background-color:#fd7e14!important;border-color:#fd7e14!important}#designer *:focus{outline:none}#designer select{font-size:.8rem;cursor:pointer}#designer input{font-size:.7rem;background-color:transparent;color:#fff;border:1px solid}#designer input,#designer select{border-color:#dee2e6}#designer .list-group-item{padding:.3rem 1.25rem;border-left:none;border-right:none}#designer .nav-pills .nav-link.active,#designer .nav-pills .show>.nav-link{background-color:#444}#designer .nav a,#designer .panel-title .btn-link{color:#fff!important}#designer .accordion-toggle .btn,#designer .accordion-toggle button{padding:0}#designer .card-body{overflow:auto;padding:.8rem}#designer .card-header{margin-bottom:0}#designer .card-header{padding:.4rem}#designer .panel-body{background-color:#303030}#designer .list-group-item.active-light{background-color:#906542;border-color:#906542}#designer .inactive-list-item{opacity:.3}#designer span.bigcheck-target{font-family:FontAwesome}#designer input[type=checkbox].bigcheck{position:relative;left:-999em}#designer input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}#designer .gutter.gutter-horizontal{cursor:ew-resize}#designer .gutter.gutter-vertical{cursor:ns-resize}#designer .split-horizontal,#designer .gutter.gutter-horizontal{float:left}#designer .split-vertical,#designer .gutter.gutter-horizontal{height:100%}#designer .split{overflow-y:hidden;overflow-x:hidden}#designer .panel{background-color:transparent}#designer .slider{cursor:pointer}#designer .slider-horizontal .slider-track{height:2px!important;margin-top:-2px!important}#designer .slider-vertical .slider-track{width:2px!important;margin-left:4px!important}#designer .slider-track,#designer .slider-track-low,#designer .slider-track-high,#designer .slider-selection{background-color:#fff!important;border-radius:0!important;background-image:none!important;box-shadow:none!important}#designer .slider-handle{width:13px!important;height:13px!important;background-color:#fff!important;background-image:none!important;border:1px solid #303030}#designer .slider-vertical .slider-handle{margin-left:4px!important}#designer .slider-horizontal .slider-handle{margin-top:2px!important}#designer .slider-input{width:35px;margin-left:8px;text-align:center}#designer .slider-input-readonly{width:35px;margin-left:8px;text-align:center;color:#a9a9a9;border-color:gray}#designer .capability-container{padding:0;height:0}#designer accordion-group>div{border:none!important}#designer .popover{background-color:#fff}#designer .popover-body{color:#000}#designer .bs-popover-right .arrow:after,#designer .bs-popover-auto[x-placement^=right] .arrow:after{border-right-color:#fff}#designer .bs-popover-left .arrow:after,#designer .bs-popover-auto[x-placement^=left] .arrow:after{border-left-color:#fff}#designer .bs-popover-bottom .arrow:after,#designer .bs-popover-auto[x-placement^=bottom] .arrow:after{border-bottom-color:#fff}#designer .bs-popover-top .arrow:after,#designer .bs-popover-auto[x-placement^=top] .arrow:after{border-top-color:#fff}#designer .iro__wheel,#designer .iro__slider{cursor:pointer}#designer .pan-tilt-grid path{fill:none;stroke:#fff;stroke-width:10px}#designer .pan-tilt-grid circle{fill:#4682b4;stroke:#fff;stroke-width:3px}#designer .capability{overflow:visible}#designer .capability-deactivated{opacity:.4}#designer .wavesurfer-region{z-index:5!important}#designer .wavesurfer-region[data-region-selected=true]{z-index:6!important}#designer .wavesurfer-region[data-region-preset=true]{height:50%!important;top:50%!important}#designer .wavesurfer-region[data-region-name]:after{content:attr(data-region-name);margin-left:20px}#designer .wavesurfer-handle{width:10px!important;max-width:10px!important;border:1px solid #ddd;background:#0000001a;box-sizing:border-box;opacity:0;cursor:unset!important}#designer .wavesurfer-handle-end{margin-left:-10px}#designer .wavesurfer-region[data-region-selectable=true] .wavesurfer-handle{opacity:1;cursor:col-resize!important}#designer .wavesurfer-handle:before,#designer .wavesurfer-handle:after{content:\"\";display:block;position:absolute;z-index:1;border-top:1px solid #fff;border-bottom:1px solid #fff;height:4px;left:5%;right:5%;top:50%;transform:translateY(-50%)}#designer .wavesurfer-handle:before{margin-top:-3px}#designer timeline{overflow:scroll!important;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;cursor:s-resize}#designer timeline::-webkit-scrollbar{height:0!important}#designer cursor{top:-20px!important}#designer wave{border-right-color:#fd7e14!important;cursor:col-resize}#designer wave canvas{opacity:.2}\n"] }]
         }], ctorParameters: () => [{ type: i2.TranslateService }, { type: ProjectService }, { type: ConfigService }, { type: FixturePoolService }, { type: HotkeyTargetExcludeService }, { type: i1$1.BsModalService }, { type: UserService }, { type: UserEnsureLoginService }, { type: ProjectLoadService }, { type: WarningDialogService }, { type: ErrorDialogService }, { type: FixtureService }, { type: TimelineService }, { type: IntroService }, { type: EffectService }], propDecorators: { menuHeightPx: [{
                 type: Input
             }], externalCompositionsAvailable: [{
@@ -8728,6 +8708,344 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['document:keydown', ['$event']]
             }] } });
 
+/**
+ * A lightweight, dependency-free tree:
+ *  - collapsible folders (closed/open folder icon)
+ *  - multi selection (ctrl/cmd to toggle, shift to select a range)
+ *  - native HTML5 drag & drop, dropping before/after a node or into a folder,
+ *    moving the whole current selection at once
+ */
+class TreeComponent {
+    constructor() {
+        // the tree data (mutated in place when nodes are dragged around)
+        this.nodes = [];
+        // currently selected nodes (two-way bindable)
+        this.selectedNodes = [];
+        // decide whether a node may be dragged
+        this.allowDrag = () => true;
+        // decide whether the dragged nodes may be dropped onto a target/zone
+        this.allowDrop = () => true;
+        this.selectedNodesChange = new EventEmitter();
+        // a (non-folder) leaf was activated by a plain click
+        this.activate = new EventEmitter();
+        // the tree structure changed because of a drag & drop move
+        this.nodesChange = new EventEmitter();
+        // the visible (expanded) nodes, flattened for rendering
+        this.flatNodes = [];
+        // currently dragged nodes and the live drop indicator
+        this.draggingNodes = [];
+        this.drop = null;
+        // hovering the trailing strip drops at the very end of the root level
+        this.dropTail = false;
+        this.selection = new Set();
+        this.lastClickedIndex = null;
+        this.flatByNode = new Map();
+    }
+    // indentation of one tree level, in px (must match the template/CSS)
+    static { this.INDENT_STEP = 15; }
+    static { this.INDENT_BASE = 4; }
+    indentPx(level) {
+        return this.indent(level) + 'px';
+    }
+    indent(level) {
+        return level * TreeComponent.INDENT_STEP + TreeComponent.INDENT_BASE;
+    }
+    ngOnChanges(changes) {
+        if (changes['selectedNodes']) {
+            this.selection = new Set(this.selectedNodes ?? []);
+        }
+        this.rebuild();
+    }
+    isSelected(node) {
+        return this.selection.has(node);
+    }
+    isDragging(node) {
+        return this.draggingNodes.includes(node);
+    }
+    toggleExpand(node) {
+        node.expanded = !node.expanded;
+        this.rebuild();
+    }
+    // ---- selection / clicking ----------------------------------------------
+    onRowClick(flat, event) {
+        const node = flat.node;
+        const index = this.flatNodes.indexOf(flat);
+        if (event.shiftKey && this.lastClickedIndex !== null) {
+            this.selectRange(this.lastClickedIndex, index, event.ctrlKey || event.metaKey);
+        }
+        else if (event.ctrlKey || event.metaKey) {
+            if (this.selection.has(node)) {
+                this.selection.delete(node);
+            }
+            else {
+                this.selection.add(node);
+            }
+            this.lastClickedIndex = index;
+        }
+        else {
+            // plain click: folders toggle, leaves activate; either way select just this row
+            if (node.isFolder) {
+                this.toggleExpand(node);
+            }
+            this.selection.clear();
+            this.selection.add(node);
+            this.lastClickedIndex = index;
+            if (!node.isFolder) {
+                this.activate.emit(node);
+            }
+        }
+        this.selectedNodesChange.emit([...this.selection]);
+    }
+    selectRange(from, to, additive) {
+        if (!additive) {
+            this.selection.clear();
+        }
+        const [lo, hi] = from <= to ? [from, to] : [to, from];
+        for (let i = lo; i <= hi && i < this.flatNodes.length; i++) {
+            this.selection.add(this.flatNodes[i].node);
+        }
+    }
+    // ---- drag & drop --------------------------------------------------------
+    onDragStart(flat, event) {
+        const node = flat.node;
+        if (!this.allowDrag(node)) {
+            event.preventDefault();
+            return;
+        }
+        // dragging an unselected node makes it the sole selection
+        if (!this.selection.has(node)) {
+            this.selection.clear();
+            this.selection.add(node);
+            this.lastClickedIndex = this.flatNodes.indexOf(flat);
+            this.selectedNodesChange.emit([...this.selection]);
+        }
+        // drag the whole selection, but never a node together with its own ancestor
+        this.draggingNodes = this.removeNested([...this.selection]);
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            // required for Firefox to start a native drag
+            event.dataTransfer.setData('text/plain', node.name ?? '');
+        }
+    }
+    onDragOver(flat, event) {
+        if (!this.draggingNodes.length) {
+            return;
+        }
+        const resolved = this.resolveDrop(flat, event.currentTarget, event.clientX, event.clientY);
+        if (!this.canDrop(resolved.ref, resolved.zone)) {
+            this.clearIndicator();
+            return;
+        }
+        // preventDefault marks this as a valid drop location
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'move';
+        }
+        this.drop = resolved;
+        this.dropTail = false;
+    }
+    onDrop(flat, event) {
+        event.preventDefault();
+        if (this.drop) {
+            this.moveNodes(this.draggingNodes, this.drop.ref, this.drop.zone);
+            this.nodesChange.emit(this.nodes);
+        }
+        this.endDrag();
+    }
+    // The strip below the last row: drop after the last folder, at the root level.
+    // (The last folder has no following row to act as a "before" drop target.)
+    onTailDragOver(event) {
+        if (!this.draggingNodes.length) {
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'move';
+        }
+        this.drop = null;
+        this.dropTail = true;
+    }
+    onTailDrop(event) {
+        event.preventDefault();
+        if (this.draggingNodes.length) {
+            this.detachAll(this.draggingNodes);
+            this.nodes.push(...this.draggingNodes);
+            this.nodesChange.emit(this.nodes);
+        }
+        this.endDrag();
+    }
+    onDragEnd() {
+        this.endDrag();
+    }
+    endDrag() {
+        this.draggingNodes = [];
+        this.clearIndicator();
+        this.rebuild();
+    }
+    clearIndicator() {
+        this.drop = null;
+        this.dropTail = false;
+    }
+    // Resolve the hovered row + cursor position into a drop target.
+    //  - top of a row        -> before it
+    //  - middle of a folder  -> inside it
+    //  - bottom of a row     -> after it (see afterRow for the inside/outside choice)
+    // An expanded, non-empty folder has no "after" band on its header: dropping
+    // after such a folder happens at the bottom of its last child instead, so the
+    // indicator lands at the folder's visual end rather than under its header.
+    resolveDrop(flat, row, clientX, clientY) {
+        const node = flat.node;
+        const rect = row.getBoundingClientRect();
+        const offset = clientY - rect.top;
+        if (node.isFolder) {
+            if (offset < rect.height * 0.3) {
+                return { row: node, zone: 'before', ref: node, indent: this.indent(flat.level) };
+            }
+            const expandedWithChildren = !!node.expanded && !!node.children?.length;
+            if (expandedWithChildren || offset <= rect.height * 0.7) {
+                return { row: node, zone: 'inside', ref: node, indent: this.indent(flat.level) };
+            }
+            return this.afterRow(flat, clientX, rect.left);
+        }
+        if (offset < rect.height / 2) {
+            return { row: node, zone: 'before', ref: node, indent: this.indent(flat.level) };
+        }
+        return this.afterRow(flat, clientX, rect.left);
+    }
+    // "after" the hovered row. When the row is the last child of its subtree, the
+    // horizontal cursor position chooses the level: keep the node inside next to
+    // the row, or outdent to drop after one of its ancestor folders. The indicator
+    // stays at this row's bottom edge but is indented to the chosen level.
+    afterRow(flat, clientX, rowLeft) {
+        const next = this.flatNodes[this.flatNodes.indexOf(flat) + 1];
+        // not the last node of a subtree -> unambiguous "after this row"
+        if (next && next.level >= flat.level) {
+            return { row: flat.node, zone: 'after', ref: flat.node, indent: this.indent(flat.level) };
+        }
+        // last child: pick a drop level between the next visible row's level (how far
+        // we may outdent) and this row's own level, from the cursor's x position
+        const minLevel = next ? next.level : 0;
+        const level = Math.max(minLevel, Math.min(flat.level, Math.round((clientX - rowLeft - TreeComponent.INDENT_BASE) / TreeComponent.INDENT_STEP)));
+        // walk up to the ancestor sitting at the chosen level
+        let ancestor = flat;
+        while (ancestor && ancestor.level > level) {
+            ancestor = ancestor.parent ? this.flatByNode.get(ancestor.parent) : undefined;
+        }
+        return { row: flat.node, zone: 'after', ref: ancestor?.node ?? flat.node, indent: this.indent(level) };
+    }
+    canDrop(ref, zone) {
+        if (this.draggingNodes.includes(ref)) {
+            return false;
+        }
+        // cannot drop a node into its own subtree
+        if (this.draggingNodes.some((dragged) => this.contains(dragged, ref))) {
+            return false;
+        }
+        if (zone === 'inside' && !ref.isFolder) {
+            return false;
+        }
+        return this.allowDrop(this.draggingNodes, ref, zone);
+    }
+    moveNodes(dragged, ref, zone) {
+        this.detachAll(dragged);
+        if (zone === 'inside') {
+            ref.children = ref.children ?? [];
+            ref.children.push(...dragged);
+            ref.isFolder = true;
+            ref.expanded = true;
+            return;
+        }
+        const location = this.locate(ref);
+        if (!location) {
+            this.nodes.push(...dragged);
+            return;
+        }
+        const insertAt = location.index + (zone === 'after' ? 1 : 0);
+        location.list.splice(insertAt, 0, ...dragged);
+    }
+    // detach every dragged node from its current parent (re-locate each time, so
+    // indices stay correct while the arrays are being spliced)
+    detachAll(dragged) {
+        for (const node of dragged) {
+            const location = this.locate(node);
+            if (location) {
+                location.list.splice(location.index, 1);
+            }
+        }
+    }
+    // ---- tree helpers -------------------------------------------------------
+    rebuild() {
+        this.flatNodes = [];
+        this.flatByNode.clear();
+        this.flatten(this.nodes ?? [], 0, null);
+    }
+    flatten(list, level, parent) {
+        for (const node of list) {
+            const flat = { node, level, parent };
+            this.flatNodes.push(flat);
+            this.flatByNode.set(node, flat);
+            if (node.isFolder && node.expanded && node.children?.length) {
+                this.flatten(node.children, level + 1, node);
+            }
+        }
+    }
+    // drop nodes that are already contained in another node of the set
+    removeNested(nodes) {
+        return nodes.filter((node) => !nodes.some((other) => other !== node && this.contains(other, node)));
+    }
+    // is `node` somewhere inside `ancestor`'s subtree?
+    contains(ancestor, node) {
+        if (!ancestor.children) {
+            return false;
+        }
+        for (const child of ancestor.children) {
+            if (child === node || this.contains(child, node)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    // find the array and index that currently hold `target`
+    locate(target, list = this.nodes) {
+        for (let i = 0; i < list.length; i++) {
+            if (list[i] === target) {
+                return { list, index: i };
+            }
+            const children = list[i].children;
+            if (children?.length) {
+                const found = this.locate(target, children);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TreeComponent, isStandalone: false, selector: "lib-tree", inputs: { nodes: "nodes", selectedNodes: "selectedNodes", allowDrag: "allowDrag", allowDrop: "allowDrop" }, outputs: { selectedNodesChange: "selectedNodesChange", activate: "activate", nodesChange: "nodesChange" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: ["nodeTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tree\" (dragend)=\"onDragEnd()\">\n  @for (flat of flatNodes; track flat.node) {\n  <div\n    class=\"tree-node\"\n    [class.selected]=\"isSelected(flat.node)\"\n    [class.dragging]=\"isDragging(flat.node)\"\n    [class.drop-before]=\"drop?.row === flat.node && drop?.zone === 'before'\"\n    [class.drop-after]=\"drop?.row === flat.node && drop?.zone === 'after'\"\n    [class.drop-inside]=\"drop?.row === flat.node && drop?.zone === 'inside'\"\n    [style.--tree-indent]=\"indentPx(flat.level)\"\n    [style.--tree-drop-indent]=\"drop?.row === flat.node ? drop.indent + 'px' : null\"\n    [attr.draggable]=\"allowDrag(flat.node)\"\n    (click)=\"onRowClick(flat, $event)\"\n    (dragstart)=\"onDragStart(flat, $event)\"\n    (dragover)=\"onDragOver(flat, $event)\"\n    (drop)=\"onDrop(flat, $event)\"\n  >\n    <i\n      class=\"tree-icon fa\"\n      [class.fa-folder-open-o]=\"flat.node.isFolder && flat.node.expanded\"\n      [class.fa-folder-o]=\"flat.node.isFolder && !flat.node.expanded\"\n      [class.fa-file-o]=\"!flat.node.isFolder\"\n      aria-hidden=\"true\"\n    ></i>\n    <span class=\"tree-label\">\n      <ng-container *ngTemplateOutlet=\"nodeTemplate || defaultTemplate; context: { $implicit: flat.node, node: flat.node }\"></ng-container>\n    </span>\n  </div>\n  }\n\n  <div class=\"tree-tail\" [class.drop-tail]=\"dropTail\" (dragover)=\"onTailDragOver($event)\" (drop)=\"onTailDrop($event)\"></div>\n</div>\n\n<ng-template #defaultTemplate let-node>{{ node.name }}</ng-template>\n", styles: [":host{display:block}.tree{display:flex;flex-direction:column;padding:5px;-webkit-user-select:none;user-select:none}.tree-node{position:relative;flex:0 0 auto;display:flex;align-items:center;height:23px;line-height:23px;padding-left:var(--tree-indent, 4px);padding-right:4px;cursor:pointer;white-space:nowrap}.tree-node:hover{background-color:#ffffff0f}.tree-node.selected{background-color:#906543}.tree-node.dragging{opacity:.4}.tree-node.drop-before,.tree-node.drop-after,.tree-node.drop-inside{z-index:1}.tree-icon{flex:0 0 auto;width:16px;margin-right:5px;text-align:center}.tree-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.tree-node.drop-before:before,.tree-node.drop-after:after{content:\"\";position:absolute;left:var(--tree-drop-indent, var(--tree-indent, 4px));right:4px;height:2px;background-color:#d39661;pointer-events:none}.tree-node.drop-before:before{top:-1px}.tree-node.drop-after:after{bottom:-1px}.tree-node.drop-inside{outline:2px solid #d39661;outline-offset:-2px}.tree-tail{flex:1 1 auto;min-height:16px}.tree-tail.drop-tail:before{content:\"\";display:block;height:2px;margin:0 4px;background-color:#d39661}\n"], dependencies: [{ kind: "directive", type: i10$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tree', standalone: false, template: "<div class=\"tree\" (dragend)=\"onDragEnd()\">\n  @for (flat of flatNodes; track flat.node) {\n  <div\n    class=\"tree-node\"\n    [class.selected]=\"isSelected(flat.node)\"\n    [class.dragging]=\"isDragging(flat.node)\"\n    [class.drop-before]=\"drop?.row === flat.node && drop?.zone === 'before'\"\n    [class.drop-after]=\"drop?.row === flat.node && drop?.zone === 'after'\"\n    [class.drop-inside]=\"drop?.row === flat.node && drop?.zone === 'inside'\"\n    [style.--tree-indent]=\"indentPx(flat.level)\"\n    [style.--tree-drop-indent]=\"drop?.row === flat.node ? drop.indent + 'px' : null\"\n    [attr.draggable]=\"allowDrag(flat.node)\"\n    (click)=\"onRowClick(flat, $event)\"\n    (dragstart)=\"onDragStart(flat, $event)\"\n    (dragover)=\"onDragOver(flat, $event)\"\n    (drop)=\"onDrop(flat, $event)\"\n  >\n    <i\n      class=\"tree-icon fa\"\n      [class.fa-folder-open-o]=\"flat.node.isFolder && flat.node.expanded\"\n      [class.fa-folder-o]=\"flat.node.isFolder && !flat.node.expanded\"\n      [class.fa-file-o]=\"!flat.node.isFolder\"\n      aria-hidden=\"true\"\n    ></i>\n    <span class=\"tree-label\">\n      <ng-container *ngTemplateOutlet=\"nodeTemplate || defaultTemplate; context: { $implicit: flat.node, node: flat.node }\"></ng-container>\n    </span>\n  </div>\n  }\n\n  <div class=\"tree-tail\" [class.drop-tail]=\"dropTail\" (dragover)=\"onTailDragOver($event)\" (drop)=\"onTailDrop($event)\"></div>\n</div>\n\n<ng-template #defaultTemplate let-node>{{ node.name }}</ng-template>\n", styles: [":host{display:block}.tree{display:flex;flex-direction:column;padding:5px;-webkit-user-select:none;user-select:none}.tree-node{position:relative;flex:0 0 auto;display:flex;align-items:center;height:23px;line-height:23px;padding-left:var(--tree-indent, 4px);padding-right:4px;cursor:pointer;white-space:nowrap}.tree-node:hover{background-color:#ffffff0f}.tree-node.selected{background-color:#906543}.tree-node.dragging{opacity:.4}.tree-node.drop-before,.tree-node.drop-after,.tree-node.drop-inside{z-index:1}.tree-icon{flex:0 0 auto;width:16px;margin-right:5px;text-align:center}.tree-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.tree-node.drop-before:before,.tree-node.drop-after:after{content:\"\";position:absolute;left:var(--tree-drop-indent, var(--tree-indent, 4px));right:4px;height:2px;background-color:#d39661;pointer-events:none}.tree-node.drop-before:before{top:-1px}.tree-node.drop-after:after{bottom:-1px}.tree-node.drop-inside{outline:2px solid #d39661;outline-offset:-2px}.tree-tail{flex:1 1 auto;min-height:16px}.tree-tail.drop-tail:before{content:\"\";display:block;height:2px;margin:0 4px;background-color:#d39661}\n"] }]
+        }], propDecorators: { nodes: [{
+                type: Input
+            }], selectedNodes: [{
+                type: Input
+            }], allowDrag: [{
+                type: Input
+            }], allowDrop: [{
+                type: Input
+            }], selectedNodesChange: [{
+                type: Output
+            }], activate: [{
+                type: Output
+            }], nodesChange: [{
+                type: Output
+            }], nodeTemplate: [{
+                type: ContentChild,
+                args: ['nodeTemplate']
+            }] } });
+
 class DesignerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DesignerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: DesignerModule, declarations: [DesignerComponent,
@@ -8769,7 +9087,8 @@ class DesignerModule {
             FixturePoolCreateFromFileComponent,
             FixturePoolEditUniversesComponent,
             DropzoneComponent,
-            SortablejsDirective], imports: [i3.RouterModule, BrowserModule,
+            SortablejsDirective,
+            TreeComponent], imports: [i3.RouterModule, BrowserModule,
             BrowserAnimationsModule,
             FormsModule,
             NgxBootstrapSliderModule,
@@ -8777,7 +9096,7 @@ class DesignerModule {
             AccordionModule,
             PopoverModule,
             TypeaheadModule,
-            DropzoneModule, i3$1.ToastrModule, TreeModule], exports: [DesignerComponent] }); }
+            DropzoneModule, i3$1.ToastrModule], exports: [DesignerComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DesignerModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [RouterModule.forRoot([], {}),
             BrowserModule,
             BrowserAnimationsModule,
@@ -8790,8 +9109,7 @@ class DesignerModule {
             DropzoneModule,
             ToastrModule.forRoot({
                 newestOnTop: true,
-            }),
-            TreeModule] }); }
+            })] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DesignerModule, decorators: [{
             type: NgModule,
@@ -8837,6 +9155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         FixturePoolEditUniversesComponent,
                         DropzoneComponent,
                         SortablejsDirective,
+                        TreeComponent,
                     ],
                     exports: [DesignerComponent],
                     imports: [
@@ -8853,7 +9172,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         ToastrModule.forRoot({
                             newestOnTop: true,
                         }),
-                        TreeModule,
                     ],
                     providers: [provideHttpClient(withInterceptorsFromDi())],
                 }]