@rocketshow/designer 1.63.0 → 1.64.0

package/assets/i18n/de.json

@@ -158,7 +158,9 @@
       "create-fixture-from-profile-file": "Von Profil-Datei erstellen",
       "create-from-local-profile": "Von Profil-Datei erstellen",
       "create-fixture-from-profile-file-dialog-title": "OFL Profil-Datei auswählen",
-      "invalid-fixture-profile-file": "Das ist keine gültige OFL Profil-Datei. Bitte wähle eine gültige OFL Profil-Datei."
+      "invalid-fixture-profile-file": "Das ist keine gültige OFL Profil-Datei. Bitte wähle eine gültige OFL Profil-Datei.",
+      "edit-universes": "Universen bearbeiten",
+      "edit-universes-title": "Universen bearbeiten"
     },
     "effect": {
       "add-new": "Neuen Effekt hinzufügen",

package/assets/i18n/en.json

@@ -157,7 +157,9 @@
       "profiles-update-error-title": "Update error",
       "create-fixture-from-profile-file": "Create from profile file",
       "create-fixture-from-profile-file-dialog-title": "Select an OFL profile file",
-      "invalid-fixture-profile-file": "This is not a valid OFL fixture profile file. Please select a valid profile file."
+      "invalid-fixture-profile-file": "This is not a valid OFL fixture profile file. Please select a valid profile file.",
+      "edit-universes": "Edit universes",
+      "edit-universes-title": "Edit universes"
     },
     "effect": {
       "add-new": "Add new Effect",

package/fesm2022/rocketshow-designer.mjs

@@ -24,9 +24,9 @@ import * as i5 from 'ngx-dropzone-wrapper';
 import { DropzoneModule } from 'ngx-dropzone-wrapper';
 import * as i3$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import Sortable from 'sortablejs';
 import * as i12 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
-import Sortable from 'sortablejs';
 import * as i10 from 'ngx-bootstrap/typeahead';
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import * as i4 from 'ngx-bootstrap-slider';
@@ -1900,7 +1900,7 @@ class FixtureService {
         // no free space left for the needed channels
         return -1;
     }
-    addFixture(profile, fixturePool) {
+    addFixture(profile, fixturePool, channelPool) {
         const fixture = new Fixture();
         fixture.uuid = this.uuidService.getUuid();
         fixture.profileUuid = profile.uuid;
@@ -1925,7 +1925,7 @@ class FixtureService {
         }
         const mode = this.getModeByFixture(profile, fixture);
         const channelCount = this.getModeChannelCount(profile, mode);
-        const firstChannel = this.getNextFreeDmxChannel(fixturePool, channelCount);
+        const firstChannel = this.getNextFreeDmxChannel(channelPool ?? fixturePool, channelCount);
         if (firstChannel >= 0) {
             fixture.dmxFirstChannel = firstChannel;
             fixturePool.push(fixture);
@@ -5386,6 +5386,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+class FixturePoolEditUniversesComponent {
+    constructor(bsModalRef, uuidService) {
+        this.bsModalRef = bsModalRef;
+        this.uuidService = uuidService;
+        this.universes = [];
+        this.newUniverseName = '';
+        this.onClose = new Subject();
+    }
+    addUniverse() {
+        const name = (this.newUniverseName || '').trim();
+        if (!name)
+            return;
+        this.universes.push({ uuid: this.uuidService.getUuid(), name });
+        this.newUniverseName = '';
+    }
+    removeUniverse(universe) {
+        const index = this.universes.findIndex((u) => u.uuid === universe.uuid);
+        if (index >= 0) {
+            this.universes.splice(index, 1);
+        }
+    }
+    ok() {
+        this.onClose.next(this.universes);
+        this.bsModalRef.hide();
+    }
+    cancel() {
+        this.onClose.next(undefined);
+        this.bsModalRef.hide();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FixturePoolEditUniversesComponent, deps: [{ token: i1$1.BsModalRef }, { token: UuidService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FixturePoolEditUniversesComponent, isStandalone: false, selector: "lib-fixture-pool-edit-universes", ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.fixture-pool.edit-universes-title' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"cancel()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <!-- Add universe -->\n  <div class=\"input-group mb-3\">\n    <input\n      type=\"text\"\n      class=\"form-control\"\n      maxlength=\"200\"\n      [(ngModel)]=\"newUniverseName\"\n      (keydown.enter)=\"addUniverse(); $event.stopPropagation(); $event.preventDefault()\"\n      placeholder=\"{{ 'designer.fixture-pool.universe-name' | translate }}\"\n    />\n    <div class=\"input-group-append\">\n      <button\n        type=\"button\"\n        class=\"btn btn-secondary\"\n        [disabled]=\"!newUniverseName || !newUniverseName.trim()\"\n        (click)=\"addUniverse()\"\n      >\n        <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n  </div>\n\n  <!-- Sortable universe list -->\n  <ul class=\"list-group\" [sortablejs]=\"universes\">\n    @for (universe of universes; track universe.uuid) {\n    <li class=\"list-group-item d-flex align-items-center py-1\">\n      <div class=\"list-sort-handle mr-2\" style=\"cursor: move; cursor: -webkit-grabbing\">\n        <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n      </div>\n      <span class=\"flex-grow-1\">{{ universe.name }}</span>\n      <button class=\"btn btn-primary btn-sm\" type=\"button\" (click)=\"removeUniverse(universe)\">\n        <i class=\"fa fa-minus\" aria-hidden=\"true\"></i>\n      </button>\n    </li>\n    }\n  </ul>\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: [""], dependencies: [{ kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SortablejsDirective, selector: "[sortablejs]", inputs: ["sortablejs", "sortablejsContainer", "sortablejsOptions"], outputs: ["sortablejsInit"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FixturePoolEditUniversesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-fixture-pool-edit-universes', standalone: false, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.fixture-pool.edit-universes-title' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"cancel()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <!-- Add universe -->\n  <div class=\"input-group mb-3\">\n    <input\n      type=\"text\"\n      class=\"form-control\"\n      maxlength=\"200\"\n      [(ngModel)]=\"newUniverseName\"\n      (keydown.enter)=\"addUniverse(); $event.stopPropagation(); $event.preventDefault()\"\n      placeholder=\"{{ 'designer.fixture-pool.universe-name' | translate }}\"\n    />\n    <div class=\"input-group-append\">\n      <button\n        type=\"button\"\n        class=\"btn btn-secondary\"\n        [disabled]=\"!newUniverseName || !newUniverseName.trim()\"\n        (click)=\"addUniverse()\"\n      >\n        <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n  </div>\n\n  <!-- Sortable universe list -->\n  <ul class=\"list-group\" [sortablejs]=\"universes\">\n    @for (universe of universes; track universe.uuid) {\n    <li class=\"list-group-item d-flex align-items-center py-1\">\n      <div class=\"list-sort-handle mr-2\" style=\"cursor: move; cursor: -webkit-grabbing\">\n        <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n      </div>\n      <span class=\"flex-grow-1\">{{ universe.name }}</span>\n      <button class=\"btn btn-primary btn-sm\" type=\"button\" (click)=\"removeUniverse(universe)\">\n        <i class=\"fa fa-minus\" aria-hidden=\"true\"></i>\n      </button>\n    </li>\n    }\n  </ul>\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" }]
+        }], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: UuidService }] });
+
 class FixturePoolComponent {
     constructor(bsModalRef, fixtureService, uuidService, projectService, previewService, translateService, toastrService, presetService, configService, modalService, livePreviewService) {
         this.bsModalRef = bsModalRef;
@@ -5407,48 +5444,41 @@ class FixturePoolComponent {
         // extend this list at runtime; otherwise it is provided by the host
         // application through the ConfigService.
         this.universes = [];
-        // Name buffer for the "add universe" input shown when freeUniverseEdit is true.
-        this.newUniverseName = '';
         this.fixturePool = structuredClone(this.projectService.project.fixtures);
         // Initialise the universe list from the config. We keep a local copy so
         // edits done in free-edit mode don't bleed into the config until the user
         // confirms with OK (see `ok()` below).
         this.universes = structuredClone(this.configService.universes || []);
-        if (this.fixturePool.length > 0) {
-            this.selectFixture(this.fixturePool[0]);
+        if (this.universes.length === 0 && this.configService.freeUniverseEdit) {
+            this.universes.push({ uuid: this.uuidService.getUuid(), name: 'Universe 1' });
+        }
+        if (this.universes.length > 0) {
+            this.selectedUniverse = this.universes[0];
+        }
+        const firstVisible = this.currentUniverseFixtures[0] ?? this.fixturePool[0];
+        if (firstVisible) {
+            this.selectFixture(firstVisible);
         }
     }
     get freeUniverseEdit() {
         return this.configService.freeUniverseEdit;
     }
-    addUniverse(name) {
-        const trimmed = (name || '').trim();
-        if (!trimmed) {
-            return;
-        }
-        const universe = {
-            uuid: this.uuidService.getUuid(),
-            name: trimmed,
-        };
-        this.universes.push(universe);
-        this.newUniverseName = '';
-        // If the currently selected fixture has no universe yet, auto-assign
-        // the freshly created one for convenience.
-        if (this.selectedFixture && !this.selectedFixture.dmxUniverseUuid) {
-            this.selectedFixture.dmxUniverseUuid = universe.uuid;
+    /** Fixtures belonging to the currently selected universe. */
+    get currentUniverseFixtures() {
+        if (!this.selectedUniverse) {
+            return this.fixturePool;
         }
+        return this.fixturePool.filter((f) => f.dmxUniverseUuid === this.selectedUniverse.uuid);
     }
-    removeUniverse(universe) {
-        const index = this.universes.findIndex((u) => u.uuid === universe.uuid);
-        if (index < 0) {
-            return;
-        }
-        this.universes.splice(index, 1);
-        // Clear the universe assignment from any fixture that referenced it.
-        for (const fixture of this.fixturePool) {
-            if (fixture.dmxUniverseUuid === universe.uuid) {
-                fixture.dmxUniverseUuid = undefined;
-            }
+    /** Fixtures used for channel-map calculations (same as currentUniverseFixtures). */
+    get channelFixtures() {
+        return this.currentUniverseFixtures;
+    }
+    selectUniverse(universe) {
+        this.selectedUniverse = universe;
+        // Deselect the current fixture if it doesn't belong to the new universe.
+        if (this.selectedFixture && this.selectedFixture.dmxUniverseUuid !== universe?.uuid) {
+            this.selectFixture(this.currentUniverseFixtures[0] ?? undefined);
         }
     }
     ngOnInit() {
@@ -5498,8 +5528,9 @@ class FixturePoolComponent {
         // minimal profile passed from the search.
         this.fixtureService.loadProfileByUuid(searchProfile.uuid).subscribe(() => {
             const profile = this.fixtureService.getProfileByUuid(searchProfile.uuid);
-            const newFixture = this.fixtureService.addFixture(profile, this.fixturePool);
+            const newFixture = this.fixtureService.addFixture(profile, this.fixturePool, this.currentUniverseFixtures);
             if (newFixture) {
+                newFixture.dmxUniverseUuid = this.selectedUniverse?.uuid;
                 this.selectFixture(newFixture);
             }
         });
@@ -5511,7 +5542,7 @@ class FixturePoolComponent {
         fixture.name = originalFixture.name;
         fixture.modeShortName = originalFixture.modeShortName;
         fixture.dmxFirstChannel = originalFixture.dmxFirstChannel;
-        fixture.dmxUniverseUuid = originalFixture.dmxUniverseUuid;
+        fixture.dmxUniverseUuid = this.selectedUniverse?.uuid;
         this.fixturePool.push(fixture);
         this.selectFixture(fixture);
     }
@@ -5525,8 +5556,8 @@ class FixturePoolComponent {
                 break;
             }
         }
-        if (!this.selectedFixture && this.fixturePool && this.fixturePool.length > 0) {
-            this.selectFixture((this.selectedFixture = this.fixturePool[0]));
+        if (!this.selectedFixture) {
+            this.selectFixture(this.currentUniverseFixtures[0] ?? undefined);
         }
         // remove unused profiles
         for (let i = 0; i < this.projectService.project.fixtureProfiles.length; i++) {
@@ -5543,7 +5574,7 @@ class FixturePoolComponent {
         }
     }
     channelOccupied(index) {
-        for (const fixture of this.fixturePool) {
+        for (const fixture of this.channelFixtures) {
             const profile = this.fixtureService.getProfileByUuid(fixture.profileUuid);
             const mode = this.fixtureService.getModeByFixture(profile, fixture);
             const channelCount = this.fixtureService.getModeChannelCount(profile, mode);
@@ -5554,7 +5585,7 @@ class FixturePoolComponent {
         return false;
     }
     channelOccupiedStart(index) {
-        for (const fixture of this.fixturePool) {
+        for (const fixture of this.channelFixtures) {
             if (index === fixture.dmxFirstChannel) {
                 return true;
             }
@@ -5562,7 +5593,7 @@ class FixturePoolComponent {
         return false;
     }
     channelOccupiedEnd(index) {
-        for (const fixture of this.fixturePool) {
+        for (const fixture of this.channelFixtures) {
             const profile = this.fixtureService.getProfileByUuid(fixture.profileUuid);
             const mode = this.fixtureService.getModeByFixture(profile, fixture);
             const channelCount = this.fixtureService.getModeChannelCount(profile, mode);
@@ -5573,8 +5604,11 @@ class FixturePoolComponent {
         return false;
     }
     channelOverlapped(index) {
+        return this.channelOverlappedInFixtures(index, this.channelFixtures);
+    }
+    channelOverlappedInFixtures(index, fixtures) {
         let occupiedFixture;
-        for (const fixture of this.fixturePool) {
+        for (const fixture of fixtures) {
             const profile = this.fixtureService.getProfileByUuid(fixture.profileUuid);
             const mode = this.fixtureService.getModeByFixture(profile, fixture);
             const channelCount = this.fixtureService.getModeChannelCount(profile, mode);
@@ -5599,7 +5633,7 @@ class FixturePoolComponent {
         let newSelectedFixture;
         // find a dragging fixture and select it, but don't change the selection, if the
         // currently selected fixture might also be selected (on overlapped fixtures)
-        for (const fixture of this.fixturePool) {
+        for (const fixture of this.channelFixtures) {
             const profile = this.fixtureService.getProfileByUuid(fixture.profileUuid);
             const mode = this.fixtureService.getModeByFixture(profile, fixture);
             const channelCount = this.fixtureService.getModeChannelCount(profile, mode);
@@ -5655,15 +5689,18 @@ class FixturePoolComponent {
         }
     }
     ok() {
-        // don't allow OK if overlapping fixtures exist
-        for (let i = 0; i < this.dmxChannels.length; i++) {
-            if (this.channelOverlapped(i)) {
-                const msg = 'designer.fixture-pool.channel-occupied';
-                const title = 'designer.fixture-pool.channel-occupied-title';
-                this.translateService.get([msg, title]).subscribe((result) => {
-                    this.toastrService.error(result[msg], result[title]);
-                });
-                return;
+        // don't allow OK if overlapping fixtures exist within any universe
+        for (const universe of this.universes) {
+            const universeFixtures = this.fixturePool.filter((f) => f.dmxUniverseUuid === universe.uuid);
+            for (let i = 0; i < this.dmxChannels.length; i++) {
+                if (this.channelOverlappedInFixtures(i, universeFixtures)) {
+                    const msg = 'designer.fixture-pool.channel-occupied';
+                    const title = 'designer.fixture-pool.channel-occupied-title';
+                    this.translateService.get([msg, title]).subscribe((result) => {
+                        this.toastrService.error(result[msg], result[title]);
+                    });
+                    return;
+                }
             }
         }
         // remove deleted fixtures/pixel keys from preset fixtures
@@ -5762,10 +5799,45 @@ class FixturePoolComponent {
             });
         });
     }
+    openEditUniverses() {
+        const ref = this.modalService.show(FixturePoolEditUniversesComponent, {
+            keyboard: true,
+            ignoreBackdropClick: false,
+            initialState: { universes: structuredClone(this.universes) },
+        });
+        ref.content.onClose.subscribe((result) => {
+            if (!result)
+                return;
+            // Clear fixture universe assignments for any removed universe
+            for (const universe of this.universes) {
+                if (!result.find((u) => u.uuid === universe.uuid)) {
+                    for (const fixture of this.fixturePool) {
+                        if (fixture.dmxUniverseUuid === universe.uuid) {
+                            fixture.dmxUniverseUuid = undefined;
+                        }
+                    }
+                }
+            }
+            this.universes = result;
+            // Re-anchor selectedUniverse to the new object reference from result.
+            // The modal works on a structuredClone, so all objects have new references.
+            const stillSelected = this.universes.find((u) => u.uuid === this.selectedUniverse?.uuid);
+            if (stillSelected) {
+                this.selectedUniverse = stillSelected;
+            }
+            else {
+                this.selectedUniverse = this.universes[0] ?? undefined;
+                this.selectFixture(this.currentUniverseFixtures[0] ?? undefined);
+            }
+        });
+    }
     createFixtureFromProfileFile() {
         const bsModalRef = this.modalService.show(FixturePoolCreateFromFileComponent, { keyboard: true, ignoreBackdropClick: false });
         bsModalRef.content.onClose.subscribe((profile) => {
-            const newFixture = this.fixtureService.addFixture(profile, this.fixturePool);
+            const newFixture = this.fixtureService.addFixture(profile, this.fixturePool, this.currentUniverseFixtures);
+            if (newFixture) {
+                newFixture.dmxUniverseUuid = this.selectedUniverse?.uuid;
+            }
             this.selectFixture(newFixture);
         });
     }
@@ -5773,11 +5845,11 @@ class FixturePoolComponent {
         this.ok();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FixturePoolComponent, deps: [{ token: i1$1.BsModalRef }, { token: FixtureService }, { token: UuidService }, { token: ProjectService }, { token: PreviewService }, { token: i2.TranslateService }, { token: i3$1.ToastrService }, { token: PresetService }, { token: ConfigService }, { token: i1$1.BsModalService }, { token: LivePreviewService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FixturePoolComponent, isStandalone: false, selector: "lib-app-fixture-pool", host: { listeners: { "window:mouseup": "mouseUp($event)", "document:keydown.enter": "handleKeyboardEvent($event)" } }, ngImport: i0, 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\n                class=\"custom-select\"\n                [disabled]=\"!selectedFixture || universes.length === 0\"\n                [ngModel]=\"selectedFixture?.dmxUniverseUuid\"\n                (ngModelChange)=\"selectedFixture && (selectedFixture.dmxUniverseUuid = $event)\"\n              >\n                @for (universe of universes; track universe.uuid) {\n                <option [ngValue]=\"universe.uuid\">{{ universe.name }}</option>\n                }\n              </select>\n            </div>\n          </div>\n\n          <!-- Free universe edit: let the user add/remove their own universes -->\n          @if (freeUniverseEdit) {\n          <div class=\"form-group row\">\n            <label class=\"col-lg-4 col-form-label\">{{ 'designer.fixture-pool.add-universe' | translate }}</label>\n            <div class=\"col-lg-8\">\n              <div class=\"input-group\">\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  maxlength=\"200\"\n                  [(ngModel)]=\"newUniverseName\"\n                  (keydown.enter)=\"addUniverse(newUniverseName); $event.stopPropagation(); $event.preventDefault()\"\n                  placeholder=\"{{ 'designer.fixture-pool.universe-name' | translate }}\"\n                />\n                <div class=\"input-group-append\">\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-secondary\"\n                    [disabled]=\"!newUniverseName || !newUniverseName.trim()\"\n                    (click)=\"addUniverse(newUniverseName)\"\n                  >\n                    <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n          @if (universes.length > 0) {\n          <div class=\"form-group row\">\n            <div class=\"col-lg-12\">\n              <ul class=\"list-group\">\n                @for (universe of universes; track universe.uuid) {\n                <li class=\"list-group-item d-flex justify-content-between align-items-center py-1\">\n                  <span>{{ universe.name }}</span>\n                  <a class=\"btn btn-primary btn-sm\" href=\"#\" role=\"button\" (click)=\"removeUniverse(universe); (false)\">\n                    <i class=\"fa fa-minus\" aria-hidden=\"true\"></i>\n                  </a>\n                </li>\n                }\n              </ul>\n            </div>\n          </div>\n          } }\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 $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"], dependencies: [{ kind: "directive", type: i3$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i12.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: SortablejsDirective, selector: "[sortablejs]", inputs: ["sortablejs", "sortablejsContainer", "sortablejsOptions"], outputs: ["sortablejsInit"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: ArraySortPipe, name: "sort" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FixturePoolComponent, isStandalone: false, selector: "lib-app-fixture-pool", host: { listeners: { "window:mouseup": "mouseUp($event)", "document:keydown.enter": "handleKeyboardEvent($event)" } }, ngImport: i0, 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              <div class=\"input-group\">\n                <select\n                  class=\"custom-select\"\n                  [disabled]=\"universes.length === 0\"\n                  [ngModel]=\"selectedUniverse\"\n                  (ngModelChange)=\"selectUniverse($event)\"\n                >\n                  @for (universe of universes; track universe.uuid) {\n                  <option [ngValue]=\"universe\">{{ universe.name }}</option>\n                  }\n                </select>\n                @if (freeUniverseEdit) {\n                <div class=\"input-group-append\">\n                  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"openEditUniverses()\">\n                    <i class=\"fa fa-pencil\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n                }\n              </div>\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 currentUniverseFixtures; 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;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.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"], dependencies: [{ kind: "directive", type: i3$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i12.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: SortablejsDirective, selector: "[sortablejs]", inputs: ["sortablejs", "sortablejsContainer", "sortablejsOptions"], outputs: ["sortablejsInit"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: ArraySortPipe, name: "sort" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FixturePoolComponent, decorators: [{
             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\n                class=\"custom-select\"\n                [disabled]=\"!selectedFixture || universes.length === 0\"\n                [ngModel]=\"selectedFixture?.dmxUniverseUuid\"\n                (ngModelChange)=\"selectedFixture && (selectedFixture.dmxUniverseUuid = $event)\"\n              >\n                @for (universe of universes; track universe.uuid) {\n                <option [ngValue]=\"universe.uuid\">{{ universe.name }}</option>\n                }\n              </select>\n            </div>\n          </div>\n\n          <!-- Free universe edit: let the user add/remove their own universes -->\n          @if (freeUniverseEdit) {\n          <div class=\"form-group row\">\n            <label class=\"col-lg-4 col-form-label\">{{ 'designer.fixture-pool.add-universe' | translate }}</label>\n            <div class=\"col-lg-8\">\n              <div class=\"input-group\">\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  maxlength=\"200\"\n                  [(ngModel)]=\"newUniverseName\"\n                  (keydown.enter)=\"addUniverse(newUniverseName); $event.stopPropagation(); $event.preventDefault()\"\n                  placeholder=\"{{ 'designer.fixture-pool.universe-name' | translate }}\"\n                />\n                <div class=\"input-group-append\">\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-secondary\"\n                    [disabled]=\"!newUniverseName || !newUniverseName.trim()\"\n                    (click)=\"addUniverse(newUniverseName)\"\n                  >\n                    <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n          @if (universes.length > 0) {\n          <div class=\"form-group row\">\n            <div class=\"col-lg-12\">\n              <ul class=\"list-group\">\n                @for (universe of universes; track universe.uuid) {\n                <li class=\"list-group-item d-flex justify-content-between align-items-center py-1\">\n                  <span>{{ universe.name }}</span>\n                  <a class=\"btn btn-primary btn-sm\" href=\"#\" role=\"button\" (click)=\"removeUniverse(universe); (false)\">\n                    <i class=\"fa fa-minus\" aria-hidden=\"true\"></i>\n                  </a>\n                </li>\n                }\n              </ul>\n            </div>\n          </div>\n          } }\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 $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"] }]
+            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              <div class=\"input-group\">\n                <select\n                  class=\"custom-select\"\n                  [disabled]=\"universes.length === 0\"\n                  [ngModel]=\"selectedUniverse\"\n                  (ngModelChange)=\"selectUniverse($event)\"\n                >\n                  @for (universe of universes; track universe.uuid) {\n                  <option [ngValue]=\"universe\">{{ universe.name }}</option>\n                  }\n                </select>\n                @if (freeUniverseEdit) {\n                <div class=\"input-group-append\">\n                  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"openEditUniverses()\">\n                    <i class=\"fa fa-pencil\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n                }\n              </div>\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 currentUniverseFixtures; 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;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.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"] }]
         }], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: FixtureService }, { type: UuidService }, { type: ProjectService }, { type: PreviewService }, { type: i2.TranslateService }, { type: i3$1.ToastrService }, { type: PresetService }, { type: ConfigService }, { type: i1$1.BsModalService }, { type: LivePreviewService }], propDecorators: { mouseUp: [{
                 type: HostListener,
                 args: ['window:mouseup', ['$event']]
@@ -8691,6 +8763,7 @@ class DesignerModule {
             SceneSettingsComponent,
             ProjectSaveComponent,
             FixturePoolCreateFromFileComponent,
+            FixturePoolEditUniversesComponent,
             DropzoneComponent,
             SortablejsDirective], imports: [i3.RouterModule, BrowserModule,
             BrowserAnimationsModule,
@@ -8757,6 +8830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         SceneSettingsComponent,
                         ProjectSaveComponent,
                         FixturePoolCreateFromFileComponent,
+                        FixturePoolEditUniversesComponent,
                         DropzoneComponent,
                         SortablejsDirective,
                     ],