@rocketshow/designer 1.42.0 → 1.44.0

package/fesm2022/rocketshow-designer.mjs

@@ -26,15 +26,16 @@ import * as i3$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i11 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
-import * as i7 from 'ngx-sortablejs-plus';
-import { SortablejsModule } from 'ngx-sortablejs-plus';
 import * as i10 from 'ngx-bootstrap/typeahead';
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import * as i4$1 from 'ngx-bootstrap-slider';
 import { NgxBootstrapSliderModule } from 'ngx-bootstrap-slider';
-import * as i8 from '@angular/common';
+import * as i9 from '@angular/common';
+import * as i7 from 'ngx-sortablejs-plus';
+import { SortablejsModule } from 'ngx-sortablejs-plus';
 import * as i5$1 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';
 
@@ -1363,7 +1364,10 @@ class FixtureService {
         }
         else if (repeatFor[0] === 'eachPixelABC') {
             // Gets computed into an alphanumerically sorted list of all pixelKeys
-            if (profile.matrix.pixelCount.length === 3) {
+            if (profile.matrix.pixelKeys) {
+                result = result.concat(this.getAllPixelKeys(profile));
+            }
+            else if (profile.matrix.pixelCount.length === 3) {
                 for (let x = 0; x < profile.matrix.pixelCount[0]; x++) {
                     for (let y = 0; y < profile.matrix.pixelCount[1]; y++) {
                         for (let z = 0; z < profile.matrix.pixelCount[2]; z++) {
@@ -1372,9 +1376,6 @@ class FixtureService {
                     }
                 }
             }
-            else {
-                result = result.concat(this.getAllPixelKeys(profile));
-            }
             result.sort(this.alphanumericSort);
         }
         else if (repeatFor[0] === 'eachPixelGroup') {
@@ -1382,72 +1383,138 @@ class FixtureService {
             result = result.concat(this.getAllPixelGroups(profile));
         }
         else if (repeatFor[0] === 'eachPixelXYZ') {
-            for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
-                for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
-                    for (let z = 0; z < profile.matrix.pixelKeys[x][y].length; z++) {
-                        const pixel = profile.matrix.pixelKeys[x][y][z];
-                        if (pixel) {
-                            result.push(pixel);
+            if (profile.matrix.pixelKeys) {
+                for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                    for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
+                        for (let z = 0; z < profile.matrix.pixelKeys[x][y].length; z++) {
+                            const pixel = profile.matrix.pixelKeys[x][y][z];
+                            if (pixel) {
+                                result.push(pixel);
+                            }
+                        }
+                    }
+                }
+            }
+            else if (profile.matrix.pixelCount.length === 3) {
+                for (let x = 0; x < profile.matrix.pixelCount[0]; x++) {
+                    for (let y = 0; y < profile.matrix.pixelCount[1]; y++) {
+                        for (let z = 0; z < profile.matrix.pixelCount[2]; z++) {
+                            result.push('Pixel ' + (x + 1) + '-' + (y + 1) + '-' + (z + 1));
                         }
                     }
                 }
             }
         }
         else if (repeatFor[0] === 'eachPixelXZY') {
-            for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
-                for (let z = 0; z < profile.matrix.pixelKeys[x][0].length; z++) {
-                    for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
-                        const pixel = profile.matrix.pixelKeys[x][y][z];
-                        if (pixel) {
-                            result.push(pixel);
+            if (profile.matrix.pixelKeys) {
+                for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                    for (let z = 0; z < profile.matrix.pixelKeys[x][0].length; z++) {
+                        for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
+                            const pixel = profile.matrix.pixelKeys[x][y][z];
+                            if (pixel) {
+                                result.push(pixel);
+                            }
+                        }
+                    }
+                }
+            }
+            else if (profile.matrix.pixelCount.length === 3) {
+                for (let x = 0; x < profile.matrix.pixelCount[0]; x++) {
+                    for (let z = 0; z < profile.matrix.pixelCount[2]; z++) {
+                        for (let y = 0; y < profile.matrix.pixelCount[1]; y++) {
+                            result.push('Pixel ' + (x + 1) + '-' + (y + 1) + '-' + (z + 1));
                         }
                     }
                 }
             }
         }
         else if (repeatFor[0] === 'eachPixelYXZ') {
-            for (let y = 0; y < profile.matrix.pixelKeys[0].length; y++) {
-                for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
-                    for (let z = 0; z < profile.matrix.pixelKeys[x][y].length; z++) {
-                        const pixel = profile.matrix.pixelKeys[x][y][z];
-                        if (pixel) {
-                            result.push(pixel);
+            if (profile.matrix.pixelKeys) {
+                for (let y = 0; y < profile.matrix.pixelKeys[0].length; y++) {
+                    for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                        for (let z = 0; z < profile.matrix.pixelKeys[x][y].length; z++) {
+                            const pixel = profile.matrix.pixelKeys[x][y][z];
+                            if (pixel) {
+                                result.push(pixel);
+                            }
+                        }
+                    }
+                }
+            }
+            else if (profile.matrix.pixelCount.length === 3) {
+                for (let y = 0; y < profile.matrix.pixelCount[1]; y++) {
+                    for (let x = 0; x < profile.matrix.pixelCount[0]; x++) {
+                        for (let z = 0; z < profile.matrix.pixelCount[2]; z++) {
+                            result.push('Pixel ' + (x + 1) + '-' + (y + 1) + '-' + (z + 1));
                         }
                     }
                 }
             }
         }
         else if (repeatFor[0] === 'eachPixelYZX') {
-            for (let y = 0; y < profile.matrix.pixelKeys[0].length; y++) {
-                for (let z = 0; z < profile.matrix.pixelKeys[0][y].length; z++) {
-                    for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
-                        const pixel = profile.matrix.pixelKeys[x][y][z];
-                        if (pixel) {
-                            result.push(pixel);
+            if (profile.matrix.pixelKeys) {
+                for (let y = 0; y < profile.matrix.pixelKeys[0].length; y++) {
+                    for (let z = 0; z < profile.matrix.pixelKeys[0][y].length; z++) {
+                        for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                            const pixel = profile.matrix.pixelKeys[x][y][z];
+                            if (pixel) {
+                                result.push(pixel);
+                            }
+                        }
+                    }
+                }
+            }
+            else if (profile.matrix.pixelCount.length === 3) {
+                for (let y = 0; y < profile.matrix.pixelCount[1]; y++) {
+                    for (let z = 0; z < profile.matrix.pixelCount[2]; z++) {
+                        for (let x = 0; x < profile.matrix.pixelCount[0]; x++) {
+                            result.push('Pixel ' + (x + 1) + '-' + (y + 1) + '-' + (z + 1));
                         }
                     }
                 }
             }
         }
         else if (repeatFor[0] === 'eachPixelZXY') {
-            for (let z = 0; z < profile.matrix.pixelKeys[0][0].length; z++) {
-                for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
-                    for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
-                        const pixel = profile.matrix.pixelKeys[x][y][z];
-                        if (pixel) {
-                            result.push(pixel);
+            if (profile.matrix.pixelKeys) {
+                for (let z = 0; z < profile.matrix.pixelKeys[0][0].length; z++) {
+                    for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                        for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
+                            const pixel = profile.matrix.pixelKeys[x][y][z];
+                            if (pixel) {
+                                result.push(pixel);
+                            }
+                        }
+                    }
+                }
+            }
+            else if (profile.matrix.pixelCount.length === 3) {
+                for (let z = 0; z < profile.matrix.pixelCount[2]; z++) {
+                    for (let x = 0; x < profile.matrix.pixelCount[0]; x++) {
+                        for (let y = 0; y < profile.matrix.pixelCount[1]; y++) {
+                            result.push('Pixel ' + (x + 1) + '-' + (y + 1) + '-' + (z + 1));
                         }
                     }
                 }
             }
         }
         else if (repeatFor[0] === 'eachPixelZYX') {
-            for (let z = 0; z < profile.matrix.pixelKeys[0][0].length; z++) {
-                for (let y = 0; y < profile.matrix.pixelKeys[0].length; y++) {
-                    for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
-                        const pixel = profile.matrix.pixelKeys[x][y][z];
-                        if (pixel) {
-                            result.push(pixel);
+            if (profile.matrix.pixelKeys) {
+                for (let z = 0; z < profile.matrix.pixelKeys[0][0].length; z++) {
+                    for (let y = 0; y < profile.matrix.pixelKeys[0].length; y++) {
+                        for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                            const pixel = profile.matrix.pixelKeys[x][y][z];
+                            if (pixel) {
+                                result.push(pixel);
+                            }
+                        }
+                    }
+                }
+            }
+            else if (profile.matrix.pixelCount.length === 3) {
+                for (let z = 0; z < profile.matrix.pixelCount[2]; z++) {
+                    for (let y = 0; y < profile.matrix.pixelCount[1]; y++) {
+                        for (let x = 0; x < profile.matrix.pixelCount[0]; x++) {
+                            result.push('Pixel ' + (x + 1) + '-' + (y + 1) + '-' + (z + 1));
                         }
                     }
                 }
@@ -1831,7 +1898,11 @@ class ConfigService {
     }], () => [], null); })();
 
 class EffectService {
-    constructor() { }
+    constructor() {
+        // The effects are currently being edited
+        this.effectsOpen = false;
+        this.effectsOpenChanged = new Subject();
+    }
     static { this.ɵfac = function EffectService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EffectService)(); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: EffectService, factory: EffectService.ɵfac, providedIn: 'root' }); }
 }
@@ -1954,13 +2025,24 @@ class PresetService {
         }
         this.selectedPreset.fixtures = [];
     }
+    presetFixtueEquals(fixture1, fixture2) {
+        return (fixture1.fixtureUuid === fixture2.fixtureUuid &&
+            ((!fixture2.pixelKey && !fixture1.pixelKey) || fixture2.pixelKey === fixture1.pixelKey));
+    }
     removeDeletedFixtures() {
         // after changing the configuration in the fixture pool, we might need to
         // delete some fixtures
         for (const preset of this.projectService.project.presets) {
             for (let i = preset.fixtures.length - 1; i >= 0; i--) {
-                const presetFixture = this.fixtureService.getFixtureByUuid(preset.fixtures[i].fixtureUuid);
-                if (!presetFixture) {
+                const presetFixture = preset.fixtures[i];
+                let found = false;
+                for (let projectFixture of this.projectService.project.presetFixtures) {
+                    if (this.presetFixtueEquals(presetFixture, projectFixture)) {
+                        found = true;
+                        break;
+                    }
+                }
+                if (!found) {
                     preset.fixtures.splice(i, 1);
                 }
             }
@@ -2191,8 +2273,7 @@ class PresetService {
             // loop over the project fixtures to keep the order
             for (let projectFixture of this.projectService.project.presetFixtures) {
                 for (const presetFixture of this.selectedPreset.fixtures) {
-                    if (projectFixture.fixtureUuid === presetFixture.fixtureUuid &&
-                        ((!projectFixture.pixelKey && !presetFixture.pixelKey) || projectFixture.pixelKey === presetFixture.pixelKey)) {
+                    if (this.presetFixtueEquals(presetFixture, projectFixture)) {
                         const fixture = this.fixtureService.getCachedFixtureByUuid(presetFixture.fixtureUuid, presetFixture.pixelKey);
                         if (fixture.profile.uuid === profile.uuid) {
                             const exists = modeAndPixelKeys.some((item) => (item.mode === fixture.mode && !item.pixelKey && !fixture.pixelKey) || item.pixelKey === fixture.pixelKey);
@@ -2423,12 +2504,13 @@ class SceneService {
     }], () => [{ type: UuidService }, { type: EffectService }, { type: PresetService }, { type: ProjectService }], null); })();
 
 class TimelineService {
-    constructor(sceneService, presetService, projectService, http, configService) {
+    constructor(sceneService, presetService, projectService, http, configService, ngZone) {
         this.sceneService = sceneService;
         this.presetService = presetService;
         this.projectService = projectService;
         this.http = http;
         this.configService = configService;
+        this.ngZone = ngZone;
         this.playState = 'paused';
         this.zoom = 0;
         this.timelineClicking = false;
@@ -2519,9 +2601,12 @@ class TimelineService {
     }
     startTimeUpdater() {
         this.stopTimeUpdater();
-        const timeUpdater = timer(0, 40);
-        this.timeUpdateSubscription = timeUpdater.subscribe(() => {
-            this.updateCurrentTime();
+        // Avoid triggering change detection with each animation frame -> run outside zone
+        this.ngZone.runOutsideAngular(() => {
+            const timeUpdater = timer(0, 40);
+            this.timeUpdateSubscription = timeUpdater.subscribe(() => {
+                this.updateCurrentTime();
+            });
         });
     }
     stopTimeUpdater() {
@@ -3116,7 +3201,7 @@ class TimelineService {
         this.waveSurferReady.next();
         this.applyZoom(0);
     }
-    static { this.ɵfac = function TimelineService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TimelineService)(i0.ɵɵinject(SceneService), i0.ɵɵinject(PresetService), i0.ɵɵinject(ProjectService), i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(ConfigService)); }; }
+    static { this.ɵfac = function TimelineService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TimelineService)(i0.ɵɵinject(SceneService), i0.ɵɵinject(PresetService), i0.ɵɵinject(ProjectService), i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(ConfigService), i0.ɵɵinject(i0.NgZone)); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TimelineService, factory: TimelineService.ɵfac, providedIn: 'root' }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimelineService, [{
@@ -3124,7 +3209,7 @@ class TimelineService {
         args: [{
                 providedIn: 'root',
             }]
-    }], () => [{ type: SceneService }, { type: PresetService }, { type: ProjectService }, { type: i1.HttpClient }, { type: ConfigService }], null); })();
+    }], () => [{ type: SceneService }, { type: PresetService }, { type: ProjectService }, { type: i1.HttpClient }, { type: ConfigService }, { type: i0.NgZone }], null); })();
 
 class PreviewService {
     constructor(presetService, fixtureService, sceneService, timelineService, projectService) {
@@ -4004,15 +4089,16 @@ class MovingHead3d extends Fixture3d {
     }
 }
 
-const _c0$6 = ["canvas"];
+const _c0$7 = ["canvas"];
 class PreviewComponent {
-    constructor(fixtureService, previewMeshService, animationService, previewService, timelineService, projectService) {
+    constructor(fixtureService, previewMeshService, animationService, previewService, timelineService, projectService, ngZone) {
         this.fixtureService = fixtureService;
         this.previewMeshService = previewMeshService;
         this.animationService = animationService;
         this.previewService = previewService;
         this.timelineService = timelineService;
         this.projectService = projectService;
+        this.ngZone = ngZone;
         this.scene = new THREE.Scene();
         this.fixtures3d = [];
         this.previewService.doUpdateFixtureSetup.subscribe(() => {
@@ -4174,11 +4260,14 @@ class PreviewComponent {
         this.setupControls();
         this.setupScene();
         this.onResize();
-        this.animate(null);
+        // Avoid triggering change detection with each animation frame -> run outside zone
+        this.ngZone.runOutsideAngular(() => {
+            this.animate(null);
+        });
     }
-    static { this.ɵfac = function PreviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PreviewComponent)(i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(PreviewMeshService), i0.ɵɵdirectiveInject(AnimationService), i0.ɵɵdirectiveInject(PreviewService), i0.ɵɵdirectiveInject(TimelineService), i0.ɵɵdirectiveInject(ProjectService)); }; }
+    static { this.ɵfac = function PreviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PreviewComponent)(i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(PreviewMeshService), i0.ɵɵdirectiveInject(AnimationService), i0.ɵɵdirectiveInject(PreviewService), i0.ɵɵdirectiveInject(TimelineService), i0.ɵɵdirectiveInject(ProjectService), i0.ɵɵdirectiveInject(i0.NgZone)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PreviewComponent, selectors: [["lib-app-preview"]], viewQuery: function PreviewComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$6, 5);
+            i0.ɵɵviewQuery(_c0$7, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.canvasRef = _t.first);
@@ -4191,7 +4280,7 @@ class PreviewComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PreviewComponent, [{
         type: Component,
         args: [{ selector: 'lib-app-preview', standalone: false, template: "<div class=\"h-100\" #canvas style=\"overflow: hidden\"></div>\n" }]
-    }], () => [{ type: FixtureService }, { type: PreviewMeshService }, { type: AnimationService }, { type: PreviewService }, { type: TimelineService }, { type: ProjectService }], { canvasRef: [{
+    }], () => [{ type: FixtureService }, { type: PreviewMeshService }, { type: AnimationService }, { type: PreviewService }, { type: TimelineService }, { type: ProjectService }, { type: i0.NgZone }], { canvasRef: [{
             type: ViewChild,
             args: ['canvas']
         }], onResize: [{
@@ -5252,49 +5341,46 @@ function FixturePoolComponent_For_49_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 52);
     i0.ɵɵlistener("click", function FixturePoolComponent_For_49_Template_div_click_0_listener() { const fixture_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectFixture(fixture_r6)); });
-    i0.ɵɵelementStart(1, "div", 5)(2, "div", 53);
-    i0.ɵɵelement(3, "i", 54);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 55)(5, "p", 46);
-    i0.ɵɵelement(6, "span");
-    i0.ɵɵtext(7);
+    i0.ɵɵelementStart(1, "div", 5)(2, "div", 53)(3, "p", 46);
+    i0.ɵɵelement(4, "span");
+    i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 56)(9, "a", 48);
-    i0.ɵɵlistener("click", function FixturePoolComponent_For_49_Template_a_click_9_listener() { const fixture_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.removeFixture(fixture_r6); return i0.ɵɵresetView(false); });
-    i0.ɵɵelement(10, "i", 57);
+    i0.ɵɵelementStart(6, "div", 54)(7, "a", 48);
+    i0.ɵɵlistener("click", function FixturePoolComponent_For_49_Template_a_click_7_listener() { const fixture_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.removeFixture(fixture_r6); return i0.ɵɵresetView(false); });
+    i0.ɵɵelement(8, "i", 55);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const fixture_r6 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("active", fixture_r6 == ctx_r2.selectedFixture);
-    i0.ɵɵadvance(6);
+    i0.ɵɵadvance(4);
     i0.ɵɵclassMap(i0.ɵɵinterpolate1("icon-", ctx_r2.fixtureService.getFixtureIconClass(ctx_r2.fixtureService.getProfileByUuid(fixture_r6.profileUuid)), " mr-1"));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", fixture_r6.name, " ");
 } }
 function FixturePoolComponent_For_67_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 58);
+    i0.ɵɵelementStart(0, "div", 56);
     i0.ɵɵlistener("mousedown", function FixturePoolComponent_For_67_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.channelMouseDown($event)); })("mouseover", function FixturePoolComponent_For_67_Template_div_mouseover_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.channelMouseOver($event)); });
-    i0.ɵɵelementStart(1, "div", 59)(2, "div", 60)(3, "small");
+    i0.ɵɵelementStart(1, "div", 57)(2, "div", 58)(3, "small");
     i0.ɵɵtext(4, "\u00A0");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ɵ$index_161_r8 = ctx.$index;
+    const ɵ$index_157_r8 = ctx.$index;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("dmx-channel-occupied", ctx_r2.channelOccupied(ɵ$index_161_r8))("dmx-channel-occupied-start", ctx_r2.channelOccupiedStart(ɵ$index_161_r8))("dmx-channel-occupied-end", ctx_r2.channelOccupiedEnd(ɵ$index_161_r8))("dmx-channel-selected", ctx_r2.channelSelected(ɵ$index_161_r8))("dmx-channel-overlapped", ctx_r2.channelOverlapped(ɵ$index_161_r8));
-    i0.ɵɵproperty("popover", i0.ɵɵinterpolate(ɵ$index_161_r8 + 1));
-    i0.ɵɵattribute("data-index", ɵ$index_161_r8);
+    i0.ɵɵclassProp("dmx-channel-occupied", ctx_r2.channelOccupied(ɵ$index_157_r8))("dmx-channel-occupied-start", ctx_r2.channelOccupiedStart(ɵ$index_157_r8))("dmx-channel-occupied-end", ctx_r2.channelOccupiedEnd(ɵ$index_157_r8))("dmx-channel-selected", ctx_r2.channelSelected(ɵ$index_157_r8))("dmx-channel-overlapped", ctx_r2.channelOverlapped(ɵ$index_157_r8));
+    i0.ɵɵproperty("popover", i0.ɵɵinterpolate(ɵ$index_157_r8 + 1));
+    i0.ɵɵattribute("data-index", ɵ$index_157_r8);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("dmx-channel-text-visible", ctx_r2.showChannelNumbers);
-    i0.ɵɵattribute("data-index", ɵ$index_161_r8);
+    i0.ɵɵattribute("data-index", ɵ$index_157_r8);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("data-index", ɵ$index_161_r8);
+    i0.ɵɵattribute("data-index", ɵ$index_157_r8);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("data-index", ɵ$index_161_r8);
+    i0.ɵɵattribute("data-index", ɵ$index_157_r8);
 } }
 function FixturePoolComponent_Conditional_69_For_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 66);
+    i0.ɵɵelementStart(0, "option", 64);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "translate");
     i0.ɵɵelementEnd();
@@ -5306,43 +5392,43 @@ function FixturePoolComponent_Conditional_69_For_14_Template(rf, ctx) { if (rf &
     i0.ɵɵtextInterpolate3(" ", mode_r10.name, " - ", ctx_r2.fixtureService.getModeChannelCount(ctx_r2.selectedFixtureProfile, mode_r10), " ", i0.ɵɵpipeBind1(2, 4, "designer.fixture-pool.channels"), " ");
 } }
 function FixturePoolComponent_Conditional_69_For_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 66);
+    i0.ɵɵelementStart(0, "option", 64);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ɵ$index_211_r11 = ctx.$index;
-    i0.ɵɵproperty("ngValue", ɵ$index_211_r11);
+    const ɵ$index_207_r11 = ctx.$index;
+    i0.ɵɵproperty("ngValue", ɵ$index_207_r11);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ɵ$index_211_r11 + 1, " ");
+    i0.ɵɵtextInterpolate1(" ", ɵ$index_207_r11 + 1, " ");
 } }
 function FixturePoolComponent_Conditional_69_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "div", 20)(2, "label", 61);
+    i0.ɵɵelementStart(0, "div")(1, "div", 20)(2, "label", 59);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "translate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 62)(6, "input", 63);
+    i0.ɵɵelementStart(5, "div", 60)(6, "input", 61);
     i0.ɵɵtwoWayListener("ngModelChange", function FixturePoolComponent_Conditional_69_Template_input_ngModelChange_6_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.selectedFixture.name, $event) || (ctx_r2.selectedFixture.name = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(7, "div", 20)(8, "label", 64);
+    i0.ɵɵelementStart(7, "div", 20)(8, "label", 62);
     i0.ɵɵtext(9);
     i0.ɵɵpipe(10, "translate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 62)(12, "select", 65);
+    i0.ɵɵelementStart(11, "div", 60)(12, "select", 63);
     i0.ɵɵlistener("ngModelChange", function FixturePoolComponent_Conditional_69_Template_select_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectedFixture.modeShortName = $event); });
-    i0.ɵɵrepeaterCreate(13, FixturePoolComponent_Conditional_69_For_14_Template, 3, 6, "option", 66, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(13, FixturePoolComponent_Conditional_69_For_14_Template, 3, 6, "option", 64, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(15, "div", 20)(16, "label", 64);
+    i0.ɵɵelementStart(15, "div", 20)(16, "label", 62);
     i0.ɵɵtext(17);
     i0.ɵɵpipe(18, "translate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 62)(20, "select", 65);
+    i0.ɵɵelementStart(19, "div", 60)(20, "select", 63);
     i0.ɵɵlistener("ngModelChange", function FixturePoolComponent_Conditional_69_Template_select_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectedFixture.dmxFirstChannel = $event); });
-    i0.ɵɵrepeaterCreate(21, FixturePoolComponent_Conditional_69_For_22_Template, 2, 2, "option", 66, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(21, FixturePoolComponent_Conditional_69_For_22_Template, 2, 2, "option", 64, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(23, "div", 20);
-    i0.ɵɵelement(24, "label", 64);
-    i0.ɵɵelementStart(25, "div", 62)(26, "button", 42);
+    i0.ɵɵelement(24, "label", 62);
+    i0.ɵɵelementStart(25, "div", 60)(26, "button", 42);
     i0.ɵɵlistener("click", function FixturePoolComponent_Conditional_69_Template_button_click_26_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.addCopy(ctx_r2.selectedFixture)); });
     i0.ɵɵtext(27);
     i0.ɵɵpipe(28, "translate");
@@ -5384,7 +5470,7 @@ class FixturePoolComponent {
         this.dmxChannels = [];
         this.showChannelNumbers = false;
         this.onClose = new Subject();
-        this.fixturePool = [...this.projectService.project.fixtures];
+        this.fixturePool = structuredClone(this.projectService.project.fixtures);
         if (this.fixturePool.length > 0) {
             this.selectFixture(this.fixturePool[0]);
         }
@@ -5604,12 +5690,11 @@ class FixturePoolComponent {
                 return;
             }
         }
-        this.projectService.project.fixtures = this.fixturePool;
-        // remove deleted fixtures from preset fixtures
+        // remove deleted fixtures/pixel keys from preset fixtures
         for (let i = this.projectService.project.presetFixtures.length - 1; i >= 0; i--) {
             let found = false;
             const presetFixture = this.projectService.project.presetFixtures[i];
-            for (let fixture of this.projectService.project.fixtures) {
+            for (let fixture of this.fixturePool) {
                 if (presetFixture.fixtureUuid === fixture.uuid) {
                     found = true;
                     break;
@@ -5619,8 +5704,23 @@ class FixturePoolComponent {
                 this.projectService.project.presetFixtures.splice(i, 1);
             }
         }
-        // add the new fixtures to the preset fixtures
-        for (let fixture of this.projectService.project.fixtures) {
+        // If a mode is changed, we need to re-add the fixture to make sure, all pixel keys
+        // are removed/added
+        for (let projectFixture of this.projectService.project.fixtures) {
+            for (let poolFixture of this.fixturePool) {
+                if (poolFixture.profileUuid === projectFixture.profileUuid && poolFixture.modeShortName != projectFixture.modeShortName) {
+                    // the mode has changed -> remove it from the presetfixtures
+                    for (let i = this.projectService.project.presetFixtures.length - 1; i >= 0; i--) {
+                        const presetFixture = this.projectService.project.presetFixtures[i];
+                        if (presetFixture.fixtureUuid === poolFixture.uuid) {
+                            this.projectService.project.presetFixtures.splice(i, 1);
+                        }
+                    }
+                }
+            }
+        }
+        // add the new fixtures/pixel keys to the preset fixtures
+        for (let fixture of this.fixturePool) {
             let found = false;
             for (let presetFixture of this.projectService.project.presetFixtures) {
                 if (presetFixture.fixtureUuid === fixture.uuid) {
@@ -5643,6 +5743,7 @@ class FixturePoolComponent {
                 }
             }
         }
+        this.projectService.project.fixtures = this.fixturePool;
         this.fixtureService.updateCachedFixtures();
         this.presetService.removeDeletedFixtures();
         this.previewService.updateFixtureSetup();
@@ -5693,7 +5794,7 @@ class FixturePoolComponent {
     static { this.ɵfac = function FixturePoolComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FixturePoolComponent)(i0.ɵɵdirectiveInject(i1$1.BsModalRef), i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(UuidService), i0.ɵɵdirectiveInject(ProjectService), i0.ɵɵdirectiveInject(PreviewService), i0.ɵɵdirectiveInject(i4.TranslateService), i0.ɵɵdirectiveInject(i3$1.ToastrService), i0.ɵɵdirectiveInject(PresetService), i0.ɵɵdirectiveInject(ConfigService), i0.ɵɵdirectiveInject(i1$1.BsModalService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FixturePoolComponent, selectors: [["lib-app-fixture-pool"]], hostBindings: function FixturePoolComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("mouseup", function FixturePoolComponent_mouseup_HostBindingHandler($event) { return ctx.mouseUp($event); }, i0.ɵɵresolveWindow)("keydown.enter", function FixturePoolComponent_keydown_enter_HostBindingHandler($event) { return ctx.handleKeyboardEvent($event); }, i0.ɵɵresolveDocument);
-        } }, standalone: false, decls: 77, vars: 35, consts: [[1, "modal-header"], [1, "modal-title", "pull-left"], ["type", "button", "aria-label", "Close", 1, "close", "pull-right", 3, "click"], ["aria-hidden", "true"], [1, "modal-body"], [1, "row"], [1, "col-6"], ["type", "text", "id", "searchSet", 1, "form-control", "input-block", "mb-3", 3, "input", "placeholder"], [1, "card", "border-secondary", "w-100", 2, "height", "200px"], [1, "card-body", "p-0", "w-100"], [1, "list-group", "list-group-flush", "w-100"], [1, "list-group-item", "flex-column", "align-items-start", "d-flex"], [1, "list-group-item"], [1, "d-inline-block", "mb-0", "mt-2"], ["href", "https://open-fixture-library.org/", "target", "_blank"], ["href", "https://open-fixture-library.org/fixture-editor", "target", "_blank", "role", "button", 1, "mt-2", "btn", "btn-secondary", "btn-sm", "float-right"], ["aria-hidden", "true", 1, "fa", "fa-file-o"], ["type", "button", "role", "button", 1, "mr-2", "mt-2", "btn", "btn-secondary", "btn-sm", "float-right", 3, "disabled"], ["type", "button", "role", "button", 1, "btn", "btn-secondary", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-plus"], [1, "form-group", "row"], [1, "col-lg-4", "col-form-label"], [1, "col-lg-8"], [1, "custom-select"], [1, "card", "border-secondary", 2, "height", "235px"], [1, "card-body", "p-0"], [1, "list-group", "list-group-flush", 3, "sortablejs"], [1, "list-group-item", 2, "cursor", "pointer", 3, "active"], [1, "row", "mt-3"], [1, "col"], ["id", "myTab", "role", "tablist", 1, "nav", "nav-tabs", "mb-4"], [1, "nav-item"], ["id", "sets-tab", "data-toggle", "tab", "href", "#dmx", "role", "tab", 1, "nav-link", "active"], ["aria-hidden", "true", 1, "icon-ola"], ["id", "compositions-tab", "data-toggle", "tab", "href", "#settings", "role", "tab", 1, "nav-link"], ["aria-hidden", "true", 1, "fa", "fa-cog"], ["id", "myTabContent", 1, "tab-content"], ["id", "dmx", "role", "tabpanel", 1, "tab-pane", "show", "active"], ["placement", "top", "triggers", "mouseenter:mouseleave", 1, "dmx-channel", 3, "dmx-channel-occupied", "dmx-channel-occupied-start", "dmx-channel-occupied-end", "dmx-channel-selected", "dmx-channel-overlapped", "popover"], ["id", "settings", "role", "tabpanel", 1, "tab-pane"], [1, "modal-footer"], ["href", "#", "role", "button", 1, "mr-3", "my-auto", 3, "click"], ["type", "button", 1, "btn", "btn-primary", 3, "click"], [1, "mb-0", "mx-auto"], [1, "fa", "fa-spinner", "fa-pulse", "fa-fw"], [1, "col-10", "col-auto", "my-auto", "pl-2"], [1, "mb-0"], [1, "col-2", "my-auto"], ["href", "#", "role", "button", 1, "btn", "btn-primary", "btn-sm", "float-right", 3, "click"], ["type", "button", "role", "button", 1, "mr-2", "mt-2", "btn", "btn-secondary", "btn-sm", "float-right", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa", "fa-spinner", "fa-pulse", "fa-fw"], ["aria-hidden", "true", 1, "fa", "fa-download", "fa-fw"], [1, "list-group-item", 2, "cursor", "pointer", 3, "click"], [1, "col-auto", "list-sort-handle", "my-auto", 2, "cursor", "move", "cursor", "-webkit-grabbing"], ["aria-hidden", "true", 1, "fa", "fa-bars"], [1, "col-auto", "flex-grow", "pl-0", "my-auto"], [1, "col-auto", "my-auto"], ["aria-hidden", "true", 1, "fa", "fa-minus"], ["placement", "top", "triggers", "mouseenter:mouseleave", 1, "dmx-channel", 3, "mousedown", "mouseover", "popover"], [1, "d-flex", "w-100", "dmx-channel-text"], [1, "m-auto", 2, "font-size", "11px"], ["for", "fixtureName", 1, "col-lg-3", "col-form-label"], [1, "col-lg-9"], ["type", "text", "maxlength", "200", "id", "fixtureName", 1, "form-control", 3, "ngModelChange", "ngModel"], [1, "col-lg-3", "col-form-label"], [1, "custom-select", 3, "ngModelChange", "ngModel"], [3, "ngValue"]], template: function FixturePoolComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, decls: 77, vars: 34, consts: [[1, "modal-header"], [1, "modal-title", "pull-left"], ["type", "button", "aria-label", "Close", 1, "close", "pull-right", 3, "click"], ["aria-hidden", "true"], [1, "modal-body"], [1, "row"], [1, "col-6"], ["type", "text", "id", "searchSet", 1, "form-control", "input-block", "mb-3", 3, "input", "placeholder"], [1, "card", "border-secondary", "w-100", 2, "height", "200px"], [1, "card-body", "p-0", "w-100"], [1, "list-group", "list-group-flush", "w-100"], [1, "list-group-item", "flex-column", "align-items-start", "d-flex"], [1, "list-group-item"], [1, "d-inline-block", "mb-0", "mt-2"], ["href", "https://open-fixture-library.org/", "target", "_blank"], ["href", "https://open-fixture-library.org/fixture-editor", "target", "_blank", "role", "button", 1, "mt-2", "btn", "btn-secondary", "btn-sm", "float-right"], ["aria-hidden", "true", 1, "fa", "fa-file-o"], ["type", "button", "role", "button", 1, "mr-2", "mt-2", "btn", "btn-secondary", "btn-sm", "float-right", 3, "disabled"], ["type", "button", "role", "button", 1, "btn", "btn-secondary", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-plus"], [1, "form-group", "row"], [1, "col-lg-4", "col-form-label"], [1, "col-lg-8"], [1, "custom-select"], [1, "card", "border-secondary", 2, "height", "235px"], [1, "card-body", "p-0"], [1, "list-group", "list-group-flush"], [1, "list-group-item", 2, "cursor", "pointer", 3, "active"], [1, "row", "mt-3"], [1, "col"], ["id", "myTab", "role", "tablist", 1, "nav", "nav-tabs", "mb-4"], [1, "nav-item"], ["id", "sets-tab", "data-toggle", "tab", "href", "#dmx", "role", "tab", 1, "nav-link", "active"], ["aria-hidden", "true", 1, "icon-ola"], ["id", "compositions-tab", "data-toggle", "tab", "href", "#settings", "role", "tab", 1, "nav-link"], ["aria-hidden", "true", 1, "fa", "fa-cog"], ["id", "myTabContent", 1, "tab-content"], ["id", "dmx", "role", "tabpanel", 1, "tab-pane", "show", "active"], ["placement", "top", "triggers", "mouseenter:mouseleave", 1, "dmx-channel", 3, "dmx-channel-occupied", "dmx-channel-occupied-start", "dmx-channel-occupied-end", "dmx-channel-selected", "dmx-channel-overlapped", "popover"], ["id", "settings", "role", "tabpanel", 1, "tab-pane"], [1, "modal-footer"], ["href", "#", "role", "button", 1, "mr-3", "my-auto", 3, "click"], ["type", "button", 1, "btn", "btn-primary", 3, "click"], [1, "mb-0", "mx-auto"], [1, "fa", "fa-spinner", "fa-pulse", "fa-fw"], [1, "col-10", "col-auto", "my-auto", "pl-2"], [1, "mb-0"], [1, "col-2", "my-auto"], ["href", "#", "role", "button", 1, "btn", "btn-primary", "btn-sm", "float-right", 3, "click"], ["type", "button", "role", "button", 1, "mr-2", "mt-2", "btn", "btn-secondary", "btn-sm", "float-right", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa", "fa-spinner", "fa-pulse", "fa-fw"], ["aria-hidden", "true", 1, "fa", "fa-download", "fa-fw"], [1, "list-group-item", 2, "cursor", "pointer", 3, "click"], [1, "col-auto", "flex-grow", "pl-0", "my-auto"], [1, "col-auto", "my-auto"], ["aria-hidden", "true", 1, "fa", "fa-minus"], ["placement", "top", "triggers", "mouseenter:mouseleave", 1, "dmx-channel", 3, "mousedown", "mouseover", "popover"], [1, "d-flex", "w-100", "dmx-channel-text"], [1, "m-auto", 2, "font-size", "11px"], ["for", "fixtureName", 1, "col-lg-3", "col-form-label"], [1, "col-lg-9"], ["type", "text", "maxlength", "200", "id", "fixtureName", 1, "form-control", 3, "ngModelChange", "ngModel"], [1, "col-lg-3", "col-form-label"], [1, "custom-select", 3, "ngModelChange", "ngModel"], [3, "ngValue"]], template: function FixturePoolComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "h4", 1);
             i0.ɵɵtext(2);
             i0.ɵɵpipe(3, "translate");
@@ -5738,7 +5839,7 @@ class FixturePoolComponent {
             i0.ɵɵtext(44, "Universe 1");
             i0.ɵɵelementEnd()()()()()();
             i0.ɵɵelementStart(45, "div", 24)(46, "div", 25)(47, "div", 26);
-            i0.ɵɵrepeaterCreate(48, FixturePoolComponent_For_49_Template, 11, 6, "div", 27, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵrepeaterCreate(48, FixturePoolComponent_For_49_Template, 9, 6, "div", 27, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd()()()()();
             i0.ɵɵelementStart(50, "div", 28)(51, "div", 29)(52, "ul", 30)(53, "li", 31)(54, "a", 32);
             i0.ɵɵelement(55, "i", 33);
@@ -5751,7 +5852,7 @@ class FixturePoolComponent {
             i0.ɵɵpipe(62, "translate");
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(63, "div", 36)(64, "div", 37)(65, "div");
-            i0.ɵɵrepeaterCreate(66, FixturePoolComponent_For_67_Template, 5, 18, "div", 38, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵrepeaterCreate(66, FixturePoolComponent_For_67_Template, 5, 18, "div", 38, i0.ɵɵrepeaterTrackByIndex);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(68, "div", 39);
             i0.ɵɵconditionalCreate(69, FixturePoolComponent_Conditional_69_Template, 29, 15, "div");
@@ -5768,42 +5869,40 @@ class FixturePoolComponent {
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 14, "designer.fixture-pool.title"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 13, "designer.fixture-pool.title"));
             i0.ɵɵadvance(8);
-            i0.ɵɵproperty("placeholder", i0.ɵɵinterpolate(i0.ɵɵpipeBind1(11, 16, "designer.fixture-pool.search-profiles")));
+            i0.ɵɵproperty("placeholder", i0.ɵɵinterpolate(i0.ɵɵpipeBind1(11, 15, "designer.fixture-pool.search-profiles")));
             i0.ɵɵadvance(5);
             i0.ɵɵconditional(ctx.loadingProfiles ? 15 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵrepeater(i0.ɵɵpipeBind2(18, 18, ctx.filteredProfiles, "uuid"));
+            i0.ɵɵrepeater(i0.ɵɵpipeBind2(18, 17, ctx.filteredProfiles, "uuid"));
             i0.ɵɵadvance(10);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(27, 21, "designer.fixture-pool.add-profile"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(27, 20, "designer.fixture-pool.add-profile"), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.configService.localProfiles ? 28 : -1);
             i0.ɵɵadvance(6);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(35, 23, "designer.fixture-pool.create-fixture-from-profile-file"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(35, 22, "designer.fixture-pool.create-fixture-from-profile-file"), " ");
             i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(40, 25, "designer.fixture-pool.universe"));
-            i0.ɵɵadvance(8);
-            i0.ɵɵproperty("sortablejs", ctx.fixturePool);
-            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(40, 24, "designer.fixture-pool.universe"));
+            i0.ɵɵadvance(9);
             i0.ɵɵrepeater(ctx.fixturePool);
             i0.ɵɵadvance(8);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(57, 27, "designer.fixture-pool.dmx"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(57, 26, "designer.fixture-pool.dmx"), " ");
             i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(62, 29, "designer.fixture-pool.settings"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(62, 28, "designer.fixture-pool.settings"), " ");
             i0.ɵɵadvance(5);
             i0.ɵɵrepeater(ctx.dmxChannels);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.selectedFixture && ctx.selectedFixtureProfile ? 69 : -1);
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(73, 31, "designer.misc.cancel"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(73, 30, "designer.misc.cancel"), " ");
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(76, 33, "designer.misc.ok"));
-        } }, dependencies: [i3$2.NgSelectOption, i3$2.ɵNgSelectMultipleOption, i3$2.DefaultValueAccessor, i3$2.SelectControlValueAccessor, i3$2.NgControlStatus, i3$2.MaxLengthValidator, i3$2.NgModel, i11.PopoverDirective, i7.SortablejsDirective, i4.TranslatePipe, ArraySortPipe], styles: [".list-group-item[_ngcontent-%COMP%]{padding:.3rem 1.25rem}.dmx-channel[_ngcontent-%COMP%]{display:flex;float:left;width:28px;border:1px solid white;margin-left:-1px;margin-bottom:-1px;padding-bottom:2px}.dmx-channel-occupied[_ngcontent-%COMP%]{background-color:#63462e;border-left:none;border-right:none;cursor:move}.dmx-channel-occupied-start[_ngcontent-%COMP%]{border-left:1px solid white;border-top-left-radius:8px;border-bottom-left-radius:8px}.dmx-channel-occupied-end[_ngcontent-%COMP%]{border-right:1px solid white;border-top-right-radius:8px;border-bottom-right-radius:8px}.dmx-channel-selected[_ngcontent-%COMP%]{background-color:#fd7e14}.dmx-channel-overlapped[_ngcontent-%COMP%]{background-color:red;border:1px solid red;cursor:move}.card[_ngcontent-%COMP%]{overflow:auto}"] }); }
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(76, 32, "designer.misc.ok"));
+        } }, dependencies: [i3$2.NgSelectOption, i3$2.ɵNgSelectMultipleOption, i3$2.DefaultValueAccessor, i3$2.SelectControlValueAccessor, i3$2.NgControlStatus, i3$2.MaxLengthValidator, i3$2.NgModel, i11.PopoverDirective, i4.TranslatePipe, ArraySortPipe], styles: [".list-group-item[_ngcontent-%COMP%]{padding:.3rem 1.25rem}.dmx-channel[_ngcontent-%COMP%]{display:flex;float:left;width:28px;border:1px solid white;margin-left:-1px;margin-bottom:-1px;padding-bottom:2px}.dmx-channel-occupied[_ngcontent-%COMP%]{background-color:#63462e;border-left:none;border-right:none;cursor:move}.dmx-channel-occupied-start[_ngcontent-%COMP%]{border-left:1px solid white;border-top-left-radius:8px;border-bottom-left-radius:8px}.dmx-channel-occupied-end[_ngcontent-%COMP%]{border-right:1px solid white;border-top-right-radius:8px;border-bottom-right-radius:8px}.dmx-channel-selected[_ngcontent-%COMP%]{background-color:#fd7e14}.dmx-channel-overlapped[_ngcontent-%COMP%]{background-color:red;border:1px solid red;cursor:move}.card[_ngcontent-%COMP%]{overflow:auto}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixturePoolComponent, [{
         type: Component,
-        args: [{ selector: 'lib-app-fixture-pool', standalone: false, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.fixture-pool.title' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"cancel(); (false)\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <div class=\"row\">\n    <div class=\"col-6\">\n      <!-- Search for profiles -->\n      <input\n        type=\"text\"\n        class=\"form-control input-block mb-3\"\n        id=\"searchSet\"\n        placeholder=\"{{ 'designer.fixture-pool.search-profiles' | translate }}\"\n        (input)=\"searchExpression = $event.target.value; filterProfiles()\"\n      />\n\n      <!-- Profiles -->\n      <div class=\"card border-secondary w-100\" style=\"height: 200px\">\n        <div class=\"card-body p-0 w-100\">\n          <div class=\"list-group list-group-flush w-100\">\n            @if (loadingProfiles) {\n            <a class=\"list-group-item flex-column align-items-start d-flex\">\n              <p class=\"mb-0 mx-auto\">\n                <i class=\"fa fa-spinner fa-pulse fa-fw\"></i>\n              </p>\n            </a>\n            } @for (profile of filteredProfiles | sort : 'uuid'; track profile) {\n            <div class=\"list-group-item\">\n              <div class=\"row\">\n                <div class=\"col-10 col-auto my-auto pl-2\">\n                  <p class=\"mb-0\">\n                    <span class=\"icon-{{ fixtureService.getFixtureIconClass(profile) }} mr-1\"></span> {{ profile.manufacturerName }} -\n                    {{ profile.name }}\n                  </p>\n                </div>\n                <div class=\"col-2 my-auto\">\n                  <a class=\"btn btn-primary btn-sm float-right\" href=\"#\" role=\"button\" (click)=\"addFixture(profile); (false)\">\n                    <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n      <div>\n        <p class=\"d-inline-block mb-0 mt-2\">\n          Powered by the <a href=\"https://open-fixture-library.org/\" target=\"_blank\">Open Fixture Library</a>\n        </p>\n        <a\n          class=\"mt-2 btn btn-secondary btn-sm float-right\"\n          href=\"https://open-fixture-library.org/fixture-editor\"\n          target=\"_blank\"\n          role=\"button\"\n        >\n          <i class=\"fa fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.add-profile' | translate }}\n        </a>\n        @if (configService.localProfiles) {\n        <button\n          type=\"button\"\n          class=\"mr-2 mt-2 btn btn-secondary btn-sm float-right\"\n          (click)=\"updateProfiles(); (false)\"\n          [disabled]=\"updatingProfiles\"\n          role=\"button\"\n        >\n          @if (updatingProfiles) {\n          <i class=\"fa fa-spinner fa-pulse fa-fw\" aria-hidden=\"true\"></i>\n          } @if (!updatingProfiles) {\n          <i class=\"fa fa-download fa-fw\" aria-hidden=\"true\"></i>\n          }\n          {{ 'designer.fixture-pool.update-profiles' | translate }}\n        </button>\n        }\n      </div>\n    </div>\n    <div class=\"col-6\">\n      <div class=\"row\">\n        <!-- Add fixture from local profile -->\n        <div class=\"col-6\">\n          <button type=\"button\" class=\"btn btn-secondary\" (click)=\"createFixtureFromProfileFile()\" role=\"button\">\n            <i class=\"fa fa-plus\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.create-fixture-from-profile-file' | translate }}\n          </button>\n        </div>\n\n        <!-- Universe -->\n        <div class=\"col-6\">\n          <div class=\"form-group row\">\n            <label class=\"col-lg-4 col-form-label\">{{ 'designer.fixture-pool.universe' | translate }}</label>\n            <div class=\"col-lg-8\">\n              <select class=\"custom-select\">\n                <option>Universe 1</option>\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fixtures -->\n      <div class=\"card border-secondary\" style=\"height: 235px\">\n        <div class=\"card-body p-0\">\n          <div class=\"list-group list-group-flush\" [sortablejs]=\"fixturePool\">\n            @for (fixture of fixturePool; track fixture) {\n            <div\n              class=\"list-group-item\"\n              [class.active]=\"fixture == selectedFixture\"\n              (click)=\"selectFixture(fixture)\"\n              style=\"cursor: pointer\"\n            >\n              <div class=\"row\">\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=\"col-auto flex-grow pl-0 my-auto\">\n                  <p class=\"mb-0\">\n                    <span class=\"icon-{{ fixtureService.getFixtureIconClass(fixtureService.getProfileByUuid(fixture.profileUuid)) }} mr-1\">\n                    </span\n                    >{{ fixture.name }}\n                  </p>\n                </div>\n                <div class=\"col-auto my-auto\">\n                  <a class=\"btn btn-primary btn-sm float-right\" href=\"#\" role=\"button\" (click)=\"removeFixture(fixture); (false)\">\n                    <i class=\"fa fa-minus\" aria-hidden=\"true\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"row mt-3\">\n    <div class=\"col\">\n      <!-- Tab navigation -->\n      <ul class=\"nav nav-tabs mb-4\" id=\"myTab\" role=\"tablist\">\n        <li class=\"nav-item\">\n          <a class=\"nav-link active\" id=\"sets-tab\" data-toggle=\"tab\" href=\"#dmx\" role=\"tab\">\n            <i class=\"icon-ola\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.dmx' | translate }}\n          </a>\n        </li>\n        <li class=\"nav-item\">\n          <a class=\"nav-link\" id=\"compositions-tab\" data-toggle=\"tab\" href=\"#settings\" role=\"tab\">\n            <i class=\"fa fa-cog\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.settings' | translate }}\n          </a>\n        </li>\n      </ul>\n\n      <!-- Tab content -->\n      <div class=\"tab-content\" id=\"myTabContent\">\n        <!-- DMX universe overview-->\n        <div class=\"tab-pane show active\" id=\"dmx\" role=\"tabpanel\">\n          <!-- Show all channel numbers -->\n          <!-- <div class=\"form-group row\">\n            <div class=\"col-auto flex-grow\"></div>\n            <div class=\"col-lg-3 d-flex\">\n              <div class=\"form-check my-auto ml-auto\">\n                <input type=\"checkbox\" class=\"form-check-input\" id=\"showChannelNumbers\" [ngModel]=\"showChannelNumbers\"\n                  (ngModelChange)=\"showChannelNumbers = $event\">\n                <label class=\"form-check-label\" for=\"showChannelNumbers\">Show channels</label>\n              </div>\n            </div>\n          </div> -->\n\n          <!-- List of DMX channels -->\n          <div>\n            @for (channel of dmxChannels; track channel; let i = $index) {\n            <div\n              class=\"dmx-channel\"\n              [class.dmx-channel-occupied]=\"channelOccupied(i)\"\n              [class.dmx-channel-occupied-start]=\"channelOccupiedStart(i)\"\n              [class.dmx-channel-occupied-end]=\"channelOccupiedEnd(i)\"\n              [class.dmx-channel-selected]=\"channelSelected(i)\"\n              [class.dmx-channel-overlapped]=\"channelOverlapped(i)\"\n              (mousedown)=\"channelMouseDown($event)\"\n              (mouseover)=\"channelMouseOver($event)\"\n              [attr.data-index]=\"i\"\n              popover=\"{{ i + 1 }}\"\n              placement=\"top\"\n              triggers=\"mouseenter:mouseleave\"\n            >\n              <div class=\"d-flex w-100 dmx-channel-text\" [attr.data-index]=\"i\" [class.dmx-channel-text-visible]=\"showChannelNumbers\">\n                <div class=\"m-auto\" style=\"font-size: 11px\" [attr.data-index]=\"i\"><small [attr.data-index]=\"i\">&nbsp;</small></div>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n\n        <!-- Fixture settings -->\n        <div class=\"tab-pane\" id=\"settings\" role=\"tabpanel\">\n          @if (selectedFixture && selectedFixtureProfile) {\n          <div>\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\" for=\"fixtureName\">{{ 'designer.fixture-pool.fixture-name' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"selectedFixture.name\" maxlength=\"200\" id=\"fixtureName\" />\n              </div>\n            </div>\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\">{{ 'designer.fixture-pool.mode' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <select\n                  class=\"custom-select\"\n                  [ngModel]=\"selectedFixture.modeShortName\"\n                  (ngModelChange)=\"selectedFixture.modeShortName = $event\"\n                >\n                  @for (mode of selectedFixtureProfile.modes; track mode) {\n                  <option [ngValue]=\"mode.shortName || mode.name\">\n                    {{ mode.name }}\n                    - {{ fixtureService.getModeChannelCount(selectedFixtureProfile, mode) }}\n                    {{ 'designer.fixture-pool.channels' | translate }}\n                  </option>\n                  }\n                </select>\n              </div>\n            </div>\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\">{{ 'designer.fixture-pool.first-channel' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <select\n                  class=\"custom-select\"\n                  [ngModel]=\"selectedFixture.dmxFirstChannel\"\n                  (ngModelChange)=\"selectedFixture.dmxFirstChannel = $event\"\n                >\n                  @for (channel of dmxChannels; track channel; let i = $index) {\n                  <option [ngValue]=\"i\">\n                    {{ i + 1 }}\n                  </option>\n                  }\n                </select>\n              </div>\n            </div>\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\"></label>\n              <div class=\"col-lg-9\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addCopy(selectedFixture)\">\n                  {{ 'designer.fixture.add-copy' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n    {{ 'designer.misc.cancel' | translate }}\n  </a>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n", styles: [".list-group-item{padding:.3rem 1.25rem}.dmx-channel{display:flex;float:left;width:28px;border:1px solid white;margin-left:-1px;margin-bottom:-1px;padding-bottom:2px}.dmx-channel-occupied{background-color:#63462e;border-left:none;border-right:none;cursor:move}.dmx-channel-occupied-start{border-left:1px solid white;border-top-left-radius:8px;border-bottom-left-radius:8px}.dmx-channel-occupied-end{border-right:1px solid white;border-top-right-radius:8px;border-bottom-right-radius:8px}.dmx-channel-selected{background-color:#fd7e14}.dmx-channel-overlapped{background-color:red;border:1px solid red;cursor:move}.card{overflow:auto}\n"] }]
+        args: [{ selector: 'lib-app-fixture-pool', standalone: false, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.fixture-pool.title' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"cancel(); (false)\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <div class=\"row\">\n    <div class=\"col-6\">\n      <!-- Search for profiles -->\n      <input\n        type=\"text\"\n        class=\"form-control input-block mb-3\"\n        id=\"searchSet\"\n        placeholder=\"{{ 'designer.fixture-pool.search-profiles' | translate }}\"\n        (input)=\"searchExpression = $event.target.value; filterProfiles()\"\n      />\n\n      <!-- Profiles -->\n      <div class=\"card border-secondary w-100\" style=\"height: 200px\">\n        <div class=\"card-body p-0 w-100\">\n          <div class=\"list-group list-group-flush w-100\">\n            @if (loadingProfiles) {\n            <a class=\"list-group-item flex-column align-items-start d-flex\">\n              <p class=\"mb-0 mx-auto\">\n                <i class=\"fa fa-spinner fa-pulse fa-fw\"></i>\n              </p>\n            </a>\n            } @for (profile of filteredProfiles | sort : 'uuid'; track profile) {\n            <div class=\"list-group-item\">\n              <div class=\"row\">\n                <div class=\"col-10 col-auto my-auto pl-2\">\n                  <p class=\"mb-0\">\n                    <span class=\"icon-{{ fixtureService.getFixtureIconClass(profile) }} mr-1\"></span> {{ profile.manufacturerName }} -\n                    {{ profile.name }}\n                  </p>\n                </div>\n                <div class=\"col-2 my-auto\">\n                  <a class=\"btn btn-primary btn-sm float-right\" href=\"#\" role=\"button\" (click)=\"addFixture(profile); (false)\">\n                    <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n      <div>\n        <p class=\"d-inline-block mb-0 mt-2\">\n          Powered by the <a href=\"https://open-fixture-library.org/\" target=\"_blank\">Open Fixture Library</a>\n        </p>\n        <a\n          class=\"mt-2 btn btn-secondary btn-sm float-right\"\n          href=\"https://open-fixture-library.org/fixture-editor\"\n          target=\"_blank\"\n          role=\"button\"\n        >\n          <i class=\"fa fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.add-profile' | translate }}\n        </a>\n        @if (configService.localProfiles) {\n        <button\n          type=\"button\"\n          class=\"mr-2 mt-2 btn btn-secondary btn-sm float-right\"\n          (click)=\"updateProfiles(); (false)\"\n          [disabled]=\"updatingProfiles\"\n          role=\"button\"\n        >\n          @if (updatingProfiles) {\n          <i class=\"fa fa-spinner fa-pulse fa-fw\" aria-hidden=\"true\"></i>\n          } @if (!updatingProfiles) {\n          <i class=\"fa fa-download fa-fw\" aria-hidden=\"true\"></i>\n          }\n          {{ 'designer.fixture-pool.update-profiles' | translate }}\n        </button>\n        }\n      </div>\n    </div>\n    <div class=\"col-6\">\n      <div class=\"row\">\n        <!-- Add fixture from local profile -->\n        <div class=\"col-6\">\n          <button type=\"button\" class=\"btn btn-secondary\" (click)=\"createFixtureFromProfileFile()\" role=\"button\">\n            <i class=\"fa fa-plus\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.create-fixture-from-profile-file' | translate }}\n          </button>\n        </div>\n\n        <!-- Universe -->\n        <div class=\"col-6\">\n          <div class=\"form-group row\">\n            <label class=\"col-lg-4 col-form-label\">{{ 'designer.fixture-pool.universe' | translate }}</label>\n            <div class=\"col-lg-8\">\n              <select class=\"custom-select\">\n                <option>Universe 1</option>\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fixtures -->\n      <div class=\"card border-secondary\" style=\"height: 235px\">\n        <div class=\"card-body p-0\">\n          <!-- TODO sortablejs breaks sortable lists in base designer view, as soon as it disappears -->\n          <!-- Reproduce: select a fixture, deselect a fixture, open pool, close pool without changes, fixture is \"half\"-selected again -->\n          <!-- <div class=\"list-group list-group-flush\" [sortablejs]=\"fixturePool\"> -->\n          <div class=\"list-group list-group-flush\">\n            @for (fixture of fixturePool; track fixture) {\n            <div\n              class=\"list-group-item\"\n              [class.active]=\"fixture == selectedFixture\"\n              (click)=\"selectFixture(fixture)\"\n              style=\"cursor: pointer\"\n            >\n              <div class=\"row\">\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=\"col-auto flex-grow pl-0 my-auto\">\n                  <p class=\"mb-0\">\n                    <span class=\"icon-{{ fixtureService.getFixtureIconClass(fixtureService.getProfileByUuid(fixture.profileUuid)) }} mr-1\">\n                    </span\n                    >{{ fixture.name }}\n                  </p>\n                </div>\n                <div class=\"col-auto my-auto\">\n                  <a class=\"btn btn-primary btn-sm float-right\" href=\"#\" role=\"button\" (click)=\"removeFixture(fixture); (false)\">\n                    <i class=\"fa fa-minus\" aria-hidden=\"true\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"row mt-3\">\n    <div class=\"col\">\n      <!-- Tab navigation -->\n      <ul class=\"nav nav-tabs mb-4\" id=\"myTab\" role=\"tablist\">\n        <li class=\"nav-item\">\n          <a class=\"nav-link active\" id=\"sets-tab\" data-toggle=\"tab\" href=\"#dmx\" role=\"tab\">\n            <i class=\"icon-ola\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.dmx' | translate }}\n          </a>\n        </li>\n        <li class=\"nav-item\">\n          <a class=\"nav-link\" id=\"compositions-tab\" data-toggle=\"tab\" href=\"#settings\" role=\"tab\">\n            <i class=\"fa fa-cog\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.settings' | translate }}\n          </a>\n        </li>\n      </ul>\n\n      <!-- Tab content -->\n      <div class=\"tab-content\" id=\"myTabContent\">\n        <!-- DMX universe overview-->\n        <div class=\"tab-pane show active\" id=\"dmx\" role=\"tabpanel\">\n          <!-- Show all channel numbers -->\n          <!-- <div class=\"form-group row\">\n            <div class=\"col-auto flex-grow\"></div>\n            <div class=\"col-lg-3 d-flex\">\n              <div class=\"form-check my-auto ml-auto\">\n                <input type=\"checkbox\" class=\"form-check-input\" id=\"showChannelNumbers\" [ngModel]=\"showChannelNumbers\"\n                  (ngModelChange)=\"showChannelNumbers = $event\">\n                <label class=\"form-check-label\" for=\"showChannelNumbers\">Show channels</label>\n              </div>\n            </div>\n          </div> -->\n\n          <!-- List of DMX channels -->\n          <div>\n            @for (channel of dmxChannels; track $index; let i = $index) {\n            <div\n              class=\"dmx-channel\"\n              [class.dmx-channel-occupied]=\"channelOccupied(i)\"\n              [class.dmx-channel-occupied-start]=\"channelOccupiedStart(i)\"\n              [class.dmx-channel-occupied-end]=\"channelOccupiedEnd(i)\"\n              [class.dmx-channel-selected]=\"channelSelected(i)\"\n              [class.dmx-channel-overlapped]=\"channelOverlapped(i)\"\n              (mousedown)=\"channelMouseDown($event)\"\n              (mouseover)=\"channelMouseOver($event)\"\n              [attr.data-index]=\"i\"\n              popover=\"{{ i + 1 }}\"\n              placement=\"top\"\n              triggers=\"mouseenter:mouseleave\"\n            >\n              <div class=\"d-flex w-100 dmx-channel-text\" [attr.data-index]=\"i\" [class.dmx-channel-text-visible]=\"showChannelNumbers\">\n                <div class=\"m-auto\" style=\"font-size: 11px\" [attr.data-index]=\"i\"><small [attr.data-index]=\"i\">&nbsp;</small></div>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n\n        <!-- Fixture settings -->\n        <div class=\"tab-pane\" id=\"settings\" role=\"tabpanel\">\n          @if (selectedFixture && selectedFixtureProfile) {\n          <div>\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\" for=\"fixtureName\">{{ 'designer.fixture-pool.fixture-name' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"selectedFixture.name\" maxlength=\"200\" id=\"fixtureName\" />\n              </div>\n            </div>\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\">{{ 'designer.fixture-pool.mode' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <select\n                  class=\"custom-select\"\n                  [ngModel]=\"selectedFixture.modeShortName\"\n                  (ngModelChange)=\"selectedFixture.modeShortName = $event\"\n                >\n                  @for (mode of selectedFixtureProfile.modes; track mode) {\n                  <option [ngValue]=\"mode.shortName || mode.name\">\n                    {{ mode.name }}\n                    - {{ fixtureService.getModeChannelCount(selectedFixtureProfile, mode) }}\n                    {{ 'designer.fixture-pool.channels' | translate }}\n                  </option>\n                  }\n                </select>\n              </div>\n            </div>\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\">{{ 'designer.fixture-pool.first-channel' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <select\n                  class=\"custom-select\"\n                  [ngModel]=\"selectedFixture.dmxFirstChannel\"\n                  (ngModelChange)=\"selectedFixture.dmxFirstChannel = $event\"\n                >\n                  @for (channel of dmxChannels; track $index; let i = $index) {\n                  <option [ngValue]=\"i\">\n                    {{ i + 1 }}\n                  </option>\n                  }\n                </select>\n              </div>\n            </div>\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\"></label>\n              <div class=\"col-lg-9\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addCopy(selectedFixture)\">\n                  {{ 'designer.fixture.add-copy' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n    {{ 'designer.misc.cancel' | translate }}\n  </a>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n", styles: [".list-group-item{padding:.3rem 1.25rem}.dmx-channel{display:flex;float:left;width:28px;border:1px solid white;margin-left:-1px;margin-bottom:-1px;padding-bottom:2px}.dmx-channel-occupied{background-color:#63462e;border-left:none;border-right:none;cursor:move}.dmx-channel-occupied-start{border-left:1px solid white;border-top-left-radius:8px;border-bottom-left-radius:8px}.dmx-channel-occupied-end{border-right:1px solid white;border-top-right-radius:8px;border-bottom-right-radius:8px}.dmx-channel-selected{background-color:#fd7e14}.dmx-channel-overlapped{background-color:red;border:1px solid red;cursor:move}.card{overflow:auto}\n"] }]
     }], () => [{ type: i1$1.BsModalRef }, { type: FixtureService }, { type: UuidService }, { type: ProjectService }, { type: PreviewService }, { type: i4.TranslateService }, { type: i3$1.ToastrService }, { type: PresetService }, { type: ConfigService }, { type: i1$1.BsModalService }], { mouseUp: [{
             type: HostListener,
             args: ['window:mouseup', ['$event']]
@@ -6940,7 +7039,7 @@ class TimelineGridComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimelineGridComponent, { className: "TimelineGridComponent", filePath: "lib/timeline/timeline-grid/timeline-grid.component.ts", lineNumber: 11 }); })();
 
-const _c0$5 = ["waveWrapper"];
+const _c0$6 = ["waveWrapper"];
 const _c1 = ["waveElement"];
 function TimelineComponent_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "option", 14);
@@ -7273,7 +7372,7 @@ class TimelineComponent {
     }
     static { this.ɵfac = function TimelineComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TimelineComponent)(i0.ɵɵdirectiveInject(TimelineService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.BsModalService), i0.ɵɵdirectiveInject(UuidService), i0.ɵɵdirectiveInject(ProjectService), i0.ɵɵdirectiveInject(HotkeyTargetExcludeService), i0.ɵɵdirectiveInject(WarningDialogService), i0.ɵɵdirectiveInject(i1.HttpClient), i0.ɵɵdirectiveInject(ConfigService), i0.ɵɵdirectiveInject(PresetService), i0.ɵɵdirectiveInject(IntroService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TimelineComponent, selectors: [["lib-app-timeline"]], viewQuery: function TimelineComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$5, 5);
+            i0.ɵɵviewQuery(_c0$6, 5);
             i0.ɵɵviewQuery(_c1, 5);
         } if (rf & 2) {
             let _t;
@@ -8050,7 +8149,7 @@ function FixtureCapabilityColorWheelComponent_Conditional_10_For_2_Template(rf,
 } }
 function FixtureCapabilityColorWheelComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵrepeaterCreate(1, FixtureCapabilityColorWheelComponent_Conditional_10_For_2_Template, 2, 4, "div", 8, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, FixtureCapabilityColorWheelComponent_Conditional_10_For_2_Template, 2, 4, "div", 8, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -8204,11 +8303,11 @@ class FixtureCapabilityColorWheelComponent {
             i0.ɵɵconditional(ctx.showContainer ? 9 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.wheel ? 10 : -1);
-        } }, dependencies: [i8.NgStyle, i3$2.CheckboxControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i4.TranslatePipe], styles: [".color[_ngcontent-%COMP%]{box-sizing:border-box;width:50px;height:50px;border:solid 1px #ced4da;cursor:pointer}.color-selected[_ngcontent-%COMP%]{border-width:3px;border-color:#fff}.color-selected-inner[_ngcontent-%COMP%]{border:solid 1px black;height:100%;width:100%}"] }); }
+        } }, dependencies: [i9.NgStyle, i3$2.CheckboxControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i4.TranslatePipe], styles: [".color[_ngcontent-%COMP%]{box-sizing:border-box;width:50px;height:50px;border:solid 1px #ced4da;cursor:pointer}.color-selected[_ngcontent-%COMP%]{border-width:3px;border-color:#fff}.color-selected-inner[_ngcontent-%COMP%]{border:solid 1px black;height:100%;width:100%}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureCapabilityColorWheelComponent, [{
         type: Component,
-        args: [{ selector: 'lib-app-fixture-capability-color-wheel', standalone: false, template: "<div class=\"card border-secondary h-100\" [class.capability-deactivated]=\"getCurrentSlotNumber() == undefined\" style=\"min-height: 200px\">\n  <div class=\"card-header\">\n    <div class=\"my-auto\">\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"capabilityColorWheel{{ wheelIndex }}Active\"\n          [ngModel]=\"getCurrentSlotNumber() != undefined\"\n          (ngModelChange)=\"changeActive($event)\"\n        />\n        <label class=\"form-check-label\" for=\"capabilityColorWheel{{ wheelIndex }}Active\">\n          {{ 'designer.fixture.capability-color' | translate }}\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100\">\n    @if (showContainer) {\n    <div>{{ _fixtureProfile.name }} - {{ _channel.name }}</div>\n    } @if (wheel) {\n    <div class=\"d-flex\" style=\"max-width: 240px; flex-wrap: wrap\">\n      @for (slot of slotCapabilities; track slot; let i = $index) {\n      <div\n        (click)=\"selectSlotNumber(slot.capability.slotNumber)\"\n        class=\"m-1 color\"\n        [class.color-selected]=\"slotCapabilityIsSelected(slot.capability.slotNumber)\"\n        [ngStyle]=\"getCapabilityColorStyle(slot)\"\n      >\n        @if (slotCapabilityIsSelected(slot.capability.slotNumber)) {\n        <div (click)=\"selectSlotNumber(slot.capability.slotNumber)\" class=\"color-selected-inner\"></div>\n        }\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [".color{box-sizing:border-box;width:50px;height:50px;border:solid 1px #ced4da;cursor:pointer}.color-selected{border-width:3px;border-color:#fff}.color-selected-inner{border:solid 1px black;height:100%;width:100%}\n"] }]
+        args: [{ selector: 'lib-app-fixture-capability-color-wheel', standalone: false, template: "<div class=\"card border-secondary h-100\" [class.capability-deactivated]=\"getCurrentSlotNumber() == undefined\" style=\"min-height: 200px\">\n  <div class=\"card-header\">\n    <div class=\"my-auto\">\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"capabilityColorWheel{{ wheelIndex }}Active\"\n          [ngModel]=\"getCurrentSlotNumber() != undefined\"\n          (ngModelChange)=\"changeActive($event)\"\n        />\n        <label class=\"form-check-label\" for=\"capabilityColorWheel{{ wheelIndex }}Active\">\n          {{ 'designer.fixture.capability-color' | translate }}\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100\">\n    @if (showContainer) {\n    <div>{{ _fixtureProfile.name }} - {{ _channel.name }}</div>\n    } @if (wheel) {\n    <div class=\"d-flex\" style=\"max-width: 240px; flex-wrap: wrap\">\n      @for (slot of slotCapabilities; track $index; let i = $index) {\n      <div\n        (click)=\"selectSlotNumber(slot.capability.slotNumber)\"\n        class=\"m-1 color\"\n        [class.color-selected]=\"slotCapabilityIsSelected(slot.capability.slotNumber)\"\n        [ngStyle]=\"getCapabilityColorStyle(slot)\"\n      >\n        @if (slotCapabilityIsSelected(slot.capability.slotNumber)) {\n        <div (click)=\"selectSlotNumber(slot.capability.slotNumber)\" class=\"color-selected-inner\"></div>\n        }\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [".color{box-sizing:border-box;width:50px;height:50px;border:solid 1px #ced4da;cursor:pointer}.color-selected{border-width:3px;border-color:#fff}.color-selected-inner{border:solid 1px black;height:100%;width:100%}\n"] }]
     }], () => [{ type: PresetService }, { type: i0.ChangeDetectorRef }, { type: FixtureService }], { profile: [{
             type: Input
         }], channel: [{
@@ -8250,7 +8349,7 @@ function FixtureCapabilityComponent_Conditional_2_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelementStart(0, "div", 4);
     i0.ɵɵconditionalCreate(1, FixtureCapabilityComponent_Conditional_2_Conditional_1_Template, 2, 0, "div", 5);
     i0.ɵɵconditionalCreate(2, FixtureCapabilityComponent_Conditional_2_Conditional_2_Template, 2, 0, "div", 5);
-    i0.ɵɵrepeaterCreate(3, FixtureCapabilityComponent_Conditional_2_For_4_Template, 2, 4, "div", 5, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(3, FixtureCapabilityComponent_Conditional_2_For_4_Template, 2, 4, "div", 5, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵpipe(5, "keyvalue");
     i0.ɵɵconditionalCreate(6, FixtureCapabilityComponent_Conditional_2_Conditional_6_Template, 2, 0, "div", 5);
     i0.ɵɵelementStart(7, "div", 6);
@@ -8391,11 +8490,11 @@ class FixtureCapabilityComponent {
             i0.ɵɵconditional(ctx.projectService.project.fixtures.length > 0 && ctx.presetService.selectedPreset && ctx.presetService.selectedPreset.fixtures.length == 0 ? 4 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.projectService.project.fixtures.length > 0 && ctx.presetService.selectedPreset && ctx.presetService.selectedPreset.fixtures.length > 0 && !ctx.hasCapabilityColorOrColorWheel && !ctx.hasCapabilityPanTilt ? 5 : -1);
-        } }, dependencies: [FixtureCapabilityColorComponent, FixtureCapabilityDimmerComponent, FixtureCapabilityPanTiltComponent, FixtureCapabilityColorWheelComponent, i8.KeyValuePipe, i4.TranslatePipe], encapsulation: 2, changeDetection: 0 }); }
+        } }, dependencies: [FixtureCapabilityColorComponent, FixtureCapabilityDimmerComponent, FixtureCapabilityPanTiltComponent, FixtureCapabilityColorWheelComponent, i9.KeyValuePipe, i4.TranslatePipe], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureCapabilityComponent, [{
         type: Component,
-        args: [{ selector: 'lib-app-fixture-capability', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"card border-secondary panel h-100\" [class.card-intro-active]=\"introService.showStep('capabilities')\">\n  <div class=\"card-body capability-container d-flex h-100\" style=\"overflow-y: hidden\">\n    <!-- h-100 needs to be applied in chrome to avoid performance issues with many layouts (reflows)\n    during sliding. But the class must not be applied e.g. in Safari, because the bottom margin is not correct\n    anymore afterwards. -->\n    @if (presetService.selectedPreset) {\n    <div class=\"row m-0 pl-3\" [class.h-100]=\"isChrome()\">\n      <!-- Dimmer -->\n      <!-- the height attribute is required to avoid performance issues with many layouts (reflows)\n        in Chrome during sliding -->\n      @if (hasCapabilityDimmer) {\n      <div class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-dimmer></lib-app-fixture-capability-dimmer>\n      </div>\n      }\n      <!-- Color -->\n      <!-- Also show for color wheel fixtures to approx. the color -->\n      @if (hasCapabilityColorOrColorWheel) {\n      <div class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-color></lib-app-fixture-capability-color>\n      </div>\n      }\n      <!-- Color wheels -->\n      @for (entry of colorWheelChannels | keyvalue; track entry; let i = $index) {\n      <div class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-color-wheel\n          [profile]=\"entry.key\"\n          [channel]=\"entry.value\"\n          [wheelIndex]=\"i\"\n          [showContainer]=\"colorWheelChannels.size > 1\"\n        ></lib-app-fixture-capability-color-wheel>\n      </div>\n      }\n      <!-- Pan/Tilt -->\n      @if (hasCapabilityPanTilt) {\n      <div class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-pan-tilt></lib-app-fixture-capability-pan-tilt>\n      </div>\n      }\n      <!-- Fix spacing at the end -->\n      <div class=\"col col-auto p-0 my-3 mr-3\">&nbsp;</div>\n    </div>\n    } @if (projectService.project.fixtures.length == 0) {\n    <div class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures' | translate }}</p>\n    </div>\n    } @if ( projectService.project.fixtures.length > 0 && presetService.selectedPreset && presetService.selectedPreset.fixtures.length == 0\n    ) {\n    <div class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures-selected' | translate }}</p>\n    </div>\n    } @if ( projectService.project.fixtures.length > 0 && presetService.selectedPreset && presetService.selectedPreset.fixtures.length > 0\n    && !hasCapabilityColorOrColorWheel && !hasCapabilityPanTilt ) {\n    <div class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-capabilities-available' | translate }}</p>\n    </div>\n    }\n  </div>\n</div>\n" }]
+        args: [{ selector: 'lib-app-fixture-capability', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"card border-secondary panel h-100\" [class.card-intro-active]=\"introService.showStep('capabilities')\">\n  <div class=\"card-body capability-container d-flex h-100\" style=\"overflow-y: hidden\">\n    <!-- h-100 needs to be applied in chrome to avoid performance issues with many layouts (reflows)\n    during sliding. But the class must not be applied e.g. in Safari, because the bottom margin is not correct\n    anymore afterwards. -->\n    @if (presetService.selectedPreset) {\n    <div class=\"row m-0 pl-3\" [class.h-100]=\"isChrome()\">\n      <!-- Dimmer -->\n      <!-- the height attribute is required to avoid performance issues with many layouts (reflows)\n        in Chrome during sliding -->\n      @if (hasCapabilityDimmer) {\n      <div class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-dimmer></lib-app-fixture-capability-dimmer>\n      </div>\n      }\n      <!-- Color -->\n      <!-- Also show for color wheel fixtures to approx. the color -->\n      @if (hasCapabilityColorOrColorWheel) {\n      <div class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-color></lib-app-fixture-capability-color>\n      </div>\n      }\n      <!-- Color wheels -->\n      @for (entry of colorWheelChannels | keyvalue; track $index; let i = $index) {\n      <div class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-color-wheel\n          [profile]=\"entry.key\"\n          [channel]=\"entry.value\"\n          [wheelIndex]=\"i\"\n          [showContainer]=\"colorWheelChannels.size > 1\"\n        ></lib-app-fixture-capability-color-wheel>\n      </div>\n      }\n      <!-- Pan/Tilt -->\n      @if (hasCapabilityPanTilt) {\n      <div class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-pan-tilt></lib-app-fixture-capability-pan-tilt>\n      </div>\n      }\n      <!-- Fix spacing at the end -->\n      <div class=\"col col-auto p-0 my-3 mr-3\">&nbsp;</div>\n    </div>\n    } @if (projectService.project.fixtures.length == 0) {\n    <div class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures' | translate }}</p>\n    </div>\n    } @if ( projectService.project.fixtures.length > 0 && presetService.selectedPreset && presetService.selectedPreset.fixtures.length == 0\n    ) {\n    <div class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures-selected' | translate }}</p>\n    </div>\n    } @if ( projectService.project.fixtures.length > 0 && presetService.selectedPreset && presetService.selectedPreset.fixtures.length > 0\n    && !hasCapabilityColorOrColorWheel && !hasCapabilityPanTilt ) {\n    <div class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-capabilities-available' | translate }}</p>\n    </div>\n    }\n  </div>\n</div>\n" }]
     }], () => [{ type: PresetService }, { type: FixtureService }, { type: i0.ChangeDetectorRef }, { type: ProjectService }, { type: IntroService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FixtureCapabilityComponent, { className: "FixtureCapabilityComponent", filePath: "lib/fixture/fixture-capability/fixture-capability.component.ts", lineNumber: 18 }); })();
 
@@ -8934,7 +9033,7 @@ class FixtureSettingsComponent {
     }], () => [{ type: FixtureService }, { type: PresetService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FixtureSettingsComponent, { className: "FixtureSettingsComponent", filePath: "lib/fixture/fixture-settings/fixture-settings.component.ts", lineNumber: 11 }); })();
 
-const _c0$4 = ["curveGrid"];
+const _c0$5 = ["curveGrid"];
 function EffectCurveComponent_For_74_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 25)(1, "input", 27);
@@ -9015,26 +9114,19 @@ class EffectCurveComponent {
     // whether the effect is currently being edited (open) or not
     set isSelected(value) {
         if (value) {
-            // start the update timer
-            if (!this.gridUpdateSubscription) {
-                this.gridUpdateSubscription = timer(0, 15).subscribe(() => {
-                    this.redraw();
-                });
-            }
+            this.startUpdateTimer();
         }
         else {
-            // stop the update timer
-            if (this.gridUpdateSubscription) {
-                this.gridUpdateSubscription.unsubscribe();
-                this.gridUpdateSubscription = undefined;
-            }
+            this.stopUpdateTimer();
         }
     }
-    constructor(presetService, animationService, fixtureService, translate) {
+    constructor(presetService, animationService, fixtureService, translate, effectService, ngZone) {
         this.presetService = presetService;
         this.animationService = animationService;
         this.fixtureService = fixtureService;
         this.translate = translate;
+        this.effectService = effectService;
+        this.ngZone = ngZone;
         this.lengthMillisMin = 20;
         this.lengthMillisMax = 8000;
         this.amplitudeMin = 0;
@@ -9055,6 +9147,17 @@ class EffectCurveComponent {
             this.updateCapabilitiesAndChannels();
         });
         this.updateCapabilitiesAndChannels();
+        this.effectsOpenChangedSubscription = this.effectService.effectsOpenChanged.subscribe(() => {
+            if (this.effectService.effectsOpen) {
+                this.startUpdateTimer();
+            }
+            else {
+                this.stopUpdateTimer();
+            }
+        });
+        if (this.effectService.effectsOpen) {
+            this.startUpdateTimer();
+        }
     }
     ngOnInit() {
         const canvas = this.curveGrid.nativeElement;
@@ -9063,6 +9166,26 @@ class EffectCurveComponent {
         this.maxHeight = canvas.height;
         this.redraw();
     }
+    ngOnDestroy() {
+        this.stopUpdateTimer();
+        this.effectsOpenChangedSubscription.unsubscribe();
+    }
+    startUpdateTimer() {
+        if (!this.gridUpdateSubscription) {
+            // Avoid triggering change detection with each animation frame -> run outside zone
+            this.ngZone.runOutsideAngular(() => {
+                this.gridUpdateSubscription = timer(0, 15).subscribe(() => {
+                    this.redraw();
+                });
+            });
+        }
+    }
+    stopUpdateTimer() {
+        if (this.gridUpdateSubscription) {
+            this.gridUpdateSubscription.unsubscribe();
+            this.gridUpdateSubscription = undefined;
+        }
+    }
     drawCurrentValue(currMillis, radius, lineWidth, durationMillis, maxHeight) {
         const currVal = 1 - this.curve.getValueAtMillis(currMillis);
         const x = (this.maxWidth * (currMillis % durationMillis)) / durationMillis;
@@ -9300,9 +9423,9 @@ class EffectCurveComponent {
             this.presetService.previewLive();
         }
     }
-    static { this.ɵfac = function EffectCurveComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EffectCurveComponent)(i0.ɵɵdirectiveInject(PresetService), i0.ɵɵdirectiveInject(AnimationService), i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(i4.TranslateService)); }; }
+    static { this.ɵfac = function EffectCurveComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EffectCurveComponent)(i0.ɵɵdirectiveInject(PresetService), i0.ɵɵdirectiveInject(AnimationService), i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(i4.TranslateService), i0.ɵɵdirectiveInject(EffectService), i0.ɵɵdirectiveInject(i0.NgZone)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EffectCurveComponent, selectors: [["lib-app-effect-curve"]], viewQuery: function EffectCurveComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$4, 7);
+            i0.ɵɵviewQuery(_c0$5, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.curveGrid = _t.first);
@@ -9397,7 +9520,7 @@ class EffectCurveComponent {
             i0.ɵɵelement(69, "i", 21);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(70, "div", 22)(71, "div", 23)(72, "div", 24);
-            i0.ɵɵrepeaterCreate(73, EffectCurveComponent_For_74_Template, 5, 8, "div", 25, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵrepeaterCreate(73, EffectCurveComponent_For_74_Template, 5, 8, "div", 25, i0.ɵɵrepeaterTrackByIndex);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(75, "div", 26);
             i0.ɵɵconditionalCreate(76, EffectCurveComponent_Conditional_76_Template, 4, 0, "div");
@@ -9470,12 +9593,12 @@ class EffectCurveComponent {
             i0.ɵɵconditional(ctx.availableProfiles.length > 1 ? 76 : -1);
             i0.ɵɵadvance();
             i0.ɵɵrepeater(i0.ɵɵpipeBind1(79, 81, ctx.availableChannels));
-        } }, dependencies: [i3$2.NgSelectOption, i3$2.ɵNgSelectMultipleOption, i3$2.DefaultValueAccessor, i3$2.CheckboxControlValueAccessor, i3$2.SelectControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i4$1.SliderComponent, i11.PopoverDirective, i8.AsyncPipe, i8.KeyValuePipe, i4.TranslatePipe], styles: [".curve-grid[_ngcontent-%COMP%]{background-color:#000;border:1px solid white}.applying-to[_ngcontent-%COMP%]{overflow-y:scroll;height:130px!important;background-color:#222;border:1px solid white;padding:.5rem}.applying-to[_ngcontent-%COMP%]   .form-check[_ngcontent-%COMP%]:last-child{margin-bottom:.5rem}"] }); }
+        } }, dependencies: [i3$2.NgSelectOption, i3$2.ɵNgSelectMultipleOption, i3$2.DefaultValueAccessor, i3$2.CheckboxControlValueAccessor, i3$2.SelectControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i4$1.SliderComponent, i11.PopoverDirective, i9.AsyncPipe, i9.KeyValuePipe, i4.TranslatePipe], styles: [".curve-grid[_ngcontent-%COMP%]{background-color:#000;border:1px solid white}.applying-to[_ngcontent-%COMP%]{overflow-y:scroll;height:130px!important;background-color:#222;border:1px solid white;padding:.5rem}.applying-to[_ngcontent-%COMP%]   .form-check[_ngcontent-%COMP%]:last-child{margin-bottom:.5rem}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EffectCurveComponent, [{
         type: Component,
-        args: [{ selector: 'lib-app-effect-curve', standalone: false, template: "<div class=\"mr-3\" style=\"float: left\">\n  <div class=\"mb-2\">\n    <select\n      [ngModel]=\"curve.curveType\"\n      (ngModelChange)=\"curve.curveType = $event; presetService.previewLive()\"\n      style=\"width: 200px; height: 20px\"\n    >\n      <option [value]=\"'sine'\">\n        {{ 'designer.effect.curve-sine' | translate }}\n      </option>\n      <option [value]=\"'square'\">\n        {{ 'designer.effect.curve-square' | translate }}\n      </option>\n      <!-- <option [value]=\"'triangle'\">\n    {{ 'designer.effect.curve-triangle' | translate }}</option>\n    <option [value]=\"'sawtooth'\">\n    {{ 'designer.effect.curve-sawtooth' | translate }}</option>\n    <option [value]=\"'reverse-sawtooth'\">\n    {{ 'designer.effect.curve-reverse-sawtooth' | translate }}</option> -->\n    </select>\n  </div>\n  <div>\n    <canvas #curveGrid class=\"curve-grid\" width=\"200\" height=\"100\" viewBox=\"150 -75 4850 5150\" preserveAspectRatio=\"none\"></canvas>\n  </div>\n</div>\n\n<div class=\"mr-4\" style=\"float: left\">\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-length' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.lengthMillis\"\n        style=\"width: 80px\"\n        [tooltip]=\"'hide'\"\n        [value]=\"0\"\n        [min]=\"lengthMillisMin\"\n        [max]=\"lengthMillisMax\"\n        [step]=\"1\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.lengthMillis\" (ngModelChange)=\"setLengthMillis($event); redraw()\" />\n    </div>\n    <div class=\"my-auto ml-1\">\n      {{ 'designer.misc.ms' | translate }}\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-amplitude' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.amplitude\"\n        style=\"width: 80px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"amplitudeMin\"\n        [max]=\"amplitudeMax\"\n        [step]=\"0.01\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.amplitude\" (ngModelChange)=\"setAmplitude($event); redraw()\" />\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-position' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.position\"\n        style=\"width: 80px; height: 18px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"percentageMin\"\n        [max]=\"percentageMax\"\n        [step]=\"0.01\"\n      >\n      </mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.position\" (ngModelChange)=\"setPosition($event); redraw()\" />\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-phase' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.phaseMillis\"\n        style=\"width: 80px; height: 18px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"phaseMillisMin\"\n        [max]=\"phaseMillisMax\"\n        [step]=\"1\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.phaseMillis\" (ngModelChange)=\"setPhaseMillis($event); redraw()\" />\n    </div>\n    <div class=\"my-auto ml-1\">\n      {{ 'designer.misc.ms' | translate }}\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-chase' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.phasingMillis\"\n        style=\"width: 80px; height: 18px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"phasingMillisMin\"\n        [max]=\"phasingMillisMax\"\n        [step]=\"1\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.phasingMillis\" (ngModelChange)=\"setPhasingMillis($event); redraw()\" />\n    </div>\n    <div class=\"my-auto ml-1\">\n      {{ 'designer.misc.ms' | translate }}\n    </div>\n  </div>\n</div>\n\n<!-- Menu for the capabilities and channels-->\n<div class=\"col col-auto p-0\" style=\"margin-right: 1px; width: 50px; float: left\">\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      id=\"v-pills-effect-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-effect-capabilities-{{ curve?.uuid }}\"\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      id=\"v-pills-effect-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-effect-channels-{{ curve?.uuid }}\"\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  </div>\n</div>\n\n<div class=\"h-100\" class=\"applying-to\">\n  <div class=\"tab-content h-100\" id=\"v-pills-tabContent\">\n    <div class=\"tab-pane h-100 show active\" id=\"v-pills-effect-capabilities-{{ curve?.uuid }}\" role=\"tabpanel\">\n      <!-- Capabilities-->\n      @for (capability of availableCapabilities; track capability; let i = $index) {\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"capability_{{ curve?.uuid + '_' + i }}\"\n          [ngModel]=\"capabilityChecked(capability)\"\n          (change)=\"toggleCapability($event, capability)\"\n        />\n        <label class=\"form-check-label\" for=\"capability_{{ curve?.uuid + '_' + i }}\">{{ getCapabilityName(capability) | async }}</label>\n      </div>\n      }\n    </div>\n    <div class=\"tab-pane h-100 show\" id=\"v-pills-effect-channels-{{ curve?.uuid }}\" role=\"tabpanel\">\n      <!-- channels -->\n\n      <!-- profile selection -->\n      @if (availableProfiles.length > 1) {\n      <div>\n        @for (profile of availableProfiles; track profile; let i = $index) {\n        <div class=\"form-check\">\n          <input\n            type=\"checkbox\"\n            class=\"form-check-input\"\n            id=\"channel_profile_{{ curve?.uuid }}_{{ profile.uuid }}\"\n            [ngModel]=\"selectedProfiles.indexOf(profile) >= 0\"\n            (change)=\"changeProfileSelection($event, profile)\"\n          />\n          <label class=\"form-check-label\" for=\"channel_profile_{{ curve?.uuid }}_{{ profile.uuid }}\">{{ profile.name }}</label>\n        </div>\n        }\n        <hr class=\"my-1\" style=\"border-color: white\" />\n      </div>\n      }\n\n      <!-- channels -->\n      @for (entry of availableChannels | keyvalue; track entry; let i = $index) { @for (channel of entry.value; track channel; let j =\n      $index) {\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"channel_{{ curve?.uuid }}_{{ i }}_{{ j }}\"\n          [ngModel]=\"channelChecked(entry.key, channel)\"\n          (change)=\"toggleChannel($event, entry.key, channel)\"\n        />\n        <label class=\"form-check-label\" for=\"channel_{{ curve?.uuid }}_{{ i }}_{{ j }}\">{{\n          getChannelName(entry.key.name, channel.name)\n        }}</label>\n      </div>\n      } }\n    </div>\n  </div>\n</div>\n", styles: [".curve-grid{background-color:#000;border:1px solid white}.applying-to{overflow-y:scroll;height:130px!important;background-color:#222;border:1px solid white;padding:.5rem}.applying-to .form-check:last-child{margin-bottom:.5rem}\n"] }]
-    }], () => [{ type: PresetService }, { type: AnimationService }, { type: FixtureService }, { type: i4.TranslateService }], { curve: [{
+        args: [{ selector: 'lib-app-effect-curve', standalone: false, template: "<div class=\"mr-3\" style=\"float: left\">\n  <div class=\"mb-2\">\n    <select\n      [ngModel]=\"curve.curveType\"\n      (ngModelChange)=\"curve.curveType = $event; presetService.previewLive()\"\n      style=\"width: 200px; height: 20px\"\n    >\n      <option [value]=\"'sine'\">\n        {{ 'designer.effect.curve-sine' | translate }}\n      </option>\n      <option [value]=\"'square'\">\n        {{ 'designer.effect.curve-square' | translate }}\n      </option>\n      <!-- <option [value]=\"'triangle'\">\n    {{ 'designer.effect.curve-triangle' | translate }}</option>\n    <option [value]=\"'sawtooth'\">\n    {{ 'designer.effect.curve-sawtooth' | translate }}</option>\n    <option [value]=\"'reverse-sawtooth'\">\n    {{ 'designer.effect.curve-reverse-sawtooth' | translate }}</option> -->\n    </select>\n  </div>\n  <div>\n    <canvas #curveGrid class=\"curve-grid\" width=\"200\" height=\"100\" viewBox=\"150 -75 4850 5150\" preserveAspectRatio=\"none\"></canvas>\n  </div>\n</div>\n\n<div class=\"mr-4\" style=\"float: left\">\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-length' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.lengthMillis\"\n        style=\"width: 80px\"\n        [tooltip]=\"'hide'\"\n        [value]=\"0\"\n        [min]=\"lengthMillisMin\"\n        [max]=\"lengthMillisMax\"\n        [step]=\"1\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.lengthMillis\" (ngModelChange)=\"setLengthMillis($event); redraw()\" />\n    </div>\n    <div class=\"my-auto ml-1\">\n      {{ 'designer.misc.ms' | translate }}\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-amplitude' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.amplitude\"\n        style=\"width: 80px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"amplitudeMin\"\n        [max]=\"amplitudeMax\"\n        [step]=\"0.01\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.amplitude\" (ngModelChange)=\"setAmplitude($event); redraw()\" />\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-position' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.position\"\n        style=\"width: 80px; height: 18px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"percentageMin\"\n        [max]=\"percentageMax\"\n        [step]=\"0.01\"\n      >\n      </mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.position\" (ngModelChange)=\"setPosition($event); redraw()\" />\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-phase' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.phaseMillis\"\n        style=\"width: 80px; height: 18px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"phaseMillisMin\"\n        [max]=\"phaseMillisMax\"\n        [step]=\"1\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.phaseMillis\" (ngModelChange)=\"setPhaseMillis($event); redraw()\" />\n    </div>\n    <div class=\"my-auto ml-1\">\n      {{ 'designer.misc.ms' | translate }}\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-chase' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.phasingMillis\"\n        style=\"width: 80px; height: 18px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"phasingMillisMin\"\n        [max]=\"phasingMillisMax\"\n        [step]=\"1\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.phasingMillis\" (ngModelChange)=\"setPhasingMillis($event); redraw()\" />\n    </div>\n    <div class=\"my-auto ml-1\">\n      {{ 'designer.misc.ms' | translate }}\n    </div>\n  </div>\n</div>\n\n<!-- Menu for the capabilities and channels-->\n<div class=\"col col-auto p-0\" style=\"margin-right: 1px; width: 50px; float: left\">\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      id=\"v-pills-effect-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-effect-capabilities-{{ curve?.uuid }}\"\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      id=\"v-pills-effect-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-effect-channels-{{ curve?.uuid }}\"\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  </div>\n</div>\n\n<div class=\"h-100\" class=\"applying-to\">\n  <div class=\"tab-content h-100\" id=\"v-pills-tabContent\">\n    <div class=\"tab-pane h-100 show active\" id=\"v-pills-effect-capabilities-{{ curve?.uuid }}\" role=\"tabpanel\">\n      <!-- Capabilities-->\n      @for (capability of availableCapabilities; track $index; let i = $index) {\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"capability_{{ curve?.uuid + '_' + i }}\"\n          [ngModel]=\"capabilityChecked(capability)\"\n          (change)=\"toggleCapability($event, capability)\"\n        />\n        <label class=\"form-check-label\" for=\"capability_{{ curve?.uuid + '_' + i }}\">{{ getCapabilityName(capability) | async }}</label>\n      </div>\n      }\n    </div>\n    <div class=\"tab-pane h-100 show\" id=\"v-pills-effect-channels-{{ curve?.uuid }}\" role=\"tabpanel\">\n      <!-- channels -->\n\n      <!-- profile selection -->\n      @if (availableProfiles.length > 1) {\n      <div>\n        @for (profile of availableProfiles; track profile; let i = $index) {\n        <div class=\"form-check\">\n          <input\n            type=\"checkbox\"\n            class=\"form-check-input\"\n            id=\"channel_profile_{{ curve?.uuid }}_{{ profile.uuid }}\"\n            [ngModel]=\"selectedProfiles.indexOf(profile) >= 0\"\n            (change)=\"changeProfileSelection($event, profile)\"\n          />\n          <label class=\"form-check-label\" for=\"channel_profile_{{ curve?.uuid }}_{{ profile.uuid }}\">{{ profile.name }}</label>\n        </div>\n        }\n        <hr class=\"my-1\" style=\"border-color: white\" />\n      </div>\n      }\n\n      <!-- channels -->\n      @for (entry of availableChannels | keyvalue; track entry; let i = $index) { @for (channel of entry.value; track channel; let j =\n      $index) {\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"channel_{{ curve?.uuid }}_{{ i }}_{{ j }}\"\n          [ngModel]=\"channelChecked(entry.key, channel)\"\n          (change)=\"toggleChannel($event, entry.key, channel)\"\n        />\n        <label class=\"form-check-label\" for=\"channel_{{ curve?.uuid }}_{{ i }}_{{ j }}\">{{\n          getChannelName(entry.key.name, channel.name)\n        }}</label>\n      </div>\n      } }\n    </div>\n  </div>\n</div>\n", styles: [".curve-grid{background-color:#000;border:1px solid white}.applying-to{overflow-y:scroll;height:130px!important;background-color:#222;border:1px solid white;padding:.5rem}.applying-to .form-check:last-child{margin-bottom:.5rem}\n"] }]
+    }], () => [{ type: PresetService }, { type: AnimationService }, { type: FixtureService }, { type: i4.TranslateService }, { type: EffectService }, { type: i0.NgZone }], { curve: [{
             type: Input
         }], isSelected: [{
             type: Input
@@ -9483,9 +9606,9 @@ class EffectCurveComponent {
             type: ViewChild,
             args: ['curveGrid', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EffectCurveComponent, { className: "EffectCurveComponent", filePath: "lib/effect/effect-curve/effect-curve.component.ts", lineNumber: 20 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EffectCurveComponent, { className: "EffectCurveComponent", filePath: "lib/effect/effect-curve/effect-curve.component.ts", lineNumber: 21 }); })();
 
-const _c0$3 = ["panTiltGrid"];
+const _c0$4 = ["panTiltGrid"];
 class EffectPanTiltComponent {
     constructor() {
         this.points = [
@@ -9501,7 +9624,7 @@ class EffectPanTiltComponent {
     ngOnInit() { }
     static { this.ɵfac = function EffectPanTiltComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EffectPanTiltComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EffectPanTiltComponent, selectors: [["lib-app-effect-pan-tilt"]], viewQuery: function EffectPanTiltComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$3, 5);
+            i0.ɵɵviewQuery(_c0$4, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.panTiltGrid = _t.first);
@@ -9866,6 +9989,7 @@ class PresetSettingsComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PresetSettingsComponent, { className: "PresetSettingsComponent", filePath: "lib/preset/preset-settings/preset-settings.component.ts", lineNumber: 11 }); })();
 
+const _c0$3 = ["tree"];
 function PresetComponent_For_13_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 9);
@@ -9899,8 +10023,89 @@ 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,
+                name: 'root1',
+                isFolder: true,
+                children: [
+                    { id: 2, name: 'child1', isFolder: false },
+                    { id: 3, name: 'child2', isFolder: false },
+                ],
+            },
+            {
+                id: 4,
+                name: 'root1',
+                isFolder: true,
+                children: [
+                    { id: 5, name: 'child1', isFolder: false },
+                    { id: 6, name: 'child2', isFolder: false },
+                ],
+            },
+        ];
     }
     ngOnInit() { }
+    onActivate(event) {
+        console.log(event);
+    }
     selectPreset(index) {
         this.projectService.project.previewPreset = true;
         this.presetService.selectPreset(index);
@@ -9948,7 +10153,12 @@ class PresetComponent {
         });
     }
     static { this.ɵfac = function PresetComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PresetComponent)(i0.ɵɵdirectiveInject(PresetService), i0.ɵɵdirectiveInject(SceneService), i0.ɵɵdirectiveInject(ProjectService), i0.ɵɵdirectiveInject(IntroService), i0.ɵɵdirectiveInject(i1$1.BsModalService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PresetComponent, selectors: [["lib-app-preset"]], standalone: false, decls: 14, vars: 6, consts: [[1, "card", "border-secondary", "h-100", "panel", "card-intro-preset", "card-intro-active"], [1, "card-header", "d-flex"], [1, "ml-auto"], ["href", "#", 1, "btn", "btn-secondary", "m-0,", "p-0", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-minus-circle", "fa-fw"], ["aria-hidden", "true", 1, "fa", "fa-plus-circle", "fa-fw"], [1, "card-body", "h-100", "p-0"], [1, "list-group", 3, "sortablejs"], [1, "list-group-item", 3, "active-light", "active", "inactive-list-item"], [1, "list-group-item", 3, "click"], [1, "row", "d-flex", 2, "cursor", "pointer"], [1, "col-auto", "list-sort-handle", "my-auto", 2, "cursor", "move", "cursor", "-webkit-grabbing"], ["aria-hidden", "true", 1, "fa", "fa-bars"], [1, "form-check"], ["type", "checkbox", "id", "active", 1, "form-check-input", 3, "ngModelChange", "click", "disabled", "ngModel"], [1, "my-auto", "ml-auto", "mr-2", "d-flex"], ["type", "button", 1, "btn", "btn-secondary", "btn-sm", "py-0", "px-1", 3, "click"]], template: function PresetComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PresetComponent, selectors: [["lib-app-preset"]], viewQuery: function PresetComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$3, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tree = _t.first);
+        } }, standalone: false, decls: 14, vars: 6, consts: [[1, "card", "border-secondary", "h-100", "panel", "card-intro-preset", "card-intro-active"], [1, "card-header", "d-flex"], [1, "ml-auto"], ["href", "#", 1, "btn", "btn-secondary", "m-0,", "p-0", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-minus-circle", "fa-fw"], ["aria-hidden", "true", 1, "fa", "fa-plus-circle", "fa-fw"], [1, "card-body", "h-100", "p-0"], [1, "list-group", 3, "sortablejs"], [1, "list-group-item", 3, "active-light", "active", "inactive-list-item"], [1, "list-group-item", 3, "click"], [1, "row", "d-flex", 2, "cursor", "pointer"], [1, "col-auto", "list-sort-handle", "my-auto", 2, "cursor", "move", "cursor", "-webkit-grabbing"], ["aria-hidden", "true", 1, "fa", "fa-bars"], [1, "form-check"], ["type", "checkbox", "id", "active", 1, "form-check-input", 3, "ngModelChange", "click", "disabled", "ngModel"], [1, "my-auto", "ml-auto", "mr-2", "d-flex"], ["type", "button", 1, "btn", "btn-secondary", "btn-sm", "py-0", "px-1", 3, "click"]], template: function PresetComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div");
             i0.ɵɵtext(3);
             i0.ɵɵpipe(4, "translate");
@@ -9976,9 +10186,12 @@ class PresetComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PresetComponent, [{
         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    <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" }]
-    }], () => [{ type: PresetService }, { type: SceneService }, { type: ProjectService }, { type: IntroService }, { type: i1$1.BsModalService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PresetComponent, { className: "PresetComponent", filePath: "lib/preset/preset.component.ts", lineNumber: 16 }); })();
+        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" }]
+    }], () => [{ type: PresetService }, { type: SceneService }, { type: ProjectService }, { type: IntroService }, { type: i1$1.BsModalService }], { tree: [{
+            type: ViewChild,
+            args: ['tree']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PresetComponent, { className: "PresetComponent", filePath: "lib/preset/preset.component.ts", lineNumber: 17 }); })();
 
 class MasterDimmerComponent {
     constructor(projectService, changeDetectorRef, presetService) {
@@ -10542,7 +10755,7 @@ class FixtureChannelComponent {
             i0.ɵɵconditional(ctx.projectService.project.fixtures.length == 0 ? 3 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.projectService.project.fixtures.length > 0 && ctx.presetService.selectedPreset && ctx.presetService.selectedPreset.fixtures.length == 0 ? 4 : -1);
-        } }, dependencies: [i3$2.CheckboxControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, FixtureCapabilityChannelComponent, i8.KeyValuePipe, i4.TranslatePipe], encapsulation: 2 }); }
+        } }, dependencies: [i3$2.CheckboxControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, FixtureCapabilityChannelComponent, i9.KeyValuePipe, i4.TranslatePipe], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureChannelComponent, [{
         type: Component,
@@ -10633,7 +10846,7 @@ class IntroComponent {
             i0.ɵɵconditionalCreate(0, IntroComponent_Conditional_0_Template, 17, 13, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.introService.showIntro ? 0 : -1);
-        } }, dependencies: [i8.NgStyle, i4.TranslatePipe], styles: [".card[_ngcontent-%COMP%]{position:absolute;width:400px;height:350px!important;z-index:999999}"] }); }
+        } }, dependencies: [i9.NgStyle, i4.TranslatePipe], styles: [".card[_ngcontent-%COMP%]{position:absolute;width:400px;height:350px!important;z-index:999999}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IntroComponent, [{
         type: Component,
@@ -10821,7 +11034,7 @@ class DesignerComponent {
     set dropzoneChunking(value) {
         this.configService.dropzoneChunking = value;
     }
-    constructor(translateService, projectService, configService, fixturePoolService, hotkeyTargetExcludeService, modalService, userService, userEnsureLoginService, projectLoadService, warningDialogService, errorDialogService, fixtureService, timelineService, introService) {
+    constructor(translateService, projectService, configService, fixturePoolService, hotkeyTargetExcludeService, modalService, userService, userEnsureLoginService, projectLoadService, warningDialogService, errorDialogService, fixtureService, timelineService, introService, effectService) {
         this.translateService = translateService;
         this.projectService = projectService;
         this.configService = configService;
@@ -10836,6 +11049,7 @@ class DesignerComponent {
         this.fixtureService = fixtureService;
         this.timelineService = timelineService;
         this.introService = introService;
+        this.effectService = effectService;
         // the size of the menu used in the designer
         this.designerMenuSizePx = 20;
         this.splitGutterSizePx = 13;
@@ -10950,6 +11164,13 @@ class DesignerComponent {
         else {
             this.fixtureService.settingsSelection = false;
         }
+        if (tab === 'effects') {
+            this.effectService.effectsOpen = true;
+        }
+        else {
+            this.effectService.effectsOpen = false;
+        }
+        this.effectService.effectsOpenChanged.next();
         this.currentTab = tab;
     }
     openFixturePool() {
@@ -11056,7 +11277,7 @@ class DesignerComponent {
         this.translateService.use(language);
         localStorage.setItem('language', language);
     }
-    static { this.ɵfac = function DesignerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DesignerComponent)(i0.ɵɵdirectiveInject(i4.TranslateService), i0.ɵɵdirectiveInject(ProjectService), i0.ɵɵdirectiveInject(ConfigService), i0.ɵɵdirectiveInject(FixturePoolService), i0.ɵɵdirectiveInject(HotkeyTargetExcludeService), i0.ɵɵdirectiveInject(i1$1.BsModalService), i0.ɵɵdirectiveInject(UserService), i0.ɵɵdirectiveInject(UserEnsureLoginService), i0.ɵɵdirectiveInject(ProjectLoadService), i0.ɵɵdirectiveInject(WarningDialogService), i0.ɵɵdirectiveInject(ErrorDialogService), i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(TimelineService), i0.ɵɵdirectiveInject(IntroService)); }; }
+    static { this.ɵfac = function DesignerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DesignerComponent)(i0.ɵɵdirectiveInject(i4.TranslateService), i0.ɵɵdirectiveInject(ProjectService), i0.ɵɵdirectiveInject(ConfigService), i0.ɵɵdirectiveInject(FixturePoolService), i0.ɵɵdirectiveInject(HotkeyTargetExcludeService), i0.ɵɵdirectiveInject(i1$1.BsModalService), i0.ɵɵdirectiveInject(UserService), i0.ɵɵdirectiveInject(UserEnsureLoginService), i0.ɵɵdirectiveInject(ProjectLoadService), i0.ɵɵdirectiveInject(WarningDialogService), i0.ɵɵdirectiveInject(ErrorDialogService), i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(TimelineService), i0.ɵɵdirectiveInject(IntroService), i0.ɵɵdirectiveInject(EffectService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DesignerComponent, selectors: [["lib-designer"]], viewQuery: function DesignerComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(PreviewComponent, 5);
             i0.ɵɵviewQuery(TimelineComponent, 5);
@@ -11219,12 +11440,12 @@ class DesignerComponent {
             i0.ɵɵconditional(ctx.projectService.project ? 76 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.projectService.project ? 78 : -1);
-        } }, dependencies: [i3.RouterLinkActive, i8.NgStyle, i11.PopoverDirective, PreviewComponent, SceneComponent, TimelineComponent, FixtureComponent, FixtureCapabilityComponent, FixtureSettingsComponent, EffectComponent, PresetComponent, MasterDimmerComponent, FixtureChannelComponent, IntroComponent, i4.TranslatePipe], 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"], encapsulation: 2 }); }
+        } }, dependencies: [i3.RouterLinkActive, i9.NgStyle, i11.PopoverDirective, PreviewComponent, SceneComponent, TimelineComponent, FixtureComponent, FixtureCapabilityComponent, FixtureSettingsComponent, EffectComponent, PresetComponent, MasterDimmerComponent, FixtureChannelComponent, IntroComponent, i4.TranslatePipe], 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"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DesignerComponent, [{
         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"] }]
-    }], () => [{ type: i4.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 }], { menuHeightPx: [{
+    }], () => [{ type: i4.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 }], { menuHeightPx: [{
             type: Input
         }], externalCompositionsAvailable: [{
             type: Input
@@ -11260,7 +11481,7 @@ class DesignerComponent {
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DesignerComponent, { className: "DesignerComponent", filePath: "lib/designer.component.ts", lineNumber: 34 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DesignerComponent, { className: "DesignerComponent", filePath: "lib/designer.component.ts", lineNumber: 35 }); })();
 
 class DesignerModule {
     static { this.ɵfac = function DesignerModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DesignerModule)(); }; }
@@ -11278,7 +11499,8 @@ class DesignerModule {
             DropzoneModule,
             ToastrModule.forRoot({
                 newestOnTop: true,
-            })] }); }
+            }),
+            TreeModule] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DesignerModule, [{
         type: NgModule,
@@ -11339,6 +11561,7 @@ class DesignerModule {
                     ToastrModule.forRoot({
                         newestOnTop: true,
                     }),
+                    TreeModule,
                 ],
                 providers: [provideHttpClient(withInterceptorsFromDi())],
             }]
@@ -11389,7 +11612,7 @@ class DesignerModule {
         PopoverModule,
         TypeaheadModule,
         SortablejsModule,
-        DropzoneModule, i3$1.ToastrModule], exports: [DesignerComponent] }); })();
+        DropzoneModule, i3$1.ToastrModule, TreeModule], exports: [DesignerComponent] }); })();
 
 /*
  * Public API Surface of designer