@smarterplan/ngx-smarterplan-locations 0.2.1 → 0.2.3

package/fesm2020/smarterplan-ngx-smarterplan-locations.mjs

@@ -1705,11 +1705,17 @@ function buttonIsInSelection(button, selection) {
  * Styles the button that represents a sweep on the plan: green-added to zone, red -not added
  * @param button HTMLButtonElement, button on the plan,
  * @param isAdded boolean, if the sweep added to the zone
+ * @param isOccupied boolean, if the sweep added to any other zone (but not current)
  */
-function styleButton(button, isAdded = false) {
-    button.style.backgroundImage = isAdded
-        ? `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`
-        : `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`;
+function styleButton(button, isAdded = false, isOccupied = false) {
+    if (isOccupied) {
+        button.style.backgroundImage = `url("https://api.iconify.design/mdi:adjust.svg?color=orange&height=17&width=17")`;
+    }
+    else {
+        button.style.backgroundImage = isAdded
+            ? `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`
+            : `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`;
+    }
     button.style.backgroundColor = "transparent";
     button.style.position = "absolute";
     button.style.border = "none";
@@ -1838,7 +1844,6 @@ class SweepPlanSelectionComponent {
     }
     ngOnChanges() {
         if (this.chosenPlan) {
-            console.log("coucou changes, update", this.navIDsZoneEdit.length);
             this.chosenScansOnPlan = [];
             this.clearDivPlan();
             this.addScanPoints();
@@ -1868,6 +1873,9 @@ class SweepPlanSelectionComponent {
                     this.chosenScansOnPlan.push(element.id);
                 }
             }
+            else if (this.occupiedSweeps && this.occupiedSweeps.includes(element.id)) {
+                styleButton(element, false, true);
+            }
             else {
                 styleButton(element);
             }
@@ -2062,15 +2070,20 @@ class SweepPlanSelectionComponent {
      * @param button
      */
     onButtonScanClicked(button) {
-        button.style.backgroundImage = buttonIsChosen(button)
-            ? `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`
-            : `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`;
-        if (buttonIsChosen(button)) {
-            if (!this.chosenScansOnPlan.includes(button.id)) {
-                this.chosenScansOnPlan.push(button.id);
-            }
+        if (!this.chosenScansOnPlan.includes(button.id)) {
+            // add to selection
+            button.style.backgroundImage = `url("https://api.iconify.design/mdi:adjust.svg?color=green&height=17&width=17")`;
+            this.chosenScansOnPlan.push(button.id);
         }
-        else if (this.chosenScansOnPlan.includes(button.id)) {
+        else {
+            // remove from selection
+            if (this.occupiedSweeps.includes(button.id) && !this.navIDsZoneEdit.includes(button.id)) {
+                // the sweep belongs to another zone => set orange
+                button.style.backgroundImage = `url("https://api.iconify.design/mdi:adjust.svg?color=orange&height=17&width=17")`;
+            }
+            else {
+                button.style.backgroundImage = `url("https://api.iconify.design/mdi:close-circle-outline.svg?color=red&height=17&width=17")`;
+            }
             const index = this.chosenScansOnPlan.indexOf(button.id);
             this.chosenScansOnPlan.splice(index, 1);
         }
@@ -2083,7 +2096,7 @@ class SweepPlanSelectionComponent {
     }
 }
 SweepPlanSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SweepPlanSelectionComponent, deps: [{ token: i2.ZoneService }, { token: i2.NavigationService }, { token: i2.PlanService }], target: i0.ɵɵFactoryTarget.Component });
-SweepPlanSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: { spaceID: "spaceID", chosenScansOnPlan: "chosenScansOnPlan", newZoneData: "newZoneData", navIDsZoneEdit: "navIDsZoneEdit" }, outputs: { sweepsSelected: "sweepsSelected" }, usesOnChanges: true, ngImport: i0, template: "<div ngbDropdown class=\"row d-inline-block\">\r\n    <div class=\"col-sm-3\" *ngIf=\"plans\">\r\n            <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                ngbDropdownToggle>{{chosenPlan ?\r\n                chosenPlan.name : ('Choose Plan' | translate) }}</button>\r\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                <button type=\"button\" ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\"\r\n                    [disabled]=\"!plan.calibration\">{{ plan.name }}\r\n                </button>\r\n            </div>\r\n    </div>\r\n</div>\r\n<div class=\"row\">\r\n    <lib-selection class=\"col-md-8\" (onSelectionChanged)=\"onSelectionChanged($event)\">\r\n        <div class=\"selectZone\" oncontextmenu=\"return false;\">\r\n            <div class=\"row\">\r\n                <div style=\"overflow: hidden;width:100%;\">\r\n                    <div style=\"height: 400px; width: 100%;\" id=\"planDiv\">\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </lib-selection>\r\n    \r\n    <div class=\"col-md-4 scanTool\" *ngIf=\"buttonElements.length > 0\">\r\n        <div class=\"row mb-4 d-inline-block\">\r\n            <h2>{{'selectTool.title' | translate}}</h2>\r\n            <div class=\"protip\">{{'selectTool.tip' | translate}}.</div>\r\n        </div>\r\n    \r\n        <div class=\"row mb-4\">\r\n            <div class=\"col-3\" style=\"padding:0px\">\r\n                <label class=\"tool-label\" for=\"scanSize\">{{'selectTool.size' | translate}}</label>\r\n            </div>\r\n            <div class=\"col-9\">\r\n                <input type=\"range\" class=\"form-range\" min=\"0.001\" max=\"5\" step=\"0.01\" value=\"1\"\r\n                    id=\"scanSize\" (input)=\"onChangeScanSize($event)\">\r\n            </div>\r\n        </div>\r\n    \r\n        <div class=\"row mb-4\">\r\n            <button class=\"btn btn-primary rounded-pill\" (click)=\"onSelectAll()\">{{'selectTool.selectAll' | translate}}</button>\r\n        </div>\r\n    \r\n        <div *ngIf=\"buttonsInSelection.length > 0\" class=\"edit-selected\">\r\n            <span class=\"tool-label\">{{'selectTool.edit' | translate}} : </span>\r\n            <div class=\"row\">\r\n                <button class=\"btn rounded-pill btn-primary ms-3 me-2\" (click)=\"onSelectionAdd()\">{{'selectTool.add' | translate}}</button>\r\n                <button class=\"btn btn-primary rounded-pill\" (click)=\"onSelectionRemove()\">{{'selectTool.undo' | translate}}</button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row mb-4\">\r\n            <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n        </div>\r\n    \r\n        <div class=\"row mb-4\">\r\n            <button class=\"btn btn-primary rounded-pill\" (click)=\"onSaveSelection()\">{{'selectTool.saveSelection' | translate}}</button>\r\n            <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'selectTool.cancelSelection' | translate}}</button>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n   \r\n", styles: [".selectZone{background-color:gray;border-radius:1rem;overflow:hidden}.scanTool{margin:0px 1rem}.protip{color:gray;padding:0}.tool-label{font-size:1rem}\n"], components: [{ type: SelectionComponent, selector: "lib-selection", outputs: ["onSelectionChanged"] }], directives: [{ type: i3$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i3$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe } });
+SweepPlanSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: { spaceID: "spaceID", chosenScansOnPlan: "chosenScansOnPlan", newZoneData: "newZoneData", navIDsZoneEdit: "navIDsZoneEdit", occupiedSweeps: "occupiedSweeps" }, outputs: { sweepsSelected: "sweepsSelected" }, usesOnChanges: true, ngImport: i0, template: "<div ngbDropdown class=\"row d-inline-block\">\r\n    <div class=\"col-sm-3\" *ngIf=\"plans\">\r\n            <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                ngbDropdownToggle>{{chosenPlan ?\r\n                chosenPlan.name : ('Choose Plan' | translate) }}</button>\r\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                <button type=\"button\" ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\"\r\n                    [disabled]=\"!plan.calibration\">{{ plan.name }}\r\n                </button>\r\n            </div>\r\n    </div>\r\n</div>\r\n<div class=\"row\">\r\n    <lib-selection class=\"col-md-8\" (onSelectionChanged)=\"onSelectionChanged($event)\">\r\n        <div class=\"selectZone\" oncontextmenu=\"return false;\">\r\n            <div class=\"row\">\r\n                <div style=\"overflow: hidden;width:100%;\">\r\n                    <div style=\"height: 400px; width: 100%;\" id=\"planDiv\">\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </lib-selection>\r\n    \r\n    <div class=\"col-md-4 scanTool\" *ngIf=\"buttonElements.length > 0\">\r\n        <div class=\"row mb-4 d-inline-block\">\r\n            <h2>{{'selectTool.title' | translate}}</h2>\r\n            <div class=\"protip\">{{'selectTool.tip' | translate}}.</div>\r\n        </div>\r\n    \r\n        <div class=\"row mb-4\">\r\n            <div class=\"col-3\" style=\"padding:0px\">\r\n                <label class=\"tool-label\" for=\"scanSize\">{{'selectTool.size' | translate}}</label>\r\n            </div>\r\n            <div class=\"col-9\">\r\n                <input type=\"range\" class=\"form-range\" min=\"0.001\" max=\"5\" step=\"0.01\" value=\"1\"\r\n                    id=\"scanSize\" (input)=\"onChangeScanSize($event)\">\r\n            </div>\r\n        </div>\r\n    \r\n        <div class=\"row mb-4\">\r\n            <button class=\"btn btn-primary rounded-pill\" (click)=\"onSelectAll()\">{{'selectTool.selectAll' | translate}}</button>\r\n        </div>\r\n    \r\n        <div *ngIf=\"buttonsInSelection.length > 0\" class=\"edit-selected\">\r\n            <span class=\"tool-label\">{{'selectTool.edit' | translate}} : </span>\r\n            <div class=\"row\">\r\n                <button class=\"btn rounded-pill btn-primary ms-3 me-2\" (click)=\"onSelectionAdd()\">{{'selectTool.add' | translate}}</button>\r\n                <button class=\"btn btn-primary rounded-pill\" (click)=\"onSelectionRemove()\">{{'selectTool.undo' | translate}}</button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row mb-4\">\r\n            <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n        </div>\r\n    \r\n        <div class=\"row mb-4\">\r\n            <button class=\"btn btn-primary rounded-pill\" (click)=\"onSaveSelection()\">{{'selectTool.saveSelection' | translate}}</button>\r\n            <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'selectTool.cancelSelection' | translate}}</button>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n   \r\n", styles: [".selectZone{background-color:gray;border-radius:1rem;overflow:hidden}.scanTool{margin:0px 1rem}.protip{color:gray;padding:0}.tool-label{font-size:1rem}\n"], components: [{ type: SelectionComponent, selector: "lib-selection", outputs: ["onSelectionChanged"] }], directives: [{ type: i3$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i3$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SweepPlanSelectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-sweep-plan-selection', template: "<div ngbDropdown class=\"row d-inline-block\">\r\n    <div class=\"col-sm-3\" *ngIf=\"plans\">\r\n            <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                ngbDropdownToggle>{{chosenPlan ?\r\n                chosenPlan.name : ('Choose Plan' | translate) }}</button>\r\n            <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                <button type=\"button\" ngbDropdownItem *ngFor=\"let plan of plans\" (click)=\"onPlanClick(plan)\"\r\n                    [disabled]=\"!plan.calibration\">{{ plan.name }}\r\n                </button>\r\n            </div>\r\n    </div>\r\n</div>\r\n<div class=\"row\">\r\n    <lib-selection class=\"col-md-8\" (onSelectionChanged)=\"onSelectionChanged($event)\">\r\n        <div class=\"selectZone\" oncontextmenu=\"return false;\">\r\n            <div class=\"row\">\r\n                <div style=\"overflow: hidden;width:100%;\">\r\n                    <div style=\"height: 400px; width: 100%;\" id=\"planDiv\">\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </lib-selection>\r\n    \r\n    <div class=\"col-md-4 scanTool\" *ngIf=\"buttonElements.length > 0\">\r\n        <div class=\"row mb-4 d-inline-block\">\r\n            <h2>{{'selectTool.title' | translate}}</h2>\r\n            <div class=\"protip\">{{'selectTool.tip' | translate}}.</div>\r\n        </div>\r\n    \r\n        <div class=\"row mb-4\">\r\n            <div class=\"col-3\" style=\"padding:0px\">\r\n                <label class=\"tool-label\" for=\"scanSize\">{{'selectTool.size' | translate}}</label>\r\n            </div>\r\n            <div class=\"col-9\">\r\n                <input type=\"range\" class=\"form-range\" min=\"0.001\" max=\"5\" step=\"0.01\" value=\"1\"\r\n                    id=\"scanSize\" (input)=\"onChangeScanSize($event)\">\r\n            </div>\r\n        </div>\r\n    \r\n        <div class=\"row mb-4\">\r\n            <button class=\"btn btn-primary rounded-pill\" (click)=\"onSelectAll()\">{{'selectTool.selectAll' | translate}}</button>\r\n        </div>\r\n    \r\n        <div *ngIf=\"buttonsInSelection.length > 0\" class=\"edit-selected\">\r\n            <span class=\"tool-label\">{{'selectTool.edit' | translate}} : </span>\r\n            <div class=\"row\">\r\n                <button class=\"btn rounded-pill btn-primary ms-3 me-2\" (click)=\"onSelectionAdd()\">{{'selectTool.add' | translate}}</button>\r\n                <button class=\"btn btn-primary rounded-pill\" (click)=\"onSelectionRemove()\">{{'selectTool.undo' | translate}}</button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row mb-4\">\r\n            <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n        </div>\r\n    \r\n        <div class=\"row mb-4\">\r\n            <button class=\"btn btn-primary rounded-pill\" (click)=\"onSaveSelection()\">{{'selectTool.saveSelection' | translate}}</button>\r\n            <button class=\"btn btn-outline-primary rounded-pill\" (click)=\"onCancel()\">{{'selectTool.cancelSelection' | translate}}</button>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n   \r\n", styles: [".selectZone{background-color:gray;border-radius:1rem;overflow:hidden}.scanTool{margin:0px 1rem}.protip{color:gray;padding:0}.tool-label{font-size:1rem}\n"] }]
@@ -2095,6 +2108,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }], navIDsZoneEdit: [{
                 type: Input
+            }], occupiedSweeps: [{
+                type: Input
             }], sweepsSelected: [{
                 type: Output
             }] } });
@@ -2357,7 +2372,7 @@ class AddZoneComponent {
     }
 }
 AddZoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AddZoneComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.ZoneService }, { token: i2.LayerService }, { token: i2.BaseUserService }, { token: i2.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-AddZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AddZoneComponent, selector: "lib-add-zone", inputs: { zoneEdit: "zoneEdit", spaceID: "spaceID", images360: "images360", navigationIDs: "navigationIDs", zones: "zones", newZoneData: "newZoneData", chosenPlan: "chosenPlan", isMuseumVisit: "isMuseumVisit", defaultZone: "defaultZone" }, outputs: { updatedZone: "updatedZone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\" *ngIf=\"zoneForm\">\r\n    <div class=\"col-7\">\r\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" required formControlName=\"name\">\r\n                    <!-- <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Multiple Floors' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"multipleFloors\" \r\n                    (change)=\"onChangeMultipleFloors()\" [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <!-- <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div> -->\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3 mt-3\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'Choose scan points from gallery' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'add-all-scans' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div> -->\r\n\r\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\r\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\r\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\r\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\">{{'Save' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [newZoneData]=\"newZoneData\" [spaceID]=\"spaceID\"\r\n        [navIDsZoneEdit]=\"navIDsZoneEdit\" (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>", styles: [".main-container{display:flex;flex-direction:column}.edit-plan{display:flex;margin:8px 0}.form-range{width:100%}h2{color:var(--smarterplan-primary);padding:0}.col-form-label{margin-bottom:1rem}.btn-outline-primary{margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}.row{margin:0}p{margin:0;padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px)}\n"], components: [{ type: CarouselComponent, selector: "lib-carousel", inputs: ["images"], outputs: ["currentScan"] }, { type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: ["spaceID", "chosenScansOnPlan", "newZoneData", "navIDsZoneEdit"], outputs: ["sweepsSelected"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$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]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe } });
+AddZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AddZoneComponent, selector: "lib-add-zone", inputs: { zoneEdit: "zoneEdit", spaceID: "spaceID", images360: "images360", navigationIDs: "navigationIDs", zones: "zones", newZoneData: "newZoneData", chosenPlan: "chosenPlan", isMuseumVisit: "isMuseumVisit", defaultZone: "defaultZone" }, outputs: { updatedZone: "updatedZone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main-container\" *ngIf=\"zoneForm\">\r\n    <div class=\"col-7\">\r\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" required formControlName=\"name\">\r\n                    <!-- <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Multiple Floors' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"multipleFloors\" \r\n                    (change)=\"onChangeMultipleFloors()\" [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <!-- <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div> -->\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3 mt-3\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'Choose scan points from gallery' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'add-all-scans' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div> -->\r\n\r\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\r\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\r\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\r\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\">{{'Save' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [newZoneData]=\"newZoneData\" [spaceID]=\"spaceID\"\r\n        [navIDsZoneEdit]=\"navIDsZoneEdit\" (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>", styles: [".main-container{display:flex;flex-direction:column}.edit-plan{display:flex;margin:8px 0}.form-range{width:100%}h2{color:var(--smarterplan-primary);padding:0}.col-form-label{margin-bottom:1rem}.btn-outline-primary{margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}.row{margin:0}p{margin:0;padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px)}\n"], components: [{ type: CarouselComponent, selector: "lib-carousel", inputs: ["images"], outputs: ["currentScan"] }, { type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: ["spaceID", "chosenScansOnPlan", "newZoneData", "navIDsZoneEdit", "occupiedSweeps"], outputs: ["sweepsSelected"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$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]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AddZoneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-add-zone', template: "<div class=\"main-container\" *ngIf=\"zoneForm\">\r\n    <div class=\"col-7\">\r\n        <form (ngSubmit)=\"onSubmitZone()\" [formGroup]=\"zoneForm\">\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" required formControlName=\"name\">\r\n                    <!-- <div class=\"invalid-feedback\">\r\n                        {{'A name is required' | translate}}\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!isMuseumVisit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Type of zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"layerID\">\r\n                        <option value=\"null\" selected disabled hidden> {{ zoneEdit && zoneEdit.layer ?\r\n                            zoneEdit.layer.name : 'Choose type'}}</option>\r\n                        <option *ngFor=\"let layer of layers\" [value]=\"layer.id\">\r\n                            {{ layer.name }}\r\n                        </option>\r\n                    </select>\r\n                    <p class=\"mt-1 new-type-text\">{{'or add new type of zone' | translate }}</p>\r\n                    <input type=\"text\" class=\"form-control new-type-input\" formControlName=\"newLayer\">\r\n                </div>\r\n            </div>\r\n            <!--If Editing Zone possibility to assign it to museum itinerary-->\r\n            <div class=\"mb-3 row\" *ngIf=\"zoneEdit && !zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Museum Itinerary' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"isMuseumVisit\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{ 'Multiple Floors' | translate }}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"multipleFloors\" \r\n                    (change)=\"onChangeMultipleFloors()\" [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Surface' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <input type=\"text\" class=\"form-control\" formControlName=\"surface\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Parent zone' | translate}}</label>\r\n                <div class=\"col-sm-10\">\r\n                    <select class=\"form-control\" formControlName=\"parentID\">\r\n                        <option *ngFor=\"let zone of parentZones\" [ngValue]=\"zone.id\">\r\n                            {{ zone.name }}\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mb-3 row\" style=\"max-height: 200px; overflow: auto;\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <label class=\"col-sm-2 col-form-label\">{{'Scan Points' | translate}}</label>\r\n                <!-- <p class=\"col-sm-2\" *ngIf=\"zoneEdit\">{{ zoneEdit.sweepIDs.length }} scans</p> -->\r\n                <p class=\"col\" *ngIf=\"chosenScansOnPlan.length === 0 && chosenScans.length === 0\">\r\n                    {{'No scan points chosen' | translate}}</p>\r\n                <div class=\"col-sm-5\" *ngIf=\"chosenScansOnPlan && chosenScansOnPlan.length > 0\">\r\n                    <p>{{ chosenScansOnPlan.length }} {{'scan points chosen' | translate}}</p>\r\n                    <!-- <div *ngFor=\"let scan of chosenScansOnPlan\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ scan | slice:0:8 }}</p>\r\n                            <div (click)=\"onRemoveScanPlan(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div> -->\r\n                </div>\r\n                <div class=\"col-sm-5\" *ngIf=\"carouselIsVisible && chosenScans && chosenScans.length > 0\">\r\n                    <p>{{ chosenScans.length }} {{'scan points chosen' | translate}}</p>\r\n                    <div *ngFor=\"let scan of chosenScans\">\r\n                        <div class=\"row\">\r\n                            <p class=\"me-2\">{{ images360[scan].filename }}</p>\r\n                            <div (click)=\"onRemoveScanImage(scan)\" [style.cursor]=\"'pointer'\">\r\n                                <span class=\"iconify\" data-icon=\"mdi:trash-can-outline\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3 mt-3\" *ngIf=\"!zoneIsMatterportFloor\">\r\n                <div class=\"col\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"toggleCarousel()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'Choose scan points from gallery' | translate}}</button>\r\n                    <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"onAddAll()\"\r\n                        [disabled]=\"fromPlan || !images360 || images360.length === 0\">\r\n                        {{'add-all-scans' | translate}}</button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- <div class=\"mb-3 row\">\r\n                <label class=\"col-sm-3 col-form-label\">{{'No visible scan points' | translate}}</label>\r\n                <div class=\"col-sm-3\">\r\n                    <input class=\"checkbox-apply mt-3\" type=\"checkbox\" [(ngModel)]=\"noScanPoints\"\r\n                        [ngModelOptions]=\"{standalone: true}\">\r\n                </div>\r\n            </div> -->\r\n\r\n            <div *ngIf=\"carouselIsVisible\" class=\"mb-2\">\r\n                <lib-carousel *ngIf=\"images360 && images360.length > 0\" [images]=\"images360\"\r\n                    (currentScan)=\"currentScanShowing=$event\"></lib-carousel>\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2 mt-3\"\r\n                    (click)=\"onAddScan()\">{{'Add to zone' | translate}}</button>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\">{{'Save' | translate}}</button>\r\n                <button type=\"button\" (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [newZoneData]=\"newZoneData\" [spaceID]=\"spaceID\"\r\n        [navIDsZoneEdit]=\"navIDsZoneEdit\" (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>", styles: [".main-container{display:flex;flex-direction:column}.edit-plan{display:flex;margin:8px 0}.form-range{width:100%}h2{color:var(--smarterplan-primary);padding:0}.col-form-label{margin-bottom:1rem}.btn-outline-primary{margin-right:1rem}.new-type-input{margin-bottom:1rem}.new-type-text{margin-bottom:.5rem}.row{margin:0}p{margin:0;padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px)}\n"] }]
@@ -2398,6 +2413,7 @@ class AddAudioZoneComponent {
         this.chosenScansOnPlan = [];
         this.isAddingAudio = false;
         this.scansModified = false;
+        this.occupiedSweeps = [];
     }
     ngOnInit() {
         if (this.currentAudioZone) {
@@ -2417,6 +2433,7 @@ class AddAudioZoneComponent {
             this.audioLayer = await this.layerService.createLayerForOrganisation("AUDIO", this.currentOrgId);
         }
         this.audioZones = this.zones.filter((zone) => zone.layerID === this.audioLayer.id);
+        this.occupiedSweeps = this.audioZones.flatMap((zone) => zone.sweepIDs);
         await this.getAudios();
         this.commentForm = this.fb.group({
             title: [null, Validators.required],
@@ -2432,6 +2449,7 @@ class AddAudioZoneComponent {
                 id: this.currentAudioZone.id,
                 sweepIDs: this.chosenScansOnPlan,
             });
+            await this.removeTakenSweepsFromOtherZones();
             this.updatedZone.emit(this.currentAudioZone.id);
         }
         else {
@@ -2449,7 +2467,8 @@ class AddAudioZoneComponent {
                 await this.setSweepsAndNodeForZoneInput(zoneInput);
                 await this.zoneService
                     .create(zoneInput)
-                    .then(zoneCreated => {
+                    .then(async (zoneCreated) => {
+                    await this.removeTakenSweepsFromOtherZones();
                     this.updatedZone.emit(zoneCreated.id);
                 });
             }
@@ -2514,15 +2533,28 @@ class AddAudioZoneComponent {
         this.currentAudioZone = this.audioZones.find((zone) => zone.audioID === this.chosenAudio.id);
         if (this.currentAudioZone) {
             this.chosenScansOnPlan = this.currentAudioZone.sweepIDs;
-            console.log("upd track", this.chosenScansOnPlan.length);
         }
     }
+    /**
+     * Removes newly selected sweeps for current zone (they are in chosenScansOnPlan) from other audio zones.
+     * Rule: one sweep = one audio.
+     */
+    async removeTakenSweepsFromOtherZones() {
+        await Promise.all(this.audioZones.map(async (zone) => {
+            if (zone.id !== this.currentAudioZone.id) {
+                const newSweeps = zone.sweepIDs.filter((sweepID) => !this.chosenScansOnPlan.includes(sweepID));
+                if (newSweeps.length !== zone.sweepIDs.length) {
+                    await this.zoneService.updateZone({ id: zone.id, sweepIDs: newSweeps });
+                }
+            }
+        }));
+    }
 }
 AddAudioZoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AddAudioZoneComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.ZoneService }, { token: i2.LayerService }, { token: i2.BaseUserService }, { token: i2.NavigationService }, { token: i2.CommentService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-AddAudioZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AddAudioZoneComponent, selector: "lib-add-audio-zone", inputs: { spaceID: "spaceID", defaultZone: "defaultZone", zones: "zones", currentAudioZone: "currentAudioZone" }, outputs: { updatedZone: "updatedZone" }, ngImport: i0, template: "<div class=\"main-container\">\r\n    <div class=\"col-lg-6 col-md-6 col-sm-7\" *ngIf=\"isAddingAudio\">\r\n        <form (ngSubmit)=\"onUploadAudio()\" [formGroup]=\"commentForm\">\r\n                <div class=\"mb-3 row\">\r\n                    <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                    <div class=\"col-sm-10\">\r\n                        <input type=\"text\" class=\"form-control\" required formControlName=\"title\">\r\n                    </div>\r\n                </div>\r\n                <div>\r\n                    <label for=\"file\" class=\"btn btn-label-file rounded-pill\">\r\n                        <input type=\"file\" id=\"file\" (change)=\"handleFileInput($event)\" />\r\n                        {{'Choose File' | translate}}</label>\r\n                    <p *ngIf=\"fileToUpload\">{{ fileToUpload.name}}</p>\r\n                </div>\r\n                <div class=\"mt-3\">\r\n                    <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\">{{'Upload' | translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancelAudioUpload()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                        {{'Cancel' | translate}}</button>\r\n                </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"col-7\" *ngIf=\"!isAddingAudio\">\r\n        <div class=\"choose-audio-div\" *ngIf=\"audiosForSpace\">\r\n            <div ngbDropdown class=\"row d-inline-block dropdown\">\r\n                <div>\r\n                        <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                            ngbDropdownToggle>{{chosenAudio ?\r\n                                chosenAudio.title : ('choose-audio' | translate) }}</button>\r\n                        <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                            <button type=\"button\" ngbDropdownItem *ngFor=\"let audio of audiosForSpace\" \r\n                                (click)=\"onChooseAudio(audio)\">{{ audio.title }}\r\n                            </button>\r\n                        </div>\r\n                </div>\r\n            </div>\r\n            <p>{{'or' | translate}}</p>\r\n            <button (click)=\"isAddingAudio=true\" class=\"btn btn-primary rounded-pill me-2\"> {{'add-audio' | translate}}</button>\r\n        </div>\r\n        <div class=\"row mb-3 mt-3\">\r\n            <div class=\"col\">\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"chosenAudio\">\r\n            <p>{{ chosenScansOnPlan.length }} {{'scans-chosen-audio' | translate}}</p>\r\n        </div>\r\n\r\n        <div class=\"mt-3\">\r\n            <button class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\" (click)=\"onSubmit()\">{{'Save' | translate}}</button>\r\n            <button (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n        </div>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [navIDsZoneEdit]=\"chosenScansOnPlan\" [spaceID]=\"spaceID\"\r\n        (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>\r\n", styles: [".choose-audio-div{display:flex;align-items:center}.choose-audio-div button{margin-bottom:0}.choose-audio-div p{margin-bottom:0;margin-left:5px;margin-right:5px}\n"], components: [{ type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: ["spaceID", "chosenScansOnPlan", "newZoneData", "navIDsZoneEdit"], outputs: ["sweepsSelected"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$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]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i3$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i3$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe } });
+AddAudioZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AddAudioZoneComponent, selector: "lib-add-audio-zone", inputs: { spaceID: "spaceID", defaultZone: "defaultZone", zones: "zones", currentAudioZone: "currentAudioZone" }, outputs: { updatedZone: "updatedZone" }, ngImport: i0, template: "<div class=\"main-container\">\r\n    <div class=\"col-lg-6 col-md-6 col-sm-7\" *ngIf=\"isAddingAudio\">\r\n        <form (ngSubmit)=\"onUploadAudio()\" [formGroup]=\"commentForm\">\r\n                <div class=\"mb-3 row\">\r\n                    <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                    <div class=\"col-sm-10\">\r\n                        <input type=\"text\" class=\"form-control\" required formControlName=\"title\">\r\n                    </div>\r\n                </div>\r\n                <div>\r\n                    <label for=\"file\" class=\"btn btn-label-file rounded-pill\">\r\n                        <input type=\"file\" id=\"file\" (change)=\"handleFileInput($event)\" />\r\n                        {{'Choose File' | translate}}</label>\r\n                    <p *ngIf=\"fileToUpload\">{{ fileToUpload.name}}</p>\r\n                </div>\r\n                <div class=\"mt-3\">\r\n                    <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\">{{'Upload' | translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancelAudioUpload()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                        {{'Cancel' | translate}}</button>\r\n                </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"col-7\" *ngIf=\"!isAddingAudio\">\r\n        <div class=\"choose-audio-div\" *ngIf=\"audiosForSpace\">\r\n            <div ngbDropdown class=\"row d-inline-block dropdown\">\r\n                <div>\r\n                        <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                            ngbDropdownToggle>{{chosenAudio ?\r\n                                chosenAudio.title : ('choose-audio' | translate) }}</button>\r\n                        <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                            <button type=\"button\" ngbDropdownItem *ngFor=\"let audio of audiosForSpace\" \r\n                                (click)=\"onChooseAudio(audio)\">{{ audio.title }}\r\n                            </button>\r\n                        </div>\r\n                </div>\r\n            </div>\r\n            <p>{{'or' | translate}}</p>\r\n            <button (click)=\"isAddingAudio=true\" class=\"btn btn-primary rounded-pill me-2\"> {{'add-audio' | translate}}</button>\r\n        </div>\r\n        <div class=\"row mb-3 mt-3\">\r\n            <div class=\"col\">\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"chosenAudio\">\r\n            <p>{{ chosenScansOnPlan.length }} {{'scans-chosen-audio' | translate}}</p>\r\n        </div>\r\n\r\n        <div class=\"mt-3\">\r\n            <button class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\" (click)=\"onSubmit()\">{{'Save' | translate}}</button>\r\n            <button (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n        </div>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [navIDsZoneEdit]=\"chosenScansOnPlan\" [spaceID]=\"spaceID\" [occupiedSweeps]=\"occupiedSweeps\"\r\n        (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>\r\n", styles: [".choose-audio-div{display:flex;align-items:center}.choose-audio-div button{margin-bottom:0}.choose-audio-div p{margin-bottom:0;margin-left:5px;margin-right:5px}\n"], components: [{ type: SweepPlanSelectionComponent, selector: "lib-sweep-plan-selection", inputs: ["spaceID", "chosenScansOnPlan", "newZoneData", "navIDsZoneEdit", "occupiedSweeps"], outputs: ["sweepsSelected"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$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]" }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i3$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i3$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }], pipes: { "translate": i3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AddAudioZoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-add-audio-zone', template: "<div class=\"main-container\">\r\n    <div class=\"col-lg-6 col-md-6 col-sm-7\" *ngIf=\"isAddingAudio\">\r\n        <form (ngSubmit)=\"onUploadAudio()\" [formGroup]=\"commentForm\">\r\n                <div class=\"mb-3 row\">\r\n                    <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                    <div class=\"col-sm-10\">\r\n                        <input type=\"text\" class=\"form-control\" required formControlName=\"title\">\r\n                    </div>\r\n                </div>\r\n                <div>\r\n                    <label for=\"file\" class=\"btn btn-label-file rounded-pill\">\r\n                        <input type=\"file\" id=\"file\" (change)=\"handleFileInput($event)\" />\r\n                        {{'Choose File' | translate}}</label>\r\n                    <p *ngIf=\"fileToUpload\">{{ fileToUpload.name}}</p>\r\n                </div>\r\n                <div class=\"mt-3\">\r\n                    <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\">{{'Upload' | translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancelAudioUpload()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                        {{'Cancel' | translate}}</button>\r\n                </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"col-7\" *ngIf=\"!isAddingAudio\">\r\n        <div class=\"choose-audio-div\" *ngIf=\"audiosForSpace\">\r\n            <div ngbDropdown class=\"row d-inline-block dropdown\">\r\n                <div>\r\n                        <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                            ngbDropdownToggle>{{chosenAudio ?\r\n                                chosenAudio.title : ('choose-audio' | translate) }}</button>\r\n                        <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                            <button type=\"button\" ngbDropdownItem *ngFor=\"let audio of audiosForSpace\" \r\n                                (click)=\"onChooseAudio(audio)\">{{ audio.title }}\r\n                            </button>\r\n                        </div>\r\n                </div>\r\n            </div>\r\n            <p>{{'or' | translate}}</p>\r\n            <button (click)=\"isAddingAudio=true\" class=\"btn btn-primary rounded-pill me-2\"> {{'add-audio' | translate}}</button>\r\n        </div>\r\n        <div class=\"row mb-3 mt-3\">\r\n            <div class=\"col\">\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"chosenAudio\">\r\n            <p>{{ chosenScansOnPlan.length }} {{'scans-chosen-audio' | translate}}</p>\r\n        </div>\r\n\r\n        <div class=\"mt-3\">\r\n            <button class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\" (click)=\"onSubmit()\">{{'Save' | translate}}</button>\r\n            <button (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n        </div>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [navIDsZoneEdit]=\"chosenScansOnPlan\" [spaceID]=\"spaceID\"\r\n        (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>\r\n", styles: [".choose-audio-div{display:flex;align-items:center}.choose-audio-div button{margin-bottom:0}.choose-audio-div p{margin-bottom:0;margin-left:5px;margin-right:5px}\n"] }]
+            args: [{ selector: 'lib-add-audio-zone', template: "<div class=\"main-container\">\r\n    <div class=\"col-lg-6 col-md-6 col-sm-7\" *ngIf=\"isAddingAudio\">\r\n        <form (ngSubmit)=\"onUploadAudio()\" [formGroup]=\"commentForm\">\r\n                <div class=\"mb-3 row\">\r\n                    <label class=\"col-sm-2 col-form-label\">{{'Name' | translate}} *</label>\r\n                    <div class=\"col-sm-10\">\r\n                        <input type=\"text\" class=\"form-control\" required formControlName=\"title\">\r\n                    </div>\r\n                </div>\r\n                <div>\r\n                    <label for=\"file\" class=\"btn btn-label-file rounded-pill\">\r\n                        <input type=\"file\" id=\"file\" (change)=\"handleFileInput($event)\" />\r\n                        {{'Choose File' | translate}}</label>\r\n                    <p *ngIf=\"fileToUpload\">{{ fileToUpload.name}}</p>\r\n                </div>\r\n                <div class=\"mt-3\">\r\n                    <button type=\"submit\" class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\">{{'Upload' | translate}}</button>\r\n                    <button type=\"button\" (click)=\"onCancelAudioUpload()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                        {{'Cancel' | translate}}</button>\r\n                </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"col-7\" *ngIf=\"!isAddingAudio\">\r\n        <div class=\"choose-audio-div\" *ngIf=\"audiosForSpace\">\r\n            <div ngbDropdown class=\"row d-inline-block dropdown\">\r\n                <div>\r\n                        <button type=\"button\" class=\"btn btn-label-file rounded-pill\" id=\"dropdownBasic1\"\r\n                            ngbDropdownToggle>{{chosenAudio ?\r\n                                chosenAudio.title : ('choose-audio' | translate) }}</button>\r\n                        <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\">\r\n                            <button type=\"button\" ngbDropdownItem *ngFor=\"let audio of audiosForSpace\" \r\n                                (click)=\"onChooseAudio(audio)\">{{ audio.title }}\r\n                            </button>\r\n                        </div>\r\n                </div>\r\n            </div>\r\n            <p>{{'or' | translate}}</p>\r\n            <button (click)=\"isAddingAudio=true\" class=\"btn btn-primary rounded-pill me-2\"> {{'add-audio' | translate}}</button>\r\n        </div>\r\n        <div class=\"row mb-3 mt-3\">\r\n            <div class=\"col\">\r\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-pill me-2\" (click)=\"togglePlan()\">{{'Choose scan points on plan' |\r\n                        translate}}</button>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"chosenAudio\">\r\n            <p>{{ chosenScansOnPlan.length }} {{'scans-chosen-audio' | translate}}</p>\r\n        </div>\r\n\r\n        <div class=\"mt-3\">\r\n            <button class=\"btn btn-primary rounded-pill me-2\" [disabled]=\"fromPlan\" (click)=\"onSubmit()\">{{'Save' | translate}}</button>\r\n            <button (click)=\"onCancel()\" class=\"btn btn-outline-primary rounded-pill me-2\">\r\n                    {{'Cancel' | translate}}</button>\r\n        </div>\r\n    </div>\r\n    <div class=\"edit-plan\" *ngIf=\"fromPlan\">\r\n        <lib-sweep-plan-selection style=\"width: 100%;\" [navIDsZoneEdit]=\"chosenScansOnPlan\" [spaceID]=\"spaceID\" [occupiedSweeps]=\"occupiedSweeps\"\r\n        (sweepsSelected)=\"onSelectedSweepsFromPlan($event)\"></lib-sweep-plan-selection>\r\n    </div>\r\n</div>\r\n", styles: [".choose-audio-div{display:flex;align-items:center}.choose-audio-div button{margin-bottom:0}.choose-audio-div p{margin-bottom:0;margin-left:5px;margin-right:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: i2.ZoneService }, { type: i2.LayerService }, { type: i2.BaseUserService }, { type: i2.NavigationService }, { type: i2.CommentService }, { type: i3.TranslateService }]; }, propDecorators: { spaceID: [{
                 type: Input
             }], updatedZone: [{